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,26 +1,28 @@
|
|
|
1
|
-
import { select } from
|
|
2
|
-
import { transition } from
|
|
3
|
-
import { DomHelper } from
|
|
4
|
-
import { Helper } from
|
|
5
|
-
import { NamesHelper } from
|
|
1
|
+
import { select } from "d3-selection";
|
|
2
|
+
import { transition } from "d3-transition";
|
|
3
|
+
import { DomHelper } from "../../helpers/domHelper";
|
|
4
|
+
import { Helper } from "../../helpers/helper";
|
|
5
|
+
import { NamesHelper } from "../../helpers/namesHelper";
|
|
6
6
|
import { MarkDotHelper } from "./markDotsHelper";
|
|
7
7
|
select.prototype.transition = transition;
|
|
8
8
|
export class MarkDot {
|
|
9
9
|
static render(block, data, keyAxisOrient, scales, margin, keyFieldName, vfIndex, valueFieldName, chart) {
|
|
10
|
-
const dotsWrapper = block.svg
|
|
10
|
+
const dotsWrapper = block.svg
|
|
11
|
+
.getChartGroup(chart.index)
|
|
11
12
|
.selectAll(`.${this.markerDotClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-index-${vfIndex}`)
|
|
12
|
-
.data(data.map(row => (Object.assign(Object.assign({}, row), { $mdtChartsMetadata: { valueFieldName } }))))
|
|
13
|
+
.data(data.map((row) => (Object.assign(Object.assign({}, row), { $mdtChartsMetadata: { valueFieldName } }))))
|
|
13
14
|
.enter();
|
|
14
15
|
const attrs = MarkDotHelper.getDotAttrs(keyAxisOrient, scales, margin, keyFieldName, valueFieldName, chart.isSegmented);
|
|
15
|
-
const dots = dotsWrapper.append(
|
|
16
|
+
const dots = dotsWrapper.append("circle");
|
|
16
17
|
this.setAttrs(block, dots, attrs, chart.markersOptions.styles);
|
|
17
18
|
this.setClassesAndStyle(dots, chart.cssClasses, vfIndex, chart.style.elementColors);
|
|
18
19
|
MarkDot.tryMakeMarkDotVisible(dots, chart.markersOptions, false);
|
|
19
20
|
}
|
|
20
21
|
static update(block, newData, keyAxisOrient, scales, margin, keyFieldName, vfIndex, valueFieldName, chart) {
|
|
21
|
-
const dots = block.svg
|
|
22
|
+
const dots = block.svg
|
|
23
|
+
.getChartGroup(chart.index)
|
|
22
24
|
.selectAll(`.${this.markerDotClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${vfIndex}`)
|
|
23
|
-
.data(newData.map(row => (Object.assign(Object.assign({}, row), { $mdtChartsMetadata: { valueFieldName } }))));
|
|
25
|
+
.data(newData.map((row) => (Object.assign(Object.assign({}, row), { $mdtChartsMetadata: { valueFieldName } }))));
|
|
24
26
|
dots.exit().remove();
|
|
25
27
|
dots.each(function (datum) {
|
|
26
28
|
if (chart.markersOptions.show({ row: datum, valueFieldName })) {
|
|
@@ -28,33 +30,33 @@ export class MarkDot {
|
|
|
28
30
|
}
|
|
29
31
|
});
|
|
30
32
|
const attrs = MarkDotHelper.getDotAttrs(keyAxisOrient, scales, margin, keyFieldName, valueFieldName, chart.isSegmented);
|
|
31
|
-
const newDots = dots
|
|
32
|
-
.enter()
|
|
33
|
-
.append('circle');
|
|
33
|
+
const newDots = dots.enter().append("circle");
|
|
34
34
|
this.setAttrs(block, newDots, attrs, chart.markersOptions.styles);
|
|
35
35
|
this.setClassesAndStyle(newDots, chart.cssClasses, vfIndex, chart.style.elementColors);
|
|
36
36
|
MarkDot.tryMakeMarkDotVisible(newDots, chart.markersOptions, false);
|
|
37
|
-
const animationName =
|
|
38
|
-
dots
|
|
39
|
-
.interrupt(animationName)
|
|
37
|
+
const animationName = "data-updating";
|
|
38
|
+
dots.interrupt(animationName)
|
|
40
39
|
.transition(animationName)
|
|
41
40
|
.duration(block.transitionManager.durations.chartUpdate)
|
|
42
|
-
.attr(
|
|
43
|
-
.attr(
|
|
41
|
+
.attr("cx", (d) => attrs.cx(d))
|
|
42
|
+
.attr("cy", (d) => attrs.cy(d));
|
|
44
43
|
}
|
|
45
44
|
static updateColors(block, chart, valueFieldIndex) {
|
|
46
|
-
const dots = block.svg
|
|
45
|
+
const dots = block.svg
|
|
46
|
+
.getChartGroup(chart.index)
|
|
47
47
|
.selectAll(`.${this.markerDotClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueFieldIndex}`);
|
|
48
|
-
DomHelper.setChartElementColor(dots, chart.style.elementColors, valueFieldIndex,
|
|
48
|
+
DomHelper.setChartElementColor(dots, chart.style.elementColors, valueFieldIndex, "stroke");
|
|
49
49
|
}
|
|
50
50
|
static getMarkDotForChart(block, chartCssClasses) {
|
|
51
|
-
return block.getSvg()
|
|
52
|
-
.selectAll(`.${MarkDot.markerDotClass}${Helper.getCssClassesLine(chartCssClasses)}`);
|
|
51
|
+
return block.getSvg().selectAll(`.${MarkDot.markerDotClass}${Helper.getCssClassesLine(chartCssClasses)}`);
|
|
53
52
|
}
|
|
54
53
|
static tryMakeMarkDotVisible(elems, markersOptions, turnOnIfCan) {
|
|
55
54
|
elems.each(function (datum) {
|
|
56
55
|
var _a;
|
|
57
|
-
if (!markersOptions.show({
|
|
56
|
+
if (!markersOptions.show({
|
|
57
|
+
row: datum,
|
|
58
|
+
valueFieldName: (_a = datum.$mdtChartsMetadata) === null || _a === void 0 ? void 0 : _a.valueFieldName
|
|
59
|
+
}))
|
|
58
60
|
MarkDot.toggleMarkDotVisible(select(this), turnOnIfCan);
|
|
59
61
|
});
|
|
60
62
|
}
|
|
@@ -63,18 +65,17 @@ export class MarkDot {
|
|
|
63
65
|
}
|
|
64
66
|
static setClassesAndStyle(dots, cssClasses, vfIndex, elementColors) {
|
|
65
67
|
DomHelper.setCssClasses(dots, Helper.getCssClassesWithElementIndex(cssClasses, vfIndex));
|
|
66
|
-
DomHelper.setChartElementColor(dots, elementColors, vfIndex,
|
|
68
|
+
DomHelper.setChartElementColor(dots, elementColors, vfIndex, "stroke");
|
|
67
69
|
}
|
|
68
70
|
static setAttrs(block, dots, attrs, styles) {
|
|
69
|
-
dots
|
|
70
|
-
.attr(
|
|
71
|
-
.attr(
|
|
72
|
-
.attr(
|
|
73
|
-
.
|
|
74
|
-
.style(
|
|
75
|
-
.style(
|
|
76
|
-
.style('clip-path', `url(#${block.svg.getClipPathId()})`);
|
|
71
|
+
dots.attr("class", this.markerDotClass)
|
|
72
|
+
.attr("cx", (d) => attrs.cx(d))
|
|
73
|
+
.attr("cy", (d) => attrs.cy(d))
|
|
74
|
+
.attr("r", styles.normal.size.radius)
|
|
75
|
+
.style("stroke-width", styles.normal.size.borderSize)
|
|
76
|
+
.style("fill", "white")
|
|
77
|
+
.style("clip-path", `url(#${block.svg.getClipPathId()})`);
|
|
77
78
|
}
|
|
78
79
|
}
|
|
79
|
-
MarkDot.markerDotClass = NamesHelper.getClassName(
|
|
80
|
-
MarkDot.hiddenDotClass = NamesHelper.getClassName(
|
|
80
|
+
MarkDot.markerDotClass = NamesHelper.getClassName("dot");
|
|
81
|
+
MarkDot.hiddenDotClass = NamesHelper.getClassName("dot-hidden");
|
|
@@ -3,13 +3,13 @@ import { Scale } from "../scale/scale";
|
|
|
3
3
|
export class MarkDotHelper {
|
|
4
4
|
static getDotAttrs(keyAxisOrient, scales, margin, keyField, valueField, isSegmented) {
|
|
5
5
|
const attrs = { cx: null, cy: null };
|
|
6
|
-
if (keyAxisOrient ===
|
|
7
|
-
attrs.cx = d => scales.value(d[valueField]) + margin.left;
|
|
8
|
-
attrs.cy = d => Scale.getScaledValue(scales.key, Helper.getKeyFieldValue(d, keyField, isSegmented)) + margin.top;
|
|
6
|
+
if (keyAxisOrient === "left" || keyAxisOrient === "right") {
|
|
7
|
+
attrs.cx = (d) => scales.value(d[valueField]) + margin.left;
|
|
8
|
+
attrs.cy = (d) => Scale.getScaledValue(scales.key, Helper.getKeyFieldValue(d, keyField, isSegmented)) + margin.top;
|
|
9
9
|
}
|
|
10
|
-
else if (keyAxisOrient ===
|
|
11
|
-
attrs.cx = d => Scale.getScaledValue(scales.key, Helper.getKeyFieldValue(d, keyField, isSegmented)) + margin.left;
|
|
12
|
-
attrs.cy = d => scales.value(d[valueField]) + margin.top;
|
|
10
|
+
else if (keyAxisOrient === "bottom" || keyAxisOrient === "top") {
|
|
11
|
+
attrs.cx = (d) => Scale.getScaledValue(scales.key, Helper.getKeyFieldValue(d, keyField, isSegmented)) + margin.left;
|
|
12
|
+
attrs.cy = (d) => scales.value(d[valueField]) + margin.top;
|
|
13
13
|
}
|
|
14
14
|
return attrs;
|
|
15
15
|
}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
class RecordOverflowAlertCoreClass {
|
|
2
2
|
constructor() {
|
|
3
|
-
this.blockClass =
|
|
3
|
+
this.blockClass = "record-overflow-alert";
|
|
4
4
|
}
|
|
5
5
|
render(block, options) {
|
|
6
|
-
const alertBlock = block
|
|
7
|
-
.
|
|
8
|
-
.
|
|
6
|
+
const alertBlock = block
|
|
7
|
+
.getWrapper()
|
|
8
|
+
.append("div")
|
|
9
|
+
.attr("class", this.blockClass)
|
|
9
10
|
.text(this.getAlertText(options));
|
|
10
11
|
this.setAlertPosition(alertBlock, options.positionAttrs);
|
|
11
12
|
}
|
|
12
13
|
update(block, options) {
|
|
13
|
-
let alertBlock = block.getWrapper()
|
|
14
|
-
.select(`div.${this.blockClass}`);
|
|
14
|
+
let alertBlock = block.getWrapper().select(`div.${this.blockClass}`);
|
|
15
15
|
if (alertBlock.empty()) {
|
|
16
16
|
if (options.hidedRecordsAmount === 0)
|
|
17
17
|
return;
|
|
@@ -40,11 +40,11 @@ class RecordOverflowAlertCoreClass {
|
|
|
40
40
|
}
|
|
41
41
|
setAlertPosition(alertBlock, attrs) {
|
|
42
42
|
alertBlock
|
|
43
|
-
.style(
|
|
44
|
-
.style(
|
|
45
|
-
.style(
|
|
46
|
-
.style(
|
|
47
|
-
.style(
|
|
43
|
+
.style("position", "absolute")
|
|
44
|
+
.style("left", attrs.left)
|
|
45
|
+
.style("right", attrs.right)
|
|
46
|
+
.style("top", attrs.top)
|
|
47
|
+
.style("bottom", attrs.bottom);
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
export const RecordOverflowAlertCore = new RecordOverflowAlertCoreClass();
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { ScaleLinear
|
|
2
|
-
import { AxisScale } from
|
|
3
|
-
import { BarChartSettings, ScaleKeyModel, ScaleValueModel } from
|
|
1
|
+
import { ScaleLinear } from "d3-scale";
|
|
2
|
+
import { AxisScale } from "d3-axis";
|
|
3
|
+
import { BarChartSettings, ScaleKeyModel, ScaleValueModel } from "../../../model/model";
|
|
4
4
|
export interface Scales {
|
|
5
5
|
key: AxisScale<any>;
|
|
6
6
|
value: AxisScale<any>;
|
|
@@ -11,12 +11,11 @@ export interface ScalesWithSecondary extends Scales {
|
|
|
11
11
|
export declare class Scale {
|
|
12
12
|
static getScales(scaleKey: ScaleKeyModel, scaleValue: ScaleValueModel, bandSettings: BarChartSettings): Scales;
|
|
13
13
|
static getScalesWithSecondary(scaleKey: ScaleKeyModel, scaleValue: ScaleValueModel, scaleValueSecondary: ScaleValueModel, bandSettings: BarChartSettings): ScalesWithSecondary;
|
|
14
|
-
static getScaleValue(scaleValue: ScaleValueModel): ScaleLinear<number, number, never
|
|
14
|
+
static getScaleValue(scaleValue: ScaleValueModel): ScaleLinear<number, number, never>;
|
|
15
15
|
static getScaleBandWidth(scale: AxisScale<any>): number;
|
|
16
16
|
static getScaleStep(scale: AxisScale<any>): number;
|
|
17
17
|
static getScaledValue(scale: AxisScale<any>, value: any): number;
|
|
18
18
|
private static getScaleBand;
|
|
19
19
|
private static getScaleLinear;
|
|
20
20
|
private static getScalePoint;
|
|
21
|
-
private static getScaleTime;
|
|
22
21
|
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { scaleBand, scaleLinear, scalePoint
|
|
1
|
+
import { scaleBand, scaleLinear, scalePoint } from "d3-scale";
|
|
2
2
|
export class Scale {
|
|
3
3
|
static getScales(scaleKey, scaleValue, bandSettings) {
|
|
4
4
|
const scales = {
|
|
5
5
|
key: null,
|
|
6
6
|
value: null
|
|
7
7
|
};
|
|
8
|
-
if (scaleKey.type ===
|
|
8
|
+
if (scaleKey.type === "band")
|
|
9
9
|
scales.key = this.getScaleBand(scaleKey.domain, scaleKey.range, bandSettings, scaleKey.elementsAmount);
|
|
10
|
-
else if (scaleKey.type ===
|
|
10
|
+
else if (scaleKey.type === "point")
|
|
11
11
|
scales.key = this.getScalePoint(scaleKey.domain, scaleKey.range);
|
|
12
12
|
scales.value = this.getScaleValue(scaleValue);
|
|
13
13
|
return scales;
|
|
@@ -17,10 +17,7 @@ export class Scale {
|
|
|
17
17
|
return Object.assign(Object.assign({}, scales), (scaleValueSecondary && { valueSecondary: this.getScaleValue(scaleValueSecondary) }));
|
|
18
18
|
}
|
|
19
19
|
static getScaleValue(scaleValue) {
|
|
20
|
-
|
|
21
|
-
return this.getScaleLinear(scaleValue.domain, scaleValue.range);
|
|
22
|
-
else if (scaleValue.type === 'datetime')
|
|
23
|
-
return this.getScaleTime(scaleValue.domain, scaleValue.range);
|
|
20
|
+
return this.getScaleLinear(scaleValue.domain, scaleValue.range);
|
|
24
21
|
}
|
|
25
22
|
static getScaleBandWidth(scale) {
|
|
26
23
|
if (scale.bandwidth && scale.bandwidth() !== 0) {
|
|
@@ -42,40 +39,34 @@ export class Scale {
|
|
|
42
39
|
return scale(value);
|
|
43
40
|
}
|
|
44
41
|
static getScaleBand(domain, range, bandSettings, elementsInGroupAmount) {
|
|
45
|
-
const scale = scaleBand()
|
|
46
|
-
.domain(domain)
|
|
47
|
-
.range([range.start, range.end]);
|
|
42
|
+
const scale = scaleBand().domain(domain).range([range.start, range.end]);
|
|
48
43
|
const bandSize = scale.bandwidth();
|
|
49
44
|
if (bandSettings.groupMinDistance < bandSize) {
|
|
50
45
|
scale.paddingInner(bandSettings.groupMinDistance / bandSize);
|
|
51
46
|
scale.paddingOuter(bandSettings.groupMinDistance / bandSize / 2);
|
|
52
47
|
}
|
|
53
|
-
// Padding inner = 10. If bandwidth more than needed, paddingInner is increased to number less than 35
|
|
48
|
+
// Padding inner = 10. If bandwidth more than needed, paddingInner is increased to number less than 35
|
|
54
49
|
let paddingInner = bandSettings.groupMinDistance;
|
|
55
|
-
while (scale.bandwidth() >
|
|
50
|
+
while (scale.bandwidth() >
|
|
51
|
+
bandSettings.maxBarWidth * elementsInGroupAmount +
|
|
52
|
+
bandSettings.barDistance * (elementsInGroupAmount - 1) &&
|
|
53
|
+
paddingInner < bandSettings.groupMaxDistance) {
|
|
56
54
|
scale.paddingInner(++paddingInner / bandSize);
|
|
57
55
|
}
|
|
58
56
|
// if bandwidth more than all bars widths in group + distance between it + distance between groups
|
|
59
57
|
let paddingOuter = 1;
|
|
60
|
-
while (scale.step() >
|
|
58
|
+
while (scale.step() >
|
|
59
|
+
bandSettings.maxBarWidth * elementsInGroupAmount +
|
|
60
|
+
bandSettings.groupMaxDistance +
|
|
61
|
+
bandSettings.barDistance * (elementsInGroupAmount - 1)) {
|
|
61
62
|
scale.paddingOuter(++paddingOuter / bandSize);
|
|
62
63
|
}
|
|
63
64
|
return scale;
|
|
64
65
|
}
|
|
65
66
|
static getScaleLinear(domain, range) {
|
|
66
|
-
return scaleLinear()
|
|
67
|
-
.domain(domain)
|
|
68
|
-
.range([range.start, range.end]);
|
|
67
|
+
return scaleLinear().domain(domain).range([range.start, range.end]);
|
|
69
68
|
}
|
|
70
69
|
static getScalePoint(domain, range) {
|
|
71
|
-
return scalePoint()
|
|
72
|
-
.domain(domain)
|
|
73
|
-
.range([range.start, range.end]);
|
|
74
|
-
}
|
|
75
|
-
static getScaleTime(domain, range) {
|
|
76
|
-
return scaleTime()
|
|
77
|
-
.domain(domain)
|
|
78
|
-
.range([range.start, range.end])
|
|
79
|
-
.nice();
|
|
70
|
+
return scalePoint().domain(domain).range([range.start, range.end]);
|
|
80
71
|
}
|
|
81
72
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Selection } from
|
|
1
|
+
import { Selection } from "d3-selection";
|
|
2
2
|
import { Block } from "../../block/block";
|
|
3
|
-
import { BlockMargin } from
|
|
3
|
+
import { BlockMargin } from "../../../model/model";
|
|
4
4
|
import { Size } from "../../../config/config";
|
|
5
5
|
export declare class TipBox {
|
|
6
6
|
static readonly tipBoxClass = "tipbox";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { TipBoxHelper } from
|
|
1
|
+
import { TipBoxHelper } from "./tipBoxHelper";
|
|
2
2
|
export class TipBox {
|
|
3
3
|
static renderOrGet(block, margin, blockSize) {
|
|
4
4
|
const attributes = TipBoxHelper.getAttributes(margin, blockSize);
|
|
@@ -8,25 +8,21 @@ export class TipBox {
|
|
|
8
8
|
return block.getSvg().select(`.${this.tipBoxClass}`);
|
|
9
9
|
}
|
|
10
10
|
static clearEvents(block) {
|
|
11
|
-
block.getSvg()
|
|
12
|
-
.select(`.${this.tipBoxClass}`)
|
|
13
|
-
.on('mousemove', null)
|
|
14
|
-
.on('mouseleave', null)
|
|
15
|
-
.on('click', null);
|
|
11
|
+
block.getSvg().select(`.${this.tipBoxClass}`).on("mousemove", null).on("mouseleave", null).on("click", null);
|
|
16
12
|
}
|
|
17
13
|
static renderBlock(block, attributes) {
|
|
18
|
-
let tipBox = block.getSvg()
|
|
19
|
-
.select(`rect.${this.tipBoxClass}`);
|
|
14
|
+
let tipBox = block.getSvg().select(`rect.${this.tipBoxClass}`);
|
|
20
15
|
if (tipBox.empty())
|
|
21
|
-
tipBox = block
|
|
22
|
-
.
|
|
23
|
-
.
|
|
24
|
-
.attr(
|
|
25
|
-
.attr(
|
|
26
|
-
.attr(
|
|
27
|
-
.attr(
|
|
28
|
-
.
|
|
16
|
+
tipBox = block
|
|
17
|
+
.getSvg()
|
|
18
|
+
.append("rect")
|
|
19
|
+
.attr("class", this.tipBoxClass)
|
|
20
|
+
.attr("x", attributes.x)
|
|
21
|
+
.attr("y", attributes.y)
|
|
22
|
+
.attr("width", attributes.width)
|
|
23
|
+
.attr("height", attributes.height)
|
|
24
|
+
.style("opacity", 0);
|
|
29
25
|
return tipBox;
|
|
30
26
|
}
|
|
31
27
|
}
|
|
32
|
-
TipBox.tipBoxClass =
|
|
28
|
+
TipBox.tipBoxClass = "tipbox";
|
|
@@ -13,14 +13,14 @@ export class TipBoxHelper {
|
|
|
13
13
|
x: margin.left - pad,
|
|
14
14
|
y: margin.top - pad,
|
|
15
15
|
width: blockSize.width - margin.left - margin.right + pad * 2,
|
|
16
|
-
height: blockSize.height - margin.top - margin.bottom + pad * 2
|
|
16
|
+
height: blockSize.height - margin.top - margin.bottom + pad * 2
|
|
17
17
|
};
|
|
18
18
|
}
|
|
19
19
|
static getKeyIndex(pointer, chartOrient, margin, blockSize, scaleKey, scaleKeyType) {
|
|
20
|
-
const pointerAxisType = chartOrient ===
|
|
21
|
-
const marginByOrient = chartOrient ===
|
|
20
|
+
const pointerAxisType = chartOrient === "vertical" ? 0 : 1; // 0 - координата поинтера по оси x, 1 - по оси y
|
|
21
|
+
const marginByOrient = chartOrient === "vertical" ? margin.left : margin.top;
|
|
22
22
|
const scaleStep = Scale.getScaleStep(scaleKey);
|
|
23
|
-
if (scaleKeyType ===
|
|
23
|
+
if (scaleKeyType === "point") {
|
|
24
24
|
return this.getKeyIndexOfPoint(pointer, scaleStep, marginByOrient, pointerAxisType);
|
|
25
25
|
}
|
|
26
26
|
else {
|
|
@@ -34,7 +34,7 @@ export class TipBoxHelper {
|
|
|
34
34
|
return Math.floor(point / scaleStep);
|
|
35
35
|
}
|
|
36
36
|
static getKeyIndexOfBand(pointer, scaleStep, marginByOrient, pointerAxisType, blockSize, margin, chartOrient, scaleKey) {
|
|
37
|
-
const chartBlockSizeByDir = chartOrient ===
|
|
37
|
+
const chartBlockSizeByDir = chartOrient === "vertical"
|
|
38
38
|
? blockSize.width - margin.left - margin.right
|
|
39
39
|
: blockSize.height - margin.top - margin.bottom;
|
|
40
40
|
const outerPadding = chartBlockSizeByDir - scaleStep * scaleKey.domain().length;
|
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
import { DomHelper } from
|
|
1
|
+
import { DomHelper } from "../../helpers/domHelper";
|
|
2
2
|
export class Title {
|
|
3
3
|
static render(block, title, titleBlockModel, blockSize) {
|
|
4
4
|
if (!title.textContent)
|
|
5
5
|
return;
|
|
6
|
-
const titleBlock = block.getSvg()
|
|
7
|
-
.append('text')
|
|
8
|
-
.attr('class', this.titleCssClass);
|
|
6
|
+
const titleBlock = block.getSvg().append("text").attr("class", this.titleCssClass);
|
|
9
7
|
const titleCoordinate = this.getTitleAttributes(blockSize, titleBlockModel);
|
|
10
8
|
this.fillTitleBlockAttributes(titleBlock, titleCoordinate, title);
|
|
11
9
|
this.setTitleTooltip(titleBlock, title.textContent);
|
|
@@ -15,11 +13,11 @@ export class Title {
|
|
|
15
13
|
}
|
|
16
14
|
static fillTitleBlockAttributes(titleBlock, attributes, title) {
|
|
17
15
|
titleBlock
|
|
18
|
-
.attr(
|
|
19
|
-
.attr(
|
|
20
|
-
.attr(
|
|
16
|
+
.attr("x", attributes.x)
|
|
17
|
+
.attr("y", attributes.y)
|
|
18
|
+
.attr("dominant-baseline", attributes.dominantBaseline)
|
|
21
19
|
.text(title.textContent)
|
|
22
|
-
.style(
|
|
20
|
+
.style("font-size", `${title.fontSize}px`);
|
|
23
21
|
DomHelper.cropSvgLabels(titleBlock, attributes.maxWidth);
|
|
24
22
|
}
|
|
25
23
|
static getTitleAttributes(blockSize, titleBlockModel) {
|
|
@@ -35,8 +33,7 @@ export class Title {
|
|
|
35
33
|
return coordinate;
|
|
36
34
|
}
|
|
37
35
|
static setTitleTooltip(titleBlock, text) {
|
|
38
|
-
titleBlock.append(
|
|
39
|
-
.text(text);
|
|
36
|
+
titleBlock.append("title").text(text);
|
|
40
37
|
}
|
|
41
38
|
}
|
|
42
|
-
Title.titleCssClass =
|
|
39
|
+
Title.titleCssClass = "chart-title";
|
|
@@ -7,9 +7,7 @@ export class NewTooltip {
|
|
|
7
7
|
return this.elSelection;
|
|
8
8
|
}
|
|
9
9
|
render(wrapper) {
|
|
10
|
-
this.elSelection = wrapper
|
|
11
|
-
.append('div')
|
|
12
|
-
.attr('class', NewTooltip.tooltipBlockClass);
|
|
10
|
+
this.elSelection = wrapper.append("div").attr("class", NewTooltip.tooltipBlockClass);
|
|
13
11
|
return this.elSelection;
|
|
14
12
|
}
|
|
15
13
|
appendContent(content) {
|
|
@@ -17,10 +15,10 @@ export class NewTooltip {
|
|
|
17
15
|
}
|
|
18
16
|
setCoordinate(coordinate) {
|
|
19
17
|
this.elSelection
|
|
20
|
-
.style(
|
|
21
|
-
.style(
|
|
22
|
-
.style(
|
|
23
|
-
.style(
|
|
18
|
+
.style("right", coordinate.right)
|
|
19
|
+
.style("bottom", coordinate.bottom)
|
|
20
|
+
.style("left", coordinate.left)
|
|
21
|
+
.style("top", coordinate.top);
|
|
24
22
|
}
|
|
25
23
|
}
|
|
26
|
-
NewTooltip.tooltipBlockClass =
|
|
24
|
+
NewTooltip.tooltipBlockClass = "mdt-charts-tooltip-block";
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { Model, PolarOptionsModel, TwoDimensionalOptionsModel } from "../../../model/model";
|
|
2
2
|
import { Block } from "../../block/block";
|
|
3
3
|
import { MdtChartsDataSource } from "../../../config/config";
|
|
4
|
-
import { Scales } from
|
|
5
|
-
import { TooltipSettings } from
|
|
4
|
+
import { Scales } from "../scale/scale";
|
|
5
|
+
import { TooltipSettings } from "../../../designer/designerConfig";
|
|
6
6
|
export declare class Tooltip {
|
|
7
7
|
static readonly tooltipBlockClass: string;
|
|
8
8
|
static readonly tooltipLineClass = "mdt-charts-tooltip-line";
|