mdt-charts 1.33.1 → 1.33.2
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/engine/elementHighlighter/elementHighlighter.js +2 -2
- package/lib/engine/elementHighlighter/selectHighlighter.js +5 -5
- package/lib/engine/features/markDots/markDot.d.ts +1 -1
- package/lib/engine/features/markDots/markDot.js +15 -13
- package/lib/engine/features/tolltip/tooltip.js +2 -2
- package/lib/engine/features/valueLabels/valueLabels.d.ts +1 -0
- package/lib/engine/features/valueLabels/valueLabels.js +13 -8
- package/lib/model/helpers/twoDimensionalModelHelper.d.ts +2 -2
- package/lib/model/helpers/twoDimensionalModelHelper.js +4 -4
- package/lib/model/model.d.ts +9 -6
- package/lib/model/notations/twoDimensionalModel.js +12 -2
- package/lib/style/charts-main.css +4 -0
- package/lib/style/charts-main.less +4 -0
- package/package.json +1 -1
|
@@ -87,7 +87,7 @@ export class ElementHighlighter {
|
|
|
87
87
|
charts.forEach((chart) => {
|
|
88
88
|
const elems = DomSelectionHelper.get2DChartElements(block, chart);
|
|
89
89
|
if (chart.type !== "bar")
|
|
90
|
-
MarkDot.
|
|
90
|
+
MarkDot.handleMarkDotVisibility(elems, chart.markersOptions, false);
|
|
91
91
|
this.toggle2DElements(elems, false, chart, transitionDuration);
|
|
92
92
|
this.toggleActivityStyle(elems, true);
|
|
93
93
|
});
|
|
@@ -97,7 +97,7 @@ export class ElementHighlighter {
|
|
|
97
97
|
const elems = DomSelectionHelper.get2DChartElements(block, chart);
|
|
98
98
|
const selectedElems = DomSelectionHelper.getChartElementsByKeys(elems, chart.isSegmented, keyFieldName, block.filterEventManager.getSelectedKeys(), SelectionCondition.Exclude);
|
|
99
99
|
if (chart.type !== "bar")
|
|
100
|
-
MarkDot.
|
|
100
|
+
MarkDot.handleMarkDotVisibility(selectedElems, chart.markersOptions, false);
|
|
101
101
|
this.toggle2DElements(selectedElems, false, chart, transitionDuration);
|
|
102
102
|
if (block.filterEventManager.getSelectedKeys().length > 0)
|
|
103
103
|
this.toggleActivityStyle(selectedElems, false);
|
|
@@ -13,14 +13,14 @@ export class SelectHighlighter {
|
|
|
13
13
|
if (!appendKey) {
|
|
14
14
|
ElementHighlighter.toggle2DElements(selectedElements, false, chart, block.transitionManager.durations.markerHover);
|
|
15
15
|
if (chart.type !== "bar")
|
|
16
|
-
MarkDot.
|
|
16
|
+
MarkDot.handleMarkDotVisibility(selectedElements, chart.markersOptions, false);
|
|
17
17
|
if (selectedKeys.length > 0) {
|
|
18
18
|
ElementHighlighter.toggleActivityStyle(selectedElements, false);
|
|
19
19
|
}
|
|
20
20
|
else {
|
|
21
21
|
ElementHighlighter.toggleActivityStyle(elements, true);
|
|
22
22
|
if (chart.type !== "bar")
|
|
23
|
-
MarkDot.
|
|
23
|
+
MarkDot.handleMarkDotVisibility(elements, chart.markersOptions, false);
|
|
24
24
|
}
|
|
25
25
|
return;
|
|
26
26
|
}
|
|
@@ -33,12 +33,12 @@ export class SelectHighlighter {
|
|
|
33
33
|
ElementHighlighter.toggle2DElements(DomSelectionHelper.getChartElementsByKeys(elements, chart.isSegmented, options.data.keyField.name, selectedKeys, SelectionCondition.Exclude), false, chart, block.transitionManager.durations.markerHover);
|
|
34
34
|
ElementHighlighter.toggleActivityStyle(elements, false);
|
|
35
35
|
if (chart.type !== "bar")
|
|
36
|
-
MarkDot.
|
|
36
|
+
MarkDot.handleMarkDotVisibility(elements, chart.markersOptions, false);
|
|
37
37
|
ElementHighlighter.toggleActivityStyle(selectedElements, true);
|
|
38
38
|
ElementHighlighter.toggle2DElements(selectedElements, true, chart, block.transitionManager.durations.markerHover);
|
|
39
39
|
}
|
|
40
40
|
if (chart.type !== "bar")
|
|
41
|
-
MarkDot.
|
|
41
|
+
MarkDot.handleMarkDotVisibility(selectedElements, chart.markersOptions, true);
|
|
42
42
|
});
|
|
43
43
|
}
|
|
44
44
|
static clickPolarHandler(multySelection, appendKey, selectedSegment, selectedKeys, margin, blockSize, block, options, arcItems, donutSettings) {
|
|
@@ -80,7 +80,7 @@ export class SelectHighlighter {
|
|
|
80
80
|
ElementHighlighter.toggle2DElements(elements, false, chart, block.transitionManager.durations.markerHover);
|
|
81
81
|
ElementHighlighter.toggleActivityStyle(elements, true);
|
|
82
82
|
if (chart.type !== "bar")
|
|
83
|
-
MarkDot.
|
|
83
|
+
MarkDot.handleMarkDotVisibility(elements, chart.markersOptions, false);
|
|
84
84
|
});
|
|
85
85
|
}
|
|
86
86
|
static clearPolar(margin, blockSize, block, options, arcItems, donutSettings) {
|
|
@@ -19,7 +19,7 @@ export declare class MarkDot {
|
|
|
19
19
|
static update(block: Block, newData: MdtChartsDataRow[], keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyFieldName: string, vfIndex: number, valueFieldName: string, chart: TwoDimensionalChartModel): void;
|
|
20
20
|
static updateColors(block: Block, chart: TwoDimensionalChartModel, valueFieldIndex: number): void;
|
|
21
21
|
static getMarkDotForChart(block: Block, chartCssClasses: string[]): Selection<BaseType, MarkDotDataItem, BaseType, unknown>;
|
|
22
|
-
static
|
|
22
|
+
static handleMarkDotVisibility(elems: Selection<BaseType, MdtChartsDataRow, BaseType, unknown>, markersOptions: MarkersOptions, turnOnIfCan?: boolean): void;
|
|
23
23
|
private static toggleMarkDotVisible;
|
|
24
24
|
private static setClassesAndStyle;
|
|
25
25
|
private static setAttrs;
|
|
@@ -16,7 +16,7 @@ export class MarkDot {
|
|
|
16
16
|
const dots = dotsWrapper.append("circle");
|
|
17
17
|
this.setAttrs(block, dots, attrs, chart.markersOptions.styles);
|
|
18
18
|
this.setClassesAndStyle(dots, chart.cssClasses, vfIndex, chart.style.elementColors);
|
|
19
|
-
MarkDot.
|
|
19
|
+
MarkDot.handleMarkDotVisibility(dots, chart.markersOptions, false);
|
|
20
20
|
}
|
|
21
21
|
static update(block, newData, keyAxisOrient, scales, margin, keyFieldName, vfIndex, valueFieldName, chart) {
|
|
22
22
|
const dots = block.svg
|
|
@@ -24,16 +24,12 @@ export class MarkDot {
|
|
|
24
24
|
.selectAll(`.${this.markerDotClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${vfIndex}`)
|
|
25
25
|
.data(newData.map((row) => (Object.assign(Object.assign({}, row), { $mdtChartsMetadata: { valueFieldName } }))));
|
|
26
26
|
dots.exit().remove();
|
|
27
|
-
|
|
28
|
-
if (chart.markersOptions.show({ row: datum, valueFieldName })) {
|
|
29
|
-
MarkDot.toggleMarkDotVisible(select(this), true);
|
|
30
|
-
}
|
|
31
|
-
});
|
|
27
|
+
MarkDot.handleMarkDotVisibility(dots, chart.markersOptions);
|
|
32
28
|
const attrs = MarkDotHelper.getDotAttrs(keyAxisOrient, scales, margin, keyFieldName, valueFieldName, chart.isSegmented);
|
|
33
29
|
const newDots = dots.enter().append("circle");
|
|
34
30
|
this.setAttrs(block, newDots, attrs, chart.markersOptions.styles);
|
|
35
31
|
this.setClassesAndStyle(newDots, chart.cssClasses, vfIndex, chart.style.elementColors);
|
|
36
|
-
MarkDot.
|
|
32
|
+
MarkDot.handleMarkDotVisibility(newDots, chart.markersOptions, false);
|
|
37
33
|
const animationName = "data-updating";
|
|
38
34
|
dots.interrupt(animationName)
|
|
39
35
|
.transition(animationName)
|
|
@@ -50,18 +46,24 @@ export class MarkDot {
|
|
|
50
46
|
static getMarkDotForChart(block, chartCssClasses) {
|
|
51
47
|
return block.getSvg().selectAll(`.${MarkDot.markerDotClass}${Helper.getCssClassesLine(chartCssClasses)}`);
|
|
52
48
|
}
|
|
53
|
-
static
|
|
49
|
+
static handleMarkDotVisibility(elems, markersOptions, turnOnIfCan) {
|
|
54
50
|
elems.each(function (datum) {
|
|
55
51
|
var _a;
|
|
56
|
-
|
|
52
|
+
let visibility = turnOnIfCan;
|
|
53
|
+
const checkOptions = {
|
|
57
54
|
row: datum,
|
|
58
55
|
valueFieldName: (_a = datum.$mdtChartsMetadata) === null || _a === void 0 ? void 0 : _a.valueFieldName
|
|
59
|
-
}
|
|
60
|
-
|
|
56
|
+
};
|
|
57
|
+
if (markersOptions.shouldForceShow(checkOptions))
|
|
58
|
+
visibility = true;
|
|
59
|
+
if (markersOptions.shouldForceHide(checkOptions))
|
|
60
|
+
visibility = false;
|
|
61
|
+
if (visibility != null)
|
|
62
|
+
MarkDot.toggleMarkDotVisible(select(this), visibility);
|
|
61
63
|
});
|
|
62
64
|
}
|
|
63
|
-
static toggleMarkDotVisible(markDots,
|
|
64
|
-
markDots.classed(MarkDot.hiddenDotClass, !
|
|
65
|
+
static toggleMarkDotVisible(markDots, isVisible) {
|
|
66
|
+
markDots.classed(MarkDot.hiddenDotClass, !isVisible);
|
|
65
67
|
}
|
|
66
68
|
static setClassesAndStyle(dots, cssClasses, vfIndex, elementColors) {
|
|
67
69
|
DomSelectionHelper.setCssClasses(dots, Helper.getCssClassesWithElementIndex(cssClasses, vfIndex));
|
|
@@ -80,7 +80,7 @@ export class Tooltip {
|
|
|
80
80
|
if (!block.filterEventManager.isSelected(currentKey)) {
|
|
81
81
|
const oldElements = DomSelectionHelper.getChartElementsByKeys(elements, chart.isSegmented, args.dataOptions.keyField.name, [currentKey]);
|
|
82
82
|
if (chart.type !== "bar")
|
|
83
|
-
MarkDot.
|
|
83
|
+
MarkDot.handleMarkDotVisibility(oldElements, chart.markersOptions, false);
|
|
84
84
|
ElementHighlighter.toggle2DElements(oldElements, false, chart, block.transitionManager.durations.markerHover);
|
|
85
85
|
if (block.filterEventManager.getSelectedKeys().length > 0) {
|
|
86
86
|
ElementHighlighter.toggleActivityStyle(oldElements, false);
|
|
@@ -88,7 +88,7 @@ export class Tooltip {
|
|
|
88
88
|
}
|
|
89
89
|
const selectedElements = DomSelectionHelper.getChartElementsByKeys(elements, chart.isSegmented, args.dataOptions.keyField.name, [keyValue]);
|
|
90
90
|
if (chart.type !== "bar")
|
|
91
|
-
MarkDot.
|
|
91
|
+
MarkDot.handleMarkDotVisibility(selectedElements, chart.markersOptions, true);
|
|
92
92
|
ElementHighlighter.toggleActivityStyle(selectedElements, true);
|
|
93
93
|
if (block.filterEventManager.getSelectedKeys().length === 0 ||
|
|
94
94
|
block.filterEventManager.isSelected(keyValue)) {
|
|
@@ -25,6 +25,7 @@ export declare class ChartValueLabels {
|
|
|
25
25
|
private readonly globalOptions;
|
|
26
26
|
private readonly chart;
|
|
27
27
|
static readonly valueLabelClass: string;
|
|
28
|
+
static readonly valueLabelHiddenClass: string;
|
|
28
29
|
private readonly renderPipeline;
|
|
29
30
|
private readonly attrsProvider;
|
|
30
31
|
private options;
|
|
@@ -67,7 +67,7 @@ export class ChartValueLabels {
|
|
|
67
67
|
let valueLabels = this.getAllValueLabelsOfChart(groupIndex).data(data).enter().append("text");
|
|
68
68
|
valueLabels = this.renderPipeline.execute(valueLabels, { style: this.globalOptions.canvas.style });
|
|
69
69
|
const attrs = this.attrsProvider.getAttrs(this.globalOptions, this.options, scales, datumField, dataRowAccessor);
|
|
70
|
-
this.setAttrs(valueLabels, attrs, valueFieldName,
|
|
70
|
+
this.setAttrs(valueLabels, attrs, valueFieldName, dataRowAccessor);
|
|
71
71
|
this.setClasses(valueLabels, this.chart.cssClasses, groupIndex);
|
|
72
72
|
}
|
|
73
73
|
updateByGroupIndex(scales, groupIndex, data, datumField, dataRowAccessor, valueFieldName) {
|
|
@@ -82,26 +82,27 @@ export class ChartValueLabels {
|
|
|
82
82
|
let newValueLabels = valueLabels.enter().append("text");
|
|
83
83
|
newValueLabels = this.renderPipeline.execute(newValueLabels, { style: this.globalOptions.canvas.style });
|
|
84
84
|
const mergedValueLabels = newValueLabels.merge(valueLabels);
|
|
85
|
-
this.setAttrs(newValueLabels, attrs, valueFieldName,
|
|
85
|
+
this.setAttrs(newValueLabels, attrs, valueFieldName, dataRowAccessor);
|
|
86
86
|
this.setClasses(mergedValueLabels, this.chart.cssClasses, groupIndex);
|
|
87
|
-
this.setAttrs(valueLabels, attrs, valueFieldName,
|
|
87
|
+
this.setAttrs(valueLabels, attrs, valueFieldName, dataRowAccessor, true, resolve);
|
|
88
88
|
});
|
|
89
89
|
}
|
|
90
90
|
getAllValueLabelsOfChart(vfIndex) {
|
|
91
91
|
const block = this.globalOptions.elementAccessors.getBlock().svg.getChartBlock();
|
|
92
92
|
return block.selectAll(`.${ChartValueLabels.valueLabelClass}.${CLASSES.dataLabel}${Helper.getCssClassesLine(this.chart.cssClasses)}.chart-element-${vfIndex}`);
|
|
93
93
|
}
|
|
94
|
-
setAttrs(valueLabels, attrs, valueFieldName,
|
|
94
|
+
setAttrs(valueLabels, attrs, valueFieldName, dataRowAccessor, animate = false, onEndAnimation) {
|
|
95
95
|
const animationName = "labels-updating";
|
|
96
96
|
let selection = valueLabels
|
|
97
97
|
.attr("dominant-baseline", attrs.dominantBaseline)
|
|
98
98
|
.attr("text-anchor", attrs.textAnchor);
|
|
99
|
+
const thisClass = this;
|
|
99
100
|
selection.each(function (d) {
|
|
100
101
|
select(this).selectAll("tspan").remove();
|
|
101
|
-
const content = setContent({ dataRow: dataRowAccessor(d), fieldName: valueFieldName });
|
|
102
|
+
const content = thisClass.options.setContent({ dataRow: dataRowAccessor(d), fieldName: valueFieldName });
|
|
102
103
|
content.rows.forEach((row, rowIndex) => {
|
|
103
104
|
const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
|
|
104
|
-
// Pass empty string
|
|
105
|
+
// Pass an empty string so this element is counted, ensuring correct `dy` attribute behavior
|
|
105
106
|
// https://stackoverflow.com/questions/34078357/empty-tspan-not-rendered-dy-value-ignored
|
|
106
107
|
tspan.textContent = row.toString() || " ";
|
|
107
108
|
if (rowIndex !== 0)
|
|
@@ -110,6 +111,9 @@ export class ChartValueLabels {
|
|
|
110
111
|
this.appendChild(tspan);
|
|
111
112
|
});
|
|
112
113
|
});
|
|
114
|
+
selection.classed(ChartValueLabels.valueLabelHiddenClass, (d) => {
|
|
115
|
+
return !this.options.showLabel({ row: dataRowAccessor(d), valueFieldName });
|
|
116
|
+
});
|
|
113
117
|
if (animate) {
|
|
114
118
|
selection = selection
|
|
115
119
|
.interrupt(animationName)
|
|
@@ -152,6 +156,7 @@ export class ChartValueLabels {
|
|
|
152
156
|
}
|
|
153
157
|
}
|
|
154
158
|
ChartValueLabels.valueLabelClass = NamesHelper.getClassName("value-label");
|
|
159
|
+
ChartValueLabels.valueLabelHiddenClass = NamesHelper.getClassName("value-label-hidden");
|
|
155
160
|
export class CanvasValueLabels {
|
|
156
161
|
constructor(options) {
|
|
157
162
|
this.options = options;
|
|
@@ -159,7 +164,7 @@ export class CanvasValueLabels {
|
|
|
159
164
|
}
|
|
160
165
|
render(scales, charts, data, dataOptions) {
|
|
161
166
|
const valueLabelsSettings = this.options.canvas.valueLabels;
|
|
162
|
-
const chartsWithLabels = charts.filter((chart) => { var _a; return (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.
|
|
167
|
+
const chartsWithLabels = charts.filter((chart) => { var _a; return (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.enabled; });
|
|
163
168
|
if (chartsWithLabels.length === 0)
|
|
164
169
|
return;
|
|
165
170
|
chartsWithLabels.forEach((chart) => {
|
|
@@ -173,7 +178,7 @@ export class CanvasValueLabels {
|
|
|
173
178
|
}
|
|
174
179
|
update(scales, charts, data, dataOptions, newCanvasOptions) {
|
|
175
180
|
this.options.canvas.valueLabels = newCanvasOptions;
|
|
176
|
-
const chartsWithLabels = charts.filter((chart) => { var _a; return (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.
|
|
181
|
+
const chartsWithLabels = charts.filter((chart) => { var _a; return (_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.enabled; });
|
|
177
182
|
if (chartsWithLabels.length === 0)
|
|
178
183
|
return;
|
|
179
184
|
if (this.options.canvas.valueLabels.collision.otherValueLables.mode === "hide")
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ChartOrientation, MdtChartsDataRow, MdtChartsTwoDimensionalChart, MdtChartsTwoDimensionalValueLabels } from "../../config/config";
|
|
2
|
-
import { GradientDef,
|
|
2
|
+
import { GradientDef, MarkerLikeElementDatumItem, Orient, TwoDimensionalChartModel, TwoDimensionalValueLabels, ValueLabelsStyleModel } from "../model";
|
|
3
3
|
import { CanvasModel } from "../modelInstance/canvasModel/canvasModel";
|
|
4
4
|
export declare class TwoDimensionalModelHelper {
|
|
5
|
-
static
|
|
5
|
+
static forceMarkerShow(chart: MdtChartsTwoDimensionalChart, dataRows: MdtChartsDataRow[], valueFieldName: string, currentRow: MarkerLikeElementDatumItem, keyFieldName: string): boolean;
|
|
6
6
|
static getGradientDefs(charts: TwoDimensionalChartModel[], keyAxisOrient: Orient, chartOrient: ChartOrientation, chartBlockId: number): GradientDef[];
|
|
7
7
|
private static getGradientItems;
|
|
8
8
|
private static calculateOpacityItem;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { getGradientId } from "../../model/notations/twoDimensional/styles";
|
|
2
2
|
import { hasCollisionBottomSide, hasCollisionLeftSide, hasCollisionRightSide, hasCollisionTopSide, shiftCoordinateXLeft, shiftCoordinateXRight, shiftCoordinateYBottom, shiftCoordinateYTop } from "../featuresModel/valueLabelsModel/valueLabelsModel";
|
|
3
3
|
export class TwoDimensionalModelHelper {
|
|
4
|
-
static
|
|
4
|
+
static forceMarkerShow(chart, dataRows, valueFieldName, currentRow, keyFieldName) {
|
|
5
5
|
if (chart.markers.show || dataRows.length === 1)
|
|
6
6
|
return true;
|
|
7
7
|
const rowIndex = dataRows.findIndex((row) => row[keyFieldName] === currentRow[keyFieldName]);
|
|
@@ -11,9 +11,9 @@ export class TwoDimensionalModelHelper {
|
|
|
11
11
|
const isLast = rowIndex === dataRows.length - 1;
|
|
12
12
|
const previousRow = dataRows[rowIndex - 1];
|
|
13
13
|
const nextRow = dataRows[rowIndex + 1];
|
|
14
|
-
const hasNullNeighborsRows = !isFirst && !isLast && (previousRow === null || previousRow === void 0 ? void 0 : previousRow[valueFieldName])
|
|
15
|
-
return ((isFirst && (nextRow === null || nextRow === void 0 ? void 0 : nextRow[valueFieldName])
|
|
16
|
-
(isLast && (previousRow === null || previousRow === void 0 ? void 0 : previousRow[valueFieldName])
|
|
14
|
+
const hasNullNeighborsRows = !isFirst && !isLast && (previousRow === null || previousRow === void 0 ? void 0 : previousRow[valueFieldName]) == null && (nextRow === null || nextRow === void 0 ? void 0 : nextRow[valueFieldName]) == null;
|
|
15
|
+
return ((isFirst && (nextRow === null || nextRow === void 0 ? void 0 : nextRow[valueFieldName]) == null) ||
|
|
16
|
+
(isLast && (previousRow === null || previousRow === void 0 ? void 0 : previousRow[valueFieldName]) == null) ||
|
|
17
17
|
hasNullNeighborsRows);
|
|
18
18
|
}
|
|
19
19
|
static getGradientDefs(charts, keyAxisOrient, chartOrient, chartBlockId) {
|
package/lib/model/model.d.ts
CHANGED
|
@@ -406,7 +406,8 @@ export declare type ValueLabelsInnerContentSetter = (options: ValueLabelsInnerCo
|
|
|
406
406
|
rows: (string | number)[];
|
|
407
407
|
};
|
|
408
408
|
export interface TwoDimChartValueLabelsOptions {
|
|
409
|
-
|
|
409
|
+
enabled: boolean;
|
|
410
|
+
showLabel: MarkerLikeElementVisibilityFn;
|
|
410
411
|
handleX: (scaledValue: number) => number;
|
|
411
412
|
handleY: (scaledValue: number) => number;
|
|
412
413
|
textAnchor: ValueLabelAnchor;
|
|
@@ -419,16 +420,18 @@ export interface TwoDimChartValueLabelsOptions {
|
|
|
419
420
|
}
|
|
420
421
|
export declare type ValueLabelsFormatter = (value: number) => string;
|
|
421
422
|
export interface MarkersOptions {
|
|
422
|
-
|
|
423
|
+
shouldForceShow: MarkerLikeElementVisibilityFn;
|
|
424
|
+
shouldForceHide: MarkerLikeElementVisibilityFn;
|
|
423
425
|
styles: MarkersStyleOptions;
|
|
424
426
|
}
|
|
425
|
-
export declare type
|
|
427
|
+
export declare type MarkerLikeElementDatumItem = MdtChartsDataRow | ({
|
|
426
428
|
"1": any;
|
|
427
429
|
} & Array<number>);
|
|
428
|
-
export
|
|
429
|
-
row:
|
|
430
|
+
export interface MarkersLikeElementsVisibilityFnOptions {
|
|
431
|
+
row: MarkerLikeElementDatumItem;
|
|
430
432
|
valueFieldName: string;
|
|
431
|
-
}
|
|
433
|
+
}
|
|
434
|
+
export declare type MarkerLikeElementVisibilityFn = (options: MarkersLikeElementsVisibilityFnOptions) => boolean;
|
|
432
435
|
export interface MarkersStyleOptions {
|
|
433
436
|
highlighted: MarkerStyle;
|
|
434
437
|
normal: MarkerStyle;
|
|
@@ -107,7 +107,13 @@ export class TwoDimensionalModel {
|
|
|
107
107
|
style,
|
|
108
108
|
embeddedLabels: this.getEmbeddedLabelType(chart, chartOrientation),
|
|
109
109
|
markersOptions: {
|
|
110
|
-
|
|
110
|
+
shouldForceShow: ({ row, valueFieldName }) => {
|
|
111
|
+
return TwoDimensionalModelHelper.forceMarkerShow(chart, dataModelRep.getRawRows(), valueFieldName, row, keyFieldName);
|
|
112
|
+
},
|
|
113
|
+
shouldForceHide: ({ row, valueFieldName }) => {
|
|
114
|
+
const value = row[valueFieldName];
|
|
115
|
+
return value == null || Number.isNaN(value);
|
|
116
|
+
},
|
|
111
117
|
styles: {
|
|
112
118
|
highlighted: {
|
|
113
119
|
size: {
|
|
@@ -132,7 +138,11 @@ export class TwoDimensionalModel {
|
|
|
132
138
|
legend: getLegendMarkerOptions(chart),
|
|
133
139
|
index,
|
|
134
140
|
valueLabels: {
|
|
135
|
-
|
|
141
|
+
enabled: (_t = (_s = chart.valueLabels) === null || _s === void 0 ? void 0 : _s.on) !== null && _t !== void 0 ? _t : false,
|
|
142
|
+
showLabel: ({ row, valueFieldName }) => {
|
|
143
|
+
const value = row[valueFieldName];
|
|
144
|
+
return value != null && !Number.isNaN(value);
|
|
145
|
+
},
|
|
136
146
|
handleX: (scaledValue) => valueLabelsCoordinateCalculator.getValueLabelX(scaledValue),
|
|
137
147
|
handleY: (scaledValue) => valueLabelsCoordinateCalculator.getValueLabelY(scaledValue),
|
|
138
148
|
handleScaledValue: (dataRow, datumField) => {
|