add extjs 6.0.1 sources

[extjs.git] / extjs / packages / charts / src / chart / series / sprite / Line.js

/**\r
 * @class Ext.chart.series.sprite.Line\r
 * @extends Ext.chart.series.sprite.Aggregative\r
 *\r
 * Line series sprite.\r
 */\r
Ext.define('Ext.chart.series.sprite.Line', {\r
    alias: 'sprite.lineSeries',\r
    extend: 'Ext.chart.series.sprite.Aggregative',\r
\r
    inheritableStatics: {\r
        def: {\r
            processors: {\r
                /**\r
                 * @cfg {Boolean} [smooth=false]\r
                 * `true` if the sprite uses line smoothing.\r
                 * Don't enable this if your data has gaps: NaN, undefined, etc.\r
                 */\r
                smooth: 'bool',\r
                /**\r
                 * @cfg {Boolean} [fillArea=false]\r
                 * `true` if the sprite paints the area underneath the line.\r
                 */\r
                fillArea: 'bool',\r
                /**\r
                 * @cfg {Boolean} [step=false]\r
                 * `true` if the line uses steps instead of straight lines to connect the dots.\r
                 * It is ignored if `smooth` is `true`.\r
                 */\r
                step: 'bool',\r
                /**\r
                 * @cfg {Boolean} [preciseStroke=true]\r
                 * `true` if the line uses precise stroke.\r
                 */\r
                preciseStroke: 'bool',\r
                /**\r
                 * @private\r
                 * The x-axis associated with the Line series.\r
                 * We need to know the position of the x-axis to fill the area underneath\r
                 * the stroke properly.\r
                 */\r
                xAxis: 'default',\r
                /**\r
                 * @cfg {Number} [yCap=Math.pow(2, 20)]\r
                 * Absolute maximum y-value.\r
                 * Larger values will be capped to avoid rendering issues.\r
                 */\r
                yCap: 'default' // The 'default' processor is used here as we don't want this attribute to animate.\r
            },\r
\r
            defaults: {\r
                smooth: false,\r
                fillArea: false,\r
                step: false,\r
                preciseStroke: true,\r
                xAxis: null,\r
                yCap: Math.pow(2, 20),\r
                yJump: 50\r
            },\r
\r
            triggers: {\r
                dataX: 'dataX,bbox,smooth',\r
                dataY: 'dataY,bbox,smooth',\r
                smooth: 'smooth'\r
            },\r
\r
            updaters: {\r
                smooth: function (attr) {\r
                    var dataX = attr.dataX,\r
                        dataY = attr.dataY;\r
                    if (attr.smooth && dataX && dataY && dataX.length > 2 && dataY.length > 2) {\r
                        this.smoothX = Ext.draw.Draw.spline(dataX);\r
                        this.smoothY = Ext.draw.Draw.spline(dataY);\r
                    } else {\r
                        delete this.smoothX;\r
                        delete this.smoothY;\r
                    }\r
                }\r
            }\r
        }\r
    },\r
\r
    list: null,\r
\r
    updatePlainBBox: function (plain) {\r
        var attr = this.attr,\r
            ymin = Math.min(0, attr.dataMinY),\r
            ymax = Math.max(0, attr.dataMaxY);\r
        plain.x = attr.dataMinX;\r
        plain.y = ymin;\r
        plain.width = attr.dataMaxX - attr.dataMinX;\r
        plain.height = ymax - ymin;\r
    },\r
\r
    drawStrip: function (ctx, strip) {\r
        ctx.moveTo(strip[0], strip[1]);\r
        for (var i = 2, ln = strip.length; i < ln; i += 2) {\r
            ctx.lineTo(strip[i], strip[i + 1]);\r
        }\r
    },\r
\r
    drawStraightStroke: function (surface, ctx, start, end, list, xAxis) {\r
        var me = this,\r
            attr = me.attr,\r
            renderer = attr.renderer,\r
            step = attr.step,\r
            needMoveTo = true,\r
            lineConfig = {\r
                type: 'line',\r
                smooth: false,\r
                step: step\r
            },\r
            strip = [], // Stores last continuous segment of the stroke.\r
            lineConfig, changes, params, stripStartX,\r
            x, y, x0, y0, x1, y1, i;\r
\r
        for (i = 3; i < list.length; i += 3) {\r
            x0 = list[i - 3];\r
            y0 = list[i - 2];\r
            x = list[i];\r
            y = list[i + 1];\r
            x1 = list[i + 3];\r
            y1 = list[i + 4];\r
\r
            if (renderer) {\r
                lineConfig.x = x;\r
                lineConfig.y = y;\r
                lineConfig.x0 = x0;\r
                lineConfig.y0 = y0;\r
                params = [me, lineConfig, me.rendererData, start + i/3];\r
                changes = Ext.callback(renderer, null, params, 0, me.getSeries());\r
            }\r
\r
            if (Ext.isNumber(x + y + x0 + y0)) {\r
                if (needMoveTo) {\r
                    ctx.beginPath();\r
                    ctx.moveTo(x0, y0);\r
                    strip.push(x0, y0);\r
                    stripStartX = x0;\r
                    needMoveTo = false;\r
                }\r
            } else {\r
                continue;\r
            }\r
\r
            if (step) {\r
                ctx.lineTo(x, y0);\r
                strip.push(x, y0);\r
            }\r
            ctx.lineTo(x, y);\r
            strip.push(x, y);\r
\r
            if ( changes || !(Ext.isNumber(x1 + y1)) ) {\r
                ctx.save();\r
                    Ext.apply(ctx, changes);\r
\r
                    if (attr.fillArea) {\r
                        ctx.lineTo(x, xAxis);\r
                        ctx.lineTo(stripStartX, xAxis);\r
                        ctx.closePath();\r
                        ctx.fill();\r
                    }\r
\r
                    // Draw the line on top of the filled area.\r
                    ctx.beginPath();\r
                    me.drawStrip(ctx, strip);\r
                    strip = [];\r
                    ctx.stroke();\r
                ctx.restore();\r
\r
                ctx.beginPath();\r
                needMoveTo = true;\r
            }\r
        }\r
    },\r
\r
    calculateScale: function (count, end) {\r
        var power = 0,\r
            n = count;\r
        while (n < end && count > 0) {\r
            power++;\r
            n += count >> power;\r
        }\r
        return Math.pow(2, power > 0 ? power - 1 : power);\r
    },\r
\r
    drawSmoothStroke: function (surface, ctx, start, end, list, xAxis) {\r
        var me = this,\r
            attr = me.attr,\r
            step = attr.step,\r
            matrix = attr.matrix,\r
            renderer = attr.renderer,\r
            xx = matrix.getXX(),\r
            yy = matrix.getYY(),\r
            dx = matrix.getDX(),\r
            dy = matrix.getDY(),\r
            smoothX = me.smoothX,\r
            smoothY = me.smoothY,\r
            scale = me.calculateScale(attr.dataX.length, end),\r
            cx1, cy1, cx2, cy2, x, y, x0, y0,\r
            i, j, changes, params,\r
            lineConfig = {\r
                type: 'line',\r
                smooth: true,\r
                step: step\r
            };\r
\r
        ctx.beginPath();\r
        ctx.moveTo(smoothX[start * 3] * xx + dx, smoothY[start * 3] * yy + dy);\r
        for (i = 0, j = start * 3 + 1; i < list.length - 3; i += 3, j += 3 * scale) {\r
            cx1 = smoothX[j] * xx + dx;\r
            cy1 = smoothY[j] * yy + dy;\r
            cx2 = smoothX[j + 1] * xx + dx;\r
            cy2 = smoothY[j + 1] * yy + dy;\r
            x = surface.roundPixel(list[i + 3]);\r
            y = list[i + 4];\r
            x0 = surface.roundPixel(list[i]);\r
            y0 = list[i + 1];\r
\r
            if (renderer) {\r
                lineConfig.x0 = x0;\r
                lineConfig.y0 = y0;\r
                lineConfig.cx1 = cx1;\r
                lineConfig.cy1 = cy1;\r
                lineConfig.cx2 = cx2;\r
                lineConfig.cy2 = cy2;\r
                lineConfig.x = x;\r
                lineConfig.y = y;\r
                params = [me, lineConfig, me.rendererData, start + i/3 + 1];\r
                changes = Ext.callback(renderer, null, params, 0, me.getSeries());\r
                ctx.save();\r
                Ext.apply(ctx, changes);\r
            }\r
\r
            if (attr.fillArea) {\r
                ctx.moveTo(x0, y0);\r
                ctx.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);\r
                ctx.lineTo(x, xAxis);\r
                ctx.lineTo(x0, xAxis);\r
                ctx.lineTo(x0, y0);\r
                ctx.closePath();\r
                ctx.fill();\r
                ctx.beginPath();\r
            }\r
            // Draw the line on top of the filled area.\r
            ctx.moveTo(x0, y0);\r
            ctx.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);\r
            ctx.stroke();\r
            ctx.moveTo(x0, y0);\r
            ctx.closePath();\r
\r
            if (renderer) {\r
                ctx.restore();\r
            }\r
\r
            ctx.beginPath();\r
            ctx.moveTo(x, y);\r
        }\r
        // Prevent the last visible segment from being stroked twice\r
        // (second time by the ctx.fillStroke inside Path sprite 'render' method)\r
        ctx.beginPath();\r
    },\r
