mdt-charts 1.26.1 → 1.26.2

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

@@ -24,12 +24,14 @@ export interface ValueLabelAttrs {
 export declare class ChartValueLabels {
     private readonly globalOptions;
     private readonly chart;
-    private static readonly valueLabelClass;
+    static readonly valueLabelClass: string;
     private readonly renderPipeline;
+    private readonly attrsProvider;
     constructor(globalOptions: ValueLabelsOptions, chart: TwoDimensionalChartModel);
     render(scales: Scales, data: MdtChartsDataRow[]): void;
     update(scales: Scales, newData: MdtChartsDataRow[]): Promise<void[]>;
-    static getChartValueLabelsClassName(): string;
+    private renderByGroupIndex;
+    private updateByGroupIndex;
     private getAllValueLabelsOfChart;
     private setAttrs;
     private setClasses;

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

@@ -1,16 +1,18 @@
 import { NamesHelper } from "../../../engine/helpers/namesHelper";
-import { ValueLabelsHelper } from "../../../engine/features/valueLabels/valueLabelsHelper";
+import { ValueLabelsAttrsProvider } 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";
 import { Pipeline } from "../../helpers/pipeline/Pipeline";
+import { getStackedData } from "../../twoDimensionalNotation/line/lineHelper";
 export class ChartValueLabels {
     constructor(globalOptions, chart) {
         this.globalOptions = globalOptions;
         this.chart = chart;
         this.renderPipeline = new Pipeline();
+        this.attrsProvider = new ValueLabelsAttrsProvider();
         this.renderPipeline.push((valueLabels, { style }) => {
             valueLabels
                 .attr('fill', 'currentColor')
@@ -22,50 +24,70 @@ export class ChartValueLabels {
         });
     }
     render(scales, data) {
-        this.chart.data.valueFields.forEach((valueField, vfIndex) => {
-            let valueLabels = this.getAllValueLabelsOfChart(vfIndex)
-                .data(data)
-                .enter()
-                .append('text');
-            valueLabels = this.renderPipeline.execute(valueLabels, { style: this.globalOptions.canvas.style });
-            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);
-        });
+        if (this.chart.isSegmented) {
+            const preparedData = getStackedData(data, this.chart);
+            preparedData.forEach((segment, segmentIndex) => {
+                this.renderByGroupIndex(scales, segmentIndex, segment, segment[0].fieldName, '1', d => d.data);
+            });
+        }
+        else {
+            this.chart.data.valueFields.forEach((valueField, vfIndex) => {
+                this.renderByGroupIndex(scales, vfIndex, data, valueField.name, valueField.name, d => d);
+            });
+        }
     }
     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);
-                let newValueLabels = valueLabels
-                    .enter()
-                    .append('text');
-                newValueLabels = this.renderPipeline.execute(newValueLabels, { style: this.globalOptions.canvas.style });
-                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);
+        if (this.chart.isSegmented) {
+            const preparedData = getStackedData(newData, this.chart);
+            preparedData.forEach((segment, segmentIndex) => {
+                const promise = this.updateByGroupIndex(scales, segmentIndex, segment, segment[0].fieldName, '1', d => d.data);
+                updatePromises.push(promise);
             });
-            updatePromises.push(updateProms);
-        });
+        }
+        else {
+            this.chart.data.valueFields.forEach((valueField, vfIndex) => {
+                const promise = this.updateByGroupIndex(scales, vfIndex, newData, valueField.name, valueField.name, d => d);
+                updatePromises.push(promise);
+            });
+        }
         return Promise.all(updatePromises);
     }
