mdt-charts 1.9.11 → 1.10.3

package/lib/engine/twoDimensionalNotation/bar/bar.js

@@ -0,0 +1,216 @@
+import { stack } from 'd3-shape';
+import { select } from 'd3-selection';
+import { EmbeddedLabels } from "../../features/embeddedLabels/embeddedLabels";
+import { EmbeddedLabelsHelper } from "../../features/embeddedLabels/embeddedLabelsHelper";
+import { BarHelper } from "./barHelper";
+import { sum } from "d3-array";
+import { DomHelper } from "../../helpers/domHelper";
+import { Helper } from "../../helpers/helper";
+export class Bar {
+    static render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize, barSettings, barsAmounts, isSegmented, firstBarIndex) {
+        if (isSegmented)
+            this.renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, firstBarIndex, barSettings);
+        else
+            this.renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, firstBarIndex, barSettings);
+    }
+    static update(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings, isSegmented) {
+        let promises;
+        if (isSegmented) {
+            promises = this.updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings);
+        }
+        else {
+            promises = this.updateGrouped(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings);
+        }
+        return promises;
+    }
+    static updateColors(block, chart) {
+        chart.data.valueFields.forEach((_vf, index) => {
+            const bars = block.getChartGroup(chart.index)
+                .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}${Helper.getCssClassesLine(Helper.getCssClassesWithElementIndex(chart.cssClasses, index))}`);
+            DomHelper.setChartStyle(bars, chart.style, index, 'fill');
+        });
+    }
+    static getAllBarsForChart(block, chartCssClasses) {
+        return block.getSvg().selectAll(`rect.${this.barItemClass}${Helper.getCssClassesLine(chartCssClasses)}`);
+    }
+    static renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, firstBarIndex, barSettings) {
+        chart.data.valueFields.forEach((field, index) => {
+            const bars = block.getChartGroup(chart.index)
+                .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}${Helper.getCssClassesLine(Helper.getCssClassesWithElementIndex(chart.cssClasses, index))}`)
+                .data(data)
+                .enter()
+                .append('rect')
+                .attr('class', this.barItemClass)
+                .style('clip-path', `url(#${block.getClipPathId()})`);
+            const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, field.name, blockSize, BarHelper.getBarIndex(barsAmounts, chart.index - firstBarIndex) + index, sum(barsAmounts), barSettings);
+            this.fillBarAttrs(bars, barAttrs);
+            DomHelper.setCssClasses(bars, Helper.getCssClassesWithElementIndex(chart.cssClasses, index));
+            DomHelper.setChartStyle(bars, chart.style, index, 'fill');
+            this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
+            if (chart.embeddedLabels !== 'none')
+                EmbeddedLabels.render(block, bars, barAttrs, EmbeddedLabelsHelper.getLabelField(chart.embeddedLabels, chart.data.valueFields, keyField, index), chart.embeddedLabels, keyAxisOrient, blockSize, margin, index, chart.cssClasses);
+        });
+    }
+    static renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, firstBarIndex, barSettings) {
+        const stackedData = stack().keys(chart.data.valueFields.map(field => field.name))(data);
+        let groups = block.getChartGroup(chart.index)
+            .selectAll(`g.${this.barSegmentGroupClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
+            .data(stackedData);
+        if (groups.empty())
+            groups = groups
+                .data(stackedData)
+                .enter()
+                .append('g')
+                .attr('class', this.barSegmentGroupClass);
+        const bars = groups
+            .selectAll(`rect${Helper.getCssClassesLine(chart.cssClasses)}`)
+            .data(d => d)
+            .enter()
+            .append('rect')
+            .attr('class', this.barItemClass)
+            .style('clip-path', `url(#${block.getClipPathId()})`);
+        const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, blockSize, BarHelper.getBarIndex(barsAmounts, chart.index) - firstBarIndex, sum(barsAmounts), barSettings);
+        this.fillBarAttrs(bars, barAttrs);
+        this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
+        DomHelper.setCssClasses(groups, chart.cssClasses);
+        DomHelper.setCssClasses(bars, chart.cssClasses); // Для обозначения принадлежности бара к конкретному чарту
+        const thisClass = this;
+        groups.each(function (d, i) {
+            DomHelper.setCssClasses(select(this).selectAll(`rect${Helper.getCssClassesLine(chart.cssClasses)}`), Helper.getCssClassesWithElementIndex(chart.cssClasses, i)); // Для обозначения принадлежности бара к конкретной части стака
+            thisClass.setSegmentColor(select(this).selectAll(Helper.getCssClassesLine(chart.cssClasses)), chart.style.elementColors, i);
+        });
+    }
+    static updateGrouped(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings) {
+        const promises = [];
+        chart.data.valueFields.forEach((valueField, index) => {
+            const indexesOfRemoved = [];
+            block.getChartGroup(chart.index)
+                .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${index}`)
+                .filter((d, i) => {
+                if (newData.findIndex(row => row[keyField.name] === d[keyField.name]) === -1) {
+                    indexesOfRemoved.push(i); // Набор индексов для встроенных лейблов
+                    return true;
+                }
+                return false;
+            })
+                .transition()
+                .duration(block.transitionManager.durations.elementFadeOut)
+                .style('opacity', 0)
+                .remove();
+            const bars = block.getChartGroup(chart.index)
+                .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${index}`)
+                .filter(d => newData.findIndex(row => row[keyField.name] === d[keyField.name]) !== -1)
+                .style('opacity', 1)
+                .data(newData);
+            const newBars = bars
+                .enter()
+                .append('rect')
+                .attr('class', this.barItemClass)
+                .style('clip-path', `url(#${block.getClipPathId()})`);
+            const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, valueField.name, blockSize, BarHelper.getBarIndex(barsAmounts, chart.index) + index - firstBarIndex, sum(barsAmounts), barSettings);
+            const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate)
+                .then(() => {
+                bars.style('opacity', null);
+                this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
+            });
+            this.fillBarAttrs(newBars, barAttrs);
+            promises.push(prom);
+            this.setInitialAttrsInfo(newBars, keyAxisOrient, barSettings);
+            DomHelper.setCssClasses(newBars, Helper.getCssClassesWithElementIndex(chart.cssClasses, index));
+            DomHelper.setChartStyle(newBars, chart.style, index, 'fill');
+            if (chart.embeddedLabels !== 'none') {
+                EmbeddedLabels.removeUnused(block, chart.cssClasses, index, indexesOfRemoved);
+                EmbeddedLabels.update(block, bars, keyAxisOrient, barAttrs, margin, valueField, chart.embeddedLabels, blockSize, newData, index, chart.cssClasses);
+                if (!newBars.empty())
+                    EmbeddedLabels.render(block, newBars, barAttrs, valueField, chart.embeddedLabels, keyAxisOrient, blockSize, margin, index, chart.cssClasses);
+                EmbeddedLabels.restoreRemoved(block, bars, barAttrs, valueField, chart.embeddedLabels, keyAxisOrient, blockSize, margin, index, chart.cssClasses, keyField.name);
+            }
+        });
+        return promises;
+    }
+    static updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings) {
+        const stackedData = stack().keys(chart.data.valueFields.map(field => field.name))(newData);
+        block.getChartGroup(chart.index)
+            .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
+            .filter(d => newData.findIndex(row => row[keyField.name] === d.data[keyField.name]) === -1)
+            .transition()
+            .duration(block.transitionManager.durations.elementFadeOut)
+            .style('opacity', 0)
+            .remove();
+        const groups = block.getChartGroup(chart.index)
+            .selectAll(`g.${this.barSegmentGroupClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
+            .data(stackedData);
+        const bars = groups
+            .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
+            .filter(d => newData.findIndex(row => row[keyField.name] === d.data[keyField.name]) !== -1)
+            .style('opacity', 1)
+            .data(d => d);
+        const newBars = bars.enter()
+            .append('rect')
+            .attr('class', this.barItemClass)
+            .style('clip-path', `url(#${block.getClipPathId()})`);
+        const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, blockSize, BarHelper.getBarIndex(barsAmounts, chart.index) - firstBarIndex, sum(barsAmounts), barSettings);
+        const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate)
+            .then(() => {
+            this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
+            bars.style('opacity', null);
+        });
+        this.fillBarAttrs(newBars, barAttrs);
+        this.setInitialAttrsInfo(newBars, keyAxisOrient, barSettings);
+        DomHelper.setCssClasses(newBars, chart.cssClasses);
+        const thisClass = this;
+        groups.each(function (d, i) {
+            DomHelper.setCssClasses(select(this).selectAll(`rect${Helper.getCssClassesLine(chart.cssClasses)}`), Helper.getCssClassesWithElementIndex(chart.cssClasses, i)); // Для обозначения принадлежности бара к конкретной части стака
+            thisClass.setSegmentColor(select(this).selectAll(Helper.getCssClassesLine(chart.cssClasses)), chart.style.elementColors, i);
+        });
+        return [prom];
+    }
+    static fillBarAttrs(bars, barAttrs, transitionDuration = 0) {
+        return new Promise((resolve) => {
+            if (bars.size() === 0) {
+                resolve('');
+                return;
+            }
+            let barsHander = bars;
+            if (transitionDuration > 0) {
+                barsHander = barsHander
+                    .interrupt()
+                    .transition()
+                    .duration(transitionDuration)
+                    .on('end', () => resolve(''));
+            }
+            barsHander.attr('x', d => barAttrs.x(d))
+                .attr('y', d => barAttrs.y(d))
+                .attr('height', d => barAttrs.height(d))
+                .attr('width', d => barAttrs.width(d));
+            if (transitionDuration <= 0)
+                resolve('');
+        });
+    }
+    static setSegmentColor(segments, colorPalette, segmentedIndex) {
+        segments.style('fill', colorPalette[segmentedIndex % colorPalette.length]);
+    }
+    /**
+     * Устнановка координат для удобного обновления.
+     */
+    static setInitialAttrsInfo(bars, keyAxisOrient, barSettings) {
+        bars.each(function () {
+            const width = DomHelper.getSelectionNumericAttr(select(this), 'width');
+            const height = DomHelper.getSelectionNumericAttr(select(this), 'height');
+            const orient = keyAxisOrient === 'left' || keyAxisOrient === 'right' ? 'horizontal' : 'vertical';
+            let scaleSize = 0.06 * (orient === 'vertical' ? width : height);
+            scaleSize = scaleSize > barSettings.barDistance / 2 ? barSettings.barDistance / 2 : scaleSize;
+            this.attrs = {
+                x: DomHelper.getSelectionNumericAttr(select(this), 'x'),
+                y: DomHelper.getSelectionNumericAttr(select(this), 'y'),
+                width,
+                height,
+                orient,
+                scaleSize
+            };
+        });
+    }
+}
+Bar.barItemClass = 'bar-item';
+Bar.barItemCloneClass = 'bar-item-clone';
+Bar.barSegmentGroupClass = 'bar-segment-group';

