| 21627 |
kshitij.so |
1 |
/**
|
|
|
2 |
*
|
|
|
3 |
* jquery.sparkline.js
|
|
|
4 |
*
|
|
|
5 |
* v2.0
|
|
|
6 |
* (c) Splunk, Inc
|
|
|
7 |
* Contact: Gareth Watts (gareth@splunk.com)
|
|
|
8 |
* http://omnipotent.net/jquery.sparkline/
|
|
|
9 |
*
|
|
|
10 |
* Generates inline sparkline charts from data supplied either to the method
|
|
|
11 |
* or inline in HTML
|
|
|
12 |
*
|
|
|
13 |
* Compatible with Internet Explorer 6.0+ and modern browsers equipped with the canvas tag
|
|
|
14 |
* (Firefox 2.0+, Safari, Opera, etc)
|
|
|
15 |
*
|
|
|
16 |
* License: New BSD License
|
|
|
17 |
*
|
|
|
18 |
* Copyright (c) 2012, Splunk Inc.
|
|
|
19 |
* All rights reserved.
|
|
|
20 |
*
|
|
|
21 |
* Redistribution and use in source and binary forms, with or without modification,
|
|
|
22 |
* are permitted provided that the following conditions are met:
|
|
|
23 |
*
|
|
|
24 |
* * Redistributions of source code must retain the above copyright notice,
|
|
|
25 |
* this list of conditions and the following disclaimer.
|
|
|
26 |
* * Redistributions in binary form must reproduce the above copyright notice,
|
|
|
27 |
* this list of conditions and the following disclaimer in the documentation
|
|
|
28 |
* and/or other materials provided with the distribution.
|
|
|
29 |
* * Neither the name of Splunk Inc nor the names of its contributors may
|
|
|
30 |
* be used to endorse or promote products derived from this software without
|
|
|
31 |
* specific prior written permission.
|
|
|
32 |
*
|
|
|
33 |
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
|
|
|
34 |
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
|
|
|
35 |
* OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
|
|
|
36 |
* SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
|
|
37 |
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT
|
|
|
38 |
* OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
|
|
|
39 |
* HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
|
|
|
40 |
* OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
|
|
41 |
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
|
42 |
*
|
|
|
43 |
*
|
|
|
44 |
* Usage:
|
|
|
45 |
* $(selector).sparkline(values, options)
|
|
|
46 |
*
|
|
|
47 |
* If values is undefined or set to 'html' then the data values are read from the specified tag:
|
|
|
48 |
* <p>Sparkline: <span class="sparkline">1,4,6,6,8,5,3,5</span></p>
|
|
|
49 |
* $('.sparkline').sparkline();
|
|
|
50 |
* There must be no spaces in the enclosed data set
|
|
|
51 |
*
|
|
|
52 |
* Otherwise values must be an array of numbers or null values
|
|
|
53 |
* <p>Sparkline: <span id="sparkline1">This text replaced if the browser is compatible</span></p>
|
|
|
54 |
* $('#sparkline1').sparkline([1,4,6,6,8,5,3,5])
|
|
|
55 |
* $('#sparkline2').sparkline([1,4,6,null,null,5,3,5])
|
|
|
56 |
*
|
|
|
57 |
* Values can also be specified in an HTML comment, or as a values attribute:
|
|
|
58 |
* <p>Sparkline: <span class="sparkline"><!--1,4,6,6,8,5,3,5 --></span></p>
|
|
|
59 |
* <p>Sparkline: <span class="sparkline" values="1,4,6,6,8,5,3,5"></span></p>
|
|
|
60 |
* $('.sparkline').sparkline();
|
|
|
61 |
*
|
|
|
62 |
* For line charts, x values can also be specified:
|
|
|
63 |
* <p>Sparkline: <span class="sparkline">1:1,2.7:4,3.4:6,5:6,6:8,8.7:5,9:3,10:5</span></p>
|
|
|
64 |
* $('#sparkline1').sparkline([ [1,1], [2.7,4], [3.4,6], [5,6], [6,8], [8.7,5], [9,3], [10,5] ])
|
|
|
65 |
*
|
|
|
66 |
* By default, options should be passed in as teh second argument to the sparkline function:
|
|
|
67 |
* $('.sparkline').sparkline([1,2,3,4], {type: 'bar'})
|
|
|
68 |
*
|
|
|
69 |
* Options can also be set by passing them on the tag itself. This feature is disabled by default though
|
|
|
70 |
* as there's a slight performance overhead:
|
|
|
71 |
* $('.sparkline').sparkline([1,2,3,4], {enableTagOptions: true})
|
|
|
72 |
* <p>Sparkline: <span class="sparkline" sparkType="bar" sparkBarColor="red">loading</span></p>
|
|
|
73 |
* Prefix all options supplied as tag attribute with "spark" (configurable by setting tagOptionPrefix)
|
|
|
74 |
*
|
|
|
75 |
* Supported options:
|
|
|
76 |
* lineColor - Color of the line used for the chart
|
|
|
77 |
* fillColor - Color used to fill in the chart - Set to '' or false for a transparent chart
|
|
|
78 |
* width - Width of the chart - Defaults to 3 times the number of values in pixels
|
|
|
79 |
* height - Height of the chart - Defaults to the height of the containing element
|
|
|
80 |
* chartRangeMin - Specify the minimum value to use for the Y range of the chart - Defaults to the minimum value supplied
|
|
|
81 |
* chartRangeMax - Specify the maximum value to use for the Y range of the chart - Defaults to the maximum value supplied
|
|
|
82 |
* chartRangeClip - Clip out of range values to the max/min specified by chartRangeMin and chartRangeMax
|
|
|
83 |
* chartRangeMinX - Specify the minimum value to use for the X range of the chart - Defaults to the minimum value supplied
|
|
|
84 |
* chartRangeMaxX - Specify the maximum value to use for the X range of the chart - Defaults to the maximum value supplied
|
|
|
85 |
* composite - If true then don't erase any existing chart attached to the tag, but draw
|
|
|
86 |
* another chart over the top - Note that width and height are ignored if an
|
|
|
87 |
* existing chart is detected.
|
|
|
88 |
* tagValuesAttribute - Name of tag attribute to check for data values - Defaults to 'values'
|
|
|
89 |
* enableTagOptions - Whether to check tags for sparkline options
|
|
|
90 |
* tagOptionPrefix - Prefix used for options supplied as tag attributes - Defaults to 'spark'
|
|
|
91 |
* disableHiddenCheck - If set to true, then the plugin will assume that charts will never be drawn into a
|
|
|
92 |
* hidden dom element, avoding a browser reflow
|
|
|
93 |
* disableInteraction - If set to true then all mouseover/click interaction behaviour will be disabled,
|
|
|
94 |
* making the plugin perform much like it did in 1.x
|
|
|
95 |
* disableTooltips - If set to true then tooltips will be disabled - Defaults to false (tooltips enabled)
|
|
|
96 |
* disableHighlight - If set to true then highlighting of selected chart elements on mouseover will be disabled
|
|
|
97 |
* defaults to false (highlights enabled)
|
|
|
98 |
* highlightLighten - Factor to lighten/darken highlighted chart values by - Defaults to 1.4 for a 40% increase
|
|
|
99 |
* tooltipContainer - Specify which DOM element the tooltip should be rendered into - defaults to document.body
|
|
|
100 |
* tooltipClassname - Optional CSS classname to apply to tooltips - If not specified then a default style will be applied
|
|
|
101 |
* tooltipOffsetX - How many pixels away from the mouse pointer to render the tooltip on the X axis
|
|
|
102 |
* tooltipOffsetY - How many pixels away from the mouse pointer to render the tooltip on the r axis
|
|
|
103 |
* tooltipFormatter - Optional callback that allows you to override the HTML displayed in the tooltip
|
|
|
104 |
* callback is given arguments of (sparkline, options, fields)
|
|
|
105 |
* tooltipChartTitle - If specified then the tooltip uses the string specified by this setting as a title
|
|
|
106 |
* tooltipFormat - A format string or SPFormat object (or an array thereof for multiple entries)
|
|
|
107 |
* to control the format of the tooltip
|
|
|
108 |
* tooltipPrefix - A string to prepend to each field displayed in a tooltip
|
|
|
109 |
* tooltipSuffix - A string to append to each field displayed in a tooltip
|
|
|
110 |
* tooltipSkipNull - If true then null values will not have a tooltip displayed (defaults to true)
|
|
|
111 |
* tooltipValueLookups - An object or range map to map field values to tooltip strings
|
|
|
112 |
* (eg. to map -1 to "Lost", 0 to "Draw", and 1 to "Win")
|
|
|
113 |
* numberFormatter - Optional callback for formatting numbers in tooltips
|
|
|
114 |
* numberDigitGroupSep - Character to use for group separator in numbers "1,234" - Defaults to ","
|
|
|
115 |
* numberDecimalMark - Character to use for the decimal point when formatting numbers - Defaults to "."
|
|
|
116 |
* numberDigitGroupCount - Number of digits between group separator - Defaults to 3
|
|
|
117 |
*
|
|
|
118 |
* There are 7 types of sparkline, selected by supplying a "type" option of 'line' (default),
|
|
|
119 |
* 'bar', 'tristate', 'bullet', 'discrete', 'pie' or 'box'
|
|
|
120 |
* line - Line chart. Options:
|
|
|
121 |
* spotColor - Set to '' to not end each line in a circular spot
|
|
|
122 |
* minSpotColor - If set, color of spot at minimum value
|
|
|
123 |
* maxSpotColor - If set, color of spot at maximum value
|
|
|
124 |
* spotRadius - Radius in pixels
|
|
|
125 |
* lineWidth - Width of line in pixels
|
|
|
126 |
* normalRangeMin
|
|
|
127 |
* normalRangeMax - If set draws a filled horizontal bar between these two values marking the "normal"
|
|
|
128 |
* or expected range of values
|
|
|
129 |
* normalRangeColor - Color to use for the above bar
|
|
|
130 |
* drawNormalOnTop - Draw the normal range above the chart fill color if true
|
|
|
131 |
* defaultPixelsPerValue - Defaults to 3 pixels of width for each value in the chart
|
|
|
132 |
* highlightSpotColor - The color to use for drawing a highlight spot on mouseover - Set to null to disable
|
|
|
133 |
* highlightLineColor - The color to use for drawing a highlight line on mouseover - Set to null to disable
|
|
|
134 |
* valueSpots - Specify which points to draw spots on, and in which color. Accepts a range map
|
|
|
135 |
*
|
|
|
136 |
* bar - Bar chart. Options:
|
|
|
137 |
* barColor - Color of bars for postive values
|
|
|
138 |
* negBarColor - Color of bars for negative values
|
|
|
139 |
* zeroColor - Color of bars with zero values
|
|
|
140 |
* nullColor - Color of bars with null values - Defaults to omitting the bar entirely
|
|
|
141 |
* barWidth - Width of bars in pixels
|
|
|
142 |
* colorMap - Optional mappnig of values to colors to override the *BarColor values above
|
|
|
143 |
* can be an Array of values to control the color of individual bars or a range map
|
|
|
144 |
* to specify colors for individual ranges of values
|
|
|
145 |
* barSpacing - Gap between bars in pixels
|
|
|
146 |
* zeroAxis - Centers the y-axis around zero if true
|
|
|
147 |
*
|
|
|
148 |
* tristate - Charts values of win (>0), lose (<0) or draw (=0)
|
|
|
149 |
* posBarColor - Color of win values
|
|
|
150 |
* negBarColor - Color of lose values
|
|
|
151 |
* zeroBarColor - Color of draw values
|
|
|
152 |
* barWidth - Width of bars in pixels
|
|
|
153 |
* barSpacing - Gap between bars in pixels
|
|
|
154 |
* colorMap - Optional mappnig of values to colors to override the *BarColor values above
|
|
|
155 |
* can be an Array of values to control the color of individual bars or a range map
|
|
|
156 |
* to specify colors for individual ranges of values
|
|
|
157 |
*
|
|
|
158 |
* discrete - Options:
|
|
|
159 |
* lineHeight - Height of each line in pixels - Defaults to 30% of the graph height
|
|
|
160 |
* thesholdValue - Values less than this value will be drawn using thresholdColor instead of lineColor
|
|
|
161 |
* thresholdColor
|
|
|
162 |
*
|
|
|
163 |
* bullet - Values for bullet graphs msut be in the order: target, performance, range1, range2, range3, ...
|
|
|
164 |
* options:
|
|
|
165 |
* targetColor - The color of the vertical target marker
|
|
|
166 |
* targetWidth - The width of the target marker in pixels
|
|
|
167 |
* performanceColor - The color of the performance measure horizontal bar
|
|
|
168 |
* rangeColors - Colors to use for each qualitative range background color
|
|
|
169 |
*
|
|
|
170 |
* pie - Pie chart. Options:
|
|
|
171 |
* sliceColors - An array of colors to use for pie slices
|
|
|
172 |
* offset - Angle in degrees to offset the first slice - Try -90 or +90
|
|
|
173 |
* borderWidth - Width of border to draw around the pie chart, in pixels - Defaults to 0 (no border)
|
|
|
174 |
* borderColor - Color to use for the pie chart border - Defaults to #000
|
|
|
175 |
*
|
|
|
176 |
* box - Box plot. Options:
|
|
|
177 |
* raw - Set to true to supply pre-computed plot points as values
|
|
|
178 |
* values should be: low_outlier, low_whisker, q1, median, q3, high_whisker, high_outlier
|
|
|
179 |
* When set to false you can supply any number of values and the box plot will
|
|
|
180 |
* be computed for you. Default is false.
|
|
|
181 |
* showOutliers - Set to true (default) to display outliers as circles
|
|
|
182 |
* outlierIRQ - Interquartile range used to determine outliers. Default 1.5
|
|
|
183 |
* boxLineColor - Outline color of the box
|
|
|
184 |
* boxFillColor - Fill color for the box
|
|
|
185 |
* whiskerColor - Line color used for whiskers
|
|
|
186 |
* outlierLineColor - Outline color of outlier circles
|
|
|
187 |
* outlierFillColor - Fill color of the outlier circles
|
|
|
188 |
* spotRadius - Radius of outlier circles
|
|
|
189 |
* medianColor - Line color of the median line
|
|
|
190 |
* target - Draw a target cross hair at the supplied value (default undefined)
|
|
|
191 |
*
|
|
|
192 |
*
|
|
|
193 |
*
|
|
|
194 |
* Examples:
|
|
|
195 |
* $('#sparkline1').sparkline(myvalues, { lineColor: '#f00', fillColor: false });
|
|
|
196 |
* $('.barsparks').sparkline('html', { type:'bar', height:'40px', barWidth:5 });
|
|
|
197 |
* $('#tristate').sparkline([1,1,-1,1,0,0,-1], { type:'tristate' }):
|
|
|
198 |
* $('#discrete').sparkline([1,3,4,5,5,3,4,5], { type:'discrete' });
|
|
|
199 |
* $('#bullet').sparkline([10,12,12,9,7], { type:'bullet' });
|
|
|
200 |
* $('#pie').sparkline([1,1,2], { type:'pie' });
|
|
|
201 |
*/
|
|
|
202 |
|
|
|
203 |
/*jslint regexp: true, browser: true, jquery: true, white: true, nomen: false, plusplus: false, maxerr: 500, indent: 4 */
|
|
|
204 |
|
|
|
205 |
(function ($) {
|
|
|
206 |
'use strict';
|
|
|
207 |
|
|
|
208 |
var UNSET_OPTION = {},
|
|
|
209 |
getDefaults, createClass, SPFormat, clipval, quartile, normalizeValue, normalizeValues,
|
|
|
210 |
remove, isNumber, all, sum, addCSS, ensureArray, formatNumber, RangeMap,
|
|
|
211 |
MouseHandler, Tooltip, barHighlightMixin,
|
|
|
212 |
line, bar, tristate, discrete, bullet, pie, box, defaultStyles, initStyles,
|
|
|
213 |
VShape, VCanvas_base, VCanvas_canvas, VCanvas_vml, pending, shapeCount = 0;
|
|
|
214 |
|
|
|
215 |
/**
|
|
|
216 |
* Default configuration settings
|
|
|
217 |
*/
|
|
|
218 |
getDefaults = function () {
|
|
|
219 |
return {
|
|
|
220 |
// Settings common to most/all chart types
|
|
|
221 |
common: {
|
|
|
222 |
type: 'line',
|
|
|
223 |
lineColor: '#00f',
|
|
|
224 |
fillColor: '#cdf',
|
|
|
225 |
defaultPixelsPerValue: 3,
|
|
|
226 |
width: 'auto',
|
|
|
227 |
height: 'auto',
|
|
|
228 |
composite: false,
|
|
|
229 |
tagValuesAttribute: 'values',
|
|
|
230 |
tagOptionsPrefix: 'spark',
|
|
|
231 |
enableTagOptions: false,
|
|
|
232 |
enableHighlight: true,
|
|
|
233 |
highlightLighten: 1.4,
|
|
|
234 |
tooltipSkipNull: true,
|
|
|
235 |
tooltipPrefix: '',
|
|
|
236 |
tooltipSuffix: '',
|
|
|
237 |
disableHiddenCheck: false,
|
|
|
238 |
numberFormatter: false,
|
|
|
239 |
numberDigitGroupCount: 3,
|
|
|
240 |
numberDigitGroupSep: ',',
|
|
|
241 |
numberDecimalMark: '.',
|
|
|
242 |
disableTooltips: false,
|
|
|
243 |
disableInteraction: false
|
|
|
244 |
},
|
|
|
245 |
// Defaults for line charts
|
|
|
246 |
line: {
|
|
|
247 |
spotColor: '#f80',
|
|
|
248 |
highlightSpotColor: '#5f5',
|
|
|
249 |
highlightLineColor: '#f22',
|
|
|
250 |
spotRadius: 1.5,
|
|
|
251 |
minSpotColor: '#f80',
|
|
|
252 |
maxSpotColor: '#f80',
|
|
|
253 |
lineWidth: 1,
|
|
|
254 |
normalRangeMin: undefined,
|
|
|
255 |
normalRangeMax: undefined,
|
|
|
256 |
normalRangeColor: '#ccc',
|
|
|
257 |
drawNormalOnTop: false,
|
|
|
258 |
chartRangeMin: undefined,
|
|
|
259 |
chartRangeMax: undefined,
|
|
|
260 |
chartRangeMinX: undefined,
|
|
|
261 |
chartRangeMaxX: undefined,
|
|
|
262 |
tooltipFormat: new SPFormat('<span style="color: {{color}}">●</span> {{prefix}}{{y}}{{suffix}}')
|
|
|
263 |
},
|
|
|
264 |
// Defaults for bar charts
|
|
|
265 |
bar: {
|
|
|
266 |
barColor: '#3366cc',
|
|
|
267 |
negBarColor: '#f44',
|
|
|
268 |
stackedBarColor: ['#3366cc', '#dc3912', '#ff9900', '#109618', '#66aa00',
|
|
|
269 |
'#dd4477', '#0099c6', '#990099'],
|
|
|
270 |
zeroColor: undefined,
|
|
|
271 |
nullColor: undefined,
|
|
|
272 |
zeroAxis: true,
|
|
|
273 |
barWidth: 4,
|
|
|
274 |
barSpacing: 1,
|
|
|
275 |
chartRangeMax: undefined,
|
|
|
276 |
chartRangeMin: undefined,
|
|
|
277 |
chartRangeClip: false,
|
|
|
278 |
colorMap: undefined,
|
|
|
279 |
tooltipFormat: new SPFormat('<span style="color: {{color}}">●</span> {{prefix}}{{value}}{{suffix}}')
|
|
|
280 |
},
|
|
|
281 |
// Defaults for tristate charts
|
|
|
282 |
tristate: {
|
|
|
283 |
barWidth: 4,
|
|
|
284 |
barSpacing: 1,
|
|
|
285 |
posBarColor: '#6f6',
|
|
|
286 |
negBarColor: '#f44',
|
|
|
287 |
zeroBarColor: '#999',
|
|
|
288 |
colorMap: {},
|
|
|
289 |
tooltipFormat: new SPFormat('<span style="color: {{color}}">●</span> {{value:map}}'),
|
|
|
290 |
tooltipValueLookups: { map: { '-1': 'Loss', '0': 'Draw', '1': 'Win' } }
|
|
|
291 |
},
|
|
|
292 |
// Defaults for discrete charts
|
|
|
293 |
discrete: {
|
|
|
294 |
lineHeight: 'auto',
|
|
|
295 |
thresholdColor: undefined,
|
|
|
296 |
thresholdValue: 0,
|
|
|
297 |
chartRangeMax: undefined,
|
|
|
298 |
chartRangeMin: undefined,
|
|
|
299 |
chartRangeClip: false,
|
|
|
300 |
tooltipFormat: new SPFormat('{{prefix}}{{value}}{{suffix}}')
|
|
|
301 |
},
|
|
|
302 |
// Defaults for bullet charts
|
|
|
303 |
bullet: {
|
|
|
304 |
targetColor: '#f33',
|
|
|
305 |
targetWidth: 3, // width of the target bar in pixels
|
|
|
306 |
performanceColor: '#33f',
|
|
|
307 |
rangeColors: ['#d3dafe', '#a8b6ff', '#7f94ff'],
|
|
|
308 |
base: undefined, // set this to a number to change the base start number
|
|
|
309 |
tooltipFormat: new SPFormat('{{fieldkey:fields}} - {{value}}'),
|
|
|
310 |
tooltipValueLookups: { fields: {r: 'Range', p: 'Performance', t: 'Target'} }
|
|
|
311 |
},
|
|
|
312 |
// Defaults for pie charts
|
|
|
313 |
pie: {
|
|
|
314 |
offset: 0,
|
|
|
315 |
sliceColors: ['#3366cc', '#dc3912', '#ff9900', '#109618', '#66aa00',
|
|
|
316 |
'#dd4477', '#0099c6', '#990099'],
|
|
|
317 |
borderWidth: 0,
|
|
|
318 |
borderColor: '#000',
|
|
|
319 |
tooltipFormat: new SPFormat('<span style="color: {{color}}">●</span> {{value}} ({{percent.1}}%)')
|
|
|
320 |
},
|
|
|
321 |
// Defaults for box plots
|
|
|
322 |
box: {
|
|
|
323 |
raw: false,
|
|
|
324 |
boxLineColor: '#000',
|
|
|
325 |
boxFillColor: '#cdf',
|
|
|
326 |
whiskerColor: '#000',
|
|
|
327 |
outlierLineColor: '#333',
|
|
|
328 |
outlierFillColor: '#fff',
|
|
|
329 |
medianColor: '#f00',
|
|
|
330 |
showOutliers: true,
|
|
|
331 |
outlierIQR: 1.5,
|
|
|
332 |
spotRadius: 1.5,
|
|
|
333 |
target: undefined,
|
|
|
334 |
targetColor: '#4a2',
|
|
|
335 |
chartRangeMax: undefined,
|
|
|
336 |
chartRangeMin: undefined,
|
|
|
337 |
tooltipFormat: new SPFormat('{{field:fields}}: {{value}}'),
|
|
|
338 |
tooltipFormatFieldlistKey: 'field',
|
|
|
339 |
tooltipValueLookups: { fields: { lq: 'Lower Quartile', med: 'Median',
|
|
|
340 |
uq: 'Upper Quartile', lo: 'Left Outlier', ro: 'Right Outlier',
|
|
|
341 |
lw: 'Left Whisker', rw: 'Right Whisker'} }
|
|
|
342 |
}
|
|
|
343 |
};
|
|
|
344 |
};
|
|
|
345 |
|
|
|
346 |
// You can have tooltips use a css class other than jqstooltip by specifying tooltipClassname
|
|
|
347 |
defaultStyles = '.jqstooltip { ' +
|
|
|
348 |
'position: absolute;' +
|
|
|
349 |
'left: 0px;' +
|
|
|
350 |
'top: 0px;' +
|
|
|
351 |
'visibility: hidden;' +
|
|
|
352 |
'background: rgb(0, 0, 0) transparent;' +
|
|
|
353 |
'background-color: rgba(0,0,0,0.6);' +
|
|
|
354 |
'filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);' +
|
|
|
355 |
'-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";' +
|
|
|
356 |
'color: white;' +
|
|
|
357 |
'font: 10px arial, san serif;' +
|
|
|
358 |
'text-align: left;' +
|
|
|
359 |
'white-space: nowrap;' +
|
|
|
360 |
'padding: 5px;' +
|
|
|
361 |
'border: 1px solid white;' +
|
|
|
362 |
'}' +
|
|
|
363 |
'.jqsfield { ' +
|
|
|
364 |
'color: white;' +
|
|
|
365 |
'font: 10px arial, san serif;' +
|
|
|
366 |
'text-align: left;' +
|
|
|
367 |
'}';
|
|
|
368 |
|
|
|
369 |
initStyles = function() {
|
|
|
370 |
addCSS(defaultStyles);
|
|
|
371 |
};
|
|
|
372 |
|
|
|
373 |
$(initStyles);
|
|
|
374 |
|
|
|
375 |
/**
|
|
|
376 |
* Utilities
|
|
|
377 |
*/
|
|
|
378 |
|
|
|
379 |
createClass = function (/* [baseclass, [mixin, ...]], definition */) {
|
|
|
380 |
var Class, args;
|
|
|
381 |
Class = function () {
|
|
|
382 |
this.init.apply(this, arguments);
|
|
|
383 |
};
|
|
|
384 |
if (arguments.length > 1) {
|
|
|
385 |
if (arguments[0]) {
|
|
|
386 |
Class.prototype = $.extend(new arguments[0](), arguments[arguments.length - 1]);
|
|
|
387 |
Class._super = arguments[0].prototype;
|
|
|
388 |
} else {
|
|
|
389 |
Class.prototype = arguments[arguments.length - 1];
|
|
|
390 |
}
|
|
|
391 |
if (arguments.length > 2) {
|
|
|
392 |
args = Array.prototype.slice.call(arguments, 1, -1);
|
|
|
393 |
args.unshift(Class.prototype);
|
|
|
394 |
$.extend.apply($, args);
|
|
|
395 |
}
|
|
|
396 |
} else {
|
|
|
397 |
Class.prototype = arguments[0];
|
|
|
398 |
}
|
|
|
399 |
Class.prototype.cls = Class;
|
|
|
400 |
return Class;
|
|
|
401 |
};
|
|
|
402 |
|
|
|
403 |
/**
|
|
|
404 |
* Wraps a format string for tooltips
|
|
|
405 |
* {{x}}
|
|
|
406 |
* {{x.2}
|
|
|
407 |
* {{x:months}}
|
|
|
408 |
*/
|
|
|
409 |
$.SPFormatClass = SPFormat = createClass({
|
|
|
410 |
fre: /\{\{([\w.]+?)(:(.+?))?\}\}/g,
|
|
|
411 |
precre: /(\w+)\.(\d+)/,
|
|
|
412 |
|
|
|
413 |
init: function (format, fclass) {
|
|
|
414 |
this.format = format;
|
|
|
415 |
this.fclass = fclass;
|
|
|
416 |
},
|
|
|
417 |
|
|
|
418 |
render: function (fieldset, lookups, options) {
|
|
|
419 |
var self = this,
|
|
|
420 |
fields = fieldset,
|
|
|
421 |
match, token, lookupkey, fieldvalue, prec;
|
|
|
422 |
return this.format.replace(this.fre, function () {
|
|
|
423 |
var lookup;
|
|
|
424 |
token = arguments[1];
|
|
|
425 |
lookupkey = arguments[3];
|
|
|
426 |
match = self.precre.exec(token);
|
|
|
427 |
if (match) {
|
|
|
428 |
prec = match[2];
|
|
|
429 |
token = match[1];
|
|
|
430 |
} else {
|
|
|
431 |
prec = false;
|
|
|
432 |
}
|
|
|
433 |
fieldvalue = fields[token];
|
|
|
434 |
if (fieldvalue === undefined) {
|
|
|
435 |
return '';
|
|
|
436 |
}
|
|
|
437 |
if (lookupkey && lookups && lookups[lookupkey]) {
|
|
|
438 |
lookup = lookups[lookupkey];
|
|
|
439 |
if (lookup.get) { // RangeMap
|
|
|
440 |
return lookups[lookupkey].get(fieldvalue) || fieldvalue;
|
|
|
441 |
} else {
|
|
|
442 |
return lookups[lookupkey][fieldvalue] || fieldvalue;
|
|
|
443 |
}
|
|
|
444 |
}
|
|
|
445 |
if (isNumber(fieldvalue)) {
|
|
|
446 |
if (options.get('numberFormatter')) {
|
|
|
447 |
fieldvalue = options.get('numberFormatter')(fieldvalue);
|
|
|
448 |
} else {
|
|
|
449 |
fieldvalue = formatNumber(fieldvalue, prec,
|
|
|
450 |
options.get('numberDigitGroupCount'),
|
|
|
451 |
options.get('numberDigitGroupSep'),
|
|
|
452 |
options.get('numberDecimalMark'));
|
|
|
453 |
}
|
|
|
454 |
}
|
|
|
455 |
return fieldvalue;
|
|
|
456 |
});
|
|
|
457 |
}
|
|
|
458 |
});
|
|
|
459 |
|
|
|
460 |
// convience method to avoid needing the new operator
|
|
|
461 |
$.spformat = function(format, fclass) {
|
|
|
462 |
return new SPFormat(format, fclass);
|
|
|
463 |
};
|
|
|
464 |
|
|
|
465 |
clipval = function (val, min, max) {
|
|
|
466 |
if (val < min) {
|
|
|
467 |
return min;
|
|
|
468 |
}
|
|
|
469 |
if (val > max) {
|
|
|
470 |
return max;
|
|
|
471 |
}
|
|
|
472 |
return val;
|
|
|
473 |
};
|
|
|
474 |
|
|
|
475 |
quartile = function (values, q) {
|
|
|
476 |
var vl;
|
|
|
477 |
if (q === 2) {
|
|
|
478 |
vl = Math.floor(values.length / 2);
|
|
|
479 |
return values.length % 2 ? values[vl] : (values[vl] + values[vl + 1]) / 2;
|
|
|
480 |
} else {
|
|
|
481 |
vl = Math.floor(values.length / 4);
|
|
|
482 |
return values.length % 2 ? (values[vl * q] + values[vl * q + 1]) / 2 : values[vl * q];
|
|
|
483 |
}
|
|
|
484 |
};
|
|
|
485 |
|
|
|
486 |
normalizeValue = function (val) {
|
|
|
487 |
var nf;
|
|
|
488 |
switch (val) {
|
|
|
489 |
case 'undefined':
|
|
|
490 |
val = undefined;
|
|
|
491 |
break;
|
|
|
492 |
case 'null':
|
|
|
493 |
val = null;
|
|
|
494 |
break;
|
|
|
495 |
case 'true':
|
|
|
496 |
val = true;
|
|
|
497 |
break;
|
|
|
498 |
case 'false':
|
|
|
499 |
val = false;
|
|
|
500 |
break;
|
|
|
501 |
default:
|
|
|
502 |
nf = parseFloat(val);
|
|
|
503 |
if (val == nf) {
|
|
|
504 |
val = nf;
|
|
|
505 |
}
|
|
|
506 |
}
|
|
|
507 |
return val;
|
|
|
508 |
};
|
|
|
509 |
|
|
|
510 |
normalizeValues = function (vals) {
|
|
|
511 |
var i, result = [];
|
|
|
512 |
for (i = vals.length; i--;) {
|
|
|
513 |
result[i] = normalizeValue(vals[i]);
|
|
|
514 |
}
|
|
|
515 |
return result;
|
|
|
516 |
};
|
|
|
517 |
|
|
|
518 |
remove = function (vals, filter) {
|
|
|
519 |
var i, vl, result = [];
|
|
|
520 |
for (i = 0, vl = vals.length; i < vl; i++) {
|
|
|
521 |
if (vals[i] !== filter) {
|
|
|
522 |
result.push(vals[i]);
|
|
|
523 |
}
|
|
|
524 |
}
|
|
|
525 |
return result;
|
|
|
526 |
};
|
|
|
527 |
|
|
|
528 |
isNumber = function (num) {
|
|
|
529 |
return !isNaN(parseFloat(num)) && isFinite(num);
|
|
|
530 |
};
|
|
|
531 |
|
|
|
532 |
formatNumber = function (num, prec, groupsize, groupsep, decsep) {
|
|
|
533 |
var p, i;
|
|
|
534 |
num = (prec === false ? parseFloat(num).toString() : num.toFixed(prec)).split('');
|
|
|
535 |
p = (p = $.inArray('.', num)) < 0 ? num.length : p;
|
|
|
536 |
if (p < num.length) {
|
|
|
537 |
num[p] = decsep;
|
|
|
538 |
}
|
|
|
539 |
for (i = p - groupsize; i > 0; i -= groupsize) {
|
|
|
540 |
num.splice(i, 0, groupsep);
|
|
|
541 |
}
|
|
|
542 |
return num.join('');
|
|
|
543 |
};
|
|
|
544 |
|
|
|
545 |
// determine if all values of an array match a value
|
|
|
546 |
// returns true if the array is empty
|
|
|
547 |
all = function (val, arr, ignoreNull) {
|
|
|
548 |
var i;
|
|
|
549 |
for (i = arr.length; i--; ) {
|
|
|
550 |
if (arr[i] !== val || (!ignoreNull && val === null)) {
|
|
|
551 |
return false;
|
|
|
552 |
}
|
|
|
553 |
}
|
|
|
554 |
return true;
|
|
|
555 |
};
|
|
|
556 |
|
|
|
557 |
// sums the numeric values in an array, ignoring other values
|
|
|
558 |
sum = function (vals) {
|
|
|
559 |
var total = 0, i;
|
|
|
560 |
for (i = vals.length; i--;) {
|
|
|
561 |
total += typeof vals[i] === 'number' ? vals[i] : 0;
|
|
|
562 |
}
|
|
|
563 |
return total;
|
|
|
564 |
};
|
|
|
565 |
|
|
|
566 |
ensureArray = function (val) {
|
|
|
567 |
return $.isArray(val) ? val : [val];
|
|
|
568 |
};
|
|
|
569 |
|
|
|
570 |
// http://paulirish.com/2008/bookmarklet-inject-new-css-rules/
|
|
|
571 |
addCSS = function(css) {
|
|
|
572 |
var tag;
|
|
|
573 |
//if ('\v' == 'v') /* ie only */ {
|
|
|
574 |
if (document.createStyleSheet) {
|
|
|
575 |
document.createStyleSheet().cssText = css;
|
|
|
576 |
} else {
|
|
|
577 |
tag = document.createElement('style');
|
|
|
578 |
tag.type = 'text/css';
|
|
|
579 |
document.getElementsByTagName('head')[0].appendChild(tag);
|
|
|
580 |
tag[(typeof document.body.style.WebkitAppearance == 'string') /* webkit only */ ? 'innerText' : 'innerHTML'] = css;
|
|
|
581 |
}
|
|
|
582 |
};
|
|
|
583 |
|
|
|
584 |
// Provide a cross-browser interface to a few simple drawing primitives
|
|
|
585 |
$.fn.simpledraw = function (width, height, useExisting, interact) {
|
|
|
586 |
var target, mhandler;
|
|
|
587 |
if (useExisting && (target = this.data('_jqs_vcanvas'))) {
|
|
|
588 |
return target;
|
|
|
589 |
}
|
|
|
590 |
if (width === undefined) {
|
|
|
591 |
width = $(this).innerWidth();
|
|
|
592 |
}
|
|
|
593 |
if (height === undefined) {
|
|
|
594 |
height = $(this).innerHeight();
|
|
|
595 |
}
|
|
|
596 |
if ($.browser.hasCanvas) {
|
|
|
597 |
target = new VCanvas_canvas(width, height, this, interact);
|
|
|
598 |
} else if ($.browser.msie) {
|
|
|
599 |
target = new VCanvas_vml(width, height, this);
|
|
|
600 |
} else {
|
|
|
601 |
return false;
|
|
|
602 |
}
|
|
|
603 |
mhandler = $(this).data('_jqs_mhandler');
|
|
|
604 |
if (mhandler) {
|
|
|
605 |
mhandler.registerCanvas(target);
|
|
|
606 |
}
|
|
|
607 |
return target;
|
|
|
608 |
};
|
|
|
609 |
|
|
|
610 |
$.fn.cleardraw = function () {
|
|
|
611 |
var target = this.data('_jqs_vcanvas');
|
|
|
612 |
if (target) {
|
|
|
613 |
target.reset();
|
|
|
614 |
}
|
|
|
615 |
};
|
|
|
616 |
|
|
|
617 |
$.RangeMapClass = RangeMap = createClass({
|
|
|
618 |
init: function (map) {
|
|
|
619 |
var key, range, rangelist = [];
|
|
|
620 |
for (key in map) {
|
|
|
621 |
if (map.hasOwnProperty(key) && typeof key === 'string' && key.indexOf(':') > -1) {
|
|
|
622 |
range = key.split(':');
|
|
|
623 |
range[0] = range[0].length === 0 ? -Infinity : parseFloat(range[0]);
|
|
|
624 |
range[1] = range[1].length === 0 ? Infinity : parseFloat(range[1]);
|
|
|
625 |
range[2] = map[key];
|
|
|
626 |
rangelist.push(range);
|
|
|
627 |
}
|
|
|
628 |
}
|
|
|
629 |
this.map = map;
|
|
|
630 |
this.rangelist = rangelist || false;
|
|
|
631 |
},
|
|
|
632 |
|
|
|
633 |
get: function (value) {
|
|
|
634 |
var rangelist = this.rangelist,
|
|
|
635 |
i, range, result;
|
|
|
636 |
if ((result = this.map[value]) !== undefined) {
|
|
|
637 |
return result;
|
|
|
638 |
}
|
|
|
639 |
if (rangelist) {
|
|
|
640 |
for (i = rangelist.length; i--;) {
|
|
|
641 |
range = rangelist[i];
|
|
|
642 |
if (range[0] <= value && range[1] >= value) {
|
|
|
643 |
return range[2];
|
|
|
644 |
}
|
|
|
645 |
}
|
|
|
646 |
}
|
|
|
647 |
return undefined;
|
|
|
648 |
}
|
|
|
649 |
});
|
|
|
650 |
|
|
|
651 |
// Convenience function
|
|
|
652 |
$.range_map = function(map) {
|
|
|
653 |
return new RangeMap(map);
|
|
|
654 |
};
|
|
|
655 |
|
|
|
656 |
MouseHandler = createClass({
|
|
|
657 |
init: function (el, options) {
|
|
|
658 |
var $el = $(el);
|
|
|
659 |
this.$el = $el;
|
|
|
660 |
this.options = options;
|
|
|
661 |
this.currentPageX = 0;
|
|
|
662 |
this.currentPageY = 0;
|
|
|
663 |
this.el = el;
|
|
|
664 |
this.splist = [];
|
|
|
665 |
this.tooltip = null;
|
|
|
666 |
this.over = false;
|
|
|
667 |
this.displayTooltips = !options.get('disableTooltips');
|
|
|
668 |
this.highlightEnabled = !options.get('disableHighlight');
|
|
|
669 |
},
|
|
|
670 |
|
|
|
671 |
registerSparkline: function (sp) {
|
|
|
672 |
this.splist.push(sp);
|
|
|
673 |
if (this.over) {
|
|
|
674 |
this.updateDisplay();
|
|
|
675 |
}
|
|
|
676 |
},
|
|
|
677 |
|
|
|
678 |
registerCanvas: function (canvas) {
|
|
|
679 |
var $canvas = $(canvas.canvas);
|
|
|
680 |
this.canvas = canvas;
|
|
|
681 |
this.$canvas = $canvas;
|
|
|
682 |
$canvas.mouseenter($.proxy(this.mouseenter, this));
|
|
|
683 |
$canvas.mouseleave($.proxy(this.mouseleave, this));
|
|
|
684 |
$canvas.click($.proxy(this.mouseclick, this));
|
|
|
685 |
},
|
|
|
686 |
|
|
|
687 |
reset: function (removeTooltip) {
|
|
|
688 |
this.splist = [];
|
|
|
689 |
if (this.tooltip && removeTooltip) {
|
|
|
690 |
this.tooltip.remove();
|
|
|
691 |
this.tooltip = undefined;
|
|
|
692 |
}
|
|
|
693 |
},
|
|
|
694 |
|
|
|
695 |
mouseclick: function (e) {
|
|
|
696 |
var clickEvent = $.Event('sparklineClick');
|
|
|
697 |
clickEvent.originalEvent = e;
|
|
|
698 |
clickEvent.sparklines = this.splist;
|
|
|
699 |
this.$el.trigger(clickEvent);
|
|
|
700 |
},
|
|
|
701 |
|
|
|
702 |
mouseenter: function (e) {
|
|
|
703 |
$(document.body).unbind('mousemove.jqs');
|
|
|
704 |
$(document.body).bind('mousemove.jqs', $.proxy(this.mousemove, this));
|
|
|
705 |
this.over = true;
|
|
|
706 |
this.currentPageX = e.pageX;
|
|
|
707 |
this.currentPageY = e.pageY;
|
|
|
708 |
this.currentEl = e.target;
|
|
|
709 |
if (!this.tooltip && this.displayTooltips) {
|
|
|
710 |
this.tooltip = new Tooltip(this.options);
|
|
|
711 |
this.tooltip.updatePosition(e.pageX, e.pageY);
|
|
|
712 |
}
|
|
|
713 |
this.updateDisplay();
|
|
|
714 |
},
|
|
|
715 |
|
|
|
716 |
mouseleave: function () {
|
|
|
717 |
$(document.body).unbind('mousemove.jqs');
|
|
|
718 |
var splist = this.splist,
|
|
|
719 |
spcount = splist.length,
|
|
|
720 |
needsRefresh = false,
|
|
|
721 |
sp, i;
|
|
|
722 |
this.over = false;
|
|
|
723 |
this.currentEl = null;
|
|
|
724 |
|
|
|
725 |
if (this.tooltip) {
|
|
|
726 |
this.tooltip.remove();
|
|
|
727 |
this.tooltip = null;
|
|
|
728 |
}
|
|
|
729 |
|
|
|
730 |
for (i = 0; i < spcount; i++) {
|
|
|
731 |
sp = splist[i];
|
|
|
732 |
if (sp.clearRegionHighlight()) {
|
|
|
733 |
needsRefresh = true;
|
|
|
734 |
}
|
|
|
735 |
}
|
|
|
736 |
|
|
|
737 |
if (needsRefresh) {
|
|
|
738 |
this.canvas.render();
|
|
|
739 |
}
|
|
|
740 |
},
|
|
|
741 |
|
|
|
742 |
mousemove: function (e) {
|
|
|
743 |
this.currentPageX = e.pageX;
|
|
|
744 |
this.currentPageY = e.pageY;
|
|
|
745 |
this.currentEl = e.target;
|
|
|
746 |
if (this.tooltip) {
|
|
|
747 |
this.tooltip.updatePosition(e.pageX, e.pageY);
|
|
|
748 |
}
|
|
|
749 |
this.updateDisplay();
|
|
|
750 |
},
|
|
|
751 |
|
|
|
752 |
updateDisplay: function () {
|
|
|
753 |
var splist = this.splist,
|
|
|
754 |
spcount = splist.length,
|
|
|
755 |
needsRefresh = false,
|
|
|
756 |
offset = this.$canvas.offset(),
|
|
|
757 |
localX = this.currentPageX - offset.left,
|
|
|
758 |
localY = this.currentPageY - offset.top,
|
|
|
759 |
tooltiphtml, sp, i, result, changeEvent;
|
|
|
760 |
if (!this.over) {
|
|
|
761 |
return;
|
|
|
762 |
}
|
|
|
763 |
for (i = 0; i < spcount; i++) {
|
|
|
764 |
sp = splist[i];
|
|
|
765 |
result = sp.setRegionHighlight(this.currentEl, localX, localY);
|
|
|
766 |
if (result) {
|
|
|
767 |
needsRefresh = true;
|
|
|
768 |
}
|
|
|
769 |
}
|
|
|
770 |
if (needsRefresh) {
|
|
|
771 |
changeEvent = $.Event('sparklineRegionChange');
|
|
|
772 |
changeEvent.sparklines = this.splist;
|
|
|
773 |
this.$el.trigger(changeEvent);
|
|
|
774 |
if (this.tooltip) {
|
|
|
775 |
tooltiphtml = '';
|
|
|
776 |
for (i = 0; i < spcount; i++) {
|
|
|
777 |
sp = splist[i];
|
|
|
778 |
tooltiphtml += sp.getCurrentRegionTooltip();
|
|
|
779 |
}
|
|
|
780 |
this.tooltip.setContent(tooltiphtml);
|
|
|
781 |
}
|
|
|
782 |
if (!this.disableHighlight) {
|
|
|
783 |
this.canvas.render();
|
|
|
784 |
}
|
|
|
785 |
}
|
|
|
786 |
if (result === null) {
|
|
|
787 |
this.mouseleave();
|
|
|
788 |
}
|
|
|
789 |
}
|
|
|
790 |
});
|
|
|
791 |
|
|
|
792 |
|
|
|
793 |
Tooltip = createClass({
|
|
|
794 |
sizeStyle: 'position: static !important;' +
|
|
|
795 |
'display: block !important;' +
|
|
|
796 |
'visibility: hidden !important;' +
|
|
|
797 |
'float: left !important;',
|
|
|
798 |
|
|
|
799 |
init: function (options) {
|
|
|
800 |
var tooltipClassname = options.get('tooltipClassname', 'jqstooltip'),
|
|
|
801 |
sizetipStyle = this.sizeStyle,
|
|
|
802 |
offset;
|
|
|
803 |
this.container = options.get('tooltipContainer') || document.body;
|
|
|
804 |
this.tooltipOffsetX = options.get('tooltipOffsetX', 10);
|
|
|
805 |
this.tooltipOffsetY = options.get('tooltipOffsetY', 12);
|
|
|
806 |
// remove any previous lingering tooltip
|
|
|
807 |
$('#jqssizetip').remove();
|
|
|
808 |
$('#jqstooltip').remove();
|
|
|
809 |
this.sizetip = $('<div/>', {
|
|
|
810 |
id: 'jqssizetip',
|
|
|
811 |
style: sizetipStyle,
|
|
|
812 |
'class': tooltipClassname
|
|
|
813 |
});
|
|
|
814 |
this.tooltip = $('<div/>', {
|
|
|
815 |
id: 'jqstooltip',
|
|
|
816 |
'class': tooltipClassname
|
|
|
817 |
}).appendTo(this.container);
|
|
|
818 |
// account for the container's location
|
|
|
819 |
offset = this.tooltip.offset();
|
|
|
820 |
this.offsetLeft = offset.left;
|
|
|
821 |
this.offsetTop = offset.top;
|
|
|
822 |
this.hidden = true;
|
|
|
823 |
$(window).unbind('resize.jqs scroll.jqs');
|
|
|
824 |
$(window).bind('resize.jqs scroll.jqs', $.proxy(this.updateWindowDims, this));
|
|
|
825 |
this.updateWindowDims();
|
|
|
826 |
},
|
|
|
827 |
|
|
|
828 |
updateWindowDims: function () {
|
|
|
829 |
this.scrollTop = $(window).scrollTop();
|
|
|
830 |
this.scrollLeft = $(window).scrollLeft();
|
|
|
831 |
this.scrollRight = this.scrollLeft + $(window).width();
|
|
|
832 |
this.updatePosition();
|
|
|
833 |
},
|
|
|
834 |
|
|
|
835 |
getSize: function (content) {
|
|
|
836 |
this.sizetip.html(content).appendTo(this.container);
|
|
|
837 |
this.width = this.sizetip.width() + 1;
|
|
|
838 |
this.height = this.sizetip.height();
|
|
|
839 |
this.sizetip.remove();
|
|
|
840 |
},
|
|
|
841 |
|
|
|
842 |
setContent: function (content) {
|
|
|
843 |
if (!content) {
|
|
|
844 |
this.tooltip.css('visibility', 'hidden');
|
|
|
845 |
this.hidden = true;
|
|
|
846 |
return;
|
|
|
847 |
}
|
|
|
848 |
this.getSize(content);
|
|
|
849 |
this.tooltip.html(content)
|
|
|
850 |
.css({
|
|
|
851 |
'width': this.width,
|
|
|
852 |
'height': this.height,
|
|
|
853 |
'visibility': 'visible'
|
|
|
854 |
});
|
|
|
855 |
if (this.hidden) {
|
|
|
856 |
this.hidden = false;
|
|
|
857 |
this.updatePosition();
|
|
|
858 |
}
|
|
|
859 |
},
|
|
|
860 |
|
|
|
861 |
updatePosition: function (x, y) {
|
|
|
862 |
if (x === undefined) {
|
|
|
863 |
if (this.mousex === undefined) {
|
|
|
864 |
return;
|
|
|
865 |
}
|
|
|
866 |
x = this.mousex - this.offsetLeft;
|
|
|
867 |
y = this.mousey - this.offsetTop;
|
|
|
868 |
|
|
|
869 |
} else {
|
|
|
870 |
this.mousex = x = x - this.offsetLeft;
|
|
|
871 |
this.mousey = y = y - this.offsetTop;
|
|
|
872 |
}
|
|
|
873 |
if (!this.height || !this.width || this.hidden) {
|
|
|
874 |
return;
|
|
|
875 |
}
|
|
|
876 |
|
|
|
877 |
y -= this.height + this.tooltipOffsetY;
|
|
|
878 |
x += this.tooltipOffsetX;
|
|
|
879 |
|
|
|
880 |
if (y < this.scrollTop) {
|
|
|
881 |
y = this.scrollTop;
|
|
|
882 |
}
|
|
|
883 |
if (x < this.scrollLeft) {
|
|
|
884 |
x = this.scrollLeft;
|
|
|
885 |
} else if (x + this.width > this.scrollRight) {
|
|
|
886 |
x = this.scrollRight - this.width;
|
|
|
887 |
}
|
|
|
888 |
|
|
|
889 |
this.tooltip.css({
|
|
|
890 |
'left': x,
|
|
|
891 |
'top': y
|
|
|
892 |
});
|
|
|
893 |
},
|
|
|
894 |
|
|
|
895 |
remove: function () {
|
|
|
896 |
this.tooltip.remove();
|
|
|
897 |
this.sizetip.remove();
|
|
|
898 |
this.sizetip = this.tooltip = undefined;
|
|
|
899 |
$(window).unbind('resize.jqs scroll.jqs');
|
|
|
900 |
}
|
|
|
901 |
});
|
|
|
902 |
|
|
|
903 |
pending = [];
|
|
|
904 |
$.fn.sparkline = function (userValues, userOptions) {
|
|
|
905 |
return this.each(function () {
|
|
|
906 |
var options = new $.fn.sparkline.options(this, userOptions),
|
|
|
907 |
$this = $(this),
|
|
|
908 |
render, i;
|
|
|
909 |
render = function () {
|
|
|
910 |
var values, width, height, tmp, mhandler, sp, vals;
|
|
|
911 |
if (userValues === 'html' || userValues === undefined) {
|
|
|
912 |
vals = this.getAttribute(options.get('tagValuesAttribute'));
|
|
|
913 |
if (vals === undefined || vals === null) {
|
|
|
914 |
vals = $this.html();
|
|
|
915 |
}
|
|
|
916 |
values = vals.replace(/(^\s*<!--)|(-->\s*$)|\s+/g, '').split(',');
|
|
|
917 |
} else {
|
|
|
918 |
values = userValues;
|
|
|
919 |
}
|
|
|
920 |
|
|
|
921 |
width = options.get('width') === 'auto' ? values.length * options.get('defaultPixelsPerValue') : options.get('width');
|
|
|
922 |
if (options.get('height') === 'auto') {
|
|
|
923 |
if (!options.get('composite') || !$.data(this, '_jqs_vcanvas')) {
|
|
|
924 |
// must be a better way to get the line height
|
|
|
925 |
tmp = document.createElement('span');
|
|
|
926 |
tmp.innerHTML = 'a';
|
|
|
927 |
$this.html(tmp);
|
|
|
928 |
height = $(tmp).innerHeight() || $(tmp).height();
|
|
|
929 |
$(tmp).remove();
|
|
|
930 |
tmp = null;
|
|
|
931 |
}
|
|
|
932 |
} else {
|
|
|
933 |
height = options.get('height');
|
|
|
934 |
}
|
|
|
935 |
|
|
|
936 |
if (!options.get('disableInteraction')) {
|
|
|
937 |
mhandler = $.data(this, '_jqs_mhandler');
|
|
|
938 |
if (!mhandler) {
|
|
|
939 |
mhandler = new MouseHandler(this, options);
|
|
|
940 |
$.data(this, '_jqs_mhandler', mhandler);
|
|
|
941 |
} else if (!options.get('composite')) {
|
|
|
942 |
mhandler.reset();
|
|
|
943 |
}
|
|
|
944 |
} else {
|
|
|
945 |
mhandler = false;
|
|
|
946 |
}
|
|
|
947 |
|
|
|
948 |
if (options.get('composite') && !$.data(this, '_jqs_vcanvas')) {
|
|
|
949 |
if (!$.data(this, '_jqs_errnotify')) {
|
|
|
950 |
alert('Attempted to attach a composite sparkline to an element with no existing sparkline');
|
|
|
951 |
$.data(this, '_jqs_errnotify', true);
|
|
|
952 |
}
|
|
|
953 |
return;
|
|
|
954 |
}
|
|
|
955 |
|
|
|
956 |
sp = new $.fn.sparkline[options.get('type')](this, values, options, width, height);
|
|
|
957 |
|
|
|
958 |
sp.render();
|
|
|
959 |
|
|
|
960 |
if (mhandler) {
|
|
|
961 |
mhandler.registerSparkline(sp);
|
|
|
962 |
}
|
|
|
963 |
};
|
|
|
964 |
// jQuery 1.3.0 completely changed the meaning of :hidden :-/
|
|
|
965 |
if (($(this).html() && !options.get('disableHiddenCheck') && $(this).is(':hidden')) || ($.fn.jquery < '1.3.0' && $(this).parents().is(':hidden')) || !$(this).parents('body').length) {
|
|
|
966 |
if (!options.get('composite') && $.data(this, '_jqs_pending')) {
|
|
|
967 |
// remove any existing references to the element
|
|
|
968 |
for (i = pending.length; i; i--) {
|
|
|
969 |
if (pending[i - 1][0] == this) {
|
|
|
970 |
pending.splice(i - 1, 1);
|
|
|
971 |
}
|
|
|
972 |
}
|
|
|
973 |
}
|
|
|
974 |
pending.push([this, render]);
|
|
|
975 |
$.data(this, '_jqs_pending', true);
|
|
|
976 |
} else {
|
|
|
977 |
render.call(this);
|
|
|
978 |
}
|
|
|
979 |
});
|
|
|
980 |
};
|
|
|
981 |
|
|
|
982 |
$.fn.sparkline.defaults = getDefaults();
|
|
|
983 |
|
|
|
984 |
|
|
|
985 |
$.sparkline_display_visible = function () {
|
|
|
986 |
var el, i, pl;
|
|
|
987 |
var done = [];
|
|
|
988 |
for (i = 0, pl = pending.length; i < pl; i++) {
|
|
|
989 |
el = pending[i][0];
|
|
|
990 |
if ($(el).is(':visible') && !$(el).parents().is(':hidden')) {
|
|
|
991 |
pending[i][1].call(el);
|
|
|
992 |
$.data(pending[i][0], '_jqs_pending', false);
|
|
|
993 |
done.push(i);
|
|
|
994 |
} else if (!$(el).closest('html').length && !$.data(el, '_jqs_pending')) {
|
|
|
995 |
// element has been inserted and removed from the DOM
|
|
|
996 |
// If it was not yet inserted into the dom then the .data request
|
|
|
997 |
// will return true.
|
|
|
998 |
// removing from the dom causes the data to be removed.
|
|
|
999 |
$.data(pending[i][0], '_jqs_pending', false);
|
|
|
1000 |
done.push(i);
|
|
|
1001 |
}
|
|
|
1002 |
}
|
|
|
1003 |
for (i = done.length; i; i--) {
|
|
|
1004 |
pending.splice(done[i - 1], 1);
|
|
|
1005 |
}
|
|
|
1006 |
};
|
|
|
1007 |
|
|
|
1008 |
|
|
|
1009 |
/**
|
|
|
1010 |
* User option handler
|
|
|
1011 |
*/
|
|
|
1012 |
$.fn.sparkline.options = createClass({
|
|
|
1013 |
init: function (tag, userOptions) {
|
|
|
1014 |
var extendedOptions, defaults, base, tagOptionType;
|
|
|
1015 |
this.userOptions = userOptions = userOptions || {};
|
|
|
1016 |
this.tag = tag;
|
|
|
1017 |
this.tagValCache = {};
|
|
|
1018 |
defaults = $.fn.sparkline.defaults;
|
|
|
1019 |
base = defaults.common;
|
|
|
1020 |
this.tagOptionsPrefix = userOptions.enableTagOptions && (userOptions.tagOptionsPrefix || base.tagOptionsPrefix);
|
|
|
1021 |
|
|
|
1022 |
tagOptionType = this.getTagSetting('type');
|
|
|
1023 |
if (tagOptionType === UNSET_OPTION) {
|
|
|
1024 |
extendedOptions = defaults[userOptions.type || base.type];
|
|
|
1025 |
} else {
|
|
|
1026 |
extendedOptions = defaults[tagOptionType];
|
|
|
1027 |
}
|
|
|
1028 |
this.mergedOptions = $.extend({}, base, extendedOptions, userOptions);
|
|
|
1029 |
},
|
|
|
1030 |
|
|
|
1031 |
|
|
|
1032 |
getTagSetting: function (key) {
|
|
|
1033 |
var prefix = this.tagOptionsPrefix,
|
|
|
1034 |
val, i, pairs, keyval;
|
|
|
1035 |
if (prefix === false || prefix === undefined) {
|
|
|
1036 |
return UNSET_OPTION;
|
|
|
1037 |
}
|
|
|
1038 |
if (this.tagValCache.hasOwnProperty(key)) {
|
|
|
1039 |
val = this.tagValCache.key;
|
|
|
1040 |
} else {
|
|
|
1041 |
val = this.tag.getAttribute(prefix + key);
|
|
|
1042 |
if (val === undefined || val === null) {
|
|
|
1043 |
val = UNSET_OPTION;
|
|
|
1044 |
} else if (val.substr(0, 1) === '[') {
|
|
|
1045 |
val = val.substr(1, val.length - 2).split(',');
|
|
|
1046 |
for (i = val.length; i--;) {
|
|
|
1047 |
val[i] = normalizeValue(val[i].replace(/(^\s*)|(\s*$)/g, ''));
|
|
|
1048 |
}
|
|
|
1049 |
} else if (val.substr(0, 1) === '{') {
|
|
|
1050 |
pairs = val.substr(1, val.length - 2).split(',');
|
|
|
1051 |
val = {};
|
|
|
1052 |
for (i = pairs.length; i--;) {
|
|
|
1053 |
keyval = pairs[i].split(':', 2);
|
|
|
1054 |
val[keyval[0].replace(/(^\s*)|(\s*$)/g, '')] = normalizeValue(keyval[1].replace(/(^\s*)|(\s*$)/g, ''));
|
|
|
1055 |
}
|
|
|
1056 |
} else {
|
|
|
1057 |
val = normalizeValue(val);
|
|
|
1058 |
}
|
|
|
1059 |
this.tagValCache.key = val;
|
|
|
1060 |
}
|
|
|
1061 |
return val;
|
|
|
1062 |
},
|
|
|
1063 |
|
|
|
1064 |
get: function (key, defaultval) {
|
|
|
1065 |
var tagOption = this.getTagSetting(key),
|
|
|
1066 |
result;
|
|
|
1067 |
if (tagOption !== UNSET_OPTION) {
|
|
|
1068 |
return tagOption;
|
|
|
1069 |
}
|
|
|
1070 |
return (result = this.mergedOptions[key]) === undefined ? defaultval : result;
|
|
|
1071 |
}
|
|
|
1072 |
});
|
|
|
1073 |
|
|
|
1074 |
|
|
|
1075 |
$.fn.sparkline._base = createClass({
|
|
|
1076 |
disabled: false,
|
|
|
1077 |
|
|
|
1078 |
init: function (el, values, options, width, height) {
|
|
|
1079 |
this.el = el;
|
|
|
1080 |
this.$el = $(el);
|
|
|
1081 |
this.values = values;
|
|
|
1082 |
this.options = options;
|
|
|
1083 |
this.width = width;
|
|
|
1084 |
this.height = height;
|
|
|
1085 |
this.currentRegion = undefined;
|
|
|
1086 |
},
|
|
|
1087 |
|
|
|
1088 |
/**
|
|
|
1089 |
* Setup the canvas
|
|
|
1090 |
*/
|
|
|
1091 |
initTarget: function () {
|
|
|
1092 |
var interactive = !this.options.get('disableInteraction');
|
|
|
1093 |
if (!(this.target = this.$el.simpledraw(this.width, this.height, this.options.get('composite'), interactive))) {
|
|
|
1094 |
this.disabled = true;
|
|
|
1095 |
} else {
|
|
|
1096 |
this.canvasWidth = this.target.pixelWidth;
|
|
|
1097 |
this.canvasHeight = this.target.pixelHeight;
|
|
|
1098 |
}
|
|
|
1099 |
},
|
|
|
1100 |
|
|
|
1101 |
/**
|
|
|
1102 |
* Actually render the chart to the canvas
|
|
|
1103 |
*/
|
|
|
1104 |
render: function () {
|
|
|
1105 |
if (this.disabled) {
|
|
|
1106 |
this.el.innerHTML = '';
|
|
|
1107 |
return false;
|
|
|
1108 |
}
|
|
|
1109 |
return true;
|
|
|
1110 |
},
|
|
|
1111 |
|
|
|
1112 |
/**
|
|
|
1113 |
* Return a region id for a given x/y co-ordinate
|
|
|
1114 |
*/
|
|
|
1115 |
getRegion: function (x, y) {
|
|
|
1116 |
},
|
|
|
1117 |
|
|
|
1118 |
/**
|
|
|
1119 |
* Highlight an item based on the moused-over x,y co-ordinate
|
|
|
1120 |
*/
|
|
|
1121 |
setRegionHighlight: function (el, x, y) {
|
|
|
1122 |
var currentRegion = this.currentRegion,
|
|
|
1123 |
highlightEnabled = !this.options.get('disableHighlight'),
|
|
|
1124 |
newRegion;
|
|
|
1125 |
if (x > this.canvasWidth || y > this.canvasHeight || x < 0 || y < 0) {
|
|
|
1126 |
return null;
|
|
|
1127 |
}
|
|
|
1128 |
newRegion = this.getRegion(el, x, y);
|
|
|
1129 |
if (currentRegion !== newRegion) {
|
|
|
1130 |
if (currentRegion !== undefined && highlightEnabled) {
|
|
|
1131 |
this.removeHighlight();
|
|
|
1132 |
}
|
|
|
1133 |
this.currentRegion = newRegion;
|
|
|
1134 |
if (newRegion !== undefined && highlightEnabled) {
|
|
|
1135 |
this.renderHighlight();
|
|
|
1136 |
}
|
|
|
1137 |
return true;
|
|
|
1138 |
}
|
|
|
1139 |
return false;
|
|
|
1140 |
},
|
|
|
1141 |
|
|
|
1142 |
/**
|
|
|
1143 |
* Reset any currently highlighted item
|
|
|
1144 |
*/
|
|
|
1145 |
clearRegionHighlight: function () {
|
|
|
1146 |
if (this.currentRegion !== undefined) {
|
|
|
1147 |
this.removeHighlight();
|
|
|
1148 |
this.currentRegion = undefined;
|
|
|
1149 |
return true;
|
|
|
1150 |
}
|
|
|
1151 |
return false;
|
|
|
1152 |
},
|
|
|
1153 |
|
|
|
1154 |
renderHighlight: function () {
|
|
|
1155 |
this.changeHighlight(true);
|
|
|
1156 |
},
|
|
|
1157 |
|
|
|
1158 |
removeHighlight: function () {
|
|
|
1159 |
this.changeHighlight(false);
|
|
|
1160 |
},
|
|
|
1161 |
|
|
|
1162 |
changeHighlight: function (highlight) {},
|
|
|
1163 |
|
|
|
1164 |
/**
|
|
|
1165 |
* Fetch the HTML to display as a tooltip
|
|
|
1166 |
*/
|
|
|
1167 |
getCurrentRegionTooltip: function () {
|
|
|
1168 |
var options = this.options,
|
|
|
1169 |
header = '',
|
|
|
1170 |
entries = [],
|
|
|
1171 |
fields, formats, formatlen, fclass, text, i,
|
|
|
1172 |
showFields, showFieldsKey, newFields, fv,
|
|
|
1173 |
formatter, format, fieldlen, j;
|
|
|
1174 |
if (this.currentRegion === undefined) {
|
|
|
1175 |
return '';
|
|
|
1176 |
}
|
|
|
1177 |
fields = this.getCurrentRegionFields();
|
|
|
1178 |
formatter = options.get('tooltipFormatter');
|
|
|
1179 |
if (formatter) {
|
|
|
1180 |
return formatter(this, options, fields);
|
|
|
1181 |
}
|
|
|
1182 |
if (options.get('tooltipChartTitle')) {
|
|
|
1183 |
header += '<div class="jqs jqstitle">' + options.get('tooltipChartTitle') + '</div>\n';
|
|
|
1184 |
}
|
|
|
1185 |
formats = this.options.get('tooltipFormat');
|
|
|
1186 |
if (!formats) {
|
|
|
1187 |
return '';
|
|
|
1188 |
}
|
|
|
1189 |
if (!$.isArray(formats)) {
|
|
|
1190 |
formats = [formats];
|
|
|
1191 |
}
|
|
|
1192 |
if (!$.isArray(fields)) {
|
|
|
1193 |
fields = [fields];
|
|
|
1194 |
}
|
|
|
1195 |
showFields = this.options.get('tooltipFormatFieldlist');
|
|
|
1196 |
showFieldsKey = this.options.get('tooltipFormatFieldlistKey');
|
|
|
1197 |
if (showFields && showFieldsKey) {
|
|
|
1198 |
// user-selected ordering of fields
|
|
|
1199 |
newFields = [];
|
|
|
1200 |
for (i = fields.length; i--;) {
|
|
|
1201 |
fv = fields[i][showFieldsKey];
|
|
|
1202 |
if ((j = $.inArray(fv, showFields)) != -1) {
|
|
|
1203 |
newFields[j] = fields[i];
|
|
|
1204 |
}
|
|
|
1205 |
}
|
|
|
1206 |
fields = newFields;
|
|
|
1207 |
}
|
|
|
1208 |
formatlen = formats.length;
|
|
|
1209 |
fieldlen = fields.length;
|
|
|
1210 |
for (i = 0; i < formatlen; i++) {
|
|
|
1211 |
format = formats[i];
|
|
|
1212 |
if (typeof format === 'string') {
|
|
|
1213 |
format = new SPFormat(format);
|
|
|
1214 |
}
|
|
|
1215 |
fclass = format.fclass || 'jqsfield';
|
|
|
1216 |
for (j = 0; j < fieldlen; j++) {
|
|
|
1217 |
if (!fields[j].isNull || !options.get('tooltipSkipNull')) {
|
|
|
1218 |
$.extend(fields[j], {
|
|
|
1219 |
prefix: options.get('tooltipPrefix'),
|
|
|
1220 |
suffix: options.get('tooltipSuffix')
|
|
|
1221 |
});
|
|
|
1222 |
text = format.render(fields[j], options.get('tooltipValueLookups'), options);
|
|
|
1223 |
entries.push('<div class="' + fclass + '">' + text + '</div>');
|
|
|
1224 |
}
|
|
|
1225 |
}
|
|
|
1226 |
}
|
|
|
1227 |
if (entries.length) {
|
|
|
1228 |
return header + entries.join('\n');
|
|
|
1229 |
}
|
|
|
1230 |
return '';
|
|
|
1231 |
},
|
|
|
1232 |
|
|
|
1233 |
getCurrentRegionFields: function () {},
|
|
|
1234 |
|
|
|
1235 |
calcHighlightColor: function (color, options) {
|
|
|
1236 |
var highlightColor = options.get('highlightColor'),
|
|
|
1237 |
lighten = options.get('highlightLighten'),
|
|
|
1238 |
parse, mult, rgbnew, i;
|
|
|
1239 |
if (highlightColor) {
|
|
|
1240 |
return highlightColor;
|
|
|
1241 |
}
|
|
|
1242 |
if (lighten) {
|
|
|
1243 |
// extract RGB values
|
|
|
1244 |
parse = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(color) || /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(color);
|
|
|
1245 |
if (parse) {
|
|
|
1246 |
rgbnew = [];
|
|
|
1247 |
mult = color.length === 4 ? 16 : 1;
|
|
|
1248 |
for (i = 0; i < 3; i++) {
|
|
|
1249 |
rgbnew[i] = clipval(Math.round(parseInt(parse[i + 1], 16) * mult * lighten), 0, 255);
|
|
|
1250 |
}
|
|
|
1251 |
return 'rgb(' + rgbnew.join(',') + ')';
|
|
|
1252 |
}
|
|
|
1253 |
|
|
|
1254 |
}
|
|
|
1255 |
return color;
|
|
|
1256 |
}
|
|
|
1257 |
|
|
|
1258 |
});
|
|
|
1259 |
|
|
|
1260 |
barHighlightMixin = {
|
|
|
1261 |
changeHighlight: function (highlight) {
|
|
|
1262 |
var currentRegion = this.currentRegion,
|
|
|
1263 |
target = this.target,
|
|
|
1264 |
shapeids = this.regionShapes[currentRegion],
|
|
|
1265 |
newShapes;
|
|
|
1266 |
// will be null if the region value was null
|
|
|
1267 |
if (shapeids) {
|
|
|
1268 |
newShapes = this.renderRegion(currentRegion, highlight);
|
|
|
1269 |
if ($.isArray(newShapes) || $.isArray(shapeids)) {
|
|
|
1270 |
target.replaceWithShapes(shapeids, newShapes);
|
|
|
1271 |
this.regionShapes[currentRegion] = $.map(newShapes, function (newShape) {
|
|
|
1272 |
return newShape.id;
|
|
|
1273 |
});
|
|
|
1274 |
} else {
|
|
|
1275 |
target.replaceWithShape(shapeids, newShapes);
|
|
|
1276 |
this.regionShapes[currentRegion] = newShapes.id;
|
|
|
1277 |
}
|
|
|
1278 |
}
|
|
|
1279 |
},
|
|
|
1280 |
|
|
|
1281 |
render: function () {
|
|
|
1282 |
var values = this.values,
|
|
|
1283 |
target = this.target,
|
|
|
1284 |
regionShapes = this.regionShapes,
|
|
|
1285 |
shapes, ids, i, j;
|
|
|
1286 |
|
|
|
1287 |
if (!this.cls._super.render.call(this)) {
|
|
|
1288 |
return;
|
|
|
1289 |
}
|
|
|
1290 |
for (i = values.length; i--;) {
|
|
|
1291 |
shapes = this.renderRegion(i);
|
|
|
1292 |
if (shapes) {
|
|
|
1293 |
if ($.isArray(shapes)) {
|
|
|
1294 |
ids = [];
|
|
|
1295 |
for (j = shapes.length; j--;) {
|
|
|
1296 |
shapes[j].append();
|
|
|
1297 |
ids.push(shapes[j].id);
|
|
|
1298 |
}
|
|
|
1299 |
regionShapes[i] = ids;
|
|
|
1300 |
} else {
|
|
|
1301 |
shapes.append();
|
|
|
1302 |
regionShapes[i] = shapes.id; // store just the shapeid
|
|
|
1303 |
}
|
|
|
1304 |
} else {
|
|
|
1305 |
// null value
|
|
|
1306 |
regionShapes[i] = null;
|
|
|
1307 |
}
|
|
|
1308 |
}
|
|
|
1309 |
target.render();
|
|
|
1310 |
}
|
|
|
1311 |
};
|
|
|
1312 |
|
|
|
1313 |
/**
|
|
|
1314 |
* Line charts
|
|
|
1315 |
*/
|
|
|
1316 |
$.fn.sparkline.line = line = createClass($.fn.sparkline._base, {
|
|
|
1317 |
type: 'line',
|
|
|
1318 |
|
|
|
1319 |
init: function (el, values, options, width, height) {
|
|
|
1320 |
line._super.init.call(this, el, values, options, width, height);
|
|
|
1321 |
this.vertices = [];
|
|
|
1322 |
this.regionMap = [];
|
|
|
1323 |
this.xvalues = [];
|
|
|
1324 |
this.yvalues = [];
|
|
|
1325 |
this.yminmax = [];
|
|
|
1326 |
this.hightlightSpotId = null;
|
|
|
1327 |
this.lastShapeId = null;
|
|
|
1328 |
this.initTarget();
|
|
|
1329 |
},
|
|
|
1330 |
|
|
|
1331 |
getRegion: function (el, x, y) {
|
|
|
1332 |
var i,
|
|
|
1333 |
regionMap = this.regionMap; // maps regions to value positions
|
|
|
1334 |
for (i = regionMap.length; i--;) {
|
|
|
1335 |
if (regionMap[i] !== null && x >= regionMap[i][0] && x <= regionMap[i][1]) {
|
|
|
1336 |
return regionMap[i][2];
|
|
|
1337 |
}
|
|
|
1338 |
}
|
|
|
1339 |
return undefined;
|
|
|
1340 |
},
|
|
|
1341 |
|
|
|
1342 |
getCurrentRegionFields: function () {
|
|
|
1343 |
var currentRegion = this.currentRegion;
|
|
|
1344 |
return {
|
|
|
1345 |
isNull: this.yvalues[currentRegion] === null,
|
|
|
1346 |
x: this.xvalues[currentRegion],
|
|
|
1347 |
y: this.yvalues[currentRegion],
|
|
|
1348 |
color: this.options.get('lineColor'),
|
|
|
1349 |
fillColor: this.options.get('fillColor'),
|
|
|
1350 |
offset: currentRegion
|
|
|
1351 |
};
|
|
|
1352 |
},
|
|
|
1353 |
|
|
|
1354 |
renderHighlight: function () {
|
|
|
1355 |
var currentRegion = this.currentRegion,
|
|
|
1356 |
target = this.target,
|
|
|
1357 |
vertex = this.vertices[currentRegion],
|
|
|
1358 |
options = this.options,
|
|
|
1359 |
spotRadius = options.get('spotRadius'),
|
|
|
1360 |
highlightSpotColor = options.get('highlightSpotColor'),
|
|
|
1361 |
highlightLineColor = options.get('highlightLineColor'),
|
|
|
1362 |
highlightSpot, highlightLine;
|
|
|
1363 |
|
|
|
1364 |
if (!vertex) {
|
|
|
1365 |
return;
|
|
|
1366 |
}
|
|
|
1367 |
if (spotRadius && highlightSpotColor) {
|
|
|
1368 |
highlightSpot = target.drawCircle(vertex[0], vertex[1],
|
|
|
1369 |
spotRadius, undefined, highlightSpotColor);
|
|
|
1370 |
this.highlightSpotId = highlightSpot.id;
|
|
|
1371 |
target.insertAfterShape(this.lastShapeId, highlightSpot);
|
|
|
1372 |
}
|
|
|
1373 |
if (highlightLineColor) {
|
|
|
1374 |
highlightLine = target.drawLine(vertex[0], this.canvasTop, vertex[0],
|
|
|
1375 |
this.canvasTop + this.canvasHeight, highlightLineColor);
|
|
|
1376 |
this.highlightLineId = highlightLine.id;
|
|
|
1377 |
target.insertAfterShape(this.lastShapeId, highlightLine);
|
|
|
1378 |
}
|
|
|
1379 |
},
|
|
|
1380 |
|
|
|
1381 |
removeHighlight: function () {
|
|
|
1382 |
var target = this.target;
|
|
|
1383 |
if (this.highlightSpotId) {
|
|
|
1384 |
target.removeShapeId(this.highlightSpotId);
|
|
|
1385 |
this.highlightSpotId = null;
|
|
|
1386 |
}
|
|
|
1387 |
if (this.highlightLineId) {
|
|
|
1388 |
target.removeShapeId(this.highlightLineId);
|
|
|
1389 |
this.highlightLineId = null;
|
|
|
1390 |
}
|
|
|
1391 |
},
|
|
|
1392 |
|
|
|
1393 |
scanValues: function () {
|
|
|
1394 |
var values = this.values,
|
|
|
1395 |
valcount = values.length,
|
|
|
1396 |
xvalues = this.xvalues,
|
|
|
1397 |
yvalues = this.yvalues,
|
|
|
1398 |
yminmax = this.yminmax,
|
|
|
1399 |
i, val, isStr, isArray, sp;
|
|
|
1400 |
for (i = 0; i < valcount; i++) {
|
|
|
1401 |
val = values[i];
|
|
|
1402 |
isStr = typeof(values[i]) === 'string';
|
|
|
1403 |
isArray = typeof(values[i]) === 'object' && values[i] instanceof Array;
|
|
|
1404 |
sp = isStr && values[i].split(':');
|
|
|
1405 |
if (isStr && sp.length === 2) { // x:y
|
|
|
1406 |
xvalues.push(Number(sp[0]));
|
|
|
1407 |
yvalues.push(Number(sp[1]));
|
|
|
1408 |
yminmax.push(Number(sp[1]));
|
|
|
1409 |
} else if (isArray) {
|
|
|
1410 |
xvalues.push(val[0]);
|
|
|
1411 |
yvalues.push(val[1]);
|
|
|
1412 |
yminmax.push(val[1]);
|
|
|
1413 |
} else {
|
|
|
1414 |
xvalues.push(i);
|
|
|
1415 |
if (values[i] === null || values[i] === 'null') {
|
|
|
1416 |
yvalues.push(null);
|
|
|
1417 |
} else {
|
|
|
1418 |
yvalues.push(Number(val));
|
|
|
1419 |
yminmax.push(Number(val));
|
|
|
1420 |
}
|
|
|
1421 |
}
|
|
|
1422 |
}
|
|
|
1423 |
if (this.options.get('xvalues')) {
|
|
|
1424 |
xvalues = this.options.get('xvalues');
|
|
|
1425 |
}
|
|
|
1426 |
|
|
|
1427 |
this.maxy = this.maxyorg = Math.max.apply(Math, yminmax);
|
|
|
1428 |
this.miny = this.minyorg = Math.min.apply(Math, yminmax);
|
|
|
1429 |
|
|
|
1430 |
this.maxx = Math.max.apply(Math, xvalues);
|
|
|
1431 |
this.minx = Math.min.apply(Math, xvalues);
|
|
|
1432 |
|
|
|
1433 |
this.xvalues = xvalues;
|
|
|
1434 |
this.yvalues = yvalues;
|
|
|
1435 |
this.yminmax = yminmax;
|
|
|
1436 |
|
|
|
1437 |
},
|
|
|
1438 |
|
|
|
1439 |
processRangeOptions: function () {
|
|
|
1440 |
var options = this.options,
|
|
|
1441 |
normalRangeMin = options.get('normalRangeMin'),
|
|
|
1442 |
normalRangeMax = options.get('normalRangeMax');
|
|
|
1443 |
|
|
|
1444 |
if (normalRangeMin !== undefined) {
|
|
|
1445 |
if (normalRangeMin < this.miny) {
|
|
|
1446 |
this.miny = normalRangeMin;
|
|
|
1447 |
}
|
|
|
1448 |
if (normalRangeMax > this.maxy) {
|
|
|
1449 |
this.maxy = normalRangeMax;
|
|
|
1450 |
}
|
|
|
1451 |
}
|
|
|
1452 |
if (options.get('chartRangeMin') !== undefined && (options.get('chartRangeClip') || options.get('chartRangeMin') < this.miny)) {
|
|
|
1453 |
this.miny = options.get('chartRangeMin');
|
|
|
1454 |
}
|
|
|
1455 |
if (options.get('chartRangeMax') !== undefined && (options.get('chartRangeClip') || options.get('chartRangeMax') > this.maxy)) {
|
|
|
1456 |
this.maxy = options.get('chartRangeMax');
|
|
|
1457 |
}
|
|
|
1458 |
if (options.get('chartRangeMinX') !== undefined && (options.get('chartRangeClipX') || options.get('chartRangeMinX') < this.minx)) {
|
|
|
1459 |
this.minx = options.get('chartRangeMinX');
|
|
|
1460 |
}
|
|
|
1461 |
if (options.get('chartRangeMaxX') !== undefined && (options.get('chartRangeClipX') || options.get('chartRangeMaxX') > this.maxx)) {
|
|
|
1462 |
this.maxx = options.get('chartRangeMaxX');
|
|
|
1463 |
}
|
|
|
1464 |
|
|
|
1465 |
},
|
|
|
1466 |
|
|
|
1467 |
drawNormalRange: function (canvasLeft, canvasTop, canvasHeight, canvasWidth, rangey) {
|
|
|
1468 |
var normalRangeMin = this.options.get('normalRangeMin'),
|
|
|
1469 |
normalRangeMax = this.options.get('normalRangeMax'),
|
|
|
1470 |
ytop = canvasTop + Math.round(canvasHeight - (canvasHeight * ((normalRangeMax - this.miny) / rangey))),
|
|
|
1471 |
height = Math.round((canvasHeight * (normalRangeMax - normalRangeMin)) / rangey);
|
|
|
1472 |
this.target.drawRect(canvasLeft, ytop, canvasWidth, height, undefined, this.options.get('normalRangeColor')).append();
|
|
|
1473 |
},
|
|
|
1474 |
|
|
|
1475 |
render: function () {
|
|
|
1476 |
var options = this.options,
|
|
|
1477 |
target = this.target,
|
|
|
1478 |
canvasWidth = this.canvasWidth,
|
|
|
1479 |
canvasHeight = this.canvasHeight,
|
|
|
1480 |
vertices = this.vertices,
|
|
|
1481 |
spotRadius = options.get('spotRadius'),
|
|
|
1482 |
regionMap = this.regionMap,
|
|
|
1483 |
rangex, rangey, yvallast,
|
|
|
1484 |
canvasTop, canvasLeft,
|
|
|
1485 |
vertex, path, paths, x, y, xnext, xpos, xposnext,
|
|
|
1486 |
last, next, yvalcount, lineShapes, fillShapes, plen,
|
|
|
1487 |
valueSpots, color, xvalues, yvalues, i;
|
|
|
1488 |
|
|
|
1489 |
if (!line._super.render.call(this)) {
|
|
|
1490 |
return;
|
|
|
1491 |
}
|
|
|
1492 |
|
|
|
1493 |
this.scanValues();
|
|
|
1494 |
this.processRangeOptions();
|
|
|
1495 |
|
|
|
1496 |
xvalues = this.xvalues;
|
|
|
1497 |
yvalues = this.yvalues;
|
|
|
1498 |
|
|
|
1499 |
if (!this.yminmax.length || this.yvalues.length < 2) {
|
|
|
1500 |
// empty or all null valuess
|
|
|
1501 |
return;
|
|
|
1502 |
}
|
|
|
1503 |
|
|
|
1504 |
canvasTop = canvasLeft = 0;
|
|
|
1505 |
|
|
|
1506 |
rangex = this.maxx - this.minx === 0 ? 1 : this.maxx - this.minx;
|
|
|
1507 |
rangey = this.maxy - this.miny === 0 ? 1 : this.maxy - this.miny;
|
|
|
1508 |
yvallast = this.yvalues.length - 1;
|
|
|
1509 |
|
|
|
1510 |
if (spotRadius && (canvasWidth < (spotRadius * 4) || canvasHeight < (spotRadius * 4))) {
|
|
|
1511 |
spotRadius = 0;
|
|
|
1512 |
}
|
|
|
1513 |
if (spotRadius) {
|
|
|
1514 |
// adjust the canvas size as required so that spots will fit
|
|
|
1515 |
if (options.get('minSpotColor') || (options.get('spotColor') && yvalues[yvallast] === this.miny)) {
|
|
|
1516 |
canvasHeight -= Math.ceil(spotRadius);
|
|
|
1517 |
}
|
|
|
1518 |
if (options.get('maxSpotColor') || (options.get('spotColor') && yvalues[yvallast] === this.maxy)) {
|
|
|
1519 |
canvasHeight -= Math.ceil(spotRadius);
|
|
|
1520 |
canvasTop += Math.ceil(spotRadius);
|
|
|
1521 |
}
|
|
|
1522 |
if ((options.get('minSpotColor') || options.get('maxSpotColor')) && (yvalues[0] === this.miny || yvalues[0] === this.maxy)) {
|
|
|
1523 |
canvasLeft += Math.ceil(spotRadius);
|
|
|
1524 |
canvasWidth -= Math.ceil(spotRadius);
|
|
|
1525 |
}
|
|
|
1526 |
if (options.get('spotColor') ||
|
|
|
1527 |
(options.get('minSpotColor') || options.get('maxSpotColor') &&
|
|
|
1528 |
(yvalues[yvallast] === this.miny || yvalues[yvallast] === this.maxy))) {
|
|
|
1529 |
canvasWidth -= Math.ceil(spotRadius);
|
|
|
1530 |
}
|
|
|
1531 |
}
|
|
|
1532 |
|
|
|
1533 |
|
|
|
1534 |
canvasHeight--;
|
|
|
1535 |
|
|
|
1536 |
if (options.get('normalRangeMin') && !options.get('drawNormalOnTop')) {
|
|
|
1537 |
this.drawNormalRange(canvasLeft, canvasTop, canvasHeight, canvasWidth, rangey);
|
|
|
1538 |
}
|
|
|
1539 |
|
|
|
1540 |
path = [];
|
|
|
1541 |
paths = [path];
|
|
|
1542 |
last = next = null;
|
|
|
1543 |
yvalcount = yvalues.length;
|
|
|
1544 |
for (i = 0; i < yvalcount; i++) {
|
|
|
1545 |
x = xvalues[i];
|
|
|
1546 |
xnext = xvalues[i + 1];
|
|
|
1547 |
y = yvalues[i];
|
|
|
1548 |
xpos = canvasLeft + Math.round((x - this.minx) * (canvasWidth / rangex));
|
|
|
1549 |
xposnext = i < yvalcount - 1 ? canvasLeft + Math.round((xnext - this.minx) * (canvasWidth / rangex)) : canvasWidth;
|
|
|
1550 |
next = xpos + ((xposnext - xpos) / 2);
|
|
|
1551 |
regionMap[i] = [last || 0, next, i];
|
|
|
1552 |
last = next;
|
|
|
1553 |
if (y === null) {
|
|
|
1554 |
if (i) {
|
|
|
1555 |
if (yvalues[i - 1] !== null) {
|
|
|
1556 |
path = [];
|
|
|
1557 |
paths.push(path);
|
|
|
1558 |
vertices.push(null);
|
|
|
1559 |
}
|
|
|
1560 |
}
|
|
|
1561 |
} else {
|
|
|
1562 |
if (y < this.miny) {
|
|
|
1563 |
y = this.miny;
|
|
|
1564 |
}
|
|
|
1565 |
if (y > this.maxy) {
|
|
|
1566 |
y = this.maxy;
|
|
|
1567 |
}
|
|
|
1568 |
if (!path.length) {
|
|
|
1569 |
// previous value was null
|
|
|
1570 |
path.push([xpos, canvasTop + canvasHeight]);
|
|
|
1571 |
}
|
|
|
1572 |
vertex = [xpos, canvasTop + Math.round(canvasHeight - (canvasHeight * ((y - this.miny) / rangey)))];
|
|
|
1573 |
path.push(vertex);
|
|
|
1574 |
vertices.push(vertex);
|
|
|
1575 |
}
|
|
|
1576 |
}
|
|
|
1577 |
|
|
|
1578 |
lineShapes = [];
|
|
|
1579 |
fillShapes = [];
|
|
|
1580 |
plen = paths.length;
|
|
|
1581 |
for (i = 0; i < plen; i++) {
|
|
|
1582 |
path = paths[i];
|
|
|
1583 |
if (path.length) {
|
|
|
1584 |
if (options.get('fillColor')) {
|
|
|
1585 |
path.push([path[path.length - 1][0], (canvasTop + canvasHeight)]);
|
|
|
1586 |
fillShapes.push(path.slice(0));
|
|
|
1587 |
path.pop();
|
|
|
1588 |
}
|
|
|
1589 |
// if there's only a single point in this path, then we want to display it
|
|
|
1590 |
// as a vertical line which means we keep path[0] as is
|
|
|
1591 |
if (path.length > 2) {
|
|
|
1592 |
// else we want the first value
|
|
|
1593 |
path[0] = [path[0][0], path[1][1]];
|
|
|
1594 |
}
|
|
|
1595 |
lineShapes.push(path);
|
|
|
1596 |
}
|
|
|
1597 |
}
|
|
|
1598 |
|
|
|
1599 |
// draw the fill first, then optionally the normal range, then the line on top of that
|
|
|
1600 |
plen = fillShapes.length;
|
|
|
1601 |
for (i = 0; i < plen; i++) {
|
|
|
1602 |
target.drawShape(fillShapes[i],
|
|
|
1603 |
options.get('fillColor'), options.get('fillColor')).append();
|
|
|
1604 |
}
|
|
|
1605 |
|
|
|
1606 |
if (options.get('normalRangeMin') && options.get('drawNormalOnTop')) {
|
|
|
1607 |
this.drawNormalRange(canvasLeft, canvasTop, canvasHeight, canvasWidth, rangey);
|
|
|
1608 |
}
|
|
|
1609 |
|
|
|
1610 |
plen = lineShapes.length;
|
|
|
1611 |
for (i = 0; i < plen; i++) {
|
|
|
1612 |
target.drawShape(lineShapes[i], options.get('lineColor'), undefined,
|
|
|
1613 |
options.get('lineWidth')).append();
|
|
|
1614 |
}
|
|
|
1615 |
|
|
|
1616 |
if (spotRadius && options.get('valueSpots')) {
|
|
|
1617 |
valueSpots = options.get('valueSpots');
|
|
|
1618 |
if (valueSpots.get === undefined) {
|
|
|
1619 |
valueSpots = new RangeMap(valueSpots);
|
|
|
1620 |
}
|
|
|
1621 |
for (i = 0; i < yvalcount; i++) {
|
|
|
1622 |
color = valueSpots.get(yvalues[i]);
|
|
|
1623 |
if (color) {
|
|
|
1624 |
target.drawCircle(canvasLeft + Math.round((xvalues[i] - this.minx) * (canvasWidth / rangex)),
|
|
|
1625 |
canvasTop + Math.round(canvasHeight - (canvasHeight * ((yvalues[i] - this.miny) / rangey))),
|
|
|
1626 |
spotRadius, undefined,
|
|
|
1627 |
color).append();
|
|
|
1628 |
}
|
|
|
1629 |
}
|
|
|
1630 |
|
|
|
1631 |
}
|
|
|
1632 |
if (spotRadius && options.get('spotColor')) {
|
|
|
1633 |
target.drawCircle(canvasLeft + Math.round((xvalues[xvalues.length - 1] - this.minx) * (canvasWidth / rangex)),
|
|
|
1634 |
canvasTop + Math.round(canvasHeight - (canvasHeight * ((yvalues[yvallast] - this.miny) / rangey))),
|
|
|
1635 |
spotRadius, undefined,
|
|
|
1636 |
options.get('spotColor')).append();
|
|
|
1637 |
}
|
|
|
1638 |
if (this.maxy !== this.minyorg) {
|
|
|
1639 |
if (spotRadius && options.get('minSpotColor')) {
|
|
|
1640 |
x = xvalues[$.inArray(this.minyorg, yvalues)];
|
|
|
1641 |
target.drawCircle(canvasLeft + Math.round((x - this.minx) * (canvasWidth / rangex)),
|
|
|
1642 |
canvasTop + Math.round(canvasHeight - (canvasHeight * ((this.minyorg - this.miny) / rangey))),
|
|
|
1643 |
spotRadius, undefined,
|
|
|
1644 |
options.get('minSpotColor')).append();
|
|
|
1645 |
}
|
|
|
1646 |
if (spotRadius && options.get('maxSpotColor')) {
|
|
|
1647 |
x = xvalues[$.inArray(this.maxyorg, yvalues)];
|
|
|
1648 |
target.drawCircle(canvasLeft + Math.round((x - this.minx) * (canvasWidth / rangex)),
|
|
|
1649 |
canvasTop + Math.round(canvasHeight - (canvasHeight * ((this.maxyorg - this.miny) / rangey))),
|
|
|
1650 |
spotRadius, undefined,
|
|
|
1651 |
options.get('maxSpotColor')).append();
|
|
|
1652 |
}
|
|
|
1653 |
}
|
|
|
1654 |
|
|
|
1655 |
this.lastShapeId = target.getLastShapeId();
|
|
|
1656 |
this.canvasTop = canvasTop;
|
|
|
1657 |
target.render();
|
|
|
1658 |
}
|
|
|
1659 |
});
|
|
|
1660 |
|
|
|
1661 |
/**
|
|
|
1662 |
* Bar charts
|
|
|
1663 |
*/
|
|
|
1664 |
$.fn.sparkline.bar = bar = createClass($.fn.sparkline._base, barHighlightMixin, {
|
|
|
1665 |
type: 'bar',
|
|
|
1666 |
|
|
|
1667 |
init: function (el, values, options, width, height) {
|
|
|
1668 |
var barWidth = parseInt(options.get('barWidth'), 10),
|
|
|
1669 |
barSpacing = parseInt(options.get('barSpacing'), 10),
|
|
|
1670 |
chartRangeMin = options.get('chartRangeMin'),
|
|
|
1671 |
chartRangeMax = options.get('chartRangeMax'),
|
|
|
1672 |
chartRangeClip = options.get('chartRangeClip'),
|
|
|
1673 |
stackMin = Infinity,
|
|
|
1674 |
stackMax = -Infinity,
|
|
|
1675 |
isStackString, groupMin, groupMax, stackRanges,
|
|
|
1676 |
numValues, i, vlen, range, zeroAxis, xaxisOffset, min, max, clipMin, clipMax,
|
|
|
1677 |
stacked, vlist, j, slen, svals, val, yoffset, yMaxCalc, canvasHeightEf;
|
|
|
1678 |
bar._super.init.call(this, el, values, options, width, height);
|
|
|
1679 |
|
|
|
1680 |
// scan values to determine whether to stack bars
|
|
|
1681 |
for (i = 0, vlen = values.length; i < vlen; i++) {
|
|
|
1682 |
val = values[i];
|
|
|
1683 |
isStackString = typeof(val) === 'string' && val.indexOf(':') > -1;
|
|
|
1684 |
if (isStackString || $.isArray(val)) {
|
|
|
1685 |
stacked = true;
|
|
|
1686 |
if (isStackString) {
|
|
|
1687 |
val = values[i] = normalizeValues(val.split(':'));
|
|
|
1688 |
}
|
|
|
1689 |
val = remove(val, null); // min/max will treat null as zero
|
|
|
1690 |
groupMin = Math.min.apply(Math, val);
|
|
|
1691 |
groupMax = Math.max.apply(Math, val);
|
|
|
1692 |
if (groupMin < stackMin) {
|
|
|
1693 |
stackMin = groupMin;
|
|
|
1694 |
}
|
|
|
1695 |
if (groupMax > stackMax) {
|
|
|
1696 |
stackMax = groupMax;
|
|
|
1697 |
}
|
|
|
1698 |
}
|
|
|
1699 |
}
|
|
|
1700 |
|
|
|
1701 |
this.stacked = stacked;
|
|
|
1702 |
this.regionShapes = {};
|
|
|
1703 |
this.barWidth = barWidth;
|
|
|
1704 |
this.barSpacing = barSpacing;
|
|
|
1705 |
this.totalBarWidth = barWidth + barSpacing;
|
|
|
1706 |
this.width = width = (values.length * barWidth) + ((values.length - 1) * barSpacing);
|
|
|
1707 |
|
|
|
1708 |
this.initTarget();
|
|
|
1709 |
|
|
|
1710 |
if (chartRangeClip) {
|
|
|
1711 |
clipMin = chartRangeMin === undefined ? -Infinity : chartRangeMin;
|
|
|
1712 |
clipMax = chartRangeMax === undefined ? Infinity : chartRangeMax;
|
|
|
1713 |
}
|
|
|
1714 |
|
|
|
1715 |
numValues = [];
|
|
|
1716 |
stackRanges = stacked ? [] : numValues;
|
|
|
1717 |
var stackTotals = [];
|
|
|
1718 |
var stackRangesNeg = [];
|
|
|
1719 |
for (i = 0, vlen = values.length; i < vlen; i++) {
|
|
|
1720 |
if (stacked) {
|
|
|
1721 |
vlist = values[i];
|
|
|
1722 |
values[i] = svals = [];
|
|
|
1723 |
stackTotals[i] = 0;
|
|
|
1724 |
stackRanges[i] = stackRangesNeg[i] = 0;
|
|
|
1725 |
for (j = 0, slen = vlist.length; j < slen; j++) {
|
|
|
1726 |
val = svals[j] = chartRangeClip ? clipval(vlist[j], clipMin, clipMax) : vlist[j];
|
|
|
1727 |
if (val !== null) {
|
|
|
1728 |
if (val > 0) {
|
|
|
1729 |
stackTotals[i] += val;
|
|
|
1730 |
}
|
|
|
1731 |
if (stackMin < 0 && stackMax > 0) {
|
|
|
1732 |
if (val < 0) {
|
|
|
1733 |
stackRangesNeg[i] += Math.abs(val);
|
|
|
1734 |
} else {
|
|
|
1735 |
stackRanges[i] += val;
|
|
|
1736 |
}
|
|
|
1737 |
} else {
|
|
|
1738 |
stackRanges[i] += Math.abs(val - (val < 0 ? stackMax : stackMin));
|
|
|
1739 |
}
|
|
|
1740 |
numValues.push(val);
|
|
|
1741 |
}
|
|
|
1742 |
}
|
|
|
1743 |
} else {
|
|
|
1744 |
val = chartRangeClip ? clipval(values[i], clipMin, clipMax) : values[i];
|
|
|
1745 |
val = values[i] = normalizeValue(val);
|
|
|
1746 |
if (val !== null) {
|
|
|
1747 |
numValues.push(val);
|
|
|
1748 |
}
|
|
|
1749 |
}
|
|
|
1750 |
}
|
|
|
1751 |
this.max = max = Math.max.apply(Math, numValues);
|
|
|
1752 |
this.min = min = Math.min.apply(Math, numValues);
|
|
|
1753 |
this.stackMax = stackMax = stacked ? Math.max.apply(Math, stackTotals) : max;
|
|
|
1754 |
this.stackMin = stackMin = stacked ? Math.min.apply(Math, numValues) : min;
|
|
|
1755 |
|
|
|
1756 |
if (options.get('chartRangeMin') !== undefined && (options.get('chartRangeClip') || options.get('chartRangeMin') < min)) {
|
|
|
1757 |
min = options.get('chartRangeMin');
|
|
|
1758 |
}
|
|
|
1759 |
if (options.get('chartRangeMax') !== undefined && (options.get('chartRangeClip') || options.get('chartRangeMax') > max)) {
|
|
|
1760 |
max = options.get('chartRangeMax');
|
|
|
1761 |
}
|
|
|
1762 |
|
|
|
1763 |
this.zeroAxis = zeroAxis = options.get('zeroAxis', true);
|
|
|
1764 |
if (min <= 0 && max >= 0 && zeroAxis) {
|
|
|
1765 |
xaxisOffset = 0;
|
|
|
1766 |
} else if (zeroAxis == false) {
|
|
|
1767 |
xaxisOffset = min;
|
|
|
1768 |
} else if (min > 0) {
|
|
|
1769 |
xaxisOffset = min;
|
|
|
1770 |
} else {
|
|
|
1771 |
xaxisOffset = max;
|
|
|
1772 |
}
|
|
|
1773 |
this.xaxisOffset = xaxisOffset;
|
|
|
1774 |
|
|
|
1775 |
range = stacked ? (Math.max.apply(Math, stackRanges) + Math.max.apply(Math, stackRangesNeg)) : max - min;
|
|
|
1776 |
|
|
|
1777 |
// as we plot zero/min values a single pixel line, we add a pixel to all other
|
|
|
1778 |
// values - Reduce the effective canvas size to suit
|
|
|
1779 |
this.canvasHeightEf = (zeroAxis && min < 0) ? this.canvasHeight - 2 : this.canvasHeight - 1;
|
|
|
1780 |
|
|
|
1781 |
if (min < xaxisOffset) {
|
|
|
1782 |
yMaxCalc = (stacked && max >= 0) ? stackMax : max;
|
|
|
1783 |
yoffset = (yMaxCalc - xaxisOffset) / range * this.canvasHeight;
|
|
|
1784 |
if (yoffset !== Math.ceil(yoffset)) {
|
|
|
1785 |
this.canvasHeightEf -= 2;
|
|
|
1786 |
yoffset = Math.ceil(yoffset);
|
|
|
1787 |
}
|
|
|
1788 |
} else {
|
|
|
1789 |
yoffset = this.canvasHeight;
|
|
|
1790 |
}
|
|
|
1791 |
this.yoffset = yoffset;
|
|
|
1792 |
|
|
|
1793 |
if ($.isArray(options.get('colorMap'))) {
|
|
|
1794 |
this.colorMapByIndex = options.get('colorMap');
|
|
|
1795 |
this.colorMapByValue = null;
|
|
|
1796 |
} else {
|
|
|
1797 |
this.colorMapByIndex = null;
|
|
|
1798 |
this.colorMapByValue = options.get('colorMap');
|
|
|
1799 |
if (this.colorMapByValue && this.colorMapByValue.get === undefined) {
|
|
|
1800 |
this.colorMapByValue = new RangeMap(this.colorMapByValue);
|
|
|
1801 |
}
|
|
|
1802 |
}
|
|
|
1803 |
|
|
|
1804 |
this.range = range;
|
|
|
1805 |
},
|
|
|
1806 |
|
|
|
1807 |
getRegion: function (el, x, y) {
|
|
|
1808 |
var result = Math.floor(x / this.totalBarWidth);
|
|
|
1809 |
return (result < 0 || result >= this.values.length) ? undefined : result;
|
|
|
1810 |
},
|
|
|
1811 |
|
|
|
1812 |
getCurrentRegionFields: function () {
|
|
|
1813 |
var currentRegion = this.currentRegion,
|
|
|
1814 |
values = ensureArray(this.values[currentRegion]),
|
|
|
1815 |
result = [],
|
|
|
1816 |
value, i;
|
|
|
1817 |
for (i = values.length; i--;) {
|
|
|
1818 |
value = values[i];
|
|
|
1819 |
result.push({
|
|
|
1820 |
isNull: value === null,
|
|
|
1821 |
value: value,
|
|
|
1822 |
color: this.calcColor(i, value, currentRegion),
|
|
|
1823 |
offset: currentRegion
|
|
|
1824 |
});
|
|
|
1825 |
}
|
|
|
1826 |
return result;
|
|
|
1827 |
},
|
|
|
1828 |
|
|
|
1829 |
calcColor: function (stacknum, value, valuenum) {
|
|
|
1830 |
var colorMapByIndex = this.colorMapByIndex,
|
|
|
1831 |
colorMapByValue = this.colorMapByValue,
|
|
|
1832 |
options = this.options,
|
|
|
1833 |
color, newColor;
|
|
|
1834 |
if (this.stacked) {
|
|
|
1835 |
color = options.get('stackedBarColor');
|
|
|
1836 |
} else {
|
|
|
1837 |
color = (value < 0) ? options.get('negBarColor') : options.get('barColor');
|
|
|
1838 |
}
|
|
|
1839 |
if (value === 0 && options.get('zeroColor') !== undefined) {
|
|
|
1840 |
color = options.get('zeroColor');
|
|
|
1841 |
}
|
|
|
1842 |
if (colorMapByValue && (newColor = colorMapByValue.get(value))) {
|
|
|
1843 |
color = newColor;
|
|
|
1844 |
} else if (colorMapByIndex && colorMapByIndex.length > valuenum) {
|
|
|
1845 |
color = colorMapByIndex[valuenum];
|
|
|
1846 |
}
|
|
|
1847 |
return $.isArray(color) ? color[stacknum % color.length] : color;
|
|
|
1848 |
},
|
|
|
1849 |
|
|
|
1850 |
/**
|
|
|
1851 |
* Render bar(s) for a region
|
|
|
1852 |
*/
|
|
|
1853 |
renderRegion: function (valuenum, highlight) {
|
|
|
1854 |
var vals = this.values[valuenum],
|
|
|
1855 |
options = this.options,
|
|
|
1856 |
xaxisOffset = this.xaxisOffset,
|
|
|
1857 |
result = [],
|
|
|
1858 |
range = this.range,
|
|
|
1859 |
stacked = this.stacked,
|
|
|
1860 |
target = this.target,
|
|
|
1861 |
x = valuenum * this.totalBarWidth,
|
|
|
1862 |
canvasHeightEf = this.canvasHeightEf,
|
|
|
1863 |
yoffset = this.yoffset,
|
|
|
1864 |
y, height, color, isNull, yoffsetNeg, i, valcount, val, minPlotted, allMin;
|
|
|
1865 |
|
|
|
1866 |
vals = $.isArray(vals) ? vals : [vals];
|
|
|
1867 |
valcount = vals.length;
|
|
|
1868 |
val = vals[0];
|
|
|
1869 |
isNull = all(null, vals);
|
|
|
1870 |
allMin = all(xaxisOffset, vals, true);
|
|
|
1871 |
|
|
|
1872 |
if (isNull) {
|
|
|
1873 |
if (options.get('nullColor')) {
|
|
|
1874 |
color = highlight ? options.get('nullColor') : this.calcHighlightColor(options.get('nullColor'), options);
|
|
|
1875 |
y = (yoffset > 0) ? yoffset - 1 : yoffset;
|
|
|
1876 |
return target.drawRect(x, y, this.barWidth - 1, 0, color, color);
|
|
|
1877 |
} else {
|
|
|
1878 |
return undefined;
|
|
|
1879 |
}
|
|
|
1880 |
}
|
|
|
1881 |
yoffsetNeg = yoffset;
|
|
|
1882 |
for (i = 0; i < valcount; i++) {
|
|
|
1883 |
val = vals[i];
|
|
|
1884 |
|
|
|
1885 |
if (stacked && val === xaxisOffset) {
|
|
|
1886 |
if (!allMin || minPlotted) {
|
|
|
1887 |
continue;
|
|
|
1888 |
}
|
|
|
1889 |
minPlotted = true;
|
|
|
1890 |
}
|
|
|
1891 |
|
|
|
1892 |
if (range > 0) {
|
|
|
1893 |
height = Math.floor(canvasHeightEf * ((Math.abs(val - xaxisOffset) / range))) + 1;
|
|
|
1894 |
} else {
|
|
|
1895 |
height = 1;
|
|
|
1896 |
}
|
|
|
1897 |
if (val < xaxisOffset || (val === xaxisOffset && yoffset === 0)) {
|
|
|
1898 |
y = yoffsetNeg;
|
|
|
1899 |
yoffsetNeg += height;
|
|
|
1900 |
} else {
|
|
|
1901 |
y = yoffset - height;
|
|
|
1902 |
yoffset -= height;
|
|
|
1903 |
}
|
|
|
1904 |
color = this.calcColor(i, val, valuenum);
|
|
|
1905 |
if (highlight) {
|
|
|
1906 |
color = this.calcHighlightColor(color, options);
|
|
|
1907 |
}
|
|
|
1908 |
result.push(target.drawRect(x, y, this.barWidth - 1, height - 1, color, color));
|
|
|
1909 |
}
|
|
|
1910 |
if (result.length === 1) {
|
|
|
1911 |
return result[0];
|
|
|
1912 |
}
|
|
|
1913 |
return result;
|
|
|
1914 |
}
|
|
|
1915 |
});
|
|
|
1916 |
|
|
|
1917 |
/**
|
|
|
1918 |
* Tristate charts
|
|
|
1919 |
*/
|
|
|
1920 |
$.fn.sparkline.tristate = tristate = createClass($.fn.sparkline._base, barHighlightMixin, {
|
|
|
1921 |
type: 'tristate',
|
|
|
1922 |
|
|
|
1923 |
init: function (el, values, options, width, height) {
|
|
|
1924 |
var barWidth = parseInt(options.get('barWidth'), 10),
|
|
|
1925 |
barSpacing = parseInt(options.get('barSpacing'), 10);
|
|
|
1926 |
tristate._super.init.call(this, el, values, options, width, height);
|
|
|
1927 |
|
|
|
1928 |
this.regionShapes = {};
|
|
|
1929 |
this.barWidth = barWidth;
|
|
|
1930 |
this.barSpacing = barSpacing;
|
|
|
1931 |
this.totalBarWidth = barWidth + barSpacing;
|
|
|
1932 |
this.values = $.map(values, Number);
|
|
|
1933 |
this.width = width = (values.length * barWidth) + ((values.length - 1) * barSpacing);
|
|
|
1934 |
|
|
|
1935 |
if ($.isArray(options.get('colorMap'))) {
|
|
|
1936 |
this.colorMapByIndex = options.get('colorMap');
|
|
|
1937 |
this.colorMapByValue = null;
|
|
|
1938 |
} else {
|
|
|
1939 |
this.colorMapByIndex = null;
|
|
|
1940 |
this.colorMapByValue = options.get('colorMap');
|
|
|
1941 |
if (this.colorMapByValue && this.colorMapByValue.get === undefined) {
|
|
|
1942 |
this.colorMapByValue = new RangeMap(this.colorMapByValue);
|
|
|
1943 |
}
|
|
|
1944 |
}
|
|
|
1945 |
this.initTarget();
|
|
|
1946 |
},
|
|
|
1947 |
|
|
|
1948 |
getRegion: function (el, x, y) {
|
|
|
1949 |
return Math.floor(x / this.totalBarWidth);
|
|
|
1950 |
},
|
|
|
1951 |
|
|
|
1952 |
getCurrentRegionFields: function () {
|
|
|
1953 |
var currentRegion = this.currentRegion;
|
|
|
1954 |
return {
|
|
|
1955 |
isNull: this.values[currentRegion] === undefined,
|
|
|
1956 |
value: this.values[currentRegion],
|
|
|
1957 |
color: this.calcColor(this.values[currentRegion], currentRegion),
|
|
|
1958 |
offset: currentRegion
|
|
|
1959 |
};
|
|
|
1960 |
},
|
|
|
1961 |
|
|
|
1962 |
calcColor: function (value, valuenum) {
|
|
|
1963 |
var values = this.values,
|
|
|
1964 |
options = this.options,
|
|
|
1965 |
colorMapByIndex = this.colorMapByIndex,
|
|
|
1966 |
colorMapByValue = this.colorMapByValue,
|
|
|
1967 |
color, newColor;
|
|
|
1968 |
|
|
|
1969 |
if (colorMapByValue && (newColor = colorMapByValue.get(value))) {
|
|
|
1970 |
color = newColor;
|
|
|
1971 |
} else if (colorMapByIndex && colorMapByIndex.length > valuenum) {
|
|
|
1972 |
color = colorMapByIndex[valuenum];
|
|
|
1973 |
} else if (values[valuenum] < 0) {
|
|
|
1974 |
color = options.get('negBarColor');
|
|
|
1975 |
} else if (values[valuenum] > 0) {
|
|
|
1976 |
color = options.get('posBarColor');
|
|
|
1977 |
} else {
|
|
|
1978 |
color = options.get('zeroBarColor');
|
|
|
1979 |
}
|
|
|
1980 |
return color;
|
|
|
1981 |
},
|
|
|
1982 |
|
|
|
1983 |
renderRegion: function (valuenum, highlight) {
|
|
|
1984 |
var values = this.values,
|
|
|
1985 |
options = this.options,
|
|
|
1986 |
target = this.target,
|
|
|
1987 |
canvasHeight, height, halfHeight,
|
|
|
1988 |
x, y, color;
|
|
|
1989 |
|
|
|
1990 |
canvasHeight = target.pixelHeight;
|
|
|
1991 |
halfHeight = Math.round(canvasHeight / 2);
|
|
|
1992 |
|
|
|
1993 |
x = valuenum * this.totalBarWidth;
|
|
|
1994 |
if (values[valuenum] < 0) {
|
|
|
1995 |
y = halfHeight;
|
|
|
1996 |
height = halfHeight - 1;
|
|
|
1997 |
} else if (values[valuenum] > 0) {
|
|
|
1998 |
y = 0;
|
|
|
1999 |
height = halfHeight - 1;
|
|
|
2000 |
} else {
|
|
|
2001 |
y = halfHeight - 1;
|
|
|
2002 |
height = 2;
|
|
|
2003 |
}
|
|
|
2004 |
color = this.calcColor(values[valuenum], valuenum);
|
|
|
2005 |
if (color === null) {
|
|
|
2006 |
return;
|
|
|
2007 |
}
|
|
|
2008 |
if (highlight) {
|
|
|
2009 |
color = this.calcHighlightColor(color, options);
|
|
|
2010 |
}
|
|
|
2011 |
return target.drawRect(x, y, this.barWidth - 1, height - 1, color, color);
|
|
|
2012 |
}
|
|
|
2013 |
});
|
|
|
2014 |
|
|
|
2015 |
/**
|
|
|
2016 |
* Discrete charts
|
|
|
2017 |
*/
|
|
|
2018 |
$.fn.sparkline.discrete = discrete = createClass($.fn.sparkline._base, barHighlightMixin, {
|
|
|
2019 |
type: 'discrete',
|
|
|
2020 |
|
|
|
2021 |
init: function (el, values, options, width, height) {
|
|
|
2022 |
discrete._super.init.call(this, el, values, options, width, height);
|
|
|
2023 |
|
|
|
2024 |
this.regionShapes = {};
|
|
|
2025 |
this.values = values = $.map(values, Number);
|
|
|
2026 |
this.min = Math.min.apply(Math, values);
|
|
|
2027 |
this.max = Math.max.apply(Math, values);
|
|
|
2028 |
this.range = this.max - this.min;
|
|
|
2029 |
this.width = width = options.get('width') === 'auto' ? values.length * 2 : this.width;
|
|
|
2030 |
this.interval = Math.floor(width / values.length);
|
|
|
2031 |
this.itemWidth = width / values.length;
|
|
|
2032 |
if (options.get('chartRangeMin') !== undefined && (options.get('chartRangeClip') || options.get('chartRangeMin') < this.min)) {
|
|
|
2033 |
this.min = options.get('chartRangeMin');
|
|
|
2034 |
}
|
|
|
2035 |
if (options.get('chartRangeMax') !== undefined && (options.get('chartRangeClip') || options.get('chartRangeMax') > this.max)) {
|
|
|
2036 |
this.max = options.get('chartRangeMax');
|
|
|
2037 |
}
|
|
|
2038 |
this.initTarget();
|
|
|
2039 |
if (this.target) {
|
|
|
2040 |
this.lineHeight = options.get('lineHeight') === 'auto' ? Math.round(this.canvasHeight * 0.3) : options.get('lineHeight');
|
|
|
2041 |
}
|
|
|
2042 |
},
|
|
|
2043 |
|
|
|
2044 |
getRegion: function (el, x, y) {
|
|
|
2045 |
return Math.floor(x / this.itemWidth);
|
|
|
2046 |
},
|
|
|
2047 |
|
|
|
2048 |
getCurrentRegionFields: function () {
|
|
|
2049 |
var currentRegion = this.currentRegion;
|
|
|
2050 |
return {
|
|
|
2051 |
isNull: this.values[currentRegion] === undefined,
|
|
|
2052 |
value: this.values[currentRegion],
|
|
|
2053 |
offset: currentRegion
|
|
|
2054 |
};
|
|
|
2055 |
},
|
|
|
2056 |
|
|
|
2057 |
renderRegion: function (valuenum, highlight) {
|
|
|
2058 |
var values = this.values,
|
|
|
2059 |
options = this.options,
|
|
|
2060 |
min = this.min,
|
|
|
2061 |
max = this.max,
|
|
|
2062 |
range = this.range,
|
|
|
2063 |
interval = this.interval,
|
|
|
2064 |
target = this.target,
|
|
|
2065 |
canvasHeight = this.canvasHeight,
|
|
|
2066 |
lineHeight = this.lineHeight,
|
|
|
2067 |
pheight = canvasHeight - lineHeight,
|
|
|
2068 |
ytop, val, color, x;
|
|
|
2069 |
|
|
|
2070 |
val = clipval(values[valuenum], min, max);
|
|
|
2071 |
x = valuenum * interval;
|
|
|
2072 |
ytop = Math.round(pheight - pheight * ((val - min) / range));
|
|
|
2073 |
color = (options.get('thresholdColor') && val < options.get('thresholdValue')) ? options.get('thresholdColor') : options.get('lineColor');
|
|
|
2074 |
if (highlight) {
|
|
|
2075 |
color = this.calcHighlightColor(color, options);
|
|
|
2076 |
}
|
|
|
2077 |
return target.drawLine(x, ytop, x, ytop + lineHeight, color);
|
|
|
2078 |
}
|
|
|
2079 |
});
|
|
|
2080 |
|
|
|
2081 |
/**
|
|
|
2082 |
* Bullet charts
|
|
|
2083 |
*/
|
|
|
2084 |
$.fn.sparkline.bullet = bullet = createClass($.fn.sparkline._base, {
|
|
|
2085 |
type: 'bullet',
|
|
|
2086 |
|
|
|
2087 |
init: function (el, values, options, width, height) {
|
|
|
2088 |
var min, max;
|
|
|
2089 |
bullet._super.init.call(this, el, values, options, width, height);
|
|
|
2090 |
|
|
|
2091 |
// values: target, performance, range1, range2, range3
|
|
|
2092 |
values = $.map(values, Number);
|
|
|
2093 |
min = Math.min.apply(Math, values);
|
|
|
2094 |
max = Math.max.apply(Math, values);
|
|
|
2095 |
if (options.get('base') === undefined) {
|
|
|
2096 |
min = min < 0 ? min : 0;
|
|
|
2097 |
} else {
|
|
|
2098 |
min = options.get('base');
|
|
|
2099 |
}
|
|
|
2100 |
this.min = min;
|
|
|
2101 |
this.max = max;
|
|
|
2102 |
this.range = max - min;
|
|
|
2103 |
this.shapes = {};
|
|
|
2104 |
this.valueShapes = {};
|
|
|
2105 |
this.regiondata = {};
|
|
|
2106 |
this.width = width = options.get('width') === 'auto' ? '4.0em' : width;
|
|
|
2107 |
this.target = this.$el.simpledraw(width, height, options.get('composite'));
|
|
|
2108 |
if (!values.length) {
|
|
|
2109 |
this.disabled = true;
|
|
|
2110 |
}
|
|
|
2111 |
this.initTarget();
|
|
|
2112 |
},
|
|
|
2113 |
|
|
|
2114 |
getRegion: function (el, x, y) {
|
|
|
2115 |
var shapeid = this.target.getShapeAt(el, x, y);
|
|
|
2116 |
return (shapeid !== undefined && this.shapes[shapeid] !== undefined) ? this.shapes[shapeid] : undefined;
|
|
|
2117 |
},
|
|
|
2118 |
|
|
|
2119 |
getCurrentRegionFields: function () {
|
|
|
2120 |
var currentRegion = this.currentRegion;
|
|
|
2121 |
return {
|
|
|
2122 |
fieldkey: currentRegion.substr(0, 1),
|
|
|
2123 |
value: this.values[currentRegion.substr(1)],
|
|
|
2124 |
region: currentRegion
|
|
|
2125 |
};
|
|
|
2126 |
},
|
|
|
2127 |
|
|
|
2128 |
changeHighlight: function (highlight) {
|
|
|
2129 |
var currentRegion = this.currentRegion,
|
|
|
2130 |
shapeid = this.valueShapes[currentRegion],
|
|
|
2131 |
shape;
|
|
|
2132 |
delete this.shapes[shapeid];
|
|
|
2133 |
switch (currentRegion.substr(0, 1)) {
|
|
|
2134 |
case 'r':
|
|
|
2135 |
shape = this.renderRange(currentRegion.substr(1), highlight);
|
|
|
2136 |
break;
|
|
|
2137 |
case 'p':
|
|
|
2138 |
shape = this.renderPerformance(highlight);
|
|
|
2139 |
break;
|
|
|
2140 |
case 't':
|
|
|
2141 |
shape = this.renderTarget(highlight);
|
|
|
2142 |
break;
|
|
|
2143 |
}
|
|
|
2144 |
this.valueShapes[currentRegion] = shape.id;
|
|
|
2145 |
this.shapes[shape.id] = currentRegion;
|
|
|
2146 |
this.target.replaceWithShape(shapeid, shape);
|
|
|
2147 |
},
|
|
|
2148 |
|
|
|
2149 |
renderRange: function (rn, highlight) {
|
|
|
2150 |
var rangeval = this.values[rn],
|
|
|
2151 |
rangewidth = Math.round(this.canvasWidth * ((rangeval - this.min) / this.range)),
|
|
|
2152 |
color = this.options.get('rangeColors')[rn - 2];
|
|
|
2153 |
if (highlight) {
|
|
|
2154 |
color = this.calcHighlightColor(color, this.options);
|
|
|
2155 |
}
|
|
|
2156 |
return this.target.drawRect(0, 0, rangewidth - 1, this.canvasHeight - 1, color, color);
|
|
|
2157 |
},
|
|
|
2158 |
|
|
|
2159 |
renderPerformance: function (highlight) {
|
|
|
2160 |
var perfval = this.values[1],
|
|
|
2161 |
perfwidth = Math.round(this.canvasWidth * ((perfval - this.min) / this.range)),
|
|
|
2162 |
color = this.options.get('performanceColor');
|
|
|
2163 |
if (highlight) {
|
|
|
2164 |
color = this.calcHighlightColor(color, this.options);
|
|
|
2165 |
}
|
|
|
2166 |
return this.target.drawRect(0, Math.round(this.canvasHeight * 0.3), perfwidth - 1,
|
|
|
2167 |
Math.round(this.canvasHeight * 0.4) - 1, color, color);
|
|
|
2168 |
},
|
|
|
2169 |
|
|
|
2170 |
renderTarget: function (highlight) {
|
|
|
2171 |
var targetval = this.values[0],
|
|
|
2172 |
x = Math.round(this.canvasWidth * ((targetval - this.min) / this.range) - (this.options.get('targetWidth') / 2)),
|
|
|
2173 |
targettop = Math.round(this.canvasHeight * 0.10),
|
|
|
2174 |
targetheight = this.canvasHeight - (targettop * 2),
|
|
|
2175 |
color = this.options.get('targetColor');
|
|
|
2176 |
if (highlight) {
|
|
|
2177 |
color = this.calcHighlightColor(color, this.options);
|
|
|
2178 |
}
|
|
|
2179 |
return this.target.drawRect(x, targettop, this.options.get('targetWidth') - 1, targetheight - 1, color, color);
|
|
|
2180 |
},
|
|
|
2181 |
|
|
|
2182 |
render: function () {
|
|
|
2183 |
var vlen = this.values.length,
|
|
|
2184 |
target = this.target,
|
|
|
2185 |
i, shape;
|
|
|
2186 |
if (!bullet._super.render.call(this)) {
|
|
|
2187 |
return;
|
|
|
2188 |
}
|
|
|
2189 |
for (i = 2; i < vlen; i++) {
|
|
|
2190 |
shape = this.renderRange(i).append();
|
|
|
2191 |
this.shapes[shape.id] = 'r' + i;
|
|
|
2192 |
this.valueShapes['r' + i] = shape.id;
|
|
|
2193 |
}
|
|
|
2194 |
shape = this.renderPerformance().append();
|
|
|
2195 |
this.shapes[shape.id] = 'p1';
|
|
|
2196 |
this.valueShapes.p1 = shape.id;
|
|
|
2197 |
shape = this.renderTarget().append();
|
|
|
2198 |
this.shapes[shape.id] = 't0';
|
|
|
2199 |
this.valueShapes.t0 = shape.id;
|
|
|
2200 |
target.render();
|
|
|
2201 |
}
|
|
|
2202 |
});
|
|
|
2203 |
|
|
|
2204 |
/**
|
|
|
2205 |
* Pie charts
|
|
|
2206 |
*/
|
|
|
2207 |
$.fn.sparkline.pie = pie = createClass($.fn.sparkline._base, {
|
|
|
2208 |
type: 'pie',
|
|
|
2209 |
|
|
|
2210 |
init: function (el, values, options, width, height) {
|
|
|
2211 |
var total = 0, i;
|
|
|
2212 |
|
|
|
2213 |
pie._super.init.call(this, el, values, options, width, height);
|
|
|
2214 |
|
|
|
2215 |
this.shapes = {}; // map shape ids to value offsets
|
|
|
2216 |
this.valueShapes = {}; // maps value offsets to shape ids
|
|
|
2217 |
this.values = values = $.map(values, Number);
|
|
|
2218 |
|
|
|
2219 |
if (options.get('width') === 'auto') {
|
|
|
2220 |
this.width = this.height;
|
|
|
2221 |
}
|
|
|
2222 |
|
|
|
2223 |
if (values.length > 0) {
|
|
|
2224 |
for (i = values.length; i--;) {
|
|
|
2225 |
total += values[i];
|
|
|
2226 |
}
|
|
|
2227 |
}
|
|
|
2228 |
this.total = total;
|
|
|
2229 |
this.initTarget();
|
|
|
2230 |
this.radius = Math.floor(Math.min(this.canvasWidth, this.canvasHeight) / 2);
|
|
|
2231 |
},
|
|
|
2232 |
|
|
|
2233 |
getRegion: function (el, x, y) {
|
|
|
2234 |
var shapeid = this.target.getShapeAt(el, x, y);
|
|
|
2235 |
return (shapeid !== undefined && this.shapes[shapeid] !== undefined) ? this.shapes[shapeid] : undefined;
|
|
|
2236 |
},
|
|
|
2237 |
|
|
|
2238 |
getCurrentRegionFields: function () {
|
|
|
2239 |
var currentRegion = this.currentRegion;
|
|
|
2240 |
return {
|
|
|
2241 |
isNull: this.values[currentRegion] === undefined,
|
|
|
2242 |
value: this.values[currentRegion],
|
|
|
2243 |
percent: this.values[currentRegion] / this.total * 100,
|
|
|
2244 |
color: this.options.get('sliceColors')[currentRegion % this.options.get('sliceColors').length],
|
|
|
2245 |
offset: currentRegion
|
|
|
2246 |
};
|
|
|
2247 |
},
|
|
|
2248 |
|
|
|
2249 |
changeHighlight: function (highlight) {
|
|
|
2250 |
var currentRegion = this.currentRegion,
|
|
|
2251 |
newslice = this.renderSlice(currentRegion, highlight),
|
|
|
2252 |
shapeid = this.valueShapes[currentRegion];
|
|
|
2253 |
delete this.shapes[shapeid];
|
|
|
2254 |
this.target.replaceWithShape(shapeid, newslice);
|
|
|
2255 |
this.valueShapes[currentRegion] = newslice.id;
|
|
|
2256 |
this.shapes[newslice.id] = currentRegion;
|
|
|
2257 |
},
|
|
|
2258 |
|
|
|
2259 |
renderSlice: function (valuenum, highlight) {
|
|
|
2260 |
var target = this.target,
|
|
|
2261 |
options = this.options,
|
|
|
2262 |
radius = this.radius,
|
|
|
2263 |
borderWidth = options.get('borderWidth'),
|
|
|
2264 |
offset = options.get('offset'),
|
|
|
2265 |
circle = 2 * Math.PI,
|
|
|
2266 |
values = this.values,
|
|
|
2267 |
total = this.total,
|
|
|
2268 |
next = offset ? (2*Math.PI)*(offset/360) : 0,
|
|
|
2269 |
start, end, i, vlen, color;
|
|
|
2270 |
|
|
|
2271 |
vlen = values.length;
|
|
|
2272 |
for (i = 0; i < vlen; i++) {
|
|
|
2273 |
start = next;
|
|
|
2274 |
end = next;
|
|
|
2275 |
if (total > 0) { // avoid divide by zero
|
|
|
2276 |
end = next + (circle * (values[i] / total));
|
|
|
2277 |
}
|
|
|
2278 |
if (valuenum === i) {
|
|
|
2279 |
color = options.get('sliceColors')[i % options.get('sliceColors').length];
|
|
|
2280 |
if (highlight) {
|
|
|
2281 |
color = this.calcHighlightColor(color, options);
|
|
|
2282 |
}
|
|
|
2283 |
|
|
|
2284 |
return target.drawPieSlice(radius, radius, radius - borderWidth, start, end, undefined, color);
|
|
|
2285 |
}
|
|
|
2286 |
next = end;
|
|
|
2287 |
}
|
|
|
2288 |
},
|
|
|
2289 |
|
|
|
2290 |
render: function () {
|
|
|
2291 |
var target = this.target,
|
|
|
2292 |
values = this.values,
|
|
|
2293 |
options = this.options,
|
|
|
2294 |
radius = this.radius,
|
|
|
2295 |
borderWidth = options.get('borderWidth'),
|
|
|
2296 |
shape, i;
|
|
|
2297 |
|
|
|
2298 |
if (!pie._super.render.call(this)) {
|
|
|
2299 |
return;
|
|
|
2300 |
}
|
|
|
2301 |
if (borderWidth) {
|
|
|
2302 |
target.drawCircle(radius, radius, Math.floor(radius - (borderWidth / 2)),
|
|
|
2303 |
options.get('borderColor'), undefined, borderWidth).append();
|
|
|
2304 |
}
|
|
|
2305 |
for (i = values.length; i--;) {
|
|
|
2306 |
shape = this.renderSlice(i).append();
|
|
|
2307 |
this.valueShapes[i] = shape.id; // store just the shapeid
|
|
|
2308 |
this.shapes[shape.id] = i;
|
|
|
2309 |
}
|
|
|
2310 |
target.render();
|
|
|
2311 |
}
|
|
|
2312 |
});
|
|
|
2313 |
|
|
|
2314 |
/**
|
|
|
2315 |
* Box plots
|
|
|
2316 |
*/
|
|
|
2317 |
$.fn.sparkline.box = box = createClass($.fn.sparkline._base, {
|
|
|
2318 |
type: 'box',
|
|
|
2319 |
|
|
|
2320 |
init: function (el, values, options, width, height) {
|
|
|
2321 |
box._super.init.call(this, el, values, options, width, height);
|
|
|
2322 |
this.values = $.map(values, Number);
|
|
|
2323 |
this.width = options.get('width') === 'auto' ? '4.0em' : width;
|
|
|
2324 |
this.initTarget();
|
|
|
2325 |
if (!this.values.length) {
|
|
|
2326 |
this.disabled = 1;
|
|
|
2327 |
}
|
|
|
2328 |
},
|
|
|
2329 |
|
|
|
2330 |
/**
|
|
|
2331 |
* Simulate a single region
|
|
|
2332 |
*/
|
|
|
2333 |
getRegion: function () {
|
|
|
2334 |
return 1;
|
|
|
2335 |
},
|
|
|
2336 |
|
|
|
2337 |
getCurrentRegionFields: function () {
|
|
|
2338 |
var result = [
|
|
|
2339 |
{ field: 'lq', value: this.quartiles[0] },
|
|
|
2340 |
{ field: 'med', value: this.quartiles[1] },
|
|
|
2341 |
{ field: 'uq', value: this.quartiles[2] },
|
|
|
2342 |
{ field: 'lo', value: this.loutlier },
|
|
|
2343 |
{ field: 'ro', value: this.routlier }
|
|
|
2344 |
];
|
|
|
2345 |
if (this.lwhisker !== undefined) {
|
|
|
2346 |
result.push({ field: 'lw', value: this.lwhisker});
|
|
|
2347 |
}
|
|
|
2348 |
if (this.rwhisker !== undefined) {
|
|
|
2349 |
result.push({ field: 'rw', value: this.rwhisker});
|
|
|
2350 |
}
|
|
|
2351 |
return result;
|
|
|
2352 |
},
|
|
|
2353 |
|
|
|
2354 |
render: function () {
|
|
|
2355 |
var target = this.target,
|
|
|
2356 |
values = this.values,
|
|
|
2357 |
vlen = values.length,
|
|
|
2358 |
options = this.options,
|
|
|
2359 |
canvasWidth = this.canvasWidth,
|
|
|
2360 |
canvasHeight = this.canvasHeight,
|
|
|
2361 |
minValue = options.get('chartRangeMin') === undefined ? Math.min.apply(Math, values) : options.get('chartRangeMin'),
|
|
|
2362 |
maxValue = options.get('chartRangeMax') === undefined ? Math.max.apply(Math, values) : options.get('chartRangeMax'),
|
|
|
2363 |
canvasLeft = 0,
|
|
|
2364 |
lwhisker, loutlier, iqr, q1, q2, q3, rwhisker, routlier, i,
|
|
|
2365 |
size, unitSize;
|
|
|
2366 |
|
|
|
2367 |
if (!box._super.render.call(this)) {
|
|
|
2368 |
return;
|
|
|
2369 |
}
|
|
|
2370 |
|
|
|
2371 |
if (options.get('raw')) {
|
|
|
2372 |
if (options.get('showOutliers') && values.length > 5) {
|
|
|
2373 |
loutlier = values[0];
|
|
|
2374 |
lwhisker = values[1];
|
|
|
2375 |
q1 = values[2];
|
|
|
2376 |
q2 = values[3];
|
|
|
2377 |
q3 = values[4];
|
|
|
2378 |
rwhisker = values[5];
|
|
|
2379 |
routlier = values[6];
|
|
|
2380 |
} else {
|
|
|
2381 |
lwhisker = values[0];
|
|
|
2382 |
q1 = values[1];
|
|
|
2383 |
q2 = values[2];
|
|
|
2384 |
q3 = values[3];
|
|
|
2385 |
rwhisker = values[4];
|
|
|
2386 |
}
|
|
|
2387 |
} else {
|
|
|
2388 |
values.sort(function (a, b) { return a - b; });
|
|
|
2389 |
q1 = quartile(values, 1);
|
|
|
2390 |
q2 = quartile(values, 2);
|
|
|
2391 |
q3 = quartile(values, 3);
|
|
|
2392 |
iqr = q3 - q1;
|
|
|
2393 |
if (options.get('showOutliers')) {
|
|
|
2394 |
lwhisker = rwhisker = undefined;
|
|
|
2395 |
for (i = 0; i < vlen; i++) {
|
|
|
2396 |
if (lwhisker === undefined && values[i] > q1 - (iqr * options.get('outlierIQR'))) {
|
|
|
2397 |
lwhisker = values[i];
|
|
|
2398 |
}
|
|
|
2399 |
if (values[i] < q3 + (iqr * options.get('outlierIQR'))) {
|
|
|
2400 |
rwhisker = values[i];
|
|
|
2401 |
}
|
|
|
2402 |
}
|
|
|
2403 |
loutlier = values[0];
|
|
|
2404 |
routlier = values[vlen - 1];
|
|
|
2405 |
} else {
|
|
|
2406 |
lwhisker = values[0];
|
|
|
2407 |
rwhisker = values[vlen - 1];
|
|
|
2408 |
}
|
|
|
2409 |
}
|
|
|
2410 |
this.quartiles = [q1, q2, q3];
|
|
|
2411 |
this.lwhisker = lwhisker;
|
|
|
2412 |
this.rwhisker = rwhisker;
|
|
|
2413 |
this.loutlier = loutlier;
|
|
|
2414 |
this.routlier = routlier;
|
|
|
2415 |
|
|
|
2416 |
unitSize = canvasWidth / (maxValue - minValue + 1);
|
|
|
2417 |
if (options.get('showOutliers')) {
|
|
|
2418 |
canvasLeft = Math.ceil(options.get('spotRadius'));
|
|
|
2419 |
canvasWidth -= 2 * Math.ceil(options.get('spotRadius'));
|
|
|
2420 |
unitSize = canvasWidth / (maxValue - minValue + 1);
|
|
|
2421 |
if (loutlier < lwhisker) {
|
|
|
2422 |
target.drawCircle((loutlier - minValue) * unitSize + canvasLeft,
|
|
|
2423 |
canvasHeight / 2,
|
|
|
2424 |
options.get('spotRadius'),
|
|
|
2425 |
options.get('outlierLineColor'),
|
|
|
2426 |
options.get('outlierFillColor')).append();
|
|
|
2427 |
}
|
|
|
2428 |
if (routlier > rwhisker) {
|
|
|
2429 |
target.drawCircle((routlier - minValue) * unitSize + canvasLeft,
|
|
|
2430 |
canvasHeight / 2,
|
|
|
2431 |
options.get('spotRadius'),
|
|
|
2432 |
options.get('outlierLineColor'),
|
|
|
2433 |
options.get('outlierFillColor')).append();
|
|
|
2434 |
}
|
|
|
2435 |
}
|
|
|
2436 |
|
|
|
2437 |
// box
|
|
|
2438 |
target.drawRect(
|
|
|
2439 |
Math.round((q1 - minValue) * unitSize + canvasLeft),
|
|
|
2440 |
Math.round(canvasHeight * 0.1),
|
|
|
2441 |
Math.round((q3 - q1) * unitSize),
|
|
|
2442 |
Math.round(canvasHeight * 0.8),
|
|
|
2443 |
options.get('boxLineColor'),
|
|
|
2444 |
options.get('boxFillColor')).append();
|
|
|
2445 |
// left whisker
|
|
|
2446 |
target.drawLine(
|
|
|
2447 |
Math.round((lwhisker - minValue) * unitSize + canvasLeft),
|
|
|
2448 |
Math.round(canvasHeight / 2),
|
|
|
2449 |
Math.round((q1 - minValue) * unitSize + canvasLeft),
|
|
|
2450 |
Math.round(canvasHeight / 2),
|
|
|
2451 |
options.get('lineColor')).append();
|
|
|
2452 |
target.drawLine(
|
|
|
2453 |
Math.round((lwhisker - minValue) * unitSize + canvasLeft),
|
|
|
2454 |
Math.round(canvasHeight / 4),
|
|
|
2455 |
Math.round((lwhisker - minValue) * unitSize + canvasLeft),
|
|
|
2456 |
Math.round(canvasHeight - canvasHeight / 4),
|
|
|
2457 |
options.get('whiskerColor')).append();
|
|
|
2458 |
// right whisker
|
|
|
2459 |
target.drawLine(Math.round((rwhisker - minValue) * unitSize + canvasLeft),
|
|
|
2460 |
Math.round(canvasHeight / 2),
|
|
|
2461 |
Math.round((q3 - minValue) * unitSize + canvasLeft),
|
|
|
2462 |
Math.round(canvasHeight / 2),
|
|
|
2463 |
options.get('lineColor')).append();
|
|
|
2464 |
target.drawLine(
|
|
|
2465 |
Math.round((rwhisker - minValue) * unitSize + canvasLeft),
|
|
|
2466 |
Math.round(canvasHeight / 4),
|
|
|
2467 |
Math.round((rwhisker - minValue) * unitSize + canvasLeft),
|
|
|
2468 |
Math.round(canvasHeight - canvasHeight / 4),
|
|
|
2469 |
options.get('whiskerColor')).append();
|
|
|
2470 |
// median line
|
|
|
2471 |
target.drawLine(
|
|
|
2472 |
Math.round((q2 - minValue) * unitSize + canvasLeft),
|
|
|
2473 |
Math.round(canvasHeight * 0.1),
|
|
|
2474 |
Math.round((q2 - minValue) * unitSize + canvasLeft),
|
|
|
2475 |
Math.round(canvasHeight * 0.9),
|
|
|
2476 |
options.get('medianColor')).append();
|
|
|
2477 |
if (options.get('target')) {
|
|
|
2478 |
size = Math.ceil(options.get('spotRadius'));
|
|
|
2479 |
target.drawLine(
|
|
|
2480 |
Math.round((options.get('target') - minValue) * unitSize + canvasLeft),
|
|
|
2481 |
Math.round((canvasHeight / 2) - size),
|
|
|
2482 |
Math.round((options.get('target') - minValue) * unitSize + canvasLeft),
|
|
|
2483 |
Math.round((canvasHeight / 2) + size),
|
|
|
2484 |
options.get('targetColor')).append();
|
|
|
2485 |
target.drawLine(
|
|
|
2486 |
Math.round((options.get('target') - minValue) * unitSize + canvasLeft - size),
|
|
|
2487 |
Math.round(canvasHeight / 2),
|
|
|
2488 |
Math.round((options.get('target') - minValue) * unitSize + canvasLeft + size),
|
|
|
2489 |
Math.round(canvasHeight / 2),
|
|
|
2490 |
options.get('targetColor')).append();
|
|
|
2491 |
}
|
|
|
2492 |
target.render();
|
|
|
2493 |
}
|
|
|
2494 |
});
|
|
|
2495 |
|
|
|
2496 |
// Setup a very simple "virtual canvas" to make drawing the few shapes we need easier
|
|
|
2497 |
// This is accessible as $(foo).simpledraw()
|
|
|
2498 |
|
|
|
2499 |
if ($.browser.msie && !document.namespaces.v) {
|
|
|
2500 |
document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', '#default#VML');
|
|
|
2501 |
}
|
|
|
2502 |
|
|
|
2503 |
if ($.browser.hasCanvas === undefined) {
|
|
|
2504 |
$.browser.hasCanvas = document.createElement('canvas').getContext !== undefined;
|
|
|
2505 |
}
|
|
|
2506 |
|
|
|
2507 |
VShape = createClass({
|
|
|
2508 |
init: function (target, id, type, args) {
|
|
|
2509 |
this.target = target;
|
|
|
2510 |
this.id = id;
|
|
|
2511 |
this.type = type;
|
|
|
2512 |
this.args = args;
|
|
|
2513 |
},
|
|
|
2514 |
append: function () {
|
|
|
2515 |
this.target.appendShape(this);
|
|
|
2516 |
return this;
|
|
|
2517 |
}
|
|
|
2518 |
});
|
|
|
2519 |
|
|
|
2520 |
VCanvas_base = createClass({
|
|
|
2521 |
_pxregex: /(\d+)(px)?\s*$/i,
|
|
|
2522 |
|
|
|
2523 |
init: function (width, height, target) {
|
|
|
2524 |
if (!width) {
|
|
|
2525 |
return;
|
|
|
2526 |
}
|
|
|
2527 |
this.width = width;
|
|
|
2528 |
this.height = height;
|
|
|
2529 |
this.target = target;
|
|
|
2530 |
this.lastShapeId = null;
|
|
|
2531 |
if (target[0]) {
|
|
|
2532 |
target = target[0];
|
|
|
2533 |
}
|
|
|
2534 |
$.data(target, '_jqs_vcanvas', this);
|
|
|
2535 |
},
|
|
|
2536 |
|
|
|
2537 |
drawLine: function (x1, y1, x2, y2, lineColor, lineWidth) {
|
|
|
2538 |
return this.drawShape([[x1, y1], [x2, y2]], lineColor, lineWidth);
|
|
|
2539 |
},
|
|
|
2540 |
|
|
|
2541 |
drawShape: function (path, lineColor, fillColor, lineWidth) {
|
|
|
2542 |
return this._genShape('Shape', [path, lineColor, fillColor, lineWidth]);
|
|
|
2543 |
},
|
|
|
2544 |
|
|
|
2545 |
drawCircle: function (x, y, radius, lineColor, fillColor, lineWidth) {
|
|
|
2546 |
return this._genShape('Circle', [x, y, radius, lineColor, fillColor, lineWidth]);
|
|
|
2547 |
},
|
|
|
2548 |
|
|
|
2549 |
drawPieSlice: function (x, y, radius, startAngle, endAngle, lineColor, fillColor) {
|
|
|
2550 |
return this._genShape('PieSlice', [x, y, radius, startAngle, endAngle, lineColor, fillColor]);
|
|
|
2551 |
},
|
|
|
2552 |
|
|
|
2553 |
drawRect: function (x, y, width, height, lineColor, fillColor) {
|
|
|
2554 |
return this._genShape('Rect', [x, y, width, height, lineColor, fillColor]);
|
|
|
2555 |
},
|
|
|
2556 |
|
|
|
2557 |
getElement: function () {
|
|
|
2558 |
return this.canvas;
|
|
|
2559 |
},
|
|
|
2560 |
|
|
|
2561 |
/**
|
|
|
2562 |
* Return the most recently inserted shape id
|
|
|
2563 |
*/
|
|
|
2564 |
getLastShapeId: function () {
|
|
|
2565 |
return this.lastShapeId;
|
|
|
2566 |
},
|
|
|
2567 |
|
|
|
2568 |
/**
|
|
|
2569 |
* Clear and reset the canvas
|
|
|
2570 |
*/
|
|
|
2571 |
reset: function () {
|
|
|
2572 |
alert('reset not implemented');
|
|
|
2573 |
},
|
|
|
2574 |
|
|
|
2575 |
_insert: function (el, target) {
|
|
|
2576 |
$(target).html(el);
|
|
|
2577 |
},
|
|
|
2578 |
|
|
|
2579 |
/**
|
|
|
2580 |
* Calculate the pixel dimensions of the canvas
|
|
|
2581 |
*/
|
|
|
2582 |
_calculatePixelDims: function (width, height, canvas) {
|
|
|
2583 |
// XXX This should probably be a configurable option
|
|
|
2584 |
var match;
|
|
|
2585 |
match = this._pxregex.exec(height);
|
|
|
2586 |
if (match) {
|
|
|
2587 |
this.pixelHeight = match[1];
|
|
|
2588 |
} else {
|
|
|
2589 |
this.pixelHeight = $(canvas).height();
|
|
|
2590 |
}
|
|
|
2591 |
match = this._pxregex.exec(width);
|
|
|
2592 |
if (match) {
|
|
|
2593 |
this.pixelWidth = match[1];
|
|
|
2594 |
} else {
|
|
|
2595 |
this.pixelWidth = $(canvas).width();
|
|
|
2596 |
}
|
|
|
2597 |
},
|
|
|
2598 |
|
|
|
2599 |
/**
|
|
|
2600 |
* Generate a shape object and id for later rendering
|
|
|
2601 |
*/
|
|
|
2602 |
_genShape: function (shapetype, shapeargs) {
|
|
|
2603 |
var id = shapeCount++;
|
|
|
2604 |
shapeargs.unshift(id);
|
|
|
2605 |
return new VShape(this, id, shapetype, shapeargs);
|
|
|
2606 |
},
|
|
|
2607 |
|
|
|
2608 |
/**
|
|
|
2609 |
* Add a shape to the end of the render queue
|
|
|
2610 |
*/
|
|
|
2611 |
appendShape: function (shape) {
|
|
|
2612 |
alert('appendShape not implemented');
|
|
|
2613 |
},
|
|
|
2614 |
|
|
|
2615 |
/**
|
|
|
2616 |
* Replace one shape with another
|
|
|
2617 |
*/
|
|
|
2618 |
replaceWithShape: function (shapeid, shape) {
|
|
|
2619 |
alert('replaceWithShape not implemented');
|
|
|
2620 |
},
|
|
|
2621 |
|
|
|
2622 |
/**
|
|
|
2623 |
* Insert one shape after another in the render queue
|
|
|
2624 |
*/
|
|
|
2625 |
insertAfterShape: function (shapeid, shape) {
|
|
|
2626 |
alert('insertAfterShape not implemented');
|
|
|
2627 |
},
|
|
|
2628 |
|
|
|
2629 |
/**
|
|
|
2630 |
* Remove a shape from the queue
|
|
|
2631 |
*/
|
|
|
2632 |
removeShapeId: function (shapeid) {
|
|
|
2633 |
alert('removeShapeId not implemented');
|
|
|
2634 |
},
|
|
|
2635 |
|
|
|
2636 |
/**
|
|
|
2637 |
* Find a shape at the specified x/y co-ordinates
|
|
|
2638 |
*/
|
|
|
2639 |
getShapeAt: function (el, x, y) {
|
|
|
2640 |
alert('getShapeAt not implemented');
|
|
|
2641 |
},
|
|
|
2642 |
|
|
|
2643 |
/**
|
|
|
2644 |
* Render all queued shapes onto the canvas
|
|
|
2645 |
*/
|
|
|
2646 |
render: function () {
|
|
|
2647 |
alert('render not implemented');
|
|
|
2648 |
}
|
|
|
2649 |
});
|
|
|
2650 |
|
|
|
2651 |
VCanvas_canvas = createClass(VCanvas_base, {
|
|
|
2652 |
init: function (width, height, target, interact) {
|
|
|
2653 |
VCanvas_canvas._super.init.call(this, width, height, target);
|
|
|
2654 |
this.canvas = document.createElement('canvas');
|
|
|
2655 |
if (target[0]) {
|
|
|
2656 |
target = target[0];
|
|
|
2657 |
}
|
|
|
2658 |
$.data(target, '_jqs_vcanvas', this);
|
|
|
2659 |
$(this.canvas).css({ display: 'inline-block', width: width, height: height, verticalAlign: 'top' });
|
|
|
2660 |
this._insert(this.canvas, target);
|
|
|
2661 |
this._calculatePixelDims(width, height, this.canvas);
|
|
|
2662 |
this.canvas.width = this.pixelWidth;
|
|
|
2663 |
this.canvas.height = this.pixelHeight;
|
|
|
2664 |
this.interact = interact;
|
|
|
2665 |
this.shapes = {};
|
|
|
2666 |
this.shapeseq = [];
|
|
|
2667 |
this.currentTargetShapeId = undefined;
|
|
|
2668 |
$(this.canvas).css({width: this.pixelWidth, height: this.pixelHeight});
|
|
|
2669 |
},
|
|
|
2670 |
|
|
|
2671 |
_getContext: function (lineColor, fillColor, lineWidth) {
|
|
|
2672 |
var context = this.canvas.getContext('2d');
|
|
|
2673 |
if (lineColor !== undefined) {
|
|
|
2674 |
context.strokeStyle = lineColor;
|
|
|
2675 |
}
|
|
|
2676 |
context.lineWidth = lineWidth === undefined ? 1 : lineWidth;
|
|
|
2677 |
if (fillColor !== undefined) {
|
|
|
2678 |
context.fillStyle = fillColor;
|
|
|
2679 |
}
|
|
|
2680 |
return context;
|
|
|
2681 |
},
|
|
|
2682 |
|
|
|
2683 |
reset: function () {
|
|
|
2684 |
var context = this._getContext();
|
|
|
2685 |
context.clearRect(0, 0, this.pixelWidth, this.pixelHeight);
|
|
|
2686 |
this.shapes = {};
|
|
|
2687 |
this.shapeseq = [];
|
|
|
2688 |
this.currentTargetShapeId = undefined;
|
|
|
2689 |
},
|
|
|
2690 |
|
|
|
2691 |
_drawShape: function (shapeid, path, lineColor, fillColor, lineWidth) {
|
|
|
2692 |
var context = this._getContext(lineColor, fillColor, lineWidth),
|
|
|
2693 |
i, plen;
|
|
|
2694 |
context.beginPath();
|
|
|
2695 |
context.moveTo(path[0][0] + 0.5, path[0][1] + 0.5);
|
|
|
2696 |
for (i = 1, plen = path.length; i < plen; i++) {
|
|
|
2697 |
context.lineTo(path[i][0] + 0.5, path[i][1] + 0.5); // the 0.5 offset gives us crisp pixel-width lines
|
|
|
2698 |
}
|
|
|
2699 |
if (lineColor !== undefined) {
|
|
|
2700 |
context.stroke();
|
|
|
2701 |
}
|
|
|
2702 |
if (fillColor !== undefined) {
|
|
|
2703 |
context.fill();
|
|
|
2704 |
}
|
|
|
2705 |
if (this.targetX !== undefined && this.targetY !== undefined &&
|
|
|
2706 |
context.isPointInPath(this.targetX, this.targetY)) {
|
|
|
2707 |
this.currentTargetShapeId = shapeid;
|
|
|
2708 |
}
|
|
|
2709 |
},
|
|
|
2710 |
|
|
|
2711 |
_drawCircle: function (shapeid, x, y, radius, lineColor, fillColor, lineWidth) {
|
|
|
2712 |
var context = this._getContext(lineColor, fillColor, lineWidth);
|
|
|
2713 |
context.beginPath();
|
|
|
2714 |
context.arc(x, y, radius, 0, 2 * Math.PI, false);
|
|
|
2715 |
if (this.targetX !== undefined && this.targetY !== undefined &&
|
|
|
2716 |
context.isPointInPath(this.targetX, this.targetY)) {
|
|
|
2717 |
this.currentTargetShapeId = shapeid;
|
|
|
2718 |
}
|
|
|
2719 |
if (lineColor !== undefined) {
|
|
|
2720 |
context.stroke();
|
|
|
2721 |
}
|
|
|
2722 |
if (fillColor !== undefined) {
|
|
|
2723 |
context.fill();
|
|
|
2724 |
}
|
|
|
2725 |
},
|
|
|
2726 |
|
|
|
2727 |
_drawPieSlice: function (shapeid, x, y, radius, startAngle, endAngle, lineColor, fillColor) {
|
|
|
2728 |
var context = this._getContext(lineColor, fillColor);
|
|
|
2729 |
context.beginPath();
|
|
|
2730 |
context.moveTo(x, y);
|
|
|
2731 |
context.arc(x, y, radius, startAngle, endAngle, false);
|
|
|
2732 |
context.lineTo(x, y);
|
|
|
2733 |
context.closePath();
|
|
|
2734 |
if (lineColor !== undefined) {
|
|
|
2735 |
context.stroke();
|
|
|
2736 |
}
|
|
|
2737 |
if (fillColor) {
|
|
|
2738 |
context.fill();
|
|
|
2739 |
}
|
|
|
2740 |
if (this.targetX !== undefined && this.targetY !== undefined &&
|
|
|
2741 |
context.isPointInPath(this.targetX, this.targetY)) {
|
|
|
2742 |
this.currentTargetShapeId = shapeid;
|
|
|
2743 |
}
|
|
|
2744 |
},
|
|
|
2745 |
|
|
|
2746 |
_drawRect: function (shapeid, x, y, width, height, lineColor, fillColor) {
|
|
|
2747 |
return this._drawShape(shapeid, [[x, y], [x + width, y], [x + width, y + height], [x, y + height], [x, y]], lineColor, fillColor);
|
|
|
2748 |
},
|
|
|
2749 |
|
|
|
2750 |
appendShape: function (shape) {
|
|
|
2751 |
this.shapes[shape.id] = shape;
|
|
|
2752 |
this.shapeseq.push(shape.id);
|
|
|
2753 |
this.lastShapeId = shape.id;
|
|
|
2754 |
return shape.id;
|
|
|
2755 |
},
|
|
|
2756 |
|
|
|
2757 |
replaceWithShape: function (shapeid, shape) {
|
|
|
2758 |
var shapeseq = this.shapeseq,
|
|
|
2759 |
i;
|
|
|
2760 |
this.shapes[shape.id] = shape;
|
|
|
2761 |
for (i = shapeseq.length; i--;) {
|
|
|
2762 |
if (shapeseq[i] == shapeid) {
|
|
|
2763 |
shapeseq[i] = shape.id;
|
|
|
2764 |
}
|
|
|
2765 |
}
|
|
|
2766 |
delete this.shapes[shapeid];
|
|
|
2767 |
},
|
|
|
2768 |
|
|
|
2769 |
replaceWithShapes: function (shapeids, shapes) {
|
|
|
2770 |
var shapeseq = this.shapeseq,
|
|
|
2771 |
shapemap = {},
|
|
|
2772 |
sid, i, first;
|
|
|
2773 |
|
|
|
2774 |
for (i = shapeids.length; i--;) {
|
|
|
2775 |
shapemap[shapeids[i]] = true;
|
|
|
2776 |
}
|
|
|
2777 |
for (i = shapeseq.length; i--;) {
|
|
|
2778 |
sid = shapeseq[i];
|
|
|
2779 |
if (shapemap[sid]) {
|
|
|
2780 |
shapeseq.splice(i, 1);
|
|
|
2781 |
delete this.shapes[sid];
|
|
|
2782 |
first = i;
|
|
|
2783 |
}
|
|
|
2784 |
}
|
|
|
2785 |
for (i = shapes.length; i--;) {
|
|
|
2786 |
shapeseq.splice(first, 0, shapes[i].id);
|
|
|
2787 |
this.shapes[shapes[i].id] = shapes[i];
|
|
|
2788 |
}
|
|
|
2789 |
|
|
|
2790 |
},
|
|
|
2791 |
|
|
|
2792 |
insertAfterShape: function (shapeid, shape) {
|
|
|
2793 |
var shapeseq = this.shapeseq,
|
|
|
2794 |
i;
|
|
|
2795 |
for (i = shapeseq.length; i--;) {
|
|
|
2796 |
if (shapeseq[i] === shapeid) {
|
|
|
2797 |
shapeseq.splice(i + 1, 0, shape.id);
|
|
|
2798 |
this.shapes[shape.id] = shape;
|
|
|
2799 |
return;
|
|
|
2800 |
}
|
|
|
2801 |
}
|
|
|
2802 |
},
|
|
|
2803 |
|
|
|
2804 |
removeShapeId: function (shapeid) {
|
|
|
2805 |
var shapeseq = this.shapeseq,
|
|
|
2806 |
i;
|
|
|
2807 |
for (i = shapeseq.length; i--;) {
|
|
|
2808 |
if (shapeseq[i] === shapeid) {
|
|
|
2809 |
shapeseq.splice(i, 1);
|
|
|
2810 |
break;
|
|
|
2811 |
}
|
|
|
2812 |
}
|
|
|
2813 |
delete this.shapes[shapeid];
|
|
|
2814 |
},
|
|
|
2815 |
|
|
|
2816 |
getShapeAt: function (el, x, y) {
|
|
|
2817 |
this.targetX = x;
|
|
|
2818 |
this.targetY = y;
|
|
|
2819 |
this.render();
|
|
|
2820 |
return this.currentTargetShapeId;
|
|
|
2821 |
},
|
|
|
2822 |
|
|
|
2823 |
render: function () {
|
|
|
2824 |
var shapeseq = this.shapeseq,
|
|
|
2825 |
shapes = this.shapes,
|
|
|
2826 |
shapeCount = shapeseq.length,
|
|
|
2827 |
context = this._getContext(),
|
|
|
2828 |
shapeid, shape, i;
|
|
|
2829 |
context.clearRect(0, 0, this.pixelWidth, this.pixelHeight);
|
|
|
2830 |
for (i = 0; i < shapeCount; i++) {
|
|
|
2831 |
shapeid = shapeseq[i];
|
|
|
2832 |
shape = shapes[shapeid];
|
|
|
2833 |
this['_draw' + shape.type].apply(this, shape.args);
|
|
|
2834 |
}
|
|
|
2835 |
if (!this.interact) {
|
|
|
2836 |
// not interactive so no need to keep the shapes array
|
|
|
2837 |
this.shapes = {};
|
|
|
2838 |
this.shapeseq = [];
|
|
|
2839 |
}
|
|
|
2840 |
}
|
|
|
2841 |
|
|
|
2842 |
});
|
|
|
2843 |
|
|
|
2844 |
VCanvas_vml = createClass(VCanvas_base, {
|
|
|
2845 |
init: function (width, height, target) {
|
|
|
2846 |
var groupel;
|
|
|
2847 |
VCanvas_vml._super.init.call(this, width, height, target);
|
|
|
2848 |
if (target[0]) {
|
|
|
2849 |
target = target[0];
|
|
|
2850 |
}
|
|
|
2851 |
$.data(target, '_jqs_vcanvas', this);
|
|
|
2852 |
this.canvas = document.createElement('span');
|
|
|
2853 |
$(this.canvas).css({ display: 'inline-block', position: 'relative', overflow: 'hidden', width: width, height: height, margin: '0px', padding: '0px', verticalAlign: 'top'});
|
|
|
2854 |
this._insert(this.canvas, target);
|
|
|
2855 |
this._calculatePixelDims(width, height, this.canvas);
|
|
|
2856 |
this.canvas.width = this.pixelWidth;
|
|
|
2857 |
this.canvas.height = this.pixelHeight;
|
|
|
2858 |
groupel = '<v:group coordorigin="0 0" coordsize="' + this.pixelWidth + ' ' + this.pixelHeight + '"' +
|
|
|
2859 |
' style="position:absolute;top:0;left:0;width:' + this.pixelWidth + 'px;height=' + this.pixelHeight + 'px;"></v:group>';
|
|
|
2860 |
this.canvas.insertAdjacentHTML('beforeEnd', groupel);
|
|
|
2861 |
this.group = $(this.canvas).children()[0];
|
|
|
2862 |
this.rendered = false;
|
|
|
2863 |
this.prerender = '';
|
|
|
2864 |
},
|
|
|
2865 |
|
|
|
2866 |
_drawShape: function (shapeid, path, lineColor, fillColor, lineWidth) {
|
|
|
2867 |
var vpath = [],
|
|
|
2868 |
initial, stroke, fill, closed, vel, plen, i;
|
|
|
2869 |
for (i = 0, plen = path.length; i < plen; i++) {
|
|
|
2870 |
vpath[i] = '' + (path[i][0]) + ',' + (path[i][1]);
|
|
|
2871 |
}
|
|
|
2872 |
initial = vpath.splice(0, 1);
|
|
|
2873 |
lineWidth = lineWidth === undefined ? 1 : lineWidth;
|
|
|
2874 |
stroke = lineColor === undefined ? ' stroked="false" ' : ' strokeWeight="' + lineWidth + 'px" strokeColor="' + lineColor + '" ';
|
|
|
2875 |
fill = fillColor === undefined ? ' filled="false"' : ' fillColor="' + fillColor + '" filled="true" ';
|
|
|
2876 |
closed = vpath[0] === vpath[vpath.length - 1] ? 'x ' : '';
|
|
|
2877 |
vel = '<v:shape coordorigin="0 0" coordsize="' + this.pixelWidth + ' ' + this.pixelHeight + '" ' +
|
|
|
2878 |
' id="jqsshape' + shapeid + '" ' +
|
|
|
2879 |
stroke +
|
|
|
2880 |
fill +
|
|
|
2881 |
' style="position:absolute;left:0px;top:0px;height:' + this.pixelHeight + 'px;width:' + this.pixelWidth + 'px;padding:0px;margin:0px;" ' +
|
|
|
2882 |
' path="m ' + initial + ' l ' + vpath.join(', ') + ' ' + closed + 'e">' +
|
|
|
2883 |
' </v:shape>';
|
|
|
2884 |
return vel;
|
|
|
2885 |
},
|
|
|
2886 |
|
|
|
2887 |
_drawCircle: function (shapeid, x, y, radius, lineColor, fillColor, lineWidth) {
|
|
|
2888 |
var stroke, fill, vel;
|
|
|
2889 |
x -= radius;
|
|
|
2890 |
y -= radius;
|
|
|
2891 |
stroke = lineColor === undefined ? ' stroked="false" ' : ' strokeWeight="' + lineWidth + 'px" strokeColor="' + lineColor + '" ';
|
|
|
2892 |
fill = fillColor === undefined ? ' filled="false"' : ' fillColor="' + fillColor + '" filled="true" ';
|
|
|
2893 |
vel = '<v:oval ' +
|
|
|
2894 |
' id="jqsshape' + shapeid + '" ' +
|
|
|
2895 |
stroke +
|
|
|
2896 |
fill +
|
|
|
2897 |
' style="position:absolute;top:' + y + 'px; left:' + x + 'px; width:' + (radius * 2) + 'px; height:' + (radius * 2) + 'px"></v:oval>';
|
|
|
2898 |
return vel;
|
|
|
2899 |
|
|
|
2900 |
},
|
|
|
2901 |
|
|
|
2902 |
_drawPieSlice: function (shapeid, x, y, radius, startAngle, endAngle, lineColor, fillColor) {
|
|
|
2903 |
var vpath, startx, starty, endx, endy, stroke, fill, vel;
|
|
|
2904 |
if (startAngle === endAngle) {
|
|
|
2905 |
return; // VML seems to have problem when start angle equals end angle.
|
|
|
2906 |
}
|
|
|
2907 |
if ((endAngle - startAngle) === (2 * Math.PI)) {
|
|
|
2908 |
startAngle = 0.0; // VML seems to have a problem when drawing a full circle that doesn't start 0
|
|
|
2909 |
endAngle = (2 * Math.PI);
|
|
|
2910 |
}
|
|
|
2911 |
|
|
|
2912 |
startx = x + Math.round(Math.cos(startAngle) * radius);
|
|
|
2913 |
starty = y + Math.round(Math.sin(startAngle) * radius);
|
|
|
2914 |
endx = x + Math.round(Math.cos(endAngle) * radius);
|
|
|
2915 |
endy = y + Math.round(Math.sin(endAngle) * radius);
|
|
|
2916 |
|
|
|
2917 |
// Prevent very small slices from being mistaken as a whole pie
|
|
|
2918 |
if (startx === endx && starty === endy && (endAngle - startAngle) < Math.PI) {
|
|
|
2919 |
return;
|
|
|
2920 |
}
|
|
|
2921 |
|
|
|
2922 |
vpath = [x - radius, y - radius, x + radius, y + radius, startx, starty, endx, endy];
|
|
|
2923 |
stroke = lineColor === undefined ? ' stroked="false" ' : ' strokeWeight="1px" strokeColor="' + lineColor + '" ';
|
|
|
2924 |
fill = fillColor === undefined ? ' filled="false"' : ' fillColor="' + fillColor + '" filled="true" ';
|
|
|
2925 |
vel = '<v:shape coordorigin="0 0" coordsize="' + this.pixelWidth + ' ' + this.pixelHeight + '" ' +
|
|
|
2926 |
' id="jqsshape' + shapeid + '" ' +
|
|
|
2927 |
stroke +
|
|
|
2928 |
fill +
|
|
|
2929 |
' style="position:absolute;left:0px;top:0px;height:' + this.pixelHeight + 'px;width:' + this.pixelWidth + 'px;padding:0px;margin:0px;" ' +
|
|
|
2930 |
' path="m ' + x + ',' + y + ' wa ' + vpath.join(', ') + ' x e">' +
|
|
|
2931 |
' </v:shape>';
|
|
|
2932 |
return vel;
|
|
|
2933 |
},
|
|
|
2934 |
|
|
|
2935 |
_drawRect: function (shapeid, x, y, width, height, lineColor, fillColor) {
|
|
|
2936 |
return this._drawShape(shapeid, [[x, y], [x, y + height], [x + width, y + height], [x + width, y], [x, y]], lineColor, fillColor);
|
|
|
2937 |
},
|
|
|
2938 |
|
|
|
2939 |
reset: function () {
|
|
|
2940 |
this.group.innerHTML = '';
|
|
|
2941 |
},
|
|
|
2942 |
|
|
|
2943 |
appendShape: function (shape) {
|
|
|
2944 |
var vel = this['_draw' + shape.type].apply(this, shape.args);
|
|
|
2945 |
if (this.rendered) {
|
|
|
2946 |
this.group.insertAdjacentHTML('beforeEnd', vel);
|
|
|
2947 |
} else {
|
|
|
2948 |
this.prerender += vel;
|
|
|
2949 |
}
|
|
|
2950 |
this.lastShapeId = shape.id;
|
|
|
2951 |
return shape.id;
|
|
|
2952 |
},
|
|
|
2953 |
|
|
|
2954 |
replaceWithShape: function (shapeid, shape) {
|
|
|
2955 |
var existing = $('#jqsshape' + shapeid),
|
|
|
2956 |
vel = this['_draw' + shape.type].apply(this, shape.args);
|
|
|
2957 |
existing[0].outerHTML = vel;
|
|
|
2958 |
},
|
|
|
2959 |
|
|
|
2960 |
replaceWithShapes: function (shapeids, shapes) {
|
|
|
2961 |
// replace the first shapeid with all the new shapes then toast the remaining old shapes
|
|
|
2962 |
var existing = $('#jqsshape' + shapeids[0]),
|
|
|
2963 |
replace = '',
|
|
|
2964 |
slen = shapes.length,
|
|
|
2965 |
i;
|
|
|
2966 |
for (i = 0; i < slen; i++) {
|
|
|
2967 |
replace += this['_draw' + shapes[i].type].apply(this, shapes[i].args);
|
|
|
2968 |
}
|
|
|
2969 |
existing[0].outerHTML = replace;
|
|
|
2970 |
for (i = 1; i < shapeids.length; i++) {
|
|
|
2971 |
$('#jqsshape' + shapeids[i]).remove();
|
|
|
2972 |
}
|
|
|
2973 |
},
|
|
|
2974 |
|
|
|
2975 |
insertAfterShape: function (shapeid, shape) {
|
|
|
2976 |
var existing = $('#jqsshape' + shapeid),
|
|
|
2977 |
vel = this['_draw' + shape.type].apply(this, shape.args);
|
|
|
2978 |
existing[0].insertAdjacentHTML('afterEnd', vel);
|
|
|
2979 |
},
|
|
|
2980 |
|
|
|
2981 |
removeShapeId: function (shapeid) {
|
|
|
2982 |
var existing = $('#jqsshape' + shapeid);
|
|
|
2983 |
this.group.removeChild(existing[0]);
|
|
|
2984 |
},
|
|
|
2985 |
|
|
|
2986 |
getShapeAt: function (el, x, y) {
|
|
|
2987 |
var shapeid = el.id.substr(8);
|
|
|
2988 |
return shapeid;
|
|
|
2989 |
},
|
|
|
2990 |
|
|
|
2991 |
render: function () {
|
|
|
2992 |
if (!this.rendered) {
|
|
|
2993 |
// batch the intial render into a single repaint
|
|
|
2994 |
this.group.innerHTML = this.prerender;
|
|
|
2995 |
this.rendered = true;
|
|
|
2996 |
}
|
|
|
2997 |
}
|
|
|
2998 |
});
|
|
|
2999 |
|
|
|
3000 |
|
|
|
3001 |
})(jQuery);
|