\r
    drawLabel: function (text, dataX, dataY, labelId, rect) {\r
        var me = this,\r
            attr = me.attr,\r
            label = me.getMarker('labels'),\r
            labelTpl = label.getTemplate(),\r
            labelCfg = me.labelCfg || (me.labelCfg = {}),\r
            surfaceMatrix = me.surfaceMatrix,\r
            labelX, labelY,\r
            labelOverflowPadding = attr.labelOverflowPadding,\r
            halfHeight, labelBBox,\r
            changes, params, hasPendingChanges;\r
\r
        // The coordinates below (data point converted to surface coordinates)\r
        // are just for the renderer to give it a notion of where the label will be positioned.\r
        // The actual position of the label will be different\r
        // (unless the renderer returns x/y coordinates in the changes object)\r
        // and depend on several things including the size of the text,\r
        // which has to be measured after the renderer call,\r
        // since text can be modified by the renderer.\r
        labelCfg.x = surfaceMatrix.x(dataX, dataY);\r
        labelCfg.y = surfaceMatrix.y(dataX, dataY);\r
\r
        if (attr.flipXY) {\r
            labelCfg.rotationRads = Math.PI * 0.5;\r
        } else {\r
            labelCfg.rotationRads = 0;\r
        }\r
\r
        labelCfg.text = text;\r
\r
        if (labelTpl.attr.renderer) {\r
            params = [text, label, labelCfg, me.rendererData, labelId];\r
            changes = Ext.callback(labelTpl.attr.renderer, null, params, 0, me.getSeries());\r
            if (typeof changes === 'string') {\r
                labelCfg.text = changes;\r
            } else if (typeof changes === 'object') {\r
                if ('text' in changes) {\r
                    labelCfg.text = changes.text;\r
                }\r
                hasPendingChanges = true;\r
            }\r
        }\r
\r
        labelBBox = me.getMarkerBBox('labels', labelId, true);\r
        if (!labelBBox) {\r
            me.putMarker('labels', labelCfg, labelId);\r
            labelBBox = me.getMarkerBBox('labels', labelId, true);\r
        }\r
\r
        halfHeight = labelBBox.height / 2;\r
        labelX = dataX;\r
\r
        switch (labelTpl.attr.display) {\r
            case 'under':\r
                labelY = dataY - halfHeight - labelOverflowPadding;\r
                break;\r
            case 'rotate':\r
                labelX += labelOverflowPadding;\r
                labelY = dataY - labelOverflowPadding;\r
                labelCfg.rotationRads = -Math.PI / 4;\r
                break;\r
            default: // 'over'\r
                labelY = dataY + halfHeight + labelOverflowPadding;\r
        }\r
\r
        labelCfg.x = surfaceMatrix.x(labelX, labelY);\r
        labelCfg.y = surfaceMatrix.y(labelX, labelY);\r
\r
        if (hasPendingChanges) {\r
            Ext.apply(labelCfg, changes);\r
        }\r
\r
        me.putMarker('labels', labelCfg, labelId);\r
    },\r
