| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583 |
- /**
- * @license Highcharts JS v6.1.0 (2018-04-13)
- * X-range series
- *
- * (c) 2010-2017 Torstein Honsi, Lars A. V. Cabrera
- *
- * License: www.highcharts.com/license
- */
- 'use strict';
- (function (factory) {
- if (typeof module === 'object' && module.exports) {
- module.exports = factory;
- } else {
- factory(Highcharts);
- }
- }(function (Highcharts) {
- (function (H) {
- /**
- * X-range series module
- *
- * (c) 2010-2017 Torstein Honsi, Lars A. V. Cabrera
- *
- * License: www.highcharts.com/license
- */
- var addEvent = H.addEvent,
- defined = H.defined,
- color = H.Color,
- columnType = H.seriesTypes.column,
- each = H.each,
- 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;
- /**
- * The X-range series displays ranges on the X axis, typically time intervals
- * with a start and end date.
- *
- * @extends {plotOptions.column}
- * @excluding boostThreshold,crisp,cropThreshold,depth,edgeColor,edgeWidth,
- * findNearestPointBy,getExtremesFromAll,grouping,groupPadding,
- * negativeColor,pointInterval,pointIntervalUnit,pointPlacement,
- * pointRange,pointStart,softThreshold,stacking,threshold,data
- * @product highcharts highstock
- * @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
- * @since 6.0.0
- * @optionparent plotOptions.xrange
- */
- seriesType('xrange', 'column', {
- /**
- * 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
- * @type {Object}
- * @product highcharts highstock
- * @apioption plotOptions.xrange.partialFill
- */
- /**
- * The fill color to be used for partial fills. Defaults to a darker shade
- * of the point color.
- *
- * @type {Color}
- * @product highcharts highstock
- * @apioption plotOptions.xrange.partialFill.fill
- */
- /**
- * 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.
- */
- formatter: function () {
- var point = this.point,
- amount = point.partialFill;
- if (isObject(amount)) {
- amount = amount.amount;
- }
- if (!defined(amount)) {
- amount = 0;
- }
- return (amount * 100) + '%';
- }
- },
- tooltip: {
- headerFormat: '<span style="font-size: 0.85em">{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,
- /**
- * Borrow the column series metrics, but with swapped axes. This gives free
- * access to features like groupPadding, grouping, pointWidth etc.
- */
- getColumnMetrics: function () {
- var metrics,
- chart = this.chart;
- function swapAxes() {
- each(chart.series, 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.
- */
- 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;
- },
- translatePoint: function (point) {
- var series = this,
- xAxis = series.xAxis,
- metrics = series.columnMetrics,
- minPointLength = series.options.minPointLength || 0,
- plotX = point.plotX,
- posX = pick(point.x2, point.x + (point.len || 0)),
- plotX2 = xAxis.translate(posX, 0, 0, 0, 1),
- length = plotX2 - plotX,
- widthDifference,
- shapeArgs,
- partialFill,
- inverted = this.chart.inverted,
- borderWidth = pick(series.options.borderWidth, 1),
- crisper = borderWidth % 2 / 2,
- 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);
- point.shapeArgs = {
- x: Math.floor(Math.min(plotX, plotX2)) + crisper,
- y: Math.floor(point.plotY + metrics.offset) + crisper,
- width: Math.round(Math.abs(plotX2 - plotX)),
- height: Math.round(metrics.width),
- 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
- point.tooltipPos[0] += inverted ? 0 : length / 2;
- point.tooltipPos[1] -= inverted ? length / 2 : metrics.width / 2;
- // 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
- };
- }
- },
- translate: function () {
- columnType.prototype.translate.apply(this, arguments);
- each(this.points, 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.
- *
- * @param {Object} point an instance of Point in the series
- * @param {string} verb 'animate' (animates changes) or 'attr' (sets
- * options)
- * @returns {void}
- */
- 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
- 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
- }
- },
- drawPoints: function () {
- var series = this,
- verb = series.getAnimationVerb();
- // Draw the columns
- each(series.points, function (point) {
- series.drawPoint(point, verb);
- });
- },
- /**
- * Returns "animate", or "attr" if the number of points is above the
- * animation limit.
- *
- * @returns {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 init so that `colorByPoint` for x-range means that one color is
- * applied per Y axis category.
- */
- init: function () {
- Point.prototype.init.apply(this, arguments);
- var colors,
- series = this.series,
- colorCount = series.chart.options.chart.colorCount;
- if (!this.y) {
- this.y = 0;
- }
-
- if (series.options.colorByPoint) {
- colors = series.options.colors || series.chart.options.colors;
- colorCount = colors.length;
- if (!this.options.color && colors[this.y % colorCount]) {
- this.color = colors[this.y % colorCount];
- }
- }
-
- this.colorIndex = pick(this.options.colorIndex, this.y % colorCount);
- return this;
- },
- setState: function () {
- Point.prototype.setState.apply(this, arguments);
- this.series.drawPoint(this, this.series.getAnimationVerb());
- },
- // 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'],
- 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);
- each(axisSeries, function (series) {
- if (series.x2Data) {
- each(series.x2Data, 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).
- *
- * @type {Object}
- * @extends series,plotOptions.xrange
- * @excluding boostThreshold,crisp,cropThreshold,depth,edgeColor,edgeWidth,
- * findNearestPointBy,getExtremesFromAll,grouping,groupPadding,
- * negativeColor,pointInterval,pointIntervalUnit,pointPlacement,
- * pointRange,pointStart,softThreshold,stacking,threshold
- * @product highcharts highstock
- * @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"
- * }]
- * ```
- *
- * @type {Array<Object|Array|Number>}
- * @extends series.line.data
- * @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
- * @product highcharts highstock
- * @apioption series.xrange.data
- */
- /**
- * The ending X value of the range point.
- *
- * @sample {highcharts} highcharts/demo/x-range
- * X-range
- * @type {Number}
- * @product highcharts highstock
- * @apioption plotOptions.xrange.data.x2
- */
- /**
- * 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
- * @type {Object|Number}
- * @product highcharts highstock
- * @apioption plotOptions.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
- * @apioption plotOptions.xrange.data.partialFill.amount
- */
- /**
- * The fill color to be used for partial fills. Defaults to a darker shade
- * of the point color.
- *
- * @type {Color}
- * @product highcharts highstock
- * @apioption plotOptions.xrange.data.partialFill.fill
- */
- }(Highcharts));
- }));
|