mdt-charts 1.27.1 → 1.27.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/.prettierrc +6 -0
- package/lib/config/config.d.ts +13 -13
- package/lib/designer/designerConfig.d.ts +1 -1
- package/lib/engine/block/block.js +14 -14
- package/lib/engine/block/blockHelper.js +2 -2
- package/lib/engine/block/blockSvg.js +25 -28
- package/lib/engine/block/defs/LinearGradientDef.js +9 -8
- package/lib/engine/contentManager/contentManagerFactory.js +1 -1
- package/lib/engine/elementHighlighter/elementHighlighter.d.ts +3 -3
- package/lib/engine/elementHighlighter/elementHighlighter.js +52 -54
- package/lib/engine/elementHighlighter/selectHighlighter.js +7 -7
- package/lib/engine/engine.d.ts +4 -4
- package/lib/engine/engine.js +5 -5
- package/lib/engine/features/aggregator/aggregator.d.ts +1 -1
- package/lib/engine/features/aggregator/aggregator.js +43 -45
- package/lib/engine/features/axis/axis.d.ts +1 -1
- package/lib/engine/features/axis/axis.js +53 -48
- package/lib/engine/features/axis/axisDomHelper.d.ts +3 -3
- package/lib/engine/features/axis/axisDomHelper.js +6 -8
- package/lib/engine/features/axis/axisHelper.d.ts +2 -2
- package/lib/engine/features/axis/axisHelper.js +14 -21
- package/lib/engine/features/axis/axisLabelDomHelper.d.ts +3 -3
- package/lib/engine/features/axis/axisLabelDomHelper.js +74 -66
- package/lib/engine/features/axis/axisLabelsEventManager.js +11 -11
- package/lib/engine/features/embeddedLabels/embeddedLabels.d.ts +3 -3
- package/lib/engine/features/embeddedLabels/embeddedLabels.js +44 -44
- package/lib/engine/features/embeddedLabels/embeddedLabelsDomHelper.d.ts +1 -1
- package/lib/engine/features/embeddedLabels/embeddedLabelsDomHelper.js +3 -6
- package/lib/engine/features/embeddedLabels/embeddedLabelsHelper.d.ts +2 -2
- package/lib/engine/features/embeddedLabels/embeddedLabelsHelper.js +22 -20
- package/lib/engine/features/gridLine/gidLineHelper.d.ts +1 -1
- package/lib/engine/features/gridLine/gidLineHelper.js +5 -5
- package/lib/engine/features/gridLine/gridLine.js +14 -23
- package/lib/engine/features/legend/legend.js +27 -36
- package/lib/engine/features/legend/legendDomHelper.js +18 -9
- package/lib/engine/features/legend/legendEventsManager.js +18 -13
- package/lib/engine/features/legend/legendHelper.js +19 -19
- package/lib/engine/features/legend/legendHelperService.js +5 -5
- package/lib/engine/features/legend/legendMarkerCreator.js +23 -22
- package/lib/engine/features/legend/legendWidthCalculator.js +5 -7
- package/lib/engine/features/markDots/markDot.d.ts +2 -2
- package/lib/engine/features/markDots/markDot.js +35 -34
- package/lib/engine/features/markDots/markDotsHelper.js +6 -6
- package/lib/engine/features/recordOverflowAlert/recordOverflowAlertCore.js +11 -11
- package/lib/engine/features/scale/scale.d.ts +4 -5
- package/lib/engine/features/scale/scale.js +16 -25
- package/lib/engine/features/tipBox/tipBox.d.ts +2 -2
- package/lib/engine/features/tipBox/tipBox.js +13 -17
- package/lib/engine/features/tipBox/tipBoxHelper.js +5 -5
- package/lib/engine/features/title/title.d.ts +1 -1
- package/lib/engine/features/title/title.js +8 -11
- package/lib/engine/features/tolltip/newTooltip/newTooltip.d.ts +1 -1
- package/lib/engine/features/tolltip/newTooltip/newTooltip.js +6 -8
- package/lib/engine/features/tolltip/tooltip.d.ts +2 -2
- package/lib/engine/features/tolltip/tooltip.js +47 -42
- package/lib/engine/features/tolltip/tooltipComponentsManager.d.ts +2 -2
- package/lib/engine/features/tolltip/tooltipComponentsManager.js +49 -52
- package/lib/engine/features/tolltip/tooltipDomHelper.d.ts +1 -1
- package/lib/engine/features/tolltip/tooltipDomHelper.js +41 -33
- package/lib/engine/features/tolltip/tooltipHelper.js +15 -11
- package/lib/engine/features/valueLabels/valueLabels.js +24 -37
- package/lib/engine/features/valueLabels/valueLabelsHelper.js +6 -6
- package/lib/engine/features/valueLabelsCollision/valueLabelsCollision.js +9 -10
- package/lib/engine/features/valueLabelsCollision/valueLabelsCollisionHelper.js +4 -4
- package/lib/engine/filterManager/filterEventManager.js +18 -15
- package/lib/engine/helpers/domHelper.d.ts +3 -4
- package/lib/engine/helpers/domHelper.js +9 -13
- package/lib/engine/helpers/fontResizer/fontResizer.js +2 -2
- package/lib/engine/helpers/helper.js +14 -9
- package/lib/engine/helpers/namesHelper.js +2 -2
- package/lib/engine/polarNotation/donut/DonutHelper.js +6 -8
- package/lib/engine/polarNotation/donut/donut.d.ts +3 -3
- package/lib/engine/polarNotation/donut/donut.js +47 -58
- package/lib/engine/polarNotation/extenders/polarRecordOverflowAlert.js +11 -11
- package/lib/engine/polarNotation/polarManager.js +3 -5
- package/lib/engine/transitionManager.js +4 -7
- package/lib/engine/twoDimensionalNotation/area/area.d.ts +1 -1
- package/lib/engine/twoDimensionalNotation/area/area.js +77 -62
- package/lib/engine/twoDimensionalNotation/area/areaGenerator.js +4 -10
- package/lib/engine/twoDimensionalNotation/area/areaHelper.d.ts +3 -3
- package/lib/engine/twoDimensionalNotation/area/areaHelper.js +21 -13
- package/lib/engine/twoDimensionalNotation/bar/bar.d.ts +2 -2
- package/lib/engine/twoDimensionalNotation/bar/bar.js +70 -67
- package/lib/engine/twoDimensionalNotation/bar/barHelper.js +40 -35
- package/lib/engine/twoDimensionalNotation/dot/dotChart.js +60 -42
- package/lib/engine/twoDimensionalNotation/extenders/twoDimRecordOverflowAlert.js +7 -7
- package/lib/engine/twoDimensionalNotation/line/line.d.ts +4 -4
- package/lib/engine/twoDimensionalNotation/line/line.js +45 -28
- package/lib/engine/twoDimensionalNotation/line/lineBuilder.js +18 -16
- package/lib/engine/twoDimensionalNotation/line/lineGenerator.js +2 -4
- package/lib/engine/twoDimensionalNotation/line/lineHelper.d.ts +6 -6
- package/lib/engine/twoDimensionalNotation/line/lineHelper.js +26 -17
- package/lib/engine/twoDimensionalNotation/lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware.js +1 -1
- package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js +25 -21
- package/lib/engine/valueFormatter.d.ts +1 -1
- package/lib/main.d.ts +1 -0
- package/lib/main.js +8 -7
- package/lib/model/chartStyleModel/chartStyleModel.js +5 -3
- package/lib/model/chartStyleModel/colorRange.js +1 -3
- package/lib/model/chartStyleModel/twoDimensionalChartStyleModel.js +9 -7
- package/lib/model/dataManagerModel/dataManagerModel.js +28 -16
- package/lib/model/featuresModel/axisModel.d.ts +6 -3
- package/lib/model/featuresModel/axisModel.js +59 -32
- package/lib/model/featuresModel/axisModelService.js +2 -2
- package/lib/model/featuresModel/legendModel/legendCanvasModel.d.ts +1 -1
- package/lib/model/featuresModel/legendModel/legendCanvasModel.js +12 -12
- package/lib/model/featuresModel/legendModel/legendModel.js +2 -2
- package/lib/model/featuresModel/legendModel/polarMarginCalculator.js +1 -1
- package/lib/model/featuresModel/legendModel/twoDimLegendModel.js +4 -5
- package/lib/model/featuresModel/scaleModel/scaleAxisRecalcer.d.ts +4 -5
- package/lib/model/featuresModel/scaleModel/scaleAxisRecalcer.js +3 -5
- package/lib/model/featuresModel/scaleModel/scaleDomainService.js +10 -12
- package/lib/model/featuresModel/scaleModel/scaleModel.d.ts +8 -4
- package/lib/model/featuresModel/scaleModel/scaleModel.js +20 -12
- package/lib/model/featuresModel/scaleModel/scaleModelServices.js +5 -5
- package/lib/model/featuresModel/tooltipModel.js +1 -1
- package/lib/model/featuresModel/valueLabelsModel/valueLabelsModel.js +5 -5
- package/lib/model/helpers/modelHelper.js +6 -4
- package/lib/model/helpers/twoDimensionalModelHelper.d.ts +1 -1
- package/lib/model/helpers/twoDimensionalModelHelper.js +23 -23
- package/lib/model/helpers/unitsReader.js +1 -1
- package/lib/model/margin/marginModel.js +1 -1
- package/lib/model/margin/twoDim/twoDimMarginModel.d.ts +1 -0
- package/lib/model/margin/twoDim/twoDimMarginModel.js +38 -28
- package/lib/model/model.d.ts +17 -4
- package/lib/model/modelBuilder.d.ts +4 -4
- package/lib/model/modelBuilder.js +19 -18
- package/lib/model/modelInstance/canvasModel/canvasSizesModel/marginModelService.js +1 -1
- package/lib/model/modelInstance/chartBlockVersion/chartBlockVersion.d.ts +5 -0
- package/lib/model/modelInstance/chartBlockVersion/chartBlockVersion.js +8 -0
- package/lib/model/modelInstance/configReader.js +11 -10
- package/lib/model/modelInstance/dataModel/dataRepository.js +5 -5
- package/lib/model/modelInstance/modelInstance.d.ts +4 -2
- package/lib/model/modelInstance/modelInstance.js +5 -3
- package/lib/model/modelInstance/titleConfigReader.js +5 -5
- package/lib/model/notations/polar/donut/donutModel.js +1 -1
- package/lib/model/notations/polar/polarModel.js +6 -6
- package/lib/model/notations/twoDimensional/styles.d.ts +2 -2
- package/lib/model/notations/twoDimensional/styles.js +8 -8
- package/lib/model/notations/twoDimensionalModel.d.ts +0 -1
- package/lib/model/notations/twoDimensionalModel.js +32 -29
- package/package.json +59 -59
- package/tsconfig.production.json +14 -24
- package/README.md +0 -2
|
@@ -1,104 +1,105 @@
|
|
|
1
|
-
import { select } from
|
|
2
|
-
import { DomHelper } from
|
|
3
|
-
import { Helper } from
|
|
4
|
-
import { AXIS_HORIZONTAL_LABEL_PADDING, AXIS_VERTICAL_LABEL_PADDING } from
|
|
1
|
+
import { select } from "d3-selection";
|
|
2
|
+
import { DomHelper } from "../../helpers/domHelper";
|
|
3
|
+
import { Helper } from "../../helpers/helper";
|
|
4
|
+
import { AXIS_HORIZONTAL_LABEL_PADDING, AXIS_VERTICAL_LABEL_PADDING } from "../../../model/margin/twoDim/twoDimMarginModel";
|
|
5
5
|
export class AxisLabelHelper {
|
|
6
6
|
static setTitles(axisElement, axisOptions) {
|
|
7
|
-
axisElement.selectAll(
|
|
8
|
-
|
|
9
|
-
const tickTitle = select(this).select('title');
|
|
7
|
+
axisElement.selectAll(".tick text").each(function (d, i) {
|
|
8
|
+
const tickTitle = select(this).select("title");
|
|
10
9
|
if (tickTitle.empty())
|
|
11
|
-
select(this)
|
|
12
|
-
.append('title')
|
|
13
|
-
.text(axisOptions.browserTooltip.format(d));
|
|
10
|
+
select(this).append("title").text(axisOptions.browserTooltip.format(d));
|
|
14
11
|
else {
|
|
15
|
-
tickTitle.text(
|
|
12
|
+
tickTitle.text(axisOptions.browserTooltip.format(d));
|
|
16
13
|
}
|
|
17
14
|
});
|
|
18
15
|
}
|
|
19
16
|
static setAxisLabelPaddingByOrient(axis, axisOptions) {
|
|
20
17
|
let axisLabelPadding = AXIS_HORIZONTAL_LABEL_PADDING;
|
|
21
|
-
if (axisOptions.orient ===
|
|
18
|
+
if (axisOptions.orient === "left" || axisOptions.orient === "right")
|
|
22
19
|
axisLabelPadding = AXIS_VERTICAL_LABEL_PADDING;
|
|
23
20
|
axis.tickPadding(axisLabelPadding);
|
|
24
21
|
}
|
|
25
22
|
static rotateLabels(axisElement, keyAxisOrient) {
|
|
26
|
-
const labelBlocks = axisElement.selectAll(
|
|
27
|
-
labelBlocks.attr(
|
|
28
|
-
if (keyAxisOrient ===
|
|
29
|
-
labelBlocks
|
|
30
|
-
.attr('text-anchor', 'end')
|
|
31
|
-
.attr('x', -AXIS_HORIZONTAL_LABEL_PADDING)
|
|
32
|
-
.attr('y', -4);
|
|
23
|
+
const labelBlocks = axisElement.selectAll("text");
|
|
24
|
+
labelBlocks.attr("transform", "rotate(-90)");
|
|
25
|
+
if (keyAxisOrient === "bottom") {
|
|
26
|
+
labelBlocks.attr("text-anchor", "end").attr("x", -AXIS_HORIZONTAL_LABEL_PADDING).attr("y", -4);
|
|
33
27
|
}
|
|
34
|
-
else if (keyAxisOrient ===
|
|
35
|
-
labelBlocks
|
|
36
|
-
.attr('text-anchor', 'start')
|
|
37
|
-
.attr('x', AXIS_HORIZONTAL_LABEL_PADDING)
|
|
38
|
-
.attr('y', 6);
|
|
28
|
+
else if (keyAxisOrient === "top") {
|
|
29
|
+
labelBlocks.attr("text-anchor", "start").attr("x", AXIS_HORIZONTAL_LABEL_PADDING).attr("y", 6);
|
|
39
30
|
}
|
|
40
31
|
}
|
|
41
32
|
static cropLabels(block, scale, scaleOptions, axisOptions, blockSize) {
|
|
42
33
|
var _a, _b, _c;
|
|
43
|
-
const axisTextBlocks = block
|
|
34
|
+
const axisTextBlocks = block
|
|
35
|
+
.getSvg()
|
|
36
|
+
.select(`.${axisOptions.cssClass}`)
|
|
37
|
+
.selectAll("text");
|
|
44
38
|
let maxLabelSize;
|
|
45
|
-
if (
|
|
39
|
+
if (axisOptions.orient === "left" ||
|
|
40
|
+
axisOptions.orient === "right" ||
|
|
41
|
+
(axisOptions.type === "key" && axisOptions.labels.position === "rotated"))
|
|
46
42
|
maxLabelSize = axisOptions.labels.maxSize;
|
|
47
43
|
else
|
|
48
44
|
maxLabelSize = ((_c = (_b = (_a = scale).step) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : Infinity) - 4;
|
|
49
45
|
DomHelper.cropSvgLabels(axisTextBlocks, maxLabelSize);
|
|
50
|
-
if (axisOptions.labels.position ===
|
|
46
|
+
if (axisOptions.labels.position === "straight" &&
|
|
47
|
+
(axisOptions.orient === "top" || axisOptions.orient === "bottom")) {
|
|
51
48
|
this.cropAndAlignExtremeLabels(block, maxLabelSize, axisOptions, blockSize);
|
|
52
49
|
}
|
|
53
50
|
}
|
|
54
51
|
static hideLabels(axisElement) {
|
|
55
|
-
axisElement.selectAll(
|
|
52
|
+
axisElement.selectAll(".tick text").style("display", "none");
|
|
56
53
|
}
|
|
57
54
|
static alignLabelsInKeyAxis(axisOptions, axisElement) {
|
|
58
|
-
if (axisOptions.orient ===
|
|
59
|
-
this.alignLabelsInVerticalAxis(axisElement,
|
|
60
|
-
else if (axisOptions.orient ===
|
|
61
|
-
this.alignLabelsInVerticalAxis(axisElement,
|
|
55
|
+
if (axisOptions.orient === "left")
|
|
56
|
+
this.alignLabelsInVerticalAxis(axisElement, "start", axisOptions.labels.maxSize, true);
|
|
57
|
+
else if (axisOptions.orient === "right")
|
|
58
|
+
this.alignLabelsInVerticalAxis(axisElement, "start", axisOptions.labels.maxSize, false);
|
|
62
59
|
}
|
|
63
60
|
static alignLabelsInVerticalAxis(axisElement, anchor, maxLabelSize, changeCoordinate) {
|
|
64
|
-
const axisTextBlocks = axisElement.selectAll(
|
|
65
|
-
const spans = axisElement.selectAll(
|
|
66
|
-
axisTextBlocks.attr(
|
|
67
|
-
spans.attr(
|
|
61
|
+
const axisTextBlocks = axisElement.selectAll("text");
|
|
62
|
+
const spans = axisElement.selectAll("tspan");
|
|
63
|
+
axisTextBlocks.attr("text-anchor", anchor);
|
|
64
|
+
spans.attr("text-anchor", anchor);
|
|
68
65
|
if (changeCoordinate) {
|
|
69
|
-
axisTextBlocks.attr(
|
|
70
|
-
spans.attr(
|
|
66
|
+
axisTextBlocks.attr("x", -(maxLabelSize + AXIS_VERTICAL_LABEL_PADDING));
|
|
67
|
+
spans.attr("x", -(maxLabelSize + AXIS_VERTICAL_LABEL_PADDING));
|
|
71
68
|
}
|
|
72
69
|
else {
|
|
73
|
-
spans.attr(
|
|
70
|
+
spans.attr("x", AXIS_VERTICAL_LABEL_PADDING);
|
|
74
71
|
}
|
|
75
72
|
}
|
|
76
73
|
static alignHorizontalAxisLastLabel(block, maxLabelSize, axisOptions, blockSize, crop) {
|
|
77
|
-
const lastTick = block
|
|
78
|
-
|
|
74
|
+
const lastTick = block
|
|
75
|
+
.getSvg()
|
|
76
|
+
.select(`.${axisOptions.cssClass}`)
|
|
77
|
+
.select(".tick:last-of-type");
|
|
78
|
+
const lastLabel = lastTick.select("text");
|
|
79
79
|
if (lastTick.empty() || lastTick.size() === 0 || lastLabel.size() === 0)
|
|
80
80
|
return;
|
|
81
|
-
const tickTranslateX = Helper.getTranslateNumbers(lastTick.attr(
|
|
81
|
+
const tickTranslateX = Helper.getTranslateNumbers(lastTick.attr("transform"))[0];
|
|
82
82
|
const marginRight = blockSize.width - axisOptions.translate.translateX - tickTranslateX;
|
|
83
83
|
if (tickTranslateX + lastLabel.node().getBBox().width + axisOptions.translate.translateX > blockSize.width) {
|
|
84
|
-
lastLabel.attr(
|
|
85
|
-
lastLabel.attr(
|
|
84
|
+
lastLabel.attr("text-anchor", "start");
|
|
85
|
+
lastLabel.attr("transform", `translate(${this.getTranslateNumber(maxLabelSize, lastLabel, marginRight)}, 0)`);
|
|
86
86
|
if (crop)
|
|
87
87
|
DomHelper.cropSvgLabels(lastLabel, maxLabelSize / 2 + marginRight);
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
90
|
static cropAndAlignExtremeLabels(block, maxLabelSize, axisOptions, blockSize) {
|
|
91
91
|
this.alignHorizontalAxisLastLabel(block, maxLabelSize, axisOptions, blockSize, true);
|
|
92
|
-
const firstLabel = block
|
|
92
|
+
const firstLabel = block
|
|
93
|
+
.getSvg()
|
|
93
94
|
.select(`.${axisOptions.cssClass}`)
|
|
94
|
-
.select(
|
|
95
|
-
.select(
|
|
95
|
+
.select(".tick:first-of-type")
|
|
96
|
+
.select("text");
|
|
96
97
|
if (firstLabel.empty())
|
|
97
98
|
return;
|
|
98
|
-
const axisElementTranslate = Helper.getTranslateNumbers(block.getSvg().select(`.${axisOptions.cssClass}`).attr(
|
|
99
|
+
const axisElementTranslate = Helper.getTranslateNumbers(block.getSvg().select(`.${axisOptions.cssClass}`).attr("transform"))[0];
|
|
99
100
|
if (axisOptions.translate.translateX - firstLabel.node().getBBox().width / 2 < 0) {
|
|
100
|
-
firstLabel.attr(
|
|
101
|
-
firstLabel.attr(
|
|
101
|
+
firstLabel.attr("text-anchor", "start");
|
|
102
|
+
firstLabel.attr("transform", `translate(${-axisOptions.translate.translateX}, 0)`);
|
|
102
103
|
DomHelper.cropSvgLabels(firstLabel, maxLabelSize / 2 + axisElementTranslate);
|
|
103
104
|
}
|
|
104
105
|
}
|
|
@@ -111,37 +112,44 @@ export class AxisLabelHelper {
|
|
|
111
112
|
static wrapHandler(textBlocks, maxWidth) {
|
|
112
113
|
textBlocks.each(function () {
|
|
113
114
|
let textBlock = select(this);
|
|
114
|
-
if (!textBlock.selectAll(
|
|
115
|
+
if (!textBlock.selectAll("tspan").empty())
|
|
115
116
|
return;
|
|
116
|
-
textBlock.select(
|
|
117
|
+
textBlock.select("title").remove();
|
|
117
118
|
let textContent = textBlock.text();
|
|
118
119
|
if (textBlock.node().getBBox().width > maxWidth) {
|
|
119
|
-
let letters = textBlock.text().split(
|
|
120
|
+
let letters = textBlock.text().split("").reverse(), // split text to letters.
|
|
120
121
|
letter, line = [], // one line. letters from this var into tpsans.
|
|
121
|
-
lineNumber = 0, dy = 1.4, tspan = textBlock
|
|
122
|
-
|
|
122
|
+
lineNumber = 0, dy = 1.4, tspan = textBlock
|
|
123
|
+
.text(null)
|
|
124
|
+
.append("tspan")
|
|
125
|
+
.attr("dy", dy + "em");
|
|
126
|
+
while ((letter = letters.pop())) {
|
|
123
127
|
line.push(letter);
|
|
124
|
-
tspan.text(line.join(
|
|
128
|
+
tspan.text(line.join(""));
|
|
125
129
|
if (tspan.node().getComputedTextLength() > maxWidth && line.length > 1 && letters.length > 0) {
|
|
126
130
|
line.pop();
|
|
127
|
-
tspan.text(line.join(
|
|
128
|
-
if (lineNumber === 0 && line[line.length - 1] !==
|
|
129
|
-
tspan.text(tspan.text() +
|
|
131
|
+
tspan.text(line.join(""));
|
|
132
|
+
if (lineNumber === 0 && line[line.length - 1] !== " ")
|
|
133
|
+
tspan.text(tspan.text() + "-");
|
|
130
134
|
line = [letter];
|
|
131
|
-
if (lineNumber >= 1) {
|
|
135
|
+
if (lineNumber >= 1) {
|
|
136
|
+
// If text block has 2 lines, text cropped.
|
|
132
137
|
if (letters.length > 0)
|
|
133
|
-
tspan.text(tspan.text().substr(0, tspan.text().length - 1) +
|
|
138
|
+
tspan.text(tspan.text().substr(0, tspan.text().length - 1) + "...");
|
|
134
139
|
break;
|
|
135
140
|
}
|
|
136
|
-
tspan = textBlock
|
|
141
|
+
tspan = textBlock
|
|
142
|
+
.append("tspan")
|
|
143
|
+
.attr("dy", dy * lineNumber + 1 + "em")
|
|
144
|
+
.text(letter);
|
|
137
145
|
lineNumber++;
|
|
138
146
|
}
|
|
139
147
|
}
|
|
140
|
-
if (textBlock.selectAll(
|
|
141
|
-
textBlock.text(textContent).attr(
|
|
148
|
+
if (textBlock.selectAll("tspan").size() === 1) {
|
|
149
|
+
textBlock.text(textContent).attr("y", null);
|
|
142
150
|
}
|
|
143
|
-
if (!textBlock.selectAll(
|
|
144
|
-
textBlock.attr(
|
|
151
|
+
if (!textBlock.selectAll("tspan").empty()) {
|
|
152
|
+
textBlock.attr("y", -(textBlock.node().getBBox().height / 2 + 4.8));
|
|
145
153
|
}
|
|
146
154
|
}
|
|
147
155
|
});
|
|
@@ -2,9 +2,9 @@ import { pointer } from "d3-selection";
|
|
|
2
2
|
import { TipBox } from "../tipBox/tipBox";
|
|
3
3
|
export class AxisLabelsEventManager {
|
|
4
4
|
static setHoverEvents(block, axisElement) {
|
|
5
|
-
const labels = axisElement.selectAll(
|
|
6
|
-
labels.on(
|
|
7
|
-
TipBox.get(block).dispatch(
|
|
5
|
+
const labels = axisElement.selectAll(".tick text");
|
|
6
|
+
labels.on("mousemove", function (e, d) {
|
|
7
|
+
TipBox.get(block).dispatch("mousemove", {
|
|
8
8
|
bubbles: false,
|
|
9
9
|
cancelable: true,
|
|
10
10
|
detail: {
|
|
@@ -13,11 +13,11 @@ export class AxisLabelsEventManager {
|
|
|
13
13
|
}
|
|
14
14
|
});
|
|
15
15
|
});
|
|
16
|
-
labels.on(
|
|
17
|
-
TipBox.get(block).dispatch(
|
|
16
|
+
labels.on("mouseleave", function (e, d) {
|
|
17
|
+
TipBox.get(block).dispatch("mouseleave");
|
|
18
18
|
});
|
|
19
|
-
labels.on(
|
|
20
|
-
TipBox.get(block).dispatch(
|
|
19
|
+
labels.on("click", function (e, d) {
|
|
20
|
+
TipBox.get(block).dispatch("click", {
|
|
21
21
|
bubbles: false,
|
|
22
22
|
cancelable: true,
|
|
23
23
|
detail: {
|
|
@@ -28,9 +28,9 @@ export class AxisLabelsEventManager {
|
|
|
28
28
|
});
|
|
29
29
|
}
|
|
30
30
|
static removeEvents(axisElement) {
|
|
31
|
-
const labels = axisElement.selectAll(
|
|
32
|
-
labels.on(
|
|
33
|
-
labels.on(
|
|
34
|
-
labels.on(
|
|
31
|
+
const labels = axisElement.selectAll(".tick text");
|
|
32
|
+
labels.on("mousemove", null);
|
|
33
|
+
labels.on("mouseleave", null);
|
|
34
|
+
labels.on("click", null);
|
|
35
35
|
}
|
|
36
36
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { Selection } from
|
|
2
|
-
import { MdtChartsDataRow, Size } from
|
|
1
|
+
import { Selection } from "d3-selection";
|
|
2
|
+
import { MdtChartsDataRow, Size } from "../../../config/config";
|
|
3
3
|
import { BlockMargin, EmbeddedLabelTypeModel, Field, Orient } from "../../../model/model";
|
|
4
4
|
import { Block } from "../../block/block";
|
|
5
|
-
import { BarAttrsHelper } from
|
|
5
|
+
import { BarAttrsHelper } from "../../twoDimensionalNotation/bar/barHelper";
|
|
6
6
|
export declare class EmbeddedLabels {
|
|
7
7
|
static embeddedLabelsGroupClass: string;
|
|
8
8
|
static embeddedLabelClass: string;
|
|
@@ -1,23 +1,24 @@
|
|
|
1
|
-
import { select } from
|
|
2
|
-
import { DomHelper } from
|
|
3
|
-
import { Helper } from
|
|
1
|
+
import { select } from "d3-selection";
|
|
2
|
+
import { DomHelper } from "../../helpers/domHelper";
|
|
3
|
+
import { Helper } from "../../helpers/helper";
|
|
4
4
|
import { ValueFormatter } from "../../valueFormatter";
|
|
5
|
-
import { EmbeddedLabelsDomHelper } from
|
|
5
|
+
import { EmbeddedLabelsDomHelper } from "./embeddedLabelsDomHelper";
|
|
6
6
|
import { EmbeddedLabelsHelper } from "./embeddedLabelsHelper";
|
|
7
7
|
export class EmbeddedLabels {
|
|
8
8
|
static render(block, bars, barAttrsHelper, field, type, keyAxisOrient, blockSize, margin, index, cssClasses) {
|
|
9
9
|
const labelsGroup = this.renderGroup(block, Helper.getCssClassesWithElementIndex(cssClasses, index));
|
|
10
10
|
DomHelper.setCssClasses(labelsGroup, Helper.getCssClassesWithElementIndex(cssClasses, index));
|
|
11
|
-
bars.each(dataRow => {
|
|
11
|
+
bars.each((dataRow) => {
|
|
12
12
|
this.renderLabel(labelsGroup, barAttrsHelper, dataRow, field, type, keyAxisOrient, blockSize, margin);
|
|
13
13
|
});
|
|
14
14
|
}
|
|
15
15
|
static restoreRemoved(block, bars, barAttrsHelper, field, type, keyAxisOrient, blockSize, margin, index, cssClasses, keyFieldName) {
|
|
16
|
-
const untaggedBars = bars.filter(d => {
|
|
17
|
-
return block.svg
|
|
16
|
+
const untaggedBars = bars.filter((d) => {
|
|
17
|
+
return block.svg
|
|
18
|
+
.getChartBlock()
|
|
18
19
|
.selectAll(`.${EmbeddedLabels.embeddedLabelsGroupClass}${Helper.getCssClassesLine(cssClasses)}.chart-element-${index}`)
|
|
19
20
|
.selectAll(`.${this.embeddedLabelClass}`)
|
|
20
|
-
.filter(row => row[keyFieldName] === d[keyFieldName])
|
|
21
|
+
.filter((row) => row[keyFieldName] === d[keyFieldName])
|
|
21
22
|
.empty();
|
|
22
23
|
});
|
|
23
24
|
if (!untaggedBars.empty()) {
|
|
@@ -25,17 +26,18 @@ export class EmbeddedLabels {
|
|
|
25
26
|
}
|
|
26
27
|
}
|
|
27
28
|
static removeUnused(block, chartCssClasses, fieldIndex, indexes) {
|
|
28
|
-
block.svg
|
|
29
|
+
block.svg
|
|
30
|
+
.getChartBlock()
|
|
29
31
|
.selectAll(`.${EmbeddedLabels.embeddedLabelsGroupClass}${Helper.getCssClassesLine(chartCssClasses)}.chart-element-${fieldIndex}`)
|
|
30
32
|
.selectAll(`.${this.embeddedLabelClass}`)
|
|
31
|
-
.filter((d, i) => indexes.findIndex(ind => ind === i) !== -1)
|
|
33
|
+
.filter((d, i) => indexes.findIndex((ind) => ind === i) !== -1)
|
|
32
34
|
.remove();
|
|
33
35
|
}
|
|
34
36
|
static update(block, bars, keyAxisOrient, barAttrsHelper, margin, valueField, type, blockSize, newData, index, cssClasses) {
|
|
35
|
-
const labelsGroup = block.svg
|
|
37
|
+
const labelsGroup = block.svg
|
|
38
|
+
.getChartBlock()
|
|
36
39
|
.selectAll(`.${EmbeddedLabels.embeddedLabelsGroupClass}${Helper.getCssClassesLine(cssClasses)}.chart-element-${index}`);
|
|
37
|
-
labelsGroup.selectAll(`.${this.embeddedLabelBgClass}`)
|
|
38
|
-
.remove();
|
|
40
|
+
labelsGroup.selectAll(`.${this.embeddedLabelBgClass}`).remove();
|
|
39
41
|
const labelsSelection = labelsGroup
|
|
40
42
|
.selectAll(`.${this.embeddedLabelClass}`)
|
|
41
43
|
.data(newData);
|
|
@@ -49,10 +51,10 @@ export class EmbeddedLabels {
|
|
|
49
51
|
block.svg.getChartBlock().selectAll(`.${this.embeddedLabelsGroupClass}`).raise();
|
|
50
52
|
}
|
|
51
53
|
static renderLabel(labelsGroup, barAttrsHelper, dataRow, field, type, keyAxisOrient, blockSize, margin) {
|
|
52
|
-
const labelBlock = labelsGroup.append(
|
|
54
|
+
const labelBlock = labelsGroup.append("text").datum(dataRow);
|
|
53
55
|
labelBlock
|
|
54
56
|
.classed(EmbeddedLabels.embeddedLabelClass, true)
|
|
55
|
-
.style(
|
|
57
|
+
.style("pointer-events", "none")
|
|
56
58
|
.text(ValueFormatter.formatField(field.format, dataRow[field.name]));
|
|
57
59
|
const barAttrs = {
|
|
58
60
|
x: barAttrsHelper.x(dataRow),
|
|
@@ -63,13 +65,13 @@ export class EmbeddedLabels {
|
|
|
63
65
|
const labelUnserveFlag = EmbeddedLabelsHelper.getLabelUnserveFlag(barAttrs.height); // if bar is too small to serve label inside. This flag is needed for set outside postion and change text anchor if bar wide as whole chart block
|
|
64
66
|
const position = EmbeddedLabelsHelper.getLabelPosition(barAttrs, labelBlock.node().getBBox().width, margin, blockSize, labelUnserveFlag);
|
|
65
67
|
const attrs = EmbeddedLabelsHelper.getLabelAttrs(barAttrs, type, position, keyAxisOrient, labelBlock.node().getBBox().width);
|
|
66
|
-
if (position ===
|
|
68
|
+
if (position === "outside") {
|
|
67
69
|
attrs.x = this.checkLabelToResetTextAnchor(attrs.x, labelBlock.node().getBBox().width, margin, blockSize, keyAxisOrient);
|
|
68
70
|
this.renderBackground(labelsGroup, labelBlock, attrs);
|
|
69
71
|
}
|
|
70
72
|
EmbeddedLabelsDomHelper.setLabelBlockAttrs(attrs, labelBlock);
|
|
71
|
-
if (position ===
|
|
72
|
-
labelBlock.style(
|
|
73
|
+
if (position === "inside")
|
|
74
|
+
labelBlock.style("fill", this.innerLabelColor);
|
|
73
75
|
EmbeddedLabelsDomHelper.cropText(labelBlock, barAttrs, position, labelUnserveFlag, margin, blockSize);
|
|
74
76
|
}
|
|
75
77
|
static updateLabel(block, dataRow, keyAxisOrient, barAttrsHelper, margin, type, blockSize, labelBlock, labelsGroup) {
|
|
@@ -83,49 +85,47 @@ export class EmbeddedLabels {
|
|
|
83
85
|
const position = EmbeddedLabelsHelper.getLabelPosition(barAttrs, labelBlock.node().getBBox().width, margin, blockSize, labelUnserveFlag);
|
|
84
86
|
const attrs = EmbeddedLabelsHelper.getLabelAttrs(barAttrs, type, position, keyAxisOrient, labelBlock.node().getBBox().width);
|
|
85
87
|
EmbeddedLabelsDomHelper.cropText(labelBlock, barAttrs, position, labelUnserveFlag, margin, blockSize);
|
|
86
|
-
if (position ===
|
|
88
|
+
if (position === "outside") {
|
|
87
89
|
attrs.x = this.checkLabelToResetTextAnchor(attrs.x, labelBlock.node().getBBox().width, margin, blockSize, keyAxisOrient);
|
|
88
|
-
labelBlock.style(
|
|
90
|
+
labelBlock.style("fill", this.outerLabelColor);
|
|
89
91
|
}
|
|
90
|
-
EmbeddedLabelsDomHelper.setLabelBlockAttrs(attrs, labelBlock, block.transitionManager.durations.chartUpdate)
|
|
91
|
-
|
|
92
|
-
if (position === 'outside')
|
|
92
|
+
EmbeddedLabelsDomHelper.setLabelBlockAttrs(attrs, labelBlock, block.transitionManager.durations.chartUpdate).then(() => {
|
|
93
|
+
if (position === "outside")
|
|
93
94
|
this.renderBackground(labelsGroup, labelBlock, attrs);
|
|
94
|
-
if (position ===
|
|
95
|
-
labelBlock.style(
|
|
95
|
+
if (position === "inside")
|
|
96
|
+
labelBlock.style("fill", this.innerLabelColor);
|
|
96
97
|
});
|
|
97
98
|
}
|
|
98
99
|
static checkLabelToResetTextAnchor(x, width, margin, blockSize, keyAxisOrient) {
|
|
99
|
-
if (keyAxisOrient ===
|
|
100
|
+
if (keyAxisOrient === "left") {
|
|
100
101
|
if (x + width > blockSize.width - margin.right)
|
|
101
102
|
return blockSize.width - margin.right - width;
|
|
102
103
|
return x;
|
|
103
104
|
}
|
|
104
|
-
if (keyAxisOrient ===
|
|
105
|
+
if (keyAxisOrient === "right") {
|
|
105
106
|
if (x < margin.left)
|
|
106
107
|
return margin.left;
|
|
107
108
|
return x;
|
|
108
109
|
}
|
|
109
110
|
}
|
|
110
111
|
static renderGroup(block, cssClasses) {
|
|
111
|
-
let group = block.svg
|
|
112
|
+
let group = block.svg
|
|
113
|
+
.getChartBlock()
|
|
112
114
|
.select(`.${this.embeddedLabelsGroupClass}${Helper.getCssClassesLine(cssClasses)}`)
|
|
113
115
|
.raise();
|
|
114
116
|
if (group.empty())
|
|
115
|
-
group = block.svg.getChartBlock()
|
|
116
|
-
.append('g')
|
|
117
|
-
.attr('class', this.embeddedLabelsGroupClass)
|
|
118
|
-
.raise();
|
|
117
|
+
group = block.svg.getChartBlock().append("g").attr("class", this.embeddedLabelsGroupClass).raise();
|
|
119
118
|
return group;
|
|
120
119
|
}
|
|
121
120
|
static renderBackground(labelsGroup, labelBlock, attrs) {
|
|
122
|
-
labelsGroup
|
|
123
|
-
.
|
|
124
|
-
.attr(
|
|
125
|
-
.attr(
|
|
126
|
-
.attr(
|
|
127
|
-
.attr(
|
|
128
|
-
.
|
|
121
|
+
labelsGroup
|
|
122
|
+
.append("rect")
|
|
123
|
+
.attr("class", this.embeddedLabelBgClass)
|
|
124
|
+
.attr("x", attrs.x)
|
|
125
|
+
.attr("y", attrs.y - labelBlock.node().getBBox().height / 2)
|
|
126
|
+
.attr("width", labelBlock.node().getBBox().width)
|
|
127
|
+
.attr("height", labelBlock.node().getBBox().height)
|
|
128
|
+
.style("fill", "rgba(255, 255, 255, 0.8)")
|
|
129
129
|
.lower();
|
|
130
130
|
}
|
|
131
131
|
static getLabelByIndex(labelsSelection, barIndex, valueField, dataRow) {
|
|
@@ -140,8 +140,8 @@ export class EmbeddedLabels {
|
|
|
140
140
|
return labelBlock;
|
|
141
141
|
}
|
|
142
142
|
}
|
|
143
|
-
EmbeddedLabels.embeddedLabelsGroupClass =
|
|
144
|
-
EmbeddedLabels.embeddedLabelClass =
|
|
145
|
-
EmbeddedLabels.embeddedLabelBgClass =
|
|
146
|
-
EmbeddedLabels.innerLabelColor =
|
|
147
|
-
EmbeddedLabels.outerLabelColor =
|
|
143
|
+
EmbeddedLabels.embeddedLabelsGroupClass = "embedded-labels-group";
|
|
144
|
+
EmbeddedLabels.embeddedLabelClass = "embedded-label";
|
|
145
|
+
EmbeddedLabels.embeddedLabelBgClass = "embedded-label-bg";
|
|
146
|
+
EmbeddedLabels.innerLabelColor = "#FFFFFF";
|
|
147
|
+
EmbeddedLabels.outerLabelColor = "#000000";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { BarAttrs, EmbeddedLabelPosition, LabelAttrs } from "./embeddedLabelsHelper";
|
|
2
|
-
import { BaseType, Selection } from
|
|
2
|
+
import { BaseType, Selection } from "d3-selection";
|
|
3
3
|
import { BlockMargin } from "../../../model/model";
|
|
4
4
|
import { MdtChartsDataRow, Size } from "../../../config/config";
|
|
5
5
|
export declare class EmbeddedLabelsDomHelper {
|
|
@@ -9,14 +9,11 @@ export class EmbeddedLabelsDomHelper {
|
|
|
9
9
|
.interrupt()
|
|
10
10
|
.transition()
|
|
11
11
|
.duration(transitionDuration)
|
|
12
|
-
.on(
|
|
12
|
+
.on("end", () => resolve("updated"));
|
|
13
13
|
}
|
|
14
|
-
labelBlockHandler
|
|
15
|
-
.attr('x', attrs.x)
|
|
16
|
-
.attr('y', attrs.y)
|
|
17
|
-
.attr('dominant-baseline', 'middle');
|
|
14
|
+
labelBlockHandler.attr("x", attrs.x).attr("y", attrs.y).attr("dominant-baseline", "middle");
|
|
18
15
|
if (transitionDuration <= 0)
|
|
19
|
-
resolve(
|
|
16
|
+
resolve("updated");
|
|
20
17
|
});
|
|
21
18
|
}
|
|
22
19
|
static cropText(labelBlock, barAttrs, position, labelUnserveFlag, margin, blockSize) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { BlockMargin, EmbeddedLabelTypeModel, Field, Orient } from "../../../model/model";
|
|
2
2
|
import { Size } from "../../../config/config";
|
|
3
|
-
export declare type EmbeddedLabelPosition =
|
|
4
|
-
export declare type TextAnchor =
|
|
3
|
+
export declare type EmbeddedLabelPosition = "inside" | "outside";
|
|
4
|
+
export declare type TextAnchor = "start" | "end" | "center";
|
|
5
5
|
export interface LabelAttrs {
|
|
6
6
|
x: number;
|
|
7
7
|
y: number;
|
|
@@ -2,13 +2,15 @@ export const LABEL_BAR_PADDING = 6;
|
|
|
2
2
|
export const MIN_BAR_HEIGHT_FOR_LABEL_SERVE = 12;
|
|
3
3
|
export class EmbeddedLabelsHelper {
|
|
4
4
|
static getLabelPosition(barAttrs, labelBlockWidth, margin, blockSize, labelUnserveFlag) {
|
|
5
|
-
if (labelUnserveFlag ||
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
if (labelUnserveFlag ||
|
|
6
|
+
(this.getSpaceSizeForType("inside", barAttrs.width, margin, blockSize) < labelBlockWidth &&
|
|
7
|
+
this.getSpaceSizeForType("inside", barAttrs.width, margin, blockSize) <
|
|
8
|
+
this.getSpaceSizeForType("outside", barAttrs.width, margin, blockSize)))
|
|
9
|
+
return "outside";
|
|
10
|
+
return "inside";
|
|
9
11
|
}
|
|
10
12
|
static getSpaceSizeForType(position, barWidth, margin, blockSize) {
|
|
11
|
-
if (position ===
|
|
13
|
+
if (position === "outside")
|
|
12
14
|
return blockSize.width - margin.left - margin.right - barWidth - LABEL_BAR_PADDING;
|
|
13
15
|
return barWidth - LABEL_BAR_PADDING * 2;
|
|
14
16
|
}
|
|
@@ -16,7 +18,7 @@ export class EmbeddedLabelsHelper {
|
|
|
16
18
|
const textAnchor = this.getTextAnchor(type, position, keyAxisOrient);
|
|
17
19
|
const y = this.getLabelAttrY(barAttrs.y, barAttrs.height);
|
|
18
20
|
let x = this.getLabelAttrX(barAttrs, type, position, keyAxisOrient);
|
|
19
|
-
if (textAnchor ===
|
|
21
|
+
if (textAnchor === "end") {
|
|
20
22
|
x = x - labelWidth;
|
|
21
23
|
}
|
|
22
24
|
return {
|
|
@@ -26,9 +28,9 @@ export class EmbeddedLabelsHelper {
|
|
|
26
28
|
};
|
|
27
29
|
}
|
|
28
30
|
static getLabelField(type, valueFields, keyField, index) {
|
|
29
|
-
if (type ===
|
|
31
|
+
if (type === "key")
|
|
30
32
|
return keyField;
|
|
31
|
-
if (type ===
|
|
33
|
+
if (type === "value")
|
|
32
34
|
return valueFields[index];
|
|
33
35
|
return null;
|
|
34
36
|
}
|
|
@@ -36,16 +38,16 @@ export class EmbeddedLabelsHelper {
|
|
|
36
38
|
return barHeight < MIN_BAR_HEIGHT_FOR_LABEL_SERVE;
|
|
37
39
|
}
|
|
38
40
|
static getLabelAttrX(barAttrs, type, position, keyAxisOrient) {
|
|
39
|
-
if (keyAxisOrient ===
|
|
40
|
-
if (position ===
|
|
41
|
+
if (keyAxisOrient === "left") {
|
|
42
|
+
if (position === "outside")
|
|
41
43
|
return barAttrs.x + barAttrs.width + LABEL_BAR_PADDING;
|
|
42
|
-
if (type ===
|
|
44
|
+
if (type === "key")
|
|
43
45
|
return barAttrs.x + LABEL_BAR_PADDING;
|
|
44
46
|
return barAttrs.x + barAttrs.width - LABEL_BAR_PADDING;
|
|
45
47
|
}
|
|
46
|
-
if (position ===
|
|
48
|
+
if (position === "outside")
|
|
47
49
|
return barAttrs.x - LABEL_BAR_PADDING;
|
|
48
|
-
if (type ===
|
|
50
|
+
if (type === "key")
|
|
49
51
|
return barAttrs.x + barAttrs.width - LABEL_BAR_PADDING;
|
|
50
52
|
return barAttrs.x + LABEL_BAR_PADDING;
|
|
51
53
|
}
|
|
@@ -53,13 +55,13 @@ export class EmbeddedLabelsHelper {
|
|
|
53
55
|
return barY + barHeight / 2 + 1;
|
|
54
56
|
}
|
|
55
57
|
static getTextAnchor(type, position, keyAxisOrient) {
|
|
56
|
-
if (keyAxisOrient ===
|
|
57
|
-
if (position ===
|
|
58
|
-
return
|
|
59
|
-
return
|
|
58
|
+
if (keyAxisOrient === "left") {
|
|
59
|
+
if (position === "outside" || type === "key")
|
|
60
|
+
return "start";
|
|
61
|
+
return "end";
|
|
60
62
|
}
|
|
61
|
-
if (position ===
|
|
62
|
-
return
|
|
63
|
-
return
|
|
63
|
+
if (position === "outside" || type === "key")
|
|
64
|
+
return "end";
|
|
65
|
+
return "start";
|
|
64
66
|
}
|
|
65
67
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { AxisScale } from "d3-axis";
|
|
2
2
|
import { Size } from "../../../config/config";
|
|
3
3
|
import { AxisModelOptions, BlockMargin } from "../../../model/model";
|
|
4
|
-
export declare type GridLineType =
|
|
4
|
+
export declare type GridLineType = "key" | "value";
|
|
5
5
|
export interface GridLineAttributes {
|
|
6
6
|
x1: number;
|
|
7
7
|
y1: number;
|
|
@@ -3,15 +3,15 @@ export class GridLineHelper {
|
|
|
3
3
|
static getGridLineLength(gridLineType, keyAxis, valueAxis, blockSize, margin) {
|
|
4
4
|
let axis;
|
|
5
5
|
let axisLength;
|
|
6
|
-
if (gridLineType ===
|
|
6
|
+
if (gridLineType === "key")
|
|
7
7
|
axis = keyAxis;
|
|
8
8
|
else
|
|
9
9
|
axis = valueAxis;
|
|
10
|
-
if (axis.orient ===
|
|
10
|
+
if (axis.orient === "left" || axis.orient === "right")
|
|
11
11
|
axisLength = blockSize.width - margin.left - margin.right;
|
|
12
12
|
else
|
|
13
13
|
axisLength = blockSize.height - margin.top - margin.bottom;
|
|
14
|
-
if (axis.orient ===
|
|
14
|
+
if (axis.orient === "right" || axis.orient === "bottom")
|
|
15
15
|
axisLength = -axisLength;
|
|
16
16
|
return axisLength;
|
|
17
17
|
}
|
|
@@ -22,7 +22,7 @@ export class GridLineHelper {
|
|
|
22
22
|
x2: 0,
|
|
23
23
|
y2: 0
|
|
24
24
|
};
|
|
25
|
-
if (axis.orient ===
|
|
25
|
+
if (axis.orient === "left" || axis.orient === "right")
|
|
26
26
|
attributes.x2 = lineLength;
|
|
27
27
|
else
|
|
28
28
|
attributes.y2 = lineLength;
|
|
@@ -39,7 +39,7 @@ export class GridLineHelper {
|
|
|
39
39
|
const scaledEnd = scaleValue(scaleValue.domain()[1]);
|
|
40
40
|
const minCoord = min([scaledStart, scaledEnd]) - scaleValue(0);
|
|
41
41
|
const maxCoord = max([scaledStart, scaledEnd]) - scaleValue(0);
|
|
42
|
-
if (axis.orient ===
|
|
42
|
+
if (axis.orient === "left" || axis.orient === "right") {
|
|
43
43
|
attributes.x1 = minCoord;
|
|
44
44
|
attributes.x2 = maxCoord;
|
|
45
45
|
}
|