/**
 * @class Ext.sparkline.Base
 * @extend Ext.Gadget
 * @xtype sparkline
 *
 * The base class for ExtJS SparkLines. SparkLines are small, inline graphs used to visually
 * display small amounts of data. For large datasets, use the {@link Ext.chart.AbstractChart chart package}.
 *
 * The SparkLine subclasses accept an {@link #values array of values}, and present the data in different visualizations.
 *
 *     @example
 *     new Ext.Panel({
 *         height: 300,
 *         width: 600,
 *         frame: true,
 *         title: 'Test Sparklines',
 *         renderTo:document.body,
 *         bodyPadding: 10,
 *
 *         // Named listeners will resolve to methods in this Panel
 *         defaultListenerScope: true,
 *
 *         // Named references will be collected, and can be access from this Panel
 *         referenceHolder: true,
 *
 *         items: [{
 *             reference: 'values',
 *             xtype: 'textfield',
 *             fieldLabel: 'Values',
 *             validator: function(v) {
 *                 var result = [];
 *
 *                 v = v.replace(/\s/g, '');
 *                 v = v.replace(/,$/, '');
 *                 v = v.split(',');
 *                 for (var i = 0; i < v.length; i++) {
 *                     if (!Ext.isNumeric(v[i])) {
 *                         return 'Value must be a comma separated array of numbers';
 *                     }
 *                     result.push(parseInt(v[i], 10));
 *                 }
 *                 this.values = result;
 *                 return true;
 *             },
 *             listeners: {
 *                 change: 'onTypeChange',
 *                 buffer: 500,
 *                 afterrender: {
 *                     fn: 'afterTypeRender',
 *                     single: true
 *                 }
 *             }
 *         }, {
 *             reference: 'type',
 *             xtype: 'combobox',
 *             fieldLabel: 'Type',
 *             store: [
 *                 ['sparklineline',     'Line'],
 *                 ['sparklinebox',      'Box'],
 *                 ['sparklinebullet',   'Bullet'],
 *                 ['sparklinediscrete', 'Discrete'],
 *                 ['sparklinepie',      'Pie'],
 *                 ['sparklinetristate', 'TriState']
 *             ],
 *             value: 'sparklineline',
 *             listeners: {
 *                 change: 'onTypeChange',
 *                 buffer: 500
 *             }
 *         }],
 *
 *         // Start with a line plot. 
 *         afterTypeRender: function(typeField) {
 *             typeField.setValue('6,10,4,-3,7,2');
 *         },
 *
 *         onTypeChange: function() {
 *             var me = this,
 *                 refs = me.getReferences(),
 *                 config;
 *
 *             if (me.sparkLine) {
 *                 me.remove(me.sparkLine, true);
 *             }
 *             config = {
 *                 xtype: refs.type.getValue(),
 *                 values: refs.values.values,
 *                 height: 25,
 *                 width: 100                    
 *             };
 *	           me.sparkLine = Ext.create(config);
 *             me.add(me.sparkLine);
 *
 *             // Put under fields
 *             me.sparkLine.el.dom.style.marginLeft = refs.type.labelEl.getWidth() + 'px';
 *         }
 *     });
 *
 */
 
/**
 * @cfg {Number[]} [values=null]
 * An array of numbers which define the chart.
 * @accessor
 */
 
/**
 * @cfg {String} [lineColor=#157fcc]
 * The hex value for line colors in graphs which display lines
 * ({@link Ext.sparkline.Box Box}, {@link Ext.sparkline.Discrete Discrete} and {@link Ext.sparkline.Line Line}).
 */
 
/**
 * @cfg {String} [highlightColor=null]
 * The hex value for the highlight color to use when mouseing over a graph segment.
 */
 
/**
 * @cfg {Number} [highlightLighten=0.1]
 * How much to lighten the highlight color by when mouseing over a graph segment.
 */
 
/**
 * @cfg {Boolean} [tooltipSkipNull=true]
 * Null values will not have a tooltip displayed.
 */
 
/**
 * @cfg {String} [tooltipPrefix='']
 * A string to prepend to each field displayed in a tooltip.
 */
 
/**
 * @cfg {String} [tooltipSuffix='']
 * A string to append to each field displayed in a tooltip.
 */
 
/**
 * @cfg {Boolean} [disableTooltips=false]
 * Set to `true` to disable mouseover tooltips.
 */
 
/**
 * @cfg {String/Ext.XTemplate} [tipTpl=null]
 * An XTemplate used to display the value or values in a tooltip when hovering
 * over a Sparkline.
 *
 * The implemented subclases all define their own `tipTpl`, but it can be overridden.
 */