mdt-charts 1.12.14 → 1.12.17

package/lib/model/margin/marginModel.js

@@ -1,26 +1,20 @@
 import { TwoDimMarginModel } from "./twoDim/twoDimMarginModel";
 export class MarginModel {
-    static initMargin(designerConfig, config, otherComponents, data, modelInstance) {
+    constructor() {
+        this.twoDimModel = new TwoDimMarginModel();
+    }
+    initMargin(designerConfig, config, otherComponents, data, modelInstance) {
         const canvasModel = modelInstance.canvasModel;
         canvasModel.initMargin(Object.assign({}, designerConfig.canvas.chartBlockMargin));
-        this.recalcMarginByTitle(canvasModel, otherComponents.titleBlock);
+        this.recalcMarginByTitle(canvasModel);
         if (config.options.type === '2d') {
-            const twoDimModel = new TwoDimMarginModel();
-            twoDimModel.recalcMargin(designerConfig, config.options, otherComponents, data, modelInstance);
+            this.twoDimModel.recalcMargin(designerConfig, config.options, otherComponents, data, modelInstance);
         }
     }
-    static recalcMarginByVerticalAxisLabel(modelInstance, options, designerConfig) {
-        const twoDimModel = new TwoDimMarginModel();
-        twoDimModel.recalcMarginByVerticalAxisLabel(modelInstance, options, designerConfig);
-    }
-    static appendToGlobalMarginValuesLegendMargin(canvasModel, position, legendBlockModel) {
-        const legendCoordinate = legendBlockModel.coordinate;
-        if (position === 'left' || position === 'right')
-            canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.left + legendCoordinate[position].margin.right);
-        else
-            canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.top + legendCoordinate[position].margin.bottom);
+    recalcMarginByVerticalAxisLabel(modelInstance, options, designerConfig) {
+        this.twoDimModel.recalcMarginByVerticalAxisLabel(modelInstance, options, designerConfig);
     }
-    static recalcMarginByTitle(canvasModel, titleBlockModel) {
-        canvasModel.increaseMarginSide("top", titleBlockModel.margin.top + titleBlockModel.size + titleBlockModel.margin.bottom);
+    recalcMarginByTitle(canvasModel) {
+        canvasModel.increaseMarginSide("top", canvasModel.titleCanvas.getAllNeededSpace());
     }
 }

package/lib/model/margin/twoDim/twoDimMarginModel.js

@@ -12,7 +12,7 @@ export class TwoDimMarginModel {
     }
     recalcMargin(designerConfig, options, otherComponents, data, modelInstance) {
         const canvasModel = modelInstance.canvasModel;
-        this.twoDimLegendModel.recalcMarginWith2DLegend(modelInstance, otherComponents.legendBlock);
+        this.twoDimLegendModel.recalcMarginWith2DLegend(modelInstance, otherComponents.legendBlock, options.legend);
         const labelSize = this.getHorizontalMarginByAxisLabels(designerConfig.canvas.axisLabel.maxSize.main, options.axis, data, options);
         this.recalcVerticalMarginByAxisLabelHeight(labelSize, canvasModel, options.orientation, options.axis);
         // Если встроенный лейбл показывает ключи, то лейблы оси ключей не показываются

package/lib/model/model.d.ts

@@ -1,4 +1,4 @@
-import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType, AxisLabelPosition } from "../config/config";
+import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType, AxisLabelPosition, MdtChartsIconElement, MdtChartsCardValue, MdtChartsColorName } from "../config/config";
 import { DataType, DonutOptionsCanvas, Formatter, TooltipSettings, Transitions } from "../designer/designerConfig";
 declare type AxisType = "key" | "value";
 export declare type Orient = "top" | "bottom" | "left" | "right";
@@ -10,7 +10,8 @@ export declare type DataOptions = {
     [option: string]: any;
 };
 export declare type UnitsFromConfig = "%" | "px";
