mdt-charts 1.20.0 → 1.21.0

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

@@ -1,7 +1,9 @@
-import { ChartLegendModel, LineLikeChartDashOptions, LineLikeChartShapeOptions } from "../../model";
+import { AreaChartViewOptions, ChartLegendModel, ChartStyle, GradientId, LineLikeChartDashOptions, LineLikeChartShapeOptions } from "../../model";
 import { ChartOrientation, MdtChartsLineLikeChartDashedStyles, MdtChartsTwoDimensionalChart, TwoDimensionalChartType } 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;
 export declare function getWidthOfLegendMarkerByType(chartType: TwoDimensionalChartType): number;
+export declare function getAreaViewOptions(chart: MdtChartsTwoDimensionalChart, chartIndex: number, style: ChartStyle): AreaChartViewOptions;
+export declare function getGradientId(chartIndex: number, subIndex: number): GradientId;

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

@@ -48,3 +48,23 @@ export function getWidthOfLegendMarkerByType(chartType) {
     if (chartType === "area")
         return styledElementValues.defaultLegendMarkerSizes.widthPx;
 }
+export function getAreaViewOptions(chart, chartIndex, style) {
+    var _a, _b, _c, _d, _e;
+    let gradientIds = [];
+    for (let index = 0; index < style.elementColors.length; index++) {
+        gradientIds.push(getGradientId(chartIndex, index));
+    }
+    const fill = ((_b = (_a = chart.areaStyles) === null || _a === void 0 ? void 0 : _a.gradient) === null || _b === void 0 ? void 0 : _b.on) ? { type: "gradient", ids: gradientIds }
+        : { type: "paletteColor" };
+    const borderLine = {
+        on: (_e = (_d = (_c = chart.areaStyles) === null || _c === void 0 ? void 0 : _c.borderLine) === null || _d === void 0 ? void 0 : _d.on) !== null && _e !== void 0 ? _e : false,
+        colorStyle: {
+            elementColors: style.elementColors,
+            opacity: 1
+        }
+    };
+    return { fill, borderLine };
+}
+export function getGradientId(chartIndex, subIndex) {
+    return `gradient-chart-${chartIndex}-sub-${subIndex}`;
+}

package/lib/model/notations/twoDimensionalModel.js

@@ -3,14 +3,16 @@ 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";
+import { getAreaViewOptions, getLegendMarkerOptions, parseDashStyles, parseShape } from "./twoDimensional/styles";
 import { getResolvedTitle } from "../../model/featuresModel/titleModel";
+import { calculateValueLabelAlignment, getValueLabelX, getValueLabelY } 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 resolvedTitle = getResolvedTitle(options.title, modelInstance.dataModel.repository.getRawRows());
         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);
@@ -20,19 +22,25 @@ export class TwoDimensionalModel {
             secondaryScaleMarginRecalcer.recalculateMargin(canvasModel, options.orientation, options.axis.key);
             secondaryScaleValueInfo = secondaryScaleMarginRecalcer.getScaleValue();
         }
+        const keyAxis = AxisModel.getKeyAxis(options, modelInstance.dataModel.repository.getScopedFullSource(), designerConfig.canvas.axisLabel, canvasModel, designerConfig.elementsOptions.tooltip, () => scaleValueInfo.scaleFn(0));
+        const charts = this.getChartsModel(options.charts, configReader, options.orientation, designerConfig, modelInstance.dataModel.repository, keyAxis.orient, canvasModel, options.data.keyField.name);
         return {
             legend: canvasModel.legendCanvas.getModel(),
-            title: resolvedTitle,
+            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 })),
-            axis: Object.assign({ key: AxisModel.getKeyAxis(options, modelInstance.dataModel.repository.getScopedFullSource(), designerConfig.canvas.axisLabel, canvasModel, designerConfig.elementsOptions.tooltip, () => scaleValueInfo.scaleFn(0)), 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) })),
+            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),
-            charts: this.getChartsModel(options.charts, options.orientation, designerConfig, modelInstance.dataModel.repository),
+            charts,
             additionalElements: this.getAdditionalElements(options),
             tooltip: options.tooltip,
-            chartSettings: this.getChartsSettings(designerConfig.canvas.chartOptions, options.orientation)
+            chartSettings: this.getChartsSettings(designerConfig.canvas.chartOptions, options.orientation),
+            valueLabels: (_a = options.valueLabels) !== null && _a !== void 0 ? _a : { collision: { mode: "none" } },
+            defs: {
+                gradients: TwoDimensionalModelHelper.getGradientDefs(charts, keyAxis.orient, options.orientation)
+            }
         };
     }
     static getChartsEmbeddedLabelsFlag(charts, chartOrientation) {
@@ -57,22 +65,15 @@ export class TwoDimensionalModel {
             lineLike: { shape: parseShape(chartOrientation, (_a = chartOptions.line) === null || _a === void 0 ? void 0 : _a.shape) }
         };
     }
