mdt-charts 1.18.2 → 1.18.4

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

@@ -1,15 +1,17 @@
 import { Line as ILine } from 'd3-shape';
 import { MdtChartsDataRow } from '../../../config/config';
-import { Orient, BlockMargin, LineCurveType, TwoDimensionalChartModel } from "../../../model/model";
+import { Orient, BlockMargin, LineCurveType, TwoDimensionalChartModel, LineLikeChartRenderOptions } from "../../../model/model";
 import { Scales } from "../../features/scale/scale";
 import { Pipeline } from '../../helpers/pipeline/Pipeline';
 import { BaseType, Selection } from 'd3-selection';
+import { Segment } from './line';
 interface LineGeneratorFactoryOptions {
     keyAxisOrient: Orient;
     scales: Scales;
     keyFieldName: string;
     margin: BlockMargin;
     curve: LineCurveType;
+    shouldRenderLine: LineLikeChartRenderOptions;
 }
 export declare class LineGeneratorFactory {
     private options;
@@ -19,4 +21,5 @@ export declare class LineGeneratorFactory {
 }
 export declare function onLineChartInit(creatingPipeline: Pipeline<Selection<SVGElement, any, BaseType, any>, TwoDimensionalChartModel>): void;
 export declare function applyLineDash(lineSelection: Selection<SVGElement, any, BaseType, any>, dashSize: number, gapSize: number): Selection<SVGElement, any, BaseType, any>;
+export declare function getStackedData(data: MdtChartsDataRow[], chart: TwoDimensionalChartModel): Segment[][];
 export {};

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

@@ -1,3 +1,4 @@
+import { stack } from 'd3-shape';
 import { Scale } from "../../features/scale/scale";
 import { LineGenerator } from './lineGenerator';
 export class LineGeneratorFactory {
@@ -5,23 +6,23 @@ export class LineGeneratorFactory {
         this.options = options;
     }
     getLineGenerator(valueFieldName) {
-        const { keyAxisOrient, scales, keyFieldName, margin } = this.options;
+        const { keyAxisOrient, scales, keyFieldName, margin, shouldRenderLine } = this.options;
         const generator = new LineGenerator({ curve: this.options.curve });
         if (keyAxisOrient === 'bottom' || keyAxisOrient === 'top') {
-            return generator.get(d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.left, d => scales.value(d[valueFieldName]) + margin.top);
+            return generator.get(d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.left, d => scales.value(d[valueFieldName]) + margin.top).defined(d => shouldRenderLine(d, valueFieldName));
         }
         if (keyAxisOrient === 'left' || keyAxisOrient === 'right') {
-            return generator.get(d => scales.value(d[valueFieldName]) + margin.left, d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.top);
+            return generator.get(d => scales.value(d[valueFieldName]) + margin.left, d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.top).defined(d => shouldRenderLine(d, valueFieldName));
         }
     }
     getSegmentedLineGenerator() {
-        const { keyAxisOrient, scales, keyFieldName, margin } = this.options;
+        const { keyAxisOrient, scales, keyFieldName, margin, shouldRenderLine } = this.options;
         const generator = new LineGenerator({ curve: this.options.curve });
         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);
+            return generator.get(d => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.left, d => scales.value(d[1]) + margin.top).defined(d => shouldRenderLine(d.data, d.fieldName));
         }
         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);
+            return generator.get(d => scales.value(d[1]) + margin.left, d => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.top).defined(d => shouldRenderLine(d.data, d.fieldName));
         }
     }
 }
