mdt-charts 1.9.11 → 1.10.3

package/lib/engine/elementHighlighter/elementHighlighter.js

@@ -0,0 +1,198 @@
+import { select } from 'd3-selection';
+import { easeLinear } from 'd3-ease';
+import { interrupt } from 'd3-transition';
+import { DonutHelper } from '../polarNotation/donut/DonutHelper';
+import { DomHelper, SelectionCondition } from '../helpers/domHelper';
+import { Donut } from '../polarNotation/donut/donut';
+import { MarkDot } from '../features/markDots/markDot';
+import { Helper } from '../helpers/helper';
+import * as chroma from 'chroma-js';
+export class ElementHighlighter {
+    static toggleActivityStyle(elementSelection, isActive) {
+        elementSelection.classed(this.inactiveElemClass, !isActive);
+    }
+    /**
+     * @param blurPercent процент от макс. размера блюра
+     */
+    static setShadowFilter(elemSelection, blurPercent = 1) {
+        const maxBlurSize = 8;
+        elemSelection.each(function () {
+            const elemFill = select(this).style('fill') || 'rgb(0, 0, 0)';
+            const colorInRgb = chroma(elemFill).css();
+            const shadowColor = Helper.getRgbaFromRgb(colorInRgb, 0.6);
+            select(this).style('filter', `drop-shadow(0px 0px ${blurPercent * maxBlurSize}px ${shadowColor})`);
+        });
+    }
+    static removeFilter(elemSelection) {
+        elemSelection.style('filter', null);
+    }
+    static removeShadowClone(block, keyFieldName, selectedSegment, margin, blockSize, donutThickness) {
+        const shadowClone = Donut.getAllArcShadows(block)
+            .filter((d) => d.data[keyFieldName] === selectedSegment.datum().data[keyFieldName]);
+        this.removeFilter(shadowClone.select('path'));
+        this.toggleDonutHighlightState(shadowClone, margin, blockSize, donutThickness, block.transitionManager.durations.higlightedScale, false)
+            .then(() => shadowClone.remove());
+    }
+    static removeCloneForElem(block, keyFieldName, selectedSegment) {
+        const clone = Donut.getAllArcClones(block)
+            .filter((d) => d.data[keyFieldName] === selectedSegment.datum().data[keyFieldName]);
+        clone.remove();
+    }
+    static removeDonutArcClones(block) {
+        Donut.getAllArcClones(block).remove();
+        Donut.getAllArcShadows(block).remove();
+    }
+    static renderArcCloneAndHighlight(block, margin, arcSelection, blockSize, donutThickness) {
+        const clone = this.makeArcClone(arcSelection, block);
+        const shadowClone = this.makeArcShadow(arcSelection, block);
+        this.toggleDonutHighlightState(arcSelection, margin, blockSize, donutThickness, block.transitionManager.durations.higlightedScale, true);
+        this.toggleDonutHighlightState(clone, margin, blockSize, donutThickness, block.transitionManager.durations.higlightedScale, true);
+        this.toggleDonutHighlightState(shadowClone, margin, blockSize, donutThickness, block.transitionManager.durations.higlightedScale, true);
+        this.setShadowFilter(shadowClone.select('path'), donutThickness / 60);
+    }
+    static toggleDonutHighlightState(segment, margin, blockSize, donutThickness, transitionDuration, on) {
+        return new Promise(resolve => {
+            let scaleSize = 0;
+            if (on)
+                scaleSize = 5; // Если нужно выделить сегмент, то scaleSize не равен нулю и отображается увеличенным
+            segment
+                .select('path')
+                .interrupt()
+                .transition()
+                .duration(transitionDuration)
+                .on('end', () => resolve(''))
+                .ease(easeLinear)
+                .attr('d', (d, i) => DonutHelper.getArcGeneratorObject(blockSize, margin, donutThickness)
+                .outerRadius(DonutHelper.getOuterRadius(margin, blockSize) + scaleSize)
+                .innerRadius(DonutHelper.getOuterRadius(margin, blockSize) - donutThickness - scaleSize)(d, i));
+        });
+    }
+    static removeDonutHighlightingByKeys(arcSegments, keyFieldName, keyValues, margin, blockSize, donutThickness) {
+        const segments = DomHelper.getChartElementsByKeys(arcSegments, true, keyFieldName, keyValues, SelectionCondition.Exclude);
+        this.toggleDonutHighlightState(segments, margin, blockSize, donutThickness, 0, false);
+    }
+    static setInactiveFor2D(block, keyFieldName, charts) {
+        charts.forEach(chart => {
+            const elems = DomHelper.get2DChartElements(block, chart);
+            if (block.filterEventManager.getSelectedKeys().length === 0) {
+                this.toggleActivityStyle(elems, true);
+            }
+            else {
+                const unselectedElems = DomHelper.getChartElementsByKeys(elems, chart.isSegmented, keyFieldName, block.filterEventManager.getSelectedKeys(), SelectionCondition.Exclude);
+                const selectedElems = DomHelper.getChartElementsByKeys(elems, chart.isSegmented, keyFieldName, block.filterEventManager.getSelectedKeys());
+                this.toggleActivityStyle(unselectedElems, false);
+                this.toggleActivityStyle(selectedElems, true);
+            }
+        });
+    }
+    static toggleMarkDotVisible(markDots, isHighlight) {
+        markDots.classed(MarkDot.hiddenDotClass, !isHighlight);
+    }
+    static remove2DChartsFullHighlighting(block, charts, transitionDuration = 0) {
+        charts.forEach(chart => {
+            const elems = DomHelper.get2DChartElements(block, chart);
+            if (chart.type !== 'bar' && !chart.markersOptions.show)
+                elems.classed(MarkDot.hiddenDotClass, true);
+            this.toggle2DElements(elems, false, chart.type, transitionDuration);
+            this.toggleActivityStyle(elems, true);
+        });
+    }
+    static removeUnselected2DHighlight(block, keyFieldName, charts, transitionDuration) {
+        charts.forEach(chart => {
+            const elems = DomHelper.get2DChartElements(block, chart);
+            const selectedElems = DomHelper.getChartElementsByKeys(elems, chart.isSegmented, keyFieldName, block.filterEventManager.getSelectedKeys(), SelectionCondition.Exclude);
+            if (chart.type !== 'bar' && !chart.markersOptions.show)
+                selectedElems.classed(MarkDot.hiddenDotClass, true);
+            this.toggle2DElements(selectedElems, false, chart.type, transitionDuration);
+            if (block.filterEventManager.getSelectedKeys().length > 0)
+                this.toggleActivityStyle(selectedElems, false);
+        });
+    }
+    static toggle2DElements(elemSelection, isHighlight, chartType, transitionDuration) {
+        if (chartType === 'area' || chartType === 'line') {
+            elemSelection.call(this.toggleDot, isHighlight, transitionDuration);
+        }
+        else {
+            this.toggleBar(elemSelection, isHighlight);
+            if (isHighlight) {
+                elemSelection.each(function (d) {
+                    const attrs = this.attrs;
+                    const blurPercent = (attrs.orient === 'vertical' ? attrs.width : attrs.height) / 30; // 30px = max bar size, 13px - max blurSize 
+                    ElementHighlighter.setShadowFilter(select(this), blurPercent);
+                });
+            }
+            else {
+                this.removeFilter(elemSelection);
+            }
+        }
+    }
+    static makeArcClone(segment, block) {
+        const clone = this.renderDonutSegmentClone(segment, `${Donut.arcCloneClass}`);
+        block.getSvg().select(`.${Donut.arcClonesGroupClass}`).append(function () { return clone.node(); });
+        return clone;
+    }
+    static makeArcShadow(segment, block) {
+        const shadowClone = this.renderDonutSegmentClone(segment, `${Donut.arcShadowClass}`);
+        block.getSvg().select(`.${Donut.arcShadowsGroupClass}`).append(function () { return shadowClone.node(); });
+        return shadowClone;
+    }
+    static renderDonutSegmentClone(segment, newClass) {
+        return segment
+            .clone(true)
+            .style('pointer-events', 'none')
+            .classed(`${Donut.arcCloneClass}`, false)
+            .classed(newClass, true)
+            .remove();
+    }
+    static toggleBar(elemSelection, isHighlight) {
+        const animationName = 'bar-highlight';
+        if (isHighlight) {
+            elemSelection.each(function () {
+                const attrs = this.attrs;
+                const handler = select(this).interrupt(animationName).transition(animationName).duration(200);
+                if (attrs.orient === 'vertical') {
+                    handler
+                        .attr('x', attrs.x - attrs.scaleSize)
+                        .attr('width', attrs.width + attrs.scaleSize * 2);
+                }
+                else {
+                    handler
+                        .attr('y', attrs.y - attrs.scaleSize)
+                        .attr('height', attrs.height + attrs.scaleSize * 2);
+                }
+            });
+        }
+        else {
+            elemSelection.each(function () {
+                const attrs = this.attrs;
+                const handler = select(this).interrupt(animationName).transition(animationName).duration(200);
+                handler
+                    .attr('x', attrs.x)
+                    .attr('width', attrs.width)
+                    .attr('y', attrs.y)
+                    .attr('height', attrs.height);
+            });
+        }
+    }
+    static toggleDot(elementSelection, isScaled, transitionDuration = 0) {
+        const animationName = 'size-scale';
+        elementSelection.nodes().forEach(node => {
+            interrupt(node, animationName);
+        });
+        let elementsHandler = elementSelection;
+        if (transitionDuration > 0) {
+            elementsHandler = elementsHandler
+                .interrupt()
+                .transition(animationName)
+                .duration(transitionDuration)
+                .ease(easeLinear);
+        }
+        elementsHandler
+            .attr('r', isScaled ? 5 : 4)
+            .style('stroke-width', (isScaled ? 3.5 : 3) + 'px')
+            .each(function () {
+            select(this).style('fill', isScaled ? select(this).style('stroke') : 'white');
+        });
+    }
+}
+ElementHighlighter.inactiveElemClass = 'charts-opacity-inactive';

