mdt-charts 1.20.0 → 1.21.0

package/lib/engine/features/valueLabelsCollision/valueLabelsCollisionHelper.js

@@ -0,0 +1,47 @@
+export class ValueLabelsCollisionHelper {
+    static calculateValueLabelsVisibility(elements) {
+        const sortedLabels = elements.sort((label1, label2) => label1.boundingClientRect.x - label2.boundingClientRect.x);
+        const activeLabels = [];
+        const labelsVisibility = new Map();
+        elements.forEach(label => {
+            labelsVisibility.set(label.index, { index: label.index, isVisible: true });
+        });
+        sortedLabels.forEach(currentLabel => {
+            for (let i = activeLabels.length - 1; i >= 0; i--) {
+                const activeLabel = activeLabels[i];
+                if (activeLabel.boundingClientRect.x + activeLabel.boundingClientRect.width < currentLabel.boundingClientRect.x) {
+                    activeLabels.splice(i, 1);
+                }
+            }
+            for (const activeLabel of activeLabels) {
+                if (this.isOverlapping(currentLabel.boundingClientRect, activeLabel.boundingClientRect)) {
+                    if (currentLabel.boundingClientRect.x > activeLabel.boundingClientRect.x) {
+                        labelsVisibility.get(currentLabel.index).isVisible = false;
+                        break;
+                    }
+                    else if (currentLabel.boundingClientRect.x === activeLabel.boundingClientRect.x) {
+                        if (currentLabel.boundingClientRect.y > activeLabel.boundingClientRect.y) {
+                            labelsVisibility.get(currentLabel.index).isVisible = false;
+                            break;
+                        }
+                        else
+                            labelsVisibility.get(activeLabel.index).isVisible = false;
+                    }
+                    else
+                        labelsVisibility.get(activeLabel.index).isVisible = false;
+                }
+            }
+            if (labelsVisibility.get(currentLabel.index).isVisible) {
+                activeLabels.push(currentLabel);
+            }
+        });
+        return labelsVisibility;
+    }
+    static isOverlapping(rect1, rect2) {
+        return !(rect1.x + rect1.width < rect2.x ||
+            rect1.x > rect2.x + rect2.width ||
+            rect1.y + rect1.height < rect2.y ||
+            rect1.y > rect2.y + rect2.height);
+    }
+    ;
+}

package/lib/engine/helpers/domHelper.d.ts

@@ -25,6 +25,7 @@ export declare class DomHelper {
      * @returns Выборка по ключам
      */
     static getChartElementsByKeys<T extends BaseType>(initialSelection: Selection<T, MdtChartsDataRow, BaseType, unknown>, dataWrapped: boolean, keyFieldName: string, keyValues: string[], condition?: SelectionCondition): Selection<T, any, BaseType, unknown>;
+    static setChartGradientStyle(element: Selection<BaseType, unknown, BaseType, unknown>, chartIndex: number, valueIndex: number): void;
     private static setChartOpacity;
 }
 export {};

package/lib/engine/helpers/domHelper.js

@@ -1,5 +1,6 @@
 import { MarkDot } from "../features/markDots/markDot";
 import { Bar } from "../twoDimensionalNotation/bar/bar";
+import { getGradientId } from "../../model/notations/twoDimensional/styles";
 export var SelectionCondition;
 (function (SelectionCondition) {
     SelectionCondition[SelectionCondition["Include"] = 0] = "Include";
@@ -62,6 +63,9 @@ export class DomHelper {
             return condition === SelectionCondition.Exclude ? i === -1 : i !== -1;
         });
     }
+    static setChartGradientStyle(element, chartIndex, valueIndex) {
+        element.style('fill', `url(#${getGradientId(chartIndex, valueIndex)})`);
+    }
     static setChartOpacity(elements, opacity) {
         elements.attr('opacity', opacity);
     }

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

@@ -1,17 +1,32 @@
-import { BlockMargin, Field, Orient, TwoDimensionalChartModel } from "../../../model/model";
+import { BlockMargin, Field, LineLikeChartSettings, Orient, TwoDimensionalChartModel } from "../../../model/model";
 import { Scales } from "../../features/scale/scale";
 import { Block } from "../../block/block";
 import { MdtChartsDataRow, Size } from '../../../config/config';
