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