add extjs 6.0.1 sources

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

/**\r
 * @class Ext.chart.series.Line\r
 * @extends Ext.chart.series.Cartesian\r
 *\r
 * Creates a Line Chart. A Line Chart is a useful visualization technique to display quantitative information for different\r
 * categories or other real values (as opposed to the bar chart), that can show some progression (or regression) in the dataset.\r
 * As with all other series, the Line Series must be appended in the *series* Chart array configuration. See the Chart\r
 * documentation for more information. A typical configuration object for the line series could be:\r
 *\r
 *     @example\r
 *     Ext.create({\r
 *        xtype: 'cartesian', \r
 *        renderTo: document.body,\r
 *        width: 600,\r
 *        height: 400,\r
 *        insetPadding: 40,\r
 *        store: {\r
 *            fields: ['name', 'data1', 'data2'],\r
 *            data: [{\r
 *                'name': 'metric one',\r
 *                'data1': 10,\r
 *                'data2': 14\r
 *            }, {\r
 *                'name': 'metric two',\r
 *                'data1': 7,\r
 *                'data2': 16\r
 *            }, {\r
 *                'name': 'metric three',\r
 *                'data1': 5,\r
 *                'data2': 14\r
 *            }, {\r
 *                'name': 'metric four',\r
 *                'data1': 2,\r
 *                'data2': 6\r
 *            }, {\r
 *                'name': 'metric five',\r
 *                'data1': 27,\r
 *                'data2': 36\r
 *            }]\r
 *        },\r
 *        axes: [{\r
 *            type: 'numeric',\r
 *            position: 'left',\r
 *            fields: ['data1'],\r
 *            title: {\r
 *                text: 'Sample Values',\r
 *                fontSize: 15\r
 *            },\r
 *            grid: true,\r
 *            minimum: 0\r
 *        }, {\r
 *            type: 'category',\r
 *            position: 'bottom',\r
 *            fields: ['name'],\r
 *            title: {\r
 *                text: 'Sample Values',\r
 *                fontSize: 15\r
 *            }\r
 *        }],\r
 *        series: [{\r
 *            type: 'line',\r
 *            style: {\r
 *                stroke: '#30BDA7',\r
 *                lineWidth: 2\r
 *            },\r
 *            xField: 'name',\r
 *            yField: 'data1',\r
 *            marker: {\r
 *                type: 'path',\r
 *                path: ['M', - 4, 0, 0, 4, 4, 0, 0, - 4, 'Z'],\r
 *                stroke: '#30BDA7',\r
 *                lineWidth: 2,\r
 *                fill: 'white'\r
 *            }\r
 *        }, {\r
 *            type: 'line',\r
 *            fill: true,\r
 *            style: {\r
 *                fill: '#96D4C6',\r
 *                fillOpacity: .6,\r
 *                stroke: '#0A3F50',\r
 *                strokeOpacity: .6,\r
 *            },\r
 *            xField: 'name',\r
 *            yField: 'data2',\r
 *            marker: {\r
 *                type: 'circle',\r
 *                radius: 4,\r
 *                lineWidth: 2,\r
 *                fill: 'white'\r
 *            }\r
 *        }]\r
 *     });\r
 *\r
 * In this configuration we're adding two series (or lines), one bound to the `data1`\r
 * property of the store and the other to `data3`. The type for both configurations is\r
 * `line`. The `xField` for both series is the same, the `name` property of the store.\r
 * Both line series share the same axis, the left axis. You can set particular marker\r
 * configuration by adding properties onto the marker object. Both series have\r
 * an object as highlight so that markers animate smoothly to the properties in highlight\r
 * when hovered. The second series has `fill = true` which means that the line will also\r
 * have an area below it of the same color.\r
 *\r
 * **Note:** In the series definition remember to explicitly set the axis to bind the\r
 * values of the line series to. This can be done by using the `axis` configuration property.\r
 */\r
