mdt-charts 1.12.16 → 1.12.17

package/lib/engine/cardsNotation/cardsManager.js

@@ -0,0 +1,14 @@
+import { CardChart } from "./card/card";
+export class CardsManager {
+    render(engine, model) {
+        engine.block.html.render();
+        this.chart = new CardChart();
+        this.chart.render(engine.block, model.options, engine.data, { cardSize: model.blockCanvas.size });
+    }
+    updateData(block, model, newData) {
+        this.chart.updateData(model.options, newData);
+    }
+    updateColors(block, model) {
+        //TODO: implement
+    }
+}

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

@@ -1,9 +1,11 @@
 import { Model } from "../../model/model";
-import Engine from "../engine";
+import { Engine } from "../engine";
 import { Block } from "../block/block";
 import { MdtChartsDataSource } from "../../config/config";
 export declare class ContentManager {
-    static render(model: Model, engine: Engine): void;
-    static updateData(block: Block, model: Model, newData: MdtChartsDataSource): void;
-    static updateColors(engine: Engine, model: Model): void;
+    private manager;
+    constructor(model: Model);
+    render(model: Model, engine: Engine): void;
+    updateData(block: Block, model: Model, newData: MdtChartsDataSource): void;
+    updateColors(engine: Engine, model: Model): void;
 }

package/lib/engine/contentManager/contentManager.js

