mdt-charts 1.12.16 → 1.12.19

package/lib/engine/twoDimensionalNotation/line/line.js

@@ -14,7 +14,7 @@ export class Line {
     static update(block, scales, newData, keyField, margin, keyAxisOrient, chart) {
         let promises;
         if (chart.isSegmented) {
-            promises = this.updateSegmeneted(block, scales, newData, keyField, margin, keyAxisOrient, chart);
+            promises = this.updateSegmented(block, scales, newData, keyField, margin, keyAxisOrient, chart);
         }
         else {
             promises = this.updateGrouped(block, scales, newData, keyField, margin, keyAxisOrient, chart);
@@ -23,7 +23,7 @@ export class Line {
     }
     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.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
             DomHelper.setChartStyle(path, chart.style, valueIndex, 'stroke');
             MarkDot.updateColors(block, chart, valueIndex);
@@ -32,12 +32,12 @@ export class Line {
     static renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart) {
         chart.data.valueFields.forEach((valueField, valueIndex) => {
             const lineGenerator = LineHelper.getLineGenerator(keyAxisOrient, scales, keyField.name, valueField.name, margin);
-            const path = block.getChartGroup(chart.index)
+            const path = block.svg.getChartGroup(chart.index)
                 .append('path')
                 .attr('d', lineGenerator(data))
                 .attr('class', this.lineChartClass)
                 .style('fill', 'none')
-                .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, 'stroke');
@@ -47,7 +47,7 @@ export class Line {
     static renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart) {
         const stackedData = stack().keys(chart.data.valueFields.map(field => field.name))(data);
         const lineGenerator = LineHelper.getSegmentedLineGenerator(keyAxisOrient, scales, keyField.name, margin);
-        const lines = block.getChartGroup(chart.index)
+        const lines = block.svg.getChartGroup(chart.index)
             .selectAll(`.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
             .data(stackedData)
             .enter()
@@ -55,7 +55,7 @@ export class Line {
             .attr('d', d => lineGenerator(d))
             .attr('class', this.lineChartClass)
             .style('fill', 'none')
-            .style('clip-path', `url(#${block.getClipPathId()})`)
+            .style('clip-path', `url(#${block.svg.getClipPathId()})`)
             .style('pointer-events', 'none');
         lines.each(function (d, i) {
             DomHelper.setCssClasses(select(this), Helper.getCssClassesWithElementIndex(chart.cssClasses, i));
@@ -69,7 +69,7 @@ export class Line {
         const promises = [];
         chart.data.valueFields.forEach((valueField, valueFieldIndex) => {
             const lineGenerator = LineHelper.getLineGenerator(keyAxisOrient, scales, keyField.name, valueField.name, margin);
-            const lineObject = block.getChartGroup(chart.index)
+            const lineObject = block.svg.getChartGroup(chart.index)
                 .select(`.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueFieldIndex}`);
             const prom = this.updateGroupedPath(block, lineObject, lineGenerator, newData);
             promises.push(prom);
@@ -77,10 +77,10 @@ export class Line {
         });
         return promises;
     }
-    static updateSegmeneted(block, scales, newData, keyField, margin, keyAxisOrient, chart) {
+    static updateSegmented(block, scales, newData, keyField, margin, keyAxisOrient, chart) {
         const stackedData = stack().keys(chart.data.valueFields.map(field => field.name))(newData);
         const lineGenerator = LineHelper.getSegmentedLineGenerator(keyAxisOrient, scales, keyField.name, margin);
-        const lines = block.getChartGroup(chart.index)
+        const lines = block.svg.getChartGroup(chart.index)
             .selectAll(`path.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
             .data(stackedData);
         const prom = this.updateSegmentedPath(block, lines, lineGenerator);

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

@@ -1,12 +1,12 @@
 import { MdtChartsDataSource } from "../../config/config";
-import { Model } from "../../model/model";
+import { Model, TwoDimensionalOptionsModel } from "../../model/model";
 import { Block } from "../block/block";
 import { ChartContentManager } from "../contentManager/contentManagerFactory";
-import Engine from "../engine";
+import { Engine } from "../engine";
 export declare class TwoDimensionalManager 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<TwoDimensionalOptionsModel>): void;
+    updateData(block: Block, model: Model<TwoDimensionalOptionsModel>, data: MdtChartsDataSource): void;
+    updateColors(block: Block, model: Model<TwoDimensionalOptionsModel>): void;
     private renderCharts;
     private updateCharts;
 }

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -18,7 +18,7 @@ export class TwoDimensionalManager {
         const options = model.options;
         const scales = Scale.getScales(options.scale.key, options.scale.value, options.chartSettings.bar);
         engine.block.scales = scales;
-        engine.block.renderSvg(model.blockCanvas.size);
+        engine.block.svg.render(model.blockCanvas.size);
         Axis.render(engine.block, scales, options.scale, options.axis, model.blockCanvas.size);
         GridLine.render(engine.block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, scales);
         this.renderCharts(engine.block, options.charts, scales, engine.data, options.data, model.chartBlock.margin, options.axis.key.orient, options.chartSettings.bar, model.blockCanvas.size);
@@ -75,8 +75,8 @@ export class TwoDimensionalManager {
         });
     }
     renderCharts(block, charts, scales, data, dataOptions, margin, keyAxisOrient, barSettings, blockSize) {
-        block.renderChartClipPath(margin, blockSize);
-        block.renderChartsBlock();
+        block.svg.renderChartClipPath(margin, blockSize);
+        block.svg.renderChartsBlock();
         charts.forEach((chart) => {
             if (chart.type === 'bar')
                 Bar.render(block, scales, data[dataOptions.dataSource], dataOptions.keyField, margin, keyAxisOrient, chart, blockSize, barSettings, BarHelper.getBarsInGroupAmount(charts), chart.isSegmented, charts.findIndex(ch => ch.type === 'bar'));
@@ -88,7 +88,7 @@ export class TwoDimensionalManager {
         EmbeddedLabels.raiseGroups(block);
     }
     updateCharts(block, charts, scales, data, dataOptions, margin, keyAxisOrient, blockSize, barSettings) {
-        block.updateChartClipPath(margin, blockSize);
+        block.svg.updateChartClipPath(margin, blockSize);
         let promises = [];
         charts.forEach((chart) => {
             let proms;

package/lib/main.js

@@ -1,4 +1,4 @@
-import Engine from "./engine/engine";
+import { Engine } from "./engine/engine";
 import { assembleModel, getPreparedData } from "./model/modelBuilder";
 import { PublicOptionsService } from "./optionsServices/publicOptionsService";
 export class Chart {

package/lib/model/chartStyleModel/chartStyleModel.d.ts

@@ -1,7 +1,7 @@
 import { ChartStyleConfig } from "../../designer/designerConfig";
 import { ChartStyle } from "../model";
 export declare class ChartStyleModelService {
-    private static standartColors;
+    private static standardColors;
     static getCssClasses(chartIndex: number): string[];
     static getChartStyle(elementsAmount: number, styleConfig: ChartStyleConfig): ChartStyle;
     static getColorSet(baseColors: string[], elementsAmount: number): string[];

package/lib/model/chartStyleModel/chartStyleModel.js

@@ -19,9 +19,9 @@ export class ChartStyleModelService {
     }
     static checkAndGet(baseColors) {
         if (baseColors.length === 0 || baseColors.filter(color => color === 'rgba(0, 0, 0, 0)' || !color).length > 0) {
-            return this.standartColors;
+            return this.standardColors;
         }
         return baseColors;
     }
 }
-ChartStyleModelService.standartColors = ["#209DE3", "#FF3131", "#FFBA00", "#20B078"];
+ChartStyleModelService.standardColors = ["#209DE3", "#FF3131", "#FFBA00", "#20B078"];

package/lib/model/chartStyleModel/colorRange.d.ts

@@ -0,0 +1,7 @@
+import { MdtChartsColorRangeItem } from "../../config/config";
+export declare class ColorRangeManager {
+    private sortedRange;
+    constructor(range: MdtChartsColorRangeItem[]);
+    getColorByValue(value: number): string;
+}
+export declare function sortColorRange(colorRange: MdtChartsColorRangeItem[]): MdtChartsColorRangeItem[];

package/lib/model/chartStyleModel/colorRange.js

@@ -0,0 +1,30 @@
+export class ColorRangeManager {
+    constructor(range) {
+        this.sortedRange = sortColorRange(range);
+    }
+    getColorByValue(value) {
+        for (let i = 0; i < this.sortedRange.length; i++) {
+            const currentItem = this.sortedRange[i];
+            const nextItem = this.sortedRange[i + 1];
+            if (!nextItem)
+                return currentItem.color;
+            if (currentItem.value == null && value < nextItem.value)
+                return currentItem.color;
+            if (currentItem.value === value)
+                return currentItem.color;
+            if (value >= currentItem.value && value < nextItem.value)
+                return currentItem.color;
+        }
+    }
+}
+export function sortColorRange(colorRange) {
+    const range = [...colorRange];
+    range.sort((a, b) => {
+        if (a.value == null)
+            return -1;
+        return a.value < b.value
+            ? -1
+            : (a.value == b.value ? 0 : 1);
+    });
+    return range;
+}

package/lib/model/dataManagerModel/dataManagerModel.js

@@ -4,6 +4,7 @@ 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";
 export class DataManagerModel {
     static getPreparedData(data, allowableKeys, config) {
         const scopedData = this.getScopedData(data, allowableKeys, config);
@@ -17,6 +18,10 @@ 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, data, config.options);
+        }
         this.initScopedData(data, modelInstance, config);
     }
     static initScopedData(data, modelInstance, config) {

package/lib/model/dataManagerModel/notations/cardsDataManagerModel.d.ts

@@ -0,0 +1,5 @@
+import { MdtChartsCardsOptions, MdtChartsDataSource } from "../../../config/config";
+import { ModelInstance } from "../../modelInstance/modelInstance";
+export declare class CardsDataManagerModel {
+    initDataScope(modelInstance: ModelInstance, data: MdtChartsDataSource, configOptions: MdtChartsCardsOptions): void;
+}

package/lib/model/dataManagerModel/notations/cardsDataManagerModel.js

@@ -0,0 +1,10 @@
+import { DataManagerModel } from "../dataManagerModel";
+export class CardsDataManagerModel {
+    initDataScope(modelInstance, data, configOptions) {
+        const firstKey = DataManagerModel.getDataValuesByKeyField(data, configOptions.data.dataSource, configOptions.data.keyField.name)[0];
+        modelInstance.dataModel.initScope({
+            allowableKeys: [firstKey],
+            hidedRecordsAmount: 0
+        });
+    }
+}

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 {

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/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;
 }
 
@@ -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;
 }