mdt-charts 1.19.0 → 1.20.1

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/twoDimensionalNotation/area/area.d.ts

@@ -1,17 +1,24 @@
-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 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;
 }
+export {};

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

@@ -1,17 +1,23 @@
 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';
 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,21 +27,22 @@ 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}`);
+                .select(`.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
             DomHelper.setChartStyle(path, chart.style, valueIndex, 'fill');
             MarkDot.updateColors(block, chart, valueIndex);
         });
     }
-    static renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize) {
+    renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart) {
+        const generatorFactory = new AreaGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, shouldRender: chart.lineLikeViewOptions.renderForKey, curve: this.options.staticSettings.shape.curve.type });
         chart.data.valueFields.forEach((field, valueIndex) => {
-            const area = AreaHelper.getGroupedAreaGenerator(keyAxisOrient, scales, margin, keyField.name, field.name, blockSize);
+            const area = generatorFactory.getAreaGenerator(field.name);
             const path = block.svg.getChartGroup(chart.index)
                 .append('path')
                 .attr('d', area(data))
-                .attr('class', this.areaChartClass)
+                .attr('class', Area.areaChartClass)
                 .style('clip-path', `url(#${block.svg.getClipPathId()})`)
                 .style('pointer-events', 'none');
             DomHelper.setCssClasses(path, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
@@ -43,16 +50,17 @@ export class Area {
             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 generatorFactory = new AreaGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, shouldRender: chart.lineLikeViewOptions.renderForKey, curve: this.options.staticSettings.shape.curve.type });
+        const areaGenerator = generatorFactory.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 +71,25 @@ 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 generatorFactory = new AreaGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, shouldRender: chart.lineLikeViewOptions.renderForKey, curve: this.options.staticSettings.shape.curve.type });
         chart.data.valueFields.forEach((field, valueIndex) => {
-            const areaGenerator = AreaHelper.getGroupedAreaGenerator(keyAxisOrient, scales, margin, keyField.name, field.name, blockSize);
+            const areaGenerator = generatorFactory.getAreaGenerator(field.name);
             const areaObject = block.svg.getChartGroup(chart.index)
-                .select(`.${this.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
+                .select(`.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
             const prom = this.updateGroupedPath(block, areaObject, areaGenerator, newData);
             promises.push(prom);
             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 = new AreaGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, shouldRender: chart.lineLikeViewOptions.renderForKey, curve: this.options.staticSettings.shape.curve.type });
+        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 +98,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 +116,7 @@ export class Area {
                 resolve('');
         });
     }