package/lib/engine/elementHighlighter/selectHighlighter.d.ts

@@ -0,0 +1,11 @@
+import { BaseType, Selection } from "d3-selection";
+import { PieArcDatum } from "d3-shape";
+import { MdtChartsDataRow, Size } from "../../config/config";
+import { BlockMargin, DonutChartSettings, PolarOptionsModel, TwoDimensionalOptionsModel } from "../../model/model";
+import { Block } from "../block/block";
+export declare class SelectHighlighter {
+    static click2DHandler(multySelection: boolean, appendKey: boolean, keyValue: string, selectedKeys: string[], block: Block, options: TwoDimensionalOptionsModel): void;
+    static clickPolarHandler(multySelection: boolean, appendKey: boolean, selectedSegment: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>, selectedKeys: string[], margin: BlockMargin, blockSize: Size, block: Block, options: PolarOptionsModel, arcItems: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, SVGGElement, unknown>, donutSettings: DonutChartSettings): void;
+    static clear2D(block: Block, options: TwoDimensionalOptionsModel): void;
+    static clearPolar(margin: BlockMargin, blockSize: Size, block: Block, options: PolarOptionsModel, arcItems: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, SVGGElement, unknown>, donutSettings: DonutChartSettings): void;
+}

package/lib/engine/elementHighlighter/selectHighlighter.js