@@ -1,15 +1,15 @@
 import { getChartContentManager } from "./contentManagerFactory";
 export class ContentManager {
-    static render(model, engine) {
-        const manager = getChartContentManager(model);
-        manager.render(engine, model);
+    constructor(model) {
+        this.manager = getChartContentManager(model);
     }
-    static updateData(block, model, newData) {
-        const manager = getChartContentManager(model);
-        manager.updateData(block, model, newData);
+    render(model, engine) {
+        this.manager.render(engine, model);
     }
-    static updateColors(engine, model) {
-        const manager = getChartContentManager(model);
-        manager.updateColors(engine.block, model);
+    updateData(block, model, newData) {
+        this.manager.updateData(block, model, newData);
+    }
+    updateColors(engine, model) {
+        this.manager.updateColors(engine.block, model);
     }
 }

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

@@ -1,7 +1,7 @@
 import { ChartNotation, MdtChartsDataSource } from "../../config/config";
 import { Model } from "../../model/model";
 import { Block } from "../block/block";
-import Engine from "../engine";
+import { Engine } from "../engine";
 export interface ChartContentManager {
     render(engine: Engine, model: Model): void;
     updateData(block: Block, model: Model, newData: MdtChartsDataSource): void;

package/lib/engine/contentManager/contentManagerFactory.js

@@ -1,10 +1,12 @@
+import { CardsManager } from "../cardsNotation/cardsManager";
 import { PolarManager } from "../polarNotation/polarManager";
 import { TwoDimensionalManager } from "../twoDimensionalNotation/twoDimensionalManager";
 export class ContentManagerFactory {
     constructor() {
         this.managers = {
             "2d": TwoDimensionalManager,
-            "polar": PolarManager
+            "polar": PolarManager,
+            "card": CardsManager
         };
     }
     getManager(type) {

package/lib/engine/engine.d.ts

@@ -1,14 +1,15 @@
 import { Block } from './block/block';
 import { Model } from '../model/model';
-import { FilterCallback, FilterEventManager } from './filterManager/filterEventManager';
+import { FilterCallback } from './filterManager/filterEventManager';
 import { MdtChartsDataSource } from '../config/config';
-export default class Engine {
+export declare class Engine {
     private filterCallback;
     private initializeSelected;
     block: Block;
-    filterEventManager: FilterEventManager;
     data: MdtChartsDataSource;
+    private filterEventManager;
     private chartId;
+    private contentManager;
     constructor(id: number, filterCallback: FilterCallback, initializeSelected: number[]);
     render(model: Model, data: MdtChartsDataSource, parentElement: HTMLElement): void;
     updateFullBlock(model: Model, data: MdtChartsDataSource): void;

package/lib/engine/engine.js

@@ -3,18 +3,20 @@ import { ValueFormatter } from './valueFormatter';
 import { ContentManager } from './contentManager/contentManager';
 import { FilterEventManager } from './filterManager/filterEventManager';
 import { Helper } from './helpers/helper';
-export default class Engine {
+export class Engine {
     constructor(id, filterCallback, initializeSelected) {
         this.filterCallback = filterCallback;
         this.initializeSelected = initializeSelected;
         this.chartId = id;
     }
     render(model, data, parentElement) {
+        var _a;
         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);
+        (_a = this.filterEventManager) === null || _a === void 0 ? void 0 : _a.setBlock(this.block);
         this.block.renderWrapper(model.blockCanvas.size);
+        this.contentManager = new ContentManager(model);
         if (model.options) {
             ValueFormatter.setFormatFunction(model.dataSettings.format.formatters);
             this.renderCharts(model);
@@ -41,18 +43,20 @@ export default class Engine {
                 for (let source in newData) {
                     this.data[source] = newData[source];
                 }
-                ContentManager.updateData(this.block, model, newData);
+                this.contentManager.updateData(this.block, model, newData);
             }
         }
     }
     updateColors(model) {
-        ContentManager.updateColors(this, model);
+        this.contentManager.updateColors(this, model);
     }
     renderCharts(model) {
-        ContentManager.render(model, this);
+        this.contentManager.render(model, this);
     }
     setFilterEventManager(options) {
         var _a, _b, _c;
+        if (options.type === "card")
+            return;
         let highlightIds = [];
         if (this.initializeSelected instanceof Array && this.initializeSelected.length > 0)
             highlightIds = [...this.initializeSelected];

package/lib/engine/features/embeddedLabels/embeddedLabels.js

@@ -14,7 +14,7 @@ export class EmbeddedLabels {
     }
     static restoreRemoved(block, bars, barAttrsHelper, field, type, keyAxisOrient, blockSize, margin, index, cssClasses, keyFieldName) {
         const untaggedBars = bars.filter(d => {
-            return block.getChartBlock()
+            return block.svg.getChartBlock()
                 .selectAll(`.${EmbeddedLabels.embeddedLabelsGroupClass}${Helper.getCssClassesLine(cssClasses)}.chart-element-${index}`)
                 .selectAll(`.${this.embeddedLabelClass}`)
                 .filter(row => row[keyFieldName] === d[keyFieldName])
@@ -25,14 +25,14 @@ export class EmbeddedLabels {
         }
     }
     static removeUnused(block, chartCssClasses, fieldIndex, indexes) {
-        block.getChartBlock()
+        block.svg.getChartBlock()
             .selectAll(`.${EmbeddedLabels.embeddedLabelsGroupClass}${Helper.getCssClassesLine(chartCssClasses)}.chart-element-${fieldIndex}`)
             .selectAll(`.${this.embeddedLabelClass}`)
             .filter((d, i) => indexes.findIndex(ind => ind === i) !== -1)
             .remove();
     }
     static update(block, bars, keyAxisOrient, barAttrsHelper, margin, valueField, type, blockSize, newData, index, cssClasses) {
-        const labelsGroup = block.getChartBlock()
+        const labelsGroup = block.svg.getChartBlock()
             .selectAll(`.${EmbeddedLabels.embeddedLabelsGroupClass}${Helper.getCssClassesLine(cssClasses)}.chart-element-${index}`);
         labelsGroup.selectAll(`.${this.embeddedLabelBgClass}`)
             .remove();
@@ -46,7 +46,7 @@ export class EmbeddedLabels {
         });
     }
     static raiseGroups(block) {
-        block.getChartBlock().selectAll(`.${this.embeddedLabelsGroupClass}`).raise();
+        block.svg.getChartBlock().selectAll(`.${this.embeddedLabelsGroupClass}`).raise();
     }
     static renderLabel(labelsGroup, barAttrsHelper, dataRow, field, type, keyAxisOrient, blockSize, margin) {
         const labelBlock = labelsGroup.append('text').datum(dataRow);
@@ -108,11 +108,11 @@ export class EmbeddedLabels {
         }
     }
     static renderGroup(block, cssClasses) {
-        let group = block.getChartBlock()
+        let group = block.svg.getChartBlock()
             .select(`.${this.embeddedLabelsGroupClass}${Helper.getCssClassesLine(cssClasses)}`)
             .raise();
         if (group.empty())
-            group = block.getChartBlock()
+            group = block.svg.getChartBlock()
                 .append('g')
                 .attr('class', this.embeddedLabelsGroupClass)
                 .raise();

package/lib/engine/features/legend/legend.js

@@ -11,7 +11,7 @@ export class Legend {
         }
     }
     static update(block, data, model) {
-        if (model.options.legend.position !== 'off') {
+        if (model.options.type != "card" && model.options.legend.position !== 'off') {
             const legendObject = this.getObject(block);
             const legendCoordinate = LegendHelper.getLegendCoordinateByPosition(model.options.legend.position, model.otherComponents.legendBlock, model.blockCanvas.size);
             this.fillCoordinate(legendObject, legendCoordinate);

package/lib/engine/features/markDots/markDot.js

@@ -7,7 +7,7 @@ import { MarkDotHelper } from "./markDotsHelper";
 select.prototype.transition = transition;
 export class MarkDot {
     static render(block, data, keyAxisOrient, scales, margin, keyFieldName, vfIndex, valueFieldName, chart) {
-        const dotsWrapper = block.getChartGroup(chart.index)
+        const dotsWrapper = block.svg.getChartGroup(chart.index)
             .selectAll(`.${this.markerDotClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-index-${vfIndex}`)
             .data(data)
             .enter();
@@ -19,7 +19,7 @@ export class MarkDot {
             dots.classed(this.hiddenDotClass, true);
     }
     static update(block, newData, keyAxisOrient, scales, margin, keyField, vfIndex, valueFieldName, chart) {
-        const dots = block.getChartGroup(chart.index)
+        const dots = block.svg.getChartGroup(chart.index)
             .selectAll(`.${this.markerDotClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${vfIndex}`)
             .data(newData);
         dots.exit().remove();
@@ -40,7 +40,7 @@ export class MarkDot {
             .attr('cy', d => attrs.cy(d));
     }
     static updateColors(block, chart, valueFieldIndex) {
-        const dots = block.getChartGroup(chart.index)
+        const dots = block.svg.getChartGroup(chart.index)
             .selectAll(`.${this.markerDotClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueFieldIndex}`);
         DomHelper.setChartElementColor(dots, chart.style.elementColors, valueFieldIndex, 'stroke');
     }
@@ -60,7 +60,7 @@ export class MarkDot {
             .attr('r', this.dotRadius)
             .style('stroke-width', '3px')
             .style('fill', 'white')
-            .style('clip-path', `url(#${block.getClipPathId()})`);
+            .style('clip-path', `url(#${block.svg.getClipPathId()})`);
     }
 }
 MarkDot.markerDotClass = NamesHelper.getClassName('dot');

package/lib/engine/features/tolltip/tooltip.d.ts

@@ -1,4 +1,4 @@
-import { Model } from "../../../model/model";
+import { Model, PolarOptionsModel, TwoDimensionalOptionsModel } from "../../../model/model";
 import { Block } from "../../block/block";
 import { MdtChartsDataSource } from "../../../config/config";
 import { Scales } from '../scale/scale';
@@ -9,7 +9,7 @@ export declare class Tooltip {
     static readonly tooltipWrapperClass = "mdt-charts-tooltip-wrapper";
     static readonly tooltipContentClass = "mdt-charts-tooltip-content";
     static readonly tooltipArrowClass = "mdt-charts-tooltip-arrow";
-    static render(block: Block, model: Model, data: MdtChartsDataSource, tooltipOptions: TooltipSettings, scales?: Scales): void;
+    static render(block: Block, model: Model<TwoDimensionalOptionsModel | PolarOptionsModel>, data: MdtChartsDataSource, tooltipOptions: TooltipSettings, scales?: Scales): void;
     static hide(block: Block): void;
     private static renderTooltipFor2DCharts;
     private static renderTooltipForIntervalCharts;

package/lib/engine/features/tolltip/tooltip.js

@@ -21,9 +21,6 @@ export class Tooltip {
             else if (model.options.type === 'polar') {
                 this.renderTooltipForPolar(block, model.options, data, model.blockCanvas.size, model.chartBlock.margin, DonutHelper.getThickness(model.options.chartCanvas, model.blockCanvas.size, model.chartBlock.margin), model.otherComponents.tooltipBlock);
             }
-            else if (model.options.type === 'interval') {
-                this.renderTooltipForIntervalCharts(block, data, model.blockCanvas.size, model.chartBlock.margin, scales, model.options, tooltipOptions);
-            }
         }
     }
     static hide(block) {

package/lib/engine/features/tolltip/tooltipComponentsManager.js

@@ -43,10 +43,10 @@ export class TooltipComponentsManager {
         return tooltipContentBlock;
     }
     static renderTooltipLine(block) {
-        let tooltipLine = block.getChartBlock()
+        let tooltipLine = block.svg.getChartBlock()
             .select(`.${Tooltip.tooltipLineClass}`);
         if (tooltipLine.empty())
-            tooltipLine = block.getChartBlock()
+            tooltipLine = block.svg.getChartBlock()
                 .append('line')
                 .attr('class', Tooltip.tooltipLineClass)
                 .lower();

package/lib/engine/helpers/fontResizer/fontResizer.d.ts

@@ -0,0 +1,16 @@
+export interface ResizingOptions {
+    elWrapper: HTMLElement;
+    unit: "px" | "em";
+    smallestFontSize: number;
+    step?: number;
+}
+export declare const FontResizer: {
+    setSize(el: HTMLElement, options: ResizingOptions): void;
+};
+export declare class ResizedElement {
+    private el;
+    constructor(el: HTMLElement);
+    setStyle(style: string, value: string): void;
+    getSizeStyleInNum(style: string): number;
+    getWidth(): number;
+}

package/lib/engine/helpers/fontResizer/fontResizer.js

@@ -0,0 +1,21 @@
+import { resizeFont } from "./fontResizerService";
+export const FontResizer = new class {
+    setSize(el, options) {
+        const wrappedEl = new ResizedElement(el);
+        resizeFont(wrappedEl, Object.assign(Object.assign({}, options), { elWrapper: new ResizedElement(options.elWrapper) }));
+    }
+};
+export class ResizedElement {
+    constructor(el) {
+        this.el = el;
+    }
+    setStyle(style, value) {
+        this.el.style[style] = value;
+    }
+    getSizeStyleInNum(style) {
+        return parseFloat(this.el.style[style]);
+    }
+    getWidth() {
+        return this.el.getBoundingClientRect().width;
+    }
+}

package/lib/engine/helpers/fontResizer/fontResizerService.d.ts

@@ -0,0 +1,6 @@
+import { ResizedElement, ResizingOptions } from "./fontResizer";
+interface ResizerServiceOptions extends Omit<ResizingOptions, "elWrapper"> {
+    elWrapper: ResizedElement;
+}
+export declare function resizeFont(el: ResizedElement, options: ResizerServiceOptions): void;
+export {};

package/lib/engine/helpers/fontResizer/fontResizerService.js

@@ -0,0 +1,12 @@
+export function resizeFont(el, options) {
+    const wrapper = options.elWrapper;
+    if (el.getWidth() <= wrapper.getWidth())
+        return;
+    let fontSize = el.getSizeStyleInNum("font-size");
+    const { smallestFontSize: minSize, step, unit } = options;
+    const wrapperWidth = wrapper.getWidth();
+    while (el.getWidth() > wrapperWidth && fontSize > minSize) {
+        fontSize -= step;
+        el.setStyle("font-size", `${fontSize}${unit}`);
+    }
+}

package/lib/engine/helpers/namesHelper.js

@@ -6,4 +6,4 @@ export class NamesHelper {
         return this.prefix + idName + '-' + blockId;
     }
 }
-NamesHelper.prefix = 'charts-';
+NamesHelper.prefix = 'mdt-charts-';

package/lib/engine/intervalNotation/gantt.js

@@ -2,13 +2,13 @@ import { Scale } from "../features/scale/scale";
 import { DomHelper } from '../helpers/domHelper';
 export class Gantt {
     static render(block, data, dataOptions, scales, margin, keyAxisOrient, chart, barSettings) {
-        const ganttItems = block.getChartBlock()
+        const ganttItems = block.svg.getChartBlock()
             .selectAll(`.${this.ganttItemClass}`)
             .data(data)
             .enter()
             .append('rect')
             .attr('class', this.ganttItemClass)
-            .style('clip-path', `url(#${block.getClipPathId()})`);
+            .style('clip-path', `url(#${block.svg.getClipPathId()})`);
         const itemsAttrs = this.getItemsAttrsByKeyOrient(keyAxisOrient, scales, margin, dataOptions.keyField.name, chart.data.valueField1.name, chart.data.valueField2.name, barSettings);
         this.fillItemsAttrs(ganttItems, itemsAttrs);
         DomHelper.setCssClasses(ganttItems, chart.cssClasses);

package/lib/engine/intervalNotation/intervalManager.js

@@ -3,22 +3,20 @@ import { GridLine } from "../features/gridLine/gridLine";
 import { Legend } from "../features/legend/legend";
 import { Scale } from "../features/scale/scale";
 import { Title } from "../features/title/title";
-import { Tooltip } from "../features/tolltip/tooltip";
 import { Gantt } from "./gantt";
 export class IntervalManager {
     static render(block, model, data) {
         const options = model.options;
-        block.renderSvg(model.blockCanvas.size);
+        block.svg.render(model.blockCanvas.size);
         const scales = Scale.getScales(options.scale.key, options.scale.value, options.chartSettings.bar);
         Axis.render(block, scales, options.scale, options.axis, model.blockCanvas.size);
         GridLine.render(block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, scales);
         this.renderCharts(block, options.charts, scales, data, options.data, model.chartBlock.margin, options.axis.key.orient, options.chartSettings);
         Title.render(block, options.title, model.otherComponents.titleBlock, model.blockCanvas.size);
         Legend.render(block, data, options, model);
-        Tooltip.render(block, model, data, model.otherComponents.tooltipBlock, scales);
     }
     static renderCharts(block, charts, scales, data, dataOptions, margin, keyAxisOrient, chartSettings) {
-        block.renderChartsBlock();
+        block.svg.renderChartsBlock();
         charts.forEach(chart => {
             if (chart.type === 'gantt')
                 Gantt.render(block, data[dataOptions.dataSource], dataOptions, scales, margin, keyAxisOrient, chart, chartSettings.bar);

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

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

package/lib/engine/polarNotation/polarManager.js

@@ -8,7 +8,7 @@ import { PolarRecordOverflowAlert } from "./extenders/polarRecordOverflowAlert";
 export class PolarManager {
     render(engine, model) {
         const options = model.options;
-        engine.block.renderSvg(model.blockCanvas.size);
+        engine.block.svg.render(model.blockCanvas.size);
         this.renderCharts(engine.block, options.charts, engine.data, options.data.dataSource, model.chartBlock.margin, model.blockCanvas.size, options.chartCanvas);
         Title.render(engine.block, options.title, model.otherComponents.titleBlock, model.blockCanvas.size);
         Legend.render(engine.block, engine.data, options, model);

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

@@ -23,7 +23,7 @@ export class Area {
     }
     static updateColors(block, chart) {
         chart.data.valueFields.forEach((_vf, valueIndex) => {
-            const path = block.getChartGroup(chart.index)
+            const path = block.svg.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);
@@ -32,11 +32,11 @@ export class Area {
     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)
+            const path = block.svg.getChartGroup(chart.index)
                 .append('path')
                 .attr('d', area(data))
                 .attr('class', this.areaChartClass)
-                .style('clip-path', `url(#${block.getClipPathId()})`)
+                .style('clip-path', `url(#${block.svg.getClipPathId()})`)
                 .style('pointer-events', 'none');
             DomHelper.setCssClasses(path, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
             DomHelper.setChartStyle(path, chart.style, valueIndex, 'fill');
@@ -46,14 +46,14 @@ export class Area {
     static renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart) {
         const stackedData = getStackedDataWithOwn(data, chart.data.valueFields.map(field => field.name));
         const areaGenerator = AreaHelper.getSegmentedAreaGenerator(keyAxisOrient, scales, margin, keyField.name);
-        const areas = block.getChartGroup(chart.index)
+        const areas = block.svg.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('clip-path', `url(#${block.svg.getClipPathId()})`)
             .style('pointer-events', 'none');
         areas.each(function (d, i) {
             DomHelper.setCssClasses(select(this), Helper.getCssClassesWithElementIndex(chart.cssClasses, i));
@@ -67,7 +67,7 @@ export class Area {
         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)
+            const areaObject = block.svg.getChartGroup(chart.index)
                 .select(`.${this.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
             const prom = this.updateGroupedPath(block, areaObject, areaGenerator, newData);
             promises.push(prom);
@@ -78,7 +78,7 @@ export class Area {
     static updateSegmented(block, scales, newData, keyField, margin, chart, keyAxisOrient) {
         const stackedData = getStackedDataWithOwn(newData, chart.data.valueFields.map(field => field.name));
         const areaGenerator = AreaHelper.getSegmentedAreaGenerator(keyAxisOrient, scales, margin, keyField.name);
-        const areas = block.getChartGroup(chart.index)
+        const areas = block.svg.getChartGroup(chart.index)
             .selectAll(`path.${this.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
             .data(stackedData);
         const prom = this.updateSegmentedPath(block, areas, areaGenerator);

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

@@ -25,7 +25,7 @@ export class Bar {
     }
     static updateColors(block, chart) {
         chart.data.valueFields.forEach((_vf, index) => {
-            const bars = block.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');
         });
@@ -35,13 +35,13 @@ export class Bar {
     }
     static renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, firstBarIndex, barSettings) {
         chart.data.valueFields.forEach((field, index) => {
-            const bars = block.getChartGroup(chart.index)
+            const 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.getClipPathId()})`);
+                .style('clip-path', `url(#${block.svg.getClipPathId()})`);
             const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, field.name, blockSize, BarHelper.getBarIndex(barsAmounts, chart.index - firstBarIndex) + index, sum(barsAmounts), barSettings);
             this.fillBarAttrs(bars, barAttrs);
             DomHelper.setCssClasses(bars, Helper.getCssClassesWithElementIndex(chart.cssClasses, index));
@@ -53,7 +53,7 @@ export class Bar {
     }
     static renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart, barsAmounts, blockSize, firstBarIndex, barSettings) {
         const stackedData = getStackedDataWithOwn(data, chart.data.valueFields.map(field => field.name));
-        let groups = block.getChartGroup(chart.index)
+        let groups = block.svg.getChartGroup(chart.index)
             .selectAll(`g.${this.barSegmentGroupClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
             .data(stackedData);
         if (groups.empty())
@@ -68,7 +68,7 @@ export class Bar {
             .enter()
             .append('rect')
             .attr('class', this.barItemClass)
-            .style('clip-path', `url(#${block.getClipPathId()})`);
+            .style('clip-path', `url(#${block.svg.getClipPathId()})`);
         const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, blockSize, BarHelper.getBarIndex(barsAmounts, chart.index) - firstBarIndex, sum(barsAmounts), barSettings);
         this.fillBarAttrs(bars, barAttrs);
         this.setInitialAttrsInfo(bars, keyAxisOrient, barSettings);
@@ -84,7 +84,7 @@ export class Bar {
         const promises = [];
         chart.data.valueFields.forEach((valueField, index) => {
             const indexesOfRemoved = [];
-            block.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) {
@@ -97,7 +97,7 @@ export class Bar {
                 .duration(block.transitionManager.durations.elementFadeOut)
                 .style('opacity', 0)
                 .remove();
-            const bars = block.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)
@@ -106,7 +106,7 @@ export class Bar {
                 .enter()
                 .append('rect')
                 .attr('class', this.barItemClass)
-                .style('clip-path', `url(#${block.getClipPathId()})`);
+                .style('clip-path', `url(#${block.svg.getClipPathId()})`);
             const barAttrs = BarHelper.getGroupedBarAttrs(keyAxisOrient, scales, margin, keyField.name, valueField.name, blockSize, BarHelper.getBarIndex(barsAmounts, chart.index) + index - firstBarIndex, sum(barsAmounts), barSettings);
             const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate)
                 .then(() => {
@@ -130,14 +130,14 @@ export class Bar {
     }
     static updateSegmented(block, newData, scales, margin, keyAxisOrient, chart, blockSize, barsAmounts, keyField, firstBarIndex, barSettings) {
         const stackedData = getStackedDataWithOwn(newData, chart.data.valueFields.map(field => field.name));
-        block.getChartGroup(chart.index)
+        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)
             .transition()
             .duration(block.transitionManager.durations.elementFadeOut)
             .style('opacity', 0)
             .remove();
-        const groups = block.getChartGroup(chart.index)
+        const groups = block.svg.getChartGroup(chart.index)
             .selectAll(`g.${this.barSegmentGroupClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
             .data(stackedData);
         const bars = groups
@@ -148,7 +148,7 @@ export class Bar {
         const newBars = bars.enter()
             .append('rect')
             .attr('class', this.barItemClass)
-            .style('clip-path', `url(#${block.getClipPathId()})`);
+            .style('clip-path', `url(#${block.svg.getClipPathId()})`);
         const barAttrs = BarHelper.getStackedBarAttr(keyAxisOrient, scales, margin, keyField.name, blockSize, BarHelper.getBarIndex(barsAmounts, chart.index) - firstBarIndex, sum(barsAmounts), barSettings);
         const prom = this.fillBarAttrs(bars, barAttrs, block.transitionManager.durations.chartUpdate)
             .then(() => {

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

@@ -10,7 +10,7 @@ export declare class Line {
     private static renderGrouped;
     private static renderSegmented;
     private static updateGrouped;
-    private static updateSegmeneted;
+    private static updateSegmented;
     private static updateGroupedPath;
     private static updateSegmentedPath;
     private static setSegmentColor;