mdt-charts 1.27.1 → 1.27.2

package/lib/model/modelInstance/configReader.js

@@ -13,7 +13,7 @@ export class TwoDimConfigReader {
     }
     getValueFields() {
         const fields = [];
-        this.options.charts.forEach(chart => {
+        this.options.charts.forEach((chart) => {
             fields.push(...chart.data.valueFields);
         });
         return fields;
@@ -26,12 +26,12 @@ export class TwoDimConfigReader {
     }
     getFieldsBySegments(valueGroup) {
         const segments = [];
-        const valueGroupCharts = this.options.charts.filter(chart => { var _a; return ((_a = chart.data.valueGroup) !== null && _a !== void 0 ? _a : "main") === valueGroup; });
-        valueGroupCharts.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]));
+                segments.push(...chart.data.valueFields.map((vf) => [vf.name]));
             else
-                segments.push(...[chart.data.valueFields.map(vf => vf.name)]);
+                segments.push(...[chart.data.valueFields.map((vf) => vf.name)]);
         });
         return segments;
     }
@@ -43,8 +43,8 @@ export class TwoDimConfigReader {
     }
     getLegendItemInfo() {
         const info = [];
-        this.options.charts.forEach(c => {
-            c.data.valueFields.forEach(vf => {
+        this.options.charts.forEach((c) => {
+            c.data.valueFields.forEach((vf) => {
                 var _a;
                 info.push({ text: (_a = vf.title) !== null && _a !== void 0 ? _a : vf.name, chartType: c.type });
             });
@@ -52,7 +52,8 @@ export class TwoDimConfigReader {
         return info;
     }
     containsSecondaryAxis() {
-        return !!this.options.axis.valueSecondary && this.options.charts.some(chart => chart.data.valueGroup === 'secondary');
+        return (!!this.options.axis.valueSecondary &&
+            this.options.charts.some((chart) => chart.data.valueGroup === "secondary"));
     }
     getValueLabelFormatterForChart(chartIndex) {
         var _a, _b, _c, _d;
@@ -76,10 +77,10 @@ export class TwoDimConfigReader {
         return (v) => this.designerConfig.dataFormat.formatters(v, { type: valueFieldFormat });
     }
     areValueLabelsOn() {
-        return this.options.charts.some(chart => { var _a; return (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.on; });
+        return this.options.charts.some((chart) => { var _a; return (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.on; });
     }
     areValueLabelsNeedIncreaseMargin() {
-        return !this.options.charts.every(chart => { var _a, _b; return ((_b = (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.position) === null || _b === void 0 ? void 0 : _b.mode) === "center"; });
+        return !this.options.charts.every((chart) => { var _a, _b; return ((_b = (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.position) === null || _b === void 0 ? void 0 : _b.mode) === "center"; });
     }
     getValueLabelsStyleModel() {
         var _a, _b, _c, _d, _e, _f, _g, _h;

package/lib/model/modelInstance/dataModel/dataRepository.js

@@ -5,22 +5,22 @@ export class DataRepositoryModel {
         this.valueFields = valueFields;
     }
     getValuesByKeyField() {
-        return this.getRawRows().map(dataRow => dataRow[this.keyField.name]);
+        return this.getRawRows().map((dataRow) => dataRow[this.keyField.name]);
     }
     getBiggestValueAndDecremented(segmentedFields) {
         const values = [];
-        this.getRawRows().forEach(row => {
+        this.getRawRows().forEach((row) => {
             if (!segmentedFields) {
-                this.valueFields.forEach(vf => values.push(row[vf.name]));
+                this.valueFields.forEach((vf) => values.push(row[vf.name]));
                 return;
             }
-            segmentedFields.forEach(fields => {
+            segmentedFields.forEach((fields) => {
                 const valuesBySegment = fields.reduce((acc, f) => acc + row[f], 0);
                 values.push(valuesBySegment);
             });
         });
         const biggest = Math.max(...values);
-        const biggestDecremented = Math.abs(biggest) > 1 ? (biggest - 1) : (biggest - 0.1);
+        const biggestDecremented = Math.abs(biggest) > 1 ? biggest - 1 : biggest - 0.1;
         return [biggest, biggestDecremented];
     }
     initRawFullSource(rawSource) {

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

@@ -1,11 +1,13 @@
 import { MdtChartsConfig, MdtChartsDataSource } from "../../config/config";
 import { DesignerConfig } from "../../designer/designerConfig";
 import { CanvasModel } from "./canvasModel/canvasModel";
+import { ChartBlockVersion } from "./chartBlockVersion/chartBlockVersion";
 import { DataModelInstance } from "./dataModel/dataModel";
 export declare class ModelInstance {
-    static create(config: MdtChartsConfig, data: MdtChartsDataSource, designerConfig: DesignerConfig): ModelInstance;
+    static create(config: MdtChartsConfig, data: MdtChartsDataSource, designerConfig: DesignerConfig, chartBlockVersion: number): ModelInstance;
     private static initInitialParams;
     canvasModel: CanvasModel;
     dataModel: DataModelInstance;
-    constructor();
+    version: ChartBlockVersion;
+    constructor(chartVersionNumber: number);
 }

package/lib/model/modelInstance/modelInstance.js

@@ -1,13 +1,15 @@
 import { CanvasModel } from "./canvasModel/canvasModel";
+import { ChartBlockVersion } from "./chartBlockVersion/chartBlockVersion";
 import { getConfigReader } from "./configReader";
 import { DataModelInstance } from "./dataModel/dataModel";
 export class ModelInstance {
-    constructor() {
+    constructor(chartVersionNumber) {
         this.canvasModel = new CanvasModel();
         this.dataModel = new DataModelInstance();
+        this.version = new ChartBlockVersion(chartVersionNumber);
     }
-    static create(config, data, designerConfig) {
-        const modelInstance = new ModelInstance();
+    static create(config, data, designerConfig, chartBlockVersion) {
+        const modelInstance = new ModelInstance(chartBlockVersion);
         this.initInitialParams(modelInstance, config, data, designerConfig);
         return modelInstance;
     }

package/lib/model/modelInstance/titleConfigReader.js

@@ -6,28 +6,28 @@ export class TitleConfigReader {
         this.defaultCssUnitReader = defaultCssUnitReader;
     }
     static create(config, modelInstance) {
-        return new TitleConfigReader(config, () => modelInstance.dataModel.repository.getRawRows(), () => ModelHelper.getFontSizeCssValue('--chart-title-font-size', 16));
+        return new TitleConfigReader(config, () => modelInstance.dataModel.repository.getRawRows(), () => ModelHelper.getFontSizeCssValue("--chart-title-font-size", 16));
     }
     getTextContent() {
         return this.getResolvedTitle();
     }
     getFontSize() {
         var _a;
-        return typeof this.config === 'object'
+        return typeof this.config === "object"
             ? (_a = this.config.fontSize) !== null && _a !== void 0 ? _a : this.defaultCssUnitReader() : this.defaultCssUnitReader();
     }
     getResolvedTitle() {
         switch (typeof this.config) {
-            case 'string':
+            case "string":
                 return this.config;
             case "function":
                 return this.config({ data: this.dataGetter() });
             case "object":
-                return typeof this.config.text === 'function'
+                return typeof this.config.text === "function"
                     ? this.config.text({ data: this.dataGetter() })
                     : this.config.text;
             default:
-                return '';
+                return "";
         }
     }
 }

package/lib/model/notations/polar/donut/donutModel.js

@@ -17,7 +17,7 @@ export class DonutModel {
             unit: this.thicknessService.getUnit(settingsFromConfig),
             max: this.thicknessService.valueToNumber(settingsFromConfig.max),
             min: this.thicknessService.valueToNumber(settingsFromConfig.min),
-            value: this.thicknessService.valueToNumber(settingsFromConfig.value),
+            value: this.thicknessService.valueToNumber(settingsFromConfig.value)
         };
     }
     getAggregatorOptions(settingsFromConfig, chartOptions, rawDataRows) {

package/lib/model/notations/polar/polarModel.js

@@ -10,14 +10,14 @@ export class PolarModel {
             selectable: !!options.selectable,
             title: {
                 textContent: titleConfig.getTextContent(),
-                fontSize: titleConfig.getFontSize(),
+                fontSize: titleConfig.getFontSize()
             },
             data: Object.assign({}, options.data),
             charts: this.getChartsModel(options.chart, modelInstance.dataModel.repository.getScopedRows().length, designerConfig.chartStyle),
             legend: modelInstance.canvasModel.legendCanvas.getModel(),
             tooltip: options.tooltip,
             chartCanvas: this.getDonutSettings(designerConfig.canvas.chartOptions.donut, options.chart, modelInstance.dataModel.repository.getRawRows()),
-            defs: { gradients: [] },
+            defs: { gradients: [] }
         };
     }
     //TODO: type for returned value
@@ -26,10 +26,10 @@ export class PolarModel {
         const avgLegendWidth = 100;
         const blockWidth = canvasModel.getBlockSize().width;
         const blockHeight = canvasModel.getBlockSize().height;
-        return canvasModel.getChartBlockWidth() < MIN_DONUT_BLOCK_SIZE + avgLegendWidth
-            && blockWidth * widthCoefficientWhenLegendShouldInBottom < blockHeight
-            ? 'bottom'
-            : 'right';
+        return canvasModel.getChartBlockWidth() < MIN_DONUT_BLOCK_SIZE + avgLegendWidth &&
+            blockWidth * widthCoefficientWhenLegendShouldInBottom < blockHeight
+            ? "bottom"
+            : "right";
     }
     static doesChartBlockHasEnoughWidthForContainsLegend(chartBlockWidth, legendWidth, legendCoordinate) {
         const rightLegendMargin = legendCoordinate.right.margin;

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

@@ -10,5 +10,5 @@ export declare function getSegmentedRadiusValues(segmentsLength: number, segment
 export declare function getLegendMarkerOptions(chart: MdtChartsTwoDimensionalChart): ChartLegendModel;
 export declare function getLineViewOptions(chart: MdtChartsTwoDimensionalChart): TwoDimensionalChartLegendLineModel;
 export declare function getWidthOfLegendMarkerByType(chartType: TwoDimensionalChartType): number;
-export declare function getAreaViewOptions(chart: MdtChartsTwoDimensionalChart, chartIndex: number, style: ChartStyle): AreaChartViewOptions;
-export declare function getGradientId(chartIndex: number, subIndex: number): GradientId;
+export declare function getAreaViewOptions(chart: MdtChartsTwoDimensionalChart, chartIndex: number, style: ChartStyle, chartBlockId: number): AreaChartViewOptions;
+export declare function getGradientId(chartIndex: number, subIndex: number, chartBlockId: number): GradientId;

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

@@ -36,13 +36,13 @@ export function getBarViewOptions(chart, keyAxisOrient, barIndexes) {
     const borderRadius = {
         grouped: getRadiusValues(defaultRadius),
         segmented: {
-            handle: (valueIndex) => getSegmentedRadiusValues(chart.data.valueFields.length, valueIndex, keyAxisOrient, defaultRadius),
+            handle: (valueIndex) => getSegmentedRadiusValues(chart.data.valueFields.length, valueIndex, keyAxisOrient, defaultRadius)
         }
     };
     return { hatch, borderRadius, barIndexes };
 }
 export function calculateBarIndexes(allCharts, currentChart, currentChartIndex) {
-    const prevBarCharts = allCharts.slice(0, currentChartIndex).filter(ch => ch.type === "bar");
+    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];
@@ -62,13 +62,13 @@ export function getSegmentedRadiusValues(segmentsLength, segmentIndex, keyAxisOr
             top: { topLeft: defaultRadius, topRight: defaultRadius, bottomLeft: 0, bottomRight: 0 },
             bottom: { topLeft: 0, topRight: 0, bottomLeft: defaultRadius, bottomRight: defaultRadius },
             left: { topLeft: defaultRadius, topRight: 0, bottomLeft: defaultRadius, bottomRight: 0 },
-            right: { topLeft: 0, topRight: defaultRadius, bottomLeft: 0, bottomRight: defaultRadius },
+            right: { topLeft: 0, topRight: defaultRadius, bottomLeft: 0, bottomRight: defaultRadius }
         },
         last: {
             top: { topLeft: 0, topRight: 0, bottomLeft: defaultRadius, bottomRight: defaultRadius },
             bottom: { topLeft: defaultRadius, topRight: defaultRadius, bottomLeft: 0, bottomRight: 0 },
             left: { topLeft: 0, topRight: defaultRadius, bottomLeft: 0, bottomRight: defaultRadius },
-            right: { topLeft: defaultRadius, topRight: 0, bottomLeft: defaultRadius, bottomRight: 0 },
+            right: { topLeft: defaultRadius, topRight: 0, bottomLeft: defaultRadius, bottomRight: 0 }
         },
         middle: { topLeft: 0, topRight: 0, bottomLeft: 0, bottomRight: 0 },
         default: getRadiusValues(defaultRadius)
@@ -131,11 +131,11 @@ export function getWidthOfLegendMarkerByType(chartType) {
     if (chartType === "area")
         return styledElementValues.defaultLegendMarkerSizes.widthPx;
 }
-export function getAreaViewOptions(chart, chartIndex, style) {
+export function getAreaViewOptions(chart, chartIndex, style, chartBlockId) {
     var _a, _b, _c, _d, _e;
     let gradientIds = [];
     for (let index = 0; index < style.elementColors.length; index++) {
-        gradientIds.push(getGradientId(chartIndex, index));
+        gradientIds.push(getGradientId(chartIndex, index, chartBlockId));
     }
     const fill = ((_b = (_a = chart.areaStyles) === null || _a === void 0 ? void 0 : _a.gradient) === null || _b === void 0 ? void 0 : _b.on) ? { type: "gradient", ids: gradientIds }
         : { type: "paletteColor" };
@@ -148,6 +148,6 @@ export function getAreaViewOptions(chart, chartIndex, style) {
     };
     return { fill, borderLine };
 }
-export function getGradientId(chartIndex, subIndex) {
-    return `gradient-chart-${chartIndex}-sub-${subIndex}`;
+export function getGradientId(chartIndex, subIndex, chartBlockId) {
+    return `chart-${chartBlockId}-gradient-chart-${chartIndex}-sub-${subIndex}`;
 }

package/lib/model/notations/twoDimensionalModel.d.ts

@@ -17,5 +17,4 @@ export declare class TwoDimensionalModel {
     private static findChartsWithEmbeddedKeyLabels;
     private static getEmbeddedLabelType;
     private static getAdditionalElements;
-    private static getChartsByTypes;
 }

package/lib/model/notations/twoDimensionalModel.js

@@ -11,30 +11,31 @@ export class TwoDimensionalModel {
     static getOptions(configReader, designerConfig, modelInstance) {
         const options = configReader.options;
         const canvasModel = modelInstance.canvasModel;
-        const scaleModel = new ScaleModel();
-        const titleConfig = TitleConfigReader.create(options.title, modelInstance);
-        const scaleMarginRecalcer = new ScaleAxisRecalcer(() => scaleModel.getScaleLinear(options, modelInstance.dataModel.repository.getScopedRows(), canvasModel, configReader));
+        const scaleModel = new ScaleModel(options, canvasModel);
+        const scaleMarginRecalcer = new ScaleAxisRecalcer(() => scaleModel.getScaleLinear(modelInstance.dataModel.repository.getScopedRows(), configReader));
         scaleMarginRecalcer.recalculateMargin(canvasModel, options.orientation, options.axis.key);
         const scaleValueInfo = scaleMarginRecalcer.getScaleValue();
         let secondaryScaleValueInfo;
         if (configReader.containsSecondaryAxis()) {
-            const secondaryScaleMarginRecalcer = new ScaleAxisRecalcer(() => scaleModel.getScaleSecondaryLinear(options, modelInstance.dataModel.repository.getScopedRows(), canvasModel, configReader));
+            const secondaryScaleMarginRecalcer = new ScaleAxisRecalcer(() => scaleModel.getScaleSecondaryLinear(modelInstance.dataModel.repository.getScopedRows(), configReader));
             secondaryScaleMarginRecalcer.recalculateMargin(canvasModel, options.orientation, options.axis.key);
             secondaryScaleValueInfo = secondaryScaleMarginRecalcer.getScaleValue();
         }
         const keyAxis = AxisModel.getKeyAxis(options, modelInstance.dataModel.repository.getScopedFullSource(), designerConfig.canvas.axisLabel, canvasModel, designerConfig.elementsOptions.tooltip, () => scaleValueInfo.scaleFn(0));
-        const charts = this.getChartsModel(options.charts, configReader, options.orientation, designerConfig, modelInstance.dataModel.repository, keyAxis.orient, canvasModel, options.data.keyField.name);
-        const defaultFormatter = configReader.calculateDefaultAxisLabelFormatter();
+        const charts = this.getChartsModel(options.charts, configReader, options.orientation, designerConfig, modelInstance.dataModel.repository, keyAxis.orient, canvasModel, options.data.keyField.name, modelInstance);
+        const titleConfig = TitleConfigReader.create(options.title, modelInstance);
         return {
             legend: canvasModel.legendCanvas.getModel(),
             title: {
                 textContent: titleConfig.getTextContent(),
-                fontSize: titleConfig.getFontSize(),
+                fontSize: titleConfig.getFontSize()
             },
             selectable: !!options.selectable,
             orient: options.orientation,
-            scale: Object.assign({ key: scaleModel.getScaleKey(modelInstance.dataModel.getAllowableKeys(), options.orientation, canvasModel, options.charts, this.getChartsByTypes(options.charts, ['bar', 'dot'])), value: scaleValueInfo.scale }, (configReader.containsSecondaryAxis() && { valueSecondary: secondaryScaleValueInfo.scale })),
-            axis: Object.assign({ key: keyAxis, value: AxisModel.getMainValueAxis(defaultFormatter, options.orientation, options.axis.value.position, options.axis.value, designerConfig.canvas.axisLabel, canvasModel) }, (configReader.containsSecondaryAxis() && { valueSecondary: AxisModel.getSecondaryValueAxis(defaultFormatter, options.orientation, options.axis.value.position, options.axis.valueSecondary, designerConfig.canvas.axisLabel, canvasModel) })),
+            scale: Object.assign({ key: scaleModel.getScaleKey(modelInstance.dataModel.getAllowableKeys()), value: scaleValueInfo.scale }, (configReader.containsSecondaryAxis() && { valueSecondary: secondaryScaleValueInfo.scale })),
+            axis: Object.assign({ key: keyAxis, value: AxisModel.getMainValueAxis(configReader.calculateDefaultAxisLabelFormatter(), options.orientation, options.axis.value.position, options.axis.value, designerConfig.canvas.axisLabel, canvasModel, scaleValueInfo.scale) }, (configReader.containsSecondaryAxis() && {
+                valueSecondary: AxisModel.getSecondaryValueAxis(configReader.calculateDefaultAxisLabelFormatter(), options.orientation, options.axis.value.position, options.axis.valueSecondary, designerConfig.canvas.axisLabel, canvasModel, secondaryScaleValueInfo.scale)
+            })),
             type: options.type,
             data: Object.assign({}, options.data),
             charts,
@@ -43,15 +44,15 @@ export class TwoDimensionalModel {
             chartSettings: this.getChartsSettings(designerConfig.canvas.chartOptions, options.orientation),
             valueLabels: TwoDimensionalModelHelper.getValueLabels(options.valueLabels, canvasModel, options.orientation, configReader.getValueLabelsStyleModel()),
             defs: {
-                gradients: TwoDimensionalModelHelper.getGradientDefs(charts, keyAxis.orient, options.orientation)
+                gradients: TwoDimensionalModelHelper.getGradientDefs(charts, keyAxis.orient, options.orientation, modelInstance.version.getVersionNumber())
             }
         };
     }
     static getChartsEmbeddedLabelsFlag(charts, chartOrientation) {
         // Если НЕ найден хотя бы один чарт, который сегментированный или хотя бы один НЕ бар чарт, то лейблы можно прятать
-        return charts.findIndex(chart => chart.isSegmented || chart.type !== 'bar') === -1
-            && chartOrientation === 'horizontal'
-            && charts.length === this.findChartsWithEmbeddedKeyLabels(charts).length;
+        return (charts.findIndex((chart) => chart.isSegmented || chart.type !== "bar") === -1 &&
+            chartOrientation === "horizontal" &&
+            charts.length === this.findChartsWithEmbeddedKeyLabels(charts).length);
     }
     /**
      * Сортирует список чартов в порядке: area - bar - line.
@@ -59,7 +60,7 @@ export class TwoDimensionalModel {
      * @param charts Чарты из конфига
      */
     static sortCharts(charts) {
-        const chartOrder = ['area', 'bar', 'line', 'dot'];
+        const chartOrder = ["area", "bar", "line", "dot"];
         charts.sort((chart1, chart2) => chartOrder.indexOf(chart1.type) - chartOrder.indexOf(chart2.type));
     }
     static getChartsSettings(chartOptions, chartOrientation) {
@@ -69,7 +70,7 @@ export class TwoDimensionalModel {
             lineLike: { shape: parseShape(chartOrientation, (_a = chartOptions.line) === null || _a === void 0 ? void 0 : _a.shape) }
         };
     }
-    static getChartsModel(charts, configReader, chartOrientation, designerConfig, dataModelRep, keyAxisOrient, canvasModel, keyFieldName) {
+    static getChartsModel(charts, configReader, chartOrientation, designerConfig, dataModelRep, keyAxisOrient, canvasModel, keyFieldName, modelInstance) {
         const styleModel = new TwoDimensionalChartStyleModel(charts, designerConfig.chartStyle);
         const chartsModel = [];
         charts.forEach((chart, index) => {
@@ -88,7 +89,10 @@ export class TwoDimensionalModel {
                     show: ({ row, valueFieldName }) => TwoDimensionalModelHelper.shouldMarkerShow(chart, dataModelRep.getRawRows(), valueFieldName, row, keyFieldName),
                     styles: {
                         highlighted: {
-                            size: { radius: (_e = (_d = (_c = designerConfig.canvas.markers) === null || _c === void 0 ? void 0 : _c.highlighted) === null || _d === void 0 ? void 0 : _d.radius) !== null && _e !== void 0 ? _e : 4, borderSize: '3.5px' }
+                            size: {
+                                radius: (_e = (_d = (_c = designerConfig.canvas.markers) === null || _c === void 0 ? void 0 : _c.highlighted) === null || _d === void 0 ? void 0 : _d.radius) !== null && _e !== void 0 ? _e : 4,
+                                borderSize: "3.5px"
+                            }
                         },
                         normal: {
                             size: {
@@ -112,18 +116,20 @@ export class TwoDimensionalModel {
                     handleY: (scaledValue) => valueLabelsCoordinateCalculator.getValueLabelY(scaledValue),
                     handleScaledValue: (dataRow, datumField) => {
                         var _a, _b, _c, _d;
-                        if (!((_b = (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.position) === null || _b === void 0 ? void 0 : _b.mode) || ((_d = (_c = chart.valueLabels) === null || _c === void 0 ? void 0 : _c.position) === null || _d === void 0 ? void 0 : _d.mode) === 'after')
+                        if (!((_b = (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.position) === null || _b === void 0 ? void 0 : _b.mode) || ((_d = (_c = chart.valueLabels) === null || _c === void 0 ? void 0 : _c.position) === null || _d === void 0 ? void 0 : _d.mode) === "after")
                             return dataRow[datumField];
                         if (chart.isSegmented)
-                            return dataRow[datumField] - (dataRow[datumField] - dataRow['0']) / 2;
+                            return dataRow[datumField] - (dataRow[datumField] - dataRow["0"]) / 2;
                         else
                             return dataRow[datumField] / 2;
                     },
-                    textAnchor: calculateValueLabelAlignment(keyAxisOrient, (_t = (_s = chart.valueLabels) === null || _s === void 0 ? void 0 : _s.position) === null || _t === void 0 ? void 0 : _t.mode).textAnchor,
-                    dominantBaseline: calculateValueLabelAlignment(keyAxisOrient, (_v = (_u = chart.valueLabels) === null || _u === void 0 ? void 0 : _u.position) === null || _v === void 0 ? void 0 : _v.mode).dominantBaseline,
-                    format: configReader.getValueLabelFormatterForChart(index),
+                    textAnchor: calculateValueLabelAlignment(keyAxisOrient, (_t = (_s = chart.valueLabels) === null || _s === void 0 ? void 0 : _s.position) === null || _t === void 0 ? void 0 : _t.mode)
+                        .textAnchor,
+                    dominantBaseline: calculateValueLabelAlignment(keyAxisOrient, (_v = (_u = chart.valueLabels) === null || _u === void 0 ? void 0 : _u.position) === null || _v === void 0 ? void 0 : _v.mode)
+                        .dominantBaseline,
+                    format: configReader.getValueLabelFormatterForChart(index)
                 },
-                areaViewOptions: getAreaViewOptions(chart, index, style),
+                areaViewOptions: getAreaViewOptions(chart, index, style, modelInstance.version.getVersionNumber()),
                 dotViewOptions: {
                     shape: {
                         type: "line",
@@ -138,16 +144,16 @@ export class TwoDimensionalModel {
     }
     static findChartsWithEmbeddedKeyLabels(charts) {
         const chartsWithEmbeddedLabels = [];
-        charts.forEach(chart => {
-            if (chart.type === 'bar' && chart.embeddedLabels === 'key')
+        charts.forEach((chart) => {
+            if (chart.type === "bar" && chart.embeddedLabels === "key")
                 chartsWithEmbeddedLabels.push(chart);
         });
         return chartsWithEmbeddedLabels;
     }
     static getEmbeddedLabelType(currentChart, chartOrientation) {
-        if (chartOrientation === 'horizontal' && currentChart.type === 'bar')
+        if (chartOrientation === "horizontal" && currentChart.type === "bar")
             return currentChart.embeddedLabels;
-        return 'none';
+        return "none";
     }
     static getAdditionalElements(options) {
         var _a, _b;
@@ -161,7 +167,4 @@ export class TwoDimensionalModel {
             }
         };
     }
-    static getChartsByTypes(charts, types) {
-        return charts.filter(chart => types.includes(chart.type));
-    }
 }

package/package.json

@@ -1,61 +1,61 @@
 {
-  "name": "mdt-charts",
-  "version": "1.27.1",
-  "description": "",
-  "main": "lib/main.js",
-  "scripts": {
-    "dev": "npx webpack --mode development",
-    "build": "npx webpack --mode production",
-    "watch": "npx webpack --mode development --watch",
-    "test": "jest",
-    "build-lib": "shx rm -rf lib && npm run build-ts && npm run build-style",
-    "build-ts": "npx tsc -p tsconfig.production.json",
-    "build-style": "shx mkdir lib/style && shx cp src/style/charts-main.css lib/style && shx cp src/style/charts-main.css lib/style/charts-main.less"
-  },
-  "homepage": "https://github.com/VishulaKnow/charts",
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/preset-env": "^7.12.10",
-    "@babel/preset-typescript": "^7.12.13",
-    "@types/chroma-js": "^2.1.3",
-    "@types/d3-array": "^2.9.0",
-    "@types/d3-axis": "^2.0.0",
-    "@types/d3-ease": "^2.0.0",
-    "@types/d3-format": "^2.0.0",
-    "@types/d3-interpolate": "^2.0.0",
-    "@types/d3-scale": "^3.2.2",
-    "@types/d3-selection": "^2.0.0",
-    "@types/d3-shape": "^2.0.0",
-    "@types/d3-timer": "^2.0.0",
-    "@types/d3-transition": "^2.0.0",
-    "@types/html-webpack-plugin": "^3.2.4",
-    "@types/jest": "^26.0.20",
-    "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^5.0.1",
-    "d3-timer": "^2.0.0",
-    "html-webpack-plugin": "^4.5.0",
-    "jest": "^26.6.3",
-    "shx": "^0.3.4",
-    "style-loader": "^2.0.0",
-    "ts-loader": "^8.0.12",
-    "typescript": "^4.1.3",
-    "webpack": "^5.10.1",
-    "webpack-bundle-analyzer": "^4.4.0",
-    "webpack-cli": "^4.2.0"
-  },
-  "dependencies": {
-    "chroma-js": "^2.1.1",
-    "d3-array": "^2.11.0",
-    "d3-axis": "^2.0.0",
-    "d3-ease": "^2.0.0",
-    "d3-format": "^2.0.0",
-    "d3-interpolate": "^2.0.1",
-    "d3-scale": "^3.2.3",
-    "d3-selection": "^2.0.0",
-    "d3-shape": "^2.0.0",
-    "d3-transition": "^2.0.0"
-  }
+	"name": "mdt-charts",
+	"version": "1.27.2",
+	"description": "",
+	"main": "lib/main.js",
+	"scripts": {
+		"dev": "npx webpack --mode development",
+		"build": "npx webpack --mode production",
+		"watch": "npx webpack --mode development --watch",
+		"test": "jest",
+		"build-lib": "shx rm -rf lib && npm run build-ts && npm run build-style",
+		"build-ts": "npx tsc -p tsconfig.production.json",
+		"build-style": "shx mkdir lib/style && shx cp src/style/charts-main.css lib/style && shx cp src/style/charts-main.css lib/style/charts-main.less"
+	},
+	"homepage": "https://github.com/VishulaKnow/charts",
+	"author": "",
+	"license": "ISC",
+	"devDependencies": {
+		"@babel/core": "^7.12.10",
+		"@babel/plugin-proposal-class-properties": "^7.12.1",
+		"@babel/preset-env": "^7.12.10",
+		"@babel/preset-typescript": "^7.12.13",
+		"@types/chroma-js": "^2.1.3",
+		"@types/d3-array": "^2.9.0",
+		"@types/d3-axis": "^2.0.0",
+		"@types/d3-ease": "^2.0.0",
+		"@types/d3-format": "^2.0.0",
+		"@types/d3-interpolate": "^2.0.0",
+		"@types/d3-scale": "^3.2.2",
+		"@types/d3-selection": "^2.0.0",
+		"@types/d3-shape": "^2.0.0",
+		"@types/d3-timer": "^2.0.0",
+		"@types/d3-transition": "^2.0.0",
+		"@types/html-webpack-plugin": "^3.2.4",
+		"@types/jest": "^26.0.20",
+		"clean-webpack-plugin": "^3.0.0",
+		"css-loader": "^5.0.1",
+		"d3-timer": "^2.0.0",
+		"html-webpack-plugin": "^4.5.0",
+		"jest": "^26.6.3",
+		"shx": "^0.3.4",
+		"style-loader": "^2.0.0",
+		"ts-loader": "^8.0.12",
+		"typescript": "^4.1.3",
+		"webpack": "^5.10.1",
+		"webpack-bundle-analyzer": "^4.4.0",
+		"webpack-cli": "^4.2.0"
+	},
+	"dependencies": {
+		"chroma-js": "^2.1.1",
+		"d3-array": "^2.11.0",
+		"d3-axis": "^2.0.0",
+		"d3-ease": "^2.0.0",
+		"d3-format": "^2.0.0",
+		"d3-interpolate": "^2.0.1",
+		"d3-scale": "^3.2.3",
+		"d3-selection": "^2.0.0",
+		"d3-shape": "^2.0.0",
+		"d3-transition": "^2.0.0"
+	}
 }

package/tsconfig.production.json

@@ -1,25 +1,15 @@
 {
-    "compilerOptions": {
-        "outDir": "./lib/",
-        "noImplicitAny": true,
-        "target": "es6",
-        "lib": ["ES2017", "DOM"],
-        "jsx": "react",
-        "allowJs": true,
-        "types": [
-            "jest"
-        ],
-        "declaration": true,
-        "moduleResolution": "Node"
-    },
-    "include": [
-        "src"
-    ],
-    "exclude": [
-        "node_modules",
-        "**/__tests__/*",
-        "src/playground/*",
-        "**/*Example.ts",
-        "**/*.test.ts"
-    ]
-}
+	"compilerOptions": {
+		"outDir": "./lib/",
+		"noImplicitAny": true,
+		"target": "es6",
+		"lib": ["ES2017", "DOM"],
+		"jsx": "react",
+		"allowJs": true,
+		"types": ["jest"],
+		"declaration": true,
+		"moduleResolution": "Node"
+	},
+	"include": ["src"],
+	"exclude": ["node_modules", "**/__tests__/*", "src/playground/*", "**/*Example.ts", "**/*.test.ts"]
+}

package/README.md

@@ -1,2 +0,0 @@
-# Charts
-**Demo**: https://vishulaknow.github.io/charts-demo/