mdt-charts 1.13.0 → 1.13.3

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,7 +34,7 @@ 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, NamesHelper.getClassName("card-change-description-item")), options.description);
     }
@@ -56,11 +56,11 @@ 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")
@@ -70,7 +70,7 @@ export class CardChange {
             .text(textContent)
             .attr("title", textContent);
     }
-    setValueContent(textContent) {
-        this.valueContentBlock.text(textContent);
+    setValueContent(textContent, prefix) {
+        this.valueContentBlock.text(prefix + textContent);
     }
 }

package/lib/engine/elementHighlighter/elementHighlighter.js

@@ -7,6 +7,7 @@ import { Donut } from '../polarNotation/donut/donut';
 import { MarkDot } from '../features/markDots/markDot';
 import { Helper } from '../helpers/helper';
 import * as chroma from 'chroma-js';
+import { NamesHelper } from '../helpers/namesHelper';
 export class ElementHighlighter {
     static toggleActivityStyle(elementSelection, isActive) {
         elementSelection.classed(this.inactiveElemClass, !isActive);
@@ -195,4 +196,4 @@ export class ElementHighlighter {
         });
     }
 }
-ElementHighlighter.inactiveElemClass = 'charts-opacity-inactive';
+ElementHighlighter.inactiveElemClass = NamesHelper.getClassName("opacity-inactive");

package/lib/model/model.d.ts

@@ -173,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

@@ -2,6 +2,7 @@ import { MdtChartsCardsChange, MdtChartsDataRow } from "../../../config/config";
 import { CardsChangeModel } from "../../model";
 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

@@ -9,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/style/charts-main.css

@@ -291,6 +291,12 @@
 .mdt-charts-card-header {
     display: flex;
     flex: 1;
+    align-items: baseline;
+}
+
+.mdt-charts-card-title,
+.mdt-charts-card-icon
+{
     font-size: 1.3em;
 }
 

package/lib/style/charts-main.less

@@ -291,6 +291,12 @@
 .mdt-charts-card-header {
     display: flex;
     flex: 1;
+    align-items: baseline;
+}
+
+.mdt-charts-card-title,
+.mdt-charts-card-icon
+{
     font-size: 1.3em;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdt-charts",
-  "version": "1.13.0",
+  "version": "1.13.3",
   "description": "",
   "main": "lib/main.js",
   "scripts": {