mdt-charts 1.9.11 → 1.10.3

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

@@ -0,0 +1,125 @@
+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';
+export class Donut {
+    static render(block, data, margin, chart, blockSize, settings) {
+        const outerRadius = DonutHelper.getOuterRadius(margin, blockSize);
+        const thickness = DonutHelper.getThickness(settings, blockSize, margin);
+        const innerRadius = DonutHelper.getInnerRadius(outerRadius, thickness);
+        const arcGenerator = DonutHelper.getArcGenerator(outerRadius, innerRadius);
+        const pieGenerator = DonutHelper.getPieGenerator(chart.data.valueField.name, settings.padAngle);
+        const translateAttr = DonutHelper.getTranslate(margin, blockSize);
+        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);
+        Aggregator.render(block, data, chart.data.valueField, innerRadius, translateAttr, thickness, settings.aggregatorPad);
+    }
+    static update(block, data, margin, chart, blockSize, donutSettings, keyField) {
+        const outerRadius = DonutHelper.getOuterRadius(margin, blockSize);
+        const thickness = DonutHelper.getThickness(donutSettings, blockSize, margin);
+        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()
+            .selectAll(`.${this.donutBlockClass}`)
+            .selectAll('path')
+            .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));
+        this.setElementsColor(this.getAllArcGroups(block), chart);
+        return new Promise(resolve => {
+            this.raiseClonesG(block);
+            path
+                .interrupt()
+                .transition()
+                .duration(block.transitionManager.durations.chartUpdate)
+                .on('end', () => {
+                items.exit().remove();
+                resolve('updated');
+            })
+                .attrTween('d', function (d) {
+                const interpolateFunc = interpolate(this._currentData, d);
+                return t => {
+                    this._currentData = interpolateFunc(t); // _current - старые данные до обновления, задаются во время рендера
+                    return arcGenerator(this._currentData);
+                };
+            });
+        });
+    }
+    static updateColors(block, chart) {
+        this.setElementsColor(this.getAllArcGroups(block), chart);
+    }
+    static getAllArcGroups(block) {
+        return block.getSvg()
+            .selectAll(`.${this.arcItemClass}`);
+    }
+    static getAllArcClones(block) {
+        return block.getSvg()
+            .selectAll(`.${Donut.arcCloneClass}`);
+    }
+    static getAllArcShadows(block) {
+        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);
+        const arcs = items
+            .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));
+    }
+    /**
+     * Рендер группы для клонов сегментов доната внутри 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();
+        // ElementHighlighter.setShadowFilter(clonesG);
+    }
+    static raiseClonesG(block) {
+        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';

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

@@ -0,0 +1,10 @@
+import { Model } from "../../model/model";
+import { Block } from "../block/block";
+import Engine from "../engine";
+import { MdtChartsDataSource } from "../../config/config";
+export declare class PolarManager {
+    static render(engine: Engine, model: Model): void;
+    static update(block: Block, model: Model, data: MdtChartsDataSource): void;
+    static updateColors(block: Block, model: Model): void;
+    private static renderCharts;
+}

package/lib/engine/polarNotation/polarManager.js

@@ -0,0 +1,55 @@
+import { Legend } from "../features/legend/legend";
+import { RecordOverflowAlert } from "../features/recordOverflowAlert/recordOverflowAlert";
+import { Title } from "../features/title/title";
+import { ElementHighlighter } from "../elementHighlighter/elementHighlighter";
+import { Tooltip } from "../features/tolltip/tooltip";
+import { Aggregator } from "../features/aggregator/aggregator";
+import { Donut } from "./donut/donut";
+export class PolarManager {
+    static render(engine, model) {
+        const options = model.options;
+        engine.block.renderSvg(model.blockCanvas.size);
+        this.renderCharts(engine.block, options.charts, engine.data, options.data.dataSource, model.chartBlock.margin, model.blockCanvas.size, model.chartSettings.donut);
+        Title.render(engine.block, options.title, model.otherComponents.titleBlock, model.blockCanvas.size);
+        Legend.render(engine.block, engine.data, options, model);
+        ``;
+        Tooltip.render(engine.block, model, engine.data, model.otherComponents.tooltipBlock);
+        engine.block.filterEventManager.setListenerPolar(model.chartBlock.margin, model.blockCanvas.size, options, model.chartSettings.donut);
+        if (model.dataSettings.scope.hidedRecordsAmount !== 0 && model.options.legend.position !== 'off')
+            RecordOverflowAlert.render(engine.block, model.dataSettings.scope.hidedRecordsAmount, model.options.legend.position);
+        engine.block.getSvg()
+            .on('click', (e) => {
+            if (e.target === engine.block.getSvg().node())
+                engine.block.filterEventManager.clearKeysForPolar(model.chartBlock.margin, model.blockCanvas.size, options, model.chartSettings.donut);
+        });
+    }
+    static update(block, model, data) {
+        block.transitionManager.interruptTransitions();
+        block.removeMouseEvents();
+        block.filterEventManager.updateData(data[model.options.data.dataSource]);
+        ElementHighlighter.removeDonutArcClones(block);
+        ElementHighlighter.removeFilter(Donut.getAllArcGroups(block));
+        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, model.chartSettings.donut, options.data.keyField.name)
+            .then(() => {
+            Tooltip.render(block, model, data, model.otherComponents.tooltipBlock);
+            block.filterEventManager.setListenerPolar(model.chartBlock.margin, model.blockCanvas.size, options, model.chartSettings.donut);
+        });
+        Aggregator.update(block, data[options.data.dataSource], options.charts[0].data.valueField, model.chartSettings.donut.aggregatorPad);
+        Legend.update(block, data, model);
+        if (model.options.legend.position !== 'off')
+            RecordOverflowAlert.update(block, model.dataSettings.scope.hidedRecordsAmount, model.options.legend.position);
+    }
+    static updateColors(block, model) {
+        Legend.updateColors(block, model.options);
+        Donut.updateColors(block, model.options.charts[0]);
+    }
+    static renderCharts(block, charts, data, dataSource, margin, blockSize, donutSettings) {
+        charts.forEach((chart) => {
+            if (chart.type === 'donut')
+                Donut.render(block, data[dataSource], margin, chart, blockSize, donutSettings);
+        });
+    }
+}

package/lib/engine/transitionManager.d.ts

@@ -0,0 +1,19 @@
+import { Transitions } from "../designer/designerConfig";
+import { Block } from "./block/block";
+interface Durations extends Transitions {
+}
+export declare class TransitionManager {
+    /**
+     * Анимации обновления в ms.
+     */
+    durations: Durations;
+    private block;
+    /**
+     * Классы "подвижных" элементов
+     */
+    private transitionableElemClasses;
+    constructor(block: Block, transitionsDurations?: Transitions);
+    interruptTransitions(): void;
+    private setDurations;
+}
+export {};

