Skip to content

Commit

Permalink
Merge pull request #508 from datosgobar/504-actualizar-webcode
Browse files Browse the repository at this point in the history
504 - Actualizar webcode de Components exportables
  • Loading branch information
pepeciavirella authored Sep 24, 2019
2 parents ba4e9d6 + e9dbbd2 commit a584a56
Show file tree
Hide file tree
Showing 13 changed files with 553 additions and 208 deletions.
60 changes: 0 additions & 60 deletions src/components/common/webCodeBuilders.ts

This file was deleted.

1 change: 1 addition & 0 deletions src/components/exportable/CardExportable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ export default class CardExportable extends React.Component<ICardExportableProps

return {
cardOptions: {
apiBaseUrl: this.props.apiBaseUrl,
chartType: this.props.chartType,
collapse: this.props.collapse,
color: this.props.color,
Expand Down
2 changes: 1 addition & 1 deletion src/components/exportable_card/FullCardDownload.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { formatUrl } from '../common/linkBuilders';
import { formatUrl } from "../../helpers/card/cardLinkBuilders";


export default (props: { downloadUrl: string }) =>
Expand Down
18 changes: 11 additions & 7 deletions src/components/exportable_card/FullCardDropdown.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import * as React from 'react';
import { formatUrl, viewDatosGobAr } from '../common/linkBuilders';
import { formatUrl, viewDatosGobAr } from "../../helpers/card/cardLinkBuilders";
import FullCardDropdownContainer from '../style/exportable_card/FullCardDropdownContainer';
import LinkShareItem from '../style/Share/LinkShareItem';
import { ICardLinksOptions } from './FullCardLinks';
import { cardWebCode } from '../common/webCodeBuilders';
import { cardWebCode } from '../../helpers/common/webCodeBuilders';

export default (props: {options: ICardLinksOptions}) =>
<FullCardDropdownContainer text="Enlaces">
Expand All @@ -14,15 +14,19 @@ export default (props: {options: ICardLinksOptions}) =>
</FullCardDropdownContainer>

export interface IWebSnippetOptions {
serieId: string,
color: string,
links: string
hasChart: string,
chartType?: string,
serieId: string;
color: string;
links: string;
hasChart: string;
locale?: string;
chartType?: string;
explicitSign?: boolean;
title?: string;
source?: string;
units?: string;
hasFrame?: boolean;
hasColorBar?: boolean;
collapse?: string;
apiBaseUrl?: string;
decimals?: number;
}
2 changes: 1 addition & 1 deletion src/components/exportable_card/FullCardViewMore.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { viewDatosGobAr } from '../common/linkBuilders';
import { viewDatosGobAr } from "../../helpers/card/cardLinkBuilders";


export default (props: {serieId: string, collapse?: string}) =>
Expand Down
2 changes: 1 addition & 1 deletion src/components/style/exportable_card/FullCardContainer.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { viewDatosGobAr } from '../../common/linkBuilders';
import { viewDatosGobAr } from "../../../helpers/card/cardLinkBuilders";


export interface IFullCardContainerProps extends React.HTMLProps<HTMLDivElement> {
Expand Down
73 changes: 3 additions & 70 deletions src/components/viewpage/share/ShareDropdown.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react';
import ChartTypeSelector from '../../../api/ChartTypeSelector';
import { ISerie } from '../../../api/Serie';
import { csvShareURL, jsonShareURL, webShareURL } from "../../../helpers/graphic/graphicLinkBuilders";
import { graphicWebCode } from '../../../helpers/common/webCodeBuilders';
import LinkShareItem from "../../style/Share/LinkShareItem";
import ShareDropdownContainer from "../../style/Share/ShareDropdownContainer";

Expand All @@ -15,73 +16,5 @@ export default (props: IShareDropdownProps) =>
<LinkShareItem url={webShareURL()} text="Enlace web" />
<LinkShareItem url={csvShareURL(props.url)} text="Enlace CSV" />
<LinkShareItem url={jsonShareURL(props.url)} text="Enlace JSON" />
<LinkShareItem url={webCodeUrl(props.url, props.series)} text="Código web" />
<LinkShareItem url={graphicWebCode(props.url, props.series)} text="Código web" />
</ShareDropdownContainer>


function webShareURL(): string {
return window.location.href;
}

function csvShareURL(url: string): string {
const host = url.split('?')[0];
const params = url.split('?')[1];
const urlSearchParams = new URLSearchParams(params);
urlSearchParams.delete('metadata');
urlSearchParams.delete('start');
urlSearchParams.delete('chartType');

return `${urlToString(`${host}?${urlSearchParams.toString()}`)}&format=csv`;
}

function jsonShareURL(url: string): string {
return `${cleanUrl(url)}&format=json`;
}

function urlToString(url: string): string {
return url.replace(new RegExp('%2C', 'g'), ',')
.replace(new RegExp('%3A', 'g'), ':')
.replace(new RegExp('%2F', 'g'), '/')
.replace(new RegExp('%3F', 'g'), '?');
}

function webCodeUrl(url: string, series: ISerie[]): string {
return "<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.1/dist/js/components.js'></script>\n" +
"<link rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.1/dist/css/components.css'/>\n" +
"<div id=\"root\"></div>\n" +
"<script>\n" +
" window.onload = function() {\n" +
" TSComponents.Graphic.render('root', {\n" +
" graphicUrl: '" + cleanUrl(url) +"',\n"+
" title: '" + calculateChartTitle(series) + "',\n" +
" source: '" + calculateChartSource(series) + "',\n" +
" chartTypes: " + JSON.stringify(calculateChartTypes(url, series)) + ",\n" +
" })\n" +
" }\n" +
"</script>\n"
}

function calculateChartTitle(series: ISerie[]): string {
return series.length > 1 ? series[0].datasetTitle : series[0].description;
}

function calculateChartSource(series: ISerie[]): string {
return Array.from(new Set(series.map((serie: ISerie) => serie.datasetSource))).join(', ')
}

function calculateChartTypes(url: string, series: ISerie[]): any {
const params = url.split('?')[1];
const urlSearchParams = new URLSearchParams(params);

const chartTypeSelector = new ChartTypeSelector(series, urlSearchParams);
return chartTypeSelector.getChartTypesBySeries();
}

function cleanUrl(url: string): string {
const host = url.split('?')[0];
const params = url.split('?')[1];
const urlSearchParams = new URLSearchParams(params);
urlSearchParams.delete('chartType');

return `${urlToString(`${host}?${urlSearchParams.toString()}`)}`;
}
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
export function formatUrl(url: string, format: string): string {
return `${url}&format=${format}`
return `${url}&format=${format}`;
}

export function viewDatosGobAr(serieId: string, collapse?: string): string {

const viewURL = `https://datos.gob.ar/series/api/series/?ids=${serieId}`
const viewURL = `https://datos.gob.ar/series/api/series/?ids=${serieId}`;
if (collapse === undefined) {
return viewURL;
}
const finalURL = `${viewURL}&collapse=${collapse}`;
return finalURL;

}
137 changes: 137 additions & 0 deletions src/helpers/common/webCodeBuilders.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
import { ISerie } from "../../api/Serie";
import { IWebSnippetOptions } from "../../components/exportable_card/FullCardDropdown";
import { cleanUrl } from "../graphic/graphicLinkBuilders";

export function cardWebCode(options: IWebSnippetOptions): string {

let htmlScript = `<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.1/dist/js/components.js'></script>
<link rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.1/dist/css/components.css'/>
<link type='text/css' rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' media='all' />"
<div id="root"></div>
<script>
window.onload = function() {
TSComponents.Card.render('root', {
serieId: "${options.serieId}",
color: "${options.color}",
links: "${options.links}",
hasChart: "${options.hasChart}"`;

if(options.locale !== undefined)
{
htmlScript += `,
locale: "${options.locale}"`;
}
if(options.chartType !== undefined)
{
htmlScript += `,
chartType: "${options.chartType}"`;
}
if(options.explicitSign !== undefined)
{
htmlScript += `,
explicitSign: ${options.explicitSign}`;
}
if(options.title !== undefined)
{
htmlScript += `,
title: "${options.title}"`;
}
if(options.source !== undefined)
{
htmlScript += `,
source: "${options.source}"`;
}
if(options.units !== undefined)
{
htmlScript += `,
units: "${options.units}"`;
}
if(options.hasFrame !== undefined)
{
htmlScript += `,
hasFrame: ${options.hasFrame}`;
}
if(options.hasColorBar !== undefined)
{
htmlScript += `,
hasColorBar: ${options.hasColorBar}`;
}
if(options.collapse !== undefined)
{
htmlScript += `,
collapse: "${options.collapse}"`;
}
if(options.apiBaseUrl !== undefined)
{
htmlScript += `,
apiBaseUrl: "${options.apiBaseUrl}"`;
}
if(options.decimals !== undefined)
{
htmlScript += `,
decimals: ${options.decimals}`;
}

htmlScript += `
})
}
</script>
`;

return htmlScript;
}

export function graphicWebCode(url: string, series: ISerie[]): string {

const graphicUrl = cleanUrl(url);
const title = calculateChartTitle(series);
const source = calculateChartSource(series);
const chartType = calculateChartType(url);

let htmlScript = `<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.1/dist/js/components.js'></script>
<link rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.6.1/dist/css/components.css'/>
<div id=\"root\"></div>
<script>
window.onload = function() {
TSComponents.Graphic.render('root', {
graphicUrl: "${graphicUrl}",
title: "${title}",
source: "${source}"`;

if(chartType !== null && chartType !== "line") {
htmlScript += `,
chartType: "${chartType}"`;
}

htmlScript += `
})
}
</script>
`;

return htmlScript;

}

export function calculateChartTitle(series: ISerie[]): string {
return series.length > 1 ? series[0].datasetTitle : series[0].description;
}

export function calculateChartSource(series: ISerie[]): string {

const sources = Array.from(new Set(series.map((serie: ISerie) => serie.datasetSource)));
if(sources.length > 1) {
const sourcesString = sources.join(', ');
return `Fuentes: ${sourcesString}`;
}
return `Fuente: ${sources[0]}`;

}

export function calculateChartType(url: string): string | null {

const params = url.split('?')[1];
const urlSearchParams = new URLSearchParams(params);
return urlSearchParams.get('chartType');

}
28 changes: 28 additions & 0 deletions src/helpers/graphic/graphicLinkBuilders.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
export function webShareURL(): string {
return window.location.href;
}
export function urlToString(url: string): string {
return url.replace(new RegExp('%2C', 'g'), ',')
.replace(new RegExp('%3A', 'g'), ':')
.replace(new RegExp('%2F', 'g'), '/')
.replace(new RegExp('%3F', 'g'), '?');
}
export function cleanUrl(url: string): string {
const host = url.split('?')[0];
const params = url.split('?')[1];
const urlSearchParams = new URLSearchParams(params);
urlSearchParams.delete('chartType');
return `${urlToString(`${host}?${urlSearchParams.toString()}`)}`;
}
export function csvShareURL(url: string): string {
const host = url.split('?')[0];
const params = url.split('?')[1];
const urlSearchParams = new URLSearchParams(params);
urlSearchParams.delete('metadata');
urlSearchParams.delete('start');
urlSearchParams.delete('chartType');
return `${urlToString(`${host}?${urlSearchParams.toString()}`)}&format=csv`;
}
export function jsonShareURL(url: string): string {
return `${cleanUrl(url)}&format=json`;
}
Loading

0 comments on commit a584a56

Please sign in to comment.