Mercurial Mercurial > pyams > pyams_skin / comparison
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
src/pyams_skin/resources/js/myams-graphs.js
changeset 486 48b7cea0d903
parent 118 391ad752903e
child 489 63ea9a94bd47
equal deleted inserted replaced
485:bd3550a252ea 486:48b7cea0d903 
     5  */
 
     5  */
 
     6 (function($, globals) {
 
     6 (function($, globals) {
 
     7 
     7 
     8 	'use strict';
 
     8 	'use strict';
 
     9 
     9 
    10 	var MyAMS = globals.MyAMS;
 
    10 	var ams = globals.MyAMS;
 
    11 
    11 
    12 	MyAMS.graphs = {
 
    12 	ams.graphs = {
 
    13 
    13 
    14 		init: function(graphs) {
 
    14 		init: function(graphs) {
 
    15 			MyAMS.ajax.check($.fn.sparkline,
 
    15 			ams.ajax.check($.fn.sparkline,
 
    16 							   MyAMS.baseURL + 'ext/jquery-sparkline-2.1.1.min.js',
 
    16 						   MyAMS.baseURL + 'ext/jquery-sparkline-2.1.1.min.js',
 
    17 							   function() {
 
    17 						   function() {
 
    18 									graphs.each(function() {
 
    18 								graphs.each(function() {
 
    19 										var graph = $(this);
 
    19 									var graph = $(this);
 
    20 										var graph_data = graph.data();
 
    20 									var graph_data = graph.data();
 
    21 										var sparklineType = graph_data.sparklineType || 'bar';
 
    21 									var sparklineType = graph_data.sparklineType || 'bar';
 
    22 										switch (sparklineType) {
 
    22 									switch (sparklineType) {
 
    23 											case 'bar':
 
    23 										case 'bar':
 
    24 												graph.sparkline('html', {
 
    24 											graph.sparkline('html', {
 
    25 													type: 'bar',
 
    25 												type: 'bar',
 
    26 													barColor: graph_data.sparklineBarColor || graph.css('color') || '#0000f0',
 
    26 												barColor: graph_data.sparklineBarColor || graph.css('color') || '#0000f0',
 
    27 													height: graph_data.sparklineHeight || '26px',
 
    27 												height: graph_data.sparklineHeight || '26px',
 
    28 													barWidth: graph_data.sparklineBarwidth || 5,
 
    28 												barWidth: graph_data.sparklineBarwidth || 5,
 
    29 													barSpacing: graph_data.sparklineBarspacing || 2,
 
    29 												barSpacing: graph_data.sparklineBarspacing || 2,
 
    30 													stackedBarColor: graph.data.sparklineBarstackedColor || ["#A90329", "#0099c6", "#98AA56", "#da532c", "#4490B1", "#6E9461", "#990099", "#B4CAD3"],
 
    30 												stackedBarColor: graph.data.sparklineBarstackedColor || ["#A90329", "#0099c6", "#98AA56", "#da532c", "#4490B1", "#6E9461", "#990099", "#B4CAD3"],
 
    31 													negBarColor: graph.data.sparklineNegbarColor || '#A90329',
 
    31 												negBarColor: graph.data.sparklineNegbarColor || '#A90329',
 
    32 													zeroAxis: 'false'
 
    32 												zeroAxis: 'false'
 
    33 												});
 
    33 											});
 
    34 												break;
 
    34 											break;
 
    35 
    35 
    36 											case 'line':
 
    36 									/var/local/src/pyams/pyams_skin/src/pyams_skin/resources/js	case 'line':
 
    37 												graph.sparkline('html', {
 
    37 											graph.sparkline('html', {
 
    38 													type: 'line',
 
    38 												type: 'line',
 
    39 													width: graph_data.sparklineWidth || '90px',
 
    39 												width: graph_data.sparklineWidth || '90px',
 
    40 													height: graph_data.sparklineHeight || '20px',
 
    40 												height: graph_data.sparklineHeight || '20px',
 
    41 													lineWidth: graph_data.sparklineLineWidth || 1,
 
    41 												lineWidth: graph_data.sparklineLineWidth || 1,
 
    42 													lineColor: graph_data.sparklineLineColor || graph.css('color') || '#0000f0',
 
    42 												lineColor: graph_data.sparklineLineColor || graph.css('color') || '#0000f0',
 
    43 													fillColor: graph_data.fillColor || '#c0d0f0',
 
    43 												fillColor: graph_data.fillColor || '#c0d0f0',
 
    44 													spotColor: graph_data.sparklineSpotColor || '#f08000',
 
    44 												spotColor: graph_data.sparklineSpotColor || '#f08000',
 
    45 													minSpotColor: graph_data.sparklineMinspotColor || '#ed1c24',
 
    45 												minSpotColor: graph_data.sparklineMinspotColor || '#ed1c24',
 
    46 													maxSpotColor: graph_data.sparklineMaxspotColor || '#f08000',
 
    46 												maxSpotColor: graph_data.sparklineMaxspotColor || '#f08000',
 
    47 													highlightSpotColor: graph_data.sparklineHighlightspotColor || '#50f050',
 
    47 												highlightSpotColor: graph_data.sparklineHighlightspotColor || '#50f050',
 
    48 													highlightLineColor: graph_data.sparklineHighlightlineColor || 'f02020',
 
    48 												highlightLineColor: graph_data.sparklineHighlightlineColor || 'f02020',
 
    49 													spotRadius: graph_data.sparklineSpotradius || 1.5,
 
    49 												spotRadius: graph_data.sparklineSpotradius || 1.5,
 
    50 													chartRangeMin: graph_data.sparklineMinY || 'undefined',
 
    50 												chartRangeMin: graph_data.sparklineMinY || 'undefined',
 
    51 													chartRangeMax: graph_data.sparklineMaxY || 'undefined',
 
    51 												chartRangeMax: graph_data.sparklineMaxY || 'undefined',
 
    52 													chartRangeMinX: graph_data.sparklineMinX || 'undefined',
 
    52 												chartRangeMinX: graph_data.sparklineMinX || 'undefined',
 
    53 													chartRangeMaxX: graph_data.sparklineMaxX || 'undefined',
 
    53 												chartRangeMaxX: graph_data.sparklineMaxX || 'undefined',
 
    54 													normalRangeMin: graph_data.minVal || 'undefined',
 
    54 												normalRangeMin: graph_data.minVal || 'undefined',
 
    55 													normalRangeMax: graph_data.maxVal || 'undefined',
 
    55 												normalRangeMax: graph_data.maxVal || 'undefined',
 
    56 													normalRangeColor: graph_data.normColor || '#c0c0c0',
 
    56 												normalRangeColor: graph_data.normColor || '#c0c0c0',
 
    57 													drawNormalOnTop: graph_data.drawNormal || false
 
    57 												drawNormalOnTop: graph_data.drawNormal || false
 
    58 												});
 
    58 											});
 
    59 												break;
 
    59 											break;
 
    60 
    60 
    61 											case 'pie':
 
    61 										case 'pie':
 
    62 												graph.sparkline('html', {
 
    62 											graph.sparkline('html', {
 
    63 													type: 'pie',
 
    63 												type: 'pie',
 
    64 													width : graph_data.sparklinePiesize || 90,
 
    64 												width : graph_data.sparklinePiesize || 90,
 
    65 													height : graph_data.sparklinePiesize || 90,
 
    65 												height : graph_data.sparklinePiesize || 90,
 
    66 													tooltipFormat : '<span style="color: {{color}}">&#9679;</span> ({{percent.1}}%)',
 
    66 												tooltipFormat : '<span style="color: {{color}}">&#9679;</span> ({{percent.1}}%)',
 
    67 													sliceColors : graph_data.sparklinePiecolor || ["#B4CAD3", "#4490B1", "#98AA56", "#da532c", "#6E9461", "#0099c6", "#990099", "#717D8A"],
 
    67 												sliceColors : graph_data.sparklinePiecolor || ["#B4CAD3", "#4490B1", "#98AA56", "#da532c", "#6E9461", "#0099c6", "#990099", "#717D8A"],
 
    68 													borderWidth : 1,
 
    68 												borderWidth : 1,
 
    69 													offset : graph_data.sparklineOffset || 0,
 
    69 												offset : graph_data.sparklineOffset || 0,
 
    70 													borderColor : graph_data.borderColor || '#45494C'
 
    70 												borderColor : graph_data.borderColor || '#45494C'
 
    71 												});
 
    71 											});
 
    72 												break;
 
    72 											break;
 
    73 
    73 
    74 											case 'box':
 
    74 										case 'box':
 
    75 												graph.sparkline('html', {
 
    75 											graph.sparkline('html', {
 
    76 													type : 'box',
 
    76 												type : 'box',
 
    77 													width : graph_data.sparklineWidth || 'auto',
 
    77 												width : graph_data.sparklineWidth || 'auto',
 
    78 													height : graph_data.sparklineHeight || 'auto',
 
    78 												height : graph_data.sparklineHeight || 'auto',
 
    79 													raw : graph_data.sparklineBoxraw || false,
 
    79 												raw : graph_data.sparklineBoxraw || false,
 
    80 													target : graph_data.sparklineTargetval || 'undefined',
 
    80 												target : graph_data.sparklineTargetval || 'undefined',
 
    81 													minValue : graph_data.sparklineMin || 'undefined',
 
    81 												minValue : graph_data.sparklineMin || 'undefined',
 
    82 													maxValue : graph_data.sparklineMax || 'undefined',
 
    82 												maxValue : graph_data.sparklineMax || 'undefined',
 
    83 													showOutliers : graph_data.sparklineShowoutlier || true,
 
    83 												showOutliers : graph_data.sparklineShowoutlier || true,
 
    84 													outlierIQR : graph_data.sparklineOutlierIqr || 1.5,
 
    84 												outlierIQR : graph_data.sparklineOutlierIqr || 1.5,
 
    85 													spotRadius : graph_data.sparklineSpotradius || 1.5,
 
    85 												spotRadius : graph_data.sparklineSpotradius || 1.5,
 
    86 													boxLineColor : graph.css('color') || '#000000',
 
    86 												boxLineColor : graph.css('color') || '#000000',
 
    87 													boxFillColor : graph_data.fillColor || '#c0d0f0',
 
    87 												boxFillColor : graph_data.fillColor || '#c0d0f0',
 
    88 													whiskerColor : graph_data.sparklineWhisColor || '#000000',
 
    88 												whiskerColor : graph_data.sparklineWhisColor || '#000000',
 
    89 													outlierLineColor : graph_data.sparklineOutlineColor || '#303030',
 
    89 												outlierLineColor : graph_data.sparklineOutlineColor || '#303030',
 
    90 													outlierFillColor : graph_data.sparklineOutlinefillColor || '#f0f0f0',
 
    90 												outlierFillColor : graph_data.sparklineOutlinefillColor || '#f0f0f0',
 
    91 													medianColor : graph_data.sparklineOutlinemedianColor || '#f00000',
 
    91 												medianColor : graph_data.sparklineOutlinemedianColor || '#f00000',
 
    92 													targetColor : graph_data.sparklineOutlinetargetColor || '#40a020'
 
    92 												targetColor : graph_data.sparklineOutlinetargetColor || '#40a020'
 
    93 												});
 
    93 											});
 
    94 												break;
 
    94 											break;
 
    95 
    95 
    96 											case 'bullet':
 
    96 										case 'bullet':
 
    97 												graph.sparkline('html', {
 
    97 											graph.sparkline('html', {
 
    98 													type : 'bullet',
 
    98 												type : 'bullet',
 
    99 													height : graph_data.sparklineHeight || 'auto',
 
    99 												height : graph_data.sparklineHeight || 'auto',
 
   100 													targetWidth : graph_data.sparklineWidth || 2,
 
   100 												targetWidth : graph_data.sparklineWidth || 2,
 
   101 													targetColor : graph_data.sparklineBulletColor || '#ed1c24',
 
   101 												targetColor : graph_data.sparklineBulletColor || '#ed1c24',
 
   102 													performanceColor : graph_data.sparklinePerformanceColor || '#3030f0',
 
   102 												performanceColor : graph_data.sparklinePerformanceColor || '#3030f0',
 
   103 													rangeColors : graph_data.sparklineBulletrangeColor || ["#d3dafe", "#a8b6ff", "#7f94ff"]
 
   103 												rangeColors : graph_data.sparklineBulletrangeColor || ["#d3dafe", "#a8b6ff", "#7f94ff"]
 
   104 												});
 
   104 											});
 
   105 												break;
 
   105 											break;
 
   106 
   106 
   107 											case 'discrete':
 
   107 										case 'discrete':
 
   108 												graph.sparkline('html', {
 
   108 											graph.sparkline('html', {
 
   109 													type : 'discrete',
 
   109 												type : 'discrete',
 
   110 													width : graph_data.sparklineWidth || 50,
 
   110 												width : graph_data.sparklineWidth || 50,
 
   111 													height : graph_data.sparklineHeight || 26,
 
   111 												height : graph_data.sparklineHeight || 26,
 
   112 													lineColor : graph.css('color'),
 
   112 												lineColor : graph.css('color'),
 
   113 													lineHeight : graph_data.sparklineLineHeight || 5,
 
   113 												lineHeight : graph_data.sparklineLineHeight || 5,
 
   114 													thresholdValue : graph_data.sparklineThreshold || 'undefined',
 
   114 												thresholdValue : graph_data.sparklineThreshold || 'undefined',
 
   115 													thresholdColor : graph_data.sparklineThresholdColor || '#ed1c24'
 
   115 												thresholdColor : graph_data.sparklineThresholdColor || '#ed1c24'
 
   116 												});
 
   116 											});
 
   117 												break;
 
   117 											break;
 
   118 
   118 
   119 											case 'tristate':
 
   119 										case 'tristate':
 
   120 												graph.sparkline('html', {
 
   120 											graph.sparkline('html', {
 
   121 													type : 'tristate',
 
   121 												type : 'tristate',
 
   122 													height : graph_data.sparklineHeight || 26,
 
   122 												height : graph_data.sparklineHeight || 26,
 
   123 													posBarColor : graph_data.sparklinePosbarColor || '#60f060',
 
   123 												posBarColor : graph_data.sparklinePosbarColor || '#60f060',
 
   124 													negBarColor : graph_data.sparklineNegbarColor || '#f04040',
 
   124 												negBarColor : graph_data.sparklineNegbarColor || '#f04040',
 
   125 													zeroBarColor : graph_data.sparklineZerobarColor || '#909090',
 
   125 												zeroBarColor : graph_data.sparklineZerobarColor || '#909090',
 
   126 													barWidth : graph_data.sparklineBarwidth || 5,
 
   126 												barWidth : graph_data.sparklineBarwidth || 5,
 
   127 													barSpacing : graph_data.sparklineBarspacing || 2,
 
   127 												barSpacing : graph_data.sparklineBarspacing || 2,
 
   128 													zeroAxis : graph_data.sparklineZeroaxis || false
 
   128 												zeroAxis : graph_data.sparklineZeroaxis || false
 
   129 												});
 
   129 											});
 
   130 												break;
 
   130 											break;
 
   131 
   131 
   132 											case 'compositebar':
 
   132 										case 'compositebar':
 
   133 												graph.sparkline(graph_data.sparklineBarVal, {
 
   133 											graph.sparkline(graph_data.sparklineBarVal, {
 
   134 													type : 'bar',
 
   134 												type : 'bar',
 
   135 													width : graph_data.sparklineWidth || '100%',
 
   135 												width : graph_data.sparklineWidth || '100%',
 
   136 													height : graph_data.sparklineHeight || '20px',
 
   136 												height : graph_data.sparklineHeight || '20px',
 
   137 													barColor : graph_data.sparklineColorBottom || '#333333',
 
   137 												barColor : graph_data.sparklineColorBottom || '#333333',
 
   138 													barWidth : graph_data.sparklineBarwidth || 3
 
   138 												barWidth : graph_data.sparklineBarwidth || 3
 
   139 												});
 
   139 											});
 
   140 												graph.sparkline(graph_data.sparklineLineVal, {
 
   140 											graph.sparkline(graph_data.sparklineLineVal, {
 
   141 													width : graph_data.sparklineWidth || '100%',
 
   141 												width : graph_data.sparklineWidth || '100%',
 
   142 													height : graph_data.sparklineHeight || '20px',
 
   142 												height : graph_data.sparklineHeight || '20px',
 
   143 													lineColor : graph_data.sparklineColorTop || '#ed1c24',
 
   143 												lineColor : graph_data.sparklineColorTop || '#ed1c24',
 
   144 													lineWidth : graph_data.sparklineLineWidth || 1,
 
   144 												lineWidth : graph_data.sparklineLineWidth || 1,
 
   145 													composite : true,
 
   145 												composite : true,
 
   146 													fillColor : false
 
   146 												fillColor : false
 
   147 												});
 
   147 											});
 
   148 												break;
 
   148 											break;
 
   149 
   149 
   150 											case 'compositeline':
 
   150 										case 'compositeline':
 
   151 												graph.sparkline(graph_data.sparklineBarVal, {
 
   151 											graph.sparkline(graph_data.sparklineBarVal, {
 
   152 													type : 'line',
 
   152 												type : 'line',
 
   153 													spotRadius : graph_data.sparklineSpotradiusTop || 1.5,
 
   153 												spotRadius : graph_data.sparklineSpotradiusTop || 1.5,
 
   154 													spotColor : graph_data.sparklineSpotColor || '#f08000',
 
   154 												spotColor : graph_data.sparklineSpotColor || '#f08000',
 
   155 													minSpotColor : graph_data.sparklineMinSpotColorTop || '#ed1c24',
 
   155 												minSpotColor : graph_data.sparklineMinSpotColorTop || '#ed1c24',
 
   156 													maxSpotColor : graph_data.sparklineMaxSpotColorTop || '#f08000',
 
   156 												maxSpotColor : graph_data.sparklineMaxSpotColorTop || '#f08000',
 
   157 													highlightSpotColor : graph_data.sparklineHighlightSpotColorTop || '#50f050',
 
   157 												highlightSpotColor : graph_data.sparklineHighlightSpotColorTop || '#50f050',
 
   158 													highlightLineColor : graph_data.sparklineHighlightLineColorTop || '#f02020',
 
   158 												highlightLineColor : graph_data.sparklineHighlightLineColorTop || '#f02020',
 
   159 													valueSpots : graph_data.sparklineBarValSpotsTop || null,
 
   159 												valueSpots : graph_data.sparklineBarValSpotsTop || null,
 
   160 													lineWidth : graph_data.sparklineLineWidthTop || 1,
 
   160 												lineWidth : graph_data.sparklineLineWidthTop || 1,
 
   161 													width : graph_data.sparklineWidth || '90px',
 
   161 												width : graph_data.sparklineWidth || '90px',
 
   162 													height : graph_data.sparklineHeight || '20px',
 
   162 												height : graph_data.sparklineHeight || '20px',
 
   163 													lineColor : graph_data.sparklineColorTop || '#333333',
 
   163 												lineColor : graph_data.sparklineColorTop || '#333333',
 
   164 													fillColor : graph_data.sparklineFillcolorTop || 'transparent'
 
   164 												fillColor : graph_data.sparklineFillcolorTop || 'transparent'
 
   165 												});
 
   165 											});
 
   166 												graph.sparkline(graph_data.sparklineLineVal, {
 
   166 											graph.sparkline(graph_data.sparklineLineVal, {
 
   167 													type : 'line',
 
   167 												type : 'line',
 
   168 													spotRadius : graph_data.sparklineSpotradiusBottom || graph_data.sparklineSpotradiusTop || 1.5,
 
   168 												spotRadius : graph_data.sparklineSpotradiusBottom || graph_data.sparklineSpotradiusTop || 1.5,
 
   169 													spotColor : graph_data.sparklineSpotColor || '#f08000',
 
   169 												spotColor : graph_data.sparklineSpotColor || '#f08000',
 
   170 													minSpotColor : graph_data.sparklineMinspotColorBottom || graph_data.sparklineMinspotColorTop || '#ed1c24',
 
   170 												minSpotColor : graph_data.sparklineMinspotColorBottom || graph_data.sparklineMinspotColorTop || '#ed1c24',
 
   171 													maxSpotColor : graph_data.sparklineMaxspotColorBottom || graph_data.sparklineMaxspotColorTop || '#f08000',
 
   171 												maxSpotColor : graph_data.sparklineMaxspotColorBottom || graph_data.sparklineMaxspotColorTop || '#f08000',
 
   172 													highlightSpotColor : graph_data.sparklineHighlightspotColorBottom || graph_data.sparklineHighlightspotColorTop || '#50f050',
 
   172 												highlightSpotColor : graph_data.sparklineHighlightspotColorBottom || graph_data.sparklineHighlightspotColorTop || '#50f050',
 
   173 													highlightLineColor : graph_data.sparklineHighlightlineColorBottom || graph_data.sparklineHighlightlineColorTop || '#f02020',
 
   173 												highlightLineColor : graph_data.sparklineHighlightlineColorBottom || graph_data.sparklineHighlightlineColorTop || '#f02020',
 
   174 													valueSpots : graph_data.sparklineBarValSpotsBottom || null,
 
   174 												valueSpots : graph_data.sparklineBarValSpotsBottom || null,
 
   175 													lineWidth : graph_data.sparklineLineWidthBottom || 1,
 
   175 												lineWidth : graph_data.sparklineLineWidthBottom || 1,
 
   176 													width : graph_data.sparklineWidth || '90px',
 
   176 												width : graph_data.sparklineWidth || '90px',
 
   177 													height : graph_data.sparklineHeight || '20px',
 
   177 												height : graph_data.sparklineHeight || '20px',
 
   178 													lineColor : graph_data.sparklineColorBottom || '#ed1c24',
 
   178 												lineColor : graph_data.sparklineColorBottom || '#ed1c24',
 
   179 													composite : true,
 
   179 												composite : true,
 
   180 													fillColor : graph_data.sparklineFillcolorBottom || 'transparent'
 
   180 												fillColor : graph_data.sparklineFillcolorBottom || 'transparent'
 
   181 												});
 
   181 											});
 
   182 												break;
 
   182 											break;
 
   183 										}
 
   183 									}
 
   184 									});
 
   184 								});
 
   185 							   });
 
   185 						   });
 
   186 		}
 
   186 		}
 
   187 	};
 
   187 	};
 
   188 
   188 
   189 })(jQuery, this);
 
   189 })(jQuery, this);
pyams/pyams_skin