@@ -0,0 +1,95 @@
+import { select } from "d3-selection";
+import { Legend } from "../features/legend/legend";
+import { DomHelper, SelectionCondition } from "../helpers/domHelper";
+import { Donut } from "../polarNotation/donut/donut";
+import { DonutHelper } from "../polarNotation/donut/DonutHelper";
+import { ElementHighlighter } from "./elementHighlighter";
+export class SelectHighlighter {
+    static click2DHandler(multySelection, appendKey, keyValue, selectedKeys, block, options) {
+        options.charts.forEach(chart => {
+            const selectedElements = DomHelper.getChartElementsByKeys(DomHelper.get2DChartElements(block, chart), chart.isSegmented, options.data.keyField.name, [keyValue]);
+            const elements = DomHelper.get2DChartElements(block, chart);
+            if (!appendKey) {
+                ElementHighlighter.toggle2DElements(selectedElements, false, chart.type, block.transitionManager.durations.markerHover);
+                if (chart.type !== 'bar' && !chart.markersOptions.show)
+                    ElementHighlighter.toggleMarkDotVisible(selectedElements, false);
+                if (selectedKeys.length > 0) {
+                    ElementHighlighter.toggleActivityStyle(selectedElements, false);
+                }
+                else {
+                    ElementHighlighter.toggleActivityStyle(elements, true);
+                    if (chart.type !== 'bar' && !chart.markersOptions.show)
+                        ElementHighlighter.toggleMarkDotVisible(elements, false);
+                }
+                return;
+            }
+            if (multySelection) {
+                ElementHighlighter.toggle2DElements(selectedElements, true, chart.type, block.transitionManager.durations.markerHover);
+                ElementHighlighter.toggleActivityStyle(selectedElements, true);
+                ElementHighlighter.toggleActivityStyle(DomHelper.getChartElementsByKeys(elements, chart.isSegmented, options.data.keyField.name, selectedKeys, SelectionCondition.Exclude), false);
+            }
+            else {
+                ElementHighlighter.toggle2DElements(DomHelper.getChartElementsByKeys(elements, chart.isSegmented, options.data.keyField.name, selectedKeys, SelectionCondition.Exclude), false, chart.type, block.transitionManager.durations.markerHover);
+                ElementHighlighter.toggleActivityStyle(elements, false);
+                if (chart.type !== 'bar' && !chart.markersOptions.show)
+                    ElementHighlighter.toggleMarkDotVisible(elements, false);
+                ElementHighlighter.toggleActivityStyle(selectedElements, true);
+                ElementHighlighter.toggle2DElements(selectedElements, true, chart.type, block.transitionManager.durations.markerHover);
+            }
+            if (chart.type !== 'bar' && !chart.markersOptions.show)
+                ElementHighlighter.toggleMarkDotVisible(selectedElements, true);
+        });
+    }
+    static clickPolarHandler(multySelection, appendKey, selectedSegment, selectedKeys, margin, blockSize, block, options, arcItems, donutSettings) {
+        const donutThickness = DonutHelper.getThickness(donutSettings, blockSize, margin);
+        if (!appendKey) {
+            ElementHighlighter.toggleDonutHighlightState(selectedSegment, margin, blockSize, donutThickness, block.transitionManager.durations.higlightedScale, false);
+            ElementHighlighter.removeCloneForElem(block, options.data.keyField.name, selectedSegment);
+            ElementHighlighter.removeShadowClone(block, options.data.keyField.name, selectedSegment, margin, blockSize, donutThickness);
+            if (selectedKeys.length > 0) {
+                ElementHighlighter.toggleActivityStyle(selectedSegment, false);
+                ElementHighlighter.toggleActivityStyle(Legend.getItemsByKeys(block, selectedKeys, SelectionCondition.Exclude), false);
+            }
+            else {
+                ElementHighlighter.toggleActivityStyle(Donut.getAllArcGroups(block), true);
+                ElementHighlighter.toggleActivityStyle(Legend.getItemsByKeys(block, [], SelectionCondition.Exclude), true);
+            }
+            return;
+        }
+        if (multySelection) {
+            ElementHighlighter.removeCloneForElem(block, options.data.keyField.name, selectedSegment);
+            ElementHighlighter.removeShadowClone(block, options.data.keyField.name, selectedSegment, margin, blockSize, donutThickness);
+            ElementHighlighter.renderArcCloneAndHighlight(block, margin, selectedSegment, blockSize, donutThickness);
+            ElementHighlighter.toggleActivityStyle(selectedSegment, true);
+            ElementHighlighter.toggleActivityStyle(DomHelper.getChartElementsByKeys(Donut.getAllArcGroups(block), true, options.data.keyField.name, selectedKeys, SelectionCondition.Exclude), false);
+        }
+        else {
+            ElementHighlighter.removeDonutHighlightingByKeys(arcItems, options.data.keyField.name, selectedKeys, margin, blockSize, donutThickness);
+            ElementHighlighter.removeDonutArcClones(block);
+            ElementHighlighter.toggleActivityStyle(Donut.getAllArcGroups(block), false);
+            ElementHighlighter.toggleActivityStyle(selectedSegment, true);
+            ElementHighlighter.renderArcCloneAndHighlight(block, margin, selectedSegment, blockSize, donutThickness);
+        }
+        ElementHighlighter.toggleActivityStyle(Legend.getItemsByKeys(block, selectedKeys, SelectionCondition.Exclude), false);
+        ElementHighlighter.toggleActivityStyle(Legend.getItemsByKeys(block, selectedKeys), true);
+    }
+    static clear2D(block, options) {
+        options.charts.forEach(chart => {
+            const elements = DomHelper.get2DChartElements(block, chart);
+            ElementHighlighter.toggle2DElements(elements, false, chart.type, block.transitionManager.durations.markerHover);
+            ElementHighlighter.toggleActivityStyle(elements, true);
+            if (chart.type !== 'bar' && !chart.markersOptions.show)
+                ElementHighlighter.toggleMarkDotVisible(elements, false);
+        });
+    }
+    static clearPolar(margin, blockSize, block, options, arcItems, donutSettings) {
+        const donutThickness = DonutHelper.getThickness(donutSettings, blockSize, margin);
+        ElementHighlighter.toggleDonutHighlightState(arcItems, margin, blockSize, donutThickness, block.transitionManager.durations.higlightedScale, false);
+        arcItems.each(function () {
+            ElementHighlighter.removeCloneForElem(block, options.data.keyField.name, select(this));
+            ElementHighlighter.removeShadowClone(block, options.data.keyField.name, select(this), margin, blockSize, donutThickness);
+        });
+        ElementHighlighter.toggleActivityStyle(Donut.getAllArcGroups(block), true);
+        ElementHighlighter.toggleActivityStyle(Legend.getItemsByKeys(block, [], SelectionCondition.Exclude), true);
+    }
+}

