mdt-charts 1.23.2 → 1.24.0

package/lib/config/config.d.ts

@@ -177,7 +177,7 @@ export interface NumberAxisLabel {
     format: (v: number) => string;
     stepSize?: number;
 }
-export declare type AxisLabelFormatter = (v: number) => string;
+export declare type AxisLabelFormatter = (v: number | string) => string;
 export interface DiscreteAxisOptions extends AxisOptions {
     labels?: MdtChartsDiscreteAxisLabel;
 }

package/lib/engine/contentManager/contentManager.d.ts

@@ -8,4 +8,5 @@ export declare class ContentManager {
     render(model: Model, engine: Engine): void;
     updateData(block: Block, model: Model, newData: MdtChartsDataSource): void;
     updateColors(engine: Engine, model: Model): void;
+    clearSelection(engine: Engine, model: Model): void;
 }

package/lib/engine/contentManager/contentManager.js

@@ -12,4 +12,7 @@ export class ContentManager {
     updateColors(engine, model) {
         this.manager.updateColors(engine.block, model);
     }
+    clearSelection(engine, model) {
+        this.manager.clearSelection(engine.block.filterEventManager, model);
+    }
 }

package/lib/engine/contentManager/contentManagerFactory.d.ts

@@ -2,10 +2,12 @@ import { ChartNotation, MdtChartsDataSource } from "../../config/config";
 import { Model } from "../../model/model";
 import { Block } from "../block/block";
 import { Engine } from "../engine";
+import { FilterEventManager } from "../filterManager/filterEventManager";
 export interface ChartContentManager {
     render(engine: Engine, model: Model): void;
     updateData(block: Block, model: Model, newData: MdtChartsDataSource): void;
     updateColors(block: Block, model: Model): void;
+    clearSelection(filterEventManager: FilterEventManager, model: Model): void;
 }
 export declare class ContentManagerFactory {
     private managers;

package/lib/engine/engine.d.ts

@@ -15,6 +15,7 @@ export declare class Engine {
     updateFullBlock(model: Model, data: MdtChartsDataSource): void;
     destroy(): void;
     updateData(model: Model, newData: MdtChartsDataSource): void;
+    clearSelection(model: Model): void;
     updateColors(model: Model): void;
     private renderCharts;
     private setFilterEventManager;

package/lib/engine/engine.js

@@ -47,6 +47,9 @@ export class Engine {
             }
         }
     }
+    clearSelection(model) {
+        this.contentManager.clearSelection(this, model);
+    }
     updateColors(model) {
         this.contentManager.updateColors(this, model);
     }

package/lib/engine/features/axis/axis.js

@@ -67,7 +67,7 @@ export class Axis {
             AxisLabelHelper.cropLabels(block, scale, scaleOptions, axisOptions, blockSize);
         }
         if (axisOptions.labels.defaultTooltip)
-            AxisLabelHelper.setTitles(axisElement);
+            AxisLabelHelper.setTitles(axisElement, axisOptions);
     }
     static updateValueAxis(block, scaleValue, scaleOptions, axisOptions, blockSize) {
         const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scaleValue);
