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,6 +1,6 @@
|
|
|
1
|
-
import { interpolateNumber } from
|
|
2
|
-
import { Helper } from
|
|
3
|
-
import { ValueFormatter } from
|
|
1
|
+
import { interpolateNumber } from "d3-interpolate";
|
|
2
|
+
import { Helper } from "../../helpers/helper";
|
|
3
|
+
import { ValueFormatter } from "../../valueFormatter";
|
|
4
4
|
export class Aggregator {
|
|
5
5
|
static render(block, valueField, innerRadius, translate, fontSize, settings) {
|
|
6
6
|
const aggregator = this.buildConfig(valueField, settings);
|
|
@@ -23,17 +23,17 @@ export class Aggregator {
|
|
|
23
23
|
const aggregatorObject = this.renderAggregatorObject(block, innerRadius, translate);
|
|
24
24
|
const wrapper = this.renderWrapper(aggregatorObject);
|
|
25
25
|
wrapper
|
|
26
|
-
.append(
|
|
27
|
-
.attr(
|
|
28
|
-
.attr(
|
|
29
|
-
.style(
|
|
30
|
-
.style(
|
|
26
|
+
.append("div")
|
|
27
|
+
.attr("class", this.aggregatorValueClass)
|
|
28
|
+
.attr("title", this.formatValue(aggregatorInfo.format, aggregatorInfo.value))
|
|
29
|
+
.style("text-align", "center")
|
|
30
|
+
.style("font-size", `${fontSize}px`)
|
|
31
31
|
.text(this.formatValue(aggregatorInfo.format, aggregatorInfo.value));
|
|
32
32
|
const titleBlock = wrapper
|
|
33
|
-
.append(
|
|
34
|
-
.attr(
|
|
35
|
-
.attr(
|
|
36
|
-
.style(
|
|
33
|
+
.append("div")
|
|
34
|
+
.attr("class", this.aggregatorTitleClass)
|
|
35
|
+
.attr("title", aggregatorInfo.name)
|
|
36
|
+
.style("text-align", "center")
|
|
37
37
|
.text(aggregatorInfo.name);
|
|
38
38
|
this.setTitleFontSize(titleBlock, innerRadius);
|
|
39
39
|
this.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, aggregatorInfo.marginInPercent);
|
|
@@ -45,11 +45,9 @@ export class Aggregator {
|
|
|
45
45
|
return ValueFormatter.formatField(format, value);
|
|
46
46
|
}
|
|
47
47
|
static updateText(block, newAggregator, withoutAnimation) {
|
|
48
|
-
const aggregatorObject = block.getSvg()
|
|
49
|
-
.select(`.${this.aggregatorObjectClass}`);
|
|
48
|
+
const aggregatorObject = block.getSvg().select(`.${this.aggregatorObjectClass}`);
|
|
50
49
|
const thisClass = this;
|
|
51
|
-
const valueBlock = block.getSvg()
|
|
52
|
-
.select(`.${this.aggregatorValueClass}`);
|
|
50
|
+
const valueBlock = block.getSvg().select(`.${this.aggregatorValueClass}`);
|
|
53
51
|
if (withoutAnimation) {
|
|
54
52
|
valueBlock.text(this.formatValue(newAggregator.format, newAggregator.value));
|
|
55
53
|
return;
|
|
@@ -60,53 +58,53 @@ export class Aggregator {
|
|
|
60
58
|
.duration(block.transitionManager.durations.chartUpdate)
|
|
61
59
|
.tween("text", function () {
|
|
62
60
|
const newValue = typeof newAggregator.value === "string" ? parseFloat(newAggregator.value) : newAggregator.value;
|
|
63
|
-
const oldValue = Helper.parseFormattedToNumber(this.textContent,
|
|
61
|
+
const oldValue = Helper.parseFormattedToNumber(this.textContent, ",");
|
|
64
62
|
const precision = Helper.calcDigitsAfterDot(newValue);
|
|
65
63
|
const interpolateFunc = interpolateNumber(oldValue, newValue);
|
|
66
|
-
return t => {
|
|
67
|
-
this.textContent = thisClass.formatValue(newAggregator.format, parseFloat(
|
|
64
|
+
return (t) => {
|
|
65
|
+
this.textContent = thisClass.formatValue(newAggregator.format, parseFloat(interpolateFunc(t).toFixed(precision)));
|
|
68
66
|
thisClass.reCalculateAggregatorFontSize(aggregatorObject.node().getBoundingClientRect().width, block, newAggregator.marginInPercent);
|
|
69
67
|
};
|
|
70
68
|
});
|
|
71
69
|
}
|
|
72
70
|
static reCalculateAggregatorFontSize(wrapperSize, block, pad) {
|
|
73
|
-
const aggregatorValue = block.getSvg()
|
|
74
|
-
.select(`.${this.aggregatorValueClass}`);
|
|
71
|
+
const aggregatorValue = block.getSvg().select(`.${this.aggregatorValueClass}`);
|
|
75
72
|
const sizeCoefficient = 0.25;
|
|
76
73
|
let fontSize = wrapperSize * sizeCoefficient;
|
|
77
|
-
aggregatorValue.style(
|
|
78
|
-
const margin = pad / 100 * wrapperSize;
|
|
74
|
+
aggregatorValue.style("font-size", `${fontSize}px`);
|
|
75
|
+
const margin = (pad / 100) * wrapperSize;
|
|
79
76
|
while (aggregatorValue.node().getBoundingClientRect().width > wrapperSize - margin * 2 && fontSize > 12) {
|
|
80
|
-
aggregatorValue.style(
|
|
77
|
+
aggregatorValue.style("font-size", `${(fontSize -= 2)}px`);
|
|
81
78
|
}
|
|
82
79
|
}
|
|
83
80
|
static setTitleFontSize(aggregatorTitle, innerRadius) {
|
|
84
81
|
const sizeCoefficient = 0.15;
|
|
85
|
-
aggregatorTitle.style(
|
|
86
|
-
aggregatorTitle.style(
|
|
82
|
+
aggregatorTitle.style("font-size", `${Math.round(innerRadius * sizeCoefficient)}px`);
|
|
83
|
+
aggregatorTitle.style("max-height", `${sizeCoefficient * 100}%`);
|
|
87
84
|
}
|
|
88
85
|
static renderAggregatorObject(block, innerRadius, translate) {
|
|
89
|
-
return block
|
|
90
|
-
.
|
|
91
|
-
.
|
|
92
|
-
.attr(
|
|
93
|
-
.attr(
|
|
94
|
-
.attr(
|
|
95
|
-
.attr(
|
|
96
|
-
.
|
|
86
|
+
return block
|
|
87
|
+
.getSvg()
|
|
88
|
+
.append("foreignObject")
|
|
89
|
+
.attr("class", this.aggregatorObjectClass)
|
|
90
|
+
.attr("transform-origin", "center")
|
|
91
|
+
.attr("width", innerRadius * 2)
|
|
92
|
+
.attr("height", innerRadius * 2)
|
|
93
|
+
.attr("transform", `translate(${translate.x - innerRadius}, ${translate.y - innerRadius})`)
|
|
94
|
+
.style("pointer-events", `none`);
|
|
97
95
|
}
|
|
98
96
|
static renderWrapper(aggregatorObject) {
|
|
99
97
|
return aggregatorObject
|
|
100
|
-
.append(
|
|
101
|
-
.style(
|
|
102
|
-
.style(
|
|
103
|
-
.style(
|
|
104
|
-
.style(
|
|
105
|
-
.style(
|
|
106
|
-
.style(
|
|
107
|
-
.style(
|
|
98
|
+
.append("xhtml:div")
|
|
99
|
+
.style("width", "100%")
|
|
100
|
+
.style("height", "100%")
|
|
101
|
+
.style("border-radius", "50%")
|
|
102
|
+
.style("display", "flex")
|
|
103
|
+
.style("flex-direction", "column")
|
|
104
|
+
.style("justify-content", "center")
|
|
105
|
+
.style("align-items", "center");
|
|
108
106
|
}
|
|
109
107
|
}
|
|
110
|
-
Aggregator.aggregatorValueClass =
|
|
111
|
-
Aggregator.aggregatorTitleClass =
|
|
112
|
-
Aggregator.aggregatorObjectClass =
|
|
108
|
+
Aggregator.aggregatorValueClass = "aggregator-value";
|
|
109
|
+
Aggregator.aggregatorTitleClass = "aggregator-name";
|
|
110
|
+
Aggregator.aggregatorObjectClass = "aggregator-object";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { AxisModelOptions, IAxisModel, IScaleModel } from "../../../model/model";
|
|
2
2
|
import { Block } from "../../block/block";
|
|
3
3
|
import { ScalesWithSecondary } from "../scale/scale";
|
|
4
|
-
import { Size } from
|
|
4
|
+
import { Size } from "../../../config/config";
|
|
5
5
|
export declare class Axis {
|
|
6
6
|
static axesClass: string;
|
|
7
7
|
static render(block: Block, scales: ScalesWithSecondary, scaleModel: IScaleModel, axisModel: IAxisModel, blockSize: Size): void;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { Scale } from "../scale/scale";
|
|
2
|
-
import { NamesHelper } from
|
|
3
|
-
import { AxisHelper } from
|
|
4
|
-
import { AxisLabelHelper } from
|
|
5
|
-
import { AxisDomHelper } from
|
|
6
|
-
import { select } from
|
|
7
|
-
import { AxisLabelsEventManager } from
|
|
8
|
-
import { AXIS_VERTICAL_LABEL_PADDING } from
|
|
2
|
+
import { NamesHelper } from "../../helpers/namesHelper";
|
|
3
|
+
import { AxisHelper } from "./axisHelper";
|
|
4
|
+
import { AxisLabelHelper } from "./axisLabelDomHelper";
|
|
5
|
+
import { AxisDomHelper } from "./axisDomHelper";
|
|
6
|
+
import { select } from "d3-selection";
|
|
7
|
+
import { AxisLabelsEventManager } from "./axisLabelsEventManager";
|
|
8
|
+
import { AXIS_VERTICAL_LABEL_PADDING } from "../../../model/margin/twoDim/twoDimMarginModel";
|
|
9
9
|
const MINIMAL_STEP_SIZE_FOR_WRAPPING = 38;
|
|
10
10
|
export class Axis {
|
|
11
11
|
static render(block, scales, scaleModel, axisModel, blockSize) {
|
|
@@ -31,35 +31,39 @@ export class Axis {
|
|
|
31
31
|
axisElement.raise();
|
|
32
32
|
}
|
|
33
33
|
static findAxis(block, axisCssClass) {
|
|
34
|
-
return block.getSvg()
|
|
35
|
-
.select(`g.${axisCssClass}`);
|
|
34
|
+
return block.getSvg().select(`g.${axisCssClass}`);
|
|
36
35
|
}
|
|
37
36
|
static renderAxis(block, scale, scaleOptions, axisOptions, blockSize) {
|
|
38
37
|
const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scale);
|
|
39
|
-
if (axisOptions.type ===
|
|
40
|
-
AxisHelper.setValueAxisLabelsSettings(axisGenerator,
|
|
38
|
+
if (axisOptions.type === "value" && scaleOptions.type === "linear")
|
|
39
|
+
AxisHelper.setValueAxisLabelsSettings(axisGenerator, scaleOptions, axisOptions.labels);
|
|
41
40
|
else
|
|
42
41
|
axisGenerator.tickFormat(axisOptions.labels.showTick);
|
|
43
|
-
const axisElement = block
|
|
44
|
-
.
|
|
45
|
-
.
|
|
42
|
+
const axisElement = block
|
|
43
|
+
.getSvg()
|
|
44
|
+
.append("g")
|
|
45
|
+
.attr("class", `${this.axesClass} ${axisOptions.cssClass} data-label`);
|
|
46
46
|
AxisDomHelper.updateAxisElement(axisGenerator, axisElement, axisOptions.translate);
|
|
47
47
|
if (!axisOptions.line.visible)
|
|
48
|
-
axisElement.select(
|
|
48
|
+
axisElement.select(".domain").style("display", "none");
|
|
49
49
|
if (!axisOptions.labels.visible) {
|
|
50
50
|
AxisLabelHelper.hideLabels(axisElement);
|
|
51
51
|
return;
|
|
52
52
|
}
|
|
53
|
-
if (axisOptions.type ===
|
|
54
|
-
if (axisOptions.labels.position ===
|
|
53
|
+
if (axisOptions.type === "key") {
|
|
54
|
+
if (axisOptions.labels.position === "rotated" &&
|
|
55
|
+
(axisOptions.orient === "top" || axisOptions.orient === "bottom"))
|
|
55
56
|
AxisLabelHelper.rotateLabels(axisElement, axisOptions.orient);
|
|
56
|
-
if ((axisOptions.orient ===
|
|
57
|
-
|
|
57
|
+
if ((axisOptions.orient === "left" || axisOptions.orient === "right") &&
|
|
58
|
+
Scale.getScaleStep(scale) >= MINIMAL_STEP_SIZE_FOR_WRAPPING)
|
|
59
|
+
axisElement
|
|
60
|
+
.selectAll(".tick text")
|
|
61
|
+
.call(AxisLabelHelper.wrapHandler, axisOptions.labels.maxSize);
|
|
58
62
|
else
|
|
59
63
|
AxisLabelHelper.cropLabels(block, scale, scaleOptions, axisOptions, blockSize);
|
|
60
64
|
AxisLabelHelper.alignLabelsInKeyAxis(axisOptions, axisElement);
|
|
61
65
|
AxisLabelsEventManager.setHoverEvents(block, axisElement);
|
|
62
|
-
block.filterEventManager.eventEmitter.subscribe(
|
|
66
|
+
block.filterEventManager.eventEmitter.subscribe("change", (selectedKeys) => {
|
|
63
67
|
this.handleLabelsHighlight(axisElement, selectedKeys);
|
|
64
68
|
});
|
|
65
69
|
}
|
|
@@ -71,38 +75,36 @@ export class Axis {
|
|
|
71
75
|
}
|
|
72
76
|
static updateValueAxis(block, scaleValue, scaleOptions, axisOptions, blockSize) {
|
|
73
77
|
const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scaleValue);
|
|
74
|
-
AxisHelper.setValueAxisLabelsSettings(axisGenerator,
|
|
78
|
+
AxisHelper.setValueAxisLabelsSettings(axisGenerator, scaleOptions, axisOptions.labels);
|
|
75
79
|
const axisElement = block.getSvg().select(`g.${axisOptions.cssClass}`);
|
|
76
|
-
AxisDomHelper.updateAxisElement(axisGenerator, axisElement, axisOptions.translate, block.transitionManager.durations.chartUpdate)
|
|
77
|
-
.then(() => {
|
|
80
|
+
AxisDomHelper.updateAxisElement(axisGenerator, axisElement, axisOptions.translate, block.transitionManager.durations.chartUpdate).then(() => {
|
|
78
81
|
if (axisOptions.labels.defaultTooltip)
|
|
79
82
|
AxisLabelHelper.setTitles(axisElement, axisOptions);
|
|
80
|
-
if (axisOptions.orient ===
|
|
83
|
+
if (axisOptions.orient === "bottom" || axisOptions.orient === "top") {
|
|
81
84
|
AxisLabelHelper.cropLabels(block, scaleValue, scaleOptions, axisOptions, blockSize);
|
|
82
85
|
}
|
|
83
86
|
});
|
|
84
87
|
}
|
|
85
88
|
static updateKeyAxis(block, scaleKey, scaleOptions, axisOptions, blockSize, domainNotUpdated) {
|
|
86
89
|
const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scaleKey);
|
|
87
|
-
if (axisOptions.labels.position ===
|
|
88
|
-
|
|
90
|
+
if (axisOptions.labels.position === "rotated") {
|
|
91
|
+
// Задание координат для перевернутых лейблов (если до этого они не были перевернуты)
|
|
92
|
+
if (axisOptions.orient === "bottom")
|
|
89
93
|
axisGenerator.tickPadding(-4);
|
|
90
|
-
else if (axisOptions.orient ===
|
|
94
|
+
else if (axisOptions.orient === "top")
|
|
91
95
|
axisGenerator.tickPadding(-6);
|
|
92
96
|
}
|
|
93
97
|
axisGenerator.tickFormat(axisOptions.labels.showTick);
|
|
94
|
-
const axisElement = block.getSvg()
|
|
95
|
-
.select(`g.${axisOptions.cssClass}`);
|
|
98
|
+
const axisElement = block.getSvg().select(`g.${axisOptions.cssClass}`);
|
|
96
99
|
AxisLabelsEventManager.removeEvents(axisElement);
|
|
97
|
-
if (axisOptions.orient ===
|
|
98
|
-
axisElement.selectAll(
|
|
99
|
-
if (axisOptions.orient ===
|
|
100
|
+
if (axisOptions.orient === "left" || axisOptions.orient === "right") {
|
|
101
|
+
axisElement.selectAll(".tick text").attr("y", null);
|
|
102
|
+
if (axisOptions.orient === "left")
|
|
100
103
|
axisGenerator.tickPadding(axisOptions.labels.maxSize + AXIS_VERTICAL_LABEL_PADDING);
|
|
101
104
|
}
|
|
102
105
|
// Если ключи оси не меняются, то обновление происходит без анимации
|
|
103
|
-
AxisDomHelper.updateAxisElement(axisGenerator, axisElement, axisOptions.translate, domainNotUpdated ? 0 : block.transitionManager.durations.chartUpdate)
|
|
104
|
-
.
|
|
105
|
-
if (axisOptions.orient === 'bottom' || axisOptions.orient === 'top') {
|
|
106
|
+
AxisDomHelper.updateAxisElement(axisGenerator, axisElement, axisOptions.translate, domainNotUpdated ? 0 : block.transitionManager.durations.chartUpdate).then(() => {
|
|
107
|
+
if (axisOptions.orient === "bottom" || axisOptions.orient === "top") {
|
|
106
108
|
AxisLabelHelper.cropLabels(block, scaleKey, scaleOptions, axisOptions, blockSize);
|
|
107
109
|
}
|
|
108
110
|
AxisLabelsEventManager.setHoverEvents(block, axisElement);
|
|
@@ -117,26 +119,29 @@ export class Axis {
|
|
|
117
119
|
if (frame < 10)
|
|
118
120
|
requestAnimationFrame(labelHandler);
|
|
119
121
|
if (frame === 2) {
|
|
120
|
-
axisElement.selectAll(
|
|
121
|
-
if (scaleKey.domain().findIndex(key => key === d) === -1) {
|
|
122
|
-
select(this).style(
|
|
122
|
+
axisElement.selectAll(".tick").each(function (d) {
|
|
123
|
+
if (scaleKey.domain().findIndex((key) => key === d) === -1) {
|
|
124
|
+
select(this).style("opacity", 0);
|
|
123
125
|
}
|
|
124
126
|
else {
|
|
125
|
-
select(this).style(
|
|
127
|
+
select(this).style("opacity", 1);
|
|
126
128
|
}
|
|
127
129
|
});
|
|
128
130
|
}
|
|
129
|
-
if (axisOptions.orient ===
|
|
131
|
+
if (axisOptions.orient === "left" || axisOptions.orient === "right") {
|
|
130
132
|
if (Scale.getScaleStep(scaleKey) >= MINIMAL_STEP_SIZE_FOR_WRAPPING)
|
|
131
|
-
axisElement
|
|
133
|
+
axisElement
|
|
134
|
+
.selectAll(".tick text")
|
|
135
|
+
.call(AxisLabelHelper.wrapHandler, axisOptions.labels.maxSize);
|
|
132
136
|
else
|
|
133
137
|
AxisLabelHelper.cropLabels(block, scaleKey, scaleOptions, axisOptions, blockSize);
|
|
134
138
|
AxisLabelHelper.alignLabelsInKeyAxis(axisOptions, axisElement);
|
|
135
139
|
}
|
|
136
|
-
if (axisOptions.orient ===
|
|
137
|
-
if (axisOptions.labels.position ===
|
|
140
|
+
if (axisOptions.orient === "bottom" || axisOptions.orient === "top") {
|
|
141
|
+
if (axisOptions.labels.position === "rotated")
|
|
138
142
|
AxisLabelHelper.rotateLabels(axisElement, axisOptions.orient);
|
|
139
|
-
if (axisOptions.labels.position ===
|
|
143
|
+
if (axisOptions.labels.position === "straight")
|
|
144
|
+
// Обратное выравнивание лейблов, если они были перевернуты, но теперь могут отображаться прямо
|
|
140
145
|
AxisDomHelper.rotateElementsBack(axisElement);
|
|
141
146
|
AxisLabelHelper.cropLabels(block, scaleKey, scaleOptions, axisOptions, blockSize);
|
|
142
147
|
}
|
|
@@ -144,14 +149,14 @@ export class Axis {
|
|
|
144
149
|
requestAnimationFrame(labelHandler);
|
|
145
150
|
}
|
|
146
151
|
static handleLabelsHighlight(axisElement, selectedKeys) {
|
|
147
|
-
const labels = axisElement.selectAll(
|
|
152
|
+
const labels = axisElement.selectAll(".tick text");
|
|
148
153
|
if (selectedKeys.length === 0)
|
|
149
|
-
labels.classed(
|
|
154
|
+
labels.classed("mdt-charts-opacity-inactive", false);
|
|
150
155
|
else
|
|
151
156
|
labels.each(function (data) {
|
|
152
157
|
const isActive = selectedKeys.includes(data);
|
|
153
|
-
select(this).classed(
|
|
158
|
+
select(this).classed("mdt-charts-opacity-inactive", !isActive);
|
|
154
159
|
});
|
|
155
160
|
}
|
|
156
161
|
}
|
|
157
|
-
Axis.axesClass = NamesHelper.getClassName(
|
|
162
|
+
Axis.axesClass = NamesHelper.getClassName("axis");
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Selection, BaseType } from
|
|
2
|
-
import { Axis as IAxis } from
|
|
3
|
-
import { TranslateModel } from
|
|
1
|
+
import { Selection, BaseType } from "d3-selection";
|
|
2
|
+
import { Axis as IAxis } from "d3-axis";
|
|
3
|
+
import { TranslateModel } from "../../../model/model";
|
|
4
4
|
export declare class AxisDomHelper {
|
|
5
5
|
static updateAxisElement(axisGenerator: IAxis<any>, axisElement: Selection<SVGGElement, any, BaseType, any>, translate: TranslateModel, transitionDuration?: number): Promise<string>;
|
|
6
6
|
static rotateElementsBack(axisElement: Selection<SVGGElement, unknown, HTMLElement, any>): void;
|
|
@@ -1,24 +1,22 @@
|
|
|
1
1
|
export class AxisDomHelper {
|
|
2
2
|
static updateAxisElement(axisGenerator, axisElement, translate, transitionDuration = 0) {
|
|
3
|
-
return new Promise(resolve => {
|
|
3
|
+
return new Promise((resolve) => {
|
|
4
4
|
let axisHandler = axisElement;
|
|
5
5
|
if (transitionDuration > 0) {
|
|
6
6
|
axisHandler = axisHandler
|
|
7
7
|
.interrupt()
|
|
8
8
|
.transition()
|
|
9
9
|
.duration(transitionDuration)
|
|
10
|
-
.on(
|
|
10
|
+
.on("end", () => resolve("updated"));
|
|
11
11
|
}
|
|
12
|
-
axisHandler
|
|
12
|
+
axisHandler
|
|
13
|
+
.attr("transform", `translate(${translate.translateX}, ${translate.translateY})`)
|
|
13
14
|
.call(axisGenerator.bind(this));
|
|
14
15
|
if (transitionDuration <= 0)
|
|
15
|
-
resolve(
|
|
16
|
+
resolve("updated");
|
|
16
17
|
});
|
|
17
18
|
}
|
|
18
19
|
static rotateElementsBack(axisElement) {
|
|
19
|
-
axisElement.selectAll(
|
|
20
|
-
.attr('transform', null)
|
|
21
|
-
.attr('text-anchor', 'middle')
|
|
22
|
-
.attr('x', null);
|
|
20
|
+
axisElement.selectAll(".tick text").attr("transform", null).attr("text-anchor", "middle").attr("x", null);
|
|
23
21
|
}
|
|
24
22
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { AxisScale, Axis as IAxis } from
|
|
1
|
+
import { AxisScale, Axis as IAxis } from "d3-axis";
|
|
2
2
|
import { AxisLabelModel, AxisModelOptions, Orient, ScaleValueModel } from "../../../model/model";
|
|
3
3
|
export declare class AxisHelper {
|
|
4
4
|
static getAxisByOrient(orient: Orient, scale: AxisScale<any>): IAxis<any>;
|
|
5
|
-
static setValueAxisLabelsSettings(axisGenerator: IAxis<any>,
|
|
5
|
+
static setValueAxisLabelsSettings(axisGenerator: IAxis<any>, scaleOptions: ScaleValueModel, labelsOptions: AxisLabelModel): void;
|
|
6
6
|
static getBaseAxisGenerator(axisOptions: AxisModelOptions, scale: AxisScale<any>): IAxis<any>;
|
|
7
7
|
private static removeTicks;
|
|
8
8
|
private static setNumTickFormat;
|
|
@@ -1,30 +1,23 @@
|
|
|
1
|
-
import { axisTop, axisBottom, axisLeft, axisRight } from
|
|
2
|
-
import { format } from
|
|
3
|
-
import { AxisLabelHelper } from
|
|
4
|
-
import { max, min } from 'd3-array';
|
|
5
|
-
import { AxisModel } from "../../../model/featuresModel/axisModel";
|
|
1
|
+
import { axisTop, axisBottom, axisLeft, axisRight } from "d3-axis";
|
|
2
|
+
import { format } from "d3-format";
|
|
3
|
+
import { AxisLabelHelper } from "./axisLabelDomHelper";
|
|
6
4
|
export class AxisHelper {
|
|
7
5
|
static getAxisByOrient(orient, scale) {
|
|
8
|
-
if (orient ===
|
|
6
|
+
if (orient === "top")
|
|
9
7
|
return axisTop(scale);
|
|
10
|
-
if (orient ===
|
|
8
|
+
if (orient === "bottom")
|
|
11
9
|
return axisBottom(scale);
|
|
12
|
-
if (orient ===
|
|
10
|
+
if (orient === "left")
|
|
13
11
|
return axisLeft(scale);
|
|
14
|
-
if (orient ===
|
|
12
|
+
if (orient === "right")
|
|
15
13
|
return axisRight(scale);
|
|
16
14
|
}
|
|
17
|
-
static setValueAxisLabelsSettings(axisGenerator,
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
if (
|
|
21
|
-
axisGenerator.
|
|
22
|
-
|
|
23
|
-
else {
|
|
24
|
-
const roundedMaxValue = AxisModel.getRoundValue(max(scaleOptions.domain));
|
|
25
|
-
axisGenerator.tickValues([min(scaleOptions.domain), roundedMaxValue]);
|
|
26
|
-
}
|
|
27
|
-
if (scaleOptions.type === 'linear') {
|
|
15
|
+
static setValueAxisLabelsSettings(axisGenerator, scaleOptions, labelsOptions) {
|
|
16
|
+
if (labelsOptions.tickAmountSettings.policy.type === "amount")
|
|
17
|
+
axisGenerator.ticks(labelsOptions.tickAmountSettings.policy.amount);
|
|
18
|
+
if (labelsOptions.tickAmountSettings.policy.type === "constant")
|
|
19
|
+
axisGenerator.tickValues(labelsOptions.tickAmountSettings.policy.values);
|
|
20
|
+
if (scaleOptions.type === "linear") {
|
|
28
21
|
this.setNumTickFormat(axisGenerator, scaleOptions.formatter);
|
|
29
22
|
}
|
|
30
23
|
}
|
|
@@ -39,7 +32,7 @@ export class AxisHelper {
|
|
|
39
32
|
axis.tickSize(0);
|
|
40
33
|
}
|
|
41
34
|
static setNumTickFormat(axis, formatter) {
|
|
42
|
-
const defaultFormatter = format(
|
|
35
|
+
const defaultFormatter = format("~s");
|
|
43
36
|
axis.tickFormat(formatter !== null && formatter !== void 0 ? formatter : defaultFormatter);
|
|
44
37
|
}
|
|
45
38
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { Selection, BaseType } from
|
|
2
|
-
import { AxisScale, Axis as IAxis } from
|
|
1
|
+
import { Selection, BaseType } from "d3-selection";
|
|
2
|
+
import { AxisScale, Axis as IAxis } from "d3-axis";
|
|
3
3
|
import { AxisModelOptions, Orient, ScaleKeyModel, ScaleValueModel } from "../../../model/model";
|
|
4
4
|
import { Block } from "../../block/block";
|
|
5
|
-
import { Size } from
|
|
5
|
+
import { Size } from "../../../config/config";
|
|
6
6
|
export declare class AxisLabelHelper {
|
|
7
7
|
static setTitles(axisElement: Selection<SVGGElement, unknown, BaseType, any>, axisOptions: AxisModelOptions): void;
|
|
8
8
|
static setAxisLabelPaddingByOrient(axis: IAxis<any>, axisOptions: AxisModelOptions): void;
|