add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / sparkline / Base.js

/**\r
 * @class Ext.sparkline.Base\r
 *\r
 * The base class for ExtJS SparkLines. SparkLines are small, inline graphs used to visually\r
 * display small amounts of data. For large datasets, use the {@link Ext.chart.AbstractChart chart package}.\r
 *\r
 * The SparkLine subclasses accept an {@link #values array of values}, and present the data in different visualizations.\r
 *\r
 *     @example\r
 *     new Ext.Panel({\r
 *         height: 300,\r
 *         width: 600,\r
 *         frame: true,\r
 *         title: 'Test Sparklines',\r
 *         renderTo:document.body,\r
 *         bodyPadding: 10,\r
 *\r
 *         // Named listeners will resolve to methods in this Panel\r
 *         defaultListenerScope: true,\r
 *\r
 *         // Named references will be collected, and can be access from this Panel\r
 *         referenceHolder: true,\r
 *\r
 *         items: [{\r
 *             reference: 'values',\r
 *             xtype: 'textfield',\r
 *             fieldLabel: 'Values',\r
 *             validator: function(v) {\r
 *                 var result = [];\r
 *\r
 *                 v = v.replace(/\s/g, '');\r
 *                 v = v.replace(/,$/, '');\r
 *                 v = v.split(',');\r
 *                 for (var i = 0; i < v.length; i++) {\r
 *                     if (!Ext.isNumeric(v[i])) {\r
 *                         return 'Value must be a comma separated array of numbers';\r
 *                     }\r
 *                     result.push(parseInt(v[i], 10));\r
 *                 }\r
 *                 this.values = result;\r
 *                 return true;\r
 *             },\r
 *             listeners: {\r
 *                 change: 'onTypeChange',\r
 *                 buffer: 500,\r
 *                 afterrender: {\r
 *                     fn: 'afterTypeRender',\r
 *                     single: true\r
 *                 }\r
 *             }\r
 *         }, {\r
 *             reference: 'type',\r
 *             xtype: 'combobox',\r
 *             fieldLabel: 'Type',\r
 *             store: [\r
 *                 ['sparklineline',     'Line'],\r
 *                 ['sparklinebox',      'Box'],\r
 *                 ['sparklinebullet',   'Bullet'],\r
 *                 ['sparklinediscrete', 'Discrete'],\r
 *                 ['sparklinepie',      'Pie'],\r
 *                 ['sparklinetristate', 'TriState']\r
 *             ],\r
 *             value: 'sparklineline',\r
 *             listeners: {\r
 *                 change: 'onTypeChange',\r
 *                 buffer: 500\r
 *             }\r
 *         }],\r
 *\r
 *         // Start with a line plot. \r
 *         afterTypeRender: function(typeField) {\r
 *             typeField.setValue('6,10,4,-3,7,2');\r
 *         },\r
 *\r
 *         onTypeChange: function() {\r
 *             var me = this,\r
 *                 refs = me.getReferences(),\r
 *                 config;\r
 *\r
 *             if (me.sparkLine) {\r
 *                 me.remove(me.sparkLine, true);\r
 *             }\r
 *             config = {\r
 *                 xtype: refs.type.getValue(),\r
 *                 values: refs.values.values,\r
 *                 height: 25,\r
 *                 width: 100                    \r
 *             };\r
 *	           me.sparkLine = Ext.create(config);\r
 *             me.add(me.sparkLine);\r
 *\r
 *             // Put under fields\r
 *             me.sparkLine.el.dom.style.marginLeft = refs.type.labelEl.getWidth() + 'px';\r
 *         }\r
 *     });\r
 *\r
 */\r
