@syncfusion/ej2-treemap
Version:
Essential JS 2 TreeMap Components
1,096 lines • 65.6 kB
text/typescript
import { TreeMap} from '../treemap';
import { LegendSettingsModel, ColorMappingModel, LevelSettingsModel } from '../model/base-model';
import { LeafItemSettingsModel, FontModel, BorderModel } from '../model/base-model';
import {
findChildren, Location, Rect, Size, measureText,
TextOption, PathOption, RectOption, drawSymbol, orderByArea, legendMaintain
} from '../utils/helper';
import { Browser, isNullOrUndefined, EventHandler, extend, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
import { SvgRenderer, GradientColor, LinearGradient } from '@syncfusion/ej2-svg-base';
import { renderTextElement, textTrim } from '../utils/helper';
import { ILegendItemRenderingEventArgs, ILegendRenderingEventArgs } from '../model/interface';
import { LegendMode, LegendPosition, LegendOrientation, LabelPlacement, LabelIntersectAction } from '../utils/enum';
import { legendItemRendering, legendRendering } from '../model/constants';
/**
* Legend module class
*/
export class TreeMapLegend {
private treemap: TreeMap;
/** collection of rendering legends */
/** @private */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
public legendRenderingCollections: any[];
/** collection of legends */
/** @private */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
public legendCollections: any[];
/** @private */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
public outOfRangeLegend: any;
private legendHeight: number;
private legendWidth: number;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
private totalPages: any[];
private page: number = 0;
private translate: Location;
/** @private */
public legendBorderRect: Rect = new Rect(0, 0, 0, 0);
private currentPage: number = 0;
/** @private */
public heightIncrement: number = 0;
/** @private */
public widthIncrement: number = 0;
private textMaxWidth: number = 0;
/** @private */
public legendGroup: Element;
private legendNames: string[];
private defsElement: Element;
private gradientCount: number;
private legendLinearGradient: Element;
private legendInteractiveGradient: Element[] = [];
private clearTimeout: number;
private legendItemRect: Rect = new Rect(0, 0, 0, 0);
constructor(treemap: TreeMap) {
this.treemap = treemap;
this.addEventListener();
}
/**
* method for legend
*
* @returns {void}
* @private
*/
public renderLegend(): void {
this.page = 0;
this.legendRenderingCollections = [];
this.legendCollections = [];
this.legendNames = [];
this.totalPages = [];
this.gradientCount = 1;
this.widthIncrement = 0;
this.heightIncrement = 0;
this.defsElement = this.treemap.renderer.createDefs();
this.treemap.svgObject.appendChild(this.defsElement);
const eventArgs: ILegendRenderingEventArgs = {
cancel: false, name: legendRendering, treemap: this.treemap, _changePosition: this.treemap.legendSettings.position,
position: this.treemap.legendSettings.position
};
this.treemap.trigger(legendRendering, eventArgs, (observedArgs: ILegendRenderingEventArgs) => {
if (!observedArgs.cancel && observedArgs._changePosition !== this.treemap.legendSettings.position) {
this.treemap.legendSettings.position = observedArgs._changePosition;
}
this.calculateLegendBounds();
if (this.legendCollections.length > 0) {
this.drawLegend();
}
});
}
// eslint-disable-next-line valid-jsdoc
/** @private */
public calculateLegendBounds(): void {
const treemap: TreeMap = this.treemap;
const legend: LegendSettingsModel = treemap.legendSettings;
this.findColorMappingLegendItems(treemap.treemapLevelData.levelsData[0]);
if (((!isNullOrUndefined(this.treemap.palette) && this.treemap.palette.length > 0) || !isNullOrUndefined(treemap.colorValuePath))
&& this.legendCollections.length === 0) {
this.findPaletteLegendItems(treemap.treemapLevelData.levelsData[0]);
}
if (this.legendCollections.length > 0) {
// eslint-disable-next-line @typescript-eslint/tslint/config
this.legendCollections.sort((firstItem, nextItem) => (firstItem.levelIndex > nextItem.levelIndex) ? 1 :
(firstItem.levelIndex < nextItem.levelIndex) ? -1 : 0);
// eslint-disable-next-line @typescript-eslint/tslint/config
this.legendCollections.sort((firstItem, nextItem) => (firstItem.groupIndex > nextItem.groupIndex) ? 1 :
(firstItem.groupIndex < nextItem.groupIndex) ? -1 : 0);
// eslint-disable-next-line @typescript-eslint/tslint/config
this.legendCollections.sort((firstItem, nextItem) => (firstItem.leafIndex > nextItem.leafIndex) ? 1 :
(firstItem.leafIndex < nextItem.leafIndex) ? -1 : 0);
const defaultSize: number = 25; const textPadding: number = 10; const position: LegendPosition = legend.position;
const legendTitle: string = treemap.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(legend.title.text) : legend.title.text;
const titleTextStyle: FontModel = legend.titleStyle;
const legendMode: LegendMode = legend.mode; let shapeX: number = 0; let shapeY: number = 0;
let textX: number = 0; let textY: number = 0; const shapeHeight: number = legend.shapeHeight;
const shapeWidth: number = legend.shapeWidth; let shapeLocation: Location[] = []; let textLocation: Rect[] = [];
const orientation: LegendOrientation = (legend.orientation === 'None') ? ((position === 'Top' || position === 'Bottom'
|| (position === 'Auto' && treemap.availableSize.width <= treemap.availableSize.height))
? 'Horizontal' : 'Vertical') : legend.orientation;
const leftPadding: number = 10; const topPadding: number = 10; const spacing: number = 10;
let legendWidth: number = (legend.width.length > 1) ? (legend.width.indexOf('%') > -1) ? (treemap.availableSize.width / 100)
* parseFloat(legend.width) : parseFloat(legend.width) : null;
let legendHeight: number = (legend.height.length > 1) ? (legend.height.indexOf('%') > -1) ?
(treemap.availableSize.height / 100) * parseFloat(legend.height) : parseFloat(legend.height) : null;
titleTextStyle.fontFamily = titleTextStyle.fontFamily || treemap.themeStyle.fontFamily;
titleTextStyle.fontWeight = titleTextStyle.fontWeight || treemap.themeStyle.titleFontWeight;
titleTextStyle.size = titleTextStyle.size || treemap.themeStyle.subtitleFontSize;
const legendTitleSize: Size = measureText(legendTitle, titleTextStyle);
let startX: number = 0; let startY: number = 0; const shapePadding: number = legend.shapePadding;
const itemTextStyle: FontModel = legend.textStyle;
itemTextStyle.size = itemTextStyle.size || treemap.themeStyle.legendFontSize;
itemTextStyle.fontFamily = itemTextStyle.fontFamily || treemap.themeStyle.fontFamily;
itemTextStyle.fontWeight = itemTextStyle.fontWeight || treemap.themeStyle.fontWeight;
if (legendMode === 'Default') {
legendWidth = (isNullOrUndefined(legendWidth)) ? treemap.areaRect.width : legendWidth;
legendHeight = (isNullOrUndefined(legendHeight)) ? treemap.areaRect.height : legendHeight;
let j: number = 0;
for (let i: number = 0; i < this.legendCollections.length; i++) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const legendItem: any = this.legendCollections[i as number];
if (isNullOrUndefined(this.totalPages[this.page])) {
this.totalPages[this.page] = { Page: (this.page + 1), Collection: [] };
}
const legendTextSize: Size = measureText(treemap.enableHtmlSanitizer ?
SanitizeHtmlHelper.sanitize(legendItem['legendName']) : legendItem['legendName'], itemTextStyle);
this.textMaxWidth = Math.max(this.textMaxWidth, legendTextSize.width);
if (i === 0) {
startX = shapeX = (leftPadding + (shapeWidth / 2));
startY = shapeY = topPadding + legendTitleSize.height + (shapeHeight > legendTextSize.height ? shapeHeight / 2
: (legendTextSize.height / 4));
} else {
const maxSize: number = (legendTextSize.height > shapeHeight) ? legendTextSize.height : shapeHeight;
if (orientation === 'Horizontal') {
const prvePositionX: number = (textLocation[j - 1].x + textLocation[j - 1].width) + textPadding + shapeWidth;
if ((prvePositionX + shapePadding + legendTextSize.width) > legendWidth) {
const nextPositionY: number = (textLocation[j - 1].y > (shapeLocation[j - 1].y + (shapeHeight / 2)) ?
textLocation[j - 1].y : (shapeLocation[j - 1].y + (shapeHeight / 2))) + topPadding;
if ((nextPositionY + maxSize) > legendHeight) {
this.getPageChanged();
j = 0;
shapeLocation = [];
textLocation = [];
shapeX = startX;
shapeY = startY;
} else {
shapeX = (shapeLocation[0].x);
shapeY = (nextPositionY + (maxSize / 2));
}
} else {
shapeX = (prvePositionX - (shapeWidth / 2));
shapeY = (shapeLocation[j - 1]).y;
}
} else {
const prevPositionY: number = textLocation[j - 1].y > shapeLocation[j - 1].y + (shapeHeight / 2) ?
textLocation[j - 1].y : shapeLocation[j - 1].y + (shapeHeight / 2);
if ((prevPositionY + topPadding + maxSize) > legendHeight) {
const nextPositionX: number = (textLocation[j - 1].x + this.textMaxWidth + textPadding);
if ((nextPositionX + shapePadding + legendTextSize.width) > legendWidth) {
shapeX = startX;
shapeY = startY;
textLocation = [];
shapeLocation = [];
this.getPageChanged();
j = 0;
} else {
shapeX = nextPositionX + (shapeWidth / 2);
shapeY = (shapeLocation[0].y);
}
} else {
shapeX = shapeLocation[j - 1].x;
shapeY = prevPositionY + topPadding + (shapeHeight / 2);
}
}
}
textX = shapeX + (shapeWidth / 2) + shapePadding;
textY = shapeY + (legendTextSize.height / 4);
shapeLocation.push({ x: shapeX, y: shapeY });
textLocation.push({ x: textX, y: textY, width: legendTextSize.width, height: (legendTextSize.height / 2) });
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(<any[]>this.totalPages[this.page]['Collection']).push({
DisplayText: legendItem['legendName'], element: legendItem['gradientElement'],
Shape: { x: shapeX, y: shapeY },
Text: { x: textX, y: textY },
Fill: legendItem['legendFill'],
Data: legendItem['legendData'],
Rect: {
x: shapeLocation[j as number].x - (shapeWidth / 2),
y: (shapeLocation[j as number].y - (shapeHeight / 2)) < (textY - legendTextSize.height) ?
(shapeLocation[j as number].y - (shapeHeight / 2)) : (textY - legendTextSize.height),
width: Math.abs((shapeLocation[j as number].x - (shapeWidth / 2)) - (textX + legendTextSize.width)),
height: ((shapeHeight > legendTextSize.height) ? shapeHeight : legendTextSize.height)
}
});
j++;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const collection: any[] = (<any[]>this.totalPages[0]['Collection']);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
collection.forEach((legendObj: any, index: number) => {
const legendRect: Rect = new Rect(
legendObj['Rect']['x'], legendObj['Rect']['y'],
legendObj['Rect']['width'], legendObj['Rect']['height']
);
if (index === 0) {
startX = legendRect.x;
startY = legendRect.y;
}
this.widthIncrement = Math.max(this.widthIncrement, Math.abs(startX - (legendRect.x + legendRect.width)));
this.heightIncrement = Math.max(this.heightIncrement, Math.abs(startY - (legendRect.y + legendRect.height)));
});
legendWidth = ((this.widthIncrement < legendWidth) ? this.widthIncrement : legendWidth);
legendHeight = ((this.heightIncrement < legendHeight) ? this.heightIncrement : legendHeight);
this.legendItemRect = {
x: collection[0]['Rect']['x'], y: collection[0]['Rect']['y'],
width: legendWidth, height: legendHeight
};
} else {
const legendLength: number = this.legendCollections.length;
const rectWidth: number = (orientation === 'Horizontal') ? (isNullOrUndefined(legendWidth)) ? (treemap.areaRect.width / legendLength) :
(legendWidth / legendLength) : (isNullOrUndefined(legendWidth)) ? defaultSize : legendWidth;
const rectHeight: number = (orientation === 'Horizontal') ? (isNullOrUndefined(legendHeight)) ? defaultSize : legendHeight :
(isNullOrUndefined(legendHeight)) ? (treemap.areaRect.height / legendLength) : (legendHeight / legendLength);
startX = 0; startY = legendTitleSize.height + spacing;
const textPadding: number = 10; const placement: LabelPlacement = legend.labelPosition;
let itemStartX: number = 0; let itemStartY: number = 0;
const labelAction: LabelIntersectAction = legend.labelDisplayMode;
let maxTextHeight: number = 0; let maxTextWidth: number = 0;
for (let i: number = 0; i < this.legendCollections.length; i++) {
startX = (orientation === 'Horizontal') ? (startX + rectWidth) : startX;
startY = (orientation === 'Horizontal') ? startY : (startY + rectHeight);
let legendText: string = this.legendCollections[i as number]['legendName'];
let itemTextSize: Size = new Size(0, 0);
if (labelAction === 'None') {
itemTextSize = measureText(legendText, itemTextStyle);
} else if (labelAction === 'Trim') {
legendText = textTrim((orientation === 'Horizontal' ? rectWidth : rectHeight), legendText, itemTextStyle);
itemTextSize = measureText(legendText, itemTextStyle);
} else {
legendText = '';
}
maxTextHeight = Math.max(maxTextHeight, itemTextSize.height);
maxTextWidth = Math.max(maxTextWidth, itemTextSize.width);
if (itemTextSize.width > 0 && itemTextSize.height > 0) {
if (orientation === 'Horizontal') {
textX = startX + (rectWidth / 2);
textY = (placement === 'After') ? (startY + rectHeight + (itemTextSize.height / 2)) + textPadding :
(startY - textPadding);
} else {
textX = (placement === 'After') ? startX - (itemTextSize.width / 2) - textPadding
: (startX + rectWidth + itemTextSize.width / 2) + textPadding;
textY = startY + (rectHeight / 2) + (itemTextSize.height / 4);
}
}
if (i === 0) {
itemStartX = (orientation === 'Horizontal') ? startX : (placement === 'After') ?
textX - (itemTextSize.width / 2) : startX;
itemStartY = (orientation === 'Horizontal') ? (placement === 'After') ? startY :
textY - (itemTextSize.height / 2) : startY;
}
if (i === legendLength - 1) {
legendWidth = (orientation === 'Horizontal') ? Math.abs((startX + rectWidth) - itemStartX) :
(rectWidth + maxTextWidth + textPadding);
legendHeight = (orientation === 'Horizontal') ? (rectHeight + (maxTextHeight / 2) + textPadding) :
Math.abs((startY + rectHeight) - itemStartY);
}
this.legendRenderingCollections.push({
fill: this.legendCollections[i as number]['legendFill'], x: startX, y: startY,
width: rectWidth, height: rectHeight, element: this.legendCollections[i as number]['gradientElement'],
text: legendText, textX: textX, textY: textY,
textWidth: itemTextSize.width, textHeight: itemTextSize.height,
data: this.legendCollections[i as number]['legendData']
});
}
this.legendItemRect = { x: itemStartX, y: itemStartY, width: legendWidth, height: legendHeight };
}
}
}
private getPageChanged(): void {
this.page++;
if (isNullOrUndefined(this.totalPages[this.page])) {
this.totalPages[this.page] = { Page: (this.page + 1), Collection: [] };
}
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
private findColorMappingLegendItems(data: any): void {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const child: any[] = findChildren(data)['values'];
if (child && child.length > 0) {
this.calculateLegendItems(child);
if (this.treemap.levels.length > 0) {
for (let i: number = 0; i < child.length; i++) {
this.findColorMappingLegendItems(child[i as number]);
}
}
}
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
private findPaletteLegendItems(data: any): void {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let child: any[]; let legendFillColor: string;
if (!isNullOrUndefined(this.treemap.drilledItems)) {
if (this.treemap.drilledItems.length === 0 && !isNullOrUndefined(this.treemap.initialDrillDown.groupName)
&& isNullOrUndefined(this.treemap.drilledLegendItems)) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const items: any[] = findChildren(data)['values'];
for (let k: number = 0; k < items.length; k++) {
if (items[k as number]['Name'] === this.treemap.initialDrillDown.groupName) {
items[k as number]['isDrilled'] = !items[k as number]['isDrilled'];
data = items[k as number];
this.treemap.currentLevel = this.treemap.initialDrillDown.groupIndex;
legendFillColor = this.treemap.palette.length > 0 ? this.treemap.palette[k % this.treemap.palette.length] :
items[k as number]['data'][this.treemap.colorValuePath];
break;
}
}
}
}
if (this.treemap.enableDrillDown && !isNullOrUndefined(this.treemap.drilledLegendItems)) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const childElement: any = this.treemap.drilledLegendItems;
if (!isNullOrUndefined(childElement['data']['options'])) {
legendFillColor = childElement['data']['options']['fill'];
} else {
for (let k: number = 0; k < childElement.length; k++) {
legendFillColor = this.treemap.palette.length > 0 ? this.treemap.palette[k % this.treemap.palette.length] :
childElement[k as number]['data'][this.treemap.colorValuePath];
break;
}
}
if (childElement['data']['isDrilled']) {
child = findChildren(childElement['data'])['values'];
} else {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const parentElement: any = childElement['data']['parent'];
child = findChildren(parentElement)['values'];
}
} else {
child = findChildren(data)['values'];
}
let isDuplicate: boolean;
let legendName: string;
if (child && child.length > 0) {
for (let i: number = 0; i < child.length; i++) {
if (isNullOrUndefined(child[i as number]['data'][this.treemap.legendSettings.showLegendPath]) ||
child[i as number]['data'][this.treemap.legendSettings.showLegendPath]) {
legendName = child[i as number]['data'][this.treemap.legendSettings.valuePath] ?
child[i as number]['data'][this.treemap.legendSettings.valuePath] : child[i as number]['name'];
isDuplicate = this.treemap.legendSettings.removeDuplicateLegend ?
this.removeDuplicates(this.legendCollections, legendName) : false;
if (!isDuplicate) {
this.legendCollections.push({
legendName: legendName,
legendFill: this.treemap.palette.length > 0 ? !isNullOrUndefined(this.treemap.currentLevel)
? legendFillColor : this.treemap.palette[i % this.treemap.palette.length] :
child[i as number]['data'][this.treemap.colorValuePath],
legendData: [],
itemArea: child[i as number]['weight'],
levelOrderName: child[i as number]['levelOrderName']
});
}
}
}
this.legendCollections.sort(orderByArea);
if (this.treemap.palette.length > 0) {
for (let j: number = 0; j < this.legendCollections.length; j++) {
this.legendCollections[j as number]['legendFill'] = !isNullOrUndefined(this.treemap.currentLevel)
? legendFillColor : this.treemap.palette[j % this.treemap.palette.length];
}
}
}
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
private calculateLegendItems(data: any[]): void {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let isAddData: any; let fill: string; let rangeValue: number;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let currentData: any; let legendText: string;
let isLeafItem: boolean; let colorMapProcess: boolean = false;
let colorMapping: ColorMappingModel[]; let groupIndex: number;
const leaf: LeafItemSettingsModel = this.treemap.leafItemSettings;
const levels: LevelSettingsModel[] = this.treemap.levels; let equalValue: string;
const position: LegendPosition = this.treemap.legendSettings.position;
let gradientElement: Element; let x2: string; let y2: string; let actualValue: string;
let isDuplicate: boolean; let isEqualColor: boolean; let isRange: boolean; let isDesaturation: boolean = false;
let legendIndex: number = 0; let outfill: string; let labelLegend: string; let otherIndex: number;
this.outOfRangeLegend = null;
for (let i: number = 0; i < data.length; i++) {
fill = ''; isEqualColor = false; isRange = false; isDesaturation = false;
currentData = data[i as number]['data'];
groupIndex = data[i as number]['groupIndex'];
isLeafItem = (this.treemap.levels.length === 0 || groupIndex === this.treemap.levels.length);
colorMapping = isLeafItem ? leaf.colorMapping : levels[groupIndex as number].colorMapping;
for (let j: number = 0; j < colorMapping.length; j ++) {
const colorMap: ColorMappingModel = colorMapping[j as number];
gradientElement = null;
rangeValue = Number(currentData[this.treemap.rangeColorValuePath]);
equalValue = currentData[this.treemap.equalColorValuePath];
colorMap.value = !isNullOrUndefined(colorMap.value) ? colorMap.value.toString() : colorMap.value;
if (!isNullOrUndefined(colorMap.from) && !isNullOrUndefined(colorMap.to) &&
rangeValue >= colorMap.from && rangeValue <= colorMap.to && colorMap.showLegend) {
colorMapProcess = true; isRange = true;
actualValue = colorMap.from + ' - ' + colorMap.to;
legendText = !isNullOrUndefined(colorMap.label) ? colorMap.label : colorMap.from + ' - ' + colorMap.to;
fill = isNullOrUndefined(colorMap.color) ? fill : <string>colorMap.color;
isAddData = this.isAddNewLegendData(actualValue);
} else if (!isNullOrUndefined(colorMap.value) && equalValue === colorMap.value && colorMap.showLegend) {
colorMapProcess = true; isEqualColor = true;
actualValue = colorMap.value.toString();
legendText = !isNullOrUndefined(colorMap.label) ? colorMap.label : colorMap.value.toString();
fill = isNullOrUndefined(colorMap.color) ? fill :
Object.prototype.toString.call(colorMap.color) === '[object Array]' ? colorMap.color[0] : <string>colorMap.color;
isAddData = this.isAddNewLegendData(actualValue);
}
if (colorMapProcess && isNullOrUndefined(colorMap.value) && colorMap.maxOpacity && colorMap.minOpacity
&& this.treemap.legendSettings.mode === 'Interactive') {
const colors: GradientColor[] = []; isDesaturation = true;
if (Object.prototype.toString.call(colorMap.color) === '[object Array]') {
for (let q: number = 0; q < colorMap.color.length; q++) {
const offsetColor: number = 100 / (colorMap.color.length - 1);
const offsetValue: string = q * offsetColor + '%';
const stop1Color: GradientColor = { colorStop: offsetValue.toString(), color: colorMap.color[q as number] };
colors.push(stop1Color);
}
} else {
const stop1Color: GradientColor = { colorStop: '0%', color: fill };
const stop2Color: GradientColor = { colorStop: '100%', color: fill };
colors.push(stop1Color);
colors.push(stop2Color);
}
x2 = position === 'Top' || position === 'Bottom' ? '100%' : '0%';
y2 = position === 'Top' || position === 'Bottom' ? '0%' : '100%';
const gradient: LinearGradient = {
id: 'groupIndex_' + groupIndex + '_colorIndex_' + this.gradientCount, x1: '0%', y1: '0%', x2: x2, y2: y2
};
gradientElement = this.treemap.renderer.drawGradient('linearGradient', gradient, colors).childNodes[0] as Element;
if (Object.prototype.toString.call(colorMap.color) !== '[object Array]') {
(gradientElement.childNodes[0] as Element).setAttribute('stop-opacity', colorMap.minOpacity.toString());
(gradientElement.childNodes[1] as Element).setAttribute('stop-opacity', colorMap.maxOpacity.toString());
}
this.defsElement.appendChild(gradientElement);
this.gradientCount++;
}
isDuplicate = this.treemap.legendSettings.removeDuplicateLegend ?
this.removeDuplicates(this.legendCollections, legendText) : false;
if (isAddData && isAddData['process'] && colorMapProcess && !isDuplicate) {
colorMapProcess = false;
fill = ((Object.prototype.toString.call(colorMap.color) === '[object Array]')) && isNullOrUndefined(gradientElement)
&& isNullOrUndefined(colorMap.value) ? this.legendGradientColor(colorMap, legendIndex) : fill;
this.legendCollections.push({
actualValue: actualValue, levelIndex: !isLeafItem ? j : -1, leafIndex: isLeafItem ? j : -1,
legendName: legendText, legendFill: fill, legendData: [], groupIndex: !isLeafItem ? groupIndex : -1,
gradientElement: !isNullOrUndefined(gradientElement) ? gradientElement : isNullOrUndefined(colorMap.value)
? this.legendLinearGradient : null, name: data[i as number]['name'],
opacity: this.treemap.legendSettings.opacity, borderColor: this.treemap.legendSettings.border.color,
borderWidth: this.treemap.legendSettings.border.width
});
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(<any[]>this.legendCollections[this.legendCollections.length - 1]['legendData']).push(data[i as number]);
legendIndex++;
} else if (colorMapProcess) {
colorMapProcess = false;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(<any[]>this.legendCollections[isAddData['value']]['legendData']).push(data[i as number]);
}
if (!isRange && !isDesaturation && !isEqualColor) {
if (isNullOrUndefined(colorMap.from) && isNullOrUndefined(colorMap.to)
&& isNullOrUndefined(colorMap.minOpacity) &&
isNullOrUndefined(colorMap.maxOpacity) && isNullOrUndefined(colorMap.value) &&
!isNullOrUndefined(colorMap.color)) {
outfill = ((Object.prototype.toString.call(colorMap.color) === '[object Array]'))
? colorMap.color[0] : <string>colorMap.color;
labelLegend = !isNullOrUndefined(colorMap.label) ? colorMap.label : 'Others';
isDuplicate = this.treemap.legendSettings.removeDuplicateLegend ?
this.removeDuplicates(this.legendCollections, labelLegend) : false;
if (isNullOrUndefined(this.outOfRangeLegend) && !isDuplicate) {
this.legendCollections.push({
actualValue: labelLegend, legendData: [],
legendName: labelLegend, legendFill: outfill, groupIndex: (!isLeafItem || groupIndex > -1) ? groupIndex : -1
});
otherIndex = this.legendCollections.length;
this.outOfRangeLegend = this.legendCollections[otherIndex - 1];
legendIndex++;
}
for (let k: number = this.legendCollections.length - 1; k >= 0; k--) {
if (this.legendCollections[k as number]['actualValue'] === (colorMap.label || 'Others')) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(<any[]>this.legendCollections[k as number]['legendData']).push(data[i as number]);
break;
}
}
}
}
}
}
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
private removeDuplicates(legendCollection: any[], text: string): boolean {
let isDuplicate: boolean = false;
for (let i: number = 0; i < legendCollection.length; i++) {
if (legendCollection[i as number]['legendName'] === text) {
isDuplicate = true;
break;
} else {
continue;
}
}
return isDuplicate;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
private isAddNewLegendData(legendText: string): any {
let newDataProcess: boolean; let itemValue: number;
if (this.legendCollections.length === 0) {
newDataProcess = true;
} else {
for (let j: number = 0; j < this.legendCollections.length; j++) {
if (legendText === this.legendCollections[j as number]['actualValue']) {
newDataProcess = false;
itemValue = j;
break;
} else if (j === this.legendCollections.length - 1) {
newDataProcess = true;
}
}
}
return { process: newDataProcess, value: itemValue };
}
// eslint-disable-next-line valid-jsdoc
/**
* To draw the legend
*
* @private
*/
public drawLegend(): void {
const legend: LegendSettingsModel = <LegendSettingsModel>this.treemap.legendSettings;
const render: SvgRenderer = this.treemap.renderer; let fill: string;
let textOptions: TextOption; let gradientElement: Element;
const textFont: FontModel = legend.textStyle;
this.legendGroup = render.createGroup({ id: this.treemap.element.id + '_Legend_Group' });
this.renderLegendBorder();
this.renderLegendTitle();
if (legend.mode === 'Default') {
this.drawLegendItem(this.currentPage);
} else {
for (let i: number = 0; i < this.legendRenderingCollections.length; i++) {
const itemId: string = this.treemap.element.id + '_Legend_Index_' + i;
const textId: string = this.treemap.element.id + '_Legend_Index_' + i + '_Text';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const item: any = this.legendRenderingCollections[i as number];
gradientElement = item['element'];
fill = gradientElement ? 'url(#' + gradientElement.id + ')' : item['fill'];
const bounds: Rect = new Rect(item['x'], item['y'], item['width'], item['height']);
const textLocation: Location = new Location(item['textX'], item['textY']);
const rectOptions: RectOption = new RectOption(itemId, fill, legend.shapeBorder, legend.opacity, bounds);
if (this.treemap.enableRtl) {
if (this.treemap.legendSettings.position === 'Left' || this.treemap.legendSettings.position === 'Right'
|| (this.treemap.legendSettings.position === 'Auto'
&& this.treemap.availableSize.width >= this.treemap.availableSize.height)) {
rectOptions.y = (this.translate.y + this.legendBorderRect.y + this.legendBorderRect.height)
- (this.translate.y + rectOptions.height) - Math.abs(this.legendBorderRect.y - rectOptions.y);
textLocation.y = (this.translate.y + this.legendBorderRect.y + this.legendBorderRect.height)
- (this.translate.y) + (item['textHeight'] / 2)
- Math.abs(this.legendBorderRect.y - textLocation.y);
} else {
rectOptions.x = (this.translate.x + this.legendBorderRect.x + this.legendBorderRect.width)
- (this.translate.x + rectOptions.width)
- Math.abs(this.legendBorderRect.x - rectOptions.x);
textLocation.x = (this.translate.x + this.legendBorderRect.x + this.legendBorderRect.width)
- this.translate.x - Math.abs(this.legendBorderRect.x - textLocation.x);
}
}
const text: string = this.treemap.enableHtmlSanitizer ? (SanitizeHtmlHelper.sanitize(item['text'])) : item['text'];
textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'middle', text, '', '');
renderTextElement(textOptions, textFont, textFont.color || this.treemap.themeStyle.legendTextColor, this.legendGroup);
const legendElement: Element = render.drawRectangle(rectOptions);
legendElement.setAttribute('tabindex', this.treemap.tabIndex.toString());
(legendElement as HTMLElement).style.outline = '';
this.legendGroup.appendChild(legendElement);
}
}
legendMaintain(this.treemap, this.legendGroup);
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
private defaultLegendRtlLocation(collection: any, spacing: number, treemap: TreeMap, legend: LegendSettingsModel): any {
const shapeLocation: Location = collection['Shape'];
const textLocation: Location = collection['Text'];
const legendText: string = collection['DisplayText'];
const textSize: Size = measureText(legendText, legend.textStyle);
shapeLocation.x = (this.translate.x + this.legendBorderRect.x + this.legendBorderRect.width)
- (this.translate.x + spacing) - Math.abs(this.legendBorderRect.x - shapeLocation.x);
textLocation.x = (this.translate.x + this.legendBorderRect.x + this.legendBorderRect.width)
- (this.translate.x + textSize.width + spacing) - Math.abs(this.legendBorderRect.x - textLocation.x);
if (treemap.legendSettings.position === 'Left' || treemap.legendSettings.position === 'Right'
|| (treemap.legendSettings.position === 'Auto'
&& this.treemap.availableSize.width >= this.treemap.availableSize.height)) {
shapeLocation.y = (this.translate.y + this.legendBorderRect.y + this.legendBorderRect.height)
- this.translate.y - Math.abs(Math.abs(this.legendBorderRect.y) - shapeLocation.y) - (legend.shapeHeight / 2);
textLocation.y = (this.translate.y + this.legendBorderRect.y + this.legendBorderRect.height)
- this.translate.y - Math.abs(Math.abs(this.legendBorderRect.y) - textLocation.y);
}
return { shapeLocation: shapeLocation, textLocation: textLocation };
}
private drawLegendItem(page: number): void {
const treemap: TreeMap = this.treemap; const spacing: number = 10;
const legend: LegendSettingsModel = <LegendSettingsModel>treemap.legendSettings;
const shapeSize: Size = new Size(legend.shapeWidth, legend.shapeHeight);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let textOptions: TextOption; let legendRtlLocation: any;
const render: SvgRenderer = treemap.renderer;
const shapeBorder: BorderModel = legend.shapeBorder; let eventArgs: ILegendItemRenderingEventArgs;
if (page >= 0 && page < this.totalPages.length) {
if (document.getElementById(this.legendGroup.id)) {
document.getElementById(this.legendGroup.id).remove();
}
const isLineShape: boolean = (legend.shape === 'HorizontalLine' || legend.shape === 'VerticalLine' || legend.shape === 'Cross');
const strokeColor: string = isLineShape ? isNullOrUndefined(legend.fill) ? '#000000' : legend.fill : shapeBorder.color;
const strokeWidth: number = isLineShape ? (shapeBorder.width === 0) ? 1 : shapeBorder.width : shapeBorder.width;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
for (let i: number = 0; i < (<any[]>this.totalPages[page as number]['Collection']).length; i++) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const collection: any = <any[]>this.totalPages[page as number]['Collection'][i as number];
const legendText: string = this.treemap.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(collection['DisplayText']) : collection['DisplayText'];
const legendElement: Element = render.createGroup({ id: treemap.element.id + '_Legend_Index_' + i });
legendElement.setAttribute('aria-label', legendText + ' Legend');
legendElement.setAttribute('role', 'region');
legendElement.setAttribute('tabindex', this.treemap.tabIndex.toString());
(legendElement as HTMLElement).style.outline = 'none';
const shapeId: string = treemap.element.id + '_Legend_Shape_Index_' + i;
const textId: string = treemap.element.id + '_Legend_Text_Index_' + i;
let shapeLocation: Location = collection['Shape'];
let textLocation: Location = collection['Text'];
if (treemap.enableRtl) {
legendRtlLocation = this.defaultLegendRtlLocation(collection, spacing, treemap, legend);
shapeLocation = legendRtlLocation['shapeLocation'];
textLocation = legendRtlLocation['textLocation'];
}
eventArgs = {
cancel: false, name: legendItemRendering, treemap: treemap, fill: collection['Fill'],
shape: legend.shape, imageUrl: legend.imageUrl
};
treemap.trigger(legendItemRendering, eventArgs, (observedArgs: ILegendItemRenderingEventArgs) => {
const renderOptions: PathOption = new PathOption(
shapeId, observedArgs.fill, strokeWidth, isLineShape ? collection['Fill'] : strokeColor, legend.opacity, ''
);
legendElement.appendChild(
drawSymbol(shapeLocation, observedArgs.shape, shapeSize, observedArgs.imageUrl, renderOptions));
textOptions = new TextOption(textId, textLocation.x, textLocation.y, 'start', legendText, '', '');
renderTextElement(
textOptions, legend.textStyle, legend.textStyle.color || treemap.themeStyle.legendTextColor, legendElement
);
this.legendGroup.appendChild(legendElement);
});
}
let pagingGroup: Element; const width: number = spacing; const height: number = (spacing / 2);
if (this.page !== 0) {
const pagingText: string = (page + 1) + '/' + this.totalPages.length;
const pagingFont: FontModel = legend.textStyle; const pagingTextSize: Size = measureText(pagingText, pagingFont);
const leftPageX: number = (this.legendItemRect.x + this.legendItemRect.width) - pagingTextSize.width -
(width * 2) - spacing;
const rightPageX: number = (this.legendItemRect.x + this.legendItemRect.width);
const locY: number = (this.legendItemRect.y + this.legendItemRect.height) + (height / 2) + spacing;
const pageTextX: number = rightPageX - width - (pagingTextSize.width / 2) - (spacing / 2);
pagingGroup = render.createGroup({ id: treemap.element.id + '_Legend_Paging_Group' });
const leftPageElement: Element = render.createGroup({ id: treemap.element.id + '_Legend_Left_Paging_Group' });
const rightPageElement: Element = render.createGroup({ id: treemap.element.id + '_Legend_Right_Paging_Group' });
const rightPath: string = ' M ' + rightPageX + ' ' + locY + ' L ' + (rightPageX - width) + ' ' + (locY - height) +
' L ' + (rightPageX - width) + ' ' + (locY + height) + ' z ';
const leftPath: string = ' M ' + leftPageX + ' ' + locY + ' L ' + (leftPageX + width) + ' ' + (locY - height) +
' L ' + (leftPageX + width) + ' ' + (locY + height) + ' z ';
const leftPageOptions: PathOption = new PathOption(
treemap.element.id + '_Left_Page', '#a6a6a6', 0, '#a6a6a6', 1, '', leftPath
);
leftPageElement.appendChild(render.drawPath(leftPageOptions));
const leftRectPageOptions: RectOption = new RectOption(
treemap.element.id + '_Left_Page_Rect', 'transparent', {}, 1,
new Rect(leftPageX - (width / 2), (locY - (height * 2)), width * 2, spacing * 2), ''
);
leftPageElement.appendChild(render.drawRectangle(leftRectPageOptions));
this.wireEvents(leftPageElement);
const rightPageOptions: PathOption = new PathOption(
treemap.element.id + '_Right_Page', '#a6a6a6', 0, '#a6a6a6', 1, '', rightPath
);
rightPageElement.appendChild(render.drawPath(rightPageOptions));
const rightRectPageOptions: RectOption = new RectOption(
treemap.element.id + '_Right_Page_Rect', 'transparent', {}, 1,
new Rect((rightPageX - width), (locY - height), width, spacing), ''
);
rightPageElement.appendChild(render.drawRectangle(rightRectPageOptions));
this.wireEvents(rightPageElement);
pagingGroup.appendChild(leftPageElement);
pagingGroup.appendChild(rightPageElement);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const pageTextOptions: any = {
'id': treemap.element.id + '_Paging_Text',
'x': pageTextX,
'y': locY + (pagingTextSize.height / 4),
'fill': '#a6a6a6',
'font-size': '14px',
'font-style': pagingFont.fontStyle,
'font-family': pagingFont.fontFamily,
'font-weight': pagingFont.fontWeight,
'text-anchor': 'middle',
'transform': '',
'opacity': 1,
'dominant-baseline': '',
'role': 'region',
'aria-label': pagingText
};
pagingGroup.appendChild(render.createText(pageTextOptions, pagingText));
this.legendGroup.appendChild(pagingGroup);
}
}
}
private renderLegendBorder(): void {
const treemap: TreeMap = this.treemap;
const legend: LegendSettingsModel = <LegendSettingsModel>treemap.legendSettings;
const legendTitle: string = legend.title.text;
const spacing: number = 10;
const textStyle: FontModel = legend.titleStyle;
const title: string = textTrim((this.legendItemRect.width + (spacing * 2)), legendTitle, textStyle);
const textSize: Size = measureText(title, textStyle);
this.legendBorderRect = new Rect(
(this.legendItemRect.x - spacing),
(this.legendItemRect.y - spacing - textSize.height),
(this.legendItemRect.width) + (spacing * 2),
(this.legendItemRect.height) + (spacing * 2) + textSize.height +
(legend.mode === 'Interactive' ? 0 : (this.page !== 0) ? spacing : 0)
);
const borderStyle: BorderModel = {
color: legend.border.color || this.treemap.themeStyle.legendBorderColor,
width: legend.border.width || this.treemap.themeStyle.legendBorderWidth
};
const renderOptions: RectOption = new RectOption(
treemap.element.id + '_Legend_Border', legend.background, borderStyle, 1, this.legendBorderRect, ''
);
const legendBorder: Element = treemap.renderer.drawRectangle(renderOptions);
(legendBorder as HTMLElement).style.pointerEvents = 'none';
this.legendGroup.appendChild(legendBorder);
this.getLegendAlignment(treemap, this.legendBorderRect.width, this.legendBorderRect.height, legend);
this.legendGroup.setAttribute('transform', 'translate( ' + (this.translate.x + (-(this.legendBorderRect.x))) + ' ' +
(this.translate.y + (-(this.legendBorderRect.y))) + ' )');
treemap.svgObject.appendChild(this.legendGroup);
}
private renderLegendTitle(): void {
const legend: LegendSettingsModel = <LegendSettingsModel>this.treemap.legendSettings;
const textStyle: FontModel = legend.titleStyle;
const legendTitle: string = this.treemap.enableHtmlSanitizer ? (SanitizeHtmlHelper.sanitize(legend.title.text)) : legend.title.text;
let textOptions: TextOption; const spacing: number = 10;
const trimTitle: string = textTrim((this.legendItemRect.width + (spacing * 2)), legendTitle, textStyle);
const textSize: Size = measureText(trimTitle, textStyle);
if (legendTitle) {
textOptions = new TextOption(
this.treemap.element.id + '_LegendTitle',
(this.legendItemRect.x) + (this.legendItemRect.width / 2),
this.legendItemRect.y - (textSize.height / 2) - (spacing / 2),
'middle', trimTitle, '');
const textElement: Element = renderTextElement(textOptions, textStyle, textStyle.color ||
this.treemap.themeStyle.legendTitleColor, this.legendGroup);
textElement.setAttribute('role', 'region');
textElement.setAttribute('aria-label', legendTitle);
}
}
/**
* To rendered the interactive pointer
*
* @param {PointerEvent | TouchEvent} e - Specifies the pointer argument.
* @returns {void}
* @private
*/
public renderInteractivePointer(e: PointerEvent | TouchEvent): void {
const treemap: TreeMap = this.treemap; let target: Element = <Element>e.target;
const interactiveId: string = treemap.element.id + '_Interactive_Legend';
let pointerDrawn: boolean = false;
target = !(e.type.indexOf('touch') > -1) ? target :
document.elementFromPoint((<TouchEvent>e).changedTouches[0].clientX, (<TouchEvent>e).changedTouches[0].clientY);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let targetItem: any; const legend: LegendSettingsModel = <LegendSettingsModel>treemap.legendSettings;
if (target.id.indexOf('_Item_Index') > -1 && legend.visible && this.legendRenderingCollections.length > 0) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let currentData: any; let legendRect: ClientRect;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let data: any[]; let fill: string; let stroke: string; let strokeWidth: number; let legendElement: Element;
targetItem = treemap.layout.renderItems[parseFloat(target.id.split('_Item_Index_')[1])];
const svgRect: ClientRect = treemap.svgObject.getBoundingClientRect();
for (let i: number = 0; i < this.legendCollections.length && !pointerDrawn; i++) {
currentData = this.legendCollections[i as number];
legendElement = document.getElementById(treemap.element.id + '_Legend_Index_' + i);
legendRect = <ClientRect>legendElement.getBoundingClientRect();
const rect: Rect = new Rect(
Math.abs(legendRect.left - svgRect.left), Math.abs(legendRect.top - svgRect.top),
legendRect.width, legendRect.height
);
fill = legendElement.getAttribute('fill');
stroke = legend.shapeBorder.color;
strokeWidth = legend.shapeBorder.width;
if (!isNullOrUndefined(currentData['legendData']) && currentData['legendData'].length > 0) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
data = <any[]>currentData['legendData'];
const valuePath: string = treemap.rangeColorValuePath;
if (targetItem['levelOrderName'].indexOf(this.legendCollections[i as number]['legendName']) > -1) {
this.drawInteractivePointer(legend, fill, stroke, interactiveId, strokeWidth, rect);
pointerDrawn = true;
} else {
for (let j: number = 0; j < data.length; j++) {
if ((treemap.rangeColorValuePath && treemap.leafItemSettings.colorMapping.length > 0)
? data[j as number]['data'][valuePath as string] === targetItem['data'][valuePath as string]
: (data[j as number]['levelOrderName'] === targetItem['levelOrderName'] ||
data[j as number]['levelOrderName'].indexOf(targetItem['levelOrderName']) > -1)) {
this.drawInteractivePointer(legend, fill, stroke, interactiveId, strokeWidth, rect);
pointerDrawn = true;
break;
}
}
}
} else if (this.treemap.leafItemSettings.colorMapping.length === 0 && this.treemap.palette) {
if (targetItem['levelOrderName'].indexOf(currentData['levelOrderName']) > -1 ) {
this.drawInteractivePointer(legend, fill, stroke, interactiveId, strokeWidth, rect);
pointerDrawn = true;
}
}
}
} else {
this.removeInteractivePointer();
}
}
private drawInteractivePointer(
legend: LegendSettingsModel, fill: string, stroke: string, id: string, strokeWidth: number, rect: Rect
): void {
let path: string;
let locX: number; let locY: number;
const height: number = 10; const width: number = 10;
const direction: LegendOrientation = (legend.orientation === 'None') ? (legend.position === 'Top' || legend.position === 'Bottom')
? 'Horizontal' : 'Vertical' : legend.orientation;
if (direction === 'Horizontal') {
if (!legend.invertedPointer) {
locX = rect.x + (rect.width / 2);
locY = rect.y;
path = ' M ' + locX + ' ' + locY + ' L ' + (locX - width) + ' ' + (locY - height) +
' L ' + (locX + width) + ' ' + (locY - height) + ' Z ';
} else {
locX = rect.x + (rect.width / 2);
locY = rect.y + (rect.height);
path = ' M ' + locX + ' ' + locY + ' L ' + (locX - width) + ' ' + (locY + height) +
' L ' + (locX + width) + ' ' + (locY + height) + ' Z ';
}
} else {
if (!legend.invertedPointer) {
locX = rect.x + (rect.width);
locY = rect.y + (rect.height / 2);
path = ' M ' + locX + ' ' + locY + ' L ' + (locX + width) + ' ' + (locY - height) +
' L ' + (locX + width) + ' ' + (locY + height) + ' z ';
} else {
locX = rect.x;
locY = rect.y + (rect.height / 2);
path = ' M ' + locX + ' ' + locY + ' L ' + (locX - width) + ' ' + (locY - height) +
' L ' + (locX - width) + ' ' + (locY + height) + ' z ';
}
}
const pathOptions: PathOption = new PathOption(id, fill, strokeWidth, stroke, 1, '', path);
this.treemap.svgObject.appendChild(this.treemap.renderer.drawPath(pathOptions) as SVGPathElement);
}
private getLegendAlignment(treemap: TreeMap, width: number, height: number, legend: LegendSettingsModel): void {
let x: number; let y: number;
const spacing: number = 10; let totalRect: Rect;
// eslint-disable-next-line prefer-const
totalRect = extend({}, treemap.areaRect, totalRect, true) as Rect;
const areaX: number = totalRect.x;
const areaY: number = totalRect.y;
const areaHeight: number = totalRect.height;
const areaWidth: number = totalRect.width;
const totalWidth: number = treemap.availableSize.width;
const totalHeight: number = treemap.availableSize.height;
const position: string = legend.position === 'Auto' ? (totalWidth > totalHeight) ? 'Right' : 'Bottom' : legend.position;
if (legend.position === 'Float') {
this.translate = legend.location;
} else {
switch (position) {
case 'Top':
case 'Bottom':
totalRect.height = (areaHeight - height);
x = (totalWidth / 2) - (width / 2);
y = (position === 'Top') ? areaY : (areaY + totalRect.height) + spacing;
totalRect.y = (position === 'Top') ? areaY + height + spacing : areaY;
break;
case 'Left':
case 'Right':
totalRect.width = (areaWidth - width);
x = (position === 'Left') ? areaX : areaX + totalRect.width;
y = (totalHeight / 2) - (height / 2);
totalRect.x = (position === 'Left') ? areaX + width : areaX;
break;
}
switch (legend.alignment) {
case 'Near':
if (position === 'Top' || position === 'Bottom') {
x = totalRect.x;
} else {
y = totalRect.y;
}
break;
case 'Far':
if (position === 'Top' || position === 'Bottom') {
x = totalWidth - width;
} else {
y = totalHeight - height;
}
break;
}
this.treemap.totalRect = totalRect;
this.translate = new Location(x, y);
}
}
/**
* @param {PointerEvent} e - Specifies the event.
* @returns {void}
* @private
*/
public mouseUpHandler(e: PointerEvent): void {
this.renderInteractivePointer(e);
clearTimeout(this.clearTimeout);
this.clearTimeout = setTimeout(this.removeInteractivePointer.bind(this), 3000);
}
// eslint-disable-next-line valid-jsdoc
/**
* To remove the interactive pointer
*
* @private
*/
public removeInteractivePointer(): void {
if (document.getElementById(this.treemap.element.id + '_Interactive_Legend')) {
const legendElementId: HTMLElement = document.getElementById(this.treemap.element.id + '_Interactive_Legend');
legendElementId.parentNode.removeChild(legendElementId);
}
}
/**
* To change the next page
*
* @param {PointerEvent} e - Specifies the pointer event argument.
* @returns {void}
* @private
*/
public changeNextPage(e: PointerEvent): void {
this.currentPage = ((<Element>e.target).id.indexOf('_Left_Page_') > -1) ? (this.currentPage - 1) :
(this.currentPage + 1);
if (this.currentPage >= 0 && this.currentPage < this.totalPages.length) {
this.drawLegend();
} else {
this.currentPage = ((<Element>e.target).id.indexOf('_Left_Page_') > -1) ? 0 : this.totalPages.length - 1;
}
}
/**
* Wire events for event handler
*
* @param {Element} element - Specifies the element.
* @returns {void}
* @private
*/
public wireEvents(element: Element): void {
EventHandler.add(element, Browser.touchStartEvent, this.changeNextPage, this);
}
// eslint-disable-next-line valid-jsdoc
/**
* To add the event listener
*
* @private
*/
public addEventListener(): void {
if (this.treemap.isDestroyed) {
return;
}
this.treemap.on(Browser.touchMoveEvent, this.renderInteractivePointer, this);
this.treemap.on(Browser.touchEndEvent, this.mouseUpHandler, this);
}
// eslint-disable-next-line valid-jsdoc
/**
* To remove the event listener
*
* @private
*/
public removeEventListener(): void {
if (this.treemap.isDestroyed) {
return;
}
this.treemap.off(Browser.touchMoveEvent, this.renderInteractivePointer);
this.treemap.off(Browser.touchEndEvent, this.mouseUpHandler);
}
/**
* Get module name.
*
* @returns {string} Returns the legend module name.
*/
protected getModuleName(): string {
return 'treeMapLegend';
}
/**
* To destroy the legend.
*
* @returns {void}
* @private
*/
public destroy(): void {
clearTimeout(this.clearTimeout);
this.clearTimeout = null;
this.legendRenderingCollections = [];
this.legendCollections = [];
this.outOfRangeLegend = null;
this.totalPages = [];
this.translate = null;
this.legendBorderRect = null;
this.legendGroup = null;
this.legendNames = [];
this.defsElement = null;
this.legendLinearGradient = null;
this.legendInteractiveGradient = [];
this.legendItemRect = null;
this.removeEventListener();
this.treemap = null;
}
/**
* Get the gradient color for interactive legend.
*
* @param {ColorMappingModel} colorMap - Specifies the color mapping instance.
* @param {number} legendIndex - Specifies the index of legend.
* @returns {string} - Returns the legend color.
* @private
*/
public legendGradientColor(colorMap: ColorMappingModel, legendIndex: number): string {
let legendFillColor: string;
const xmlns: string = 'http://www.w3.org/2000/svg';
if (!isNullOrUndefined(colorMap.color) && Object.prototype.toString.call(colorMap.color) === '[object Array]') {
const defElement: Element = this.treemap.renderer.createDefs();
const linerGradientEle: Element = document.createElementNS(xmlns, 'linearGradient');
const opacity: number = 1; const position: LegendPosition = this.treemap.legendSettings.position;
const x2: string = position === 'Top' || position === 'Bottom' ? '100' : '0';
const y2: string = position === 'Top' || position === 'Bottom' ? '0' : '100';
linerGradientEle.setAttribute('id', 'linear_' + legendIndex);
linerGradientEle.setAttribute('x1', 0 + '%');
linerGradientEle.setAttribute('y1', 0 + '%');
linerGradientEle.setAttribute('x2', x2 + '%');
linerGradientEle.setAttribute('y2', y2 + '%');
for (let b: number = 0; b < colorMap.color.length; b++) {
const offsetColor: number = 100 / (colorMap.color.length - 1);
const stopEle: Element = document.createElementNS(xmlns, 'stop');
stopEle.setAttribute('offset', b * offsetColor + '%');
stopEle.setAttribute('stop-color', colorMap.color[b as number]);
stopEle.setAttribute('stop-opacity', opacity.toString());
linerGradientEle.appendChild(stopEle);
}
defElement.appendChild(linerGradientEle);
this.legendLinearGradient = linerGradientEle;
const color: string = 'url(' + '#linear_' + legendIndex + ')';
this.defsElement.appendChild(linerGradientEle);
legendFillColor = color;
}
return legendFillColor;
}
}