+interface AreaOptions {
+    staticSettings: LineLikeChartSettings;
+}
 export declare class Area {
+    private readonly options;
     static readonly areaChartClass = "area";
-    static render(block: Block, scales: Scales, data: MdtChartsDataRow[], keyField: Field, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size): void;
-    static update(block: Block, scales: Scales, newData: MdtChartsDataRow[], keyField: Field, margin: BlockMargin, chart: TwoDimensionalChartModel, keyAxisOrient: Orient, blockSize: Size): Promise<any>[];
-    static updateColors(block: Block, chart: TwoDimensionalChartModel): void;
-    private static renderGrouped;
-    private static renderSegmented;
-    private static updateGrouped;
-    private static updateSegmented;
-    private static updateGroupedPath;
-    private static updateSegmentedPath;
-    private static setSegmentColor;
+    static readonly areaBorderLineClass = "area-border-line";
+    static get(options: AreaOptions): Area;
+    constructor(options: AreaOptions);
+    render(block: Block, scales: Scales, data: MdtChartsDataRow[], keyField: Field, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size): void;
+    update(block: Block, scales: Scales, newData: MdtChartsDataRow[], keyField: Field, margin: BlockMargin, chart: TwoDimensionalChartModel, keyAxisOrient: Orient, blockSize: Size): Promise<any>[];
+    updateColors(block: Block, chart: TwoDimensionalChartModel): void;
+    private renderGrouped;
+    private renderSegmented;
+    private updateGrouped;
+    private updateSegmented;
+    private updateGroupedPath;
+    private updateSegmentedPath;
+    private setSegmentColor;
+    private setChartFillStyle;
+    private createAreaGeneratorFactory;
+    private createLineGeneratorFactory;
+    private renderArea;
+    private renderBorderLine;
+    private updateArea;
+    private updateBorderLine;
 }
+export {};

package/lib/engine/twoDimensionalNotation/area/area.js

@@ -1,17 +1,25 @@
 import { select } from 'd3-selection';
 import { MarkDot } from "../../features/markDots/markDot";
-import { AreaHelper } from './areaHelper';
+import { AreaGeneratorFactory } from './areaHelper';
 import { DomHelper } from '../../helpers/domHelper';
 import { Helper } from '../../helpers/helper';
 import { getStackedDataWithOwn } from '../bar/stackedData/dataStacker';
+import { LineGeneratorFactory } from "../../../engine/twoDimensionalNotation/line/lineHelper";
+import { Line } from "../../../engine/twoDimensionalNotation/line/line";
 export class Area {
-    static render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize) {
+    constructor(options) {
+        this.options = options;
+    }
+    static get(options) {
+        return new Area(options);
+    }
+    render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize) {
         if (chart.isSegmented)
             this.renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart);
         else
-            this.renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize);
+            this.renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart);
     }
