| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438 |
- /* *
- *
- * (c) 2010-2020 Sebastian Bochan, Rafal Sebestjanski
- *
- * License: www.highcharts.com/license
- *
- * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
- *
- * */
- 'use strict';
- import H from '../Core/Globals.js';
- var SVGRenderer = H.SVGRenderer;
- import U from '../Core/Utilities.js';
- var extend = U.extend, pick = U.pick, seriesType = U.seriesType;
- import './AreaRangeSeries.js';
- var seriesTypes = H.seriesTypes, seriesProto = H.Series.prototype, areaRangeProto = seriesTypes.arearange.prototype, columnRangeProto = seriesTypes.columnrange.prototype, colProto = seriesTypes.column.prototype, areaRangePointProto = areaRangeProto.pointClass.prototype;
- /**
- * The dumbbell series is a cartesian series with higher and lower values for
- * each point along an X axis, connected with a line between the values.
- * Requires `highcharts-more.js` and `modules/dumbbell.js`.
- *
- * @sample {highcharts} highcharts/demo/dumbbell/
- * Dumbbell chart
- * @sample {highcharts} highcharts/series-dumbbell/styled-mode-dumbbell/
- * Styled mode
- *
- * @extends plotOptions.arearange
- * @product highcharts highstock
- * @excluding fillColor, fillOpacity, lineWidth, stack, stacking,
- * stickyTracking, trackByArea, boostThreshold, boostBlending
- * @since 8.0.0
- * @optionparent plotOptions.dumbbell
- */
- seriesType('dumbbell', 'arearange', {
- /** @ignore-option */
- trackByArea: false,
- /** @ignore-option */
- fillColor: 'none',
- /** @ignore-option */
- lineWidth: 0,
- pointRange: 1,
- /**
- * Pixel width of the line that connects the dumbbell point's values.
- *
- * @since 8.0.0
- * @product highcharts highstock
- */
- connectorWidth: 1,
- /** @ignore-option */
- stickyTracking: false,
- groupPadding: 0.2,
- crisp: false,
- pointPadding: 0.1,
- /**
- * Color of the start markers in a dumbbell graph.
- *
- * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
- * @since 8.0.0
- * @product highcharts highstock
- */
- lowColor: '#333333',
- /**
- * Color of the line that connects the dumbbell point's values.
- * By default it is the series' color.
- *
- * @type {string}
- * @product highcharts highstock
- * @since 8.0.0
- * @apioption plotOptions.dumbbell.connectorColor
- */
- states: {
- hover: {
- /** @ignore-option */
- lineWidthPlus: 0,
- /**
- * The additional connector line width for a hovered point.
- *
- * @since 8.0.0
- * @product highcharts highstock
- */
- connectorWidthPlus: 1,
- /** @ignore-option */
- halo: false
- }
- }
- }, {
- trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
- drawTracker: H.TrackerMixin.drawTrackerPoint,
- drawGraph: H.noop,
- crispCol: colProto.crispCol,
- /**
- * Get connector line path and styles that connects dumbbell point's low and
- * high values.
- * @private
- *
- * @param {Highcharts.Series} this The series of points.
- * @param {Highcharts.Point} point The point to inspect.
- *
- * @return {Highcharts.SVGAttributes} attribs The path and styles.
- */
- getConnectorAttribs: function (point) {
- var series = this, chart = series.chart, pointOptions = point.options, seriesOptions = series.options, xAxis = series.xAxis, yAxis = series.yAxis, connectorWidth = pick(pointOptions.connectorWidth, seriesOptions.connectorWidth), connectorColor = pick(pointOptions.connectorColor, seriesOptions.connectorColor, pointOptions.color, point.zone ? point.zone.color : void 0, point.color), connectorWidthPlus = pick(seriesOptions.states &&
- seriesOptions.states.hover &&
- seriesOptions.states.hover.connectorWidthPlus, 1), dashStyle = pick(pointOptions.dashStyle, seriesOptions.dashStyle), pointTop = pick(point.plotLow, point.plotY), pxThreshold = yAxis.toPixels(seriesOptions.threshold || 0, true), pointHeight = chart.inverted ?
- yAxis.len - pxThreshold : pxThreshold, pointBottom = pick(point.plotHigh, pointHeight), attribs, origProps;
- if (point.state) {
- connectorWidth = connectorWidth + connectorWidthPlus;
- }
- if (pointTop < 0) {
- pointTop = 0;
- }
- else if (pointTop >= yAxis.len) {
- pointTop = yAxis.len;
- }
- if (pointBottom < 0) {
- pointBottom = 0;
- }
- else if (pointBottom >= yAxis.len) {
- pointBottom = yAxis.len;
- }
- if (point.plotX < 0 || point.plotX > xAxis.len) {
- connectorWidth = 0;
- }
- // Connector should reflect upper marker's zone color
- if (point.upperGraphic) {
- origProps = {
- y: point.y,
- zone: point.zone
- };
- point.y = point.high;
- point.zone = point.zone ? point.getZone() : void 0;
- connectorColor = pick(pointOptions.connectorColor, seriesOptions.connectorColor, pointOptions.color, point.zone ? point.zone.color : void 0, point.color);
- extend(point, origProps);
- }
- attribs = {
- d: SVGRenderer.prototype.crispLine([[
- 'M',
- point.plotX,
- pointTop
- ], [
- 'L',
- point.plotX,
- pointBottom
- ]], connectorWidth, 'ceil')
- };
- if (!chart.styledMode) {
- attribs.stroke = connectorColor;
- attribs['stroke-width'] = connectorWidth;
- if (dashStyle) {
- attribs.dashstyle = dashStyle;
- }
- }
- return attribs;
- },
- /**
- * Draw connector line that connects dumbbell point's low and high values.
- * @private
- *
- * @param {Highcharts.Series} this The series of points.
- * @param {Highcharts.Point} point The point to inspect.
- *
- * @return {void}
- */
- drawConnector: function (point) {
- var series = this, animationLimit = pick(series.options.animationLimit, 250), verb = point.connector && series.chart.pointCount < animationLimit ?
- 'animate' : 'attr';
- if (!point.connector) {
- point.connector = series.chart.renderer.path()
- .addClass('highcharts-lollipop-stem')
- .attr({
- zIndex: -1
- })
- .add(series.markerGroup);
- }
- point.connector[verb](this.getConnectorAttribs(point));
- },
- /**
- * Return the width and x offset of the dumbbell adjusted for grouping,
- * groupPadding, pointPadding, pointWidth etc.
- *
- * @private
- *
- * @function Highcharts.seriesTypes.column#getColumnMetrics
- *
- * @param {Highcharts.Series} this The series of points.
- *
- * @return {Highcharts.ColumnMetricsObject} metrics shapeArgs
- *
- */
- getColumnMetrics: function () {
- var metrics = colProto.getColumnMetrics.apply(this, arguments);
- metrics.offset += metrics.width / 2;
- return metrics;
- },
- translatePoint: areaRangeProto.translate,
- setShapeArgs: columnRangeProto.translate,
- /**
- * Translate each point to the plot area coordinate system and find
- * shape positions
- *
- * @private
- *
- * @function Highcharts.seriesTypes.dumbbell#translate
- *
- * @param {Highcharts.Series} this The series of points.
- *
- * @return {void}
- */
- translate: function () {
- // Calculate shapeargs
- this.setShapeArgs.apply(this);
- // Calculate point low / high values
- this.translatePoint.apply(this, arguments);
- // Correct x position
- this.points.forEach(function (point) {
- var shapeArgs = point.shapeArgs, pointWidth = point.pointWidth;
- point.plotX = shapeArgs.x;
- shapeArgs.x = point.plotX - pointWidth / 2;
- point.tooltipPos = null;
- });
- this.columnMetrics.offset -= this.columnMetrics.width / 2;
- },
- seriesDrawPoints: areaRangeProto.drawPoints,
- /**
- * Extend the arearange series' drawPoints method by applying a connector
- * and coloring markers.
- * @private
- *
- * @function Highcharts.Series#drawPoints
- *
- * @param {Highcharts.Series} this The series of points.
- *
- * @return {void}
- */
- drawPoints: function () {
- var series = this, chart = series.chart, pointLength = series.points.length, seriesLowColor = series.lowColor = series.options.lowColor, i = 0, lowerGraphicColor, point, zoneColor;
- this.seriesDrawPoints.apply(series, arguments);
- // Draw connectors and color upper markers
- while (i < pointLength) {
- point = series.points[i];
- series.drawConnector(point);
- if (point.upperGraphic) {
- point.upperGraphic.element.point = point;
- point.upperGraphic.addClass('highcharts-lollipop-high');
- }
- point.connector.element.point = point;
- if (point.lowerGraphic) {
- zoneColor = point.zone && point.zone.color;
- lowerGraphicColor = pick(point.options.lowColor, seriesLowColor, point.options.color, zoneColor, point.color, series.color);
- if (!chart.styledMode) {
- point.lowerGraphic.attr({
- fill: lowerGraphicColor
- });
- }
- point.lowerGraphic.addClass('highcharts-lollipop-low');
- }
- i++;
- }
- },
- /**
- * Get non-presentational attributes for a point. Used internally for
- * both styled mode and classic. Set correct position in link with connector
- * line.
- *
- * @see Series#pointAttribs
- *
- * @function Highcharts.Series#markerAttribs
- *
- * @param {Highcharts.Series} this The series of points.
- *
- * @return {Highcharts.SVGAttributes}
- * A hash containing those attributes that are not settable from
- * CSS.
- */
- markerAttribs: function () {
- var ret = areaRangeProto.markerAttribs.apply(this, arguments);
- ret.x = Math.floor(ret.x);
- ret.y = Math.floor(ret.y);
- return ret;
- },
- /**
- * Get presentational attributes
- *
- * @private
- * @function Highcharts.seriesTypes.column#pointAttribs
- *
- * @param {Highcharts.Series} this The series of points.
- * @param {Highcharts.Point} point The point to inspect.
- * @param {string} state current state of point (normal, hover, select)
- *
- * @return {Highcharts.SVGAttributes} pointAttribs SVGAttributes
- */
- pointAttribs: function (point, state) {
- var pointAttribs;
- pointAttribs = seriesProto.pointAttribs.apply(this, arguments);
- if (state === 'hover') {
- delete pointAttribs.fill;
- }
- return pointAttribs;
- }
- }, {
- // seriesTypes doesn't inherit from arearange point proto so put below
- // methods rigidly.
- destroyElements: areaRangePointProto.destroyElements,
- isValid: areaRangePointProto.isValid,
- pointSetState: areaRangePointProto.setState,
- /**
- * Set the point's state extended by have influence on the connector
- * (between low and high value).
- *
- * @private
- * @param {Highcharts.Point} this The point to inspect.
- *
- * @return {void}
- */
- setState: function () {
- var point = this, series = point.series, chart = series.chart, seriesLowColor = series.options.lowColor, seriesMarker = series.options.marker, pointOptions = point.options, pointLowColor = pointOptions.lowColor, zoneColor = point.zone && point.zone.color, lowerGraphicColor = pick(pointLowColor, seriesLowColor, pointOptions.color, zoneColor, point.color, series.color), verb = 'attr', upperGraphicColor, origProps;
- this.pointSetState.apply(this, arguments);
- if (!point.state) {
- verb = 'animate';
- if (point.lowerGraphic && !chart.styledMode) {
- point.lowerGraphic.attr({
- fill: lowerGraphicColor
- });
- if (point.upperGraphic) {
- origProps = {
- y: point.y,
- zone: point.zone
- };
- point.y = point.high;
- point.zone = point.zone ? point.getZone() : void 0;
- upperGraphicColor = pick(point.marker ? point.marker.fillColor : void 0, seriesMarker ? seriesMarker.fillColor : void 0, pointOptions.color, point.zone ? point.zone.color : void 0, point.color);
- point.upperGraphic.attr({
- fill: upperGraphicColor
- });
- extend(point, origProps);
- }
- }
- }
- point.connector[verb](series.getConnectorAttribs(point));
- }
- });
- /**
- * The `dumbbell` series. If the [type](#series.dumbbell.type) option is
- * not specified, it is inherited from [chart.type](#chart.type).
- *
- * @extends series,plotOptions.dumbbell
- * @excluding boostThreshold, boostBlending
- * @product highcharts highstock
- * @requires highcharts-more
- * @requires modules/dumbbell
- * @apioption series.dumbbell
- */
- /**
- * An array of data points for the series. For the `dumbbell` series
- * type, points can be given in the following ways:
- *
- * 1. An array of arrays with 3 or 2 values. In this case, the values correspond
- * to `x,low,high`. If the first value is a string, it is applied as the name
- * of the point, and the `x` value is inferred. The `x` value can also be
- * omitted, in which case the inner arrays should be of length 2\. Then the
- * `x` value is automatically calculated, either starting at 0 and
- * incremented by 1, or from `pointStart` and `pointInterval` given in the
- * series options.
- * ```js
- * data: [
- * [0, 4, 2],
- * [1, 2, 1],
- * [2, 9, 10]
- * ]
- * ```
- *
- * 2. 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.dumbbell.turboThreshold), this option is not
- * available.
- * ```js
- * data: [{
- * x: 1,
- * low: 0,
- * high: 4,
- * name: "Point2",
- * color: "#00FF00",
- * lowColor: "#00FFFF",
- * connectorWidth: 3,
- * connectorColor: "#FF00FF"
- * }, {
- * x: 1,
- * low: 5,
- * high: 3,
- * name: "Point1",
- * color: "#FF00FF"
- * }]
- * ```
- *
- * @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
- *
- * @type {Array<Array<(number|string),number>|Array<(number|string),number,number>|*>}
- * @extends series.arearange.data
- * @product highcharts highstock
- * @apioption series.dumbbell.data
- */
- /**
- * Color of the line that connects the dumbbell point's values.
- * By default it is the series' color.
- *
- * @type {string}
- * @since 8.0.0
- * @product highcharts highstock
- * @apioption series.dumbbell.data.connectorColor
- */
- /**
- * Pixel width of the line that connects the dumbbell point's values.
- *
- * @type {number}
- * @since 8.0.0
- * @default 1
- * @product highcharts highstock
- * @apioption series.dumbbell.data.connectorWidth
- */
- /**
- * Color of the start markers in a dumbbell graph.
- *
- * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
- * @since 8.0.0
- * @default #333333
- * @product highcharts highstock
- * @apioption series.dumbbell.data.lowColor
- */
- ''; // adds doclets above to transpiled file
|