mdt-charts 1.26.0 → 1.26.1

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[], isSegmented: boolean, 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, isSegmented: boolean): Promise<any>[];
+    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>[];
     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,15 +18,15 @@ export class Bar {
     static get() {
         return new Bar();
     }
-    render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize, barSettings, barsAmounts, isSegmented, firstBarIndex) {
-        if (isSegmented)
+    render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize, barSettings, barsAmounts, firstBarIndex) {
+        if (chart.isSegmented)
             this.renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, firstBarIndex, barSettings);
         else
             this.renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, firstBarIndex, barSettings);
     }
-    update(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings, isSegmented) {
+    update(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings) {
         let promises;
-        if (isSegmented) {
+        if (chart.isSegmented) {
             promises = this.updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings);
         }
         else {
@@ -54,7 +54,7 @@ export class Bar {
                 .attr('class', this.barItemClass)
                 .style('clip-path', `url(#${block.svg.getClipPathId()})`);
             bars = this.createBarPipeline.execute(bars, chart);
-            const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, field.name, BarHelper.getBarIndex(barsAmounts, chart.index - firstBarIndex) + index, sum(barsAmounts), barSettings);
+            const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, field.name, chart.barViewOptions.barIndexes[index], sum(barsAmounts), barSettings);
             this.fillBarAttrs(bars, barAttrs);
             DomHelper.setCssClasses(bars, Helper.getCssClassesWithElementIndex(chart.cssClasses, index));
             DomHelper.setChartStyle(bars, chart.style, index, 'fill');
@@ -82,7 +82,7 @@ export class Bar {
             .attr('class', this.barItemClass)
             .style('clip-path', `url(#${block.svg.getClipPathId()})`);
         bars = this.createBarPipeline.execute(bars, chart);
-        const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, BarHelper.getBarIndex(barsAmounts, chart.index) - firstBarIndex, sum(barsAmounts), barSettings);
+        const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, chart.barViewOptions.barIndexes[0], sum(barsAmounts), barSettings);
         this.fillBarAttrs(bars, barAttrs);
         this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
         DomHelper.setCssClasses(groups, chart.cssClasses);
@@ -123,7 +123,7 @@ export class Bar {
                 .attr('class', this.barItemClass)
                 .style('clip-path', `url(#${block.svg.getClipPathId()})`);
             newBars = this.createBarPipeline.execute(newBars, chart);
-            const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, valueField.name, BarHelper.getBarIndex(barsAmounts, chart.index) + index - firstBarIndex, sum(barsAmounts), barSettings);
+            const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, valueField.name, chart.barViewOptions.barIndexes[index], sum(barsAmounts), barSettings);
             const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate)
                 .then(() => {
                 bars.style('opacity', null);
@@ -166,7 +166,7 @@ export class Bar {
             .attr('class', this.barItemClass)
             .style('clip-path', `url(#${block.svg.getClipPathId()})`);
         newBars = this.createBarPipeline.execute(newBars, chart);
-        const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, BarHelper.getBarIndex(barsAmounts, chart.index) - firstBarIndex, sum(barsAmounts), barSettings);
+        const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, chart.barViewOptions.barIndexes[0], sum(barsAmounts), barSettings);
         const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate)
             .then(() => {
             this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);

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

@@ -41,13 +41,6 @@ export declare class BarHelper {
     static getGroupedBarAttrs(keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyField: string, valueFieldName: string, barIndex: number, barsAmount: number, barSettings: BarChartSettings): BarAttrsHelper;
     static getStackedBarAttr(keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyField: string, barIndex: number, barsAmount: number, barSettings: BarChartSettings): BarAttrsHelper;
     static getBarsInGroupAmount(charts: TwoDimensionalChartModel[]): number[];
-    /**
-     * Получение индекса бара среди всх графиков и value-филдов. Используется для того, чтобы узнать, какой по счету в группе
-     * этот бар идет (сегментированный всегда один, группированный - количество value-филдов).
-     * @param barsAmounts
-     * @param chartIndex
-     */
-    static getBarIndex(barsAmounts: number[], chartIndex: number): number;
     static setBarAttrsByKey(attrs: BarAttrsHelper, keyAxisOrient: Orient, scaleKey: AxisScale<any>, margin: BlockMargin, keyField: string, barIndex: number, settingsStore: BandLikeChartSettingsStore, isSegmented: boolean): void;
     private static setGroupedBarAttrsByValue;
     static getBandItemValueStretch(scaleValue: AxisScale<any>, valueFieldName: string): (dataRow: MdtChartsDataRow) => number;

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

@@ -63,23 +63,6 @@ export class BarHelper {
         });
         return amounts;
     }
