add extjs 6.0.1 sources

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

/**\r
 * @class Ext.sparkline.Line\r
 *\r
 * Plots a line graph based upon the input {@link #values} array.\r
 *\r
 * See {@link Ext.sparkline.Base the base class} for a simple example.\r
 */\r
Ext.define('Ext.sparkline.Line', {\r
    extend: 'Ext.sparkline.Base',\r
    requires: [\r
        'Ext.sparkline.RangeMap'\r
    ],\r
\r
    alias: 'widget.sparklineline',\r
\r
    config: {\r
\r
        /**\r
         * @cfg {String} [spotColor=#f80] The colour of the final value marker. Set to false or an empty string to hide it.\r
         */\r
        spotColor: '#f80',\r
        \r
        /**\r
         * @cfg {String} [highlightSpotColor=#5f5] The colour of value marker spots when mouseovered.\r
         */\r
        highlightSpotColor: '#5f5',\r
        \r
        /**\r
         * @cfg {String} [highlightLineColor=#f22] The colour of value line shown when the graph is mouseovered.\r
         */\r
        highlightLineColor: '#f22',\r
        \r
        /**\r
         * @cfg {Number} [spotRadius=1.5] The pixel radius of min, max and final value dots.\r
         */\r
        spotRadius: 1.5,\r
        \r
        /**\r
         * @cfg {String} [minSpotColor=#f80] The colour of the mimimum value marker. Set to false or an empty string to hide it.\r
         */\r
        minSpotColor: '#f80',\r
        \r
        /**\r
         * @cfg {String} [maxSpotColor=#f80] The colour of the maximum value marker. Set to false or an empty string to hide it.\r
         */\r
        maxSpotColor: '#f80',\r
        \r
        /**\r
         * @cfg {Number} [lineWidth=1] The pixel width of the line plotted.\r
         */\r
        lineWidth: 1,\r
        \r
        /**\r
         * @cfg {Number} [normalRangeMin] See {@link #normalRangeMax} The minimum value to overlay a "normal range bar" over the graph using the {@link #normalRangeColor}.\r
         */\r
        normalRangeMin: null,\r
        \r
        /**\r
         * @cfg {Number} [normalRangeMax] See {@link #normalRangeMin} The maximum value to overlay a "normal range bar" over the graph using the {@link #normalRangeColor}.\r
         */\r
        normalRangeMax: null,\r
        \r
        /**\r
         * @cfg {String} [normalRangeColor=#ccc] See {@link #normalRangeMin} and {@link #normalRangeMax} The color of the undererlayed "normal range bar".\r
         */\r
        normalRangeColor: '#ccc',\r
        \r
        /**\r
         * @cfg {Boolean} [drawNormalOnTop=false] Configure as `true` to draw the normal range overlaying the chart.\r
         */\r
        drawNormalOnTop: false,\r
        \r
        /**\r
         * @cfg {Number} [chartRangeMin] The minimum value to use for the range of Y values of the chart - Defaults to the minimum value supplied.\r
         */\r
        chartRangeMin: null,\r
        \r
        /**\r
         * @cfg {Number} [chartRangeMax] The maximum value to use for the range of Y values of the chart - Defaults to the minimum value supplied.\r
         */\r
        chartRangeMax: null,\r
        \r
        /**\r
         * @cfg {Number} [chartRangeMinX] The minimum value to use for the X value of the chart.\r
         */\r
        chartRangeMinX: null,\r
        \r
        /**\r
         * @cfg {Number} [chartRangeMaxX] The maximum value to use for the X value of the chart.\r
         */\r
        chartRangeMaxX: null,\r
        \r
        tipTpl: new Ext.XTemplate('● {prefix}{y}{suffix}'),\r
        \r
        /**\r
         * @cfg {Object} [valueSpots] An object which uses range specifiers as keys to indicate spot color values\r
         * for range of values. A range specifier is of the form `[number]:[number]` indicating start and end range.\r
         * Omitting aither means an open ended range. For example to render green spots on all values less than 50\r
         * and red on values higher than 50 use:\r
         *\r
         *    {\r
         *        // Open ended range, with max value 49\r
         *        ":49": "green",\r
         *\r
         *        // Open ended range, with min value 50\r
         *        "50:": "red"\r
         *    }\r
         */\r
        valueSpots: null\r
    },\r
\r
    applyValueSpots: function(valueSpots) {\r
        if (valueSpots && !valueSpots.get) {\r
            valueSpots = new Ext.sparkline.RangeMap(valueSpots);\r
        }\r
        return valueSpots;\r
    },\r
\r
    onUpdate: function () {\r
        this.vertices = [];\r
        this.regionMap = [];\r
        this.xvalues = [];\r
        this.yvalues = [];\r
        this.yminmax = [];\r
    },\r
\r
    getRegion: function(x, y) {\r
        var i,\r
            regionMap = this.regionMap; // maps regions to value positions\r
\r
        for (i = regionMap.length; i--;) {\r
            if (regionMap[i] !== null && x >= regionMap[i][0] && x <= regionMap[i][1]) {\r
                return regionMap[i][2];\r
            }\r
        }\r
        return undefined;\r
    },\r
\r
    getRegionFields: function(region) {\r
        return {\r
            isNull: this.yvalues[region] === null,\r
            x: this.xvalues[region],\r
            y: this.yvalues[region],\r
            color: this.getLineColor(),\r
            fillColor: this.getFillColor(),\r
            offset: region\r
        };\r
    },\r
\r
    renderHighlight: function(region) {\r
        var me = this,\r
            canvas = me.canvas,\r
            vertex = me.vertices[region],\r
            spotRadius = me.getSpotRadius(),\r
            highlightSpotColor = me.getHighlightSpotColor(),\r
            highlightLineColor = me.getHighlightLineColor();\r
\r
        if (!vertex) {\r
            return;\r
        }\r
        if (spotRadius && highlightSpotColor) {\r
            canvas.drawCircle(vertex[0], vertex[1], spotRadius, null, highlightSpotColor).append();\r
        }\r
        if (highlightLineColor) {\r
            canvas.drawLine(vertex[0], me.canvasTop, vertex[0], me.canvasTop + me.getHeight(), highlightLineColor).append();\r
        }\r
    },\r
\r
    scanValues: function () {\r
        var me = this,\r
            values = me.values,\r
            valcount = values.length,\r
            xvalues = me.xvalues,\r
            yvalues = me.yvalues,\r
            yminmax = me.yminmax,\r
            i, val, isStr, isArray, sp;\r
\r
        for (i = 0; i < valcount; i++) {\r
            val = values[i];\r
            isStr = typeof(values[i]) === 'string';\r
            isArray = typeof(values[i]) === 'object' && values[i] instanceof Array;\r
            sp = isStr && values[i].split(':');\r
\r
            if (isStr && sp.length === 2) { // x:y\r
                xvalues.push(Number(sp[0]));\r
                yvalues.push(Number(sp[1]));\r
                yminmax.push(Number(sp[1]));\r
            } else if (isArray) {\r
                xvalues.push(val[0]);\r
                yvalues.push(val[1]);\r
                yminmax.push(val[1]);\r
            } else {\r
                xvalues.push(i);\r
                if (values[i] === null || values[i] === 'null') {\r
                    yvalues.push(null);\r
                } else {\r
                    yvalues.push(Number(val));\r
                    yminmax.push(Number(val));\r
                }\r
            }\r
        }\r
        if (me.xvalues) {\r
            xvalues = me.xvalues;\r
        }\r
\r
        me.maxy = me.maxyorg = Math.max.apply(Math, yminmax);\r
        me.miny = me.minyorg = Math.min.apply(Math, yminmax);\r
\r
        me.maxx = Math.max.apply(Math, xvalues);\r
        me.minx = Math.min.apply(Math, xvalues);\r
\r
        me.xvalues = xvalues;\r
        me.yvalues = yvalues;\r
        me.yminmax = yminmax;\r
    },\r
\r
    processRangeOptions: function () {\r
        var me = this,\r
            normalRangeMin = me.getNormalRangeMin(),\r
            normalRangeMax = me.getNormalRangeMax(),\r
            chartRangeMin = me.getChartRangeMin(),\r
            chartRangeMinX = me.getChartRangeMinX(),\r
            chartRangeMax = me.getChartRangeMax(),\r
            chartRangeMaxX = me.getChartRangeMaxX();\r
\r
        if (normalRangeMin != null) {\r
            if (normalRangeMin < me.miny) {\r
                me.miny = normalRangeMin;\r
            }\r
            if (normalRangeMax > me.maxy) {\r
                me.maxy = normalRangeMax;\r
            }\r
        }\r
        if (chartRangeMin != null && (me.chartRangeClip || chartRangeMin < me.miny)) {\r
            me.miny = chartRangeMin;\r
        }\r
        if (chartRangeMax != null && (me.chartRangeClip || chartRangeMax > me.maxy)) {\r
            this.maxy = chartRangeMax;\r
        }\r
        if (chartRangeMinX != null && (me.chartRangeClipX || chartRangeMinX < me.minx)) {\r
            me.minx = chartRangeMinX;\r
        }\r
        if (chartRangeMaxX != null && (me.chartRangeClipX || chartRangeMaxX > me.maxx)) {\r
            me.maxx = chartRangeMaxX;\r
        }\r
\r
    },\r
\r
    drawNormalRange: function (canvasLeft, canvasTop, canvasHeight, canvasWidth, rangey) {\r
        var normalRangeMin = this.getNormalRangeMin(),\r
            normalRangeMax = this.getNormalRangeMax(),\r
            ytop = canvasTop + Math.round(canvasHeight - (canvasHeight * ((normalRangeMax - this.miny) / rangey))),\r
            height = Math.round((canvasHeight * (normalRangeMax - normalRangeMin)) / rangey);\r
        this.canvas.drawRect(canvasLeft, ytop, canvasWidth, height, undefined, this.normalRangeColor).append();\r
    },\r
\r
    renderGraph: function () {\r
        var me = this,\r
            canvas = me.canvas,\r
            canvasWidth = me.getWidth(),\r
            canvasHeight = me.getHeight(),\r
            vertices = me.vertices,\r
            spotRadius = me.getSpotRadius(),\r
            regionMap = me.regionMap,\r
            rangeX, Y, yvallast,\r
            canvasTop, canvasLeft,\r
            vertex, path, paths, x, y, xNext, xPos, xPosNext,\r
            last, next, yValCount, lineShapes, fillShapes, plen,\r
            valueSpots = me.getValueSpots(), hlSpotsEnabled, color, xValues, yValues, i,\r
            spotColor = me.getSpotColor(),\r
            minSpotColor = me.getMinSpotColor(),\r
            maxSpotColor = me.getMaxSpotColor(),\r
            normalRangeMin = me.getNormalRangeMin(),\r
            drawNormalOnTop = me.getDrawNormalOnTop();\r
\r
        if (!me.callParent()) {\r
            return;\r
        }\r
\r
        me.scanValues();\r
        me.processRangeOptions();\r
\r
        xValues = me.xvalues;\r
        yValues = me.yvalues;\r
\r
        if (!me.yminmax.length || me.yvalues.length < 2) {\r
            // empty or all null valuess\r
            return;\r
        }\r
\r
        canvasTop = canvasLeft = 0;\r
\r
        rangeX = me.maxx - me.minx === 0 ? 1 : me.maxx - me.minx;\r
        Y = me.maxy - me.miny === 0 ? 1 : me.maxy - me.miny;\r
        yvallast = me.yvalues.length - 1;\r
\r
        if (spotRadius && (canvasWidth < (spotRadius * 4) || canvasHeight < (spotRadius * 4))) {\r
            spotRadius = 0;\r
        }\r
        if (spotRadius) {\r
            // adjust the canvas size as required so that spots will fit\r
            hlSpotsEnabled = me.getHighlightSpotColor() &&  !me.disableInteraction;\r
            if (hlSpotsEnabled || minSpotColor || (spotColor && yValues[yvallast] === me.miny)) {\r
                canvasHeight -= Math.ceil(spotRadius);\r
            }\r
            if (hlSpotsEnabled || maxSpotColor || (spotColor && yValues[yvallast] === me.maxy)) {\r
                canvasHeight -= Math.ceil(spotRadius);\r
                canvasTop += Math.ceil(spotRadius);\r
            }\r
            if (hlSpotsEnabled ||\r
                    ((minSpotColor || maxSpotColor) && (yValues[0] === me.miny || yValues[0] === me.maxy))) {\r
                canvasLeft += Math.ceil(spotRadius);\r
                canvasWidth -= Math.ceil(spotRadius);\r
            }\r
            if (hlSpotsEnabled || spotColor ||\r
                (minSpotColor || maxSpotColor &&\r
                    (yValues[yvallast] === me.miny || yValues[yvallast] === me.maxy))) {\r
                canvasWidth -= Math.ceil(spotRadius);\r
            }\r
        }\r
\r
        canvasHeight--;\r
\r
        if (normalRangeMin != null && !drawNormalOnTop) {\r
            me.drawNormalRange(canvasLeft, canvasTop, canvasHeight, canvasWidth, Y);\r
        }\r
\r
        path = [];\r
        paths = [path];\r
        last = next = null;\r
        yValCount = yValues.length;\r
        for (i = 0; i < yValCount; i++) {\r
            x = xValues[i];\r
            xNext = xValues[i + 1];\r
            y = yValues[i];\r
            xPos = canvasLeft + Math.round((x - me.minx) * (canvasWidth / rangeX));\r
            xPosNext = i < yValCount - 1 ? canvasLeft + Math.round((xNext - me.minx) * (canvasWidth / rangeX)) : canvasWidth;\r
            next = xPos + ((xPosNext - xPos) / 2);\r
            regionMap[i] = [last || 0, next, i];\r
            last = next;\r
            if (y === null) {\r
                if (i) {\r
                    if (yValues[i - 1] !== null) {\r
                        path = [];\r
                        paths.push(path);\r
                    }\r
                    vertices.push(null);\r
                }\r
            } else {\r
                if (y < me.miny) {\r
                    y = me.miny;\r
                }\r
                if (y > me.maxy) {\r
                    y = me.maxy;\r
                }\r
                if (!path.length) {\r
                    // previous value was null\r
                    path.push([xPos, canvasTop + canvasHeight]);\r
                }\r
                vertex = [xPos, canvasTop + Math.round(canvasHeight - (canvasHeight * ((y - this.miny) / Y)))];\r
                path.push(vertex);\r
                vertices.push(vertex);\r
            }\r
        }\r
\r
        lineShapes = [];\r
        fillShapes = [];\r
        plen = paths.length;\r
        for (i = 0; i < plen; i++) {\r
            path = paths[i];\r
            if (path.length) {\r
                if (me.fillColor) {\r
                    path.push([path[path.length - 1][0], (canvasTop + canvasHeight)]);\r
                    fillShapes.push(path.slice(0));\r
                    path.pop();\r
                }\r
                // if there's only a single point in this path, then we want to display it\r
                // as a vertical line which means we keep path[0]  as is\r
                if (path.length > 2) {\r
                    // else we want the first value\r
                    path[0] = [path[0][0], path[1][1]];\r
                }\r
                lineShapes.push(path);\r
            }\r
        }\r
\r
        // draw the fill first, then optionally the normal range, then the line on top of that\r
        plen = fillShapes.length;\r
        for (i = 0; i < plen; i++) {\r
            canvas.drawShape(fillShapes[i],\r
                me.fillColor, me.fillColor).append();\r
        }\r
\r
        if (normalRangeMin != null && drawNormalOnTop) {\r
            me.drawNormalRange(canvasLeft, canvasTop, canvasHeight, canvasWidth, Y);\r
        }\r
\r
        plen = lineShapes.length;\r
        for (i = 0; i < plen; i++) {\r
            canvas.drawShape(lineShapes[i], me.getLineColor(), null, me.getLineWidth()).append();\r
        }\r
\r
        if (spotRadius && valueSpots) {\r
            if (valueSpots.get == null) {\r
                valueSpots = new Ext.sparkline.RangeMap(valueSpots);\r
            }\r
            for (i = 0; i < yValCount; i++) {\r
                color = valueSpots.get(yValues[i]);\r
                if (color) {\r
                    canvas.drawCircle(canvasLeft + Math.round((xValues[i] - me.minx) * (canvasWidth / rangeX)),\r
                        canvasTop + Math.round(canvasHeight - (canvasHeight * ((yValues[i] - me.miny) / Y))),\r
                        spotRadius, null,\r
                        color).append();\r
                }\r
            }\r
\r
        }\r
        if (spotRadius && spotColor && yValues[yvallast] != null) {\r
            canvas.drawCircle(canvasLeft + Math.round((xValues[xValues.length - 1] - me.minx) * (canvasWidth / rangeX)),\r
                canvasTop + Math.round(canvasHeight - (canvasHeight * ((yValues[yvallast] - me.miny) / Y))),\r
                spotRadius, null,\r
                spotColor).append();\r
        }\r
        if (me.maxy !== me.minyorg) {\r
            if (spotRadius && minSpotColor) {\r
                x = xValues[Ext.Array.indexOf(yValues, me.minyorg)];\r
                canvas.drawCircle(canvasLeft + Math.round((x - me.minx) * (canvasWidth / rangeX)),\r
                    canvasTop + Math.round(canvasHeight - (canvasHeight * ((me.minyorg - me.miny) / Y))),\r
                    spotRadius, null,\r
                    minSpotColor).append();\r
            }\r
            if (spotRadius && maxSpotColor) {\r
                x = xValues[Ext.Array.indexOf(yValues, me.maxyorg)];\r
                canvas.drawCircle(canvasLeft + Math.round((x - me.minx) * (canvasWidth / rangeX)),\r
                    canvasTop + Math.round(canvasHeight - (canvasHeight * ((me.maxyorg - me.miny) / Y))),\r
                    spotRadius, null,\r
                    maxSpotColor).append();\r
            }\r
        }\r
\r
        me.canvasTop = canvasTop;\r
\r
        // If mouse is over, apply the highlight\r
        if (me.currentPageXY && me.el.getRegion().contains(me.currentPageXY)) {\r
            me.updateDisplay();\r
        }\r
        canvas.render();\r
    }\r
});