package/lib/engine/transitionManager.js

@@ -0,0 +1,64 @@
+import { interrupt } from "d3-transition";
+import { Axis } from "./features/axis/axis";
+import { EmbeddedLabels } from "./features/embeddedLabels/embeddedLabels";
+import { MarkDot } from "./features/markDots/markDot";
+import { Tooltip } from "./features/tolltip/tooltip";
+import { Aggregator } from "./features/aggregator/aggregator";
+import { Donut } from "./polarNotation/donut/donut";
+import { Area } from "./twoDimensionalNotation/area/area";
+import { Bar } from "./twoDimensionalNotation/bar/bar";
+import { Line } from "./twoDimensionalNotation/line/line";
+export class TransitionManager {
+    constructor(block, transitionsDurations = null) {
+        /**
+         * Анимации обновления в ms.
+         */
+        this.durations = {
+            chartUpdate: 1000,
+            tooltipSlide: 75,
+            higlightedScale: 200,
+            markerHover: 50,
+            elementFadeOut: 400
+        };
+        /**
+         * Классы "подвижных" элементов
+         */
+        this.transitionableElemClasses = [
+            Tooltip.tooltipBlockClass,
+            Tooltip.tooltipLineClass,
+            Axis.axesClass,
+            Area.areaChartClass,
+            Bar.barItemClass,
+            Line.lineChartClass,
+            MarkDot.markerDotClass,
+            EmbeddedLabels.embeddedLabelClass,
+            Donut.arcPathClass,
+            Aggregator.aggregatorValueClass
+        ];
+        this.block = block;
+        if (transitionsDurations)
+            this.setDurations(transitionsDurations);
+    }
+    interruptTransitions() {
+        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();
+    }
+    setDurations(durations) {
+        if (durations.chartUpdate !== undefined && durations.chartUpdate >= 0)
+            this.durations.chartUpdate = durations.chartUpdate;
+        if (durations.higlightedScale !== undefined && durations.higlightedScale >= 0)
+            this.durations.higlightedScale = durations.higlightedScale;
+        if (durations.elementFadeOut !== undefined && durations.elementFadeOut >= 0)
+            this.durations.elementFadeOut = durations.elementFadeOut;
+        if (durations.markerHover !== undefined && durations.markerHover >= 0)
+            this.durations.markerHover = durations.markerHover;
+        if (durations.tooltipSlide !== undefined && durations.tooltipSlide >= 0)
+            this.durations.tooltipSlide = durations.tooltipSlide;
+    }
+}

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

