Skip to content

Commit

Permalink
Pre-release para version 2.5.1 de TSComponents
Browse files Browse the repository at this point in the history
  • Loading branch information
@pepeciavirella
pepeciavirella committed Sep 10, 2019
1 parent 50179db commit 3925966
Show file tree
Hide file tree
Showing 14 changed files with 86 additions and 86 deletions.
4 changes: 2 additions & 2 deletions dist/js/components.js
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions docs/reference/ts-components.md
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# TSComponents

**Versión**: 2.5.0
**Versión**: 2.5.1

El objeto `TSComponents` contiene distintos componentes exportables que se pueden utilizar dentro de una experiencia web.

Está en el archivo llamado `components.js` y se aloja versionado en el CDN: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.0/dist/js/components.js
Está en el archivo llamado `components.js` y se aloja versionado en el CDN: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.1/dist/js/components.js

## Componentes

Expand All @@ -19,13 +19,13 @@ Todos los componentes se usan de la misma manera.
* Importar librería JS:

```html
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.0/dist/js/components.js'></script>
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.1/dist/js/components.js'></script>
```

* Importar hoja de estilos CSS:

```html
<link rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.0/dist/css/components.css'/>
<link rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.1/dist/css/components.css'/>
```

* Definir dónde se va a dibujar:
Expand Down
12 changes: 6 additions & 6 deletions docs/reference/ts-components/card.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
El componente `card` permite embeber tarjetas con información de la serie, y un gráfico incluído dentro de la misma, en sitios web.

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" media="all" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.0/dist/css/components.css" type="text/css">
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.0/dist/js/components.js'></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.1/dist/css/components.css" type="text/css">
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.1/dist/js/components.js'></script>