@@ -36,3 +37,14 @@ export function onLineChartInit(creatingPipeline) {
 export function applyLineDash(lineSelection, 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)
+        .map((layer, index) => {
+        const fieldName = chart.data.valueFields[index].name;
+        return layer.map((segment) => {
+            segment.fieldName = fieldName;
+            return segment;
+        });
+    });
+    return stackedData;
+}

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -16,7 +16,7 @@ import { Line } from "./line/line";
 export class TwoDimensionalManager {
     render(engine, model) {
         const options = model.options;
-        const scales = Scale.getScales(options.scale.key, options.scale.value, options.chartSettings.bar);
+        const scales = Scale.getScalesWithSecondary(options.scale.key, options.scale.value, options.scale.valueSecondary, options.chartSettings.bar);
         engine.block.scales = scales;
         engine.block.svg.render(model.blockCanvas.size);
         Axis.render(engine.block, scales, options.scale, options.axis, model.blockCanvas.size);
@@ -42,12 +42,12 @@ export class TwoDimensionalManager {
     updateData(block, model, data) {
         block.transitionManager.interruptTransitions();
         block.filterEventManager.updateData(data[model.options.data.dataSource]);
-        Title.updateData(model.options.title);
+        Title.updateData(block, model.options.title);
         TipBox.clearEvents(block);
         Tooltip.hide(block);
         const options = model.options;
         ElementHighlighter.remove2DChartsFullHighlighting(block, options.charts);
-        const scales = Scale.getScales(options.scale.key, options.scale.value, options.chartSettings.bar);
+        const scales = Scale.getScalesWithSecondary(options.scale.key, options.scale.value, options.scale.valueSecondary, options.chartSettings.bar);
         const keyDomainEquality = Helper.checkDomainsEquality(block.scales.key.domain(), scales.key.domain());
         block.scales = scales;
         Axis.update(block, scales, options.scale, options.axis, model.blockCanvas.size, keyDomainEquality);
@@ -80,12 +80,13 @@ 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')
-                Bar.get().render(block, scales, 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), chart.isSegmented, charts.findIndex(ch => ch.type === 'bar'));
             else if (chart.type === 'line')
-                Line.get({ staticSettings: chartSettings.lineLike }).render(block, scales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart);
+                Line.get({ staticSettings: chartSettings.lineLike }).render(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart);
             else if (chart.type === 'area')
-                Area.render(block, scales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart, blockSize);
+                Area.render(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart, blockSize);
         });
         EmbeddedLabels.raiseGroups(block);
     }
@@ -93,15 +94,16 @@ 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 };
             let proms;
             if (chart.type === 'bar') {
-                proms = Bar.get().update(block, data[dataOptions.dataSource], scales, 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, chart.isSegmented);
             }
             else if (chart.type === 'line') {
-                proms = Line.get({ staticSettings: chartSettings.lineLike }).update(block, scales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart);
+                proms = Line.get({ staticSettings: chartSettings.lineLike }).update(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart);
             }
             else if (chart.type === 'area') {
-                proms = Area.update(block, scales, data[dataOptions.dataSource], dataOptions.keyField, margin, chart, keyAxisOrient, blockSize);
+                proms = Area.update(block, chartScales, data[dataOptions.dataSource], dataOptions.keyField, margin, chart, keyAxisOrient, blockSize);
             }
             promises.push(...proms);
         });

package/lib/model/EventEmitter.d.ts

@@ -0,0 +1,10 @@
+export declare class EventEmitter<E = Record<string, Record<string, any>>> {
+    private events;
+    subscribe<T extends keyof E>(code: T, listener: (args: E[T]) => void): () => void;
+    unsubscribe<T extends keyof E>(code: T, listener: (args: E[T]) => void): void;
+    emit<T extends keyof E>(code: T, args?: E[T]): void;
+    getSubscribeController(): {
+        subscribe: <T extends keyof E>(code: T, listener: (args: E[T]) => void) => () => void;
+        unsubscribe: <T_1 extends keyof E>(code: T_1, listener: (args: E[T_1]) => void) => void;
+    };
+}

package/lib/model/EventEmitter.js

@@ -0,0 +1,26 @@
+export class EventEmitter {
+    constructor() {
+        this.events = {};
+    }
+    subscribe(code, listener) {
+        if (!this.events[code])
+            this.events[code] = [];
+        this.events[code].push(listener);
+        return () => this.unsubscribe(code, listener);
+    }
+    unsubscribe(code, listener) {
+        var _a;
+        this.events[code] = (_a = this.events[code]) === null || _a === void 0 ? void 0 : _a.filter((cur) => cur != listener);
+    }
+    emit(code, args) {
+        (this.events[code] || []).forEach((callback) => {
+            callback(args);
+        });
+    }
+    getSubscribeController() {
+        return {
+            subscribe: (code, listener) => this.subscribe(code, listener),
+            unsubscribe: (code, listener) => this.unsubscribe(code, listener)
+        };
+    }
+}

