123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761 |
- /* *
- * X-range series module
- *
- * (c) 2010-2019 Torstein Honsi, Lars A. V. Cabrera
- *
- * License: www.highcharts.com/license
- */
- 'use strict';
- import H from '../parts/Globals.js';
- var addEvent = H.addEvent,
- defined = H.defined,
- color = H.Color,
- columnType = H.seriesTypes.column,
- correctFloat = H.correctFloat,
- isNumber = H.isNumber,
- isObject = H.isObject,
- merge = H.merge,
- pick = H.pick,
- seriesType = H.seriesType,
- seriesTypes = H.seriesTypes,
- Axis = H.Axis,
- Point = H.Point,
- Series = H.Series;
- /**
- * Return color of a point based on its category.
- *
- * @private
- * @function getColorByCategory
- *
- * @param {object} series
- * The series which the point belongs to.
- *
- * @param {object} point
- * The point to calculate its color for.
- *
- * @return {object}
- * Returns an object containing the properties color and colorIndex.
- */
- function getColorByCategory(series, point) {
- var colors = series.options.colors || series.chart.options.colors,
- colorCount = colors ?
- colors.length :
- series.chart.options.chart.colorCount,
- colorIndex = point.y % colorCount,
- color = colors && colors[colorIndex];
- return {
- colorIndex: colorIndex,
- color: color
- };
- }
- /**
- * @private
- * @class
- * @name Highcharts.seriesTypes.xrange
- *
- * @augments Highcharts.Series
- */
- seriesType('xrange', 'column'
- /**
- * The X-range series displays ranges on the X axis, typically time intervals
- * with a start and end date.
- *
- * @sample {highcharts} highcharts/demo/x-range/
- * X-range
- * @sample {highcharts} highcharts/css/x-range/
- * Styled mode X-range
- * @sample {highcharts} highcharts/chart/inverted-xrange/
- * Inverted X-range
- *
- * @extends plotOptions.column
- * @since 6.0.0
- * @product highcharts highstock gantt
- * @excluding boostThreshold, crisp, cropThreshold, depth, edgeColor,
- * edgeWidth, findNearestPointBy, getExtremesFromAll,
- * negativeColor, pointInterval, pointIntervalUnit,
- * pointPlacement, pointRange, pointStart, softThreshold,
- * stacking, threshold, data
- * @optionparent plotOptions.xrange
- */
- , {
- /**
- * A partial fill for each point, typically used to visualize how much of
- * a task is performed. The partial fill object can be set either on series
- * or point level.
- *
- * @sample {highcharts} highcharts/demo/x-range
- * X-range with partial fill
- *
- * @product highcharts highstock gantt
- * @apioption plotOptions.xrange.partialFill
- */
- /**
- * The fill color to be used for partial fills. Defaults to a darker shade
- * of the point color.
- *
- * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
- * @product highcharts highstock gantt
- * @apioption plotOptions.xrange.partialFill.fill
- */
- /**
- * A partial fill for each point, typically used to visualize how much of
- * a task is performed. See [completed](series.gantt.data.completed).
- *
- * @sample gantt/demo/progress-indicator
- * Gantt with progress indicator
- *
- * @product gantt
- * @apioption plotOptions.gantt.partialFill
- */
- /**
- * In an X-range series, this option makes all points of the same Y-axis
- * category the same color.
- */
- colorByPoint: true,
- dataLabels: {
- verticalAlign: 'middle',
- inside: true,
- /**
- * The default formatter for X-range data labels displays the percentage
- * of the partial fill amount.
- *
- * @type {Highcharts.FormatterCallbackFunction<Highcharts.SeriesDataLabelsFormatterContextObject>}
- * @default function () { return (amount * 100) + '%'; }
- */
- formatter: function () {
- var point = this.point,
- amount = point.partialFill;
- if (isObject(amount)) {
- amount = amount.amount;
- }
- if (!defined(amount)) {
- amount = 0;
- }
- return correctFloat(amount * 100) + '%';
- }
- },
- tooltip: {
- headerFormat: '<span style="font-size: 10px">{point.x} - {point.x2}</span><br/>',
- pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.yCategory}</b><br/>'
- },
- borderRadius: 3,
- pointRange: 0
- }, {
- type: 'xrange',
- parallelArrays: ['x', 'x2', 'y'],
- requireSorting: false,
- animate: seriesTypes.line.prototype.animate,
- cropShoulder: 1,
- getExtremesFromAll: true,
- autoIncrement: H.noop,
- /**
- * Borrow the column series metrics, but with swapped axes. This gives free
- * access to features like groupPadding, grouping, pointWidth etc.
- *
- * @private
- * @function Higcharts.Series#getColumnMetrics
- *
- * @return {Highcharts.ColumnMetricsObject}
- */
- getColumnMetrics: function () {
- var metrics,
- chart = this.chart;
- function swapAxes() {
- chart.series.forEach(function (s) {
- var xAxis = s.xAxis;
- s.xAxis = s.yAxis;
- s.yAxis = xAxis;
- });
- }
- swapAxes();
- metrics = columnType.prototype.getColumnMetrics.call(this);
- swapAxes();
- return metrics;
- },
- /**
- * Override cropData to show a point where x or x2 is outside visible range,
- * but one of them is inside.
- *
- * @private
- * @function Highcharts.Series#cropData
- *
- * @param {Array<number>} xData
- *
- * @param {Array<number>} yData
- *
- * @param {number} min
- *
- * @param {number} max
- *
- * @param {number} [cropShoulder]
- *
- * @return {*}
- */
- cropData: function (xData, yData, min, max) {
- // Replace xData with x2Data to find the appropriate cropStart
- var cropData = Series.prototype.cropData,
- crop = cropData.call(this, this.x2Data, yData, min, max);
- // Re-insert the cropped xData
- crop.xData = xData.slice(crop.start, crop.end);
- return crop;
- },
- /**
- * @private
- * @function Highcharts.Series#translatePoint
- *
- * @param {Highcharts.Point} point
- */
- translatePoint: function (point) {
- var series = this,
- xAxis = series.xAxis,
- yAxis = series.yAxis,
- metrics = series.columnMetrics,
- options = series.options,
- minPointLength = options.minPointLength || 0,
- plotX = point.plotX,
- posX = pick(point.x2, point.x + (point.len || 0)),
- plotX2 = xAxis.translate(posX, 0, 0, 0, 1),
- length = Math.abs(plotX2 - plotX),
- widthDifference,
- shapeArgs,
- partialFill,
- inverted = this.chart.inverted,
- borderWidth = pick(options.borderWidth, 1),
- crisper = borderWidth % 2 / 2,
- yOffset = metrics.offset,
- pointHeight = Math.round(metrics.width),
- dlLeft,
- dlRight,
- dlWidth;
- if (minPointLength) {
- widthDifference = minPointLength - length;
- if (widthDifference < 0) {
- widthDifference = 0;
- }
- plotX -= widthDifference / 2;
- plotX2 += widthDifference / 2;
- }
- plotX = Math.max(plotX, -10);
- plotX2 = Math.min(Math.max(plotX2, -10), xAxis.len + 10);
- // Handle individual pointWidth
- if (defined(point.options.pointWidth)) {
- yOffset -= (
- (Math.ceil(point.options.pointWidth) - pointHeight) / 2
- );
- pointHeight = Math.ceil(point.options.pointWidth);
- }
- // Apply pointPlacement to the Y axis
- if (
- options.pointPlacement &&
- isNumber(point.plotY) &&
- yAxis.categories
- ) {
- point.plotY = yAxis
- .translate(point.y, 0, 1, 0, 1, options.pointPlacement);
- }
- point.shapeArgs = {
- x: Math.floor(Math.min(plotX, plotX2)) + crisper,
- y: Math.floor(point.plotY + yOffset) + crisper,
- width: Math.round(Math.abs(plotX2 - plotX)),
- height: pointHeight,
- r: series.options.borderRadius
- };
- // Align data labels inside the shape and inside the plot area
- dlLeft = point.shapeArgs.x;
- dlRight = dlLeft + point.shapeArgs.width;
- if (dlLeft < 0 || dlRight > xAxis.len) {
- dlLeft = Math.min(xAxis.len, Math.max(0, dlLeft));
- dlRight = Math.max(0, Math.min(dlRight, xAxis.len));
- dlWidth = dlRight - dlLeft;
- point.dlBox = merge(point.shapeArgs, {
- x: dlLeft,
- width: dlRight - dlLeft,
- centerX: dlWidth ? dlWidth / 2 : null
- });
- } else {
- point.dlBox = null;
- }
- // Tooltip position
- if (!inverted) {
- point.tooltipPos[0] += length / 2 * (xAxis.reversed ? -1 : 1);
- point.tooltipPos[1] -= metrics.width / 2;
- // Limit position by the correct axis size (#9727)
- point.tooltipPos[0] = Math.max(
- Math.min(point.tooltipPos[0], xAxis.len - 1), 0
- );
- point.tooltipPos[1] = Math.max(
- Math.min(point.tooltipPos[1], yAxis.len - 1), 0
- );
- } else {
- point.tooltipPos[1] += length / 2 * (xAxis.reversed ? 1 : -1);
- point.tooltipPos[0] += metrics.width / 2;
- // Limit position by the correct axis size (#9727)
- point.tooltipPos[1] = Math.max(
- Math.min(point.tooltipPos[1], xAxis.len - 1), 0
- );
- point.tooltipPos[0] = Math.max(
- Math.min(point.tooltipPos[0], yAxis.len - 1), 0
- );
- }
- // Add a partShapeArgs to the point, based on the shapeArgs property
- partialFill = point.partialFill;
- if (partialFill) {
- // Get the partial fill amount
- if (isObject(partialFill)) {
- partialFill = partialFill.amount;
- }
- // If it was not a number, assume 0
- if (!isNumber(partialFill)) {
- partialFill = 0;
- }
- shapeArgs = point.shapeArgs;
- point.partShapeArgs = {
- x: shapeArgs.x,
- y: shapeArgs.y,
- width: shapeArgs.width,
- height: shapeArgs.height,
- r: series.options.borderRadius
- };
- point.clipRectArgs = {
- x: shapeArgs.x,
- y: shapeArgs.y,
- width: Math.max(
- Math.round(
- length * partialFill +
- (point.plotX - plotX)
- ),
- 0
- ),
- height: shapeArgs.height
- };
- }
- },
- /**
- * @private
- * @function Highcharts.Series#translate
- */
- translate: function () {
- columnType.prototype.translate.apply(this, arguments);
- this.points.forEach(function (point) {
- this.translatePoint(point);
- }, this);
- },
- /**
- * Draws a single point in the series. Needed for partial fill.
- *
- * This override turns point.graphic into a group containing the original
- * graphic and an overlay displaying the partial fill.
- *
- * @private
- * @function Highcharts.Series#drawPoint
- *
- * @param {Highcharts.Point} point
- * An instance of Point in the series.
- *
- * @param {"animate"|"attr"} verb
- * 'animate' (animates changes) or 'attr' (sets options)
- */
- drawPoint: function (point, verb) {
- var series = this,
- seriesOpts = series.options,
- renderer = series.chart.renderer,
- graphic = point.graphic,
- type = point.shapeType,
- shapeArgs = point.shapeArgs,
- partShapeArgs = point.partShapeArgs,
- clipRectArgs = point.clipRectArgs,
- pfOptions = point.partialFill,
- fill,
- state = point.selected && 'select',
- cutOff = seriesOpts.stacking && !seriesOpts.borderRadius;
- if (!point.isNull) {
- // Original graphic
- if (graphic) { // update
- point.graphicOriginal[verb](
- merge(shapeArgs)
- );
- } else {
- point.graphic = graphic = renderer.g('point')
- .addClass(point.getClassName())
- .add(point.group || series.group);
- point.graphicOriginal = renderer[type](shapeArgs)
- .addClass(point.getClassName())
- .addClass('highcharts-partfill-original')
- .add(graphic);
- }
- // Partial fill graphic
- if (partShapeArgs) {
- if (point.graphicOverlay) {
- point.graphicOverlay[verb](
- merge(partShapeArgs)
- );
- point.clipRect.animate(
- merge(clipRectArgs)
- );
- } else {
- point.clipRect = renderer.clipRect(
- clipRectArgs.x,
- clipRectArgs.y,
- clipRectArgs.width,
- clipRectArgs.height
- );
- point.graphicOverlay = renderer[type](partShapeArgs)
- .addClass('highcharts-partfill-overlay')
- .add(graphic)
- .clip(point.clipRect);
- }
- }
- // Presentational
- if (!series.chart.styledMode) {
- point.graphicOriginal
- .attr(series.pointAttribs(point, state))
- .shadow(seriesOpts.shadow, null, cutOff);
- if (partShapeArgs) {
- // Ensure pfOptions is an object
- if (!isObject(pfOptions)) {
- pfOptions = {};
- }
- if (isObject(seriesOpts.partialFill)) {
- pfOptions = merge(
- pfOptions, seriesOpts.partialFill
- );
- }
- fill = (
- pfOptions.fill ||
- color(point.color || series.color).brighten(-0.3).get()
- );
- point.graphicOverlay
- .attr(series.pointAttribs(point, state))
- .attr({
- 'fill': fill
- })
- .shadow(seriesOpts.shadow, null, cutOff);
- }
- }
- } else if (graphic) {
- point.graphic = graphic.destroy(); // #1269
- }
- },
- /**
- * @private
- * @function Highcharts.Series#drawPoints
- */
- drawPoints: function () {
- var series = this,
- verb = series.getAnimationVerb();
- // Draw the columns
- series.points.forEach(function (point) {
- series.drawPoint(point, verb);
- });
- },
- /**
- * Returns "animate", or "attr" if the number of points is above the
- * animation limit.
- *
- * @private
- * @function Highcharts.Series#getAnimationVerb
- *
- * @return {string}
- */
- getAnimationVerb: function () {
- return (
- this.chart.pointCount < (this.options.animationLimit || 250) ?
- 'animate' :
- 'attr'
- );
- }
- /*
- // Override to remove stroke from points. For partial fill.
- pointAttribs: function () {
- var series = this,
- retVal = columnType.prototype.pointAttribs.apply(series, arguments);
- //retVal['stroke-width'] = 0;
- return retVal;
- }
- //*/
- }, { // Point class properties
- /**
- * Extend applyOptions so that `colorByPoint` for x-range means that one
- * color is applied per Y axis category.
- *
- * @private
- * @function Highcharts.Point#applyOptions
- *
- * @return {Highcharts.Series}
- */
- applyOptions: function () {
- var point = Point.prototype.applyOptions.apply(this, arguments),
- series = point.series,
- colorByPoint;
- if (series.options.colorByPoint && !point.options.color) {
- colorByPoint = getColorByCategory(series, point);
- if (!series.chart.styledMode) {
- point.color = colorByPoint.color;
- }
- if (!point.options.colorIndex) {
- point.colorIndex = colorByPoint.colorIndex;
- }
- }
- return point;
- },
- /**
- * Extend init to have y default to 0.
- *
- * @private
- * @function Highcharts.Point#init
- *
- * @return {Highcharts.Series}
- */
- init: function () {
- Point.prototype.init.apply(this, arguments);
- if (!this.y) {
- this.y = 0;
- }
- return this;
- },
- /**
- * @private
- * @function Highcharts.Point#setState
- */
- setState: function () {
- Point.prototype.setState.apply(this, arguments);
- this.series.drawPoint(this, this.series.getAnimationVerb());
- },
- /**
- * @private
- * @function Highcharts.Point#getLabelConfig
- *
- * @return {Highcharts.PointLabelObject}
- */
- // Add x2 and yCategory to the available properties for tooltip formats
- getLabelConfig: function () {
- var point = this,
- cfg = Point.prototype.getLabelConfig.call(point),
- yCats = point.series.yAxis.categories;
- cfg.x2 = point.x2;
- cfg.yCategory = point.yCategory = yCats && yCats[point.y];
- return cfg;
- },
- tooltipDateKeys: ['x', 'x2'],
- /**
- * @private
- * @function Highcharts.Point#isValid
- *
- * @return {boolean}
- */
- isValid: function () {
- return typeof this.x === 'number' &&
- typeof this.x2 === 'number';
- }
- });
- // Max x2 should be considered in xAxis extremes
- addEvent(Axis, 'afterGetSeriesExtremes', function () {
- var axis = this,
- axisSeries = axis.series,
- dataMax,
- modMax;
- if (axis.isXAxis) {
- dataMax = pick(axis.dataMax, -Number.MAX_VALUE);
- axisSeries.forEach(function (series) {
- if (series.x2Data) {
- series.x2Data.forEach(function (val) {
- if (val > dataMax) {
- dataMax = val;
- modMax = true;
- }
- });
- }
- });
- if (modMax) {
- axis.dataMax = dataMax;
- }
- }
- });
- /**
- * An `xrange` series. If the [type](#series.xrange.type) option is not
- * specified, it is inherited from [chart.type](#chart.type).
- *
- * @extends series,plotOptions.xrange
- * @excluding boostThreshold, crisp, cropThreshold, depth, edgeColor, edgeWidth,
- * findNearestPointBy, getExtremesFromAll, negativeColor,
- * pointInterval, pointIntervalUnit, pointPlacement, pointRange,
- * pointStart, softThreshold, stacking, threshold
- * @product highcharts highstock gantt
- * @apioption series.xrange
- */
- /**
- * An array of data points for the series. For the `xrange` series type,
- * points can be given in the following ways:
- *
- * 1. An array of objects with named values. The objects are point configuration
- * objects as seen below.
- * ```js
- * data: [{
- * x: Date.UTC(2017, 0, 1),
- * x2: Date.UTC(2017, 0, 3),
- * name: "Test",
- * y: 0,
- * color: "#00FF00"
- * }, {
- * x: Date.UTC(2017, 0, 4),
- * x2: Date.UTC(2017, 0, 5),
- * name: "Deploy",
- * y: 1,
- * color: "#FF0000"
- * }]
- * ```
- *
- * @sample {highcharts} highcharts/series/data-array-of-objects/
- * Config objects
- *
- * @type {Array<*>}
- * @extends series.line.data
- * @product highcharts highstock gantt
- * @apioption series.xrange.data
- */
- /**
- * The starting X value of the range point.
- *
- * @sample {highcharts} highcharts/demo/x-range
- * X-range
- *
- * @type {number}
- * @product highcharts highstock gantt
- * @apioption series.xrange.data.x
- */
- /**
- * The ending X value of the range point.
- *
- * @sample {highcharts} highcharts/demo/x-range
- * X-range
- *
- * @type {number}
- * @product highcharts highstock gantt
- * @apioption series.xrange.data.x2
- */
- /**
- * The Y value of the range point.
- *
- * @sample {highcharts} highcharts/demo/x-range
- * X-range
- *
- * @type {number}
- * @product highcharts highstock gantt
- * @apioption series.xrange.data.y
- */
- /**
- * A partial fill for each point, typically used to visualize how much of
- * a task is performed. The partial fill object can be set either on series
- * or point level.
- *
- * @sample {highcharts} highcharts/demo/x-range
- * X-range with partial fill
- *
- * @product highcharts highstock gantt
- * @apioption series.xrange.data.partialFill
- */
- /**
- * The amount of the X-range point to be filled. Values can be 0-1 and are
- * converted to percentages in the default data label formatter.
- *
- * @type {number}
- * @product highcharts highstock gantt
- * @apioption series.xrange.data.partialFill.amount
- */
- /**
- * The fill color to be used for partial fills. Defaults to a darker shade
- * of the point color.
- *
- * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
- * @product highcharts highstock gantt
- * @apioption series.xrange.data.partialFill.fill
- */
|