package/lib/engine/engine.d.ts

@@ -0,0 +1,20 @@
+import { Block } from './block/block';
+import { Model } from '../model/model';
+import { FilterCallback, FilterEventManager } from './filterManager/filterEventManager';
+import { MdtChartsDataSource } from '../config/config';
+export default class Engine {
+    private filterCallback;
+    private initializeSelected;
+    block: Block;
+    filterEventManager: FilterEventManager;
+    data: MdtChartsDataSource;
+    private chartId;
+    constructor(id: number, filterCallback: FilterCallback, initializeSelected: number[]);
+    render(model: Model, data: MdtChartsDataSource, parentElement: HTMLElement): void;
+    updateFullBlock(model: Model, data: MdtChartsDataSource): void;
+    destroy(): void;
+    updateData(model: Model, newData: MdtChartsDataSource): void;
+    updateColors(model: Model): void;
+    private renderCharts;
+    private setFilterEventManager;
+}

package/lib/engine/engine.js

@@ -0,0 +1,64 @@
+import { Block } from './block/block';
+import { ValueFormatter } from './valueFormatter';
+import { ContentManager } from './contentManager';
+import { FilterEventManager } from './filterManager/filterEventManager';
+import { Helper } from './helpers/helper';
+export default class Engine {
+    constructor(id, filterCallback, initializeSelected) {
+        this.filterCallback = filterCallback;
+        this.initializeSelected = initializeSelected;
+        this.chartId = id;
+    }
+    render(model, data, parentElement) {
+        this.data = data;
+        this.setFilterEventManager(model === null || model === void 0 ? void 0 : model.options);
+        this.block = new Block(model.blockCanvas.cssClass, parentElement, this.chartId, this.filterEventManager, model.transitions);
+        this.filterEventManager.setBlock(this.block);
+        this.block.renderWrapper(model.blockCanvas.size);
+        if (model.options) {
+            ValueFormatter.setFormatFunction(model.dataSettings.format.formatters);
+            this.renderCharts(model, this.data);
+        }
+    }
+    updateFullBlock(model, data) {
+        this.destroy();
+        this.render(model, data, this.block.parentElement);
+    }
+    destroy() {
+        this.block.destroy();
+    }
+    updateData(model, newData) {
+        if (!newData) {
+            this.data = newData;
+            this.block.clearWrapper();
+        }
+        else {
+            if (!this.data) {
+                this.data = newData;
+                this.updateFullBlock(model, this.data);
+            }
+            else if (!Helper.compareData(this.data, newData, model.options.data.dataSource)) {
+                for (let source in newData) {
+                    this.data[source] = newData[source];
+                }
+                ContentManager.updateData(this.block, model, newData);
+            }
+        }
+    }
+    updateColors(model) {
+        ContentManager.updateColors(this, model);
+    }
+    renderCharts(model, data) {
+        ContentManager.render(model, data, this);
+    }
+    setFilterEventManager(options) {
+        var _a, _b, _c;
+        let highlightIds = [];
+        if (this.initializeSelected instanceof Array && this.initializeSelected.length > 0)
+            highlightIds = [...this.initializeSelected];
+        if ((_a = options === null || options === void 0 ? void 0 : options.data) === null || _a === void 0 ? void 0 : _a.dataSource)
+            this.filterEventManager = new FilterEventManager(this.filterCallback, this.data[options.data.dataSource], options.selectable, options.data.keyField.name, highlightIds);
+        else
+            this.filterEventManager = new FilterEventManager(this.filterCallback, [], options === null || options === void 0 ? void 0 : options.selectable, (_c = (_b = options === null || options === void 0 ? void 0 : options.data) === null || _b === void 0 ? void 0 : _b.keyField) === null || _c === void 0 ? void 0 : _c.name, highlightIds);
+    }
+}

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