package/lib/engine/twoDimensionalNotation/bar/barHelper.d.ts

@@ -0,0 +1,24 @@
+import { BarChartSettings, BlockMargin, Orient, TwoDimensionalChartModel } from "../../../model/model";
+import { Scales } from "../../features/scale/scale";
+import { MdtChartsDataRow, Size } from "../../../config/config";
+export interface BarAttrsHelper {
+    x: (dataRow: MdtChartsDataRow) => number;
+    y: (dataRow: MdtChartsDataRow) => number;
+    width: (dataRow: MdtChartsDataRow) => number;
+    height: (dataRow: MdtChartsDataRow) => number;
+}
+export declare class BarHelper {
+    static getGroupedBarAttrs(keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyField: string, valueFieldName: string, blockSize: Size, barIndex: number, barsAmount: number, barSettings: BarChartSettings): BarAttrsHelper;
+    static getStackedBarAttr(keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyField: string, blockSize: Size, barIndex: number, barsAmount: number, barSettings: BarChartSettings): BarAttrsHelper;
+    static getBarsInGroupAmount(charts: TwoDimensionalChartModel[]): number[];
+    /**
+     * Получение индекса бара среди всх графиков и value-филдов. Используется для того, чтобы узнать, какой по счету в группе
+     * этот бар идет (сегментированный всегда один, группированный - количество value-филдов).
+     * @param barsAmounts
+     * @param chartIndex
+     */
+    static getBarIndex(barsAmounts: number[], chartIndex: number): number;
+    private static setBarAttrsByKey;
+    private static setGroupedBarAttrsByValue;
+    private static setSegmentedBarAttrsByValue;
+}