@@ -76,7 +76,7 @@ export class Axis {
         AxisDomHelper.updateAxisElement(axisGenerator, axisElement, axisOptions.translate, block.transitionManager.durations.chartUpdate)
             .then(() => {
             if (axisOptions.labels.defaultTooltip)
-                AxisLabelHelper.setTitles(axisElement);
+                AxisLabelHelper.setTitles(axisElement, axisOptions);
             if (axisOptions.orient === 'bottom' || axisOptions.orient === 'top') {
                 AxisLabelHelper.cropLabels(block, scaleValue, scaleOptions, axisOptions, blockSize);
             }
@@ -107,7 +107,7 @@ export class Axis {
             }
             AxisLabelsEventManager.setHoverEvents(block, axisElement);
             if (axisOptions.labels.defaultTooltip)
-                AxisLabelHelper.setTitles(axisElement);
+                AxisLabelHelper.setTitles(axisElement, axisOptions);
             this.handleLabelsHighlight(axisElement, block.filterEventManager.getSelectedKeys());
         });
         // Ведется отсчет нескольких кадров, чтобы получить уже 100%-отрендеренные лейблы оси.

package/lib/engine/features/axis/axisLabelDomHelper.d.ts

@@ -4,7 +4,7 @@ import { AxisModelOptions, Orient, ScaleKeyModel, ScaleValueModel } from "../../
 import { Block } from "../../block/block";
 import { Size } from '../../../config/config';
 export declare class AxisLabelHelper {
-    static setTitles(axisElement: Selection<SVGGElement, unknown, BaseType, any>): void;
+    static setTitles(axisElement: Selection<SVGGElement, unknown, BaseType, any>, axisOptions: AxisModelOptions): void;
     static setAxisLabelPaddingByOrient(axis: IAxis<any>, axisOptions: AxisModelOptions): void;
     static rotateLabels(axisElement: Selection<SVGGElement, unknown, HTMLElement, any>, keyAxisOrient: Orient): void;
     static cropLabels(block: Block, scale: AxisScale<any>, scaleOptions: ScaleKeyModel | ScaleValueModel, axisOptions: AxisModelOptions, blockSize: Size): void;

package/lib/engine/features/axis/axisLabelDomHelper.js

@@ -3,16 +3,17 @@ import { DomHelper } from '../../helpers/domHelper';
 import { Helper } from '../../helpers/helper';
 import { AXIS_HORIZONTAL_LABEL_PADDING, AXIS_VERTICAL_LABEL_PADDING } from '../../../model/margin/twoDim/twoDimMarginModel';
 export class AxisLabelHelper {
-    static setTitles(axisElement) {
+    static setTitles(axisElement, axisOptions) {
         axisElement.selectAll('.tick text')
             .each(function (d, i) {
             const tickTitle = select(this).select('title');
             if (tickTitle.empty())
                 select(this)
                     .append('title')
-                    .text(d);
-            else
-                tickTitle.text(d);
+                    .text(axisOptions.browserTooltip.format(d));
+            else {
+                tickTitle.text((axisOptions.browserTooltip.format(d)));
+            }
         });
     }
     static setAxisLabelPaddingByOrient(axis, axisOptions) {

package/lib/engine/features/valueLabelsCollision/valueLabelsCollision.d.ts

@@ -23,6 +23,7 @@ export declare class ValueLabelsCollision {
     static resolveValueLabelsCollisions(newValueLabels: Selection<SVGTextElement, MdtChartsDataRow, SVGGElement, unknown>, valueLabelsSettings: TwoDimensionalValueLabels): void;
     private static getValueLabelElementsRectInfo;
     private static shiftValueLabelsCollision;
+    private static handleCollisionShift;
     private static toggleValueLabelElementsVisibility;
-    private static changeLabelElementCoordinateX;
+    private static changeLabelElementCoordinateByAxis;
 }

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

@@ -23,13 +23,17 @@ export class ValueLabelsCollision {
     }
     static shiftValueLabelsCollision(valueLabelElementsRectInfo, chartBlock) {
         valueLabelElementsRectInfo.forEach(element => {
-            if (chartBlock.left.mode === 'shift' && chartBlock.left.hasCollision(element.boundingClientRect)) {
-                chartBlock.left.shiftCoordinate(element.boundingClientRect);
-                this.changeLabelElementCoordinateX(element);
-            }
-            if (chartBlock.right.mode === 'shift' && chartBlock.right.hasCollision(element.boundingClientRect)) {
-                chartBlock.right.shiftCoordinate(element.boundingClientRect);
-                this.changeLabelElementCoordinateX(element);
+            this.handleCollisionShift(chartBlock, element);
+        });
+    }
+    static handleCollisionShift(chartBlock, element) {
+        const sides = Object.keys(chartBlock);
+        sides.forEach(side => {
+            const blockSide = chartBlock[side];
+            const axisCoordinate = side === 'left' || side === 'right' ? 'x' : 'y';
+            if (blockSide.mode === 'shift' && blockSide.hasCollision(element.boundingClientRect)) {
+                blockSide.shiftCoordinate(element.boundingClientRect);
+                this.changeLabelElementCoordinateByAxis(element, axisCoordinate);
             }
         });
     }
@@ -41,8 +45,8 @@ export class ValueLabelsCollision {
                 select(labelInfo.svgElement).style('display', 'none');
         });
     }
-    static changeLabelElementCoordinateX(element) {
+    static changeLabelElementCoordinateByAxis(element, axis) {
         select(element.svgElement)
-            .attr('x', element.boundingClientRect.x);
+            .attr(axis, element.boundingClientRect[axis]);
     }
 }

package/lib/engine/polarNotation/polarManager.d.ts

@@ -3,9 +3,11 @@ import { Block } from "../block/block";
 import { Engine } from "../engine";
 import { MdtChartsDataSource } from "../../config/config";
 import { ChartContentManager } from "../contentManager/contentManagerFactory";
+import { FilterEventManager } from "../filterManager/filterEventManager";
 export declare class PolarManager implements ChartContentManager {
     render(engine: Engine, model: Model<PolarOptionsModel>): void;
     updateData(block: Block, model: Model<PolarOptionsModel>, data: MdtChartsDataSource): void;
     updateColors(block: Block, model: Model<PolarOptionsModel>): void;
+    clearSelection(filterEventManager: FilterEventManager, model: Model<PolarOptionsModel>): void;
     private renderCharts;
 }

package/lib/engine/polarNotation/polarManager.js

@@ -22,7 +22,7 @@ export class PolarManager {
         engine.block.getSvg()
             .on('click', (e) => {
             if (e.target === engine.block.getSvg().node())
-                engine.block.filterEventManager.clearKeysForPolar(model.chartBlock.margin, model.blockCanvas.size, options);
+                this.clearSelection(engine.block.filterEventManager, model);
         });
     }
     updateData(block, model, data) {
@@ -51,6 +51,9 @@ export class PolarManager {
         Legend.get().updateColors(block, model.options);
         Donut.updateColors(block, model.options.charts[0]);
     }
+    clearSelection(filterEventManager, model) {
+        filterEventManager.clearKeysForPolar(model.chartBlock.margin, model.blockCanvas.size, model.options);
+    }
     renderCharts(block, charts, data, dataSource, margin, blockSize, donutSettings) {
         charts.forEach((chart) => {
             if (chart.type === 'donut')

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

@@ -1,7 +1,7 @@
 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';
+import { MdtChartsDataRow } from '../../../config/config';
 interface AreaOptions {
     staticSettings: LineLikeChartSettings;
 }
@@ -11,8 +11,8 @@ export declare class Area {
     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>[];
+    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, chart: TwoDimensionalChartModel, keyAxisOrient: Orient): Promise<any>[];
     updateColors(block: Block, chart: TwoDimensionalChartModel): void;
     private renderGrouped;
     private renderSegmented;
@@ -20,13 +20,18 @@ export declare class Area {
     private updateSegmented;
     private updateGroupedPath;
     private updateSegmentedPath;
-    private setSegmentColor;
     private setChartFillStyle;
     private createAreaGeneratorFactory;
     private createLineGeneratorFactory;
     private renderArea;
     private renderBorderLine;
+    private renderAreaSegmented;
+    private renderBorderLineSegmented;
+    private updateAreaSegmented;
+    private updateBorderLineSegmented;
     private updateArea;
     private updateBorderLine;
+    private getAllAreasWithNewData;
+    private getLineGeneratorFactory;
 }
 export {};

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

@@ -4,8 +4,9 @@ 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 { getStackedData, LineGeneratorFactory } from "../../../engine/twoDimensionalNotation/line/lineHelper";
 import { Line } from "../../../engine/twoDimensionalNotation/line/line";
+import { LineBuilder } from "../../../engine/twoDimensionalNotation/line/lineBuilder";
 export class Area {
     constructor(options) {
         this.options = options;
@@ -13,19 +14,19 @@ export class Area {
     static get(options) {
         return new Area(options);
     }
-    render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize) {
+    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);
     }
-    update(block, scales, newData, keyField, margin, chart, keyAxisOrient, blockSize) {
+    update(block, scales, newData, keyField, margin, chart, keyAxisOrient) {
         let promises;
         if (chart.isSegmented) {
             promises = this.updateSegmented(block, scales, newData, keyField, margin, chart, keyAxisOrient);
         }
         else {
-            promises = this.updateGrouped(block, scales, newData, keyField, margin, chart, keyAxisOrient, blockSize);
+            promises = this.updateGrouped(block, scales, newData, keyField, margin, chart, keyAxisOrient);
         }
         return promises;
     }
@@ -45,8 +46,7 @@ export class Area {
     }
     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);
+        const lineGeneratorFactory = this.getLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
         chart.data.valueFields.forEach((field, valueIndex) => {
             this.renderArea(areaGeneratorFactory, block, chart, data, field, valueIndex);
             if (lineGeneratorFactory)
@@ -55,31 +55,16 @@ export class Area {
         });
     }
     renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart) {
-        const stackedData = getStackedDataWithOwn(data, chart.data.valueFields.map(field => field.name));
         const areaGeneratorFactory = this.createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
-        const areaGenerator = areaGeneratorFactory.getSegmentedAreaGenerator();
-        const areas = block.svg.getChartGroup(chart.index)
-            .selectAll(`.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
-            .data(stackedData)
-            .enter()
-            .append('path')
-            .attr('d', d => areaGenerator(d))
-            .attr('class', Area.areaChartClass)
-            .style('clip-path', `url(#${block.svg.getClipPathId()})`)
-            .style('pointer-events', 'none');
-        areas.each(function (d, i) {
-            DomHelper.setCssClasses(select(this), Helper.getCssClassesWithElementIndex(chart.cssClasses, i));
-        });
-        this.setSegmentColor(areas, chart.style.elementColors);
-        stackedData.forEach((dataset, index) => {
-            MarkDot.render(block, dataset, keyAxisOrient, scales, margin, keyField.name, index, '1', chart);
-        });
+        const lineGeneratorFactory = this.getLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
+        this.renderAreaSegmented(areaGeneratorFactory, block, scales, data, keyField, margin, keyAxisOrient, chart);
+        if (lineGeneratorFactory)
+            this.renderBorderLineSegmented(lineGeneratorFactory, block, data, chart);
     }
-    updateGrouped(block, scales, newData, keyField, margin, chart, keyAxisOrient, blockSize) {
+    updateGrouped(block, scales, newData, keyField, margin, chart, keyAxisOrient) {
         const promises = [];
         const areaGeneratorFactory = this.createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
-        const lineGeneratorFactory = chart.areaViewOptions.borderLine.on
-            && this.createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
+        const lineGeneratorFactory = this.getLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
         chart.data.valueFields.forEach((field, valueIndex) => {
             const chartGroup = block.svg.getChartGroup(chart.index);
             const areaProm = this.updateArea(areaGeneratorFactory, chartGroup, block, field, chart, newData, valueIndex);
@@ -93,18 +78,10 @@ export class Area {
         return promises;
     }
     updateSegmented(block, scales, newData, keyField, margin, chart, keyAxisOrient) {
-        const stackedData = getStackedDataWithOwn(newData, chart.data.valueFields.map(field => field.name));
-        const generatorFactory = this.createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
-        const areaGenerator = generatorFactory.getSegmentedAreaGenerator();
-        const areas = block.svg.getChartGroup(chart.index)
-            .selectAll(`path.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
-            .data(stackedData);
-        const prom = this.updateSegmentedPath(block, areas, areaGenerator);
-        areas.each((dataset, index) => {
-            // '1' - атрибут, показывающий координаты согласно полю значения
-            MarkDot.update(block, dataset, keyAxisOrient, scales, margin, keyField.name, index, '1', chart);
-        });
-        return [prom];
+        return [
+            this.updateAreaSegmented(block, scales, newData, keyField, margin, chart, keyAxisOrient),
+            this.updateBorderLineSegmented(block, scales, newData, keyField, margin, keyAxisOrient, chart)
+        ];
     }
     updateGroupedPath(block, areaObject, areaGenerator, newData) {
         return new Promise(resolve => {
@@ -142,9 +119,6 @@ export class Area {
                 resolve('');
         });
     }
-    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);
@@ -180,6 +154,62 @@ export class Area {
         DomHelper.setCssClasses(linePath, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
         DomHelper.setChartStyle(linePath, chart.areaViewOptions.borderLine.colorStyle, valueIndex, 'stroke');
     }
+    renderAreaSegmented(areaGeneratorFactory, block, scales, data, keyField, margin, keyAxisOrient, chart) {
+        const stackedData = getStackedDataWithOwn(data, chart.data.valueFields.map(field => field.name));
+        const areaGenerator = areaGeneratorFactory.getSegmentedAreaGenerator();
+        const areas = block.svg.getChartGroup(chart.index)
+            .selectAll(`.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
+            .data(stackedData)
+            .enter()
+            .append('path')
+            .attr('d', d => areaGenerator(d))
+            .attr('class', Area.areaChartClass)
+            .style('clip-path', `url(#${block.svg.getClipPathId()})`)
+            .style('pointer-events', 'none');
+        const thisClass = this;
+        areas.each(function (_, i) {
+            thisClass.setChartFillStyle(chart, select(this), i);
+            DomHelper.setCssClasses(select(this), Helper.getCssClassesWithElementIndex(chart.cssClasses, i));
+        });
+        stackedData.forEach((dataset, index) => {
+            MarkDot.render(block, dataset, keyAxisOrient, scales, margin, keyField.name, index, '1', chart);
+        });
+    }
+    renderBorderLineSegmented(generatorFactory, block, data, chart) {
+        let stackedData = getStackedData(data, chart);
+        const lineGenerator = generatorFactory.getSegmentedLineGenerator();
+        const lineBuilder = new LineBuilder({
+            elementAccessors: { getBlock: () => block }
+        }, chart, lineGenerator);
+        let lines = lineBuilder.renderSegmented(stackedData, Area.areaBorderLineClass);
+        lineBuilder.setSegmentColor(lines, chart.style.elementColors);
+        lines.each(function (_, i) {
+            DomHelper.setCssClasses(select(this), Helper.getCssClassesWithElementIndex(chart.cssClasses, i));
+        });
+    }
+    updateAreaSegmented(block, scales, newData, keyField, margin, chart, keyAxisOrient) {
+        const stackedData = getStackedDataWithOwn(newData, chart.data.valueFields.map(field => field.name));
+        const generatorFactory = this.createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
+        const areaGenerator = generatorFactory.getSegmentedAreaGenerator();
+        const areas = this.getAllAreasWithNewData(stackedData, block, chart, Area.areaChartClass);
+        const prom = this.updateSegmentedPath(block, areas, areaGenerator);
+        areas.each(function (dataset, index) {
+            // '1' - атрибут, показывающий координаты согласно полю значения
+            MarkDot.update(block, dataset, keyAxisOrient, scales, margin, keyField.name, index, '1', chart);
+        });
+        return prom;
+    }
+    updateBorderLineSegmented(block, scales, newData, keyField, margin, keyAxisOrient, chart) {
+        let stackedData = getStackedData(newData, chart);
+        const generatorFactory = this.createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
+        const lineGenerator = generatorFactory.getSegmentedLineGenerator();
+        const lineBuilder = new LineBuilder({
+            elementAccessors: { getBlock: () => block }
+        }, chart, lineGenerator);
+        let lines = lineBuilder.getAllLinesWithNewData(stackedData, Area.areaBorderLineClass);
+        let prom = lineBuilder.updateSegmentedPath(lines);
+        return prom;
+    }
     updateArea(areaGeneratorFactory, chartGroup, block, field, chart, newData, valueIndex) {
         const areaGenerator = areaGeneratorFactory.getAreaGenerator(field.name);
         const areaObject = chartGroup
@@ -192,6 +222,15 @@ export class Area {
             .select(`.${Area.areaBorderLineClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
         return Line.updateGroupedPath(block, borderLineObject, borderLineGenerator, newData);
     }
+    getAllAreasWithNewData(stackedData, block, chart, lineClass) {
+        return block.svg.getChartGroup(chart.index)
+            .selectAll(`path.${lineClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
+            .data(stackedData);
+    }
+    getLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField) {
+        return chart.areaViewOptions.borderLine.on
+            && this.createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
+    }
 }
 Area.areaChartClass = 'area';
 Area.areaBorderLineClass = 'area-border-line';

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

@@ -23,7 +23,6 @@ export declare class Line {
     private updateGrouped;
     private updateSegmented;
     static updateGroupedPath(block: Block, lineObject: Selection<BaseType, any, BaseType, any>, lineGenerator: ILine<MdtChartsDataRow>, newData: MdtChartsDataRow[]): Promise<any>;
-    private updateSegmentedPath;
-    private setSegmentColor;
+    private createLineGeneratorFactory;
 }
 export {};

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

@@ -4,6 +4,7 @@ import { getStackedData, LineGeneratorFactory, onLineChartInit } from './lineHel
 import { DomHelper } from '../../helpers/domHelper';
 import { Helper } from '../../helpers/helper';
 import { Pipeline } from '../../helpers/pipeline/Pipeline';
+import { LineBuilder } from "../../../engine/twoDimensionalNotation/line/lineBuilder";
 export class Line {
     constructor(options) {
         this.options = options;
@@ -57,30 +58,24 @@ 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, shouldRender: chart.lineLikeViewOptions.renderForKey });
+        const generatorFactory = this.createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
         const lineGenerator = generatorFactory.getSegmentedLineGenerator();
-        let lines = block.svg.getChartGroup(chart.index)
-            .selectAll(`.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
-            .data(stackedData)
-            .enter()
-            .append('path')
-            .attr('d', d => lineGenerator(d))
-            .attr('class', this.lineChartClass)
-            .style('fill', 'none')
-            .style('clip-path', `url(#${block.svg.getClipPathId()})`)
-            .style('pointer-events', 'none');
+        const lineBuilder = new LineBuilder({
+            elementAccessors: { getBlock: () => block }
+        }, chart, lineGenerator);
+        let lines = lineBuilder.renderSegmented(stackedData, Line.lineChartClass);
         lines = this.creatingPipeline.execute(lines, chart);
-        lines.each(function (d, i) {
+        lineBuilder.setSegmentColor(lines, chart.style.elementColors);
+        lines.each(function (_, i) {
             DomHelper.setCssClasses(select(this), Helper.getCssClassesWithElementIndex(chart.cssClasses, i));
         });
-        this.setSegmentColor(lines, chart.style.elementColors);
         stackedData.forEach((dataset, stackIndex) => {
             MarkDot.render(block, dataset, keyAxisOrient, scales, margin, keyField.name, stackIndex, '1', chart);
         });
     }
     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, shouldRender: chart.lineLikeViewOptions.renderForKey });
+        const generatorFactory = this.createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
         chart.data.valueFields.forEach((valueField, valueFieldIndex) => {
             const lineGenerator = generatorFactory.getLineGenerator(valueField.name);
             const lineObject = block.svg.getChartGroup(chart.index)
@@ -93,12 +88,13 @@ 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, shouldRender: chart.lineLikeViewOptions.renderForKey });
+        const generatorFactory = this.createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
         const lineGenerator = generatorFactory.getSegmentedLineGenerator();
-        const lines = block.svg.getChartGroup(chart.index)
-            .selectAll(`path.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
-            .data(stackedData);
-        const prom = this.updateSegmentedPath(block, lines, lineGenerator);
+        const lineBuilder = new LineBuilder({
+            elementAccessors: { getBlock: () => block }
+        }, chart, lineGenerator);
+        let lines = lineBuilder.getAllLinesWithNewData(stackedData, Line.lineChartClass);
+        const prom = lineBuilder.updateSegmentedPath(lines);
         lines.each((dataset, index) => {
             MarkDot.update(block, dataset, keyAxisOrient, scales, margin, keyField.name, index, '1', chart);
         });
@@ -122,26 +118,8 @@ export class Line {
                 resolve('');
         });
     }
-    updateSegmentedPath(block, linesObjects, lineGenerator) {
-        return new Promise(resolve => {
-            if (linesObjects.size() === 0) {
-                resolve('');
-                return;
-            }
-            let linesHandler = linesObjects;
-            if (block.transitionManager.durations.chartUpdate > 0)
-                linesHandler = linesHandler.interrupt()
-                    .transition()
-                    .duration(block.transitionManager.durations.chartUpdate)
-                    .on('end', () => resolve(''));
-            linesHandler
-                .attr('d', d => lineGenerator(d));
-            if (block.transitionManager.durations.chartUpdate <= 0)
-                resolve('');
-        });
-    }
-    setSegmentColor(segments, colorPalette) {
-        segments.style('stroke', (d, i) => colorPalette[i % colorPalette.length]);
+    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 });
     }
 }
 Line.lineChartClass = 'line';

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

@@ -0,0 +1,22 @@
+import { Block } from "../../../engine/block/block";
+import { MdtChartsDataRow } from "../../../config/config";
+import { TwoDimensionalChartModel } from "../../../model/model";
+import { BaseType, Selection } from "d3-selection";
+import { Segment } from "../../../engine/twoDimensionalNotation/lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware";
+import { Line as ILine } from "d3-shape";
+interface LineBuilderOptions {
+    elementAccessors: {
+        getBlock: () => Block;
+    };
+}
+export declare class LineBuilder {
+    private readonly options;
+    private readonly chart;
+    private readonly lineGenerator;
+    constructor(options: LineBuilderOptions, chart: TwoDimensionalChartModel, lineGenerator: ILine<MdtChartsDataRow>);
+    renderSegmented(stakedData: Segment[][], lineClass: string): Selection<SVGPathElement, Segment[], SVGGElement, any>;
+    setSegmentColor(segments: Selection<SVGGElement, unknown, SVGGElement, unknown>, colorPalette: string[]): void;
+    updateSegmentedPath(linesObjects: Selection<BaseType, any, BaseType, any>): Promise<any>;
+    getAllLinesWithNewData(stakedData: Segment[][], lineClass: string): Selection<SVGPathElement, Segment[], SVGGElement, any>;
+}
+export {};

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

@@ -0,0 +1,49 @@
+import { Helper } from "../../../engine/helpers/helper";
+export class LineBuilder {
+    constructor(options, chart, lineGenerator) {
+        this.options = options;
+        this.chart = chart;
+        this.lineGenerator = lineGenerator;
+    }
+    renderSegmented(stakedData, lineClass) {
+        const block = this.options.elementAccessors.getBlock();
+        return block.svg.getChartGroup(this.chart.index)
+            .selectAll(`.${lineClass}${Helper.getCssClassesLine(this.chart.cssClasses)}`)
+            .data(stakedData)
+            .enter()
+            .append('path')
+            .attr('d', d => this.lineGenerator(d))
+            .attr('class', lineClass)
+            .style('fill', 'none')
+            .style('clip-path', `url(#${block.svg.getClipPathId()})`)
+            .style('pointer-events', 'none');
+    }
+    setSegmentColor(segments, colorPalette) {
+        segments.style('stroke', (d, i) => colorPalette[i % colorPalette.length]);
+    }
+    updateSegmentedPath(linesObjects) {
+        const block = this.options.elementAccessors.getBlock();
+        return new Promise(resolve => {
+            if (linesObjects.size() === 0) {
+                resolve('');
+                return;
+            }
+            let linesHandler = linesObjects;
+            if (block.transitionManager.durations.chartUpdate > 0)
+                linesHandler = linesHandler.interrupt()
+                    .transition()
+                    .duration(block.transitionManager.durations.chartUpdate)
+                    .on('end', () => resolve(''));
+            linesHandler
+                .attr('d', d => this.lineGenerator(d));
+            if (block.transitionManager.durations.chartUpdate <= 0)
+                resolve('');
+        });
+    }
+    getAllLinesWithNewData(stakedData, lineClass) {
+        const block = this.options.elementAccessors.getBlock();
+        return block.svg.getChartGroup(this.chart.index)
+            .selectAll(`path.${lineClass}${Helper.getCssClassesLine(this.chart.cssClasses)}`)
+            .data(stakedData);
+    }
+}

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

@@ -3,6 +3,7 @@ import { Model, TwoDimensionalOptionsModel } from "../../model/model";
 import { Block } from "../block/block";
 import { ChartContentManager } from "../contentManager/contentManagerFactory";
 import { Engine } from "../engine";
+import { FilterEventManager } from "../filterManager/filterEventManager";
 export declare class TwoDimensionalManager implements ChartContentManager {
     private canvasValueLabels?;
     private linearGradientDef?;
@@ -10,6 +11,7 @@ export declare class TwoDimensionalManager implements ChartContentManager {
     render(engine: Engine, model: Model<TwoDimensionalOptionsModel>): void;
     updateData(block: Block, model: Model<TwoDimensionalOptionsModel>, data: MdtChartsDataSource): void;
     updateColors(block: Block, model: Model<TwoDimensionalOptionsModel>): void;
+    clearSelection(filterEventManager: FilterEventManager, model: Model<TwoDimensionalOptionsModel>): void;
     private renderCharts;
     private updateCharts;
 }