mdt-charts 1.14.1 → 1.15.1

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 (11) hide show
  1. package/lib/designer/designerConfig.d.ts +10 -0
  2. package/lib/engine/elementHighlighter/elementHighlighter.d.ts +2 -2
  3. package/lib/engine/elementHighlighter/elementHighlighter.js +8 -8
  4. package/lib/engine/elementHighlighter/selectHighlighter.js +5 -5
  5. package/lib/engine/features/markDots/markDot.d.ts +0 -1
  6. package/lib/engine/features/markDots/markDot.js +5 -6
  7. package/lib/engine/features/tolltip/tooltip.js +2 -2
  8. package/lib/model/model.d.ts +12 -0
  9. package/lib/model/modelBuilder.js +0 -4
  10. package/lib/model/notations/twoDimensionalModel.js +20 -7
  11. package/package.json +1 -1
package/lib/designer/designerConfig.d.ts CHANGED
@@ -20,6 +20,7 @@ interface Canvas {
20
20
  chartBlockMargin: BlockMargin;
21
21
  legendBlock: LegendBlockCanvas;
22
22
  chartOptions: ChartOptionsCanvas;
23
+ markers?: MarkerCanvas;
23
24
  }
24
25
  export interface AxisLabelCanvas {
25
26
  maxSize: AxisLabelSize;
@@ -33,6 +34,15 @@ interface BlockMargin {
33
34
  left: number;
34
35
  right: number;
35
36
  }
37
+ interface MarkerCanvas {
38
+ highlighted?: {
39
+ radius?: number;
40
+ };
41
+ normal?: {
42
+ radius?: number;
43
+ borderSize?: number;
44
+ };
45
+ }
36
46
  export interface LegendBlockCanvas {
37
47
  maxWidth: number | string;
38
48
  static?: StaticLegendBlockCanvas;
package/lib/engine/elementHighlighter/elementHighlighter.d.ts CHANGED
@@ -2,7 +2,7 @@ import { Selection, BaseType } from 'd3-selection';
2
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, TwoDimensionalChartType } 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;
@@ -21,7 +21,7 @@ export declare class ElementHighlighter {
21
21
  static toggleMarkDotVisible(markDots: Selection<BaseType, any, BaseType, any>, isHighlight: boolean): void;
22
22
  static remove2DChartsFullHighlighting(block: Block, charts: TwoDimensionalChartModel[], transitionDuration?: number): void;
23
23
  static removeUnselected2DHighlight(block: Block, keyFieldName: string, charts: TwoDimensionalChartModel[], transitionDuration: number): void;
24
- static toggle2DElements(elemSelection: Selection<BaseType, any, BaseType, any>, isHighlight: boolean, chartType: TwoDimensionalChartType, transitionDuration: number): void;
24
+ static toggle2DElements(elemSelection: Selection<BaseType, any, BaseType, any>, isHighlight: boolean, chart: TwoDimensionalChartModel, transitionDuration: number): void;
25
25
  private static makeArcClone;
26
26
  private static makeArcShadow;
27
27
  private static renderDonutSegmentClone;
package/lib/engine/elementHighlighter/elementHighlighter.js CHANGED
@@ -94,7 +94,7 @@ export class ElementHighlighter {
94
94
  const elems = DomHelper.get2DChartElements(block, chart);
95
95
  if (chart.type !== 'bar' && !chart.markersOptions.show)
96
96
  elems.classed(MarkDot.hiddenDotClass, true);
97
- this.toggle2DElements(elems, false, chart.type, transitionDuration);
97
+ this.toggle2DElements(elems, false, chart, transitionDuration);
98
98
  this.toggleActivityStyle(elems, true);
99
99
  });
100
100
  }
@@ -104,14 +104,14 @@ export class ElementHighlighter {
104
104
  const selectedElems = DomHelper.getChartElementsByKeys(elems, chart.isSegmented, keyFieldName, block.filterEventManager.getSelectedKeys(), SelectionCondition.Exclude);
105
105
  if (chart.type !== 'bar' && !chart.markersOptions.show)
106
106
  selectedElems.classed(MarkDot.hiddenDotClass, true);
107
- this.toggle2DElements(selectedElems, false, chart.type, transitionDuration);
107
+ this.toggle2DElements(selectedElems, false, chart, transitionDuration);
108
108
  if (block.filterEventManager.getSelectedKeys().length > 0)
109
109
  this.toggleActivityStyle(selectedElems, false);
110
110
  });
