mdt-charts 1.13.2 → 1.14.0

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

@@ -0,0 +1,19 @@
+import { AxisLabelFormatter, MdtChartsConfig, MdtChartsField, MdtChartsTwoDimensionalOptions } from "../../config/config";
+import { DesignerConfig } from "../../designer/designerConfig";
+interface BaseConfigReader {
+    getValueFields(): MdtChartsField[];
+}
+export declare function getConfigReader(config: MdtChartsConfig, designerConfig: DesignerConfig): BaseConfigReader;
+export declare class TwoDimConfigReader implements BaseConfigReader {
+    private designerConfig;
+    readonly options: MdtChartsTwoDimensionalOptions;
+    constructor(config: MdtChartsConfig, designerConfig: DesignerConfig);
+    getValueFields(): MdtChartsField[];
+    getAxisLabelFormatter(): AxisLabelFormatter;
+}
+export declare class PolarConfigReader implements BaseConfigReader {
+    private options;
+    constructor(config: MdtChartsConfig);
+    getValueFields(): MdtChartsField[];
+}
+export {};

package/lib/model/modelInstance/configReader.js

@@ -0,0 +1,35 @@
+export function getConfigReader(config, designerConfig) {
+    if (config.options.type === "2d")
+        return new TwoDimConfigReader(config, designerConfig);
+    if (config.options.type === "polar")
+        return new PolarConfigReader(config);
+    throw new Error(`Config reader for type "${config.options.type}" not exists`);
+}
+export class TwoDimConfigReader {
+    constructor(config, designerConfig) {
+        this.designerConfig = designerConfig;
+        this.options = config.options;
+    }
+    getValueFields() {
+        const fields = [];
+        this.options.charts.forEach(chart => {
+            fields.push(...chart.data.valueFields);
+        });
+        return fields;
+    }
+    getAxisLabelFormatter() {
+        var _a, _b;
+        if ((_a = this.options.axis.value.labels) === null || _a === void 0 ? void 0 : _a.format)
+            return (_b = this.options.axis.value.labels) === null || _b === void 0 ? void 0 : _b.format;
+        const valueFieldFormat = this.options.charts[0].data.valueFields[0].format;
+        return (v) => this.designerConfig.dataFormat.formatters(v, { type: valueFieldFormat });
+    }
+}
+export class PolarConfigReader {
+    constructor(config) {
+        this.options = config.options;
+    }
+    getValueFields() {
+        return [this.options.chart.data.valueField];
+    }
+}

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

