You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
568 lines
21 KiB
JavaScript
568 lines
21 KiB
JavaScript
2 months ago
|
/**
|
||
|
* @license Highcharts JS v6.0.4 (2017-12-15)
|
||
|
* 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
|
||
|
*/
|
||
|
|
||
|
/**
|
||
|
* @todo
|
||
|
* - JSDoc
|
||
|
* - New series checklist
|
||
|
*/
|
||
|
|
||
|
|
||
|
var 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,
|
||
|
wrap = H.wrap,
|
||
|
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
|
||
|
* @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', {
|
||
|
/**
|
||
|
* 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
|
||
|
/**
|
||
|
* 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
|
||
|
* @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
|
||
|
* @apioption plotOptions.xrange.partialFill.fill
|
||
|
*/
|
||
|
|
||
|
}, {
|
||
|
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.round(shapeArgs.width * partialFill),
|
||
|
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,
|
||
|
chart = this.chart,
|
||
|
options = series.options,
|
||
|
animationLimit = options.animationLimit || 250,
|
||
|
verb = chart.pointCount < animationLimit ? 'animate' : 'attr';
|
||
|
|
||
|
// draw the columns
|
||
|
each(series.points, function(point) {
|
||
|
series.drawPoint(point, verb);
|
||
|
});
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* 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 = this.y % colorCount;
|
||
|
|
||
|
return this;
|
||
|
},
|
||
|
|
||
|
// 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
|
||
|
*/
|
||
|
wrap(Axis.prototype, 'getSeriesExtremes', function(proceed) {
|
||
|
var axis = this,
|
||
|
axisSeries = axis.series,
|
||
|
dataMax,
|
||
|
modMax;
|
||
|
proceed.call(axis);
|
||
|
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).
|
||
|
*
|
||
|
* For options that apply to multiple series, it is recommended to add
|
||
|
* them to the [plotOptions.series](#plotOptions.series) options structure.
|
||
|
* To apply to all series of this specific type, apply it to [plotOptions.
|
||
|
* xrange](#plotOptions.xrange).
|
||
|
*
|
||
|
* @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,data
|
||
|
* @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
|
||
|
* @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
|
||
|
* @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
|
||
|
* @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
|
||
|
* @apioption plotOptions.xrange.data.partialFill.fill
|
||
|
*/
|
||
|
|
||
|
}(Highcharts));
|
||
|
}));
|