@@ -0,0 +1,17 @@
+import { BlockMargin, Field, Orient, TwoDimensionalChartModel } from "../../../model/model";
+import { Scales } from "../../features/scale/scale";
+import { Block } from "../../block/block";
+import { MdtChartsDataRow, Size } from '../../../config/config';
+export declare class Area {
+    static readonly areaChartClass = "area";
+    static render(block: Block, scales: Scales, data: MdtChartsDataRow[], keyField: Field, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size): void;
+    static update(block: Block, scales: Scales, newData: MdtChartsDataRow[], keyField: Field, margin: BlockMargin, chart: TwoDimensionalChartModel, keyAxisOrient: Orient, blockSize: Size): Promise<any>[];
+    static updateColors(block: Block, chart: TwoDimensionalChartModel): void;
+    private static renderGrouped;
+    private static renderSegmented;
+    private static updateGrouped;
+    private static updateSegmented;
+    private static updateGroupedPath;
+    private static updateSegmentedPath;
+    private static setSegmentColor;
+}

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

@@ -0,0 +1,131 @@
+import { stack } from 'd3-shape';
+import { select } from 'd3-selection';
+import { MarkDot } from "../../features/markDots/markDot";
+import { AreaHelper } from './areaHelper';
+import { DomHelper } from '../../helpers/domHelper';
+import { Helper } from '../../helpers/helper';
+export class Area {
+    static render(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize) {
+        if (chart.isSegmented)
+            this.renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart);
+        else
+            this.renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize);
+    }
+    static update(block, scales, newData, keyField, margin, chart, keyAxisOrient, blockSize) {
+        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);
+        }
+        return promises;
+    }
+    static updateColors(block, chart) {
+        chart.data.valueFields.forEach((_vf, valueIndex) => {
+            const path = block.getChartGroup(chart.index)
+                .select(`.${this.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
+            DomHelper.setChartStyle(path, chart.style, valueIndex, 'fill');
+            MarkDot.updateColors(block, chart, valueIndex);
+        });
+    }
+    static renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, blockSize) {
+        chart.data.valueFields.forEach((field, valueIndex) => {
+            const area = AreaHelper.getGroupedAreaGenerator(keyAxisOrient, scales, margin, keyField.name, field.name, blockSize);
+            const path = block.getChartGroup(chart.index)
+                .append('path')
+                .attr('d', area(data))
+                .attr('class', this.areaChartClass)
+                .style('clip-path', `url(#${block.getClipPathId()})`)
+                .style('pointer-events', 'none');
+            DomHelper.setCssClasses(path, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
+            DomHelper.setChartStyle(path, chart.style, valueIndex, 'fill');
+            MarkDot.render(block, data, keyAxisOrient, scales, margin, keyField.name, valueIndex, field.name, chart);
+        });
+    }
+    static renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart) {
+        const stackedData = stack().keys(chart.data.valueFields.map(field => field.name))(data);
+        const areaGenerator = AreaHelper.getSegmentedAreaGenerator(keyAxisOrient, scales, margin, keyField.name);
+        const areas = block.getChartGroup(chart.index)
+            .selectAll(`.${this.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
+            .data(stackedData)
+            .enter()
+            .append('path')
+            .attr('d', d => areaGenerator(d))
+            .attr('class', this.areaChartClass)
+            .style('clip-path', `url(#${block.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);
+        });
+    }
+    static updateGrouped(block, scales, newData, keyField, margin, chart, keyAxisOrient, blockSize) {
+        const promises = [];
+        chart.data.valueFields.forEach((field, valueIndex) => {
+            const areaGenerator = AreaHelper.getGroupedAreaGenerator(keyAxisOrient, scales, margin, keyField.name, field.name, blockSize);
+            const areaObject = block.getChartGroup(chart.index)
+                .select(`.${this.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
+            const prom = this.updateGroupedPath(block, areaObject, areaGenerator, newData);
+            promises.push(prom);
+            MarkDot.update(block, newData, keyAxisOrient, scales, margin, keyField.name, valueIndex, field.name, chart);
+        });
+        return promises;
+    }
+    static updateSegmented(block, scales, newData, keyField, margin, chart, keyAxisOrient) {
+        const stackedData = stack().keys(chart.data.valueFields.map(field => field.name))(newData);
+        const areaGenerator = AreaHelper.getSegmentedAreaGenerator(keyAxisOrient, scales, margin, keyField.name);
+        const areas = block.getChartGroup(chart.index)
+            .selectAll(`path.${this.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];
+    }
+    static updateGroupedPath(block, areaObject, areaGenerator, newData) {
+        return new Promise(resolve => {
+            if (areaObject.size() === 0) {
+                resolve('');
+                return;
+            }
+            let areaHandler = areaObject;
+            if (block.transitionManager.durations.chartUpdate > 0)
+                areaHandler = areaHandler.interrupt()
+                    .transition()
+                    .duration(block.transitionManager.durations.chartUpdate)
+                    .on('end', () => resolve(''));
+            areaHandler
+                .attr('d', areaGenerator(newData));
+            if (block.transitionManager.durations.chartUpdate <= 0)
+                resolve('');
+        });
+    }
+    static updateSegmentedPath(block, areasObjects, areaGenerator) {
+        return new Promise(resolve => {
+            if (areasObjects.size() === 0) {
+                resolve('');
+                return;
+            }
+            let areaHandler = areasObjects;
+            if (block.transitionManager.durations.chartUpdate > 0)
+                areaHandler = areaHandler.interrupt()
+                    .transition()
+                    .duration(block.transitionManager.durations.chartUpdate)
+                    .on('end', () => resolve(''));
+            areaHandler
+                .attr('d', d => areaGenerator(d));
+            if (block.transitionManager.durations.chartUpdate <= 0)
+                resolve('');
+        });
+    }
+    static setSegmentColor(segments, colorPalette) {
+        segments.style('fill', (d, i) => colorPalette[i % colorPalette.length]);
+    }
+}
+Area.areaChartClass = 'area';

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

@@ -0,0 +1,9 @@
+import { Area as IArea } from 'd3-shape';
+import { MdtChartsDataRow, Size } from '../../../config/config';
+import { BlockMargin, Orient } from "../../../model/model";
+import { Scales } from "../../features/scale/scale";
+export declare class AreaHelper {
+    static getGroupedAreaGenerator(keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyFieldName: string, valueFieldName: string, blockSize: Size): IArea<MdtChartsDataRow>;
+    static getSegmentedAreaGenerator(keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyFieldName: string): IArea<MdtChartsDataRow>;
+    static getZeroCoordinate(axisOrient: Orient, margin: BlockMargin, blockSize: Size): number;
+}

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

@@ -0,0 +1,40 @@
+import { area } from 'd3-shape';
+import { Scale } from "../../features/scale/scale";
+export class AreaHelper {
+    static getGroupedAreaGenerator(keyAxisOrient, scales, margin, keyFieldName, valueFieldName, blockSize) {
+        if (keyAxisOrient === 'bottom' || keyAxisOrient === 'top')
+            return area()
+                .x(d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.left)
+                .y0(d => this.getZeroCoordinate(keyAxisOrient, margin, blockSize))
+                .y1(d => scales.value(d[valueFieldName]) + margin.top);
+        if (keyAxisOrient === 'left' || keyAxisOrient === 'right')
+            return area()
+                .x0(d => this.getZeroCoordinate(keyAxisOrient, margin, blockSize))
+                .x1(d => scales.value(d[valueFieldName]) + margin.left)
+                .y(d => Scale.getScaledValue(scales.key, d[keyFieldName]) + margin.top);
+    }
+    static getSegmentedAreaGenerator(keyAxisOrient, scales, margin, keyFieldName) {
+        if (keyAxisOrient === 'bottom' || keyAxisOrient === 'top') {
+            return area()
+                .x(d => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.left)
+                .y0(d => scales.value(d[0]) + margin.top)
+                .y1(d => scales.value(d[1]) + margin.top);
+        }
+        if (keyAxisOrient === 'left' || keyAxisOrient === 'right') {
+            return area()
+                .x0(d => scales.value(d[0]) + margin.left)
+                .x1(d => scales.value(d[1]) + margin.left)
+                .y(d => Scale.getScaledValue(scales.key, d.data[keyFieldName]) + margin.top);
+        }
+    }
+    static getZeroCoordinate(axisOrient, margin, blockSize) {
+        if (axisOrient === 'bottom')
+            return blockSize.height - margin.bottom;
+        if (axisOrient === 'top')
+            return margin.top;
+        if (axisOrient === 'left')
+            return margin.left;
+        if (axisOrient === 'right')
+            return blockSize.width - margin.right;
+    }
+}

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

@@ -0,0 +1,34 @@
+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";
+import { MdtChartsDataRow, Size } from "../../../config/config";
+export interface RectElemWithAttrs extends SVGElement {
+    attrs?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        orient: 'vertical' | 'horizontal';
+        scaleSize: number;
+    };
+}
+export declare class Bar {
+    static readonly barItemClass = "bar-item";
+    static readonly barItemCloneClass = "bar-item-clone";
+    private static readonly barSegmentGroupClass;
+    static render(block: Block, scales: Scales, data: MdtChartsDataRow[], keyField: Field, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size, barSettings: BarChartSettings, barsAmounts: number[], isSegmented: boolean, firstBarIndex: number): void;
+    static update(block: Block, newData: MdtChartsDataRow[], scales: Scales, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size, barsAmounts: number[], keyField: Field, firstBarIndex: number, barSettings: BarChartSettings, isSegmented: boolean): Promise<any>[];
+    static updateColors(block: Block, chart: TwoDimensionalChartModel): void;
+    static getAllBarsForChart(block: Block, chartCssClasses: string[]): Selection<BaseType, MdtChartsDataRow, BaseType, unknown>;
+    private static renderGrouped;
+    private static renderSegmented;
+    private static updateGrouped;
+    private static updateSegmented;
+    private static fillBarAttrs;
+    private static setSegmentColor;
+    /**
+     * Устнановка координат для удобного обновления.
+     */
+    private static setInitialAttrsInfo;
+}