Ext.define('Ext.chart.series.Line', {\r
    extend: 'Ext.chart.series.Cartesian',\r
    alias: 'series.line',\r
    type: 'line',\r
    seriesType: 'lineSeries',\r
\r
    requires: [\r
        'Ext.chart.series.sprite.Line'\r
    ],\r
\r
    config: {\r
        /**\r
         * @cfg {Number} selectionTolerance\r
         * The offset distance from the cursor position to the line series to trigger events (then used for highlighting series, etc).\r
         */\r
        selectionTolerance: 20,\r
\r
        /**\r
         * @cfg {Object} style\r
         * An object containing styles for the visualization lines. These styles will override the theme styles.\r
         * Some options contained within the style object will are described next.\r
         */\r
\r
        /**\r
         * @cfg {Boolean/Number} smooth\r
         * If set to `true` or a non-zero number, the line will be smoothed/rounded around its points; otherwise\r
         * straight line segments will be drawn.\r
         *\r
         * A numeric value is interpreted as a divisor of the horizontal distance between consecutive points in\r
         * the line; larger numbers result in sharper curves while smaller numbers result in smoother curves.\r
         *\r
         * If set to `true` then a default numeric value of 3 will be used.\r
         */\r
        smooth: false,\r
\r
        /**\r
         * @cfg {Boolean} step\r
         * If set to `true`, the line uses steps instead of straight lines to connect the dots.\r
         * It is ignored if `smooth` is true.\r
         */\r
        step: false,\r
\r
        /**\r
         * @cfg {Boolean} fill\r
         * If set to `true`, the area underneath the line is filled with the color defined as follows, listed by priority:\r
         * - The color that is configured for this series ({@link Ext.chart.series.Series#colors}).\r
         * - The color that is configured for this chart ({@link Ext.chart.AbstractChart#colors}).\r
         * - The fill color that is set in the {@link #style} config.\r
         * - The stroke color that is set in the {@link #style} config, or the same color as the line.\r
         *\r
         * Note: Do not confuse `series.config.fill` (which is a boolean) with `series.style.fill' (which is an alias\r
         * for the `fillStyle` property and contains a color). For compatibility with previous versions of the API,\r
         * if `config.fill` is undefined but a `style.fill' color is provided, `config.fill` is considered true.\r
         * So the default value below must be undefined, not false.\r
         */\r
        fill: undefined,\r
\r
        aggregator: { strategy: 'double' }\r
    },\r
\r
    /**\r
     * @private\r
     * Default numeric smoothing value to be used when `{@link #smooth} = true`.\r
     */\r
    defaultSmoothness: 3,\r
\r
    /**\r
     * @private\r
     * Size of the buffer area on either side of the viewport to provide seamless zoom/pan\r
     * transforms. Expressed as a multiple of the viewport length, e.g. 1 will make the buffer on\r
     * each side equal to the length of the visible axis viewport.\r
     */\r
    overflowBuffer: 1,\r
\r
    themeMarkerCount: function() {\r
        return 1;\r
    },\r
\r
    /**\r
     * @private\r
     * Override {@link Ext.chart.series.Series#getDefaultSpriteConfig}\r
     */\r
    getDefaultSpriteConfig: function () {\r
        var me = this,\r
            parentConfig = me.callParent(arguments),\r
            style = Ext.apply({}, me.getStyle()),\r
            styleWithTheme,\r
            fillArea = false;\r
\r
        if (typeof me.config.fill != 'undefined') {\r
            // If config.fill is present but there is no fillStyle, then use the\r
            // strokeStyle to fill (and paint the area the same color as the line).\r
            if (me.config.fill) {\r
                fillArea = true;\r
                if (typeof style.fillStyle == 'undefined') {\r
                    if (typeof style.strokeStyle == 'undefined') {\r
                        styleWithTheme = me.getStyleWithTheme();\r
                        style.fillStyle = styleWithTheme.fillStyle;\r
                        style.strokeStyle = styleWithTheme.strokeStyle;\r
                    } else {\r
                        style.fillStyle = style.strokeStyle;\r
                    }\r
                }\r
            }\r
        } else {\r
            // For compatibility with previous versions of the API, if config.fill\r
            // is undefined but style.fillStyle is provided, we fill the area.\r
            if (style.fillStyle) {\r
                fillArea = true;\r
            }\r
        }\r
\r
        // If we don't fill, then delete the fillStyle because that's what is used by\r
        // the Line sprite to fill below the line.\r
        if (!fillArea) {\r
            delete style.fillStyle;\r
        }\r
\r
        style = Ext.apply(parentConfig || {}, style);\r
\r
        return Ext.apply(style, {\r
            fillArea: fillArea,\r
            step: me.config.step,\r
            smooth: me.config.smooth,\r
            selectionTolerance: me.config.selectionTolerance\r
        });\r
    },\r
\r
    updateStep: function (step) {\r
        var sprite = this.getSprites()[0];\r
        if (sprite && sprite.attr.step !== step) {\r
            sprite.setAttributes({step: step});\r
        }\r
    },\r
\r
    updateFill: function (fill) {\r
        var sprite = this.getSprites()[0];\r
        if (sprite && sprite.attr.fillArea !== fill) {\r
            sprite.setAttributes({fillArea: fill});\r
        }\r
    },\r
\r
    updateSmooth: function (smooth) {\r
        var sprite = this.getSprites()[0];\r
        if (sprite && sprite.attr.smooth !== smooth) {\r
            sprite.setAttributes({smooth: smooth});\r
        }\r
    }\r
\r
});