package/lib/engine/twoDimensionalNotation/bar/barHelper.js

@@ -0,0 +1,103 @@
+import { Scale } from "../../features/scale/scale";
+import { Helper } from "../../helpers/helper";
+export class BarHelper {
+    static getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField, valueFieldName, blockSize, barIndex, barsAmount, barSettings) {
+        const attrs = {
+            x: null,
+            y: null,
+            width: null,
+            height: null
+        };
+        this.setBarAttrsByKey(attrs, keyAxisOrient, scales.key, margin, keyField, barIndex, barsAmount, barSettings, false);
+        this.setGroupedBarAttrsByValue(attrs, keyAxisOrient, margin, scales.value, valueFieldName, blockSize);
+        return attrs;
+    }
+    static getStackedBarAttr(keyAxisOrient, scales, margin, keyField, blockSize, barIndex, barsAmount, barSettings) {
+        const attrs = {
+            x: null,
+            y: null,
+            width: null,
+            height: null
+        };
+        this.setBarAttrsByKey(attrs, keyAxisOrient, scales.key, margin, keyField, barIndex, barsAmount, barSettings, true);
+        this.setSegmentedBarAttrsByValue(attrs, keyAxisOrient, scales.value, margin, blockSize);
+        return attrs;
+    }
+    static getBarsInGroupAmount(charts) {
+        let amounts = [];
+        charts.forEach((chart) => {
+            if (chart.type === 'bar' && chart.isSegmented)
+                amounts.push(1); // Сегментированный бар содержит все свои valueFields в одном баре
+            else if (chart.type === 'bar')
+                amounts.push(chart.data.valueFields.length);
+        });
+        return amounts;
+    }
+    /**
+     * Получение индекса бара среди всх графиков и value-филдов. Используется для того, чтобы узнать, какой по счету в группе
+     * этот бар идет (сегментированный всегда один, группированный - количество value-филдов).
+     * @param barsAmounts
+     * @param chartIndex
+     */
+    static getBarIndex(barsAmounts, chartIndex) {
+        if (barsAmounts.length < 2)
+            return 0;
+        let index = 0;
+        barsAmounts.forEach((chartBars, i) => {
+            if (i < chartIndex) {
+                index += chartBars;
+            }
+        });
+        return index;
+    }
+    static setBarAttrsByKey(attrs, keyAxisOrient, scaleKey, margin, keyField, barIndex, barsAmount, barSettings, isSegmented) {
+        const barStep = (Scale.getScaleBandWidth(scaleKey) - barSettings.barDistance * (barsAmount - 1)) / barsAmount; // Space for one bar
+        const barSize = barStep > barSettings.maxBarWidth ? barSettings.maxBarWidth : barStep;
+        const barDiff = (barStep - barSize) * barsAmount / 2; // if bar bigger than maxWidth, diff for x coordinate
+        const barPad = barSize * barIndex + barSettings.barDistance * barIndex + barDiff; // Отступ бара от края. Зависит от количества баров в одной группе и порядке текущего бара
+        if (keyAxisOrient === 'top' || keyAxisOrient === 'bottom') {
+            attrs.x = d => scaleKey(Helper.getKeyFieldValue(d, keyField, isSegmented)) + margin.left + barPad;
+            attrs.width = d => barSize;
+        }
+        if (keyAxisOrient === 'left' || keyAxisOrient === 'right') {
+            attrs.y = d => scaleKey(Helper.getKeyFieldValue(d, keyField, isSegmented)) + margin.top + barPad;
+            attrs.height = d => barSize;
+        }
+    }
+    static setGroupedBarAttrsByValue(attrs, keyAxisOrient, margin, scaleValue, valueFieldName, blockSize) {
+        if (keyAxisOrient === 'top') {
+            attrs.y = d => margin.top;
+            attrs.height = d => Helper.getValueOrZero(scaleValue(d[valueFieldName]));
+        }
+        if (keyAxisOrient === 'bottom') {
+            attrs.y = d => scaleValue(d[valueFieldName]) + margin.top;
+            attrs.height = d => Helper.getValueOrZero(blockSize.height - margin.top - margin.bottom - scaleValue(d[valueFieldName]));
+        }
+        if (keyAxisOrient === 'left') {
+            attrs.x = d => margin.left + 1;
+            attrs.width = d => Helper.getValueOrZero(scaleValue(d[valueFieldName]));
+        }
+        if (keyAxisOrient === 'right') {
+            attrs.x = d => scaleValue(d[valueFieldName]) + margin.left;
+            attrs.width = d => Helper.getValueOrZero(blockSize.width - margin.left - margin.right - scaleValue(d[valueFieldName]));
+        }
+    }
+    static setSegmentedBarAttrsByValue(attrs, keyAxisOrient, scaleValue, margin, blockSize) {
+        if (keyAxisOrient === 'top') {
+            attrs.y = d => margin.top + scaleValue(d[0]);
+            attrs.height = d => Helper.getValueOrZero(scaleValue(d[1] - d[0]));
+        }
+        if (keyAxisOrient === 'bottom') {
+            attrs.y = d => scaleValue(d[1]) + margin.top;
+            attrs.height = d => Helper.getValueOrZero(blockSize.height - margin.top - margin.bottom - scaleValue(d[1] - d[0]));
+        }
+        if (keyAxisOrient === 'left') {
+            attrs.x = d => margin.left + scaleValue(d[0]) + 1;
+            attrs.width = d => Helper.getValueOrZero(scaleValue(d[1] - d[0]));
+        }
+        if (keyAxisOrient === 'right') {
+            attrs.x = d => scaleValue(d[1]) + margin.left;
+            attrs.width = d => Helper.getValueOrZero(blockSize.width - margin.left - margin.right - scaleValue(d[1] - d[0]));
+        }
+    }
+}

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

