mdt-charts 1.27.1 → 1.27.3

package/lib/engine/twoDimensionalNotation/line/line.js

@@ -1,9 +1,9 @@
-import { select } from 'd3-selection';
+import { select } from "d3-selection";
 import { MarkDot } from "../../features/markDots/markDot";
-import { getStackedData, LineGeneratorFactory, onLineChartInit } from './lineHelper';
-import { DomHelper } from '../../helpers/domHelper';
-import { Helper } from '../../helpers/helper';
-import { Pipeline } from '../../helpers/pipeline/Pipeline';
+import { getStackedData, LineGeneratorFactory, onLineChartInit } from "./lineHelper";
+import { DomHelper } from "../../helpers/domHelper";
+import { Helper } from "../../helpers/helper";
+import { Pipeline } from "../../helpers/pipeline/Pipeline";
 import { LineBuilder } from "../../../engine/twoDimensionalNotation/line/lineBuilder";
 export class Line {
     constructor(options) {
@@ -33,26 +33,35 @@ export class Line {
     }
     updateColors(block, chart) {
         chart.data.valueFields.forEach((_vf, valueIndex) => {
-            const path = block.svg.getChartGroup(chart.index)
+            const path = block.svg
+                .getChartGroup(chart.index)
                 .select(`.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
-            DomHelper.setChartStyle(path, chart.style, valueIndex, 'stroke');
+            DomHelper.setChartStyle(path, chart.style, valueIndex, "stroke");
             MarkDot.updateColors(block, chart, valueIndex);
         });
     }
     renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart) {
-        const generatorFactory = new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, curve: this.options.staticSettings.shape.curve.type, shouldRender: chart.lineLikeViewOptions.renderForKey });
+        const generatorFactory = new LineGeneratorFactory({
+            keyAxisOrient,
+            scales,
+            keyFieldName: keyField.name,
+            margin,
+            curve: this.options.staticSettings.shape.curve.type,
+            shouldRender: chart.lineLikeViewOptions.renderForKey
+        });
         chart.data.valueFields.forEach((valueField, valueIndex) => {
             const lineGenerator = generatorFactory.getLineGenerator(valueField.name);
-            let path = block.svg.getChartGroup(chart.index)
-                .append('path')
-                .attr('d', lineGenerator(data))
-                .attr('class', this.lineChartClass)
-                .style('fill', 'none')
-                .style('clip-path', `url(#${block.svg.getClipPathId()})`)
-                .style('pointer-events', 'none');
+            let path = block.svg
+                .getChartGroup(chart.index)
+                .append("path")
+                .attr("d", lineGenerator(data))
+                .attr("class", this.lineChartClass)
+                .style("fill", "none")
+                .style("clip-path", `url(#${block.svg.getClipPathId()})`)
+                .style("pointer-events", "none");
             path = this.creatingPipeline.execute(path, chart);
             DomHelper.setCssClasses(path, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
-            DomHelper.setChartStyle(path, chart.style, valueIndex, 'stroke');
+            DomHelper.setChartStyle(path, chart.style, valueIndex, "stroke");
             MarkDot.render(block, data, keyAxisOrient, scales, margin, keyField.name, valueIndex, valueField.name, chart);
         });
     }
@@ -70,7 +79,7 @@ export class Line {
             DomHelper.setCssClasses(select(this), Helper.getCssClassesWithElementIndex(chart.cssClasses, i));
         });
         stackedData.forEach((dataset, stackIndex) => {
-            MarkDot.render(block, dataset, keyAxisOrient, scales, margin, keyField.name, stackIndex, '1', chart);
+            MarkDot.render(block, dataset, keyAxisOrient, scales, margin, keyField.name, stackIndex, "1", chart);
         });
     }
     updateGrouped(block, scales, newData, keyField, margin, keyAxisOrient, chart) {
@@ -78,7 +87,8 @@ export class Line {
         const generatorFactory = this.createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
         chart.data.valueFields.forEach((valueField, valueFieldIndex) => {
             const lineGenerator = generatorFactory.getLineGenerator(valueField.name);
-            const lineObject = block.svg.getChartGroup(chart.index)
+            const lineObject = block.svg
+                .getChartGroup(chart.index)
                 .select(`.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueFieldIndex}`);
             const prom = Line.updateGroupedPath(block, lineObject, lineGenerator, newData);
             promises.push(prom);
@@ -96,30 +106,37 @@ export class Line {
         let lines = lineBuilder.getAllLinesWithNewData(stackedData, Line.lineChartClass);
         const prom = lineBuilder.updateSegmentedPath(lines);
         lines.each((dataset, index) => {
-            MarkDot.update(block, dataset, keyAxisOrient, scales, margin, keyField.name, index, '1', chart);
+            MarkDot.update(block, dataset, keyAxisOrient, scales, margin, keyField.name, index, "1", chart);
         });
         return [prom];
     }
     static updateGroupedPath(block, lineObject, lineGenerator, newData) {
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
             if (lineObject.size() === 0) {
-                resolve('');
+                resolve("");
                 return;
             }
             let lineHandler = lineObject;
             if (block.transitionManager.durations.chartUpdate > 0)
-                lineHandler = lineHandler.interrupt()
+                lineHandler = lineHandler
+                    .interrupt()
                     .transition()
                     .duration(block.transitionManager.durations.chartUpdate)
-                    .on('end', () => resolve(''));
-            lineHandler
-                .attr('d', lineGenerator(newData));
+                    .on("end", () => resolve(""));
+            lineHandler.attr("d", lineGenerator(newData));
             if (block.transitionManager.durations.chartUpdate <= 0)
-                resolve('');
+                resolve("");
         });
     }
     createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField) {
-        return new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, shouldRender: chart.lineLikeViewOptions.renderForKey, curve: this.options.staticSettings.shape.curve.type });
+        return new LineGeneratorFactory({
+            keyAxisOrient,
+            scales,
+            keyFieldName: keyField.name,
+            margin,
+            shouldRender: chart.lineLikeViewOptions.renderForKey,
+            curve: this.options.staticSettings.shape.curve.type
+        });
     }
 }
-Line.lineChartClass = 'line';
+Line.lineChartClass = "line";

package/lib/engine/twoDimensionalNotation/line/lineBuilder.js

@@ -7,42 +7,44 @@ export class LineBuilder {
     }
     renderSegmented(stakedData, lineClass) {
         const block = this.options.elementAccessors.getBlock();
-        return block.svg.getChartGroup(this.chart.index)
+        return block.svg
+            .getChartGroup(this.chart.index)
             .selectAll(`.${lineClass}${Helper.getCssClassesLine(this.chart.cssClasses)}`)
             .data(stakedData)
             .enter()
-            .append('path')
-            .attr('d', d => this.lineGenerator(d))
-            .attr('class', lineClass)
-            .style('fill', 'none')
-            .style('clip-path', `url(#${block.svg.getClipPathId()})`)
-            .style('pointer-events', 'none');
+            .append("path")
+            .attr("d", (d) => this.lineGenerator(d))
+            .attr("class", lineClass)
+            .style("fill", "none")
+            .style("clip-path", `url(#${block.svg.getClipPathId()})`)
+            .style("pointer-events", "none");
     }
     setSegmentColor(segments, colorPalette) {
-        segments.style('stroke', (d, i) => colorPalette[i % colorPalette.length]);
+        segments.style("stroke", (d, i) => colorPalette[i % colorPalette.length]);
     }
     updateSegmentedPath(linesObjects) {
         const block = this.options.elementAccessors.getBlock();
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
             if (linesObjects.size() === 0) {
-                resolve('');
+                resolve("");
                 return;
             }
             let linesHandler = linesObjects;
             if (block.transitionManager.durations.chartUpdate > 0)
-                linesHandler = linesHandler.interrupt()
+                linesHandler = linesHandler
+                    .interrupt()
                     .transition()
                     .duration(block.transitionManager.durations.chartUpdate)
-                    .on('end', () => resolve(''));
-            linesHandler
-                .attr('d', d => this.lineGenerator(d));
+                    .on("end", () => resolve(""));
+            linesHandler.attr("d", (d) => this.lineGenerator(d));
             if (block.transitionManager.durations.chartUpdate <= 0)
-                resolve('');
+                resolve("");
         });
     }
     getAllLinesWithNewData(stakedData, lineClass) {
         const block = this.options.elementAccessors.getBlock();
-        return block.svg.getChartGroup(this.chart.index)
+        return block.svg
+            .getChartGroup(this.chart.index)
             .selectAll(`path.${lineClass}${Helper.getCssClassesLine(this.chart.cssClasses)}`)
             .data(stakedData);
     }