<style>
.row {
Expand All @@ -22,17 +22,17 @@ El componente `card` permite embeber tarjetas con información de la serie, y un


## Ejemplo base
Ver online: [https://jsfiddle.net/c4nm2kd6/](https://jsfiddle.net/c4nm2kd6/)
Ver online: [https://jsfiddle.net/2oufyzwL/](https://jsfiddle.net/2oufyzwL/)

```html
<!-- importa íconos de FontAwesome -->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" media="all" />

<!-- importa librería JS -->
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.0/dist/js/components.js'></script>
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.1/dist/js/components.js'></script>

<!-- importa hoja de estilos CSS -->
<link rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.0/dist/css/components.css'/>
<link rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.1/dist/css/components.css'/>

<!-- código HTML donde ubicar un div con una tarjeta -->
<div id="tmi"></div>
Expand Down Expand Up @@ -206,7 +206,7 @@ Ver online: [https://jsfiddle.net/c4nm2kd6/](https://jsfiddle.net/c4nm2kd6/)
```

## Demo online
https://jsfiddle.net/c4nm2kd6/
https://jsfiddle.net/2oufyzwL/

## Variantes de tarjetas

Expand Down
12 changes: 6 additions & 6 deletions docs/reference/ts-components/card/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -705,8 +705,8 @@
<h1 id="componente-card"><a class="toclink" href="#componente-card">Componente: card</a><a class="headerlink" href="#componente-card" title="Permanent link">&#128279;</a></h1>
<p>El componente <code>card</code> permite embeber tarjetas con información de la serie, y un gráfico incluído dentro de la misma, en sitios web.</p>
<p><link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" media="all" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.0/dist/css/components.css" type="text/css">
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.0/dist/js/components.js'></script></p>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.1/dist/css/components.css" type="text/css">
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.1/dist/js/components.js'></script></p>
<style>
.row {
width: 90%;
Expand All @@ -722,15 +722,15 @@ <h1 id="componente-card"><a class="toclink" href="#componente-card">Componente:
</div>

<h2 id="ejemplo-base"><a class="toclink" href="#ejemplo-base">Ejemplo base</a><a class="headerlink" href="#ejemplo-base" title="Permanent link">&#128279;</a></h2>
<p>Ver online: <a href="https://jsfiddle.net/c4nm2kd6/">https://jsfiddle.net/c4nm2kd6/</a></p>
<p>Ver online: <a href="https://jsfiddle.net/2oufyzwL/">https://jsfiddle.net/2oufyzwL/</a></p>
<div class="codehilite"><pre><span></span><span class="c">&lt;!-- importa íconos de FontAwesome --&gt;</span>
<span class="p">&lt;</span><span class="nt">link</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css&quot;</span> <span class="na">media</span><span class="o">=</span><span class="s">&quot;all&quot;</span> <span class="p">/&gt;</span>

<span class="c">&lt;!-- importa librería JS --&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#39;text/javascript&#39;</span> <span class="na">src</span><span class="o">=</span><span class="s">&#39;https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.0/dist/js/components.js&#39;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&#39;text/javascript&#39;</span> <span class="na">src</span><span class="o">=</span><span class="s">&#39;https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.1/dist/js/components.js&#39;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

<span class="c">&lt;!-- importa hoja de estilos CSS --&gt;</span>
<span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#39;stylesheet&#39;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#39;text/css&#39;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#39;https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.0/dist/css/components.css&#39;</span><span class="p">/&gt;</span>
<span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#39;stylesheet&#39;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#39;text/css&#39;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#39;https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.1/dist/css/components.css&#39;</span><span class="p">/&gt;</span>

<span class="c">&lt;!-- código HTML donde ubicar un div con una tarjeta --&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;tmi&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
Expand Down Expand Up @@ -903,7 +903,7 @@ <h2 id="ejemplo-completo"><a class="toclink" href="#ejemplo-completo">Ejemplo co


<h2 id="demo-online"><a class="toclink" href="#demo-online">Demo online</a><a class="headerlink" href="#demo-online" title="Permanent link">&#128279;</a></h2>
<p>https://jsfiddle.net/c4nm2kd6/</p>
<p>https://jsfiddle.net/2oufyzwL/</p>
<h2 id="variantes-de-tarjetas"><a class="toclink" href="#variantes-de-tarjetas">Variantes de tarjetas</a><a class="headerlink" href="#variantes-de-tarjetas" title="Permanent link">&#128279;</a></h2>
<h3 id="card-default"><a class="toclink" href="#card-default">Card: default</a><a class="headerlink" href="#card-default" title="Permanent link">&#128279;</a></h3>
<div class="row">
Expand Down
42 changes: 21 additions & 21 deletions docs/reference/ts-components/graphic.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
El componente `graphic` permite embeber gráficos de líneas, áreas o barras en experiencias web. Permite elegir distintos elementos de filtro de fechas, personalizar los textos, etc.

## Ejemplo base
Ver online: [https://jsfiddle.net/pghmcont/](https://jsfiddle.net/pghmcont/)
Ver online: [https://jsfiddle.net/zb9dm0xu/](https://jsfiddle.net/zb9dm0xu/)

<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.0/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.5.0/dist/css/components.css'/>
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.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.5.1/dist/css/components.css'/>

<div id="tmi"></div>

Expand All @@ -27,10 +27,10 @@ Este gráfico se genera a partir del siguiente código:

```html
<!-- importa librería JS -->
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.0/dist/js/components.js'></script>
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.1/dist/js/components.js'></script>

<!-- importa hoja de estilos CSS -->
<link rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.0/dist/css/components.css'/>
<link rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.1/dist/css/components.css'/>

<!-- código HTML donde ubicar un div con un gráfico -->
<div id="tmi"></div>
Expand Down Expand Up @@ -70,15 +70,15 @@ Este gráfico se genera a partir del siguiente código:
<tr>
<td>chartOptions</td>
<td>No</td>
<td>Cualquier opción válida para [Highcharts](https://api.highcharts.com/highcharts/)</td>
<td>Cualquier opción válida para [Highcharts](https://api.highcharts.com/highcharts/).</td>
<td>object</td>
<td>{}</td>
<td></td>
</tr>
<tr>
<td>navigator</td>
<td>No</td>
<td>Indica si está habilitada la funcionalidad de navegación de la serie</td>
<td>Indica si está habilitada la funcionalidad de navegación de la serie.</td>
<td>boolean</td>
<td>Dinámico</td>
<td>true / false</td>
Expand All @@ -94,15 +94,15 @@ Este gráfico se genera a partir del siguiente código:
<tr>
<td>zoom</td>
<td>No</td>
<td>Indica si tiene habilitada la funcionalidad de zoom</td>
<td>Indica si tiene habilitada la funcionalidad de zoom.</td>
<td>boolean</td>
<td>Dinámico</td>
<td>true / false</td>
</tr>
<tr>
<td>exportable</td>
<td>No</td>
<td>Indica si tiene habilitada la funcionalidad de exportar el gráfico</td>
<td>Indica si tiene habilitada la funcionalidad de exportar el gráfico.</td>
<td>boolean</td>
<td>Dinámico</td>
<td>true / false</td>
Expand All @@ -118,71 +118,71 @@ Este gráfico se genera a partir del siguiente código:
<tr>
<td>backgroundColor</td>
<td>No</td>
<td>Color de fondo del gráfico en formato hexadecimal</td>
<td>Color de fondo del gráfico en formato hexadecimal.</td>
<td>string</td>
<td>#cdcdcd</td>
<td>#cdcdcd</td>
</tr>
<tr>
<td>datePickerEnabled</td>
<td>No</td>
<td>Indica si el selector de fechas está habilitado</td>
<td>Indica si el selector de fechas está habilitado.</td>
<td>boolean</td>
<td>Dinámica</td>
<td>true / false</td>
</tr>
<tr>
<td>legendField</td>
<td>No</td>
<td>Indica el campo de la serie a usar para mostrar la leyenda</td>
<td>Indica el campo de la serie a usar para mostrar la leyenda.</td>
<td>string</td>
<td>'title'</td>
<td>"title", "description" o "id"</td>
</tr>
<tr>
<td>chartTypes</td>
<td>No</td>
<td>Especifica el tipo de gráfico a usar para cada serie</td>
<td>Especifica el tipo de gráfico a usar para cada serie<./td>
<td>object</td>
<td>'line' para todas las series</td>
<td>{'tmi_arg': 'column', 'tmi_02': 'line', 'tmi_06': 'area'}</td>
</tr>
<tr>
<td>title</td>
<td>No</td>
<td>Especifica el título el gráfico</td>
<td>Especifica el título el gráfico.</td>
<td>string</td>
<td>Ninguno</td>
<td>Tasa de Mortalidad Infantil de Argentina</td>
</tr>
<tr>
<td>source</td>
<td>No</td>
<td>Especifica el texto al pie del gráfico</td>
<td>Especifica el texto al pie del gráfico.</td>
<td>string</td>
<td>Ninguno</td>
<td>Dirección de Estadística e Información en Salud (DEIS). Secretaría de Gobierno de Salud</td>
</tr>
<tr>
<td>displayUnits</td>
<td>No</td>
<td>Indica si se muestran las unidades del gráfico</td>
<td>Indica si se muestran las unidades del gráfico.</td>
<td>boolean</td>
<td>Dinámico</td>
<td>true / false</td>
</tr>
<tr>
<td>legendLabel</td>
<td>No</td>
<td>Especifica el texto a mostrar como leyenda por cada serie</td>
<td>Especifica el texto a mostrar como leyenda por cada serie.</td>
<td>object</td>
<td>{}</td>
<td>{'serie01': 'leyenda custom'}</td>
</tr>
<tr>
<td>seriesAxis</td>
<td>No</td>
<td>Especifica de qué lado del gráfico mostrar las ordenadas y unidades de cada serie representada. Puede haber más de una serie en un mismo lado. Si hay una sola serie, debe ir obligatoriamente del lado izquierdo</td>
<td>Especifica de qué lado del gráfico mostrar las ordenadas y unidades de cada serie representada. Puede haber más de una serie en un mismo lado. Si hay una sola serie, debe ir obligatoriamente del lado izquierdo.</td>
<td>object</td>
<td>{}</td>
<td>{'serie01': 'right',
Expand All @@ -191,7 +191,7 @@ Este gráfico se genera a partir del siguiente código:
<tr>
<td>chartType</td>
<td>No</td>
<td>Especifica un tipo de gráfico para aplicar a todas las series como default. En caso de estar especificado un tipo para una serie en chartTypes, este último será priorizado para la misma</td>
<td>Especifica un tipo de gráfico para aplicar a todas las series como default. En caso de estar especificado un tipo para una serie en chartTypes, este último será priorizado para la misma.</td>
<td>string</td>
<td>'line'</td>
<td>'line', 'area' o 'column'</td>
Expand Down Expand Up @@ -230,8 +230,8 @@ Varios componentes del gráfico se muestran/ocultan dinámicamente dependiendo d
```html
<html>
<body>
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.0/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.5.0/dist/css/components.css'/>
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.5.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.5.1/dist/css/components.css'/>
<div id="root"></div>
<script>
window.onload = function () {
Expand Down
Loading

0 comments on commit 3925966

Please sign in to comment.