1 /* |
1 /* |
2 * MyAMS extensions to jquery-sparkline graphs plug-in |
2 * MyAMS extensions to jquery-sparkline graphs plug-in |
3 * Version 0.1.0 |
3 * Version 0.1.0 |
4 * ©2014 Thierry Florac <tflorac@ulthar.net> |
4 * ©2014 Thierry Florac <tflorac@ulthar.net> |
5 */ |
5 */ |
6 (function($) { |
6 (function($, globals) { |
|
7 |
|
8 'use strict'; |
|
9 |
|
10 var MyAMS = globals.MyAMS; |
7 |
11 |
8 MyAMS.graphs = { |
12 MyAMS.graphs = { |
9 |
13 |
10 init: function(graphs) { |
14 init: function(graphs) { |
11 MyAMS.ajax.check($.fn.sparkline, |
15 MyAMS.ajax.check($.fn.sparkline, |
12 MyAMS.baseURL + 'ext/jquery-sparkline-2.1.1.min.js', |
16 MyAMS.baseURL + 'ext/jquery-sparkline-2.1.1.min.js', |
13 function(first_load) { |
17 function() { |
14 graphs.each(function() { |
18 graphs.each(function() { |
15 var graph = $(this); |
19 var graph = $(this); |
16 var graph_data =graph.data(); |
20 var graph_data = graph.data(); |
17 var sparklineType = graph_data.sparklineType || 'bar'; |
21 var sparklineType = graph_data.sparklineType || 'bar'; |
18 switch (sparklineType) { |
22 switch (sparklineType) { |
19 case 'bar': |
23 case 'bar': |
20 graph.sparkline('html', { |
24 graph.sparkline('html', { |
21 type: 'bar', |
25 type: 'bar', |
59 type: 'pie', |
63 type: 'pie', |
60 width : graph_data.sparklinePiesize || 90, |
64 width : graph_data.sparklinePiesize || 90, |
61 height : graph_data.sparklinePiesize || 90, |
65 height : graph_data.sparklinePiesize || 90, |
62 tooltipFormat : '<span style="color: {{color}}">●</span> ({{percent.1}}%)', |
66 tooltipFormat : '<span style="color: {{color}}">●</span> ({{percent.1}}%)', |
63 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"], |
64 offset : 0, |
|
65 borderWidth : 1, |
68 borderWidth : 1, |
66 offset : graph_data.sparklineOffset || 0, |
69 offset : graph_data.sparklineOffset || 0, |
67 borderColor : graph_data.borderColor || '#45494C' |
70 borderColor : graph_data.borderColor || '#45494C' |
68 }); |
71 }); |
69 break; |
72 break; |
93 case 'bullet': |
96 case 'bullet': |
94 graph.sparkline('html', { |
97 graph.sparkline('html', { |
95 type : 'bullet', |
98 type : 'bullet', |
96 height : graph_data.sparklineHeight || 'auto', |
99 height : graph_data.sparklineHeight || 'auto', |
97 targetWidth : graph_data.sparklineWidth || 2, |
100 targetWidth : graph_data.sparklineWidth || 2, |
98 targetColor : graph_data.sparklineBullet-color || '#ed1c24', |
101 targetColor : graph_data.sparklineBulletColor || '#ed1c24', |
99 performanceColor : graph_data.sparklinePerformanceColor || '#3030f0', |
102 performanceColor : graph_data.sparklinePerformanceColor || '#3030f0', |
100 rangeColors : graph_data.sparklineBulletrangeColor || ["#d3dafe", "#a8b6ff", "#7f94ff"] |
103 rangeColors : graph_data.sparklineBulletrangeColor || ["#d3dafe", "#a8b6ff", "#7f94ff"] |
101 }); |
104 }); |
102 break; |
105 break; |
103 |
106 |
125 zeroAxis : graph_data.sparklineZeroaxis || false |
128 zeroAxis : graph_data.sparklineZeroaxis || false |
126 }); |
129 }); |
127 break; |
130 break; |
128 |
131 |
129 case 'compositebar': |
132 case 'compositebar': |
130 $this.sparkline(graph_data.sparklineBarVal, { |
133 graph.sparkline(graph_data.sparklineBarVal, { |
131 type : 'bar', |
134 type : 'bar', |
132 width : graph_data.sparklineWidth || '100%', |
135 width : graph_data.sparklineWidth || '100%', |
133 height : graph_data.sparklineHeight || '20px', |
136 height : graph_data.sparklineHeight || '20px', |
134 barColor : graph_data.sparklineColorBottom || '#333333', |
137 barColor : graph_data.sparklineColorBottom || '#333333', |
135 barWidth : graph_data.sparklineBarwidth || 3 |
138 barWidth : graph_data.sparklineBarwidth || 3 |
136 }); |
139 }); |
137 $this.sparkline(graph_data.sparklineLineVal, { |
140 graph.sparkline(graph_data.sparklineLineVal, { |
138 width : graph_data.sparklineWidth || '100%', |
141 width : graph_data.sparklineWidth || '100%', |
139 height : graph_data.sparklineHeight || '20px', |
142 height : graph_data.sparklineHeight || '20px', |
140 lineColor : graph_data.sparklineColorTop || '#ed1c24', |
143 lineColor : graph_data.sparklineColorTop || '#ed1c24', |
141 lineWidth : graph_data.sparklineLineWidth || 1, |
144 lineWidth : graph_data.sparklineLineWidth || 1, |
142 composite : true, |
145 composite : true, |
143 fillColor : false |
146 fillColor : false |
144 }); |
147 }); |
145 break; |
148 break; |
146 |
149 |
147 case 'compositeline': |
150 case 'compositeline': |
148 $this.sparkline(graph_data.sparklineBarVal, { |
151 graph.sparkline(graph_data.sparklineBarVal, { |
149 type : 'line', |
152 type : 'line', |
150 spotRadius : graph_data.sparklineSpotradiusTop || 1.5, |
153 spotRadius : graph_data.sparklineSpotradiusTop || 1.5, |
151 spotColor : graph_data.sparklineSpotColor || '#f08000', |
154 spotColor : graph_data.sparklineSpotColor || '#f08000', |
152 minSpotColor : graph_data.sparklineMinspotColorTop || '#ed1c24', |
155 minSpotColor : graph_data.sparklineMinSpotColorTop || '#ed1c24', |
153 maxSpotColor : graph_data.sparkline-maxspotColorTop || '#f08000', |
156 maxSpotColor : graph_data.sparklineMaxSpotColorTop || '#f08000', |
154 highlightSpotColor : graph_data.sparklineHighlightspotColorTop || '#50f050', |
157 highlightSpotColor : graph_data.sparklineHighlightSpotColorTop || '#50f050', |
155 highlightLineColor : graph_data.sparklineHighlightlineColorTop || '#f02020', |
158 highlightLineColor : graph_data.sparklineHighlightLineColorTop || '#f02020', |
156 valueSpots : graph_data.sparklineBarValSpotsTop || null, |
159 valueSpots : graph_data.sparklineBarValSpotsTop || null, |
157 lineWidth : graph_data.sparklineLineWidthTop || 1, |
160 lineWidth : graph_data.sparklineLineWidthTop || 1, |
158 width : graph_data.sparklineWidth || '90px', |
161 width : graph_data.sparklineWidth || '90px', |
159 height : graph_data.sparklineHeight || '20px', |
162 height : graph_data.sparklineHeight || '20px', |
160 lineColor : graph_data.sparklineColorTop || '#333333', |
163 lineColor : graph_data.sparklineColorTop || '#333333', |
161 fillColor : graph_data.sparklineFillcolorTop || 'transparent' |
164 fillColor : graph_data.sparklineFillcolorTop || 'transparent' |
162 }); |
165 }); |
163 $this.sparkline(graph_data.sparklineLineVal, { |
166 graph.sparkline(graph_data.sparklineLineVal, { |
164 type : 'line', |
167 type : 'line', |
165 spotRadius : graph_data.sparklineSpotradiusBottom || graph_data.sparklineSpotradiusTop || 1.5, |
168 spotRadius : graph_data.sparklineSpotradiusBottom || graph_data.sparklineSpotradiusTop || 1.5, |
166 spotColor : graph_data.sparklineSpotColor || '#f08000', |
169 spotColor : graph_data.sparklineSpotColor || '#f08000', |
167 minSpotColor : graph_data.sparklineMinspotColorBottom || graph_data.sparklineMinspotColorTop || '#ed1c24', |
170 minSpotColor : graph_data.sparklineMinspotColorBottom || graph_data.sparklineMinspotColorTop || '#ed1c24', |
168 maxSpotColor : graph_data.sparklineMaxspotColorBottom || graph_data.sparklineMaxspotColorTop || '#f08000', |
171 maxSpotColor : graph_data.sparklineMaxspotColorBottom || graph_data.sparklineMaxspotColorTop || '#f08000', |