text: webpackJsonp([38],{1713:function(n,a,s){"use strict";Object.defineProperty(a,"__esModule",{value:!0});var t=function(){function n(n){var a=this;this.snippets={compiled:{},raw:{}},n.keys().forEach(function(s){var t=s.replace("./","").replace(/\W+(\w)/g,function(n){return n[1].toUpperCase()}),p=n(s);p.snippet&&(a.snippets.compiled[t]=p.snippet),p.example&&(a.snippets.raw[t]=p.example)})}return n}();a.BaseDocumentationSection=t},1724:function(n,a,s){"use strict";!function(n){for(var s in n)a.hasOwnProperty(s)||(a[s]=n[s])}(s(1730))},1730:function(n,a,s){"use strict";function t(n,a){return"rgba("+n.concat(a).join(",")+")"}function p(n,a){return Math.floor(Math.random()*(a-n+1))+n}function o(n){return{backgroundColor:t(n,.4),borderColor:t(n,1),pointBackgroundColor:t(n,1),pointBorderColor:"#fff",pointHoverBackgroundColor:"#fff",pointHoverBorderColor:t(n,.8)}}function e(n){return{backgroundColor:t(n,.6),borderColor:t(n,1),hoverBackgroundColor:t(n,.8),hoverBorderColor:t(n,1)}}function c(n){return{backgroundColor:n.map(function(n){return t(n,.6)}),borderColor:n.map(function(){return"#fff"}),pointBackgroundColor:n.map(function(n){return t(n,1)}),pointBorderColor:n.map(function(){return"#fff"}),pointHoverBackgroundColor:n.map(function(n){return t(n,1)}),pointHoverBorderColor:n.map(function(n){return t(n,1)})}}function r(n){return{backgroundColor:n.map(function(n){return t(n,.6)}),borderColor:n.map(function(n){return t(n,1)}),hoverBackgroundColor:n.map(function(n){return t(n,.8)}),hoverBorderColor:n.map(function(n){return t(n,1)})}}function l(){return[p(0,255),p(0,255),p(0,255)]}function u(n){return f.defaultColors[n]||l()}function i(n){for(var a=new Array(n),s=0;s<n;s++)a[s]=f.defaultColors[s]||l();return a}function k(n,a,s){return"pie"===n||"doughnut"===n?c(i(s)):"polarArea"===n?r(i(s)):"line"===n||"radar"===n?o(u(a)):"bar"===n||"horizontalBar"===n?e(u(a)):u(a)}var d=this&&this.__decorate||function(n,a,s,t){var p,o=arguments.length,e=o<3?a:null===t?t=Object.getOwnPropertyDescriptor(a,s):t;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)e=Reflect.decorate(n,a,s,t);else for(var c=n.length-1;c>=0;c--)(p=n[c])&&(e=(o<3?p(e):o>3?p(a,s,e):p(a,s))||e);return o>3&&e&&Object.defineProperty(a,s,e),e},h=this&&this.__metadata||function(n,a){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(n,a)},g=s(0),b=s(1734),f=function(){function n(n){this.labels=[],this.options={},this.chartClick=new g.EventEmitter,this.chartHover=new g.EventEmitter,this.initFlag=!1,this.element=n}return n.prototype.ngOnInit=function(){this.ctx=this.element.nativeElement.getContext("2d"),this.cvs=this.element.nativeElement,this.initFlag=!0,(this.data||this.datasets)&&this.refresh()},n.prototype.ngOnChanges=function(n){this.initFlag&&(n.hasOwnProperty("data")||n.hasOwnProperty("datasets")?(n.data?this.updateChartData(n.data.currentValue):this.updateChartData(n.datasets.currentValue),this.chart.update()):this.refresh())},n.prototype.ngOnDestroy=function(){this.chart&&(this.chart.destroy(),this.chart=void 0)},n.prototype.getChartBuilder=function(n){var a=this,s=this.getDatasets(),t=Object.assign({},this.options);!1===this.legend&&(t.legend={display:!1}),t.hover=t.hover||{},t.hover.onHover||(t.hover.onHover=function(n){n&&!n.length||a.chartHover.emit({active:n})}),t.onClick||(t.onClick=function(n,s){a.chartClick.emit({event:n,active:s})});var p={type:this.chartType,data:{labels:this.labels,datasets:s},options:t};return new b.Chart(n,p)},n.prototype.updateChartData=function(n){Array.isArray(n[0].data)?this.chart.data.datasets.forEach(function(a,s){a.data=n[s].data,n[s].label&&(a.label=n[s].label)}):this.chart.data.datasets[0].data=n},n.prototype.getDatasets=function(){var n=this,a=void 0;if((!this.datasets||!this.datasets.length&&this.data&&this.data.length)&&(a=Array.isArray(this.data[0])?this.data.map(function(a,s){return{data:a,label:n.labels[s]||"Label "+s}}):[{data:this.data,label:"Label 0"}]),(this.datasets&&this.datasets.length||a&&a.length)&&(a=(this.datasets||a).map(function(a,s){var t=Object.assign({},a);return n.colors&&n.colors.length?Object.assign(t,n.colors[s]):Object.assign(t,k(n.chartType,s,t.data.length)),t})),!a)throw new Error("ng-charts configuration error,\n      data or datasets field are required to render char "+this.chartType);return a},n.prototype.refresh=function(){this.ngOnDestroy(),this.chart=this.getChartBuilder(this.ctx)},n}();f.defaultColors=[[255,99,132],[54,162,235],[255,206,86],[231,233,237],[75,192,192],[151,187,205],[220,220,220],[247,70,74],[70,191,189],[253,180,92],[148,159,177],[77,83,96]],d([g.Input(),h("design:type",Array)],f.prototype,"data",void 0),d([g.Input(),h("design:type",Array)],f.prototype,"datasets",void 0),d([g.Input(),h("design:type",Array)],f.prototype,"labels",void 0),d([g.Input(),h("design:type",Object)],f.prototype,"options",void 0),d([g.Input(),h("design:type",String)],f.prototype,"chartType",void 0),d([g.Input(),h("design:type",Array)],f.prototype,"colors",void 0),d([g.Input(),h("design:type",Boolean)],f.prototype,"legend",void 0),d([g.Output(),h("design:type",g.EventEmitter)],f.prototype,"chartClick",void 0),d([g.Output(),h("design:type",g.EventEmitter)],f.prototype,"chartHover",void 0),f=d([g.Directive({selector:"canvas[baseChart]",exportAs:"base-chart"}),h("design:paramtypes",[g.ElementRef])],f),a.BaseChartDirective=f;var m=function(){function n(){}return n}();m=d([g.NgModule({declarations:[f],exports:[f],imports:[]})],m),a.ChartsModule=m},3745:function(n,a,s){"use strict";var t=this&&this.__decorate||function(n,a,s,t){var p,o=arguments.length,e=o<3?a:null===t?t=Object.getOwnPropertyDescriptor(a,s):t;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)e=Reflect.decorate(n,a,s,t);else for(var c=n.length-1;c>=0;c--)(p=n[c])&&(e=(o<3?p(e):o>3?p(a,s,e):p(a,s))||e);return o>3&&e&&Object.defineProperty(a,s,e),e},p=this&&this.__metadata||function(n,a){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(n,a)};Object.defineProperty(a,"__esModule",{value:!0});var o=s(0),e=s(9),c=s(24),r=s(3746),l=s(173),u=s(409),i=s(408),k=s(411),d=s(3752),h=s(1724),g=s(410),b=[r.ChartsScrollableChartNg1Component,d.ChartsScrollableChartComponent],f=[{path:"**",component:u.DocumentationCategoryComponent,data:{category:l.ResolverService.resolveCategoryData(l.DocumentationPage.Charts,"Scrollable Chart")}}],m=function(){function n(n,a){a.registerResolver(n)}return n}();m=t([o.NgModule({imports:[k.WrappersModule,h.ChartsModule,e.CommonModule,g.TabsModule,i.DocumentationComponentsModule,c.RouterModule.forChild(f)],exports:b,declarations:b,entryComponents:b}),p("design:paramtypes",[o.ComponentFactoryResolver,l.ResolverService])],m),a.ChartsScrollableChartModule=m},3746:function(n,a,s){"use strict";var t=this&&this.__extends||function(){var n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(n,a){n.__proto__=a}||function(n,a){for(var s in a)a.hasOwnProperty(s)&&(n[s]=a[s])};return function(a,s){function t(){this.constructor=a}n(a,s),a.prototype=null===s?Object.create(s):(t.prototype=s.prototype,new t)}}(),p=this&&this.__decorate||function(n,a,s,t){var p,o=arguments.length,e=o<3?a:null===t?t=Object.getOwnPropertyDescriptor(a,s):t;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)e=Reflect.decorate(n,a,s,t);else for(var c=n.length-1;c>=0;c--)(p=n[c])&&(e=(o<3?p(e):o>3?p(a,s,e):p(a,s))||e);return o>3&&e&&Object.defineProperty(a,s,e),e},o=this&&this.__metadata||function(n,a){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(n,a)};Object.defineProperty(a,"__esModule",{value:!0});var e=s(0),c=s(407),r=s(102),l=s(1713),u=function(n){function a(a){var t=n.call(this,s(3747))||this;t.codepen={html:t.snippets.raw.chartHtml,htmlAttributes:{"ng-controller":"ScrollableChartCtrl as sc"},js:[t.snippets.raw.chartJs]};var p={chartColor:a.getColor("chart1").toRgb(),chartHover:a.getColor("chart2").setAlpha(.2).toRgba(),gridColor:a.getColor("grey4").toHex(),tickColor:a.getColor("grey6").toHex(),borderColor:a.getColor("grey2").setAlpha(.5).toRgba(),white:"#fff"};return t.data=[{label:"bar",data:[[1,34],[2,25],[3,19],[4,34],[5,32],[6,44],[7,12],[8,27],[9,15],[10,48],[11,40],[12,36]]}],t.options={series:{bars:{show:!0,fill:!0,fillColor:{colors:[{opacity:.1},{opacity:.1}]},barWidth:.5,lineWidth:1,align:"center"},highlightColor:[p.chartHover]},xaxis:{tickDecimals:0,color:[p.white],ticks:[[1,".doc"],[2,".ppt"],[3,".pdf"],[4,".xls"],[5,".html"],[6,".txt"],[7,".png"],[8,".bmp"],[9,".gif"],[10,".svg"],[11,".ttf"],[12,".wav"]],scrollable:{enabled:!0,range:4,lowerBound:.5,upperBound:12.5,color:[p.chartColor],callback:function(){}}},colors:[p.chartColor],grid:{color:[p.gridColor],hoverable:!0,clickable:!0,borderWidth:{left:1,bottom:1,right:0,top:0},borderColor:{left:[p.borderColor],bottom:[p.borderColor]}},legend:{show:!1},tooltip:{show:!0,shifts:{x:0,y:-30},content:function(n,a,s){return"x: %x, y: "+s}}},t}return t(a,n),a}(l.BaseDocumentationSection);u=p([e.Component({selector:"uxd-charts-scrollable-chart-ng1",template:s(3751),changeDetection:e.ChangeDetectionStrategy.OnPush}),c.DocumentationSectionComponent("ChartsScrollableChartNg1Component"),o("design:paramtypes",[r.ColorService])],u),a.ChartsScrollableChartNg1Component=u},3747:function(n,a,s){function t(n){return s(p(n))}function p(n){var a=o[n];if(!(a+1))throw new Error("Cannot find module '"+n+"'.");return a}var o={"./chart.html":3748,"./chart.js":3749,"./options.js":3750};t.keys=function(){return Object.keys(o)},t.resolve=p,n.exports=t,t.id=3747},3748:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container-fluid<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-md-12 m-t-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flot-chart<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>flot</span> <span class="token attr-name">dataset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sc.scrollChart.data<span class="token punctuation">"</span></span> <span class="token attr-name">options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sc.scrollChart.baroptions<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>flot</span><span class="token punctuation">></span></span>\r\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">tabindex</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sr-only<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">ng-repeat</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>item in sc.barChart.data[0].data<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>,<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>\r\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>\r\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\r\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>',example:'<div class="container-fluid">\r\n  <div class="row">\r\n    <div class="col-md-12 m-t-md">\r\n      <div class="flot-chart">\r\n        <flot dataset="sc.scrollChart.data" options="sc.scrollChart.baroptions"></flot>\r\n        <span tabindex="0" class="sr-only">\r\n          <span ng-repeat="item in sc.barChart.data[0].data">,</span>\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>'}},3749:function(n,a){n.exports={snippet:'angular<span class="token punctuation">.</span><span class="token function">module</span><span class="token punctuation">(</span><span class="token string">\'app\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">controller</span><span class="token punctuation">(</span><span class="token string">\'ScrollableChartCtrl\'</span><span class="token punctuation">,</span> ScrollableChartCtrl<span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n\r\nScrollableChartCtrl<span class="token punctuation">.</span>$inject <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">\'$colorService\'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\r\n\r\n<span class="token keyword">function</span> <span class="token function">ScrollableChartCtrl</span><span class="token punctuation">(</span>$colorService<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n    <span class="token keyword">var</span> sc <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>\r\n\r\n    <span class="token keyword">var</span> flotChartColors <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n        chartColor<span class="token punctuation">:</span> $colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'chart1\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toRgb</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\r\n        chartHover<span class="token punctuation">:</span> $colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'chart2\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setAlpha</span><span class="token punctuation">(</span><span class="token number">0.2</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toRgba</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\r\n        gridColor<span class="token punctuation">:</span> $colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'grey4\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\r\n        tickColor<span class="token punctuation">:</span> $colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'grey6\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\r\n        borderColor<span class="token punctuation">:</span> $colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'grey2\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setAlpha</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toRgba</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\r\n        white<span class="token punctuation">:</span> <span class="token string">"#FFFFFF"</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n    sc<span class="token punctuation">.</span>scrollChart <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n        data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\r\n            label<span class="token punctuation">:</span> <span class="token string">"bar"</span><span class="token punctuation">,</span>\r\n            data<span class="token punctuation">:</span> <span class="token punctuation">[</span>\r\n                <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">34</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">34</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                <span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">44</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                <span class="token punctuation">[</span><span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                <span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                <span class="token punctuation">[</span><span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">48</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                <span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">]</span>\r\n            <span class="token punctuation">]</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n        baroptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            series<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                bars<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    show<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n                    fill<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n                    fillColor<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        colors<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\r\n                            opacity<span class="token punctuation">:</span> <span class="token number">0.1</span>\r\n                        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\r\n                            opacity<span class="token punctuation">:</span> <span class="token number">0.1</span>\r\n                        <span class="token punctuation">}</span><span class="token punctuation">]</span>\r\n                    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                    barWidth<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>\r\n                    lineWidth<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\r\n                    <span class="token string">\'align\'</span><span class="token punctuation">:</span> <span class="token string">"center"</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                highlightColor<span class="token punctuation">:</span> <span class="token punctuation">[</span>flotChartColors<span class="token punctuation">.</span>chartHover<span class="token punctuation">]</span>\r\n            <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n            xaxis<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                tickDecimals<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\r\n                color<span class="token punctuation">:</span> <span class="token punctuation">[</span>flotChartColors<span class="token punctuation">.</span>white<span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                ticks<span class="token punctuation">:</span> <span class="token punctuation">[</span>\r\n                    <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">".doc"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                    <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token string">".ppt"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                    <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token string">".pdf"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                    <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token string">".xls"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                    <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token string">".html"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                    <span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token string">".txt"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                    <span class="token punctuation">[</span><span class="token number">7</span><span class="token punctuation">,</span> <span class="token string">".png"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                    <span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token string">".bmp"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                    <span class="token punctuation">[</span><span class="token number">9</span><span class="token punctuation">,</span> <span class="token string">".gif"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                    <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token string">".svg"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                    <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span> <span class="token string">".ttf"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                    <span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token string">".wav"</span><span class="token punctuation">]</span>\r\n                <span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                scrollable<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    enabled<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n                    range<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span>\r\n                    lowerBound<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>\r\n                    upperBound<span class="token punctuation">:</span> <span class="token number">12.5</span><span class="token punctuation">,</span>\r\n                    color<span class="token punctuation">:</span> <span class="token punctuation">[</span>flotChartColors<span class="token punctuation">.</span>chartColor<span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                    callback<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                        <span class="token comment" spellcheck="true">//do stuff in here when scrolled</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span>\r\n\r\n            <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n            colors<span class="token punctuation">:</span> <span class="token punctuation">[</span>flotChartColors<span class="token punctuation">.</span>chartColor<span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n            grid<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                color<span class="token punctuation">:</span> <span class="token punctuation">[</span>flotChartColors<span class="token punctuation">.</span>gridColor<span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                hoverable<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n                clickable<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n                borderWidth<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    <span class="token string">"left"</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\r\n                    <span class="token string">"bottom"</span><span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\r\n                    <span class="token string">"right"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\r\n                    <span class="token string">"top"</span><span class="token punctuation">:</span> <span class="token number">0</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                borderColor<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    <span class="token string">"left"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>flotChartColors<span class="token punctuation">.</span>borderColor<span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                    <span class="token string">"bottom"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>flotChartColors<span class="token punctuation">.</span>borderColor<span class="token punctuation">]</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n            legend<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                show<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n            <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n            tooltip<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                show<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n                shifts<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    x<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\r\n                    y<span class="token punctuation">:</span> <span class="token operator">-</span><span class="token number">30</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                content<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>label<span class="token punctuation">,</span> xval<span class="token punctuation">,</span> yval<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                    <span class="token keyword">var</span> content <span class="token operator">=</span> <span class="token string">"x: "</span> <span class="token operator">+</span> <span class="token string">"%x"</span> <span class="token operator">+</span> <span class="token string">", y: "</span> <span class="token operator">+</span> yval<span class="token punctuation">;</span>\r\n                    <span class="token keyword">return</span> content<span class="token punctuation">;</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span>\r\n        <span class="token punctuation">}</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>',example:'angular.module(\'app\').controller(\'ScrollableChartCtrl\', ScrollableChartCtrl);\r\n\r\nScrollableChartCtrl.$inject = [\'$colorService\'];\r\n\r\nfunction ScrollableChartCtrl($colorService) {\r\n    var sc = this;\r\n\r\n    var flotChartColors = {\r\n        chartColor: $colorService.getColor(\'chart1\').toRgb(),\r\n        chartHover: $colorService.getColor(\'chart2\').setAlpha(0.2).toRgba(),\r\n        gridColor: $colorService.getColor(\'grey4\').toHex(),\r\n        tickColor: $colorService.getColor(\'grey6\').toHex(),\r\n        borderColor: $colorService.getColor(\'grey2\').setAlpha().toRgba(),\r\n        white: "#FFFFFF"\r\n    };\r\n\r\n    sc.scrollChart = {\r\n        data: [{\r\n            label: "bar",\r\n            data: [\r\n                [1, 34],\r\n                [2, 25],\r\n                [3, 19],\r\n                [4, 34],\r\n                [5, 32],\r\n                [6, 44],\r\n                [7, 12],\r\n                [8, 27],\r\n                [9, 15],\r\n                [10, 48],\r\n                [11, 40],\r\n                [12, 36]\r\n            ]\r\n        }],\r\n        baroptions: {\r\n            series: {\r\n                bars: {\r\n                    show: true,\r\n                    fill: true,\r\n                    fillColor: {\r\n                        colors: [{\r\n                            opacity: 0.1\r\n                        }, {\r\n                            opacity: 0.1\r\n                        }]\r\n                    },\r\n                    barWidth: 0.5,\r\n                    lineWidth: 1,\r\n                    \'align\': "center"\r\n                },\r\n                highlightColor: [flotChartColors.chartHover]\r\n            },\r\n            xaxis: {\r\n                tickDecimals: 0,\r\n                color: [flotChartColors.white],\r\n                ticks: [\r\n                    [1, ".doc"],\r\n                    [2, ".ppt"],\r\n                    [3, ".pdf"],\r\n                    [4, ".xls"],\r\n                    [5, ".html"],\r\n                    [6, ".txt"],\r\n                    [7, ".png"],\r\n                    [8, ".bmp"],\r\n                    [9, ".gif"],\r\n                    [10, ".svg"],\r\n                    [11, ".ttf"],\r\n                    [12, ".wav"]\r\n                ],\r\n                scrollable: {\r\n                    enabled: true,\r\n                    range: 4,\r\n                    lowerBound: 0.5,\r\n                    upperBound: 12.5,\r\n                    color: [flotChartColors.chartColor],\r\n                    callback: function () {\r\n                        //do stuff in here when scrolled\r\n                    }\r\n                }\r\n\r\n            },\r\n            colors: [flotChartColors.chartColor],\r\n            grid: {\r\n                color: [flotChartColors.gridColor],\r\n                hoverable: true,\r\n                clickable: true,\r\n                borderWidth: {\r\n                    "left": 1,\r\n                    "bottom": 1,\r\n                    "right": 0,\r\n                    "top": 0\r\n                },\r\n                borderColor: {\r\n                    "left": [flotChartColors.borderColor],\r\n                    "bottom": [flotChartColors.borderColor]\r\n                }\r\n            },\r\n            legend: {\r\n                show: false\r\n            },\r\n            tooltip: {\r\n                show: true,\r\n                shifts: {\r\n                    x: 0,\r\n                    y: -30\r\n                },\r\n                content: function (label, xval, yval) {\r\n                    var content = "x: " + "%x" + ", y: " + yval;\r\n                    return content;\r\n                }\r\n            }\r\n        }\r\n    };\r\n}'}},3750:function(n,a){n.exports={snippet:'xaxis<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n    scrollable<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n        enabled<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n        range<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span>\r\n        lowerBound<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>\r\n        upperBound<span class="token punctuation">:</span> <span class="token number">12.5</span><span class="token punctuation">,</span>\r\n        color<span class="token punctuation">:</span> <span class="token string">\'#614767\'</span><span class="token punctuation">,</span>\r\n        callback<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>position<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n            <span class="token comment" spellcheck="true">//do stuff in here when scrolled</span>\r\n        <span class="token punctuation">}</span>\r\n    <span class="token punctuation">}</span>\r\n<span class="token punctuation">}</span>',example:"xaxis: {\r\n    scrollable: {\r\n        enabled: true,\r\n        range: 4,\r\n        lowerBound: 0.5,\r\n        upperBound: 12.5,\r\n        color: '#614767',\r\n        callback: function(position) {\r\n            //do stuff in here when scrolled\r\n        }\r\n    }\r\n}"}},3751:function(n,a){n.exports='<div class="flot-chart">\r\n  <ux-flot-ng1 [dataset]="data" [options]="options"></ux-flot-ng1>\r\n</div>\r\n\r\n<hr>\r\n\r\n<p>Bar charts and line charts can be extended to have scrolling capabilities for cases when the chart has to display large amounts of data.</p>\r\n\r\n<p>To make a chart scrollable we need to define a <code>scrollable</code> object under the xaxis options.</p>\r\n\r\n<uxd-snippet language="javascript" [content]="snippets.compiled.optionsJs"></uxd-snippet>\r\n\r\n<hr>\r\n\r\n<div class="demo-attributes table-responsive">\r\n<table class="table">\r\n  <tbody><tr>\r\n    <th>Property</th>\r\n    <th>Type</th>\r\n    <th>Description</th>\r\n    <th>Optional</th>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">scrollable</td>\r\n    <td>array</td>\r\n    <td>Helps configure the scrolling behavior.</td>\r\n    <td>true</td>\r\n  </tr>\r\n</tbody></table>\r\n</div>\r\n\r\n<hr>\r\n\r\n<p>The following attributes should be defined within <code>scrollable</code></p>\r\n\r\n<div class="demo-attributes table-responsive">\r\n<table class="table">\r\n  <tbody><tr>\r\n    <th>Property</th>\r\n    <th>Type</th>\r\n    <th>Description</th>\r\n    <th>Optional</th>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">enabled</td>\r\n    <td>boolean</td>\r\n    <td>Set to true if scrolling will be enabled.</td>\r\n    <td>true</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">range</td>\r\n    <td>number</td>\r\n    <td>Represents the size of each page in relation to the points on the x-axis. For example, in the chart above a value of 4 will initially show any points between 0.5 and 4.5. When the next button is clicked it will show points between 4.5 and 8.5</td>\r\n    <td>true</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">lowerBound</td>\r\n    <td>number</td>\r\n    <td>Represents the minimum point on the x-axis that can be scrolled to. Once the chart is at this position the scroll left button will be hidden.</td>\r\n    <td>true</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">upperBound</td>\r\n    <td>number</td>\r\n    <td>Represents the maximum point on the x-axis that can be scrolled to. Once the chart is at this point the scroll right button will be hidden.</td>\r\n    <td>true</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">color</td>\r\n    <td>color</td>\r\n    <td>Sets the color of the scroll buttons.</td>\r\n    <td>true</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">callback</td>\r\n    <td>function</td>\r\n    <td>Will be called when the chart is scrolled. It should take in one parameter that will contain two properties.</td>\r\n    <td>true</td>\r\n  </tr>\r\n</tbody></table>\r\n</div>\r\n\r\n<hr>\r\n\r\n<p>The following attributes should be defined within <code>callback</code></p>\r\n\r\n<div class="demo-attributes table-responsive">\r\n<table class="table">\r\n  <tbody><tr>\r\n    <th>Property</th>\r\n    <th>Type</th>\r\n    <th>Description</th>\r\n    <th>Optional</th>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">start</td>\r\n    <td>number</td>\r\n    <td>Contains the minimum value on the x-axis that is currently visible.</td>\r\n    <td>true</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">end</td>\r\n    <td>number</td>\r\n    <td>Contains the maximum value on the x-axis that is currently visible.</td>\r\n    <td>true</td>\r\n  </tr>\r\n</tbody></table>\r\n</div>\r\n\r\n<blockquote>\r\n  <p><strong>Note</strong>: Refer to the <a routerLink="/charts/flot-options">Flot Options</a> page for details of chart options.</p>\r\n</blockquote>\r\n\r\n<p>Scrollable charts are an enhanced version of bar/line charts. For more information on adding a bar or line chart, refer to the appropriate chart documentation.</p>\r\n\r\n<blockquote>\r\n    <p><strong>Note</strong>: To upgrade this component to use in an Angular 4 application use: <code>upgradeAdapter.upgradeNg1Component(\'uxFlotNg1\')</code></p>\r\n</blockquote>'},3752:function(n,a,s){"use strict";var t=this&&this.__extends||function(){var n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(n,a){n.__proto__=a}||function(n,a){for(var s in a)a.hasOwnProperty(s)&&(n[s]=a[s])};return function(a,s){function t(){this.constructor=a}n(a,s),a.prototype=null===s?Object.create(s):(t.prototype=s.prototype,new t)}}(),p=this&&this.__decorate||function(n,a,s,t){var p,o=arguments.length,e=o<3?a:null===t?t=Object.getOwnPropertyDescriptor(a,s):t;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)e=Reflect.decorate(n,a,s,t);else for(var c=n.length-1;c>=0;c--)(p=n[c])&&(e=(o<3?p(e):o>3?p(a,s,e):p(a,s))||e);return o>3&&e&&Object.defineProperty(a,s,e),e},o=this&&this.__metadata||function(n,a){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(n,a)};Object.defineProperty(a,"__esModule",{value:!0});var e=s(0),c=s(407),r=s(102),l=s(1713),u=function(n){function a(a){var t=n.call(this,s(3753))||this;t.plunk={files:{"app.component.ts":t.snippets.raw.scrollableChartTs,"app.component.html":t.snippets.raw.scrollableChartHtml,"app.component.css":t.snippets.raw.scrollableChartCss},modules:[{library:"chart.js"},{imports:["ChartsModule"],library:"ng2-charts"},{imports:["ColorServiceModule"],library:"ux-aspects"}],mappings:[{alias:"chart.js",source:"https://unpkg.com/chart.js@2.5.0/dist/Chart.min.js"},{alias:"ng2-charts",source:"https://unpkg.com/ng2-charts@1.5.0/bundles/ng2-charts.umd.min.js"}]},t.barChartLegend=!1,t.labels=[".doc",".ppt",".pdf",".xls",".html",".txt",".png",".bmp",".gif",".svg",".ttf",".wav"],t.data=[34,25,19,34,32,44,12,27,15,48,40,36],t.page=0,t.pageSize=4,t.barChartLabels=t.getPageLabels(),t.barChartData=[{data:t.getPageData(),borderWidth:1}];var p=a.getColor("grey6").toHex(),o=a.getColor("chart1").setAlpha(.1).toRgba(),e=a.getColor("chart1").setAlpha(.2).toRgba(),c=a.getColor("chart1").toHex(),r=a.getColor("grey2").toHex();return t.barChartOptions={maintainAspectRatio:!1,responsive:!0,animation:!1,scales:{xAxes:[{barPercentage:.5,categoryPercentage:1,gridLines:{color:"transparent"}}],yAxes:[{gridLines:{color:p},ticks:{min:0,max:50,stepSize:10}}]},tooltips:{backgroundColor:r,cornerRadius:0,callbacks:{title:function(n){},label:function(n){return"x: "+n.xLabel+", y: "+n.yLabel}},displayColors:!1}},t.barChartColors=[{backgroundColor:o,hoverBackgroundColor:e,borderColor:c}],t}return t(a,n),a.prototype.getPageData=function(){var n=this.page*this.pageSize,a=n+this.pageSize;return this.data.slice(n,a)},a.prototype.getPageLabels=function(){var n=this.page*this.pageSize,a=n+this.pageSize;return this.labels.slice(n,a)},a.prototype.goToPreviousPage=function(){this.hasPreviousPage()&&(this.page-=1,this.barChartLabels=this.getPageLabels(),this.barChartData[0].data=this.getPageData())},a.prototype.goToNextPage=function(){this.hasNextPage()&&(this.page+=1,this.barChartLabels=this.getPageLabels(),this.barChartData[0].data=this.getPageData())},a.prototype.hasNextPage=function(){return(this.page+1)*this.pageSize<this.data.length},a.prototype.hasPreviousPage=function(){return this.page>0},a}(l.BaseDocumentationSection);u=p([e.Component({selector:"uxd-charts-scrollable-chart",template:s(3757),styles:[s(3758)]}),c.DocumentationSectionComponent("ChartsScrollableChartComponent"),o("design:paramtypes",[r.ColorService])],u),a.ChartsScrollableChartComponent=u},3753:function(n,a,s){function t(n){return s(p(n))}function p(n){var a=o[n];if(!(a+1))throw new Error("Cannot find module '"+n+"'.");return a}var o={"./scrollable-chart.css":3754,"./scrollable-chart.html":3755,"./scrollable-chart.ts":3756};t.keys=function(){return Object.keys(o)},t.resolve=p,n.exports=t,t.id=3753},3754:function(n,a){n.exports={snippet:'<span class="token selector">.demo-chart-container</span> <span class="token punctuation">{</span>\r\n    <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>\r\n    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>\r\n    <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n<span class="token selector">.chart-scroll-previous-btn,\r\n.chart-scroll-next-btn</span> <span class="token punctuation">{</span>\r\n  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>\r\n  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>\r\n  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>\r\n  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>\r\n  <span class="token property">width</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span>\r\n  <span class="token property">height</span><span class="token punctuation">:</span> 25px<span class="token punctuation">;</span>\r\n  <span class="token property">background-color</span><span class="token punctuation">:</span> #00a7a2<span class="token punctuation">;</span>\r\n  <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>\r\n  <span class="token property">opacity</span><span class="token punctuation">:</span> 0.7<span class="token punctuation">;</span>\r\n  <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>\r\n  <span class="token property">transition</span><span class="token punctuation">:</span> opacity 0.3s ease-in-out<span class="token punctuation">;</span>\r\n  <span class="token property">top</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>50% - 22px<span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>\r\n  <span class="token property">font-size</span><span class="token punctuation">:</span> 13px<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n<span class="token selector">.chart-scroll-previous-btn:hover,\r\n.chart-scroll-next-btn:hover</span> <span class="token punctuation">{</span>\r\n  <span class="token property">opacity</span><span class="token punctuation">:</span> 0.9<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n<span class="token selector">.chart-scroll-previous-btn</span> <span class="token punctuation">{</span>\r\n  <span class="token property">left</span><span class="token punctuation">:</span> 32px<span class="token punctuation">;</span>\r\n  <span class="token property">padding-right</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n<span class="token selector">.chart-scroll-next-btn</span> <span class="token punctuation">{</span>\r\n  <span class="token property">right</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>\r\n  <span class="token property">padding-left</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n',example:".demo-chart-container {\r\n    display: block;\r\n    position: relative;\r\n    height: 200px;\r\n}\r\n\r\n.chart-scroll-previous-btn,\r\n.chart-scroll-next-btn {\r\n  position: absolute;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 25px;\r\n  height: 25px;\r\n  background-color: #00a7a2;\r\n  border-radius: 50%;\r\n  opacity: 0.7;\r\n  cursor: pointer;\r\n  transition: opacity 0.3s ease-in-out;\r\n  top: calc(50% - 22px);\r\n  color: #fff;\r\n  font-size: 13px;\r\n}\r\n\r\n.chart-scroll-previous-btn:hover,\r\n.chart-scroll-next-btn:hover {\r\n  opacity: 0.9;\r\n}\r\n\r\n.chart-scroll-previous-btn {\r\n  left: 32px;\r\n  padding-right: 1px;\r\n}\r\n\r\n.chart-scroll-next-btn {\r\n  right: 10px;\r\n  padding-left: 2px;\r\n}\r\n"}},3755:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-chart-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>chart-scroll-previous-btn<span class="token punctuation">"</span></span> <span class="token attr-name">*ngIf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hasPreviousPage()<span class="token punctuation">"</span></span> <span class="token attr-name">(click)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>goToPreviousPage()<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hpe-icon hpe-previous<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\r\n\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>canvas</span> <span class="token attr-name">baseChart</span> \r\n            <span class="token attr-name">[datasets]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>barChartData<span class="token punctuation">"</span></span>\r\n            <span class="token attr-name">[labels]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>barChartLabels<span class="token punctuation">"</span></span>\r\n            <span class="token attr-name">[options]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>barChartOptions<span class="token punctuation">"</span></span>\r\n            <span class="token attr-name">[legend]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>barChartLegend<span class="token punctuation">"</span></span>\r\n            <span class="token attr-name">[colors]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>barChartColors<span class="token punctuation">"</span></span>\r\n            <span class="token attr-name">chartType</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>bar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>canvas</span><span class="token punctuation">></span></span>\r\n\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>chart-scroll-next-btn<span class="token punctuation">"</span></span> <span class="token attr-name">*ngIf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hasNextPage()<span class="token punctuation">"</span></span> <span class="token attr-name">(click)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>goToNextPage()<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hpe-icon hpe-next<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>        \r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\r\n\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>',example:'<div class="demo-chart-container">\r\n\r\n    <div class="chart-scroll-previous-btn" *ngIf="hasPreviousPage()" (click)="goToPreviousPage()">\r\n        <i class="hpe-icon hpe-previous"></i>\r\n    </div>\r\n\r\n    <canvas baseChart \r\n            [datasets]="barChartData"\r\n            [labels]="barChartLabels"\r\n            [options]="barChartOptions"\r\n            [legend]="barChartLegend"\r\n            [colors]="barChartColors"\r\n            chartType="bar">\r\n    </canvas>\r\n\r\n    <div class="chart-scroll-next-btn" *ngIf="hasNextPage()" (click)="goToNextPage()">\r\n        <i class="hpe-icon hpe-next"></i>        \r\n    </div>\r\n\r\n</div>'}},3756:function(n,a){n.exports={snippet:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'@angular/core\'</span><span class="token punctuation">;</span>\r\n<span class="token keyword">import</span> <span class="token punctuation">{</span> ColorService <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'ux-aspects\'</span><span class="token punctuation">;</span>\r\n<span class="token keyword">import</span> <span class="token punctuation">{</span> BaseChartDirective <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'ng2-charts\'</span><span class="token punctuation">;</span>\r\n<span class="token keyword">import</span> <span class="token punctuation">{</span> Chart <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'chart.js\'</span><span class="token punctuation">;</span>\r\n\r\n@<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\r\n    selector<span class="token punctuation">:</span> <span class="token string">\'app\'</span><span class="token punctuation">,</span>\r\n    templateUrl<span class="token punctuation">:</span> <span class="token string">\'./src/app.component.html\'</span><span class="token punctuation">,</span>\r\n    styleUrls<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">\'./src/app.component.css\'</span><span class="token punctuation">]</span>\r\n<span class="token punctuation">}</span><span class="token punctuation">)</span>\r\n<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">AppComponent</span> <span class="token punctuation">{</span>\r\n\r\n    <span class="token comment" spellcheck="true">// configure the directive data</span>\r\n    barChartData<span class="token punctuation">:</span> Chart<span class="token punctuation">.</span>ChartData<span class="token punctuation">;</span>\r\n\r\n    barChartLabels<span class="token punctuation">:</span> string<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\r\n    barChartOptions<span class="token punctuation">:</span> Chart<span class="token punctuation">.</span>ChartOptions<span class="token punctuation">;</span>\r\n    barChartLegend<span class="token punctuation">:</span> boolean <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\r\n    barChartColors<span class="token punctuation">:</span> any<span class="token punctuation">;</span>\r\n\r\n    labels<span class="token punctuation">:</span> string<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>\r\n        <span class="token string">\'.doc\'</span><span class="token punctuation">,</span> <span class="token string">\'.ppt\'</span><span class="token punctuation">,</span> <span class="token string">\'.pdf\'</span><span class="token punctuation">,</span> <span class="token string">\'.xls\'</span><span class="token punctuation">,</span> <span class="token string">\'.html\'</span><span class="token punctuation">,</span> <span class="token string">\'.txt\'</span><span class="token punctuation">,</span>\r\n        <span class="token string">\'.png\'</span><span class="token punctuation">,</span> <span class="token string">\'.bmp\'</span><span class="token punctuation">,</span> <span class="token string">\'.gif\'</span><span class="token punctuation">,</span> <span class="token string">\'.svg\'</span><span class="token punctuation">,</span> <span class="token string">\'.ttf\'</span><span class="token punctuation">,</span> <span class="token string">\'.wav\'</span>\r\n    <span class="token punctuation">]</span><span class="token punctuation">;</span>\r\n    data<span class="token punctuation">:</span> number<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">34</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">,</span> <span class="token number">34</span><span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">,</span> <span class="token number">44</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">27</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">48</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\r\n\r\n    page<span class="token punctuation">:</span> number <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>\r\n    pageSize<span class="token punctuation">:</span> number <span class="token operator">=</span> <span class="token number">4</span><span class="token punctuation">;</span>\r\n\r\n    <span class="token function">constructor</span><span class="token punctuation">(</span>colorService<span class="token punctuation">:</span> ColorService<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>barChartLabels <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getPageLabels</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>barChartData <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\r\n            data<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getPageData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\r\n            borderWidth<span class="token punctuation">:</span> <span class="token number">1</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\r\n\r\n        <span class="token comment" spellcheck="true">// Prepare colors used in chart</span>\r\n        <span class="token keyword">let</span> gridColor <span class="token operator">=</span> colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'grey6\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n        <span class="token keyword">let</span> barBackgroundColor <span class="token operator">=</span> colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'chart1\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setAlpha</span><span class="token punctuation">(</span><span class="token number">0.1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toRgba</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n        <span class="token keyword">let</span> barHoverBackgroundColor <span class="token operator">=</span> colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'chart1\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">setAlpha</span><span class="token punctuation">(</span><span class="token number">0.2</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toRgba</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n        <span class="token keyword">let</span> barBorderColor <span class="token operator">=</span> colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'chart1\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n        <span class="token keyword">let</span> tooltipBackgroundColor <span class="token operator">=</span> colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'grey2\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>barChartOptions <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n            maintainAspectRatio<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n            responsive<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n            animation<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n            scales<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                xAxes<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\r\n                    barPercentage<span class="token punctuation">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>\r\n                    categoryPercentage<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\r\n                    gridLines<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        color<span class="token punctuation">:</span> <span class="token string">\'transparent\'</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                yAxes<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\r\n                    gridLines<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        color<span class="token punctuation">:</span> gridColor\r\n                    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                    ticks<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        min<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\r\n                        max<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">,</span>\r\n                        stepSize<span class="token punctuation">:</span> <span class="token number">10</span>\r\n                    <span class="token punctuation">}</span> <span class="token keyword">as</span> Chart<span class="token punctuation">.</span>LinearTickOptions\r\n                <span class="token punctuation">}</span><span class="token punctuation">]</span>\r\n            <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n            tooltips<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                backgroundColor<span class="token punctuation">:</span> tooltipBackgroundColor<span class="token punctuation">,</span>\r\n                cornerRadius<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\r\n                callbacks<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    title<span class="token punctuation">:</span> <span class="token punctuation">(</span>item<span class="token punctuation">:</span> Chart<span class="token punctuation">.</span>ChartTooltipItem<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\r\n                        <span class="token keyword">return</span><span class="token punctuation">;</span>\r\n                    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                    label<span class="token punctuation">:</span> <span class="token punctuation">(</span>item<span class="token punctuation">:</span> Chart<span class="token punctuation">.</span>ChartTooltipItem<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\r\n                        <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`x: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>xLabel<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, y: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token punctuation">.</span>yLabel<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                displayColors<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n            <span class="token punctuation">}</span> <span class="token keyword">as</span> any\r\n        <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>barChartColors <span class="token operator">=</span> <span class="token punctuation">[</span>\r\n            <span class="token punctuation">{</span>\r\n                backgroundColor<span class="token punctuation">:</span> barBackgroundColor<span class="token punctuation">,</span>\r\n                hoverBackgroundColor<span class="token punctuation">:</span> barHoverBackgroundColor<span class="token punctuation">,</span>\r\n                borderColor<span class="token punctuation">:</span> barBorderColor\r\n            <span class="token punctuation">}</span>\r\n        <span class="token punctuation">]</span><span class="token punctuation">;</span>\r\n\r\n    <span class="token punctuation">}</span>\r\n\r\n    <span class="token function">getPageData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> number<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">{</span>\r\n        <span class="token keyword">let</span> startIdx <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page <span class="token operator">*</span> <span class="token keyword">this</span><span class="token punctuation">.</span>pageSize<span class="token punctuation">;</span>\r\n        <span class="token keyword">let</span> endIdx <span class="token operator">=</span> startIdx <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>pageSize<span class="token punctuation">;</span>\r\n\r\n        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>startIdx<span class="token punctuation">,</span> endIdx<span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n    <span class="token punctuation">}</span>\r\n\r\n    <span class="token function">getPageLabels</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> string<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">{</span>\r\n        <span class="token keyword">let</span> startIdx <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page <span class="token operator">*</span> <span class="token keyword">this</span><span class="token punctuation">.</span>pageSize<span class="token punctuation">;</span>\r\n        <span class="token keyword">let</span> endIdx <span class="token operator">=</span> startIdx <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>pageSize<span class="token punctuation">;</span>\r\n\r\n        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>labels<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span>startIdx<span class="token punctuation">,</span> endIdx<span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n    <span class="token punctuation">}</span>\r\n\r\n    <span class="token function">goToPreviousPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span>\r\n\r\n        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">hasPreviousPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n            <span class="token keyword">this</span><span class="token punctuation">.</span>page <span class="token operator">-=</span> <span class="token number">1</span><span class="token punctuation">;</span>\r\n\r\n            <span class="token comment" spellcheck="true">// get the data and labels for the new page</span>\r\n            <span class="token keyword">this</span><span class="token punctuation">.</span>barChartLabels <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getPageLabels</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n            <span class="token keyword">this</span><span class="token punctuation">.</span>barChartData<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>data <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getPageData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n        <span class="token punctuation">}</span>\r\n\r\n    <span class="token punctuation">}</span>\r\n\r\n    <span class="token function">goToNextPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">void</span> <span class="token punctuation">{</span>\r\n\r\n        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">hasNextPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n            <span class="token keyword">this</span><span class="token punctuation">.</span>page <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">;</span>\r\n\r\n            <span class="token comment" spellcheck="true">// get the data and labels for the new page</span>\r\n            <span class="token keyword">this</span><span class="token punctuation">.</span>barChartLabels <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getPageLabels</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n            <span class="token keyword">this</span><span class="token punctuation">.</span>barChartData<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>data <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getPageData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n        <span class="token punctuation">}</span>\r\n\r\n    <span class="token punctuation">}</span>\r\n\r\n    <span class="token function">hasNextPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> boolean <span class="token punctuation">{</span>\r\n        <span class="token comment" spellcheck="true">// get the index of the next page</span>\r\n        <span class="token keyword">let</span> nextPageIndex <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>page <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token keyword">this</span><span class="token punctuation">.</span>pageSize<span class="token punctuation">;</span>\r\n\r\n        <span class="token comment" spellcheck="true">// check if this index is out of bounds</span>\r\n        <span class="token keyword">return</span> nextPageIndex <span class="token operator">&lt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>length<span class="token punctuation">;</span>\r\n    <span class="token punctuation">}</span>\r\n\r\n    <span class="token function">hasPreviousPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> boolean <span class="token punctuation">{</span>\r\n        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">;</span>\r\n    <span class="token punctuation">}</span>\r\n\r\n<span class="token punctuation">}</span>',example:"import { Component } from '@angular/core';\r\nimport { ColorService } from 'ux-aspects';\r\nimport { BaseChartDirective } from 'ng2-charts';\r\nimport { Chart } from 'chart.js';\r\n\r\n@Component({\r\n    selector: 'app',\r\n    templateUrl: './src/app.component.html',\r\n    styleUrls: ['./src/app.component.css']\r\n})\r\nexport class AppComponent {\r\n\r\n    // configure the directive data\r\n    barChartData: Chart.ChartData;\r\n\r\n    barChartLabels: string[];\r\n    barChartOptions: Chart.ChartOptions;\r\n    barChartLegend: boolean = false;\r\n    barChartColors: any;\r\n\r\n    labels: string[] = [\r\n        '.doc', '.ppt', '.pdf', '.xls', '.html', '.txt',\r\n        '.png', '.bmp', '.gif', '.svg', '.ttf', '.wav'\r\n    ];\r\n    data: number[] = [34, 25, 19, 34, 32, 44, 12, 27, 15, 48, 40, 36];\r\n\r\n    page: number = 0;\r\n    pageSize: number = 4;\r\n\r\n    constructor(colorService: ColorService) {\r\n\r\n        this.barChartLabels = this.getPageLabels();\r\n\r\n        this.barChartData = [{\r\n            data: this.getPageData(),\r\n            borderWidth: 1\r\n        }];\r\n\r\n        // Prepare colors used in chart\r\n        let gridColor = colorService.getColor('grey6').toHex();\r\n        let barBackgroundColor = colorService.getColor('chart1').setAlpha(0.1).toRgba();\r\n        let barHoverBackgroundColor = colorService.getColor('chart1').setAlpha(0.2).toRgba();\r\n        let barBorderColor = colorService.getColor('chart1').toHex();\r\n        let tooltipBackgroundColor = colorService.getColor('grey2').toHex();\r\n\r\n        this.barChartOptions = {\r\n            maintainAspectRatio: false,\r\n            responsive: true,\r\n            animation: false,\r\n            scales: {\r\n                xAxes: [{\r\n                    barPercentage: 0.5,\r\n                    categoryPercentage: 1,\r\n                    gridLines: {\r\n                        color: 'transparent'\r\n                    }\r\n                }],\r\n                yAxes: [{\r\n                    gridLines: {\r\n                        color: gridColor\r\n                    },\r\n                    ticks: {\r\n                        min: 0,\r\n                        max: 50,\r\n                        stepSize: 10\r\n                    } as Chart.LinearTickOptions\r\n                }]\r\n            },\r\n            tooltips: {\r\n                backgroundColor: tooltipBackgroundColor,\r\n                cornerRadius: 0,\r\n                callbacks: {\r\n                    title: (item: Chart.ChartTooltipItem[]) => {\r\n                        return;\r\n                    },\r\n                    label: (item: Chart.ChartTooltipItem) => {\r\n                        return `x: ${item.xLabel}, y: ${item.yLabel}`;\r\n                    }\r\n                },\r\n                displayColors: false\r\n            } as any\r\n        };\r\n\r\n        this.barChartColors = [\r\n            {\r\n                backgroundColor: barBackgroundColor,\r\n                hoverBackgroundColor: barHoverBackgroundColor,\r\n                borderColor: barBorderColor\r\n            }\r\n        ];\r\n\r\n    }\r\n\r\n    getPageData(): number[] {\r\n        let startIdx = this.page * this.pageSize;\r\n        let endIdx = startIdx + this.pageSize;\r\n\r\n        return this.data.slice(startIdx, endIdx);\r\n    }\r\n\r\n    getPageLabels(): string[] {\r\n        let startIdx = this.page * this.pageSize;\r\n        let endIdx = startIdx + this.pageSize;\r\n\r\n        return this.labels.slice(startIdx, endIdx);\r\n    }\r\n\r\n    goToPreviousPage(): void {\r\n\r\n        if (this.hasPreviousPage()) {\r\n            this.page -= 1;\r\n\r\n            // get the data and labels for the new page\r\n            this.barChartLabels = this.getPageLabels();\r\n            this.barChartData[0].data = this.getPageData();\r\n        }\r\n\r\n    }\r\n\r\n    goToNextPage(): void {\r\n\r\n        if (this.hasNextPage()) {\r\n            this.page += 1;\r\n\r\n            // get the data and labels for the new page\r\n            this.barChartLabels = this.getPageLabels();\r\n            this.barChartData[0].data = this.getPageData();\r\n        }\r\n\r\n    }\r\n\r\n    hasNextPage(): boolean {\r\n        // get the index of the next page\r\n        let nextPageIndex = (this.page + 1) * this.pageSize;\r\n\r\n        // check if this index is out of bounds\r\n        return nextPageIndex < this.data.length;\r\n    }\r\n\r\n    hasPreviousPage(): boolean {\r\n        return this.page > 0;\r\n    }\r\n\r\n}"}},3757:function(n,a){n.exports='<div class="demo-chart-container">\r\n\r\n    <div class="chart-scroll-previous-btn" *ngIf="hasPreviousPage()" (click)="goToPreviousPage()">\r\n        <i class="hpe-icon hpe-previous"></i>\r\n    </div>\r\n\r\n    <canvas baseChart \r\n            [datasets]="barChartData"\r\n            [labels]="barChartLabels"\r\n            [options]="barChartOptions"\r\n            [legend]="barChartLegend"\r\n            [colors]="barChartColors"\r\n            chartType="bar">\r\n    </canvas>\r\n\r\n    <div class="chart-scroll-next-btn" *ngIf="hasNextPage()" (click)="goToNextPage()">\r\n        <i class="hpe-icon hpe-next"></i>        \r\n    </div>\r\n\r\n</div>\r\n\r\n<hr>\r\n\r\n<p>\r\n    Scrollable Charts can be added using the <code>ng2-charts</code> library. \r\n    The <code>chart.js</code> library needs to be imported and the <code>ChartsModule</code> needs to be added to the appropriate NgModule.\r\n</p>\r\n\r\n<br>\r\n\r\n<p>The <code>baseChart</code> directive should be added to a <code>canvas</code> element and the following attributes can be used to customize the chart behavior and appearance:</p>\r\n\r\n\r\n<table class="table">\r\n\r\n    <thead>\r\n        <tr>\r\n            <th>Name</th>\r\n            <th>Type</th>\r\n            <th>Description</th>\r\n        </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n\r\n        <tr>\r\n            <td><b>@Input</b> datasets</td>\r\n            <td><b>object[]</b></td>\r\n            <td>Contains the data and properties for each data set to be displayed in the chart.</td>\r\n        </tr>\r\n\r\n        <tr>\r\n            <td><b>@Input</b> chartType</td>\r\n            <td><b>string</b></td>\r\n            <td>Indicates the type of the chart. Possible options are: <code>line</code>, <code>bar</code>, <code>radar</code>, <code>pie</code>, <code>polarArea</code>, <code>doughnut</code></td>\r\n        </tr>\r\n\r\n        <tr>\r\n            <td><b>@Input</b> options</td>\r\n            <td><b>ChartOptions</b></td>\r\n            <td>Configures the appearance and behavior of all aspects of the chart.</td>\r\n        </tr>\r\n\r\n        <tr>\r\n            <td><b>@Input</b> colors</td>\r\n            <td><b>object[]</b></td>\r\n            <td>Configure the color values to be used within the chart.</td>\r\n        </tr>\r\n\r\n        <tr>\r\n            <td><b>@Input</b> legend</td>\r\n            <td><b>boolean</b></td>\r\n            <td>Determines whether or not the legend should be displayed.</td>\r\n        </tr>\r\n\r\n        <tr>\r\n            <td><b>@Output</b> chartClick</td>\r\n            <td></td>\r\n            <td>Fires when click on a chart has occurred, returns information regarding active points and labels</td>\r\n        </tr>\r\n\r\n        <tr>\r\n            <td><b>@Output</b> chartHover</td>\r\n            <td></td>\r\n            <td>Fires when mousemove (hover) on a chart has occurred, returns information regarding active points and labels.</td>\r\n        </tr>\r\n\r\n    </tbody>\r\n</table>\r\n\r\n<p>Complete documentation on the directive and chart options can be found at the documentation links below.</p>\r\n\r\n<p>The following code can be used to create the example above: </p>\r\n\r\n<tabset>\r\n\r\n    <tab heading="HTML">\r\n        <uxd-snippet language="html" [content]="snippets.compiled.scrollableChartHtml"></uxd-snippet>\r\n    </tab>\r\n    \r\n    <tab heading="TypeScript">\r\n        <uxd-snippet language="javascript" [content]="snippets.compiled.scrollableChartTs"></uxd-snippet>\r\n    </tab>\r\n    \r\n    <tab heading="CSS">\r\n        <uxd-snippet language="css" [content]="snippets.compiled.scrollableChartCss"></uxd-snippet>\r\n    </tab>\r\n\r\n</tabset>\r\n\r\n<br>\r\n\r\n<p>\r\n    The effect of scrolling on a chart can be achieved by simply displaying only a subset of the dataset at a time. \r\n    We can add \'previous\' and \'next\' buttons to allow easy navigation between the different pages of data.\r\n</p>\r\n\r\n<p>\r\n    In the example above, we store the entire dataset in an array. We also store an array containing all the labels for each data point. \r\n    By defining several variables (<code>pageSize</code> &amp; <code>pageNumber</code>) we can easily control the datasets shown.\r\n</p>\r\n\r\n<p>\r\n    We then add several functions:\r\n</p>\r\n\r\n<ul>\r\n    <li><code>getPageData</code> - this returns a subset of the complete dataset based on the current page number and page size.</li>\r\n    <li><code>getPageLabels</code> - this returns the labels to be displayed on the x-axis that correspond to the data points shown on the page.</li>\r\n    <li><code>goToPreviousPage</code> - this will decrement the current page number. It will then update the dataset and labels using methods described above.</li>\r\n    <li><code>hasPreviousPage</code> - this will determine whether we are on the first page or not.</li>\r\n    <li><code>hasNextPage</code> - this will determine whether we are on the last page or not.</li>\r\n</ul>\r\n\r\n<blockquote>\r\n\r\n    <p class="m-b-nil">\r\n        <b>Dependencies: </b>\r\n        <a class="hyperlink" href="https://www.npmjs.com/package/ng2-charts">ng2-charts</a>, \r\n        <a class="hyperlink" href="https://www.npmjs.com/package/chart.js">chart.js</a>\r\n    </p>\r\n\r\n    <p class="m-b-nil">\r\n        <b>Type Definitions: </b>\r\n        <a class="hyperlink" href="https://www.npmjs.com/package/@types/chart.js">@types/chart.js</a>\r\n    </p>\r\n\r\n    <p class="m-b-nil">\r\n        <b>Modules: </b>\r\n        <span>ChartsModule</span>\r\n    </p>\r\n\r\n\r\n    <p class="m-b-nil">\r\n        <b>Documentation: </b>\r\n        <a class="hyperlink" href="http://valor-software.com/ng2-charts/">Angular Directive Documentation</a>, \r\n        <a class="hyperlink" href="http://www.chartjs.org/docs/">Chart Library Documentation</a>\r\n    </p>\r\n</blockquote>'},3758:function(n,a,s){var t=s(3759);n.exports="string"==typeof t?t:t.toString()},3759:function(n,a,s){a=n.exports=s(11)(void 0),a.push([n.i,".chart-scroll-previous-btn,\n.chart-scroll-next-btn {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 25px;\n  height: 25px;\n  background-color: #00a7a2;\n  border-radius: 50%;\n  opacity: 0.7;\n  cursor: pointer;\n  transition: opacity 0.3s ease-in-out;\n  top: calc(50% - 22px);\n  color: #fff;\n  font-size: 13px;\n}\n.chart-scroll-previous-btn:hover,\n.chart-scroll-next-btn:hover {\n  opacity: 0.9;\n}\n.chart-scroll-previous-btn {\n  left: 32px;\n  padding-right: 1px;\n}\n.chart-scroll-next-btn {\n  right: 10px;\n  padding-left: 2px;\n}\n",""])}});