%PDF- %PDF-
Direktori : /home/opti/workflow/src/public/app-assets/js/scripts/cards/ |
Current File : /home/opti/workflow/src/public/app-assets/js/scripts/cards/card-statistics.js |
/*========================================================================================= File Name: card-statistics.js Description: intialize advance card statistics ---------------------------------------------------------------------------------------- Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template Version: 1.0 Author: Pixinvent Author URL: hhttp://www.themeforest.net/user/pixinvent ==========================================================================================*/ (function(window, document, $) { 'use strict'; /***************************************************** * Grouped Card Statistics * *****************************************************/ var rtl = false; if($('html').data('textdirection') == 'rtl') rtl = true; $(".knob").knob({ rtl: rtl, draw: function() { var ele = this.$; var style = ele.attr('style'); style = style.replace("bold", "normal"); var fontSize = parseInt(ele.css('font-size'), 10); var updateFontSize = Math.ceil(fontSize * 1.65); style = style.replace("bold", "normal"); style = style + "font-size: " +updateFontSize+"px;"; var icon = ele.attr('data-knob-icon'); ele.hide(); $('<i class="knob-center-icon '+icon+'"></i>').insertAfter(ele).attr('style',style); // "tron" case if (this.$.data('skin') == 'tron') { this.cursorExt = 0.3; var a = this.arc(this.cv), // Arc pa, // Previous arc r = 1; this.g.lineWidth = this.lineWidth; if (this.o.displayPrevious) { pa = this.arc(this.v); this.g.beginPath(); this.g.strokeStyle = this.pColor; this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d); this.g.stroke(); } this.g.beginPath(); this.g.strokeStyle = r ? this.o.fgColor : this.fgColor; this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d); this.g.stroke(); this.g.lineWidth = 2; this.g.beginPath(); this.g.strokeStyle = this.o.fgColor; this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false); this.g.stroke(); return false; } } }); /****************************************** * Total Likes * ******************************************/ Morris.Area({ element: 'morris-likes', data: [{y: '1', a: 14, }, {y: '2', a: 12 }, {y: '3', a: 4 }, {y: '4', a: 9 }, {y: '5', a: 3 }, {y: '6', a: 6 }, {y: '7', a: 11 }, {y: '8', a: 10 }, {y: '9', a: 13 }, {y: '10', a: 9 }, {y: '11', a: 14 },{y: '12', a: 11 }, {y: '13', a: 16 }, {y: '14', a: 20 }, {y: '15', a: 15 }], xkey: 'y', ykeys: ['a'], labels: ['Likes'], axes: false, grid: false, behaveLikeLine: true, ymax: 20, resize: true, pointSize: 0, smooth: true, numLines: 6, lineWidth: 2, fillOpacity: 0.1, lineColors: ['#28D094'], hideHover: true, hoverCallback: function (index, options, content, row) { return ""; } }); /********************************************* * Total Comments * *********************************************/ Morris.Area({ element: 'morris-comments', data: [{y: '1', a: 15, }, {y: '2', a: 20 }, {y: '3', a: 16 }, {y: '4', a: 11 }, {y: '5', a: 14 }, {y: '6', a: 9 }, {y: '7', a: 13 }, {y: '8', a: 10 }, {y: '9', a: 11 }, {y: '10', a: 6 }, {y: '11', a: 3 },{y: '12', a: 9 }, {y: '13', a: 4 }, {y: '14', a: 12 }, {y: '15', a: 14 }], xkey: 'y', ykeys: ['a'], labels: ['Comments'], axes: false, grid: false, behaveLikeLine: true, ymax: 20, resize: true, pointSize: 0, smooth: true, numLines: 6, lineWidth: 2, fillOpacity: 0.1, lineColors: ['#FF7D4D'], hideHover: true, hoverCallback: function (index, options, content, row) { return ""; } }); /****************************************** * Total Views * ******************************************/ Morris.Area({ element: 'morris-views', data: [{y: '1', a: 14, }, {y: '2', a: 12 }, {y: '3', a: 4 }, {y: '4', a: 9 }, {y: '5', a: 3 }, {y: '6', a: 6 }, {y: '7', a: 11 }, {y: '8', a: 10 }, {y: '9', a: 13 }, {y: '10', a: 9 }, {y: '11', a: 14 },{y: '12', a: 11 }, {y: '13', a: 16 }, {y: '14', a: 20 }, {y: '15', a: 15 }], xkey: 'y', ykeys: ['a'], labels: ['Views'], axes: false, grid: false, behaveLikeLine: true, ymax: 20, resize: true, pointSize: 0, smooth: true, numLines: 6, lineWidth: 2, fillOpacity: 0.1, lineColors: ['#FF4558'], hideHover: true, hoverCallback: function (index, options, content, row) { return ""; } }); /************************************************ * Sparkline Charts * ************************************************/ var sparkLineDraw = function() { /****************** * Line Charts * ******************/ // Total Cost $("#sp-line-total-cost").sparkline([14,12,4,9,3,6,11,10,13,9,14,11,16,20,15], { type: 'line', width: '100%', height: '100px', lineColor: '#FF9149', fillColor: '#FF9149', spotColor: '', minSpotColor: '', maxSpotColor: '', highlightSpotColor: '', highlightLineColor: '', chartRangeMin: 0, chartRangeMax: 20, }); // Total Sales $("#sp-line-total-sales").sparkline([14,12,4,9,3,6,11,10,13,9,14,11,16,20,15], { type: 'line', width: '100%', height: '100px', lineColor: '#28D094', fillColor: '#28D094', spotColor: '', minSpotColor: '', maxSpotColor: '', highlightSpotColor: '', highlightLineColor: '', chartRangeMin: 0, chartRangeMax: 20, }); // Total Revenue $("#sp-line-total-revenue").sparkline([14,12,4,9,3,6,11,10,13,9,14,11,16,20,15], { type: 'line', width: '100%', height: '100px', lineColor: '#FF4961', fillColor: '#FF4961', spotColor: '', minSpotColor: '', maxSpotColor: '', highlightSpotColor: '', highlightLineColor: '', chartRangeMin: 0, chartRangeMax: 20, }); /***************** * Bar Charts * *****************/ $("#sp-bar-total-cost").sparkline([5,6,7,8,9,10,12,13,15,14,13,12,10,9,8,10,12,14,15,16,17,14,12,11,10,8], { type: 'bar', width: '100%', height: '30px', barWidth: 2, barSpacing: 4, barColor: '#FF9149' }); $("#sp-bar-total-sales").sparkline([5,6,7,8,9,10,12,13,15,14,13,12,10,9,8,10,12,14,15,16,17,14,12,11,10,8], { type: 'bar', width: '100%', height: '30px', barWidth: 2, barSpacing: 4, barColor: '#28D094' }); $("#sp-bar-total-revenue").sparkline([5,6,7,8,9,10,12,13,15,14,13,12,10,9,8,10,12,14,15,16,17,14,12,11,10,8], { type: 'bar', width: '100%', height: '30px', barWidth: 2, barSpacing: 4, barColor: '#FF4961' }); /************************* * Stacked Bar Charts * *************************/ $("#sp-stacked-bar-total-cost").sparkline([ [8,10], [12,8], [9,14], [8,11], [10,13], [7,11], [8,14], [9,12], [10,11], [12,14], [8,12], [9,12], [9,14] ], { type: 'bar', width: '100%', height: '30px', barWidth: 4, barSpacing: 6, stackedBarColor: ['#4CAF50', '#FFEB3B'] }); $("#sp-stacked-bar-total-sales").sparkline([ [8,10], [12,8], [9,14], [8,11], [10,13], [7,11], [8,14], [9,12], [10,11], [12,14], [8,12], [9,12], [9,14] ], { type: 'bar', width: '100%', height: '30px', barWidth: 4, barSpacing: 6, stackedBarColor: ['#FF5722', '#009688'] }); $("#sp-stacked-bar-total-revenue").sparkline([ [8,10], [12,8], [9,14], [8,11], [10,13], [7,11], [8,14], [9,12], [10,11], [12,14], [8,12], [9,12], [9,14] ], { type: 'bar', width: '100%', height: '30px', barWidth: 4, barSpacing: 6, stackedBarColor: ['#E91E63', '#00BCD4'] }); /********************** * Tristate Charts * **********************/ $("#sp-tristate-bar-total-cost").sparkline([1,1,0,1,-1,-1,1,-1,0,0,1,1,0,-1,1,-1], { type: 'tristate', height: '30', posBarColor: '#ffeb3b', negBarColor: '#4caf50', barWidth: 4, barSpacing: 5, zeroAxis: false }); $("#sp-tristate-bar-total-sales").sparkline([1,1,0,1,-1,-1,1,-1,0,0,1,1,0,-1,1,-1], { type: 'tristate', height: '30', posBarColor: '#009688', negBarColor: '#FF5722', barWidth: 4, barSpacing: 5, zeroAxis: false }); $("#sp-tristate-bar-total-revenue").sparkline([1,1,0,1,-1,-1,1,-1,0,0,1,1,0,-1,1,-1], { type: 'tristate', height: '30', posBarColor: '#00BCD4', negBarColor: '#E91E63', barWidth: 4, barSpacing: 5, zeroAxis: false }); // Total Revenue $("#sp-line-total-profit").sparkline([14,12,4,9,3,6,11,10,13,9,14,11,16,20,15], { type: 'line', width: '100%', height: '50px', lineColor: '#E91E63', fillColor: '', spotColor: '', minSpotColor: '', maxSpotColor: '', highlightSpotColor: '', highlightLineColor: '', chartRangeMin: 0, chartRangeMax: 20, }); }; var sparkResize; $(window).resize(function(e) { clearTimeout(sparkResize); sparkResize = setTimeout(sparkLineDraw, 500); }); sparkLineDraw(); })(window, document, jQuery);