Ext.define('Ext.sparkline.Base', {\r
    extend: 'Ext.Widget',\r
    requires: [\r
        'Ext.XTemplate',\r
        'Ext.sparkline.CanvasCanvas',\r
        'Ext.sparkline.VmlCanvas'\r
    ],\r
\r
    cachedConfig: {\r
        baseCls: Ext.baseCSSPrefix + 'sparkline',\r
\r
        /**\r
         * @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}).\r
         */\r
        lineColor: '#157fcc',\r
\r
        /**\r
         * @cfg {String} [fillColor=#def] The hex value for fill color in graphs which fill areas ({@link Ext.sparkline.Line Line}).\r
         */\r
        fillColor: '#def',\r
\r
        defaultPixelsPerValue: 3,\r
\r
        tagValuesAttribute: 'values',\r
\r
        enableTagOptions: false,\r
        \r
        enableHighlight: true,\r
        \r
        /**\r
         * @cfg {String} [highlightColor=null] The hex value for the highlight color to use when mouseing over a graph segment.\r
         */\r
        highlightColor: null,\r
        \r
        /**\r
         * @cfg {Number} [highlightLighten=1.4] How much to lighten the highlight color by when mouseing over a graph segment.\r
         */\r
        highlightLighten: 1.4,\r
        \r
        /**\r
         * @cfg {Boolean} [tooltipSkipNull=true] Null values will not have a tooltip displayed.\r
         */\r
        tooltipSkipNull: true,\r
        \r
        /**\r
         * @cfg {String} [tooltipPrefix] A string to prepend to each field displayed in a tooltip.\r
         */\r
        tooltipPrefix: '',\r
        \r
        /**\r
         * @cfg {String} [tooltipSuffix] A string to append to each field displayed in a tooltip.\r
         */\r
        tooltipSuffix: '',\r
        \r
        /**\r
         * @cfg {Boolean} [disableTooltips=false] Set to `true` to disable mouseover tooltips.\r
         */\r
        disableTooltips: false,\r
        \r
        disableInteraction: false,\r
        \r
        /**\r
         * @cfg {String/Ext.XTemplate} [tipTpl] An XTemplate used to display the value or values in a tooltip when hovering over a Sparkline.\r
         *\r
         * The implemented subclases all define their own `tipTpl`, but it can be overridden.\r
         */\r
        tipTpl: null\r
    },\r
\r
    config: {\r
        /**\r
         * @cfg {Number[]} values An array of numbers which define the chart.\r
         */\r
        values: null\r
    },\r
\r
    element: {\r
        tag: 'canvas',\r
        reference: 'element',\r
        style: {\r
            display: 'inline-block',\r
            verticalAlign: 'top'\r
        },\r
        listeners: {\r
            mouseenter: 'onMouseEnter',\r
            mouseleave: 'onMouseLeave',\r
            mousemove: 'onMouseMove'\r
        },\r
        // Create canvas zero sized so that it does not affect the containing element's initial layout\r
        // https://sencha.jira.com/browse/EXTJSIV-10145\r
        width: 0,\r
        height: 0\r
    },\r
    \r
    defaultBindProperty: 'values',\r
\r
    // When any config is changed, the canvas needs to be redrawn.\r
    // This is done at the next animation frame when this queue is traversed.\r
    redrawQueue: {},\r
\r
    inheritableStatics: {\r
        /**\r
         * @private\r
         * @static\r
         * @inheritable\r
         */\r
        sparkLineTipClass: Ext.baseCSSPrefix + 'sparkline-tip-target',\r
\r
        /**\r
         * @private\r
         * @static\r
         * @inheritable\r
         */\r
        onClassCreated: function(cls) {\r
            var proto = cls.prototype,\r
                configs = cls.getConfigurator().configs,\r
                config;\r
\r
            // Set up an applier for all local configs which kicks off a request to redraw on the next animation frame\r
            for (config in configs) {\r
                // tipTpl not included in this scheme\r
                if (config !== 'tipTpl') {\r
                    proto[Ext.Config.get(config).names.apply] = proto.applyConfigChange;\r
                }\r
            }    \r
        }\r
    },\r
\r
    constructor: function(config) {\r
        var me = this;\r
\r
        // The canvas sets our element config\r
        me.canvas = Ext.supports.Canvas ? new Ext.sparkline.CanvasCanvas(me)\r
                                        : new Ext.sparkline.VmlCanvas(me);\r
        if (!me.getDisableTooltips()) {\r
            me.element.cls = Ext.sparkline.Base.sparkLineTipClass;\r
        }\r
\r
        Ext.apply(me, config);\r
        me.callParent([config]);\r
\r
        // For compatibility of all the code.\r
        me.el = me.element;\r
    },\r
\r
    // determine if all values of an array match a value\r
    // returns true if the array is empty\r
    all: function (val, arr, ignoreNull) {\r
        var i;\r
        for (i = arr.length; i--; ) {\r
            if (ignoreNull && arr[i] === null) {\r
                continue;\r
            }\r
            if (arr[i] !== val) {\r
                return false;\r
            }\r
        }\r
        return true;\r
    },\r
\r
    // generic config value applier.\r
    // Adds this to the queue to do a redraw on the next animation frame\r
    applyConfigChange: function(newValue) {\r
        var me = this;\r
        me.redrawQueue[me.getId()] = me;\r
\r
        // Ensure that there is a single timer to handle all queued redraws.\r
        if (!me.redrawTimer) {\r
            Ext.sparkline.Base.prototype.redrawTimer =\r
                    Ext.Function.requestAnimationFrame(me.processRedrawQueue);\r
        }\r
        return newValue;\r
    },\r
\r
    // Appliers convert an incoming config value.\r
    // Ensure the tipTpl is an XTemplate\r
    applyTipTpl: function(tipTpl) {\r
        if (!tipTpl.isTemplate) {\r
            tipTpl = new Ext.XTemplate(tipTpl);\r
        }\r
        return tipTpl;\r
    },\r
\r
    normalizeValue: function (val) {\r
        var nf;\r
        switch (val) {\r
            case 'undefined':\r
                val = undefined;\r
                break;\r
            case 'null':\r
                val = null;\r
                break;\r
            case 'true':\r
                val = true;\r
                break;\r
            case 'false':\r
                val = false;\r
                break;\r
            default:\r
                nf = parseFloat(val);\r
                if (val == nf) {\r
                    val = nf;\r
                }\r
        }\r
        return val;\r
    },\r
\r
    normalizeValues: function (vals) {\r
        var i, result = [];\r
        for (i = vals.length; i--;) {\r
            result[i] = this.normalizeValue(vals[i]);\r
        }\r
        return result;\r
    },\r
\r
    updateWidth: function(width, oldWidth) {\r
        var me = this,\r
            dom = me.element.dom;\r
\r
        me.callParent([width, oldWidth]);\r
        me.canvas.setWidth(width);\r
        me.width = width;\r
        if (me.height == null) {\r
            me.setHeight(parseInt(me.measurer.getCachedStyle(dom.parentNode, 'line-height'), 10));\r
        } else {\r
            me.redrawQueue[me.getId()] = me;\r
        }\r
    },\r
\r
    updateHeight: function(height, oldHeight) {\r
        var me = this;\r
\r
        me.callParent([height, oldHeight]);\r
        me.canvas.setHeight(height);\r
        me.height = height;\r
        me.redrawQueue[me.getId()] = me;\r
    },\r
\r
    updateValues: function(values) {\r
        this.values = values;\r
    },\r
\r
    redraw: function() {\r
        var me = this;\r
\r
        if (me.getValues()) {\r
            me.onUpdate();\r
            me.canvas.onOwnerUpdate();\r
            me.renderGraph();\r
        }\r
    },\r
\r
    onUpdate: Ext.emptyFn,\r
\r
    /*\r
     * Render the chart to the canvas\r
     */\r
    renderGraph: function () {\r
        var ret = true;\r
        if (this.disabled) {\r
            this.canvas.reset();\r
            ret = false;\r
        }\r
        return ret;\r
    },\r
\r
    onMouseEnter: function(e) {\r
        this.onMouseMove(e);\r
    },\r
\r
    onMouseMove: function (e) {\r
        this.tooltip.triggerEvent = e;\r
        this.currentPageXY = e.getPoint();\r
        this.redraw();\r
    },\r
\r
    onMouseLeave: function () {\r
        var me = this;\r
        me.currentPageXY = me.targetX = me.targetY = null;\r
        me.redraw();\r
        me.tooltip.target = null;  \r
        me.tooltip.hide();\r
    },\r
\r
    updateDisplay: function () {\r
        var me = this,\r
            values = me.getValues(),\r
            offset, tooltip = me.tooltip, tooltipHTML, region;\r
\r
        if (values && values.length && me.currentPageXY && me.el.getRegion().contains(me.currentPageXY)) {\r
            offset = me.canvas.el.getXY();\r
            region = me.getRegion(me.currentPageXY[0] - offset[0], me.currentPageXY[1] - offset[1]);\r
\r
            if (region != null && region < values.length) {\r
                if (!me.disableHighlight) {\r
                    me.renderHighlight(region);\r
                }\r
                tooltipHTML = me.getRegionTooltip(region);\r
            }\r
            me.fireEvent('sparklineregionchange', me);\r
\r
            if (tooltipHTML) {\r
                if (!me.lastTooltipHTML || tooltipHTML[0] !== me.lastTooltipHTML[0] || tooltipHTML[1] !== me.lastTooltipHTML[1]) {\r
                    tooltip.setTitle(tooltipHTML[0]);\r
                    tooltip.update(tooltipHTML[1]);\r
                    me.lastTooltipHTML = tooltipHTML;\r
                }\r
                tooltip.target = me.el;\r
                tooltip.onTargetOver(tooltip.triggerEvent);\r
            }\r
        }\r
\r
        // No tip content; ensure it's hidden\r
        if (!tooltipHTML) {\r
            tooltip.target = null;  \r
            tooltip.hide();\r
        }\r
    },\r
\r
    /*\r
     * Return a region id for a given x/y co-ordinate\r
     */\r
    getRegion: Ext.emptyFn,\r
\r
    /*\r
     * Fetch the HTML to display as a tooltip\r
     */\r
    getRegionTooltip: function(region) {\r
        var me = this,\r
            header = me.tooltipChartTitle,\r
            entries = [],\r
            tipTpl = me.getTipTpl(),\r
            fields, showFields, showFieldsKey, newFields, fv,\r
            formatter, fieldlen, i, j;\r
\r
        fields = me.getRegionFields(region);\r
        formatter = me.tooltipFormatter;\r
        if (formatter) {\r
            return formatter(me, me, fields);\r
        }\r
\r
        if (!tipTpl) {\r
            return '';\r
        }\r
        if (!Ext.isArray(fields)) {\r
            fields = [fields];\r
        }\r
        showFields = me.tooltipFormatFieldlist;\r
        showFieldsKey = me.tooltipFormatFieldlistKey;\r
        if (showFields && showFieldsKey) {\r
            // user-selected ordering of fields\r
            newFields = [];\r
            for (i = fields.length; i--;) {\r
                fv = fields[i][showFieldsKey];\r
                if ((j = Ext.Array.indexOf(fv, showFields)) !== -1) {\r
                    newFields[j] = fields[i];\r
                }\r
            }\r
            fields = newFields;\r
        }\r
        fieldlen = fields.length;\r
\r
        for (j = 0; j < fieldlen; j++) {\r
            if (!fields[j].isNull || !me.getTooltipSkipNull()) {\r
                Ext.apply(fields[j], {\r
                    prefix: me.getTooltipPrefix(),\r
                    suffix: me.getTooltipSuffix()\r
                });\r
                entries.push(tipTpl.apply(fields[j]));\r
            }\r
        }\r
\r
        if (header || entries.length) {\r
            return [header, entries.join('<br>')];\r
        }\r
        return '';\r
    },\r
\r
    getRegionFields: Ext.emptyFn,\r
\r
    calcHighlightColor: function(color) {\r
        var me = this,\r
            highlightColor = me.getHighlightColor(),\r
            lighten = me.getHighlightLighten(),\r
            parse, mult, rgbnew, i;\r
\r
        if (highlightColor) {\r
            return highlightColor;\r
        }\r
        if (lighten) {\r
            // extract RGB values\r
            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);\r
            if (parse) {\r
                rgbnew = [];\r
                mult = color.length === 4 ? 16 : 1;\r
                for (i = 0; i < 3; i++) {\r
                    rgbnew[i] = Ext.Number.constrain(Math.round(parseInt(parse[i + 1], 16) * mult * lighten), 0, 255);\r
                }\r
                return 'rgb(' + rgbnew.join(',') + ')';\r
            }\r
        }\r
        return color;\r
    },\r
\r
    destroy: function() {\r
        delete this.redrawQueue[this.getId()];\r
        this.callParent();\r
    }\r
}, function(SparklineBase) {\r
    var proto = SparklineBase.prototype;\r
\r
    Ext.onInternalReady(function() {\r
        proto.tooltip = new Ext.tip.ToolTip({\r
            id: 'sparklines-tooltip',\r
            showDelay: 0,\r
            dismissDelay: 0,\r
            hideDelay: 400\r
        });\r
    });\r
\r
    SparklineBase.onClassCreated(SparklineBase);\r
    \r
    proto.processRedrawQueue = function () {\r
        var redrawQueue = proto.redrawQueue,\r
            id;\r
\r
        for (id in redrawQueue) {\r
            redrawQueue[id].redraw();\r
        }\r
        proto.redrawQueue = {};\r
        proto.redrawTimer = 0;\r
    };\r
\r
    // If we are on a VML platform (IE8 - TODO: remove this when that retires)...\r
    if (!Ext.supports.Canvas) {\r
        SparklineBase.prototype.element = {\r
            tag: 'span',\r
            reference: 'element',\r
            listeners: {\r
                mouseenter: 'onMouseEnter',\r
                mouseleave: 'onMouseLeave',\r
                mousemove: 'onMouseMove'\r
            },\r
            style: {\r
                display: 'inline-block',\r
                position: 'relative',\r
                overflow: 'hidden',\r
                margin: '0px',\r
                padding: '0px',\r
                verticalAlign: 'top',\r
                cursor: 'default'\r
            },\r
            children: [{\r
                tag: 'svml:group',\r
                reference: 'groupEl',\r
                coordorigin: '0 0',\r
                coordsize: '0 0',\r
                style: 'position:absolute;width:0;height:0;pointer-events:none'\r
            }]\r
        };\r
    }\r
});\r