-    static update(block, scales, newData, keyField, margin, chart, keyAxisOrient, blockSize) {
+    update(block, scales, newData, keyField, margin, chart, keyAxisOrient, blockSize) {
         let promises;
         if (chart.isSegmented) {
             promises = this.updateSegmented(block, scales, newData, keyField, margin, chart, keyAxisOrient);
@@ -21,38 +29,42 @@ export class Area {
         }
         return promises;
     }
-    static updateColors(block, chart) {
+    updateColors(block, chart) {
         chart.data.valueFields.forEach((_vf, valueIndex) => {
-            const path = block.svg.getChartGroup(chart.index)
-                .select(`.${this.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
-            DomHelper.setChartStyle(path, chart.style, valueIndex, 'fill');
+            const chartGroup = block.svg.getChartGroup(chart.index);
+            const areaPath = chartGroup
+                .select(`.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
+            this.setChartFillStyle(chart, areaPath, valueIndex);
+            if (chart.areaViewOptions.borderLine.on) {
+                const borderLinePath = chartGroup
+                    .select(`.${Area.areaBorderLineClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
+                DomHelper.setChartElementColor(borderLinePath, chart.style.elementColors, valueIndex, 'stroke');
+            }
             MarkDot.updateColors(block, chart, valueIndex);
         });
     }
-    static renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize) {
+    renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart) {
+        const areaGeneratorFactory = this.createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
+        const lineGeneratorFactory = chart.areaViewOptions.borderLine.on
+            && this.createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
         chart.data.valueFields.forEach((field, valueIndex) => {
-            const area = AreaHelper.getGroupedAreaGenerator(keyAxisOrient, scales, margin, keyField.name, field.name, blockSize);
-            const path = block.svg.getChartGroup(chart.index)
-                .append('path')
-                .attr('d', area(data))
-                .attr('class', this.areaChartClass)
-                .style('clip-path', `url(#${block.svg.getClipPathId()})`)
-                .style('pointer-events', 'none');
-            DomHelper.setCssClasses(path, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
-            DomHelper.setChartStyle(path, chart.style, valueIndex, 'fill');
+            this.renderArea(areaGeneratorFactory, block, chart, data, field, valueIndex);
+            if (lineGeneratorFactory)
+                this.renderBorderLine(lineGeneratorFactory, block, chart, data, field, valueIndex);
             MarkDot.render(block, data, keyAxisOrient, scales, margin, keyField.name, valueIndex, field.name, chart);
         });
     }
-    static renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart) {
+    renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart) {
         const stackedData = getStackedDataWithOwn(data, chart.data.valueFields.map(field => field.name));
-        const areaGenerator = AreaHelper.getSegmentedAreaGenerator(keyAxisOrient, scales, margin, keyField.name);
+        const areaGeneratorFactory = this.createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
+        const areaGenerator = areaGeneratorFactory.getSegmentedAreaGenerator();
         const areas = block.svg.getChartGroup(chart.index)
-            .selectAll(`.${this.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
+            .selectAll(`.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
             .data(stackedData)
             .enter()
             .append('path')
             .attr('d', d => areaGenerator(d))
-            .attr('class', this.areaChartClass)
+            .attr('class', Area.areaChartClass)
             .style('clip-path', `url(#${block.svg.getClipPathId()})`)
             .style('pointer-events', 'none');
         areas.each(function (d, i) {
@@ -63,23 +75,29 @@ export class Area {
             MarkDot.render(block, dataset, keyAxisOrient, scales, margin, keyField.name, index, '1', chart);
         });
     }
-    static updateGrouped(block, scales, newData, keyField, margin, chart, keyAxisOrient, blockSize) {
+    updateGrouped(block, scales, newData, keyField, margin, chart, keyAxisOrient, blockSize) {
         const promises = [];
+        const areaGeneratorFactory = this.createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
+        const lineGeneratorFactory = chart.areaViewOptions.borderLine.on
+            && this.createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
         chart.data.valueFields.forEach((field, valueIndex) => {
-            const areaGenerator = AreaHelper.getGroupedAreaGenerator(keyAxisOrient, scales, margin, keyField.name, field.name, blockSize);
-            const areaObject = block.svg.getChartGroup(chart.index)
-                .select(`.${this.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
-            const prom = this.updateGroupedPath(block, areaObject, areaGenerator, newData);
-            promises.push(prom);
+            const chartGroup = block.svg.getChartGroup(chart.index);
+            const areaProm = this.updateArea(areaGeneratorFactory, chartGroup, block, field, chart, newData, valueIndex);
+            promises.push(areaProm);
+            if (lineGeneratorFactory) {
+                const lineProm = this.updateBorderLine(lineGeneratorFactory, chartGroup, block, field, chart, newData, valueIndex);
+                promises.push(lineProm);
+            }
             MarkDot.update(block, newData, keyAxisOrient, scales, margin, keyField.name, valueIndex, field.name, chart);
         });
         return promises;
     }
-    static updateSegmented(block, scales, newData, keyField, margin, chart, keyAxisOrient) {
+    updateSegmented(block, scales, newData, keyField, margin, chart, keyAxisOrient) {
         const stackedData = getStackedDataWithOwn(newData, chart.data.valueFields.map(field => field.name));
-        const areaGenerator = AreaHelper.getSegmentedAreaGenerator(keyAxisOrient, scales, margin, keyField.name);
+        const generatorFactory = this.createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
+        const areaGenerator = generatorFactory.getSegmentedAreaGenerator();
         const areas = block.svg.getChartGroup(chart.index)
-            .selectAll(`path.${this.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
+            .selectAll(`path.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
             .data(stackedData);
         const prom = this.updateSegmentedPath(block, areas, areaGenerator);
         areas.each((dataset, index) => {
@@ -88,7 +106,7 @@ export class Area {
         });
         return [prom];
     }
-    static updateGroupedPath(block, areaObject, areaGenerator, newData) {
+    updateGroupedPath(block, areaObject, areaGenerator, newData) {
         return new Promise(resolve => {
             if (areaObject.size() === 0) {
                 resolve('');
@@ -106,7 +124,7 @@ export class Area {
                 resolve('');
         });
     }
-    static updateSegmentedPath(block, areasObjects, areaGenerator) {
+    updateSegmentedPath(block, areasObjects, areaGenerator) {
         return new Promise(resolve => {
             if (areasObjects.size() === 0) {
                 resolve('');
@@ -124,8 +142,56 @@ export class Area {
                 resolve('');
         });
     }
-    static setSegmentColor(segments, colorPalette) {
+    setSegmentColor(segments, colorPalette) {
         segments.style('fill', (d, i) => colorPalette[i % colorPalette.length]);
     }
+    setChartFillStyle(chart, path, valueIndex) {
+        if (chart.areaViewOptions.fill.type === 'gradient')
+            DomHelper.setChartGradientStyle(path, chart.index, valueIndex);
+        else
+            DomHelper.setChartStyle(path, chart.style, valueIndex, 'fill');
+    }
+    createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField) {
+        return new AreaGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, shouldRender: chart.lineLikeViewOptions.renderForKey, curve: this.options.staticSettings.shape.curve.type });
+    }
+    createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField) {
+        return new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, shouldRender: chart.lineLikeViewOptions.renderForKey, curve: this.options.staticSettings.shape.curve.type });
+    }
+    renderArea(areaGeneratorFactory, block, chart, data, field, valueIndex) {
+        const area = areaGeneratorFactory.getAreaGenerator(field.name);
+        const path = block.svg.getChartGroup(chart.index)
+            .append('path')
+            .attr('d', area(data))
+            .attr('class', Area.areaChartClass)
+            .style('clip-path', `url(#${block.svg.getClipPathId()})`)
+            .style('pointer-events', 'none');
+        DomHelper.setCssClasses(path, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
+        this.setChartFillStyle(chart, path, valueIndex);
+    }
+    renderBorderLine(lineGeneratorFactory, block, chart, data, field, valueIndex) {
+        const lineGenerator = lineGeneratorFactory.getLineGenerator(field.name);
+        const linePath = block.svg.getChartGroup(chart.index)
+            .append('path')
+            .attr('d', lineGenerator(data))
+            .attr('class', `${Area.areaBorderLineClass}`)
+            .style('fill', 'none')
+            .style('clip-path', `url(#${block.svg.getClipPathId()})`)
+            .style('pointer-events', 'none');
+        DomHelper.setCssClasses(linePath, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
+        DomHelper.setChartStyle(linePath, chart.areaViewOptions.borderLine.colorStyle, valueIndex, 'stroke');
+    }
+    updateArea(areaGeneratorFactory, chartGroup, block, field, chart, newData, valueIndex) {
+        const areaGenerator = areaGeneratorFactory.getAreaGenerator(field.name);
+        const areaObject = chartGroup
+            .select(`.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
+        return this.updateGroupedPath(block, areaObject, areaGenerator, newData);
+    }
+    updateBorderLine(lineGeneratorFactory, chartGroup, block, field, chart, newData, valueIndex) {
+        const borderLineGenerator = lineGeneratorFactory.getLineGenerator(field.name);
+        const borderLineObject = chartGroup
+            .select(`.${Area.areaBorderLineClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
+        return Line.updateGroupedPath(block, borderLineObject, borderLineGenerator, newData);
+    }
 }
 Area.areaChartClass = 'area';
+Area.areaBorderLineClass = 'area-border-line';

package/lib/engine/twoDimensionalNotation/area/areaGenerator.d.ts

@@ -0,0 +1,14 @@
+import { Area as IArea } from "d3-shape";
+import { LineLikeGeneratorMiddleware } from "../lineLike/generatorMiddleware/lineLikeGeneratorMiddleware";
+import { MdtChartsDataRow } from "../../../config/config";
+import { CoordinateGetter } from "../lineLike/generatorFactory/lineLikeGeneratorFactory";
+interface AreaGeneratorOptions {
+    middlewares: LineLikeGeneratorMiddleware[];
+}
+export declare class AreaGenerator {
+    private readonly options;
+    constructor(options: AreaGeneratorOptions);
+    getVertical(xValue: CoordinateGetter, y0Value: CoordinateGetter, y1Value: CoordinateGetter): IArea<MdtChartsDataRow>;
+    getHorizontal(x0Value: CoordinateGetter, x1Value: CoordinateGetter, yValue: CoordinateGetter): IArea<MdtChartsDataRow>;
+}
+export {};

package/lib/engine/twoDimensionalNotation/area/areaGenerator.js

@@ -0,0 +1,22 @@
+import { area } from "d3-shape";
+export class AreaGenerator {
+    constructor(options) {
+        this.options = options;
+    }
+    getVertical(xValue, y0Value, y1Value) {
+        const generator = area()
+            .x(xValue)
+            .y0(y0Value)
+            .y1(y1Value);
+        this.options.middlewares.forEach(middleware => middleware.handle(generator));
+        return generator;
+    }
+    getHorizontal(x0Value, x1Value, yValue) {
+        const generator = area()
+            .x0(x0Value)
+            .x1(x1Value)
+            .y(yValue);
+        this.options.middlewares.forEach(middleware => middleware.handle(generator));
+        return generator;
+    }
+}

package/lib/engine/twoDimensionalNotation/area/areaHelper.d.ts

@@ -1,9 +1,9 @@
 import { Area as IArea } from 'd3-shape';
-import { MdtChartsDataRow, Size } from '../../../config/config';
-import { BlockMargin, Orient } from "../../../model/model";
-import { Scales } from "../../features/scale/scale";
-export declare class AreaHelper {
-    static getGroupedAreaGenerator(keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyFieldName: string, valueFieldName: string, blockSize: Size): IArea<MdtChartsDataRow>;
-    static getSegmentedAreaGenerator(keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyFieldName: string): IArea<MdtChartsDataRow>;
-    static getZeroCoordinate(axisOrient: Orient, margin: BlockMargin, blockSize: Size): number;
+import { MdtChartsDataRow } from '../../../config/config';
+import { LineLikeGeneratorFactoryOptions } from '../lineLike/generatorFactory/lineLikeGeneratorFactory';
+export declare class AreaGeneratorFactory {
+    private readonly options;
+    constructor(options: LineLikeGeneratorFactoryOptions);
+    getAreaGenerator(valueFieldName: string): IArea<MdtChartsDataRow>;
+    getSegmentedAreaGenerator(): IArea<MdtChartsDataRow>;
 }

package/lib/engine/twoDimensionalNotation/area/areaHelper.js

@@ -1,40 +1,39 @@
-import { area } from 'd3-shape';
 import { Scale } from "../../features/scale/scale";
-export class AreaHelper {
-    static getGroupedAreaGenerator(keyAxisOrient, scales, margin, keyFieldName, valueFieldName, blockSize) {
-        if (keyAxisOrient === 'bottom' || keyAxisOrient === 'top')
-            return area()
-                .x(d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.left)
-                .y0(d => scales.value(0) + margin.top)
-                .y1(d => scales.value(d[valueFieldName]) + margin.top);
-        if (keyAxisOrient === 'left' || keyAxisOrient === 'right')
-            return area()
-                .x0(d => scales.value(0) + margin.left)
-                .x1(d => scales.value(d[valueFieldName]) + margin.left)
-                .y(d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.top);
+import { LineLikeGeneratorDefinedMiddleware } from '../lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware';
+import { AreaGenerator } from './areaGenerator';
+import { LineLikeGeneratorCurveMiddleware } from '../lineLike/generatorMiddleware/lineLikeGeneratorCurveMiddleware';
+export class AreaGeneratorFactory {
+    constructor(options) {
+        this.options = options;
     }
-    static getSegmentedAreaGenerator(keyAxisOrient, scales, margin, keyFieldName) {
+    getAreaGenerator(valueFieldName) {
+        const { keyAxisOrient, scales, keyFieldName, margin, shouldRender } = this.options;
+        const generator = new AreaGenerator({
+            middlewares: [
+                new LineLikeGeneratorCurveMiddleware({ curve: this.options.curve }),
+                new LineLikeGeneratorDefinedMiddleware({ definedFn: shouldRender, valueFieldNameGetter: () => valueFieldName, dataRowGetter: (d) => d })
+            ]
+        });
         if (keyAxisOrient === 'bottom' || keyAxisOrient === 'top') {
-            return area()
-                .x(d => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.left)
-                .y0(d => scales.value(d[0]) + margin.top)
-                .y1(d => scales.value(d[1]) + margin.top);
+            return generator.getVertical(d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.left, d => scales.value(0) + margin.top, d => scales.value(d[valueFieldName]) + margin.top);
         }
         if (keyAxisOrient === 'left' || keyAxisOrient === 'right') {
-            return area()
-                .x0(d => scales.value(d[0]) + margin.left)
-                .x1(d => scales.value(d[1]) + margin.left)
-                .y(d => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.top);
+            return generator.getHorizontal(d => scales.value(0) + margin.left, d => scales.value(d[valueFieldName]) + margin.left, d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.top);
         }
     }
-    static getZeroCoordinate(axisOrient, margin, blockSize) {
-        if (axisOrient === 'bottom')
-            return blockSize.height - margin.bottom;
-        if (axisOrient === 'top')
-            return margin.top;
-        if (axisOrient === 'left')
-            return margin.left;
-        if (axisOrient === 'right')
-            return blockSize.width - margin.right;
+    getSegmentedAreaGenerator() {
+        const { keyAxisOrient, scales, margin, keyFieldName, shouldRender } = this.options;
+        const generator = new AreaGenerator({
+            middlewares: [
+                new LineLikeGeneratorCurveMiddleware({ curve: this.options.curve }),
+                new LineLikeGeneratorDefinedMiddleware({ definedFn: shouldRender, valueFieldNameGetter: (d) => d.fieldName, dataRowGetter: (d) => d.data })
+            ]
+        });
+        if (keyAxisOrient === 'bottom' || keyAxisOrient === 'top') {
+            return generator.getVertical(d => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.left, d => scales.value(d[0]) + margin.top, d => scales.value(d[1]) + margin.top);
+        }
+        if (keyAxisOrient === 'left' || keyAxisOrient === 'right') {
+            return generator.getHorizontal(d => scales.value(d[0]) + margin.left, d => scales.value(d[1]) + margin.left, d => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.top);
+        }
     }
 }

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

@@ -1,6 +1,6 @@
 import { Scale } from "../../features/scale/scale";
 import { Helper } from "../../helpers/helper";
-import { HatchPatternDef } from "../../block/defs";
+import { HatchPatternDef } from "../../block/defs/hatchPattern";
 export class BarHelper {
     static getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField, valueFieldName, blockSize, barIndex, barsAmount, barSettings) {
         const attrs = {

package/lib/engine/twoDimensionalNotation/bar/stackedData/dataStacker.d.ts

@@ -1,5 +1,8 @@
 import { MdtChartsDataRow } from "../../../../config/config";
-export interface StackedDataRow {
+export interface SegmentWithFieldName {
+    fieldName: string;
+}
+export interface StackedDataRow extends SegmentWithFieldName {
     0: number;
     1: number;
     data: MdtChartsDataRow;
@@ -10,4 +13,3 @@ export declare class DataStacker {
     getStackedData(rawData: MdtChartsDataRow[], valueFields: string[]): StackedDataFull;
 }
 export declare function getStackedDataWithOwn(rawData: MdtChartsDataRow[], valueFields: string[]): StackedDataFull;
-export declare function getStackedDataWithD3(rawData: MdtChartsDataRow[], valueFields: string[]): StackedDataFull;

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

@@ -1,4 +1,3 @@
-import { stack } from "d3-shape";
 import { DataStackerService } from "./dataStackerService";
 export class DataStacker {
     constructor() {
@@ -15,7 +14,8 @@ export class DataStacker {
                 fieldStack.push({
                     "0": value0,
                     "1": value1,
-                    data: dataRow
+                    data: dataRow,
+                    fieldName: vField
                 });
             });
             stackedData.push(fieldStack);
@@ -27,6 +27,3 @@ export function getStackedDataWithOwn(rawData, valueFields) {
     const stacker = new DataStacker();
     return stacker.getStackedData(rawData, valueFields);
 }
-export function getStackedDataWithD3(rawData, valueFields) {
-    return stack().keys(valueFields)(rawData);
-}

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

@@ -1,4 +1,4 @@
-import { SeriesPoint } from 'd3-shape';
+import { Line as ILine } from 'd3-shape';
 import { BaseType, Selection } from 'd3-selection';
 import { BlockMargin, Field, LineLikeChartSettings, Orient, TwoDimensionalChartModel } from "../../../model/model";
 import { Scales } from "../../features/scale/scale";
@@ -8,11 +8,6 @@ import { Pipeline } from '../../helpers/pipeline/Pipeline';
 interface LineChartOptions {
     staticSettings: LineLikeChartSettings;
 }
-export interface Segment extends SeriesPoint<{
-    [p: string]: number;
-}> {
-    fieldName: string;
-}
 export declare class Line {
     private options;
     static readonly lineChartClass = "line";
@@ -27,7 +22,7 @@ export declare class Line {
     private renderSegmented;
     private updateGrouped;
     private updateSegmented;
-    private updateGroupedPath;
+    static updateGroupedPath(block: Block, lineObject: Selection<BaseType, any, BaseType, any>, lineGenerator: ILine<MdtChartsDataRow>, newData: MdtChartsDataRow[]): Promise<any>;
     private updateSegmentedPath;
     private setSegmentColor;
 }

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

@@ -39,7 +39,7 @@ export class Line {
         });
     }
     renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart) {
-        const generatorFactory = new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, curve: this.options.staticSettings.shape.curve.type, shouldRenderLine: chart.lineViewOptions.renderForKey });
+        const generatorFactory = new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, curve: this.options.staticSettings.shape.curve.type, shouldRender: chart.lineLikeViewOptions.renderForKey });
         chart.data.valueFields.forEach((valueField, valueIndex) => {
             const lineGenerator = generatorFactory.getLineGenerator(valueField.name);
             let path = block.svg.getChartGroup(chart.index)
@@ -57,7 +57,7 @@ export class Line {
     }
     renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart) {
         let stackedData = getStackedData(data, chart);
-        const generatorFactory = new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, curve: this.options.staticSettings.shape.curve.type, shouldRenderLine: chart.lineViewOptions.renderForKey });
+        const generatorFactory = new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, curve: this.options.staticSettings.shape.curve.type, shouldRender: chart.lineLikeViewOptions.renderForKey });
         const lineGenerator = generatorFactory.getSegmentedLineGenerator();
         let lines = block.svg.getChartGroup(chart.index)
             .selectAll(`.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
@@ -80,12 +80,12 @@ export class Line {
     }
     updateGrouped(block, scales, newData, keyField, margin, keyAxisOrient, chart) {
         const promises = [];
-        const generatorFactory = new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, curve: this.options.staticSettings.shape.curve.type, shouldRenderLine: chart.lineViewOptions.renderForKey });
+        const generatorFactory = new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, curve: this.options.staticSettings.shape.curve.type, shouldRender: chart.lineLikeViewOptions.renderForKey });
         chart.data.valueFields.forEach((valueField, valueFieldIndex) => {
             const lineGenerator = generatorFactory.getLineGenerator(valueField.name);
             const lineObject = block.svg.getChartGroup(chart.index)
                 .select(`.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueFieldIndex}`);
-            const prom = this.updateGroupedPath(block, lineObject, lineGenerator, newData);
+            const prom = Line.updateGroupedPath(block, lineObject, lineGenerator, newData);
             promises.push(prom);
             MarkDot.update(block, newData, keyAxisOrient, scales, margin, keyField.name, valueFieldIndex, valueField.name, chart);
         });
@@ -93,7 +93,7 @@ export class Line {
     }
     updateSegmented(block, scales, newData, keyField, margin, keyAxisOrient, chart) {
         let stackedData = getStackedData(newData, chart);
-        const generatorFactory = new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, curve: this.options.staticSettings.shape.curve.type, shouldRenderLine: chart.lineViewOptions.renderForKey });
+        const generatorFactory = new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, curve: this.options.staticSettings.shape.curve.type, shouldRender: chart.lineLikeViewOptions.renderForKey });
         const lineGenerator = generatorFactory.getSegmentedLineGenerator();
         const lines = block.svg.getChartGroup(chart.index)
             .selectAll(`path.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
@@ -104,7 +104,7 @@ export class Line {
         });
         return [prom];
     }
-    updateGroupedPath(block, lineObject, lineGenerator, newData) {
+    static updateGroupedPath(block, lineObject, lineGenerator, newData) {
         return new Promise(resolve => {
             if (lineObject.size() === 0) {
                 resolve('');

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

@@ -1,15 +1,12 @@
-import { Line as ILine } from "d3-shape";
 import { MdtChartsDataRow } from "../../../config/config";
-import { LineCurveType } from "../../../model/model";
+import { LineLikeGeneratorMiddleware } from "../lineLike/generatorMiddleware/lineLikeGeneratorMiddleware";
+import { CoordinateGetter } from "../lineLike/generatorFactory/lineLikeGeneratorFactory";
 interface LineGeneratorOptions {
-    curve?: LineCurveType;
+    middlewares: LineLikeGeneratorMiddleware[];
 }
-declare type CoordinateGetter = (dataRow: MdtChartsDataRow) => number;
 export declare class LineGenerator {
     private options;
-    private readonly curvies;
     constructor(options: LineGeneratorOptions);
-    get(xValue: CoordinateGetter, yValue: CoordinateGetter): ILine<MdtChartsDataRow>;
-    private setCurve;
+    get(xValue: CoordinateGetter, yValue: CoordinateGetter): import("d3-shape").Line<MdtChartsDataRow>;
 }
 export {};

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

@@ -1,27 +1,13 @@
-import { curveBasis, curveMonotoneX, line, curveMonotoneY } from "d3-shape";
-import { LineCurveType } from "../../../model/model";
+import { line } from "d3-shape";
 export class LineGenerator {
     constructor(options) {
         this.options = options;
-        this.curvies = {
-            [LineCurveType.monotoneX]: curveMonotoneX,
-            [LineCurveType.monotoneY]: curveMonotoneY,
-            [LineCurveType.basis]: curveBasis,
-            [LineCurveType.none]: undefined
-        };
     }
     get(xValue, yValue) {
         const generator = line()
             .x(xValue)
             .y(yValue);
-        this.setCurve(generator);
+        this.options.middlewares.forEach(middleware => middleware.handle(generator));
         return generator;
     }
-    setCurve(generator) {
-        if (this.options.curve != null) {
-            const curve = this.curvies[this.options.curve];
-            if (curve)
-                generator.curve(curve);
-        }
-    }
 }