mdt-charts 1.27.1 → 1.27.2

package/lib/engine/polarNotation/donut/donut.js

@@ -1,8 +1,8 @@
-import { interpolate } from 'd3-interpolate';
+import { interpolate } from "d3-interpolate";
 import { Aggregator } from "../../features/aggregator/aggregator";
-import { DonutHelper } from './DonutHelper';
-import { DomHelper } from '../../helpers/domHelper';
-import { ColorReader } from '../../colorReader/colorReader';
+import { DonutHelper } from "./DonutHelper";
+import { DomHelper } from "../../helpers/domHelper";
+import { ColorReader } from "../../colorReader/colorReader";
 export class Donut {
     static render(block, data, margin, chart, blockSize, settings) {
         const outerRadius = DonutHelper.getOuterRadius(margin, blockSize);
@@ -12,12 +12,13 @@ export class Donut {
         const pieGenerator = DonutHelper.getPieGenerator(chart.data.valueField.name, settings.padAngle);
         const translateAttr = DonutHelper.getTranslate(margin, blockSize);
         Aggregator.render(block, chart.data.valueField, innerRadius, translateAttr, thickness, settings.aggregator);
-        const donutBlock = block.getSvg()
-            .append('g')
-            .attr('class', this.donutBlockClass)
-            .attr('x', translateAttr.x)
-            .attr('y', translateAttr.y)
-            .attr('transform', `translate(${translateAttr.x}, ${translateAttr.y})`);
+        const donutBlock = block
+            .getSvg()
+            .append("g")
+            .attr("class", this.donutBlockClass)
+            .attr("x", translateAttr.x)
+            .attr("y", translateAttr.y)
+            .attr("transform", `translate(${translateAttr.x}, ${translateAttr.y})`);
         this.renderNewArcItems(arcGenerator, pieGenerator, donutBlock, data, chart);
         this.renderClonesG(donutBlock);
     }
@@ -27,34 +28,31 @@ export class Donut {
         const innerRadius = DonutHelper.getInnerRadius(outerRadius, thickness);
         const arcGenerator = DonutHelper.getArcGenerator(outerRadius, innerRadius);
         const pieGenerator = DonutHelper.getPieGenerator(chart.data.valueField.name, donutSettings.padAngle);
-        const oldData = block.getSvg()
+        const oldData = block
+            .getSvg()
             .selectAll(`.${this.donutBlockClass}`)
-            .selectAll('path')
+            .selectAll("path")
             .data()
-            .map(d => d.data);
+            .map((d) => d.data);
         const dataNewZeroRows = DonutHelper.mergeDataWithZeros(data, oldData, keyField, ColorReader.getChartColorField(chart));
         const dataExtraZeroRows = DonutHelper.mergeDataWithZeros(oldData, data, keyField, ColorReader.getChartColorField(chart));
         const donutBlock = block.getSvg().select(`.${this.donutBlockClass}`);
         this.renderNewArcItems(arcGenerator, pieGenerator, donutBlock, dataNewZeroRows, chart);
-        const path = this.getAllArcGroups(block)
-            .data(pieGenerator(dataExtraZeroRows))
-            .select('path');
-        const items = this.getAllArcGroups(block)
-            .data(pieGenerator(data));
+        const path = this.getAllArcGroups(block).data(pieGenerator(dataExtraZeroRows)).select("path");
+        const items = this.getAllArcGroups(block).data(pieGenerator(data));
         this.setElementsColor(this.getAllArcGroups(block), chart);
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
             this.raiseClonesG(block);
-            path
-                .interrupt()
+            path.interrupt()
                 .transition()
                 .duration(block.transitionManager.durations.chartUpdate)
-                .on('end', () => {
+                .on("end", () => {
                 items.exit().remove();
-                resolve('updated');
+                resolve("updated");
             })
-                .attrTween('d', function (d) {
+                .attrTween("d", function (d) {
                 const interpolateFunc = interpolate(this._currentData, d);
-                return t => {
+                return (t) => {
                     this._currentData = interpolateFunc(t); // _current - старые данные до обновления, задаются во время рендера
                     return arcGenerator(this._currentData);
                 };
@@ -65,61 +63,52 @@ export class Donut {
         this.setElementsColor(this.getAllArcGroups(block), chart);
     }
     static getAllArcGroups(block) {
-        return block.getSvg()
-            .selectAll(`.${this.arcItemClass}`);
+        return block.getSvg().selectAll(`.${this.arcItemClass}`);
     }
     static getAllArcClones(block) {
-        return block.getSvg()
-            .selectAll(`.${Donut.arcCloneClass}`);
+        return block.getSvg().selectAll(`.${Donut.arcCloneClass}`);
     }
     static getAllArcShadows(block) {
-        return block.getSvg()
-            .selectAll(`.${this.arcShadowClass}`);
+        return block.getSvg().selectAll(`.${this.arcShadowClass}`);
     }
     static renderNewArcItems(arcGenerator, pieGenerator, donutBlock, data, chart) {
         const items = donutBlock
             .selectAll(`.${this.arcItemClass}`)
             .data(pieGenerator(data))
             .enter()
-            .append('g')
-            .attr('class', this.arcItemClass);
+            .append("g")
+            .attr("class", this.arcItemClass);
         const arcs = items
-            .append('path')
-            .attr('d', arcGenerator)
-            .attr('class', this.arcPathClass)
-            .each(function (d) { this._currentData = d; }); // _currentData используется для получения текущих данных внутри функции обновления.
+            .append("path")
+            .attr("d", arcGenerator)
+            .attr("class", this.arcPathClass)
+            .each(function (d) {
+            this._currentData = d;
+        }); // _currentData используется для получения текущих данных внутри функции обновления.
         DomHelper.setCssClasses(arcs, chart.cssClasses);
         this.setElementsColor(items, chart);
     }
     static setElementsColor(arcItems, chart) {
-        arcItems
-            .select('path')
-            .style('fill', ({ data }, i) => ColorReader.getColorForArc(data, chart, i));
+        arcItems.select("path").style("fill", ({ data }, i) => ColorReader.getColorForArc(data, chart, i));
     }
     /**
      * Рендер группы для клонов сегментов доната внутри donut-block. Объекдиняет в себе стили для клонов
      */
     static renderClonesG(donutBlock) {
-        const clonesShadowsG = donutBlock.append('g').attr('class', this.arcShadowsGroupClass).raise();
-        const clonesG = donutBlock.append('g').attr('class', this.arcClonesGroupClass).raise();
+        const clonesShadowsG = donutBlock.append("g").attr("class", this.arcShadowsGroupClass).raise();
+        const clonesG = donutBlock.append("g").attr("class", this.arcClonesGroupClass).raise();
         // ElementHighlighter.setShadowFilter(clonesG);
     }
     static raiseClonesG(block) {
-        block.getSvg()
-            .select(`.${this.donutBlockClass}`)
-            .select(`.${this.arcShadowsGroupClass}`)
-            .raise();
-        block.getSvg()
-            .select(`.${this.donutBlockClass}`)
-            .select(`.${this.arcClonesGroupClass}`)
-            .raise();
+        block.getSvg().select(`.${this.donutBlockClass}`).select(`.${this.arcShadowsGroupClass}`).raise();
+        block.getSvg().select(`.${this.donutBlockClass}`).select(`.${this.arcClonesGroupClass}`).raise();
     }
 }
-Donut.donutBlockClass = 'donut-block';
-Donut.arcPathClass = 'arc-path';
-Donut.arcItemClass = 'arc';
-Donut.arcHighlightedClass = 'arc-highlighted';
-Donut.arcClonesGroupClass = 'arc-clones';
-Donut.arcShadowsGroupClass = 'arc-shadow-clones';
-Donut.arcCloneClass = 'arc-clone';
-Donut.arcShadowClass = 'arc-shadow-clone';
+Donut.donutBlockClass = "donut-block";
+Donut.arcPathClass = "arc-path";
+Donut.arcItemClass = "arc";
+Donut.arcHighlightedClass = "arc-highlighted";
+Donut.arcClonesGroupClass = "arc-clones";
+Donut.arcShadowsGroupClass = "arc-shadow-clones";
+Donut.arcCloneClass = "arc-clone";
+Donut.arcShadowClass = "arc-shadow-clone";

package/lib/engine/polarNotation/extenders/polarRecordOverflowAlert.js

@@ -2,10 +2,10 @@ import { RecordOverflowAlertCore } from "../../features/recordOverflowAlert/reco
 class PolarRecordOverflowAlertClass {
     constructor() {
         this.text = {
-            one: 'категория',
-            twoToFour: 'категории',
-            tenToTwenty: 'категорий',
-            other: 'категорий'
+            one: "категория",
+            twoToFour: "категории",
+            tenToTwenty: "категорий",
+            other: "категорий"
         };
     }
     render(block, options) {
@@ -22,17 +22,17 @@ class PolarRecordOverflowAlertClass {
         };
     }
     getPositionAttrs(options) {
-        const position = options.legendPosition === 'off' ? 'bottom' : options.legendPosition;
-        if (position === 'right') {
+        const position = options.legendPosition === "off" ? "bottom" : options.legendPosition;
+        if (position === "right") {
             return {
-                bottom: '0',
-                right: '0'
+                bottom: "0",
+                right: "0"
             };
         }
-        if (position === 'bottom') {
+        if (position === "bottom") {
             return {
-                bottom: '0',
-                left: '0'
+                bottom: "0",
+                left: "0"
             };
         }
     }

package/lib/engine/polarNotation/polarManager.js

@@ -19,8 +19,7 @@ export class PolarManager {
                 hidedRecordsAmount: model.dataSettings.scope.hidedRecordsAmount,
                 legendPosition: model.options.legend.position
             });
-        engine.block.getSvg()
-            .on('click', (e) => {
+        engine.block.getSvg().on("click", (e) => {
             if (e.target === engine.block.getSvg().node())
                 this.clearSelection(engine.block.filterEventManager, model);
         });
@@ -35,8 +34,7 @@ export class PolarManager {
         ElementHighlighter.toggleActivityStyle(Donut.getAllArcGroups(block), true);
         Tooltip.hide(block);
         const options = model.options;
-        Donut.update(block, data[options.data.dataSource], model.chartBlock.margin, options.charts[0], model.blockCanvas.size, options.chartCanvas, options.data.keyField.name)
-            .then(() => {
+        Donut.update(block, data[options.data.dataSource], model.chartBlock.margin, options.charts[0], model.blockCanvas.size, options.chartCanvas, options.data.keyField.name).then(() => {
             Tooltip.render(block, model, data, model.otherComponents.tooltipBlock);
             block.filterEventManager.setListenerPolar(model.chartBlock.margin, model.blockCanvas.size, options);
         });
@@ -56,7 +54,7 @@ export class PolarManager {
     }
     renderCharts(block, charts, data, dataSource, margin, blockSize, donutSettings) {
         charts.forEach((chart) => {
-            if (chart.type === 'donut')
+            if (chart.type === "donut")
                 Donut.render(block, data[dataSource], margin, chart, blockSize, donutSettings);
         });
     }

package/lib/engine/transitionManager.js

@@ -40,14 +40,11 @@ export class TransitionManager {
             this.setDurations(transitionsDurations);
     }
     interruptTransitions() {
-        this.transitionableElemClasses.forEach(elemClass => {
-            const elementsSelection = this.block
-                .getSvg()
-                .selectAll(`.${elemClass}`)
-                .interrupt();
-            elementsSelection.nodes().forEach(node => interrupt(node));
+        this.transitionableElemClasses.forEach((elemClass) => {
+            const elementsSelection = this.block.getSvg().selectAll(`.${elemClass}`).interrupt();
+            elementsSelection.nodes().forEach((node) => interrupt(node));
         });
-        this.block.getSvg().selectAll(`.${Axis.axesClass}`).selectAll('*').interrupt();
+        this.block.getSvg().selectAll(`.${Axis.axesClass}`).selectAll("*").interrupt();
     }
     setDurations(durations) {
         if (durations.chartUpdate !== undefined && durations.chartUpdate >= 0)

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 } from '../../../config/config';
+import { MdtChartsDataRow } from "../../../config/config";
 interface AreaOptions {
     staticSettings: LineLikeChartSettings;
 }

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

@@ -1,9 +1,9 @@
-import { select } from 'd3-selection';
+import { select } from "d3-selection";
 import { MarkDot } from "../../features/markDots/markDot";
-import { AreaGeneratorFactory } from './areaHelper';
-import { DomHelper } from '../../helpers/domHelper';
-import { Helper } from '../../helpers/helper';
-import { getStackedDataWithOwn } from '../bar/stackedData/dataStacker';
+import { AreaGeneratorFactory } from "./areaHelper";
+import { DomHelper } from "../../helpers/domHelper";
+import { Helper } from "../../helpers/helper";
+import { getStackedDataWithOwn } from "../bar/stackedData/dataStacker";
 import { getStackedData, LineGeneratorFactory } from "../../../engine/twoDimensionalNotation/line/lineHelper";
 import { Line } from "../../../engine/twoDimensionalNotation/line/line";
 import { LineBuilder } from "../../../engine/twoDimensionalNotation/line/lineBuilder";
@@ -33,13 +33,11 @@ export class Area {
     updateColors(block, chart) {
         chart.data.valueFields.forEach((_vf, valueIndex) => {
             const chartGroup = block.svg.getChartGroup(chart.index);
-            const areaPath = chartGroup
-                .select(`.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
+            const areaPath = chartGroup.select(`.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
             this.setChartFillStyle(chart, areaPath, valueIndex);
             if (chart.areaViewOptions.borderLine.on) {
-                const borderLinePath = chartGroup
-                    .select(`.${Area.areaBorderLineClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
-                DomHelper.setChartElementColor(borderLinePath, chart.style.elementColors, valueIndex, 'stroke');
+                const borderLinePath = chartGroup.select(`.${Area.areaBorderLineClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
+                DomHelper.setChartElementColor(borderLinePath, chart.style.elementColors, valueIndex, "stroke");
             }
             MarkDot.updateColors(block, chart, valueIndex);
         });
@@ -84,95 +82,113 @@ export class Area {
         ];
     }
     updateGroupedPath(block, areaObject, areaGenerator, newData) {
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
             if (areaObject.size() === 0) {
-                resolve('');
+                resolve("");
                 return;
             }
             let areaHandler = areaObject;
             if (block.transitionManager.durations.chartUpdate > 0)
-                areaHandler = areaHandler.interrupt()
+                areaHandler = areaHandler
+                    .interrupt()
                     .transition()
                     .duration(block.transitionManager.durations.chartUpdate)
-                    .on('end', () => resolve(''));
-            areaHandler
-                .attr('d', areaGenerator(newData));
+                    .on("end", () => resolve(""));
+            areaHandler.attr("d", areaGenerator(newData));
             if (block.transitionManager.durations.chartUpdate <= 0)
-                resolve('');
+                resolve("");
         });
     }
     updateSegmentedPath(block, areasObjects, areaGenerator) {
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
             if (areasObjects.size() === 0) {
-                resolve('');
+                resolve("");
                 return;
             }
             let areaHandler = areasObjects;
             if (block.transitionManager.durations.chartUpdate > 0)
-                areaHandler = areaHandler.interrupt()
+                areaHandler = areaHandler
+                    .interrupt()
                     .transition()
                     .duration(block.transitionManager.durations.chartUpdate)
-                    .on('end', () => resolve(''));
-            areaHandler
-                .attr('d', d => areaGenerator(d));
+                    .on("end", () => resolve(""));
+            areaHandler.attr("d", (d) => areaGenerator(d));
             if (block.transitionManager.durations.chartUpdate <= 0)
-                resolve('');
+                resolve("");
         });
     }
     setChartFillStyle(chart, path, valueIndex) {
-        if (chart.areaViewOptions.fill.type === 'gradient')
-            DomHelper.setChartGradientStyle(path, chart.index, valueIndex);
+        if (chart.areaViewOptions.fill.type === "gradient") {
+            path.style("fill", `url(#${chart.areaViewOptions.fill.ids[valueIndex]})`);
+        }
         else
-            DomHelper.setChartStyle(path, chart.style, valueIndex, 'fill');
+            DomHelper.setChartStyle(path, chart.style, valueIndex, "fill");
     }
     createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField) {
-        return new AreaGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, shouldRender: chart.lineLikeViewOptions.renderForKey, curve: this.options.staticSettings.shape.curve.type });
+        return new AreaGeneratorFactory({
+            keyAxisOrient,
+            scales,
+            keyFieldName: keyField.name,
+            margin,
+            shouldRender: chart.lineLikeViewOptions.renderForKey,
+            curve: this.options.staticSettings.shape.curve.type
+        });
     }
     createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField) {
-        return new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, shouldRender: chart.lineLikeViewOptions.renderForKey, curve: this.options.staticSettings.shape.curve.type });
+        return new LineGeneratorFactory({
+            keyAxisOrient,
+            scales,
+            keyFieldName: keyField.name,
+            margin,
+            shouldRender: chart.lineLikeViewOptions.renderForKey,
+            curve: this.options.staticSettings.shape.curve.type
+        });
     }
     renderArea(areaGeneratorFactory, block, chart, data, field, valueIndex) {
         const area = areaGeneratorFactory.getAreaGenerator(field.name);
-        const path = block.svg.getChartGroup(chart.index)
-            .append('path')
-            .attr('d', area(data))
-            .attr('class', Area.areaChartClass)
-            .style('clip-path', `url(#${block.svg.getClipPathId()})`)
-            .style('pointer-events', 'none');
+        const path = block.svg
+            .getChartGroup(chart.index)
+            .append("path")
+            .attr("d", area(data))
+            .attr("class", Area.areaChartClass)
+            .style("clip-path", `url(#${block.svg.getClipPathId()})`)
+            .style("pointer-events", "none");
         DomHelper.setCssClasses(path, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
         this.setChartFillStyle(chart, path, valueIndex);
     }
     renderBorderLine(lineGeneratorFactory, block, chart, data, field, valueIndex) {
         const lineGenerator = lineGeneratorFactory.getLineGenerator(field.name);
-        const linePath = block.svg.getChartGroup(chart.index)
-            .append('path')
-            .attr('d', lineGenerator(data))
-            .attr('class', `${Area.areaBorderLineClass}`)
-            .style('fill', 'none')
-            .style('clip-path', `url(#${block.svg.getClipPathId()})`)
-            .style('pointer-events', 'none');
+        const linePath = block.svg
+            .getChartGroup(chart.index)
+            .append("path")
+            .attr("d", lineGenerator(data))
+            .attr("class", `${Area.areaBorderLineClass}`)
+            .style("fill", "none")
+            .style("clip-path", `url(#${block.svg.getClipPathId()})`)
+            .style("pointer-events", "none");
         DomHelper.setCssClasses(linePath, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
-        DomHelper.setChartStyle(linePath, chart.areaViewOptions.borderLine.colorStyle, valueIndex, 'stroke');
+        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 stackedData = getStackedDataWithOwn(data, chart.data.valueFields.map((field) => field.name));
         const areaGenerator = areaGeneratorFactory.getSegmentedAreaGenerator();
-        const areas = block.svg.getChartGroup(chart.index)
+        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');
+            .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);
+            MarkDot.render(block, dataset, keyAxisOrient, scales, margin, keyField.name, index, "1", chart);
         });
     }
     renderBorderLineSegmented(generatorFactory, block, data, chart) {
@@ -188,14 +204,14 @@ export class Area {
         });
     }
     updateAreaSegmented(block, scales, newData, keyField, margin, chart, keyAxisOrient) {
-        const stackedData = getStackedDataWithOwn(newData, chart.data.valueFields.map(field => field.name));
+        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);
+            MarkDot.update(block, dataset, keyAxisOrient, scales, margin, keyField.name, index, "1", chart);
         });
         return prom;
     }
@@ -212,25 +228,24 @@ export class Area {
     }
     updateArea(areaGeneratorFactory, chartGroup, block, field, chart, newData, valueIndex) {
         const areaGenerator = areaGeneratorFactory.getAreaGenerator(field.name);
-        const areaObject = chartGroup
-            .select(`.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
+        const areaObject = chartGroup.select(`.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
         return this.updateGroupedPath(block, areaObject, areaGenerator, newData);
     }
     updateBorderLine(lineGeneratorFactory, chartGroup, block, field, chart, newData, valueIndex) {
         const borderLineGenerator = lineGeneratorFactory.getLineGenerator(field.name);
-        const borderLineObject = chartGroup
-            .select(`.${Area.areaBorderLineClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
+        const borderLineObject = chartGroup.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)
+        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);
+        return (chart.areaViewOptions.borderLine.on &&
+            this.createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField));
     }
 }
-Area.areaChartClass = 'area';
-Area.areaBorderLineClass = 'area-border-line';
+Area.areaChartClass = "area";
+Area.areaBorderLineClass = "area-border-line";

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

@@ -4,19 +4,13 @@ export class AreaGenerator {
         this.options = options;
     }
     getVertical(xValue, y0Value, y1Value) {
-        const generator = area()
-            .x(xValue)
-            .y0(y0Value)
-            .y1(y1Value);
-        this.options.middlewares.forEach(middleware => middleware.handle(generator));
+        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));
+        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,6 +1,6 @@
-import { Area as IArea } from 'd3-shape';
-import { MdtChartsDataRow } from '../../../config/config';
-import { LineLikeGeneratorFactoryOptions } from '../lineLike/generatorFactory/lineLikeGeneratorFactory';
+import { Area as IArea } from "d3-shape";
+import { MdtChartsDataRow } from "../../../config/config";
+import { LineLikeGeneratorFactoryOptions } from "../lineLike/generatorFactory/lineLikeGeneratorFactory";
 export declare class AreaGeneratorFactory {
     private readonly options;
     constructor(options: LineLikeGeneratorFactoryOptions);

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

@@ -1,7 +1,7 @@
 import { Scale } from "../../features/scale/scale";
-import { LineLikeGeneratorDefinedMiddleware } from '../lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware';
-import { AreaGenerator } from './areaGenerator';
-import { LineLikeGeneratorCurveMiddleware } from '../lineLike/generatorMiddleware/lineLikeGeneratorCurveMiddleware';
+import { LineLikeGeneratorDefinedMiddleware } from "../lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware";
+import { AreaGenerator } from "./areaGenerator";
+import { LineLikeGeneratorCurveMiddleware } from "../lineLike/generatorMiddleware/lineLikeGeneratorCurveMiddleware";
 export class AreaGeneratorFactory {
     constructor(options) {
         this.options = options;
@@ -11,14 +11,18 @@ export class AreaGeneratorFactory {
         const generator = new AreaGenerator({
             middlewares: [
                 new LineLikeGeneratorCurveMiddleware({ curve: this.options.curve }),
-                new LineLikeGeneratorDefinedMiddleware({ definedFn: shouldRender, valueFieldNameGetter: () => valueFieldName, dataRowGetter: (d) => d })
+                new LineLikeGeneratorDefinedMiddleware({
+                    definedFn: shouldRender,
+                    valueFieldNameGetter: () => valueFieldName,
+                    dataRowGetter: (d) => d
+                })
             ]
         });
-        if (keyAxisOrient === 'bottom' || keyAxisOrient === '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 === "bottom" || keyAxisOrient === "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 generator.getHorizontal(d => scales.value(0) + margin.left, d => scales.value(d[valueFieldName]) + margin.left, d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.top);
+        if (keyAxisOrient === "left" || keyAxisOrient === "right") {
+            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);
         }
     }
     getSegmentedAreaGenerator() {
@@ -26,14 +30,18 @@ export class AreaGeneratorFactory {
         const generator = new AreaGenerator({
             middlewares: [
                 new LineLikeGeneratorCurveMiddleware({ curve: this.options.curve }),
-                new LineLikeGeneratorDefinedMiddleware({ definedFn: shouldRender, valueFieldNameGetter: (d) => d.fieldName, dataRowGetter: (d) => d.data })
+                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 === "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);
+        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/bar.d.ts

@@ -1,4 +1,4 @@
-import { Selection, BaseType } from 'd3-selection';
+import { Selection, BaseType } from "d3-selection";
 import { BarChartSettings, BlockMargin, Field, Orient, TwoDimensionalChartModel } from "../../../model/model";
 import { Scales } from "../../features/scale/scale";
 import { Block } from "../../block/block";
@@ -9,7 +9,7 @@ export interface RectElemWithAttrs extends SVGElement {
         y: number;
         width: number;
         height: number;
-        orient: 'vertical' | 'horizontal';
+        orient: "vertical" | "horizontal";
         scaleSize: number;
     };
 }