package/lib/model/dataManagerModel/dataManagerModel.d.ts

@@ -30,7 +30,6 @@ export declare class DataManagerModel {
     private static getBarChartsInGroupAmount;
     private static getScopedData;
     private static getScopedChartData;
-    private static setDataType;
     private static getTypedData;
     private static getDataLimitByItemSize;
 }

package/lib/model/dataManagerModel/dataManagerModel.js

@@ -8,7 +8,6 @@ import { styledElementValues } from "../modelBuilder";
 export class DataManagerModel {
     static getPreparedData(data, allowableKeys, config) {
         const scopedData = this.getScopedData(data, allowableKeys, config.options.data);
-        this.setDataType(scopedData, config);
         return scopedData;
     }
     static initDataScope(config, data, designerConfig, legendBlock, modelInstance) {
@@ -28,7 +27,6 @@ export class DataManagerModel {
         return data[dataSourceName].map(dataRow => dataRow[keyFieldName]);
     }
     static initDataScopeFor2D(configOptions, modelInstance, data, designerConfig) {
-        // Для interval всегда один элемент, так как там может быть только один столбик
         modelInstance.dataModel.initMaxRecordsAmount(configOptions.data.maxRecordsAmount);
         let itemsLength = 1;
         itemsLength = (configOptions.charts)
@@ -125,17 +123,6 @@ export class DataManagerModel {
     static getScopedChartData(data, allowableKeys, keyFieldName) {
         return data.filter(d => allowableKeys.findIndex(key => key === d[keyFieldName]) !== -1);
     }
-    static setDataType(data, config) {
-        if (config.options.type === 'interval') {
-            const chart = config.options.chart;
-            if (chart.data.valueField1.format === 'date') {
-                data[config.options.data.dataSource] = this.getTypedData(data[config.options.data.dataSource], chart.data.valueField1);
-            }
-            if (chart.data.valueField2.format === 'date') {
-                data[config.options.data.dataSource] = this.getTypedData(data[config.options.data.dataSource], chart.data.valueField2);
-            }
-        }
-    }
     static getTypedData(data, field) {
         if (field.format === 'date')
             data.forEach(d => {

package/lib/model/featuresModel/axisModel.d.ts

@@ -20,5 +20,6 @@ export declare class AxisModel {
     static getKeyAxisLabelPosition(canvasModel: CanvasModel, scopedDataLength: number, axisConfig?: DiscreteAxisOptions): AxisLabelPosition;
     static getLabelSize(labelMaxWidth: number, labelTexts: string[]): LabelSize;
     static getLabelSizeLegacy(labelMaxWidth: number, labelTexts: string[]): LabelSize;
+    static getRoundValue(value: number): number;
     private static getKeyAxisTranslateModel;
 }

package/lib/model/featuresModel/axisModel.js

@@ -92,7 +92,7 @@ export class AxisModel {
     static getLabelSize(labelMaxWidth, labelTexts) {
         const LABEL_ELEMENT_HEIGHT_PX = 17;
         const ONE_UPPER_SYMBOL_WIDTH_PX = 8;
-        const longestLabelLength = Math.max(...labelTexts.map(t => ModelHelper.getStringScore(t)));
+        const longestLabelLength = labelTexts.length ? Math.max(...labelTexts.map(t => ModelHelper.getStringScore(t))) : 0;
         const longestLabelWidth = ONE_UPPER_SYMBOL_WIDTH_PX * longestLabelLength;
         return {
             height: LABEL_ELEMENT_HEIGHT_PX,
@@ -118,7 +118,7 @@ export class AxisModel {
                 biggestScore = ModelHelper.getStringScore(text);
             }
         });
-        textBlock.textContent = maxLabel === '0000' ? maxLabel : maxLabel + 'D';
+        textBlock.textContent = maxLabel === '0000' ? maxLabel : maxLabel;
         document.body.append(textBlock);
         maxWidth = Math.ceil(textBlock.getBoundingClientRect().width);
         labelSize.height = textBlock.getBoundingClientRect().height;
@@ -126,6 +126,17 @@ export class AxisModel {
         textBlock.remove();
         return labelSize;
     }
+    static getRoundValue(value) {
+        const absValue = Math.abs(value);
+        const sign = Math.sign(value);
+        if (absValue < 10)
+            return value;
+        const valueStr = absValue.toString();
+        const firstTwoDigits = Math.floor(absValue / Math.pow(10, valueStr.length - 2));
+        const roundedFirstTwoDigits = firstTwoDigits < 10 ? firstTwoDigits : Math.floor(firstTwoDigits / 5) * 5;
+        const roundedNumber = roundedFirstTwoDigits * Math.pow(10, valueStr.length - 2);
+        return sign * roundedNumber;
+    }
     static getKeyAxisTranslateModel(chartOrientation, axisPosition, canvasModel, getZeroCoordinate) {
         let translateY;
         let translateX;

package/lib/model/featuresModel/scaleModel/scaleDomainService.d.ts

@@ -1,5 +1,6 @@
-import { MdtChartsDataRow, MdtChartsTwoDimensionalChart, MdtChartsTwoDimensionalOptions, NumberDomain } from "../../../config/config";
-export declare function getScaleLinearDomain(configDomain: NumberDomain, dataRows: MdtChartsDataRow[], configOptions: MdtChartsTwoDimensionalOptions): number[];
+import { AxisNumberDomain, MdtChartsDataRow, MdtChartsTwoDimensionalChart, MdtChartsTwoDimensionalOptions, TwoDimensionalValueGroup } from "../../../config/config";
+export declare function getResolvedDomain(domain: AxisNumberDomain, dataRows: MdtChartsDataRow[]): import("../../../config/config").NumberDomain;
+export declare function getScaleLinearDomain(configDomain: AxisNumberDomain, dataRows: MdtChartsDataRow[], configOptions: MdtChartsTwoDimensionalOptions, valueGroup?: TwoDimensionalValueGroup): number[];
 export declare class ScaleDomainCalculator {
     getScaleMinValue(charts: MdtChartsTwoDimensionalChart[], dataRows: MdtChartsDataRow[]): number;
     getScaleMaxValue(charts: MdtChartsTwoDimensionalChart[], dataRows: MdtChartsDataRow[]): number;

package/lib/model/featuresModel/scaleModel/scaleDomainService.js

@@ -1,15 +1,25 @@
-export function getScaleLinearDomain(configDomain, dataRows, configOptions) {
+export function getResolvedDomain(domain, dataRows) {
+    return typeof domain === 'function'
+        ? domain({ data: dataRows })
+        : domain;
+}
+export function getScaleLinearDomain(configDomain, dataRows, configOptions, valueGroup = 'main') {
     const calculator = new ScaleDomainCalculator();
     let domainPeekMin;
     let domainPeekMax;
-    if (configDomain.start === -1)
+    const resolvedConfigDomain = getResolvedDomain(configDomain, dataRows);
+    const charts = configOptions.charts.filter(chart => {
+        var _a;
+        return ((_a = chart.data.valueGroup) !== null && _a !== void 0 ? _a : "main") === valueGroup;
+    });
+    if (resolvedConfigDomain.start === -1)
         domainPeekMin = calculator.getScaleMinValue(configOptions.charts, dataRows);
     else
-        domainPeekMin = configDomain.start;
-    if (configDomain.end === -1)
-        domainPeekMax = calculator.getScaleMaxValue(configOptions.charts, dataRows);
+        domainPeekMin = resolvedConfigDomain.start;
+    if (resolvedConfigDomain.end === -1)
+        domainPeekMax = calculator.getScaleMaxValue(charts, dataRows);
     else
-        domainPeekMax = configDomain.end;
+        domainPeekMax = resolvedConfigDomain.end;
     if (configOptions.axis.key.position === 'start')
         return [domainPeekMin, domainPeekMax];
     return [domainPeekMax, domainPeekMin];

package/lib/model/featuresModel/scaleModel/scaleModel.d.ts

@@ -9,5 +9,6 @@ export declare enum ScaleType {
 export declare class ScaleModel {
     getScaleKey(allowableKeys: string[], orient: ChartOrientation, canvasModel: CanvasModel, charts: MdtChartsTwoDimensionalChart[], barCharts: MdtChartsTwoDimensionalChart[]): ScaleKeyModel;
     getScaleLinear(options: MdtChartsTwoDimensionalOptions, dataRows: MdtChartsDataRow[], canvasModel: CanvasModel, configReader?: TwoDimConfigReader): ScaleValueModel;
+    getScaleSecondaryLinear(options: MdtChartsTwoDimensionalOptions, dataRows: MdtChartsDataRow[], canvasModel: CanvasModel, configReader?: TwoDimConfigReader): ScaleValueModel;
     private getScaleKeyType;
 }

package/lib/model/featuresModel/scaleModel/scaleModel.js

@@ -29,6 +29,18 @@ export class ScaleModel {
             formatter: (_a = configReader === null || configReader === void 0 ? void 0 : configReader.getAxisLabelFormatter()) !== null && _a !== void 0 ? _a : null
         };
     }
+    getScaleSecondaryLinear(options, dataRows, canvasModel, configReader) {
+        var _a;
+        return {
+            domain: getScaleLinearDomain(options.axis.value.domain, dataRows, options, 'secondary'),
+            range: {
+                start: 0,
+                end: getScaleValueRangePeek(options.orientation, canvasModel)
+            },
+            type: "linear",
+            formatter: (_a = configReader === null || configReader === void 0 ? void 0 : configReader.getAxisLabelFormatter()) !== null && _a !== void 0 ? _a : null
+        };
+    }
     getScaleKeyType(charts) {
         if (charts.findIndex((chart) => chart.type === 'bar') === -1)
             return 'point';

package/lib/model/helpers/modelHelper.d.ts

@@ -1,7 +1,7 @@
-import { MdtChartsDataSource, IntervalChart } from "../../config/config";
 export declare class ModelHelper {
+    private static baseFontSize;
+    private static getBaseFontSize;
     static getSum(items: number[]): number;
-    static getMinAndMaxOfIntervalData(data: MdtChartsDataSource, dataSource: string, chart: IntervalChart): [Date, Date];
     static getUniqueValues(values: string[]): string[];
     static getStringScore(word: string): number;
 }

package/lib/model/helpers/modelHelper.js

@@ -1,25 +1,13 @@
+import { DomHelper } from "../../engine/helpers/domHelper";
 export class ModelHelper {
+    static getBaseFontSize() {
+        if (!this.baseFontSize)
+            this.baseFontSize = parseInt(DomHelper.getCssPropertyValue(document.documentElement, '--chart-base-font-size'));
+        return this.baseFontSize;
+    }
     static getSum(items) {
         return items.reduce((acc, item) => acc + item, 0);
     }
-    static getMinAndMaxOfIntervalData(data, dataSource, chart) {
-        let min = data[dataSource][0][chart.data.valueField1.name];
-        let max = data[dataSource][0][chart.data.valueField1.name];
-        const chartData = data[dataSource];
-        const valueField1 = chart.data.valueField1.name;
-        const valueField2 = chart.data.valueField2.name;
-        chartData.forEach(dataRow => {
-            if (dataRow[valueField1] > max)
-                max = dataRow[valueField1];
-            if (dataRow[valueField1] < min)
-                min = dataRow[valueField1];
-            if (dataRow[valueField2] > max)
-                max = dataRow[valueField2];
-            if (dataRow[valueField2] < min)
-                min = dataRow[valueField2];
-        });
-        return [min, max];
-    }
     static getUniqueValues(values) {
         const uniqueValues = values.filter((keyValue, index, self) => self.indexOf(keyValue) === index);
         return uniqueValues;
@@ -27,11 +15,12 @@ export class ModelHelper {
     static getStringScore(word) {
         // lower case letter width ~ 0.8 from upper case width.
         // Number width == lower case letter width
+        const fontSize = this.getBaseFontSize();
         let score = 0;
-        const upperLetterScore = 1;
-        const lowerLetterScore = 0.8;
-        const digitScore = 0.75;
-        const otherSymbolScore = 0.52;
+        const upperLetterScore = fontSize / 13;
+        const lowerLetterScore = fontSize / 15;
+        const digitScore = fontSize / 15;
+        const otherSymbolScore = fontSize / 23;
         const specialSmallSymbols = [",", ".", " "];
         for (let i = 0; i < word.length; i++) {
             if (parseFloat(word[i]).toString() !== word[i] && !specialSmallSymbols.includes(word[i]) && word[i].trim().length > 0) {

package/lib/model/margin/twoDim/twoDimMarginModel.d.ts

@@ -11,7 +11,7 @@ export declare class TwoDimMarginModel {
     constructor(designerConfig: DesignerConfig, configReader: TwoDimConfigReader);
     recalcMargin(otherComponents: OtherCommonComponents, modelInstance: ModelInstance): void;
     recalcMarginByVerticalAxisLabel(modelInstance: ModelInstance): void;
-    private getHorizontalMarginByAxisLabels;
+    private getMaxLabelSize;
     private recalcVerticalMarginByAxisLabelHeight;
     private recalcHorizontalMarginByAxisLabelWidth;
 }

package/lib/model/margin/twoDim/twoDimMarginModel.js

@@ -14,7 +14,7 @@ export class TwoDimMarginModel {
     recalcMargin(otherComponents, modelInstance) {
         const canvasModel = modelInstance.canvasModel;
         this.twoDimLegendModel.recalcMarginWith2DLegend(modelInstance, otherComponents.legendBlock, this.configReader.options.legend);
-        const labelSize = this.getHorizontalMarginByAxisLabels(modelInstance);
+        const labelSize = this.getMaxLabelSize(modelInstance);
         this.recalcVerticalMarginByAxisLabelHeight(labelSize, canvasModel);
         // Если встроенный лейбл показывает ключи, то лейблы оси ключей не показываются
         // При этом все графики должны иметь: embeddedLabels = 'key'
@@ -36,14 +36,14 @@ export class TwoDimMarginModel {
             }
         }
     }
-    getHorizontalMarginByAxisLabels(modelInstance) {
+    getMaxLabelSize(modelInstance) {
         const keyAxisOrient = AxisModel.getAxisOrient(AxisType.Key, this.configReader.options.orientation, this.configReader.options.axis.key.position);
         let labelsTexts;
         if (keyAxisOrient === 'left' || keyAxisOrient === 'right') {
             labelsTexts = modelInstance.dataModel.repository.getValuesByKeyField();
         }
         else {
-            labelsTexts = modelInstance.dataModel.repository.getBiggestValueAndDecremented(this.configReader.getFieldsBySegments())
+            labelsTexts = this.configReader.calculateBiggestValueAndDecremented(modelInstance.dataModel.repository)
                 .map(v => this.configReader.getAxisLabelFormatter()(v).toString());
         }
         return AxisModel.getLabelSize(this.designerConfig.canvas.axisLabel.maxSize.main, labelsTexts);

package/lib/model/model.d.ts

@@ -1,4 +1,4 @@
-import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType, AxisLabelPosition, ShowTickFn } from "../config/config";
+import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType, AxisLabelPosition, ShowTickFn, MdtChartsDataRow, TwoDimensionalValueGroup } from "../config/config";
 import { DataType, DonutOptionsCanvas, Formatter, StaticLegendBlockCanvas, TooltipSettings, Transitions } from "../designer/designerConfig";
 declare type AxisType = "key" | "value";
 export declare type Orient = "top" | "bottom" | "left" | "right";
@@ -80,6 +80,7 @@ export interface Field {
 export interface IScaleModel {
     key: ScaleKeyModel;
     value: ScaleValueModel;
+    valueSecondary?: ScaleValueModel;
 }
 export interface ScaleKeyModel {
     domain: any[];
@@ -209,7 +210,7 @@ export declare type LegendMarkerShape = "default" | "bar" | "line";
 export interface TwoDimensionalChartLegendBarModel extends TwoDimensionalBarLikeChartViewModel {
     width: number;
 }
-export interface TwoDimensionalChartLegendLineModel extends TwoDimensionalLineLikeChartViewModel {
+export interface TwoDimensionalChartLegendLineModel extends Omit<TwoDimensionalLineLikeChartViewModel, 'renderForKey'> {
     width: number;
 }
 interface TwoDimensionalLineLikeChartModel {
@@ -218,7 +219,9 @@ interface TwoDimensionalLineLikeChartModel {
 }
 interface TwoDimensionalLineLikeChartViewModel {
     dashedStyles: LineLikeChartDashOptions;
+    renderForKey: LineLikeChartRenderOptions;
 }
+export declare type LineLikeChartRenderOptions = (dataRow: MdtChartsDataRow, valueFieldName: string) => boolean;
 interface TwoDimensionalBarLikeChartModel {
     barViewOptions: TwoDimensionalBarLikeChartViewModel;
 }
@@ -244,6 +247,7 @@ export interface PolarChartModel extends ChartModel {
 }
 export interface TwoDimensionalChartDataModel {
     valueFields: ValueField[];
+    valueGroup?: TwoDimensionalValueGroup;
 }
 export interface ValueField extends Field {
     title: string;

package/lib/model/modelBuilder.js

@@ -76,7 +76,6 @@ export function assembleModel(config, data, designerConfig) {
             options: null,
             dataSettings: null
         };
-    resetFalsyValues(data);
     const dataRows = modelInstance.dataModel.repository.getRawRows();
     const resolvedTitle = getResolvedTitle(config.options.title, dataRows);
     const otherComponents = OtherComponentsModel.getOtherComponentsModel({
@@ -104,19 +103,7 @@ export function assembleModel(config, data, designerConfig) {
         transitions
     };
 }
-function resetFalsyValues(data) {
-    for (let setName in data) {
-        data[setName].forEach(dataRow => {
-            for (let fieldName in dataRow) {
-                if (dataRow[fieldName] == null) {
-                    dataRow[fieldName] = 0;
-                }
-            }
-        });
-    }
-}
 export function getPreparedData(model, data, config) {
-    resetFalsyValues(data);
     const isModelOrDataEmpty = !model || Object.keys(model).length === 0 || !data || Object.keys(data).length === 0;
     if (isModelOrDataEmpty)
         return null;

package/lib/model/modelInstance/configReader.d.ts

@@ -1,5 +1,6 @@
 import { AxisLabelFormatter, MdtChartsConfig, MdtChartsField, MdtChartsFieldName, MdtChartsTwoDimensionalOptions, TwoDimensionalChartType } from "../../config/config";
 import { DesignerConfig } from "../../designer/designerConfig";
+import { DataRepositoryModel } from "../../model/modelInstance/dataModel/dataRepository";
 interface BaseConfigReader {
     getValueFields(): MdtChartsField[];
 }
@@ -9,6 +10,7 @@ export declare class TwoDimConfigReader implements BaseConfigReader {
     readonly options: MdtChartsTwoDimensionalOptions;
     constructor(config: MdtChartsConfig, designerConfig: DesignerConfig);
     getValueFields(): MdtChartsField[];
+    calculateBiggestValueAndDecremented(repository: DataRepositoryModel): number[];
     getFieldsBySegments(): MdtChartsFieldName[][];
     getAxisLabelFormatter(): AxisLabelFormatter;
     getLegendItemInfo(): {

package/lib/model/modelInstance/configReader.js

@@ -1,3 +1,4 @@
+import { getResolvedDomain } from "../../model/featuresModel/scaleModel/scaleDomainService";
 export function getConfigReader(config, designerConfig) {
     if (config.options.type === "2d")
         return new TwoDimConfigReader(config, designerConfig);
@@ -17,9 +18,18 @@ export class TwoDimConfigReader {
         });
         return fields;
     }
+    calculateBiggestValueAndDecremented(repository) {
+        const domain = this.options.axis.value.domain;
+        const resolvedDomain = getResolvedDomain(domain, repository.getRawRows());
+        if (resolvedDomain && resolvedDomain.end !== -1) {
+            return [resolvedDomain.end, resolvedDomain.end - 1];
+        }
+        return repository.getBiggestValueAndDecremented(this.getFieldsBySegments());
+    }
     getFieldsBySegments() {
         const segments = [];
-        this.options.charts.forEach(chart => {
+        const mainCharts = this.options.charts.filter(chart => chart.data.valueGroup !== 'secondary');
+        mainCharts.forEach(chart => {
             if (!chart.isSegmented)
                 segments.push(...chart.data.valueFields.map(vf => [vf.name]));
             else

package/lib/model/notations/twoDimensionalModel.js

@@ -14,6 +14,9 @@ export class TwoDimensionalModel {
         const scaleMarginRecalcer = new ScaleAxisRecalcer(() => scaleModel.getScaleLinear(options, modelInstance.dataModel.repository.getScopedRows(), canvasModel, configReader));
         scaleMarginRecalcer.recalculateMargin(canvasModel, options.orientation, options.axis.key);
         const scaleValueInfo = scaleMarginRecalcer.getScaleValue();
+        const secondaryScaleMarginRecalcer = new ScaleAxisRecalcer(() => scaleModel.getScaleSecondaryLinear(options, modelInstance.dataModel.repository.getScopedRows(), canvasModel, configReader));
+        secondaryScaleMarginRecalcer.recalculateMargin(canvasModel, options.orientation, options.axis.key);
+        const secondaryScaleValueInfo = secondaryScaleMarginRecalcer.getScaleValue();
         return {
             legend: canvasModel.legendCanvas.getModel(),
             title: resolvedTitle,
@@ -21,7 +24,8 @@ export class TwoDimensionalModel {
             orient: options.orientation,
             scale: {
                 key: scaleModel.getScaleKey(modelInstance.dataModel.getAllowableKeys(), options.orientation, canvasModel, options.charts, this.getChartsByType(options.charts, 'bar')),
-                value: scaleValueInfo.scale
+                value: scaleValueInfo.scale,
+                valueSecondary: secondaryScaleValueInfo.scale,
             },
             axis: {
                 key: AxisModel.getKeyAxis(options, modelInstance.dataModel.repository.getScopedFullSource(), designerConfig.canvas.axisLabel, canvasModel, designerConfig.elementsOptions.tooltip, () => scaleValueInfo.scaleFn(0)),
@@ -85,7 +89,10 @@ export class TwoDimensionalModel {
                         }
                     }
                 },
-                lineViewOptions: { dashedStyles: parseDashStyles((_k = chart.lineStyles) === null || _k === void 0 ? void 0 : _k.dash) },
+                lineViewOptions: {
+                    dashedStyles: parseDashStyles((_k = chart.lineStyles) === null || _k === void 0 ? void 0 : _k.dash),
+                    renderForKey: (dataRow, valueFieldName) => dataRow[valueFieldName] !== null && dataRow[valueFieldName] !== undefined
+                },
                 barViewOptions: { hatch: { on: (_o = (_m = (_l = chart.barStyles) === null || _l === void 0 ? void 0 : _l.hatch) === null || _m === void 0 ? void 0 : _m.on) !== null && _o !== void 0 ? _o : false } },
                 legend: getLegendMarkerOptions(chart),
                 index

package/lib/style/charts-main.css

@@ -1,3 +1,5 @@
+@import './css-vars.css';
+
 .wrapper {
     margin: 0 auto;
     position: relative;
@@ -18,8 +20,8 @@
 .data-label {
     font-family: "Roboto";
     font-style: normal;
-    font-weight: 300;
-    font-size: 12px;
+    font-weight: 400;
+    font-size: var(--chart-base-font-size);
     line-height: 140.62%;
     color: #444444;
     cursor: default;
@@ -85,9 +87,9 @@
 }
 
 .legend-label {
-    font-size: 12px;
+    font-size: var(--chart-base-font-size);
     font-family: "Roboto", sans-serif;
-    font-weight: 300;
+    font-weight: 400;
     color: #444444;
     width: calc(100% - 19px);
     overflow: hidden;
@@ -130,7 +132,7 @@
     z-index: 102;
     max-width: 500px;
     background: rgba(0, 0, 0, 0.82);
-    font-size: 11px;
+    font-size: var(--chart-base-font-size);
 }
 .mdt-charts-tooltip-arrow {
     width: 0;
@@ -169,7 +171,7 @@
     stroke-linecap: round;
 }
 .mdt-charts-tooltip-content .tooltip-head {
-    font-size: 12px;
+    font-size: var(--chart-base-font-size);
     margin-bottom: 10px;
 }
 .mdt-charts-tooltip-content .tooltip-texts {
@@ -250,7 +252,7 @@
     font-family: "Roboto", sans-serif;
     font-style: normal;
     font-weight: 500;
-    font-size: 12px;
+    font-size: var(--chart-base-font-size);
     line-height: 140.62%;
 }