111
111
  }
112
- static toggle2DElements(elemSelection, isHighlight, chartType, transitionDuration) {
113
- if (chartType === 'area' || chartType === 'line') {
114
- elemSelection.call(this.toggleDot, isHighlight, transitionDuration);
112
+ static toggle2DElements(elemSelection, isHighlight, chart, transitionDuration) {
113
+ if (chart.type === 'area' || chart.type === 'line') {
114
+ elemSelection.call(this.toggleDot, isHighlight, chart.markersOptions.styles, transitionDuration);
115
115
  }
116
116
  else {
117
117
  this.toggleBar(elemSelection, isHighlight);
@@ -175,7 +175,7 @@ export class ElementHighlighter {
175
175
  });
176
176
  }
177
177
  }
178
- static toggleDot(elementSelection, isScaled, transitionDuration = 0) {
178
+ static toggleDot(elementSelection, isScaled, styles, transitionDuration = 0) {
179
179
  const animationName = 'size-scale';
180
180
  elementSelection.nodes().forEach(node => {
181
181
  interrupt(node, animationName);
@@ -189,8 +189,8 @@ export class ElementHighlighter {
189
189
  .ease(easeLinear);
190
190
  }
191
191
  elementsHandler
192
- .attr('r', isScaled ? 5 : 4)
193
- .style('stroke-width', (isScaled ? 3.5 : 3) + 'px')
192
+ .attr('r', isScaled ? styles.highlighted.size.radius : styles.normal.size.radius)
193
+ .style('stroke-width', isScaled ? styles.highlighted.size.borderSize : styles.normal.size.borderSize)
194
194
  .each(function () {
195
195
  select(this).style('fill', isScaled ? select(this).style('stroke') : 'white');
196
196
  });
package/lib/engine/elementHighlighter/selectHighlighter.js CHANGED
@@ -10,7 +10,7 @@ export class SelectHighlighter {
10
10
  const selectedElements = DomHelper.getChartElementsByKeys(DomHelper.get2DChartElements(block, chart), chart.isSegmented, options.data.keyField.name, [keyValue]);
11
11
  const elements = DomHelper.get2DChartElements(block, chart);
12
12
  if (!appendKey) {
13
- ElementHighlighter.toggle2DElements(selectedElements, false, chart.type, block.transitionManager.durations.markerHover);
13
+ ElementHighlighter.toggle2DElements(selectedElements, false, chart, block.transitionManager.durations.markerHover);
14
14
  if (chart.type !== 'bar' && !chart.markersOptions.show)
15
15
  ElementHighlighter.toggleMarkDotVisible(selectedElements, false);
16
16
  if (selectedKeys.length > 0) {
@@ -24,17 +24,17 @@ export class SelectHighlighter {
24
24
  return;
25
25
  }
26
26
  if (multySelection) {
27
- ElementHighlighter.toggle2DElements(selectedElements, true, chart.type, block.transitionManager.durations.markerHover);
27
+ ElementHighlighter.toggle2DElements(selectedElements, true, chart, block.transitionManager.durations.markerHover);
28
28
  ElementHighlighter.toggleActivityStyle(selectedElements, true);
29
29
  ElementHighlighter.toggleActivityStyle(DomHelper.getChartElementsByKeys(elements, chart.isSegmented, options.data.keyField.name, selectedKeys, SelectionCondition.Exclude), false);
30
30
  }
31
31
  else {
32
- ElementHighlighter.toggle2DElements(DomHelper.getChartElementsByKeys(elements, chart.isSegmented, options.data.keyField.name, selectedKeys, SelectionCondition.Exclude), false, chart.type, block.transitionManager.durations.markerHover);
32
+ ElementHighlighter.toggle2DElements(DomHelper.getChartElementsByKeys(elements, chart.isSegmented, options.data.keyField.name, selectedKeys, SelectionCondition.Exclude), false, chart, block.transitionManager.durations.markerHover);
33
33
  ElementHighlighter.toggleActivityStyle(elements, false);
34
34
  if (chart.type !== 'bar' && !chart.markersOptions.show)
35
35
  ElementHighlighter.toggleMarkDotVisible(elements, false);
36
36
  ElementHighlighter.toggleActivityStyle(selectedElements, true);
37
- ElementHighlighter.toggle2DElements(selectedElements, true, chart.type, block.transitionManager.durations.markerHover);
37
+ ElementHighlighter.toggle2DElements(selectedElements, true, chart, block.transitionManager.durations.markerHover);
38
38
  }
39
39
  if (chart.type !== 'bar' && !chart.markersOptions.show)
40
40
  ElementHighlighter.toggleMarkDotVisible(selectedElements, true);
@@ -76,7 +76,7 @@ export class SelectHighlighter {
76
76
  static clear2D(block, options) {
77
77
  options.charts.forEach(chart => {
78
78
  const elements = DomHelper.get2DChartElements(block, chart);
79
- ElementHighlighter.toggle2DElements(elements, false, chart.type, block.transitionManager.durations.markerHover);
79
+ ElementHighlighter.toggle2DElements(elements, false, chart, block.transitionManager.durations.markerHover);
80
80
  ElementHighlighter.toggleActivityStyle(elements, true);
81
81
  if (chart.type !== 'bar' && !chart.markersOptions.show)
82
82
  ElementHighlighter.toggleMarkDotVisible(elements, false);
package/lib/engine/features/markDots/markDot.d.ts CHANGED
@@ -10,7 +10,6 @@ export interface DotAttrs {
10
10
  export declare class MarkDot {
11
11
  static readonly markerDotClass: string;
12
12
  static readonly hiddenDotClass: string;
13
- private static dotRadius;
14
13
  static render(block: Block, data: MdtChartsDataRow[], keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyFieldName: string, vfIndex: number, valueFieldName: string, chart: TwoDimensionalChartModel): void;
15
14
  static update(block: Block, newData: MdtChartsDataRow[], keyAxisOrient: Orient, scales: Scales, margin: BlockMargin, keyField: string, vfIndex: number, valueFieldName: string, chart: TwoDimensionalChartModel): void;
16
15
  static updateColors(block: Block, chart: TwoDimensionalChartModel, valueFieldIndex: number): void;
package/lib/engine/features/markDots/markDot.js CHANGED
@@ -13,7 +13,7 @@ export class MarkDot {
13
13
  .enter();
14
14
  const attrs = MarkDotHelper.getDotAttrs(keyAxisOrient, scales, margin, keyFieldName, valueFieldName, chart.isSegmented);
15
15
  const dots = dotsWrapper.append('circle');
16
- this.setAttrs(block, dots, attrs);
16
+ this.setAttrs(block, dots, attrs, chart.markersOptions.styles);
17
17
  this.setClassesAndStyle(dots, chart.cssClasses, vfIndex, chart.style.elementColors);
18
18
  if (!chart.markersOptions.show)
19
19
  dots.classed(this.hiddenDotClass, true);
@@ -27,7 +27,7 @@ export class MarkDot {
27
27
  const newDots = dots
28
28
  .enter()
29
29
  .append('circle');
30
- this.setAttrs(block, newDots, attrs);
30
+ this.setAttrs(block, newDots, attrs, chart.markersOptions.styles);
31
31
  this.setClassesAndStyle(newDots, chart.cssClasses, vfIndex, chart.style.elementColors);
32
32
  if (!chart.markersOptions.show)
33
33
  newDots.classed(this.hiddenDotClass, true);
@@ -52,17 +52,16 @@ export class MarkDot {
52
52
  DomHelper.setCssClasses(dots, Helper.getCssClassesWithElementIndex(cssClasses, vfIndex));
53
53
  DomHelper.setChartElementColor(dots, elementColors, vfIndex, 'stroke');
54
54
  }
55
- static setAttrs(block, dots, attrs) {
55
+ static setAttrs(block, dots, attrs, styles) {
56
56
  dots
57
57
  .attr('class', this.markerDotClass)
58
58
  .attr('cx', d => attrs.cx(d))
59
59
  .attr('cy', d => attrs.cy(d))
60
- .attr('r', this.dotRadius)
61
- .style('stroke-width', '3px')
60
+ .attr('r', styles.normal.size.radius)
61
+ .style('stroke-width', styles.normal.size.borderSize)
62
62
  .style('fill', 'white')
63
63
  .style('clip-path', `url(#${block.svg.getClipPathId()})`);
64
64
  }
65
65
  }
66
66
  MarkDot.markerDotClass = NamesHelper.getClassName('dot');
67
67
  MarkDot.hiddenDotClass = NamesHelper.getClassName('dot-hidden');
68
- MarkDot.dotRadius = 4;
package/lib/engine/features/tolltip/tooltip.js CHANGED
@@ -100,7 +100,7 @@ export class Tooltip {
100
100
  const oldElements = DomHelper.getChartElementsByKeys(elements, chart.isSegmented, args.dataOptions.keyField.name, [currentKey]);
101
101
  if (chart.type !== 'bar' && !chart.markersOptions.show)
102
102
  ElementHighlighter.toggleMarkDotVisible(oldElements, false);
103
- ElementHighlighter.toggle2DElements(oldElements, false, chart.type, block.transitionManager.durations.markerHover);
103
+ ElementHighlighter.toggle2DElements(oldElements, false, chart, block.transitionManager.durations.markerHover);
104
104
  if (block.filterEventManager.getSelectedKeys().length > 0) {
105
105
  ElementHighlighter.toggleActivityStyle(oldElements, false);
106
106
  }
@@ -110,7 +110,7 @@ export class Tooltip {
110
110
  ElementHighlighter.toggleMarkDotVisible(selectedElements, true);
111
111
  ElementHighlighter.toggleActivityStyle(selectedElements, true);
112
112
  if (block.filterEventManager.getSelectedKeys().length === 0 || block.filterEventManager.isSelected(keyValue)) {
113
- ElementHighlighter.toggle2DElements(selectedElements, true, chart.type, block.transitionManager.durations.markerHover);
113
+ ElementHighlighter.toggle2DElements(selectedElements, true, chart, block.transitionManager.durations.markerHover);
114
114
  }
115
115
  });
116
116
  }
package/lib/model/model.d.ts CHANGED
@@ -265,6 +265,18 @@ export interface ValueField extends Field {
265
265
  }
266
266
  export interface MarkersOptions {
267
267
  show: boolean;
268
+ styles: MarkersStyleOptions;
269
+ }
270
+ export interface MarkersStyleOptions {
271
+ highlighted: MarkerStyle;
272
+ normal: MarkerStyle;
273
+ }
274
+ interface MarkerStyle {
275
+ size: MarkersBaseSizeOptions;
276
+ }
277
+ interface MarkersBaseSizeOptions {
278
+ radius: number;
279
+ borderSize: string;
268
280
  }
269
281
  interface IntervalChartDataModel {
270
282
  valueField1: ValueField;
package/lib/model/modelBuilder.js CHANGED
@@ -2,7 +2,6 @@ import { MarginModel } from './margin/marginModel';
2
2
  import { TwoDimensionalModel } from './notations/twoDimensionalModel';
3
3
  import { PolarModel } from './notations/polar/polarModel';
4
4
  import { DataManagerModel } from './dataManagerModel/dataManagerModel';
5
- import { IntervalModel } from './notations/intervalModel';
6
5
  import { OtherComponentsModel } from './featuresModel/otherComponents';
7
6
  import { ConfigValidator } from './configsValidator/configValidator';
8
7
  import { ModelInstance } from './modelInstance/modelInstance';
@@ -52,9 +51,6 @@ function getOptions(config, designerConfig, modelInstance) {
52
51
  else if (config.options.type === 'polar') {
53
52
  return PolarModel.getOptions(config.options, designerConfig, modelInstance);
54
53
  }
55
- else if (config.options.type === 'interval') {
56
- return IntervalModel.getOptions(config.options, designerConfig, modelInstance);
57
- }
58
54
  else if (config.options.type === "card") {
59
55
  return CardsModelInstance.getOptions(config.options, modelInstance);
60
56
  }
package/lib/model/notations/twoDimensionalModel.js CHANGED
@@ -28,7 +28,7 @@ export class TwoDimensionalModel {
28
28
  },
29
29
  type: options.type,
30
30
  data: Object.assign({}, options.data),
31
- charts: this.getChartsModel(options.charts, options.orientation, designerConfig.chartStyle),
31
+ charts: this.getChartsModel(options.charts, options.orientation, designerConfig),
32
32
  additionalElements: this.getAdditionalElements(options),
33
33
  tooltip: options.tooltip,
34
34
  chartSettings: this.getChartsSettings(designerConfig.canvas.chartOptions, options.orientation)
@@ -56,12 +56,12 @@ export class TwoDimensionalModel {
56
56
  lineLike: { shape: parseShape(chartOrientation, (_a = chartOptions.line) === null || _a === void 0 ? void 0 : _a.shape) }
57
57
  };
58
58
  }
59
- static getChartsModel(charts, chartOrientation, chartStyleConfig) {
60
- const styleModel = new TwoDimensionalChartStyleModel(charts, chartStyleConfig);
59
+ static getChartsModel(charts, chartOrientation, designerConfig) {
60
+ const styleModel = new TwoDimensionalChartStyleModel(charts, designerConfig.chartStyle);
61
61
  this.sortCharts(charts);
62
62
  const chartsModel = [];
63
63
  charts.forEach((chart, index) => {
64
- var _a, _b, _c, _d;
64
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
65
65
  chartsModel.push({
66
66
  type: chart.type,
67
67
  isSegmented: chart.isSegmented,
@@ -70,9 +70,22 @@ export class TwoDimensionalModel {
70
70
  cssClasses: ChartStyleModelService.getCssClasses(index),
71
71
  style: styleModel.getChartStyle(chart, index),
72
72
  embeddedLabels: this.getEmbeddedLabelType(chart, chartOrientation),
73
- markersOptions: chart.markers,
74
- lineViewOptions: { dashedStyles: parseDashStyles((_a = chart.lineStyles) === null || _a === void 0 ? void 0 : _a.dash) },
75
- barViewOptions: { hatch: { on: (_d = (_c = (_b = chart.barStyles) === null || _b === void 0 ? void 0 : _b.hatch) === null || _c === void 0 ? void 0 : _c.on) !== null && _d !== void 0 ? _d : false } },
73
+ markersOptions: {
74
+ show: chart.markers.show,
75
+ styles: {
76
+ highlighted: {
77
+ size: { radius: (_c = (_b = (_a = designerConfig.canvas.markers) === null || _a === void 0 ? void 0 : _a.highlighted) === null || _b === void 0 ? void 0 : _b.radius) !== null && _c !== void 0 ? _c : 4, borderSize: '3.5px' }
78
+ },
79
+ normal: {
80
+ size: {
81
+ radius: (_f = (_e = (_d = designerConfig.canvas.markers) === null || _d === void 0 ? void 0 : _d.normal) === null || _e === void 0 ? void 0 : _e.radius) !== null && _f !== void 0 ? _f : 3,
82
+ borderSize: `${(_j = (_h = (_g = designerConfig.canvas.markers) === null || _g === void 0 ? void 0 : _g.normal) === null || _h === void 0 ? void 0 : _h.borderSize) !== null && _j !== void 0 ? _j : 2}px`
83
+ }
84
+ }
85
+ }
86
+ },
87
+ lineViewOptions: { dashedStyles: parseDashStyles((_k = chart.lineStyles) === null || _k === void 0 ? void 0 : _k.dash) },
88
+ barViewOptions: { hatch: { on: (_o = (_m = (_l = chart.barStyles) === null || _l === void 0 ? void 0 : _l.hatch) === null || _m === void 0 ? void 0 : _m.on) !== null && _o !== void 0 ? _o : false } },
76
89
  legend: getLegendMarkerOptions(chart),
77
90
  index
78
91
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mdt-charts",
3
- "version": "1.14.1",
3
+ "version": "1.15.1",
4
4
  "description": "",
5
5
  "main": "lib/main.js",
6
6
  "scripts": {