-    static getChartValueLabelsClassName() {
-        return ChartValueLabels.valueLabelClass;
+    renderByGroupIndex(scales, groupIndex, data, valueFieldName, datumField, dataRowAccessor) {
+        let valueLabels = this.getAllValueLabelsOfChart(groupIndex)
+            .data(data)
+            .enter()
+            .append('text');
+        valueLabels = this.renderPipeline.execute(valueLabels, { style: this.globalOptions.canvas.style });
+        const attrs = this.attrsProvider.getAttrs(this.globalOptions, this.chart.valueLabels, scales, datumField, dataRowAccessor);
+        this.setAttrs(valueLabels, attrs, valueFieldName, this.chart.valueLabels.format, dataRowAccessor);
+        this.setClasses(valueLabels, this.chart.cssClasses, groupIndex);
+    }
+    updateByGroupIndex(scales, groupIndex, data, valueFieldName, datumField, dataRowAccessor) {
+        return new Promise((resolve) => {
+            const valueLabels = this.getAllValueLabelsOfChart(groupIndex)
+                .data(data);
+            valueLabels.exit().remove();
+            const attrs = this.attrsProvider.getAttrs(this.globalOptions, this.chart.valueLabels, scales, datumField, dataRowAccessor);
+            let newValueLabels = valueLabels
+                .enter()
+                .append('text');
+            newValueLabels = this.renderPipeline.execute(newValueLabels, { style: this.globalOptions.canvas.style });
+            const mergedValueLabels = newValueLabels.merge(valueLabels);
+            this.setAttrs(newValueLabels, attrs, valueFieldName, this.chart.valueLabels.format, dataRowAccessor);
+            this.setClasses(mergedValueLabels, this.chart.cssClasses, groupIndex);
+            this.setAttrs(valueLabels, attrs, valueFieldName, this.chart.valueLabels.format, dataRowAccessor, true, resolve);
+        });
     }
     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) {
+    setAttrs(valueLabels, attrs, valueFieldName, formatter, dataRowAccessor, animate = false, onEndAnimation) {
         const animationName = 'labels-updating';
         valueLabels
-            .text(d => formatter(d[valueFieldName]))
+            .text(d => formatter(dataRowAccessor(d)[valueFieldName]))
             .attr('dominant-baseline', attrs.dominantBaseline)
             .attr('text-anchor', attrs.textAnchor);
         if (animate) {
@@ -136,7 +158,7 @@ export class CanvasValueLabels {
     getAllValueLabels() {
         const block = this.options.elementAccessors.getBlock().svg.getChartBlock();
         return block
-            .selectAll(`.${ChartValueLabels.getChartValueLabelsClassName()}`);
+            .selectAll(`.${ChartValueLabels.valueLabelClass}`);
     }
     getChartScales(scales, chart) {
         return {

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

@@ -1,6 +1,8 @@
 import { ValueLabelAttrs, ValueLabelsOptions } from "../../../engine/features/valueLabels/valueLabels";
-import { TwoDimChartValueLabelsOptions, ValueField } from "../../../model/model";
+import { TwoDimChartValueLabelsOptions } 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;
+import { Segment } from "../../twoDimensionalNotation/lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware";
+import { MdtChartsDataRow } from "../../../config/config";
+export declare class ValueLabelsAttrsProvider {
+    getAttrs(globalOptions: ValueLabelsOptions, valueLabels: TwoDimChartValueLabelsOptions, scales: Scales, datumField: string, dataRowAccessor: (d: MdtChartsDataRow | Segment) => MdtChartsDataRow): ValueLabelAttrs;
 }

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

@@ -1,6 +1,6 @@
 import { Scale } from "../../../engine/features/scale/scale";
-export class ValueLabelsHelper {
-    static getValueLabelsAttrs(globalOptions, valueLabels, scales, valueField) {
+export class ValueLabelsAttrsProvider {
+    getAttrs(globalOptions, valueLabels, scales, datumField, dataRowAccessor) {
         let attrs = {
             x: null,
             y: null,
@@ -9,12 +9,12 @@ export class ValueLabelsHelper {
         };
         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]));
+            attrs.x = d => valueLabels.handleX(scales.value(d[datumField]));
+            attrs.y = d => valueLabels.handleY(Scale.getScaledValue(scales.key, dataRowAccessor(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]));
+            attrs.x = d => valueLabels.handleX(Scale.getScaledValue(scales.key, dataRowAccessor(d)[globalOptions.data.keyFieldName]));
+            attrs.y = d => valueLabels.handleY(scales.value(d[datumField]));
         }
         return attrs;
     }

package/lib/engine/twoDimensionalNotation/bar/bar.d.ts

@@ -21,8 +21,8 @@ export declare class Bar {
     private createBarPipeline;
     private createSegmentGroupBarsPipeline;
     constructor();
-    render(block: Block, scales: Scales, data: MdtChartsDataRow[], keyField: Field, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size, barSettings: BarChartSettings, barsAmounts: number[], firstBarIndex: number): void;
-    update(block: Block, newData: MdtChartsDataRow[], scales: Scales, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size, barsAmounts: number[], keyField: Field, firstBarIndex: number, barSettings: BarChartSettings): Promise<any>[];
+    render(block: Block, scales: Scales, data: MdtChartsDataRow[], keyField: Field, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size, barSettings: BarChartSettings, barsAmounts: number[]): void;
+    update(block: Block, newData: MdtChartsDataRow[], scales: Scales, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size, barsAmounts: number[], keyField: Field, barSettings: BarChartSettings): Promise<any>[];
     updateColors(block: Block, chart: TwoDimensionalChartModel): void;
     getAllBarsForChart(block: Block, chartCssClasses: string[]): Selection<BaseType, MdtChartsDataRow, BaseType, unknown>;
     private renderGrouped;

package/lib/engine/twoDimensionalNotation/bar/bar.js

@@ -18,19 +18,19 @@ export class Bar {
     static get() {
         return new Bar();
     }
-    render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize, barSettings, barsAmounts, firstBarIndex) {
+    render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize, barSettings, barsAmounts) {
         if (chart.isSegmented)
-            this.renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, firstBarIndex, barSettings);
+            this.renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, barSettings);
         else
-            this.renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, firstBarIndex, barSettings);
+            this.renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, barSettings);
     }
-    update(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings) {
+    update(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, barSettings) {
         let promises;
         if (chart.isSegmented) {
-            promises = this.updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings);
+            promises = this.updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, barsAmounts, keyField, barSettings);
         }
         else {
-            promises = this.updateGrouped(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings);
+            promises = this.updateGrouped(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, barSettings);
         }
         return promises;
     }
@@ -44,7 +44,7 @@ export class Bar {
     getAllBarsForChart(block, chartCssClasses) {
         return block.getSvg().selectAll(`rect.${this.barItemClass}${Helper.getCssClassesLine(chartCssClasses)}`);
     }
-    renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, firstBarIndex, barSettings) {
+    renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, barSettings) {
         chart.data.valueFields.forEach((field, index) => {
             let bars = block.svg.getChartGroup(chart.index)
                 .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}${Helper.getCssClassesLine(Helper.getCssClassesWithElementIndex(chart.cssClasses, index))}`)
@@ -63,7 +63,7 @@ export class Bar {
                 EmbeddedLabels.render(block, bars, barAttrs, EmbeddedLabelsHelper.getLabelField(chart.embeddedLabels, chart.data.valueFields, keyField, index), chart.embeddedLabels, keyAxisOrient, blockSize, margin, index, chart.cssClasses);
         });
     }
-    renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, firstBarIndex, barSettings) {
+    renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, barSettings) {
         const stackedData = getStackedDataWithOwn(data, chart.data.valueFields.map(field => field.name));
         let groups = block.svg.getChartGroup(chart.index)
             .selectAll(`g.${this.barSegmentGroupClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
@@ -95,7 +95,7 @@ export class Bar {
             thisClass.setSegmentColor(select(this).selectAll(Helper.getCssClassesLine(chart.cssClasses)), chart.style.elementColors, i);
         });
     }
-    updateGrouped(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings) {
+    updateGrouped(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, barSettings) {
         const promises = [];
         chart.data.valueFields.forEach((valueField, index) => {
             const indexesOfRemoved = [];
@@ -144,7 +144,7 @@ export class Bar {
         });
         return promises;
     }
-    updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings) {
+    updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, barsAmounts, keyField, barSettings) {
         const stackedData = getStackedDataWithOwn(newData, chart.data.valueFields.map(field => field.name));
         block.svg.getChartGroup(chart.index)
             .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}`)

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -124,7 +124,7 @@ export class TwoDimensionalManager {
         charts.forEach((chart) => {
             const chartScales = { key: scales.key, value: chart.data.valueGroup === "secondary" ? scales.valueSecondary : scales.value };
             if (chart.type === 'bar')
-                Bar.get().render(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart, blockSize, chartSettings.bar, BarHelper.getBarsInGroupAmount(charts), charts.findIndex(ch => ch.type === 'bar'));
+                Bar.get().render(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart, blockSize, chartSettings.bar, BarHelper.getBarsInGroupAmount(charts));
             else if (chart.type === 'line')
                 Line.get({ staticSettings: chartSettings.lineLike }).render(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart);
             else if (chart.type === 'area')
@@ -141,7 +141,7 @@ export class TwoDimensionalManager {
             const chartScales = { key: scales.key, value: chart.data.valueGroup === "secondary" ? scales.valueSecondary : scales.value };
             let proms;
             if (chart.type === 'bar') {
-                proms = Bar.get().update(block, data[dataOptions.dataSource], chartScales, margin, keyAxisOrient, chart, blockSize, BarHelper.getBarsInGroupAmount(charts), dataOptions.keyField, charts.findIndex(ch => ch.type === 'bar'), chartSettings.bar);
+                proms = Bar.get().update(block, data[dataOptions.dataSource], chartScales, margin, keyAxisOrient, chart, blockSize, BarHelper.getBarsInGroupAmount(charts), dataOptions.keyField, chartSettings.bar);
             }
             else if (chart.type === 'line') {
                 proms = Line.get({ staticSettings: chartSettings.lineLike }).update(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdt-charts",
-  "version": "1.26.1",
+  "version": "1.26.2",
   "description": "",
   "main": "lib/main.js",
   "scripts": {