@@ -0,0 +1,22 @@
+import { MdtChartsDataRow } from '../../../config/config';
+import { DataType } from '../../../designer/designerConfig';
+import { Field } from "../../../model/model";
+import { Block } from "../../block/block";
+import { Translate } from "../../polarNotation/donut/donut";
+export interface AggregatorInfo {
+    name: string;
+    value: number;
+    format: DataType;
+}
+export declare class Aggregator {
+    static readonly aggregatorValueClass = "aggregator-value";
+    private static readonly aggregatorNameClass;
+    private static readonly aggregatorObjectClass;
+    static render(block: Block, data: MdtChartsDataRow[], valueField: Field, innerRadius: number, translate: Translate, fontSize: number, pad: number): void;
+    static update(block: Block, data: MdtChartsDataRow[], valueField: Field, pad: number): void;
+    private static renderText;
+    private static updateText;
+    private static reCalculateAggregatorFontSize;
+    private static renderAggregatorObject;
+    private static renderWrapper;
+}

package/lib/engine/features/aggregator/aggregator.js

@@ -0,0 +1,95 @@
+import { sum } from 'd3-array';
+import { interpolateNumber } from 'd3-interpolate';
+import { Helper } from '../../helpers/helper';
+import { ValueFormatter } from '../../valueFormatter';
+export class Aggregator {
+    static render(block, data, valueField, innerRadius, translate, fontSize, pad) {
+        const aggregator = {
+            name: 'Сумма',
+            value: sum(data.map(d => d[valueField.name])),
+            format: valueField.format
+        };
+        this.renderText(block, innerRadius, aggregator, translate, fontSize, pad);
+    }
+    static update(block, data, valueField, pad) {
+        const aggregator = {
+            name: 'Сумма',
+            value: sum(data.map(d => d[valueField.name])),
+            format: valueField.format
+        };
+        this.updateText(block, aggregator, pad);
+    }
+    static renderText(block, innerRadius, aggregatorInfo, translate, fontSize, pad) {
+        if (innerRadius > 50) {
+            const aggregatorObject = this.renderAggregatorObject(block, innerRadius, translate);
+            const wrapper = this.renderWrapper(aggregatorObject);
+            wrapper
+                .append('div')
+                .attr('class', this.aggregatorValueClass)
+                .style('text-align', 'center')
+                .style('font-size', `${fontSize}px`)
+                .text(ValueFormatter.formatField(aggregatorInfo.format, aggregatorInfo.value));
+            wrapper
+                .append('div')
+                .attr('class', this.aggregatorNameClass)
+                .style('text-align', 'center')
+                .style('font-size', '18px')
+                .text(aggregatorInfo.name);
+            this.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, pad);
+        }
+    }
+    static updateText(block, newAggregator, pad) {
+        const aggregatorObject = block.getSvg()
+            .select(`.${this.aggregatorObjectClass}`);
+        const thisClass = this;
+        block.getSvg()
+            .select(`.${this.aggregatorValueClass}`)
+            .interrupt()
+            .transition()
+            .duration(block.transitionManager.durations.chartUpdate)
+            .tween("text", function () {
+            const oldValue = Helper.parseFormattedToNumber(this.textContent, ',');
+            const precision = Helper.calcDigitsAfterDot(newAggregator.value);
+            const interpolateFunc = interpolateNumber(oldValue, newAggregator.value);
+            return t => {
+                this.textContent = ValueFormatter.formatField(newAggregator.format, (interpolateFunc(t)).toFixed(precision));
+                thisClass.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, pad);
+            };
+        });
+    }
+    static reCalculateAggregatorFontSize(wrapperSize, block, pad) {
+        const aggreggatorValue = block.getSvg()
+            .select(`.${this.aggregatorValueClass}`);
+        let fontSize = parseInt(aggreggatorValue.style('font-size'));
+        while (aggreggatorValue.node().getBoundingClientRect().width > wrapperSize - pad * 2 && fontSize > 15) {
+            aggreggatorValue.style('font-size', `${fontSize -= 2}px`);
+        }
+        while (aggreggatorValue.node().getBoundingClientRect().width < wrapperSize - pad * 2 && fontSize < 60) {
+            aggreggatorValue.style('font-size', `${fontSize += 2}px`);
+        }
+    }
+    static renderAggregatorObject(block, innerRadius, translate) {
+        return block.getSvg()
+            .append('foreignObject')
+            .attr('class', this.aggregatorObjectClass)
+            .attr('transform-origin', 'center')
+            .attr('width', innerRadius * 2)
+            .attr('height', innerRadius * 2)
+            .attr('transform', `translate(${translate.x - innerRadius}, ${translate.y - innerRadius})`)
+            .style('pointer-events', `none`);
+    }
+    static renderWrapper(aggregatorObject) {
+        return aggregatorObject
+            .append('xhtml:div')
+            .style('width', '100%')
+            .style('height', '100%')
+            .style('border-radius', '50%')
+            .style('display', 'flex')
+            .style('flex-direction', 'column')
+            .style('justify-content', 'center')
+            .style('align-items', 'center');
+    }
+}
+Aggregator.aggregatorValueClass = 'aggregator-value';
+Aggregator.aggregatorNameClass = 'aggregator-name';
+Aggregator.aggregatorObjectClass = 'aggregator-object';

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