\r
    drawMarker: function (x, y, index) {\r
        var me = this,\r
            attr = me.attr,\r
            renderer = attr.renderer,\r
            surfaceMatrix = me.surfaceMatrix,\r
            markerCfg = {},\r
            changes, params;\r
\r
        if (renderer && me.getMarker('markers')) {\r
            markerCfg.type = 'marker';\r
            markerCfg.x = x;\r
            markerCfg.y = y;\r
            params = [me, markerCfg, me.rendererData, index];\r
            changes = Ext.callback(renderer, null, params, 0, me.getSeries());\r
            if (changes) {\r
                Ext.apply(markerCfg, changes);\r
            }\r
        }\r
\r
        markerCfg.translationX = surfaceMatrix.x(x, y);\r
        markerCfg.translationY = surfaceMatrix.y(x, y);\r
\r
        delete markerCfg.x;\r
        delete markerCfg.y;\r
\r
        me.putMarker('markers', markerCfg, index, !renderer);\r
    },\r
\r
    drawStroke: function (surface, ctx, start, end, list, xAxis) {\r
        var me = this,\r
            isSmooth = me.attr.smooth && me.smoothX && me.smoothY;\r
\r
        if (isSmooth) {\r
            me.drawSmoothStroke(surface, ctx, start, end, list, xAxis);\r
        } else {\r
            me.drawStraightStroke(surface, ctx, start, end, list, xAxis);\r
        }\r
    },\r
