mdt-charts 1.21.2 → 1.23.0

package/lib/model/notations/twoDimensionalModel.js

@@ -3,20 +3,19 @@ import { TwoDimensionalChartStyleModel } from "../chartStyleModel/twoDimensional
 import { AxisModel } from "../featuresModel/axisModel";
 import { ScaleAxisRecalcer } from "../featuresModel/scaleModel/scaleAxisRecalcer";
 import { ScaleModel } from "../featuresModel/scaleModel/scaleModel";
-import { getAreaViewOptions, getLegendMarkerOptions, parseDashStyles, parseShape } from "./twoDimensional/styles";
+import { getAreaViewOptions, getBarViewOptions, getLegendMarkerOptions, LINE_CHART_DEFAULT_WIDTH, parseDashStyles, parseShape } from "./twoDimensional/styles";
 import { getResolvedTitle } from "../../model/featuresModel/titleModel";
-import { calculateValueLabelAlignment, getValueLabelX, getValueLabelY } from "../../model/featuresModel/valueLabelsModel/valueLabelsModel";
+import { calculateValueLabelAlignment, getValueLabelX, getValueLabelY, hasCollisionLeftSide, hasCollisionRightSide, shiftCoordinateXLeft, shiftCoordinateXRight } from "../../model/featuresModel/valueLabelsModel/valueLabelsModel";
 import { TwoDimensionalModelHelper } from "../helpers/twoDimensionalModelHelper";
 export class TwoDimensionalModel {
     static getOptions(configReader, designerConfig, modelInstance) {
-        var _a;
-        let secondaryScaleValueInfo;
         const options = configReader.options;
         const canvasModel = modelInstance.canvasModel;
         const scaleModel = new ScaleModel();
         const scaleMarginRecalcer = new ScaleAxisRecalcer(() => scaleModel.getScaleLinear(options, modelInstance.dataModel.repository.getScopedRows(), canvasModel, configReader));
         scaleMarginRecalcer.recalculateMargin(canvasModel, options.orientation, options.axis.key);
         const scaleValueInfo = scaleMarginRecalcer.getScaleValue();
+        let secondaryScaleValueInfo;
         if (configReader.containsSecondaryAxis()) {
             const secondaryScaleMarginRecalcer = new ScaleAxisRecalcer(() => scaleModel.getScaleSecondaryLinear(options, modelInstance.dataModel.repository.getScopedRows(), canvasModel, configReader));
             secondaryScaleMarginRecalcer.recalculateMargin(canvasModel, options.orientation, options.axis.key);
@@ -29,7 +28,7 @@ export class TwoDimensionalModel {
             title: getResolvedTitle(options.title, modelInstance.dataModel.repository.getRawRows()),
             selectable: !!options.selectable,
             orient: options.orientation,
-            scale: Object.assign({ key: scaleModel.getScaleKey(modelInstance.dataModel.getAllowableKeys(), options.orientation, canvasModel, options.charts, this.getChartsByType(options.charts, 'bar')), value: scaleValueInfo.scale }, (configReader.containsSecondaryAxis() && { valueSecondary: secondaryScaleValueInfo.scale })),
+            scale: Object.assign({ key: scaleModel.getScaleKey(modelInstance.dataModel.getAllowableKeys(), options.orientation, canvasModel, options.charts, this.getChartsByTypes(options.charts, ['bar', 'dot'])), value: scaleValueInfo.scale }, (configReader.containsSecondaryAxis() && { valueSecondary: secondaryScaleValueInfo.scale })),
             axis: Object.assign({ key: keyAxis, value: AxisModel.getMainValueAxis(options.orientation, options.axis.value.position, options.axis.value, designerConfig.canvas.axisLabel, canvasModel) }, (configReader.containsSecondaryAxis() && { valueSecondary: AxisModel.getSecondaryValueAxis(options.orientation, options.axis.value.position, options.axis.valueSecondary, designerConfig.canvas.axisLabel, canvasModel) })),
             type: options.type,
             data: Object.assign({}, options.data),
@@ -37,7 +36,7 @@ export class TwoDimensionalModel {
             additionalElements: this.getAdditionalElements(options),
             tooltip: options.tooltip,
             chartSettings: this.getChartsSettings(designerConfig.canvas.chartOptions, options.orientation),
-            valueLabels: (_a = options.valueLabels) !== null && _a !== void 0 ? _a : { collision: { mode: "none" } },
+            valueLabels: this.getValueLabels(options.valueLabels, canvasModel),
             defs: {
                 gradients: TwoDimensionalModelHelper.getGradientDefs(charts, keyAxis.orient, options.orientation)
             }
@@ -55,7 +54,7 @@ export class TwoDimensionalModel {
      * @param charts Чарты из конфига
      */
     static sortCharts(charts) {
-        const chartOrder = ['area', 'bar', 'line'];
+        const chartOrder = ['area', 'bar', 'line', 'dot'];
         charts.sort((chart1, chart2) => chartOrder.indexOf(chart1.type) - chartOrder.indexOf(chart2.type));
     }
     static getChartsSettings(chartOptions, chartOrientation) {
@@ -70,9 +69,17 @@ export class TwoDimensionalModel {
         this.sortCharts(charts);
         const chartsModel = [];
         charts.forEach((chart, index) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
             const style = styleModel.getChartStyle(chart, index);
-            chartsModel.push(Object.assign(Object.assign({ type: chart.type, isSegmented: chart.isSegmented, data: Object.assign({}, chart.data), tooltip: chart.tooltip, cssClasses: ChartStyleModelService.getCssClasses(index), style, embeddedLabels: this.getEmbeddedLabelType(chart, chartOrientation), markersOptions: {
+            chartsModel.push({
+                type: chart.type,
+                isSegmented: chart.isSegmented,
+                data: Object.assign({}, chart.data),
+                tooltip: { show: true },
+                cssClasses: ChartStyleModelService.getCssClasses(index),
+                style,
+                embeddedLabels: this.getEmbeddedLabelType(chart, chartOrientation),
+                markersOptions: {
                     show: ({ row, valueFieldName }) => TwoDimensionalModelHelper.shouldMarkerShow(chart, dataModelRep.getRawRows(), valueFieldName, row, keyFieldName),
                     styles: {
                         highlighted: {
@@ -85,19 +92,33 @@ export class TwoDimensionalModel {
                             }
                         }
                     }
-                }, lineLikeViewOptions: {
+                },
+                lineLikeViewOptions: {
                     dashedStyles: parseDashStyles((_k = chart.lineStyles) === null || _k === void 0 ? void 0 : _k.dash),
+                    strokeWidth: (_m = (_l = chart.lineStyles) === null || _l === void 0 ? void 0 : _l.width) !== null && _m !== void 0 ? _m : LINE_CHART_DEFAULT_WIDTH,
                     renderForKey: (dataRow, valueFieldName) => dataRow[valueFieldName] !== null && dataRow[valueFieldName] !== undefined
-                }, barViewOptions: { hatch: { on: (_o = (_m = (_l = chart.barStyles) === null || _l === void 0 ? void 0 : _l.hatch) === null || _m === void 0 ? void 0 : _m.on) !== null && _o !== void 0 ? _o : false } }, legend: getLegendMarkerOptions(chart), index }, (((_p = chart.valueLabels) === null || _p === void 0 ? void 0 : _p.on) && {
+                },
+                barViewOptions: getBarViewOptions(chart, keyAxisOrient),
+                legend: getLegendMarkerOptions(chart),
+                index,
                 valueLabels: {
-                    show: true,
+                    show: (_p = (_o = chart.valueLabels) === null || _o === void 0 ? void 0 : _o.on) !== null && _p !== void 0 ? _p : false,
                     handleX: (scaledValue) => getValueLabelX(scaledValue, keyAxisOrient, canvasModel.getMargin()),
                     handleY: (scaledValue) => getValueLabelY(scaledValue, keyAxisOrient, canvasModel.getMargin()),
                     textAnchor: calculateValueLabelAlignment(keyAxisOrient).textAnchor,
                     dominantBaseline: calculateValueLabelAlignment(keyAxisOrient).dominantBaseline,
                     format: configReader.getValueLabelFormatterForChart(index),
+                },
+                areaViewOptions: getAreaViewOptions(chart, index, style),
+                dotViewOptions: {
+                    shape: {
+                        type: "line",
+                        handleEndCoordinate: (v) => v + 2,
+                        handleStartCoordinate: (v) => v - 2,
+                        width: (_s = (_r = (_q = chart.dotLikeStyles) === null || _q === void 0 ? void 0 : _q.shape) === null || _r === void 0 ? void 0 : _r.width) !== null && _s !== void 0 ? _s : 2
+                    }
                 }
-            })), { areaViewOptions: getAreaViewOptions(chart, index, style) }));
+            });
         });
         return chartsModel;
     }
@@ -115,11 +136,40 @@ export class TwoDimensionalModel {
         return 'none';
     }
     static getAdditionalElements(options) {
+        var _a, _b;
+        const { flag, styles } = options.additionalElements.gridLine;
         return {
-            gridLine: options.additionalElements.gridLine
+            gridLine: {
+                flag,
+                styles: {
+                    dash: { on: (_b = (_a = styles === null || styles === void 0 ? void 0 : styles.dash) === null || _a === void 0 ? void 0 : _a.on) !== null && _b !== void 0 ? _b : false }
+                }
+            }
         };
     }
-    static getChartsByType(charts, type) {
-        return charts.filter(chart => chart.type === type);
+    static getChartsByTypes(charts, types) {
+        return charts.filter(chart => types.includes(chart.type));
+    }
+    static getValueLabels(valueLabels, canvasModel) {
+        var _a;
+        return {
+            collision: {
+                otherValueLables: (_a = valueLabels === null || valueLabels === void 0 ? void 0 : valueLabels.collision.otherValueLabels) !== null && _a !== void 0 ? _a : {
+                    mode: 'none'
+                },
+                chartBlock: {
+                    left: {
+                        mode: 'shift',
+                        hasCollision: (labelClientRect) => hasCollisionLeftSide(labelClientRect, canvasModel.getMargin()),
+                        shiftCoordinate: (labelClientRect) => shiftCoordinateXRight(labelClientRect),
+                    },
+                    right: {
+                        mode: 'shift',
+                        hasCollision: (labelClientRect) => hasCollisionRightSide(labelClientRect, canvasModel.getBlockSize(), canvasModel.getMargin()),
+                        shiftCoordinate: (labelClientRect) => shiftCoordinateXLeft(labelClientRect),
+                    }
+                }
+            },
+        };
     }
 }

package/lib/style/charts-main.css

@@ -11,7 +11,6 @@
 }
 .line {
     fill: none;
-    stroke-width: 4;
 }
 
 .area-border-line {
@@ -55,6 +54,9 @@
     display: flex;
     height: 100%;
 }
+.legend-block-centered {
+    justify-content: center;
+}
 .legend-block-column {
     flex-direction: column;
 }
@@ -62,9 +64,6 @@
     flex-direction: row;
     flex-wrap: wrap;
 }
-.legend-block-centered {
-    justify-content: center;
-}
 .legend-item {
     cursor: default;
     transition: opacity 0.1s;
@@ -103,6 +102,9 @@
     overflow: hidden;
     line-height: normal;
 }
+.legend-2d-label {
+    font-weight: 500;
+}
 .legend-label-nowrap {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -203,10 +205,10 @@
 
 /*========================================================================= Additional */
 .mdt-charts-axis .domain {
-    stroke: #D2D2D2;
+    stroke: rgba(231, 229, 228, 0.8);
 }
 .mdt-charts-axis .tick line:first-of-type {
-    stroke: #D2D2D2;
+    stroke: rgba(231, 229, 228, 0.8);
 }
 
 /* Aggregator */
@@ -229,8 +231,7 @@
 
 /* Grid */
 .grid-line {
-    stroke: #D2D2D2;
-    stroke-dasharray: 3;
+    stroke: rgba(231, 229, 228, 0.8);
 }
 
 /* Record overflow */

package/lib/style/charts-main.less

@@ -11,7 +11,6 @@
 }
 .line {
     fill: none;
-    stroke-width: 4;
 }
 
 .area-border-line {
@@ -55,6 +54,9 @@
     display: flex;
     height: 100%;
 }
+.legend-block-centered {
+    justify-content: center;
+}
 .legend-block-column {
     flex-direction: column;
 }
@@ -62,9 +64,6 @@
     flex-direction: row;
     flex-wrap: wrap;
 }
-.legend-block-centered {
-    justify-content: center;
-}
 .legend-item {
     cursor: default;
     transition: opacity 0.1s;
@@ -103,6 +102,9 @@
     overflow: hidden;
     line-height: normal;
 }
+.legend-2d-label {
+    font-weight: 500;
+}
 .legend-label-nowrap {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -203,10 +205,10 @@
 
 /*========================================================================= Additional */
 .mdt-charts-axis .domain {
-    stroke: #D2D2D2;
+    stroke: rgba(231, 229, 228, 0.8);
 }
 .mdt-charts-axis .tick line:first-of-type {
-    stroke: #D2D2D2;
+    stroke: rgba(231, 229, 228, 0.8);
 }
 
 /* Aggregator */
@@ -229,8 +231,7 @@
 
 /* Grid */
 .grid-line {
-    stroke: #D2D2D2;
-    stroke-dasharray: 3;
+    stroke: rgba(231, 229, 228, 0.8);
 }
 
 /* Record overflow */

package/package.json

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