package/lib/engine/twoDimensionalNotation/line/lineGenerator.js

@@ -4,10 +4,8 @@ export class LineGenerator {
         this.options = options;
     }
     get(xValue, yValue) {
-        const generator = line()
-            .x(xValue)
-            .y(yValue);
-        this.options.middlewares.forEach(middleware => middleware.handle(generator));
+        const generator = line().x(xValue).y(yValue);
+        this.options.middlewares.forEach((middleware) => middleware.handle(generator));
         return generator;
     }
 }

package/lib/engine/twoDimensionalNotation/line/lineHelper.d.ts

@@ -1,10 +1,10 @@
-import { Line as ILine } from 'd3-shape';
-import { MdtChartsDataRow } from '../../../config/config';
+import { Line as ILine } from "d3-shape";
+import { MdtChartsDataRow } from "../../../config/config";
 import { TwoDimensionalChartModel } from "../../../model/model";
-import { Pipeline } from '../../helpers/pipeline/Pipeline';
-import { BaseType, Selection } from 'd3-selection';
-import { Segment } from '../lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware';
-import { LineLikeGeneratorFactoryOptions } from '../lineLike/generatorFactory/lineLikeGeneratorFactory';
+import { Pipeline } from "../../helpers/pipeline/Pipeline";
+import { BaseType, Selection } from "d3-selection";
+import { Segment } from "../lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware";
+import { LineLikeGeneratorFactoryOptions } from "../lineLike/generatorFactory/lineLikeGeneratorFactory";
 export declare class LineGeneratorFactory {
     private options;
     constructor(options: LineLikeGeneratorFactoryOptions);

package/lib/engine/twoDimensionalNotation/line/lineHelper.js

@@ -1,8 +1,8 @@
-import { stack } from 'd3-shape';
+import { stack } from "d3-shape";
 import { Scale } from "../../features/scale/scale";
-import { LineGenerator } from './lineGenerator';
-import { LineLikeGeneratorCurveMiddleware } from '../lineLike/generatorMiddleware/lineLikeGeneratorCurveMiddleware';
-import { LineLikeGeneratorDefinedMiddleware } from '../lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware';
+import { LineGenerator } from "./lineGenerator";
+import { LineLikeGeneratorCurveMiddleware } from "../lineLike/generatorMiddleware/lineLikeGeneratorCurveMiddleware";
+import { LineLikeGeneratorDefinedMiddleware } from "../lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware";
 export class LineGeneratorFactory {
     constructor(options) {
         this.options = options;
@@ -12,14 +12,18 @@ export class LineGeneratorFactory {
         const generator = new LineGenerator({
             middlewares: [
                 new LineLikeGeneratorCurveMiddleware({ curve: this.options.curve }),
-                new LineLikeGeneratorDefinedMiddleware({ definedFn: shouldRender, valueFieldNameGetter: () => valueFieldName, dataRowGetter: (d) => d })
+                new LineLikeGeneratorDefinedMiddleware({
+                    definedFn: shouldRender,
+                    valueFieldNameGetter: () => valueFieldName,
+                    dataRowGetter: (d) => d
+                })
             ]
         });
-        if (keyAxisOrient === 'bottom' || keyAxisOrient === 'top') {
-            return generator.get(d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.left, d => scales.value(d[valueFieldName]) + margin.top);
+        if (keyAxisOrient === "bottom" || keyAxisOrient === "top") {
+            return generator.get((d) => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.left, (d) => scales.value(d[valueFieldName]) + margin.top);
         }
-        if (keyAxisOrient === 'left' || keyAxisOrient === 'right') {
-            return generator.get(d => scales.value(d[valueFieldName]) + margin.left, d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.top);
+        if (keyAxisOrient === "left" || keyAxisOrient === "right") {
+            return generator.get((d) => scales.value(d[valueFieldName]) + margin.left, (d) => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.top);
         }
     }
     getSegmentedLineGenerator() {
@@ -27,14 +31,18 @@ export class LineGeneratorFactory {
         const generator = new LineGenerator({
             middlewares: [
                 new LineLikeGeneratorCurveMiddleware({ curve: this.options.curve }),
-                new LineLikeGeneratorDefinedMiddleware({ definedFn: shouldRender, valueFieldNameGetter: (d) => d.fieldName, dataRowGetter: (d) => d.data })
+                new LineLikeGeneratorDefinedMiddleware({
+                    definedFn: shouldRender,
+                    valueFieldNameGetter: (d) => d.fieldName,
+                    dataRowGetter: (d) => d.data
+                })
             ]
         });
-        if (keyAxisOrient === 'bottom' || keyAxisOrient === 'top') {
-            return generator.get(d => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.left, d => scales.value(d[1]) + margin.top);
+        if (keyAxisOrient === "bottom" || keyAxisOrient === "top") {
+            return generator.get((d) => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.left, (d) => scales.value(d[1]) + margin.top);
         }
-        if (keyAxisOrient === 'left' || keyAxisOrient === 'right') {
-            return generator.get(d => scales.value(d[1]) + margin.left, d => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.top);
+        if (keyAxisOrient === "left" || keyAxisOrient === "right") {
+            return generator.get((d) => scales.value(d[1]) + margin.left, (d) => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.top);
         }
     }
 }
@@ -48,13 +56,14 @@ export function onLineChartInit(creatingPipeline) {
     creatingPipeline.push(setStrokeWidth);
 }
 function setStrokeWidth(path, chart) {
-    return path.style('stroke-width', chart.lineLikeViewOptions.strokeWidth);
+    return path.style("stroke-width", chart.lineLikeViewOptions.strokeWidth);
 }
 export function applyLineDash(lineSelection, dashSize, gapSize) {
-    return lineSelection.style('stroke-dasharray', `${dashSize} ${gapSize}`);
+    return lineSelection.style("stroke-dasharray", `${dashSize} ${gapSize}`);
 }
 export function getStackedData(data, chart) {
-    let stackedData = stack().keys(chart.data.valueFields.map(field => field.name))(data)
+    let stackedData = stack()
+        .keys(chart.data.valueFields.map((field) => field.name))(data)
         .map((layer, index) => {
         const fieldName = chart.data.valueFields[index].name;
         return layer.map((segment) => {

package/lib/engine/twoDimensionalNotation/lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware.js

@@ -3,7 +3,7 @@ export class LineLikeGeneratorDefinedMiddleware {
         this.options = options;
     }
     handle(generator) {
-        generator.defined(d => this.options.definedFn(this.options.dataRowGetter(d), this.options.valueFieldNameGetter(d)));
+        generator.defined((d) => this.options.definedFn(this.options.dataRowGetter(d), this.options.valueFieldNameGetter(d)));
         return generator;
     }
 }

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -26,10 +26,10 @@ export class TwoDimensionalManager {
         GridLine.render(engine.block, options.additionalElements.gridLine, options.axis, model.blockCanvas.size, model.chartBlock.margin, scales);
         this.dotChart = new CanvasDotChart({
             elementAccessors: {
-                getBlock: () => engine.block,
+                getBlock: () => engine.block
             },
             canvas: {
-                keyAxisOrient: options.axis.key.orient,
+                keyAxisOrient: options.axis.key.orient
             },
             dataOptions: {
                 keyFieldName: options.data.keyField.name
@@ -50,14 +50,13 @@ export class TwoDimensionalManager {
                 hidedRecordsAmount: model.dataSettings.scope.hidedRecordsAmount,
                 chartOrientation: options.orient
             });
-        engine.block.getSvg()
-            .on('click', (e) => {
+        engine.block.getSvg().on("click", (e) => {
             if (e.target === engine.block.getSvg().node())
                 this.clearSelection(engine.block.filterEventManager, model);
         });
         this.canvasValueLabels = new CanvasValueLabels({
             elementAccessors: {
-                getBlock: () => engine.block,
+                getBlock: () => engine.block
             },
             data: {
                 keyFieldName: options.data.keyField.name
@@ -88,8 +87,7 @@ export class TwoDimensionalManager {
         Axis.update(block, scales, options.scale, options.axis, model.blockCanvas.size, keyDomainEquality);
         GridLine.update(block, options.additionalElements.gridLine, options.axis, model.blockCanvas.size, model.chartBlock.margin, scales);
         const promises = this.updateCharts(block, options.charts, scales, data, model.options.data, model.chartBlock.margin, options.axis.key.orient, model.blockCanvas.size, options.chartSettings);
-        Promise.all(promises)
-            .then(() => {
+        Promise.all(promises).then(() => {
             block.filterEventManager.event2DUpdate(options);
             block.filterEventManager.registerEventFor2D(scales.key, model.chartBlock.margin, model.blockCanvas.size, options);
             Tooltip.render(block, model, data, model.otherComponents.tooltipBlock, scales);
@@ -105,12 +103,12 @@ export class TwoDimensionalManager {
         var _a;
         Legend.get().updateColors(block, model.options);
         (_a = this.linearGradientDef) === null || _a === void 0 ? void 0 : _a.updateColors(block.svg.ensureDefsRendered(), model.options.defs.gradients);
-        model.options.charts.forEach(chart => {
-            if (chart.type === 'bar')
+        model.options.charts.forEach((chart) => {
+            if (chart.type === "bar")
                 Bar.get().updateColors(block, chart);
-            else if (chart.type === 'line')
+            else if (chart.type === "line")
                 Line.get({ staticSettings: model.options.chartSettings.lineLike }).updateColors(block, chart);
-            else if (chart.type === 'area')
+            else if (chart.type === "area")
                 Area.get({ staticSettings: model.options.chartSettings.lineLike }).updateColors(block, chart);
         });
     }
@@ -122,14 +120,17 @@ export class TwoDimensionalManager {
         block.svg.renderBarHatchPattern();
         block.svg.renderChartsBlock();
         charts.forEach((chart) => {
-            const chartScales = { key: scales.key, value: chart.data.valueGroup === "secondary" ? scales.valueSecondary : scales.value };
-            if (chart.type === 'bar')
+            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));
-            else if (chart.type === 'line')
+            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')
+            else if (chart.type === "area")
                 Area.get({ staticSettings: chartSettings.lineLike }).render(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart);
-            else if (chart.type === 'dot')
+            else if (chart.type === "dot")
                 this.dotChart.render(chartScales, chart, data[dataOptions.dataSource], margin);
         });
         EmbeddedLabels.raiseGroups(block);
@@ -138,18 +139,21 @@ export class TwoDimensionalManager {
         block.svg.updateChartClipPath(margin, blockSize);
         let promises = [];
         charts.forEach((chart) => {
-            const chartScales = { key: scales.key, value: chart.data.valueGroup === "secondary" ? scales.valueSecondary : scales.value };
+            const chartScales = {
+                key: scales.key,
+                value: chart.data.valueGroup === "secondary" ? scales.valueSecondary : scales.value
+            };
             let proms;
-            if (chart.type === 'bar') {
+            if (chart.type === "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') {
+            else if (chart.type === "line") {
                 proms = Line.get({ staticSettings: chartSettings.lineLike }).update(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart);
             }
-            else if (chart.type === 'area') {
+            else if (chart.type === "area") {
                 proms = Area.get({ staticSettings: chartSettings.lineLike }).update(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, chart, keyAxisOrient);
             }
-            else if (chart.type === 'dot') {
+            else if (chart.type === "dot") {
                 proms = this.dotChart.update(chartScales, data[dataOptions.dataSource], margin);
             }
             promises.push(...proms);

package/lib/engine/valueFormatter.d.ts

@@ -1,4 +1,4 @@
-import { Formatter } from '../designer/designerConfig';
+import { Formatter } from "../designer/designerConfig";
 export declare class ValueFormatter {
     private static format;
     static formatField(fieldFormat: string, value: any): string;

package/lib/main.d.ts

@@ -39,6 +39,7 @@ export declare class Chart implements IChart {
     private data;
     private parentElement;
     private isResizable;
+    private readonly id;
     private engine;
     private resizeHandler;
     /**

package/lib/main.js

@@ -13,12 +13,13 @@ export class Chart {
     constructor(config, designerConfig, data, isResizable = false, filterCallback = null, selectedIds = []) {
         this.resizeHandler = this.resizeListener.bind(this);
         Chart.chartCounter++;
+        this.id = Chart.chartCounter;
         this.config = config;
         this.designerConfig = designerConfig;
         this.data = data;
         this.isResizable = isResizable;
-        this.model = assembleModel(this.config, this.data, this.designerConfig);
-        this.engine = new Engine(Chart.chartCounter, filterCallback, selectedIds);
+        this.model = assembleModel(this.config, this.data, this.designerConfig, this.id);
+        this.engine = new Engine(this.id, filterCallback, selectedIds);
     }
     /**
      * Рендер графика
@@ -43,7 +44,7 @@ export class Chart {
      * @param data Новые данные
      */
     updateData(data) {
-        this.model = assembleModel(this.config, data, this.designerConfig);
+        this.model = assembleModel(this.config, data, this.designerConfig, this.id);
         this.data = data;
         this.engine.updateData(this.model, getPreparedData(this.model, this.data, this.config));
     }
@@ -58,7 +59,7 @@ export class Chart {
             this.config.canvas.size.height = newSize.height;
         if (newSize.width)
             this.config.canvas.size.width = newSize.width;
-        this.model = assembleModel(this.config, this.data, this.designerConfig);
+        this.model = assembleModel(this.config, this.data, this.designerConfig, this.id);
         this.engine.updateFullBlock(this.model, getPreparedData(this.model, this.data, this.config));
     }
     /**
@@ -67,17 +68,17 @@ export class Chart {
      */
     updateColors(newColors) {
         this.designerConfig.chartStyle.baseColors = [...newColors];
-        this.model = assembleModel(this.config, this.data, this.designerConfig);
+        this.model = assembleModel(this.config, this.data, this.designerConfig, this.id);
         this.engine.updateColors(this.model);
     }
     clearSelection() {
         this.engine.clearSelection(this.model);
     }
     registerResizeEvent() {
-        window.addEventListener('resize', this.resizeHandler);
+        window.addEventListener("resize", this.resizeHandler);
     }
     removeResizeEvent() {
-        window.removeEventListener('resize', this.resizeHandler);
+        window.removeEventListener("resize", this.resizeHandler);
     }
     resizeListener() {
         this.updateSize({

package/lib/model/chartStyleModel/chartStyleModel.js

@@ -12,13 +12,15 @@ export class ChartStyleModelService {
         };
     }
     static getColorSet(baseColors, elementsAmount) {
-        return chroma.scale(baseColors)
-            .mode('rgb')
+        return chroma
+            .scale(baseColors)
+            .mode("rgb")
             .domain([0, 0.55, 0.75, 1])
             .colors(elementsAmount <= 1 ? 2 : elementsAmount);
     }
     static checkAndGet(baseColors) {
-        if (baseColors.length === 0 || baseColors.filter(color => color === 'rgba(0, 0, 0, 0)' || !color).length > 0) {
+        if (baseColors.length === 0 ||
+            baseColors.filter((color) => color === "rgba(0, 0, 0, 0)" || !color).length > 0) {
             return this.standardColors;
         }
         return baseColors;

package/lib/model/chartStyleModel/colorRange.js

@@ -22,9 +22,7 @@ export function sortColorRange(colorRange) {
     range.sort((a, b) => {
         if (a.value == null)
             return -1;
-        return a.value < b.value
-            ? -1
-            : (a.value == b.value ? 0 : 1);
+        return a.value < b.value ? -1 : a.value == b.value ? 0 : 1;
     });
     return range;
 }

package/lib/model/chartStyleModel/twoDimensionalChartStyleModel.js

@@ -10,16 +10,16 @@ export class TwoDimensionalChartStyleModel {
     getChartStyle(chart, chartIndex) {
         var _a, _b;
         const fieldsAmounts = this.getChartsValueFieldsAmounts();
-        const opacity = chart.type === 'area' && ((_b = (_a = chart.areaStyles) === null || _a === void 0 ? void 0 : _a.gradient) === null || _b === void 0 ? void 0 : _b.on)
+        const opacity = chart.type === "area" && ((_b = (_a = chart.areaStyles) === null || _a === void 0 ? void 0 : _a.gradient) === null || _b === void 0 ? void 0 : _b.on)
             ? 1
             : this.service.getChartOpacity(this.charts.length, chart.type, fieldsAmounts[chartIndex], chart.isSegmented);
         return {
             elementColors: this.service.getChartColors(chart, this.chartStyleConfig, fieldsAmounts, chartIndex),
-            opacity,
+            opacity
         };
     }
     getChartsValueFieldsAmounts() {
-        return this.charts.map(chart => chart.data.valueFields.length);
+        return this.charts.map((chart) => chart.data.valueFields.length);
     }
 }
 export class TwoDimensionalChartStyleService {
@@ -32,7 +32,9 @@ export class TwoDimensionalChartStyleService {
         return generatedColors;
     }
     getChartOpacity(chartsLength, chartType, chartsValueFieldAmount, isChartSegmented) {
-        if (chartType === 'area' && this.isMoreThanOneValueFieldOnCanvas(chartsLength, chartsValueFieldAmount) && !isChartSegmented)
+        if (chartType === "area" &&
+            this.isMoreThanOneValueFieldOnCanvas(chartsLength, chartsValueFieldAmount) &&
+            !isChartSegmented)
             return 0.5; // combined area with other charts has 0.5 opacity
         return 1;
     }
@@ -42,17 +44,17 @@ export class TwoDimensionalChartStyleService {
         const palette = ChartStyleModelService.getColorSet(baseColors, ModelHelper.getSum(chartsFieldsAmounts));
         const elementsAmount = chartsFieldsAmounts[chartIndex];
         const selectedColors = palette.slice(startIndex, startIndex + elementsAmount);
-        if (chartType !== 'line')
+        if (chartType !== "line")
             return selectedColors;
         this.makeColorsBrighter(selectedColors);
         return selectedColors;
     }
     isMoreThanOneValueFieldOnCanvas(chartsLength, chartsValueFieldAmount) {
-        return (chartsLength > 1 || chartsValueFieldAmount > 1);
+        return chartsLength > 1 || chartsValueFieldAmount > 1;
     }
     makeColorsBrighter(initialColors) {
         for (let i = 0; i < initialColors.length; i++) {
-            initialColors[i] = chroma.mix(initialColors[i], 'white', 0.2).saturate(3).hex();
+            initialColors[i] = chroma.mix(initialColors[i], "white", 0.2).saturate(3).hex();
         }
     }
     getStartIndex(chartIndex, chartsFieldsAmounts) {