mdt-charts 1.12.20 → 1.13.2

package/lib/config/config.d.ts

@@ -71,6 +71,7 @@ export interface MdtChartsCardsOptions extends BasicOptions {
     title: string;
     description?: string;
     icon?: MdtChartsIconElement;
+    color?: MdtChartsColorRangeItem[];
     value: MdtChartsCardValue;
     change?: MdtChartsCardsChange;
 }

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

@@ -18,6 +18,7 @@ export declare class CardChart {
     updateData(options: CardsOptionsModel, data: MdtChartsDataSource): void;
     private renderCardWrapper;
     private renderContentBlock;
+    private setContentColor;
     private setContentFontSize;
     private renderHeaderBlock;
     private appendTitle;

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

@@ -13,7 +13,7 @@ export class CardChart {
         const parent = block.html.getBlock();
         const dataRow = data[options.data.dataSource][0];
         const wrapper = this.renderCardWrapper(parent);
-        this.renderContentBlock(wrapper);
+        this.renderContentBlock(wrapper, options.color);
         this.setContentFontSize(this.cardContentElement, canvasOptions);
         this.renderHeaderBlock(this.cardContentElement, {
             title: options.title,
@@ -32,15 +32,20 @@ export class CardChart {
         const dataRow = data[options.data.dataSource][0];
         this.setValueContent(CardService.getValueContentFromDataSource(Object.assign(Object.assign({}, options.value), { dataSetName: options.data.dataSource }), data));
         this.updateValueBlockStyle();
+        this.setContentColor(options.color);
         (_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) {
+    renderContentBlock(wrapper, color) {
         this.cardContentElement = wrapper.append("div")
             .classed(NamesHelper.getClassName("card-content"), true);
+        this.setContentColor(color);
+    }
+    setContentColor(color) {
+        this.cardContentElement.style("color", color);
     }
     setContentFontSize(contentBlock, canvasOptions) {
         const fontSize = Math.floor(Math.min(canvasOptions.cardSize.height, canvasOptions.cardSize.width) / 10);
@@ -49,14 +54,15 @@ export class CardChart {
     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);
+        this.appendTitle(header, options.title);
     }
     appendTitle(headerBlock, textContent) {
         headerBlock.append("h3")
             .classed(NamesHelper.getClassName("card-title"), true)
-            .text(textContent);
+            .text(textContent)
+            .attr("title", textContent);
     }
     appendIcon(headerBlock, icon) {
         const iconEl = icon();
@@ -70,7 +76,8 @@ export class CardChart {
             .classed(NamesHelper.getClassName("card-description-wrapper"), true);
         wrapper.append("p")
             .classed(NamesHelper.getClassName("card-description"), true)
-            .text(textContent);
+            .text(textContent)
+            .attr("title", textContent);
     }
     renderValueBlock(contentBlock, value) {
         const wrapper = contentBlock.append("div")

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

@@ -9,7 +9,7 @@ export class CardChange {
     }
     update(options, dataRow) {
         this.setColor(this.wrapper, options);
-        this.setValueContent(CardService.getValueContentFromRow(options.value, dataRow));
+        this.setValueContent(CardService.getValueContentFromRow(options.value, dataRow), options.valuePrefix);
         if (options.icon) {
             if (this.iconBlock) {
                 this.iconBlock.html("");
@@ -34,13 +34,16 @@ export class CardChange {
     renderContentItems(contentBlock, options, dataRow) {
         if (options.icon)
             this.renderIcon(this.renderContentItem(contentBlock), options.icon);
-        this.renderValue(this.renderContentItem(contentBlock), CardService.getValueContentFromRow(options.value, dataRow));
+        this.renderValue(this.renderContentItem(contentBlock), CardService.getValueContentFromRow(options.value, dataRow), options.valuePrefix);
         if (options.description)
-            this.renderDescription(this.renderContentItem(contentBlock), options.description);
+            this.renderDescription(this.renderContentItem(contentBlock, NamesHelper.getClassName("card-change-description-item")), options.description);
     }
-    renderContentItem(contentBlock) {
-        return contentBlock.append("div")
+    renderContentItem(contentBlock, cssClass) {
+        const item = contentBlock.append("div")
             .classed(NamesHelper.getClassName("card-change-content-item"), true);
+        if (cssClass)
+            item.classed(cssClass, true);
+        return item;
     }
     renderIcon(parentBlock, icon) {
         this.iconBlock = parentBlock.append("div")
@@ -53,20 +56,21 @@ export class CardChange {
             .node()
             .appendChild(iconEl);
     }
-    renderValue(parentBlock, value) {
+    renderValue(parentBlock, value, prefix) {
         this.valueContentBlock = parentBlock.append("div")
             .classed(NamesHelper.getClassName("card-change-value"), true)
             .append("span");
-        this.setValueContent(value);
+        this.setValueContent(value, prefix);
     }
     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);
+            .text(textContent)
+            .attr("title", textContent);
     }
-    setValueContent(textContent) {
-        this.valueContentBlock.text(textContent);
+    setValueContent(textContent, prefix) {
+        this.valueContentBlock.text(prefix + textContent);
     }
 }

package/lib/model/model.d.ts

@@ -71,6 +71,7 @@ export interface CardsOptionsModel extends BasicOptionsModel {
     description?: string;
     icon?: MdtChartsIconElement;
     value: MdtChartsCardValue;
+    color: MdtChartsColorName;
     change?: CardsChangeModel;
 }
 export interface ILegendModel {
@@ -172,6 +173,7 @@ export interface DonutThicknessOptions {
 }
 export interface CardsChangeModel {
     value: MdtChartsCardValue;
+    valuePrefix: string;
     description?: string;
     color: MdtChartsColorName;
     icon?: MdtChartsIconElement;

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

@@ -1,9 +1,8 @@
-import { MdtChartsCardOptionByValue, MdtChartsCardsChange, MdtChartsColorName, MdtChartsColorRangeItem, MdtChartsDataRow } from "../../../config/config";
+import { MdtChartsCardsChange, 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 getValuePrefix;
     private getColor;
     private getIcon;
     private getOptionsByValue;

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

@@ -1,22 +1,5 @@
 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
-    }
-];
+import { DEFAULT_CARD_CHANGE_RANGE } from "./cardsModelService";
 export class CardsChangeService {
     getChangeModel(dataRow, changeOptions) {
         var _a;
@@ -26,10 +9,19 @@ export class CardsChangeService {
         return {
             description: changeOptions.description,
             value: Object.assign({}, changeOptions.value),
+            valuePrefix: this.getValuePrefix(value),
             color: this.getColor(value, changeOptions.color),
             icon: this.getIcon(value, changeOptions.icon)
         };
     }
+    getValuePrefix(value) {
+        const prefixes = {
+            aboveZero: "+",
+            belowZero: "",
+            equalZero: ""
+        };
+        return this.getOptionsByValue(value, prefixes);
+    }
     getColor(changeValue, colorOptions) {
         const range = (colorOptions === null || colorOptions === void 0 ? void 0 : colorOptions.length) ? colorOptions : DEFAULT_CARD_CHANGE_RANGE;
         const rangeManager = new ColorRangeManager(range);

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

@@ -11,6 +11,7 @@ export class CardsModel {
             data: options.data,
             tooltip: options.tooltip,
             icon: options.icon,
+            color: this.service.getCardColor(options, modelInstance),
             value: Object.assign({}, options.value),
             change: this.service.getCardsChangeModel(options, modelInstance)
         };

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

@@ -1,6 +1,11 @@
-import { MdtChartsCardsOptions } from "../../../config/config";
+import { MdtChartsCardOptionByValue, MdtChartsCardsOptions, MdtChartsColorName, MdtChartsColorRangeItem } from "../../../config/config";
 import { ModelInstance } from "../../modelInstance/modelInstance";
+export declare const DEFAULT_CARD_COLOR: MdtChartsColorName;
+export declare const DEFAULT_CARD_CHANGE_COLOR: MdtChartsCardOptionByValue<MdtChartsColorName>;
+export declare const DEFAULT_CARD_CHANGE_RANGE: MdtChartsColorRangeItem[];
 export declare class CardsModelService {
     private changeService;
+    getCardColor(options: MdtChartsCardsOptions, modelInstance: ModelInstance): MdtChartsColorName;
     getCardsChangeModel(options: MdtChartsCardsOptions, modelInstance: ModelInstance): import("../../model").CardsChangeModel;
 }
+export declare function getCardColor(value: number | string, colorRange: MdtChartsColorRangeItem[]): string;

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

@@ -1,10 +1,41 @@
+import { ColorRangeManager } from "../../chartStyleModel/colorRange";
 import { CardsChangeService } from "./cardsChangeService";
+export const DEFAULT_CARD_COLOR = "#000";
+export const DEFAULT_CARD_CHANGE_COLOR = {
+    aboveZero: "#20b078",
+    equalZero: DEFAULT_CARD_COLOR,
+    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 CardsModelService {
     constructor() {
         this.changeService = new CardsChangeService();
     }
+    getCardColor(options, modelInstance) {
+        const data = modelInstance.dataModel.repository.getFirstRow();
+        const value = data[options.value.field];
+        return getCardColor(value, options.color);
+    }
     getCardsChangeModel(options, modelInstance) {
         const data = modelInstance.dataModel.repository.getFirstRow();
         return this.changeService.getChangeModel(data, options.change);
     }
 }
+export function getCardColor(value, colorRange) {
+    if (typeof value === "string" || !(colorRange === null || colorRange === void 0 ? void 0 : colorRange.length))
+        return DEFAULT_CARD_COLOR;
+    const rangeManager = new ColorRangeManager(colorRange);
+    return rangeManager.getColorByValue(value);
+}

package/lib/style/charts-main.css

@@ -290,11 +290,20 @@
 
 .mdt-charts-card-header {
     display: flex;
-    justify-content: space-between;
     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;
@@ -333,4 +342,14 @@
     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

@@ -290,11 +290,20 @@
 
 .mdt-charts-card-header {
     display: flex;
-    justify-content: space-between;
     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;
@@ -333,4 +342,14 @@
     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.12.20",
+  "version": "1.13.2",
   "description": "",
   "main": "lib/main.js",
   "scripts": {