mdt-charts 1.12.18 → 1.13.0

package/lib/config/config.d.ts

@@ -39,10 +39,11 @@ export interface NewSize {
     height?: number;
 }
 interface BasicOptions {
-    data: DataOptions;
     tooltip?: TooltipOptions;
+    data: MdtChartsBasicDataOptions;
 }
 interface GraphicNotationOptions extends BasicOptions {
+    data: DataOptions;
     legend: Legend;
     title?: string;
     selectable: boolean;
@@ -70,12 +71,16 @@ export interface MdtChartsCardsOptions extends BasicOptions {
     title: string;
     description?: string;
     icon?: MdtChartsIconElement;
+    color?: MdtChartsColorRangeItem[];
     value: MdtChartsCardValue;
     change?: MdtChartsCardsChange;
 }
 export interface Legend {
     show: boolean;
 }
+export interface MdtChartsBasicDataOptions {
+    dataSource: string;
+}
 export interface DataOptions {
     dataSource: string;
     keyField: MdtChartsField;

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

@@ -36,11 +36,14 @@ export class CardChange {
             this.renderIcon(this.renderContentItem(contentBlock), options.icon);
         this.renderValue(this.renderContentItem(contentBlock), CardService.getValueContentFromRow(options.value, dataRow));
         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")
@@ -64,7 +67,8 @@ export class CardChange {
             .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);

package/lib/engine/engine.js

@@ -16,8 +16,8 @@ export class Engine {
         this.block = new Block(model.blockCanvas.cssClass, parentElement, this.chartId, this.filterEventManager, model.transitions);
         (_a = this.filterEventManager) === null || _a === void 0 ? void 0 : _a.setBlock(this.block);
         this.block.renderWrapper(model.blockCanvas.size);
-        this.contentManager = new ContentManager(model);
         if (model.options) {
+            this.contentManager = new ContentManager(model);
             ValueFormatter.setFormatFunction(model.dataSettings.format.formatters);
             this.renderCharts(model);
         }

package/lib/model/dataManagerModel/dataManagerModel.js

@@ -7,12 +7,12 @@ import { LegendPolarMarginCalculator } from "../featuresModel/legendModel/polarM
 import { CardsDataManagerModel } from "./notations/cardsDataManagerModel";
 export class DataManagerModel {
     static getPreparedData(data, allowableKeys, config) {
-        const scopedData = this.getScopedData(data, allowableKeys, config);
+        const scopedData = config.options.type !== "card" ? this.getScopedData(data, allowableKeys, config.options.data) : data;
         this.setDataType(scopedData, config);
         return scopedData;
     }
     static initDataScope(config, data, designerConfig, legendBlock, modelInstance) {
-        if (config.options.type === '2d' || config.options.type === 'interval') {
+        if (config.options.type === '2d') {
             this.initDataScopeFor2D(config.options, modelInstance, data, designerConfig);
         }
         else if (config.options.type === 'polar') {
@@ -20,7 +20,7 @@ export class DataManagerModel {
         }
         else if (config.options.type === "card") {
             const manager = new CardsDataManagerModel();
-            manager.initDataScope(modelInstance, data, config.options);
+            manager.initDataScope(modelInstance);
         }
         this.initScopedData(data, modelInstance, config);
     }
@@ -33,13 +33,12 @@ export class DataManagerModel {
     }
     static initDataScopeFor2D(configOptions, modelInstance, data, designerConfig) {
         // Для interval всегда один элемент, так как там может быть только один столбик
+        modelInstance.dataModel.initMaxRecordsAmount(configOptions.data.maxRecordsAmount);
         let itemsLength = 1;
-        if (configOptions.type === '2d') {
-            itemsLength = (configOptions.charts)
-                .filter((chart) => chart.type === 'bar').length;
-            if (itemsLength === 0)
-                itemsLength = 1; // Если баров нет, то для одной записи выделяется столько же места, сколько для одного столбика
-        }
+        itemsLength = (configOptions.charts)
+            .filter((chart) => chart.type === 'bar').length;
+        if (itemsLength === 0)
+            itemsLength = 1; // Если баров нет, то для одной записи выделяется столько же места, сколько для одного столбика
         if (itemsLength !== 0) {
             const axisLength = AxisModel.getAxisLength(configOptions.orientation, modelInstance.canvasModel);
             const uniqueKeys = ModelHelper.getUniqueValues(data[configOptions.data.dataSource].map(d => d[configOptions.data.keyField.name]));
@@ -55,6 +54,7 @@ export class DataManagerModel {
         }
     }
     static initDataScopeForPolar(configOptions, modelInstance, data, legendBlock, legendCanvas) {
+        modelInstance.dataModel.initMaxRecordsAmount(configOptions.data.maxRecordsAmount);
         const canvasModel = modelInstance.canvasModel;
         const keyFieldName = configOptions.data.keyField.name;
         const keys = data[configOptions.data.dataSource].map(dataRow => dataRow[keyFieldName]);
@@ -116,9 +116,9 @@ export class DataManagerModel {
         });
         return barsAmount;
     }
-    static getScopedData(data, allowableKeys, config) {
+    static getScopedData(data, allowableKeys, dataOptions) {
         const newData = {};
-        newData[config.options.data.dataSource] = this.getScopedChartData(data[config.options.data.dataSource], allowableKeys, config.options.data.keyField.name);
+        newData[dataOptions.dataSource] = this.getScopedChartData(data[dataOptions.dataSource], allowableKeys, dataOptions.keyField.name);
         return newData;
     }
     static getScopedChartData(data, allowableKeys, keyFieldName) {

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

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

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

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

package/lib/model/model.d.ts

@@ -33,11 +33,11 @@ export interface BlockMargin {
     right: number;
 }
 interface BasicOptionsModel {
-    data: OptionsModelData;
     tooltip: TooltipOptions;
 }
 interface GraphicNotationOptionsModel extends BasicOptionsModel {
     legend: ILegendModel;
+    data: OptionsModelData;
     title: string;
     selectable: boolean;
 }
@@ -66,17 +66,21 @@ export interface IntervalOptionsModel extends GraphicNotationOptionsModel {
 }
 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;
 }
-export interface OptionsModelData {
+export interface BasicOptionsModelData {
     dataSource: string;
+}
+export interface OptionsModelData extends BasicOptionsModelData {
     keyField: Field;
 }
 export interface Field {

package/lib/model/modelBuilder.js

@@ -70,7 +70,7 @@ export function assembleModel(config, data, designerConfig) {
             options: null,
             dataSettings: null
         };
-    resetFalsyValues(data, config.options.data.keyField.name);
+    resetFalsyValues(data);
     const otherComponents = OtherComponentsModel.getOtherComponentsModel({ elementsOptions: designerConfig.elementsOptions, title: config.options.title }, modelInstance);
     const marginModel = new MarginModel();
     marginModel.initMargin(designerConfig, config, otherComponents, data, modelInstance);
@@ -92,14 +92,11 @@ export function assembleModel(config, data, designerConfig) {
         transitions
     };
 }
-function resetFalsyValues(data, keyFieldName) {
+function resetFalsyValues(data) {
     for (let setName in data) {
         data[setName].forEach(dataRow => {
             for (let fieldName in dataRow) {
-                if (fieldName === keyFieldName && !dataRow[fieldName]) {
-                    dataRow[fieldName] = '';
-                }
-                else if (dataRow[fieldName] !== 0 && !dataRow[fieldName]) {
+                if (dataRow[fieldName] == null) {
                     dataRow[fieldName] = 0;
                 }
             }
@@ -107,7 +104,7 @@ function resetFalsyValues(data, keyFieldName) {
     }
 }
 export function getPreparedData(model, data, config) {
-    resetFalsyValues(data, config.options.data.keyField.name);
+    resetFalsyValues(data);
     const isModelOrDataEmpty = !model || Object.keys(model).length === 0 || !data || Object.keys(data).length === 0;
     if (isModelOrDataEmpty)
         return null;

package/lib/model/modelInstance/modelInstance.js

@@ -12,7 +12,6 @@ export class ModelInstance {
     }
     static initInitialParams(modelInstance, config, data) {
         modelInstance.canvasModel.initBlockSize(config.canvas.size);
-        modelInstance.dataModel.initMaxRecordsAmount(config.options.data.maxRecordsAmount);
         modelInstance.dataModel.repository.initSourceName(config.options.data.dataSource);
         modelInstance.dataModel.repository.initRawFullSource(data);
     }

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

@@ -1,7 +1,5 @@
-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 getColor;

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;

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,14 @@
 
 .mdt-charts-card-header {
     display: flex;
-    justify-content: space-between;
     flex: 1;
     font-size: 1.3em;
 }
 
+.mdt-charts-card-icon {
+    margin-right: 0.3em;
+}
+
 .mdt-charts-card-title {
     margin: 0;
     white-space: nowrap;
@@ -333,4 +336,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,14 @@
 
 .mdt-charts-card-header {
     display: flex;
-    justify-content: space-between;
     flex: 1;
     font-size: 1.3em;
 }
 
+.mdt-charts-card-icon {
+    margin-right: 0.3em;
+}
+
 .mdt-charts-card-title {
     margin: 0;
     white-space: nowrap;
@@ -333,4 +336,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.18",
+  "version": "1.13.0",
   "description": "",
   "main": "lib/main.js",
   "scripts": {