mdt-charts 1.30.2 → 1.32.0

package/lib/model/notations/twoDimensionalModel.js

@@ -1,13 +1,15 @@
 import { ChartStyleModelService } from "../chartStyleModel/chartStyleModel";
 import { TwoDimensionalChartStyleModel } from "../chartStyleModel/twoDimensionalChartStyleModel";
-import { AxisModel } from "../featuresModel/axisModel";
+import { AxisModel } from "../featuresModel/axis/axisModel";
 import { ScaleAxisRecalcer } from "../featuresModel/scaleModel/scaleAxisRecalcer";
 import { ScaleModel } from "../featuresModel/scaleModel/scaleModel";
 import { calculateBarIndexes, getAreaViewOptions, getBarViewOptions, getLegendMarkerOptions, LINE_CHART_DEFAULT_WIDTH, parseDashStyles, parseShape } from "./twoDimensional/styles";
-import { calculateValueLabelAlignment, ValueLabelCoordinateCalculator } from "../../model/featuresModel/valueLabelsModel/valueLabelsModel";
+import { calculateValueLabelAlignment, handleScaledValue, ValueLabelCoordinateCalculator } from "../../model/featuresModel/valueLabelsModel/valueLabelsModel";
 import { TwoDimensionalModelHelper } from "../helpers/twoDimensionalModelHelper";
 import { TitleConfigReader } from "../modelInstance/titleConfigReader";
 import { createRecordOverflowModel } from "../featuresModel/recordOverflowModel/recordOverflowModel";