@@ -0,0 +1,17 @@
+import { BlockMargin, Field, Orient, TwoDimensionalChartModel } from "../../../model/model";
+import { Scales } from "../../features/scale/scale";
+import { Block } from "../../block/block";
+import { MdtChartsDataRow } from '../../../config/config';
+export declare class Line {
+    static readonly lineChartClass = "line";
+    static render(block: Block, scales: Scales, data: MdtChartsDataRow[], keyField: Field, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel): void;
+    static update(block: Block, scales: Scales, newData: MdtChartsDataRow[], keyField: Field, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel): Promise<any>[];
+    static updateColors(block: Block, chart: TwoDimensionalChartModel): void;
+    private static renderGrouped;
+    private static renderSegmented;
+    private static updateGrouped;
+    private static updateSegmeneted;
+    private static updateGroupedPath;
+    private static updateSegmentedPath;
+    private static setSegmentColor;
+}

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

@@ -0,0 +1,132 @@
+import { stack } from 'd3-shape';
+import { select } from 'd3-selection';
+import { MarkDot } from "../../features/markDots/markDot";
+import { LineHelper } from './lineHelper';
+import { DomHelper } from '../../helpers/domHelper';
+import { Helper } from '../../helpers/helper';
+export class Line {
+    static render(block, scales, data, keyField, margin, keyAxisOrient, chart) {
+        if (chart.isSegmented)
+            this.renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart);
+        else
+            this.renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart);
+    }
+    static update(block, scales, newData, keyField, margin, keyAxisOrient, chart) {
+        let promises;
+        if (chart.isSegmented) {
+            promises = this.updateSegmeneted(block, scales, newData, keyField, margin, keyAxisOrient, chart);
+        }
+        else {
+            promises = this.updateGrouped(block, scales, newData, keyField, margin, keyAxisOrient, chart);
+        }
+        return promises;
+    }
+    static updateColors(block, chart) {
+        chart.data.valueFields.forEach((_vf, valueIndex) => {
+            const path = block.getChartGroup(chart.index)
+                .select(`.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
+            DomHelper.setChartStyle(path, chart.style, valueIndex, 'stroke');
+            MarkDot.updateColors(block, chart, valueIndex);
+        });
+    }
+    static renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart) {
+        chart.data.valueFields.forEach((valueField, valueIndex) => {
+            const lineGenerator = LineHelper.getLineGenerator(keyAxisOrient, scales, keyField.name, valueField.name, margin);
+            const path = block.getChartGroup(chart.index)
+                .append('path')
+                .attr('d', lineGenerator(data))
+                .attr('class', this.lineChartClass)
+                .style('fill', 'none')
+                .style('clip-path', `url(#${block.getClipPathId()})`)
+                .style('pointer-events', 'none');
+            DomHelper.setCssClasses(path, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
+            DomHelper.setChartStyle(path, chart.style, valueIndex, 'stroke');
+            MarkDot.render(block, data, keyAxisOrient, scales, margin, keyField.name, valueIndex, valueField.name, chart);
+        });
+    }
+    static renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart) {
+        const stackedData = stack().keys(chart.data.valueFields.map(field => field.name))(data);
+        const lineGenerator = LineHelper.getSegmentedLineGenerator(keyAxisOrient, scales, keyField.name, margin);
+        const lines = block.getChartGroup(chart.index)
+            .selectAll(`.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
+            .data(stackedData)
+            .enter()
+            .append('path')
+            .attr('d', d => lineGenerator(d))
+            .attr('class', this.lineChartClass)
+            .style('fill', 'none')
+            .style('clip-path', `url(#${block.getClipPathId()})`)
+            .style('pointer-events', 'none');
+        lines.each(function (d, i) {
+            DomHelper.setCssClasses(select(this), Helper.getCssClassesWithElementIndex(chart.cssClasses, i));
+        });
+        this.setSegmentColor(lines, chart.style.elementColors);
+        stackedData.forEach((dataset, stackIndex) => {
+            MarkDot.render(block, dataset, keyAxisOrient, scales, margin, keyField.name, stackIndex, '1', chart);
+        });
+    }
+    static updateGrouped(block, scales, newData, keyField, margin, keyAxisOrient, chart) {
+        const promises = [];
+        chart.data.valueFields.forEach((valueField, valueFieldIndex) => {
+            const lineGenerator = LineHelper.getLineGenerator(keyAxisOrient, scales, keyField.name, valueField.name, margin);
+            const lineObject = block.getChartGroup(chart.index)
+                .select(`.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueFieldIndex}`);
+            const prom = this.updateGroupedPath(block, lineObject, lineGenerator, newData);
+            promises.push(prom);
+            MarkDot.update(block, newData, keyAxisOrient, scales, margin, keyField.name, valueFieldIndex, valueField.name, chart);
+        });
+        return promises;
+    }
+    static updateSegmeneted(block, scales, newData, keyField, margin, keyAxisOrient, chart) {
+        const stackedData = stack().keys(chart.data.valueFields.map(field => field.name))(newData);
+        const lineGenerator = LineHelper.getSegmentedLineGenerator(keyAxisOrient, scales, keyField.name, margin);
+        const lines = block.getChartGroup(chart.index)
+            .selectAll(`path.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
+            .data(stackedData);
+        const prom = this.updateSegmentedPath(block, lines, lineGenerator);
+        lines.each((dataset, index) => {
+            MarkDot.update(block, dataset, keyAxisOrient, scales, margin, keyField.name, index, '1', chart);
+        });
+        return [prom];
+    }
+    static updateGroupedPath(block, lineObject, lineGenerator, newData) {
+        return new Promise(resolve => {
+            if (lineObject.size() === 0) {
+                resolve('');
+                return;
+            }
+            let lineHandler = lineObject;
+            if (block.transitionManager.durations.chartUpdate > 0)
+                lineHandler = lineHandler.interrupt()
+                    .transition()
+                    .duration(block.transitionManager.durations.chartUpdate)
+                    .on('end', () => resolve(''));
+            lineHandler
+                .attr('d', lineGenerator(newData));
+            if (block.transitionManager.durations.chartUpdate <= 0)
+                resolve('');
+        });
+    }
+    static updateSegmentedPath(block, linesObjects, lineGenerator) {
+        return new Promise(resolve => {
+            if (linesObjects.size() === 0) {
+                resolve('');
+                return;
+            }
+            let linesHandler = linesObjects;
+            if (block.transitionManager.durations.chartUpdate > 0)
+                linesHandler = linesHandler.interrupt()
+                    .transition()
+                    .duration(block.transitionManager.durations.chartUpdate)
+                    .on('end', () => resolve(''));
+            linesHandler
+                .attr('d', d => lineGenerator(d));
+            if (block.transitionManager.durations.chartUpdate <= 0)
+                resolve('');
+        });
+    }
+    static setSegmentColor(segments, colorPalette) {
+        segments.style('stroke', (d, i) => colorPalette[i % colorPalette.length]);
+    }
+}
+Line.lineChartClass = 'line';

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

@@ -0,0 +1,8 @@
+import { Line as ILine } from 'd3-shape';
+import { MdtChartsDataRow } from '../../../config/config';
+import { Orient, BlockMargin } 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>;
+}

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

@@ -0,0 +1,28 @@
+import { line } from 'd3-shape';
+import { Scale } from "../../features/scale/scale";
+export class LineHelper {
+    static getLineGenerator(keyAxisOrient, scales, keyFieldName, valueFieldName, margin) {
+        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);
+        }
+        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);
+        }
+    }
+    static getSegmentedLineGenerator(keyAxisOrient, scales, keyFieldName, margin) {
+        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);
+        }
+        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);
+        }
+    }
+}

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.d.ts

@@ -0,0 +1,11 @@
+import { MdtChartsDataSource } from "../../config/config";
+import { Model } from "../../model/model";
+import { Block } from "../block/block";
+import Engine from "../engine";
+export declare class TwoDimensionalManager {
+    static render(engine: Engine, model: Model): void;
+    static updateData(block: Block, model: Model, data: MdtChartsDataSource): void;
+    static updateColors(block: Block, model: Model): void;
+    private static renderCharts;
+    private static updateCharts;
+}

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -0,0 +1,101 @@
+import { ElementHighlighter } from "../elementHighlighter/elementHighlighter";
+import { Axis } from "../features/axis/axis";
+import { EmbeddedLabels } from "../features/embeddedLabels/embeddedLabels";
+import { GridLine } from "../features/gridLine/gridLine";
+import { Legend } from "../features/legend/legend";
+import { RecordOverflowAlert } from "../features/recordOverflowAlert/recordOverflowAlert";
+import { Scale } from "../features/scale/scale";
+import { TipBox } from "../features/tipBox/tipBox";
+import { Title } from "../features/title/title";
+import { Tooltip } from "../features/tolltip/tooltip";
+import { Helper } from "../helpers/helper";
+import { Area } from "./area/area";
+import { Bar } from "./bar/bar";
+import { BarHelper } from "./bar/barHelper";
+import { Line } from "./line/line";
+export class TwoDimensionalManager {
+    static render(engine, model) {
+        const options = model.options;
+        const scales = Scale.getScales(options.scale.key, options.scale.value, model.chartSettings.bar);
+        engine.block.scales = scales;
+        engine.block.renderSvg(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, options.scale.key);
+        this.renderCharts(engine.block, options.charts, scales, engine.data, options.data, model.chartBlock.margin, options.axis.key.orient, model.chartSettings.bar, model.blockCanvas.size);
+        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);
+        Tooltip.render(engine.block, model, engine.data, model.otherComponents.tooltipBlock, scales);
+        if (model.dataSettings.scope.hidedRecordsAmount !== 0)
+            RecordOverflowAlert.render(engine.block, model.dataSettings.scope.hidedRecordsAmount, 'top', options.orient);
+        engine.block.getSvg()
+            .on('click', (e) => {
+            if (e.target === engine.block.getSvg().node())
+                engine.block.filterEventManager.clearKeysFor2D(options);
+        });
+    }
+    static updateData(block, model, data) {
+        block.transitionManager.interruptTransitions();
+        block.filterEventManager.updateData(data[model.options.data.dataSource]);
+        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, model.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);
+        GridLine.update(block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, options.scale.key);
+        const promises = this.updateCharts(block, options.charts, scales, data, model.options.data, model.chartBlock.margin, options.axis.key.orient, model.blockCanvas.size, model.chartSettings.bar);
+        Promise.all(promises)
+            .then(() => {
+            block.filterEventManager.event2DUpdate(options);
+            block.filterEventManager.registerEventFor2D(scales.key, model.chartBlock.margin, model.blockCanvas.size, options);
+            Tooltip.render(block, model, data, model.otherComponents.tooltipBlock, scales);
+        });
+        RecordOverflowAlert.update(block, model.dataSettings.scope.hidedRecordsAmount, 'top', options.orient);
+    }
+    static updateColors(block, model) {
+        Legend.updateColors(block, model.options);
+        model.options.charts.forEach(chart => {
+            if (chart.type === 'bar')
+                Bar.updateColors(block, chart);
+            else if (chart.type === 'line')
+                Line.updateColors(block, chart);
+            else if (chart.type === 'area')
+                Area.updateColors(block, chart);
+        });
+    }
+    static renderCharts(block, charts, scales, data, dataOptions, margin, keyAxisOrient, barSettings, blockSize) {
+        block.renderChartClipPath(margin, blockSize);
+        block.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'));
+            else if (chart.type === 'line')
+                Line.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);
+    }
+    static updateCharts(block, charts, scales, data, dataOptions, margin, keyAxisOrient, blockSize, barSettings) {
+        block.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);
+            }
+            else if (chart.type === 'line') {
+                proms = Line.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);
+            }
+            promises.push(...proms);
+        });
+        return promises;
+    }
+}