@@ -2,10 +2,10 @@ import { DataScope } from "../../model";
 import { DataRepositoryModel } from "./dataRepository";
 export declare const DEFAULT_MAX_RECORDS_AMOUNT = 50;
 export declare class DataModelInstance {
-    repository: DataRepositoryModel;
-    constructor();
+    readonly repository: DataRepositoryModel;
     private maxRecordsAmount;
     private scope;
+    constructor();
     initMaxRecordsAmount(amount: number): void;
     getMaxRecordsAmount(): number;
     initScope(scope: DataScope): void;

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

@@ -2,7 +2,6 @@ import { DataRepositoryModel } from "./dataRepository";
 export const DEFAULT_MAX_RECORDS_AMOUNT = 50;
 export class DataModelInstance {
     constructor() {
-        //TODO: create dataScopeModel. 
         this.maxRecordsAmount = DEFAULT_MAX_RECORDS_AMOUNT;
         this.repository = new DataRepositoryModel();
     }

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

@@ -1,9 +1,13 @@
-import { MdtChartsDataSource } from "../../../config/config";
+import { DataOptions, MdtChartsDataSource, MdtChartsField } from "../../../config/config";
 export declare class DataRepositoryModel {
     private rawFullSource;
     private scopedFullSource;
     private sourceName;
-    initSourceName(sourceName: string): void;
+    private keyField;
+    private valueFields;
+    initOptions(options: DataOptions, valueFields: MdtChartsField[]): void;
+    getValuesByKeyField(): any[];
+    getBiggestValueAndDecremented(): number[];
     initRawFullSource(rawSource: MdtChartsDataSource): void;
     getRawRows(): import("../../../config/config").MdtChartsDataRow[];
     getFirstRow(): import("../../../config/config").MdtChartsDataRow;

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

@@ -1,6 +1,19 @@
 export class DataRepositoryModel {
-    initSourceName(sourceName) {
-        this.sourceName = sourceName;
+    initOptions(options, valueFields) {
+        this.sourceName = options.dataSource;
+        this.keyField = options.keyField;
+        this.valueFields = valueFields;
+    }
+    getValuesByKeyField() {
+        return this.getRawRows().map(dataRow => dataRow[this.keyField.name]);
+    }
+    getBiggestValueAndDecremented() {
+        const values = [];
+        this.getRawRows().forEach(row => {
+            this.valueFields.forEach(vf => values.push(row[vf.name]));
+        });
+        const biggest = Math.max(...values);
+        return [biggest, biggest - 1];
     }
     initRawFullSource(rawSource) {
         this.rawFullSource = rawSource;

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

@@ -1,8 +1,9 @@
 import { MdtChartsConfig, MdtChartsDataSource } from "../../config/config";
+import { DesignerConfig } from "../../designer/designerConfig";
 import { CanvasModel } from "./canvasModel/canvasModel";
 import { DataModelInstance } from "./dataModel/dataModel";
 export declare class ModelInstance {
-    static create(config: MdtChartsConfig, data: MdtChartsDataSource): ModelInstance;
+    static create(config: MdtChartsConfig, data: MdtChartsDataSource, designerConfig: DesignerConfig): ModelInstance;
     private static initInitialParams;
     canvasModel: CanvasModel;
     dataModel: DataModelInstance;

package/lib/model/modelInstance/modelInstance.js

@@ -1,18 +1,20 @@
 import { CanvasModel } from "./canvasModel/canvasModel";
+import { getConfigReader } from "./configReader";
 import { DataModelInstance } from "./dataModel/dataModel";
 export class ModelInstance {
     constructor() {
         this.canvasModel = new CanvasModel();
         this.dataModel = new DataModelInstance();
     }
-    static create(config, data) {
+    static create(config, data, designerConfig) {
         const modelInstance = new ModelInstance();
-        this.initInitialParams(modelInstance, config, data);
+        this.initInitialParams(modelInstance, config, data, designerConfig);
         return modelInstance;
     }
-    static initInitialParams(modelInstance, config, data) {
+    static initInitialParams(modelInstance, config, data, designerConfig) {
+        const configReader = getConfigReader(config, designerConfig);
         modelInstance.canvasModel.initBlockSize(config.canvas.size);
-        modelInstance.dataModel.repository.initSourceName(config.options.data.dataSource);
+        modelInstance.dataModel.repository.initOptions(config.options.data, configReader.getValueFields());
         modelInstance.dataModel.repository.initRawFullSource(data);
     }
 }

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

@@ -3,9 +3,9 @@ import { DEFAULT_CARD_CHANGE_RANGE } from "./cardsModelService";
 export class CardsChangeService {
     getChangeModel(dataRow, changeOptions) {
         var _a;
-        if (!changeOptions || !((_a = changeOptions.value) === null || _a === void 0 ? void 0 : _a.field))
+        if (!changeOptions || !((_a = changeOptions.value) === null || _a === void 0 ? void 0 : _a.name))
             return void 0;
-        const value = dataRow[changeOptions.value.field];
+        const value = dataRow[changeOptions.value.name];
         return {
             description: changeOptions.description,
             value: Object.assign({}, changeOptions.value),

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

@@ -25,7 +25,7 @@ export class CardsModelService {
     }
     getCardColor(options, modelInstance) {
         const data = modelInstance.dataModel.repository.getFirstRow();
-        const value = data[options.value.field];
+        const value = data[options.value.name];
         return getCardColor(value, options.color);
     }
     getCardsChangeModel(options, modelInstance) {

package/lib/model/notations/intervalModel.js

@@ -28,7 +28,8 @@ export class IntervalModel {
                         start: 0,
                         end: 0
                     },
-                    type: 'datetime'
+                    type: 'datetime',
+                    formatter: null
                 }
             },
             axis: {
@@ -42,7 +43,7 @@ export class IntervalModel {
                     cssClass: 'key-axis',
                     ticks: options.axis.key.ticks,
                     labels: {
-                        maxSize: AxisModel.getLabelSize(designerConfig.canvas.axisLabel.maxSize.main, dataModelRep.getScopedRows().map(d => d[options.data.keyField.name])).width,
+                        maxSize: AxisModel.getLabelSizeLegacy(designerConfig.canvas.axisLabel.maxSize.main, dataModelRep.getScopedRows().map(d => d[options.data.keyField.name])).width,
                         position: AxisModel.getKeyAxisLabelPosition(canvasModel, DataManagerModel.getDataValuesByKeyField(dataModelRep.getScopedFullSource(), options.data.dataSource, options.data.keyField.name).length),
                         visible: true,
                         defaultTooltip: designerConfig.elementsOptions.tooltip.position === 'fixed'
@@ -72,7 +73,7 @@ export class IntervalModel {
             charts: this.getChartsModel(options.chart, designerConfig.chartStyle),
             additionalElements: this.getAdditionalElements(options),
             tooltip: options.tooltip,
-            chartSettings: TwoDimensionalModel.getChartsSettings(designerConfig.canvas.chartOptions.bar)
+            chartSettings: TwoDimensionalModel.getChartsSettings(designerConfig.canvas.chartOptions, options.orientation)
         };
     }
     static getAdditionalElements(options) {

package/lib/model/notations/polar/polarModel.js

@@ -45,7 +45,12 @@ export class PolarModel {
             data: Object.assign({}, chart.data),
             tooltip: chart.tooltip,
             cssClasses: ChartStyleModelService.getCssClasses(0),
-            style: ChartStyleModelService.getChartStyle(dataLength, chartStyleConfig)
+            style: ChartStyleModelService.getChartStyle(dataLength, chartStyleConfig),
+            legend: {
+                markerShape: "default",
+                barViewOptions: { hatch: { on: false }, width: 0 },
+                lineViewOptions: { dashedStyles: { on: false, dashSize: 0, gapSize: 0 }, width: 0 }
+            }
         });
         return chartsModel;
     }

package/lib/model/notations/twoDimensional/styles.d.ts

@@ -0,0 +1,6 @@
+import { ChartLegendModel, LineLikeChartDashOptions, LineLikeChartShapeOptions } from "../../model";
+import { ChartOrientation, MdtChartsLineLikeChartDashedStyles, MdtChartsTwoDimensionalChart } from "../../../config/config";
+import { MdtChartsLineLikeChartShape } from "../../../designer/designerConfig";
+export declare function parseShape(chartOrientation: ChartOrientation, configOptions?: MdtChartsLineLikeChartShape): LineLikeChartShapeOptions;
+export declare function parseDashStyles(configOptions?: MdtChartsLineLikeChartDashedStyles): LineLikeChartDashOptions;
+export declare function getLegendMarkerOptions(chart: MdtChartsTwoDimensionalChart): ChartLegendModel;

package/lib/model/notations/twoDimensional/styles.js

@@ -0,0 +1,41 @@
+import { LineCurveType } from "../../model";
+export function parseShape(chartOrientation, configOptions) {
+    var _a;
+    const curveType = (_a = configOptions === null || configOptions === void 0 ? void 0 : configOptions.curve) === null || _a === void 0 ? void 0 : _a.type;
+    return {
+        curve: {
+            type: parseCurveType(chartOrientation, curveType)
+        }
+    };
+}
+function parseCurveType(chartOrientation, curveType) {
+    if (curveType === "monotone" || curveType == null) {
+        if (chartOrientation === "horizontal")
+            return LineCurveType.monotoneY;
+        return LineCurveType.monotoneX;
+    }
+    return LineCurveType.none;
+}
+export function parseDashStyles(configOptions) {
+    var _a, _b, _c;
+    const DEFAULT_DASH_SIZE_PX = 10;
+    const DEFAULT_GAP_SIZE_PX = 3;
+    return {
+        on: (_a = configOptions === null || configOptions === void 0 ? void 0 : configOptions.on) !== null && _a !== void 0 ? _a : false,
+        dashSize: (_b = configOptions === null || configOptions === void 0 ? void 0 : configOptions.dashSize) !== null && _b !== void 0 ? _b : DEFAULT_DASH_SIZE_PX,
+        gapSize: (_c = configOptions === null || configOptions === void 0 ? void 0 : configOptions.gapSize) !== null && _c !== void 0 ? _c : DEFAULT_GAP_SIZE_PX
+    };
+}
+export function getLegendMarkerOptions(chart) {
+    var _a, _b, _c, _d;
+    const shapeByType = {
+        area: "default",
+        bar: "bar",
+        line: "line"
+    };
+    return {
+        markerShape: shapeByType[chart.type],
+        barViewOptions: { hatch: { on: (_c = (_b = (_a = chart.barStyles) === null || _a === void 0 ? void 0 : _a.hatch) === null || _b === void 0 ? void 0 : _b.on) !== null && _c !== void 0 ? _c : false }, width: 10 },
+        lineViewOptions: { dashedStyles: parseDashStyles((_d = chart.lineStyles) === null || _d === void 0 ? void 0 : _d.dash), width: 30 }
+    };
+}

package/lib/model/notations/twoDimensionalModel.d.ts

@@ -1,9 +1,10 @@
-import { ChartOrientation, MdtChartsTwoDimensionalChart, MdtChartsTwoDimensionalOptions } from "../../config/config";
-import { BarOptionsCanvas, DesignerConfig } from "../../designer/designerConfig";
+import { ChartOrientation, MdtChartsTwoDimensionalChart } from "../../config/config";
+import { ChartOptionsCanvas, DesignerConfig } from "../../designer/designerConfig";
 import { TwoDimensionalOptionsModel, TwoDimChartElementsSettings } from "../model";
+import { TwoDimConfigReader } from "../modelInstance/configReader";
 import { ModelInstance } from "../modelInstance/modelInstance";
 export declare class TwoDimensionalModel {
-    static getOptions(options: MdtChartsTwoDimensionalOptions, designerConfig: DesignerConfig, modelInstance: ModelInstance): TwoDimensionalOptionsModel;
+    static getOptions(configReader: TwoDimConfigReader, designerConfig: DesignerConfig, modelInstance: ModelInstance): TwoDimensionalOptionsModel;
     static getChartsEmbeddedLabelsFlag(charts: MdtChartsTwoDimensionalChart[], chartOrientation: ChartOrientation): boolean;
     /**
      * Сортирует список чартов в порядке: area - bar - line.
@@ -11,11 +12,10 @@ export declare class TwoDimensionalModel {
      * @param charts Чарты из конфига
      */
     static sortCharts(charts: MdtChartsTwoDimensionalChart[]): void;
-    static getChartsSettings(barSettings: BarOptionsCanvas): TwoDimChartElementsSettings;
+    static getChartsSettings(chartOptions: ChartOptionsCanvas, chartOrientation: ChartOrientation): TwoDimChartElementsSettings;
     private static getChartsModel;
     private static findChartsWithEmbeddedKeyLabels;
     private static getEmbeddedLabelType;
     private static getAdditionalElements;
     private static getChartsByType;
-    static getChartsValueFieldsAmount(charts: MdtChartsTwoDimensionalChart[]): number[];
 }

package/lib/model/notations/twoDimensionalModel.js

@@ -3,12 +3,14 @@ import { TwoDimensionalChartStyleModel } from "../chartStyleModel/TwoDimensional
 import { AxisModel } from "../featuresModel/axisModel";
 import { ScaleAxisRecalcer } from "../featuresModel/scaleModel/scaleAxisRecalcer";
 import { ScaleModel } from "../featuresModel/scaleModel/scaleModel";
+import { getLegendMarkerOptions, parseDashStyles, parseShape } from "./twoDimensional/styles";
 export class TwoDimensionalModel {
-    static getOptions(options, designerConfig, modelInstance) {
+    static getOptions(configReader, designerConfig, modelInstance) {
+        const options = configReader.options;
         const canvasModel = modelInstance.canvasModel;
         const dataModelRep = modelInstance.dataModel.repository;
         const scaleModel = new ScaleModel();
-        const scaleMarginRecalcer = new ScaleAxisRecalcer(() => scaleModel.getScaleLinear(options, dataModelRep.getScopedRows(), canvasModel));
+        const scaleMarginRecalcer = new ScaleAxisRecalcer(() => scaleModel.getScaleLinear(options, dataModelRep.getScopedRows(), canvasModel, configReader));
         scaleMarginRecalcer.recalculateMargin(canvasModel, options.orientation, options.axis.key);
         const scaleValueInfo = scaleMarginRecalcer.getScaleValue();
         return {
@@ -29,7 +31,7 @@ export class TwoDimensionalModel {
             charts: this.getChartsModel(options.charts, options.orientation, designerConfig.chartStyle),
             additionalElements: this.getAdditionalElements(options),
             tooltip: options.tooltip,
-            chartSettings: this.getChartsSettings(designerConfig.canvas.chartOptions.bar)
+            chartSettings: this.getChartsSettings(designerConfig.canvas.chartOptions, options.orientation)
         };
     }
     static getChartsEmbeddedLabelsFlag(charts, chartOrientation) {
@@ -47,9 +49,11 @@ export class TwoDimensionalModel {
         const chartOrder = ['area', 'bar', 'line'];
         charts.sort((chart1, chart2) => chartOrder.indexOf(chart1.type) - chartOrder.indexOf(chart2.type));
     }
-    static getChartsSettings(barSettings) {
+    static getChartsSettings(chartOptions, chartOrientation) {
+        var _a;
         return {
-            bar: Object.assign({}, barSettings)
+            bar: Object.assign({}, chartOptions.bar),
+            lineLike: { shape: parseShape(chartOrientation, (_a = chartOptions.line) === null || _a === void 0 ? void 0 : _a.shape) }
         };
     }
     static getChartsModel(charts, chartOrientation, chartStyleConfig) {
@@ -57,6 +61,7 @@ export class TwoDimensionalModel {
         this.sortCharts(charts);
         const chartsModel = [];
         charts.forEach((chart, index) => {
+            var _a, _b, _c, _d;
             chartsModel.push({
                 type: chart.type,
                 isSegmented: chart.isSegmented,
@@ -66,6 +71,9 @@ export class TwoDimensionalModel {
                 style: styleModel.getChartStyle(chart, index),
                 embeddedLabels: this.getEmbeddedLabelType(chart, chartOrientation),
                 markersOptions: chart.markers,
+                lineViewOptions: { dashedStyles: parseDashStyles((_a = chart.lineStyles) === null || _a === void 0 ? void 0 : _a.dash) },
+                barViewOptions: { hatch: { on: (_d = (_c = (_b = chart.barStyles) === null || _b === void 0 ? void 0 : _b.hatch) === null || _c === void 0 ? void 0 : _c.on) !== null && _d !== void 0 ? _d : false } },
+                legend: getLegendMarkerOptions(chart),
                 index
             });
         });
@@ -92,7 +100,4 @@ export class TwoDimensionalModel {
     static getChartsByType(charts, type) {
         return charts.filter(chart => chart.type === type);
     }
-    static getChartsValueFieldsAmount(charts) {
-        return charts.map(chart => chart.data.valueFields.length);
-    }
 }

package/lib/style/charts-main.css

@@ -97,6 +97,9 @@
     white-space: nowrap;
     text-overflow: ellipsis;
 }
+.legend-marker {
+    margin-right: 8px;
+}
 .legend-circle {
     position: relative;
     bottom: -1px;

package/lib/style/charts-main.less

@@ -97,6 +97,9 @@
     white-space: nowrap;
     text-overflow: ellipsis;
 }
+.legend-marker {
+    margin-right: 8px;
+}
 .legend-circle {
     position: relative;
     bottom: -1px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdt-charts",
-  "version": "1.13.2",
+  "version": "1.14.0",
   "description": "",
   "main": "lib/main.js",
   "scripts": {
@@ -31,9 +31,7 @@
     "typescript": "^4.1.3",
     "webpack": "^5.10.1",
     "webpack-bundle-analyzer": "^4.4.0",
-    "webpack-cli": "^4.2.0"
-  },
-  "dependencies": {
+    "webpack-cli": "^4.2.0",
     "@types/chroma-js": "^2.1.3",
     "@types/d3-array": "^2.9.0",
     "@types/d3-axis": "^2.0.0",
@@ -43,7 +41,9 @@
     "@types/d3-scale": "^3.2.2",
     "@types/d3-selection": "^2.0.0",
     "@types/d3-shape": "^2.0.0",
-    "@types/d3-transition": "^2.0.0",
+    "@types/d3-transition": "^2.0.0"
+  },
+  "dependencies": {
     "chroma-js": "^2.1.1",
     "d3-array": "^2.11.0",
     "d3-axis": "^2.0.0",

package/lib/engine/contentManager.d.ts

@@ -1,9 +0,0 @@
-import { Model } from "../model/model";
-import Engine from "./engine";
-import { Block } from "./block/block";
-import { MdtChartsDataSource } from "../config/config";
-export declare class ContentManager {
-    static render(model: Model, data: MdtChartsDataSource, engine: Engine): void;
-    static updateData(block: Block, model: Model, newData: MdtChartsDataSource): void;
-    static updateColors(engine: Engine, model: Model): void;
-}

package/lib/engine/contentManager.js

@@ -1,29 +0,0 @@
-import { TwoDimensionalManager } from "./twoDimensionalNotation/twoDimensionalManager";
-import { PolarManager } from "./polarNotation/polarManager";
-import { IntervalManager } from "./intervalNotation/intervalManager";
-export class ContentManager {
-    static render(model, data, engine) {
-        if (model.options.type === '2d')
-            TwoDimensionalManager.render(engine, model);
-        else if (model.options.type === 'polar')
-            PolarManager.render(engine, model);
-        else if (model.options.type === 'interval')
-            IntervalManager.render(engine.block, model, data);
-    }
-    static updateData(block, model, newData) {
-        if (model.options.type === '2d') {
-            TwoDimensionalManager.updateData(block, model, newData);
-        }
-        else if (model.options.type === 'polar') {
-            PolarManager.update(block, model, newData);
-        }
-    }
-    static updateColors(engine, model) {
-        if (model.options.type === '2d') {
-            TwoDimensionalManager.updateColors(engine.block, model);
-        }
-        else if (model.options.type === 'polar') {
-            PolarManager.updateColors(engine.block, model);
-        }
-    }
-}

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

@@ -1,11 +0,0 @@
-import { MarginSide } from "./canvasModel";
-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/marginModelService.js

@@ -1,26 +0,0 @@
-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);
-    }
-}