+import { TwoDimTooltipContentGenerator } from "../featuresModel/tooltipModel/tooltipContentModel";
+import { TwoDimInitialRowsProvider } from "../featuresModel/tooltipModel/contentByNotations/twoDimInitialRowsProvider";
 export class TwoDimensionalModel {
     static getOptions(configReader, designerConfig, modelInstance) {
         const options = configReader.options;
@@ -42,7 +44,18 @@ export class TwoDimensionalModel {
             data: Object.assign({}, options.data),
             charts,
             additionalElements: this.getAdditionalElements(options),
-            tooltip: options.tooltip,
+            tooltip: {
+                getContent: (keyFieldValue) => {
+                    const generator = new TwoDimTooltipContentGenerator({
+                        datasource: modelInstance.dataModel.repository.getRawRows(),
+                        keyFieldName: options.data.keyField.name,
+                        publicOptions: options.tooltip,
+                        initialRowsProvider: new TwoDimInitialRowsProvider({ chartsInfo: charts }),
+                        valueGlobalFormatter: designerConfig.dataFormat.formatters
+                    });
+                    return generator.generateContent(keyFieldValue);
+                }
+            },
             chartSettings: this.getChartsSettings(designerConfig.canvas.chartOptions, options.orientation),
             valueLabels: TwoDimensionalModelHelper.getValueLabels(options.valueLabels, canvasModel, options.orientation, configReader.getValueLabelsStyleModel()),
             defs: {
@@ -82,15 +95,14 @@ export class TwoDimensionalModel {
         const styleModel = new TwoDimensionalChartStyleModel(charts, designerConfig.chartStyle);
         const chartsModel = [];
         charts.forEach((chart, index) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
             const style = styleModel.getChartStyle(chart, index);
-            const valueLabelsCoordinateCalculator = new ValueLabelCoordinateCalculator((_b = (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.position) === null || _b === void 0 ? void 0 : _b.mode, keyAxisOrient, canvasModel.getMargin());
-            const valueLabelsAlignment = calculateValueLabelAlignment(keyAxisOrient, (_d = (_c = chart.valueLabels) === null || _c === void 0 ? void 0 : _c.position) === null || _d === void 0 ? void 0 : _d.mode, (_e = chart.valueLabels) === null || _e === void 0 ? void 0 : _e.rotation);
+            const valueLabelsCoordinateCalculator = new ValueLabelCoordinateCalculator((_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.position, keyAxisOrient, canvasModel.getMargin());
+            const valueLabelsAlignment = calculateValueLabelAlignment(keyAxisOrient, (_c = (_b = chart.valueLabels) === null || _b === void 0 ? void 0 : _b.position) === null || _c === void 0 ? void 0 : _c.mode, (_d = chart.valueLabels) === null || _d === void 0 ? void 0 : _d.rotation);
             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),
@@ -99,44 +111,48 @@ export class TwoDimensionalModel {
                     styles: {
                         highlighted: {
                             size: {
-                                radius: (_h = (_g = (_f = designerConfig.canvas.markers) === null || _f === void 0 ? void 0 : _f.highlighted) === null || _g === void 0 ? void 0 : _g.radius) !== null && _h !== void 0 ? _h : 4,
+                                radius: (_g = (_f = (_e = designerConfig.canvas.markers) === null || _e === void 0 ? void 0 : _e.highlighted) === null || _f === void 0 ? void 0 : _f.radius) !== null && _g !== void 0 ? _g : 4,
                                 borderSize: "3.5px"
                             }
                         },
                         normal: {
                             size: {
-                                radius: (_l = (_k = (_j = designerConfig.canvas.markers) === null || _j === void 0 ? void 0 : _j.normal) === null || _k === void 0 ? void 0 : _k.radius) !== null && _l !== void 0 ? _l : 3,
-                                borderSize: `${(_p = (_o = (_m = designerConfig.canvas.markers) === null || _m === void 0 ? void 0 : _m.normal) === null || _o === void 0 ? void 0 : _o.borderSize) !== null && _p !== void 0 ? _p : 2}px`
+                                radius: (_k = (_j = (_h = designerConfig.canvas.markers) === null || _h === void 0 ? void 0 : _h.normal) === null || _j === void 0 ? void 0 : _j.radius) !== null && _k !== void 0 ? _k : 3,
+                                borderSize: `${(_o = (_m = (_l = designerConfig.canvas.markers) === null || _l === void 0 ? void 0 : _l.normal) === null || _m === void 0 ? void 0 : _m.borderSize) !== null && _o !== void 0 ? _o : 2}px`
                             }
                         }
                     }
                 },
                 lineLikeViewOptions: {
-                    dashedStyles: parseDashStyles((_q = chart.lineStyles) === null || _q === void 0 ? void 0 : _q.dash),
-                    strokeWidth: (_s = (_r = chart.lineStyles) === null || _r === void 0 ? void 0 : _r.width) !== null && _s !== void 0 ? _s : LINE_CHART_DEFAULT_WIDTH,
+                    dashedStyles: parseDashStyles((_p = chart.lineStyles) === null || _p === void 0 ? void 0 : _p.dash),
+                    strokeWidth: (_r = (_q = chart.lineStyles) === null || _q === void 0 ? void 0 : _q.width) !== null && _r !== void 0 ? _r : LINE_CHART_DEFAULT_WIDTH,
                     renderForKey: (dataRow, valueFieldName) => dataRow[valueFieldName] !== null && dataRow[valueFieldName] !== undefined
                 },
                 barViewOptions: getBarViewOptions(chart, keyAxisOrient, calculateBarIndexes(charts, chart, index)),
                 legend: getLegendMarkerOptions(chart),
                 index,
                 valueLabels: {
-                    show: (_u = (_t = chart.valueLabels) === null || _t === void 0 ? void 0 : _t.on) !== null && _u !== void 0 ? _u : false,
+                    show: (_t = (_s = chart.valueLabels) === null || _s === void 0 ? void 0 : _s.on) !== null && _t !== void 0 ? _t : false,
                     handleX: (scaledValue) => valueLabelsCoordinateCalculator.getValueLabelX(scaledValue),
                     handleY: (scaledValue) => valueLabelsCoordinateCalculator.getValueLabelY(scaledValue),
                     handleScaledValue: (dataRow, datumField) => {
-                        var _a, _b, _c, _d;
-                        if (!((_b = (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.position) === null || _b === void 0 ? void 0 : _b.mode) || ((_d = (_c = chart.valueLabels) === null || _c === void 0 ? void 0 : _c.position) === null || _d === void 0 ? void 0 : _d.mode) === "after")
-                            return dataRow[datumField];
-                        if (chart.isSegmented)
-                            return dataRow[datumField] - (dataRow[datumField] - dataRow["0"]) / 2;
-                        else
-                            return dataRow[datumField] / 2;
+                        var _a, _b;
+                        return handleScaledValue(dataRow, datumField, chart.isSegmented, (_b = (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.position) === null || _b === void 0 ? void 0 : _b.mode);
                     },
                     textAnchor: valueLabelsAlignment.textAnchor,
                     dominantBaseline: valueLabelsAlignment.dominantBaseline,
-                    format: configReader.getValueLabelFormatterForChart(index),
-                    rotation: (_v = chart.valueLabels) === null || _v === void 0 ? void 0 : _v.rotation,
-                    handleElement: (_w = chart.valueLabels) === null || _w === void 0 ? void 0 : _w.handleElement
+                    rotation: (_u = chart.valueLabels) === null || _u === void 0 ? void 0 : _u.rotation,
+                    handleElement: (_v = chart.valueLabels) === null || _v === void 0 ? void 0 : _v.handleElement,
+                    forFields: (_x = (_w = chart.valueLabels) === null || _w === void 0 ? void 0 : _w.renderForFields) !== null && _x !== void 0 ? _x : chart.data.valueFields.map((field) => field.name),
+                    setContent: ({ dataRow, fieldName }) => {
+                        var _a;
+                        if ((_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.setContent)
+                            return chart.valueLabels.setContent({
+                                dataRow,
+                                field: chart.data.valueFields.find((field) => field.name === fieldName)
+                            });
+                        return { textContent: configReader.getValueLabelFormatterForChart(index)(dataRow[fieldName]) };
+                    }
                 },
                 areaViewOptions: getAreaViewOptions(chart, index, style, modelInstance.version.getVersionNumber()),
                 dotViewOptions: {
@@ -144,7 +160,7 @@ export class TwoDimensionalModel {
                         type: "line",
                         handleEndCoordinate: (v) => v + 2,
                         handleStartCoordinate: (v) => v - 2,
-                        width: (_z = (_y = (_x = chart.dotLikeStyles) === null || _x === void 0 ? void 0 : _x.shape) === null || _y === void 0 ? void 0 : _y.width) !== null && _z !== void 0 ? _z : LINE_CHART_DEFAULT_WIDTH
+                        width: (_0 = (_z = (_y = chart.dotLikeStyles) === null || _y === void 0 ? void 0 : _y.shape) === null || _z === void 0 ? void 0 : _z.width) !== null && _0 !== void 0 ? _0 : LINE_CHART_DEFAULT_WIDTH
                     }
                 }
             });

package/lib/style/charts-main.css

@@ -193,10 +193,10 @@
 .mdt-charts-tooltip-content .tooltip-text-item > span {
     display: block;
 }
-.mdt-charts-tooltip-content .tooltip-text-item > span:first-of-type {
+.mdt-charts-tooltip-content .tooltip-text-item .tooltip-field-title {
     flex: 1;
 }
-.mdt-charts-tooltip-content .tooltip-text-item > span:last-of-type {
+.mdt-charts-tooltip-content .tooltip-text-item .tooltip-field-value {
     flex: 0;
 }
 .tooltip-field-value {

package/lib/style/charts-main.less

@@ -193,10 +193,10 @@
 .mdt-charts-tooltip-content .tooltip-text-item > span {
     display: block;
 }
-.mdt-charts-tooltip-content .tooltip-text-item > span:first-of-type {
+.mdt-charts-tooltip-content .tooltip-text-item .tooltip-field-title {
     flex: 1;
 }
-.mdt-charts-tooltip-content .tooltip-text-item > span:last-of-type {
+.mdt-charts-tooltip-content .tooltip-text-item .tooltip-field-value {
     flex: 0;
 }
 .tooltip-field-value {

package/package.json

@@ -1,12 +1,11 @@
 {
 	"name": "mdt-charts",
-	"version": "1.30.2",
+	"version": "1.32.0",
 	"description": "",
 	"main": "lib/main.js",
 	"scripts": {
-		"dev": "npx webpack --mode development",
+		"dev": "npx webpack --mode development --watch",
 		"build": "npx webpack --mode production",
-		"watch": "npx webpack --mode development --watch",
 		"test": "jest",
 		"build-lib": "shx rm -rf lib && npm run build-ts && npm run build-style",
 		"build-ts": "npx tsc -p tsconfig.production.json",

package/lib/model/featuresModel/tooltipModel.d.ts

@@ -1,4 +0,0 @@
-import { TooltipSettings } from "../../designer/designerConfig";
-export declare class TooltipModel {
-    static getTooltipModel(options: TooltipSettings): TooltipSettings;
-}