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