mdt-charts 1.26.2 → 1.27.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/config/config.d.ts +4 -0
- package/lib/engine/features/valueLabels/valueLabelsHelper.js +2 -2
- package/lib/model/featuresModel/valueLabelsModel/valueLabelsModel.d.ts +10 -4
- package/lib/model/featuresModel/valueLabelsModel/valueLabelsModel.js +39 -27
- package/lib/model/margin/twoDim/twoDimMarginModel.js +1 -1
- package/lib/model/model.d.ts +1 -0
- package/lib/model/modelInstance/configReader.d.ts +2 -1
- package/lib/model/modelInstance/configReader.js +4 -1
- package/lib/model/notations/twoDimensionalModel.js +23 -13
- package/package.json +1 -1
package/lib/config/config.d.ts
CHANGED
|
@@ -290,8 +290,12 @@ export interface TwoDimensionalChartData {
|
|
|
290
290
|
valueFields: TwoDimValueField[];
|
|
291
291
|
valueGroup?: TwoDimensionalValueGroup;
|
|
292
292
|
}
|
|
293
|
+
export declare type ValueLabelsPositionMode = "after" | "center";
|
|
293
294
|
export interface TwoDimensionalChartValueLabels {
|
|
294
295
|
on: boolean;
|
|
296
|
+
position?: {
|
|
297
|
+
mode?: ValueLabelsPositionMode;
|
|
298
|
+
};
|
|
295
299
|
format?: ValueLabelsFormatter;
|
|
296
300
|
}
|
|
297
301
|
export declare type ValueLabelsFormatter = (value: number) => string;
|
|
@@ -9,12 +9,12 @@ export class ValueLabelsAttrsProvider {
|
|
|
9
9
|
};
|
|
10
10
|
const orient = globalOptions.canvas.keyAxisOrient;
|
|
11
11
|
if (orient === 'left' || orient === 'right') {
|
|
12
|
-
attrs.x = d => valueLabels.handleX(scales.value(d
|
|
12
|
+
attrs.x = d => valueLabels.handleX(scales.value(valueLabels.handleScaledValue(d, datumField)));
|
|
13
13
|
attrs.y = d => valueLabels.handleY(Scale.getScaledValue(scales.key, dataRowAccessor(d)[globalOptions.data.keyFieldName]));
|
|
14
14
|
}
|
|
15
15
|
else if (orient === 'bottom' || orient === 'top') {
|
|
16
16
|
attrs.x = d => valueLabels.handleX(Scale.getScaledValue(scales.key, dataRowAccessor(d)[globalOptions.data.keyFieldName]));
|
|
17
|
-
attrs.y = d => valueLabels.handleY(scales.value(d
|
|
17
|
+
attrs.y = d => valueLabels.handleY(scales.value(valueLabels.handleScaledValue(d, datumField)));
|
|
18
18
|
}
|
|
19
19
|
return attrs;
|
|
20
20
|
}
|
|
@@ -1,15 +1,21 @@
|
|
|
1
1
|
import { BlockMargin, Orient, ValueLabelAnchor, ValueLabelDominantBaseline } from "../../model";
|
|
2
2
|
import { BoundingRect } from "../../../engine/features/valueLabelsCollision/valueLabelsCollision";
|
|
3
|
-
import { Size } from "../../../config/config";
|
|
3
|
+
import { Size, ValueLabelsPositionMode } from "../../../config/config";
|
|
4
4
|
interface ValueLabelAlignment {
|
|
5
5
|
dominantBaseline: ValueLabelDominantBaseline;
|
|
6
6
|
textAnchor: ValueLabelAnchor;
|
|
7
7
|
}
|
|
8
8
|
export declare const OFFSET_SIZE_PX = 10;
|
|
9
9
|
export declare const BORDER_OFFSET_SIZE_PX = 2;
|
|
10
|
-
export declare
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
export declare class ValueLabelCoordinateCalculator {
|
|
11
|
+
private readonly keyAxisOrient;
|
|
12
|
+
private readonly margin;
|
|
13
|
+
private readonly offsetSizePx;
|
|
14
|
+
constructor(positionMode: ValueLabelsPositionMode | undefined, keyAxisOrient: Orient, margin: BlockMargin);
|
|
15
|
+
getValueLabelY(scaledValue: number): number;
|
|
16
|
+
getValueLabelX(scaledValue: number): number;
|
|
17
|
+
}
|
|
18
|
+
export declare function calculateValueLabelAlignment(keyAxisOrient: Orient, positionMode?: ValueLabelsPositionMode): ValueLabelAlignment;
|
|
13
19
|
export declare function hasCollisionLeftSide(labelClientRect: BoundingRect, margin: BlockMargin): boolean;
|
|
14
20
|
export declare function hasCollisionRightSide(labelClientRect: BoundingRect, blockSize: Size, margin: BlockMargin): boolean;
|
|
15
21
|
export declare function hasCollisionTopSide(labelClientRect: BoundingRect, margin: BlockMargin): boolean;
|
|
@@ -1,35 +1,47 @@
|
|
|
1
1
|
export const OFFSET_SIZE_PX = 10;
|
|
2
2
|
export const BORDER_OFFSET_SIZE_PX = 2;
|
|
3
|
-
export
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
return scaledValue + OFFSET_SIZE_PX + margin.top;
|
|
9
|
-
default:
|
|
10
|
-
return scaledValue + margin.top;
|
|
3
|
+
export class ValueLabelCoordinateCalculator {
|
|
4
|
+
constructor(positionMode, keyAxisOrient, margin) {
|
|
5
|
+
this.keyAxisOrient = keyAxisOrient;
|
|
6
|
+
this.margin = margin;
|
|
7
|
+
this.offsetSizePx = positionMode === "center" ? 0 : OFFSET_SIZE_PX;
|
|
11
8
|
}
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
9
|
+
getValueLabelY(scaledValue) {
|
|
10
|
+
switch (this.keyAxisOrient) {
|
|
11
|
+
case 'bottom':
|
|
12
|
+
return scaledValue - this.offsetSizePx + this.margin.top;
|
|
13
|
+
case 'top':
|
|
14
|
+
return scaledValue + this.offsetSizePx + this.margin.top;
|
|
15
|
+
default:
|
|
16
|
+
return scaledValue + this.margin.top;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
getValueLabelX(scaledValue) {
|
|
20
|
+
switch (this.keyAxisOrient) {
|
|
21
|
+
case 'right':
|
|
22
|
+
return scaledValue - this.offsetSizePx + this.margin.left;
|
|
23
|
+
case 'left':
|
|
24
|
+
return scaledValue + this.offsetSizePx + this.margin.left;
|
|
25
|
+
default:
|
|
26
|
+
return scaledValue + this.margin.left;
|
|
27
|
+
}
|
|
21
28
|
}
|
|
22
29
|
}
|
|
23
|
-
export function calculateValueLabelAlignment(keyAxisOrient) {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
export function calculateValueLabelAlignment(keyAxisOrient, positionMode) {
|
|
31
|
+
if (!positionMode || positionMode === "after") {
|
|
32
|
+
switch (keyAxisOrient) {
|
|
33
|
+
case 'top':
|
|
34
|
+
return { dominantBaseline: "hanging", textAnchor: "middle" };
|
|
35
|
+
case "bottom":
|
|
36
|
+
return { dominantBaseline: "auto", textAnchor: "middle" };
|
|
37
|
+
case "left":
|
|
38
|
+
return { dominantBaseline: "middle", textAnchor: "start" };
|
|
39
|
+
case "right":
|
|
40
|
+
return { dominantBaseline: "middle", textAnchor: "end" };
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
return { dominantBaseline: "middle", textAnchor: "middle" };
|
|
33
45
|
}
|
|
34
46
|
}
|
|
35
47
|
export function hasCollisionLeftSide(labelClientRect, margin) {
|
|
@@ -28,7 +28,7 @@ export class TwoDimMarginModel {
|
|
|
28
28
|
const secondaryLabelSize = this.getMaxLabelSizeSecondary(modelInstance);
|
|
29
29
|
this.recalcMarginBySecondaryAxisLabelSize(secondaryLabelSize, canvasModel);
|
|
30
30
|
}
|
|
31
|
-
if (this.configReader.
|
|
31
|
+
if (this.configReader.areValueLabelsOn() && this.configReader.areValueLabelsNeedIncreaseMargin() && this.configReader.options.orientation === 'vertical') {
|
|
32
32
|
this.recalcVerticalMarginWithValueLabelsOn(canvasModel);
|
|
33
33
|
}
|
|
34
34
|
}
|
package/lib/model/model.d.ts
CHANGED
|
@@ -380,6 +380,7 @@ export interface TwoDimChartValueLabelsOptions {
|
|
|
380
380
|
textAnchor: ValueLabelAnchor;
|
|
381
381
|
dominantBaseline: ValueLabelDominantBaseline;
|
|
382
382
|
format: ValueLabelsFormatter;
|
|
383
|
+
handleScaledValue: (dataRow: MdtChartsDataRow, datumField: string) => number;
|
|
383
384
|
}
|
|
384
385
|
export declare type ValueLabelsFormatter = (value: number) => string;
|
|
385
386
|
export interface MarkersOptions {
|
|
@@ -23,7 +23,8 @@ export declare class TwoDimConfigReader implements BaseConfigReader {
|
|
|
23
23
|
containsSecondaryAxis(): boolean;
|
|
24
24
|
getValueLabelFormatterForChart(chartIndex: number): ValueLabelsFormatter;
|
|
25
25
|
calculateDefaultAxisLabelFormatter(): AxisLabelFormatter;
|
|
26
|
-
|
|
26
|
+
areValueLabelsOn(): boolean;
|
|
27
|
+
areValueLabelsNeedIncreaseMargin(): boolean;
|
|
27
28
|
getValueLabelsStyleModel(): ValueLabelsStyleModel;
|
|
28
29
|
private calculateBiggestValueAndDecremented;
|
|
29
30
|
private calculateAxisLabelFormatter;
|
|
@@ -75,9 +75,12 @@ export class TwoDimConfigReader {
|
|
|
75
75
|
const valueFieldFormat = this.options.charts[0].data.valueFields[0].format;
|
|
76
76
|
return (v) => this.designerConfig.dataFormat.formatters(v, { type: valueFieldFormat });
|
|
77
77
|
}
|
|
78
|
-
|
|
78
|
+
areValueLabelsOn() {
|
|
79
79
|
return this.options.charts.some(chart => { var _a; return (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.on; });
|
|
80
80
|
}
|
|
81
|
+
areValueLabelsNeedIncreaseMargin() {
|
|
82
|
+
return !this.options.charts.every(chart => { var _a, _b; return ((_b = (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.position) === null || _b === void 0 ? void 0 : _b.mode) === "center"; });
|
|
83
|
+
}
|
|
81
84
|
getValueLabelsStyleModel() {
|
|
82
85
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
83
86
|
return {
|
|
@@ -4,7 +4,7 @@ import { AxisModel } from "../featuresModel/axisModel";
|
|
|
4
4
|
import { ScaleAxisRecalcer } from "../featuresModel/scaleModel/scaleAxisRecalcer";
|
|
5
5
|
import { ScaleModel } from "../featuresModel/scaleModel/scaleModel";
|
|
6
6
|
import { calculateBarIndexes, getAreaViewOptions, getBarViewOptions, getLegendMarkerOptions, LINE_CHART_DEFAULT_WIDTH, parseDashStyles, parseShape } from "./twoDimensional/styles";
|
|
7
|
-
import { calculateValueLabelAlignment,
|
|
7
|
+
import { calculateValueLabelAlignment, ValueLabelCoordinateCalculator } from "../../model/featuresModel/valueLabelsModel/valueLabelsModel";
|
|
8
8
|
import { TwoDimensionalModelHelper } from "../helpers/twoDimensionalModelHelper";
|
|
9
9
|
import { TitleConfigReader } from "../modelInstance/titleConfigReader";
|
|
10
10
|
export class TwoDimensionalModel {
|
|
@@ -73,8 +73,9 @@ export class TwoDimensionalModel {
|
|
|
73
73
|
const styleModel = new TwoDimensionalChartStyleModel(charts, designerConfig.chartStyle);
|
|
74
74
|
const chartsModel = [];
|
|
75
75
|
charts.forEach((chart, index) => {
|
|
76
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
76
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
|
|
77
77
|
const style = styleModel.getChartStyle(chart, index);
|
|
78
|
+
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());
|
|
78
79
|
chartsModel.push({
|
|
79
80
|
type: chart.type,
|
|
80
81
|
isSegmented: chart.isSegmented,
|
|
@@ -87,30 +88,39 @@ export class TwoDimensionalModel {
|
|
|
87
88
|
show: ({ row, valueFieldName }) => TwoDimensionalModelHelper.shouldMarkerShow(chart, dataModelRep.getRawRows(), valueFieldName, row, keyFieldName),
|
|
88
89
|
styles: {
|
|
89
90
|
highlighted: {
|
|
90
|
-
size: { radius: (
|
|
91
|
+
size: { radius: (_e = (_d = (_c = designerConfig.canvas.markers) === null || _c === void 0 ? void 0 : _c.highlighted) === null || _d === void 0 ? void 0 : _d.radius) !== null && _e !== void 0 ? _e : 4, borderSize: '3.5px' }
|
|
91
92
|
},
|
|
92
93
|
normal: {
|
|
93
94
|
size: {
|
|
94
|
-
radius: (
|
|
95
|
-
borderSize: `${(
|
|
95
|
+
radius: (_h = (_g = (_f = designerConfig.canvas.markers) === null || _f === void 0 ? void 0 : _f.normal) === null || _g === void 0 ? void 0 : _g.radius) !== null && _h !== void 0 ? _h : 3,
|
|
96
|
+
borderSize: `${(_l = (_k = (_j = designerConfig.canvas.markers) === null || _j === void 0 ? void 0 : _j.normal) === null || _k === void 0 ? void 0 : _k.borderSize) !== null && _l !== void 0 ? _l : 2}px`
|
|
96
97
|
}
|
|
97
98
|
}
|
|
98
99
|
}
|
|
99
100
|
},
|
|
100
101
|
lineLikeViewOptions: {
|
|
101
|
-
dashedStyles: parseDashStyles((
|
|
102
|
-
strokeWidth: (
|
|
102
|
+
dashedStyles: parseDashStyles((_m = chart.lineStyles) === null || _m === void 0 ? void 0 : _m.dash),
|
|
103
|
+
strokeWidth: (_p = (_o = chart.lineStyles) === null || _o === void 0 ? void 0 : _o.width) !== null && _p !== void 0 ? _p : LINE_CHART_DEFAULT_WIDTH,
|
|
103
104
|
renderForKey: (dataRow, valueFieldName) => dataRow[valueFieldName] !== null && dataRow[valueFieldName] !== undefined
|
|
104
105
|
},
|
|
105
106
|
barViewOptions: getBarViewOptions(chart, keyAxisOrient, calculateBarIndexes(charts, chart, index)),
|
|
106
107
|
legend: getLegendMarkerOptions(chart),
|
|
107
108
|
index,
|
|
108
109
|
valueLabels: {
|
|
109
|
-
show: (
|
|
110
|
-
handleX: (scaledValue) => getValueLabelX(scaledValue
|
|
111
|
-
handleY: (scaledValue) => getValueLabelY(scaledValue
|
|
112
|
-
|
|
113
|
-
|
|
110
|
+
show: (_r = (_q = chart.valueLabels) === null || _q === void 0 ? void 0 : _q.on) !== null && _r !== void 0 ? _r : false,
|
|
111
|
+
handleX: (scaledValue) => valueLabelsCoordinateCalculator.getValueLabelX(scaledValue),
|
|
112
|
+
handleY: (scaledValue) => valueLabelsCoordinateCalculator.getValueLabelY(scaledValue),
|
|
113
|
+
handleScaledValue: (dataRow, datumField) => {
|
|
114
|
+
var _a, _b, _c, _d;
|
|
115
|
+
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')
|
|
116
|
+
return dataRow[datumField];
|
|
117
|
+
if (chart.isSegmented)
|
|
118
|
+
return dataRow[datumField] - (dataRow[datumField] - dataRow['0']) / 2;
|
|
119
|
+
else
|
|
120
|
+
return dataRow[datumField] / 2;
|
|
121
|
+
},
|
|
122
|
+
textAnchor: calculateValueLabelAlignment(keyAxisOrient, (_t = (_s = chart.valueLabels) === null || _s === void 0 ? void 0 : _s.position) === null || _t === void 0 ? void 0 : _t.mode).textAnchor,
|
|
123
|
+
dominantBaseline: calculateValueLabelAlignment(keyAxisOrient, (_v = (_u = chart.valueLabels) === null || _u === void 0 ? void 0 : _u.position) === null || _v === void 0 ? void 0 : _v.mode).dominantBaseline,
|
|
114
124
|
format: configReader.getValueLabelFormatterForChart(index),
|
|
115
125
|
},
|
|
116
126
|
areaViewOptions: getAreaViewOptions(chart, index, style),
|
|
@@ -119,7 +129,7 @@ export class TwoDimensionalModel {
|
|
|
119
129
|
type: "line",
|
|
120
130
|
handleEndCoordinate: (v) => v + 2,
|
|
121
131
|
handleStartCoordinate: (v) => v - 2,
|
|
122
|
-
width: (
|
|
132
|
+
width: (_y = (_x = (_w = chart.dotLikeStyles) === null || _w === void 0 ? void 0 : _w.shape) === null || _x === void 0 ? void 0 : _x.width) !== null && _y !== void 0 ? _y : LINE_CHART_DEFAULT_WIDTH
|
|
123
133
|
}
|
|
124
134
|
}
|
|
125
135
|
});
|