sea-chart 2.0.18 → 2.0.20

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 (12) hide show
  1. package/dist/components/tooltip/index.js +13 -3
  2. package/dist/components/types-dialog/index.js +1 -1
  3. package/dist/view/wrapper/area-group.js +60 -68
  4. package/dist/view/wrapper/area.js +43 -53
  5. package/dist/view/wrapper/chart-component.js +37 -9
  6. package/dist/view/wrapper/index.js +7 -0
  7. package/dist/view/wrapper/line-group.js +59 -66
  8. package/dist/view/wrapper/line.js +58 -54
  9. package/dist/view/wrapper/pie.js +3 -3
  10. package/dist/view/wrapper/ring.js +4 -4
  11. package/dist/view/wrapper/scatter.js +333 -0
  12. package/package.json +1 -1
package/dist/components/tooltip/index.js CHANGED
@@ -19,7 +19,8 @@ const ToolTip = _ref => {
19
19
  });
20
20
  const {
21
21
  title,
22
- items
22
+ items,
23
+ titleMarkColor
23
24
  } = tooltipData || {
24
25
  title: '',
25
26
  items: []
@@ -71,13 +72,22 @@ const ToolTip = _ref => {
71
72
  }
72
73
  }, title && /*#__PURE__*/_react.default.createElement("div", {
73
74
  className: "sea-chart-d3-tooltip-title"
74
- }, title), /*#__PURE__*/_react.default.createElement("ul", {
75
+ }, titleMarkColor && /*#__PURE__*/_react.default.createElement("span", {
76
+ style: {
77
+ width: '8px',
78
+ height: '8px',
79
+ borderRadius: '50%',
80
+ backgroundColor: titleMarkColor,
81
+ display: 'inline-block',
82
+ marginRight: '12px'
83
+ }
84
+ }), title), /*#__PURE__*/_react.default.createElement("ul", {
75
85
  className: "sea-chart-d3-tooltip-list"
76
86
  }, items.map((item, index) => {
77
87
  return /*#__PURE__*/_react.default.createElement("li", {
78
88
  className: "sea-chart-d3-tooltip-list-item",
79
89
  key: index
80
- }, /*#__PURE__*/_react.default.createElement("span", {
90
+ }, item.color && /*#__PURE__*/_react.default.createElement("span", {
81
91
  className: "sea-chart-d3-tooltip-marker",
82
92
  style: {
83
93
  backgroundColor: item.color
package/dist/components/types-dialog/index.js CHANGED
@@ -69,7 +69,7 @@ const TypesDialog = _ref => {
69
69
  }, [onChange, selectedType, onToggle]);
70
70
  const handleFilterTypes = (0, _react.useCallback)(() => {
71
71
  if (hideTypeToggle) {
72
- const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram', 'Bar_chart', 'Line_chart', 'Area', 'Pie_chart'].includes(item.name));
72
+ const newChartTypes = _constants.CHART_TYPES.filter(item => ['Histogram', 'Bar_chart', 'Line_chart', 'Area', 'Pie_chart', 'Scatter_chart'].includes(item.name));
73
73
  return newChartTypes;
74
74
  }
75
75
  return _constants.CHART_TYPES;
package/dist/view/wrapper/area-group.js CHANGED
@@ -60,7 +60,8 @@ class AreaGroup extends _chartComponent.default {
60
60
  globalTheme,
61
61
  tables,
62
62
  columnGroupbyColumn,
63
- chartColorTheme
63
+ chartColorTheme,
64
+ summaryColumn
64
65
  } = this.props;
65
66
  const theme = _constants.CHART_THEME_COLOR[globalTheme];
66
67
  const {
@@ -69,6 +70,7 @@ class AreaGroup extends _chartComponent.default {
69
70
  goal_value
70
71
  } = chart.style_config || {};
71
72
  const {
73
+ y_axis_summary_method,
72
74
  y_axis_summary_type,
73
75
  y_axis_column_key,
74
76
  y_axis_summary_column_key,
@@ -94,12 +96,12 @@ class AreaGroup extends _chartComponent.default {
94
96
  // Y axis
95
97
  const niceEnd = d3.nice(0, d3.max(data, d => d.value), 5)[1];
96
98
  const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min || 0, y_axis_max || niceEnd]).range([chartHeight - insertPadding, insertPadding + marginTop]);
97
- this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => this.drawYaxis(g, theme));
99
+ this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
98
100
 
99
101
  // X axis
100
102
  const xDomain = data.map(item => item.name);
101
103
  const x = d3.scaleBand().domain(xDomain).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
102
- this.ticksWrapper = this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
104
+ this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
103
105
  this.ticksAddName(g);
104
106
  g.selectAll('.domain').attr('stroke', theme.XAxisColor);
105
107
  g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
@@ -151,22 +153,24 @@ class AreaGroup extends _chartComponent.default {
151
153
  circleData
152
154
  } = _ref3;
153
155
  circleData.forEach(item => {
154
- rectsWrapper.append('circle').attr('cx', item.x).attr('cy', item.y).attr('r', 3).attr('fill', this.colorMap[group_name]).attr('opacity', y_axis_show_value ? 1 : 0).attr('data-text', item.value).attr('data-name', item.name).call(g => {
155
- // circle label
156
- if (y_axis_show_value) {
157
- const curCircleEl = g.node();
158
- rectsWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
159
- const {
160
- width
161
- } = g.node().getBoundingClientRect();
162
- const translateX = Number(curCircleEl.getAttribute('cx')) - width / 2;
163
- const translateY = Number(curCircleEl.getAttribute('cy')) - 10;
164
- g.attr('transform', "translate(".concat(translateX, ", ").concat(translateY, ")"));
165
- });
166
- }
167
- }).on('click', (event, data) => {
168
- this.props.toggleRecords(data);
169
- });
156
+ if (Object.keys(item).length !== 0) {
157
+ rectsWrapper.append('circle').attr('cx', item.x).attr('cy', item.y).attr('r', 3).attr('fill', this.colorMap[group_name]).attr('opacity', y_axis_show_value ? 1 : 0).attr('data-text', item.value).attr('data-name', item.name).call(g => {
158
+ // circle label
159
+ if (y_axis_show_value) {
160
+ const curCircleEl = g.node();
161
+ rectsWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(_utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(curCircleEl.getAttribute('data-text')), y_axis_summary_method)).call(g => {
162
+ const {
163
+ width
164
+ } = g.node().getBoundingClientRect();
165
+ const translateX = Number(curCircleEl.getAttribute('cx')) - width / 2;
166
+ const translateY = Number(curCircleEl.getAttribute('cy')) - 10;
167
+ g.attr('transform', "translate(".concat(translateX, ", ").concat(translateY, ")"));
168
+ });
169
+ }
170
+ }).on('click', (event, data) => {
171
+ this.props.toggleRecords(data);
172
+ });
173
+ }
170
174
  });
171
175
  });
172
176
  this.chart.on('mouseover', event => {
@@ -210,7 +214,7 @@ class AreaGroup extends _chartComponent.default {
210
214
  });
211
215
  };
212
216
  this.updateCircleAndTickStyle = _ref4 => {
213
- var _rectsWrapper$selectA, _this$ticksWrapper$se;
217
+ var _rectsWrapper$selectA;
214
218
  let {
215
219
  event,
216
220
  state,
@@ -220,13 +224,12 @@ class AreaGroup extends _chartComponent.default {
220
224
  tooltipTitle
221
225
  } = _ref4;
222
226
  const {
223
- y_axis_show_value
224
- } = this.props.chart.config;
227
+ globalTheme,
228
+ chart
229
+ } = this.props;
225
230
  const {
226
- height: chartHeight,
227
- insertPadding,
228
- marginTop
229
- } = this.chartBoundingClientRect;
231
+ y_axis_show_value
232
+ } = chart.config;
230
233
  const {
231
234
  offsetX
232
235
  } = event;
@@ -237,49 +240,38 @@ class AreaGroup extends _chartComponent.default {
237
240
  const minDistanceItem = this.getMinDistanceItem(offsetX, circleData);
238
241
  const tooltipItems = circleData.filter(item => item.name && item.name === minDistanceItem.name);
239
242
  const circleList = (_rectsWrapper$selectA = rectsWrapper.selectAll('circle')) === null || _rectsWrapper$selectA === void 0 ? void 0 : _rectsWrapper$selectA.nodes();
240
- if (circleList.length !== 0) {
241
- if (state === 'zoomIn') {
242
- circleList.forEach(circle => {
243
- const name = circle.getAttribute('data-name');
244
- if (name === minDistanceItem.name) {
245
- d3.select(circle).attr('opacity', 1);
246
- d3.select(circle).attr('r', 5);
247
- } else {
248
- d3.select(circle).attr('opacity', 0.3);
249
- d3.select(circle).attr('r', 3);
250
- }
251
- });
252
- rectsWrapper.selectAll('.area').attr('opacity', 0.1);
253
- rectsWrapper.selectAll('.line').attr('opacity', 0.3);
254
- } else {
255
- circleList.forEach(circle => {
256
- if (!y_axis_show_value) {
257
- d3.select(circle).attr('opacity', 0);
258
- } else {
259
- d3.select(circle).attr('opacity', 1);
260
- }
243
+ if (state === 'zoomIn') {
244
+ // circle
245
+ circleList.forEach(circle => {
246
+ const name = circle.getAttribute('data-name');
247
+ if (name === minDistanceItem.name) {
248
+ d3.select(circle).attr('opacity', 1);
249
+ d3.select(circle).attr('r', 5);
250
+ } else {
251
+ d3.select(circle).attr('opacity', 0.3);
261
252
  d3.select(circle).attr('r', 3);
262
- });
263
- rectsWrapper.selectAll('.area').attr('opacity', 0.3);
264
- rectsWrapper.selectAll('.line').attr('opacity', 1);
265
- }
266
- }
267
- const ticks = (_this$ticksWrapper$se = this.ticksWrapper.selectAll('.tick line')) === null || _this$ticksWrapper$se === void 0 ? void 0 : _this$ticksWrapper$se.nodes();
268
- if (ticks.length !== 0) {
269
- if (state === 'zoomIn') {
270
- ticks.forEach(tick => {
271
- const name = tick.getAttribute('data-name');
272
- if (name === minDistanceItem.name) {
273
- d3.select(tick).attr('y2', -(chartHeight - insertPadding * 2 - marginTop));
274
- } else {
275
- d3.select(tick).attr('y2', 0);
276
- }
277
- });
278
- } else {
279
- ticks.forEach(tick => {
280
- d3.select(tick).attr('y2', 0);
281
- });
282
- }
253
+ }
254
+ });
255
+ rectsWrapper.selectAll('.area').transition().duration(200).attr('opacity', 0.1);
256
+ rectsWrapper.selectAll('.line').transition().duration(200).attr('opacity', 0.3);
257
+ // line
258
+ const theme = _constants.CHART_THEME_COLOR[globalTheme];
259
+ this.clearOldVerticalAnnotation(rectsWrapper);
260
+ this.addVerticalAnnotation(rectsWrapper, minDistanceItem, theme);
261
+ } else {
262
+ // circle
263
+ circleList.forEach(circle => {
264
+ if (!y_axis_show_value) {
265
+ d3.select(circle).attr('opacity', 0);
266
+ } else {
267
+ d3.select(circle).attr('opacity', 1);
268
+ }
269
+ d3.select(circle).attr('r', 3);
270
+ });
271
+ rectsWrapper.selectAll('.area').transition().duration(200).attr('opacity', 0.3);
272
+ rectsWrapper.selectAll('.line').transition().duration(200).attr('opacity', 1);
273
+ // line
274
+ this.clearOldVerticalAnnotation(rectsWrapper);
283
275
  }
284
276
 
285
277
  // tooltip
package/dist/view/wrapper/area.js CHANGED
@@ -56,7 +56,8 @@ class Area extends _chartComponent.default {
56
56
  const {
57
57
  chart,
58
58
  globalTheme,
59
- tables
59
+ tables,
60
+ summaryColumn
60
61
  } = this.props;
61
62
  const theme = _constants.CHART_THEME_COLOR[globalTheme];
62
63
  const {
@@ -65,6 +66,7 @@ class Area extends _chartComponent.default {
65
66
  goal_value
66
67
  } = chart.style_config || {};
67
68
  const {
69
+ y_axis_summary_method,
68
70
  y_axis_summary_type,
69
71
  y_axis_column_key,
70
72
  y_axis_summary_column_key,
@@ -87,12 +89,12 @@ class Area extends _chartComponent.default {
87
89
  // Y axis
88
90
  const niceEnd = d3.nice(0, d3.max(data, d => d.value), 5)[1];
89
91
  const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min || 0, y_axis_max || niceEnd]).range([chartHeight - insertPadding, insertPadding + marginTop]);
90
- this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => this.drawYaxis(g, theme));
92
+ this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
91
93
 
92
94
  // X axis
93
95
  const xDomain = data.map(item => item.name);
94
96
  const x = d3.scaleBand().domain(xDomain).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
95
- this.ticksWrapper = this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
97
+ this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
96
98
  this.ticksAddName(g);
97
99
  g.selectAll('.domain').attr('stroke', theme.XAxisColor);
98
100
  g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
@@ -130,7 +132,7 @@ class Area extends _chartComponent.default {
130
132
  // circle label
131
133
  if (y_axis_show_value) {
132
134
  const curCircleEl = g.node();
133
- rectsWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
135
+ rectsWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(_utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(curCircleEl.getAttribute('data-text')), y_axis_summary_method)).call(g => {
134
136
  const {
135
137
  width
136
138
  } = g.node().getBoundingClientRect();
@@ -176,7 +178,7 @@ class Area extends _chartComponent.default {
176
178
  }
177
179
  };
178
180
  this.updateCircleAndTickStyle = _ref => {
179
- var _rectsWrapper$selectA, _this$ticksWrapper$se;
181
+ var _rectsWrapper$selectA;
180
182
  let {
181
183
  event,
182
184
  state,
@@ -186,61 +188,49 @@ class Area extends _chartComponent.default {
186
188
  tooltipTitle
187
189
  } = _ref;
188
190
  const {
189
- y_axis_show_value
190
- } = this.props.chart.config;
191
+ globalTheme,
192
+ chart
193
+ } = this.props;
191
194
  const {
192
- height: chartHeight,
193
- insertPadding,
194
- marginTop
195
- } = this.chartBoundingClientRect;
195
+ y_axis_show_value
196
+ } = chart.config;
196
197
  const {
197
198
  offsetX
198
199
  } = event;
199
200
  const minDistanceItem = this.getMinDistanceItem(offsetX, circleData);
200
201
  const circleList = (_rectsWrapper$selectA = rectsWrapper.selectAll('circle')) === null || _rectsWrapper$selectA === void 0 ? void 0 : _rectsWrapper$selectA.nodes();
201
- if (circleList.length !== 0) {
202
- if (state === 'zoomIn') {
203
- circleList.forEach(circle => {
204
- const name = circle.getAttribute('data-name');
205
- if (name === minDistanceItem.name) {
206
- d3.select(circle).attr('opacity', 1);
207
- d3.select(circle).attr('r', 5);
208
- } else {
209
- d3.select(circle).attr('opacity', 0.3);
210
- d3.select(circle).attr('r', 3);
211
- }
212
- });
213
- this.Area.attr('opacity', 0.1);
214
- this.Line.attr('opacity', 0.3);
215
- } else {
216
- circleList.forEach(circle => {
217
- if (!y_axis_show_value) {
218
- d3.select(circle).attr('opacity', 0);
219
- } else {
220
- d3.select(circle).attr('opacity', 1);
221
- }
202
+ if (state === 'zoomIn') {
203
+ // circle
204
+ circleList.forEach(circle => {
205
+ const name = circle.getAttribute('data-name');
206
+ if (name === minDistanceItem.name) {
207
+ d3.select(circle).attr('opacity', 1);
208
+ d3.select(circle).attr('r', 5);
209
+ } else {
210
+ d3.select(circle).attr('opacity', 0.3);
222
211
  d3.select(circle).attr('r', 3);
223
- });
224
- this.Area.attr('opacity', 0.3);
225
- this.Line.attr('opacity', 1);
226
- }
227
- }
228
- const ticks = (_this$ticksWrapper$se = this.ticksWrapper.selectAll('.tick line')) === null || _this$ticksWrapper$se === void 0 ? void 0 : _this$ticksWrapper$se.nodes();
229
- if (ticks.length !== 0) {
230
- if (state === 'zoomIn') {
231
- ticks.forEach(tick => {
232
- const name = tick.getAttribute('data-name');
233
- if (name === minDistanceItem.name) {
234
- d3.select(tick).attr('y2', -(chartHeight - insertPadding * 2 - marginTop));
235
- } else {
236
- d3.select(tick).attr('y2', 0);
237
- }
238
- });
239
- } else {
240
- ticks.forEach(tick => {
241
- d3.select(tick).attr('y2', 0);
242
- });
243
- }
212
+ }
213
+ });
214
+ this.Area.transition().duration(200).attr('opacity', 0.1);
215
+ this.Line.transition().duration(200).attr('opacity', 0.3);
216
+ // line
217
+ const theme = _constants.CHART_THEME_COLOR[globalTheme];
218
+ this.clearOldVerticalAnnotation(rectsWrapper);
219
+ this.addVerticalAnnotation(rectsWrapper, minDistanceItem, theme);
220
+ } else {
221
+ // circle
222
+ circleList.forEach(circle => {
223
+ if (!y_axis_show_value) {
224
+ d3.select(circle).attr('opacity', 0);
225
+ } else {
226
+ d3.select(circle).attr('opacity', 1);
227
+ }
228
+ d3.select(circle).attr('r', 3);
229
+ });
230
+ this.Area.transition().duration(200).attr('opacity', 0.3);
231
+ this.Line.transition().duration(200).attr('opacity', 1);
232
+ // line
233
+ this.clearOldVerticalAnnotation(rectsWrapper);
244
234
  }
245
235
 
246
236
  // tooltip
package/dist/view/wrapper/chart-component.js CHANGED
@@ -61,7 +61,7 @@ class ChartComponent extends _react.Component {
61
61
  } = initConfig;
62
62
  const width = containerWidth - marginLeft;
63
63
  const height = containerHeight - marginBottom;
64
- _this.chart = d3.create('svg').attr('id', id).attr('class', "svg-wrapper-".concat(id)).attr('width', width).attr('height', height).attr('viewBox', [0, 0, width, height]);
64
+ _this.chart = d3.create('svg').attr('id', id).attr('width', width).attr('height', height).attr('viewBox', [0, 0, width, height]);
65
65
  _this.container.appendChild(_this.chart.node());
66
66
  _this.chartBoundingClientRect = {
67
67
  ...JSON.parse(JSON.stringify(_this.chart.node().getBoundingClientRect())),
@@ -585,7 +585,6 @@ class ChartComponent extends _react.Component {
585
585
  };
586
586
  // set legend
587
587
  this.setLegend = _ref => {
588
- var _this$chart$node;
589
588
  let {
590
589
  legendName,
591
590
  theme = _constants.CHART_THEME_COLOR['light'],
@@ -619,7 +618,7 @@ class ChartComponent extends _react.Component {
619
618
  rightLegendSpace
620
619
  } = this.chartBoundingClientRect;
621
620
  const groupsData = this.getLegendDataGroups(legendData);
622
- const legendWrapper = this.chart.append('g').attr('class', "legend-wrapper-".concat((_this$chart$node = this.chart.node()) === null || _this$chart$node === void 0 ? void 0 : _this$chart$node.id));
621
+ const legendWrapper = this.chart.append('g').attr('class', 'legend-wrapper');
623
622
 
624
623
  // Render first group legend
625
624
  this.renderLegend({
@@ -913,15 +912,20 @@ class ChartComponent extends _react.Component {
913
912
  }
914
913
  };
915
914
  this.setLegendItemOffset = (legendItems, end) => {
915
+ const {
916
+ height: chartHeight,
917
+ bottomLegendSpace
918
+ } = this.chartBoundingClientRect;
916
919
  const endItem = legendItems[legendItems.length - 1];
917
920
  const endTranslateX = Number(endItem.getAttribute('data-translateX'));
918
921
  const {
919
922
  width: endWidth
920
923
  } = endItem.getBoundingClientRect();
921
924
  const offset = end - (endTranslateX + endWidth);
925
+ const curTranslateY = bottomLegendSpace ? chartHeight - bottomLegendSpace : 0; // legend offset bottom
922
926
  legendItems.forEach(legendItem => {
923
927
  const curTranslateX = Number(legendItem.getAttribute('data-translateX')) + offset;
924
- d3.select(legendItem).attr('transform', "translate(".concat(curTranslateX, ",0)")).attr('data-translateX', curTranslateX);
928
+ d3.select(legendItem).attr('transform', "translate(".concat(curTranslateX, ", ").concat(curTranslateY, ")")).attr('data-translateX', curTranslateX);
925
929
  d3.select(legendItem).attr('opacity', 1);
926
930
  });
927
931
  };
@@ -1125,11 +1129,11 @@ class ChartComponent extends _react.Component {
1125
1129
  return themeColors || _constants.CHART_THEME_COLOR[_constants.THEME_NAME_MAP.LIGHT];
1126
1130
  };
1127
1131
  this.setDispalyGoalLine = (goal_label, goal_value, insertPadding, yScale) => {
1128
- var _this$chart$node2;
1132
+ var _this$chart$node;
1129
1133
  const {
1130
1134
  width: chartWidth
1131
1135
  } = this.chartBoundingClientRect;
1132
- const annotationWrapper = this.chart.append('g').attr('class', "annotation-wrapper-".concat((_this$chart$node2 = this.chart.node()) === null || _this$chart$node2 === void 0 ? void 0 : _this$chart$node2.id));
1136
+ const annotationWrapper = this.chart.append('g').attr('class', "annotation-wrapper-".concat((_this$chart$node = this.chart.node()) === null || _this$chart$node === void 0 ? void 0 : _this$chart$node.id));
1133
1137
  annotationWrapper.append('line').attr('stroke', '#aaa').attr('x1', insertPadding).attr('y1', yScale(goal_value)).attr('x2', chartWidth - insertPadding).attr('y2', yScale(goal_value)).attr('stroke-dasharray', '8,3').call(g => {
1134
1138
  annotationWrapper.append('text').attr('x', chartWidth - insertPadding - 30).attr('y', yScale(goal_value) - 10).attr('fill', '#666').text(goal_label);
1135
1139
  });
@@ -1197,12 +1201,15 @@ class ChartComponent extends _react.Component {
1197
1201
  g.attr('transform', "translate(".concat(translateX, ", ").concat(translateY, ")"));
1198
1202
  });
1199
1203
  };
1200
- this.setActiveAndInActiveState = (state, allGroup, curGroupName) => {
1204
+ this.setActiveAndInActiveState = (state, allGroup, curGroupName, chartType) => {
1201
1205
  if (state === 'active') {
1202
1206
  allGroup.forEach(g => {
1203
1207
  const rects = Array.from(g.children);
1204
1208
  rects.forEach(item => {
1205
- d3.select(item).attr('opacity', 1);
1209
+ d3.select(item).transition().duration(500).attr('opacity', 1);
1210
+ if ([_constants.CHART_TYPE.PIE, _constants.CHART_TYPE.RING].includes(chartType)) {
1211
+ d3.select(item).attr('stroke-width', 2);
1212
+ }
1206
1213
  });
1207
1214
  });
1208
1215
  }
@@ -1211,7 +1218,11 @@ class ChartComponent extends _react.Component {
1211
1218
  const rects = Array.from(g.children);
1212
1219
  rects.forEach(item => {
1213
1220
  if (item.getAttribute('data-groupName') !== curGroupName) {
1214
- d3.select(item).attr('opacity', 0.3);
1221
+ d3.selectAll([item]).transition().duration(500).attr('opacity', 0.3);
1222
+ } else {
1223
+ if ([_constants.CHART_TYPE.PIE, _constants.CHART_TYPE.RING].includes(chartType)) {
1224
+ d3.select(item).attr('stroke-width', 0.5);
1225
+ }
1215
1226
  }
1216
1227
  });
1217
1228
  });
@@ -1410,6 +1421,23 @@ class ChartComponent extends _react.Component {
1410
1421
  const minItem = newAllData[minIndex];
1411
1422
  return minItem;
1412
1423
  };
1424
+ this.clearOldVerticalAnnotation = contentWrapper => {
1425
+ const oldAnnotationWrapper = contentWrapper.selectAll('.vertical-annotation-wrapper');
1426
+ oldAnnotationWrapper.node() && oldAnnotationWrapper.node().remove();
1427
+ };
1428
+ this.addVerticalAnnotation = (contentWrapper, minDistanceItem, theme) => {
1429
+ const {
1430
+ height: chartHeight,
1431
+ insertPadding,
1432
+ marginTop
1433
+ } = this.chartBoundingClientRect;
1434
+ const {
1435
+ x,
1436
+ y
1437
+ } = minDistanceItem;
1438
+ const annotationWrapper = contentWrapper.insert('g', ':first-child').attr('class', 'vertical-annotation-wrapper');
1439
+ annotationWrapper.append('line').attr('x1', x).attr('y1', insertPadding + marginTop).attr('x2', x).attr('y2', chartHeight - insertPadding).attr('stroke', theme.XAxisColor);
1440
+ };
1413
1441
  this.initLabelStroke(props === null || props === void 0 ? void 0 : props.globalTheme);
1414
1442
  this.chartBoundingClientRect = {};
1415
1443
  }
package/dist/view/wrapper/index.js CHANGED
@@ -27,6 +27,7 @@ var _area = _interopRequireDefault(require("./area"));
27
27
  var _areaGroup = _interopRequireDefault(require("./area-group"));
28
28
  var _pie = _interopRequireDefault(require("./pie"));
29
29
  var _ring = _interopRequireDefault(require("./ring"));
30
+ var _scatter = _interopRequireDefault(require("./scatter"));
30
31
  var _basicNumberCard = _interopRequireDefault(require("./basic-number-card"));
31
32
  var _trend = _interopRequireDefault(require("./trend"));
32
33
  var _tableElement = _interopRequireDefault(require("./table-element"));
@@ -237,6 +238,12 @@ const Wrapper = _ref => {
237
238
  canvasStyle: canvasStyle
238
239
  }));
239
240
  }
241
+ case _constants.CHART_TYPE.SCATTER:
242
+ {
243
+ return /*#__PURE__*/_react.default.createElement(_scatter.default, Object.assign({}, baseProps, {
244
+ canvasStyle: canvasStyle
245
+ }));
246
+ }
240
247
  case _constants.CHART_TYPE.BASIC_NUMBER_CARD:
241
248
  {
242
249
  return /*#__PURE__*/_react.default.createElement(_basicNumberCard.default, Object.assign({}, baseProps, {