-    static updateSegmentedPath(block, areasObjects, areaGenerator) {
+    updateSegmentedPath(block, areasObjects, areaGenerator) {
         return new Promise(resolve => {
             if (areasObjects.size() === 0) {
                 resolve('');
@@ -124,7 +134,7 @@ export class Area {
                 resolve('');
         });
     }
-    static setSegmentColor(segments, colorPalette) {
+    setSegmentColor(segments, colorPalette) {
         segments.style('fill', (d, i) => colorPalette[i % colorPalette.length]);
     }
 }

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,3 @@
-import { SeriesPoint } 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 +7,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";

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,7 +80,7 @@ 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)
@@ -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)}`)

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);
-        }
-    }
 }

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

@@ -1,25 +1,16 @@
 import { Line as ILine } from 'd3-shape';
 import { MdtChartsDataRow } from '../../../config/config';
-import { Orient, BlockMargin, LineCurveType, TwoDimensionalChartModel, LineLikeChartRenderOptions } from "../../../model/model";
-import { Scales } from "../../features/scale/scale";
+import { TwoDimensionalChartModel } from "../../../model/model";
 import { Pipeline } from '../../helpers/pipeline/Pipeline';
 import { BaseType, Selection } from 'd3-selection';
-import { Segment } from './line';
-interface LineGeneratorFactoryOptions {
-    keyAxisOrient: Orient;
-    scales: Scales;
-    keyFieldName: string;
-    margin: BlockMargin;
-    curve: LineCurveType;
-    shouldRenderLine: LineLikeChartRenderOptions;
-}
+import { Segment } from '../lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware';
+import { LineLikeGeneratorFactoryOptions } from '../lineLike/generatorFactory/lineLikeGeneratorFactory';
 export declare class LineGeneratorFactory {
     private options;
-    constructor(options: LineGeneratorFactoryOptions);
+    constructor(options: LineLikeGeneratorFactoryOptions);
     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 declare function getStackedData(data: MdtChartsDataRow[], chart: TwoDimensionalChartModel): Segment[][];
-export {};

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

@@ -1,35 +1,47 @@
 import { stack } from 'd3-shape';
 import { Scale } from "../../features/scale/scale";
 import { LineGenerator } from './lineGenerator';
+import { LineLikeGeneratorCurveMiddleware } from '../lineLike/generatorMiddleware/lineLikeGeneratorCurveMiddleware';
+import { LineLikeGeneratorDefinedMiddleware } from '../lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware';
 export class LineGeneratorFactory {
     constructor(options) {
         this.options = options;
     }
     getLineGenerator(valueFieldName) {
-        const { keyAxisOrient, scales, keyFieldName, margin, shouldRenderLine } = this.options;
-        const generator = new LineGenerator({ curve: this.options.curve });
+        const { keyAxisOrient, scales, keyFieldName, margin, shouldRender } = this.options;
+        const generator = new LineGenerator({
+            middlewares: [
+                new LineLikeGeneratorCurveMiddleware({ curve: this.options.curve }),
+                new LineLikeGeneratorDefinedMiddleware({ definedFn: shouldRender, valueFieldNameGetter: () => valueFieldName, dataRowGetter: (d) => d })
+            ]
+        });
         if (keyAxisOrient === 'bottom' || keyAxisOrient === 'top') {
-            return generator.get(d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.left, d => scales.value(d[valueFieldName]) + margin.top).defined(d => shouldRenderLine(d, valueFieldName));
+            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 generator.get(d => scales.value(d[valueFieldName]) + margin.left, d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.top).defined(d => shouldRenderLine(d, valueFieldName));
+            return generator.get(d => scales.value(d[valueFieldName]) + margin.left, d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.top);
         }
     }
     getSegmentedLineGenerator() {
-        const { keyAxisOrient, scales, keyFieldName, margin, shouldRenderLine } = this.options;
-        const generator = new LineGenerator({ curve: this.options.curve });
+        const { keyAxisOrient, scales, keyFieldName, margin, shouldRender } = this.options;
+        const generator = new LineGenerator({
+            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.get(d => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.left, d => scales.value(d[1]) + margin.top).defined(d => shouldRenderLine(d.data, d.fieldName));
+            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 generator.get(d => scales.value(d[1]) + margin.left, d => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.top).defined(d => shouldRenderLine(d.data, d.fieldName));
+            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);
+        if (chart.lineLikeViewOptions.dashedStyles.on) {
+            return applyLineDash(path, chart.lineLikeViewOptions.dashedStyles.dashSize, chart.lineLikeViewOptions.dashedStyles.gapSize);
         }
         return path;
     });

package/lib/engine/twoDimensionalNotation/lineLike/generatorFactory/lineLikeGeneratorFactory.d.ts

@@ -0,0 +1,12 @@
+import { MdtChartsDataRow } from "../../../../config/config";
+import { BlockMargin, LineCurveType, LineLikeChartRenderFn, Orient } from "../../../../model/model";
+import { Scales } from "../../../features/scale/scale";
+export declare type CoordinateGetter = (dataRow: MdtChartsDataRow) => number;
+export interface LineLikeGeneratorFactoryOptions {
+    keyAxisOrient: Orient;
+    scales: Scales;
+    keyFieldName: string;
+    margin: BlockMargin;
+    curve: LineCurveType;
+    shouldRender: LineLikeChartRenderFn;
+}

package/lib/engine/twoDimensionalNotation/lineLike/generatorFactory/lineLikeGeneratorFactory.js

@@ -0,0 +1 @@
+export {};

package/lib/engine/twoDimensionalNotation/lineLike/generatorMiddleware/lineLikeGeneratorCurveMiddleware.d.ts

@@ -0,0 +1,14 @@
+import { Area, Line } from "d3-shape";
+import { LineCurveType } from "../../../../model/model";
+import { LineLikeGeneratorMiddleware } from "./lineLikeGeneratorMiddleware";
+import { MdtChartsDataRow } from "../../../../main";
+interface LineLikeGeneratorCurveMiddlewareOptions {
+    curve?: LineCurveType;
+}
+export declare class LineLikeGeneratorCurveMiddleware implements LineLikeGeneratorMiddleware {
+    private options;
+    private readonly curvies;
+    constructor(options: LineLikeGeneratorCurveMiddlewareOptions);
+    handle(generator: Line<MdtChartsDataRow> | Area<MdtChartsDataRow>): Line<MdtChartsDataRow> | Area<MdtChartsDataRow>;
+}
+export {};