From 284a95afb47908efe47aee8dbe0fc3c9b38943a2 Mon Sep 17 00:00:00 2001 From: pepeciavirella Date: Wed, 27 Nov 2019 12:51:46 -0300 Subject: [PATCH] Pre-release para version 2.8.1 del Explorer --- dist/js/main.js | 4 ++-- docs/reference/ts-explorer.md | 10 +++++----- docs/reference/ts-explorer/index.html | 10 +++++----- docs/search/search_index.json | 2 +- docs/sitemap.xml | 18 +++++++++--------- docs/sitemap.xml.gz | Bin 288 -> 288 bytes src/helpers/common/webCodeBuilders.ts | 4 ++-- 7 files changed, 24 insertions(+), 24 deletions(-) diff --git a/dist/js/main.js b/dist/js/main.js index ea38ec4e..14053b0b 100644 --- a/dist/js/main.js +++ b/dist/js/main.js @@ -1,2 +1,2 @@ -var TSExplorer=function(t){var e={};function n(i){if(e[i])return e[i].exports;var r=e[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:i})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/",n(n.s=1054)}([function(t,e,n){"use strict";t.exports=n(558)},function(t,e,n){var i=n(4),r=n(11),o=n(24),a=n(20),s=n(35),c=function(t,e,n){var l,u,h,f,d=t&c.F,p=t&c.G,g=t&c.S,m=t&c.P,v=t&c.B,y=p?i:g?i[e]||(i[e]={}):(i[e]||{}).prototype,b=p?r:r[e]||(r[e]={}),x=b.prototype||(b.prototype={});for(l in p&&(n=e),n)h=((u=!d&&y&&void 0!==y[l])?y:n)[l],f=v&&u?s(h,i):m&&"function"==typeof h?s(Function.call,h):h,y&&a(y,l,h,t&c.U),b[l]!=h&&o(b,l,f),m&&x[l]!=h&&(x[l]=h)};i.core=r,c.F=1,c.G=2,c.S=4,c.P=8,c.B=16,c.W=32,c.U=64,c.R=128,t.exports=c},function(t,e,n){"use strict";n.d(e,"i",function(){return i}),n.d(e,"j",function(){return r}),n.d(e,"o",function(){return o}),n.d(e,"l",function(){return a}),n.d(e,"q",function(){return s}),n.d(e,"w",function(){return c}),n.d(e,"h",function(){return l}),n.d(e,"r",function(){return u}),n.d(e,"a",function(){return h}),n.d(e,"d",function(){return f}),n.d(e,"e",function(){return d}),n.d(e,"g",function(){return p}),n.d(e,"f",function(){return g}),n.d(e,"k",function(){return m}),n.d(e,"n",function(){return v}),n.d(e,"p",function(){return y}),n.d(e,"t",function(){return b}),n.d(e,"s",function(){return x}),n.d(e,"u",function(){return w}),n.d(e,"v",function(){return _}),e.b=function(t){return t>1?0:t<-1?o:Math.acos(t)},e.c=function(t){return t>1?a:t<-1?-a:Math.asin(t)},e.m=function(t){return(t=b(t/2))*t};var i=1e-6,r=1e-12,o=Math.PI,a=o/2,s=o/4,c=2*o,l=180/o,u=o/180,h=Math.abs,f=Math.atan,d=Math.atan2,p=Math.cos,g=Math.ceil,m=Math.exp,v=(Math.floor,Math.log),y=Math.pow,b=Math.sin,x=Math.sign||function(t){return t>0?1:t<0?-1:0},w=Math.sqrt,_=Math.tan},function(t,e,n){"use strict";e.a=function(t){for(var e=t.length/6|0,n=new Array(e),i=0;i0?r(i(t),9007199254740991):0}},function(t,e){var n=t.exports={version:"2.6.5"};"number"==typeof __e&&(__e=n)},function(t,e,n){var i=n(6),r=n(209),o=n(48),a=Object.defineProperty;e.f=n(13)?Object.defineProperty:function(t,e,n){if(i(t),e=o(e,!0),i(n),r)try{return a(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},function(t,e,n){t.exports=!n(5)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,e,n){"use strict";n(666),n(116),n(695);var i=n(282);n.d(e,"c",function(){return i.a});var r=n(696);n.d(e,"d",function(){return r.a});var o=n(171);n.d(e,"e",function(){return o.a});n(172),n(117);var a=n(280);n.d(e,"f",function(){return a.a});n(697);var s=n(29);n.d(e,"g",function(){return s.b});var c=n(173);n.d(e,"h",function(){return c.a});var l=n(281);n.d(e,"i",function(){return l.a});var u=n(285);n.d(e,"j",function(){return u.b});var h=n(698);n.d(e,"k",function(){return h.a});n(699),n(174);var f=n(175);n.d(e,"b",function(){return f.c}),n.d(e,"a",function(){return f.a})},function(t,e,n){t.exports=n(567)()},function(t,e,n){"use strict";var i=n(268);n.d(e,"b",function(){return i.a});var r=n(76);n.d(e,"a",function(){return r.a});var o=n(269);n.d(e,"c",function(){return o.a});n(642),n(643),n(271);var a=n(273);n.d(e,"d",function(){return a.a});n(644),n(647),n(648);var s=n(277);n.d(e,"j",function(){return s.a});var c=n(649);n.d(e,"e",function(){return c.a});n(650),n(651);var l=n(652);n.d(e,"f",function(){return l.a});var u=n(278);n.d(e,"g",function(){return u.a});n(270),n(653);var h=n(169);n.d(e,"h",function(){return h.a});var f=n(275);n.d(e,"i",function(){return f.a});n(654),n(655),n(656);var d=n(276);n.d(e,"m",function(){return d.a}),n.d(e,"k",function(){return d.b}),n.d(e,"l",function(){return d.c});n(279),n(272),n(657)},function(t,e,n){"use strict";e.a=function t(e,n,o,a){function s(t){return e(t=new Date(+t)),t}s.floor=s;s.ceil=function(t){return e(t=new Date(t-1)),n(t,1),e(t),t};s.round=function(t){var e=s(t),n=s.ceil(t);return t-e0))return a;do{a.push(o=new Date(+t)),n(t,r),e(t)}while(o=t)for(;e(t),!i(t);)t.setTime(t-1)},function(t,e){if(t>=t)if(e<0)for(;++e<=0;)for(;n(t,-1),!i(t););else for(;--e>=0;)for(;n(t,1),!i(t););})};o&&(s.count=function(t,n){return i.setTime(+t),r.setTime(+n),e(i),e(r),Math.floor(o(i,r))},s.every=function(t){return t=Math.floor(t),isFinite(t)&&t>0?t>1?s.filter(a?function(e){return a(e)%t===0}:function(e){return s.count(0,e)%t===0}):s:null});return s};var i=new Date,r=new Date},function(t,e,n){var i=n(43);t.exports=function(t){return Object(i(t))}},function(t,e,n){"use strict";var i=function(){};t.exports=i},function(t,e,n){var i=n(4),r=n(24),o=n(23),a=n(53)("src"),s=n(383),c=(""+s).split("toString");n(11).inspectSource=function(t){return s.call(t)},(t.exports=function(t,e,n,s){var l="function"==typeof n;l&&(o(n,"name")||r(n,"name",e)),t[e]!==n&&(l&&(o(n,a)||r(n,a,t[e]?""+t[e]:c.join(String(e)))),t===i?t[e]=n:s?t[e]?t[e]=n:r(t,e,n):(delete t[e],r(t,e,n)))})(Function.prototype,"toString",function(){return"function"==typeof this&&this[a]||s.call(this)})},function(t,e,n){var i=n(1),r=n(5),o=n(43),a=/"/g,s=function(t,e,n,i){var r=String(o(t)),s="<"+e;return""!==n&&(s+=" "+n+'="'+String(i).replace(a,""")+'"'),s+">"+r+""};t.exports=function(t,e){var n={};n[t]=e(s),i(i.P+i.F*r(function(){var e=""[t]('"');return e!==e.toLowerCase()||e.split('"').length>3}),"String",n)}},function(t,e,n){"use strict";var i=n(250),r=n(591),o=Object.prototype.toString;function a(t){return"[object Array]"===o.call(t)}function s(t){return null!==t&&"object"===typeof t}function c(t){return"[object Function]"===o.call(t)}function l(t,e){if(null!==t&&"undefined"!==typeof t)if("object"!==typeof t&&(t=[t]),a(t))for(var n=0,i=t.length;ns)throw new Error("too late; already scheduled");return n},e.h=function(t,e){var n=p(t,e);if(n.state>l)throw new Error("too late; already started");return n},e.f=p;var i=n(77),r=n(119),o=Object(i.a)("start","end","interrupt"),a=[],s=0,c=1,l=2,u=3,h=4,f=5,d=6;function p(t,e){var n=t.__transition;if(!n||!(n=n[e]))throw new Error("transition not found");return n}e.e=function(t,e,n,i,p,g){var m=t.__transition;if(m){if(n in m)return}else t.__transition={};!function(t,e,n){var i,o=t.__transition;function a(f){var g,m,v,y;if(n.state!==c)return p();for(g in o)if((y=o[g]).name===n.name){if(y.state===u)return Object(r.b)(a);y.state===h?(y.state=d,y.timer.stop(),y.on.call("interrupt",t,t.__data__,y.index,y.group),delete o[g]):+g2?t[2]%360*c.r:0,z()):[P*c.h,C*c.h,A*c.h]},R.angle=function(t){return arguments.length?(E=t%360*c.r,z()):E*c.h},R.precision=function(t){return arguments.length?(y=Object(f.a)(b,N=t*t),F()):Object(c.u)(N)},R.fitExtent=function(t,e){return Object(h.a)(R,t,e)},R.fitSize=function(t,e){return Object(h.c)(R,t,e)},R.fitWidth=function(t,e){return Object(h.d)(R,t,e)},R.fitHeight=function(t,e){return Object(h.b)(R,t,e)},function(){return e=t.apply(this,arguments),R.invert=e.invert&&B,z()}}},function(t,e,n){"use strict";e.a={CLEAR_DATE:"CLEAR_DATE",CLEAR_VIEW_SERIES:"CLEAR_VIEW_SERIES",LOAD_DATE:"LOAD_DATE",LOAD_FEATURED_IDS:"LOAD_FEATURED_IDS",LOAD_VIEW_SERIES:"LOAD_VIEW_SERIES",SET_AGGREGATIONS:"SET_AGGREGATIONS",SET_DECIMALS_BILLION:"SET_DECIMALS_BILLION",SET_DECIMALS_MILLION:"SET_DECIMALS_MILLION",SET_HERO_IMAGE_URL:"SET_HERO_IMAGE_URL",SET_LAPS:"SET_LAPS",SET_LOCALE:"SET_LOCALE",SET_MAX_DECIMALS:"SET_MAX_DECIMALS",SET_NUMBERS_ABBREVIATE:"SET_NUMBERS_ABBREVIATE",SET_SEARCH_PARAMS:"SET_SEARCH_PARAMS",SET_SERIES_API:"SET_SERIES_API",SET_SERIE_TAGS:"SET_SERIE_TAGS",SET_UNIT_FORMAT:"SET_UNIT_FORMAT"}},function(t,e,n){"use strict";function i(t){return"value"===t.representationMode?t.id:t.id+":"+t.representationMode}e.c=i,e.a=function(t,e){return t.find(function(t){return t.getFullSerieId()===e})},e.b=function(t,e){if(!e)return"line";var n={id:t.id,representationMode:t.representationMode};return e[i(n)]}},function(t,e,n){var i=n(36);t.exports=function(t,e,n){if(i(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,i){return t.call(e,n,i)};case 3:return function(n,i,r){return t.call(e,n,i,r)}}return function(){return t.apply(e,arguments)}}},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e){var n=Math.ceil,i=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?i:n)(t)}},function(t,e,n){var i=n(85),r=n(52),o=n(25),a=n(48),s=n(23),c=n(209),l=Object.getOwnPropertyDescriptor;e.f=n(13)?l:function(t,e){if(t=o(t),e=a(e,!0),c)try{return l(t,e)}catch(t){}if(s(t,e))return r(!i.f.call(t,e),t[e])}},function(t,e,n){var i=n(1),r=n(11),o=n(5);t.exports=function(t,e){var n=(r.Object||{})[t]||Object[t],a={};a[t]=e(n),i(i.S+i.F*o(function(){n(1)}),"Object",a)}},function(t,e,n){var i=n(35),r=n(84),o=n(18),a=n(10),s=n(225);t.exports=function(t,e){var n=1==t,c=2==t,l=3==t,u=4==t,h=6==t,f=5==t||h,d=e||s;return function(e,s,p){for(var g,m,v=o(e),y=r(v),b=i(s,p,3),x=a(y.length),w=0,_=n?d(e,x):c?d(e,0):void 0;x>w;w++)if((f||w in y)&&(m=b(g=y[w],w,v),t))if(n)_[w]=m;else if(m)switch(t){case 3:return!0;case 5:return g;case 6:return w;case 2:_.push(g)}else if(u)return!1;return h?-1:l||u?u:_}}},function(t,e,n){"use strict";var i=n(566),r=(n(243),n(570));n.d(e,"a",function(){return i.a}),n.d(e,"b",function(){return r.a})},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on "+t);return t}},function(t,e,n){"use strict";if(n(13)){var i=n(54),r=n(4),o=n(5),a=n(1),s=n(111),c=n(162),l=n(35),u=n(72),h=n(52),f=n(24),d=n(73),p=n(37),g=n(10),m=n(236),v=n(56),y=n(48),b=n(23),x=n(86),w=n(7),_=n(18),S=n(154),k=n(57),M=n(59),O=n(58).f,T=n(156),P=n(53),C=n(9),A=n(40),E=n(101),L=n(87),j=n(158),D=n(70),I=n(104),N=n(71),R=n(157),B=n(227),z=n(12),F=n(38),H=z.f,Y=F.f,W=r.RangeError,U=r.TypeError,G=r.Uint8Array,X=Array.prototype,V=c.ArrayBuffer,q=c.DataView,K=A(0),$=A(2),Z=A(3),Q=A(4),J=A(5),tt=A(6),et=E(!0),nt=E(!1),it=j.values,rt=j.keys,ot=j.entries,at=X.lastIndexOf,st=X.reduce,ct=X.reduceRight,lt=X.join,ut=X.sort,ht=X.slice,ft=X.toString,dt=X.toLocaleString,pt=C("iterator"),gt=C("toStringTag"),mt=P("typed_constructor"),vt=P("def_constructor"),yt=s.CONSTR,bt=s.TYPED,xt=s.VIEW,wt=A(1,function(t,e){return Ot(L(t,t[vt]),e)}),_t=o(function(){return 1===new G(new Uint16Array([1]).buffer)[0]}),St=!!G&&!!G.prototype.set&&o(function(){new G(1).set({})}),kt=function(t,e){var n=p(t);if(n<0||n%e)throw W("Wrong offset!");return n},Mt=function(t){if(w(t)&&bt in t)return t;throw U(t+" is not a typed array!")},Ot=function(t,e){if(!(w(t)&&mt in t))throw U("It is not a typed array constructor!");return new t(e)},Tt=function(t,e){return Pt(L(t,t[vt]),e)},Pt=function(t,e){for(var n=0,i=e.length,r=Ot(t,i);i>n;)r[n]=e[n++];return r},Ct=function(t,e,n){H(t,e,{get:function(){return this._d[n]}})},At=function(t){var e,n,i,r,o,a,s=_(t),c=arguments.length,u=c>1?arguments[1]:void 0,h=void 0!==u,f=T(s);if(void 0!=f&&!S(f)){for(a=f.call(s),i=[],e=0;!(o=a.next()).done;e++)i.push(o.value);s=i}for(h&&c>2&&(u=l(u,arguments[2],2)),e=0,n=g(s.length),r=Ot(this,n);n>e;e++)r[e]=h?u(s[e],e):s[e];return r},Et=function(){for(var t=0,e=arguments.length,n=Ot(this,e);e>t;)n[t]=arguments[t++];return n},Lt=!!G&&o(function(){dt.call(new G(1))}),jt=function(){return dt.apply(Lt?ht.call(Mt(this)):Mt(this),arguments)},Dt={copyWithin:function(t,e){return B.call(Mt(this),t,e,arguments.length>2?arguments[2]:void 0)},every:function(t){return Q(Mt(this),t,arguments.length>1?arguments[1]:void 0)},fill:function(t){return R.apply(Mt(this),arguments)},filter:function(t){return Tt(this,$(Mt(this),t,arguments.length>1?arguments[1]:void 0))},find:function(t){return J(Mt(this),t,arguments.length>1?arguments[1]:void 0)},findIndex:function(t){return tt(Mt(this),t,arguments.length>1?arguments[1]:void 0)},forEach:function(t){K(Mt(this),t,arguments.length>1?arguments[1]:void 0)},indexOf:function(t){return nt(Mt(this),t,arguments.length>1?arguments[1]:void 0)},includes:function(t){return et(Mt(this),t,arguments.length>1?arguments[1]:void 0)},join:function(t){return lt.apply(Mt(this),arguments)},lastIndexOf:function(t){return at.apply(Mt(this),arguments)},map:function(t){return wt(Mt(this),t,arguments.length>1?arguments[1]:void 0)},reduce:function(t){return st.apply(Mt(this),arguments)},reduceRight:function(t){return ct.apply(Mt(this),arguments)},reverse:function(){for(var t,e=Mt(this).length,n=Math.floor(e/2),i=0;i1?arguments[1]:void 0)},sort:function(t){return ut.call(Mt(this),t)},subarray:function(t,e){var n=Mt(this),i=n.length,r=v(t,i);return new(L(n,n[vt]))(n.buffer,n.byteOffset+r*n.BYTES_PER_ELEMENT,g((void 0===e?i:v(e,i))-r))}},It=function(t,e){return Tt(this,ht.call(Mt(this),t,e))},Nt=function(t){Mt(this);var e=kt(arguments[1],1),n=this.length,i=_(t),r=g(i.length),o=0;if(r+e>n)throw W("Wrong length!");for(;o255?255:255&i),r.v[d](n*e+r.o,i,_t)}(this,n,t)},enumerable:!0})};b?(p=n(function(t,n,i,r){u(t,p,l,"_d");var o,a,s,c,h=0,d=0;if(w(n)){if(!(n instanceof V||"ArrayBuffer"==(c=x(n))||"SharedArrayBuffer"==c))return bt in n?Pt(p,n):At.call(p,n);o=n,d=kt(i,e);var v=n.byteLength;if(void 0===r){if(v%e)throw W("Wrong length!");if((a=v-d)<0)throw W("Wrong length!")}else if((a=g(r)*e)+d>v)throw W("Wrong length!");s=a/e}else s=m(n),o=new V(a=s*e);for(f(t,"_d",{b:o,o:d,l:a,e:s,v:new q(o)});h0?"+":"",i=this.getAppendage(e.value);return!1===this.isPercentage&&this.numbersAbbreviate&&this.setForAbbreviation(e),""+n+this.applySeparators(e)+i},t.prototype.getAppendage=function(t){if(this.isPercentage)return"%";if(this.numbersAbbreviate){if(Math.abs(t)>=1e12)return"B";if(Math.abs(t)>=1e7)return"M"}return""},t.prototype.setForAbbreviation=function(t){var e=1;Math.abs(t.value)>=1e12?(e=1e12,t.decimalPlaces=this.decimalsBillion):Math.abs(t.value)>=1e7&&(e=1e6,t.decimalPlaces=this.decimalsMillion),t.value/=e},t.prototype.applyDecimalSeparator=function(t){return t.value.toFixed(t.decimalPlaces).replace(".",this.decimalSeparator)},t.prototype.applyThousandSeparator=function(t){for(var e=t.split(this.decimalSeparator),n=e[0],i=e.length>1?e[1]:"",r="-"===n[0]?2:1,o=Math.floor((n.length-r)/3),a=1;a<=o;a++){var s=n.length-4*a+1,c=n.slice(0,s),l=n.slice(s);n=""+c+this.thousandSeparator+l}return""!==i?""+n+this.decimalSeparator+i:n},t.prototype.applySeparators=function(t){var e=this.applyDecimalSeparator(t);return Math.abs(t.value)<1e4?e:this.applyThousandSeparator(e)},t}();e.e=c},function(t,e,n){"use strict";var i=n(66),r=n(46),o={aggregations:{catalog_id:[],dataset_publisher_name:[],dataset_source:[],dataset_theme:[],units:[]},date:{start:"",end:""},decimalsBillion:r.b,decimalsMillion:r.c,featured:[],formatChartUnits:!0,heroImageUrl:"",laps:{Anual:10,Diaria:90,Mensual:24,Semestral:10,Trimestral:20},locale:"AR",maxDecimals:i.b,numbersAbbreviate:!0,searchParams:{catalogId:"",datasetSource:"",datasetTheme:"",limit:10,offset:0,publisher:"",q:"",sorting:"",units:""},seriesApi:null,tagNames:[],viewSeries:[]};e.a=o},function(t,e,n){var i=n(7);t.exports=function(t,e){if(!i(t))return t;var n,r;if(e&&"function"==typeof(n=t.toString)&&!i(r=n.call(t)))return r;if("function"==typeof(n=t.valueOf)&&!i(r=n.call(t)))return r;if(!e&&"function"==typeof(n=t.toString)&&!i(r=n.call(t)))return r;throw TypeError("Can't convert object to primitive value")}},function(t,e,n){var i=n(53)("meta"),r=n(7),o=n(23),a=n(12).f,s=0,c=Object.isExtensible||function(){return!0},l=!n(5)(function(){return c(Object.preventExtensions({}))}),u=function(t){a(t,i,{value:{i:"O"+ ++s,w:{}}})},h=t.exports={KEY:i,NEED:!1,fastKey:function(t,e){if(!r(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!o(t,i)){if(!c(t))return"F";if(!e)return"E";u(t)}return t[i].i},getWeak:function(t,e){if(!o(t,i)){if(!c(t))return!0;if(!e)return!1;u(t)}return t[i].w},onFreeze:function(t){return l&&h.NEED&&c(t)&&!o(t,i)&&u(t),t}}},function(t,e,n){"use strict";e.a=_,e.b=function(){return++w};var i=n(14),r=n(722),o=n(723),a=n(724),s=n(725),c=n(726),l=n(727),u=n(728),h=n(729),f=n(730),d=n(731),p=n(732),g=n(733),m=n(734),v=n(735),y=n(736),b=n(737),x=n(120),w=0;function _(t,e,n,i){this._groups=t,this._parents=e,this._name=n,this._id=i}var S=i.g.prototype;_.prototype=function(t){return Object(i.g)().transition(t)}.prototype={constructor:_,select:d.a,selectAll:p.a,filter:l.a,merge:u.a,selection:g.a,transition:b.a,call:S.call,nodes:S.nodes,node:S.node,size:S.size,empty:S.empty,each:S.each,on:h.a,attr:r.a,attrTween:o.a,style:m.a,styleTween:v.a,text:y.a,remove:f.a,tween:x.a,delay:a.a,duration:s.a,ease:c.a}},function(t,e,n){"use strict";e.a=function(){}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e){var n=0,i=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+i).toString(36))}},function(t,e){t.exports=!1},function(t,e,n){var i=n(211),r=n(141);t.exports=Object.keys||function(t){return i(t,r)}},function(t,e,n){var i=n(37),r=Math.max,o=Math.min;t.exports=function(t,e){return(t=i(t))<0?r(t+e,0):o(t,e)}},function(t,e,n){var i=n(6),r=n(212),o=n(141),a=n(140)("IE_PROTO"),s=function(){},c=function(){var t,e=n(138)("iframe"),i=o.length;for(e.style.display="none",n(142).appendChild(e),e.src="javascript:",(t=e.contentWindow.document).open(),t.write(" + ``` * Definir dónde se va a dibujar: @@ -33,7 +33,7 @@ TSExplorer.render('explorer-container', { ```html - +
@@ -178,4 +178,4 @@ Si se habilita la abreviatura y formateo de números grandes, encendiendo el fla * En caso de abreviar, la cantidad de decimales que son tenidos en cuenta del cociente obtenido al dividir el valor original de la serie por el divisor apropiado depende de los valores (por defecto o especificados) de las cantidades de los parámetros `decimalsBillion` y `decimalsMillion` (según corresponda). ## Demo online -[https://jsfiddle.net/yne4v8r7/](https://jsfiddle.net/yne4v8r7/) +[https://jsfiddle.net/u7y3q9e2/](https://jsfiddle.net/u7y3q9e2/) diff --git a/docs/reference/ts-explorer/index.html b/docs/reference/ts-explorer/index.html index 4cba6167..410d3b8b 100644 --- a/docs/reference/ts-explorer/index.html +++ b/docs/reference/ts-explorer/index.html @@ -621,14 +621,14 @@

TSExplorer🔗

-

Versión: 2.8.0

+

Versión: 2.8.1

El objeto TSExplorer contiene una one page application con un explorador de series de tiempo, que permite buscar y visualizar series de un catálogo de datos abiertos.

-

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

+

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

¿Cómo lo uso?🔗

  • Importar librería JS:
-
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.8.0/dist/js/main.js'></script>
+
<script type='text/javascript' src='https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.8.1/dist/js/main.js'></script>
 
@@ -651,7 +651,7 @@

¿Cómo lo uso?<

Ejemplo de uso🔗

<html>
 <body>
-  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.8.0/dist/js/main.js"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.8.1/dist/js/main.js"></script>
 
   <div id="explorer-container"></div>
 
@@ -795,7 +795,7 @@ 

AbreviaturaEn caso de abreviar, la cantidad de decimales que son tenidos en cuenta del cociente obtenido al dividir el valor original de la serie por el divisor apropiado depende de los valores (por defecto o especificados) de las cantidades de los parámetros decimalsBillion y decimalsMillion (según corresponda).

Demo online🔗

-

https://jsfiddle.net/yne4v8r7/

+

https://jsfiddle.net/u7y3q9e2/

diff --git a/docs/search/search_index.json b/docs/search/search_index.json index c3bcde58..8f1487d8 100644 --- a/docs/search/search_index.json +++ b/docs/search/search_index.json @@ -1 +1 @@ -{"config":{"lang":["en"],"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"applications/","text":"","title":"Applications"},{"location":"docs/","text":"Explorador de Series de Tiempo \ud83d\udd17 El Explorador de Series de Tiempo es una familia de componentes front-end para desarrollar experiencias web a partir de los datos de la API de Series de Tiempo de la Rep\u00fablica Argentina , donde los organismos de la Administraci\u00f3n P\u00fablica Nacional publican indicadores en formatos abiertos. Si quer\u00e9s integrar un explorador completo en tu sitio web (como el de Datos Argentina ) le\u00e9 la referencia de TSExplorer . Si quer\u00e9s agregar gr\u00e1ficos en tu sitio web le\u00e9 la referencia de TSComponents . Versiones de browsers \ud83d\udd17 El Explorador de Series de Tiempo fue desarrolado utilizando versiones recientes de Firefox y Chrome (57+ y 60+), y soporta Internet Explorer desde la versi\u00f3n 11 en adelante. Si sos usuario de la API de Series de Tiempo y quer\u00e9s estar al tanto de los cambios y novedades, inscribite en la base de contactos de Datos Argentina y eleg\u00ed sobre qu\u00e9 temas quer\u00e9s que te escribamos. \u00bfTen\u00e9s algo que contarnos? Nos encantar\u00eda que nos cuentes por Twitter o por mail qu\u00e9 mejor\u00f3 usar la API en tu trabajo y qu\u00e9 le falta para mejorar a\u00fan m\u00e1s.","title":"Inicio"},{"location":"docs/#explorador-de-series-de-tiempo","text":"El Explorador de Series de Tiempo es una familia de componentes front-end para desarrollar experiencias web a partir de los datos de la API de Series de Tiempo de la Rep\u00fablica Argentina , donde los organismos de la Administraci\u00f3n P\u00fablica Nacional publican indicadores en formatos abiertos. Si quer\u00e9s integrar un explorador completo en tu sitio web (como el de Datos Argentina ) le\u00e9 la referencia de TSExplorer . Si quer\u00e9s agregar gr\u00e1ficos en tu sitio web le\u00e9 la referencia de TSComponents .","title":"Explorador de Series de Tiempo"},{"location":"docs/#versiones-de-browsers","text":"El Explorador de Series de Tiempo fue desarrolado utilizando versiones recientes de Firefox y Chrome (57+ y 60+), y soporta Internet Explorer desde la versi\u00f3n 11 en adelante. Si sos usuario de la API de Series de Tiempo y quer\u00e9s estar al tanto de los cambios y novedades, inscribite en la base de contactos de Datos Argentina y eleg\u00ed sobre qu\u00e9 temas quer\u00e9s que te escribamos. \u00bfTen\u00e9s algo que contarnos? Nos encantar\u00eda que nos cuentes por Twitter o por mail qu\u00e9 mejor\u00f3 usar la API en tu trabajo y qu\u00e9 le falta para mejorar a\u00fan m\u00e1s.","title":"Versiones de browsers"},{"location":"terms/","text":"","title":"Terms"},{"location":"developers/deploy/","text":"Documentaci\u00f3n de deploy \ud83d\udd17 Tenemos 2 formas de deploy: Generaci\u00f3n de github pages y generaci\u00f3n de release para subir al CDN . Github pages \ud83d\udd17 El deploy se puede realizar de dos maneras. Ambas son iguales npm run build-docs make build Y finalmente subir todo al branch default: - git add . - git commit -m \"Deploy a github pages\" - git push Release para CDN \ud83d\udd17 Crear un branch desde la versi\u00f3n que queremos salir: - git checkout -b Generar los archivos para distribuir. Tenemos dos maneras, ambas son iguales: - npm run release - make release Agregar los archivos: - git add dist (basta con agregar s\u00f3lo la carpeta a distribuir) - git commit -m \"Actualizo carpeta dist\" - git push origin Crear un tag: - git tag - git push --tags Con el nombre del tag ya podemos acceder a los archivos que necesitemos: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@nombreDelTag/dist/js/main.js Actualizar series-tiempo-ar-explorer-demo para usar la versi\u00f3n deseada (en el ejemplo la versi\u00f3n es test_0.4 pero podemos usar cualquiera ya sea para el archivo css o para el js): - Modificar el index.html del directorio root del proyecto demo para cambiar la versi\u00f3n usada de JS y de CSS: - CSS: cambiar la l\u00ednea: ` < link rel = \"stylesheet\" href = \"https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@test_0.4/dist/css/main.css\" type = \"text/css\" > ` . JS: cambiar la l\u00ednea: Las modificaciones de dichas l\u00edneas s\u00f3lo deber\u00edan ser para cambiar la versi\u00f3n, la ruta no deber\u00eda cambiar a menos que se busque usar un archivo distinto.","title":"Despliegue"},{"location":"developers/deploy/#documentacion-de-deploy","text":"Tenemos 2 formas de deploy: Generaci\u00f3n de github pages y generaci\u00f3n de release para subir al CDN .","title":"Documentaci\u00f3n de deploy"},{"location":"developers/deploy/#github-pages","text":"El deploy se puede realizar de dos maneras. Ambas son iguales npm run build-docs make build Y finalmente subir todo al branch default: - git add . - git commit -m \"Deploy a github pages\" - git push","title":"Github pages"},{"location":"developers/deploy/#release-para-cdn","text":"Crear un branch desde la versi\u00f3n que queremos salir: - git checkout -b Generar los archivos para distribuir. Tenemos dos maneras, ambas son iguales: - npm run release - make release Agregar los archivos: - git add dist (basta con agregar s\u00f3lo la carpeta a distribuir) - git commit -m \"Actualizo carpeta dist\" - git push origin Crear un tag: - git tag - git push --tags Con el nombre del tag ya podemos acceder a los archivos que necesitemos: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@nombreDelTag/dist/js/main.js Actualizar series-tiempo-ar-explorer-demo para usar la versi\u00f3n deseada (en el ejemplo la versi\u00f3n es test_0.4 pero podemos usar cualquiera ya sea para el archivo css o para el js): - Modificar el index.html del directorio root del proyecto demo para cambiar la versi\u00f3n usada de JS y de CSS: - CSS: cambiar la l\u00ednea: ` < link rel = \"stylesheet\" href = \"https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@test_0.4/dist/css/main.css\" type = \"text/css\" > ` . JS: cambiar la l\u00ednea: Las modificaciones de dichas l\u00edneas s\u00f3lo deber\u00edan ser para cambiar la versi\u00f3n, la ruta no deber\u00eda cambiar a menos que se busque usar un archivo distinto.","title":"Release para CDN"},{"location":"developers/install/","text":"Setup \ud83d\udd17 Requerimientos \ud83d\udd17 Este proyecto requiere Node v8.9.4 o superior (npm v6.0.0). Puede ser instalado con nvm Instalar node y npm. nvm install 8.9.4 O v\u00eda package manager: curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - sudo apt-get install -y nodejs Desarrollo \ud83d\udd17 Instalar hooks git hooks install Instalar dependencias: npm install Iniciar web server make watch para levantar el servidor en localhost:3000 Desarrollo de componentes exportables \ud83d\udd17 Se puede iniciar un servidor web para servir un dashboard que utiliza los componentes exportables usando make components-watch Para mas info: react documentation Problemas comunes \ud83d\udd17 npm start : Error al iniciar el server. Soluci\u00f3n: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p Para correr los tests de un archivo en particular: npm test -- -- why the \"--\" magick incantation Debugging en VS code \ud83d\udd17 Usar esta launch configuration { \"name\": \"Debug Jest Tests\", \"type\": \"node\", \"request\": \"launch\", \"runtimeArgs\": [\"--inspect-brk\", \" ${ workspaceRoot } /scripts/test.js\", \"--runInBand\", \"--env=jsdom\"], \"port\": 9229, \"console\": \"integratedTerminal\", \"internalConsoleOptions\": \"neverOpen\" }","title":"Instalaci\u00f3n"},{"location":"developers/install/#setup","text":"","title":"Setup"},{"location":"developers/install/#requerimientos","text":"Este proyecto requiere Node v8.9.4 o superior (npm v6.0.0). Puede ser instalado con nvm Instalar node y npm. nvm install 8.9.4 O v\u00eda package manager: curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - sudo apt-get install -y nodejs","title":"Requerimientos"},{"location":"developers/install/#desarrollo","text":"Instalar hooks git hooks install Instalar dependencias: npm install Iniciar web server make watch para levantar el servidor en localhost:3000","title":"Desarrollo"},{"location":"developers/install/#desarrollo-de-componentes-exportables","text":"Se puede iniciar un servidor web para servir un dashboard que utiliza los componentes exportables usando make components-watch Para mas info: react documentation","title":"Desarrollo de componentes exportables"},{"location":"developers/install/#problemas-comunes","text":"npm start : Error al iniciar el server. Soluci\u00f3n: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p Para correr los tests de un archivo en particular: npm test -- -- why the \"--\" magick incantation","title":"Problemas comunes"},{"location":"developers/install/#debugging-en-vs-code","text":"Usar esta launch configuration { \"name\": \"Debug Jest Tests\", \"type\": \"node\", \"request\": \"launch\", \"runtimeArgs\": [\"--inspect-brk\", \" ${ workspaceRoot } /scripts/test.js\", \"--runInBand\", \"--env=jsdom\"], \"port\": 9229, \"console\": \"integratedTerminal\", \"internalConsoleOptions\": \"neverOpen\" }","title":"Debugging en VS code"},{"location":"reference/ts-components/","text":"TSComponents \ud83d\udd17 Versi\u00f3n : 2.7.0 El objeto TSComponents contiene distintos componentes exportables que se pueden utilizar dentro de una experiencia web. Est\u00e1 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.7.0/dist/js/components.js Componentes \ud83d\udd17 graphic : gr\u00e1fico de l\u00edneas, barras o \u00e1rea usado en el explorador de series de tiempo con todas sus funcionalidades. card : tarjeta con informaci\u00f3n de la serie y un gr\u00e1fico inclu\u00eddo con sus datos. \u00bfC\u00f3mo los uso? \ud83d\udd17 Todos los componentes se usan de la misma manera. Importar librer\u00eda JS: < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/js/components.js' > Importar hoja de estilos CSS: < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/css/components.css' /> Definir d\u00f3nde se va a dibujar: < div id = \"graphic_01\" > < div id = \"card_01\" > Instanciar el componente que buscamos: TSComponents . Graphic . render ( 'graphic_01' , { ... }) TSComponents . Card . render ( 'card_01' , { ... })","title":"TSComponents"},{"location":"reference/ts-components/#tscomponents","text":"Versi\u00f3n : 2.7.0 El objeto TSComponents contiene distintos componentes exportables que se pueden utilizar dentro de una experiencia web. Est\u00e1 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.7.0/dist/js/components.js","title":"TSComponents"},{"location":"reference/ts-components/#componentes","text":"graphic : gr\u00e1fico de l\u00edneas, barras o \u00e1rea usado en el explorador de series de tiempo con todas sus funcionalidades. card : tarjeta con informaci\u00f3n de la serie y un gr\u00e1fico inclu\u00eddo con sus datos.","title":"Componentes"},{"location":"reference/ts-components/#como-los-uso","text":"Todos los componentes se usan de la misma manera. Importar librer\u00eda JS: < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/js/components.js' > Importar hoja de estilos CSS: < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/css/components.css' /> Definir d\u00f3nde se va a dibujar: < div id = \"graphic_01\" > < div id = \"card_01\" > Instanciar el componente que buscamos: TSComponents . Graphic . render ( 'graphic_01' , { ... }) TSComponents . Card . render ( 'card_01' , { ... })","title":"\u00bfC\u00f3mo los uso?"},{"location":"reference/ts-explorer/","text":"TSExplorer \ud83d\udd17 Versi\u00f3n : 2.8.0 El objeto TSExplorer contiene una one page application con un explorador de series de tiempo, que permite buscar y visualizar series de un cat\u00e1logo de datos abiertos. Est\u00e1 en el archivo llamado main.js y se aloja versionado en el CDN: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.8.0/dist/js/main.js \u00bfC\u00f3mo lo uso? \ud83d\udd17 Importar librer\u00eda JS: < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.8.0/dist/js/main.js' > Definir d\u00f3nde se va a dibujar: < div id = \"explorer-container\" > Instanciar el explorador: TSExplorer . render ( 'explorer-container' , { ... }) Ejemplo de uso \ud83d\udd17 < html > < body > < script type = \"text/javascript\" src = \"https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.8.0/dist/js/main.js\" > < div id = \"explorer-container\" > < script > window . onload = function () { TSExplorer . render ( 'explorer-container' , { featured : [ \"103.1_I2N_2016_M_15\" , \"168.1_T_CAMBIOR_D_0_0_26\" , ], seriesApiUri : \"https://apis.datos.gob.ar/series/api\" , catalogId : 'datosgobar' , formatChartUnits : true , laps : { Diaria : 90 , Mensual : 24 , Trimestral : 20 , Semestral : 10 , Anual : 10 , }, locale : 'AR' }) } Tabla de par\u00e1metros \ud83d\udd17 Nombre Requerido Descripci\u00f3n Tipo Default Ejemplos seriesApiUri Si URI a la API donde buscamos los datos. string Ninguno https://apis.datos.gob.ar/series/api featured No Indica los IDs de las series destacadas string[] [] [\"103.1_I2N_2016_M_15\", \"168.1_T_CAMBIOR_D_0_0_26\"] catalogId No Representa el id del cat\u00e1logo de donde busca las series string Ninguno datosgobar formatChartUnits No Indica si debe formatear a porcentaje los valores entre -1 y 1. boolean true true / false laps No Informaci\u00f3n para traer los \u00faltimos _n_ valores de la serie, con _n_ igual al valor por frecuencia. {Diaria: number, Mensual: number, Trimestral: number, Semestral: number, Anual: number} object true true / false locale No Valores posibles: `\"AR\"` o `\"US\"` (pendientes nuevos valores). Representan qu\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string \"AR\" \"AR\" / \"US\" maxDecimals No Cantidad m\u00e1xima de cifras decimales a mostrar para los valores de las series, tanto en sus tarjetas destacadas, como resultados de b\u00fasqueda y notas (tooltips) de los gr\u00e1ficos. int 2 0/4/1 heroImageUrl No URL de la imagen a mostrar de fondo en el banner del encabezado. string https://datos.gob.ar/images/hero_bg.svg https://upload.wikimedia.org/wikipedia/commons/1/1a/Flag_of_Argentina.svg numbersAbbreviate No Flag que indica si se deben abreviar los n\u00fameros grandes y formatearlos con el sufijo pertinente; si est\u00e1 apagado, no se realizar\u00e1 abreviatura alguna. Ver la secci\u00f3n de \"Abreviatura\" para m\u00e1s detalle. boolean true false decimalsBillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un bill\u00f3n. Puede ser mayor al par\u00e1metro maxDecimals. int 2 4 decimalsMillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un mill\u00f3n. Puede ser mayor al par\u00e1metro maxDecimals. boolean 2 0 Abreviatura \ud83d\udd17 Si se habilita la abreviatura y formateo de n\u00fameros grandes, encendiendo el flag numbersAbbreviate (la \u00fanica manera de apagarlo es sete\u00e1ndole expl\u00edcitamente un valor false por medio del par\u00e1metro del componente), se proceder\u00e1 a formatearlos de la siguiente manera: Los valores porcentuales (distinguidos as\u00ed por los metadatos de la serie que representan) no son abreviados. Todo n\u00famero mayor o igual a un bill\u00f3n ( 1.000.000.000.000 ) o menor a un bill\u00f3n negativo ( -1.000.000.000.000 ) ser\u00e1 dividido por un bill\u00f3n, y se le agregar\u00e1 como sufijo la letra B . Todo n\u00famero mayor o igual a diez millones ( 10.000.000 ) y menor a un bill\u00f3n, o bien menor o igual a diez millones negativos ( -10.000.000 ) y mayor a un bill\u00f3n negativo ( -1.000.000.000.000 ), ser\u00e1 dividido por un mill\u00f3n ( 1.000.000 ), y se le agregar\u00e1 como sufijo la letra M . Todo n\u00famero mayor a un diez millones negativos y menor a diez millones ser\u00e1 conservado como tal, sin aplic\u00e1rsele sufijo alguno. En caso de abreviar, la cantidad de decimales que son tenidos en cuenta del cociente obtenido al dividir el valor original de la serie por el divisor apropiado depende de los valores (por defecto o especificados) de las cantidades de los par\u00e1metros decimalsBillion y decimalsMillion (seg\u00fan corresponda). Demo online \ud83d\udd17 https://jsfiddle.net/yne4v8r7/","title":"TSExplorer"},{"location":"reference/ts-explorer/#tsexplorer","text":"Versi\u00f3n : 2.8.0 El objeto TSExplorer contiene una one page application con un explorador de series de tiempo, que permite buscar y visualizar series de un cat\u00e1logo de datos abiertos. Est\u00e1 en el archivo llamado main.js y se aloja versionado en el CDN: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.8.0/dist/js/main.js","title":"TSExplorer"},{"location":"reference/ts-explorer/#como-lo-uso","text":"Importar librer\u00eda JS: < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.8.0/dist/js/main.js' > Definir d\u00f3nde se va a dibujar: < div id = \"explorer-container\" > Instanciar el explorador: TSExplorer . render ( 'explorer-container' , { ... })","title":"\u00bfC\u00f3mo lo uso?"},{"location":"reference/ts-explorer/#ejemplo-de-uso","text":"< html > < body > < script type = \"text/javascript\" src = \"https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.8.0/dist/js/main.js\" > < div id = \"explorer-container\" > < script > window . onload = function () { TSExplorer . render ( 'explorer-container' , { featured : [ \"103.1_I2N_2016_M_15\" , \"168.1_T_CAMBIOR_D_0_0_26\" , ], seriesApiUri : \"https://apis.datos.gob.ar/series/api\" , catalogId : 'datosgobar' , formatChartUnits : true , laps : { Diaria : 90 , Mensual : 24 , Trimestral : 20 , Semestral : 10 , Anual : 10 , }, locale : 'AR' }) } ","title":"Ejemplo de uso"},{"location":"reference/ts-explorer/#tabla-de-parametros","text":"Nombre Requerido Descripci\u00f3n Tipo Default Ejemplos seriesApiUri Si URI a la API donde buscamos los datos. string Ninguno https://apis.datos.gob.ar/series/api featured No Indica los IDs de las series destacadas string[] [] [\"103.1_I2N_2016_M_15\", \"168.1_T_CAMBIOR_D_0_0_26\"] catalogId No Representa el id del cat\u00e1logo de donde busca las series string Ninguno datosgobar formatChartUnits No Indica si debe formatear a porcentaje los valores entre -1 y 1. boolean true true / false laps No Informaci\u00f3n para traer los \u00faltimos _n_ valores de la serie, con _n_ igual al valor por frecuencia. {Diaria: number, Mensual: number, Trimestral: number, Semestral: number, Anual: number} object true true / false locale No Valores posibles: `\"AR\"` o `\"US\"` (pendientes nuevos valores). Representan qu\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string \"AR\" \"AR\" / \"US\" maxDecimals No Cantidad m\u00e1xima de cifras decimales a mostrar para los valores de las series, tanto en sus tarjetas destacadas, como resultados de b\u00fasqueda y notas (tooltips) de los gr\u00e1ficos. int 2 0/4/1 heroImageUrl No URL de la imagen a mostrar de fondo en el banner del encabezado. string https://datos.gob.ar/images/hero_bg.svg https://upload.wikimedia.org/wikipedia/commons/1/1a/Flag_of_Argentina.svg numbersAbbreviate No Flag que indica si se deben abreviar los n\u00fameros grandes y formatearlos con el sufijo pertinente; si est\u00e1 apagado, no se realizar\u00e1 abreviatura alguna. Ver la secci\u00f3n de \"Abreviatura\" para m\u00e1s detalle. boolean true false decimalsBillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un bill\u00f3n. Puede ser mayor al par\u00e1metro maxDecimals. int 2 4 decimalsMillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un mill\u00f3n. Puede ser mayor al par\u00e1metro maxDecimals. boolean 2 0","title":"Tabla de par\u00e1metros"},{"location":"reference/ts-explorer/#abreviatura","text":"Si se habilita la abreviatura y formateo de n\u00fameros grandes, encendiendo el flag numbersAbbreviate (la \u00fanica manera de apagarlo es sete\u00e1ndole expl\u00edcitamente un valor false por medio del par\u00e1metro del componente), se proceder\u00e1 a formatearlos de la siguiente manera: Los valores porcentuales (distinguidos as\u00ed por los metadatos de la serie que representan) no son abreviados. Todo n\u00famero mayor o igual a un bill\u00f3n ( 1.000.000.000.000 ) o menor a un bill\u00f3n negativo ( -1.000.000.000.000 ) ser\u00e1 dividido por un bill\u00f3n, y se le agregar\u00e1 como sufijo la letra B . Todo n\u00famero mayor o igual a diez millones ( 10.000.000 ) y menor a un bill\u00f3n, o bien menor o igual a diez millones negativos ( -10.000.000 ) y mayor a un bill\u00f3n negativo ( -1.000.000.000.000 ), ser\u00e1 dividido por un mill\u00f3n ( 1.000.000 ), y se le agregar\u00e1 como sufijo la letra M . Todo n\u00famero mayor a un diez millones negativos y menor a diez millones ser\u00e1 conservado como tal, sin aplic\u00e1rsele sufijo alguno. En caso de abreviar, la cantidad de decimales que son tenidos en cuenta del cociente obtenido al dividir el valor original de la serie por el divisor apropiado depende de los valores (por defecto o especificados) de las cantidades de los par\u00e1metros decimalsBillion y decimalsMillion (seg\u00fan corresponda).","title":"Abreviatura"},{"location":"reference/ts-explorer/#demo-online","text":"https://jsfiddle.net/yne4v8r7/","title":"Demo online"},{"location":"reference/ts-components/card/","text":"Componente: card \ud83d\udd17 El componente card permite embeber tarjetas con informaci\u00f3n de la serie, y un gr\u00e1fico inclu\u00eddo dentro de la misma, en sitios web. .row { width: 90%; margin: auto; display: flex; justify-content: space-around; } Ejemplo base \ud83d\udd17 Ver online: https://jsfiddle.net/e7kad2j1 < link type = \"text/css\" rel = \"stylesheet\" href = \"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css\" media = \"all\" /> < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/js/components.js' > < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/css/components.css' /> < div id = \"tmi\" > < script > window . onload = function () { TSComponents . Card . render ( 'tmi' , { // ID de la serie solicitada serieId : '143.3_NO_PR_2004_A_21' }) } Tabla de par\u00e1metros \ud83d\udd17 Nombre Requerido Descripci\u00f3n Tipo Default Ejemplos serieId Si ID de la serie a buscar. string Ninguno 143.3_NO_PR_2004_A_21 locale No Valores posibles: \"AR\" o \"US\" (pendientes nuevos valores). Representan qu\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string AR AR o US links No Indica qu\u00e9 enlaces a mostrar bajo la tarjeta para descargar o compartir la misma. string full small color No Indica el color a usar para el n\u00famero y el borde de la tarjeta. Los c\u00f3digos de colores pueden ser tanto hexadecimales (ej. \"#00CC44\") como numeros que son mapeados a la paleta por defecto (del 0 al 8) Ver paleta por defecto m\u00e1s abajo. string #0072BB red hasChart No Indica el tipo de gr\u00e1fico a usar dentro de la tarjeta. string small full explicitSign No Permite forzar la presencia de un signo antepuesto al valor mostrado; es decir, si dicho valor resultara positivo, ser\u00e1 precedido por un signo de adici\u00f3n ('+'). Por defecto, se encuentra desactivado. booleano false true title No Especifica el t\u00edtulo de la tarjeta. De no definirse, se considera el t\u00edtulo por defecto de la serie; de definirse como '', se lo omite. string Ninguno Un t\u00edtulo personalizado source No Especifica el texto al pie de la tarjeta, que refiere a la fuente de la informaci\u00f3n. De no definirse, se considera la fuente por defecto de la serie; de definirse como '', se la omite. string Ninguno Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud units No Especifica el texto al pie de la tarjeta, que refiere a las unidades en que se mide el valor mostrado. De no definirse, se consideran las unidades por defecto de la serie; de definirse como '', se las omite. string Ninguno Millones de pesos hasFrame No Permite forzar la presencia de un marco alrededor de la tarjeta y un fondo blanco para la misma. De no estar definido, la tarjeta tendr\u00e1 marco si tiene al menos gr\u00e1fico o enlaces. booleano Ninguno true hasColorBar No Permite forzar la presencia de la barra de color (el mismo que posee el n\u00famero) en el borde superior de la tarjeta. De no estar definido, la barr\u00e1 estar\u00e1 presente s\u00f3lo si la tarjeta posee marco. booleano Ninguno false collapse No Permite cambiar la frecuencia en la que se muestra la serie. Mediante este par\u00e1metro se puede hacer, por ejemplo, un agregado anual para una serie que tiene una frecuencia diaria. Las limitaciones del campo son que la frecuencia elegida tiene que ser menor o igual a la frecuencia por defecto de la serie, si no lo es entonces el gr\u00e1fico no se mostrar\u00e1 (Ej: si la serie tiene frecuencia semestral, 'collapse' puede ser solo o 'semester' o 'year'). string Ninguno 'day', 'month', 'quarter', 'semester', 'year' apiBaseUrl No Permite cambiar la URL de la API a la cual se le pedir\u00e1 la serie representada en la tarjeta. A dicha url se le adjuntar\u00e1 el texto '/series/?ids=serieId' al final. string 'http://apis.datos.gob.ar/series/api' 'http://miurl.apis.com/datos' decimals No Permite elegir cu\u00e1ntos d\u00edgitos decimales mostrar en el valor de la tarjeta. Debe ser mayor o igual a 0. Redondea los valores en caso de ser menor a la cantidad de d\u00edgitos original del valor; completa con 0s en caso contrario. int 2 5 numbersAbbreviate No Flag que indica si se deben abreviar los n\u00fameros grandes y formatearlos con el sufijo pertinente; si est\u00e1 apagado, no se realizar\u00e1 abreviatura alguna. Ver la secci\u00f3n de \"Abreviatura\" para m\u00e1s detalle. boolean true false decimalsBillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un bill\u00f3n. Supeditar\u00e1 al valor del par\u00e1metro decimals. int 2 4 decimalsMillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un mill\u00f3n. Supeditar\u00e1 al valor del par\u00e1metro decimals. boolean 2 0 Paleta de colores por defecto \ud83d\udd17 Por defecto, la paleta de colores en los que se grafican las series del componente. Cada uno puede ser identificado con un hexadecimal o un entero decimal: #0072BB o 0 , para azul #2E7D33 o 1 , para verde oscuro #C62828 o 2 , para rojo #F9A822 o 3 , para naranja #6A1B99 o 4 , para violeta #EC407A o 5 , para rosa #C2185B o 6 , para fucsia #039BE5 o 7 , para celeste #6EA100 o 8 , para verde claro Abreviatura \ud83d\udd17 Si se habilita la abreviatura y formateo de n\u00fameros grandes, encendiendo el flag numbersAbbreviate (la \u00fanica manera de apagarlo es sete\u00e1ndole expl\u00edcitamente un valor false por medio del par\u00e1metro del componente), se proceder\u00e1 a formatearlos de la siguiente manera: Los valores porcentuales (distinguidos as\u00ed por los metadatos de la serie que representan) no son abreviados. Todo n\u00famero mayor o igual a un bill\u00f3n ( 1.000.000.000.000 ) o menor a un bill\u00f3n negativo ( -1.000.000.000.000 ) ser\u00e1 dividido por un bill\u00f3n, y se le agregar\u00e1 como sufijo la letra B . Todo n\u00famero mayor o igual a diez millones ( 10.000.000 ) y menor a un bill\u00f3n, o bien menor o igual a diez millones negativos ( -10.000.000 ) y mayor a un bill\u00f3n negativo ( -1.000.000.000.000 ), ser\u00e1 dividido por un mill\u00f3n ( 1.000.000 ), y se le agregar\u00e1 como sufijo la letra M . Todo n\u00famero mayor a un diez millones negativos y menor a diez millones ser\u00e1 conservado como tal, sin aplic\u00e1rsele sufijo alguno. En caso de abreviar, la cantidad de decimales que son tenidos en cuenta del cociente obtenido al dividir el valor original de la serie por el divisor apropiado depende de los valores (por defecto o especificados) de las cantidades de los par\u00e1metros decimalsBillion y decimalsMillion (seg\u00fan corresponda). Ejemplo completo \ud83d\udd17 < html > < body > < script type = 'text/javascript' src = 'components.js' > < div id = \"card1\" > < script > window . onload = function () { TSComponents . Card . render ( 'card1' , { serieId : '143.3_NO_PR_2004_A_21' , hasChart : 'small' , links : 'full' , locale : 'AR' , color : '#F9A822' , explicitSign : true , title : 'Titulo personalizado' , source : 'Fuente primaria: Mi Fuente' , units : '' , hasFrame : false , hasColorBar : true , collapse : 'year' , apiBaseUrl : 'http://apis.datos.gob.ar/series/api' }) } Demo online \ud83d\udd17 https://jsfiddle.net/hfbjq791/ Variantes de tarjetas \ud83d\udd17 Card: default \ud83d\udd17 Card: menos links \ud83d\udd17 Card: sin links \ud83d\udd17 Card: m\u00ednima \ud83d\udd17 Card: m\u00ednima (eliminando elementos) \ud83d\udd17 window.onload = function() { TSComponents.Card.render('ipc', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', title: \"Indice de Precios al Consumidor Nacional\", links: \"none\" }) TSComponents.Card.render('exportaciones', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', title: \"Exportaciones\", links: \"none\" }) TSComponents.Card.render('ipc-card', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', title: \"Exportaciones\" }) TSComponents.Card.render('ipc-card-links2', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', links: \"small\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-links2', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', links: \"small\", title: \"Exportaciones\" }) TSComponents.Card.render('ipc-card-med', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', links: \"none\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-med', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', links: \"none\", title: \"Exportaciones\", hasFrame: false }) TSComponents.Card.render('ipc-card-min', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', links: 'none', hasChart: \"none\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-min', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, links: 'none', hasChart: \"none\", title: \"Exportaciones\", hasColorBar: true }) TSComponents.Card.render('ipc-card-min-xtreme', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', links: 'none', hasChart: \"none\", title: \"\", units: \"\", source: \"\" }) TSComponents.Card.render('exportaciones-card-min-xtreme', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, links: 'none', hasChart: \"none\", title: \"\", units: \"\", source: \"\" }) }","title":"TSComponents: Card"},{"location":"reference/ts-components/card/#componente-card","text":"El componente card permite embeber tarjetas con informaci\u00f3n de la serie, y un gr\u00e1fico inclu\u00eddo dentro de la misma, en sitios web. .row { width: 90%; margin: auto; display: flex; justify-content: space-around; }","title":"Componente: card"},{"location":"reference/ts-components/card/#ejemplo-base","text":"Ver online: https://jsfiddle.net/e7kad2j1 < link type = \"text/css\" rel = \"stylesheet\" href = \"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css\" media = \"all\" /> < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/js/components.js' > < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/css/components.css' /> < div id = \"tmi\" > < script > window . onload = function () { TSComponents . Card . render ( 'tmi' , { // ID de la serie solicitada serieId : '143.3_NO_PR_2004_A_21' }) } ","title":"Ejemplo base"},{"location":"reference/ts-components/card/#tabla-de-parametros","text":"Nombre Requerido Descripci\u00f3n Tipo Default Ejemplos serieId Si ID de la serie a buscar. string Ninguno 143.3_NO_PR_2004_A_21 locale No Valores posibles: \"AR\" o \"US\" (pendientes nuevos valores). Representan qu\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string AR AR o US links No Indica qu\u00e9 enlaces a mostrar bajo la tarjeta para descargar o compartir la misma. string full small color No Indica el color a usar para el n\u00famero y el borde de la tarjeta. Los c\u00f3digos de colores pueden ser tanto hexadecimales (ej. \"#00CC44\") como numeros que son mapeados a la paleta por defecto (del 0 al 8) Ver paleta por defecto m\u00e1s abajo. string #0072BB red hasChart No Indica el tipo de gr\u00e1fico a usar dentro de la tarjeta. string small full explicitSign No Permite forzar la presencia de un signo antepuesto al valor mostrado; es decir, si dicho valor resultara positivo, ser\u00e1 precedido por un signo de adici\u00f3n ('+'). Por defecto, se encuentra desactivado. booleano false true title No Especifica el t\u00edtulo de la tarjeta. De no definirse, se considera el t\u00edtulo por defecto de la serie; de definirse como '', se lo omite. string Ninguno Un t\u00edtulo personalizado source No Especifica el texto al pie de la tarjeta, que refiere a la fuente de la informaci\u00f3n. De no definirse, se considera la fuente por defecto de la serie; de definirse como '', se la omite. string Ninguno Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud units No Especifica el texto al pie de la tarjeta, que refiere a las unidades en que se mide el valor mostrado. De no definirse, se consideran las unidades por defecto de la serie; de definirse como '', se las omite. string Ninguno Millones de pesos hasFrame No Permite forzar la presencia de un marco alrededor de la tarjeta y un fondo blanco para la misma. De no estar definido, la tarjeta tendr\u00e1 marco si tiene al menos gr\u00e1fico o enlaces. booleano Ninguno true hasColorBar No Permite forzar la presencia de la barra de color (el mismo que posee el n\u00famero) en el borde superior de la tarjeta. De no estar definido, la barr\u00e1 estar\u00e1 presente s\u00f3lo si la tarjeta posee marco. booleano Ninguno false collapse No Permite cambiar la frecuencia en la que se muestra la serie. Mediante este par\u00e1metro se puede hacer, por ejemplo, un agregado anual para una serie que tiene una frecuencia diaria. Las limitaciones del campo son que la frecuencia elegida tiene que ser menor o igual a la frecuencia por defecto de la serie, si no lo es entonces el gr\u00e1fico no se mostrar\u00e1 (Ej: si la serie tiene frecuencia semestral, 'collapse' puede ser solo o 'semester' o 'year'). string Ninguno 'day', 'month', 'quarter', 'semester', 'year' apiBaseUrl No Permite cambiar la URL de la API a la cual se le pedir\u00e1 la serie representada en la tarjeta. A dicha url se le adjuntar\u00e1 el texto '/series/?ids=serieId' al final. string 'http://apis.datos.gob.ar/series/api' 'http://miurl.apis.com/datos' decimals No Permite elegir cu\u00e1ntos d\u00edgitos decimales mostrar en el valor de la tarjeta. Debe ser mayor o igual a 0. Redondea los valores en caso de ser menor a la cantidad de d\u00edgitos original del valor; completa con 0s en caso contrario. int 2 5 numbersAbbreviate No Flag que indica si se deben abreviar los n\u00fameros grandes y formatearlos con el sufijo pertinente; si est\u00e1 apagado, no se realizar\u00e1 abreviatura alguna. Ver la secci\u00f3n de \"Abreviatura\" para m\u00e1s detalle. boolean true false decimalsBillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un bill\u00f3n. Supeditar\u00e1 al valor del par\u00e1metro decimals. int 2 4 decimalsMillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un mill\u00f3n. Supeditar\u00e1 al valor del par\u00e1metro decimals. boolean 2 0","title":"Tabla de par\u00e1metros"},{"location":"reference/ts-components/card/#paleta-de-colores-por-defecto","text":"Por defecto, la paleta de colores en los que se grafican las series del componente. Cada uno puede ser identificado con un hexadecimal o un entero decimal: #0072BB o 0 , para azul #2E7D33 o 1 , para verde oscuro #C62828 o 2 , para rojo #F9A822 o 3 , para naranja #6A1B99 o 4 , para violeta #EC407A o 5 , para rosa #C2185B o 6 , para fucsia #039BE5 o 7 , para celeste #6EA100 o 8 , para verde claro","title":"Paleta de colores por defecto"},{"location":"reference/ts-components/card/#abreviatura","text":"Si se habilita la abreviatura y formateo de n\u00fameros grandes, encendiendo el flag numbersAbbreviate (la \u00fanica manera de apagarlo es sete\u00e1ndole expl\u00edcitamente un valor false por medio del par\u00e1metro del componente), se proceder\u00e1 a formatearlos de la siguiente manera: Los valores porcentuales (distinguidos as\u00ed por los metadatos de la serie que representan) no son abreviados. Todo n\u00famero mayor o igual a un bill\u00f3n ( 1.000.000.000.000 ) o menor a un bill\u00f3n negativo ( -1.000.000.000.000 ) ser\u00e1 dividido por un bill\u00f3n, y se le agregar\u00e1 como sufijo la letra B . Todo n\u00famero mayor o igual a diez millones ( 10.000.000 ) y menor a un bill\u00f3n, o bien menor o igual a diez millones negativos ( -10.000.000 ) y mayor a un bill\u00f3n negativo ( -1.000.000.000.000 ), ser\u00e1 dividido por un mill\u00f3n ( 1.000.000 ), y se le agregar\u00e1 como sufijo la letra M . Todo n\u00famero mayor a un diez millones negativos y menor a diez millones ser\u00e1 conservado como tal, sin aplic\u00e1rsele sufijo alguno. En caso de abreviar, la cantidad de decimales que son tenidos en cuenta del cociente obtenido al dividir el valor original de la serie por el divisor apropiado depende de los valores (por defecto o especificados) de las cantidades de los par\u00e1metros decimalsBillion y decimalsMillion (seg\u00fan corresponda).","title":"Abreviatura"},{"location":"reference/ts-components/card/#ejemplo-completo","text":"< html > < body > < script type = 'text/javascript' src = 'components.js' > < div id = \"card1\" > < script > window . onload = function () { TSComponents . Card . render ( 'card1' , { serieId : '143.3_NO_PR_2004_A_21' , hasChart : 'small' , links : 'full' , locale : 'AR' , color : '#F9A822' , explicitSign : true , title : 'Titulo personalizado' , source : 'Fuente primaria: Mi Fuente' , units : '' , hasFrame : false , hasColorBar : true , collapse : 'year' , apiBaseUrl : 'http://apis.datos.gob.ar/series/api' }) } ","title":"Ejemplo completo"},{"location":"reference/ts-components/card/#demo-online","text":"https://jsfiddle.net/hfbjq791/","title":"Demo online"},{"location":"reference/ts-components/card/#variantes-de-tarjetas","text":"","title":"Variantes de tarjetas"},{"location":"reference/ts-components/card/#card-default","text":"","title":"Card: default"},{"location":"reference/ts-components/card/#card-menos-links","text":"","title":"Card: menos links"},{"location":"reference/ts-components/card/#card-sin-links","text":"","title":"Card: sin links"},{"location":"reference/ts-components/card/#card-minima","text":"","title":"Card: m\u00ednima"},{"location":"reference/ts-components/card/#card-minima-eliminando-elementos","text":"window.onload = function() { TSComponents.Card.render('ipc', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', title: \"Indice de Precios al Consumidor Nacional\", links: \"none\" }) TSComponents.Card.render('exportaciones', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', title: \"Exportaciones\", links: \"none\" }) TSComponents.Card.render('ipc-card', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', title: \"Exportaciones\" }) TSComponents.Card.render('ipc-card-links2', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', links: \"small\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-links2', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', links: \"small\", title: \"Exportaciones\" }) TSComponents.Card.render('ipc-card-med', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', links: \"none\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-med', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', links: \"none\", title: \"Exportaciones\", hasFrame: false }) TSComponents.Card.render('ipc-card-min', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', links: 'none', hasChart: \"none\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-min', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, links: 'none', hasChart: \"none\", title: \"Exportaciones\", hasColorBar: true }) TSComponents.Card.render('ipc-card-min-xtreme', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', links: 'none', hasChart: \"none\", title: \"\", units: \"\", source: \"\" }) TSComponents.Card.render('exportaciones-card-min-xtreme', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, links: 'none', hasChart: \"none\", title: \"\", units: \"\", source: \"\" }) }","title":"Card: m\u00ednima (eliminando elementos)"},{"location":"reference/ts-components/examples/","text":".row { width: 90%; margin: auto; display: flex; justify-content: space-around; } .btn-primary { color: #ffffff; background-color: #0072bb; } Ejemplos: \ud83d\udd17 El prop\u00f3sito de este documento es mostrar ejemplos recomendados de implementar los componentes exportables (Card, Graphic). Para conocer la forma de implementar correctamente cada componente, referirse a la documentaci\u00f3n propia del mismo. Ejemplos Card: \ud83d\udd17 Indicadores destacados (m\u00ednimo): \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-min\" > < script > window . onload = function () { TSComponents . Card . render ( 'indicador-min' , { serieId : 'tcrse_QpvjK1:percent_change_a_year_ago' , color : '#0072BB' , hasChart : 'none' , title : \"TCRSE. Otros Cultivos.\" , links : \"none\" , hasFrame : false , explicitSign : true , source : \"Fuente: Secretar\u00eda de la Transformaci\u00f3n Productiva\" }) } Indicadores destacados (con mini-gr\u00e1fico): \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-graph\" > < script > window . onload = function () { TSComponents . Card . render ( 'indicador-graph' , { serieId : 'tmi_arg' , color : '#2E7D33' , hasChart : 'small' , links : \"none\" , hasFrame : false }) } Indicadores destacados (con tarjeta clickeable): \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-click\" > < script > window . onload = function () { TSComponents . Card . render ( 'indicador-click' , { serieId : 'defensa_FAA_0006' , color : '#C62828' , hasChart : 'small' , title : \"Personal Femenino en la Fuerza A\u00e9rea\" , links : \"none\" , }) } Indicadores destacados (con enlaces de descarga): \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-link\" > < script > window . onload = function () { TSComponents . Card . render ( 'indicador-min' , { serieId : '77.3_IEB_0_A_24' , color : '#F9A822' , hasChart : 'small' , title : \"Exportaciones FOB a Brasil\" , units : \"Millones de USD\" , }) } Ejemplos Graph: \ud83d\udd17 Graph destacado simple: \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row\" > < div class = \"col-sm-12\" id = \"graph-simple\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-simple' , { \u2003\u2003\u2003\u2003 graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=143.3_NO_PR_2004_A_21:percent_change_a_year_ago,116.4_TCRZE_2015_D_36_4' , \u2003\u2003\u2003\u2003 zoom : false , \u2003\u2003\u2003\u2003 chartTypes : { '143.3_NO_PR_2004_A_21:percent_change_a_year_ago' : 'column' }, \u2003\u2003\u2003\u2003 title : 'Nivel de Actividad y Tipo de Cambio Real Multilateral' , \u2003\u2003\u2003\u2003 source : 'Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC), Banco Central de la Rep\u00fablica Argentina (BCRA)' , \u2003\u2003\u2003\u2003 navigator : false }) } Graph destacado con zoom: \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"graph-zoom\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-zoom' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=33.2_ISAC_SIN_EDAD_0_M_23_56:percent_change_a_year_ago&last=12' , title : 'Indicador sint\u00e9tico de la actividad de la construcci\u00f3n (ISAC)' , source : 'Var % interanual. Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC)' , chartTypes : { \"33.2_ISAC_SIN_EDAD_0_M_23_56\" : \"column\" }, zoom : false , navigator : true , }) } Graph destacado con navegador y zoom: \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"graph-nav-zoom\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-nav-zoom' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=151.1_TL_SIN_TAC_2012_M_15,151.1_TL_ESTADAD_2012_M_20&last=12' , title : 'Cantidad de trabajadores registrados' , source : 'Cantidades. Fuente: Ministerio de Trabajo, Empleo y Seguridad Social' , legendField : 'description' , zoom : true , navigator : true }) } Ejemplos Card + Graph: \ud83d\udd17 Indicador con Graph inferior asociado: \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row\" > < div class = \"text-center\" id = \"graph-indicador1\" > < div class = \"row\" > < div id = \"indicator-graph1\" > < script > window . onload = function () { TSComponents . Card . render ( 'graph-indicador1' , { serieId : 'defensa_FAA_0006' , color : '#C62828' , hasChart : 'none' , title : \"\" , links : \"none\" , hasFrame : false , source : \"\" }) TSComponents . Graphic . render ( 'indicator-graph1' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=defensa_FAA_0006' , title : \"Personal Femenino en la Fuerza A\u00e9rea\" , source : \"Fuente: Ministerio de Defensa\" , colors : [ '#C62828' ] }) } Indicador con Graph lateral asociado: \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container row panels-row\" > < div id = 'graph-indicator2' > < div style = \"width: 500px; height: 350px;\" id = 'indicator-graph2' > < script > window . onload = function () { TSComponents . Card . render ( 'graph-indicator2' , { serieId : '148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago' , hasChart : \"small\" , title : \"Indicador IPC interanual\" }) TSComponents . Graphic . render ( 'indicator-graph2' , { graphicUrl : \"https://apis.datos.gob.ar/series/api/series?ids=148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\" , datePickerEnabled : false , zoom : false , title : \"Gr\u00e1fico IPC interanual\" , navigator : false , legendLabel : { \"148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\" : \"IPC (% interanual)\" } }) } window.onload = function() { TSComponents.Card.render('indicador-min', { serieId: 'tcrse_QpvjK1:percent_change_a_year_ago', color: '#0072BB', hasChart: 'none', title: \"TCRSE. Otros Cultivos.\", links: \"none\", hasFrame: false, explicitSign: true, source: \"Fuente: Secretar\u00eda de la Transformaci\u00f3n Productiva\" }) TSComponents.Card.render('indicador-graph', { serieId: 'tmi_arg', color: '#2E7D33', hasChart: 'small', links: \"none\", hasFrame: false }) TSComponents.Card.render('indicador-click', { serieId: 'defensa_FAA_0006', color: '#C62828', hasChart: 'small', title: \"Personal Femenino en la Fuerza A\u00e9rea\", links: \"none\", }) TSComponents.Card.render('indicador-link', { serieId: '77.3_IEB_0_A_24', color: '#F9A822', hasChart: 'small', title: \"Exportaciones FOB a Brasil\", units: \"Millones de USD\", }) TSComponents.Graphic.render('graph-simple', { \u2003\u2003\u2003\u2003graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=143.3_NO_PR_2004_A_21:percent_change_a_year_ago,116.4_TCRZE_2015_D_36_4', \u2003\u2003\u2003\u2003zoom: false, \u2003\u2003\u2003\u2003chartTypes: {'143.3_NO_PR_2004_A_21:percent_change_a_year_ago': 'column'}, \u2003\u2003\u2003\u2003title: 'Nivel de Actividad y Tipo de Cambio Real Multilateral', \u2003\u2003\u2003\u2003source: 'Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC), Banco Central de la Rep\u00fablica Argentina (BCRA)', \u2003\u2003\u2003\u2003navigator: false }) TSComponents.Graphic.render('graph-zoom', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=33.2_ISAC_SIN_EDAD_0_M_23_56:percent_change_a_year_ago&last=12', title: 'Indicador sint\u00e9tico de la actividad de la construcci\u00f3n (ISAC)', source: 'Var % interanual. Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC)', chartTypes: { \"33.2_ISAC_SIN_EDAD_0_M_23_56\": \"column\" }, zoom: false, navigator: true, }) TSComponents.Graphic.render('graph-nav-zoom', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=151.1_TL_SIN_TAC_2012_M_15,151.1_TL_ESTADAD_2012_M_20&last=12', title: 'Cantidad de trabajadores registrados', source: 'Cantidades. Fuente: Ministerio de Trabajo, Empleo y Seguridad Social', legendField: 'description', zoom: true, navigator: true }) TSComponents.Card.render('graph-indicador1', { serieId: 'defensa_FAA_0006', color: '#C62828', hasChart: 'none', title: \"\", links: \"none\", hasFrame: false, source: \"\" }) TSComponents.Graphic.render('indicator-graph1', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=defensa_FAA_0006', title: \"Personal Femenino en la Fuerza A\u00e9rea\", source: \"Fuente: Ministerio de Defensa\", colors: ['#C62828'] }) TSComponents.Card.render('graph-indicator2', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago', hasChart: \"small\", title: \"Indicador IPC interanual\" }) TSComponents.Graphic.render('indicator-graph2', { graphicUrl: \"https://apis.datos.gob.ar/series/api/series?ids=148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\", datePickerEnabled: false, zoom: false, title: \"Gr\u00e1fico IPC interanual\", navigator: false, legendLabel: { \"148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\": \"IPC (% interanual)\" } }) }","title":"TSComponents: Ejemplos"},{"location":"reference/ts-components/examples/#ejemplos","text":"El prop\u00f3sito de este documento es mostrar ejemplos recomendados de implementar los componentes exportables (Card, Graphic). Para conocer la forma de implementar correctamente cada componente, referirse a la documentaci\u00f3n propia del mismo.","title":"Ejemplos:"},{"location":"reference/ts-components/examples/#ejemplos-card","text":"","title":"Ejemplos Card:"},{"location":"reference/ts-components/examples/#indicadores-destacados-minimo","text":"","title":"Indicadores destacados (m\u00ednimo):"},{"location":"reference/ts-components/examples/#ejemplo","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-min\" > < script > window . onload = function () { TSComponents . Card . render ( 'indicador-min' , { serieId : 'tcrse_QpvjK1:percent_change_a_year_ago' , color : '#0072BB' , hasChart : 'none' , title : \"TCRSE. Otros Cultivos.\" , links : \"none\" , hasFrame : false , explicitSign : true , source : \"Fuente: Secretar\u00eda de la Transformaci\u00f3n Productiva\" }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#indicadores-destacados-con-mini-grafico","text":"","title":"Indicadores destacados (con mini-gr\u00e1fico):"},{"location":"reference/ts-components/examples/#ejemplo_1","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_1","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-graph\" > < script > window . onload = function () { TSComponents . Card . render ( 'indicador-graph' , { serieId : 'tmi_arg' , color : '#2E7D33' , hasChart : 'small' , links : \"none\" , hasFrame : false }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#indicadores-destacados-con-tarjeta-clickeable","text":"","title":"Indicadores destacados (con tarjeta clickeable):"},{"location":"reference/ts-components/examples/#ejemplo_2","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_2","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-click\" > < script > window . onload = function () { TSComponents . Card . render ( 'indicador-click' , { serieId : 'defensa_FAA_0006' , color : '#C62828' , hasChart : 'small' , title : \"Personal Femenino en la Fuerza A\u00e9rea\" , links : \"none\" , }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#indicadores-destacados-con-enlaces-de-descarga","text":"","title":"Indicadores destacados (con enlaces de descarga):"},{"location":"reference/ts-components/examples/#ejemplo_3","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_3","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-link\" > < script > window . onload = function () { TSComponents . Card . render ( 'indicador-min' , { serieId : '77.3_IEB_0_A_24' , color : '#F9A822' , hasChart : 'small' , title : \"Exportaciones FOB a Brasil\" , units : \"Millones de USD\" , }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#ejemplos-graph","text":"","title":"Ejemplos Graph:"},{"location":"reference/ts-components/examples/#graph-destacado-simple","text":"","title":"Graph destacado simple:"},{"location":"reference/ts-components/examples/#ejemplo_4","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_4","text":"< div class = \"container\" > < div class = \"row\" > < div class = \"col-sm-12\" id = \"graph-simple\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-simple' , { \u2003\u2003\u2003\u2003 graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=143.3_NO_PR_2004_A_21:percent_change_a_year_ago,116.4_TCRZE_2015_D_36_4' , \u2003\u2003\u2003\u2003 zoom : false , \u2003\u2003\u2003\u2003 chartTypes : { '143.3_NO_PR_2004_A_21:percent_change_a_year_ago' : 'column' }, \u2003\u2003\u2003\u2003 title : 'Nivel de Actividad y Tipo de Cambio Real Multilateral' , \u2003\u2003\u2003\u2003 source : 'Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC), Banco Central de la Rep\u00fablica Argentina (BCRA)' , \u2003\u2003\u2003\u2003 navigator : false }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#graph-destacado-con-zoom","text":"","title":"Graph destacado con zoom:"},{"location":"reference/ts-components/examples/#ejemplo_5","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_5","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"graph-zoom\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-zoom' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=33.2_ISAC_SIN_EDAD_0_M_23_56:percent_change_a_year_ago&last=12' , title : 'Indicador sint\u00e9tico de la actividad de la construcci\u00f3n (ISAC)' , source : 'Var % interanual. Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC)' , chartTypes : { \"33.2_ISAC_SIN_EDAD_0_M_23_56\" : \"column\" }, zoom : false , navigator : true , }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#graph-destacado-con-navegador-y-zoom","text":"","title":"Graph destacado con navegador y zoom:"},{"location":"reference/ts-components/examples/#ejemplo_6","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_6","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"graph-nav-zoom\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-nav-zoom' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=151.1_TL_SIN_TAC_2012_M_15,151.1_TL_ESTADAD_2012_M_20&last=12' , title : 'Cantidad de trabajadores registrados' , source : 'Cantidades. Fuente: Ministerio de Trabajo, Empleo y Seguridad Social' , legendField : 'description' , zoom : true , navigator : true }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#ejemplos-card-graph","text":"","title":"Ejemplos Card + Graph:"},{"location":"reference/ts-components/examples/#indicador-con-graph-inferior-asociado","text":"","title":"Indicador con Graph inferior asociado:"},{"location":"reference/ts-components/examples/#ejemplo_7","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_7","text":"< div class = \"container\" > < div class = \"row\" > < div class = \"text-center\" id = \"graph-indicador1\" > < div class = \"row\" > < div id = \"indicator-graph1\" > < script > window . onload = function () { TSComponents . Card . render ( 'graph-indicador1' , { serieId : 'defensa_FAA_0006' , color : '#C62828' , hasChart : 'none' , title : \"\" , links : \"none\" , hasFrame : false , source : \"\" }) TSComponents . Graphic . render ( 'indicator-graph1' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=defensa_FAA_0006' , title : \"Personal Femenino en la Fuerza A\u00e9rea\" , source : \"Fuente: Ministerio de Defensa\" , colors : [ '#C62828' ] }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#indicador-con-graph-lateral-asociado","text":"","title":"Indicador con Graph lateral asociado:"},{"location":"reference/ts-components/examples/#ejemplo_8","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_8","text":"< div class = \"container row panels-row\" > < div id = 'graph-indicator2' > < div style = \"width: 500px; height: 350px;\" id = 'indicator-graph2' > < script > window . onload = function () { TSComponents . Card . render ( 'graph-indicator2' , { serieId : '148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago' , hasChart : \"small\" , title : \"Indicador IPC interanual\" }) TSComponents . Graphic . render ( 'indicator-graph2' , { graphicUrl : \"https://apis.datos.gob.ar/series/api/series?ids=148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\" , datePickerEnabled : false , zoom : false , title : \"Gr\u00e1fico IPC interanual\" , navigator : false , legendLabel : { \"148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\" : \"IPC (% interanual)\" } }) } window.onload = function() { TSComponents.Card.render('indicador-min', { serieId: 'tcrse_QpvjK1:percent_change_a_year_ago', color: '#0072BB', hasChart: 'none', title: \"TCRSE. Otros Cultivos.\", links: \"none\", hasFrame: false, explicitSign: true, source: \"Fuente: Secretar\u00eda de la Transformaci\u00f3n Productiva\" }) TSComponents.Card.render('indicador-graph', { serieId: 'tmi_arg', color: '#2E7D33', hasChart: 'small', links: \"none\", hasFrame: false }) TSComponents.Card.render('indicador-click', { serieId: 'defensa_FAA_0006', color: '#C62828', hasChart: 'small', title: \"Personal Femenino en la Fuerza A\u00e9rea\", links: \"none\", }) TSComponents.Card.render('indicador-link', { serieId: '77.3_IEB_0_A_24', color: '#F9A822', hasChart: 'small', title: \"Exportaciones FOB a Brasil\", units: \"Millones de USD\", }) TSComponents.Graphic.render('graph-simple', { \u2003\u2003\u2003\u2003graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=143.3_NO_PR_2004_A_21:percent_change_a_year_ago,116.4_TCRZE_2015_D_36_4', \u2003\u2003\u2003\u2003zoom: false, \u2003\u2003\u2003\u2003chartTypes: {'143.3_NO_PR_2004_A_21:percent_change_a_year_ago': 'column'}, \u2003\u2003\u2003\u2003title: 'Nivel de Actividad y Tipo de Cambio Real Multilateral', \u2003\u2003\u2003\u2003source: 'Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC), Banco Central de la Rep\u00fablica Argentina (BCRA)', \u2003\u2003\u2003\u2003navigator: false }) TSComponents.Graphic.render('graph-zoom', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=33.2_ISAC_SIN_EDAD_0_M_23_56:percent_change_a_year_ago&last=12', title: 'Indicador sint\u00e9tico de la actividad de la construcci\u00f3n (ISAC)', source: 'Var % interanual. Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC)', chartTypes: { \"33.2_ISAC_SIN_EDAD_0_M_23_56\": \"column\" }, zoom: false, navigator: true, }) TSComponents.Graphic.render('graph-nav-zoom', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=151.1_TL_SIN_TAC_2012_M_15,151.1_TL_ESTADAD_2012_M_20&last=12', title: 'Cantidad de trabajadores registrados', source: 'Cantidades. Fuente: Ministerio de Trabajo, Empleo y Seguridad Social', legendField: 'description', zoom: true, navigator: true }) TSComponents.Card.render('graph-indicador1', { serieId: 'defensa_FAA_0006', color: '#C62828', hasChart: 'none', title: \"\", links: \"none\", hasFrame: false, source: \"\" }) TSComponents.Graphic.render('indicator-graph1', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=defensa_FAA_0006', title: \"Personal Femenino en la Fuerza A\u00e9rea\", source: \"Fuente: Ministerio de Defensa\", colors: ['#C62828'] }) TSComponents.Card.render('graph-indicator2', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago', hasChart: \"small\", title: \"Indicador IPC interanual\" }) TSComponents.Graphic.render('indicator-graph2', { graphicUrl: \"https://apis.datos.gob.ar/series/api/series?ids=148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\", datePickerEnabled: false, zoom: false, title: \"Gr\u00e1fico IPC interanual\", navigator: false, legendLabel: { \"148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\": \"IPC (% interanual)\" } }) }","title":"C\u00f3digo:"},{"location":"reference/ts-components/graphic/","text":"Componente: graphic \ud83d\udd17 El componente graphic permite embeber gr\u00e1ficos de l\u00edneas, \u00e1reas o barras en experiencias web. Permite elegir distintos elementos de filtro de fechas, personalizar los textos, etc. Ejemplo base \ud83d\udd17 Ver online: https://jsfiddle.net/6o1c48pq/ window.onload = function() { TSComponents.Graphic.render('tmi', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg', title: 'Tasa de Mortalidad Infantil de Argentina', source: 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' }) } Este gr\u00e1fico se genera a partir del siguiente c\u00f3digo: < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/js/components.js' > < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/css/components.css' /> < div id = \"tmi\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'tmi' , { // Llamada a la API de Series de Tiempo graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg' , title : 'Tasa de Mortalidad Infantil de Argentina' , source : 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' }) } Tabla de par\u00e1metros \ud83d\udd17 Nombre Requerido Descripci\u00f3n Tipo Default Ejemplos graphicUrl Si URL completa del llamado a la API. string Ninguno https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg chartOptions No Cualquier opci\u00f3n v\u00e1lida para [Highcharts](https://api.highcharts.com/highcharts/). object {} navigator No Indica si est\u00e1 habilitada la funcionalidad de navegaci\u00f3n de la serie. boolean Din\u00e1mico true / false locale No Valores posibles: \"AR\" o \"US\" (pendientes nuevos valores). Representan qu\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string AR AR o US zoom No Indica si tiene habilitada la funcionalidad de zoom. boolean Din\u00e1mico true / false exportable No Indica si tiene habilitada la funcionalidad de exportar el gr\u00e1fico. boolean Din\u00e1mico true / false colors No Paleta de colores alternativa a la default. Los c\u00f3digos de colores pueden ser tanto hexadecimales (ej. \"#00CC44\") como numeros que son mapeados a la paleta por defecto (del 0 al 8) Ver paleta por defecto m\u00e1s abajo. list [\"#0072BB\", \"#2E7D33\", \"#C62828\", \"#F9A822\", \"#6A1B99\", \"#EC407A\", \"#C2185B\", \"#039BE5\", \"#6EA100\"] [0, 1, 2, 3, 4, 5, 6, 7, 8] [\"#2E7D33\", 2, \"#F9A822\"] backgroundColor No Color de fondo del gr\u00e1fico en formato hexadecimal. string #cdcdcd #cdcdcd datePickerEnabled No Indica si el selector de fechas est\u00e1 habilitado. boolean Din\u00e1mica true / false legendField No Indica el campo de la serie a usar para mostrar la leyenda. string 'title' \"title\", \"description\" o \"id\" chartTypes No Especifica el tipo de gr\u00e1fico a usar para cada serie < ./td> object 'line' para todas las series {'tmi_arg': 'column', 'tmi_02': 'line', 'tmi_06': 'area'} title No Especifica el t\u00edtulo el gr\u00e1fico. string Ninguno Tasa de Mortalidad Infantil de Argentina source No Especifica el texto al pie del gr\u00e1fico. string Ninguno Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud displayUnits No Indica si se muestran las unidades del gr\u00e1fico. boolean Din\u00e1mico true / false legendLabel No Especifica el texto a mostrar como leyenda por cada serie. object {} {'serie01': 'leyenda custom'} seriesAxis No Especifica de qu\u00e9 lado del gr\u00e1fico mostrar las ordenadas y unidades de cada serie representada. Puede haber m\u00e1s de una serie en un mismo lado. Si hay una sola serie, debe ir obligatoriamente del lado izquierdo. object {} {'serie01': 'right', 'serie02': 'left'} chartType No Especifica un tipo de gr\u00e1fico para aplicar a todas las series como default. En caso de estar especificado un tipo para una serie en chartTypes, este \u00faltimo ser\u00e1 priorizado para la misma. string 'line' 'line', 'area' o 'column' decimalLeftAxis No Especifica cu\u00e1ntos d\u00edgitos decimales tendr\u00e1n los valores de las ordenadas del eje izquierdo (principal) del gr\u00e1fico. int Ninguno 6 decimalRightAxis No Especifica cu\u00e1ntos d\u00edgitos decimales tendr\u00e1n los valores de las ordenadas del eje derecho (auxiliar) del gr\u00e1fico. int Ninguno 0 decimalTooltips No Especifica cu\u00e1ntos d\u00edgitos decimales mostrar\u00e1 el texto en el tooltip para cada serie, mapeando ids de series con cantidades de decimales. object Ninguno {'serie01': 4, 'serie02': 1} decimalTooltip No Especifica la cantidad de d\u00edgitos decimales a mostrar en el texto del tooltip para toda serie que no lo haya definido en el par\u00e1metro decimalTooltips. int Ninguno 3 numbersAbbreviate No Flag que indica si se deben abreviar los n\u00fameros grandes y formatearlos con el sufijo pertinente; si est\u00e1 apagado, no se realizar\u00e1 abreviatura alguna. Ver la secci\u00f3n de \"Abreviatura\" para m\u00e1s detalle. boolean true false decimalsBillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un bill\u00f3n. Supeditar\u00e1 al valor del par\u00e1metro decimals. int 2 4 decimalsMillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un mill\u00f3n. Supeditar\u00e1 al valor del par\u00e1metro decimals. boolean 2 0 startDate No Fecha de inicio de la regi\u00f3n del gr\u00e1fico sobre la cual hacer un zoom inicial al renderizarlo; en caso de ser menor a la fecha con datos m\u00e1s antigua de la serie, ser\u00e1 reemplazada por tal. Debe estar en formato ISO 8601 (AAAA-MM-DD). string Fecha m\u00e1s antigua de la serie '2014-03-30' endDate No Fecha de fin de la regi\u00f3n del gr\u00e1fico sobre la cual hacer un zoom inicial al renderizarlo; en caso de ser mayor a la fecha con datos m\u00e1s reciente de la serie, ser\u00e1 reemplazada por tal. Debe estar en formato ISO 8601 (AAAA-MM-DD). string Fecha m\u00e1s reciente de la serie '2018-12-09' Paleta de colores por defecto \ud83d\udd17 Por defecto, la paleta de colores en los que se grafican las series del componente. Cada uno puede ser identificado con un hexadecimal o un entero decimal: #0072BB o 0 , para azul #2E7D33 o 1 , para verde oscuro #C62828 o 2 , para rojo #F9A822 o 3 , para naranja #6A1B99 o 4 , para violeta #EC407A o 5 , para rosa #C2185B o 6 , para fucsia #039BE5 o 7 , para celeste #6EA100 o 8 , para verde claro Abreviatura \ud83d\udd17 Si se habilita la abreviatura y formateo de n\u00fameros grandes, encendiendo el flag numbersAbbreviate (la \u00fanica manera de apagarlo es sete\u00e1ndole expl\u00edcitamente un valor false por medio del par\u00e1metro del componente), se proceder\u00e1 a formatearlos de la siguiente manera: Los valores porcentuales (distinguidos as\u00ed por los metadatos de la serie que representan) no son abreviados. Todo n\u00famero mayor o igual a un bill\u00f3n ( 1.000.000.000.000 ) o menor a un bill\u00f3n negativo ( -1.000.000.000.000 ) ser\u00e1 dividido por un bill\u00f3n, y se le agregar\u00e1 como sufijo la letra B . Todo n\u00famero mayor o igual a diez millones ( 10.000.000 ) y menor a un bill\u00f3n, o bien menor o igual a diez millones negativos ( -10.000.000 ) y mayor a un bill\u00f3n negativo ( -1.000.000.000.000 ), ser\u00e1 dividido por un mill\u00f3n ( 1.000.000 ), y se le agregar\u00e1 como sufijo la letra M . Todo n\u00famero mayor a un diez millones negativos y menor a diez millones ser\u00e1 conservado como tal, sin aplic\u00e1rsele sufijo alguno. En caso de abreviar, la cantidad de decimales que son tenidos en cuenta del cociente obtenido al dividir el valor original de la serie por el divisor apropiado depende de los valores (por defecto o especificados) de las cantidades de los par\u00e1metros decimalsBillion y decimalsMillion (seg\u00fan corresponda). Asignaci\u00f3n din\u00e1mica de atributos \ud83d\udd17 Varios componentes del gr\u00e1fico se muestran/ocultan din\u00e1micamente dependiendo de su tama\u00f1o. Los componentes son din\u00e1micos, en tanto no se especifique su valor de inicializaci\u00f3n: Si un par\u00e1metro se especifica con valor true se muestra siempre. Si el par\u00e1metro es false no se muestra nunca. Si no se especifica, corren las siguientes reglas: zoom : Se muestra si el ancho es mayor o igual a 620px navigator : Se muestra si el ancho es mayor o igual a 500px datePickerEnabled : Se muestra si el ancho es mayor o igual a 400px displayUnits : Se muestra si el ancho es mayor o igual a 450px leyenda : Este no es un campo que se pueda ocultar mediante la API de TSComponents.Graphic , pero los valores de la leyenda se muestran s\u00f3lo si hay m\u00e1s de una serie aplicada. Ejemplo completo \ud83d\udd17 < html > < body > < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/js/components.js' > < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/css/components.css' /> < div id = \"root\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'root' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg' , title : 'Tasa de Mortalidad Infantil de Argentina' , source : 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' , legendField : 'title' , chartType : 'area' , chartTypes : { 'tmi_arg' : 'column' }, zoom : true , datePickerEnabled : true , displayUnits : true exportable : true , navigator : false , backgroundColor : '#cdcdcd' , colors : [ '#cecece' , '#8d6b22' , '#62848d' ], locale : 'AR' , chartOptions : {}, legendLabel : { 'tmi_arg' : 'Tasa de mortalidad nacional' }, seriesAxis : { 'tmi_arg' : 'left' } }) } ","title":"TSComponents: Graphic"},{"location":"reference/ts-components/graphic/#componente-graphic","text":"El componente graphic permite embeber gr\u00e1ficos de l\u00edneas, \u00e1reas o barras en experiencias web. Permite elegir distintos elementos de filtro de fechas, personalizar los textos, etc.","title":"Componente: graphic"},{"location":"reference/ts-components/graphic/#ejemplo-base","text":"Ver online: https://jsfiddle.net/6o1c48pq/ window.onload = function() { TSComponents.Graphic.render('tmi', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg', title: 'Tasa de Mortalidad Infantil de Argentina', source: 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' }) } Este gr\u00e1fico se genera a partir del siguiente c\u00f3digo: < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/js/components.js' > < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/css/components.css' /> < div id = \"tmi\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'tmi' , { // Llamada a la API de Series de Tiempo graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg' , title : 'Tasa de Mortalidad Infantil de Argentina' , source : 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' }) } ","title":"Ejemplo base"},{"location":"reference/ts-components/graphic/#tabla-de-parametros","text":"Nombre Requerido Descripci\u00f3n Tipo Default Ejemplos graphicUrl Si URL completa del llamado a la API. string Ninguno https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg chartOptions No Cualquier opci\u00f3n v\u00e1lida para [Highcharts](https://api.highcharts.com/highcharts/). object {} navigator No Indica si est\u00e1 habilitada la funcionalidad de navegaci\u00f3n de la serie. boolean Din\u00e1mico true / false locale No Valores posibles: \"AR\" o \"US\" (pendientes nuevos valores). Representan qu\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string AR AR o US zoom No Indica si tiene habilitada la funcionalidad de zoom. boolean Din\u00e1mico true / false exportable No Indica si tiene habilitada la funcionalidad de exportar el gr\u00e1fico. boolean Din\u00e1mico true / false colors No Paleta de colores alternativa a la default. Los c\u00f3digos de colores pueden ser tanto hexadecimales (ej. \"#00CC44\") como numeros que son mapeados a la paleta por defecto (del 0 al 8) Ver paleta por defecto m\u00e1s abajo. list [\"#0072BB\", \"#2E7D33\", \"#C62828\", \"#F9A822\", \"#6A1B99\", \"#EC407A\", \"#C2185B\", \"#039BE5\", \"#6EA100\"] [0, 1, 2, 3, 4, 5, 6, 7, 8] [\"#2E7D33\", 2, \"#F9A822\"] backgroundColor No Color de fondo del gr\u00e1fico en formato hexadecimal. string #cdcdcd #cdcdcd datePickerEnabled No Indica si el selector de fechas est\u00e1 habilitado. boolean Din\u00e1mica true / false legendField No Indica el campo de la serie a usar para mostrar la leyenda. string 'title' \"title\", \"description\" o \"id\" chartTypes No Especifica el tipo de gr\u00e1fico a usar para cada serie < ./td> object 'line' para todas las series {'tmi_arg': 'column', 'tmi_02': 'line', 'tmi_06': 'area'} title No Especifica el t\u00edtulo el gr\u00e1fico. string Ninguno Tasa de Mortalidad Infantil de Argentina source No Especifica el texto al pie del gr\u00e1fico. string Ninguno Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud displayUnits No Indica si se muestran las unidades del gr\u00e1fico. boolean Din\u00e1mico true / false legendLabel No Especifica el texto a mostrar como leyenda por cada serie. object {} {'serie01': 'leyenda custom'} seriesAxis No Especifica de qu\u00e9 lado del gr\u00e1fico mostrar las ordenadas y unidades de cada serie representada. Puede haber m\u00e1s de una serie en un mismo lado. Si hay una sola serie, debe ir obligatoriamente del lado izquierdo. object {} {'serie01': 'right', 'serie02': 'left'} chartType No Especifica un tipo de gr\u00e1fico para aplicar a todas las series como default. En caso de estar especificado un tipo para una serie en chartTypes, este \u00faltimo ser\u00e1 priorizado para la misma. string 'line' 'line', 'area' o 'column' decimalLeftAxis No Especifica cu\u00e1ntos d\u00edgitos decimales tendr\u00e1n los valores de las ordenadas del eje izquierdo (principal) del gr\u00e1fico. int Ninguno 6 decimalRightAxis No Especifica cu\u00e1ntos d\u00edgitos decimales tendr\u00e1n los valores de las ordenadas del eje derecho (auxiliar) del gr\u00e1fico. int Ninguno 0 decimalTooltips No Especifica cu\u00e1ntos d\u00edgitos decimales mostrar\u00e1 el texto en el tooltip para cada serie, mapeando ids de series con cantidades de decimales. object Ninguno {'serie01': 4, 'serie02': 1} decimalTooltip No Especifica la cantidad de d\u00edgitos decimales a mostrar en el texto del tooltip para toda serie que no lo haya definido en el par\u00e1metro decimalTooltips. int Ninguno 3 numbersAbbreviate No Flag que indica si se deben abreviar los n\u00fameros grandes y formatearlos con el sufijo pertinente; si est\u00e1 apagado, no se realizar\u00e1 abreviatura alguna. Ver la secci\u00f3n de \"Abreviatura\" para m\u00e1s detalle. boolean true false decimalsBillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un bill\u00f3n. Supeditar\u00e1 al valor del par\u00e1metro decimals. int 2 4 decimalsMillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un mill\u00f3n. Supeditar\u00e1 al valor del par\u00e1metro decimals. boolean 2 0 startDate No Fecha de inicio de la regi\u00f3n del gr\u00e1fico sobre la cual hacer un zoom inicial al renderizarlo; en caso de ser menor a la fecha con datos m\u00e1s antigua de la serie, ser\u00e1 reemplazada por tal. Debe estar en formato ISO 8601 (AAAA-MM-DD). string Fecha m\u00e1s antigua de la serie '2014-03-30' endDate No Fecha de fin de la regi\u00f3n del gr\u00e1fico sobre la cual hacer un zoom inicial al renderizarlo; en caso de ser mayor a la fecha con datos m\u00e1s reciente de la serie, ser\u00e1 reemplazada por tal. Debe estar en formato ISO 8601 (AAAA-MM-DD). string Fecha m\u00e1s reciente de la serie '2018-12-09'","title":"Tabla de par\u00e1metros"},{"location":"reference/ts-components/graphic/#paleta-de-colores-por-defecto","text":"Por defecto, la paleta de colores en los que se grafican las series del componente. Cada uno puede ser identificado con un hexadecimal o un entero decimal: #0072BB o 0 , para azul #2E7D33 o 1 , para verde oscuro #C62828 o 2 , para rojo #F9A822 o 3 , para naranja #6A1B99 o 4 , para violeta #EC407A o 5 , para rosa #C2185B o 6 , para fucsia #039BE5 o 7 , para celeste #6EA100 o 8 , para verde claro","title":"Paleta de colores por defecto"},{"location":"reference/ts-components/graphic/#abreviatura","text":"Si se habilita la abreviatura y formateo de n\u00fameros grandes, encendiendo el flag numbersAbbreviate (la \u00fanica manera de apagarlo es sete\u00e1ndole expl\u00edcitamente un valor false por medio del par\u00e1metro del componente), se proceder\u00e1 a formatearlos de la siguiente manera: Los valores porcentuales (distinguidos as\u00ed por los metadatos de la serie que representan) no son abreviados. Todo n\u00famero mayor o igual a un bill\u00f3n ( 1.000.000.000.000 ) o menor a un bill\u00f3n negativo ( -1.000.000.000.000 ) ser\u00e1 dividido por un bill\u00f3n, y se le agregar\u00e1 como sufijo la letra B . Todo n\u00famero mayor o igual a diez millones ( 10.000.000 ) y menor a un bill\u00f3n, o bien menor o igual a diez millones negativos ( -10.000.000 ) y mayor a un bill\u00f3n negativo ( -1.000.000.000.000 ), ser\u00e1 dividido por un mill\u00f3n ( 1.000.000 ), y se le agregar\u00e1 como sufijo la letra M . Todo n\u00famero mayor a un diez millones negativos y menor a diez millones ser\u00e1 conservado como tal, sin aplic\u00e1rsele sufijo alguno. En caso de abreviar, la cantidad de decimales que son tenidos en cuenta del cociente obtenido al dividir el valor original de la serie por el divisor apropiado depende de los valores (por defecto o especificados) de las cantidades de los par\u00e1metros decimalsBillion y decimalsMillion (seg\u00fan corresponda).","title":"Abreviatura"},{"location":"reference/ts-components/graphic/#asignacion-dinamica-de-atributos","text":"Varios componentes del gr\u00e1fico se muestran/ocultan din\u00e1micamente dependiendo de su tama\u00f1o. Los componentes son din\u00e1micos, en tanto no se especifique su valor de inicializaci\u00f3n: Si un par\u00e1metro se especifica con valor true se muestra siempre. Si el par\u00e1metro es false no se muestra nunca. Si no se especifica, corren las siguientes reglas: zoom : Se muestra si el ancho es mayor o igual a 620px navigator : Se muestra si el ancho es mayor o igual a 500px datePickerEnabled : Se muestra si el ancho es mayor o igual a 400px displayUnits : Se muestra si el ancho es mayor o igual a 450px leyenda : Este no es un campo que se pueda ocultar mediante la API de TSComponents.Graphic , pero los valores de la leyenda se muestran s\u00f3lo si hay m\u00e1s de una serie aplicada.","title":"Asignaci\u00f3n din\u00e1mica de atributos"},{"location":"reference/ts-components/graphic/#ejemplo-completo","text":"< html > < body > < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/js/components.js' > < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/css/components.css' /> < div id = \"root\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'root' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg' , title : 'Tasa de Mortalidad Infantil de Argentina' , source : 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' , legendField : 'title' , chartType : 'area' , chartTypes : { 'tmi_arg' : 'column' }, zoom : true , datePickerEnabled : true , displayUnits : true exportable : true , navigator : false , backgroundColor : '#cdcdcd' , colors : [ '#cecece' , '#8d6b22' , '#62848d' ], locale : 'AR' , chartOptions : {}, legendLabel : { 'tmi_arg' : 'Tasa de mortalidad nacional' }, seriesAxis : { 'tmi_arg' : 'left' } }) } ","title":"Ejemplo completo"},{"location":"reference/ts-components/layout/","text":".btn-primary { color: #ffffff; background-color: #0072bb; } Layout de componentes: \ud83d\udd17 La hoja de estilos components.css incluye tambi\u00e9n selectores de clases aplicables a elementos HTML, inherentes al layout del dashboard o p\u00e1gina donde se inserten los componentes. Fila para componentes: \ud83d\udd17 Selector cuyos elementos internos ser\u00e1n equiespaciados y dispuestos horizontalmente. Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"ts-components-row\" > < div id = \"card-en-row-1\" > < div id = \"card-en-row-2\" > < div id = \"card-en-row-3\" > < script > window . onload = function () { TSComponents . Card . render ( 'card-en-row-1' , { serieId : '46.2_ECTSTG_0_T_40' , color : '#0072BB' , hasChart : 'none' , title : \"Tasa Subocupaci\u00f3n GBA\" , links : \"none\" , hasFrame : true , source : \"Fuente: SSPM\" }) TSComponents . Card . render ( 'card-en-row-2' , { serieId : '46.2_ECTSTSL_0_T_45' , color : '#6B8E23' , hasChart : 'none' , title : \"Tasa Subocupaci\u00f3n San Luis\" , links : \"none\" , hasFrame : true , source : \"Fuente: SSPM\" }) TSComponents . Card . render ( 'card-en-row-3' , { serieId : '46.2_ECTSTC_0_T_47' , color : '#FFA500' , hasChart : 'none' , title : \"Tasa Subocupaci\u00f3n Corrientes\" , links : \"none\" , hasFrame : true , source : \"Fuente: SSPM\" }) } Contenedor de Card: \ud83d\udd17 Selector para div de una Card, con un peque\u00f1o margen abajo y \u00f3ptimo para diversos viewports. Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"card-wrapper\" id = \"card-superior\" > < div class = \"card-wrapper\" id = \"card-inferior\" > < script > window . onload = function () { TSComponents . Card . render ( 'card-superior' , { serieId : '105.1_I2L_2016_M_16' , hasChart : 'none' , color : '#5ED613' , title : \"IPC Lechuga\" , links : \"none\" , hasFrame : true , source : \"Fuente: SSPM\" }) TSComponents . Card . render ( 'card-inferior' , { serieId : '105.1_I2BAT_2016_M_15' , hasChart : 'none' , color : '#969009' , title : \"IPC Batata\" , links : \"none\" , hasFrame : true , source : \"Fuente: SSPM\" }) } window.onload = function() { TSComponents.Card.render('card-en-row-1', { serieId: '46.2_ECTSTG_0_T_40', color: '#0072BB', hasChart: 'none', title: \"Tasa Subocupaci\u00f3n GBA\", links: \"none\", hasFrame: true, source: \"Fuente: SSPM\" }) TSComponents.Card.render('card-en-row-2', { serieId: '46.2_ECTSTSL_0_T_45', color: '#6B8E23', hasChart: 'none', title: \"Tasa Subocupaci\u00f3n San Luis\", links: \"none\", hasFrame: true, source: \"Fuente: SSPM\" }) TSComponents.Card.render('card-en-row-3', { serieId: '46.2_ECTSTC_0_T_47', color: '#FFA500', hasChart: 'none', title: \"Tasa Subocupaci\u00f3n Corrientes\", links: \"none\", hasFrame: true, source: \"Fuente: SSPM\" }) TSComponents.Card.render('card-superior', { serieId: '105.1_I2L_2016_M_16', hasChart: 'none', color:'#5ED613', title: \"IPC Lechuga\", links: \"none\", hasFrame: true, source: \"Fuente: SSPM\" }) TSComponents.Card.render('card-inferior', { serieId: '105.1_I2BAT_2016_M_15', hasChart: 'none', color:'#969009', title: \"IPC Batata\", links: \"none\", hasFrame: true, source: \"Fuente: SSPM\" }) }","title":"TSComponents: Layout"},{"location":"reference/ts-components/layout/#layout-de-componentes","text":"La hoja de estilos components.css incluye tambi\u00e9n selectores de clases aplicables a elementos HTML, inherentes al layout del dashboard o p\u00e1gina donde se inserten los componentes.","title":"Layout de componentes:"},{"location":"reference/ts-components/layout/#fila-para-componentes","text":"Selector cuyos elementos internos ser\u00e1n equiespaciados y dispuestos horizontalmente.","title":"Fila para componentes:"},{"location":"reference/ts-components/layout/#ejemplo","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/layout/#codigo","text":"< div class = \"ts-components-row\" > < div id = \"card-en-row-1\" > < div id = \"card-en-row-2\" > < div id = \"card-en-row-3\" > < script > window . onload = function () { TSComponents . Card . render ( 'card-en-row-1' , { serieId : '46.2_ECTSTG_0_T_40' , color : '#0072BB' , hasChart : 'none' , title : \"Tasa Subocupaci\u00f3n GBA\" , links : \"none\" , hasFrame : true , source : \"Fuente: SSPM\" }) TSComponents . Card . render ( 'card-en-row-2' , { serieId : '46.2_ECTSTSL_0_T_45' , color : '#6B8E23' , hasChart : 'none' , title : \"Tasa Subocupaci\u00f3n San Luis\" , links : \"none\" , hasFrame : true , source : \"Fuente: SSPM\" }) TSComponents . Card . render ( 'card-en-row-3' , { serieId : '46.2_ECTSTC_0_T_47' , color : '#FFA500' , hasChart : 'none' , title : \"Tasa Subocupaci\u00f3n Corrientes\" , links : \"none\" , hasFrame : true , source : \"Fuente: SSPM\" }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/layout/#contenedor-de-card","text":"Selector para div de una Card, con un peque\u00f1o margen abajo y \u00f3ptimo para diversos viewports.","title":"Contenedor de Card:"},{"location":"reference/ts-components/layout/#ejemplo_1","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/layout/#codigo_1","text":"< div class = \"card-wrapper\" id = \"card-superior\" > < div class = \"card-wrapper\" id = \"card-inferior\" > < script > window . onload = function () { TSComponents . Card . render ( 'card-superior' , { serieId : '105.1_I2L_2016_M_16' , hasChart : 'none' , color : '#5ED613' , title : \"IPC Lechuga\" , links : \"none\" , hasFrame : true , source : \"Fuente: SSPM\" }) TSComponents . Card . render ( 'card-inferior' , { serieId : '105.1_I2BAT_2016_M_15' , hasChart : 'none' , color : '#969009' , title : \"IPC Batata\" , links : \"none\" , hasFrame : true , source : \"Fuente: SSPM\" }) } window.onload = function() { TSComponents.Card.render('card-en-row-1', { serieId: '46.2_ECTSTG_0_T_40', color: '#0072BB', hasChart: 'none', title: \"Tasa Subocupaci\u00f3n GBA\", links: \"none\", hasFrame: true, source: \"Fuente: SSPM\" }) TSComponents.Card.render('card-en-row-2', { serieId: '46.2_ECTSTSL_0_T_45', color: '#6B8E23', hasChart: 'none', title: \"Tasa Subocupaci\u00f3n San Luis\", links: \"none\", hasFrame: true, source: \"Fuente: SSPM\" }) TSComponents.Card.render('card-en-row-3', { serieId: '46.2_ECTSTC_0_T_47', color: '#FFA500', hasChart: 'none', title: \"Tasa Subocupaci\u00f3n Corrientes\", links: \"none\", hasFrame: true, source: \"Fuente: SSPM\" }) TSComponents.Card.render('card-superior', { serieId: '105.1_I2L_2016_M_16', hasChart: 'none', color:'#5ED613', title: \"IPC Lechuga\", links: \"none\", hasFrame: true, source: \"Fuente: SSPM\" }) TSComponents.Card.render('card-inferior', { serieId: '105.1_I2BAT_2016_M_15', hasChart: 'none', color:'#969009', title: \"IPC Batata\", links: \"none\", hasFrame: true, source: \"Fuente: SSPM\" }) }","title":"C\u00f3digo:"}]} \ No newline at end of file +{"config":{"lang":["en"],"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"applications/","text":"","title":"Applications"},{"location":"docs/","text":"Explorador de Series de Tiempo \ud83d\udd17 El Explorador de Series de Tiempo es una familia de componentes front-end para desarrollar experiencias web a partir de los datos de la API de Series de Tiempo de la Rep\u00fablica Argentina , donde los organismos de la Administraci\u00f3n P\u00fablica Nacional publican indicadores en formatos abiertos. Si quer\u00e9s integrar un explorador completo en tu sitio web (como el de Datos Argentina ) le\u00e9 la referencia de TSExplorer . Si quer\u00e9s agregar gr\u00e1ficos en tu sitio web le\u00e9 la referencia de TSComponents . Versiones de browsers \ud83d\udd17 El Explorador de Series de Tiempo fue desarrolado utilizando versiones recientes de Firefox y Chrome (57+ y 60+), y soporta Internet Explorer desde la versi\u00f3n 11 en adelante. Si sos usuario de la API de Series de Tiempo y quer\u00e9s estar al tanto de los cambios y novedades, inscribite en la base de contactos de Datos Argentina y eleg\u00ed sobre qu\u00e9 temas quer\u00e9s que te escribamos. \u00bfTen\u00e9s algo que contarnos? Nos encantar\u00eda que nos cuentes por Twitter o por mail qu\u00e9 mejor\u00f3 usar la API en tu trabajo y qu\u00e9 le falta para mejorar a\u00fan m\u00e1s.","title":"Inicio"},{"location":"docs/#explorador-de-series-de-tiempo","text":"El Explorador de Series de Tiempo es una familia de componentes front-end para desarrollar experiencias web a partir de los datos de la API de Series de Tiempo de la Rep\u00fablica Argentina , donde los organismos de la Administraci\u00f3n P\u00fablica Nacional publican indicadores en formatos abiertos. Si quer\u00e9s integrar un explorador completo en tu sitio web (como el de Datos Argentina ) le\u00e9 la referencia de TSExplorer . Si quer\u00e9s agregar gr\u00e1ficos en tu sitio web le\u00e9 la referencia de TSComponents .","title":"Explorador de Series de Tiempo"},{"location":"docs/#versiones-de-browsers","text":"El Explorador de Series de Tiempo fue desarrolado utilizando versiones recientes de Firefox y Chrome (57+ y 60+), y soporta Internet Explorer desde la versi\u00f3n 11 en adelante. Si sos usuario de la API de Series de Tiempo y quer\u00e9s estar al tanto de los cambios y novedades, inscribite en la base de contactos de Datos Argentina y eleg\u00ed sobre qu\u00e9 temas quer\u00e9s que te escribamos. \u00bfTen\u00e9s algo que contarnos? Nos encantar\u00eda que nos cuentes por Twitter o por mail qu\u00e9 mejor\u00f3 usar la API en tu trabajo y qu\u00e9 le falta para mejorar a\u00fan m\u00e1s.","title":"Versiones de browsers"},{"location":"terms/","text":"","title":"Terms"},{"location":"developers/deploy/","text":"Documentaci\u00f3n de deploy \ud83d\udd17 Tenemos 2 formas de deploy: Generaci\u00f3n de github pages y generaci\u00f3n de release para subir al CDN . Github pages \ud83d\udd17 El deploy se puede realizar de dos maneras. Ambas son iguales npm run build-docs make build Y finalmente subir todo al branch default: - git add . - git commit -m \"Deploy a github pages\" - git push Release para CDN \ud83d\udd17 Crear un branch desde la versi\u00f3n que queremos salir: - git checkout -b Generar los archivos para distribuir. Tenemos dos maneras, ambas son iguales: - npm run release - make release Agregar los archivos: - git add dist (basta con agregar s\u00f3lo la carpeta a distribuir) - git commit -m \"Actualizo carpeta dist\" - git push origin Crear un tag: - git tag - git push --tags Con el nombre del tag ya podemos acceder a los archivos que necesitemos: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@nombreDelTag/dist/js/main.js Actualizar series-tiempo-ar-explorer-demo para usar la versi\u00f3n deseada (en el ejemplo la versi\u00f3n es test_0.4 pero podemos usar cualquiera ya sea para el archivo css o para el js): - Modificar el index.html del directorio root del proyecto demo para cambiar la versi\u00f3n usada de JS y de CSS: - CSS: cambiar la l\u00ednea: ` < link rel = \"stylesheet\" href = \"https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@test_0.4/dist/css/main.css\" type = \"text/css\" > ` . JS: cambiar la l\u00ednea: Las modificaciones de dichas l\u00edneas s\u00f3lo deber\u00edan ser para cambiar la versi\u00f3n, la ruta no deber\u00eda cambiar a menos que se busque usar un archivo distinto.","title":"Despliegue"},{"location":"developers/deploy/#documentacion-de-deploy","text":"Tenemos 2 formas de deploy: Generaci\u00f3n de github pages y generaci\u00f3n de release para subir al CDN .","title":"Documentaci\u00f3n de deploy"},{"location":"developers/deploy/#github-pages","text":"El deploy se puede realizar de dos maneras. Ambas son iguales npm run build-docs make build Y finalmente subir todo al branch default: - git add . - git commit -m \"Deploy a github pages\" - git push","title":"Github pages"},{"location":"developers/deploy/#release-para-cdn","text":"Crear un branch desde la versi\u00f3n que queremos salir: - git checkout -b Generar los archivos para distribuir. Tenemos dos maneras, ambas son iguales: - npm run release - make release Agregar los archivos: - git add dist (basta con agregar s\u00f3lo la carpeta a distribuir) - git commit -m \"Actualizo carpeta dist\" - git push origin Crear un tag: - git tag - git push --tags Con el nombre del tag ya podemos acceder a los archivos que necesitemos: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@nombreDelTag/dist/js/main.js Actualizar series-tiempo-ar-explorer-demo para usar la versi\u00f3n deseada (en el ejemplo la versi\u00f3n es test_0.4 pero podemos usar cualquiera ya sea para el archivo css o para el js): - Modificar el index.html del directorio root del proyecto demo para cambiar la versi\u00f3n usada de JS y de CSS: - CSS: cambiar la l\u00ednea: ` < link rel = \"stylesheet\" href = \"https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@test_0.4/dist/css/main.css\" type = \"text/css\" > ` . JS: cambiar la l\u00ednea: Las modificaciones de dichas l\u00edneas s\u00f3lo deber\u00edan ser para cambiar la versi\u00f3n, la ruta no deber\u00eda cambiar a menos que se busque usar un archivo distinto.","title":"Release para CDN"},{"location":"developers/install/","text":"Setup \ud83d\udd17 Requerimientos \ud83d\udd17 Este proyecto requiere Node v8.9.4 o superior (npm v6.0.0). Puede ser instalado con nvm Instalar node y npm. nvm install 8.9.4 O v\u00eda package manager: curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - sudo apt-get install -y nodejs Desarrollo \ud83d\udd17 Instalar hooks git hooks install Instalar dependencias: npm install Iniciar web server make watch para levantar el servidor en localhost:3000 Desarrollo de componentes exportables \ud83d\udd17 Se puede iniciar un servidor web para servir un dashboard que utiliza los componentes exportables usando make components-watch Para mas info: react documentation Problemas comunes \ud83d\udd17 npm start : Error al iniciar el server. Soluci\u00f3n: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p Para correr los tests de un archivo en particular: npm test -- -- why the \"--\" magick incantation Debugging en VS code \ud83d\udd17 Usar esta launch configuration { \"name\": \"Debug Jest Tests\", \"type\": \"node\", \"request\": \"launch\", \"runtimeArgs\": [\"--inspect-brk\", \" ${ workspaceRoot } /scripts/test.js\", \"--runInBand\", \"--env=jsdom\"], \"port\": 9229, \"console\": \"integratedTerminal\", \"internalConsoleOptions\": \"neverOpen\" }","title":"Instalaci\u00f3n"},{"location":"developers/install/#setup","text":"","title":"Setup"},{"location":"developers/install/#requerimientos","text":"Este proyecto requiere Node v8.9.4 o superior (npm v6.0.0). Puede ser instalado con nvm Instalar node y npm. nvm install 8.9.4 O v\u00eda package manager: curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - sudo apt-get install -y nodejs","title":"Requerimientos"},{"location":"developers/install/#desarrollo","text":"Instalar hooks git hooks install Instalar dependencias: npm install Iniciar web server make watch para levantar el servidor en localhost:3000","title":"Desarrollo"},{"location":"developers/install/#desarrollo-de-componentes-exportables","text":"Se puede iniciar un servidor web para servir un dashboard que utiliza los componentes exportables usando make components-watch Para mas info: react documentation","title":"Desarrollo de componentes exportables"},{"location":"developers/install/#problemas-comunes","text":"npm start : Error al iniciar el server. Soluci\u00f3n: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p Para correr los tests de un archivo en particular: npm test -- -- why the \"--\" magick incantation","title":"Problemas comunes"},{"location":"developers/install/#debugging-en-vs-code","text":"Usar esta launch configuration { \"name\": \"Debug Jest Tests\", \"type\": \"node\", \"request\": \"launch\", \"runtimeArgs\": [\"--inspect-brk\", \" ${ workspaceRoot } /scripts/test.js\", \"--runInBand\", \"--env=jsdom\"], \"port\": 9229, \"console\": \"integratedTerminal\", \"internalConsoleOptions\": \"neverOpen\" }","title":"Debugging en VS code"},{"location":"reference/ts-components/","text":"TSComponents \ud83d\udd17 Versi\u00f3n : 2.7.0 El objeto TSComponents contiene distintos componentes exportables que se pueden utilizar dentro de una experiencia web. Est\u00e1 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.7.0/dist/js/components.js Componentes \ud83d\udd17 graphic : gr\u00e1fico de l\u00edneas, barras o \u00e1rea usado en el explorador de series de tiempo con todas sus funcionalidades. card : tarjeta con informaci\u00f3n de la serie y un gr\u00e1fico inclu\u00eddo con sus datos. \u00bfC\u00f3mo los uso? \ud83d\udd17 Todos los componentes se usan de la misma manera. Importar librer\u00eda JS: < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/js/components.js' > Importar hoja de estilos CSS: < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/css/components.css' /> Definir d\u00f3nde se va a dibujar: < div id = \"graphic_01\" > < div id = \"card_01\" > Instanciar el componente que buscamos: TSComponents . Graphic . render ( 'graphic_01' , { ... }) TSComponents . Card . render ( 'card_01' , { ... })","title":"TSComponents"},{"location":"reference/ts-components/#tscomponents","text":"Versi\u00f3n : 2.7.0 El objeto TSComponents contiene distintos componentes exportables que se pueden utilizar dentro de una experiencia web. Est\u00e1 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.7.0/dist/js/components.js","title":"TSComponents"},{"location":"reference/ts-components/#componentes","text":"graphic : gr\u00e1fico de l\u00edneas, barras o \u00e1rea usado en el explorador de series de tiempo con todas sus funcionalidades. card : tarjeta con informaci\u00f3n de la serie y un gr\u00e1fico inclu\u00eddo con sus datos.","title":"Componentes"},{"location":"reference/ts-components/#como-los-uso","text":"Todos los componentes se usan de la misma manera. Importar librer\u00eda JS: < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/js/components.js' > Importar hoja de estilos CSS: < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/css/components.css' /> Definir d\u00f3nde se va a dibujar: < div id = \"graphic_01\" > < div id = \"card_01\" > Instanciar el componente que buscamos: TSComponents . Graphic . render ( 'graphic_01' , { ... }) TSComponents . Card . render ( 'card_01' , { ... })","title":"\u00bfC\u00f3mo los uso?"},{"location":"reference/ts-explorer/","text":"TSExplorer \ud83d\udd17 Versi\u00f3n : 2.8.1 El objeto TSExplorer contiene una one page application con un explorador de series de tiempo, que permite buscar y visualizar series de un cat\u00e1logo de datos abiertos. Est\u00e1 en el archivo llamado main.js y se aloja versionado en el CDN: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.8.1/dist/js/main.js \u00bfC\u00f3mo lo uso? \ud83d\udd17 Importar librer\u00eda JS: < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.8.1/dist/js/main.js' > Definir d\u00f3nde se va a dibujar: < div id = \"explorer-container\" > Instanciar el explorador: TSExplorer . render ( 'explorer-container' , { ... }) Ejemplo de uso \ud83d\udd17 < html > < body > < script type = \"text/javascript\" src = \"https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.8.1/dist/js/main.js\" > < div id = \"explorer-container\" > < script > window . onload = function () { TSExplorer . render ( 'explorer-container' , { featured : [ \"103.1_I2N_2016_M_15\" , \"168.1_T_CAMBIOR_D_0_0_26\" , ], seriesApiUri : \"https://apis.datos.gob.ar/series/api\" , catalogId : 'datosgobar' , formatChartUnits : true , laps : { Diaria : 90 , Mensual : 24 , Trimestral : 20 , Semestral : 10 , Anual : 10 , }, locale : 'AR' }) } Tabla de par\u00e1metros \ud83d\udd17 Nombre Requerido Descripci\u00f3n Tipo Default Ejemplos seriesApiUri Si URI a la API donde buscamos los datos. string Ninguno https://apis.datos.gob.ar/series/api featured No Indica los IDs de las series destacadas string[] [] [\"103.1_I2N_2016_M_15\", \"168.1_T_CAMBIOR_D_0_0_26\"] catalogId No Representa el id del cat\u00e1logo de donde busca las series string Ninguno datosgobar formatChartUnits No Indica si debe formatear a porcentaje los valores entre -1 y 1. boolean true true / false laps No Informaci\u00f3n para traer los \u00faltimos _n_ valores de la serie, con _n_ igual al valor por frecuencia. {Diaria: number, Mensual: number, Trimestral: number, Semestral: number, Anual: number} object true true / false locale No Valores posibles: `\"AR\"` o `\"US\"` (pendientes nuevos valores). Representan qu\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string \"AR\" \"AR\" / \"US\" maxDecimals No Cantidad m\u00e1xima de cifras decimales a mostrar para los valores de las series, tanto en sus tarjetas destacadas, como resultados de b\u00fasqueda y notas (tooltips) de los gr\u00e1ficos. int 2 0/4/1 heroImageUrl No URL de la imagen a mostrar de fondo en el banner del encabezado. string https://datos.gob.ar/images/hero_bg.svg https://upload.wikimedia.org/wikipedia/commons/1/1a/Flag_of_Argentina.svg numbersAbbreviate No Flag que indica si se deben abreviar los n\u00fameros grandes y formatearlos con el sufijo pertinente; si est\u00e1 apagado, no se realizar\u00e1 abreviatura alguna. Ver la secci\u00f3n de \"Abreviatura\" para m\u00e1s detalle. boolean true false decimalsBillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un bill\u00f3n. Puede ser mayor al par\u00e1metro maxDecimals. int 2 4 decimalsMillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un mill\u00f3n. Puede ser mayor al par\u00e1metro maxDecimals. boolean 2 0 Abreviatura \ud83d\udd17 Si se habilita la abreviatura y formateo de n\u00fameros grandes, encendiendo el flag numbersAbbreviate (la \u00fanica manera de apagarlo es sete\u00e1ndole expl\u00edcitamente un valor false por medio del par\u00e1metro del componente), se proceder\u00e1 a formatearlos de la siguiente manera: Los valores porcentuales (distinguidos as\u00ed por los metadatos de la serie que representan) no son abreviados. Todo n\u00famero mayor o igual a un bill\u00f3n ( 1.000.000.000.000 ) o menor a un bill\u00f3n negativo ( -1.000.000.000.000 ) ser\u00e1 dividido por un bill\u00f3n, y se le agregar\u00e1 como sufijo la letra B . Todo n\u00famero mayor o igual a diez millones ( 10.000.000 ) y menor a un bill\u00f3n, o bien menor o igual a diez millones negativos ( -10.000.000 ) y mayor a un bill\u00f3n negativo ( -1.000.000.000.000 ), ser\u00e1 dividido por un mill\u00f3n ( 1.000.000 ), y se le agregar\u00e1 como sufijo la letra M . Todo n\u00famero mayor a un diez millones negativos y menor a diez millones ser\u00e1 conservado como tal, sin aplic\u00e1rsele sufijo alguno. En caso de abreviar, la cantidad de decimales que son tenidos en cuenta del cociente obtenido al dividir el valor original de la serie por el divisor apropiado depende de los valores (por defecto o especificados) de las cantidades de los par\u00e1metros decimalsBillion y decimalsMillion (seg\u00fan corresponda). Demo online \ud83d\udd17 https://jsfiddle.net/u7y3q9e2/","title":"TSExplorer"},{"location":"reference/ts-explorer/#tsexplorer","text":"Versi\u00f3n : 2.8.1 El objeto TSExplorer contiene una one page application con un explorador de series de tiempo, que permite buscar y visualizar series de un cat\u00e1logo de datos abiertos. Est\u00e1 en el archivo llamado main.js y se aloja versionado en el CDN: https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.8.1/dist/js/main.js","title":"TSExplorer"},{"location":"reference/ts-explorer/#como-lo-uso","text":"Importar librer\u00eda JS: < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.8.1/dist/js/main.js' > Definir d\u00f3nde se va a dibujar: < div id = \"explorer-container\" > Instanciar el explorador: TSExplorer . render ( 'explorer-container' , { ... })","title":"\u00bfC\u00f3mo lo uso?"},{"location":"reference/ts-explorer/#ejemplo-de-uso","text":"< html > < body > < script type = \"text/javascript\" src = \"https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@2.8.1/dist/js/main.js\" > < div id = \"explorer-container\" > < script > window . onload = function () { TSExplorer . render ( 'explorer-container' , { featured : [ \"103.1_I2N_2016_M_15\" , \"168.1_T_CAMBIOR_D_0_0_26\" , ], seriesApiUri : \"https://apis.datos.gob.ar/series/api\" , catalogId : 'datosgobar' , formatChartUnits : true , laps : { Diaria : 90 , Mensual : 24 , Trimestral : 20 , Semestral : 10 , Anual : 10 , }, locale : 'AR' }) } ","title":"Ejemplo de uso"},{"location":"reference/ts-explorer/#tabla-de-parametros","text":"Nombre Requerido Descripci\u00f3n Tipo Default Ejemplos seriesApiUri Si URI a la API donde buscamos los datos. string Ninguno https://apis.datos.gob.ar/series/api featured No Indica los IDs de las series destacadas string[] [] [\"103.1_I2N_2016_M_15\", \"168.1_T_CAMBIOR_D_0_0_26\"] catalogId No Representa el id del cat\u00e1logo de donde busca las series string Ninguno datosgobar formatChartUnits No Indica si debe formatear a porcentaje los valores entre -1 y 1. boolean true true / false laps No Informaci\u00f3n para traer los \u00faltimos _n_ valores de la serie, con _n_ igual al valor por frecuencia. {Diaria: number, Mensual: number, Trimestral: number, Semestral: number, Anual: number} object true true / false locale No Valores posibles: `\"AR\"` o `\"US\"` (pendientes nuevos valores). Representan qu\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string \"AR\" \"AR\" / \"US\" maxDecimals No Cantidad m\u00e1xima de cifras decimales a mostrar para los valores de las series, tanto en sus tarjetas destacadas, como resultados de b\u00fasqueda y notas (tooltips) de los gr\u00e1ficos. int 2 0/4/1 heroImageUrl No URL de la imagen a mostrar de fondo en el banner del encabezado. string https://datos.gob.ar/images/hero_bg.svg https://upload.wikimedia.org/wikipedia/commons/1/1a/Flag_of_Argentina.svg numbersAbbreviate No Flag que indica si se deben abreviar los n\u00fameros grandes y formatearlos con el sufijo pertinente; si est\u00e1 apagado, no se realizar\u00e1 abreviatura alguna. Ver la secci\u00f3n de \"Abreviatura\" para m\u00e1s detalle. boolean true false decimalsBillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un bill\u00f3n. Puede ser mayor al par\u00e1metro maxDecimals. int 2 4 decimalsMillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un mill\u00f3n. Puede ser mayor al par\u00e1metro maxDecimals. boolean 2 0","title":"Tabla de par\u00e1metros"},{"location":"reference/ts-explorer/#abreviatura","text":"Si se habilita la abreviatura y formateo de n\u00fameros grandes, encendiendo el flag numbersAbbreviate (la \u00fanica manera de apagarlo es sete\u00e1ndole expl\u00edcitamente un valor false por medio del par\u00e1metro del componente), se proceder\u00e1 a formatearlos de la siguiente manera: Los valores porcentuales (distinguidos as\u00ed por los metadatos de la serie que representan) no son abreviados. Todo n\u00famero mayor o igual a un bill\u00f3n ( 1.000.000.000.000 ) o menor a un bill\u00f3n negativo ( -1.000.000.000.000 ) ser\u00e1 dividido por un bill\u00f3n, y se le agregar\u00e1 como sufijo la letra B . Todo n\u00famero mayor o igual a diez millones ( 10.000.000 ) y menor a un bill\u00f3n, o bien menor o igual a diez millones negativos ( -10.000.000 ) y mayor a un bill\u00f3n negativo ( -1.000.000.000.000 ), ser\u00e1 dividido por un mill\u00f3n ( 1.000.000 ), y se le agregar\u00e1 como sufijo la letra M . Todo n\u00famero mayor a un diez millones negativos y menor a diez millones ser\u00e1 conservado como tal, sin aplic\u00e1rsele sufijo alguno. En caso de abreviar, la cantidad de decimales que son tenidos en cuenta del cociente obtenido al dividir el valor original de la serie por el divisor apropiado depende de los valores (por defecto o especificados) de las cantidades de los par\u00e1metros decimalsBillion y decimalsMillion (seg\u00fan corresponda).","title":"Abreviatura"},{"location":"reference/ts-explorer/#demo-online","text":"https://jsfiddle.net/u7y3q9e2/","title":"Demo online"},{"location":"reference/ts-components/card/","text":"Componente: card \ud83d\udd17 El componente card permite embeber tarjetas con informaci\u00f3n de la serie, y un gr\u00e1fico inclu\u00eddo dentro de la misma, en sitios web. .row { width: 90%; margin: auto; display: flex; justify-content: space-around; } Ejemplo base \ud83d\udd17 Ver online: https://jsfiddle.net/e7kad2j1 < link type = \"text/css\" rel = \"stylesheet\" href = \"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css\" media = \"all\" /> < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/js/components.js' > < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/css/components.css' /> < div id = \"tmi\" > < script > window . onload = function () { TSComponents . Card . render ( 'tmi' , { // ID de la serie solicitada serieId : '143.3_NO_PR_2004_A_21' }) } Tabla de par\u00e1metros \ud83d\udd17 Nombre Requerido Descripci\u00f3n Tipo Default Ejemplos serieId Si ID de la serie a buscar. string Ninguno 143.3_NO_PR_2004_A_21 locale No Valores posibles: \"AR\" o \"US\" (pendientes nuevos valores). Representan qu\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string AR AR o US links No Indica qu\u00e9 enlaces a mostrar bajo la tarjeta para descargar o compartir la misma. string full small color No Indica el color a usar para el n\u00famero y el borde de la tarjeta. Los c\u00f3digos de colores pueden ser tanto hexadecimales (ej. \"#00CC44\") como numeros que son mapeados a la paleta por defecto (del 0 al 8) Ver paleta por defecto m\u00e1s abajo. string #0072BB red hasChart No Indica el tipo de gr\u00e1fico a usar dentro de la tarjeta. string small full explicitSign No Permite forzar la presencia de un signo antepuesto al valor mostrado; es decir, si dicho valor resultara positivo, ser\u00e1 precedido por un signo de adici\u00f3n ('+'). Por defecto, se encuentra desactivado. booleano false true title No Especifica el t\u00edtulo de la tarjeta. De no definirse, se considera el t\u00edtulo por defecto de la serie; de definirse como '', se lo omite. string Ninguno Un t\u00edtulo personalizado source No Especifica el texto al pie de la tarjeta, que refiere a la fuente de la informaci\u00f3n. De no definirse, se considera la fuente por defecto de la serie; de definirse como '', se la omite. string Ninguno Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud units No Especifica el texto al pie de la tarjeta, que refiere a las unidades en que se mide el valor mostrado. De no definirse, se consideran las unidades por defecto de la serie; de definirse como '', se las omite. string Ninguno Millones de pesos hasFrame No Permite forzar la presencia de un marco alrededor de la tarjeta y un fondo blanco para la misma. De no estar definido, la tarjeta tendr\u00e1 marco si tiene al menos gr\u00e1fico o enlaces. booleano Ninguno true hasColorBar No Permite forzar la presencia de la barra de color (el mismo que posee el n\u00famero) en el borde superior de la tarjeta. De no estar definido, la barr\u00e1 estar\u00e1 presente s\u00f3lo si la tarjeta posee marco. booleano Ninguno false collapse No Permite cambiar la frecuencia en la que se muestra la serie. Mediante este par\u00e1metro se puede hacer, por ejemplo, un agregado anual para una serie que tiene una frecuencia diaria. Las limitaciones del campo son que la frecuencia elegida tiene que ser menor o igual a la frecuencia por defecto de la serie, si no lo es entonces el gr\u00e1fico no se mostrar\u00e1 (Ej: si la serie tiene frecuencia semestral, 'collapse' puede ser solo o 'semester' o 'year'). string Ninguno 'day', 'month', 'quarter', 'semester', 'year' apiBaseUrl No Permite cambiar la URL de la API a la cual se le pedir\u00e1 la serie representada en la tarjeta. A dicha url se le adjuntar\u00e1 el texto '/series/?ids=serieId' al final. string 'http://apis.datos.gob.ar/series/api' 'http://miurl.apis.com/datos' decimals No Permite elegir cu\u00e1ntos d\u00edgitos decimales mostrar en el valor de la tarjeta. Debe ser mayor o igual a 0. Redondea los valores en caso de ser menor a la cantidad de d\u00edgitos original del valor; completa con 0s en caso contrario. int 2 5 numbersAbbreviate No Flag que indica si se deben abreviar los n\u00fameros grandes y formatearlos con el sufijo pertinente; si est\u00e1 apagado, no se realizar\u00e1 abreviatura alguna. Ver la secci\u00f3n de \"Abreviatura\" para m\u00e1s detalle. boolean true false decimalsBillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un bill\u00f3n. Supeditar\u00e1 al valor del par\u00e1metro decimals. int 2 4 decimalsMillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un mill\u00f3n. Supeditar\u00e1 al valor del par\u00e1metro decimals. boolean 2 0 Paleta de colores por defecto \ud83d\udd17 Por defecto, la paleta de colores en los que se grafican las series del componente. Cada uno puede ser identificado con un hexadecimal o un entero decimal: #0072BB o 0 , para azul #2E7D33 o 1 , para verde oscuro #C62828 o 2 , para rojo #F9A822 o 3 , para naranja #6A1B99 o 4 , para violeta #EC407A o 5 , para rosa #C2185B o 6 , para fucsia #039BE5 o 7 , para celeste #6EA100 o 8 , para verde claro Abreviatura \ud83d\udd17 Si se habilita la abreviatura y formateo de n\u00fameros grandes, encendiendo el flag numbersAbbreviate (la \u00fanica manera de apagarlo es sete\u00e1ndole expl\u00edcitamente un valor false por medio del par\u00e1metro del componente), se proceder\u00e1 a formatearlos de la siguiente manera: Los valores porcentuales (distinguidos as\u00ed por los metadatos de la serie que representan) no son abreviados. Todo n\u00famero mayor o igual a un bill\u00f3n ( 1.000.000.000.000 ) o menor a un bill\u00f3n negativo ( -1.000.000.000.000 ) ser\u00e1 dividido por un bill\u00f3n, y se le agregar\u00e1 como sufijo la letra B . Todo n\u00famero mayor o igual a diez millones ( 10.000.000 ) y menor a un bill\u00f3n, o bien menor o igual a diez millones negativos ( -10.000.000 ) y mayor a un bill\u00f3n negativo ( -1.000.000.000.000 ), ser\u00e1 dividido por un mill\u00f3n ( 1.000.000 ), y se le agregar\u00e1 como sufijo la letra M . Todo n\u00famero mayor a un diez millones negativos y menor a diez millones ser\u00e1 conservado como tal, sin aplic\u00e1rsele sufijo alguno. En caso de abreviar, la cantidad de decimales que son tenidos en cuenta del cociente obtenido al dividir el valor original de la serie por el divisor apropiado depende de los valores (por defecto o especificados) de las cantidades de los par\u00e1metros decimalsBillion y decimalsMillion (seg\u00fan corresponda). Ejemplo completo \ud83d\udd17 < html > < body > < script type = 'text/javascript' src = 'components.js' > < div id = \"card1\" > < script > window . onload = function () { TSComponents . Card . render ( 'card1' , { serieId : '143.3_NO_PR_2004_A_21' , hasChart : 'small' , links : 'full' , locale : 'AR' , color : '#F9A822' , explicitSign : true , title : 'Titulo personalizado' , source : 'Fuente primaria: Mi Fuente' , units : '' , hasFrame : false , hasColorBar : true , collapse : 'year' , apiBaseUrl : 'http://apis.datos.gob.ar/series/api' }) } Demo online \ud83d\udd17 https://jsfiddle.net/hfbjq791/ Variantes de tarjetas \ud83d\udd17 Card: default \ud83d\udd17 Card: menos links \ud83d\udd17 Card: sin links \ud83d\udd17 Card: m\u00ednima \ud83d\udd17 Card: m\u00ednima (eliminando elementos) \ud83d\udd17 window.onload = function() { TSComponents.Card.render('ipc', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', title: \"Indice de Precios al Consumidor Nacional\", links: \"none\" }) TSComponents.Card.render('exportaciones', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', title: \"Exportaciones\", links: \"none\" }) TSComponents.Card.render('ipc-card', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', title: \"Exportaciones\" }) TSComponents.Card.render('ipc-card-links2', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', links: \"small\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-links2', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', links: \"small\", title: \"Exportaciones\" }) TSComponents.Card.render('ipc-card-med', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', links: \"none\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-med', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', links: \"none\", title: \"Exportaciones\", hasFrame: false }) TSComponents.Card.render('ipc-card-min', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', links: 'none', hasChart: \"none\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-min', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, links: 'none', hasChart: \"none\", title: \"Exportaciones\", hasColorBar: true }) TSComponents.Card.render('ipc-card-min-xtreme', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', links: 'none', hasChart: \"none\", title: \"\", units: \"\", source: \"\" }) TSComponents.Card.render('exportaciones-card-min-xtreme', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, links: 'none', hasChart: \"none\", title: \"\", units: \"\", source: \"\" }) }","title":"TSComponents: Card"},{"location":"reference/ts-components/card/#componente-card","text":"El componente card permite embeber tarjetas con informaci\u00f3n de la serie, y un gr\u00e1fico inclu\u00eddo dentro de la misma, en sitios web. .row { width: 90%; margin: auto; display: flex; justify-content: space-around; }","title":"Componente: card"},{"location":"reference/ts-components/card/#ejemplo-base","text":"Ver online: https://jsfiddle.net/e7kad2j1 < link type = \"text/css\" rel = \"stylesheet\" href = \"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css\" media = \"all\" /> < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/js/components.js' > < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/css/components.css' /> < div id = \"tmi\" > < script > window . onload = function () { TSComponents . Card . render ( 'tmi' , { // ID de la serie solicitada serieId : '143.3_NO_PR_2004_A_21' }) } ","title":"Ejemplo base"},{"location":"reference/ts-components/card/#tabla-de-parametros","text":"Nombre Requerido Descripci\u00f3n Tipo Default Ejemplos serieId Si ID de la serie a buscar. string Ninguno 143.3_NO_PR_2004_A_21 locale No Valores posibles: \"AR\" o \"US\" (pendientes nuevos valores). Representan qu\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string AR AR o US links No Indica qu\u00e9 enlaces a mostrar bajo la tarjeta para descargar o compartir la misma. string full small color No Indica el color a usar para el n\u00famero y el borde de la tarjeta. Los c\u00f3digos de colores pueden ser tanto hexadecimales (ej. \"#00CC44\") como numeros que son mapeados a la paleta por defecto (del 0 al 8) Ver paleta por defecto m\u00e1s abajo. string #0072BB red hasChart No Indica el tipo de gr\u00e1fico a usar dentro de la tarjeta. string small full explicitSign No Permite forzar la presencia de un signo antepuesto al valor mostrado; es decir, si dicho valor resultara positivo, ser\u00e1 precedido por un signo de adici\u00f3n ('+'). Por defecto, se encuentra desactivado. booleano false true title No Especifica el t\u00edtulo de la tarjeta. De no definirse, se considera el t\u00edtulo por defecto de la serie; de definirse como '', se lo omite. string Ninguno Un t\u00edtulo personalizado source No Especifica el texto al pie de la tarjeta, que refiere a la fuente de la informaci\u00f3n. De no definirse, se considera la fuente por defecto de la serie; de definirse como '', se la omite. string Ninguno Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud units No Especifica el texto al pie de la tarjeta, que refiere a las unidades en que se mide el valor mostrado. De no definirse, se consideran las unidades por defecto de la serie; de definirse como '', se las omite. string Ninguno Millones de pesos hasFrame No Permite forzar la presencia de un marco alrededor de la tarjeta y un fondo blanco para la misma. De no estar definido, la tarjeta tendr\u00e1 marco si tiene al menos gr\u00e1fico o enlaces. booleano Ninguno true hasColorBar No Permite forzar la presencia de la barra de color (el mismo que posee el n\u00famero) en el borde superior de la tarjeta. De no estar definido, la barr\u00e1 estar\u00e1 presente s\u00f3lo si la tarjeta posee marco. booleano Ninguno false collapse No Permite cambiar la frecuencia en la que se muestra la serie. Mediante este par\u00e1metro se puede hacer, por ejemplo, un agregado anual para una serie que tiene una frecuencia diaria. Las limitaciones del campo son que la frecuencia elegida tiene que ser menor o igual a la frecuencia por defecto de la serie, si no lo es entonces el gr\u00e1fico no se mostrar\u00e1 (Ej: si la serie tiene frecuencia semestral, 'collapse' puede ser solo o 'semester' o 'year'). string Ninguno 'day', 'month', 'quarter', 'semester', 'year' apiBaseUrl No Permite cambiar la URL de la API a la cual se le pedir\u00e1 la serie representada en la tarjeta. A dicha url se le adjuntar\u00e1 el texto '/series/?ids=serieId' al final. string 'http://apis.datos.gob.ar/series/api' 'http://miurl.apis.com/datos' decimals No Permite elegir cu\u00e1ntos d\u00edgitos decimales mostrar en el valor de la tarjeta. Debe ser mayor o igual a 0. Redondea los valores en caso de ser menor a la cantidad de d\u00edgitos original del valor; completa con 0s en caso contrario. int 2 5 numbersAbbreviate No Flag que indica si se deben abreviar los n\u00fameros grandes y formatearlos con el sufijo pertinente; si est\u00e1 apagado, no se realizar\u00e1 abreviatura alguna. Ver la secci\u00f3n de \"Abreviatura\" para m\u00e1s detalle. boolean true false decimalsBillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un bill\u00f3n. Supeditar\u00e1 al valor del par\u00e1metro decimals. int 2 4 decimalsMillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un mill\u00f3n. Supeditar\u00e1 al valor del par\u00e1metro decimals. boolean 2 0","title":"Tabla de par\u00e1metros"},{"location":"reference/ts-components/card/#paleta-de-colores-por-defecto","text":"Por defecto, la paleta de colores en los que se grafican las series del componente. Cada uno puede ser identificado con un hexadecimal o un entero decimal: #0072BB o 0 , para azul #2E7D33 o 1 , para verde oscuro #C62828 o 2 , para rojo #F9A822 o 3 , para naranja #6A1B99 o 4 , para violeta #EC407A o 5 , para rosa #C2185B o 6 , para fucsia #039BE5 o 7 , para celeste #6EA100 o 8 , para verde claro","title":"Paleta de colores por defecto"},{"location":"reference/ts-components/card/#abreviatura","text":"Si se habilita la abreviatura y formateo de n\u00fameros grandes, encendiendo el flag numbersAbbreviate (la \u00fanica manera de apagarlo es sete\u00e1ndole expl\u00edcitamente un valor false por medio del par\u00e1metro del componente), se proceder\u00e1 a formatearlos de la siguiente manera: Los valores porcentuales (distinguidos as\u00ed por los metadatos de la serie que representan) no son abreviados. Todo n\u00famero mayor o igual a un bill\u00f3n ( 1.000.000.000.000 ) o menor a un bill\u00f3n negativo ( -1.000.000.000.000 ) ser\u00e1 dividido por un bill\u00f3n, y se le agregar\u00e1 como sufijo la letra B . Todo n\u00famero mayor o igual a diez millones ( 10.000.000 ) y menor a un bill\u00f3n, o bien menor o igual a diez millones negativos ( -10.000.000 ) y mayor a un bill\u00f3n negativo ( -1.000.000.000.000 ), ser\u00e1 dividido por un mill\u00f3n ( 1.000.000 ), y se le agregar\u00e1 como sufijo la letra M . Todo n\u00famero mayor a un diez millones negativos y menor a diez millones ser\u00e1 conservado como tal, sin aplic\u00e1rsele sufijo alguno. En caso de abreviar, la cantidad de decimales que son tenidos en cuenta del cociente obtenido al dividir el valor original de la serie por el divisor apropiado depende de los valores (por defecto o especificados) de las cantidades de los par\u00e1metros decimalsBillion y decimalsMillion (seg\u00fan corresponda).","title":"Abreviatura"},{"location":"reference/ts-components/card/#ejemplo-completo","text":"< html > < body > < script type = 'text/javascript' src = 'components.js' > < div id = \"card1\" > < script > window . onload = function () { TSComponents . Card . render ( 'card1' , { serieId : '143.3_NO_PR_2004_A_21' , hasChart : 'small' , links : 'full' , locale : 'AR' , color : '#F9A822' , explicitSign : true , title : 'Titulo personalizado' , source : 'Fuente primaria: Mi Fuente' , units : '' , hasFrame : false , hasColorBar : true , collapse : 'year' , apiBaseUrl : 'http://apis.datos.gob.ar/series/api' }) } ","title":"Ejemplo completo"},{"location":"reference/ts-components/card/#demo-online","text":"https://jsfiddle.net/hfbjq791/","title":"Demo online"},{"location":"reference/ts-components/card/#variantes-de-tarjetas","text":"","title":"Variantes de tarjetas"},{"location":"reference/ts-components/card/#card-default","text":"","title":"Card: default"},{"location":"reference/ts-components/card/#card-menos-links","text":"","title":"Card: menos links"},{"location":"reference/ts-components/card/#card-sin-links","text":"","title":"Card: sin links"},{"location":"reference/ts-components/card/#card-minima","text":"","title":"Card: m\u00ednima"},{"location":"reference/ts-components/card/#card-minima-eliminando-elementos","text":"window.onload = function() { TSComponents.Card.render('ipc', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', title: \"Indice de Precios al Consumidor Nacional\", links: \"none\" }) TSComponents.Card.render('exportaciones', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', title: \"Exportaciones\", links: \"none\" }) TSComponents.Card.render('ipc-card', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', title: \"Exportaciones\" }) TSComponents.Card.render('ipc-card-links2', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', links: \"small\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-links2', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', links: \"small\", title: \"Exportaciones\" }) TSComponents.Card.render('ipc-card-med', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', hasChart: 'small', links: \"none\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-med', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, hasChart: 'small', links: \"none\", title: \"Exportaciones\", hasFrame: false }) TSComponents.Card.render('ipc-card-min', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', color: '#F9A822', links: 'none', hasChart: \"none\", title: \"Indice de Precios al Consumidor Nacional\" }) TSComponents.Card.render('exportaciones-card-min', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, links: 'none', hasChart: \"none\", title: \"Exportaciones\", hasColorBar: true }) TSComponents.Card.render('ipc-card-min-xtreme', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change', links: 'none', hasChart: \"none\", title: \"\", units: \"\", source: \"\" }) TSComponents.Card.render('exportaciones-card-min-xtreme', { serieId: '74.3_IET_0_M_16:percent_change_a_year_ago', explicitSign: true, links: 'none', hasChart: \"none\", title: \"\", units: \"\", source: \"\" }) }","title":"Card: m\u00ednima (eliminando elementos)"},{"location":"reference/ts-components/examples/","text":".row { width: 90%; margin: auto; display: flex; justify-content: space-around; } .btn-primary { color: #ffffff; background-color: #0072bb; } Ejemplos: \ud83d\udd17 El prop\u00f3sito de este documento es mostrar ejemplos recomendados de implementar los componentes exportables (Card, Graphic). Para conocer la forma de implementar correctamente cada componente, referirse a la documentaci\u00f3n propia del mismo. Ejemplos Card: \ud83d\udd17 Indicadores destacados (m\u00ednimo): \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-min\" > < script > window . onload = function () { TSComponents . Card . render ( 'indicador-min' , { serieId : 'tcrse_QpvjK1:percent_change_a_year_ago' , color : '#0072BB' , hasChart : 'none' , title : \"TCRSE. Otros Cultivos.\" , links : \"none\" , hasFrame : false , explicitSign : true , source : \"Fuente: Secretar\u00eda de la Transformaci\u00f3n Productiva\" }) } Indicadores destacados (con mini-gr\u00e1fico): \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-graph\" > < script > window . onload = function () { TSComponents . Card . render ( 'indicador-graph' , { serieId : 'tmi_arg' , color : '#2E7D33' , hasChart : 'small' , links : \"none\" , hasFrame : false }) } Indicadores destacados (con tarjeta clickeable): \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-click\" > < script > window . onload = function () { TSComponents . Card . render ( 'indicador-click' , { serieId : 'defensa_FAA_0006' , color : '#C62828' , hasChart : 'small' , title : \"Personal Femenino en la Fuerza A\u00e9rea\" , links : \"none\" , }) } Indicadores destacados (con enlaces de descarga): \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-link\" > < script > window . onload = function () { TSComponents . Card . render ( 'indicador-min' , { serieId : '77.3_IEB_0_A_24' , color : '#F9A822' , hasChart : 'small' , title : \"Exportaciones FOB a Brasil\" , units : \"Millones de USD\" , }) } Ejemplos Graph: \ud83d\udd17 Graph destacado simple: \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row\" > < div class = \"col-sm-12\" id = \"graph-simple\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-simple' , { \u2003\u2003\u2003\u2003 graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=143.3_NO_PR_2004_A_21:percent_change_a_year_ago,116.4_TCRZE_2015_D_36_4' , \u2003\u2003\u2003\u2003 zoom : false , \u2003\u2003\u2003\u2003 chartTypes : { '143.3_NO_PR_2004_A_21:percent_change_a_year_ago' : 'column' }, \u2003\u2003\u2003\u2003 title : 'Nivel de Actividad y Tipo de Cambio Real Multilateral' , \u2003\u2003\u2003\u2003 source : 'Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC), Banco Central de la Rep\u00fablica Argentina (BCRA)' , \u2003\u2003\u2003\u2003 navigator : false }) } Graph destacado con zoom: \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"graph-zoom\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-zoom' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=33.2_ISAC_SIN_EDAD_0_M_23_56:percent_change_a_year_ago&last=12' , title : 'Indicador sint\u00e9tico de la actividad de la construcci\u00f3n (ISAC)' , source : 'Var % interanual. Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC)' , chartTypes : { \"33.2_ISAC_SIN_EDAD_0_M_23_56\" : \"column\" }, zoom : false , navigator : true , }) } Graph destacado con navegador y zoom: \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"graph-nav-zoom\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-nav-zoom' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=151.1_TL_SIN_TAC_2012_M_15,151.1_TL_ESTADAD_2012_M_20&last=12' , title : 'Cantidad de trabajadores registrados' , source : 'Cantidades. Fuente: Ministerio de Trabajo, Empleo y Seguridad Social' , legendField : 'description' , zoom : true , navigator : true }) } Ejemplos Card + Graph: \ud83d\udd17 Indicador con Graph inferior asociado: \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container\" > < div class = \"row\" > < div class = \"text-center\" id = \"graph-indicador1\" > < div class = \"row\" > < div id = \"indicator-graph1\" > < script > window . onload = function () { TSComponents . Card . render ( 'graph-indicador1' , { serieId : 'defensa_FAA_0006' , color : '#C62828' , hasChart : 'none' , title : \"\" , links : \"none\" , hasFrame : false , source : \"\" }) TSComponents . Graphic . render ( 'indicator-graph1' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=defensa_FAA_0006' , title : \"Personal Femenino en la Fuerza A\u00e9rea\" , source : \"Fuente: Ministerio de Defensa\" , colors : [ '#C62828' ] }) } Indicador con Graph lateral asociado: \ud83d\udd17 Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"container row panels-row\" > < div id = 'graph-indicator2' > < div style = \"width: 500px; height: 350px;\" id = 'indicator-graph2' > < script > window . onload = function () { TSComponents . Card . render ( 'graph-indicator2' , { serieId : '148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago' , hasChart : \"small\" , title : \"Indicador IPC interanual\" }) TSComponents . Graphic . render ( 'indicator-graph2' , { graphicUrl : \"https://apis.datos.gob.ar/series/api/series?ids=148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\" , datePickerEnabled : false , zoom : false , title : \"Gr\u00e1fico IPC interanual\" , navigator : false , legendLabel : { \"148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\" : \"IPC (% interanual)\" } }) } window.onload = function() { TSComponents.Card.render('indicador-min', { serieId: 'tcrse_QpvjK1:percent_change_a_year_ago', color: '#0072BB', hasChart: 'none', title: \"TCRSE. Otros Cultivos.\", links: \"none\", hasFrame: false, explicitSign: true, source: \"Fuente: Secretar\u00eda de la Transformaci\u00f3n Productiva\" }) TSComponents.Card.render('indicador-graph', { serieId: 'tmi_arg', color: '#2E7D33', hasChart: 'small', links: \"none\", hasFrame: false }) TSComponents.Card.render('indicador-click', { serieId: 'defensa_FAA_0006', color: '#C62828', hasChart: 'small', title: \"Personal Femenino en la Fuerza A\u00e9rea\", links: \"none\", }) TSComponents.Card.render('indicador-link', { serieId: '77.3_IEB_0_A_24', color: '#F9A822', hasChart: 'small', title: \"Exportaciones FOB a Brasil\", units: \"Millones de USD\", }) TSComponents.Graphic.render('graph-simple', { \u2003\u2003\u2003\u2003graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=143.3_NO_PR_2004_A_21:percent_change_a_year_ago,116.4_TCRZE_2015_D_36_4', \u2003\u2003\u2003\u2003zoom: false, \u2003\u2003\u2003\u2003chartTypes: {'143.3_NO_PR_2004_A_21:percent_change_a_year_ago': 'column'}, \u2003\u2003\u2003\u2003title: 'Nivel de Actividad y Tipo de Cambio Real Multilateral', \u2003\u2003\u2003\u2003source: 'Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC), Banco Central de la Rep\u00fablica Argentina (BCRA)', \u2003\u2003\u2003\u2003navigator: false }) TSComponents.Graphic.render('graph-zoom', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=33.2_ISAC_SIN_EDAD_0_M_23_56:percent_change_a_year_ago&last=12', title: 'Indicador sint\u00e9tico de la actividad de la construcci\u00f3n (ISAC)', source: 'Var % interanual. Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC)', chartTypes: { \"33.2_ISAC_SIN_EDAD_0_M_23_56\": \"column\" }, zoom: false, navigator: true, }) TSComponents.Graphic.render('graph-nav-zoom', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=151.1_TL_SIN_TAC_2012_M_15,151.1_TL_ESTADAD_2012_M_20&last=12', title: 'Cantidad de trabajadores registrados', source: 'Cantidades. Fuente: Ministerio de Trabajo, Empleo y Seguridad Social', legendField: 'description', zoom: true, navigator: true }) TSComponents.Card.render('graph-indicador1', { serieId: 'defensa_FAA_0006', color: '#C62828', hasChart: 'none', title: \"\", links: \"none\", hasFrame: false, source: \"\" }) TSComponents.Graphic.render('indicator-graph1', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=defensa_FAA_0006', title: \"Personal Femenino en la Fuerza A\u00e9rea\", source: \"Fuente: Ministerio de Defensa\", colors: ['#C62828'] }) TSComponents.Card.render('graph-indicator2', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago', hasChart: \"small\", title: \"Indicador IPC interanual\" }) TSComponents.Graphic.render('indicator-graph2', { graphicUrl: \"https://apis.datos.gob.ar/series/api/series?ids=148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\", datePickerEnabled: false, zoom: false, title: \"Gr\u00e1fico IPC interanual\", navigator: false, legendLabel: { \"148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\": \"IPC (% interanual)\" } }) }","title":"TSComponents: Ejemplos"},{"location":"reference/ts-components/examples/#ejemplos","text":"El prop\u00f3sito de este documento es mostrar ejemplos recomendados de implementar los componentes exportables (Card, Graphic). Para conocer la forma de implementar correctamente cada componente, referirse a la documentaci\u00f3n propia del mismo.","title":"Ejemplos:"},{"location":"reference/ts-components/examples/#ejemplos-card","text":"","title":"Ejemplos Card:"},{"location":"reference/ts-components/examples/#indicadores-destacados-minimo","text":"","title":"Indicadores destacados (m\u00ednimo):"},{"location":"reference/ts-components/examples/#ejemplo","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-min\" > < script > window . onload = function () { TSComponents . Card . render ( 'indicador-min' , { serieId : 'tcrse_QpvjK1:percent_change_a_year_ago' , color : '#0072BB' , hasChart : 'none' , title : \"TCRSE. Otros Cultivos.\" , links : \"none\" , hasFrame : false , explicitSign : true , source : \"Fuente: Secretar\u00eda de la Transformaci\u00f3n Productiva\" }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#indicadores-destacados-con-mini-grafico","text":"","title":"Indicadores destacados (con mini-gr\u00e1fico):"},{"location":"reference/ts-components/examples/#ejemplo_1","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_1","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-graph\" > < script > window . onload = function () { TSComponents . Card . render ( 'indicador-graph' , { serieId : 'tmi_arg' , color : '#2E7D33' , hasChart : 'small' , links : \"none\" , hasFrame : false }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#indicadores-destacados-con-tarjeta-clickeable","text":"","title":"Indicadores destacados (con tarjeta clickeable):"},{"location":"reference/ts-components/examples/#ejemplo_2","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_2","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-click\" > < script > window . onload = function () { TSComponents . Card . render ( 'indicador-click' , { serieId : 'defensa_FAA_0006' , color : '#C62828' , hasChart : 'small' , title : \"Personal Femenino en la Fuerza A\u00e9rea\" , links : \"none\" , }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#indicadores-destacados-con-enlaces-de-descarga","text":"","title":"Indicadores destacados (con enlaces de descarga):"},{"location":"reference/ts-components/examples/#ejemplo_3","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_3","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"indicador-link\" > < script > window . onload = function () { TSComponents . Card . render ( 'indicador-min' , { serieId : '77.3_IEB_0_A_24' , color : '#F9A822' , hasChart : 'small' , title : \"Exportaciones FOB a Brasil\" , units : \"Millones de USD\" , }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#ejemplos-graph","text":"","title":"Ejemplos Graph:"},{"location":"reference/ts-components/examples/#graph-destacado-simple","text":"","title":"Graph destacado simple:"},{"location":"reference/ts-components/examples/#ejemplo_4","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_4","text":"< div class = \"container\" > < div class = \"row\" > < div class = \"col-sm-12\" id = \"graph-simple\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-simple' , { \u2003\u2003\u2003\u2003 graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=143.3_NO_PR_2004_A_21:percent_change_a_year_ago,116.4_TCRZE_2015_D_36_4' , \u2003\u2003\u2003\u2003 zoom : false , \u2003\u2003\u2003\u2003 chartTypes : { '143.3_NO_PR_2004_A_21:percent_change_a_year_ago' : 'column' }, \u2003\u2003\u2003\u2003 title : 'Nivel de Actividad y Tipo de Cambio Real Multilateral' , \u2003\u2003\u2003\u2003 source : 'Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC), Banco Central de la Rep\u00fablica Argentina (BCRA)' , \u2003\u2003\u2003\u2003 navigator : false }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#graph-destacado-con-zoom","text":"","title":"Graph destacado con zoom:"},{"location":"reference/ts-components/examples/#ejemplo_5","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_5","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"graph-zoom\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-zoom' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=33.2_ISAC_SIN_EDAD_0_M_23_56:percent_change_a_year_ago&last=12' , title : 'Indicador sint\u00e9tico de la actividad de la construcci\u00f3n (ISAC)' , source : 'Var % interanual. Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC)' , chartTypes : { \"33.2_ISAC_SIN_EDAD_0_M_23_56\" : \"column\" }, zoom : false , navigator : true , }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#graph-destacado-con-navegador-y-zoom","text":"","title":"Graph destacado con navegador y zoom:"},{"location":"reference/ts-components/examples/#ejemplo_6","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_6","text":"< div class = \"container\" > < div class = \"row panels-row\" > < div class = \"center-block\" id = \"graph-nav-zoom\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'graph-nav-zoom' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=151.1_TL_SIN_TAC_2012_M_15,151.1_TL_ESTADAD_2012_M_20&last=12' , title : 'Cantidad de trabajadores registrados' , source : 'Cantidades. Fuente: Ministerio de Trabajo, Empleo y Seguridad Social' , legendField : 'description' , zoom : true , navigator : true }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#ejemplos-card-graph","text":"","title":"Ejemplos Card + Graph:"},{"location":"reference/ts-components/examples/#indicador-con-graph-inferior-asociado","text":"","title":"Indicador con Graph inferior asociado:"},{"location":"reference/ts-components/examples/#ejemplo_7","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_7","text":"< div class = \"container\" > < div class = \"row\" > < div class = \"text-center\" id = \"graph-indicador1\" > < div class = \"row\" > < div id = \"indicator-graph1\" > < script > window . onload = function () { TSComponents . Card . render ( 'graph-indicador1' , { serieId : 'defensa_FAA_0006' , color : '#C62828' , hasChart : 'none' , title : \"\" , links : \"none\" , hasFrame : false , source : \"\" }) TSComponents . Graphic . render ( 'indicator-graph1' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=defensa_FAA_0006' , title : \"Personal Femenino en la Fuerza A\u00e9rea\" , source : \"Fuente: Ministerio de Defensa\" , colors : [ '#C62828' ] }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/examples/#indicador-con-graph-lateral-asociado","text":"","title":"Indicador con Graph lateral asociado:"},{"location":"reference/ts-components/examples/#ejemplo_8","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/examples/#codigo_8","text":"< div class = \"container row panels-row\" > < div id = 'graph-indicator2' > < div style = \"width: 500px; height: 350px;\" id = 'indicator-graph2' > < script > window . onload = function () { TSComponents . Card . render ( 'graph-indicator2' , { serieId : '148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago' , hasChart : \"small\" , title : \"Indicador IPC interanual\" }) TSComponents . Graphic . render ( 'indicator-graph2' , { graphicUrl : \"https://apis.datos.gob.ar/series/api/series?ids=148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\" , datePickerEnabled : false , zoom : false , title : \"Gr\u00e1fico IPC interanual\" , navigator : false , legendLabel : { \"148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\" : \"IPC (% interanual)\" } }) } window.onload = function() { TSComponents.Card.render('indicador-min', { serieId: 'tcrse_QpvjK1:percent_change_a_year_ago', color: '#0072BB', hasChart: 'none', title: \"TCRSE. Otros Cultivos.\", links: \"none\", hasFrame: false, explicitSign: true, source: \"Fuente: Secretar\u00eda de la Transformaci\u00f3n Productiva\" }) TSComponents.Card.render('indicador-graph', { serieId: 'tmi_arg', color: '#2E7D33', hasChart: 'small', links: \"none\", hasFrame: false }) TSComponents.Card.render('indicador-click', { serieId: 'defensa_FAA_0006', color: '#C62828', hasChart: 'small', title: \"Personal Femenino en la Fuerza A\u00e9rea\", links: \"none\", }) TSComponents.Card.render('indicador-link', { serieId: '77.3_IEB_0_A_24', color: '#F9A822', hasChart: 'small', title: \"Exportaciones FOB a Brasil\", units: \"Millones de USD\", }) TSComponents.Graphic.render('graph-simple', { \u2003\u2003\u2003\u2003graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=143.3_NO_PR_2004_A_21:percent_change_a_year_ago,116.4_TCRZE_2015_D_36_4', \u2003\u2003\u2003\u2003zoom: false, \u2003\u2003\u2003\u2003chartTypes: {'143.3_NO_PR_2004_A_21:percent_change_a_year_ago': 'column'}, \u2003\u2003\u2003\u2003title: 'Nivel de Actividad y Tipo de Cambio Real Multilateral', \u2003\u2003\u2003\u2003source: 'Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC), Banco Central de la Rep\u00fablica Argentina (BCRA)', \u2003\u2003\u2003\u2003navigator: false }) TSComponents.Graphic.render('graph-zoom', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=33.2_ISAC_SIN_EDAD_0_M_23_56:percent_change_a_year_ago&last=12', title: 'Indicador sint\u00e9tico de la actividad de la construcci\u00f3n (ISAC)', source: 'Var % interanual. Fuente: Instituto Nacional de Estad\u00edstica y Censos (INDEC)', chartTypes: { \"33.2_ISAC_SIN_EDAD_0_M_23_56\": \"column\" }, zoom: false, navigator: true, }) TSComponents.Graphic.render('graph-nav-zoom', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=151.1_TL_SIN_TAC_2012_M_15,151.1_TL_ESTADAD_2012_M_20&last=12', title: 'Cantidad de trabajadores registrados', source: 'Cantidades. Fuente: Ministerio de Trabajo, Empleo y Seguridad Social', legendField: 'description', zoom: true, navigator: true }) TSComponents.Card.render('graph-indicador1', { serieId: 'defensa_FAA_0006', color: '#C62828', hasChart: 'none', title: \"\", links: \"none\", hasFrame: false, source: \"\" }) TSComponents.Graphic.render('indicator-graph1', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=defensa_FAA_0006', title: \"Personal Femenino en la Fuerza A\u00e9rea\", source: \"Fuente: Ministerio de Defensa\", colors: ['#C62828'] }) TSComponents.Card.render('graph-indicator2', { serieId: '148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago', hasChart: \"small\", title: \"Indicador IPC interanual\" }) TSComponents.Graphic.render('indicator-graph2', { graphicUrl: \"https://apis.datos.gob.ar/series/api/series?ids=148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\", datePickerEnabled: false, zoom: false, title: \"Gr\u00e1fico IPC interanual\", navigator: false, legendLabel: { \"148.3_INIVELNAL_DICI_M_26:percent_change_a_year_ago\": \"IPC (% interanual)\" } }) }","title":"C\u00f3digo:"},{"location":"reference/ts-components/graphic/","text":"Componente: graphic \ud83d\udd17 El componente graphic permite embeber gr\u00e1ficos de l\u00edneas, \u00e1reas o barras en experiencias web. Permite elegir distintos elementos de filtro de fechas, personalizar los textos, etc. Ejemplo base \ud83d\udd17 Ver online: https://jsfiddle.net/6o1c48pq/ window.onload = function() { TSComponents.Graphic.render('tmi', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg', title: 'Tasa de Mortalidad Infantil de Argentina', source: 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' }) } Este gr\u00e1fico se genera a partir del siguiente c\u00f3digo: < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/js/components.js' > < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/css/components.css' /> < div id = \"tmi\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'tmi' , { // Llamada a la API de Series de Tiempo graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg' , title : 'Tasa de Mortalidad Infantil de Argentina' , source : 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' }) } Tabla de par\u00e1metros \ud83d\udd17 Nombre Requerido Descripci\u00f3n Tipo Default Ejemplos graphicUrl Si URL completa del llamado a la API. string Ninguno https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg chartOptions No Cualquier opci\u00f3n v\u00e1lida para [Highcharts](https://api.highcharts.com/highcharts/). object {} navigator No Indica si est\u00e1 habilitada la funcionalidad de navegaci\u00f3n de la serie. boolean Din\u00e1mico true / false locale No Valores posibles: \"AR\" o \"US\" (pendientes nuevos valores). Representan qu\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string AR AR o US zoom No Indica si tiene habilitada la funcionalidad de zoom. boolean Din\u00e1mico true / false exportable No Indica si tiene habilitada la funcionalidad de exportar el gr\u00e1fico. boolean Din\u00e1mico true / false colors No Paleta de colores alternativa a la default. Los c\u00f3digos de colores pueden ser tanto hexadecimales (ej. \"#00CC44\") como numeros que son mapeados a la paleta por defecto (del 0 al 8) Ver paleta por defecto m\u00e1s abajo. list [\"#0072BB\", \"#2E7D33\", \"#C62828\", \"#F9A822\", \"#6A1B99\", \"#EC407A\", \"#C2185B\", \"#039BE5\", \"#6EA100\"] [0, 1, 2, 3, 4, 5, 6, 7, 8] [\"#2E7D33\", 2, \"#F9A822\"] backgroundColor No Color de fondo del gr\u00e1fico en formato hexadecimal. string #cdcdcd #cdcdcd datePickerEnabled No Indica si el selector de fechas est\u00e1 habilitado. boolean Din\u00e1mica true / false legendField No Indica el campo de la serie a usar para mostrar la leyenda. string 'title' \"title\", \"description\" o \"id\" chartTypes No Especifica el tipo de gr\u00e1fico a usar para cada serie < ./td> object 'line' para todas las series {'tmi_arg': 'column', 'tmi_02': 'line', 'tmi_06': 'area'} title No Especifica el t\u00edtulo el gr\u00e1fico. string Ninguno Tasa de Mortalidad Infantil de Argentina source No Especifica el texto al pie del gr\u00e1fico. string Ninguno Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud displayUnits No Indica si se muestran las unidades del gr\u00e1fico. boolean Din\u00e1mico true / false legendLabel No Especifica el texto a mostrar como leyenda por cada serie. object {} {'serie01': 'leyenda custom'} seriesAxis No Especifica de qu\u00e9 lado del gr\u00e1fico mostrar las ordenadas y unidades de cada serie representada. Puede haber m\u00e1s de una serie en un mismo lado. Si hay una sola serie, debe ir obligatoriamente del lado izquierdo. object {} {'serie01': 'right', 'serie02': 'left'} chartType No Especifica un tipo de gr\u00e1fico para aplicar a todas las series como default. En caso de estar especificado un tipo para una serie en chartTypes, este \u00faltimo ser\u00e1 priorizado para la misma. string 'line' 'line', 'area' o 'column' decimalLeftAxis No Especifica cu\u00e1ntos d\u00edgitos decimales tendr\u00e1n los valores de las ordenadas del eje izquierdo (principal) del gr\u00e1fico. int Ninguno 6 decimalRightAxis No Especifica cu\u00e1ntos d\u00edgitos decimales tendr\u00e1n los valores de las ordenadas del eje derecho (auxiliar) del gr\u00e1fico. int Ninguno 0 decimalTooltips No Especifica cu\u00e1ntos d\u00edgitos decimales mostrar\u00e1 el texto en el tooltip para cada serie, mapeando ids de series con cantidades de decimales. object Ninguno {'serie01': 4, 'serie02': 1} decimalTooltip No Especifica la cantidad de d\u00edgitos decimales a mostrar en el texto del tooltip para toda serie que no lo haya definido en el par\u00e1metro decimalTooltips. int Ninguno 3 numbersAbbreviate No Flag que indica si se deben abreviar los n\u00fameros grandes y formatearlos con el sufijo pertinente; si est\u00e1 apagado, no se realizar\u00e1 abreviatura alguna. Ver la secci\u00f3n de \"Abreviatura\" para m\u00e1s detalle. boolean true false decimalsBillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un bill\u00f3n. Supeditar\u00e1 al valor del par\u00e1metro decimals. int 2 4 decimalsMillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un mill\u00f3n. Supeditar\u00e1 al valor del par\u00e1metro decimals. boolean 2 0 startDate No Fecha de inicio de la regi\u00f3n del gr\u00e1fico sobre la cual hacer un zoom inicial al renderizarlo; en caso de ser menor a la fecha con datos m\u00e1s antigua de la serie, ser\u00e1 reemplazada por tal. Debe estar en formato ISO 8601 (AAAA-MM-DD). string Fecha m\u00e1s antigua de la serie '2014-03-30' endDate No Fecha de fin de la regi\u00f3n del gr\u00e1fico sobre la cual hacer un zoom inicial al renderizarlo; en caso de ser mayor a la fecha con datos m\u00e1s reciente de la serie, ser\u00e1 reemplazada por tal. Debe estar en formato ISO 8601 (AAAA-MM-DD). string Fecha m\u00e1s reciente de la serie '2018-12-09' Paleta de colores por defecto \ud83d\udd17 Por defecto, la paleta de colores en los que se grafican las series del componente. Cada uno puede ser identificado con un hexadecimal o un entero decimal: #0072BB o 0 , para azul #2E7D33 o 1 , para verde oscuro #C62828 o 2 , para rojo #F9A822 o 3 , para naranja #6A1B99 o 4 , para violeta #EC407A o 5 , para rosa #C2185B o 6 , para fucsia #039BE5 o 7 , para celeste #6EA100 o 8 , para verde claro Abreviatura \ud83d\udd17 Si se habilita la abreviatura y formateo de n\u00fameros grandes, encendiendo el flag numbersAbbreviate (la \u00fanica manera de apagarlo es sete\u00e1ndole expl\u00edcitamente un valor false por medio del par\u00e1metro del componente), se proceder\u00e1 a formatearlos de la siguiente manera: Los valores porcentuales (distinguidos as\u00ed por los metadatos de la serie que representan) no son abreviados. Todo n\u00famero mayor o igual a un bill\u00f3n ( 1.000.000.000.000 ) o menor a un bill\u00f3n negativo ( -1.000.000.000.000 ) ser\u00e1 dividido por un bill\u00f3n, y se le agregar\u00e1 como sufijo la letra B . Todo n\u00famero mayor o igual a diez millones ( 10.000.000 ) y menor a un bill\u00f3n, o bien menor o igual a diez millones negativos ( -10.000.000 ) y mayor a un bill\u00f3n negativo ( -1.000.000.000.000 ), ser\u00e1 dividido por un mill\u00f3n ( 1.000.000 ), y se le agregar\u00e1 como sufijo la letra M . Todo n\u00famero mayor a un diez millones negativos y menor a diez millones ser\u00e1 conservado como tal, sin aplic\u00e1rsele sufijo alguno. En caso de abreviar, la cantidad de decimales que son tenidos en cuenta del cociente obtenido al dividir el valor original de la serie por el divisor apropiado depende de los valores (por defecto o especificados) de las cantidades de los par\u00e1metros decimalsBillion y decimalsMillion (seg\u00fan corresponda). Asignaci\u00f3n din\u00e1mica de atributos \ud83d\udd17 Varios componentes del gr\u00e1fico se muestran/ocultan din\u00e1micamente dependiendo de su tama\u00f1o. Los componentes son din\u00e1micos, en tanto no se especifique su valor de inicializaci\u00f3n: Si un par\u00e1metro se especifica con valor true se muestra siempre. Si el par\u00e1metro es false no se muestra nunca. Si no se especifica, corren las siguientes reglas: zoom : Se muestra si el ancho es mayor o igual a 620px navigator : Se muestra si el ancho es mayor o igual a 500px datePickerEnabled : Se muestra si el ancho es mayor o igual a 400px displayUnits : Se muestra si el ancho es mayor o igual a 450px leyenda : Este no es un campo que se pueda ocultar mediante la API de TSComponents.Graphic , pero los valores de la leyenda se muestran s\u00f3lo si hay m\u00e1s de una serie aplicada. Ejemplo completo \ud83d\udd17 < html > < body > < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/js/components.js' > < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/css/components.css' /> < div id = \"root\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'root' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg' , title : 'Tasa de Mortalidad Infantil de Argentina' , source : 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' , legendField : 'title' , chartType : 'area' , chartTypes : { 'tmi_arg' : 'column' }, zoom : true , datePickerEnabled : true , displayUnits : true exportable : true , navigator : false , backgroundColor : '#cdcdcd' , colors : [ '#cecece' , '#8d6b22' , '#62848d' ], locale : 'AR' , chartOptions : {}, legendLabel : { 'tmi_arg' : 'Tasa de mortalidad nacional' }, seriesAxis : { 'tmi_arg' : 'left' } }) } ","title":"TSComponents: Graphic"},{"location":"reference/ts-components/graphic/#componente-graphic","text":"El componente graphic permite embeber gr\u00e1ficos de l\u00edneas, \u00e1reas o barras en experiencias web. Permite elegir distintos elementos de filtro de fechas, personalizar los textos, etc.","title":"Componente: graphic"},{"location":"reference/ts-components/graphic/#ejemplo-base","text":"Ver online: https://jsfiddle.net/6o1c48pq/ window.onload = function() { TSComponents.Graphic.render('tmi', { graphicUrl: 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg', title: 'Tasa de Mortalidad Infantil de Argentina', source: 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' }) } Este gr\u00e1fico se genera a partir del siguiente c\u00f3digo: < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/js/components.js' > < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/css/components.css' /> < div id = \"tmi\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'tmi' , { // Llamada a la API de Series de Tiempo graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg' , title : 'Tasa de Mortalidad Infantil de Argentina' , source : 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' }) } ","title":"Ejemplo base"},{"location":"reference/ts-components/graphic/#tabla-de-parametros","text":"Nombre Requerido Descripci\u00f3n Tipo Default Ejemplos graphicUrl Si URL completa del llamado a la API. string Ninguno https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg chartOptions No Cualquier opci\u00f3n v\u00e1lida para [Highcharts](https://api.highcharts.com/highcharts/). object {} navigator No Indica si est\u00e1 habilitada la funcionalidad de navegaci\u00f3n de la serie. boolean Din\u00e1mico true / false locale No Valores posibles: \"AR\" o \"US\" (pendientes nuevos valores). Representan qu\u00e9 _locale_ usar para formatear n\u00fameros, es decir, separadores de miles o de decimales. string AR AR o US zoom No Indica si tiene habilitada la funcionalidad de zoom. boolean Din\u00e1mico true / false exportable No Indica si tiene habilitada la funcionalidad de exportar el gr\u00e1fico. boolean Din\u00e1mico true / false colors No Paleta de colores alternativa a la default. Los c\u00f3digos de colores pueden ser tanto hexadecimales (ej. \"#00CC44\") como numeros que son mapeados a la paleta por defecto (del 0 al 8) Ver paleta por defecto m\u00e1s abajo. list [\"#0072BB\", \"#2E7D33\", \"#C62828\", \"#F9A822\", \"#6A1B99\", \"#EC407A\", \"#C2185B\", \"#039BE5\", \"#6EA100\"] [0, 1, 2, 3, 4, 5, 6, 7, 8] [\"#2E7D33\", 2, \"#F9A822\"] backgroundColor No Color de fondo del gr\u00e1fico en formato hexadecimal. string #cdcdcd #cdcdcd datePickerEnabled No Indica si el selector de fechas est\u00e1 habilitado. boolean Din\u00e1mica true / false legendField No Indica el campo de la serie a usar para mostrar la leyenda. string 'title' \"title\", \"description\" o \"id\" chartTypes No Especifica el tipo de gr\u00e1fico a usar para cada serie < ./td> object 'line' para todas las series {'tmi_arg': 'column', 'tmi_02': 'line', 'tmi_06': 'area'} title No Especifica el t\u00edtulo el gr\u00e1fico. string Ninguno Tasa de Mortalidad Infantil de Argentina source No Especifica el texto al pie del gr\u00e1fico. string Ninguno Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud displayUnits No Indica si se muestran las unidades del gr\u00e1fico. boolean Din\u00e1mico true / false legendLabel No Especifica el texto a mostrar como leyenda por cada serie. object {} {'serie01': 'leyenda custom'} seriesAxis No Especifica de qu\u00e9 lado del gr\u00e1fico mostrar las ordenadas y unidades de cada serie representada. Puede haber m\u00e1s de una serie en un mismo lado. Si hay una sola serie, debe ir obligatoriamente del lado izquierdo. object {} {'serie01': 'right', 'serie02': 'left'} chartType No Especifica un tipo de gr\u00e1fico para aplicar a todas las series como default. En caso de estar especificado un tipo para una serie en chartTypes, este \u00faltimo ser\u00e1 priorizado para la misma. string 'line' 'line', 'area' o 'column' decimalLeftAxis No Especifica cu\u00e1ntos d\u00edgitos decimales tendr\u00e1n los valores de las ordenadas del eje izquierdo (principal) del gr\u00e1fico. int Ninguno 6 decimalRightAxis No Especifica cu\u00e1ntos d\u00edgitos decimales tendr\u00e1n los valores de las ordenadas del eje derecho (auxiliar) del gr\u00e1fico. int Ninguno 0 decimalTooltips No Especifica cu\u00e1ntos d\u00edgitos decimales mostrar\u00e1 el texto en el tooltip para cada serie, mapeando ids de series con cantidades de decimales. object Ninguno {'serie01': 4, 'serie02': 1} decimalTooltip No Especifica la cantidad de d\u00edgitos decimales a mostrar en el texto del tooltip para toda serie que no lo haya definido en el par\u00e1metro decimalTooltips. int Ninguno 3 numbersAbbreviate No Flag que indica si se deben abreviar los n\u00fameros grandes y formatearlos con el sufijo pertinente; si est\u00e1 apagado, no se realizar\u00e1 abreviatura alguna. Ver la secci\u00f3n de \"Abreviatura\" para m\u00e1s detalle. boolean true false decimalsBillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un bill\u00f3n. Supeditar\u00e1 al valor del par\u00e1metro decimals. int 2 4 decimalsMillion No Cantidad de d\u00edgitos decimales a mostrar en aquellos n\u00fameros que son abreviados y divididos por un mill\u00f3n. Supeditar\u00e1 al valor del par\u00e1metro decimals. boolean 2 0 startDate No Fecha de inicio de la regi\u00f3n del gr\u00e1fico sobre la cual hacer un zoom inicial al renderizarlo; en caso de ser menor a la fecha con datos m\u00e1s antigua de la serie, ser\u00e1 reemplazada por tal. Debe estar en formato ISO 8601 (AAAA-MM-DD). string Fecha m\u00e1s antigua de la serie '2014-03-30' endDate No Fecha de fin de la regi\u00f3n del gr\u00e1fico sobre la cual hacer un zoom inicial al renderizarlo; en caso de ser mayor a la fecha con datos m\u00e1s reciente de la serie, ser\u00e1 reemplazada por tal. Debe estar en formato ISO 8601 (AAAA-MM-DD). string Fecha m\u00e1s reciente de la serie '2018-12-09'","title":"Tabla de par\u00e1metros"},{"location":"reference/ts-components/graphic/#paleta-de-colores-por-defecto","text":"Por defecto, la paleta de colores en los que se grafican las series del componente. Cada uno puede ser identificado con un hexadecimal o un entero decimal: #0072BB o 0 , para azul #2E7D33 o 1 , para verde oscuro #C62828 o 2 , para rojo #F9A822 o 3 , para naranja #6A1B99 o 4 , para violeta #EC407A o 5 , para rosa #C2185B o 6 , para fucsia #039BE5 o 7 , para celeste #6EA100 o 8 , para verde claro","title":"Paleta de colores por defecto"},{"location":"reference/ts-components/graphic/#abreviatura","text":"Si se habilita la abreviatura y formateo de n\u00fameros grandes, encendiendo el flag numbersAbbreviate (la \u00fanica manera de apagarlo es sete\u00e1ndole expl\u00edcitamente un valor false por medio del par\u00e1metro del componente), se proceder\u00e1 a formatearlos de la siguiente manera: Los valores porcentuales (distinguidos as\u00ed por los metadatos de la serie que representan) no son abreviados. Todo n\u00famero mayor o igual a un bill\u00f3n ( 1.000.000.000.000 ) o menor a un bill\u00f3n negativo ( -1.000.000.000.000 ) ser\u00e1 dividido por un bill\u00f3n, y se le agregar\u00e1 como sufijo la letra B . Todo n\u00famero mayor o igual a diez millones ( 10.000.000 ) y menor a un bill\u00f3n, o bien menor o igual a diez millones negativos ( -10.000.000 ) y mayor a un bill\u00f3n negativo ( -1.000.000.000.000 ), ser\u00e1 dividido por un mill\u00f3n ( 1.000.000 ), y se le agregar\u00e1 como sufijo la letra M . Todo n\u00famero mayor a un diez millones negativos y menor a diez millones ser\u00e1 conservado como tal, sin aplic\u00e1rsele sufijo alguno. En caso de abreviar, la cantidad de decimales que son tenidos en cuenta del cociente obtenido al dividir el valor original de la serie por el divisor apropiado depende de los valores (por defecto o especificados) de las cantidades de los par\u00e1metros decimalsBillion y decimalsMillion (seg\u00fan corresponda).","title":"Abreviatura"},{"location":"reference/ts-components/graphic/#asignacion-dinamica-de-atributos","text":"Varios componentes del gr\u00e1fico se muestran/ocultan din\u00e1micamente dependiendo de su tama\u00f1o. Los componentes son din\u00e1micos, en tanto no se especifique su valor de inicializaci\u00f3n: Si un par\u00e1metro se especifica con valor true se muestra siempre. Si el par\u00e1metro es false no se muestra nunca. Si no se especifica, corren las siguientes reglas: zoom : Se muestra si el ancho es mayor o igual a 620px navigator : Se muestra si el ancho es mayor o igual a 500px datePickerEnabled : Se muestra si el ancho es mayor o igual a 400px displayUnits : Se muestra si el ancho es mayor o igual a 450px leyenda : Este no es un campo que se pueda ocultar mediante la API de TSComponents.Graphic , pero los valores de la leyenda se muestran s\u00f3lo si hay m\u00e1s de una serie aplicada.","title":"Asignaci\u00f3n din\u00e1mica de atributos"},{"location":"reference/ts-components/graphic/#ejemplo-completo","text":"< html > < body > < script type = 'text/javascript' src = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/js/components.js' > < link rel = 'stylesheet' type = 'text/css' href = 'https://cdn.jsdelivr.net/gh/datosgobar/series-tiempo-ar-explorer@ts_components_2.7.0/dist/css/components.css' /> < div id = \"root\" > < script > window . onload = function () { TSComponents . Graphic . render ( 'root' , { graphicUrl : 'https://apis.datos.gob.ar/series/api/series/?ids=tmi_arg' , title : 'Tasa de Mortalidad Infantil de Argentina' , source : 'Direcci\u00f3n de Estad\u00edstica e Informaci\u00f3n en Salud (DEIS). Secretar\u00eda de Gobierno de Salud' , legendField : 'title' , chartType : 'area' , chartTypes : { 'tmi_arg' : 'column' }, zoom : true , datePickerEnabled : true , displayUnits : true exportable : true , navigator : false , backgroundColor : '#cdcdcd' , colors : [ '#cecece' , '#8d6b22' , '#62848d' ], locale : 'AR' , chartOptions : {}, legendLabel : { 'tmi_arg' : 'Tasa de mortalidad nacional' }, seriesAxis : { 'tmi_arg' : 'left' } }) } ","title":"Ejemplo completo"},{"location":"reference/ts-components/layout/","text":".btn-primary { color: #ffffff; background-color: #0072bb; } Layout de componentes: \ud83d\udd17 La hoja de estilos components.css incluye tambi\u00e9n selectores de clases aplicables a elementos HTML, inherentes al layout del dashboard o p\u00e1gina donde se inserten los componentes. Fila para componentes: \ud83d\udd17 Selector cuyos elementos internos ser\u00e1n equiespaciados y dispuestos horizontalmente. Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"ts-components-row\" > < div id = \"card-en-row-1\" > < div id = \"card-en-row-2\" > < div id = \"card-en-row-3\" > < script > window . onload = function () { TSComponents . Card . render ( 'card-en-row-1' , { serieId : '46.2_ECTSTG_0_T_40' , color : '#0072BB' , hasChart : 'none' , title : \"Tasa Subocupaci\u00f3n GBA\" , links : \"none\" , hasFrame : true , source : \"Fuente: SSPM\" }) TSComponents . Card . render ( 'card-en-row-2' , { serieId : '46.2_ECTSTSL_0_T_45' , color : '#6B8E23' , hasChart : 'none' , title : \"Tasa Subocupaci\u00f3n San Luis\" , links : \"none\" , hasFrame : true , source : \"Fuente: SSPM\" }) TSComponents . Card . render ( 'card-en-row-3' , { serieId : '46.2_ECTSTC_0_T_47' , color : '#FFA500' , hasChart : 'none' , title : \"Tasa Subocupaci\u00f3n Corrientes\" , links : \"none\" , hasFrame : true , source : \"Fuente: SSPM\" }) } Contenedor de Card: \ud83d\udd17 Selector para div de una Card, con un peque\u00f1o margen abajo y \u00f3ptimo para diversos viewports. Ejemplo: \ud83d\udd17 C\u00f3digo: \ud83d\udd17 < div class = \"card-wrapper\" id = \"card-superior\" > < div class = \"card-wrapper\" id = \"card-inferior\" > < script > window . onload = function () { TSComponents . Card . render ( 'card-superior' , { serieId : '105.1_I2L_2016_M_16' , hasChart : 'none' , color : '#5ED613' , title : \"IPC Lechuga\" , links : \"none\" , hasFrame : true , source : \"Fuente: SSPM\" }) TSComponents . Card . render ( 'card-inferior' , { serieId : '105.1_I2BAT_2016_M_15' , hasChart : 'none' , color : '#969009' , title : \"IPC Batata\" , links : \"none\" , hasFrame : true , source : \"Fuente: SSPM\" }) } window.onload = function() { TSComponents.Card.render('card-en-row-1', { serieId: '46.2_ECTSTG_0_T_40', color: '#0072BB', hasChart: 'none', title: \"Tasa Subocupaci\u00f3n GBA\", links: \"none\", hasFrame: true, source: \"Fuente: SSPM\" }) TSComponents.Card.render('card-en-row-2', { serieId: '46.2_ECTSTSL_0_T_45', color: '#6B8E23', hasChart: 'none', title: \"Tasa Subocupaci\u00f3n San Luis\", links: \"none\", hasFrame: true, source: \"Fuente: SSPM\" }) TSComponents.Card.render('card-en-row-3', { serieId: '46.2_ECTSTC_0_T_47', color: '#FFA500', hasChart: 'none', title: \"Tasa Subocupaci\u00f3n Corrientes\", links: \"none\", hasFrame: true, source: \"Fuente: SSPM\" }) TSComponents.Card.render('card-superior', { serieId: '105.1_I2L_2016_M_16', hasChart: 'none', color:'#5ED613', title: \"IPC Lechuga\", links: \"none\", hasFrame: true, source: \"Fuente: SSPM\" }) TSComponents.Card.render('card-inferior', { serieId: '105.1_I2BAT_2016_M_15', hasChart: 'none', color:'#969009', title: \"IPC Batata\", links: \"none\", hasFrame: true, source: \"Fuente: SSPM\" }) }","title":"TSComponents: Layout"},{"location":"reference/ts-components/layout/#layout-de-componentes","text":"La hoja de estilos components.css incluye tambi\u00e9n selectores de clases aplicables a elementos HTML, inherentes al layout del dashboard o p\u00e1gina donde se inserten los componentes.","title":"Layout de componentes:"},{"location":"reference/ts-components/layout/#fila-para-componentes","text":"Selector cuyos elementos internos ser\u00e1n equiespaciados y dispuestos horizontalmente.","title":"Fila para componentes:"},{"location":"reference/ts-components/layout/#ejemplo","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/layout/#codigo","text":"< div class = \"ts-components-row\" > < div id = \"card-en-row-1\" > < div id = \"card-en-row-2\" > < div id = \"card-en-row-3\" > < script > window . onload = function () { TSComponents . Card . render ( 'card-en-row-1' , { serieId : '46.2_ECTSTG_0_T_40' , color : '#0072BB' , hasChart : 'none' , title : \"Tasa Subocupaci\u00f3n GBA\" , links : \"none\" , hasFrame : true , source : \"Fuente: SSPM\" }) TSComponents . Card . render ( 'card-en-row-2' , { serieId : '46.2_ECTSTSL_0_T_45' , color : '#6B8E23' , hasChart : 'none' , title : \"Tasa Subocupaci\u00f3n San Luis\" , links : \"none\" , hasFrame : true , source : \"Fuente: SSPM\" }) TSComponents . Card . render ( 'card-en-row-3' , { serieId : '46.2_ECTSTC_0_T_47' , color : '#FFA500' , hasChart : 'none' , title : \"Tasa Subocupaci\u00f3n Corrientes\" , links : \"none\" , hasFrame : true , source : \"Fuente: SSPM\" }) } ","title":"C\u00f3digo:"},{"location":"reference/ts-components/layout/#contenedor-de-card","text":"Selector para div de una Card, con un peque\u00f1o margen abajo y \u00f3ptimo para diversos viewports.","title":"Contenedor de Card:"},{"location":"reference/ts-components/layout/#ejemplo_1","text":"","title":"Ejemplo:"},{"location":"reference/ts-components/layout/#codigo_1","text":"< div class = \"card-wrapper\" id = \"card-superior\" > < div class = \"card-wrapper\" id = \"card-inferior\" > < script > window . onload = function () { TSComponents . Card . render ( 'card-superior' , { serieId : '105.1_I2L_2016_M_16' , hasChart : 'none' , color : '#5ED613' , title : \"IPC Lechuga\" , links : \"none\" , hasFrame : true , source : \"Fuente: SSPM\" }) TSComponents . Card . render ( 'card-inferior' , { serieId : '105.1_I2BAT_2016_M_15' , hasChart : 'none' , color : '#969009' , title : \"IPC Batata\" , links : \"none\" , hasFrame : true , source : \"Fuente: SSPM\" }) } window.onload = function() { TSComponents.Card.render('card-en-row-1', { serieId: '46.2_ECTSTG_0_T_40', color: '#0072BB', hasChart: 'none', title: \"Tasa Subocupaci\u00f3n GBA\", links: \"none\", hasFrame: true, source: \"Fuente: SSPM\" }) TSComponents.Card.render('card-en-row-2', { serieId: '46.2_ECTSTSL_0_T_45', color: '#6B8E23', hasChart: 'none', title: \"Tasa Subocupaci\u00f3n San Luis\", links: \"none\", hasFrame: true, source: \"Fuente: SSPM\" }) TSComponents.Card.render('card-en-row-3', { serieId: '46.2_ECTSTC_0_T_47', color: '#FFA500', hasChart: 'none', title: \"Tasa Subocupaci\u00f3n Corrientes\", links: \"none\", hasFrame: true, source: \"Fuente: SSPM\" }) TSComponents.Card.render('card-superior', { serieId: '105.1_I2L_2016_M_16', hasChart: 'none', color:'#5ED613', title: \"IPC Lechuga\", links: \"none\", hasFrame: true, source: \"Fuente: SSPM\" }) TSComponents.Card.render('card-inferior', { serieId: '105.1_I2BAT_2016_M_15', hasChart: 'none', color:'#969009', title: \"IPC Batata\", links: \"none\", hasFrame: true, source: \"Fuente: SSPM\" }) }","title":"C\u00f3digo:"}]} \ No newline at end of file diff --git a/docs/sitemap.xml b/docs/sitemap.xml index 89a55b50..40f512e4 100644 --- a/docs/sitemap.xml +++ b/docs/sitemap.xml @@ -2,47 +2,47 @@ https://datos.gob.ar/series/docs/ - 2019-11-12 + 2019-11-27 daily https://datos.gob.ar/series/reference/ts-explorer/ - 2019-11-12 + 2019-11-27 daily https://datos.gob.ar/series/reference/ts-components/ - 2019-11-12 + 2019-11-27 daily https://datos.gob.ar/series/reference/ts-components/graphic/ - 2019-11-12 + 2019-11-27 daily https://datos.gob.ar/series/reference/ts-components/card/ - 2019-11-12 + 2019-11-27 daily https://datos.gob.ar/series/reference/ts-components/examples/ - 2019-11-12 + 2019-11-27 daily https://datos.gob.ar/series/reference/ts-components/layout/ - 2019-11-12 + 2019-11-27 daily https://datos.gob.ar/series/developers/install/ - 2019-11-12 + 2019-11-27 daily https://datos.gob.ar/series/developers/deploy/ - 2019-11-12 + 2019-11-27 daily \ No newline at end of file diff --git a/docs/sitemap.xml.gz b/docs/sitemap.xml.gz index aea2ad0ef64ace0e31760509da10a31a7b0ac41e..a3fa6af2f23fd1e707c14cb75d7f7ba20f04121d 100644 GIT binary patch literal 288 zcmV+*0pI=~iwFp4o8Dal|8r?{Wo=<_E_iKh0M(R1Zo?oDMfW*{#ommaO`FPgc0ECR z016Wu2{V)-v3>jE#;v;TqLRx7_E#j9$j(6$d-I7YFUW_y(VLQ--_3l=kigU zyF+u0jxiP4?70;~O5q7$nkLCM;iv*jiaoF%@`hm(p^_)j9f~~GfcvUw9O-UN;2dF8 zB9=Y9Nfm)HT4XS!85&q^UpEw|kxX~2>Qh}&CqYPD;v5`Bj622CGzRkM6Yn3ek17mS?;ljFX!cKuvl@fLfAH~6Ep$!$ m;WT(dMkNh+f1^@uOo`pUD literal 288 zcmV+*0pI=~iwFn@ zKw)AdVTLdywr^kDxK+1ZRC3t>pU>A5NWVSLqbu$h*^=)>Q`MqCugO^7cjE2!rF;@+ zd1!CZF{UD$J$GVADLeyA(^RodII6%E#U5A>dBd=YP**1*4@Dkpz++XkjF_1@}c>jQXRAI1s|Dak$vwupQ)fgQ9gO7J=p)wBE^+UJxzUVZ=@U0B5v1^@u77lV)h diff --git a/src/helpers/common/webCodeBuilders.ts b/src/helpers/common/webCodeBuilders.ts index ad401c97..d48a171f 100644 --- a/src/helpers/common/webCodeBuilders.ts +++ b/src/helpers/common/webCodeBuilders.ts @@ -88,8 +88,8 @@ export function graphicWebCode(url: string, series: ISerie[]): string { const source = calculateChartSource(series); const chartType = calculateChartType(url); - let htmlScript = ` - + let htmlScript = ` +