-    static getChartsModel(charts, chartOrientation, designerConfig, dataModelRep) {
+    static getChartsModel(charts, configReader, chartOrientation, designerConfig, dataModelRep, keyAxisOrient, canvasModel, keyFieldName) {
         const styleModel = new TwoDimensionalChartStyleModel(charts, designerConfig.chartStyle);
         this.sortCharts(charts);
         const chartsModel = [];
         charts.forEach((chart, index) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-            chartsModel.push({
-                type: chart.type,
-                isSegmented: chart.isSegmented,
-                data: Object.assign({}, chart.data),
-                tooltip: chart.tooltip,
-                cssClasses: ChartStyleModelService.getCssClasses(index),
-                style: styleModel.getChartStyle(chart, index),
-                embeddedLabels: this.getEmbeddedLabelType(chart, chartOrientation),
-                markersOptions: {
-                    show: dataModelRep.getScopedRows().length === 1 ? true : chart.markers.show,
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+            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: {
+                    show: ({ row, valueFieldName }) => TwoDimensionalModelHelper.shouldMarkerShow(chart, dataModelRep.getRawRows(), valueFieldName, row, keyFieldName),
                     styles: {
                         highlighted: {
                             size: { radius: (_c = (_b = (_a = designerConfig.canvas.markers) === null || _a === void 0 ? void 0 : _a.highlighted) === null || _b === void 0 ? void 0 : _b.radius) !== null && _c !== void 0 ? _c : 4, borderSize: '3.5px' }
@@ -84,15 +85,19 @@ export class TwoDimensionalModel {
                             }
                         }
                     }
-                },
-                lineViewOptions: {
+                }, lineLikeViewOptions: {
                     dashedStyles: parseDashStyles((_k = chart.lineStyles) === null || _k === void 0 ? void 0 : _k.dash),
                     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
-            });
+                }, 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) && {
+                valueLabels: {
+                    show: true,
+                    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) }));
         });
         return chartsModel;
     }

package/lib/style/charts-main.css

@@ -1,4 +1,6 @@
-@import './css-vars.css';
+:root {
+	--chart-base-font-size: 13px;
+}
 
 .wrapper {
     margin: 0 auto;
@@ -11,6 +13,12 @@
     fill: none;
     stroke-width: 4;
 }
+
+.area-border-line {
+    fill: none;
+    stroke-width: 2;
+}
+
 .donut-block * {
     transition: filter 0.15s;
 }
@@ -157,7 +165,7 @@
     border-radius: 50%;
 }
 .tooltip-text-item {
-    font-family: "Roboto" sans-serif;
+    font-family: "Roboto", sans-serif;
     font-style: normal;
     width: 100%;
     flex: 1;
@@ -276,3 +284,10 @@
     width: 100%;
     height: 100%;
 }
+
+/* Value Labels */
+.mdt-charts-value-label {
+    opacity: 0.5;
+    font-size: 10px;
+    letter-spacing: -0.4px;
+}

package/lib/style/charts-main.less

@@ -1,4 +1,6 @@
-@import (inline) './css-vars.css';
+:root {
+	--chart-base-font-size: 13px;
+}
 
 .wrapper {
     margin: 0 auto;
@@ -11,6 +13,12 @@
     fill: none;
     stroke-width: 4;
 }
+
+.area-border-line {
+    fill: none;
+    stroke-width: 2;
+}
+
 .donut-block * {
     transition: filter 0.15s;
 }
@@ -157,7 +165,7 @@
     border-radius: 50%;
 }
 .tooltip-text-item {
-    font-family: "Roboto" sans-serif;
+    font-family: "Roboto", sans-serif;
     font-style: normal;
     width: 100%;
     flex: 1;
@@ -276,3 +284,10 @@
     width: 100%;
     height: 100%;
 }
+
+/* Value Labels */
+.mdt-charts-value-label {
+    opacity: 0.5;
+    font-size: 10px;
+    letter-spacing: -0.4px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdt-charts",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "description": "",
   "main": "lib/main.js",
   "scripts": {
@@ -10,7 +10,7 @@
     "test": "jest",
     "build-lib": "shx rm -rf lib && npm run build-ts && npm run build-style",
     "build-ts": "npx tsc -p tsconfig.production.json",
-    "build-style": "shx mkdir lib/style && shx cp src/style/css-vars.css lib/style && shx cp src/style/charts-main.css lib/style && shx cp src/style/charts-main.less lib/style"
+    "build-style": "shx mkdir lib/style && shx cp src/style/charts-main.css lib/style && shx cp src/style/charts-main.css lib/style/charts-main.less"
   },
   "homepage": "https://github.com/VishulaKnow/charts",
   "author": "",

package/lib/style/css-vars.css

@@ -1,3 +0,0 @@
-:root {
-	--chart-base-font-size: 13px;
-}