@syncfusion/ej2-charts
Version:
Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.
686 lines (685 loc) • 35.2 kB
JavaScript
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 __());
};
})();
/**
* Chart legend
*/
import { remove, Browser, extend, isNullOrUndefined } from '@syncfusion/ej2-base';
import { LegendOptions, BaseLegend } from '../../common/legend/legend';
import { textTrim, removeElement, RectOption, withInBounds } from '../../common/utils/helper';
import { getUnicodeText } from '../../common/utils/helper';
import { measureText, Rect, getElement } from '@syncfusion/ej2-svg-base';
import { legendRender, legendClick, regSub, regSup } from '../../common/model/constants';
import { textWrap } from '../../common/utils/helper';
/**
* The `Legend` module is used to render the legend for the chart.
*/
var Legend = /** @class */ (function (_super) {
__extends(Legend, _super);
function Legend(chart) {
var _this = _super.call(this, chart) || this;
_this.library = _this;
_this.addEventListener();
return _this;
}
/**
* Binding events for legend module.
*
* @returns {void}
*/
Legend.prototype.addEventListener = function () {
if (this.chart.isDestroyed) {
return;
}
this.chart.on(Browser.touchMoveEvent, this.mouseMove, this);
this.chart.on('click', this.click, this);
this.chart.on(Browser.touchEndEvent, this.mouseEnd, this);
};
/**
* UnBinding events for legend module.
*
* @returns {void}
*/
Legend.prototype.removeEventListener = function () {
if (this.chart.isDestroyed) {
return;
}
this.chart.off(Browser.touchMoveEvent, this.mouseMove);
this.chart.off('click', this.click);
this.chart.off(Browser.touchEndEvent, this.mouseEnd);
};
/**
* To handle mosue move for legend module.
*
* @param {MouseEvent} e - The mouse event.
* @returns {void}
*/
Legend.prototype.mouseMove = function (e) {
if (this.chart.legendSettings.visible && !this.chart.isTouch) {
this.move(e);
if (this.chart.highlightModule && (this.chart.highlightMode !== 'None' || this.chart.legendSettings.enableHighlight)) {
var legendItemsId = [this.legendID + '_text_', this.legendID + '_shape_marker_',
this.legendID + '_shape_', this.legendID + '_g_'];
var targetId = e.target.id;
var index = void 0;
for (var _i = 0, legendItemsId_1 = legendItemsId; _i < legendItemsId_1.length; _i++) {
var id = legendItemsId_1[_i];
if (targetId.indexOf(id) > -1) {
index = parseInt(targetId.split(id)[1], 10);
this.chart.highlightModule.legendSelection(this.chart, index, e.target, e.type);
break;
}
}
// this.click(e);
}
}
};
/**
* To handle mosue end for legend module.
*
* @param {MouseEvent} e - The mouse event.
* @returns {void}
*/
Legend.prototype.mouseEnd = function (e) {
if (this.chart.legendSettings.visible && this.chart.isTouch) {
this.move(e);
}
};
/**
* Retrieves the legend options based on the visible series collection and chart.
*
* @param {Series[]} visibleSeriesCollection - The collection of visible series.
* @param {Chart} chart - The chart instance.
* @returns {void}
* @private
*/
Legend.prototype.getLegendOptions = function (visibleSeriesCollection, chart) {
this.legendCollections = [];
var seriesType;
var fill;
var colors = [];
this.isRtlEnable = chart.enableRtl;
this.isReverse = !this.isRtlEnable && chart.legendSettings.reverse;
if (visibleSeriesCollection.length > 1) {
this.legend.mode = 'Series';
}
for (var _i = 0, visibleSeriesCollection_1 = visibleSeriesCollection; _i < visibleSeriesCollection_1.length; _i++) {
var series = visibleSeriesCollection_1[_i];
if (this.legend.mode === 'Series') {
if (series.category !== 'Indicator') {
seriesType = (chart.chartAreaType === 'PolarRadar') ? series.drawType :
series.type;
fill = series.interior;
this.legendCollections.push(new LegendOptions(series.name, fill, series.legendShape, (series.category === 'TrendLine' ?
this.chart.series[series.sourceIndex].trendlines[series.index].visible : series.visible), seriesType, series.legendImageUrl ? series.legendImageUrl : (series.type === 'Scatter' && series.marker.shape === 'Image' ?
series.marker.imageUrl : ''), series.marker.shape, series.marker.visible, null, null, series.dashArray));
}
}
else if (this.legend.mode === 'Point') {
for (var _a = 0, _b = series.points; _a < _b.length; _a++) {
var points = _b[_a];
seriesType = (chart.chartAreaType === 'PolarRadar') ? series.drawType :
series.type;
fill = points.interior ? points.interior : series.interior;
this.legendCollections.push(new LegendOptions(points.x.toString(), fill, series.legendShape, (series.category === 'TrendLine' ?
this.chart.series[series.sourceIndex].trendlines[series.index].visible : points.visible), seriesType, (series.type === 'Scatter' && series.marker.shape === 'Image') ? series.marker.imageUrl : '', series.marker.shape, series.marker.visible, null, null, series.dashArray));
}
}
else if (this.legend.mode === 'Range') {
for (var _c = 0, _d = series.points; _c < _d.length; _c++) {
var points = _d[_c];
seriesType = (chart.chartAreaType === 'PolarRadar') ? series.drawType :
series.type;
fill = points.interior ? points.interior : series.interior;
var legendLabel = 'Others';
if (colors.indexOf(fill) < 0) {
colors.push(fill);
if (chart.rangeColorSettings.length >= 1 && chart.rangeColorSettings[0].colors.length === 1) {
for (var _e = 0, _f = chart.rangeColorSettings; _e < _f.length; _e++) {
var rangeMap = _f[_e];
if (rangeMap.colors[0] === fill) {
legendLabel = rangeMap.label;
}
}
this.legendCollections.push(new LegendOptions(legendLabel, fill, series.legendShape, (series.category === 'TrendLine' ?
this.chart.series[series.sourceIndex].trendlines[series.index].visible : points.visible), seriesType, (series.type === 'Scatter' && series.marker.shape === 'Image') ? series.marker.imageUrl : '', series.marker.shape, series.marker.visible, null, null, series.dashArray));
}
}
}
}
else {
if (this.legendCollections.length === 0 && chart.rangeColorSettings.length > 0) {
var startLabel = chart.rangeColorSettings[0].start.toString();
var endLabel = chart.rangeColorSettings[chart.rangeColorSettings.length - 1].end.toString();
this.legendCollections.push(new LegendOptions(startLabel, series.interior, 'Rectangle', true, seriesType, '', series.marker.shape, series.marker.visible));
this.legendCollections.push(new LegendOptions(endLabel, series.interior, 'Rectangle', true, seriesType, '', series.marker.shape, series.marker.visible));
}
}
}
if (this.isReverse && chart.legendSettings.mode !== 'Gradient') {
this.legendCollections.reverse();
}
};
/**
* Calculates the legend bounds based on the available size and legend settings.
*
* @param {Size} availableSize - The available size for the legend.
* @param {Rect} legendBounds - The current bounds of the legend.
* @param {LegendSettingsModel} legend - The legend settings.
* @returns {void}
* @private
*/
Legend.prototype.getLegendBounds = function (availableSize, legendBounds, legend) {
this.calculateLegendTitle(legend, legendBounds);
this.isTitle = legend.title ? true : false;
this.chartRowCount = 1;
this.rowHeights = [];
this.columnHeights = [];
this.pageHeights = [];
var padding = legend.padding;
var titlePosition = legend.titlePosition;
var extraHeight = 0;
var legendOption;
var extraWidth = 0;
var arrowWidth = this.arrowWidth;
var arrowHeight = this.arrowHeight;
var verticalArrowSpace = this.isVertical && !legend.enablePages ? arrowHeight : 0;
var titleSpace = this.isTitle && titlePosition === 'Top' ? this.legendTitleSize.height + this.fivePixel : 0;
titleSpace = this.isTitle && this.isVertical && titlePosition !== 'Top' ? this.legendTitleSize.height + this.fivePixel : titleSpace;
if (!this.isVertical) {
extraHeight = !legend.height ? ((availableSize.height / 100) * 5) : 0;
}
else {
extraWidth = !legend.width ? ((availableSize.width / 100) * 5) : 0;
}
legendBounds.height += (extraHeight);
legendBounds.width += extraWidth;
var shapeWidth = legend.shapeWidth;
var shapePadding = legend.shapePadding;
var maximumWidth = 0;
var rowWidth = 0;
var legendWidth = 0;
var columnHeight = 0;
var columnCount = 0;
var rowCount = 0;
var titlePlusArrowSpace = 0;
var legendEventArgs;
var render = false;
this.maxItemHeight = Math.max(measureText('MeasureText', legend.textStyle, this.chart.themeStyle.legendLabelFont).height, legend.shapeHeight);
var maxColumn = legend.layout === 'Auto' && legend.maximumColumns > 0;
if (legend.fixedWidth) {
for (var i = 0; i < this.legendCollections.length; i++) {
var textWidth = shapeWidth + shapePadding + (!this.isVertical ? (i === 0) ? padding : this.itemPadding
: padding) + (legend.maximumLabelWidth ? legend.maximumLabelWidth :
measureText(this.legendCollections[i].text, legend.textStyle, this.chart.themeStyle.legendLabelFont).width);
this.maxWidth = Math.max(this.maxWidth, textWidth);
}
}
for (var i = 0; i < this.legendCollections.length; i++) {
legendOption = this.legendCollections[i];
if (regSub.test(legendOption.text)) {
legendOption.text = getUnicodeText(legendOption.text, regSub);
}
if (regSup.test(legendOption.text)) {
legendOption.text = getUnicodeText(legendOption.text, regSup);
}
legendEventArgs = {
fill: legendOption.fill, text: legendOption.text, shape: legendOption.shape,
markerShape: legendOption.markerShape, name: legendRender, cancel: false
};
this.chart.trigger(legendRender, legendEventArgs);
legendOption.render = !legendEventArgs.cancel;
legendOption.text = legendEventArgs.text;
legendOption.fill = legendEventArgs.fill;
legendOption.shape = legendEventArgs.shape;
legendOption.markerShape = legendEventArgs.markerShape;
legendOption.textSize = measureText(legendOption.text, legend.textStyle, this.chart.themeStyle.legendLabelFont);
shapeWidth = legendOption.text ? legend.shapeWidth : 0;
shapePadding = legendOption.text ? legend.shapePadding : 0;
if (legendOption.render && legendOption.text) {
render = true;
legendWidth = legend.fixedWidth ? this.maxWidth : shapeWidth + shapePadding +
(legend.maximumLabelWidth ? legend.maximumLabelWidth : legendOption.textSize.width) +
((!this.isVertical || legend.layout === 'Horizontal') ? (i === 0 || (columnCount === 1 && rowCount > 0 && legend.layout === 'Horizontal')) ? padding : this.itemPadding : padding);
rowWidth = rowWidth + legendWidth;
if (!legend.enablePages && !this.isVertical) {
titlePlusArrowSpace = this.isTitle && titlePosition !== 'Top' ? this.legendTitleSize.width + this.fivePixel : 0;
titlePlusArrowSpace += arrowWidth;
}
this.getLegendHeight(legendOption, legend, legendBounds, rowWidth, this.maxItemHeight, padding);
if (maxColumn ? columnCount === legend.maximumColumns : legend.layout === 'Vertical' || (legendBounds.width < (padding + rowWidth + titlePlusArrowSpace)) || (this.isVertical && legend.layout === 'Auto')) {
maximumWidth = Math.max(maximumWidth, (rowWidth + padding + titlePlusArrowSpace - (this.isVertical &&
this.legend.layout === 'Auto' ? 0 : legendWidth)));
if (rowCount === 0 && (legendWidth !== rowWidth)) {
rowCount = 1;
}
rowWidth = this.isVertical && this.legend.layout === 'Auto' ? 0 : legendWidth;
rowCount++;
columnCount = 0;
columnHeight = verticalArrowSpace;
//columnHeight = (rowCount * (this.maxItemHeight + padding)) + padding + titleSpace + verticalArrowSpace;
}
var len = (rowCount > 0 ? (rowCount - 1) : 0);
this.rowHeights[len] = Math.max((this.rowHeights[len] ?
this.rowHeights[len] : 0), Math.max(legendOption.textSize.height, legend.shapeHeight));
// this.maxItemHeight = Math.max(this.maxItemHeight, legendOption.textSize.height);
this.columnHeights[columnCount] = (this.columnHeights[columnCount] ?
this.columnHeights[columnCount] : 0) + Math.max(legendOption.textSize.height, legend.shapeHeight) +
((this.isVertical || (rowCount > 0 && this.legend.itemPadding)) ? (i === 0) ? padding : this.itemPadding : padding);
columnCount++;
}
}
columnHeight = Math.max.apply(null, this.columnHeights) + padding + titleSpace;
columnHeight = Math.max(columnHeight, (this.maxItemHeight + padding) + padding + titleSpace);
if (legend.layout === 'Horizontal') {
columnHeight = this.maxItemHeight + (padding * 2) + titleSpace + this.pageButtonSize + legend.border.width;
}
this.isPaging = (legendBounds.height < columnHeight || (legend.layout === 'Horizontal' && this.rowHeights.length > 1)) && !maxColumn;
if (this.isPaging && !legend.enablePages) {
if (!this.isVertical) {
columnHeight = (this.maxItemHeight + padding) + padding + (titlePosition === 'Top' ? titleSpace : 0);
}
}
this.totalPages = rowCount;
if (maxColumn && this.maxWidth && legend.fixedWidth) {
rowWidth = this.maxWidth * legend.maximumColumns;
this.isPaging = false;
}
if ((!this.isPaging || this.legend.layout !== 'Auto') && !this.isVertical) {
rowWidth += this.isTitle && titlePosition !== 'Top' ? (this.fivePixel + this.legendTitleSize.width + this.fivePixel) : 0;
}
if (render) {
this.setBounds(Math.max((rowWidth + padding), maximumWidth), columnHeight, legend, legendBounds);
}
else {
this.setBounds(0, 0, legend, legendBounds);
}
};
/**
* Calculates the height of the legend based on the legend options, settings, and available space.
*
* @param {LegendOptions} legendOption - The legend options.
* @param {LegendSettingsModel} legend - The legend settings.
* @param {Rect} legendBounds - The current bounds of the legend.
* @param {number} rowWidth - The width of the legend rows.
* @param {number} legendHeight - The current height of the legend.
* @param {number} padding - The padding around the legend items.
* @returns {void}
* @private
*/
Legend.prototype.getLegendHeight = function (legendOption, legend, legendBounds, rowWidth, legendHeight, padding) {
var legendWidth = legendOption.textSize.width;
var textPadding = legend.shapePadding + (padding * 2) + legend.shapeWidth;
switch (legend.textWrap) {
case 'Wrap':
case 'AnyWhere':
if (legendWidth > legend.maximumLabelWidth || legendWidth + rowWidth > legendBounds.width) {
legendOption.textCollection = textWrap(legendOption.text, (legend.maximumLabelWidth ? Math.min(legend.maximumLabelWidth, (legendBounds.width - textPadding)) :
(legendBounds.width - textPadding)), legend.textStyle, this.chart.enableRtl, null, null, this.chart.themeStyle.legendLabelFont);
}
else {
legendOption.textCollection.push(legendOption.text);
}
legendOption.textSize.height = (legendHeight * legendOption.textCollection.length);
break;
}
};
/**
* Calculates the rendering point for the legend item based on various parameters.
*
* @param {LegendOptions} legendOption - The legend options.
* @param {ChartLocation} start - The starting location for the legend.
* @param {number} textPadding - The padding around the legend text.
* @param {LegendOptions} previousLegend - The options of the previous legend item.
* @param {Rect} rect - The bounding rectangle for the legend.
* @param {number} count - The count of legend items.
* @param {number} firstLegend - The index of the first legend item.
* @returns {void}
* @private
*/
Legend.prototype.getRenderPoint = function (legendOption, start, textPadding, previousLegend, rect, count, firstLegend) {
var padding = this.legend.padding;
var textWidth = this.legend.fixedWidth ? this.maxWidth : textPadding + (this.legend.maximumLabelWidth ?
this.legend.maximumLabelWidth : previousLegend.textSize.width);
var previousBound = previousLegend.location.x + ((!this.isRtlEnable) ? textWidth : -textWidth);
if (this.legend.layout === 'Auto' && this.legend.maximumColumns > 0 ? count % this.legend.maximumColumns === 0 : this.legend.layout === 'Vertical' || this.isWithinBounds(previousBound, (this.legend.maximumLabelWidth ?
this.legend.maximumLabelWidth : legendOption.textSize.width) + textPadding - this.itemPadding, rect) || (this.isVertical && this.legend.layout === 'Auto')) {
legendOption.location.x = start.x;
if (count !== firstLegend) {
this.chartRowCount++;
}
legendOption.location.y = (count === firstLegend) ? previousLegend.location.y :
previousLegend.location.y + (this.isVertical && this.legend.layout !== 'Horizontal' && !(this.legend.maximumColumns > 0) ? Math.max(previousLegend.textSize.height, this.legend.shapeHeight) :
this.rowHeights[(this.chartRowCount - 2)]) + ((this.isVertical || (this.chartRowCount > 1 &&
this.legend.itemPadding)) ? this.itemPadding : padding);
}
else {
legendOption.location.x = (count === firstLegend) ? previousLegend.location.x : previousBound;
legendOption.location.y = previousLegend.location.y;
}
var availwidth = (!this.isRtlEnable) ? (this.legendBounds.x + this.legendBounds.width) - (legendOption.location.x +
textPadding - this.itemPadding - this.legend.shapeWidth / 2) : (legendOption.location.x - textPadding + this.itemPadding +
(this.legend.shapeWidth / 2)) - this.legendBounds.x;
if (!this.isVertical && this.isPaging && !this.legend.enablePages) {
availwidth = this.legendBounds.width - legendOption.location.x - this.fivePixel;
}
availwidth = this.legend.maximumLabelWidth ? Math.min(this.legend.maximumLabelWidth, availwidth) : availwidth;
if (this.legend.textOverflow === 'Ellipsis' && this.legend.textWrap === 'Normal') {
legendOption.text = textTrim(+availwidth.toFixed(4), legendOption.text, this.legend.textStyle, this.chart.enableRtl, this.chart.themeStyle.legendLabelFont);
}
};
Legend.prototype.isWithinBounds = function (previousBound, textWidth, rect) {
if (!this.isRtlEnable) {
return (previousBound + textWidth) > (rect.x + rect.width + (this.legend.shapeWidth / 2));
}
else {
return (previousBound - textWidth) < (rect.x - (this.legend.shapeWidth / 2));
}
};
/**
* Handles the click event for a legend item.
*
* @param {number} index - The index of the clicked legend item.
* @param {Event | PointerEvent} event - The click event.
* @returns {void}
* @private
*/
Legend.prototype.LegendClick = function (index, event) {
var chart = this.chart;
var seriesIndex = chart.legendSettings.mode === 'Series' ? index : 0;
var legendIndex = !this.isReverse ? index : (this.legendCollections.length - 1) - index;
var series = chart.visibleSeries[seriesIndex];
var legend = this.legendCollections[legendIndex];
var changeDetection = 'isProtectedOnChange';
if (chart.legendSettings.mode === 'Series') {
var legendClickArgs = {
legendText: legend.text, legendShape: legend.shape,
chart: chart, series: series, points: series.points, name: legendClick, cancel: false
};
this.chart.trigger(legendClick, legendClickArgs);
series.legendShape = legendClickArgs.legendShape;
if (!legendClickArgs.cancel) {
if (series.fill !== null) {
chart.visibleSeries[index].interior = series.fill;
}
if (chart.legendSettings.toggleVisibility) {
series.chart[changeDetection] = true;
if (series.category === 'TrendLine') {
if (!chart.series[series.sourceIndex].trendlines[series.index].visible &&
chart.series[series.sourceIndex].visible) {
chart.series[series.sourceIndex].trendlines[series.index].visible = true;
}
else {
chart.series[series.sourceIndex].trendlines[series.index].visible = false;
}
}
else {
this.changeSeriesVisiblity(series, series.visible);
}
legend.visible = series.category === 'TrendLine' ? chart.series[series.sourceIndex].trendlines[series.index].visible :
(series.visible);
this.refreshLegendToggle(chart, series);
if (chart.highlightModule && chart.legendSettings.enableHighlight) {
chart.highlightModule.legendSelection(chart, index, event.target, 'mousemove');
}
}
else if (chart.highlightModule) {
chart.highlightModule.legendSelection(chart, index, event.target, event.type);
}
else if (chart.selectionModule) {
chart.selectionModule.legendSelection(chart, index, event.target, event.type);
}
series.chart[changeDetection] = false;
}
}
else if (chart.legendSettings.mode === 'Point') {
var point = series.points[index];
var legendClickArgs = {
legendText: legend.text, legendShape: legend.shape,
chart: chart, series: series, points: [point], name: legendClick, cancel: false
};
this.chart.trigger(legendClick, legendClickArgs);
if (chart.legendSettings.toggleVisibility && !legendClickArgs.cancel) {
point.visible = !point.visible;
var legendOption = this.legendCollections[index];
legendOption.visible = point.visible;
this.refreshLegendToggle(chart, series);
}
}
else if (chart.legendSettings.mode === 'Range') {
var points = [];
var legendOption = this.legendCollections[index];
for (var _i = 0, _a = series.points; _i < _a.length; _i++) {
var point = _a[_i];
if (legendOption.fill === (point.interior || series.interior)) {
points.push(point);
}
}
var legendClickArgs = {
legendText: legend.text, legendShape: legend.shape,
chart: chart, series: series, points: points, name: legendClick, cancel: false
};
this.chart.trigger(legendClick, legendClickArgs);
if (chart.legendSettings.toggleVisibility && !legendClickArgs.cancel) {
legendOption.visible = !legendOption.visible;
for (var _b = 0, points_1 = points; _b < points_1.length; _b++) {
var point = points_1[_b];
point.visible = !point.visible;
}
this.refreshLegendToggle(chart, series);
}
}
};
Legend.prototype.refreshLegendToggle = function (chart, series) {
var selectedDataIndexes = [];
if (chart.selectionModule) {
selectedDataIndexes = extend([], chart.selectionModule.selectedDataIndexes, null, true);
}
if ((chart.svgObject.childNodes.length > 0) && !chart.enableAnimation && !chart.enableCanvas) {
while (chart.svgObject.lastChild) {
chart.svgObject.removeChild(chart.svgObject.lastChild);
}
remove(chart.svgObject);
}
chart.animateSeries = false;
chart.redraw = chart.enableAnimation;
series.isLegendClicked = true;
chart.rotatedDataLabelCollections = [];
removeElement(getElement(chart.element.id + '_Secondary_Element').querySelectorAll('.ejSVGTooltip')[0]);
this.redrawSeriesElements(series, chart);
chart.removeSvg();
chart.refreshAxis();
series.refreshAxisLabel();
this.refreshSeries(chart.visibleSeries);
for (var _i = 0, _a = chart.visibleSeries; _i < _a.length; _i++) {
var series_1 = _a[_i];
if (!isNullOrUndefined(series_1)) {
chart.markerRender.removeHighlightedMarker(series_1, null, true);
}
}
chart.refreshBound();
chart.trigger('loaded', { chart: chart });
if (selectedDataIndexes.length > 0) {
chart.selectionModule.selectedDataIndexes = selectedDataIndexes;
chart.selectionModule.redrawSelection(chart, chart.selectionMode);
}
if (!chart.enableCanvas && chart.highlightModule && (chart.highlightMode !== 'None' || chart.legendSettings.enableHighlight)) {
chart.highlightModule.redrawSelection(chart, chart.highlightMode);
}
chart.redraw = false;
series.isLegendClicked = false;
};
Legend.prototype.changeSeriesVisiblity = function (series, visibility) {
series.visible = !visibility;
if (this.isSecondaryAxis(series.xAxis)) {
series.xAxis.internalVisibility = series.xAxis.series.some(function (value) { return (value.visible); });
}
if (this.isSecondaryAxis(series.yAxis) || (series.category === 'Pareto' && series.type === 'Line')) {
series.yAxis.internalVisibility = series.yAxis.series.some(function (value) { return (value.visible); });
}
if (series.trendlines.length && series.visible) {
series.trendlines.forEach(function (trendline) {
trendline.visible = true;
});
}
};
Legend.prototype.isSecondaryAxis = function (axis) {
return (this.chart.axes.indexOf(axis) > -1);
};
Legend.prototype.redrawSeriesElements = function (series, chart) {
if (!chart.redraw) {
return null;
}
removeElement(chart.element.id + '_Series_' + (series.index === undefined ? series.category : series.index) +
'_DataLabelCollections');
};
Legend.prototype.refreshSeries = function (seriesCollection) {
for (var _i = 0, seriesCollection_1 = seriesCollection; _i < seriesCollection_1.length; _i++) {
var series = seriesCollection_1[_i];
if (series.type.indexOf('Spline') > -1) {
var isArea = (series.type.indexOf('Area') > -1 || series.drawType.indexOf('Area') > -1);
var isRange = series.type.indexOf('Range') > -1;
this.chart['spline' + (isArea ? isRange ? 'RangeArea' : 'Area' : '') + 'SeriesModule'].findSplinePoint(series);
}
if (series.visible) {
series.position = undefined;
}
}
};
/**
* Handles the click event for showing tooltip on trimmed text in legend.
*
* @param {Event | PointerEvent} event - The click event.
* @returns {void}
* @private
*/
Legend.prototype.click = function (event) {
var _this = this;
if (!this.chart.legendSettings.visible) {
return;
}
var pageX = this.chart.mouseX;
var pageY = this.chart.mouseY;
var legendRegion = [];
var targetId = event.target.id.indexOf('_chart_legend_g_') > -1 ?
event.target.firstChild['id'] : event.target.id;
var legendItemsId = [this.legendID + '_text_', this.legendID + '_shape_marker_',
this.legendID + '_shape_'];
var seriesIndex;
for (var _i = 0, legendItemsId_2 = legendItemsId; _i < legendItemsId_2.length; _i++) {
var id = legendItemsId_2[_i];
if (targetId.indexOf(id) > -1) {
seriesIndex = parseInt(targetId.split(id)[1], 10);
this.LegendClick(seriesIndex, event);
break;
}
}
if (targetId.indexOf(this.legendID + '_pageup') > -1) {
this.changePage(event, true);
}
else if (targetId.indexOf(this.legendID + '_pagedown') > -1) {
this.changePage(event, false);
}
if (this.chart.enableCanvas && this.pagingRegions.length) {
this.checkWithinBounds(pageX, pageY);
}
legendRegion = this.legendRegions.filter(function (region) {
return (withInBounds(pageX, (pageY + (_this.isPaging ? (_this.currentPageNumber - 1) *
_this.translatePage(_this.chart.enableCanvas, null, 1, 2) : 0)), region.rect));
});
if (legendRegion.length && this.chart.enableCanvas) {
this.LegendClick(legendRegion[0].index, event);
}
};
/**
* Checks whether the provided coordinates are within the bounds.
*
* @param {number} pageX - The x-coordinate of the mouse pointer.
* @param {number} pageY - The y-coordinate of the mouse pointer.
* @returns {void}
* @protected
*/
Legend.prototype.checkWithinBounds = function (pageX, pageY) {
var cRender = this.chart.renderer;
var bounds = this.legendBounds;
var borderWidth = this.chart.legendSettings.border.width;
var canvasRect = new Rect(bounds.x, bounds.y, bounds.width, bounds.height);
canvasRect.x = canvasRect.x - borderWidth / 2;
canvasRect.y = canvasRect.y - borderWidth / 2;
canvasRect.width = canvasRect.width + borderWidth;
canvasRect.height = canvasRect.height + borderWidth;
if (withInBounds(pageX, pageY, this.pagingRegions[0])) {
// pageDown calculations are performing here
if (!this.isRtlEnable) {
this.canvasPageDown(cRender, canvasRect, bounds);
}
else {
this.canvasPageUp(cRender, canvasRect, bounds);
}
return null;
}
if (withInBounds(pageX, pageY, this.pagingRegions[1])) {
// pageUp calculations are performing here
if (!this.isRtlEnable) {
this.canvasPageUp(cRender, canvasRect, bounds);
}
else {
this.canvasPageDown(cRender, canvasRect, bounds);
}
return null;
}
};
Legend.prototype.canvasPageDown = function (cRender, canvasRect, bounds) {
if (--this.currentPageNumber > 0) {
this.legendRegions = [];
cRender.clearRect(canvasRect);
cRender.canvasClip(new RectOption('legendClipPath', 'transparent', { width: 0, color: '' }, null, canvasRect));
this.renderLegend(this.chart, this.legend, bounds);
cRender.canvasRestore();
}
else {
++this.currentPageNumber;
}
};
Legend.prototype.canvasPageUp = function (cRender, canvasRect, bounds) {
if (++this.currentPageNumber > 0 && this.currentPageNumber <= this.totalNoOfPages) {
this.legendRegions = [];
cRender.clearRect(canvasRect);
cRender.canvasClip(new RectOption('legendClipPath', 'transpaent', { width: 0, color: '' }, null, canvasRect));
this.renderLegend(this.chart, this.legend, bounds);
cRender.canvasRestore();
}
else {
--this.currentPageNumber;
}
};
/**
* Get module name.
*
* @returns {string} - Returns the module name.
*/
Legend.prototype.getModuleName = function () {
return 'Legend';
};
/**
* To destroy the Legend.
*
* @returns {void}
* @private
*/
Legend.prototype.destroy = function () {
this.removeEventListener();
};
return Legend;
}(BaseLegend));
export { Legend };