mdt-charts 1.12.14 → 1.12.17

package/lib/config/config.d.ts

@@ -1,7 +1,8 @@
 declare type DataType = string;
+export declare type MdtChartsIconElement = () => HTMLElement;
 export declare type AxisPosition = 'start' | 'end';
 export declare type ChartOrientation = 'vertical' | 'horizontal';
-export declare type ChartNotation = '2d' | 'polar' | 'interval';
+export declare type ChartNotation = '2d' | 'polar' | 'interval' | 'card';
 export declare type ChartType = 'bar' | 'line' | 'area' | 'donut' | 'gantt';
 export declare type TwoDimensionalChartType = 'line' | 'bar' | 'area';
 export declare type PolarChartType = 'donut';
@@ -11,13 +12,19 @@ export declare type TooltipHtml = (dataRow: MdtChartsDataRow) => string;
 export declare type MdtChartsDataRow = {
     [field: string]: any;
 };
+export declare type MdtChartsColorName = string;
+export interface MdtChartsColorRangeItem {
+    color: MdtChartsColorName;
+    value?: number;
+}
 export interface MdtChartsDataSource {
     [source: string]: MdtChartsDataRow[];
 }
 export declare type AxisLabelPosition = "straight" | "rotated";
+export declare type MdtChartsConfigOptions = MdtChartsPolarOptions | MdtChartsTwoDimensionalOptions | MdtChartsIntervalOptions | MdtChartsCardsOptions;
 export interface MdtChartsConfig {
     canvas: ChartBlockCanvas;
-    options: MdtChartsPolarOptions | MdtChartsTwoDimensionalOptions | MdtChartsIntervalOptions;
+    options: MdtChartsConfigOptions;
 }
 export interface ChartBlockCanvas {
     size: Size;
@@ -31,31 +38,41 @@ export interface NewSize {
     width?: number;
     height?: number;
 }
-interface Options {
-    legend: Legend;
+interface BasicOptions {
     data: DataOptions;
+    tooltip?: TooltipOptions;
+}
+interface GraphicNotationOptions extends BasicOptions {
+    legend: Legend;
     title?: string;
     selectable: boolean;
-    tooltip?: TooltipOptions;
 }
-export interface MdtChartsTwoDimensionalOptions extends Options {
+export interface MdtChartsTwoDimensionalOptions extends GraphicNotationOptions {
     type: '2d';
     axis: TwoDimensionalAxis;
     additionalElements: AdditionalElements;
     charts: MdtChartsTwoDimensionalChart[];
     orientation: ChartOrientation;
 }
-export interface MdtChartsPolarOptions extends Options {
+export interface MdtChartsPolarOptions extends GraphicNotationOptions {
     type: 'polar';
     chart: PolarChart;
 }
-export interface MdtChartsIntervalOptions extends Options {
+export interface MdtChartsIntervalOptions extends GraphicNotationOptions {
     type: 'interval';
     axis: IntervalAxis;
     chart: IntervalChart;
     additionalElements: AdditionalElements;
     orientation: ChartOrientation;
 }
+export interface MdtChartsCardsOptions extends BasicOptions {
+    type: 'card';
+    title: string;
+    description?: string;
+    icon?: MdtChartsIconElement;
+    value: MdtChartsCardValue;
+    change?: MdtChartsCardsChange;
+}
 export interface Legend {
     show: boolean;
 }
@@ -118,6 +135,23 @@ export interface IntervalAxis {
 }
 interface DateAxisOptions extends AxisOptions {
 }
+export interface MdtChartsCardValue {
+    field: string;
+    dataType?: DataType;
+}
+export interface MdtChartsCardsChange {
+    value: MdtChartsCardValue;
+    color?: MdtChartsColorRangeItem[];
+    description?: string;
+    icon?: MdtChartsCardsChangeIcon;
+}
+export interface MdtChartsCardOptionByValue<T> {
+    belowZero?: T;
+    equalZero?: T;
+    aboveZero?: T;
+}
+export interface MdtChartsCardsChangeIcon extends MdtChartsCardOptionByValue<MdtChartsIconElement> {
+}
 interface ChartSettings {
     tooltip: Tooltip;
 }

package/lib/engine/block/block.d.ts

@@ -1,35 +1,26 @@
 import { Selection, BaseType } from "d3-selection";
 import { Transitions } from "../../designer/designerConfig";
-import { BlockMargin } from "../../model/model";
 import { Scales } from "../features/scale/scale";
 import { FilterEventManager } from "../filterManager/filterEventManager";
 import { TransitionManager } from "../transitionManager";
 import { Size } from "../../config/config";
+import { BlockSvg } from "./blockSvg";
+import { BlockHtml } from "./blockHtml";
 export declare class Block {
     parentElement: HTMLElement;
-    id: number;
     transitionManager: TransitionManager;
     scales: Scales;
     filterEventManager: FilterEventManager;
-    private svgCssClasses;
+    svg: BlockSvg;
+    html: BlockHtml;
     private wrapperCssClasses;
     private parentElementSelection;
     private wrapper;
-    private readonly chartBlockClass;
-    private readonly chartGroupClass;
     constructor(cssClass: string, parentElement: HTMLElement, blockId: number, filterEventManager: FilterEventManager, transitions?: Transitions);
-    renderSvg(blockSize: Size): void;
     renderWrapper(blockSize: Size): void;
     destroy(): void;
     getSvg(): Selection<SVGElement, unknown, HTMLElement, any>;
     getWrapper(): Selection<BaseType, unknown, HTMLElement, any>;
-    renderChartsBlock(): void;
-    getChartBlock(): Selection<SVGGElement, unknown, HTMLElement, any>;
-    getChartGroup(chartIndex: number): Selection<SVGGElement, any, BaseType, any>;
-    renderChartClipPath(margin: BlockMargin, blockSize: Size): void;
-    updateChartClipPath(margin: BlockMargin, blockSize: Size): void;
-    getClipPathId(): string;
-    renderDefs(): Selection<SVGDefsElement, unknown, HTMLElement, unknown>;
     removeMouseEvents(): void;
     clearWrapper(): void;
 }

package/lib/engine/block/block.js

@@ -1,30 +1,25 @@
 import { select } from "d3-selection";
 import { TipBox } from "../features/tipBox/tipBox";
 import { Helper } from "../helpers/helper";
-import { NamesHelper } from "../helpers/namesHelper";
 import { Donut } from "../polarNotation/donut/donut";
 import { TransitionManager } from "../transitionManager";
 import { BlockHelper } from "./blockHelper";
+import { BlockSvg } from "./blockSvg";
+import { BlockHtml } from "./blockHtml";
 export class Block {
     constructor(cssClass, parentElement, blockId, filterEventManager, transitions = null) {
-        this.chartBlockClass = 'chart-block';
-        this.chartGroupClass = 'chart-group';
+        this.svg = new BlockSvg({
+            svgCssClasses: cssClass,
+            parentBlockId: blockId
+        });
+        this.html = new BlockHtml({ blockCssClass: cssClass });
         this.wrapperCssClasses = Helper.getCssClassesArray(cssClass);
-        this.svgCssClasses = Helper.getCssClassesArray(cssClass);
         this.wrapperCssClasses = BlockHelper.getFormattedCssClassesForWrapper(this.wrapperCssClasses);
         this.parentElement = parentElement;
         this.parentElementSelection = select(parentElement);
-        this.id = blockId;
         this.transitionManager = new TransitionManager(this, transitions);
         this.filterEventManager = filterEventManager;
     }
-    renderSvg(blockSize) {
-        this.getWrapper()
-            .append('svg')
-            .attr('width', blockSize.width)
-            .attr('height', blockSize.height)
-            .attr('class', this.svgCssClasses.join(' ') + ' ' + NamesHelper.getClassName('svg-chart'));
-    }
     renderWrapper(blockSize) {
         this.wrapper = this.parentElementSelection
             .append('div')
@@ -32,6 +27,8 @@ export class Block {
             .style('width', blockSize.width + 'px')
             .style('height', blockSize.height + 'px')
             .style('position', 'relative');
+        this.svg.initParent(this.wrapper);
+        this.html.initParent(this.wrapper);
     }
     destroy() {
         this.transitionManager.interruptTransitions();
@@ -39,60 +36,14 @@ export class Block {
         this.getWrapper().remove();
     }
     getSvg() {
-        return this.getWrapper().select(`svg.${NamesHelper.getClassName('svg-chart')}`);
+        //TODO: move this method in blockSvg
+        return this.svg.getBlock();
     }
     getWrapper() {
         return this.wrapper;
     }
-    renderChartsBlock() {
-        this.getSvg()
-            .append('g')
-            .attr('class', this.chartBlockClass);
-    }
-    getChartBlock() {
-        return this.getSvg().select(`.${this.chartBlockClass}`);
-    }
-    getChartGroup(chartIndex) {
-        let group = this.getChartBlock().select(`.${this.chartGroupClass}-${chartIndex}`);
-        if (group.empty()) {
-            group = this.getChartBlock()
-                .append('g')
-                .attr('class', `${this.chartGroupClass}-${chartIndex}`);
-        }
-        return group;
-    }
-    renderChartClipPath(margin, blockSize) {
-        const attributes = BlockHelper.getClipPathAttributes(blockSize, margin);
-        this.renderDefs()
-            .append('clipPath')
-            .attr('id', this.getClipPathId())
-            .append('rect')
-            .attr('x', attributes.x)
-            .attr('y', attributes.y)
-            .attr('width', attributes.width)
-            .attr('height', attributes.height);
-    }
-    updateChartClipPath(margin, blockSize) {
-        const attributes = BlockHelper.getClipPathAttributes(blockSize, margin);
-        this.renderDefs()
-            .select('clipPath')
-            .select('rect')
-            .attr('x', attributes.x)
-            .attr('y', attributes.y)
-            .attr('width', attributes.width)
-            .attr('height', attributes.height);
-    }
-    getClipPathId() {
-        return NamesHelper.getId('clip-path', this.id);
-    }
-    renderDefs() {
-        let defs = this.getSvg()
-            .select('defs');
-        if (defs.empty())
-            defs = this.getSvg().append('defs');
-        return defs;
-    }
     removeMouseEvents() {
+        //TODO: move this method in blockSvg
         const tipBoxes = this.getSvg().selectAll(`.${TipBox.tipBoxClass}`);
         tipBoxes.on('mousemove', null);
         tipBoxes.on('mouseover', null);

package/lib/engine/block/blockHtml.d.ts

@@ -0,0 +1,14 @@
+import { Selection } from "d3-selection";
+interface BlockHtmlOptions {
+    blockCssClass: string;
+}
+export declare class BlockHtml {
+    private parent;
+    private block;
+    private blockCssClass;
+    constructor(options: BlockHtmlOptions);
+    initParent(parent: Selection<HTMLDivElement, unknown, HTMLElement, any>): void;
+    render(): void;
+    getBlock(): Selection<HTMLDivElement, unknown, HTMLElement, any>;
+}
+export {};

package/lib/engine/block/blockHtml.js

@@ -0,0 +1,18 @@
+import { NamesHelper } from "../helpers/namesHelper";
+export class BlockHtml {
+    constructor(options) {
+        this.blockCssClass = options.blockCssClass;
+    }
+    initParent(parent) {
+        this.parent = parent;
+    }
+    render() {
+        this.block = this.parent
+            .append("div")
+            .attr("class", NamesHelper.getClassName("html-chart"))
+            .classed(this.blockCssClass, true);
+    }
+    getBlock() {
+        return this.block;
+    }
+}

package/lib/engine/block/blockSvg.d.ts

@@ -0,0 +1,26 @@
+import { Selection, BaseType } from "d3-selection";
+import { Size } from "../../config/config";
+import { BlockMargin } from "../../model/model";
+interface BlockSvgOptions {
+    parentBlockId: number;
+    svgCssClasses: string;
+}
+export declare class BlockSvg {
+    private parentBlockId;
+    private parent;
+    private svgCssClasses;
+    private readonly chartBlockClass;
+    private readonly chartGroupClass;
+    constructor(options: BlockSvgOptions);
+    initParent(parent: Selection<BaseType, unknown, HTMLElement, any>): void;
+    render(blockSize: Size): void;
+    getBlock(): Selection<SVGElement, unknown, HTMLElement, any>;
+    renderChartsBlock(): void;
+    getChartBlock(): Selection<SVGGElement, unknown, HTMLElement, any>;
+    getChartGroup(chartIndex: number): Selection<SVGGElement, any, BaseType, any>;
+    getClipPathId(): string;
+    renderChartClipPath(margin: BlockMargin, blockSize: Size): void;
+    updateChartClipPath(margin: BlockMargin, blockSize: Size): void;
+    private renderDefs;
+}
+export {};

package/lib/engine/block/blockSvg.js

@@ -0,0 +1,69 @@
+import { NamesHelper } from "../helpers/namesHelper";
+import { BlockHelper } from "./blockHelper";
+export class BlockSvg {
+    constructor(options) {
+        this.chartBlockClass = 'chart-block';
+        this.chartGroupClass = 'chart-group';
+        this.svgCssClasses = options.svgCssClasses;
+        this.parentBlockId = options.parentBlockId;
+    }
+    initParent(parent) {
+        this.parent = parent;
+    }
+    render(blockSize) {
+        this.parent
+            .append('svg')
+            .attr('width', blockSize.width)
+            .attr('height', blockSize.height)
+            .attr('class', this.svgCssClasses + ' ' + NamesHelper.getClassName('svg-chart'));
+    }
+    getBlock() {
+        return this.parent.select(`svg.${NamesHelper.getClassName('svg-chart')}`);
+    }
+    renderChartsBlock() {
+        this.getBlock()
+            .append('g')
+            .attr('class', this.chartBlockClass);
+    }
+    getChartBlock() {
+        return this.getBlock().select(`.${this.chartBlockClass}`);
+    }
+    getChartGroup(chartIndex) {
+        let group = this.getChartBlock().select(`.${this.chartGroupClass}-${chartIndex}`);
+        if (group.empty()) {
+            group = this.getChartBlock().append('g')
+                .attr('class', `${this.chartGroupClass}-${chartIndex}`);
+        }
+        return group;
+    }
+    getClipPathId() {
+        return NamesHelper.getId('clip-path', this.parentBlockId);
+    }
+    renderChartClipPath(margin, blockSize) {
+        const attributes = BlockHelper.getClipPathAttributes(blockSize, margin);
+        this.renderDefs()
+            .append('clipPath')
+            .attr('id', this.getClipPathId())
+            .append('rect')
+            .attr('x', attributes.x)
+            .attr('y', attributes.y)
+            .attr('width', attributes.width)
+            .attr('height', attributes.height);
+    }
+    updateChartClipPath(margin, blockSize) {
+        const attributes = BlockHelper.getClipPathAttributes(blockSize, margin);
+        this.renderDefs()
+            .select('clipPath')
+            .select('rect')
+            .attr('x', attributes.x)
+            .attr('y', attributes.y)
+            .attr('width', attributes.width)
+            .attr('height', attributes.height);
+    }
+    renderDefs() {
+        let defs = this.getBlock().select('defs');
+        if (defs.empty())
+            defs = this.getBlock().append('defs');
+        return defs;
+    }
+}

package/lib/engine/cardsNotation/card/card.d.ts

@@ -0,0 +1,30 @@
+import { BaseType, Selection } from "d3-selection";
+import { MdtChartsDataSource, Size } from "../../../config/config";
+import { CardsOptionsModel } from "../../../model/model";
+import { Block } from "../../block/block";
+export declare type CardChildElement<T extends Element = HTMLElement> = Selection<T, unknown, BaseType, unknown>;
+interface CanvasOptions {
+    cardSize: Size;
+}
+export declare type CardValueContent = string | number;
+export declare class CardChart {
+    private readonly cardValueCssClass;
+    private readonly cardContentBlockCssClass;
+    private valueContentElement;
+    private cardContentElement;
+    private changeBlock;
+    private styler;
+    render(block: Block, options: CardsOptionsModel, data: MdtChartsDataSource, canvasOptions: CanvasOptions): void;
+    updateData(options: CardsOptionsModel, data: MdtChartsDataSource): void;
+    private renderCardWrapper;
+    private renderContentBlock;
+    private setContentFontSize;
+    private renderHeaderBlock;
+    private appendTitle;
+    private appendIcon;
+    private renderDescriptionBlock;
+    private renderValueBlock;
+    private updateValueBlockStyle;
+    private setValueContent;
+}
+export {};

package/lib/engine/cardsNotation/card/card.js

@@ -0,0 +1,97 @@
+import { FontResizer } from "../../helpers/fontResizer/fontResizer";
+import { NamesHelper } from "../../helpers/namesHelper";
+import { CardChange } from "./cardChange";
+import { CardElementsStyler } from "./cardElementsStyler";
+import { CardService } from "./cardService";
+export class CardChart {
+    constructor() {
+        this.cardValueCssClass = NamesHelper.getClassName("card-value");
+        this.cardContentBlockCssClass = NamesHelper.getClassName("card-content");
+        this.styler = new CardElementsStyler();
+    }
+    render(block, options, data, canvasOptions) {
+        const parent = block.html.getBlock();
+        const dataRow = data[options.data.dataSource][0];
+        const wrapper = this.renderCardWrapper(parent);
+        this.renderContentBlock(wrapper);
+        this.setContentFontSize(this.cardContentElement, canvasOptions);
+        this.renderHeaderBlock(this.cardContentElement, {
+            title: options.title,
+            icon: options.icon
+        });
+        if (options.description)
+            this.renderDescriptionBlock(this.cardContentElement, options.description);
+        this.renderValueBlock(this.cardContentElement, CardService.getValueContentFromDataSource(Object.assign(Object.assign({}, options.value), { dataSetName: options.data.dataSource }), data));
+        if (options.change) {
+            this.changeBlock = new CardChange();
+            this.changeBlock.render(this.cardContentElement, options.change, dataRow);
+        }
+    }
+    updateData(options, data) {
+        var _a;
+        const dataRow = data[options.data.dataSource][0];
+        this.setValueContent(CardService.getValueContentFromDataSource(Object.assign(Object.assign({}, options.value), { dataSetName: options.data.dataSource }), data));
+        this.updateValueBlockStyle();
+        (_a = this.changeBlock) === null || _a === void 0 ? void 0 : _a.update(options.change, dataRow);
+    }
+    renderCardWrapper(parent) {
+        return parent.append("div")
+            .classed(this.cardContentBlockCssClass, true);
+    }
+    renderContentBlock(wrapper) {
+        this.cardContentElement = wrapper.append("div")
+            .classed(NamesHelper.getClassName("card-content"), true);
+    }
+    setContentFontSize(contentBlock, canvasOptions) {
+        const fontSize = Math.floor(Math.min(canvasOptions.cardSize.height, canvasOptions.cardSize.width) / 10);
+        contentBlock.style("font-size", `${fontSize}px`);
+    }
+    renderHeaderBlock(contentBlock, options) {
+        const header = contentBlock.append("div")
+            .classed(NamesHelper.getClassName("card-header"), true);
+        this.appendTitle(header, options.title);
+        if (options.icon)
+            this.appendIcon(header, options.icon);
+    }
+    appendTitle(headerBlock, textContent) {
+        headerBlock.append("h3")
+            .classed(NamesHelper.getClassName("card-title"), true)
+            .text(textContent);
+    }
+    appendIcon(headerBlock, icon) {
+        const iconEl = icon();
+        headerBlock.append("div")
+            .classed(NamesHelper.getClassName("card-icon"), true)
+            .node()
+            .appendChild(iconEl);
+    }
+    renderDescriptionBlock(contentBlock, textContent) {
+        const wrapper = contentBlock.append("div")
+            .classed(NamesHelper.getClassName("card-description-wrapper"), true);
+        wrapper.append("p")
+            .classed(NamesHelper.getClassName("card-description"), true)
+            .text(textContent);
+    }
+    renderValueBlock(contentBlock, value) {
+        const wrapper = contentBlock.append("div")
+            .classed(NamesHelper.getClassName("card-value-wrapper"), true);
+        this.valueContentElement = wrapper.append("div")
+            .classed(NamesHelper.getClassName("card-value-block"), true)
+            .append("span")
+            .classed(this.cardValueCssClass, true);
+        this.setValueContent(value);
+        this.updateValueBlockStyle();
+    }
+    updateValueBlockStyle() {
+        this.styler.setValueBlockFontSize(this.valueContentElement);
+        FontResizer.setSize(this.valueContentElement.node(), {
+            elWrapper: this.cardContentElement.node(),
+            unit: "em",
+            smallestFontSize: 0.5,
+            step: 0.1
+        });
+    }
+    setValueContent(value) {
+        this.valueContentElement.text(value);
+    }
+}

package/lib/engine/cardsNotation/card/cardChange.d.ts

@@ -0,0 +1,21 @@
+import { MdtChartsDataRow } from "../../../config/config";
+import { CardsChangeModel } from "../../../model/model";
+import { CardChildElement } from "./card";
+export declare class CardChange {
+    private wrapper;
+    private iconBlock;
+    private valueContentBlock;
+    private contentBlock;
+    render(contentBlock: CardChildElement, options: CardsChangeModel, dataRow: MdtChartsDataRow): void;
+    update(options: CardsChangeModel, dataRow: MdtChartsDataRow): void;
+    private renderWrapper;
+    private setColor;
+    private renderContentBlock;
+    private renderContentItems;
+    private renderContentItem;
+    private renderIcon;
+    private renderIconEl;
+    private renderValue;
+    private renderDescription;
+    private setValueContent;
+}

package/lib/engine/cardsNotation/card/cardChange.js

@@ -0,0 +1,72 @@
+import { NamesHelper } from "../../helpers/namesHelper";
+import { CardService } from "./cardService";
+export class CardChange {
+    render(contentBlock, options, dataRow) {
+        this.wrapper = this.renderWrapper(contentBlock);
+        this.setColor(this.wrapper, options);
+        this.renderContentBlock(this.wrapper);
+        this.renderContentItems(this.contentBlock, options, dataRow);
+    }
+    update(options, dataRow) {
+        this.setColor(this.wrapper, options);
+        this.setValueContent(CardService.getValueContentFromRow(options.value, dataRow));
+        if (options.icon) {
+            if (this.iconBlock) {
+                this.iconBlock.html("");
+                this.renderIconEl(options.icon);
+            }
+            else {
+                this.renderIcon(this.contentBlock, options.icon);
+            }
+        }
+    }
+    renderWrapper(contentBlock) {
+        return contentBlock.append("div")
+            .classed(NamesHelper.getClassName("card-change-wrapper"), true);
+    }
+    setColor(wrapper, options) {
+        wrapper.style("color", options.color);
+    }
+    renderContentBlock(wrapper) {
+        this.contentBlock = wrapper.append("div")
+            .classed(NamesHelper.getClassName("card-change-content"), true);
+    }
+    renderContentItems(contentBlock, options, dataRow) {
+        if (options.icon)
+            this.renderIcon(this.renderContentItem(contentBlock), options.icon);
+        this.renderValue(this.renderContentItem(contentBlock), CardService.getValueContentFromRow(options.value, dataRow));
+        if (options.description)
+            this.renderDescription(this.renderContentItem(contentBlock), options.description);
+    }
+    renderContentItem(contentBlock) {
+        return contentBlock.append("div")
+            .classed(NamesHelper.getClassName("card-change-content-item"), true);
+    }
+    renderIcon(parentBlock, icon) {
+        this.iconBlock = parentBlock.append("div")
+            .classed(NamesHelper.getClassName("card-change-icon"), true);
+        this.renderIconEl(icon);
+    }
+    renderIconEl(icon) {
+        const iconEl = icon();
+        this.iconBlock
+            .node()
+            .appendChild(iconEl);
+    }
+    renderValue(parentBlock, value) {
+        this.valueContentBlock = parentBlock.append("div")
+            .classed(NamesHelper.getClassName("card-change-value"), true)
+            .append("span");
+        this.setValueContent(value);
+    }
+    renderDescription(parentBlock, textContent) {
+        return parentBlock.append("div")
+            .classed(NamesHelper.getClassName("card-change-description-wrapper"), true)
+            .append("span")
+            .classed(NamesHelper.getClassName("card-change-description"), true)
+            .text(textContent);
+    }
+    setValueContent(textContent) {
+        this.valueContentBlock.text(textContent);
+    }
+}

package/lib/engine/cardsNotation/card/cardElementsStyler.d.ts

@@ -0,0 +1,6 @@
+import { CardChildElement } from "./card";
+export declare class CardElementsStyler {
+    private readonly cardValueFontSize;
+    setValueBlockFontSize(valueBlock: CardChildElement): void;
+    private setFontSize;
+}

package/lib/engine/cardsNotation/card/cardElementsStyler.js

@@ -0,0 +1,11 @@
+export class CardElementsStyler {
+    constructor() {
+        this.cardValueFontSize = "2em";
+    }
+    setValueBlockFontSize(valueBlock) {
+        this.setFontSize(valueBlock, this.cardValueFontSize);
+    }
+    setFontSize(cardElement, value) {
+        cardElement.style("font-size", value);
+    }
+}

package/lib/engine/cardsNotation/card/cardService.d.ts

@@ -0,0 +1,11 @@
+import { MdtChartsCardValue, MdtChartsDataRow, MdtChartsDataSource } from "../../../config/config";
+import { CardValueContent } from "./card";
+interface ValueContentGetterOptions extends MdtChartsCardValue {
+    dataSetName: string;
+}
+export declare class CardServiceClass {
+    getValueContentFromDataSource(valueOptions: ValueContentGetterOptions, data: MdtChartsDataSource): CardValueContent;
+    getValueContentFromRow(valueOptions: MdtChartsCardValue, dataRow: MdtChartsDataRow): string;
+}
+export declare const CardService: CardServiceClass;
+export {};

package/lib/engine/cardsNotation/card/cardService.js

@@ -0,0 +1,12 @@
+import { ValueFormatter } from "../../valueFormatter";
+export class CardServiceClass {
+    getValueContentFromDataSource(valueOptions, data) {
+        const dataRow = data[valueOptions.dataSetName][0];
+        return this.getValueContentFromRow(valueOptions, dataRow);
+    }
+    getValueContentFromRow(valueOptions, dataRow) {
+        const value = dataRow[valueOptions.field];
+        return ValueFormatter.formatField(valueOptions.dataType, value);
+    }
+}
+export const CardService = new CardServiceClass();

package/lib/engine/cardsNotation/cardsManager.d.ts

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