mdt-charts 1.27.1 → 1.27.3

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.
Files changed (145) hide show
  1. package/.prettierrc +6 -0
  2. package/lib/config/config.d.ts +13 -13
  3. package/lib/designer/designerConfig.d.ts +1 -1
  4. package/lib/engine/block/block.js +14 -14
  5. package/lib/engine/block/blockHelper.js +2 -2
  6. package/lib/engine/block/blockSvg.js +25 -28
  7. package/lib/engine/block/defs/LinearGradientDef.js +9 -8
  8. package/lib/engine/contentManager/contentManagerFactory.js +1 -1
  9. package/lib/engine/elementHighlighter/elementHighlighter.d.ts +3 -3
  10. package/lib/engine/elementHighlighter/elementHighlighter.js +52 -54
  11. package/lib/engine/elementHighlighter/selectHighlighter.js +7 -7
  12. package/lib/engine/engine.d.ts +4 -4
  13. package/lib/engine/engine.js +5 -5
  14. package/lib/engine/features/aggregator/aggregator.d.ts +1 -1
  15. package/lib/engine/features/aggregator/aggregator.js +43 -45
  16. package/lib/engine/features/axis/axis.d.ts +1 -1
  17. package/lib/engine/features/axis/axis.js +53 -48
  18. package/lib/engine/features/axis/axisDomHelper.d.ts +3 -3
  19. package/lib/engine/features/axis/axisDomHelper.js +6 -8
  20. package/lib/engine/features/axis/axisHelper.d.ts +2 -2
  21. package/lib/engine/features/axis/axisHelper.js +14 -21
  22. package/lib/engine/features/axis/axisLabelDomHelper.d.ts +3 -3
  23. package/lib/engine/features/axis/axisLabelDomHelper.js +74 -66
  24. package/lib/engine/features/axis/axisLabelsEventManager.js +11 -11
  25. package/lib/engine/features/embeddedLabels/embeddedLabels.d.ts +3 -3
  26. package/lib/engine/features/embeddedLabels/embeddedLabels.js +44 -44
  27. package/lib/engine/features/embeddedLabels/embeddedLabelsDomHelper.d.ts +1 -1
  28. package/lib/engine/features/embeddedLabels/embeddedLabelsDomHelper.js +3 -6
  29. package/lib/engine/features/embeddedLabels/embeddedLabelsHelper.d.ts +2 -2
  30. package/lib/engine/features/embeddedLabels/embeddedLabelsHelper.js +22 -20
  31. package/lib/engine/features/gridLine/gidLineHelper.d.ts +1 -1
  32. package/lib/engine/features/gridLine/gidLineHelper.js +5 -5
  33. package/lib/engine/features/gridLine/gridLine.js +14 -23
  34. package/lib/engine/features/legend/legend.js +27 -36
  35. package/lib/engine/features/legend/legendDomHelper.js +18 -9
  36. package/lib/engine/features/legend/legendEventsManager.js +18 -13
  37. package/lib/engine/features/legend/legendHelper.js +19 -19
  38. package/lib/engine/features/legend/legendHelperService.js +5 -5
  39. package/lib/engine/features/legend/legendMarkerCreator.js +23 -22
  40. package/lib/engine/features/legend/legendWidthCalculator.js +5 -7
  41. package/lib/engine/features/markDots/markDot.d.ts +2 -2
  42. package/lib/engine/features/markDots/markDot.js +35 -34
  43. package/lib/engine/features/markDots/markDotsHelper.js +6 -6
  44. package/lib/engine/features/recordOverflowAlert/recordOverflowAlertCore.js +11 -11
  45. package/lib/engine/features/scale/scale.d.ts +4 -5
  46. package/lib/engine/features/scale/scale.js +16 -25
  47. package/lib/engine/features/tipBox/tipBox.d.ts +2 -2
  48. package/lib/engine/features/tipBox/tipBox.js +13 -17
  49. package/lib/engine/features/tipBox/tipBoxHelper.js +5 -5
  50. package/lib/engine/features/title/title.d.ts +1 -1
  51. package/lib/engine/features/title/title.js +8 -11
  52. package/lib/engine/features/tolltip/newTooltip/newTooltip.d.ts +1 -1
  53. package/lib/engine/features/tolltip/newTooltip/newTooltip.js +6 -8
  54. package/lib/engine/features/tolltip/tooltip.d.ts +2 -2
  55. package/lib/engine/features/tolltip/tooltip.js +47 -42
  56. package/lib/engine/features/tolltip/tooltipComponentsManager.d.ts +2 -2
  57. package/lib/engine/features/tolltip/tooltipComponentsManager.js +49 -52
  58. package/lib/engine/features/tolltip/tooltipDomHelper.d.ts +1 -1
  59. package/lib/engine/features/tolltip/tooltipDomHelper.js +41 -33
  60. package/lib/engine/features/tolltip/tooltipHelper.js +15 -11
  61. package/lib/engine/features/valueLabels/valueLabels.d.ts +3 -2
  62. package/lib/engine/features/valueLabels/valueLabels.js +33 -44
  63. package/lib/engine/features/valueLabels/valueLabelsHelper.js +6 -6
  64. package/lib/engine/features/valueLabelsCollision/valueLabelsCollision.js +9 -10
  65. package/lib/engine/features/valueLabelsCollision/valueLabelsCollisionHelper.js +4 -4
  66. package/lib/engine/filterManager/filterEventManager.js +18 -15
  67. package/lib/engine/helpers/domHelper.d.ts +3 -4
  68. package/lib/engine/helpers/domHelper.js +9 -13
  69. package/lib/engine/helpers/fontResizer/fontResizer.js +2 -2
  70. package/lib/engine/helpers/helper.js +14 -9
  71. package/lib/engine/helpers/namesHelper.js +2 -2
  72. package/lib/engine/polarNotation/donut/DonutHelper.js +6 -8
  73. package/lib/engine/polarNotation/donut/donut.d.ts +3 -3
  74. package/lib/engine/polarNotation/donut/donut.js +47 -58
  75. package/lib/engine/polarNotation/extenders/polarRecordOverflowAlert.js +11 -11
  76. package/lib/engine/polarNotation/polarManager.js +3 -5
  77. package/lib/engine/transitionManager.js +4 -7
  78. package/lib/engine/twoDimensionalNotation/area/area.d.ts +1 -1
  79. package/lib/engine/twoDimensionalNotation/area/area.js +77 -62
  80. package/lib/engine/twoDimensionalNotation/area/areaGenerator.js +4 -10
  81. package/lib/engine/twoDimensionalNotation/area/areaHelper.d.ts +3 -3
  82. package/lib/engine/twoDimensionalNotation/area/areaHelper.js +21 -13
  83. package/lib/engine/twoDimensionalNotation/bar/bar.d.ts +2 -2
  84. package/lib/engine/twoDimensionalNotation/bar/bar.js +70 -67
  85. package/lib/engine/twoDimensionalNotation/bar/barHelper.js +40 -35
  86. package/lib/engine/twoDimensionalNotation/dot/dotChart.js +60 -42
  87. package/lib/engine/twoDimensionalNotation/extenders/twoDimRecordOverflowAlert.js +7 -7
  88. package/lib/engine/twoDimensionalNotation/line/line.d.ts +4 -4
  89. package/lib/engine/twoDimensionalNotation/line/line.js +45 -28
  90. package/lib/engine/twoDimensionalNotation/line/lineBuilder.js +18 -16
  91. package/lib/engine/twoDimensionalNotation/line/lineGenerator.js +2 -4
  92. package/lib/engine/twoDimensionalNotation/line/lineHelper.d.ts +6 -6
  93. package/lib/engine/twoDimensionalNotation/line/lineHelper.js +26 -17
  94. package/lib/engine/twoDimensionalNotation/lineLike/generatorMiddleware/lineLikeGeneratorDefineMiddleware.js +1 -1
  95. package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js +25 -21
  96. package/lib/engine/valueFormatter.d.ts +1 -1
  97. package/lib/main.d.ts +1 -0
  98. package/lib/main.js +8 -7
  99. package/lib/model/chartStyleModel/chartStyleModel.js +5 -3
  100. package/lib/model/chartStyleModel/colorRange.js +1 -3
  101. package/lib/model/chartStyleModel/twoDimensionalChartStyleModel.js +9 -7
  102. package/lib/model/dataManagerModel/dataManagerModel.js +28 -16
  103. package/lib/model/featuresModel/axisModel.d.ts +6 -3
  104. package/lib/model/featuresModel/axisModel.js +59 -32
  105. package/lib/model/featuresModel/axisModelService.js +2 -2
  106. package/lib/model/featuresModel/legendModel/legendCanvasModel.d.ts +1 -1
  107. package/lib/model/featuresModel/legendModel/legendCanvasModel.js +12 -12
  108. package/lib/model/featuresModel/legendModel/legendModel.js +2 -2
  109. package/lib/model/featuresModel/legendModel/polarMarginCalculator.js +1 -1
  110. package/lib/model/featuresModel/legendModel/twoDimLegendModel.js +4 -5
  111. package/lib/model/featuresModel/scaleModel/scaleAxisRecalcer.d.ts +4 -5
  112. package/lib/model/featuresModel/scaleModel/scaleAxisRecalcer.js +3 -5
  113. package/lib/model/featuresModel/scaleModel/scaleDomainService.js +10 -12
  114. package/lib/model/featuresModel/scaleModel/scaleModel.d.ts +8 -4
  115. package/lib/model/featuresModel/scaleModel/scaleModel.js +20 -12
  116. package/lib/model/featuresModel/scaleModel/scaleModelServices.js +5 -5
  117. package/lib/model/featuresModel/tooltipModel.js +1 -1
  118. package/lib/model/featuresModel/valueLabelsModel/valueLabelsModel.js +5 -5
  119. package/lib/model/helpers/modelHelper.js +6 -4
  120. package/lib/model/helpers/twoDimensionalModelHelper.d.ts +1 -1
  121. package/lib/model/helpers/twoDimensionalModelHelper.js +23 -23
  122. package/lib/model/helpers/unitsReader.js +1 -1
  123. package/lib/model/margin/marginModel.js +1 -1
  124. package/lib/model/margin/twoDim/twoDimMarginModel.d.ts +1 -0
  125. package/lib/model/margin/twoDim/twoDimMarginModel.js +38 -28
  126. package/lib/model/model.d.ts +17 -4
  127. package/lib/model/modelBuilder.d.ts +4 -4
  128. package/lib/model/modelBuilder.js +19 -18
  129. package/lib/model/modelInstance/canvasModel/canvasSizesModel/marginModelService.js +1 -1
  130. package/lib/model/modelInstance/chartBlockVersion/chartBlockVersion.d.ts +5 -0
  131. package/lib/model/modelInstance/chartBlockVersion/chartBlockVersion.js +8 -0
  132. package/lib/model/modelInstance/configReader.js +11 -10
  133. package/lib/model/modelInstance/dataModel/dataRepository.js +5 -5
  134. package/lib/model/modelInstance/modelInstance.d.ts +4 -2
  135. package/lib/model/modelInstance/modelInstance.js +5 -3
  136. package/lib/model/modelInstance/titleConfigReader.js +5 -5
  137. package/lib/model/notations/polar/donut/donutModel.js +1 -1
  138. package/lib/model/notations/polar/polarModel.js +6 -6
  139. package/lib/model/notations/twoDimensional/styles.d.ts +2 -2
  140. package/lib/model/notations/twoDimensional/styles.js +8 -8
  141. package/lib/model/notations/twoDimensionalModel.d.ts +0 -1
  142. package/lib/model/notations/twoDimensionalModel.js +32 -29
  143. package/package.json +59 -59
  144. package/tsconfig.production.json +14 -24
  145. package/README.md +0 -2