-export interface Model<O = TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel> {
+export declare type OptionsModel = TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel | CardsOptionsModel;
+export interface Model<O = OptionsModel> {
     blockCanvas: BlockCanvas;
     chartBlock: ChartBlockModel;
     options: O;
@@ -31,14 +32,16 @@ export interface BlockMargin {
     left: number;
     right: number;
 }
-interface OptionsModel {
-    legend: ILegendModel;
+interface BasicOptionsModel {
     data: OptionsModelData;
+    tooltip: TooltipOptions;
+}
+interface GraphicNotationOptionsModel extends BasicOptionsModel {
+    legend: ILegendModel;
     title: string;
     selectable: boolean;
-    tooltip: TooltipOptions;
 }
-export interface TwoDimensionalOptionsModel extends OptionsModel {
+export interface TwoDimensionalOptionsModel extends GraphicNotationOptionsModel {
     type: "2d";
     scale: IScaleModel;
     axis: IAxisModel;
@@ -47,12 +50,12 @@ export interface TwoDimensionalOptionsModel extends OptionsModel {
     orient: ChartOrientation;
     chartSettings: TwoDimChartElementsSettings;
 }
-export interface PolarOptionsModel extends OptionsModel {
+export interface PolarOptionsModel extends GraphicNotationOptionsModel {
     type: "polar";
     charts: PolarChartModel[];
     chartCanvas: DonutChartSettings;
 }
-export interface IntervalOptionsModel extends OptionsModel {
+export interface IntervalOptionsModel extends GraphicNotationOptionsModel {
     type: "interval";
     scale: IScaleModel;
     axis: IAxisModel;
@@ -61,6 +64,14 @@ export interface IntervalOptionsModel extends OptionsModel {
     orient: ChartOrientation;
     chartSettings: TwoDimChartElementsSettings;
 }
+export interface CardsOptionsModel extends BasicOptionsModel {
+    type: "card";
+    title: string;
+    description?: string;
+    icon?: MdtChartsIconElement;
+    value: MdtChartsCardValue;
+    change?: CardsChangeModel;
+}
 export interface ILegendModel {
     position: LegendPosition;
 }
@@ -156,6 +167,12 @@ export interface DonutThicknessOptions {
     value: number;
     unit: DonutThicknessUnit;
 }
+export interface CardsChangeModel {
+    value: MdtChartsCardValue;
+    description?: string;
+    color: MdtChartsColorName;
+    icon?: MdtChartsIconElement;
+}
 interface ChartModel {
     tooltip: TooltipModel;
     cssClasses: string[];

package/lib/model/modelBuilder.js

@@ -6,6 +6,7 @@ import { IntervalModel } from './notations/intervalModel';
 import { OtherComponentsModel } from './featuresModel/otherComponents';
 import { ConfigValidator } from './configsValidator/configValidator';
 import { ModelInstance } from './modelInstance/modelInstance';
+import { CardsModelInstance } from './notations/cards/cardsModel';
 export var AxisType;
 (function (AxisType) {
     AxisType[AxisType["Key"] = 0] = "Key";
@@ -41,6 +42,9 @@ function getOptions(config, designerConfig, modelInstance) {
     else if (config.options.type === 'interval') {
         return IntervalModel.getOptions(config.options, designerConfig, modelInstance);
     }
+    else if (config.options.type === "card") {
+        return CardsModelInstance.getOptions(config.options, modelInstance);
+    }
 }
 function getDataSettings(dataScope, designerConfig) {
     return {
@@ -68,10 +72,11 @@ export function assembleModel(config, data, designerConfig) {
         };
     resetFalsyValues(data, config.options.data.keyField.name);
     const otherComponents = OtherComponentsModel.getOtherComponentsModel({ elementsOptions: designerConfig.elementsOptions, title: config.options.title }, modelInstance);
-    MarginModel.initMargin(designerConfig, config, otherComponents, data, modelInstance);
+    const marginModel = new MarginModel();
+    marginModel.initMargin(designerConfig, config, otherComponents, data, modelInstance);
     DataManagerModel.initDataScope(config, data, designerConfig, otherComponents.legendBlock, modelInstance);
     if (config.options.type === '2d' && config.options.axis.key.visibility)
-        MarginModel.recalcMarginByVerticalAxisLabel(modelInstance, config.options, designerConfig);
+        marginModel.recalcMarginByVerticalAxisLabel(modelInstance, config.options, designerConfig);
     const blockCanvas = getBlockCanvas(config, modelInstance);
     const chartBlock = getChartBlockModel(modelInstance);
     const options = getOptions(config, designerConfig, modelInstance);

package/lib/model/modelInstance/canvasModel/canvasModel.d.ts

@@ -1,10 +1,11 @@
 import { Size } from "../../../config/config";
 import { BlockMargin } from "../../model";
 import { LegendCanvasModelInstance } from "./legendCanvasModel";
-import { MarginModelService } from "./marginModelService";
+import { CanvasMarginModel, MarginSide } from "./canvasSizesModel/canvasMarginModel";
+import { MarginModelService } from "./canvasSizesModel/marginModelService";
 import { TitleCanvasModel } from "./titleCanvas";
-export declare type MarginSide = keyof BlockMargin;
-export declare class CanvasModel {
+import { CanvasSizesModel } from "./canvasSizesModel/canvasSizeModel";
+export declare class CanvasModel implements CanvasMarginModel, CanvasSizesModel {
     titleCanvas: TitleCanvasModel;
     legendCanvas: LegendCanvasModelInstance;
     marginService: MarginModelService;

package/lib/model/modelInstance/canvasModel/canvasModel.js

@@ -1,5 +1,5 @@
 import { LegendCanvasModelInstance } from "./legendCanvasModel";
-import { MarginModelService } from "./marginModelService";
+import { MarginModelService } from "./canvasSizesModel/marginModelService";
 import { TitleCanvasModel } from "./titleCanvas";
 export class CanvasModel {
     constructor() {

package/lib/model/modelInstance/canvasModel/canvasSizesModel/canvasMarginModel.d.ts

@@ -0,0 +1,11 @@
+import { BlockMargin } from "../../../model";
+export declare type MarginSide = keyof BlockMargin;
+export interface CanvasMarginModel {
+    initMargin(margin: BlockMargin): void;
+    getMargin(): BlockMargin;
+    getMarginSide(side: MarginSide): number;
+    setMarginSide(side: MarginSide, size: number): void;
+    increaseMarginSide(side: MarginSide, byValue: number, key?: string): void;
+    decreaseMarginSide(side: MarginSide, byValue: number): void;
+    roundMargin(): void;
+}

package/lib/model/modelInstance/canvasModel/canvasSizesModel/canvasMarginModel.js

@@ -0,0 +1 @@
+export {};

package/lib/model/modelInstance/canvasModel/canvasSizesModel/canvasSizeModel.d.ts

@@ -0,0 +1,4 @@
+export interface CanvasSizesModel {
+    getChartBlockWidth(): number;
+    getChartBlockHeight(): number;
+}

package/lib/model/modelInstance/canvasModel/canvasSizesModel/canvasSizeModel.js

@@ -0,0 +1 @@
+export {};

package/lib/model/modelInstance/canvasModel/canvasSizesModel/marginModelService.d.ts

@@ -0,0 +1,11 @@
+import { MarginSide } from "./canvasMarginModel";
+export interface MarginLogData {
+    side: MarginSide;
+    byValue: number;
+}
+export declare class MarginModelService {
+    private log;
+    appendLog(key: string, side: MarginSide, byValue: number): void;
+    getDataByKey(key: string): MarginLogData;
+    private findLogByKey;
+}

package/lib/model/modelInstance/canvasModel/canvasSizesModel/marginModelService.js

@@ -0,0 +1,26 @@
+export class MarginModelService {
+    constructor() {
+        this.log = [];
+    }
+    appendLog(key, side, byValue) {
+        const log = this.findLogByKey(key);
+        if (log) {
+            log.data = { side, byValue };
+            return;
+        }
+        this.log.push({
+            key,
+            data: {
+                side,
+                byValue
+            }
+        });
+    }
+    getDataByKey(key) {
+        var _a;
+        return (_a = this.findLogByKey(key)) === null || _a === void 0 ? void 0 : _a.data;
+    }
+    findLogByKey(key) {
+        return this.log.find(l => l.key === key);
+    }
+}

package/lib/model/modelInstance/canvasModel/titleCanvas.js

@@ -6,6 +6,6 @@ export class TitleCanvasModel {
         return this.model;
     }
     getAllNeededSpace() {
-        return this.model.pad + this.model.size + this.model.margin.top;
+        return this.model.pad + this.model.size + this.model.margin.top + this.model.margin.bottom;
     }
 }

package/lib/model/modelInstance/dataModel/dataRepository.d.ts

@@ -6,6 +6,7 @@ export declare class DataRepositoryModel {
     initSourceName(sourceName: string): void;
     initRawFullSource(rawSource: MdtChartsDataSource): void;
     getRawRows(): import("../../../config/config").MdtChartsDataRow[];
+    getFirstRow(): import("../../../config/config").MdtChartsDataRow;
     initScopedFullSource(scopedSource: MdtChartsDataSource): void;
     getScopedFullSource(): MdtChartsDataSource;
     getScopedRows(): import("../../../config/config").MdtChartsDataRow[];

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

@@ -8,6 +8,9 @@ export class DataRepositoryModel {
     getRawRows() {
         return this.rawFullSource[this.sourceName];
     }
+    getFirstRow() {
+        return this.rawFullSource[this.sourceName][0];
+    }
     initScopedFullSource(scopedSource) {
         this.scopedFullSource = scopedSource;
     }

package/lib/model/notations/cards/cardsChangeService.d.ts

@@ -0,0 +1,10 @@
+import { MdtChartsCardOptionByValue, MdtChartsCardsChange, MdtChartsColorName, MdtChartsColorRangeItem, MdtChartsDataRow } from "../../../config/config";
+import { CardsChangeModel } from "../../model";
+export declare const DEFAULT_CARD_CHANGE_COLOR: MdtChartsCardOptionByValue<MdtChartsColorName>;
+export declare const DEFAULT_CARD_CHANGE_RANGE: MdtChartsColorRangeItem[];
+export declare class CardsChangeService {
+    getChangeModel(dataRow: MdtChartsDataRow, changeOptions: MdtChartsCardsChange): CardsChangeModel;
+    private getColor;
+    private getIcon;
+    private getOptionsByValue;
+}

package/lib/model/notations/cards/cardsChangeService.js

@@ -0,0 +1,50 @@
+import { ColorRangeManager } from "../../chartStyleModel/colorRange";
+export const DEFAULT_CARD_CHANGE_COLOR = {
+    aboveZero: "#20b078",
+    equalZero: "#000",
+    belowZero: "#ff3131"
+};
+export const DEFAULT_CARD_CHANGE_RANGE = [
+    {
+        color: DEFAULT_CARD_CHANGE_COLOR.belowZero
+    },
+    {
+        color: DEFAULT_CARD_CHANGE_COLOR.equalZero,
+        value: 0
+    },
+    {
+        color: DEFAULT_CARD_CHANGE_COLOR.aboveZero,
+        value: 0
+    }
+];
+export class CardsChangeService {
+    getChangeModel(dataRow, changeOptions) {
+        var _a;
+        if (!changeOptions || !((_a = changeOptions.value) === null || _a === void 0 ? void 0 : _a.field))
+            return void 0;
+        const value = dataRow[changeOptions.value.field];
+        return {
+            description: changeOptions.description,
+            value: Object.assign({}, changeOptions.value),
+            color: this.getColor(value, changeOptions.color),
+            icon: this.getIcon(value, changeOptions.icon)
+        };
+    }
+    getColor(changeValue, colorOptions) {
+        const range = (colorOptions === null || colorOptions === void 0 ? void 0 : colorOptions.length) ? colorOptions : DEFAULT_CARD_CHANGE_RANGE;
+        const rangeManager = new ColorRangeManager(range);
+        return rangeManager.getColorByValue(changeValue);
+    }
+    getIcon(changeValue, iconOptions) {
+        if (!iconOptions)
+            return void 0;
+        return this.getOptionsByValue(changeValue, iconOptions);
+    }
+    getOptionsByValue(value, optionsByValues) {
+        if (value < 0)
+            return optionsByValues.belowZero;
+        if (value > 0)
+            return optionsByValues.aboveZero;
+        return optionsByValues.equalZero;
+    }
+}

package/lib/model/notations/cards/cardsModel.d.ts

@@ -0,0 +1,8 @@
+import { MdtChartsCardsOptions } from "../../../config/config";
+import { CardsOptionsModel } from "../../model";
+import { ModelInstance } from "../../modelInstance/modelInstance";
+export declare class CardsModel {
+    private service;
+    getOptions(options: MdtChartsCardsOptions, modelInstance: ModelInstance): CardsOptionsModel;
+}
+export declare const CardsModelInstance: CardsModel;

package/lib/model/notations/cards/cardsModel.js

@@ -0,0 +1,19 @@
+import { CardsModelService } from "./cardsModelService";
+export class CardsModel {
+    constructor() {
+        this.service = new CardsModelService();
+    }
+    getOptions(options, modelInstance) {
+        return {
+            type: "card",
+            title: options.title,
+            description: options.description,
+            data: options.data,
+            tooltip: options.tooltip,
+            icon: options.icon,
+            value: Object.assign({}, options.value),
+            change: this.service.getCardsChangeModel(options, modelInstance)
+        };
+    }
+}
+export const CardsModelInstance = new CardsModel();

package/lib/model/notations/cards/cardsModelService.d.ts

@@ -0,0 +1,6 @@
+import { MdtChartsCardsOptions } from "../../../config/config";
+import { ModelInstance } from "../../modelInstance/modelInstance";
+export declare class CardsModelService {
+    private changeService;
+    getCardsChangeModel(options: MdtChartsCardsOptions, modelInstance: ModelInstance): import("../../model").CardsChangeModel;
+}

package/lib/model/notations/cards/cardsModelService.js

@@ -0,0 +1,10 @@
+import { CardsChangeService } from "./cardsChangeService";
+export class CardsModelService {
+    constructor() {
+        this.changeService = new CardsChangeService();
+    }
+    getCardsChangeModel(options, modelInstance) {
+        const data = modelInstance.dataModel.repository.getFirstRow();
+        return this.changeService.getChangeModel(data, options.change);
+    }
+}

package/lib/model/notations/intervalModel.js

@@ -2,7 +2,6 @@ import { AxisModel } from "../featuresModel/axisModel";
 import { ChartStyleModelService } from "../chartStyleModel/chartStyleModel";
 import { DataManagerModel } from "../dataManagerModel/dataManagerModel";
 import { AxisType } from "../modelBuilder";
-import { ScaleModel, ScaleType } from "../featuresModel/scaleModel/scaleModel";
 import { TwoDimensionalModel } from "./twoDimensionalModel";
 export class IntervalModel {
     static getOptions(options, designerConfig, modelInstance) {
@@ -18,16 +17,16 @@ export class IntervalModel {
                     domain: modelInstance.dataModel.getAllowableKeys(),
                     range: {
                         start: 0,
-                        end: ScaleModel.getRangePeek(ScaleType.Key, options.orientation, canvasModel)
+                        end: 0
                     },
                     type: 'band',
                     elementsAmount: 1
                 },
                 value: {
-                    domain: ScaleModel.getDateValueDomain(dataModelRep.getScopedFullSource(), options.chart, options.axis.key.position, options.data.dataSource),
+                    domain: [],
                     range: {
                         start: 0,
-                        end: ScaleModel.getRangePeek(ScaleType.Value, options.orientation, canvasModel)
+                        end: 0
                     },
                     type: 'datetime'
                 }

package/lib/model/notations/twoDimensionalModel.js

@@ -7,7 +7,8 @@ export class TwoDimensionalModel {
     static getOptions(options, designerConfig, modelInstance) {
         const canvasModel = modelInstance.canvasModel;
         const dataModelRep = modelInstance.dataModel.repository;
-        const scaleMarginRecalcer = new ScaleAxisRecalcer(() => ScaleModel.getScaleLinear(options, dataModelRep.getScopedRows(), canvasModel));
+        const scaleModel = new ScaleModel();
+        const scaleMarginRecalcer = new ScaleAxisRecalcer(() => scaleModel.getScaleLinear(options, dataModelRep.getScopedRows(), canvasModel));
         scaleMarginRecalcer.recalculateMargin(canvasModel, options.orientation, options.axis.key);
         const scaleValueInfo = scaleMarginRecalcer.getScaleValue();
         return {
@@ -16,7 +17,7 @@ export class TwoDimensionalModel {
             selectable: !!options.selectable,
             orient: options.orientation,
             scale: {
-                key: ScaleModel.getScaleKey(modelInstance.dataModel.getAllowableKeys(), options.orientation, canvasModel, options.charts, this.getChartsByType(options.charts, 'bar')),
+                key: scaleModel.getScaleKey(modelInstance.dataModel.getAllowableKeys(), options.orientation, canvasModel, options.charts, this.getChartsByType(options.charts, 'bar')),
                 value: scaleValueInfo.scale
             },
             axis: {

package/lib/optionsServices/publicOptionsService.d.ts

@@ -1,4 +1,4 @@
-import { Size } from "../main";
+import { Size } from "../config/config";
 declare class PublicOptionsServiceClass {
     validateSize(size: Partial<Size>): boolean;
 }

package/lib/optionsServices/validators/sizeValidator.d.ts

@@ -1,4 +1,4 @@
-import { Size } from "../../main";
+import { Size } from "../../config/config";
 export declare class SizeValidator {
     validate(size: Partial<Size>): boolean;
     private validateSide;

package/lib/style/charts-main.css

@@ -30,12 +30,12 @@
 
 
 /*========================================================================== Common classes */
-.charts-opacity-inactive {
+.mdt-charts-opacity-inactive {
     opacity: 0.6;
 }
 
 /* EXTENDED FOR SPECIFIC STYLES */
-.legend-item.charts-opacity-inactive {
+.legend-item.mdt-charts-opacity-inactive {
     opacity: 0.45;
 }
 
@@ -109,14 +109,14 @@
 
 
 /*========================================================================= Tooltip */
-.tooltip-block {
+.mdt-charts-tooltip-block {
     pointer-events: none;
     z-index: 100;
     filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.1));
     width: max-content;
     max-width: 500px;
 }
-.tooltip-content {
+.mdt-charts-tooltip-content {
     position: relative;
     pointer-events: none;
     font-family: "Roboto", sans-serif;
@@ -128,7 +128,7 @@
     background: rgba(0, 0, 0, 0.82);
     font-size: 11px;
 }
-.tooltip-arrow {
+.mdt-charts-tooltip-arrow {
     width: 0;
     height: 0;
     border-style: solid;
@@ -159,26 +159,26 @@
     font-weight: 400;
 }
 
-.tooltip-line {
+.mdt-charts-tooltip-line {
     stroke: #AAA;
     stroke-width: 1px;
     stroke-linecap: round;
 }
-.tooltip-content .tooltip-head {
+.mdt-charts-tooltip-content .tooltip-head {
     font-size: 12px;
     margin-bottom: 10px;
 }
-.tooltip-content .tooltip-texts {
+.mdt-charts-tooltip-content .tooltip-texts {
     width: 100%;
 }
 
-.tooltip-content .tooltip-text-item > span {
+.mdt-charts-tooltip-content .tooltip-text-item > span {
     display: block;
 }
-.tooltip-content .tooltip-text-item > span:first-of-type {
+.mdt-charts-tooltip-content .tooltip-text-item > span:first-of-type {
     flex: 1;
 }
-.tooltip-content .tooltip-text-item > span:last-of-type {
+.mdt-charts-tooltip-content .tooltip-text-item > span:last-of-type {
     flex: 0;
 }
 .tooltip-field-value {
@@ -188,10 +188,10 @@
 
 
 /*========================================================================= Additional */
-.charts-axis .domain {
+.mdt-charts-axis .domain {
     stroke: #D2D2D2;
 }
-.charts-axis .tick line:first-of-type {
+.mdt-charts-axis .tick line:first-of-type {
     stroke: #D2D2D2;
 }
 
@@ -261,6 +261,76 @@
 }
 
 /* Mark dots */
-.charts-dot-hidden {
+.mdt-charts-dot-hidden {
     display: none;
+}
+
+/* Card */
+.mdt-charts-html-chart {
+    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;
+    justify-content: space-between;
+    flex: 1;
+    font-size: 1.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;
 }