mdt-charts 1.20.0 → 1.20.1

package/lib/config/config.d.ts

@@ -8,6 +8,7 @@ export declare type TwoDimensionalChartType = 'line' | 'bar' | 'area';
 export declare type PolarChartType = 'donut';
 export declare type IntervalChartType = 'gantt';
 export declare type EmbeddedLabelType = 'none' | 'key' | 'value';
+export declare type ValueLabelsCollisionMode = "none" | "hide";
 export declare type MdtChartsDataRow = {
     [field: string]: any;
 };
@@ -53,6 +54,7 @@ export interface MdtChartsTwoDimensionalOptions extends GraphicNotationOptions {
     additionalElements: AdditionalElements;
     charts: MdtChartsTwoDimensionalChart[];
     orientation: ChartOrientation;
+    valueLabels?: TwoDimensionalValueLabels;
 }
 export interface MdtChartsPolarOptions extends GraphicNotationOptions {
     type: 'polar';
@@ -172,6 +174,12 @@ export interface MdtChartsShowAxisLabelRule {
     spaceForOneLabel?: number;
     showTickFn?: ShowTickFn;
 }
+export interface TwoDimensionalValueLabels {
+    collision: ValueLabelsCollision;
+}
+export interface ValueLabelsCollision {
+    mode: ValueLabelsCollisionMode;
+}
 export interface IntervalAxis {
     key: DiscreteAxisOptions;
     value: DateAxisOptions;
@@ -210,6 +218,7 @@ export interface MdtChartsTwoDimensionalChart extends ChartSettings, MdtChartsLi
     data: TwoDimensionalChartData;
     embeddedLabels: EmbeddedLabelType;
     isSegmented: boolean;
+    valueLabels?: TwoDimensionalChartValueLabels;
 }
 export interface PolarChart extends ChartSettings {
     type: PolarChartType;
@@ -224,6 +233,11 @@ export interface TwoDimensionalChartData {
     valueFields: TwoDimValueField[];
     valueGroup?: TwoDimensionalValueGroup;
 }
+export interface TwoDimensionalChartValueLabels {
+    on: boolean;
+    format?: ValueLabelsFormatter;
+}
+export declare type ValueLabelsFormatter = (value: number) => string;
 export declare type TwoDimensionalValueGroup = 'main' | 'secondary';
 interface MarkersOptions {
     show: boolean;

package/lib/engine/block/blockSvg.d.ts

@@ -23,6 +23,6 @@ export declare class BlockSvg {
     renderChartClipPath(margin: BlockMargin, blockSize: Size): void;
     updateChartClipPath(margin: BlockMargin, blockSize: Size): void;
     renderBarHatchPattern(): void;
-    private ensureDefsRendered;
+    ensureDefsRendered(): Selection<SVGDefsElement, unknown, HTMLElement, unknown>;
 }
 export {};

package/lib/engine/block/blockSvg.js

@@ -1,6 +1,6 @@
 import { NamesHelper } from "../helpers/namesHelper";
 import { BlockHelper } from "./blockHelper";
-import { HatchPatternDef } from "./defs";
+import { HatchPatternDef } from "./defs/hatchPattern";
 export class BlockSvg {
     constructor(options) {
         this.hatchPatternDef = new HatchPatternDef();

package/lib/engine/elementHighlighter/elementHighlighter.d.ts

@@ -18,7 +18,6 @@ export declare class ElementHighlighter {
     static toggleDonutHighlightState(segment: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>, margin: BlockMargin, blockSize: Size, donutThickness: number, transitionDuration: number, on: boolean): Promise<any>;
     static removeDonutHighlightingByKeys(arcSegments: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>, keyFieldName: string, keyValues: string[], margin: BlockMargin, blockSize: Size, donutThickness: number): void;
     static setInactiveFor2D(block: Block, keyFieldName: string, charts: TwoDimensionalChartModel[]): void;
-    static toggleMarkDotVisible(markDots: Selection<BaseType, any, BaseType, any>, isHighlight: boolean): void;
     static remove2DChartsFullHighlighting(block: Block, charts: TwoDimensionalChartModel[], transitionDuration?: number): void;
     static removeUnselected2DHighlight(block: Block, keyFieldName: string, charts: TwoDimensionalChartModel[], transitionDuration: number): void;
     static toggle2DElements(elemSelection: Selection<BaseType, any, BaseType, any>, isHighlight: boolean, chart: TwoDimensionalChartModel, transitionDuration: number): void;

package/lib/engine/elementHighlighter/elementHighlighter.js

@@ -1,13 +1,13 @@
 import { select } from 'd3-selection';
 import { easeLinear } from 'd3-ease';
 import { interrupt } from 'd3-transition';
-import { DonutHelper } from '../polarNotation/donut/DonutHelper';
 import { DomHelper, SelectionCondition } from '../helpers/domHelper';
 import { Donut } from '../polarNotation/donut/donut';
 import { MarkDot } from '../features/markDots/markDot';
 import { Helper } from '../helpers/helper';
 import * as chroma from 'chroma-js';
 import { NamesHelper } from '../helpers/namesHelper';
+import { DonutHelper } from '../polarNotation/donut/DonutHelper';
 export class ElementHighlighter {
     static toggleActivityStyle(elementSelection, isActive) {
         elementSelection.classed(this.inactiveElemClass, !isActive);
@@ -86,14 +86,11 @@ export class ElementHighlighter {
             }
         });
     }
-    static toggleMarkDotVisible(markDots, isHighlight) {
-        markDots.classed(MarkDot.hiddenDotClass, !isHighlight);
-    }
     static remove2DChartsFullHighlighting(block, charts, transitionDuration = 0) {
         charts.forEach(chart => {
             const elems = DomHelper.get2DChartElements(block, chart);
-            if (chart.type !== 'bar' && !chart.markersOptions.show)
-                elems.classed(MarkDot.hiddenDotClass, true);
+            if (chart.type !== 'bar')
+                MarkDot.tryMakeMarkDotVisible(elems, chart.markersOptions, false);
             this.toggle2DElements(elems, false, chart, transitionDuration);
             this.toggleActivityStyle(elems, true);
         });
@@ -102,8 +99,8 @@ export class ElementHighlighter {
         charts.forEach(chart => {
             const elems = DomHelper.get2DChartElements(block, chart);
             const selectedElems = DomHelper.getChartElementsByKeys(elems, chart.isSegmented, keyFieldName, block.filterEventManager.getSelectedKeys(), SelectionCondition.Exclude);
-            if (chart.type !== 'bar' && !chart.markersOptions.show)
-                selectedElems.classed(MarkDot.hiddenDotClass, true);
+            if (chart.type !== 'bar')
+                MarkDot.tryMakeMarkDotVisible(selectedElems, chart.markersOptions, false);
             this.toggle2DElements(selectedElems, false, chart, transitionDuration);
             if (block.filterEventManager.getSelectedKeys().length > 0)
                 this.toggleActivityStyle(selectedElems, false);

package/lib/engine/elementHighlighter/selectHighlighter.js

@@ -4,6 +4,7 @@ import { DomHelper, SelectionCondition } from "../helpers/domHelper";
 import { Donut } from "../polarNotation/donut/donut";
 import { DonutHelper } from "../polarNotation/donut/DonutHelper";
 import { ElementHighlighter } from "./elementHighlighter";
+import { MarkDot } from "../../engine/features/markDots/markDot";
 export class SelectHighlighter {
     static click2DHandler(multySelection, appendKey, keyValue, selectedKeys, block, options) {
         options.charts.forEach(chart => {
@@ -11,15 +12,15 @@ export class SelectHighlighter {
             const elements = DomHelper.get2DChartElements(block, chart);
             if (!appendKey) {
                 ElementHighlighter.toggle2DElements(selectedElements, false, chart, block.transitionManager.durations.markerHover);
-                if (chart.type !== 'bar' && !chart.markersOptions.show)
-                    ElementHighlighter.toggleMarkDotVisible(selectedElements, false);
+                if (chart.type !== 'bar')
+                    MarkDot.tryMakeMarkDotVisible(selectedElements, chart.markersOptions, false);
                 if (selectedKeys.length > 0) {
                     ElementHighlighter.toggleActivityStyle(selectedElements, false);
                 }
                 else {
                     ElementHighlighter.toggleActivityStyle(elements, true);
-                    if (chart.type !== 'bar' && !chart.markersOptions.show)
-                        ElementHighlighter.toggleMarkDotVisible(elements, false);
+                    if (chart.type !== 'bar')
+                        MarkDot.tryMakeMarkDotVisible(elements, chart.markersOptions, false);
                 }
                 return;
             }
@@ -31,13 +32,13 @@ export class SelectHighlighter {
             else {
                 ElementHighlighter.toggle2DElements(DomHelper.getChartElementsByKeys(elements, chart.isSegmented, options.data.keyField.name, selectedKeys, SelectionCondition.Exclude), false, chart, block.transitionManager.durations.markerHover);
                 ElementHighlighter.toggleActivityStyle(elements, false);
-                if (chart.type !== 'bar' && !chart.markersOptions.show)
-                    ElementHighlighter.toggleMarkDotVisible(elements, false);
+                if (chart.type !== 'bar')
+                    MarkDot.tryMakeMarkDotVisible(elements, chart.markersOptions, false);
                 ElementHighlighter.toggleActivityStyle(selectedElements, true);
                 ElementHighlighter.toggle2DElements(selectedElements, true, chart, block.transitionManager.durations.markerHover);
             }
-            if (chart.type !== 'bar' && !chart.markersOptions.show)
-                ElementHighlighter.toggleMarkDotVisible(selectedElements, true);
+            if (chart.type !== 'bar')
+                MarkDot.tryMakeMarkDotVisible(selectedElements, chart.markersOptions, true);
         });
     }
     static clickPolarHandler(multySelection, appendKey, selectedSegment, selectedKeys, margin, blockSize, block, options, arcItems, donutSettings) {
@@ -78,8 +79,8 @@ export class SelectHighlighter {
             const elements = DomHelper.get2DChartElements(block, chart);
             ElementHighlighter.toggle2DElements(elements, false, chart, block.transitionManager.durations.markerHover);
             ElementHighlighter.toggleActivityStyle(elements, true);
-            if (chart.type !== 'bar' && !chart.markersOptions.show)
-                ElementHighlighter.toggleMarkDotVisible(elements, false);
+            if (chart.type !== 'bar')
+                MarkDot.tryMakeMarkDotVisible(elements, chart.markersOptions, false);
         });
     }
     static clearPolar(margin, blockSize, block, options, arcItems, donutSettings) {

package/lib/engine/features/legend/legendMarkerCreator.js

@@ -1,5 +1,5 @@
 import { Legend } from "./legend";
-import { HatchPatternDef } from "../../block/defs";
+import { HatchPatternDef } from "../../block/defs/hatchPattern";
 import { applyLineDash } from "../../twoDimensionalNotation/line/lineHelper";
 export class LegendMarkerCreator {
     create(selection, options) {

package/lib/engine/features/markDots/markDot.d.ts

@@ -1,19 +1,27 @@
 import { Selection, BaseType } from 'd3-selection';
 import { MdtChartsDataRow } from '../../../config/config';
-import { BlockMargin, Orient, TwoDimensionalChartModel } from "../../../model/model";
+import { BlockMargin, MarkersOptions, Orient, TwoDimensionalChartModel } from "../../../model/model";
 import { Block } from "../../block/block";
 import { Scales } from "../scale/scale";
 export interface DotAttrs {
     cx: (data: MdtChartsDataRow) => number;
     cy: (data: MdtChartsDataRow) => number;
 }
+interface MarkDotDataItem extends MdtChartsDataRow {
+    $mdtChartsMetadata: {
+        valueFieldName: string;
+    };
+}
 export declare class MarkDot {
     static readonly markerDotClass: string;
     static readonly hiddenDotClass: string;
     static render(block: Block, data: MdtChartsDataRow[], keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyFieldName: string, vfIndex: number, valueFieldName: string, chart: TwoDimensionalChartModel): void;
-    static update(block: Block, newData: MdtChartsDataRow[], keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyField: string, vfIndex: number, valueFieldName: string, chart: TwoDimensionalChartModel): void;
+    static update(block: Block, newData: MdtChartsDataRow[], keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyFieldName: string, vfIndex: number, valueFieldName: string, chart: TwoDimensionalChartModel): void;
     static updateColors(block: Block, chart: TwoDimensionalChartModel, valueFieldIndex: number): void;
-    static getMarkDotForChart(block: Block, chartCssClasses: string[]): Selection<BaseType, MdtChartsDataRow, BaseType, unknown>;
+    static getMarkDotForChart(block: Block, chartCssClasses: string[]): Selection<BaseType, MarkDotDataItem, BaseType, unknown>;
+    static tryMakeMarkDotVisible(elems: Selection<BaseType, MdtChartsDataRow, BaseType, unknown>, markersOptions: MarkersOptions, turnOnIfCan: boolean): void;
+    private static toggleMarkDotVisible;
     private static setClassesAndStyle;
     private static setAttrs;
 }
+export {};

package/lib/engine/features/markDots/markDot.js

@@ -9,30 +9,31 @@ export class MarkDot {
     static render(block, data, keyAxisOrient, scales, margin, keyFieldName, vfIndex, valueFieldName, chart) {
         const dotsWrapper = block.svg.getChartGroup(chart.index)
             .selectAll(`.${this.markerDotClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-index-${vfIndex}`)
-            .data(data)
+            .data(data.map(row => (Object.assign(Object.assign({}, row), { $mdtChartsMetadata: { valueFieldName } }))))
             .enter();
         const attrs = MarkDotHelper.getDotAttrs(keyAxisOrient, scales, margin, keyFieldName, valueFieldName, chart.isSegmented);
         const dots = dotsWrapper.append('circle');
         this.setAttrs(block, dots, attrs, chart.markersOptions.styles);
         this.setClassesAndStyle(dots, chart.cssClasses, vfIndex, chart.style.elementColors);
-        if (!chart.markersOptions.show)
-            dots.classed(this.hiddenDotClass, true);
+        MarkDot.tryMakeMarkDotVisible(dots, chart.markersOptions, false);
     }
-    static update(block, newData, keyAxisOrient, scales, margin, keyField, vfIndex, valueFieldName, chart) {
+    static update(block, newData, keyAxisOrient, scales, margin, keyFieldName, vfIndex, valueFieldName, chart) {
         const dots = block.svg.getChartGroup(chart.index)
             .selectAll(`.${this.markerDotClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${vfIndex}`)
-            .data(newData);
+            .data(newData.map(row => (Object.assign(Object.assign({}, row), { $mdtChartsMetadata: { valueFieldName } }))));
         dots.exit().remove();
-        if (chart.markersOptions.show)
-            dots.classed(this.hiddenDotClass, false);
-        const attrs = MarkDotHelper.getDotAttrs(keyAxisOrient, scales, margin, keyField, valueFieldName, chart.isSegmented);
+        dots.each(function (datum) {
+            if (chart.markersOptions.show({ row: datum, valueFieldName })) {
+                MarkDot.toggleMarkDotVisible(select(this), true);
+            }
+        });
+        const attrs = MarkDotHelper.getDotAttrs(keyAxisOrient, scales, margin, keyFieldName, valueFieldName, chart.isSegmented);
         const newDots = dots
             .enter()
             .append('circle');
         this.setAttrs(block, newDots, attrs, chart.markersOptions.styles);
         this.setClassesAndStyle(newDots, chart.cssClasses, vfIndex, chart.style.elementColors);
-        if (!chart.markersOptions.show)
-            newDots.classed(this.hiddenDotClass, true);
+        MarkDot.tryMakeMarkDotVisible(newDots, chart.markersOptions, false);
         const animationName = 'data-updating';
         dots
             .interrupt(animationName)
@@ -50,6 +51,16 @@ export class MarkDot {
         return block.getSvg()
             .selectAll(`.${MarkDot.markerDotClass}${Helper.getCssClassesLine(chartCssClasses)}`);
     }
+    static tryMakeMarkDotVisible(elems, markersOptions, turnOnIfCan) {
+        elems.each(function (datum) {
+            var _a;
+            if (!markersOptions.show({ row: datum, valueFieldName: (_a = datum.$mdtChartsMetadata) === null || _a === void 0 ? void 0 : _a.valueFieldName }))
+                MarkDot.toggleMarkDotVisible(select(this), turnOnIfCan);
+        });
+    }
+    static toggleMarkDotVisible(markDots, isHighlight) {
+        markDots.classed(MarkDot.hiddenDotClass, !isHighlight);
+    }
     static setClassesAndStyle(dots, cssClasses, vfIndex, elementColors) {
         DomHelper.setCssClasses(dots, Helper.getCssClassesWithElementIndex(cssClasses, vfIndex));
         DomHelper.setChartElementColor(dots, elementColors, vfIndex, 'stroke');

package/lib/engine/features/tolltip/tooltip.js

@@ -10,6 +10,7 @@ import { Helper } from '../../helpers/helper';
 import { TooltipHelper } from './tooltipHelper';
 import { DomHelper } from '../../helpers/domHelper';
 import { NewTooltip } from './newTooltip/newTooltip';
+import { MarkDot } from "../../../engine/features/markDots/markDot";
 export class Tooltip {
     static render(block, model, data, tooltipOptions, scales) {
         TooltipComponentsManager.renderTooltipWrapper(block);
@@ -79,16 +80,16 @@ export class Tooltip {
                         const elements = DomHelper.get2DChartElements(block, chart);
                         if (!block.filterEventManager.isSelected(currentKey)) {
                             const oldElements = DomHelper.getChartElementsByKeys(elements, chart.isSegmented, args.dataOptions.keyField.name, [currentKey]);
-                            if (chart.type !== 'bar' && !chart.markersOptions.show)
-                                ElementHighlighter.toggleMarkDotVisible(oldElements, false);
+                            if (chart.type !== 'bar')
+                                MarkDot.tryMakeMarkDotVisible(oldElements, chart.markersOptions, false);
                             ElementHighlighter.toggle2DElements(oldElements, false, chart, block.transitionManager.durations.markerHover);
                             if (block.filterEventManager.getSelectedKeys().length > 0) {
                                 ElementHighlighter.toggleActivityStyle(oldElements, false);
                             }
                         }
                         const selectedElements = DomHelper.getChartElementsByKeys(elements, chart.isSegmented, args.dataOptions.keyField.name, [keyValue]);
-                        if (chart.type !== 'bar' && !chart.markersOptions.show)
-                            ElementHighlighter.toggleMarkDotVisible(selectedElements, true);
+                        if (chart.type !== 'bar')
+                            MarkDot.tryMakeMarkDotVisible(selectedElements, chart.markersOptions, true);
                         ElementHighlighter.toggleActivityStyle(selectedElements, true);
                         if (block.filterEventManager.getSelectedKeys().length === 0 || block.filterEventManager.isSelected(keyValue)) {
                             ElementHighlighter.toggle2DElements(selectedElements, true, chart, block.transitionManager.durations.markerHover);

package/lib/engine/features/valueLabels/valueLabels.d.ts

@@ -0,0 +1,45 @@
+import { Block } from "../../../engine/block/block";
+import { OptionsModelData, Orient, TwoDimensionalChartModel, TwoDimensionalValueLabels, ValueLabelAnchor, ValueLabelDominantBaseline } from "../../../model/model";
+import { MdtChartsDataRow, MdtChartsDataSource } from "../../../config/config";
+import { Scales, ScalesWithSecondary } from "../../../engine/features/scale/scale";
+export interface ValueLabelsOptions {
+    elementAccessors: {
+        getBlock: () => Block;
+    };
+    data: {
+        keyFieldName: string;
+    };
+    canvas: {
+        keyAxisOrient: Orient;
+        valueLabels: TwoDimensionalValueLabels;
+    };
+}
+export interface ValueLabelAttrs {
+    x: (data: MdtChartsDataRow) => number;
+    y: (data: MdtChartsDataRow) => number;
+    textAnchor: ValueLabelAnchor;
+    dominantBaseline: ValueLabelDominantBaseline;
+}
+export declare class ChartValueLabels {
+    private readonly globalOptions;
+    private readonly chart;
+    private static readonly valueLabelClass;
+    constructor(globalOptions: ValueLabelsOptions, chart: TwoDimensionalChartModel);
+    render(scales: Scales, data: MdtChartsDataRow[]): void;
+    update(scales: Scales, newData: MdtChartsDataRow[]): Promise<void[]>;
+    static getChartValueLabelsClassName(): string;
+    private getAllValueLabelsOfChart;
+    private setAttrs;
+    private setClasses;
+}
+export declare class CanvasValueLabels {
+    private readonly options;
+    private chartsValueLabels;
+    constructor(options: ValueLabelsOptions);
+    render(scales: ScalesWithSecondary, charts: TwoDimensionalChartModel[], data: MdtChartsDataSource, dataOptions: OptionsModelData): void;
+    update(scales: ScalesWithSecondary, charts: TwoDimensionalChartModel[], data: MdtChartsDataSource, dataOptions: OptionsModelData): void;
+    private toggleOldValueLabelsVisibility;
+    private hideValueLabelsCollision;
+    private getAllValueLabels;
+    private getChartScales;
+}

package/lib/engine/features/valueLabels/valueLabels.js

@@ -0,0 +1,139 @@
+import { NamesHelper } from "../../../engine/helpers/namesHelper";
+import { ValueLabelsHelper } from "../../../engine/features/valueLabels/valueLabelsHelper";
+import { Helper } from "../../../engine/helpers/helper";
+import { select } from "d3-selection";
+import { DomHelper } from "../../../engine/helpers/domHelper";
+import { CLASSES } from "../../../model/modelBuilder";
+import { ValueLabelsCollision } from "../../../engine/features/valueLabelsCollision/valueLabelsCollision";
+export class ChartValueLabels {
+    constructor(globalOptions, chart) {
+        this.globalOptions = globalOptions;
+        this.chart = chart;
+    }
+    render(scales, data) {
+        this.chart.data.valueFields.forEach((valueField, vfIndex) => {
+            const valueLabels = this.getAllValueLabelsOfChart(vfIndex)
+                .data(data)
+                .enter()
+                .append('text');
+            const attrs = ValueLabelsHelper.getValueLabelsAttrs(this.globalOptions, this.chart.valueLabels, scales, valueField);
+            this.setAttrs(valueLabels, attrs, valueField.name, this.chart.valueLabels.format);
+            this.setClasses(valueLabels, this.chart.cssClasses, vfIndex);
+        });
+    }
+    update(scales, newData) {
+        const updatePromises = [];
+        this.chart.data.valueFields.forEach((valueField, vfIndex) => {
+            const updateProms = new Promise((resolve) => {
+                const valueLabels = this.getAllValueLabelsOfChart(vfIndex)
+                    .data(newData);
+                valueLabels.exit().remove();
+                const attrs = ValueLabelsHelper.getValueLabelsAttrs(this.globalOptions, this.chart.valueLabels, scales, valueField);
+                const newValueLabels = valueLabels
+                    .enter()
+                    .append('text');
+                const mergedValueLabels = newValueLabels.merge(valueLabels);
+                this.setAttrs(newValueLabels, attrs, valueField.name, this.chart.valueLabels.format);
+                this.setClasses(mergedValueLabels, this.chart.cssClasses, vfIndex);
+                this.setAttrs(valueLabels, attrs, valueField.name, this.chart.valueLabels.format, true, resolve);
+            });
+            updatePromises.push(updateProms);
+        });
+        return Promise.all(updatePromises);
+    }
+    static getChartValueLabelsClassName() {
+        return ChartValueLabels.valueLabelClass;
+    }
+    getAllValueLabelsOfChart(vfIndex) {
+        const block = this.globalOptions.elementAccessors.getBlock().svg.getChartBlock();
+        return block
+            .selectAll(`.${ChartValueLabels.valueLabelClass}.${CLASSES.dataLabel}${Helper.getCssClassesLine(this.chart.cssClasses)}.chart-element-${vfIndex}`);
+    }
+    setAttrs(valueLabels, attrs, valueFieldName, formatter, animate = false, onEndAnimation) {
+        const animationName = 'labels-updating';
+        valueLabels
+            .text(d => formatter(d[valueFieldName]))
+            .attr('dominant-baseline', attrs.dominantBaseline)
+            .attr('text-anchor', attrs.textAnchor);
+        if (animate) {
+            const transition = valueLabels
+                .interrupt(animationName)
+                .transition(animationName)
+                .duration(this.globalOptions.elementAccessors.getBlock().transitionManager.durations.chartUpdate)
+                .attr('x', d => attrs.x(d))
+                .attr('y', d => attrs.y(d));
+            if (onEndAnimation)
+                transition.on('end', onEndAnimation);
+        }
+        else {
+            valueLabels
+                .attr('x', d => attrs.x(d))
+                .attr('y', d => attrs.y(d));
+        }
+    }
+    setClasses(textLabels, cssClasses, vfIndex) {
+        textLabels.classed(ChartValueLabels.valueLabelClass, true);
+        textLabels.classed(CLASSES.dataLabel, true);
+        DomHelper.setCssClasses(textLabels, Helper.getCssClassesWithElementIndex(cssClasses, vfIndex));
+    }
+}
+ChartValueLabels.valueLabelClass = NamesHelper.getClassName("value-label");
+export class CanvasValueLabels {
+    constructor(options) {
+        this.options = options;
+        this.chartsValueLabels = [];
+    }
+    render(scales, charts, data, dataOptions) {
+        const chartsWithLabels = charts.filter(chart => { var _a; return (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.show; });
+        if (chartsWithLabels.length === 0)
+            return;
+        chartsWithLabels.forEach(chart => {
+            const chartScales = this.getChartScales(scales, chart);
+            const chartValueLabels = new ChartValueLabels(this.options, chart);
+            this.chartsValueLabels.push(chartValueLabels);
+            chartValueLabels.render(chartScales, data[dataOptions.dataSource]);
+        });
+        if (this.options.canvas.valueLabels.collision.mode === 'hide') {
+            this.hideValueLabelsCollision();
+        }
+    }
+    update(scales, charts, data, dataOptions) {
+        const chartsWithLabels = charts.filter(chart => { var _a; return (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.show; });
+        if (chartsWithLabels.length === 0)
+            return;
+        if (this.options.canvas.valueLabels.collision.mode === 'hide')
+            this.toggleOldValueLabelsVisibility();
+        const chartsUpdatePromises = chartsWithLabels.map((chart, index) => {
+            const chartScales = this.getChartScales(scales, chart);
+            return this.chartsValueLabels[index].update(chartScales, data[dataOptions.dataSource]);
+        });
+        if (this.options.canvas.valueLabels.collision.mode === 'hide') {
+            Promise.all(chartsUpdatePromises).then(() => {
+                this.hideValueLabelsCollision();
+            });
+        }
+    }
+    toggleOldValueLabelsVisibility() {
+        const oldValueLabels = this.getAllValueLabels();
+        oldValueLabels.each(function () {
+            if (this.style.display === 'none')
+                select(this).style('display', 'block');
+        });
+    }
+    hideValueLabelsCollision() {
+        const newValueLabels = this.getAllValueLabels();
+        const valueLabelElementsRectInfo = ValueLabelsCollision.getValueLabelElementsRectInfo(newValueLabels);
+        ValueLabelsCollision.toggleValueLabelElementsVisibility(valueLabelElementsRectInfo);
+    }
+    getAllValueLabels() {
+        const block = this.options.elementAccessors.getBlock().svg.getChartBlock();
+        return block
+            .selectAll(`.${ChartValueLabels.getChartValueLabelsClassName()}`);
+    }
+    getChartScales(scales, chart) {
+        return {
+            key: scales.key,
+            value: chart.data.valueGroup === "secondary" ? scales.valueSecondary : scales.value
+        };
+    }
+}

package/lib/engine/features/valueLabels/valueLabelsHelper.d.ts

@@ -0,0 +1,6 @@
+import { ValueLabelAttrs, ValueLabelsOptions } from "../../../engine/features/valueLabels/valueLabels";
+import { TwoDimChartValueLabelsOptions, ValueField } from "../../../model/model";
+import { Scales } from "../../../engine/features/scale/scale";
+export declare class ValueLabelsHelper {
+    static getValueLabelsAttrs(globalOptions: ValueLabelsOptions, valueLabels: TwoDimChartValueLabelsOptions, scales: Scales, valueField: ValueField): ValueLabelAttrs;
+}

package/lib/engine/features/valueLabels/valueLabelsHelper.js

@@ -0,0 +1,21 @@
+import { Scale } from "../../../engine/features/scale/scale";
+export class ValueLabelsHelper {
+    static getValueLabelsAttrs(globalOptions, valueLabels, scales, valueField) {
+        let attrs = {
+            x: null,
+            y: null,
+            dominantBaseline: valueLabels.dominantBaseline,
+            textAnchor: valueLabels.textAnchor
+        };
+        const orient = globalOptions.canvas.keyAxisOrient;
+        if (orient === 'left' || orient === 'right') {
+            attrs.x = d => valueLabels.handleX(scales.value(d[valueField.name]));
+            attrs.y = d => valueLabels.handleY(Scale.getScaledValue(scales.key, d[globalOptions.data.keyFieldName]));
+        }
+        else if (orient === 'bottom' || orient === 'top') {
+            attrs.x = d => valueLabels.handleX(Scale.getScaledValue(scales.key, d[globalOptions.data.keyFieldName]));
+            attrs.y = d => valueLabels.handleY(scales.value(d[valueField.name]));
+        }
+        return attrs;
+    }
+}

package/lib/engine/features/valueLabelsCollision/valueLabelsCollision.d.ts

@@ -0,0 +1,23 @@
+import { Selection } from "d3-selection";
+export declare type ValueLabelOnCanvasIndex = number;
+export interface BoundingRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface ValueLabelElementRectInfo {
+    index: ValueLabelOnCanvasIndex;
+    boundingClientRect: BoundingRect;
+}
+export interface ValueLabelElement extends ValueLabelElementRectInfo {
+    svgElement: SVGTextElement;
+}
+export interface LabelVisibility {
+    index: ValueLabelOnCanvasIndex;
+    isVisible: boolean;
+}
+export declare class ValueLabelsCollision {
+    static getValueLabelElementsRectInfo(valueLabels: Selection<SVGTextElement, unknown, SVGGElement, unknown>): ValueLabelElement[];
+    static toggleValueLabelElementsVisibility(elements: ValueLabelElement[]): void;
+}

package/lib/engine/features/valueLabelsCollision/valueLabelsCollision.js

@@ -0,0 +1,24 @@
+import { select } from "d3-selection";
+import { ValueLabelsCollisionHelper } from "../../../engine/features/valueLabelsCollision/valueLabelsCollisionHelper";
+export class ValueLabelsCollision {
+    static getValueLabelElementsRectInfo(valueLabels) {
+        let ValueLabelElementsReactInfo = [];
+        valueLabels.each(function (_, index) {
+            const { x, y, height, width } = this.getBoundingClientRect();
+            ValueLabelElementsReactInfo.push({
+                index,
+                svgElement: this,
+                boundingClientRect: { x, y, width, height }
+            });
+        });
+        return ValueLabelElementsReactInfo;
+    }
+    static toggleValueLabelElementsVisibility(elements) {
+        const labelsVisibility = ValueLabelsCollisionHelper.calculateValueLabelsVisibility(elements);
+        labelsVisibility.forEach(label => {
+            const labelInfo = elements.find(element => element.index === label.index);
+            if (labelInfo && !label.isVisible)
+                select(labelInfo.svgElement).style('display', 'none');
+        });
+    }
+}

package/lib/engine/features/valueLabelsCollision/valueLabelsCollisionHelper.d.ts

@@ -0,0 +1,5 @@
+import { LabelVisibility, ValueLabelElementRectInfo } from "../../../engine/features/valueLabelsCollision/valueLabelsCollision";
+export declare class ValueLabelsCollisionHelper {
+    static calculateValueLabelsVisibility(elements: ValueLabelElementRectInfo[]): Map<number, LabelVisibility>;
+    private static isOverlapping;
+}

package/lib/engine/features/valueLabelsCollision/valueLabelsCollisionHelper.js

@@ -0,0 +1,47 @@
+export class ValueLabelsCollisionHelper {
+    static calculateValueLabelsVisibility(elements) {
+        const sortedLabels = elements.sort((label1, label2) => label1.boundingClientRect.x - label2.boundingClientRect.x);
+        const activeLabels = [];
+        const labelsVisibility = new Map();
+        elements.forEach(label => {
+            labelsVisibility.set(label.index, { index: label.index, isVisible: true });
+        });
+        sortedLabels.forEach(currentLabel => {
+            for (let i = activeLabels.length - 1; i >= 0; i--) {
+                const activeLabel = activeLabels[i];
+                if (activeLabel.boundingClientRect.x + activeLabel.boundingClientRect.width < currentLabel.boundingClientRect.x) {
+                    activeLabels.splice(i, 1);
+                }
+            }
+            for (const activeLabel of activeLabels) {
+                if (this.isOverlapping(currentLabel.boundingClientRect, activeLabel.boundingClientRect)) {
+                    if (currentLabel.boundingClientRect.x > activeLabel.boundingClientRect.x) {
+                        labelsVisibility.get(currentLabel.index).isVisible = false;
+                        break;
+                    }
+                    else if (currentLabel.boundingClientRect.x === activeLabel.boundingClientRect.x) {
+                        if (currentLabel.boundingClientRect.y > activeLabel.boundingClientRect.y) {
+                            labelsVisibility.get(currentLabel.index).isVisible = false;
+                            break;
+                        }
+                        else
+                            labelsVisibility.get(activeLabel.index).isVisible = false;
+                    }
+                    else
+                        labelsVisibility.get(activeLabel.index).isVisible = false;
+                }
+            }
+            if (labelsVisibility.get(currentLabel.index).isVisible) {
+                activeLabels.push(currentLabel);
+            }
+        });
+        return labelsVisibility;
+    }
+    static isOverlapping(rect1, rect2) {
+        return !(rect1.x + rect1.width < rect2.x ||
+            rect1.x > rect2.x + rect2.width ||
+            rect1.y + rect1.height < rect2.y ||
+            rect1.y > rect2.y + rect2.height);
+    }
+    ;
+}