mdt-charts 1.13.2 → 1.14.0

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

@@ -1,8 +1,22 @@
 import { Line as ILine } from 'd3-shape';
 import { MdtChartsDataRow } from '../../../config/config';
-import { Orient, BlockMargin } from "../../../model/model";
+import { Orient, BlockMargin, LineCurveType, TwoDimensionalChartModel } from "../../../model/model";
 import { Scales } from "../../features/scale/scale";
-export declare class LineHelper {
-    static getLineGenerator(keyAxisOrient: Orient, scales: Scales, keyFieldName: string, valueFieldName: string, margin: BlockMargin): ILine<MdtChartsDataRow>;
-    static getSegmentedLineGenerator(keyAxisOrient: Orient, scales: Scales, keyFieldName: string, margin: BlockMargin): ILine<MdtChartsDataRow>;
+import { Pipeline } from '../../helpers/pipeline/Pipeline';
+import { BaseType, Selection } from 'd3-selection';
+interface LineGeneratorFactoryOptions {
+    keyAxisOrient: Orient;
+    scales: Scales;
+    keyFieldName: string;
+    margin: BlockMargin;
+    curve: LineCurveType;
 }
+export declare class LineGeneratorFactory {
+    private options;
+    constructor(options: LineGeneratorFactoryOptions);
+    getLineGenerator(valueFieldName: string): ILine<MdtChartsDataRow>;
+    getSegmentedLineGenerator(): ILine<MdtChartsDataRow>;
+}
+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 {};

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

@@ -1,28 +1,38 @@
-import { line } from 'd3-shape';
 import { Scale } from "../../features/scale/scale";
-export class LineHelper {
-    static getLineGenerator(keyAxisOrient, scales, keyFieldName, valueFieldName, margin) {
+import { LineGenerator } from './lineGenerator';
+export class LineGeneratorFactory {
+    constructor(options) {
+        this.options = options;
+    }
+    getLineGenerator(valueFieldName) {
+        const { keyAxisOrient, scales, keyFieldName, margin } = this.options;
+        const generator = new LineGenerator({ curve: this.options.curve });
         if (keyAxisOrient === 'bottom' || keyAxisOrient === 'top') {
-            return line()
-                .x(d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.left)
-                .y(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);
         }
         if (keyAxisOrient === 'left' || keyAxisOrient === 'right') {
-            return line()
-                .x(d => scales.value(d[valueFieldName]) + margin.left)
-                .y(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);
         }
     }
-    static getSegmentedLineGenerator(keyAxisOrient, scales, keyFieldName, margin) {
+    getSegmentedLineGenerator() {
+        const { keyAxisOrient, scales, keyFieldName, margin } = this.options;
+        const generator = new LineGenerator({ curve: this.options.curve });
         if (keyAxisOrient === 'bottom' || keyAxisOrient === 'top') {
-            return line()
-                .x(d => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.left)
-                .y(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);
         }
         if (keyAxisOrient === 'left' || keyAxisOrient === 'right') {
-            return line()
-                .x(d => scales.value(d[1]) + margin.left)
-                .y(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);
         }
     }
 }
+export function onLineChartInit(creatingPipeline) {
+    creatingPipeline.push((path, chart) => {
+        if (chart.lineViewOptions.dashedStyles.on) {
+            return applyLineDash(path, chart.lineViewOptions.dashedStyles.dashSize, chart.lineViewOptions.dashedStyles.gapSize);
+        }
+        return path;
+    });
+}
+export function applyLineDash(lineSelection, dashSize, gapSize) {
+    return lineSelection.style('stroke-dasharray', `${dashSize} ${gapSize}`);
+}

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -21,12 +21,12 @@ export class TwoDimensionalManager {
         engine.block.svg.render(model.blockCanvas.size);
         Axis.render(engine.block, scales, options.scale, options.axis, model.blockCanvas.size);
         GridLine.render(engine.block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, scales);
-        this.renderCharts(engine.block, options.charts, scales, engine.data, options.data, model.chartBlock.margin, options.axis.key.orient, options.chartSettings.bar, model.blockCanvas.size);
+        this.renderCharts(engine.block, options.charts, scales, engine.data, options.data, model.chartBlock.margin, options.axis.key.orient, options.chartSettings, model.blockCanvas.size);
         Axis.raiseKeyAxis(engine.block, options.axis.key);
         engine.block.filterEventManager.registerEventFor2D(scales.key, model.chartBlock.margin, model.blockCanvas.size, options);
         engine.block.filterEventManager.event2DUpdate(options);
         Title.render(engine.block, options.title, model.otherComponents.titleBlock, model.blockCanvas.size);
-        Legend.render(engine.block, engine.data, options, model);
+        Legend.get().render(engine.block, engine.data, options, model);
         Tooltip.render(engine.block, model, engine.data, model.otherComponents.tooltipBlock, scales);
         if (model.dataSettings.scope.hidedRecordsAmount !== 0)
             TwoDimRecordOverflowAlert.render(engine.block, {
@@ -51,7 +51,7 @@ export class TwoDimensionalManager {
         block.scales = scales;
         Axis.update(block, scales, options.scale, options.axis, model.blockCanvas.size, keyDomainEquality);
         GridLine.update(block, options.additionalElements.gridLine.flag, 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.bar);
+        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(() => {
             block.filterEventManager.event2DUpdate(options);
@@ -64,39 +64,40 @@ export class TwoDimensionalManager {
         });
     }
     updateColors(block, model) {
-        Legend.updateColors(block, model.options);
+        Legend.get().updateColors(block, model.options);
         model.options.charts.forEach(chart => {
             if (chart.type === 'bar')
-                Bar.updateColors(block, chart);
+                Bar.get().updateColors(block, chart);
             else if (chart.type === 'line')
-                Line.updateColors(block, chart);
+                Line.get({ staticSettings: model.options.chartSettings.lineLike }).updateColors(block, chart);
             else if (chart.type === 'area')
                 Area.updateColors(block, chart);
         });
     }
-    renderCharts(block, charts, scales, data, dataOptions, margin, keyAxisOrient, barSettings, blockSize) {
+    renderCharts(block, charts, scales, data, dataOptions, margin, keyAxisOrient, chartSettings, blockSize) {
         block.svg.renderChartClipPath(margin, blockSize);
+        block.svg.renderBarHatchPattern();
         block.svg.renderChartsBlock();
         charts.forEach((chart) => {
             if (chart.type === 'bar')
-                Bar.render(block, scales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart, blockSize, barSettings, BarHelper.getBarsInGroupAmount(charts), chart.isSegmented, charts.findIndex(ch => ch.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'));
             else if (chart.type === 'line')
-                Line.render(block, scales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart);
+                Line.get({ staticSettings: chartSettings.lineLike }).render(block, scales, 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);
         });
         EmbeddedLabels.raiseGroups(block);
     }
-    updateCharts(block, charts, scales, data, dataOptions, margin, keyAxisOrient, blockSize, barSettings) {
+    updateCharts(block, charts, scales, data, dataOptions, margin, keyAxisOrient, blockSize, chartSettings) {
         block.svg.updateChartClipPath(margin, blockSize);
         let promises = [];
         charts.forEach((chart) => {
             let proms;
             if (chart.type === 'bar') {
-                proms = Bar.update(block, data[dataOptions.dataSource], scales, margin, keyAxisOrient, chart, blockSize, BarHelper.getBarsInGroupAmount(charts), dataOptions.keyField, charts.findIndex(ch => ch.type === 'bar'), barSettings, chart.isSegmented);
+                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);
             }
             else if (chart.type === 'line') {
-                proms = Line.update(block, scales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart);
+                proms = Line.get({ staticSettings: chartSettings.lineLike }).update(block, scales, 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);

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

@@ -16,6 +16,7 @@ export declare class AxisModel {
     static getAxisTranslateX(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: AxisPosition, canvasModel: CanvasModel): number;
     static getAxisTranslateY(axisType: AxisType, chartOrientation: ChartOrientation, axisPosition: AxisPosition, canvasModel: CanvasModel): number;
     static getKeyAxisLabelPosition(canvasModel: CanvasModel, scopedDataLength: number, axisConfig?: DiscreteAxisOptions): AxisLabelPosition;
-    static getLabelSize(labelMaxWidth: number, labelTexts: any[]): LabelSize;
+    static getLabelSize(labelMaxWidth: number, labelTexts: string[]): LabelSize;
+    static getLabelSizeLegacy(labelMaxWidth: number, labelTexts: string[]): LabelSize;
     private static getKeyAxisTranslateModel;
 }

package/lib/model/featuresModel/axisModel.js

@@ -15,7 +15,7 @@ export class AxisModel {
             cssClass: 'key-axis',
             ticks: axisConfig.ticks,
             labels: {
-                maxSize: AxisModel.getLabelSize(labelConfig.maxSize.main, data[dataOptions.dataSource].map(d => d[dataOptions.keyField.name])).width,
+                maxSize: AxisModel.getLabelSizeLegacy(labelConfig.maxSize.main, data[dataOptions.dataSource].map(d => d[dataOptions.keyField.name])).width,
                 position: AxisModel.getKeyAxisLabelPosition(canvasModel, DataManagerModel.getDataValuesByKeyField(data, dataOptions.dataSource, dataOptions.keyField.name).length, axisConfig),
                 visible: !TwoDimensionalModel.getChartsEmbeddedLabelsFlag(charts, orientation),
                 defaultTooltip: tooltipSettings.position === 'fixed'
@@ -81,6 +81,16 @@ export class AxisModel {
         return this.service.getKeyAxisLabelPosition(canvasModel.getChartBlockWidth(), scopedDataLength, (_a = axisConfig === null || axisConfig === void 0 ? void 0 : axisConfig.labels) === null || _a === void 0 ? void 0 : _a.position);
     }
     static getLabelSize(labelMaxWidth, labelTexts) {
+        const LABEL_ELEMENT_HEIGHT_PX = 17;
+        const ONE_UPPER_SYMBOL_WIDTH_PX = 8.6;
+        const longestLabelLength = Math.max(...labelTexts.map(t => ModelHelper.getStringScore(t)));
+        const longestLabelWidth = ONE_UPPER_SYMBOL_WIDTH_PX * longestLabelLength;
+        return {
+            height: LABEL_ELEMENT_HEIGHT_PX,
+            width: longestLabelWidth > labelMaxWidth ? labelMaxWidth : longestLabelWidth
+        };
+    }
+    static getLabelSizeLegacy(labelMaxWidth, labelTexts) {
         const labelSize = {
             width: 0,
             height: 0

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

@@ -1,8 +1,9 @@
+import { LegendBlockCanvas } from "../../../main";
 import { LegendBlockModel, Orient } from "../../model";
 import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
 import { LegendItemsDirection } from "./legendCanvasModel";
 export declare class LegendModel {
-    static getBaseLegendBlockModel(canvasModel: CanvasModel): LegendBlockModel;
+    static getBaseLegendBlockModel(canvasModel: CanvasModel, legendConfig: LegendBlockCanvas): LegendBlockModel;
     static getLegendItemClass(itemsPosition: LegendItemsDirection): string;
     static appendToGlobalMarginValuesLegendMargin(canvasModel: CanvasModel, position: Orient, legendBlockModel: LegendBlockModel): void;
 }

package/lib/model/featuresModel/legendModel/legendModel.js

@@ -1,5 +1,6 @@
 export class LegendModel {
-    static getBaseLegendBlockModel(canvasModel) {
+    static getBaseLegendBlockModel(canvasModel, legendConfig) {
+        var _a, _b;
         const mt = 20, mb = 20, ml = 20, mr = 20;
         return {
             coordinate: {
@@ -23,6 +24,9 @@ export class LegendModel {
                     margin: { top: 5, bottom: 10, left: 0, right: 0 },
                     pad: canvasModel.titleCanvas.getAllNeededSpace()
                 }
+            },
+            static: {
+                maxLinesAmount: (_b = (_a = legendConfig.static) === null || _a === void 0 ? void 0 : _a.maxLinesAmount) !== null && _b !== void 0 ? _b : 3
             }
         };
     }

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

@@ -1,8 +1,9 @@
 import { OtherCommonComponents } from "../model";
-import { ElementsOptions } from "../../designer/designerConfig";
+import { ElementsOptions, LegendBlockCanvas } from "../../designer/designerConfig";
 import { ModelInstance } from "../modelInstance/modelInstance";
 interface OtherComponentsModelDependencies {
     elementsOptions: ElementsOptions;
+    legendConfig: LegendBlockCanvas;
     title: string;
 }
 export declare class OtherComponentsModel {

package/lib/model/featuresModel/otherComponents.js

@@ -6,7 +6,7 @@ export class OtherComponentsModel {
         const canvasModel = modelInstance.canvasModel;
         canvasModel.titleCanvas.init(TitleModel.getTitleModel(dependencies.title));
         return {
-            legendBlock: LegendModel.getBaseLegendBlockModel(canvasModel),
+            legendBlock: LegendModel.getBaseLegendBlockModel(canvasModel, dependencies.legendConfig),
             titleBlock: canvasModel.titleCanvas.getModel(),
             tooltipBlock: TooltipModel.getTooltipModel(dependencies.elementsOptions.tooltip)
         };

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

@@ -1,12 +1,13 @@
 import { ScaleKeyModel, ScaleValueModel } from "../../model";
 import { MdtChartsTwoDimensionalChart, MdtChartsTwoDimensionalOptions, ChartOrientation, MdtChartsDataRow } from "../../../config/config";
 import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
+import { TwoDimConfigReader } from "../../modelInstance/configReader";
 export declare enum ScaleType {
     Key = 0,
     Value = 1
 }
 export declare class ScaleModel {
     getScaleKey(allowableKeys: string[], orient: ChartOrientation, canvasModel: CanvasModel, charts: MdtChartsTwoDimensionalChart[], barCharts: MdtChartsTwoDimensionalChart[]): ScaleKeyModel;
-    getScaleLinear(options: MdtChartsTwoDimensionalOptions, dataRows: MdtChartsDataRow[], canvasModel: CanvasModel): ScaleValueModel;
+    getScaleLinear(options: MdtChartsTwoDimensionalOptions, dataRows: MdtChartsDataRow[], canvasModel: CanvasModel, configReader?: TwoDimConfigReader): ScaleValueModel;
     private getScaleKeyType;
 }

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

@@ -17,14 +17,16 @@ export class ScaleModel {
             elementsAmount: getElementsAmountForScale(barCharts)
         };
     }
-    getScaleLinear(options, dataRows, canvasModel) {
+    getScaleLinear(options, dataRows, canvasModel, configReader) {
+        var _a;
         return {
             domain: getScaleLinearDomain(options.axis.value.domain, dataRows, options),
             range: {
                 start: 0,
                 end: getScaleValueRangePeek(options.orientation, canvasModel)
             },
-            type: "linear"
+            type: "linear",
+            formatter: (_a = configReader === null || configReader === void 0 ? void 0 : configReader.getAxisLabelFormatter()) !== null && _a !== void 0 ? _a : null
         };
     }
     getScaleKeyType(charts) {

package/lib/model/margin/marginModel.d.ts

@@ -1,10 +1,13 @@
-import { MdtChartsConfig, MdtChartsDataSource, MdtChartsTwoDimensionalOptions } from "../../config/config";
+import { MdtChartsConfig } from "../../config/config";
 import { DesignerConfig } from "../../designer/designerConfig";
 import { OtherCommonComponents } from "../model";
 import { ModelInstance } from "../modelInstance/modelInstance";
 export declare class MarginModel {
+    private designerConfig;
+    private config;
     private twoDimModel;
-    initMargin(designerConfig: DesignerConfig, config: MdtChartsConfig, otherComponents: OtherCommonComponents, data: MdtChartsDataSource, modelInstance: ModelInstance): void;
-    recalcMarginByVerticalAxisLabel(modelInstance: ModelInstance, options: MdtChartsTwoDimensionalOptions, designerConfig: DesignerConfig): void;
+    constructor(designerConfig: DesignerConfig, config: MdtChartsConfig);
+    initMargin(otherComponents: OtherCommonComponents, modelInstance: ModelInstance): void;
+    recalcMarginByVerticalAxisLabel(modelInstance: ModelInstance): void;
     private recalcMarginByTitle;
 }

package/lib/model/margin/marginModel.js

@@ -1,18 +1,22 @@
 import { TwoDimMarginModel } from "./twoDim/twoDimMarginModel";
+import { TwoDimConfigReader } from "../modelInstance/configReader";
 export class MarginModel {
-    constructor() {
-        this.twoDimModel = new TwoDimMarginModel();
+    constructor(designerConfig, config) {
+        this.designerConfig = designerConfig;
+        this.config = config;
+        //TODO: ensure
+        this.twoDimModel = new TwoDimMarginModel(this.designerConfig, new TwoDimConfigReader(this.config, this.designerConfig));
     }
-    initMargin(designerConfig, config, otherComponents, data, modelInstance) {
+    initMargin(otherComponents, modelInstance) {
         const canvasModel = modelInstance.canvasModel;
-        canvasModel.initMargin(Object.assign({}, designerConfig.canvas.chartBlockMargin));
+        canvasModel.initMargin(Object.assign({}, this.designerConfig.canvas.chartBlockMargin));
         this.recalcMarginByTitle(canvasModel);
-        if (config.options.type === '2d') {
-            this.twoDimModel.recalcMargin(designerConfig, config.options, otherComponents, data, modelInstance);
+        if (this.config.options.type === '2d') {
+            this.twoDimModel.recalcMargin(otherComponents, modelInstance);
         }
     }
-    recalcMarginByVerticalAxisLabel(modelInstance, options, designerConfig) {
-        this.twoDimModel.recalcMarginByVerticalAxisLabel(modelInstance, options, designerConfig);
+    recalcMarginByVerticalAxisLabel(modelInstance) {
+        this.twoDimModel.recalcMarginByVerticalAxisLabel(modelInstance);
     }
     recalcMarginByTitle(canvasModel) {
         canvasModel.increaseMarginSide("top", canvasModel.titleCanvas.getAllNeededSpace());

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

@@ -1,13 +1,16 @@
-import { MdtChartsDataSource, MdtChartsTwoDimensionalOptions } from "../../../config/config";
 import { DesignerConfig } from "../../../designer/designerConfig";
 import { OtherCommonComponents } from "../../model";
+import { TwoDimConfigReader } from "../../modelInstance/configReader";
 import { ModelInstance } from "../../modelInstance/modelInstance";
 export declare const AXIS_HORIZONTAL_LABEL_PADDING = 15;
 export declare const AXIS_VERTICAL_LABEL_PADDING = 10;
 export declare class TwoDimMarginModel {
+    private designerConfig;
+    private configReader;
     private twoDimLegendModel;
-    recalcMargin(designerConfig: DesignerConfig, options: MdtChartsTwoDimensionalOptions, otherComponents: OtherCommonComponents, data: MdtChartsDataSource, modelInstance: ModelInstance): void;
-    recalcMarginByVerticalAxisLabel(modelInstance: ModelInstance, options: MdtChartsTwoDimensionalOptions, designerConfig: DesignerConfig): void;
+    constructor(designerConfig: DesignerConfig, configReader: TwoDimConfigReader);
+    recalcMargin(otherComponents: OtherCommonComponents, modelInstance: ModelInstance): void;
+    recalcMarginByVerticalAxisLabel(modelInstance: ModelInstance): void;
     private getHorizontalMarginByAxisLabels;
     private recalcVerticalMarginByAxisLabelHeight;
     private recalcHorizontalMarginByAxisLabelWidth;

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

@@ -1,4 +1,3 @@
-import { DataManagerModel } from "../../dataManagerModel/dataManagerModel";
 import { AxisModel } from "../../featuresModel/axisModel";
 import { TwoDimLegendModel } from "../../featuresModel/legendModel/twoDimLegendModel";
 import { keyAxisLabelHorizontalLog, keyAxisLabelVerticalLog } from "../../featuresModel/scaleModel/scaleAxisRecalcer";
@@ -7,62 +6,64 @@ import { TwoDimensionalModel } from "../../notations/twoDimensionalModel";
 export const AXIS_HORIZONTAL_LABEL_PADDING = 15;
 export const AXIS_VERTICAL_LABEL_PADDING = 10;
 export class TwoDimMarginModel {
-    constructor() {
+    constructor(designerConfig, configReader) {
+        this.designerConfig = designerConfig;
+        this.configReader = configReader;
         this.twoDimLegendModel = new TwoDimLegendModel();
     }
-    recalcMargin(designerConfig, options, otherComponents, data, modelInstance) {
+    recalcMargin(otherComponents, modelInstance) {
         const canvasModel = modelInstance.canvasModel;
-        this.twoDimLegendModel.recalcMarginWith2DLegend(modelInstance, otherComponents.legendBlock, options.legend);
-        const labelSize = this.getHorizontalMarginByAxisLabels(designerConfig.canvas.axisLabel.maxSize.main, options.axis, data, options);
-        this.recalcVerticalMarginByAxisLabelHeight(labelSize, canvasModel, options.orientation, options.axis);
+        this.twoDimLegendModel.recalcMarginWith2DLegend(modelInstance, otherComponents.legendBlock, this.configReader.options.legend);
+        const labelSize = this.getHorizontalMarginByAxisLabels(modelInstance);
+        this.recalcVerticalMarginByAxisLabelHeight(labelSize, canvasModel);
         // Если встроенный лейбл показывает ключи, то лейблы оси ключей не показываются
         // При этом все графики должны иметь: embeddedLabels = 'key'
         // И все графики должны быть типа bar. 
-        const showingFlag = options.type === '2d'
-            ? !TwoDimensionalModel.getChartsEmbeddedLabelsFlag(options.charts, options.orientation)
+        const showingFlag = this.configReader.options.type === '2d'
+            ? !TwoDimensionalModel.getChartsEmbeddedLabelsFlag(this.configReader.options.charts, this.configReader.options.orientation)
             : true;
-        this.recalcHorizontalMarginByAxisLabelWidth(labelSize, canvasModel, options.orientation, options.axis, showingFlag);
+        this.recalcHorizontalMarginByAxisLabelWidth(labelSize, canvasModel, showingFlag);
     }
-    recalcMarginByVerticalAxisLabel(modelInstance, options, designerConfig) {
-        if (options.orientation === 'vertical') {
+    recalcMarginByVerticalAxisLabel(modelInstance) {
+        if (this.configReader.options.orientation === 'vertical') {
             const dataModel = modelInstance.dataModel;
-            const axisLabelSize = AxisModel.getLabelSize(designerConfig.canvas.axisLabel.maxSize.main, dataModel.getAllowableKeys());
-            const axisConfig = AxisModel.getKeyAxisLabelPosition(modelInstance.canvasModel, dataModel.getAllowableKeys().length, options.axis.key);
-            const marginOrient = options.axis.key.position === 'end' ? 'bottom' : 'top';
+            const axisLabelSize = AxisModel.getLabelSize(this.designerConfig.canvas.axisLabel.maxSize.main, dataModel.getAllowableKeys());
+            const axisConfig = AxisModel.getKeyAxisLabelPosition(modelInstance.canvasModel, dataModel.getAllowableKeys().length, this.configReader.options.axis.key);
+            const marginOrient = this.configReader.options.axis.key.position === 'end' ? 'bottom' : 'top';
             if (axisConfig === 'rotated') {
                 modelInstance.canvasModel.decreaseMarginSide(marginOrient, axisLabelSize.height);
                 modelInstance.canvasModel.increaseMarginSide(marginOrient, axisLabelSize.width, keyAxisLabelVerticalLog);
             }
         }
     }
-    getHorizontalMarginByAxisLabels(labelsMaxWidth, axis, data, options) {
-        const keyAxisOrient = AxisModel.getAxisOrient(AxisType.Key, options.orientation, axis.key.position);
+    getHorizontalMarginByAxisLabels(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 = DataManagerModel.getDataValuesByKeyField(data, options.data.dataSource, options.data.keyField.name);
+            labelsTexts = modelInstance.dataModel.repository.getValuesByKeyField();
         }
         else {
-            labelsTexts = ['0000'];
+            labelsTexts = modelInstance.dataModel.repository.getBiggestValueAndDecremented().map(v => this.configReader.getAxisLabelFormatter()(v));
         }
-        return AxisModel.getLabelSize(labelsMaxWidth, labelsTexts);
+        return AxisModel.getLabelSize(this.designerConfig.canvas.axisLabel.maxSize.main, labelsTexts);
     }
-    recalcVerticalMarginByAxisLabelHeight(labelSize, canvasModel, orientation, axis) {
-        const keyAxisOrient = AxisModel.getAxisOrient(AxisType.Key, orientation, axis.key.position);
-        const valueAxisOrient = AxisModel.getAxisOrient(AxisType.Value, orientation, axis.value.position);
+    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);
         if ((keyAxisOrient === 'bottom' || keyAxisOrient === 'top')) {
-            if (axis.key.visibility)
+            if (this.configReader.options.axis.key.visibility)
                 canvasModel.increaseMarginSide(keyAxisOrient, labelSize.height + AXIS_HORIZONTAL_LABEL_PADDING, keyAxisLabelVerticalLog);
         }
-        else if (axis.value.visibility)
+        else if (this.configReader.options.axis.value.visibility)
             canvasModel.increaseMarginSide(valueAxisOrient, labelSize.height + AXIS_HORIZONTAL_LABEL_PADDING);
     }
-    recalcHorizontalMarginByAxisLabelWidth(labelSize, canvasModel, orientation, axis, isShow) {
-        const keyAxisOrient = AxisModel.getAxisOrient(AxisType.Key, orientation, axis.key.position);
-        const valueAxisOrient = AxisModel.getAxisOrient(AxisType.Value, orientation, axis.value.position);
-        if ((keyAxisOrient === 'left' || keyAxisOrient === 'right') && isShow && axis.key.visibility) {
+    recalcHorizontalMarginByAxisLabelWidth(labelSize, canvasModel, isShow) {
+        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);
+        if ((keyAxisOrient === 'left' || keyAxisOrient === 'right') && isShow && this.configReader.options.axis.key.visibility) {
             canvasModel.increaseMarginSide(keyAxisOrient, labelSize.width + AXIS_VERTICAL_LABEL_PADDING, keyAxisLabelHorizontalLog);
         }
-        else if ((valueAxisOrient === 'left' || valueAxisOrient === 'right') && axis.value.visibility) {
+        else if ((valueAxisOrient === 'left' || valueAxisOrient === 'right') && this.configReader.options.axis.value.visibility) {
             canvasModel.increaseMarginSide(valueAxisOrient, labelSize.width + AXIS_VERTICAL_LABEL_PADDING);
         }
     }

package/lib/model/model.d.ts

@@ -1,5 +1,5 @@
 import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType, AxisLabelPosition, MdtChartsIconElement, MdtChartsCardValue, MdtChartsColorName } from "../config/config";
-import { DataType, DonutOptionsCanvas, Formatter, TooltipSettings, Transitions } from "../designer/designerConfig";
+import { DataType, DonutOptionsCanvas, Formatter, StaticLegendBlockCanvas, TooltipSettings, Transitions } from "../designer/designerConfig";
 declare type AxisType = "key" | "value";
 export declare type Orient = "top" | "bottom" | "left" | "right";
 export declare type ScaleKeyType = "band" | "point";
@@ -101,6 +101,7 @@ export interface ScaleValueModel {
     domain: any[];
     range: RangeModel;
     type: ScaleValueType;
+    formatter: ((v: number) => string) | null;
 }
 export interface RangeModel {
     start: number;
@@ -144,6 +145,7 @@ export interface GridLineFlag {
 }
 export interface TwoDimChartElementsSettings {
     bar: BarChartSettings;
+    lineLike: LineLikeChartSettings;
 }
 export interface BarChartSettings {
     groupMaxDistance: number;
@@ -152,6 +154,29 @@ export interface BarChartSettings {
     maxBarWidth: number;
     minBarWidth: number;
 }
+export interface LineLikeChartSettings {
+    shape: LineLikeChartShapeOptions;
+}
+export interface LineLikeChartShapeOptions {
+    curve: LineLikeChartCurveOptions;
+}
+export interface LineLikeChartDashOptions {
+    on: boolean;
+    dashSize: number;
+    gapSize: number;
+}
+export declare enum LineCurveType {
+    monotoneX = 0,
+    monotoneY = 1,
+    basis = 2,
+    none = 3
+}
+interface LineLikeChartCurveOptions {
+    type: LineCurveType;
+}
+interface BarLikeChartHatchOptions {
+    on: boolean;
+}
 export interface DonutChartSettings extends Omit<DonutOptionsCanvas, "aggregatorPad" | "thickness"> {
     aggregator: DonutAggregatorModel;
     thickness: DonutThicknessOptions;
@@ -190,21 +215,47 @@ export interface ChartStyle {
     elementColors: string[];
     opacity: number;
 }
-export interface TwoDimensionalChartModel extends ChartModel {
+export interface ChartLegendModel {
+    markerShape: LegendMarkerShape;
+    barViewOptions: TwoDimensionalChartLegendBarModel;
+    lineViewOptions: TwoDimensionalChartLegendLineModel;
+}
+export declare type LegendMarkerShape = "default" | "bar" | "line";
+export interface TwoDimensionalChartLegendBarModel extends TwoDimensionalBarLikeChartViewModel {
+    width: number;
+}
+export interface TwoDimensionalChartLegendLineModel extends TwoDimensionalLineLikeChartViewModel {
+    width: number;
+}
+interface TwoDimensionalLineLikeChartModel {
+    lineViewOptions: TwoDimensionalLineLikeChartViewModel;
+    markersOptions: MarkersOptions;
+}
+interface TwoDimensionalLineLikeChartViewModel {
+    dashedStyles: LineLikeChartDashOptions;
+}
+interface TwoDimensionalBarLikeChartModel {
+    barViewOptions: TwoDimensionalBarLikeChartViewModel;
+}
+interface TwoDimensionalBarLikeChartViewModel {
+    hatch: BarLikeChartHatchOptions;
+}
+export interface TwoDimensionalChartModel extends ChartModel, TwoDimensionalLineLikeChartModel, TwoDimensionalBarLikeChartModel {
     type: TwoDimensionalChartType;
     data: TwoDimensionalChartDataModel;
     index: number;
     embeddedLabels: EmbeddedLabelTypeModel;
     isSegmented: boolean;
-    markersOptions: MarkersOptions;
+    legend: ChartLegendModel;
 }
-export interface IntervalChartModel extends ChartModel {
+export interface IntervalChartModel extends Omit<ChartModel, "legend"> {
     type: IntervalChartType;
     data: IntervalChartDataModel;
 }
 export interface PolarChartModel extends ChartModel {
     type: PolarChartType;
     data: PolarChartDataModel;
+    legend: ChartLegendModel;
 }
 export interface TwoDimensionalChartDataModel {
     valueFields: ValueField[];
@@ -246,6 +297,7 @@ interface ComponentBlockModel {
 }
 export interface LegendBlockModel {
     coordinate: LegendCoordinate;
+    static: StaticLegendBlockCanvas;
 }
 export interface LegendCoordinate {
     top: LegendCanvasCoordinate;

package/lib/model/model.js

@@ -1 +1,7 @@
-export {};
+export var LineCurveType;
+(function (LineCurveType) {
+    LineCurveType[LineCurveType["monotoneX"] = 0] = "monotoneX";
+    LineCurveType[LineCurveType["monotoneY"] = 1] = "monotoneY";
+    LineCurveType[LineCurveType["basis"] = 2] = "basis";
+    LineCurveType[LineCurveType["none"] = 3] = "none";
+})(LineCurveType || (LineCurveType = {}));

package/lib/model/modelBuilder.js

@@ -7,6 +7,7 @@ import { OtherComponentsModel } from './featuresModel/otherComponents';
 import { ConfigValidator } from './configsValidator/configValidator';
 import { ModelInstance } from './modelInstance/modelInstance';
 import { CardsModelInstance } from './notations/cards/cardsModel';
+import { TwoDimConfigReader } from './modelInstance/configReader';
 export var AxisType;
 (function (AxisType) {
     AxisType[AxisType["Key"] = 0] = "Key";
@@ -34,7 +35,7 @@ function getChartBlockModel(modelInstance) {
 function getOptions(config, designerConfig, modelInstance) {
     //TODO: migrate to polymorphism
     if (config.options.type === '2d') {
-        return TwoDimensionalModel.getOptions(config.options, designerConfig, modelInstance);
+        return TwoDimensionalModel.getOptions(new TwoDimConfigReader(config, designerConfig), designerConfig, modelInstance);
     }
     else if (config.options.type === 'polar') {
         return PolarModel.getOptions(config.options, designerConfig, modelInstance);
@@ -61,7 +62,7 @@ function getTransitions(designerConfig) {
     return designerConfig.transitions;
 }
 export function assembleModel(config, data, designerConfig) {
-    const modelInstance = ModelInstance.create(config, data);
+    const modelInstance = ModelInstance.create(config, data, designerConfig);
     if (!data || Object.keys(data).length === 0)
         return {
             blockCanvas: getBlockCanvas(config, modelInstance),
@@ -71,12 +72,16 @@ export function assembleModel(config, data, designerConfig) {
             dataSettings: null
         };
     resetFalsyValues(data);
-    const otherComponents = OtherComponentsModel.getOtherComponentsModel({ elementsOptions: designerConfig.elementsOptions, title: config.options.title }, modelInstance);
-    const marginModel = new MarginModel();
-    marginModel.initMargin(designerConfig, config, otherComponents, data, modelInstance);
+    const otherComponents = OtherComponentsModel.getOtherComponentsModel({
+        elementsOptions: designerConfig.elementsOptions,
+        legendConfig: designerConfig.canvas.legendBlock,
+        title: config.options.title
+    }, modelInstance);
+    const marginModel = new MarginModel(designerConfig, config);
+    marginModel.initMargin(otherComponents, modelInstance);
     DataManagerModel.initDataScope(config, data, designerConfig, otherComponents.legendBlock, modelInstance);
     if (config.options.type === '2d' && config.options.axis.key.visibility)
-        marginModel.recalcMarginByVerticalAxisLabel(modelInstance, config.options, designerConfig);
+        marginModel.recalcMarginByVerticalAxisLabel(modelInstance);
     const blockCanvas = getBlockCanvas(config, modelInstance);
     const chartBlock = getChartBlockModel(modelInstance);
     const options = getOptions(config, designerConfig, modelInstance);