mdt-charts 1.27.1 → 1.27.2

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

@@ -1,16 +1,16 @@
-import { select } from 'd3-selection';
+import { select } from "d3-selection";
 import { EmbeddedLabels } from "../../features/embeddedLabels/embeddedLabels";
 import { EmbeddedLabelsHelper } from "../../features/embeddedLabels/embeddedLabelsHelper";
 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';
+import { getStackedDataWithOwn } from "./stackedData/dataStacker";
+import { Pipeline } from "../../helpers/pipeline/Pipeline";
 export class Bar {
     constructor() {
         this.barItemClass = Bar.barItemClass;
-        this.barSegmentGroupClass = 'bar-segment-group';
+        this.barSegmentGroupClass = "bar-segment-group";
         this.createBarPipeline = new Pipeline();
         this.createSegmentGroupBarsPipeline = new Pipeline();
         onBarChartInit(this.createBarPipeline, this.createSegmentGroupBarsPipeline);
@@ -36,9 +36,10 @@ export class Bar {
     }
     updateColors(block, chart) {
         chart.data.valueFields.forEach((_vf, index) => {
-            const bars = block.svg.getChartGroup(chart.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');
+            DomHelper.setChartStyle(bars, chart.style, index, "fill");
         });
     }
     getAllBarsForChart(block, chartCssClasses) {
@@ -46,41 +47,39 @@ export class Bar {
     }
     renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, barSettings) {
         chart.data.valueFields.forEach((field, index) => {
-            let 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()})`);
+                .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, chart.barViewOptions.barIndexes[index], sum(barsAmounts), barSettings);
             this.fillBarAttrs(bars, barAttrs);
             DomHelper.setCssClasses(bars, Helper.getCssClassesWithElementIndex(chart.cssClasses, index));
-            DomHelper.setChartStyle(bars, chart.style, index, 'fill');
+            DomHelper.setChartStyle(bars, chart.style, index, "fill");
             this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
-            if (chart.embeddedLabels !== 'none')
+            if (chart.embeddedLabels !== "none")
                 EmbeddedLabels.render(block, bars, barAttrs, EmbeddedLabelsHelper.getLabelField(chart.embeddedLabels, chart.data.valueFields, keyField, index), chart.embeddedLabels, keyAxisOrient, blockSize, margin, index, chart.cssClasses);
         });
     }
     renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, barSettings) {
-        const stackedData = getStackedDataWithOwn(data, chart.data.valueFields.map(field => field.name));
-        let groups = block.svg.getChartGroup(chart.index)
+        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)}`)
             .data(stackedData);
         if (groups.empty())
-            groups = groups
-                .data(stackedData)
-                .enter()
-                .append('g')
-                .attr('class', this.barSegmentGroupClass);
+            groups = groups.data(stackedData).enter().append("g").attr("class", this.barSegmentGroupClass);
         let bars = groups
             .selectAll(`rect${Helper.getCssClassesLine(chart.cssClasses)}`)
-            .data(d => d)
+            .data((d) => d)
             .enter()
-            .append('rect')
-            .attr('class', this.barItemClass)
-            .style('clip-path', `url(#${block.svg.getClipPathId()})`);
+            .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, chart.barViewOptions.barIndexes[0], sum(barsAmounts), barSettings);
         this.fillBarAttrs(bars, barAttrs);
@@ -99,10 +98,11 @@ export class Bar {
         const promises = [];
         chart.data.valueFields.forEach((valueField, index) => {
             const indexesOfRemoved = [];
-            block.svg.getChartGroup(chart.index)
+            block.svg
+                .getChartGroup(chart.index)
                 .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${index}`)
                 .filter((d, i) => {
-                if (newData.findIndex(row => row[keyField.name] === d[keyField.name]) === -1) {
+                if (newData.findIndex((row) => row[keyField.name] === d[keyField.name]) === -1) {
                     indexesOfRemoved.push(i); // Набор индексов для встроенных лейблов
                     return true;
                 }
@@ -110,31 +110,31 @@ export class Bar {
             })
                 .transition()
                 .duration(block.transitionManager.durations.elementFadeOut)
-                .style('opacity', 0)
+                .style("opacity", 0)
                 .remove();
-            const bars = block.svg.getChartGroup(chart.index)
+            const bars = block.svg
+                .getChartGroup(chart.index)
                 .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${index}`)
-                .filter(d => newData.findIndex(row => row[keyField.name] === d[keyField.name]) !== -1)
-                .style('opacity', 1)
+                .filter((d) => newData.findIndex((row) => row[keyField.name] === d[keyField.name]) !== -1)
+                .style("opacity", 1)
                 .data(newData);
             let newBars = bars
                 .enter()
-                .append('rect')
-                .attr('class', this.barItemClass)
-                .style('clip-path', `url(#${block.svg.getClipPathId()})`);
+                .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, chart.barViewOptions.barIndexes[index], sum(barsAmounts), barSettings);
-            const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate)
-                .then(() => {
-                bars.style('opacity', null);
+            const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate).then(() => {
+                bars.style("opacity", null);
                 this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
             });
             this.fillBarAttrs(newBars, barAttrs);
             promises.push(prom);
             this.setInitialAttrsInfo(newBars, keyAxisOrient, barSettings);
             DomHelper.setCssClasses(newBars, Helper.getCssClassesWithElementIndex(chart.cssClasses, index));
-            DomHelper.setChartStyle(newBars, chart.style, index, 'fill');
-            if (chart.embeddedLabels !== 'none') {
+            DomHelper.setChartStyle(newBars, chart.style, index, "fill");
+            if (chart.embeddedLabels !== "none") {
                 EmbeddedLabels.removeUnused(block, chart.cssClasses, index, indexesOfRemoved);
                 EmbeddedLabels.update(block, bars, keyAxisOrient, barAttrs, margin, valueField, chart.embeddedLabels, blockSize, newData, index, chart.cssClasses);
                 if (!newBars.empty())
@@ -145,32 +145,34 @@ export class Bar {
         return promises;
     }
     updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, barsAmounts, keyField, barSettings) {
-        const stackedData = getStackedDataWithOwn(newData, chart.data.valueFields.map(field => field.name));
-        block.svg.getChartGroup(chart.index)
+        const stackedData = getStackedDataWithOwn(newData, chart.data.valueFields.map((field) => field.name));
+        block.svg
+            .getChartGroup(chart.index)
             .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
-            .filter(d => newData.findIndex(row => row[keyField.name] === d.data[keyField.name]) === -1)
+            .filter((d) => newData.findIndex((row) => row[keyField.name] === d.data[keyField.name]) === -1)
             .transition()
             .duration(block.transitionManager.durations.elementFadeOut)
-            .style('opacity', 0)
+            .style("opacity", 0)
             .remove();
-        const groups = block.svg.getChartGroup(chart.index)
+        const groups = block.svg
+            .getChartGroup(chart.index)
             .selectAll(`g.${this.barSegmentGroupClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
             .data(stackedData);
         const bars = groups
             .selectAll(`.${this.barItemClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
-            .filter(d => newData.findIndex(row => row[keyField.name] === d.data[keyField.name]) !== -1)
-            .style('opacity', 1)
-            .data(d => d);
-        let newBars = bars.enter()
-            .append('rect')
-            .attr('class', this.barItemClass)
-            .style('clip-path', `url(#${block.svg.getClipPathId()})`);
+            .filter((d) => newData.findIndex((row) => row[keyField.name] === d.data[keyField.name]) !== -1)
+            .style("opacity", 1)
+            .data((d) => d);
+        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, chart.barViewOptions.barIndexes[0], sum(barsAmounts), barSettings);
-        const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate)
-            .then(() => {
+        const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate).then(() => {
             this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
-            bars.style('opacity', null);
+            bars.style("opacity", null);
         });
         this.fillBarAttrs(newBars, barAttrs);
         this.setInitialAttrsInfo(newBars, keyAxisOrient, barSettings);
@@ -187,7 +189,7 @@ export class Bar {
     fillBarAttrs(bars, barAttrs, transitionDuration = 0) {
         return new Promise((resolve) => {
             if (bars.size() === 0) {
-                resolve('');
+                resolve("");
                 return;
             }
             let barsHandler = bars;
@@ -196,32 +198,33 @@ export class Bar {
                     .interrupt()
                     .transition()
                     .duration(transitionDuration)
-                    .on('end', () => resolve(''));
+                    .on("end", () => resolve(""));
             }
-            barsHandler.attr('x', d => barAttrs.x(d))
-                .attr('y', d => barAttrs.y(d))
-                .attr('height', d => barAttrs.height(d))
-                .attr('width', d => barAttrs.width(d));
+            barsHandler
+                .attr("x", (d) => barAttrs.x(d))
+                .attr("y", (d) => barAttrs.y(d))
+                .attr("height", (d) => barAttrs.height(d))
+                .attr("width", (d) => barAttrs.width(d));
             if (transitionDuration <= 0)
-                resolve('');
+                resolve("");
         });
     }
     setSegmentColor(segments, colorPalette, segmentedIndex) {
-        segments.style('fill', colorPalette[segmentedIndex % colorPalette.length]);
+        segments.style("fill", colorPalette[segmentedIndex % colorPalette.length]);
     }
     /**
      * Устнановка координат для удобного обновления.
      */
     setInitialAttrsInfo(bars, keyAxisOrient, barSettings) {
         bars.each(function () {
-            const width = DomHelper.getSelectionNumericAttr(select(this), 'width');
-            const height = DomHelper.getSelectionNumericAttr(select(this), 'height');
-            const orient = keyAxisOrient === 'left' || keyAxisOrient === 'right' ? 'horizontal' : 'vertical';
-            let scaleSize = 0.06 * (orient === 'vertical' ? width : height);
+            const width = DomHelper.getSelectionNumericAttr(select(this), "width");
+            const height = DomHelper.getSelectionNumericAttr(select(this), "height");
+            const orient = keyAxisOrient === "left" || keyAxisOrient === "right" ? "horizontal" : "vertical";
+            let scaleSize = 0.06 * (orient === "vertical" ? width : height);
             scaleSize = scaleSize > barSettings.barDistance / 2 ? barSettings.barDistance / 2 : scaleSize;
             this.attrs = {
-                x: DomHelper.getSelectionNumericAttr(select(this), 'x'),
-                y: DomHelper.getSelectionNumericAttr(select(this), 'y'),
+                x: DomHelper.getSelectionNumericAttr(select(this), "x"),
+                y: DomHelper.getSelectionNumericAttr(select(this), "y"),
                 width,
                 height,
                 orient,
@@ -230,4 +233,4 @@ export class Bar {
         });
     }
 }
-Bar.barItemClass = 'bar-item';
+Bar.barItemClass = "bar-item";

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

@@ -22,12 +22,13 @@ export class BarSettingsStore {
         return barSize;
     }
     getBandItemPad(barIndex) {
-        const barDiff = (this.getBarStep() - this.getBandItemSize()) * this.canvasConfig.barsAmount / 2; // if bar bigger than maxWidth, diff for x coordinate
+        const barDiff = ((this.getBarStep() - this.getBandItemSize()) * this.canvasConfig.barsAmount) / 2; // if bar bigger than maxWidth, diff for x coordinate
         const barPad = this.getBandItemSize() * barIndex + this.modelSettings.barDistance * barIndex + barDiff; // Отступ бара от края. Зависит от количества баров в одной группе и порядке текущего бара
         return barPad;
     }
     getBarStep() {
-        return (this.canvasConfig.scaleBandWidth - this.modelSettings.barDistance * (this.canvasConfig.barsAmount - 1)) / this.canvasConfig.barsAmount; // Space for one bar
+        return ((this.canvasConfig.scaleBandWidth - this.modelSettings.barDistance * (this.canvasConfig.barsAmount - 1)) /
+            this.canvasConfig.barsAmount); // Space for one bar
     }
 }
 export class BarHelper {
@@ -56,65 +57,69 @@ export class BarHelper {
     static getBarsInGroupAmount(charts) {
         let amounts = [];
         charts.forEach((chart) => {
-            if (chart.type === 'bar' && chart.isSegmented)
+            if (chart.type === "bar" && chart.isSegmented)
                 amounts.push(1); // Сегментированный бар содержит все свои valueFields в одном баре
-            else if (chart.type === 'bar')
+            else if (chart.type === "bar")
                 amounts.push(chart.data.valueFields.length);
         });
         return amounts;
     }
     static setBarAttrsByKey(attrs, keyAxisOrient, scaleKey, margin, keyField, barIndex, settingsStore, isSegmented) {
-        if (keyAxisOrient === 'top' || keyAxisOrient === 'bottom') {
-            attrs.x = d => scaleKey(Helper.getKeyFieldValue(d, keyField, isSegmented)) + margin.left + settingsStore.getBandItemPad(barIndex);
-            attrs.width = d => settingsStore.getBandItemSize();
+        if (keyAxisOrient === "top" || keyAxisOrient === "bottom") {
+            attrs.x = (d) => scaleKey(Helper.getKeyFieldValue(d, keyField, isSegmented)) +
+                margin.left +
+                settingsStore.getBandItemPad(barIndex);
+            attrs.width = (d) => settingsStore.getBandItemSize();
         }
-        if (keyAxisOrient === 'left' || keyAxisOrient === 'right') {
-            attrs.y = d => scaleKey(Helper.getKeyFieldValue(d, keyField, isSegmented)) + margin.top + settingsStore.getBandItemPad(barIndex);
-            attrs.height = d => settingsStore.getBandItemSize();
+        if (keyAxisOrient === "left" || keyAxisOrient === "right") {
+            attrs.y = (d) => scaleKey(Helper.getKeyFieldValue(d, keyField, isSegmented)) +
+                margin.top +
+                settingsStore.getBandItemPad(barIndex);
+            attrs.height = (d) => settingsStore.getBandItemSize();
         }
     }
     static setGroupedBarAttrsByValue(attrs, keyAxisOrient, margin, scaleValue, valueFieldName) {
         this.setGroupedBandStartCoordinateAttr(attrs, keyAxisOrient, scaleValue, margin, valueFieldName);
-        if (keyAxisOrient === 'top' || keyAxisOrient === 'bottom') {
+        if (keyAxisOrient === "top" || keyAxisOrient === "bottom") {
             attrs.height = this.getBandItemValueStretch(scaleValue, valueFieldName);
         }
-        if (keyAxisOrient === 'left' || keyAxisOrient === 'right') {
+        if (keyAxisOrient === "left" || keyAxisOrient === "right") {
             attrs.width = this.getBandItemValueStretch(scaleValue, valueFieldName);
         }
     }
     static getBandItemValueStretch(scaleValue, valueFieldName) {
-        return d => Math.abs(scaleValue(d[valueFieldName]) - scaleValue(0));
+        return (d) => Math.abs(scaleValue(d[valueFieldName]) - scaleValue(0));
     }
     static setGroupedBandStartCoordinateAttr(attrs, keyAxisOrient, scaleValue, margin, valueFieldName) {
-        if (keyAxisOrient === 'top') {
-            attrs.y = d => scaleValue(Math.min(d[valueFieldName], 0)) + margin.top;
+        if (keyAxisOrient === "top") {
+            attrs.y = (d) => scaleValue(Math.min(d[valueFieldName], 0)) + margin.top;
         }
-        if (keyAxisOrient === 'bottom') {
-            attrs.y = d => scaleValue(Math.max(d[valueFieldName], 0)) + margin.top;
+        if (keyAxisOrient === "bottom") {
+            attrs.y = (d) => scaleValue(Math.max(d[valueFieldName], 0)) + margin.top;
         }
-        if (keyAxisOrient === 'left') {
-            attrs.x = d => scaleValue(Math.min(d[valueFieldName], 0)) + margin.left;
+        if (keyAxisOrient === "left") {
+            attrs.x = (d) => scaleValue(Math.min(d[valueFieldName], 0)) + margin.left;
         }
-        if (keyAxisOrient === 'right') {
-            attrs.x = d => scaleValue(Math.max(d[valueFieldName], 0)) + margin.left;
+        if (keyAxisOrient === "right") {
+            attrs.x = (d) => scaleValue(Math.max(d[valueFieldName], 0)) + margin.left;
         }
     }
     static setSegmentedBarAttrsByValue(attrs, keyAxisOrient, scaleValue, margin) {
-        if (keyAxisOrient === 'top') {
-            attrs.y = d => scaleValue(Math.min(d[1], d[0])) + margin.top;
-            attrs.height = d => Math.abs(scaleValue(d[1]) - scaleValue(d[0]));
+        if (keyAxisOrient === "top") {
+            attrs.y = (d) => scaleValue(Math.min(d[1], d[0])) + margin.top;
+            attrs.height = (d) => Math.abs(scaleValue(d[1]) - scaleValue(d[0]));
         }
-        if (keyAxisOrient === 'bottom') {
-            attrs.y = d => scaleValue(Math.max(d[1], d[0])) + margin.top;
-            attrs.height = d => Math.abs(scaleValue(d[1]) - scaleValue(d[0]));
+        if (keyAxisOrient === "bottom") {
+            attrs.y = (d) => scaleValue(Math.max(d[1], d[0])) + margin.top;
+            attrs.height = (d) => Math.abs(scaleValue(d[1]) - scaleValue(d[0]));
         }
-        if (keyAxisOrient === 'left') {
-            attrs.x = d => scaleValue(Math.min(d[1], d[0])) + margin.left;
-            attrs.width = d => Math.abs(scaleValue(d[1]) - scaleValue(d[0]));
+        if (keyAxisOrient === "left") {
+            attrs.x = (d) => scaleValue(Math.min(d[1], d[0])) + margin.left;
+            attrs.width = (d) => Math.abs(scaleValue(d[1]) - scaleValue(d[0]));
         }
-        if (keyAxisOrient === 'right') {
-            attrs.x = d => scaleValue(Math.max(d[1], d[0])) + margin.left;
-            attrs.width = d => Math.abs(scaleValue(d[1]) - scaleValue(d[0]));
+        if (keyAxisOrient === "right") {
+            attrs.x = (d) => scaleValue(Math.max(d[1], d[0])) + margin.left;
+            attrs.width = (d) => Math.abs(scaleValue(d[1]) - scaleValue(d[0]));
         }
     }
 }
@@ -125,10 +130,10 @@ export function onBarChartInit(createBarPipeline, createSegmentGroupBarsPipeline
 }
 function roundSegmentedBars(bars, segment) {
     const radiusValues = segment.chart.barViewOptions.borderRadius.segmented.handle(segment.segmentIndex);
-    return bars.style('clip-path', getClipPathValue(radiusValues));
+    return bars.style("clip-path", getClipPathValue(radiusValues));
 }
 function roundGroupedBars(bars, chart) {
-    return bars.style('clip-path', getClipPathValue(chart.barViewOptions.borderRadius.grouped));
+    return bars.style("clip-path", getClipPathValue(chart.barViewOptions.borderRadius.grouped));
 }
 export function getClipPathValue({ topLeft, topRight, bottomLeft, bottomRight }) {
     return `inset(0px round ${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px)`;

package/lib/engine/twoDimensionalNotation/dot/dotChart.js

@@ -16,53 +16,59 @@ export class CanvasDotChart {
         if (this.renderedChart)
             return;
         const valueFieldIndex = 0;
-        const elements = this.options.elementAccessors.getBlock().svg.getChartGroup(chart.index)
+        const elements = this.options.elementAccessors
+            .getBlock()
+            .svg.getChartGroup(chart.index)
             .selectAll(`.${this.dotChartItemClass}${Helper.getCssClassesLine(chart.cssClasses)}${Helper.getCssClassesLine(Helper.getCssClassesWithElementIndex(chart.cssClasses, valueFieldIndex))}`)
             .data(records)
             .enter()
-            .append('line')
+            .append("line")
             .style("stroke-width", chart.dotViewOptions.shape.width)
-            .attr('class', this.dotChartItemClass);
+            .attr("class", this.dotChartItemClass);
         const attrs = this.getAttrs(scales, chart, chart.data.valueFields[0], margin);
-        elements.attr('x1', d => attrs.x1(d))
-            .attr('y1', d => attrs.y1(d))
-            .attr('x2', d => attrs.x2(d))
-            .attr('y2', d => attrs.y2(d));
+        elements
+            .attr("x1", (d) => attrs.x1(d))
+            .attr("y1", (d) => attrs.y1(d))
+            .attr("x2", (d) => attrs.x2(d))
+            .attr("y2", (d) => attrs.y2(d));
         DomHelper.setCssClasses(elements, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueFieldIndex));
-        DomHelper.setChartStyle(elements, chart.style, valueFieldIndex, 'stroke');
+        DomHelper.setChartStyle(elements, chart.style, valueFieldIndex, "stroke");
         this.renderedChart = chart;
     }
     update(scales, newRecords, margin) {
         if (!this.renderedChart)
             return;
         const valueFieldIndex = 0;
-        const elements = this.options.elementAccessors.getBlock().svg.getChartGroup(this.renderedChart.index)
+        const elements = this.options.elementAccessors
+            .getBlock()
+            .svg.getChartGroup(this.renderedChart.index)
             .selectAll(`.${this.dotChartItemClass}${Helper.getCssClassesLine(this.renderedChart.cssClasses)}${Helper.getCssClassesLine(Helper.getCssClassesWithElementIndex(this.renderedChart.cssClasses, valueFieldIndex))}`)
             .data(newRecords);
         elements.exit().remove();
         const newElements = elements
             .enter()
-            .append('line')
+            .append("line")
             .style("stroke-width", this.renderedChart.dotViewOptions.shape.width)
-            .attr('class', this.dotChartItemClass);
+            .attr("class", this.dotChartItemClass);
         const attrs = this.getAttrs(scales, this.renderedChart, this.renderedChart.data.valueFields[0], margin);
-        newElements.attr('x1', d => attrs.x1(d))
-            .attr('y1', d => attrs.y1(d))
-            .attr('x2', d => attrs.x2(d))
-            .attr('y2', d => attrs.y2(d));
+        newElements
+            .attr("x1", (d) => attrs.x1(d))
+            .attr("y1", (d) => attrs.y1(d))
+            .attr("x2", (d) => attrs.x2(d))
+            .attr("y2", (d) => attrs.y2(d));
         DomHelper.setCssClasses(newElements, Helper.getCssClassesWithElementIndex(this.renderedChart.cssClasses, valueFieldIndex));
-        DomHelper.setChartStyle(newElements, this.renderedChart.style, valueFieldIndex, 'stroke');
+        DomHelper.setChartStyle(newElements, this.renderedChart.style, valueFieldIndex, "stroke");
         return [
-            new Promise(resolve => {
+            new Promise((resolve) => {
                 elements
                     .interrupt()
                     .transition()
                     .duration(this.options.elementAccessors.getBlock().transitionManager.durations.chartUpdate)
-                    .attr('x1', d => attrs.x1(d))
-                    .attr('y1', d => attrs.y1(d))
-                    .attr('x2', d => attrs.x2(d))
-                    .attr('y2', d => attrs.y2(d))
-                    .on('end', () => resolve());
+                    .attr("x1", (d) => attrs.x1(d))
+                    .attr("y1", (d) => attrs.y1(d))
+                    .attr("x2", (d) => attrs.x2(d))
+                    .attr("y2", (d) => attrs.y2(d))
+                    .on("end", () => resolve());
             })
         ];
     }
@@ -75,31 +81,43 @@ export class CanvasDotChart {
         };
         const settingsStore = new DotChartSettingsStore({ scaleBandWidth: Scale.getScaleBandWidth(scales.key) });
         // TODO: refactor
-        if (this.options.canvas.keyAxisOrient === 'top' || this.options.canvas.keyAxisOrient === 'bottom') {
-            const handleBase = d => scales.key(Helper.getKeyFieldValue(d, this.options.dataOptions.keyFieldName, false)) + margin.left + settingsStore.getBandItemPad();
-            attrs.x1 = d => chart.dotViewOptions.shape.handleStartCoordinate(handleBase(d));
-            attrs.x2 = d => chart.dotViewOptions.shape.handleEndCoordinate(handleBase(d) + settingsStore.getBandItemSize());
+        if (this.options.canvas.keyAxisOrient === "top" || this.options.canvas.keyAxisOrient === "bottom") {
+            const handleBase = (d) => scales.key(Helper.getKeyFieldValue(d, this.options.dataOptions.keyFieldName, false)) +
+                margin.left +
+                settingsStore.getBandItemPad();
+            attrs.x1 = (d) => chart.dotViewOptions.shape.handleStartCoordinate(handleBase(d));
+            attrs.x2 = (d) => chart.dotViewOptions.shape.handleEndCoordinate(handleBase(d) + settingsStore.getBandItemSize());
         }
-        if (this.options.canvas.keyAxisOrient === 'left' || this.options.canvas.keyAxisOrient === 'right') {
-            const handleBase = d => scales.key(Helper.getKeyFieldValue(d, this.options.dataOptions.keyFieldName, false)) + margin.top + settingsStore.getBandItemPad();
-            attrs.y1 = d => chart.dotViewOptions.shape.handleStartCoordinate(handleBase(d));
-            attrs.y2 = d => chart.dotViewOptions.shape.handleEndCoordinate(handleBase(d) + settingsStore.getBandItemSize());
+        if (this.options.canvas.keyAxisOrient === "left" || this.options.canvas.keyAxisOrient === "right") {
+            const handleBase = (d) => scales.key(Helper.getKeyFieldValue(d, this.options.dataOptions.keyFieldName, false)) +
+                margin.top +
+                settingsStore.getBandItemPad();
+            attrs.y1 = (d) => chart.dotViewOptions.shape.handleStartCoordinate(handleBase(d));
+            attrs.y2 = (d) => chart.dotViewOptions.shape.handleEndCoordinate(handleBase(d) + settingsStore.getBandItemSize());
         }
-        if (this.options.canvas.keyAxisOrient === 'top') {
-            attrs.y1 = d => scales.value(Math.min(d[field.name], 0)) + margin.top + BarHelper.getBandItemValueStretch(scales.value, field.name)(d);
-            attrs.y2 = d => scales.value(Math.min(d[field.name], 0)) + margin.top + BarHelper.getBandItemValueStretch(scales.value, field.name)(d);
+        if (this.options.canvas.keyAxisOrient === "top") {
+            attrs.y1 = (d) => scales.value(Math.min(d[field.name], 0)) +
+                margin.top +
+                BarHelper.getBandItemValueStretch(scales.value, field.name)(d);
+            attrs.y2 = (d) => scales.value(Math.min(d[field.name], 0)) +
+                margin.top +
+                BarHelper.getBandItemValueStretch(scales.value, field.name)(d);
         }
-        if (this.options.canvas.keyAxisOrient === 'bottom') {
-            attrs.y1 = d => scales.value(Math.max(d[field.name], 0)) + margin.top;
-            attrs.y2 = d => scales.value(Math.max(d[field.name], 0)) + margin.top;
+        if (this.options.canvas.keyAxisOrient === "bottom") {
+            attrs.y1 = (d) => scales.value(Math.max(d[field.name], 0)) + margin.top;
+            attrs.y2 = (d) => scales.value(Math.max(d[field.name], 0)) + margin.top;
         }
-        if (this.options.canvas.keyAxisOrient === 'left') {
-            attrs.x1 = d => scales.value(Math.min(d[field.name], 0)) + margin.left + BarHelper.getBandItemValueStretch(scales.value, field.name)(d);
-            attrs.x2 = d => scales.value(Math.min(d[field.name], 0)) + margin.left + BarHelper.getBandItemValueStretch(scales.value, field.name)(d);
+        if (this.options.canvas.keyAxisOrient === "left") {
+            attrs.x1 = (d) => scales.value(Math.min(d[field.name], 0)) +
+                margin.left +
+                BarHelper.getBandItemValueStretch(scales.value, field.name)(d);
+            attrs.x2 = (d) => scales.value(Math.min(d[field.name], 0)) +
+                margin.left +
+                BarHelper.getBandItemValueStretch(scales.value, field.name)(d);
         }
-        if (this.options.canvas.keyAxisOrient === 'right') {
-            attrs.x1 = d => scales.value(Math.max(d[field.name], 0)) + margin.left;
-            attrs.x2 = d => scales.value(Math.max(d[field.name], 0)) + margin.left;
+        if (this.options.canvas.keyAxisOrient === "right") {
+            attrs.x1 = (d) => scales.value(Math.max(d[field.name], 0)) + margin.left;
+            attrs.x2 = (d) => scales.value(Math.max(d[field.name], 0)) + margin.left;
         }
         return attrs;
     }

package/lib/engine/twoDimensionalNotation/extenders/twoDimRecordOverflowAlert.js

@@ -14,18 +14,18 @@ class TwoDimRecordOverflowAlertClass {
         };
     }
     getText(chartOrientation) {
-        const isHorizontal = chartOrientation === 'horizontal';
+        const isHorizontal = chartOrientation === "horizontal";
         return {
-            one: isHorizontal ? 'строка' : 'столбец',
-            twoToFour: isHorizontal ? 'строки' : 'столбца',
-            tenToTwenty: isHorizontal ? 'строк' : 'столбцов',
-            other: isHorizontal ? 'строк' : 'столбцов'
+            one: isHorizontal ? "строка" : "столбец",
+            twoToFour: isHorizontal ? "строки" : "столбца",
+            tenToTwenty: isHorizontal ? "строк" : "столбцов",
+            other: isHorizontal ? "строк" : "столбцов"
         };
     }
     getPositionAttrs() {
         return {
-            right: '0px',
-            top: '0px'
+            right: "0px",
+            top: "0px"
         };
     }
 }

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

@@ -1,10 +1,10 @@
-import { Line as ILine } from 'd3-shape';
-import { BaseType, Selection } from 'd3-selection';
+import { Line as ILine } from "d3-shape";
+import { BaseType, Selection } from "d3-selection";
 import { BlockMargin, Field, LineLikeChartSettings, Orient, TwoDimensionalChartModel } from "../../../model/model";
 import { Scales } from "../../features/scale/scale";
 import { Block } from "../../block/block";
-import { MdtChartsDataRow } from '../../../config/config';
-import { Pipeline } from '../../helpers/pipeline/Pipeline';
+import { MdtChartsDataRow } from "../../../config/config";
+import { Pipeline } from "../../helpers/pipeline/Pipeline";
 interface LineChartOptions {
     staticSettings: LineLikeChartSettings;
 }