@@ -0,0 +1,12 @@
+import { IAxisModel, IScaleModel } from "../../../model/model";
+import { Block } from "../../block/block";
+import { Scales } from "../scale/scale";
+import { Size } from '../../../config/config';
+export declare class Axis {
+    static axesClass: string;
+    static render(block: Block, scales: Scales, scaleModel: IScaleModel, axisModel: IAxisModel, blockSize: Size): void;
+    static update(block: Block, scales: Scales, scalesOptions: IScaleModel, axisModel: IAxisModel, blockSize: Size, keyDomainsEquality: boolean): void;
+    private static renderAxis;
+    private static updateValueAxis;
+    private static updateKeyAxis;
+}

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

@@ -0,0 +1,118 @@
+import { Scale } from "../scale/scale";
+import { AXIS_VERTICAL_LABEL_PADDING } from "../../../model/marginModel";
+import { NamesHelper } from '../../helpers/namesHelper';
+import { AxisHelper } from './axisHelper';
+import { AxisLabelHelper } from './axisLabelDomHelper';
+import { AxisDomHelper } from './axisDomHelper';
+import { select } from 'd3-selection';
+import { AxisLabelsEventManager } from './axisLabelsEventManager';
+const MINIMAL_STEP_SIZE_FOR_WRAPPING = 38;
+export class Axis {
+    static render(block, scales, scaleModel, axisModel, blockSize) {
+        if (axisModel.value.visibility)
+            this.renderAxis(block, scales.value, scaleModel.value, axisModel.value, blockSize);
+        if (axisModel.key.visibility)
+            this.renderAxis(block, scales.key, scaleModel.key, axisModel.key, blockSize);
+    }
+    static update(block, scales, scalesOptions, axisModel, blockSize, keyDomainsEquality) {
+        if (axisModel.value.visibility)
+            this.updateValueAxis(block, scales.value, scalesOptions.value, axisModel.value);
+        if (axisModel.key.visibility)
+            this.updateKeyAxis(block, scales.key, scalesOptions.key, axisModel.key, blockSize, keyDomainsEquality);
+    }
+    static renderAxis(block, scale, scaleOptions, axisOptions, blockSize) {
+        const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scale, scaleOptions);
+        if (axisOptions.type === 'value' && (scaleOptions.type === 'linear' || scaleOptions.type === 'datetime'))
+            AxisHelper.setLabelsSettings(axisGenerator, scale.range(), scaleOptions);
+        const axisElement = block.getSvg()
+            .append('g')
+            .attr('class', `${this.axesClass} ${axisOptions.cssClass} data-label`);
+        AxisDomHelper.updateAxisElement(axisGenerator, axisElement, axisOptions.translate);
+        if (!axisOptions.labels.visible) {
+            AxisLabelHelper.hideLabels(axisElement);
+            return;
+        }
+        if (axisOptions.type === 'key') {
+            if (axisOptions.labels.position === 'rotated' && (axisOptions.orient === 'top' || axisOptions.orient === 'bottom'))
+                AxisLabelHelper.rotateLabels(axisElement, axisOptions.orient);
+            if ((axisOptions.orient === 'left' || axisOptions.orient === 'right') && Scale.getScaleStep(scale) >= MINIMAL_STEP_SIZE_FOR_WRAPPING)
+                axisElement.selectAll('.tick text').call(AxisLabelHelper.wrapHandler, axisOptions.labels.maxSize);
+            else
+                AxisLabelHelper.cropLabels(block, scale, scaleOptions, axisOptions, blockSize);
+            AxisLabelHelper.alignLabelsInKeyAxis(axisOptions, axisElement);
+            AxisLabelsEventManager.setHoverEvents(block, axisElement);
+        }
+        if (axisOptions.labels.defaultTooltip)
+            AxisLabelHelper.setTitles(axisElement);
+    }
+    static updateValueAxis(block, scaleValue, scaleOptions, axisOptions) {
+        const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scaleValue, scaleOptions);
+        AxisHelper.setLabelsSettings(axisGenerator, scaleValue.range(), scaleOptions);
+        const axisElement = block.getSvg().select(`g.${axisOptions.cssClass}`);
+        AxisDomHelper.updateAxisElement(axisGenerator, axisElement, axisOptions.translate, block.transitionManager.durations.chartUpdate)
+            .then(() => {
+            if (axisOptions.labels.defaultTooltip)
+                AxisLabelHelper.setTitles(axisElement);
+        });
+    }
+    static updateKeyAxis(block, scaleKey, scaleOptions, axisOptions, blockSize, domainNotUpdated) {
+        const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scaleKey, scaleOptions);
+        if (axisOptions.labels.position === 'rotated') { // Задание координат для перевернутых лейблов (если до этого они не были перевернуты)
+            if (axisOptions.orient === 'bottom')
+                axisGenerator.tickPadding(-4);
+            else if (axisOptions.orient === 'top')
+                axisGenerator.tickPadding(-6);
+        }
+        const axisElement = block.getSvg()
+            .select(`g.${axisOptions.cssClass}`);
+        AxisLabelsEventManager.removeEvents(axisElement);
+        if (axisOptions.orient === 'left' || axisOptions.orient === 'right') {
+            axisElement.selectAll('.tick text').attr('y', null);
+            if (axisOptions.orient === 'left')
+                axisGenerator.tickPadding(axisOptions.labels.maxSize + AXIS_VERTICAL_LABEL_PADDING);
+        }
+        // Если ключи оси не меняются, то обновление происходит без анимации
+        AxisDomHelper.updateAxisElement(axisGenerator, axisElement, axisOptions.translate, domainNotUpdated ? 0 : block.transitionManager.durations.chartUpdate)
+            .then(() => {
+            if (axisOptions.orient === 'bottom' || axisOptions.orient === 'top') {
+                AxisLabelHelper.cropLabels(block, scaleKey, scaleOptions, axisOptions, blockSize);
+            }
+            AxisLabelsEventManager.setHoverEvents(block, axisElement);
+            if (axisOptions.labels.defaultTooltip)
+                AxisLabelHelper.setTitles(axisElement);
+        });
+        // Ведется отсчет нескольких кадров, чтобы получить уже 100%-отрендеренные лейблы оси.
+        let frame = 0;
+        const labelHandler = () => {
+            frame++;
+            if (frame < 10)
+                requestAnimationFrame(labelHandler);
+            if (frame === 2) {
+                axisElement.selectAll('.tick').each(function (d) {
+                    if (scaleKey.domain().findIndex(key => key === d) === -1) {
+                        select(this).style('opacity', 0);
+                    }
+                    else {
+                        select(this).style('opacity', 1);
+                    }
+                });
+            }
+            if (axisOptions.orient === 'left' || axisOptions.orient === 'right') {
+                if (Scale.getScaleStep(scaleKey) >= MINIMAL_STEP_SIZE_FOR_WRAPPING)
+                    axisElement.selectAll('.tick text').call(AxisLabelHelper.wrapHandler, axisOptions.labels.maxSize);
+                else
+                    AxisLabelHelper.cropLabels(block, scaleKey, scaleOptions, axisOptions, blockSize);
+                AxisLabelHelper.alignLabelsInKeyAxis(axisOptions, axisElement);
+            }
+            if (axisOptions.orient === 'bottom' || axisOptions.orient === 'top') {
+                if (axisOptions.labels.position === 'rotated')
+                    AxisLabelHelper.rotateLabels(axisElement, axisOptions.orient);
+                if (axisOptions.labels.position === 'straight') // Обратное выравнивание лейблов, если они были перевернуты, но теперь могут отображаться прямо
+                    AxisDomHelper.rotateElementsBack(axisElement);
+                AxisLabelHelper.cropLabels(block, scaleKey, scaleOptions, axisOptions, blockSize);
+            }
+        };
+        requestAnimationFrame(labelHandler);
+    }
+}
+Axis.axesClass = NamesHelper.getClassName('axis');

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

@@ -0,0 +1,7 @@
+import { Selection, BaseType } from 'd3-selection';
+import { Axis as IAxis } from 'd3-axis';
+import { TranslateModel } from '../../../model/model';
+export declare class AxisDomHelper {
+    static updateAxisElement(axisGenerator: IAxis<any>, axisElement: Selection<SVGGElement, any, BaseType, any>, translate: TranslateModel, transitionDuration?: number): Promise<string>;
+    static rotateElementsBack(axisElement: Selection<SVGGElement, unknown, HTMLElement, any>): void;
+}