ad_login/wwwroot/assets/javascript/pages/chartjs-line-demo.min.js

"use strict";function _classCallCheck(a,o){if(!(a instanceof o))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,o){for(var t=0;t<o.length;t++){var r=o[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(a,r.key,r)}}function _createClass(a,o,t){return o&&_defineProperties(a.prototype,o),t&&_defineProperties(a,t),a}var ChartjsLineDemo=function(){function a(){_classCallCheck(this,a),this.init()}return _createClass(a,[{key:"init",value:function(){this.lineChart(),this.stackedArea(),this.lineStyles(),this.lineStepped(),this.lineSkipPoint(),this.lineDifferentPointSizes(),this.lineMultiAxis(),this.lineInterpolation()}},{key:"colorBrandNames",value:function(){return Object.keys(Looper.getColors("brand"))}},{key:"randomScalingFactor",value:function(){return(.5<Math.random()?1:-1)*Math.round(100*Math.random())}},{key:"months",value:function(){return["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]}},{key:"lineChart",value:function(){var t=this,r={type:"line",data:{labels:["Jan","Feb","Mar","Apr","May","Jun","Jul"],datasets:[{label:"Data 1",backgroundColor:Looper.colors.brand.purple,borderColor:Looper.colors.brand.purple,data:[this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor()],fill:!1},{label:"Data 2",fill:!1,backgroundColor:Looper.colors.brand.teal,borderColor:Looper.colors.brand.teal,data:[this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor()]}]},options:{title:{display:!0,text:"Line Chart"},tooltips:{mode:"index",intersect:!1},hover:{mode:"nearest",intersect:!0},scales:{xAxes:[{ticks:{maxRotation:0,maxTicksLimit:5}}]}}},a=$("#canvas-line")[0].getContext("2d"),n=new Chart(a,r);$("#randomizeData").on("click",function(a){a.preventDefault(),r.data.datasets.forEach(function(a){a.data=a.data.map(function(){return t.randomScalingFactor()})}),n.update()}),$("#addData").on("click",function(a){if(a.preventDefault(),0<r.data.datasets.length){var o=t.months()[r.data.labels.length%t.months().length];r.data.labels.push(o),r.data.datasets.forEach(function(a){a.data.push(t.randomScalingFactor())}),n.update()}}),$("#removeData").on("click",function(a){a.preventDefault(),r.data.labels.splice(-1,1),r.data.datasets.forEach(function(a,o){a.data.pop()}),n.update()})}},{key:"stackedArea",value:function(){var i=this,l={type:"line",data:{labels:["Jan","Feb","Mar","Apr","May","Jun","Jul"],datasets:[{label:"Data 1",borderColor:Looper.colors.brand.purple,backgroundColor:Looper.colors.brand.purple,data:[this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor()]},{label:"Data 2",borderColor:Looper.colors.brand.teal,backgroundColor:Looper.colors.brand.teal,data:[this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor()]}]},options:{title:{display:!0,text:"Stacked Area"},tooltips:{mode:"index",position:"nearest"},hover:{mode:"index"},scales:{yAxes:[{stacked:!0}]}}},a=$("#canvas-stacked-area")[0].getContext("2d"),c=new Chart(a,l);$("#randomizeDataStackedArea").on("click",function(a){a.preventDefault(),l.data.datasets.forEach(function(a){a.data=a.data.map(function(){return i.randomScalingFactor()})}),c.update()}),$("#addDatasetStackedArea").on("click",function(a){if(a.preventDefault(),l.data.datasets.length<=8){for(var o=i.colorBrandNames(),t=o[l.data.datasets.length%o.length],r=Looper.getColors("brand")[t],n={label:"Dataset "+l.data.datasets.length,borderColor:r,backgroundColor:r,data:[]},e=0;e<l.data.labels.length;++e)n.data.push(i.randomScalingFactor());l.data.datasets.push(n),c.update()}}),$("#removeDatasetStackedArea").on("click",function(a){a.preventDefault(),l.data.datasets.splice(0,1),c.update()})}},{key:"lineStyles",value:function(){var a={type:"line",data:{labels:["Jan","Feb","Mar","Apr","May","Jun","Jul"],datasets:[{label:"Unfilled",fill:!1,backgroundColor:Looper.colors.brand.blue,borderColor:Looper.colors.brand.blue,data:[this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor()]},{label:"Dashed",fill:!1,backgroundColor:Looper.colors.brand.teal,borderColor:Looper.colors.brand.teal,borderDash:[5,5],data:[this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor()]},{label:"Filled",backgroundColor:Looper.colors.brand.purple,borderColor:Looper.colors.brand.purple,data:[this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor()],fill:!0}]},options:{title:{display:!0,text:"Line Styles"},tooltips:{mode:"index",intersect:!1},hover:{mode:"nearest",intersect:!0}}},o=$("#canvas-styles")[0].getContext("2d");new Chart(o,a)}},{key:"lineStepped",value:function(){var a={type:"line",data:{labels:["Jan","Feb","Mar","Apr","May","Jun","Jul"],datasets:[{label:"My First dataset",borderColor:Looper.colors.brand.purple,backgroundColor:Looper.colors.brand.purple,data:[this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor()],fill:!1,steppedLine:!0},{label:"My Second dataset",steppedLine:!0,borderColor:Looper.colors.brand.teal,backgroundColor:Looper.colors.brand.teal,data:[this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor()],fill:!1}]},options:{title:{display:!0,text:"Line Stepped"},tooltips:{mode:"index"}}},o=$("#canvas-stepped")[0].getContext("2d");new Chart(o,a)}},{key:"lineSkipPoint",value:function(){var a={type:"line",data:{labels:["Jan","Feb","Mar","Apr","May","Jun","Jul"],datasets:[{label:"My First dataset",borderColor:Looper.colors.brand.purple,fill:!1,data:[this.randomScalingFactor(),this.randomScalingFactor(),NaN,this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor()]},{label:"My Second dataset",borderColor:Looper.colors.brand.teal,fill:!1,data:[NaN,this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),NaN]}]},options:{title:{display:!0,text:"Skip Points"},tooltips:{mode:"index"},hover:{mode:"index"}}},o=$("#canvas-skip-points")[0].getContext("2d");new Chart(o,a)}},{key:"lineDifferentPointSizes",value:function(){var a={type:"line",data:{labels:["Jan","Feb","Mar","Apr","May","Jun","Jul"],datasets:[{label:"dataset - big points",data:[this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor()],backgroundColor:Looper.colors.brand.purple,borderColor:Looper.colors.brand.purple,fill:!1,borderDash:[5,5],pointRadius:15,pointHoverRadius:10},{label:"dataset - individual point sizes",data:[this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor()],backgroundColor:Looper.colors.brand.teal,borderColor:Looper.colors.brand.teal,fill:!1,borderDash:[5,5],pointRadius:[2,4,6,18,0,12,20]},{label:"dataset - large pointHoverRadius",data:[this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor()],backgroundColor:Looper.colors.brand.blue,borderColor:Looper.colors.brand.blue,fill:!1,pointHoverRadius:30}]},options:{hover:{mode:"index"},title:{display:!0,text:"Different point sizes"}}},o=$("#canvas-different-point-sizes")[0].getContext("2d");new Chart(o,a)}},{key:"lineMultiAxis",value:function(){var a={labels:["Jan","Feb","Mar","Apr","May","Jun","Jul"],datasets:[{label:"My First dataset",borderColor:Looper.colors.brand.purple,backgroundColor:Looper.colors.brand.purple,fill:!1,data:[this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor()],yAxisID:"y-axis-1"},{label:"My Second dataset",borderColor:Looper.colors.brand.teal,backgroundColor:Looper.colors.brand.teal,fill:!1,data:[this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor(),this.randomScalingFactor()],yAxisID:"y-axis-2"}]},o=$("#canvas-multi-axis")[0].getContext("2d");Chart.Line(o,{data:a,options:{hoverMode:"index",stacked:!1,title:{display:!0,text:"Multi Axis"},scales:{yAxes:[{type:"linear",display:!0,position:"left",id:"y-axis-1"},{type:"linear",display:!0,position:"right",id:"y-axis-2",gridLines:{drawOnChartArea:!1}}]}}})}},{key:"lineInterpolation",value:function(){var a=[0,20,20,60,60,120,NaN,180,120,125,105,110,170],o={type:"line",data:{labels:["0","1","2","3","4","5","6","7","8","9","10","11","12"],datasets:[{label:"Monotone",data:a,borderColor:Looper.colors.brand.purple,backgroundColor:Looper.colors.brand.purple,fill:!1,cubicInterpolationMode:"monotone"},{label:"Default",data:a,borderColor:Looper.colors.brand.blue,backgroundColor:Looper.colors.brand.blue,fill:!1},{label:"Linear",data:a,borderColor:Looper.colors.brand.teal,backgroundColor:Looper.colors.brand.teal,fill:!1,lineTension:0}]},options:{legend:{position:"bottom"},title:{display:!0,text:"Cubic interpolation mode"},tooltips:{mode:"index"},scales:{yAxes:[{ticks:{suggestedMin:-10,suggestedMax:200}}]}}},t=$("#canvas-interpolation-modes")[0].getContext("2d");new Chart(t,o)}}]),a}();$(document).on("theme:init",function(){new ChartjsLineDemo});
//# sourceMappingURL=../../sourcemaps/pages/chartjs-line-demo.min.js.map