mdt-charts 1.19.0 → 1.20.0

package/lib/config/config.d.ts

@@ -131,7 +131,9 @@ interface GridLineFlag {
 export interface TwoDimensionalAxis {
     key: DiscreteAxisOptions;
     value: NumberAxisOptions;
+    valueSecondary?: NumberSecondaryAxisOptions;
 }
+export declare type NumberSecondaryAxisOptions = Omit<NumberAxisOptions, 'position'>;
 export interface AxisOptions {
     visibility: boolean;
     position: AxisPosition;

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

@@ -1,11 +1,11 @@
 import { AxisModelOptions, IAxisModel, IScaleModel } from "../../../model/model";
 import { Block } from "../../block/block";
-import { Scales } from "../scale/scale";
+import { ScalesWithSecondary } from "../scale/scale";
 import { Size } from '../../../config/config';
 export declare class Axis {
     static axesClass: string;
-    static render(block: Block, scales: Scales, scaleModel: IScaleModel, axisModel: IAxisModel, blockSize: Size): void;
-    static update(block: Block, scales: Scales, scalesOptions: IScaleModel, axisModel: IAxisModel, blockSize: Size, keyDomainsEquality: boolean): void;
+    static render(block: Block, scales: ScalesWithSecondary, scaleModel: IScaleModel, axisModel: IAxisModel, blockSize: Size): void;
+    static update(block: Block, scales: ScalesWithSecondary, scalesOptions: IScaleModel, axisModel: IAxisModel, blockSize: Size, keyDomainsEquality: boolean): void;
     static raiseKeyAxis(block: Block, axisOptions: AxisModelOptions): void;
     private static findAxis;
     private static renderAxis;

package/lib/engine/features/axis/axis.js

@@ -9,14 +9,20 @@ import { AXIS_VERTICAL_LABEL_PADDING } from '../../../model/margin/twoDim/twoDim
 const MINIMAL_STEP_SIZE_FOR_WRAPPING = 38;
 export class Axis {
     static render(block, scales, scaleModel, axisModel, blockSize) {
+        var _a;
         if (axisModel.value.visibility)
             this.renderAxis(block, scales.value, scaleModel.value, axisModel.value, blockSize);
+        if ((_a = axisModel.valueSecondary) === null || _a === void 0 ? void 0 : _a.visibility)
+            this.renderAxis(block, scales.valueSecondary, scaleModel.valueSecondary, axisModel.valueSecondary, blockSize);
         if (axisModel.key.visibility)
             this.renderAxis(block, scales.key, scaleModel.key, axisModel.key, blockSize);
     }
     static update(block, scales, scalesOptions, axisModel, blockSize, keyDomainsEquality) {
+        var _a;
         if (axisModel.value.visibility)
             this.updateValueAxis(block, scales.value, scalesOptions.value, axisModel.value, blockSize);
+        if ((_a = axisModel.valueSecondary) === null || _a === void 0 ? void 0 : _a.visibility)
+            this.updateValueAxis(block, scales.valueSecondary, scalesOptions.valueSecondary, axisModel.valueSecondary, blockSize);
         if (axisModel.key.visibility)
             this.updateKeyAxis(block, scales.key, scalesOptions.key, axisModel.key, blockSize, keyDomainsEquality);
     }

package/lib/engine/features/scale/scale.js

@@ -14,7 +14,7 @@ export class Scale {
     }
     static getScalesWithSecondary(scaleKey, scaleValue, scaleValueSecondary, bandSettings) {
         const scales = this.getScales(scaleKey, scaleValue, bandSettings);
-        return Object.assign(Object.assign({}, scales), { valueSecondary: this.getScaleValue(scaleValueSecondary) });
+        return Object.assign(Object.assign({}, scales), (scaleValueSecondary && { valueSecondary: this.getScaleValue(scaleValueSecondary) }));
     }
     static getScaleValue(scaleValue) {
         if (scaleValue.type === 'linear')

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

@@ -1,4 +1,4 @@
-import { AxisPosition, ChartOrientation, MdtChartsDataSource, NumberAxisOptions, AxisLabelPosition, MdtChartsTwoDimensionalOptions, DiscreteAxisOptions } from "../../config/config";
+import { AxisPosition, ChartOrientation, MdtChartsDataSource, NumberAxisOptions, AxisLabelPosition, MdtChartsTwoDimensionalOptions, DiscreteAxisOptions, NumberSecondaryAxisOptions } from "../../config/config";
 import { AxisModelOptions, Orient } from "../model";
 import { AxisType } from "../modelBuilder";
 import { AxisLabelCanvas, TooltipSettings } from "../../designer/designerConfig";
@@ -12,7 +12,9 @@ export declare const MINIMAL_HORIZONTAL_STEP_SIZE = 100;
 export declare class AxisModel {
     private static service;
     static getKeyAxis(options: MdtChartsTwoDimensionalOptions, data: MdtChartsDataSource, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel, tooltipSettings: TooltipSettings, getZeroCoordinate?: () => number): AxisModelOptions;
-    static getValueAxis(orient: ChartOrientation, axisConfig: NumberAxisOptions, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel): AxisModelOptions;
+    static getMainValueAxis(orient: ChartOrientation, position: AxisPosition, axisConfig: NumberAxisOptions, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel): AxisModelOptions;
+    static getSecondaryValueAxis(orient: ChartOrientation, mainAxisPosition: AxisPosition, axisConfig: NumberSecondaryAxisOptions, labelConfig: AxisLabelCanvas, canvasModel: CanvasModel): AxisModelOptions;
+    private static getValueAxis;
     static getAxisLength(chartOrientation: ChartOrientation, canvasModel: CanvasModel): number;
     static getAxisOrient(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: AxisPosition): Orient;
     static getAxisTranslateX(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: AxisPosition, canvasModel: CanvasModel): number;

package/lib/model/featuresModel/axisModel.js

@@ -29,16 +29,22 @@ export class AxisModel {
             visibility: axisConfig.visibility
         };
     }
-    static getValueAxis(orient, axisConfig, labelConfig, canvasModel) {
+    static getMainValueAxis(orient, position, axisConfig, labelConfig, canvasModel) {
+        return this.getValueAxis(orient, position, 'value-axis', axisConfig, labelConfig, canvasModel);
+    }
+    static getSecondaryValueAxis(orient, mainAxisPosition, axisConfig, labelConfig, canvasModel) {
+        return this.getValueAxis(orient, mainAxisPosition === "start" ? "end" : "start", 'value-secondary-axis', axisConfig, labelConfig, canvasModel);
+    }
+    static getValueAxis(orient, position, cssClass, axisConfig, labelConfig, canvasModel) {
         var _a, _b;
         return {
             type: 'value',
-            orient: AxisModel.getAxisOrient(AxisType.Value, orient, axisConfig.position),
+            orient: AxisModel.getAxisOrient(AxisType.Value, orient, position),
             translate: {
-                translateX: AxisModel.getAxisTranslateX(AxisType.Value, orient, axisConfig.position, canvasModel),
-                translateY: AxisModel.getAxisTranslateY(AxisType.Value, orient, axisConfig.position, canvasModel)
+                translateX: AxisModel.getAxisTranslateX(AxisType.Value, orient, position, canvasModel),
+                translateY: AxisModel.getAxisTranslateY(AxisType.Value, orient, position, canvasModel)
             },
-            cssClass: 'value-axis',
+            cssClass,
             ticks: axisConfig.ticks,
             labels: {
                 maxSize: labelConfig.maxSize.main,

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

@@ -38,7 +38,7 @@ export class ScaleModel {
                 end: getScaleValueRangePeek(options.orientation, canvasModel)
             },
             type: "linear",
-            formatter: (_a = configReader === null || configReader === void 0 ? void 0 : configReader.getAxisLabelFormatter()) !== null && _a !== void 0 ? _a : null
+            formatter: (_a = configReader === null || configReader === void 0 ? void 0 : configReader.getSecondaryAxisLabelFormatter()) !== null && _a !== void 0 ? _a : null
         };
     }
     getScaleKeyType(charts) {

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

@@ -12,6 +12,8 @@ export declare class TwoDimMarginModel {
     recalcMargin(otherComponents: OtherCommonComponents, modelInstance: ModelInstance): void;
     recalcMarginByVerticalAxisLabel(modelInstance: ModelInstance): void;
     private getMaxLabelSize;
+    private getMaxLabelSizeSecondary;
     private recalcVerticalMarginByAxisLabelHeight;
     private recalcHorizontalMarginByAxisLabelWidth;
+    private recalcMarginBySecondaryAxisLabelSize;
 }

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

@@ -23,6 +23,10 @@ export class TwoDimMarginModel {
             ? !TwoDimensionalModel.getChartsEmbeddedLabelsFlag(this.configReader.options.charts, this.configReader.options.orientation)
             : true;
         this.recalcHorizontalMarginByAxisLabelWidth(labelSize, canvasModel, showingFlag);
+        if (this.configReader.containsSecondaryAxis()) {
+            const secondaryLabelSize = this.getMaxLabelSizeSecondary(modelInstance);
+            this.recalcMarginBySecondaryAxisLabelSize(secondaryLabelSize, canvasModel);
+        }
     }
     recalcMarginByVerticalAxisLabel(modelInstance) {
         if (this.configReader.options.orientation === 'vertical') {
@@ -43,11 +47,23 @@ export class TwoDimMarginModel {
             labelsTexts = modelInstance.dataModel.repository.getValuesByKeyField();
         }
         else {
-            labelsTexts = this.configReader.calculateBiggestValueAndDecremented(modelInstance.dataModel.repository)
+            labelsTexts = this.configReader.getBiggestValueAndDecremented(modelInstance.dataModel.repository)
                 .map(v => this.configReader.getAxisLabelFormatter()(v).toString());
         }
         return AxisModel.getLabelSize(this.designerConfig.canvas.axisLabel.maxSize.main, labelsTexts);
     }
+    getMaxLabelSizeSecondary(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 = this.configReader.getBiggestValueAndDecrementedSecondary(modelInstance.dataModel.repository)
+                .map(v => this.configReader.getSecondaryAxisLabelFormatter()(v).toString());
+        }
+        return AxisModel.getLabelSize(this.designerConfig.canvas.axisLabel.maxSize.main, labelsTexts);
+    }
     recalcVerticalMarginByAxisLabelHeight(labelSize, canvasModel) {
         const keyAxisOrient = AxisModel.getAxisOrient(AxisType.Key, this.configReader.options.orientation, this.configReader.options.axis.key.position);
         const valueAxisOrient = AxisModel.getAxisOrient(AxisType.Value, this.configReader.options.orientation, this.configReader.options.axis.value.position);
@@ -68,4 +84,21 @@ export class TwoDimMarginModel {
             canvasModel.increaseMarginSide(valueAxisOrient, labelSize.width + AXIS_VERTICAL_LABEL_PADDING);
         }
     }
+    recalcMarginBySecondaryAxisLabelSize(labelSize, canvasModel) {
+        const valueAxisOrient = AxisModel.getAxisOrient(AxisType.Value, this.configReader.options.orientation, this.configReader.options.axis.value.position);
+        const secondaryOrientByMain = {
+            bottom: "top",
+            left: "right",
+            right: "left",
+            top: "bottom"
+        };
+        const secondaryOrient = secondaryOrientByMain[valueAxisOrient];
+        const sizeMap = {
+            vertical: labelSize.width + AXIS_VERTICAL_LABEL_PADDING,
+            horizontal: labelSize.height + AXIS_HORIZONTAL_LABEL_PADDING
+        };
+        if (this.configReader.options.axis.valueSecondary.visibility) {
+            canvasModel.increaseMarginSide(secondaryOrient, sizeMap[this.configReader.options.orientation]);
+        }
+    }
 }

package/lib/model/model.d.ts

@@ -101,6 +101,7 @@ export interface RangeModel {
 export interface IAxisModel {
     key: AxisModelOptions;
     value: AxisModelOptions;
+    valueSecondary?: AxisModelOptions;
 }
 export interface AxisModelOptions {
     visibility: boolean;

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

@@ -1,4 +1,4 @@
-import { AxisLabelFormatter, MdtChartsConfig, MdtChartsField, MdtChartsFieldName, MdtChartsTwoDimensionalOptions, TwoDimensionalChartType } from "../../config/config";
+import { AxisLabelFormatter, MdtChartsConfig, MdtChartsField, MdtChartsFieldName, MdtChartsTwoDimensionalOptions, TwoDimensionalChartType, TwoDimensionalValueGroup } from "../../config/config";
 import { DesignerConfig } from "../../designer/designerConfig";
 import { DataRepositoryModel } from "../../model/modelInstance/dataModel/dataRepository";
 interface BaseConfigReader {
@@ -10,13 +10,18 @@ export declare class TwoDimConfigReader implements BaseConfigReader {
     readonly options: MdtChartsTwoDimensionalOptions;
     constructor(config: MdtChartsConfig, designerConfig: DesignerConfig);
     getValueFields(): MdtChartsField[];
-    calculateBiggestValueAndDecremented(repository: DataRepositoryModel): number[];
-    getFieldsBySegments(): MdtChartsFieldName[][];
+    getBiggestValueAndDecremented(repository: DataRepositoryModel): number[];
+    getBiggestValueAndDecrementedSecondary(repository: DataRepositoryModel): number[];
+    getFieldsBySegments(valueGroup: TwoDimensionalValueGroup): MdtChartsFieldName[][];
     getAxisLabelFormatter(): AxisLabelFormatter;
+    getSecondaryAxisLabelFormatter(): AxisLabelFormatter;
     getLegendItemInfo(): {
         text: string;
         chartType: TwoDimensionalChartType;
     }[];
+    containsSecondaryAxis(): boolean;
+    private calculateBiggestValueAndDecremented;
+    private calculateAxisLabelFormatter;
 }
 export declare class PolarConfigReader implements BaseConfigReader {
     private options;

package/lib/model/modelInstance/configReader.js

@@ -18,18 +18,16 @@ 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());
+    getBiggestValueAndDecremented(repository) {
+        return this.calculateBiggestValueAndDecremented(repository, this.options.axis.value.domain, this.getFieldsBySegments("main"));
+    }
+    getBiggestValueAndDecrementedSecondary(repository) {
+        return this.calculateBiggestValueAndDecremented(repository, this.options.axis.valueSecondary.domain, this.getFieldsBySegments("secondary"));
     }
-    getFieldsBySegments() {
+    getFieldsBySegments(valueGroup) {
         const segments = [];
-        const mainCharts = this.options.charts.filter(chart => chart.data.valueGroup !== 'secondary');
-        mainCharts.forEach(chart => {
+        const valueGroupCharts = this.options.charts.filter(chart => { var _a; return ((_a = chart.data.valueGroup) !== null && _a !== void 0 ? _a : "main") === valueGroup; });
+        valueGroupCharts.forEach(chart => {
             if (!chart.isSegmented)
                 segments.push(...chart.data.valueFields.map(vf => [vf.name]));
             else
@@ -38,11 +36,10 @@ export class TwoDimConfigReader {
         return segments;
     }
     getAxisLabelFormatter() {
-        var _a, _b;
-        if ((_a = this.options.axis.value.labels) === null || _a === void 0 ? void 0 : _a.format)
-            return (_b = this.options.axis.value.labels) === null || _b === void 0 ? void 0 : _b.format;
-        const valueFieldFormat = this.options.charts[0].data.valueFields[0].format;
-        return (v) => this.designerConfig.dataFormat.formatters(v, { type: valueFieldFormat });
+        return this.calculateAxisLabelFormatter(this.options.axis.value);
+    }
+    getSecondaryAxisLabelFormatter() {
+        return this.calculateAxisLabelFormatter(this.options.axis.valueSecondary);
     }
     getLegendItemInfo() {
         const info = [];
@@ -54,6 +51,23 @@ export class TwoDimConfigReader {
         });
         return info;
     }
+    containsSecondaryAxis() {
+        return !!this.options.axis.valueSecondary && this.options.charts.some(chart => chart.data.valueGroup === 'secondary');
+    }
+    calculateBiggestValueAndDecremented(repository, domain, fields) {
+        const resolvedDomain = getResolvedDomain(domain, repository.getRawRows());
+        if (resolvedDomain && resolvedDomain.end !== -1) {
+            return [resolvedDomain.end, resolvedDomain.end - 1];
+        }
+        return repository.getBiggestValueAndDecremented(fields);
+    }
+    calculateAxisLabelFormatter(axisValue) {
+        var _a, _b;
+        if ((_a = axisValue.labels) === null || _a === void 0 ? void 0 : _a.format)
+            return (_b = axisValue.labels) === null || _b === void 0 ? void 0 : _b.format;
+        const valueFieldFormat = this.options.charts[0].data.valueFields[0].format;
+        return (v) => this.designerConfig.dataFormat.formatters(v, { type: valueFieldFormat });
+    }
 }
 export class PolarConfigReader {
     constructor(config) {

package/lib/model/notations/twoDimensionalModel.js

@@ -7,6 +7,7 @@ import { getLegendMarkerOptions, parseDashStyles, parseShape } from "./twoDimens
 import { getResolvedTitle } from "../../model/featuresModel/titleModel";
 export class TwoDimensionalModel {
     static getOptions(configReader, designerConfig, modelInstance) {
+        let secondaryScaleValueInfo;
         const options = configReader.options;
         const canvasModel = modelInstance.canvasModel;
         const resolvedTitle = getResolvedTitle(options.title, modelInstance.dataModel.repository.getRawRows());
@@ -14,23 +15,18 @@ 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();
+        if (configReader.containsSecondaryAxis()) {
+            const secondaryScaleMarginRecalcer = new ScaleAxisRecalcer(() => scaleModel.getScaleSecondaryLinear(options, modelInstance.dataModel.repository.getScopedRows(), canvasModel, configReader));
+            secondaryScaleMarginRecalcer.recalculateMargin(canvasModel, options.orientation, options.axis.key);
+            secondaryScaleValueInfo = secondaryScaleMarginRecalcer.getScaleValue();
+        }
         return {
             legend: canvasModel.legendCanvas.getModel(),
             title: resolvedTitle,
             selectable: !!options.selectable,
             orient: options.orientation,
-            scale: {
-                key: scaleModel.getScaleKey(modelInstance.dataModel.getAllowableKeys(), options.orientation, canvasModel, options.charts, this.getChartsByType(options.charts, 'bar')),
-                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)),
-                value: AxisModel.getValueAxis(options.orientation, options.axis.value, designerConfig.canvas.axisLabel, canvasModel)
-            },
+            scale: Object.assign({ key: scaleModel.getScaleKey(modelInstance.dataModel.getAllowableKeys(), options.orientation, canvasModel, options.charts, this.getChartsByType(options.charts, 'bar')), value: scaleValueInfo.scale }, (configReader.containsSecondaryAxis() && { valueSecondary: secondaryScaleValueInfo.scale })),
+            axis: Object.assign({ key: AxisModel.getKeyAxis(options, modelInstance.dataModel.repository.getScopedFullSource(), designerConfig.canvas.axisLabel, canvasModel, designerConfig.elementsOptions.tooltip, () => scaleValueInfo.scaleFn(0)), value: AxisModel.getMainValueAxis(options.orientation, options.axis.value.position, options.axis.value, designerConfig.canvas.axisLabel, canvasModel) }, (configReader.containsSecondaryAxis() && { valueSecondary: AxisModel.getSecondaryValueAxis(options.orientation, options.axis.value.position, options.axis.valueSecondary, designerConfig.canvas.axisLabel, canvasModel) })),
             type: options.type,
             data: Object.assign({}, options.data),
             charts: this.getChartsModel(options.charts, options.orientation, designerConfig, modelInstance.dataModel.repository),

package/package.json

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