-    /**
-     * Получение индекса бара среди всх графиков и value-филдов. Используется для того, чтобы узнать, какой по счету в группе
-     * этот бар идет (сегментированный всегда один, группированный - количество value-филдов).
-     * @param barsAmounts
-     * @param chartIndex
-     */
-    static getBarIndex(barsAmounts, chartIndex) {
-        if (barsAmounts.length < 2)
-            return 0;
-        let index = 0;
-        barsAmounts.forEach((chartBars, i) => {
-            if (i < chartIndex) {
-                index += chartBars;
-            }
-        });
-        return index;
-    }
     static setBarAttrsByKey(attrs, keyAxisOrient, scaleKey, margin, keyField, barIndex, settingsStore, isSegmented) {
         if (keyAxisOrient === 'top' || keyAxisOrient === 'bottom') {
             attrs.x = d => scaleKey(Helper.getKeyFieldValue(d, keyField, isSegmented)) + margin.left + settingsStore.getBandItemPad(barIndex);

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), chart.isSegmented, 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), charts.findIndex(ch => ch.type === 'bar'));
             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, chart.isSegmented);
+                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);
             }
             else if (chart.type === 'line') {
                 proms = Line.get({ staticSettings: chartSettings.lineLike }).update(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart);

package/lib/model/model.d.ts

@@ -317,6 +317,7 @@ interface TwoDimensionalBarLikeChartModel {
 export interface TwoDimensionalBarLikeChartViewModel {
     hatch: BarLikeChartHatchOptions;
     borderRadius: BarLikeChartBorderRadius;
+    barIndexes: number[];
 }
 interface TwoDimensionalAreaChartModel {
     areaViewOptions: AreaChartViewOptions;

package/lib/model/notations/twoDimensional/styles.d.ts

@@ -4,7 +4,8 @@ import { MdtChartsLineLikeChartShape } from "../../../designer/designerConfig";
 export declare const LINE_CHART_DEFAULT_WIDTH = 2;
 export declare function parseShape(chartOrientation: ChartOrientation, configOptions?: MdtChartsLineLikeChartShape): LineLikeChartShapeOptions;
 export declare function parseDashStyles(configOptions?: MdtChartsLineLikeChartDashedStyles): LineLikeChartDashOptions;
-export declare function getBarViewOptions(chart: MdtChartsTwoDimensionalChart, keyAxisOrient: Orient): TwoDimensionalBarLikeChartViewModel;
+export declare function getBarViewOptions(chart: MdtChartsTwoDimensionalChart, keyAxisOrient: Orient, barIndexes: number[]): TwoDimensionalBarLikeChartViewModel;
+export declare function calculateBarIndexes(allCharts: Pick<MdtChartsTwoDimensionalChart, "isSegmented" | "data" | "type">[], currentChart: Pick<MdtChartsTwoDimensionalChart, "isSegmented" | "data" | "type">, currentChartIndex: number): number[];
 export declare function getSegmentedRadiusValues(segmentsLength: number, segmentIndex: number, keyAxisOrient: Orient, defaultRadius: number): BarBorderRadius;
 export declare function getLegendMarkerOptions(chart: MdtChartsTwoDimensionalChart): ChartLegendModel;
 export declare function getLineViewOptions(chart: MdtChartsTwoDimensionalChart): TwoDimensionalChartLegendLineModel;

package/lib/model/notations/twoDimensional/styles.js

@@ -29,7 +29,7 @@ export function parseDashStyles(configOptions) {
         gapSize: (_c = configOptions === null || configOptions === void 0 ? void 0 : configOptions.gapSize) !== null && _c !== void 0 ? _c : DEFAULT_GAP_SIZE_PX
     };
 }
-export function getBarViewOptions(chart, keyAxisOrient) {
+export function getBarViewOptions(chart, keyAxisOrient, barIndexes) {
     var _a, _b, _c, _d, _e, _f;
     const hatch = { on: (_c = (_b = (_a = chart.barStyles) === null || _a === void 0 ? void 0 : _a.hatch) === null || _b === void 0 ? void 0 : _b.on) !== null && _c !== void 0 ? _c : false };
     const defaultRadius = (_f = (_e = (_d = chart.barStyles) === null || _d === void 0 ? void 0 : _d.borderRadius) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : BAR_CHART_BORDER_RADIUS_DEFAULT;
@@ -39,7 +39,14 @@ export function getBarViewOptions(chart, keyAxisOrient) {
             handle: (valueIndex) => getSegmentedRadiusValues(chart.data.valueFields.length, valueIndex, keyAxisOrient, defaultRadius),
         }
     };
-    return { hatch, borderRadius };
+    return { hatch, borderRadius, barIndexes };
+}
+export function calculateBarIndexes(allCharts, currentChart, currentChartIndex) {
+    const prevBarCharts = allCharts.slice(0, currentChartIndex).filter(ch => ch.type === "bar");
+    const startBarIndex = prevBarCharts.reduce((acc, ch) => acc + (ch.isSegmented ? 1 : ch.data.valueFields.length), 0);
+    if (currentChart.isSegmented)
+        return [startBarIndex];
+    return currentChart.data.valueFields.map((_, index) => startBarIndex + index);
 }
 function getRadiusValues(defaultRadius) {
     return {

package/lib/model/notations/twoDimensionalModel.js

@@ -3,7 +3,7 @@ import { TwoDimensionalChartStyleModel } from "../chartStyleModel/twoDimensional
 import { AxisModel } from "../featuresModel/axisModel";
 import { ScaleAxisRecalcer } from "../featuresModel/scaleModel/scaleAxisRecalcer";
 import { ScaleModel } from "../featuresModel/scaleModel/scaleModel";
-import { getAreaViewOptions, getBarViewOptions, getLegendMarkerOptions, LINE_CHART_DEFAULT_WIDTH, parseDashStyles, parseShape } from "./twoDimensional/styles";
+import { calculateBarIndexes, getAreaViewOptions, getBarViewOptions, getLegendMarkerOptions, LINE_CHART_DEFAULT_WIDTH, parseDashStyles, parseShape } from "./twoDimensional/styles";
 import { calculateValueLabelAlignment, getValueLabelX, getValueLabelY } from "../../model/featuresModel/valueLabelsModel/valueLabelsModel";
 import { TwoDimensionalModelHelper } from "../helpers/twoDimensionalModelHelper";
 import { TitleConfigReader } from "../modelInstance/titleConfigReader";
@@ -102,7 +102,7 @@ export class TwoDimensionalModel {
                     strokeWidth: (_m = (_l = chart.lineStyles) === null || _l === void 0 ? void 0 : _l.width) !== null && _m !== void 0 ? _m : LINE_CHART_DEFAULT_WIDTH,
                     renderForKey: (dataRow, valueFieldName) => dataRow[valueFieldName] !== null && dataRow[valueFieldName] !== undefined
                 },
-                barViewOptions: getBarViewOptions(chart, keyAxisOrient),
+                barViewOptions: getBarViewOptions(chart, keyAxisOrient, calculateBarIndexes(charts, chart, index)),
                 legend: getLegendMarkerOptions(chart),
                 index,
                 valueLabels: {

package/package.json

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