package/.prettierrc ADDED
@@ -0,0 +1,6 @@
1
+ {
2
+ "useTabs": true,
3
+ "tabWidth": 4,
4
+ "trailingComma": "none",
5
+ "printWidth": 120
6
+ }
@@ -1,13 +1,13 @@
1
1
  declare type DataType = string;
2
2
  export declare type MdtChartsIconElement = () => HTMLElement;
3
- export declare type AxisPosition = 'start' | 'end';
4
- export declare type ChartOrientation = 'vertical' | 'horizontal';
5
- export declare type ChartNotation = '2d' | 'polar' | 'interval';
6
- export declare type ChartType = 'bar' | 'line' | 'area' | 'donut' | 'gantt';
7
- export declare type TwoDimensionalChartType = 'line' | 'bar' | 'area' | 'dot';
8
- export declare type PolarChartType = 'donut';
9
- export declare type IntervalChartType = 'gantt';
10
- export declare type EmbeddedLabelType = 'none' | 'key' | 'value';
3
+ export declare type AxisPosition = "start" | "end";
4
+ export declare type ChartOrientation = "vertical" | "horizontal";
5
+ export declare type ChartNotation = "2d" | "polar" | "interval";
6
+ export declare type ChartType = "bar" | "line" | "area" | "donut" | "gantt";
7
+ export declare type TwoDimensionalChartType = "line" | "bar" | "area" | "dot";
8
+ export declare type PolarChartType = "donut";
9
+ export declare type IntervalChartType = "gantt";
10
+ export declare type EmbeddedLabelType = "none" | "key" | "value";
11
11
  export declare type ValueLabelsCollisionMode = "none" | "hide";