\r
    renderAggregates: function (aggregates, start, end, surface, ctx, clip, rect) {\r
        var me = this,\r
            attr = me.attr,\r
            dataX = attr.dataX,\r
            dataY = attr.dataY,\r
            labels = attr.labels,\r
            xAxis = attr.xAxis,\r
            yCap = attr.yCap,\r
            isSmooth = attr.smooth && me.smoothX && me.smoothY,\r
            isDrawLabels = labels && me.getMarker('labels'),\r
            isDrawMarkers = me.getMarker('markers'),\r
            matrix = attr.matrix,\r
            pixel = surface.devicePixelRatio,\r
            xx = matrix.getXX(),\r
            yy = matrix.getYY(),\r
            dx = matrix.getDX(),\r
            dy = matrix.getDY(),\r
            list = me.list || (me.list = []),\r
            minXs = aggregates.minX,\r
            maxXs = aggregates.maxX,\r
            minYs = aggregates.minY,\r
            maxYs = aggregates.maxY,\r
            idx = aggregates.startIdx,\r
            isContinuousLine = true,\r
            xAxisOrigin, isVerticalX,\r
            x, y, i, index;\r
\r
        me.rendererData = {store: me.getStore()};\r
        list.length = 0;\r
\r
        // Say we have 7 y-items (attr.dataY): [20, 19, 17, 15, 11, 10, 14]\r
        //         and 7 x-items (attr.dataX): [0,   1,  2,  3,  4,  5,  6].\r
        // Then aggregates.startIdx is an aggregated index,\r
        // where every other item is skipped on each aggregation level:\r
        // [0, 1, 2, 3, 4, 5, 6,\r
        //  0, 2, 4, 6,\r
        //  0, 4,\r
        //  0]\r
        // aggregates.minY\r
        // [20, 19, 17, 15, 11, 10, 14,\r
        //  19, 15, 10, 14,\r
        //  15, 10,\r
        //  10]\r
        // aggregates.maxY\r
        // [20, 19, 17, 15, 11, 10, 14,\r
        //  20, 17, 11, 14,\r
        //  20, 14,\r
        //  20]\r
        // aggregates.minX is\r
        // [0, 1, 2, 3, 4, 5, 6,\r
        //  1, 3, 5, 6, // TODO: why this order for min?\r
        //  3, 5,       // TODO: why this inconsistency?\r
        //  5]\r
        // aggregates.maxX is\r
        // [0, 1, 2, 3, 4, 5, 6,\r
        //  0, 2, 4, 6,\r
        //  0, 6,\r
        //  0]\r
\r
        // Create a list of the form [x0, y0, idx0, x1, y1, idx1, ...],\r
        // where each x,y pair is a coordinate representing original data point\r
        // at the idx position.\r
        for (i = start; i < end; i++) {\r
            var minX = minXs[i],\r
                maxX = maxXs[i],\r
                minY = minYs[i],\r
                maxY = maxYs[i];\r
\r
            if (minX < maxX) {\r
                list.push(minX * xx + dx, minY * yy + dy, idx[i]);\r
                list.push(maxX * xx + dx, maxY * yy + dy, idx[i]);\r
            } else if (minX > maxX) {\r
                list.push(maxX * xx + dx, maxY * yy + dy, idx[i]);\r
                list.push(minX * xx + dx, minY * yy + dy, idx[i]);\r
            } else {\r
                list.push(maxX * xx + dx, maxY * yy + dy, idx[i]);\r
            }\r
        }\r
\r
        if (list.length) {\r
            for (i = 0; i < list.length; i += 3) {\r
                x = list[i];\r
                y = list[i + 1];\r
                if (Ext.isNumber(x + y)) {\r
                    if (y > yCap) {\r
                        y = yCap;\r
                    } else if (y < -yCap) {\r
                        y = -yCap;\r
                    }\r
                    list[i + 1] = y;\r
                } else {\r
                    isContinuousLine = false;\r
                    continue;\r
                }\r
                index = list[i + 2];\r
                if (isDrawMarkers) {\r
                    me.drawMarker(x, y, index);\r
                }\r
                if (isDrawLabels && labels[index]) {\r
                    me.drawLabel(labels[index], x, y, index, rect);\r
                }\r
            }\r
\r
            me.isContinuousLine = isContinuousLine;\r
            if (isSmooth && !isContinuousLine) {\r
                Ext.raise("Line smoothing in only supported for gapless data, " +\r
                    "where all data points are finite numbers.");\r
            }\r
\r
            if (xAxis) {\r
                isVerticalX = xAxis.getAlignment() === 'vertical';\r
                if (Ext.isNumber(xAxis.floatingAtCoord)) {\r
                    xAxisOrigin = (isVerticalX ? rect[2] : rect[3]) - xAxis.floatingAtCoord;\r
                } else {\r
                    xAxisOrigin = isVerticalX ? rect[0] : rect[1];\r
                }\r
            } else {\r
                xAxisOrigin = attr.flipXY ? rect[0] : rect[1];\r
            }\r
\r
            if (attr.preciseStroke) {\r
                if (attr.fillArea) {\r
                    ctx.fill();\r
                }\r
                if (attr.transformFillStroke) {\r
                    attr.inverseMatrix.toContext(ctx);\r
                }\r
                me.drawStroke(surface, ctx, start, end, list, xAxisOrigin);\r
                if (attr.transformFillStroke) {\r
                    attr.matrix.toContext(ctx);\r
                }\r
                ctx.stroke();\r
            } else {\r
                me.drawStroke(surface, ctx, start, end, list, xAxisOrigin);\r
\r
                if (isContinuousLine && isSmooth && attr.fillArea && !attr.renderer) {\r
                    var lastPointX = dataX[dataX.length - 1] * xx + dx + pixel,\r
                        lastPointY = dataY[dataY.length - 1] * yy + dy,\r
                        firstPointX = dataX[0] * xx + dx - pixel,\r
                        firstPointY = dataY[0] * yy + dy;\r
                    ctx.lineTo(lastPointX, lastPointY);\r
                    ctx.lineTo(lastPointX, xAxisOrigin - attr.lineWidth);\r
                    ctx.lineTo(firstPointX, xAxisOrigin - attr.lineWidth);\r
                    ctx.lineTo(firstPointX, firstPointY);\r
                }\r
\r
                if (attr.transformFillStroke) {\r
                    attr.matrix.toContext(ctx);\r
                }\r
                // Prevent the reverse transform to fix floating point error.\r
                if (attr.fillArea) {\r
                    ctx.fillStroke(attr, true);\r
                } else {\r
                    ctx.stroke(true);\r
                }\r
            }\r
        }\r
    }\r
});