1 /**

     2 *

     3 * jquery.sparkline.js

     4 *

     5 * v2.1.2

     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 *       outlierIQR - 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(document, Math, undefined) { // performance/minified-size optimization

   206 (function(factory) {

   207     if(typeof define === 'function' && define.amd) {

   208         define(['jquery'], factory);

   209     } else if (jQuery && !jQuery.fn.sparkline) {

   210         factory(jQuery);

   211     }

   212 }

   213 (function($) {

   214     'use strict';

   215 

   216     var UNSET_OPTION = {},

   217         getDefaults, createClass, SPFormat, clipval, quartile, normalizeValue, normalizeValues,

   218         remove, isNumber, all, sum, addCSS, ensureArray, formatNumber, RangeMap,

   219         MouseHandler, Tooltip, barHighlightMixin,

   220         line, bar, tristate, discrete, bullet, pie, box, defaultStyles, initStyles,

   221         VShape, VCanvas_base, VCanvas_canvas, VCanvas_vml, pending, shapeCount = 0;

   222 

   223     /**

   224      * Default configuration settings

   225      */

   226     getDefaults = function () {

   227         return {

   228             // Settings common to most/all chart types

   229             common: {

   230                 type: 'line',

   231                 lineColor: '#00f',

   232                 fillColor: '#cdf',

   233                 defaultPixelsPerValue: 3,

   234                 width: 'auto',

   235                 height: 'auto',

   236                 composite: false,

   237                 tagValuesAttribute: 'values',

   238                 tagOptionsPrefix: 'spark',

   239                 enableTagOptions: false,

   240                 enableHighlight: true,

   241                 highlightLighten: 1.4,

   242                 tooltipSkipNull: true,

   243                 tooltipPrefix: '',

   244                 tooltipSuffix: '',

   245                 disableHiddenCheck: false,

   246                 numberFormatter: false,

   247                 numberDigitGroupCount: 3,

   248                 numberDigitGroupSep: ',',

   249                 numberDecimalMark: '.',

   250                 disableTooltips: false,

   251                 disableInteraction: false

   252             },

   253             // Defaults for line charts

   254             line: {

   255                 spotColor: '#f80',

   256                 highlightSpotColor: '#5f5',

   257                 highlightLineColor: '#f22',

   258                 spotRadius: 1.5,

   259                 minSpotColor: '#f80',

   260                 maxSpotColor: '#f80',

   261                 lineWidth: 1,

   262                 normalRangeMin: undefined,

   263                 normalRangeMax: undefined,

   264                 normalRangeColor: '#ccc',

   265                 drawNormalOnTop: false,

   266                 chartRangeMin: undefined,

   267                 chartRangeMax: undefined,

   268                 chartRangeMinX: undefined,

   269                 chartRangeMaxX: undefined,

   270                 tooltipFormat: new SPFormat('<span style="color: {{color}}">&#9679;</span> {{prefix}}{{y}}{{suffix}}')

   271             },

   272             // Defaults for bar charts

   273             bar: {

   274                 barColor: '#3366cc',

   275                 negBarColor: '#f44',

   276                 stackedBarColor: ['#3366cc', '#dc3912', '#ff9900', '#109618', '#66aa00',

   277                     '#dd4477', '#0099c6', '#990099'],

   278                 zeroColor: undefined,

   279                 nullColor: undefined,

   280                 zeroAxis: true,

   281                 barWidth: 4,

   282                 barSpacing: 1,

   283                 chartRangeMax: undefined,

   284                 chartRangeMin: undefined,

   285                 chartRangeClip: false,

   286                 colorMap: undefined,

   287                 tooltipFormat: new SPFormat('<span style="color: {{color}}">&#9679;</span> {{prefix}}{{value}}{{suffix}}')

   288             },

   289             // Defaults for tristate charts

   290             tristate: {

   291                 barWidth: 4,

   292                 barSpacing: 1,

   293                 posBarColor: '#6f6',

   294                 negBarColor: '#f44',

   295                 zeroBarColor: '#999',

   296                 colorMap: {},

   297                 tooltipFormat: new SPFormat('<span style="color: {{color}}">&#9679;</span> {{value:map}}'),

   298                 tooltipValueLookups: { map: { '-1': 'Loss', '0': 'Draw', '1': 'Win' } }

   299             },

   300             // Defaults for discrete charts

   301             discrete: {

   302                 lineHeight: 'auto',

   303                 thresholdColor: undefined,

   304                 thresholdValue: 0,

   305                 chartRangeMax: undefined,

   306                 chartRangeMin: undefined,

   307                 chartRangeClip: false,

   308                 tooltipFormat: new SPFormat('{{prefix}}{{value}}{{suffix}}')

   309             },

   310             // Defaults for bullet charts

   311             bullet: {

   312                 targetColor: '#f33',

   313                 targetWidth: 3, // width of the target bar in pixels

   314                 performanceColor: '#33f',

   315                 rangeColors: ['#d3dafe', '#a8b6ff', '#7f94ff'],

   316                 base: undefined, // set this to a number to change the base start number

   317                 tooltipFormat: new SPFormat('{{fieldkey:fields}} - {{value}}'),

   318                 tooltipValueLookups: { fields: {r: 'Range', p: 'Performance', t: 'Target'} }

   319             },

   320             // Defaults for pie charts

   321             pie: {

   322                 offset: 0,

   323                 sliceColors: ['#3366cc', '#dc3912', '#ff9900', '#109618', '#66aa00',

   324                     '#dd4477', '#0099c6', '#990099'],

   325                 borderWidth: 0,

   326                 borderColor: '#000',

   327                 tooltipFormat: new SPFormat('<span style="color: {{color}}">&#9679;</span> {{value}} ({{percent.1}}%)')

   328             },

   329             // Defaults for box plots

   330             box: {

   331                 raw: false,

   332                 boxLineColor: '#000',

   333                 boxFillColor: '#cdf',

   334                 whiskerColor: '#000',

   335                 outlierLineColor: '#333',

   336                 outlierFillColor: '#fff',

   337                 medianColor: '#f00',

   338                 showOutliers: true,

   339                 outlierIQR: 1.5,

   340                 spotRadius: 1.5,

   341                 target: undefined,

   342                 targetColor: '#4a2',

   343                 chartRangeMax: undefined,

   344                 chartRangeMin: undefined,

   345                 tooltipFormat: new SPFormat('{{field:fields}}: {{value}}'),

   346                 tooltipFormatFieldlistKey: 'field',

   347                 tooltipValueLookups: { fields: { lq: 'Lower Quartile', med: 'Median',

   348                     uq: 'Upper Quartile', lo: 'Left Outlier', ro: 'Right Outlier',

   349                     lw: 'Left Whisker', rw: 'Right Whisker'} }

   350             }

   351         };

   352     };

   353 

   354     // You can have tooltips use a css class other than jqstooltip by specifying tooltipClassname

   355     defaultStyles = '.jqstooltip { ' +

   356             'position: absolute;' +

   357             'left: 0px;' +

   358             'top: 0px;' +

   359             'visibility: hidden;' +

   360             'background: rgb(0, 0, 0) transparent;' +

   361             'background-color: rgba(0,0,0,0.6);' +

   362             'filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);' +

   363             '-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";' +

   364             'color: white;' +

   365             'font: 10px arial, san serif;' +

   366             'text-align: left;' +

   367             'white-space: nowrap;' +

   368             'padding: 5px;' +

   369             'border: 1px solid white;' +

   370             'z-index: 10000;' +

   371             '}' +

   372             '.jqsfield { ' +

   373             'color: white;' +

   374             'font: 10px arial, san serif;' +

   375             'text-align: left;' +

   376             '}';

   377 

   378     /**

   379      * Utilities

   380      */

   381 

   382     createClass = function (/* [baseclass, [mixin, ...]], definition */) {

   383         var Class, args;

   384         Class = function () {

   385             this.init.apply(this, arguments);

   386         };

   387         if (arguments.length > 1) {

   388             if (arguments[0]) {

   389                 Class.prototype = $.extend(new arguments[0](), arguments[arguments.length - 1]);

   390                 Class._super = arguments[0].prototype;

   391             } else {

   392                 Class.prototype = arguments[arguments.length - 1];

   393             }

   394             if (arguments.length > 2) {

   395                 args = Array.prototype.slice.call(arguments, 1, -1);

   396                 args.unshift(Class.prototype);

   397                 $.extend.apply($, args);

   398             }

   399         } else {

   400             Class.prototype = arguments[0];

   401         }

   402         Class.prototype.cls = Class;

   403         return Class;

   404     };

   405 

   406     /**

   407      * Wraps a format string for tooltips

   408      * {{x}}

   409      * {{x.2}

   410      * {{x:months}}

   411      */

   412     $.SPFormatClass = SPFormat = createClass({

   413         fre: /\{\{([\w.]+?)(:(.+?))?\}\}/g,

   414         precre: /(\w+)\.(\d+)/,

   415 

   416         init: function (format, fclass) {

   417             this.format = format;

   418             this.fclass = fclass;

   419         },

   420 

   421         render: function (fieldset, lookups, options) {

   422             var self = this,

   423                 fields = fieldset,

   424                 match, token, lookupkey, fieldvalue, prec;

   425             return this.format.replace(this.fre, function () {

   426                 var lookup;

   427                 token = arguments[1];

   428                 lookupkey = arguments[3];

   429                 match = self.precre.exec(token);

   430                 if (match) {

   431                     prec = match[2];

   432                     token = match[1];

   433                 } else {

   434                     prec = false;

   435                 }

   436                 fieldvalue = fields[token];

   437                 if (fieldvalue === undefined) {

   438                     return '';

   439                 }

   440                 if (lookupkey && lookups && lookups[lookupkey]) {

   441                     lookup = lookups[lookupkey];

   442                     if (lookup.get) { // RangeMap

   443                         return lookups[lookupkey].get(fieldvalue) || fieldvalue;

   444                     } else {

   445                         return lookups[lookupkey][fieldvalue] || fieldvalue;

   446                     }

   447                 }

   448                 if (isNumber(fieldvalue)) {

   449                     if (options.get('numberFormatter')) {

   450                         fieldvalue = options.get('numberFormatter')(fieldvalue);

   451                     } else {

   452                         fieldvalue = formatNumber(fieldvalue, prec,

   453                             options.get('numberDigitGroupCount'),

   454                             options.get('numberDigitGroupSep'),

   455                             options.get('numberDecimalMark'));

   456                     }

   457                 }

   458                 return fieldvalue;

   459             });

   460         }

   461     });

   462 

   463     // convience method to avoid needing the new operator

   464     $.spformat = function(format, fclass) {

   465         return new SPFormat(format, fclass);

   466     };

   467 

   468     clipval = function (val, min, max) {

   469         if (val < min) {

   470             return min;

   471         }

   472         if (val > max) {

   473             return max;

   474         }

   475         return val;

   476     };

   477 

   478     quartile = function (values, q) {

   479         var vl;

   480         if (q === 2) {

   481             vl = Math.floor(values.length / 2);

   482             return values.length % 2 ? values[vl] : (values[vl-1] + values[vl]) / 2;

   483         } else {

   484             if (values.length % 2 ) { // odd

   485                 vl = (values.length * q + q) / 4;

   486                 return vl % 1 ? (values[Math.floor(vl)] + values[Math.floor(vl) - 1]) / 2 : values[vl-1];

   487             } else { //even

   488                 vl = (values.length * q + 2) / 4;

   489                 return vl % 1 ? (values[Math.floor(vl)] + values[Math.floor(vl) - 1]) / 2 :  values[vl-1];

   490 

   491             }

   492         }

   493     };

   494 

   495     normalizeValue = function (val) {

   496         var nf;

   497         switch (val) {

   498             case 'undefined':

   499                 val = undefined;

   500                 break;

   501             case 'null':

   502                 val = null;

   503                 break;

   504             case 'true':

   505                 val = true;

   506                 break;

   507             case 'false':

   508                 val = false;

   509                 break;

   510             default:

   511                 nf = parseFloat(val);

   512                 if (val == nf) {

   513                     val = nf;

   514                 }

   515         }

   516         return val;

   517     };

   518 

   519     normalizeValues = function (vals) {

   520         var i, result = [];

   521         for (i = vals.length; i--;) {

   522             result[i] = normalizeValue(vals[i]);

   523         }

   524         return result;

   525     };

   526 

   527     remove = function (vals, filter) {

   528         var i, vl, result = [];

   529         for (i = 0, vl = vals.length; i < vl; i++) {

   530             if (vals[i] !== filter) {

   531                 result.push(vals[i]);

   532             }

   533         }

   534         return result;

   535     };

   536 

   537     isNumber = function (num) {

   538         return !isNaN(parseFloat(num)) && isFinite(num);

   539     };

   540 

   541     formatNumber = function (num, prec, groupsize, groupsep, decsep) {

   542         var p, i;

   543         num = (prec === false ? parseFloat(num).toString() : num.toFixed(prec)).split('');

   544         p = (p = $.inArray('.', num)) < 0 ? num.length : p;

   545         if (p < num.length) {

   546             num[p] = decsep;

   547         }

   548         for (i = p - groupsize; i > 0; i -= groupsize) {

   549             num.splice(i, 0, groupsep);

   550         }

   551         return num.join('');

   552     };

   553 

   554     // determine if all values of an array match a value

   555     // returns true if the array is empty

   556     all = function (val, arr, ignoreNull) {

   557         var i;

   558         for (i = arr.length; i--; ) {

   559             if (ignoreNull && arr[i] === null) continue;

   560             if (arr[i] !== val) {

   561                 return false;

   562             }

   563         }

   564         return true;

   565     };

   566 

   567     // sums the numeric values in an array, ignoring other values

   568     sum = function (vals) {

   569         var total = 0, i;

   570         for (i = vals.length; i--;) {

   571             total += typeof vals[i] === 'number' ? vals[i] : 0;

   572         }

   573         return total;

   574     };

   575 

   576     ensureArray = function (val) {

   577         return $.isArray(val) ? val : [val];

   578     };

   579 

   580     // http://paulirish.com/2008/bookmarklet-inject-new-css-rules/

   581     addCSS = function(css) {

   582         var tag;

   583         //if ('\v' == 'v') /* ie only */ {

   584         if (document.createStyleSheet) {

   585             document.createStyleSheet().cssText = css;

   586         } else {

   587             tag = document.createElement('style');

   588             tag.type = 'text/css';

   589             document.getElementsByTagName('head')[0].appendChild(tag);

   590             tag[(typeof document.body.style.WebkitAppearance == 'string') /* webkit only */ ? 'innerText' : 'innerHTML'] = css;

   591         }

   592     };

   593 

   594     // Provide a cross-browser interface to a few simple drawing primitives

   595     $.fn.simpledraw = function (width, height, useExisting, interact) {

   596         var target, mhandler;

   597         if (useExisting && (target = this.data('_jqs_vcanvas'))) {

   598             return target;

   599         }

   600 

   601         if ($.fn.sparkline.canvas === false) {

   602             // We've already determined that neither Canvas nor VML are available

   603             return false;

   604 

   605         } else if ($.fn.sparkline.canvas === undefined) {

   606             // No function defined yet -- need to see if we support Canvas or VML

   607             var el = document.createElement('canvas');

   608             if (!!(el.getContext && el.getContext('2d'))) {

   609                 // Canvas is available

   610                 $.fn.sparkline.canvas = function(width, height, target, interact) {

   611                     return new VCanvas_canvas(width, height, target, interact);

   612                 };

   613             } else if (document.namespaces && !document.namespaces.v) {

   614                 // VML is available

   615                 document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', '#default#VML');

   616                 $.fn.sparkline.canvas = function(width, height, target, interact) {

   617                     return new VCanvas_vml(width, height, target);

   618                 };

   619             } else {

   620                 // Neither Canvas nor VML are available

   621                 $.fn.sparkline.canvas = false;

   622                 return false;

   623             }

   624         }

   625 

   626         if (width === undefined) {

   627             width = $(this).innerWidth();

   628         }

   629         if (height === undefined) {

   630             height = $(this).innerHeight();

   631         }

   632 

   633         target = $.fn.sparkline.canvas(width, height, this, interact);

   634 

   635         mhandler = $(this).data('_jqs_mhandler');

   636         if (mhandler) {

   637             mhandler.registerCanvas(target);

   638         }

   639         return target;

   640     };

   641 

   642     $.fn.cleardraw = function () {

   643         var target = this.data('_jqs_vcanvas');

   644         if (target) {

   645             target.reset();

   646         }

   647     };

   648 

   649     $.RangeMapClass = RangeMap = createClass({

   650         init: function (map) {

   651             var key, range, rangelist = [];

   652             for (key in map) {

   653                 if (map.hasOwnProperty(key) && typeof key === 'string' && key.indexOf(':') > -1) {

   654                     range = key.split(':');

   655                     range[0] = range[0].length === 0 ? -Infinity : parseFloat(range[0]);

   656                     range[1] = range[1].length === 0 ? Infinity : parseFloat(range[1]);

   657                     range[2] = map[key];

   658                     rangelist.push(range);

   659                 }

   660             }

   661             this.map = map;

   662             this.rangelist = rangelist || false;

   663         },

   664 

   665         get: function (value) {

   666             var rangelist = this.rangelist,

   667                 i, range, result;

   668             if ((result = this.map[value]) !== undefined) {

   669                 return result;

   670             }

   671             if (rangelist) {

   672                 for (i = rangelist.length; i--;) {

   673                     range = rangelist[i];

   674                     if (range[0] <= value && range[1] >= value) {

   675                         return range[2];

   676                     }

   677                 }

   678             }

   679             return undefined;

   680         }

   681     });

   682 

   683     // Convenience function

   684     $.range_map = function(map) {

   685         return new RangeMap(map);

   686     };

   687 

   688     MouseHandler = createClass({

   689         init: function (el, options) {

   690             var $el = $(el);

   691             this.$el = $el;

   692             this.options = options;

   693             this.currentPageX = 0;

   694             this.currentPageY = 0;

   695             this.el = el;

   696             this.splist = [];

   697             this.tooltip = null;

   698             this.over = false;

   699             this.displayTooltips = !options.get('disableTooltips');

   700             this.highlightEnabled = !options.get('disableHighlight');

   701         },

   702 

   703         registerSparkline: function (sp) {

   704             this.splist.push(sp);

   705             if (this.over) {

   706                 this.updateDisplay();

   707             }

   708         },

   709 

   710         registerCanvas: function (canvas) {

   711             var $canvas = $(canvas.canvas);

   712             this.canvas = canvas;

   713             this.$canvas = $canvas;

   714             $canvas.mouseenter($.proxy(this.mouseenter, this));

   715             $canvas.mouseleave($.proxy(this.mouseleave, this));

   716             $canvas.click($.proxy(this.mouseclick, this));

   717         },

   718 

   719         reset: function (removeTooltip) {

   720             this.splist = [];

   721             if (this.tooltip && removeTooltip) {

   722                 this.tooltip.remove();

   723                 this.tooltip = undefined;

   724             }

   725         },

   726 

   727         mouseclick: function (e) {

   728             var clickEvent = $.Event('sparklineClick');

   729             clickEvent.originalEvent = e;

   730             clickEvent.sparklines = this.splist;

   731             this.$el.trigger(clickEvent);

   732         },

   733 

   734         mouseenter: function (e) {

   735             $(document.body).unbind('mousemove.jqs');

   736             $(document.body).bind('mousemove.jqs', $.proxy(this.mousemove, this));

   737             this.over = true;

   738             this.currentPageX = e.pageX;

   739             this.currentPageY = e.pageY;

   740             this.currentEl = e.target;

   741             if (!this.tooltip && this.displayTooltips) {

   742                 this.tooltip = new Tooltip(this.options);

   743                 this.tooltip.updatePosition(e.pageX, e.pageY);

   744             }

   745             this.updateDisplay();

   746         },

   747 

   748         mouseleave: function () {

   749             $(document.body).unbind('mousemove.jqs');

   750             var splist = this.splist,

   751                  spcount = splist.length,

   752                  needsRefresh = false,

   753                  sp, i;

   754             this.over = false;

   755             this.currentEl = null;

   756 

   757             if (this.tooltip) {

   758                 this.tooltip.remove();

   759                 this.tooltip = null;

   760             }

   761 

   762             for (i = 0; i < spcount; i++) {

   763                 sp = splist[i];

   764                 if (sp.clearRegionHighlight()) {

   765                     needsRefresh = true;

   766                 }

   767             }

   768 

   769             if (needsRefresh) {

   770                 this.canvas.render();

   771             }

   772         },

   773 

   774         mousemove: function (e) {

   775             this.currentPageX = e.pageX;

   776             this.currentPageY = e.pageY;

   777             this.currentEl = e.target;

   778             if (this.tooltip) {

   779                 this.tooltip.updatePosition(e.pageX, e.pageY);

   780             }

   781             this.updateDisplay();

   782         },

   783 

   784         updateDisplay: function () {

   785             var splist = this.splist,

   786                  spcount = splist.length,

   787                  needsRefresh = false,

   788                  offset = this.$canvas.offset(),

   789                  localX = this.currentPageX - offset.left,

   790                  localY = this.currentPageY - offset.top,

   791                  tooltiphtml, sp, i, result, changeEvent;

   792             if (!this.over) {

   793                 return;

   794             }

   795             for (i = 0; i < spcount; i++) {

   796                 sp = splist[i];

   797                 result = sp.setRegionHighlight(this.currentEl, localX, localY);

   798                 if (result) {

   799                     needsRefresh = true;

   800                 }

   801             }

   802             if (needsRefresh) {

   803                 changeEvent = $.Event('sparklineRegionChange');

   804                 changeEvent.sparklines = this.splist;

   805                 this.$el.trigger(changeEvent);

   806                 if (this.tooltip) {

   807                     tooltiphtml = '';

   808                     for (i = 0; i < spcount; i++) {

   809                         sp = splist[i];

   810                         tooltiphtml += sp.getCurrentRegionTooltip();

   811                     }

   812                     this.tooltip.setContent(tooltiphtml);

   813                 }

   814                 if (!this.disableHighlight) {

   815                     this.canvas.render();

   816                 }

   817             }

   818             if (result === null) {

   819                 this.mouseleave();

   820             }

   821         }

   822     });

   823 

   824 

   825     Tooltip = createClass({

   826         sizeStyle: 'position: static !important;' +

   827             'display: block !important;' +

   828             'visibility: hidden !important;' +

   829             'float: left !important;',

   830 

   831         init: function (options) {

   832             var tooltipClassname = options.get('tooltipClassname', 'jqstooltip'),

   833                 sizetipStyle = this.sizeStyle,

   834                 offset;

   835             this.container = options.get('tooltipContainer') || document.body;

   836             this.tooltipOffsetX = options.get('tooltipOffsetX', 10);

   837             this.tooltipOffsetY = options.get('tooltipOffsetY', 12);

   838             // remove any previous lingering tooltip

   839             $('#jqssizetip').remove();

   840             $('#jqstooltip').remove();

   841             this.sizetip = $('<div/>', {

   842                 id: 'jqssizetip',

   843                 style: sizetipStyle,

   844                 'class': tooltipClassname

   845             });

   846             this.tooltip = $('<div/>', {

   847                 id: 'jqstooltip',

   848                 'class': tooltipClassname

   849             }).appendTo(this.container);

   850             // account for the container's location

   851             offset = this.tooltip.offset();

   852             this.offsetLeft = offset.left;

   853             this.offsetTop = offset.top;

   854             this.hidden = true;

   855             $(window).unbind('resize.jqs scroll.jqs');

   856             $(window).bind('resize.jqs scroll.jqs', $.proxy(this.updateWindowDims, this));

   857             this.updateWindowDims();

   858         },

   859 

   860         updateWindowDims: function () {

   861             this.scrollTop = $(window).scrollTop();

   862             this.scrollLeft = $(window).scrollLeft();

   863             this.scrollRight = this.scrollLeft + $(window).width();

   864             this.updatePosition();

   865         },

   866 

   867         getSize: function (content) {

   868             this.sizetip.html(content).appendTo(this.container);

   869             this.width = this.sizetip.width() + 1;

   870             this.height = this.sizetip.height();

   871             this.sizetip.remove();

   872         },

   873 

   874         setContent: function (content) {

   875             if (!content) {

   876                 this.tooltip.css('visibility', 'hidden');

   877                 this.hidden = true;

   878                 return;

   879             }

   880             this.getSize(content);

   881             this.tooltip.html(content)

   882                 .css({

   883                     'width': this.width,

   884                     'height': this.height,

   885                     'visibility': 'visible'

   886                 });

   887             if (this.hidden) {

   888                 this.hidden = false;

   889                 this.updatePosition();

   890             }

   891         },

   892 

   893         updatePosition: function (x, y) {

   894             if (x === undefined) {

   895                 if (this.mousex === undefined) {

   896                     return;

   897                 }

   898                 x = this.mousex - this.offsetLeft;

   899                 y = this.mousey - this.offsetTop;

   900 

   901             } else {

   902                 this.mousex = x = x - this.offsetLeft;

   903                 this.mousey = y = y - this.offsetTop;

   904             }

   905             if (!this.height || !this.width || this.hidden) {

   906                 return;

   907             }

   908 

   909             y -= this.height + this.tooltipOffsetY;

   910             x += this.tooltipOffsetX;

   911 

   912             if (y < this.scrollTop) {

   913                 y = this.scrollTop;

   914             }

   915             if (x < this.scrollLeft) {

   916                 x = this.scrollLeft;

   917             } else if (x + this.width > this.scrollRight) {

   918                 x = this.scrollRight - this.width;

   919             }

   920 

   921             this.tooltip.css({

   922                 'left': x,

   923                 'top': y

   924             });

   925         },

   926 

   927         remove: function () {

   928             this.tooltip.remove();

   929             this.sizetip.remove();

   930             this.sizetip = this.tooltip = undefined;

   931             $(window).unbind('resize.jqs scroll.jqs');

   932         }

   933     });

   934 

   935     initStyles = function() {

   936         addCSS(defaultStyles);

   937     };

   938 

   939     $(initStyles);

   940 

   941     pending = [];

   942     $.fn.sparkline = function (userValues, userOptions) {

   943         return this.each(function () {

   944             var options = new $.fn.sparkline.options(this, userOptions),

   945                  $this = $(this),

   946                  render, i;

   947             render = function () {

   948                 var values, width, height, tmp, mhandler, sp, vals;

   949                 if (userValues === 'html' || userValues === undefined) {

   950                     vals = this.getAttribute(options.get('tagValuesAttribute'));

   951                     if (vals === undefined || vals === null) {

   952                         vals = $this.html();

   953                     }

   954                     values = vals.replace(/(^\s*<!--)|(-->\s*$)|\s+/g, '').split(',');

   955                 } else {

   956                     values = userValues;

   957                 }

   958 

   959                 width = options.get('width') === 'auto' ? values.length * options.get('defaultPixelsPerValue') : options.get('width');

   960                 if (options.get('height') === 'auto') {

   961                     if (!options.get('composite') || !$.data(this, '_jqs_vcanvas')) {

   962                         // must be a better way to get the line height

   963                         tmp = document.createElement('span');

   964                         tmp.innerHTML = 'a';

   965                         $this.html(tmp);

   966                         height = $(tmp).innerHeight() || $(tmp).height();

   967                         $(tmp).remove();

   968                         tmp = null;

   969                     }

   970                 } else {

   971                     height = options.get('height');

   972                 }

   973 

   974                 if (!options.get('disableInteraction')) {

   975                     mhandler = $.data(this, '_jqs_mhandler');

   976                     if (!mhandler) {

   977                         mhandler = new MouseHandler(this, options);

   978                         $.data(this, '_jqs_mhandler', mhandler);

   979                     } else if (!options.get('composite')) {

   980                         mhandler.reset();

   981                     }

   982                 } else {

   983                     mhandler = false;

   984                 }

   985 

   986                 if (options.get('composite') && !$.data(this, '_jqs_vcanvas')) {

   987                     if (!$.data(this, '_jqs_errnotify')) {

   988                         alert('Attempted to attach a composite sparkline to an element with no existing sparkline');

   989                         $.data(this, '_jqs_errnotify', true);

   990                     }

   991                     return;

   992                 }

   993 

   994                 sp = new $.fn.sparkline[options.get('type')](this, values, options, width, height);

   995 

   996                 sp.render();

   997 

   998                 if (mhandler) {

   999                     mhandler.registerSparkline(sp);

  1000                 }

  1001             };

  1002             if (($(this).html() && !options.get('disableHiddenCheck') && $(this).is(':hidden')) || !$(this).parents('body').length) {

  1003                 if (!options.get('composite') && $.data(this, '_jqs_pending')) {

  1004                     // remove any existing references to the element

  1005                     for (i = pending.length; i; i--) {

  1006                         if (pending[i - 1][0] == this) {

  1007                             pending.splice(i - 1, 1);

  1008                         }

  1009                     }

  1010                 }

  1011                 pending.push([this, render]);

  1012                 $.data(this, '_jqs_pending', true);

  1013             } else {

  1014                 render.call(this);

  1015             }

  1016         });

  1017     };

  1018 

  1019     $.fn.sparkline.defaults = getDefaults();

  1020 

  1021 

  1022     $.sparkline_display_visible = function () {

  1023         var el, i, pl;

  1024         var done = [];

  1025         for (i = 0, pl = pending.length; i < pl; i++) {

  1026             el = pending[i][0];

  1027             if ($(el).is(':visible') && !$(el).parents().is(':hidden')) {

  1028                 pending[i][1].call(el);

  1029                 $.data(pending[i][0], '_jqs_pending', false);

  1030                 done.push(i);

  1031             } else if (!$(el).closest('html').length && !$.data(el, '_jqs_pending')) {

  1032                 // element has been inserted and removed from the DOM

  1033                 // If it was not yet inserted into the dom then the .data request

  1034                 // will return true.

  1035                 // removing from the dom causes the data to be removed.

  1036                 $.data(pending[i][0], '_jqs_pending', false);

  1037                 done.push(i);

  1038             }

  1039         }

  1040         for (i = done.length; i; i--) {

  1041             pending.splice(done[i - 1], 1);

  1042         }

  1043     };

  1044 

  1045 

  1046     /**

  1047      * User option handler

  1048      */

  1049     $.fn.sparkline.options = createClass({

  1050         init: function (tag, userOptions) {

  1051             var extendedOptions, defaults, base, tagOptionType;

  1052             this.userOptions = userOptions = userOptions || {};

  1053             this.tag = tag;

  1054             this.tagValCache = {};

  1055             defaults = $.fn.sparkline.defaults;

  1056             base = defaults.common;

  1057             this.tagOptionsPrefix = userOptions.enableTagOptions && (userOptions.tagOptionsPrefix || base.tagOptionsPrefix);

  1058 

  1059             tagOptionType = this.getTagSetting('type');

  1060             if (tagOptionType === UNSET_OPTION) {

  1061                 extendedOptions = defaults[userOptions.type || base.type];

  1062             } else {

  1063                 extendedOptions = defaults[tagOptionType];

  1064             }

  1065             this.mergedOptions = $.extend({}, base, extendedOptions, userOptions);

  1066         },

  1067 

  1068 

  1069         getTagSetting: function (key) {

  1070             var prefix = this.tagOptionsPrefix,

  1071                 val, i, pairs, keyval;

  1072             if (prefix === false || prefix === undefined) {

  1073                 return UNSET_OPTION;

  1074             }

  1075             if (this.tagValCache.hasOwnProperty(key)) {

  1076                 val = this.tagValCache.key;

  1077             } else {

  1078                 val = this.tag.getAttribute(prefix + key);

  1079                 if (val === undefined || val === null) {

  1080                     val = UNSET_OPTION;

  1081                 } else if (val.substr(0, 1) === '[') {

  1082                     val = val.substr(1, val.length - 2).split(',');

  1083                     for (i = val.length; i--;) {

  1084                         val[i] = normalizeValue(val[i].replace(/(^\s*)|(\s*$)/g, ''));

  1085                     }

  1086                 } else if (val.substr(0, 1) === '{') {

  1087                     pairs = val.substr(1, val.length - 2).split(',');

  1088                     val = {};

  1089                     for (i = pairs.length; i--;) {

  1090                         keyval = pairs[i].split(':', 2);

  1091                         val[keyval[0].replace(/(^\s*)|(\s*$)/g, '')] = normalizeValue(keyval[1].replace(/(^\s*)|(\s*$)/g, ''));

  1092                     }

  1093                 } else {

  1094                     val = normalizeValue(val);

  1095                 }

  1096                 this.tagValCache.key = val;

  1097             }

  1098             return val;

  1099         },

  1100 

  1101         get: function (key, defaultval) {

  1102             var tagOption = this.getTagSetting(key),

  1103                 result;

  1104             if (tagOption !== UNSET_OPTION) {

  1105                 return tagOption;

  1106             }

  1107             return (result = this.mergedOptions[key]) === undefined ? defaultval : result;

  1108         }

  1109     });

  1110 

  1111 

  1112     $.fn.sparkline._base = createClass({

  1113         disabled: false,

  1114 

  1115         init: function (el, values, options, width, height) {

  1116             this.el = el;

  1117             this.$el = $(el);

  1118             this.values = values;

  1119             this.options = options;

  1120             this.width = width;

  1121             this.height = height;

  1122             this.currentRegion = undefined;

  1123         },

  1124 

  1125         /**

  1126          * Setup the canvas

  1127          */

  1128         initTarget: function () {

  1129             var interactive = !this.options.get('disableInteraction');

  1130             if (!(this.target = this.$el.simpledraw(this.width, this.height, this.options.get('composite'), interactive))) {

  1131                 this.disabled = true;

  1132             } else {

  1133                 this.canvasWidth = this.target.pixelWidth;

  1134                 this.canvasHeight = this.target.pixelHeight;

  1135             }

  1136         },