| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538 |
- /* *
- *
- * (c) 2010-2021 Torstein Honsi
- *
- * License: www.highcharts.com/license
- *
- * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
- *
- * */
- 'use strict';
- var __extends = (this && this.__extends) || (function () {
- var extendStatics = function (d, b) {
- extendStatics = Object.setPrototypeOf ||
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
- function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
- return extendStatics(d, b);
- };
- return function (d, b) {
- extendStatics(d, b);
- function __() { this.constructor = d; }
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
- };
- })();
- import palette from '../../Core/Color/Palette.js';
- import Series from '../../Core/Series/Series.js';
- import SeriesRegistry from '../../Core/Series/SeriesRegistry.js';
- import U from '../../Core/Utilities.js';
- var defined = U.defined, merge = U.merge;
- /* *
- *
- * Class
- *
- * */
- /**
- * The line series is the base type and is therefor the series base prototype.
- *
- * @private
- */
- var LineSeries = /** @class */ (function (_super) {
- __extends(LineSeries, _super);
- function LineSeries() {
- /* *
- *
- * Static Functions
- *
- * */
- var _this = _super !== null && _super.apply(this, arguments) || this;
- /* *
- *
- * Properties
- *
- * */
- _this.data = void 0;
- _this.options = void 0;
- _this.points = void 0;
- return _this;
- }
- /* *
- *
- * Functions
- *
- * */
- /**
- * Draw the graph. Called internally when rendering line-like series
- * types. The first time it generates the `series.graph` item and
- * optionally other series-wide items like `series.area` for area
- * charts. On subsequent calls these items are updated with new
- * positions and attributes.
- *
- * @function Highcharts.Series#drawGraph
- */
- LineSeries.prototype.drawGraph = function () {
- var series = this, options = this.options, graphPath = (this.gappedPath || this.getGraphPath).call(this), styledMode = this.chart.styledMode, props = [[
- 'graph',
- 'highcharts-graph'
- ]];
- // Presentational properties
- if (!styledMode) {
- props[0].push((options.lineColor ||
- this.color ||
- palette.neutralColor20 // when colorByPoint = true
- ), options.dashStyle);
- }
- props = series.getZonesGraphs(props);
- // Draw the graph
- props.forEach(function (prop, i) {
- var graphKey = prop[0], graph = series[graphKey], verb = graph ? 'animate' : 'attr', attribs;
- if (graph) {
- graph.endX = series.preventGraphAnimation ?
- null :
- graphPath.xMap;
- graph.animate({ d: graphPath });
- }
- else if (graphPath.length) { // #1487
- /**
- * SVG element of area-based charts. Can be used for styling
- * purposes. If zones are configured, this element will be
- * hidden and replaced by multiple zone areas, accessible
- * via `series['zone-area-x']` (where x is a number,
- * starting with 0).
- *
- * @name Highcharts.Series#area
- * @type {Highcharts.SVGElement|undefined}
- */
- /**
- * SVG element of line-based charts. Can be used for styling
- * purposes. If zones are configured, this element will be
- * hidden and replaced by multiple zone lines, accessible
- * via `series['zone-graph-x']` (where x is a number,
- * starting with 0).
- *
- * @name Highcharts.Series#graph
- * @type {Highcharts.SVGElement|undefined}
- */
- series[graphKey] = graph = series.chart.renderer
- .path(graphPath)
- .addClass(prop[1])
- .attr({ zIndex: 1 }) // #1069
- .add(series.group);
- }
- if (graph && !styledMode) {
- attribs = {
- 'stroke': prop[2],
- 'stroke-width': options.lineWidth,
- // Polygon series use filled graph
- 'fill': (series.fillGraph && series.color) || 'none'
- };
- if (prop[3]) {
- attribs.dashstyle = prop[3];
- }
- else if (options.linecap !== 'square') {
- attribs['stroke-linecap'] =
- attribs['stroke-linejoin'] = 'round';
- }
- graph[verb](attribs)
- // Add shadow to normal series (0) or to first
- // zone (1) #3932
- .shadow((i < 2) && options.shadow);
- }
- // Helpers for animation
- if (graph) {
- graph.startX = graphPath.xMap;
- graph.isArea = graphPath.isArea; // For arearange animation
- }
- });
- };
- // eslint-disable-next-line valid-jsdoc
- /**
- * Get the graph path.
- *
- * @private
- */
- LineSeries.prototype.getGraphPath = function (points, nullsAsZeroes, connectCliffs) {
- var series = this, options = series.options, step = options.step, reversed, graphPath = [], xMap = [], gap;
- points = points || series.points;
- // Bottom of a stack is reversed
- reversed = points.reversed;
- if (reversed) {
- points.reverse();
- }
- // Reverse the steps (#5004)
- step = {
- right: 1,
- center: 2
- }[step] || (step && 3);
- if (step && reversed) {
- step = 4 - step;
- }
- // Remove invalid points, especially in spline (#5015)
- points = this.getValidPoints(points, false, !(options.connectNulls && !nullsAsZeroes && !connectCliffs));
- // Build the line
- points.forEach(function (point, i) {
- var plotX = point.plotX, plotY = point.plotY, lastPoint = points[i - 1],
- // the path to this point from the previous
- pathToPoint;
- if ((point.leftCliff || (lastPoint && lastPoint.rightCliff)) &&
- !connectCliffs) {
- gap = true; // ... and continue
- }
- // Line series, nullsAsZeroes is not handled
- if (point.isNull && !defined(nullsAsZeroes) && i > 0) {
- gap = !options.connectNulls;
- // Area series, nullsAsZeroes is set
- }
- else if (point.isNull && !nullsAsZeroes) {
- gap = true;
- }
- else {
- if (i === 0 || gap) {
- pathToPoint = [[
- 'M',
- point.plotX,
- point.plotY
- ]];
- // Generate the spline as defined in the SplineSeries object
- }
- else if (series.getPointSpline) {
- pathToPoint = [series.getPointSpline(points, point, i)];
- }
- else if (step) {
- if (step === 1) { // right
- pathToPoint = [[
- 'L',
- lastPoint.plotX,
- plotY
- ]];
- }
- else if (step === 2) { // center
- pathToPoint = [[
- 'L',
- (lastPoint.plotX + plotX) / 2,
- lastPoint.plotY
- ], [
- 'L',
- (lastPoint.plotX + plotX) / 2,
- plotY
- ]];
- }
- else {
- pathToPoint = [[
- 'L',
- plotX,
- lastPoint.plotY
- ]];
- }
- pathToPoint.push([
- 'L',
- plotX,
- plotY
- ]);
- }
- else {
- // normal line to next point
- pathToPoint = [[
- 'L',
- plotX,
- plotY
- ]];
- }
- // Prepare for animation. When step is enabled, there are
- // two path nodes for each x value.
- xMap.push(point.x);
- if (step) {
- xMap.push(point.x);
- if (step === 2) { // step = center (#8073)
- xMap.push(point.x);
- }
- }
- graphPath.push.apply(graphPath, pathToPoint);
- gap = false;
- }
- });
- graphPath.xMap = xMap;
- series.graphPath = graphPath;
- return graphPath;
- };
- // eslint-disable-next-line valid-jsdoc
- /**
- * Get zones properties for building graphs. Extendable by series with
- * multiple lines within one series.
- *
- * @private
- */
- LineSeries.prototype.getZonesGraphs = function (props) {
- // Add the zone properties if any
- this.zones.forEach(function (zone, i) {
- var propset = [
- 'zone-graph-' + i,
- 'highcharts-graph highcharts-zone-graph-' + i + ' ' +
- (zone.className || '')
- ];
- if (!this.chart.styledMode) {
- propset.push((zone.color || this.color), (zone.dashStyle || this.options.dashStyle));
- }
- props.push(propset);
- }, this);
- return props;
- };
- /**
- * General options for all series types.
- *
- * @optionparent plotOptions.series
- */
- LineSeries.defaultOptions = merge(Series.defaultOptions, {
- // nothing here yet
- });
- return LineSeries;
- }(Series));
- SeriesRegistry.registerSeriesType('line', LineSeries);
- /* *
- *
- * Default Export
- *
- * */
- export default LineSeries;
- /* *
- *
- * API Options
- *
- * */
- /**
- * A line series displays information as a series of data points connected by
- * straight line segments.
- *
- * @sample {highcharts} highcharts/demo/line-basic/
- * Line chart
- * @sample {highstock} stock/demo/basic-line/
- * Line chart
- *
- * @extends plotOptions.series
- * @product highcharts highstock
- * @apioption plotOptions.line
- */
- /**
- * The SVG value used for the `stroke-linecap` and `stroke-linejoin`
- * of a line graph. Round means that lines are rounded in the ends and
- * bends.
- *
- * @type {Highcharts.SeriesLinecapValue}
- * @default round
- * @since 3.0.7
- * @apioption plotOptions.line.linecap
- */
- /**
- * A `line` series. If the [type](#series.line.type) option is not
- * specified, it is inherited from [chart.type](#chart.type).
- *
- * @extends series,plotOptions.line
- * @excluding dataParser,dataURL
- * @product highcharts highstock
- * @apioption series.line
- */
- /**
- * An array of data points for the series. For the `line` series type,
- * points can be given in the following ways:
- *
- * 1. An array of numerical values. In this case, the numerical values will be
- * interpreted as `y` options. The `x` values will be automatically
- * calculated, either starting at 0 and incremented by 1, or from
- * `pointStart` and `pointInterval` given in the series options. If the axis
- * has categories, these will be used. Example:
- * ```js
- * data: [0, 5, 3, 5]
- * ```
- *
- * 2. An array of arrays with 2 values. In this case, the values correspond to
- * `x,y`. If the first value is a string, it is applied as the name of the
- * point, and the `x` value is inferred.
- * ```js
- * data: [
- * [0, 1],
- * [1, 2],
- * [2, 8]
- * ]
- * ```
- *
- * 3. An array of objects with named values. The following snippet shows only a
- * few settings, see the complete options set below. If the total number of
- * data points exceeds the series'
- * [turboThreshold](#series.line.turboThreshold),
- * this option is not available.
- * ```js
- * data: [{
- * x: 1,
- * y: 9,
- * name: "Point2",
- * color: "#00FF00"
- * }, {
- * x: 1,
- * y: 6,
- * name: "Point1",
- * color: "#FF00FF"
- * }]
- * ```
- *
- * **Note:** In TypeScript you have to extend `PointOptionsObject` with an
- * additional declaration to allow custom data types:
- * ```ts
- * declare module `highcharts` {
- * interface PointOptionsObject {
- * custom: Record<string, (boolean|number|string)>;
- * }
- * }
- * ```
- *
- * @sample {highcharts} highcharts/chart/reflow-true/
- * Numerical values
- * @sample {highcharts} highcharts/series/data-array-of-arrays/
- * Arrays of numeric x and y
- * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
- * Arrays of datetime x and y
- * @sample {highcharts} highcharts/series/data-array-of-name-value/
- * Arrays of point.name and y
- * @sample {highcharts} highcharts/series/data-array-of-objects/
- * Config objects
- *
- * @declare Highcharts.PointOptionsObject
- * @type {Array<number|Array<(number|string),(number|null)>|null|*>}
- * @apioption series.line.data
- */
- /**
- * An additional, individual class name for the data point's graphic
- * representation.
- *
- * @type {string}
- * @since 5.0.0
- * @product highcharts gantt
- * @apioption series.line.data.className
- */
- /**
- * Individual color for the point. By default the color is pulled from
- * the global `colors` array.
- *
- * In styled mode, the `color` option doesn't take effect. Instead, use
- * `colorIndex`.
- *
- * @sample {highcharts} highcharts/point/color/
- * Mark the highest point
- *
- * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
- * @product highcharts highstock gantt
- * @apioption series.line.data.color
- */
- /**
- * A specific color index to use for the point, so its graphic representations
- * are given the class name `highcharts-color-{n}`. In styled mode this will
- * change the color of the graphic. In non-styled mode, the color by is set by
- * the `fill` attribute, so the change in class name won't have a visual effect
- * by default.
- *
- * @type {number}
- * @since 5.0.0
- * @product highcharts gantt
- * @apioption series.line.data.colorIndex
- */
- /**
- * A reserved subspace to store options and values for customized functionality.
- * Here you can add additional data for your own event callbacks and formatter
- * callbacks.
- *
- * @sample {highcharts} highcharts/point/custom/
- * Point and series with custom data
- *
- * @type {Highcharts.Dictionary<*>}
- * @apioption series.line.data.custom
- */
- /**
- * Individual data label for each point. The options are the same as
- * the ones for [plotOptions.series.dataLabels](
- * #plotOptions.series.dataLabels).
- *
- * @sample highcharts/point/datalabels/
- * Show a label for the last value
- *
- * @declare Highcharts.DataLabelsOptions
- * @extends plotOptions.line.dataLabels
- * @product highcharts highstock gantt
- * @apioption series.line.data.dataLabels
- */
- /**
- * A description of the point to add to the screen reader information
- * about the point.
- *
- * @type {string}
- * @since 5.0.0
- * @requires modules/accessibility
- * @apioption series.line.data.description
- */
- /**
- * An id for the point. This can be used after render time to get a
- * pointer to the point object through `chart.get()`.
- *
- * @sample {highcharts} highcharts/point/id/
- * Remove an id'd point
- *
- * @type {string}
- * @since 1.2.0
- * @product highcharts highstock gantt
- * @apioption series.line.data.id
- */
- /**
- * The rank for this point's data label in case of collision. If two
- * data labels are about to overlap, only the one with the highest `labelrank`
- * will be drawn.
- *
- * @type {number}
- * @apioption series.line.data.labelrank
- */
- /**
- * The name of the point as shown in the legend, tooltip, dataLabels, etc.
- *
- * @see [xAxis.uniqueNames](#xAxis.uniqueNames)
- *
- * @sample {highcharts} highcharts/series/data-array-of-objects/
- * Point names
- *
- * @type {string}
- * @apioption series.line.data.name
- */
- /**
- * Whether the data point is selected initially.
- *
- * @type {boolean}
- * @default false
- * @product highcharts highstock gantt
- * @apioption series.line.data.selected
- */
- /**
- * The x value of the point. For datetime axes, the X value is the timestamp
- * in milliseconds since 1970.
- *
- * @type {number}
- * @product highcharts highstock
- * @apioption series.line.data.x
- */
- /**
- * The y value of the point.
- *
- * @type {number|null}
- * @product highcharts highstock
- * @apioption series.line.data.y
- */
- /**
- * The individual point events.
- *
- * @extends plotOptions.series.point.events
- * @product highcharts highstock gantt
- * @apioption series.line.data.events
- */
- /**
- * Options for the point markers of line-like series.
- *
- * @declare Highcharts.PointMarkerOptionsObject
- * @extends plotOptions.series.marker
- * @product highcharts highstock
- * @apioption series.line.data.marker
- */
- ''; // include precedent doclets in transpilat
|