mdt-charts 1.15.7 → 1.16.0

package/lib/config/config.d.ts

@@ -2,7 +2,7 @@ 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' | 'card';
+export declare type ChartNotation = '2d' | 'polar' | 'interval';
 export declare type ChartType = 'bar' | 'line' | 'area' | 'donut' | 'gantt';
 export declare type TwoDimensionalChartType = 'line' | 'bar' | 'area';
 export declare type PolarChartType = 'donut';
@@ -21,7 +21,7 @@ export interface MdtChartsDataSource {
     [source: string]: MdtChartsDataRow[];
 }
 export declare type AxisLabelPosition = "straight" | "rotated";
-export declare type MdtChartsConfigOptions = MdtChartsPolarOptions | MdtChartsTwoDimensionalOptions | MdtChartsIntervalOptions | MdtChartsCardsOptions;
+export declare type MdtChartsConfigOptions = MdtChartsPolarOptions | MdtChartsTwoDimensionalOptions | MdtChartsIntervalOptions;
 export interface MdtChartsConfig {
     canvas: ChartBlockCanvas;
     options: MdtChartsConfigOptions;
@@ -66,15 +66,6 @@ export interface MdtChartsIntervalOptions extends GraphicNotationOptions {
     additionalElements: AdditionalElements;
     orientation: ChartOrientation;
 }
-export interface MdtChartsCardsOptions extends BasicOptions {
-    type: 'card';
-    title: string;
-    description?: string;
-    icon?: MdtChartsIconElement;
-    color?: MdtChartsColorRangeItem[];
-    value: MdtChartsCardValue;
-    change?: MdtChartsCardsChange;
-}
 export interface Legend {
     show: boolean;
 }
@@ -139,6 +130,12 @@ export interface DiscreteAxisOptions extends AxisOptions {
 }
 export interface MdtChartsDiscreteAxisLabel {
     position?: AxisLabelPosition;
+    showRule?: MdtChartsShowAxisLabelRule;
+}
+export declare type ShowTickFn = (dataKey: string, index: number) => string | undefined;
+export interface MdtChartsShowAxisLabelRule {
+    spaceForOneLabel?: number;
+    showTickFn?: ShowTickFn;
 }
 export interface IntervalAxis {
     key: DiscreteAxisOptions;
@@ -146,20 +143,6 @@ export interface IntervalAxis {
 }
 interface DateAxisOptions extends AxisOptions {
 }
-export declare type MdtChartsCardValue = MdtChartsField;
-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/contentManager/contentManagerFactory.js

@@ -1,12 +1,10 @@
-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,
-            "card": CardsManager
+            "polar": PolarManager
         };
     }
     getManager(type) {

package/lib/engine/engine.js

@@ -55,8 +55,6 @@ export class Engine {
     }
     setFilterEventManager(options) {
         var _a, _b, _c;
-        if ((options === null || options === void 0 ? void 0 : options.type) === "card")
-            return;
         let highlightIds = [];
         if (this.initializeSelected instanceof Array && this.initializeSelected.length > 0)
             highlightIds = [...this.initializeSelected];

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

@@ -31,7 +31,9 @@ export class Axis {
     static renderAxis(block, scale, scaleOptions, axisOptions, blockSize) {
         const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scale);
         if (axisOptions.type === 'value' && (scaleOptions.type === 'linear' || scaleOptions.type === 'datetime'))
-            AxisHelper.setLabelsSettings(axisGenerator, scale.range(), scaleOptions);
+            AxisHelper.setValueAxisLabelsSettings(axisGenerator, scale.range(), scaleOptions);
+        else
+            axisGenerator.tickFormat(axisOptions.labels.showTick);
         const axisElement = block.getSvg()
             .append('g')
             .attr('class', `${this.axesClass} ${axisOptions.cssClass} data-label`);
@@ -58,7 +60,7 @@ export class Axis {
     }
     static updateValueAxis(block, scaleValue, scaleOptions, axisOptions) {
         const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scaleValue);
-        AxisHelper.setLabelsSettings(axisGenerator, scaleValue.range(), scaleOptions);
+        AxisHelper.setValueAxisLabelsSettings(axisGenerator, scaleValue.range(), scaleOptions);
         const axisElement = block.getSvg().select(`g.${axisOptions.cssClass}`);
         AxisDomHelper.updateAxisElement(axisGenerator, axisElement, axisOptions.translate, block.transitionManager.durations.chartUpdate)
             .then(() => {

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

@@ -2,7 +2,7 @@ import { AxisScale, Axis as IAxis } from 'd3-axis';
 import { AxisModelOptions, Orient, ScaleValueModel } from "../../../model/model";
 export declare class AxisHelper {
     static getAxisByOrient(orient: Orient, scale: AxisScale<any>): IAxis<any>;
-    static setLabelsSettings(axisGenerator: IAxis<any>, range: number[], scaleOptions: ScaleValueModel): void;
+    static setValueAxisLabelsSettings(axisGenerator: IAxis<any>, range: number[], scaleOptions: ScaleValueModel): void;
     static getBaseAxisGenerator(axisOptions: AxisModelOptions, scale: AxisScale<any>): IAxis<any>;
     private static removeTicks;
     private static setNumTickFormat;

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

@@ -14,7 +14,7 @@ export class AxisHelper {
         if (orient === 'right')
             return axisRight(scale);
     }
-    static setLabelsSettings(axisGenerator, range, scaleOptions) {
+    static setValueAxisLabelsSettings(axisGenerator, range, scaleOptions) {
         const axisLength = range[1] - range[0];
         let ticksAmount;
         if (axisLength / 10 < MINIMAL_STEP_SIZE) {

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

@@ -24,8 +24,8 @@ class TwoDimRecordOverflowAlertClass {
     }
     getPositionAttrs() {
         return {
-            right: '17px',
-            top: '1rem'
+            right: '0px',
+            top: '0px'
         };
     }
 }

package/lib/model/dataManagerModel/dataManagerModel.js

@@ -4,11 +4,10 @@ import { ModelHelper } from "../helpers/modelHelper";
 import { MIN_DONUT_BLOCK_SIZE, PolarModel } from "../notations/polar/polarModel";
 import { DataManagerModelService } from "./dataManagerModelService";
 import { LegendPolarMarginCalculator } from "../featuresModel/legendModel/polarMarginCalculator";
-import { CardsDataManagerModel } from "./notations/cardsDataManagerModel";
 import { styledElementValues } from "../modelBuilder";
 export class DataManagerModel {
     static getPreparedData(data, allowableKeys, config) {
-        const scopedData = config.options.type !== "card" ? this.getScopedData(data, allowableKeys, config.options.data) : data;
+        const scopedData = this.getScopedData(data, allowableKeys, config.options.data);
         this.setDataType(scopedData, config);
         return scopedData;
     }
@@ -19,10 +18,6 @@ export class DataManagerModel {
         else if (config.options.type === 'polar') {
             this.initDataScopeForPolar(config.options, modelInstance, data, legendBlock, designerConfig.canvas.legendBlock);
         }
-        else if (config.options.type === "card") {
-            const manager = new CardsDataManagerModel();
-            manager.initDataScope(modelInstance);
-        }
         this.initScopedData(data, modelInstance, config);
     }
     static initScopedData(data, modelInstance, config) {

package/lib/model/featuresModel/axisModel.js

@@ -2,12 +2,14 @@ import { ModelHelper } from "../helpers/modelHelper";
 import { AxisType, CLASSES } from "../modelBuilder";
 import { DataManagerModel } from "../dataManagerModel/dataManagerModel";
 import { TwoDimensionalModel } from "../notations/twoDimensionalModel";
-import { AxisModelService } from "./axisModelService";
+import { AxisModelService, AxisModelTickCalculator, showAllTicks } from "./axisModelService";
 export class AxisModel {
     static getKeyAxis(options, data, labelConfig, canvasModel, tooltipSettings, getZeroCoordinate) {
+        var _a;
         const { charts, orientation, data: dataOptions } = options;
         const axisConfig = options.axis.key;
         const translate = this.getKeyAxisTranslateModel(orientation, axisConfig.position, canvasModel, getZeroCoordinate);
+        const tickCalculator = new AxisModelTickCalculator(data[dataOptions.dataSource], (_a = options.axis.key.labels) === null || _a === void 0 ? void 0 : _a.showRule);
         return {
             type: 'key',
             orient: AxisModel.getAxisOrient(AxisType.Key, orientation, axisConfig.position),
@@ -18,7 +20,8 @@ export class AxisModel {
                 maxSize: AxisModel.getLabelSizeLegacy(labelConfig.maxSize.main, data[dataOptions.dataSource].map(d => d[dataOptions.keyField.name])).width,
                 position: AxisModel.getKeyAxisLabelPosition(canvasModel, DataManagerModel.getDataValuesByKeyField(data, dataOptions.dataSource, dataOptions.keyField.name).length, axisConfig),
                 visible: !TwoDimensionalModel.getChartsEmbeddedLabelsFlag(charts, orientation),
-                defaultTooltip: tooltipSettings.position === 'fixed'
+                defaultTooltip: tooltipSettings.position === 'fixed',
+                showTick: tickCalculator.createFunctionCalculator(this.getAxisLength(orientation, canvasModel))
             },
             visibility: axisConfig.visibility
         };
@@ -37,7 +40,8 @@ export class AxisModel {
                 maxSize: labelConfig.maxSize.main,
                 position: 'straight',
                 visible: true,
-                defaultTooltip: true
+                defaultTooltip: true,
+                showTick: showAllTicks
             },
             visibility: axisConfig.visibility
         };

package/lib/model/featuresModel/axisModelService.d.ts

@@ -1,4 +1,12 @@
-import { AxisLabelPosition } from "../../config/config";
+import { AxisLabelPosition, MdtChartsDataRow, MdtChartsShowAxisLabelRule, ShowTickFn } from "../../config/config";
+export declare const showAllTicks: ShowTickFn;
 export declare class AxisModelService {
     getKeyAxisLabelPosition(chartBlockWidth: number, scopedDataLength: number, positionFromConfig?: AxisLabelPosition): AxisLabelPosition;
 }
+export declare class AxisModelTickCalculator {
+    private readonly dataRows;
+    private readonly rule?;
+    private readonly defaultTickSpace;
+    constructor(dataRows: MdtChartsDataRow[], rule?: MdtChartsShowAxisLabelRule);
+    createFunctionCalculator(axisSize: number): ShowTickFn;
+}

package/lib/model/featuresModel/axisModelService.js

@@ -1,3 +1,4 @@
+export const showAllTicks = (d) => d;
 export class AxisModelService {
     getKeyAxisLabelPosition(chartBlockWidth, scopedDataLength, positionFromConfig) {
         if (positionFromConfig === "rotated" || positionFromConfig === "straight") {
@@ -9,3 +10,23 @@ export class AxisModelService {
         return 'straight';
     }
 }
+export class AxisModelTickCalculator {
+    constructor(dataRows, rule) {
+        this.dataRows = dataRows;
+        this.rule = rule;
+        this.defaultTickSpace = 20;
+    }
+    createFunctionCalculator(axisSize) {
+        var _a, _b, _c;
+        if ((_a = this.rule) === null || _a === void 0 ? void 0 : _a.showTickFn)
+            return this.rule.showTickFn;
+        const tickSpace = (_c = (_b = this.rule) === null || _b === void 0 ? void 0 : _b.spaceForOneLabel) !== null && _c !== void 0 ? _c : this.defaultTickSpace;
+        const allowedKeysAmount = Math.floor(axisSize / tickSpace);
+        if (allowedKeysAmount >= this.dataRows.length)
+            return showAllTicks;
+        let divider = Math.ceil(this.dataRows.length / allowedKeysAmount);
+        return (d, i) => {
+            return i % divider === 0 ? d : undefined;
+        };
+    }
+}

package/lib/model/model.d.ts

@@ -1,4 +1,4 @@
-import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType, AxisLabelPosition, MdtChartsIconElement, MdtChartsCardValue, MdtChartsColorName } from "../config/config";
+import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType, AxisLabelPosition, ShowTickFn } from "../config/config";
 import { DataType, DonutOptionsCanvas, Formatter, StaticLegendBlockCanvas, TooltipSettings, Transitions } from "../designer/designerConfig";
 declare type AxisType = "key" | "value";
 export declare type Orient = "top" | "bottom" | "left" | "right";
@@ -10,7 +10,7 @@ export declare type DataOptions = {
     [option: string]: any;
 };
 export declare type UnitsFromConfig = "%" | "px";
-export declare type OptionsModel = TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel | CardsOptionsModel;
+export declare type OptionsModel = TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel;
 export interface Model<O = OptionsModel> {
     blockCanvas: BlockCanvas;
     chartBlock: ChartBlockModel;
@@ -64,16 +64,6 @@ export interface IntervalOptionsModel extends GraphicNotationOptionsModel {
     orient: ChartOrientation;
     chartSettings: TwoDimChartElementsSettings;
 }
-export interface CardsOptionsModel extends BasicOptionsModel {
-    type: "card";
-    data: BasicOptionsModelData;
-    title: string;
-    description?: string;
-    icon?: MdtChartsIconElement;
-    value: MdtChartsCardValue;
-    color: MdtChartsColorName;
-    change?: CardsChangeModel;
-}
 export interface ILegendModel {
     position: LegendPosition;
 }
@@ -132,6 +122,7 @@ export interface AxisLabelModel {
     position: AxisLabelPosition;
     visible: boolean;
     defaultTooltip: boolean;
+    showTick: ShowTickFn;
 }
 export interface AdditionalElementsOptions {
     gridLine: GridLineOptions;
@@ -196,13 +187,6 @@ export interface DonutThicknessOptions {
     value: number;
     unit: DonutThicknessUnit;
 }
-export interface CardsChangeModel {
-    value: MdtChartsCardValue;
-    valuePrefix: string;
-    description?: string;
-    color: MdtChartsColorName;
-    icon?: MdtChartsIconElement;
-}
 interface ChartModel {
     tooltip: TooltipModel;
     cssClasses: string[];

package/lib/model/modelBuilder.js

@@ -5,7 +5,6 @@ import { DataManagerModel } from './dataManagerModel/dataManagerModel';
 import { OtherComponentsModel } from './featuresModel/otherComponents';
 import { ConfigValidator } from './configsValidator/configValidator';
 import { ModelInstance } from './modelInstance/modelInstance';
-import { CardsModelInstance } from './notations/cards/cardsModel';
 import { TwoDimConfigReader } from './modelInstance/configReader';
 export var AxisType;
 (function (AxisType) {
@@ -51,9 +50,6 @@ function getOptions(config, designerConfig, modelInstance) {
     else if (config.options.type === 'polar') {
         return PolarModel.getOptions(config.options, designerConfig, modelInstance);
     }
-    else if (config.options.type === "card") {
-        return CardsModelInstance.getOptions(config.options, modelInstance);
-    }
 }
 function getDataSettings(dataScope, designerConfig) {
     return {

package/lib/model/modelInstance/dataModel/dataModel.js

@@ -9,6 +9,9 @@ export class DataModelInstance {
         if (typeof amount === "number" && amount > 0) {
             this.maxRecordsAmount = amount;
         }
+        if (typeof amount === "number" && amount === -1) {
+            this.maxRecordsAmount = Infinity;
+        }
     }
     getMaxRecordsAmount() {
         return this.maxRecordsAmount;

package/lib/model/notations/twoDimensionalModel.js

@@ -1,5 +1,5 @@
 import { ChartStyleModelService } from "../chartStyleModel/chartStyleModel";
-import { TwoDimensionalChartStyleModel } from "../chartStyleModel/TwoDimensionalChartStyleModel";
+import { TwoDimensionalChartStyleModel } from "../chartStyleModel/twoDimensionalChartStyleModel";
 import { AxisModel } from "../featuresModel/axisModel";
 import { ScaleAxisRecalcer } from "../featuresModel/scaleModel/scaleAxisRecalcer";
 import { ScaleModel } from "../featuresModel/scaleModel/scaleModel";

package/lib/style/charts-main.css

@@ -274,86 +274,3 @@
     width: 100%;
     height: 100%;
 }
-
-.mdt-charts-card-wrapper {
-    width: 100%;
-    height: 100%;
-}
-
-.mdt-charts-card-wrapper * {
-    box-sizing: border-box;
-}
-
-.mdt-charts-card-content {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
-
-.mdt-charts-card-header {
-    display: flex;
-    flex: 1;
-    align-items: baseline;
-}
-
-.mdt-charts-card-title,
-.mdt-charts-card-icon
-{
-    font-size: 1.3em;
-}
-
-.mdt-charts-card-icon {
-    margin-right: 0.3em;
-}
-
-.mdt-charts-card-title {
-    margin: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.mdt-charts-card-description-wrapper {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.mdt-charts-card-description {
-    margin: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    opacity: 0.6;
-}
-
-.mdt-charts-card-value-wrapper {
-    flex: 2;
-    display: flex;
-    align-items: center;
-}
-
-.mdt-charts-card-change-content {
-    display: flex;
-    font-size: 0.9em;
-}
-
-.mdt-charts-card-change-content-item:not(:last-of-type) {
-    margin-right: 0.5em;
-}
-
-.mdt-charts-card-change-description-wrapper {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.mdt-charts-card-change-description-item {
-    overflow: hidden;
-}
-
-.mdt-charts-card-change-description {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}

package/lib/style/charts-main.less

@@ -274,86 +274,3 @@
     width: 100%;
     height: 100%;
 }
-
-.mdt-charts-card-wrapper {
-    width: 100%;
-    height: 100%;
-}
-
-.mdt-charts-card-wrapper * {
-    box-sizing: border-box;
-}
-
-.mdt-charts-card-content {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
-
-.mdt-charts-card-header {
-    display: flex;
-    flex: 1;
-    align-items: baseline;
-}
-
-.mdt-charts-card-title,
-.mdt-charts-card-icon
-{
-    font-size: 1.3em;
-}
-
-.mdt-charts-card-icon {
-    margin-right: 0.3em;
-}
-
-.mdt-charts-card-title {
-    margin: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.mdt-charts-card-description-wrapper {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.mdt-charts-card-description {
-    margin: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    opacity: 0.6;
-}
-
-.mdt-charts-card-value-wrapper {
-    flex: 2;
-    display: flex;
-    align-items: center;
-}
-
-.mdt-charts-card-change-content {
-    display: flex;
-    font-size: 0.9em;
-}
-
-.mdt-charts-card-change-content-item:not(:last-of-type) {
-    margin-right: 0.5em;
-}
-
-.mdt-charts-card-change-description-wrapper {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.mdt-charts-card-change-description-item {
-    overflow: hidden;
-}
-
-.mdt-charts-card-change-description {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdt-charts",
-  "version": "1.15.7",
+  "version": "1.16.0",
   "description": "",
   "main": "lib/main.js",
   "scripts": {
@@ -8,7 +8,9 @@
     "build": "npx webpack --mode production",
     "watch": "npx webpack --mode development --watch",
     "test": "jest",
-    "build-lib": "npx tsc -p tsconfig.production.json"
+    "build-lib": "npm run build-ts && npm run build-style",
+    "build-ts": "npx tsc -p tsconfig.production.json",
+    "build-style": "shx mkdir lib/style && shx cp src/style/charts-main.css lib/style && shx cp src/style/charts-main.less lib/style"
   },
   "homepage": "https://github.com/VishulaKnow/charts",
   "author": "",
@@ -18,7 +20,17 @@
     "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/preset-env": "^7.12.10",
     "@babel/preset-typescript": "^7.12.13",
+    "@types/chroma-js": "^2.1.3",
+    "@types/d3-array": "^2.9.0",
+    "@types/d3-axis": "^2.0.0",
+    "@types/d3-ease": "^2.0.0",
+    "@types/d3-format": "^2.0.0",
+    "@types/d3-interpolate": "^2.0.0",
+    "@types/d3-scale": "^3.2.2",
+    "@types/d3-selection": "^2.0.0",
+    "@types/d3-shape": "^2.0.0",
     "@types/d3-timer": "^2.0.0",
+    "@types/d3-transition": "^2.0.0",
     "@types/html-webpack-plugin": "^3.2.4",
     "@types/jest": "^26.0.20",
     "clean-webpack-plugin": "^3.0.0",
@@ -26,22 +38,13 @@
     "d3-timer": "^2.0.0",
     "html-webpack-plugin": "^4.5.0",
     "jest": "^26.6.3",
+    "shx": "^0.3.4",
     "style-loader": "^2.0.0",
     "ts-loader": "^8.0.12",
     "typescript": "^4.1.3",
     "webpack": "^5.10.1",
     "webpack-bundle-analyzer": "^4.4.0",
-    "webpack-cli": "^4.2.0",
-    "@types/chroma-js": "^2.1.3",
-    "@types/d3-array": "^2.9.0",
-    "@types/d3-axis": "^2.0.0",
-    "@types/d3-ease": "^2.0.0",
-    "@types/d3-format": "^2.0.0",
-    "@types/d3-interpolate": "^2.0.0",
-    "@types/d3-scale": "^3.2.2",
-    "@types/d3-selection": "^2.0.0",
-    "@types/d3-shape": "^2.0.0",
-    "@types/d3-transition": "^2.0.0"
+    "webpack-cli": "^4.2.0"
   },
   "dependencies": {
     "chroma-js": "^2.1.1",

package/tsconfig.production.json

@@ -9,7 +9,8 @@
         "types": [
             "jest"
         ],
-        "declaration": true
+        "declaration": true,
+        "moduleResolution": "Node"
     },
     "include": [
         "src"

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

@@ -1,31 +0,0 @@
-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 setContentColor;
-    private setContentFontSize;
-    private renderHeaderBlock;
-    private appendTitle;
-    private appendIcon;
-    private renderDescriptionBlock;
-    private renderValueBlock;
-    private updateValueBlockStyle;
-    private setValueContent;
-}
-export {};