12
12
  export declare type TwoDimLegendPosition = "top" | "bottom";
13
13
  export declare type MdtChartsDataRow = {
@@ -50,7 +50,7 @@ interface GraphicNotationOptions extends BasicOptions {
50
50
  selectable: boolean;
51
51
  }
52
52
  export interface MdtChartsTwoDimensionalOptions extends GraphicNotationOptions {
53
- type: '2d';
53
+ type: "2d";
54
54
  axis: TwoDimensionalAxis;
55
55
  additionalElements: AdditionalElements;
56
56
  charts: MdtChartsTwoDimensionalChart[];
@@ -58,11 +58,11 @@ export interface MdtChartsTwoDimensionalOptions extends GraphicNotationOptions {
58
58
  valueLabels?: MdtChartsTwoDimensionalValueLabels;
59
59
  }
60
60
  export interface MdtChartsPolarOptions extends GraphicNotationOptions {
61
- type: 'polar';
61
+ type: "polar";
62
62
  chart: PolarChart;
63
63
  }
64
64
  export interface MdtChartsIntervalOptions extends GraphicNotationOptions {
65
- type: 'interval';
65
+ type: "interval";
66
66
  axis: IntervalAxis;
67
67
  chart: IntervalChart;
68
68
  additionalElements: AdditionalElements;
@@ -150,7 +150,7 @@ export interface TwoDimensionalAxis {
150
150
  value: NumberAxisOptions;
151
151
  valueSecondary?: NumberSecondaryAxisOptions;
152
152
  }
153
- export declare type NumberSecondaryAxisOptions = Omit<NumberAxisOptions, 'position'>;
153
+ export declare type NumberSecondaryAxisOptions = Omit<NumberAxisOptions, "position">;
154
154
  export interface AxisOptions {
155
155
  visibility: boolean;
156
156
  position: AxisPosition;
@@ -299,7 +299,7 @@ export interface TwoDimensionalChartValueLabels {
299
299
  format?: ValueLabelsFormatter;
300
300
  }
301
301
  export declare type ValueLabelsFormatter = (value: number) => string;
302
- export declare type TwoDimensionalValueGroup = 'main' | 'secondary';
302
+ export declare type TwoDimensionalValueGroup = "main" | "secondary";
303
303
  interface MarkersOptions {
304
304
  show: boolean;
305
305
  }
@@ -7,7 +7,7 @@ export declare type Formatter = (value: any, options?: {
7
7
  title?: string;
8
8
  empty?: string;
9
9
  }) => string;
10
- export declare type TooltipPosition = 'followCursor' | 'fixed';
10
+ export declare type TooltipPosition = "followCursor" | "fixed";
11
11
  export interface DesignerConfig {
12
12
  canvas: Canvas;
13
13
  dataFormat: DataFormat;
@@ -22,11 +22,11 @@ export class Block {
22
22
  }
23
23
  renderWrapper(blockSize) {
24
24
  this.wrapper = this.parentElementSelection
25
- .append('div')
26
- .attr('class', this.wrapperCssClasses.join(' '))
27
- .style('width', blockSize.width + 'px')
28
- .style('height', blockSize.height + 'px')
29
- .style('position', 'relative');
25
+ .append("div")
26
+ .attr("class", this.wrapperCssClasses.join(" "))
27
+ .style("width", blockSize.width + "px")
28
+ .style("height", blockSize.height + "px")
29
+ .style("position", "relative");
30
30
  this.svg.initParent(this.wrapper);
31
31
  this.html.initParent(this.wrapper);
32
32
  }
@@ -45,17 +45,17 @@ export class Block {
45
45
  removeMouseEvents() {
46
46
  //TODO: move this method in blockSvg
47
47
  const tipBoxes = this.getSvg().selectAll(`.${TipBox.tipBoxClass}`);
48
- tipBoxes.on('mousemove', null);
49
- tipBoxes.on('mouseover', null);
50
- tipBoxes.on('mouseleave', null);
51
- tipBoxes.on('click', null);
48
+ tipBoxes.on("mousemove", null);
49
+ tipBoxes.on("mouseover", null);
50
+ tipBoxes.on("mouseleave", null);
51
+ tipBoxes.on("click", null);
52
52
  const arcItems = Donut.getAllArcGroups(this);
53
- arcItems.on('mouseover', null);
54
- arcItems.on('mouseleave', null);
55
- arcItems.on('mousemove', null);
56
- arcItems.on('click', null);
53
+ arcItems.on("mouseover", null);
54
+ arcItems.on("mouseleave", null);
55
+ arcItems.on("mousemove", null);
56
+ arcItems.on("click", null);
57
57
  }
58
58
  clearWrapper() {
59
- this.getWrapper().selectAll('*').remove();
59
+ this.getWrapper().selectAll("*").remove();
60
60
  }
61
61
  }
@@ -11,8 +11,8 @@ export class BlockHelper {
11
11
  }
12
12
  static getFormattedCssClassesForWrapper(cssClasses) {
13
13
  const wrapperClasses = [];
14
- cssClasses.forEach(cssClass => {
15
- wrapperClasses.push(cssClass + '-wrapper');
14
+ cssClasses.forEach((cssClass) => {
15
+ wrapperClasses.push(cssClass + "-wrapper");
16
16
  });
17
17
  return wrapperClasses;
18
18
  }
@@ -4,8 +4,8 @@ import { HatchPatternDef } from "./defs/hatchPattern";
4
4
  export class BlockSvg {
5
5
  constructor(options) {
6
6
  this.hatchPatternDef = new HatchPatternDef();
7
- this.chartBlockClass = 'chart-block';
8
- this.chartGroupClass = 'chart-group';
7
+ this.chartBlockClass = "chart-block";
8
+ this.chartGroupClass = "chart-group";
9
9
  this.svgCssClasses = options.svgCssClasses;
10
10
  this.parentBlockId = options.parentBlockId;
11
11
  }
@@ -14,18 +14,16 @@ export class BlockSvg {
14
14
  }
15
15
  render(blockSize) {
16
16
  this.parent
17
- .append('svg')
18
- .attr('width', blockSize.width)
19
- .attr('height', blockSize.height)
20
- .attr('class', this.svgCssClasses + ' ' + NamesHelper.getClassName('svg-chart'));
17
+ .append("svg")
18
+ .attr("width", blockSize.width)
19
+ .attr("height", blockSize.height)
20
+ .attr("class", this.svgCssClasses + " " + NamesHelper.getClassName("svg-chart"));
21
21
  }
22
22
  getBlock() {
23
- return this.parent.select(`svg.${NamesHelper.getClassName('svg-chart')}`);
23
+ return this.parent.select(`svg.${NamesHelper.getClassName("svg-chart")}`);
24
24
  }
25
25
  renderChartsBlock() {
26
- this.getBlock()
27
- .append('g')
28
- .attr('class', this.chartBlockClass);
26
+ this.getBlock().append("g").attr("class", this.chartBlockClass);
29
27
  }
30
28
  getChartBlock() {
31
29
  return this.getBlock().select(`.${this.chartBlockClass}`);
@@ -33,42 +31,41 @@ export class BlockSvg {
33
31
  getChartGroup(chartIndex) {
34
32
  let group = this.getChartBlock().select(`.${this.chartGroupClass}-${chartIndex}`);
35
33
  if (group.empty()) {
36
- group = this.getChartBlock().append('g')
37
- .attr('class', `${this.chartGroupClass}-${chartIndex}`);
34
+ group = this.getChartBlock().append("g").attr("class", `${this.chartGroupClass}-${chartIndex}`);
38
35
  }
39
36
  return group;
40
37
  }
41
38
  getClipPathId() {
42
- return NamesHelper.getId('clip-path', this.parentBlockId);
39
+ return NamesHelper.getId("clip-path", this.parentBlockId);
43
40
  }
44
41
  renderChartClipPath(margin, blockSize) {
45
42
  const attributes = BlockHelper.getClipPathAttributes(blockSize, margin);
46
43
  this.ensureDefsRendered()
47
- .append('clipPath')
48
- .attr('id', this.getClipPathId())
49
- .append('rect')
50
- .attr('x', attributes.x)
51
- .attr('y', attributes.y)
52
- .attr('width', attributes.width)
53
- .attr('height', attributes.height);
44
+ .append("clipPath")
45
+ .attr("id", this.getClipPathId())
46
+ .append("rect")
47
+ .attr("x", attributes.x)
48
+ .attr("y", attributes.y)
49
+ .attr("width", attributes.width)
50
+ .attr("height", attributes.height);
54
51
  }
55
52
  updateChartClipPath(margin, blockSize) {
56
53
  const attributes = BlockHelper.getClipPathAttributes(blockSize, margin);
57
54
  this.ensureDefsRendered()
58
- .select('clipPath')
59
- .select('rect')
60
- .attr('x', attributes.x)
61
- .attr('y', attributes.y)
62
- .attr('width', attributes.width)
63
- .attr('height', attributes.height);
55
+ .select("clipPath")
56
+ .select("rect")
57
+ .attr("x", attributes.x)
58
+ .attr("y", attributes.y)
59
+ .attr("width", attributes.width)
60
+ .attr("height", attributes.height);
64
61
  }
65
62
  renderBarHatchPattern() {
66
63
  this.hatchPatternDef.appendToDefsBlock(this.ensureDefsRendered());
67
64
  }
68
65
  ensureDefsRendered() {
69
- let defs = this.getBlock().select('defs');
66
+ let defs = this.getBlock().select("defs");
70
67
  if (defs.empty())
71
- defs = this.getBlock().append('defs');
68
+ defs = this.getBlock().append("defs");
72
69
  return defs;
73
70
  }
74
71
  }
@@ -1,14 +1,16 @@
1
1
  export class LinearGradientDef {
2
2
  render(defs, gradients) {
3
- gradients.forEach(gradient => {
4
- const linearGradient = defs.append("linearGradient")
3
+ gradients.forEach((gradient) => {
4
+ const linearGradient = defs
5
+ .append("linearGradient")
5
6
  .attr("id", gradient.id)
6
7
  .attr("x1", gradient.position.x1)
7
8
  .attr("y1", gradient.position.y1)
8
9
  .attr("x2", gradient.position.x2)
9
10
  .attr("y2", gradient.position.y2);
10
- gradient.items.forEach(item => {
11
- linearGradient.append("stop")
11
+ gradient.items.forEach((item) => {
12
+ linearGradient
13
+ .append("stop")
12
14
  .attr("id", item.id)
13
15
  .attr("offset", item.offset)
14
16
  .attr("stop-opacity", item.opacity)
@@ -17,11 +19,10 @@ export class LinearGradientDef {
17
19
  });
18
20
  }
19
21
  updateColors(defs, gradients) {
20
- gradients.forEach(gradient => {
22
+ gradients.forEach((gradient) => {
21
23
  const linearGradient = defs.select(`#${gradient.id}`);
22
- gradient.items.forEach(item => {
23
- linearGradient.select(`#${item.id}`)
24
- .attr("stop-color", item.color);
24
+ gradient.items.forEach((item) => {
25
+ linearGradient.select(`#${item.id}`).attr("stop-color", item.color);
25
26
  });
26
27
  });
27
28
  }
@@ -4,7 +4,7 @@ export class ContentManagerFactory {
4
4
  constructor() {
5
5
  this.managers = {
6
6
  "2d": TwoDimensionalManager,
7
- "polar": PolarManager
7
+ polar: PolarManager
8
8
  };
9
9
  }
10
10
  getManager(type) {
@@ -1,8 +1,8 @@
1
- import { Selection, BaseType } from 'd3-selection';
2
- import { PieArcDatum } from 'd3-shape';
1
+ import { Selection, BaseType } from "d3-selection";
2
+ import { PieArcDatum } from "d3-shape";
3
3
  import { BlockMargin, TwoDimensionalChartModel } from "../../model/model";
4
4
  import { Block } from "../block/block";
5
- import { MdtChartsDataRow, Size } from '../../config/config';
5
+ import { MdtChartsDataRow, Size } from "../../config/config";
6
6
  export declare class ElementHighlighter {
7
7
  private static inactiveElemClass;
8
8
  static toggleActivityStyle(elementSelection: Selection<BaseType, unknown, BaseType, unknown>, isActive: boolean): void;
@@ -1,13 +1,13 @@
1
- import { select } from 'd3-selection';
2
- import { easeLinear } from 'd3-ease';
3
- import { interrupt } from 'd3-transition';
4
- import { DomHelper, SelectionCondition } from '../helpers/domHelper';
5
- import { Donut } from '../polarNotation/donut/donut';
6
- import { MarkDot } from '../features/markDots/markDot';
7
- import { Helper } from '../helpers/helper';
8
- import * as chroma from 'chroma-js';
9
- import { NamesHelper } from '../helpers/namesHelper';
10
- import { DonutHelper } from '../polarNotation/donut/DonutHelper';
1
+ import { select } from "d3-selection";
2
+ import { easeLinear } from "d3-ease";
3
+ import { interrupt } from "d3-transition";
4
+ import { DomHelper, SelectionCondition } from "../helpers/domHelper";
5
+ import { Donut } from "../polarNotation/donut/donut";
6
+ import { MarkDot } from "../features/markDots/markDot";
7
+ import { Helper } from "../helpers/helper";
8
+ import * as chroma from "chroma-js";
9
+ import { NamesHelper } from "../helpers/namesHelper";
10
+ import { DonutHelper } from "../polarNotation/donut/DonutHelper";
11
11
  export class ElementHighlighter {
12
12
  static toggleActivityStyle(elementSelection, isActive) {
13
13
  elementSelection.classed(this.inactiveElemClass, !isActive);
@@ -18,25 +18,22 @@ export class ElementHighlighter {
18
18
  static setShadowFilter(elemSelection, blurPercent = 1) {
19
19
  const maxBlurSize = 8;
20
20
  elemSelection.each(function () {
21
- const elemFill = select(this).style('fill') || 'rgb(0, 0, 0)';
21
+ const elemFill = select(this).style("fill") || "rgb(0, 0, 0)";
22
22
  const colorInRgb = chroma(elemFill).css();
23
23
  const shadowColor = Helper.getRgbaFromRgb(colorInRgb, 0.6);
24
- select(this).style('filter', `drop-shadow(0px 0px ${blurPercent * maxBlurSize}px ${shadowColor})`);
24
+ select(this).style("filter", `drop-shadow(0px 0px ${blurPercent * maxBlurSize}px ${shadowColor})`);
25
25
  });
26
26
  }
27
27
  static removeFilter(elemSelection) {
28
- elemSelection.style('filter', null);
28
+ elemSelection.style("filter", null);
29
29
  }
30
30
  static removeShadowClone(block, keyFieldName, selectedSegment, margin, blockSize, donutThickness) {
31
- const shadowClone = Donut.getAllArcShadows(block)
32
- .filter((d) => d.data[keyFieldName] === selectedSegment.datum().data[keyFieldName]);
33
- this.removeFilter(shadowClone.select('path'));
34
- this.toggleDonutHighlightState(shadowClone, margin, blockSize, donutThickness, block.transitionManager.durations.higlightedScale, false)
35
- .then(() => shadowClone.remove());
31
+ const shadowClone = Donut.getAllArcShadows(block).filter((d) => d.data[keyFieldName] === selectedSegment.datum().data[keyFieldName]);
32
+ this.removeFilter(shadowClone.select("path"));
33
+ this.toggleDonutHighlightState(shadowClone, margin, blockSize, donutThickness, block.transitionManager.durations.higlightedScale, false).then(() => shadowClone.remove());
36
34
  }
37
35
  static removeCloneForElem(block, keyFieldName, selectedSegment) {
38
- const clone = Donut.getAllArcClones(block)
39
- .filter((d) => d.data[keyFieldName] === selectedSegment.datum().data[keyFieldName]);
36
+ const clone = Donut.getAllArcClones(block).filter((d) => d.data[keyFieldName] === selectedSegment.datum().data[keyFieldName]);
40
37
  clone.remove();
41
38
  }
42
39
  static removeDonutArcClones(block) {
@@ -49,21 +46,21 @@ export class ElementHighlighter {
49
46
  this.toggleDonutHighlightState(arcSelection, margin, blockSize, donutThickness, block.transitionManager.durations.higlightedScale, true);
50
47
  this.toggleDonutHighlightState(clone, margin, blockSize, donutThickness, block.transitionManager.durations.higlightedScale, true);
51
48
  this.toggleDonutHighlightState(shadowClone, margin, blockSize, donutThickness, block.transitionManager.durations.higlightedScale, true);
52
- this.setShadowFilter(shadowClone.select('path'), donutThickness / 60);
49
+ this.setShadowFilter(shadowClone.select("path"), donutThickness / 60);
53
50
  }
54
51
  static toggleDonutHighlightState(segment, margin, blockSize, donutThickness, transitionDuration, on) {
55
- return new Promise(resolve => {
52
+ return new Promise((resolve) => {
56
53
  let scaleSize = 0;
57
54
  if (on)
58
55
  scaleSize = 5; // Если нужно выделить сегмент, то scaleSize не равен нулю и отображается увеличенным
59
56
  segment
60
- .select('path')
57
+ .select("path")
61
58
  .interrupt()
62
59
  .transition()
63
60
  .duration(transitionDuration)
64
- .on('end', () => resolve(''))
61
+ .on("end", () => resolve(""))
65
62
  .ease(easeLinear)
66
- .attr('d', (d, i) => DonutHelper.getArcGeneratorObject(blockSize, margin, donutThickness)
63
+ .attr("d", (d, i) => DonutHelper.getArcGeneratorObject(blockSize, margin, donutThickness)
67
64
  .outerRadius(DonutHelper.getOuterRadius(margin, blockSize) + scaleSize)
68
65
  .innerRadius(DonutHelper.getOuterRadius(margin, blockSize) - donutThickness - scaleSize)(d, i));
69
66
  });
@@ -73,7 +70,7 @@ export class ElementHighlighter {
73
70
  this.toggleDonutHighlightState(segments, margin, blockSize, donutThickness, 0, false);
74
71
  }
75
72
  static setInactiveFor2D(block, keyFieldName, charts) {
76
- charts.forEach(chart => {
73
+ charts.forEach((chart) => {
77
74
  const elems = DomHelper.get2DChartElements(block, chart);
78
75
  if (block.filterEventManager.getSelectedKeys().length === 0) {
79
76
  this.toggleActivityStyle(elems, true);
@@ -87,19 +84,19 @@ export class ElementHighlighter {
87
84
  });
88
85
  }
89
86
  static remove2DChartsFullHighlighting(block, charts, transitionDuration = 0) {
90
- charts.forEach(chart => {
87
+ charts.forEach((chart) => {
91
88
  const elems = DomHelper.get2DChartElements(block, chart);
92
- if (chart.type !== 'bar')
89
+ if (chart.type !== "bar")
93
90
  MarkDot.tryMakeMarkDotVisible(elems, chart.markersOptions, false);
94
91
  this.toggle2DElements(elems, false, chart, transitionDuration);
95
92
  this.toggleActivityStyle(elems, true);
96
93
  });
97
94
  }
98
95
  static removeUnselected2DHighlight(block, keyFieldName, charts, transitionDuration) {
99
- charts.forEach(chart => {
96
+ charts.forEach((chart) => {
100
97
  const elems = DomHelper.get2DChartElements(block, chart);
101
98
  const selectedElems = DomHelper.getChartElementsByKeys(elems, chart.isSegmented, keyFieldName, block.filterEventManager.getSelectedKeys(), SelectionCondition.Exclude);
102
- if (chart.type !== 'bar')
99
+ if (chart.type !== "bar")
103
100
  MarkDot.tryMakeMarkDotVisible(selectedElems, chart.markersOptions, false);
104
101
  this.toggle2DElements(selectedElems, false, chart, transitionDuration);
105
102
  if (block.filterEventManager.getSelectedKeys().length > 0)
@@ -107,7 +104,7 @@ export class ElementHighlighter {
107
104
  });
108
105
  }
109
106
  static toggle2DElements(elemSelection, isHighlight, chart, transitionDuration) {
110
- if (chart.type === 'area' || chart.type === 'line') {
107
+ if (chart.type === "area" || chart.type === "line") {
111
108
  elemSelection.call(this.toggleDot, isHighlight, chart.markersOptions.styles, transitionDuration);
112
109
  }
113
110
  else {
@@ -115,7 +112,7 @@ export class ElementHighlighter {
115
112
  if (isHighlight) {
116
113
  elemSelection.each(function (d) {
117
114
  const attrs = this.attrs;
118
- const blurPercent = (attrs.orient === 'vertical' ? attrs.width : attrs.height) / 30; // 30px = max bar size, 13px - max blurSize
115
+ const blurPercent = (attrs.orient === "vertical" ? attrs.width : attrs.height) / 30; // 30px = max bar size, 13px - max blurSize
119
116
  ElementHighlighter.setShadowFilter(select(this), blurPercent);
120
117
  });
121
118
  }
@@ -126,37 +123,43 @@ export class ElementHighlighter {
126
123
  }
127
124
  static makeArcClone(segment, block) {
128
125
  const clone = this.renderDonutSegmentClone(segment, `${Donut.arcCloneClass}`);
129
- block.getSvg().select(`.${Donut.arcClonesGroupClass}`).append(function () { return clone.node(); });
126
+ block
127
+ .getSvg()
128
+ .select(`.${Donut.arcClonesGroupClass}`)
129
+ .append(function () {
130
+ return clone.node();
131
+ });
130
132
  return clone;
131
133
  }
132
134
  static makeArcShadow(segment, block) {
133
135
  const shadowClone = this.renderDonutSegmentClone(segment, `${Donut.arcShadowClass}`);
134
- block.getSvg().select(`.${Donut.arcShadowsGroupClass}`).append(function () { return shadowClone.node(); });
136
+ block
137
+ .getSvg()
138
+ .select(`.${Donut.arcShadowsGroupClass}`)
139
+ .append(function () {
140
+ return shadowClone.node();
141
+ });
135
142
  return shadowClone;
136
143
  }
137
144
  static renderDonutSegmentClone(segment, newClass) {
138
145
  return segment
139
146
  .clone(true)
140
- .style('pointer-events', 'none')
147
+ .style("pointer-events", "none")
141
148
  .classed(`${Donut.arcCloneClass}`, false)
142
149
  .classed(newClass, true)
143
150
  .remove();
144
151
  }
145
152
  static toggleBar(elemSelection, isHighlight) {
146
- const animationName = 'bar-highlight';
153
+ const animationName = "bar-highlight";
147
154
  if (isHighlight) {
148
155
  elemSelection.each(function () {
149
156
  const attrs = this.attrs;
150
157
  const handler = select(this).interrupt(animationName).transition(animationName).duration(200);
151
- if (attrs.orient === 'vertical') {
152
- handler
153
- .attr('x', attrs.x - attrs.scaleSize)
154
- .attr('width', attrs.width + attrs.scaleSize * 2);
158
+ if (attrs.orient === "vertical") {
159
+ handler.attr("x", attrs.x - attrs.scaleSize).attr("width", attrs.width + attrs.scaleSize * 2);
155
160
  }
156
161
  else {
157
- handler
158
- .attr('y', attrs.y - attrs.scaleSize)
159
- .attr('height', attrs.height + attrs.scaleSize * 2);
162
+ handler.attr("y", attrs.y - attrs.scaleSize).attr("height", attrs.height + attrs.scaleSize * 2);
160
163
  }
161
164
  });
162
165
  }
@@ -164,17 +167,13 @@ export class ElementHighlighter {
164
167
  elemSelection.each(function () {
165
168
  const attrs = this.attrs;
166
169
  const handler = select(this).interrupt(animationName).transition(animationName).duration(200);
167
- handler
168
- .attr('x', attrs.x)
169
- .attr('width', attrs.width)
170
- .attr('y', attrs.y)
171
- .attr('height', attrs.height);
170
+ handler.attr("x", attrs.x).attr("width", attrs.width).attr("y", attrs.y).attr("height", attrs.height);
172
171
  });
173
172
  }
174
173
  }
175
174
  static toggleDot(elementSelection, isScaled, styles, transitionDuration = 0) {
176
- const animationName = 'size-scale';
177
- elementSelection.nodes().forEach(node => {
175
+ const animationName = "size-scale";
176
+ elementSelection.nodes().forEach((node) => {
178
177
  interrupt(node, animationName);
179
178
  });
180
179
  let elementsHandler = elementSelection;
@@ -186,10 +185,9 @@ export class ElementHighlighter {
186
185
  .ease(easeLinear);
187
186
  }
188
187
  elementsHandler
189
- .attr('r', isScaled ? styles.highlighted.size.radius : styles.normal.size.radius)
190
- .style('stroke-width', isScaled ? styles.highlighted.size.borderSize : styles.normal.size.borderSize)
191
- .each(function () {
192
- select(this).style('fill', isScaled ? select(this).style('stroke') : 'white');
188
+ .attr("r", isScaled ? styles.highlighted.size.radius : styles.normal.size.radius)
189
+ .style("stroke-width", isScaled ? styles.highlighted.size.borderSize : styles.normal.size.borderSize).each(function () {
190
+ select(this).style("fill", isScaled ? select(this).style("stroke") : "white");
193
191
  });
194
192
  }
195
193
  }
@@ -7,19 +7,19 @@ import { ElementHighlighter } from "./elementHighlighter";
7
7
  import { MarkDot } from "../../engine/features/markDots/markDot";
8
8
  export class SelectHighlighter {
9
9
  static click2DHandler(multySelection, appendKey, keyValue, selectedKeys, block, options) {
10
- options.charts.forEach(chart => {
10
+ options.charts.forEach((chart) => {
11
11
  const selectedElements = DomHelper.getChartElementsByKeys(DomHelper.get2DChartElements(block, chart), chart.isSegmented, options.data.keyField.name, [keyValue]);
12
12
  const elements = DomHelper.get2DChartElements(block, chart);
13
13
  if (!appendKey) {
14
14
  ElementHighlighter.toggle2DElements(selectedElements, false, chart, block.transitionManager.durations.markerHover);
15
- if (chart.type !== 'bar')
15
+ if (chart.type !== "bar")
16
16
  MarkDot.tryMakeMarkDotVisible(selectedElements, chart.markersOptions, false);
17
17
  if (selectedKeys.length > 0) {
18
18
  ElementHighlighter.toggleActivityStyle(selectedElements, false);
19
19
  }
20
20
  else {
21
21
  ElementHighlighter.toggleActivityStyle(elements, true);
22
- if (chart.type !== 'bar')
22
+ if (chart.type !== "bar")
23
23
  MarkDot.tryMakeMarkDotVisible(elements, chart.markersOptions, false);
24
24
  }
25
25
  return;
@@ -32,12 +32,12 @@ export class SelectHighlighter {
32
32
  else {
33
33
  ElementHighlighter.toggle2DElements(DomHelper.getChartElementsByKeys(elements, chart.isSegmented, options.data.keyField.name, selectedKeys, SelectionCondition.Exclude), false, chart, block.transitionManager.durations.markerHover);
34
34
  ElementHighlighter.toggleActivityStyle(elements, false);
35
- if (chart.type !== 'bar')
35
+ if (chart.type !== "bar")
36
36
  MarkDot.tryMakeMarkDotVisible(elements, chart.markersOptions, false);
37
37
  ElementHighlighter.toggleActivityStyle(selectedElements, true);
38
38
  ElementHighlighter.toggle2DElements(selectedElements, true, chart, block.transitionManager.durations.markerHover);
39
39
  }
40
- if (chart.type !== 'bar')
40
+ if (chart.type !== "bar")
41
41
  MarkDot.tryMakeMarkDotVisible(selectedElements, chart.markersOptions, true);
42
42
  });
43
43
  }
@@ -75,11 +75,11 @@ export class SelectHighlighter {
75
75
  ElementHighlighter.toggleActivityStyle(Legend.getItemsByKeys(block, selectedKeys), true);
76
76
  }
77
77
  static clear2D(block, options) {
78
- options.charts.forEach(chart => {
78
+ options.charts.forEach((chart) => {
79
79
  const elements = DomHelper.get2DChartElements(block, chart);
80
80
  ElementHighlighter.toggle2DElements(elements, false, chart, block.transitionManager.durations.markerHover);
81
81
  ElementHighlighter.toggleActivityStyle(elements, true);
82
- if (chart.type !== 'bar')
82
+ if (chart.type !== "bar")
83
83
  MarkDot.tryMakeMarkDotVisible(elements, chart.markersOptions, false);
84
84
  });
85
85
  }
@@ -1,7 +1,7 @@
1
- import { Block } from './block/block';
2
- import { Model } from '../model/model';
3
- import { FilterCallback } from './filterManager/filterEventManager';
4
- import { MdtChartsDataSource } from '../config/config';
1
+ import { Block } from "./block/block";
2
+ import { Model } from "../model/model";
3
+ import { FilterCallback } from "./filterManager/filterEventManager";
4
+ import { MdtChartsDataSource } from "../config/config";
5
5
  export declare class Engine {
6
6
  private filterCallback;
7
7
  private initializeSelected;
@@ -1,8 +1,8 @@
1
- import { Block } from './block/block';
2
- import { ValueFormatter } from './valueFormatter';
3
- import { ContentManager } from './contentManager/contentManager';
4
- import { FilterEventManager } from './filterManager/filterEventManager';
5
- import { Helper } from './helpers/helper';
1
+ import { Block } from "./block/block";
2
+ import { ValueFormatter } from "./valueFormatter";
3
+ import { ContentManager } from "./contentManager/contentManager";
4
+ import { FilterEventManager } from "./filterManager/filterEventManager";
5
+ import { Helper } from "./helpers/helper";
6
6
  export class Engine {
7
7
  constructor(id, filterCallback, initializeSelected) {
8
8
  this.filterCallback = filterCallback;
@@ -1,4 +1,4 @@
1
- import { DataType } from '../../../designer/designerConfig';
1
+ import { DataType } from "../../../designer/designerConfig";
2
2
  import { DonutAggregatorModel, Field } from "../../../model/model";
3
3
  import { Block } from "../../block/block";
4
4
  import { Translate } from "../../polarNotation/donut/donut";