mdt-charts 1.13.2 → 1.14.0

package/lib/engine/features/tolltip/tooltipDomHelper.js

@@ -1,19 +1,20 @@
 import { ValueFormatter, } from "../../valueFormatter";
 import { TooltipHelper } from './tooltipHelper';
 import { Helper } from '../../helpers/helper';
+import { getMarkerCreator } from '../legend/legendMarkerCreator';
 export const ARROW_SIZE = 20;
 export const ARROW_DEFAULT_POSITION = 9;
 export const TOOLTIP_ARROW_PADDING_X = ARROW_DEFAULT_POSITION - (ARROW_SIZE * Math.sqrt(2) - ARROW_SIZE) / 2 + 14;
 export const TOOLTIP_ARROW_PADDING_Y = 13;
 export class TooltipDomHelper {
-    static fillForMulty2DCharts(contentBlock, charts, data, dataOptions, keyValue, htmlHandler) {
+    static fillForMulti2DCharts(contentBlock, charts, data, dataOptions, keyValue, htmlHandler) {
         contentBlock.html('');
         if (!htmlHandler) {
             this.renderHead(contentBlock, keyValue);
             charts.forEach(chart => {
                 chart.data.valueFields.forEach((field, index) => {
                     const html = this.getTooltipItemHtml(data, dataOptions, keyValue, field);
-                    this.fillValuesContent(contentBlock, chart.style.elementColors[index % chart.style.elementColors.length], html);
+                    this.fillValuesContent(contentBlock, chart.style.elementColors[index % chart.style.elementColors.length], html, this.getMarkerCreator(chart.legend));
                 });
             });
         }
@@ -26,22 +27,7 @@ export class TooltipDomHelper {
         if (!htmlHandler) {
             this.renderHead(contentBlock, keyValue);
             const html = this.getTooltipItemHtml(data, dataOptions, keyValue, chart.data.valueField);
-            this.fillValuesContent(contentBlock, markColor, html);
-        }
-        else {
-            this.fillContentByFunction(contentBlock, data, dataOptions, keyValue, htmlHandler);
-        }
-    }
-    static fillForIntervalChart(contentBlock, charts, data, dataOptions, keyValue, htmlHandler) {
-        contentBlock.html('');
-        if (!htmlHandler) {
-            this.renderHead(contentBlock, keyValue);
-            charts.forEach(chart => {
-                let html = this.getTooltipItemHtml(data, dataOptions, keyValue, chart.data.valueField1);
-                this.fillValuesContent(contentBlock, chart.style.elementColors[0 % chart.style.elementColors.length], html);
-                html = this.getTooltipItemHtml(data, dataOptions, keyValue, chart.data.valueField2);
-                this.fillValuesContent(contentBlock, chart.style.elementColors[0 % chart.style.elementColors.length], html);
-            });
+            this.fillValuesContent(contentBlock, markColor, html, this.getMarkerCreator(chart.legend));
         }
         else {
             this.fillContentByFunction(contentBlock, data, dataOptions, keyValue, htmlHandler);
@@ -60,15 +46,13 @@ export class TooltipDomHelper {
             .attr('class', `${this.groupClass} ${this.headClass}`)
             .text(keyValue);
     }
-    static fillValuesContent(contentBlock, markColor, tooltipHtml) {
+    static fillValuesContent(contentBlock, markColor, tooltipHtml, markerCreator) {
         const group = contentBlock.append('div')
             .attr('class', this.groupClass);
-        if (markColor)
-            group.append('div')
-                .attr('class', 'tooltip-color')
-                .append('span')
-                .attr('class', 'tooltip-circle')
-                .style('background-color', markColor);
+        if (markColor) {
+            const colorBlock = group.append('div').attr('class', 'tooltip-color');
+            markerCreator === null || markerCreator === void 0 ? void 0 : markerCreator.renderMarker(colorBlock, markColor);
+        }
         group.append('div')
             .attr('class', 'tooltip-texts')
             .append('div')
@@ -96,8 +80,11 @@ export class TooltipDomHelper {
     static setWhiteSpaceForTextBlocks(contentBlock) {
         contentBlock.selectAll(`.${this.textItemClass}`).style('white-space', 'pre-wrap');
     }
+    static getMarkerCreator(options) {
+        return getMarkerCreator(options, { default: { cssClass: TooltipDomHelper.tooltipLegendDefaultMarker } });
+    }
 }
 TooltipDomHelper.groupClass = 'tooltip-group';
 TooltipDomHelper.headClass = 'tooltip-head';
 TooltipDomHelper.textItemClass = 'tooltip-text-item';
-TooltipDomHelper.maxContentWidth = 500;
+TooltipDomHelper.tooltipLegendDefaultMarker = 'tooltip-circle';

package/lib/engine/helpers/domHelper.js

@@ -15,7 +15,7 @@ export class DomHelper {
         if (chart.type === 'line' || chart.type === 'area')
             return MarkDot.getMarkDotForChart(block, chart.cssClasses);
         else
-            return Bar.getAllBarsForChart(block, chart.cssClasses);
+            return Bar.get().getAllBarsForChart(block, chart.cssClasses);
     }
     static getCssPropertyValue(node, propertyName) {
         return window.getComputedStyle(node).getPropertyValue(propertyName);

package/lib/engine/helpers/pipeline/Pipeline.d.ts

@@ -0,0 +1,9 @@
+declare type Middleware<D, M> = (args: D, meta?: M) => D | undefined;
+export declare class Pipeline<D = any, M = any> {
+    private middlewaresStorage;
+    constructor(middlewares?: Middleware<D, M>[]);
+    push(middleware: Middleware<D, M>): () => void;
+    remove(middleware: Middleware<D, M>): void;
+    execute<CurrentArgs extends D = D>(args: CurrentArgs, meta?: M): CurrentArgs;
+}
+export {};

package/lib/engine/helpers/pipeline/Pipeline.js

@@ -0,0 +1,37 @@
+export class Pipeline {
+    constructor(middlewares) {
+        this.middlewaresStorage = new PipelineMiddlewaresStorage(middlewares);
+    }
+    push(middleware) {
+        return this.middlewaresStorage.push(middleware);
+    }
+    remove(middleware) {
+        this.middlewaresStorage.remove(middleware);
+    }
+    execute(args, meta) {
+        const process = (args, middlewares) => {
+            const current = middlewares[0];
+            if (!current) {
+                return args;
+            }
+            const replaceArgs = current(args, meta);
+            return process(replaceArgs === undefined ? args : replaceArgs, middlewares.slice(1));
+        };
+        return process(args, this.middlewaresStorage.getList());
+    }
+}
+class PipelineMiddlewaresStorage {
+    constructor(middlewares) {
+        this.middlewares = middlewares || [];
+    }
+    push(middleware) {
+        this.middlewares.push(middleware);
+        return () => this.remove(middleware);
+    }
+    remove(middleware) {
+        this.middlewares = this.middlewares.filter((cur) => cur != middleware);
+    }
+    getList() {
+        return this.middlewares;
+    }
+}

package/lib/engine/intervalNotation/intervalManager.js

@@ -1,6 +1,5 @@
 import { Axis } from "../features/axis/axis";
 import { GridLine } from "../features/gridLine/gridLine";
-import { Legend } from "../features/legend/legend";
 import { Scale } from "../features/scale/scale";
 import { Title } from "../features/title/title";
 import { Gantt } from "./gantt";
@@ -13,7 +12,6 @@ export class IntervalManager {
         GridLine.render(block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, scales);
         this.renderCharts(block, options.charts, scales, data, options.data, model.chartBlock.margin, options.axis.key.orient, options.chartSettings);
         Title.render(block, options.title, model.otherComponents.titleBlock, model.blockCanvas.size);
-        Legend.render(block, data, options, model);
     }
     static renderCharts(block, charts, scales, data, dataOptions, margin, keyAxisOrient, chartSettings) {
         block.svg.renderChartsBlock();

package/lib/engine/polarNotation/polarManager.js

@@ -11,7 +11,7 @@ export class PolarManager {
         engine.block.svg.render(model.blockCanvas.size);
         this.renderCharts(engine.block, options.charts, engine.data, options.data.dataSource, model.chartBlock.margin, model.blockCanvas.size, options.chartCanvas);
         Title.render(engine.block, options.title, model.otherComponents.titleBlock, model.blockCanvas.size);
-        Legend.render(engine.block, engine.data, options, model);
+        Legend.get().render(engine.block, engine.data, options, model);
         Tooltip.render(engine.block, model, engine.data, model.otherComponents.tooltipBlock);
         engine.block.filterEventManager.setListenerPolar(model.chartBlock.margin, model.blockCanvas.size, options);
         if (model.dataSettings.scope.hidedRecordsAmount !== 0)
@@ -40,14 +40,14 @@ export class PolarManager {
             block.filterEventManager.setListenerPolar(model.chartBlock.margin, model.blockCanvas.size, options);
         });
         Aggregator.update(block, options.charts[0].data.valueField, options.chartCanvas.aggregator);
-        Legend.update(block, data, model);
+        Legend.get().update(block, data, model);
         PolarRecordOverflowAlert.update(block, {
             hidedRecordsAmount: model.dataSettings.scope.hidedRecordsAmount,
             legendPosition: model.options.legend.position
         });
     }
     updateColors(block, model) {
-        Legend.updateColors(block, model.options);
+        Legend.get().updateColors(block, model.options);
         Donut.updateColors(block, model.options.charts[0]);
     }
     renderCharts(block, charts, data, dataSource, margin, blockSize, donutSettings) {

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

@@ -15,20 +15,23 @@ export interface RectElemWithAttrs extends SVGElement {
 }
 export declare class Bar {
     static readonly barItemClass = "bar-item";
-    static readonly barItemCloneClass = "bar-item-clone";
-    private static readonly barSegmentGroupClass;
-    static render(block: Block, scales: Scales, data: MdtChartsDataRow[], keyField: Field, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size, barSettings: BarChartSettings, barsAmounts: number[], isSegmented: boolean, firstBarIndex: number): void;
-    static update(block: Block, newData: MdtChartsDataRow[], scales: Scales, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size, barsAmounts: number[], keyField: Field, firstBarIndex: number, barSettings: BarChartSettings, isSegmented: boolean): Promise<any>[];
-    static updateColors(block: Block, chart: TwoDimensionalChartModel): void;
-    static getAllBarsForChart(block: Block, chartCssClasses: string[]): Selection<BaseType, MdtChartsDataRow, BaseType, unknown>;
-    private static renderGrouped;
-    private static renderSegmented;
-    private static updateGrouped;
-    private static updateSegmented;
-    private static fillBarAttrs;
-    private static setSegmentColor;
+    static get(): Bar;
+    private readonly barItemClass;
+    private readonly barSegmentGroupClass;
+    private createBarPipeline;
+    constructor();
+    render(block: Block, scales: Scales, data: MdtChartsDataRow[], keyField: Field, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size, barSettings: BarChartSettings, barsAmounts: number[], isSegmented: boolean, firstBarIndex: number): void;
+    update(block: Block, newData: MdtChartsDataRow[], scales: Scales, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size, barsAmounts: number[], keyField: Field, firstBarIndex: number, barSettings: BarChartSettings, isSegmented: boolean): Promise<any>[];
+    updateColors(block: Block, chart: TwoDimensionalChartModel): void;
+    getAllBarsForChart(block: Block, chartCssClasses: string[]): Selection<BaseType, MdtChartsDataRow, BaseType, unknown>;
+    private renderGrouped;
+    private renderSegmented;
+    private updateGrouped;
+    private updateSegmented;
+    private fillBarAttrs;
+    private setSegmentColor;
     /**
      * Устнановка координат для удобного обновления.
      */
-    private static setInitialAttrsInfo;
+    private setInitialAttrsInfo;
 }

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

@@ -1,19 +1,29 @@
 import { select } from 'd3-selection';
 import { EmbeddedLabels } from "../../features/embeddedLabels/embeddedLabels";
 import { EmbeddedLabelsHelper } from "../../features/embeddedLabels/embeddedLabelsHelper";
-import { BarHelper } from "./barHelper";
+import { BarHelper, onBarChartInit } from "./barHelper";
 import { sum } from "d3-array";
 import { DomHelper } from "../../helpers/domHelper";
 import { Helper } from "../../helpers/helper";
 import { getStackedDataWithOwn } from './stackedData/dataStacker';
+import { Pipeline } from '../../helpers/pipeline/Pipeline';
 export class Bar {
-    static render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize, barSettings, barsAmounts, isSegmented, firstBarIndex) {
+    constructor() {
+        this.barItemClass = Bar.barItemClass;
+        this.barSegmentGroupClass = 'bar-segment-group';
+        this.createBarPipeline = new Pipeline();
+        onBarChartInit(this.createBarPipeline);
+    }
+    static get() {
+        return new Bar();
+    }
+    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) {
+    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);
@@ -23,25 +33,26 @@ export class Bar {
         }
         return promises;
     }
-    static updateColors(block, chart) {
+    updateColors(block, chart) {
         chart.data.valueFields.forEach((_vf, index) => {
             const bars = block.svg.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) {
+    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) {
+    renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, firstBarIndex, barSettings) {
         chart.data.valueFields.forEach((field, index) => {
-            const bars = block.svg.getChartGroup(chart.index)
+            let bars = block.svg.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.svg.getClipPathId()})`);
+            bars = this.createBarPipeline.execute(bars, chart);
             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));
@@ -51,7 +62,7 @@ export class Bar {
                 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) {
+    renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, firstBarIndex, barSettings) {
         const stackedData = getStackedDataWithOwn(data, chart.data.valueFields.map(field => field.name));
         let groups = block.svg.getChartGroup(chart.index)
             .selectAll(`g.${this.barSegmentGroupClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
@@ -62,13 +73,14 @@ export class Bar {
                 .enter()
                 .append('g')
                 .attr('class', this.barSegmentGroupClass);
-        const bars = groups
+        let bars = groups
             .selectAll(`rect${Helper.getCssClassesLine(chart.cssClasses)}`)
             .data(d => d)
             .enter()
             .append('rect')
             .attr('class', this.barItemClass)
             .style('clip-path', `url(#${block.svg.getClipPathId()})`);
+        bars = this.createBarPipeline.execute(bars, chart);
         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);
@@ -80,7 +92,7 @@ export class Bar {
             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) {
+    updateGrouped(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings) {
         const promises = [];
         chart.data.valueFields.forEach((valueField, index) => {
             const indexesOfRemoved = [];
@@ -102,11 +114,12 @@ export class Bar {
                 .filter(d => newData.findIndex(row => row[keyField.name] === d[keyField.name]) !== -1)
                 .style('opacity', 1)
                 .data(newData);
-            const newBars = bars
+            let newBars = bars
                 .enter()
                 .append('rect')
                 .attr('class', this.barItemClass)
                 .style('clip-path', `url(#${block.svg.getClipPathId()})`);
+            newBars = this.createBarPipeline.execute(newBars, chart);
             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(() => {
@@ -128,7 +141,7 @@ export class Bar {
         });
         return promises;
     }
-    static updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings) {
+    updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings) {
         const stackedData = getStackedDataWithOwn(newData, chart.data.valueFields.map(field => field.name));
         block.svg.getChartGroup(chart.index)
             .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
@@ -145,10 +158,11 @@ export class Bar {
             .filter(d => newData.findIndex(row => row[keyField.name] === d.data[keyField.name]) !== -1)
             .style('opacity', 1)
             .data(d => d);
-        const newBars = bars.enter()
+        let newBars = bars.enter()
             .append('rect')
             .attr('class', this.barItemClass)
             .style('clip-path', `url(#${block.svg.getClipPathId()})`);
+        newBars = this.createBarPipeline.execute(newBars, chart);
         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(() => {
@@ -165,7 +179,7 @@ export class Bar {
         });
         return [prom];
     }
-    static fillBarAttrs(bars, barAttrs, transitionDuration = 0) {
+    fillBarAttrs(bars, barAttrs, transitionDuration = 0) {
         return new Promise((resolve) => {
             if (bars.size() === 0) {
                 resolve('');
@@ -187,13 +201,13 @@ export class Bar {
                 resolve('');
         });
     }
-    static setSegmentColor(segments, colorPalette, segmentedIndex) {
+    setSegmentColor(segments, colorPalette, segmentedIndex) {
         segments.style('fill', colorPalette[segmentedIndex % colorPalette.length]);
     }
     /**
      * Устнановка координат для удобного обновления.
      */
-    static setInitialAttrsInfo(bars, keyAxisOrient, barSettings) {
+    setInitialAttrsInfo(bars, keyAxisOrient, barSettings) {
         bars.each(function () {
             const width = DomHelper.getSelectionNumericAttr(select(this), 'width');
             const height = DomHelper.getSelectionNumericAttr(select(this), 'height');
@@ -212,5 +226,3 @@ export class Bar {
     }
 }
 Bar.barItemClass = 'bar-item';
-Bar.barItemCloneClass = 'bar-item-clone';
-Bar.barSegmentGroupClass = 'bar-segment-group';

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

@@ -1,6 +1,8 @@
 import { BarChartSettings, BlockMargin, Orient, TwoDimensionalChartModel } from "../../../model/model";
 import { Scales } from "../../features/scale/scale";
 import { MdtChartsDataRow, Size } from "../../../config/config";
+import { Pipeline } from "../../helpers/pipeline/Pipeline";
+import { BaseType, Selection } from "d3-selection";
 export interface BarAttrsHelper {
     x: (dataRow: MdtChartsDataRow) => number;
     y: (dataRow: MdtChartsDataRow) => number;
@@ -22,3 +24,4 @@ export declare class BarHelper {
     private static setGroupedBarAttrsByValue;
     private static setSegmentedBarAttrsByValue;
 }
+export declare function onBarChartInit(createBarPipeline: Pipeline<Selection<SVGRectElement, any, BaseType, any>, TwoDimensionalChartModel>): void;

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

@@ -1,5 +1,6 @@
 import { Scale } from "../../features/scale/scale";
 import { Helper } from "../../helpers/helper";
+import { HatchPatternDef } from "../../block/defs";
 export class BarHelper {
     static getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField, valueFieldName, blockSize, barIndex, barsAmount, barSettings) {
         const attrs = {
@@ -101,3 +102,11 @@ export class BarHelper {
         }
     }
 }
+export function onBarChartInit(createBarPipeline) {
+    createBarPipeline.push(hatchBar);
+}
+function hatchBar(bars, chart) {
+    if (chart.barViewOptions.hatch.on)
+        bars.style("mask", HatchPatternDef.getMaskValue());
+    return bars;
+}

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

@@ -1,17 +1,28 @@
-import { BlockMargin, Field, Orient, TwoDimensionalChartModel } from "../../../model/model";
+import { BaseType, Selection } from 'd3-selection';
+import { BlockMargin, Field, LineLikeChartSettings, Orient, TwoDimensionalChartModel } from "../../../model/model";
 import { Scales } from "../../features/scale/scale";
 import { Block } from "../../block/block";
 import { MdtChartsDataRow } from '../../../config/config';
+import { Pipeline } from '../../helpers/pipeline/Pipeline';
+interface LineChartOptions {
+    staticSettings: LineLikeChartSettings;
+}
 export declare class Line {
+    private options;
     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 updateSegmented;
-    private static updateGroupedPath;
-    private static updateSegmentedPath;
-    private static setSegmentColor;
+    readonly creatingPipeline: Pipeline<Selection<SVGPathElement, any, BaseType, any>, TwoDimensionalChartModel>;
+    private readonly lineChartClass;
+    static get(options: LineChartOptions): Line;
+    constructor(options: LineChartOptions);
+    render(block: Block, scales: Scales, data: MdtChartsDataRow[], keyField: Field, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel): void;
+    update(block: Block, scales: Scales, newData: MdtChartsDataRow[], keyField: Field, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel): 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/line/line.js

@@ -1,17 +1,27 @@
 import { stack } from 'd3-shape';
 import { select } from 'd3-selection';
 import { MarkDot } from "../../features/markDots/markDot";
-import { LineHelper } from './lineHelper';
+import { LineGeneratorFactory, onLineChartInit } from './lineHelper';
 import { DomHelper } from '../../helpers/domHelper';
 import { Helper } from '../../helpers/helper';
+import { Pipeline } from '../../helpers/pipeline/Pipeline';
 export class Line {
-    static render(block, scales, data, keyField, margin, keyAxisOrient, chart) {
+    constructor(options) {
+        this.options = options;
+        this.creatingPipeline = new Pipeline();
+        this.lineChartClass = Line.lineChartClass; //TODO: remove after refactor
+        onLineChartInit(this.creatingPipeline);
+    }
+    static get(options) {
+        return new Line(options);
+    }
+    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) {
+    update(block, scales, newData, keyField, margin, keyAxisOrient, chart) {
         let promises;
         if (chart.isSegmented) {
             promises = this.updateSegmented(block, scales, newData, keyField, margin, keyAxisOrient, chart);
@@ -21,7 +31,7 @@ export class Line {
         }
         return promises;
     }
-    static updateColors(block, chart) {
+    updateColors(block, chart) {
         chart.data.valueFields.forEach((_vf, valueIndex) => {
             const path = block.svg.getChartGroup(chart.index)
                 .select(`.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
@@ -29,25 +39,28 @@ export class Line {
             MarkDot.updateColors(block, chart, valueIndex);
         });
     }
-    static renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart) {
+    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 });
         chart.data.valueFields.forEach((valueField, valueIndex) => {
-            const lineGenerator = LineHelper.getLineGenerator(keyAxisOrient, scales, keyField.name, valueField.name, margin);
-            const path = block.svg.getChartGroup(chart.index)
+            const lineGenerator = generatorFactory.getLineGenerator(valueField.name);
+            let path = block.svg.getChartGroup(chart.index)
                 .append('path')
                 .attr('d', lineGenerator(data))
                 .attr('class', this.lineChartClass)
                 .style('fill', 'none')
                 .style('clip-path', `url(#${block.svg.getClipPathId()})`)
                 .style('pointer-events', 'none');
+            path = this.creatingPipeline.execute(path, chart);
             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) {
+    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.svg.getChartGroup(chart.index)
+        const generatorFactory = new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, curve: this.options.staticSettings.shape.curve.type });
+        const lineGenerator = generatorFactory.getSegmentedLineGenerator();
+        let lines = block.svg.getChartGroup(chart.index)
             .selectAll(`.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
             .data(stackedData)
             .enter()
@@ -57,6 +70,7 @@ export class Line {
             .style('fill', 'none')
             .style('clip-path', `url(#${block.svg.getClipPathId()})`)
             .style('pointer-events', 'none');
+        lines = this.creatingPipeline.execute(lines, chart);
         lines.each(function (d, i) {
             DomHelper.setCssClasses(select(this), Helper.getCssClassesWithElementIndex(chart.cssClasses, i));
         });
@@ -65,10 +79,11 @@ export class Line {
             MarkDot.render(block, dataset, keyAxisOrient, scales, margin, keyField.name, stackIndex, '1', chart);
         });
     }
-    static updateGrouped(block, scales, newData, keyField, margin, keyAxisOrient, chart) {
+    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 });
         chart.data.valueFields.forEach((valueField, valueFieldIndex) => {
-            const lineGenerator = LineHelper.getLineGenerator(keyAxisOrient, scales, keyField.name, valueField.name, margin);
+            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);
@@ -77,9 +92,10 @@ export class Line {
         });
         return promises;
     }
-    static updateSegmented(block, scales, newData, keyField, margin, keyAxisOrient, chart) {
+    updateSegmented(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 generatorFactory = new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, curve: this.options.staticSettings.shape.curve.type });
+        const lineGenerator = generatorFactory.getSegmentedLineGenerator();
         const lines = block.svg.getChartGroup(chart.index)
             .selectAll(`path.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
             .data(stackedData);
@@ -89,7 +105,7 @@ export class Line {
         });
         return [prom];
     }
-    static updateGroupedPath(block, lineObject, lineGenerator, newData) {
+    updateGroupedPath(block, lineObject, lineGenerator, newData) {
         return new Promise(resolve => {
             if (lineObject.size() === 0) {
                 resolve('');
@@ -107,7 +123,7 @@ export class Line {
                 resolve('');
         });
     }
-    static updateSegmentedPath(block, linesObjects, lineGenerator) {
+    updateSegmentedPath(block, linesObjects, lineGenerator) {
         return new Promise(resolve => {
             if (linesObjects.size() === 0) {
                 resolve('');
@@ -125,7 +141,7 @@ export class Line {
                 resolve('');
         });
     }
-    static setSegmentColor(segments, colorPalette) {
+    setSegmentColor(segments, colorPalette) {
         segments.style('stroke', (d, i) => colorPalette[i % colorPalette.length]);
     }
 }

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

@@ -0,0 +1,15 @@
+import { Line as ILine } from "d3-shape";
+import { MdtChartsDataRow } from "../../../config/config";
+import { LineCurveType } from "../../../model/model";
+interface LineGeneratorOptions {
+    curve?: LineCurveType;
+}
+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;
+}
+export {};

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

@@ -0,0 +1,27 @@
+import { curveBasis, curveMonotoneX, line, curveMonotoneY } from "d3-shape";
+import { LineCurveType } from "../../../model/model";
+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);
+        return generator;
+    }
+    setCurve(generator) {
+        if (this.options.curve != null) {
+            const curve = this.curvies[this.options.curve];
+            if (curve)
+                generator.curve(curve);
+        }
+    }
+}