Pre-release para version 2.9.0 de TSComponents

dist/css/components.css

@@ -38,6 +38,10 @@
   width: 100%;
 }
 
+.exportable-graph > div > div:first-child {
+  z-index: auto !important;
+}
+
 .exportable-graph div:not(.g-pickers-container, [data-highcharts-chart]) { /* Force highcharts to set the height from container */
   height: 100%;
 }
@@ -72,8 +76,8 @@
   font-size: 13px;
 }
 
-div.highcharts-container:hover {
-  z-index: 1 !important;
+div.highcharts-container {
+  z-index: auto !important;
 }
 
 /* Tooltip styles for iframing or third-party pages */
@@ -199,10 +203,31 @@ div.highcharts-tooltip-box span table tbody tr td span.tooltip-value {
   overflow: hidden;
 }
 
+.highcharts-label.highcharts-range-input {
+  color: rgb(104, 104, 104);
+  letter-spacing: normal;
+  text-rendering: optimizeLegibility;
+  word-spacing: 0px;
+  z-index: 1;
+}
+
+.highcharts-range-selector {
+  border-color: rgb(192, 192, 192);
+  color: rgb(104, 104, 104);
+  letter-spacing: normal;
+  line-height: 14px;
+  text-rendering: optimizeLegibility;
+  vertical-align: baseline;
+  word-spacing: 0px;
+}
+
 .highcharts-range-selector:focus {
-  top: 75px !important;
-  width: 95px !important;
-  height: 25px !important;
+  top: 12px !important;
+  width: 90px !important;
+  height: 20px !important;
+  margin-left: 2px;
+  border: 0px !important;
+  z-index: 2;
 }
 
 div.g-pickers-container {
@@ -218,7 +243,6 @@ div.g-pickers-container div.g-picker {
 
 /*---Fin Graphic---*/
 
-
 /*---Card---*/
 
 /*-General Styles-*/
@@ -961,6 +985,16 @@ main a[href^="https://"][target^="_blank"]::after {
 
 /*---Fin PreviewCard---*/
 
+/*---CardRow---*/
+
+div.r-row {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 40px;
+}
+
+/*---Fin CardRow---*/
+
 /*---Iconos---*/
 
 .fa-angle-up, .fa-link, .caret {

docs/reference/ts-components.md

@@ -1,10 +1,10 @@
 # TSComponents
 
-**Versión**: 2.8.1
+**Versión**: 2.9.0
 
 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.8.1/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.9.0/dist/js/components.js
 
 ## Componentes
 
@@ -21,13 +21,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.8.1/dist/js/components.js'></script>
+<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.9.0/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.8.1/dist/css/components.css'/>
+<link rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.9.0/dist/css/components.css'/>
 ```
 
 * Definir dónde se va a dibujar:

docs/reference/ts-components/card.md

@@ -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.8.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.8.1/dist/js/components.js'></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.9.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.9.0/dist/js/components.js'></script>
 
 <style>
     .row {
@@ -21,17 +21,17 @@ El componente `card` permite embeber tarjetas con información de la serie, y un
 </div>
 
 ## Ejemplo base
-Ver online: [https://jsfiddle.net/tj2b1fm6/](https://jsfiddle.net/tj2b1fm6/)
+Ver online: [https://jsfiddle.net/nuL2oefw/](https://jsfiddle.net/nuL2oefw/)
 
 ```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.8.1/dist/js/components.js'></script>
+<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.9.0/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.8.1/dist/css/components.css'/>
+<link rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.9.0/dist/css/components.css'/>
 
 <!-- código HTML donde ubicar un div con una tarjeta -->
 <div id="tmi"></div>
@@ -200,10 +200,18 @@ Ver online: [https://jsfiddle.net/tj2b1fm6/](https://jsfiddle.net/tj2b1fm6/)
         <td>decimalsMillion</td>
         <td>No</td>
         <td>Cantidad de dígitos decimales a mostrar en aquellos números que son abreviados y divididos por un millón. Supeditará al valor del parámetro decimals.</td>
-        <td>boolean</td>
+        <td>int</td>
         <td>2</td>
         <td>0</td>
     </tr>
+    <tr>
+        <td>isPercentage</td>
+        <td>No</td>
+        <td>Flag que indica si el valor de la Card debe ser tratado como uno porcentual o no porcentual. Si no se especifica valor, se respetará lo indicado por la API.</td>
+        <td>boolean</td>
+        <td>Ninguno</td>
+        <td>true</td>
+    </tr>
 </table>
 
 ## Paleta de colores por defecto
@@ -261,7 +269,7 @@ Si se habilita la abreviatura y formateo de números grandes, encendiendo el fla
 ```
 
 ## Demo online
-[https://jsfiddle.net/tj2b1fm6/](https://jsfiddle.net/tj2b1fm6/)
+[https://jsfiddle.net/nuL2oefw/](https://jsfiddle.net/nuL2oefw/)
 
 ## Variantes de tarjetas
 

docs/reference/ts-components/card/index.html

@@ -745,8 +745,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.8.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.8.1/dist/js/components.js'></script></p>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.9.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.9.0/dist/js/components.js'></script></p>
 <style>
     .row {
         width: 90%;
@@ -762,15 +762,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/tj2b1fm6/">https://jsfiddle.net/tj2b1fm6/</a></p>
+<p>Ver online: <a href="https://jsfiddle.net/nuL2oefw/">https://jsfiddle.net/nuL2oefw/</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.8.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="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.9.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="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.8.1/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.9.0/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>
@@ -939,10 +939,18 @@ <h2 id="tabla-de-parametros"><a class="toclink" href="#tabla-de-parametros">Tabl
         <td>decimalsMillion</td>
         <td>No</td>
         <td>Cantidad de dígitos decimales a mostrar en aquellos números que son abreviados y divididos por un millón. Supeditará al valor del parámetro decimals.</td>
-        <td>boolean</td>
+        <td>int</td>
         <td>2</td>
         <td>0</td>
     </tr>
+    <tr>
+        <td>isPercentage</td>
+        <td>No</td>
+        <td>Flag que indica si el valor de la Card debe ser tratado como uno porcentual o no porcentual. Si no se especifica valor, se respetará lo indicado por la API.</td>
+        <td>boolean</td>
+        <td>Ninguno</td>
+        <td>true</td>
+    </tr>
 </table>
 
 <h2 id="paleta-de-colores-por-defecto"><a class="toclink" href="#paleta-de-colores-por-defecto">Paleta de colores por defecto</a><a class="headerlink" href="#paleta-de-colores-por-defecto" title="Permanent link">&#128279;</a></h2>
@@ -997,7 +1005,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><a href="https://jsfiddle.net/tj2b1fm6/">https://jsfiddle.net/tj2b1fm6/</a></p>
+<p><a href="https://jsfiddle.net/nuL2oefw/">https://jsfiddle.net/nuL2oefw/</a></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">

docs/reference/ts-components/examples.md

@@ -1,6 +1,6 @@
 <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.8.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.8.1/dist/js/components.js'></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.9.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.9.0/dist/js/components.js'></script>
 
 <style>
 .row {

docs/reference/ts-components/examples/index.html

@@ -1127,8 +1127,8 @@
 
 
                 <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.8.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.8.1/dist/js/components.js'></script></p>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.9.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.9.0/dist/js/components.js'></script></p>
 <style>
 .row {
     width: 90%;

docs/reference/ts-components/graphic.md

@@ -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/tj0597zx/](https://jsfiddle.net/tj0597zx/)
+Ver online: [https://jsfiddle.net/bue36s5q/](https://jsfiddle.net/bue36s5q/)
 
-<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.8.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.8.1/dist/css/components.css'/>
+<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.9.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.9.0/dist/css/components.css'/>
 
 <div id="tmi"></div>
 
@@ -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.8.1/dist/js/components.js'></script>
+<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.9.0/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.8.1/dist/css/components.css'/>
+<link rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.9.0/dist/css/components.css'/>
 
 <!-- código HTML donde ubicar un div con un gráfico -->
 <div id="tmi"></div>
@@ -348,8 +348,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.8.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.8.1/dist/css/components.css'/>
+  <script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.9.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.9.0/dist/css/components.css'/>
   <div id="root"></div>
   <script>
     window.onload = function () {