sea-chart 2.0.18 → 2.0.19

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 (8) hide show
  1. package/dist/view/wrapper/area-group.js +60 -68
  2. package/dist/view/wrapper/area.js +43 -53
  3. package/dist/view/wrapper/chart-component.js +17 -2
  4. package/dist/view/wrapper/line-group.js +43 -50
  5. package/dist/view/wrapper/line.js +51 -47
  6. package/dist/view/wrapper/pie.js +1 -1
  7. package/dist/view/wrapper/ring.js +1 -1
  8. package/package.json +1 -1
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
@@ -1202,7 +1202,7 @@ class ChartComponent extends _react.Component {
1202
1202
  allGroup.forEach(g => {
1203
1203
  const rects = Array.from(g.children);
1204
1204
  rects.forEach(item => {
1205
- d3.select(item).attr('opacity', 1);
1205
+ d3.select(item).transition().duration(200).attr('opacity', 1);
1206
1206
  });
1207
1207
  });
1208
1208
  }
@@ -1211,7 +1211,7 @@ class ChartComponent extends _react.Component {
1211
1211
  const rects = Array.from(g.children);
1212
1212
  rects.forEach(item => {
1213
1213
  if (item.getAttribute('data-groupName') !== curGroupName) {
1214
- d3.select(item).attr('opacity', 0.3);
1214
+ d3.select(item).transition().duration(200).attr('opacity', 0.3);
1215
1215
  }
1216
1216
  });
1217
1217
  });
@@ -1410,6 +1410,21 @@ class ChartComponent extends _react.Component {
1410
1410
  const minItem = newAllData[minIndex];
1411
1411
  return minItem;
1412
1412
  };
1413
+ this.clearOldVerticalAnnotation = rectsWrapper => {
1414
+ const oldAnnotationWrapper = rectsWrapper.selectAll('.vertical-annotation-wrapper');
1415
+ oldAnnotationWrapper.node() && oldAnnotationWrapper.node().remove();
1416
+ };
1417
+ this.addVerticalAnnotation = (rectsWrapper, minDistanceItem, theme) => {
1418
+ const {
1419
+ height: chartHeight,
1420
+ insertPadding,
1421
+ marginTop
1422
+ } = this.chartBoundingClientRect;
1423
+ const {
1424
+ x
1425
+ } = minDistanceItem;
1426
+ rectsWrapper.append('g').attr('class', 'vertical-annotation-wrapper').append('line').attr('x1', x).attr('y1', insertPadding + marginTop).attr('x2', x).attr('y2', chartHeight - insertPadding).attr('stroke', theme.XAxisColor);
1427
+ };
1413
1428
  this.initLabelStroke(props === null || props === void 0 ? void 0 : props.globalTheme);
1414
1429
  this.chartBoundingClientRect = {};
1415
1430
  }
package/dist/view/wrapper/line-group.js CHANGED
@@ -109,13 +109,20 @@ class LineGroup extends _chartComponent.default {
109
109
  };
110
110
  this.getTooltipItems = (data, rectsWrapper) => {
111
111
  var _rectsWrapper$selectA;
112
+ const {
113
+ summaryColumn,
114
+ chart
115
+ } = this.props;
116
+ const {
117
+ y_axis_summary_method
118
+ } = chart.config;
112
119
  const title = !data.name && typeof data.name !== 'number' ? _intl.default.get(_constants.EMPTY_NAME) : data.name;
113
120
  const circleList = (_rectsWrapper$selectA = rectsWrapper.selectAll('circle')) === null || _rectsWrapper$selectA === void 0 ? void 0 : _rectsWrapper$selectA.nodes();
114
121
  const items = circleList.filter(circle => circle.getAttribute('data-name') === title).map(circle => {
115
122
  return {
116
123
  color: this.colorMap[circle.getAttribute('data-groupName')],
117
124
  name: circle.getAttribute('data-groupName'),
118
- value: circle.getAttribute('data-text')
125
+ value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(circle.getAttribute('data-text')), y_axis_summary_method)
119
126
  };
120
127
  });
121
128
  return {
@@ -128,7 +135,8 @@ class LineGroup extends _chartComponent.default {
128
135
  chart,
129
136
  globalTheme,
130
137
  columnGroupbyColumn,
131
- chartColorTheme
138
+ chartColorTheme,
139
+ summaryColumn
132
140
  } = this.props;
133
141
  const theme = _constants.CHART_THEME_COLOR[globalTheme];
134
142
  const {
@@ -137,6 +145,7 @@ class LineGroup extends _chartComponent.default {
137
145
  goal_label
138
146
  } = chart.style_config || {};
139
147
  const {
148
+ y_axis_summary_method,
140
149
  y_axis_show_value,
141
150
  label_font_size,
142
151
  line_type,
@@ -157,12 +166,12 @@ class LineGroup extends _chartComponent.default {
157
166
  // Y axis
158
167
  const niceEnd = d3.nice(0, d3.max(data, d => d.value), 5)[1];
159
168
  const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min || 0, y_axis_max || niceEnd]).range([chartHeight - insertPadding, insertPadding + marginTop]);
160
- 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));
169
+ 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));
161
170
 
162
171
  // X axis
163
172
  const xDomain = data.map(item => item.name);
164
173
  const x = d3.scaleBand().domain(xDomain).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.4).paddingOuter(0.1);
165
- this.ticksWrapper = this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
174
+ this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
166
175
  this.ticksAddName(g);
167
176
  g.selectAll('.domain').attr('stroke', theme.XAxisColor);
168
177
  g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
@@ -209,7 +218,7 @@ class LineGroup extends _chartComponent.default {
209
218
  // circle label
210
219
  if (y_axis_show_value) {
211
220
  const curCircleEl = g.node();
212
- 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 => {
221
+ 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 => {
213
222
  const {
214
223
  width
215
224
  } = g.node().getBoundingClientRect();
@@ -262,7 +271,7 @@ class LineGroup extends _chartComponent.default {
262
271
  });
263
272
  };
264
273
  this.updateCircleAndTickStyle = _ref2 => {
265
- var _rectsWrapper$selectA2, _this$ticksWrapper$se;
274
+ var _rectsWrapper$selectA2;
266
275
  let {
267
276
  event,
268
277
  state,
@@ -271,13 +280,12 @@ class LineGroup extends _chartComponent.default {
271
280
  eventState
272
281
  } = _ref2;
273
282
  const {
274
- y_axis_show_value
275
- } = this.props.chart.config;
283
+ globalTheme,
284
+ chart
285
+ } = this.props;
276
286
  const {
277
- height: chartHeight,
278
- insertPadding,
279
- marginTop
280
- } = this.chartBoundingClientRect;
287
+ y_axis_show_value
288
+ } = chart.config;
281
289
  const {
282
290
  offsetX
283
291
  } = event;
@@ -292,46 +300,31 @@ class LineGroup extends _chartComponent.default {
292
300
  });
293
301
  const minIndex = d3.minIndex(minDistanceArr, d => d.distance);
294
302
  const minDistanceItem = minDistanceArr[minIndex];
295
-
296
- // circle
297
303
  const circleList = (_rectsWrapper$selectA2 = rectsWrapper.selectAll('circle')) === null || _rectsWrapper$selectA2 === void 0 ? void 0 : _rectsWrapper$selectA2.nodes();
298
- if (circleList.length !== 0) {
299
- if (state === 'zoomIn') {
300
- circleList.forEach(circle => {
301
- const name = circle.getAttribute('data-name');
302
- if (name === minDistanceItem.name) {
303
- d3.select(circle).attr('opacity', 1);
304
- d3.select(circle).attr('r', 5);
305
- } else {
306
- d3.select(circle).attr('opacity', 0);
307
- d3.select(circle).attr('r', 3);
308
- }
309
- });
310
- } else {
311
- circleList.forEach(circle => {
312
- !y_axis_show_value && d3.select(circle).attr('opacity', 0);
304
+ if (state === 'zoomIn') {
305
+ // circle
306
+ circleList && circleList.forEach(circle => {
307
+ const name = circle.getAttribute('data-name');
308
+ if (name === minDistanceItem.name) {
309
+ d3.select(circle).attr('opacity', 1);
310
+ d3.select(circle).attr('r', 5);
311
+ } else {
312
+ d3.select(circle).attr('opacity', 0);
313
313
  d3.select(circle).attr('r', 3);
314
- });
315
- }
316
- }
317
-
318
- // tick
319
- const ticks = (_this$ticksWrapper$se = this.ticksWrapper.selectAll('.tick line')) === null || _this$ticksWrapper$se === void 0 ? void 0 : _this$ticksWrapper$se.nodes();
320
- if (ticks.length !== 0) {
321
- if (state === 'zoomIn') {
322
- ticks.forEach(tick => {
323
- const name = tick.getAttribute('data-name');
324
- if (name === minDistanceItem.name) {
325
- d3.select(tick).attr('y2', -(chartHeight - insertPadding * 2 - marginTop));
326
- } else {
327
- d3.select(tick).attr('y2', 0);
328
- }
329
- });
330
- } else {
331
- ticks.forEach(tick => {
332
- d3.select(tick).attr('y2', 0);
333
- });
334
- }
314
+ }
315
+ });
316
+ // line
317
+ const theme = _constants.CHART_THEME_COLOR[globalTheme];
318
+ this.clearOldVerticalAnnotation(rectsWrapper);
319
+ this.addVerticalAnnotation(rectsWrapper, minDistanceItem, theme);
320
+ } else {
321
+ // circle
322
+ circleList && circleList.forEach(circle => {
323
+ !y_axis_show_value && d3.select(circle).attr('opacity', 0);
324
+ d3.select(circle).attr('r', 3);
325
+ });
326
+ // line
327
+ this.clearOldVerticalAnnotation(rectsWrapper);
335
328
  }
336
329
 
337
330
  // tooltip
package/dist/view/wrapper/line.js CHANGED
@@ -55,6 +55,13 @@ class Line extends _chartComponent.default {
55
55
  (0, _utils.isFunction)(customRender) && customRender(this.chart);
56
56
  };
57
57
  this.showTooltip = (event, data, title) => {
58
+ const {
59
+ chart,
60
+ summaryColumn
61
+ } = this.props;
62
+ const {
63
+ y_axis_summary_method
64
+ } = chart.config;
58
65
  const {
59
66
  offsetX,
60
67
  offsetY
@@ -64,7 +71,7 @@ class Line extends _chartComponent.default {
64
71
  items: [{
65
72
  color: this.getLineColor(),
66
73
  name: data.name,
67
- value: data.value
74
+ value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(data.value), y_axis_summary_method)
68
75
  }]
69
76
  };
70
77
  this.setState({
@@ -78,6 +85,13 @@ class Line extends _chartComponent.default {
78
85
  });
79
86
  };
80
87
  this.moveTooltip = (event, data, title) => {
88
+ const {
89
+ chart,
90
+ summaryColumn
91
+ } = this.props;
92
+ const {
93
+ y_axis_summary_method
94
+ } = chart.config;
81
95
  const {
82
96
  offsetX,
83
97
  offsetY
@@ -87,7 +101,7 @@ class Line extends _chartComponent.default {
87
101
  items: [{
88
102
  color: this.getLineColor(),
89
103
  name: data.name,
90
- value: data.value
104
+ value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, Number(data.value), y_axis_summary_method)
91
105
  }]
92
106
  };
93
107
  this.setState({
@@ -109,7 +123,8 @@ class Line extends _chartComponent.default {
109
123
  const {
110
124
  chart,
111
125
  globalTheme,
112
- tables
126
+ tables,
127
+ summaryColumn
113
128
  } = this.props;
114
129
  const theme = _constants.CHART_THEME_COLOR[globalTheme];
115
130
  const {
@@ -120,6 +135,7 @@ class Line extends _chartComponent.default {
120
135
  const {
121
136
  table_id,
122
137
  y_axis_column_key,
138
+ y_axis_summary_method,
123
139
  y_axis_summary_column_key,
124
140
  y_axis_show_value,
125
141
  label_font_size,
@@ -141,12 +157,12 @@ class Line extends _chartComponent.default {
141
157
  // Y axis
142
158
  const niceEnd = d3.nice(0, d3.max(data, d => d.value), 5)[1];
143
159
  const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min || 0, y_axis_max || niceEnd]).range([chartHeight - insertPadding, insertPadding + marginTop]);
144
- 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));
160
+ 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));
145
161
 
146
162
  // X axis
147
163
  const xDomain = data.map(item => item.name);
148
164
  const x = d3.scaleBand().domain(xDomain).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.4).paddingOuter(0.1);
149
- this.ticksWrapper = this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
165
+ this.chart.append('g').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
150
166
  this.ticksAddName(g);
151
167
  g.selectAll('.domain').attr('stroke', theme.XAxisColor);
152
168
  g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
@@ -177,7 +193,7 @@ class Line extends _chartComponent.default {
177
193
  // circle label
178
194
  if (y_axis_show_value) {
179
195
  const curCircleEl = g.node();
180
- 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 => {
196
+ 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 => {
181
197
  const {
182
198
  width
183
199
  } = g.node().getBoundingClientRect();
@@ -223,7 +239,7 @@ class Line extends _chartComponent.default {
223
239
  }
224
240
  };
225
241
  this.updateCircleAndTickStyle = _ref => {
226
- var _rectsWrapper$selectA, _this$ticksWrapper$se;
242
+ var _rectsWrapper$selectA;
227
243
  let {
228
244
  event,
229
245
  state,
@@ -233,53 +249,41 @@ class Line extends _chartComponent.default {
233
249
  tooltipTitle
234
250
  } = _ref;
235
251
  const {
236
- y_axis_show_value
237
- } = this.props.chart.config;
252
+ globalTheme,
253
+ chart
254
+ } = this.props;
238
255
  const {
239
- height: chartHeight,
240
- insertPadding,
241
- marginTop
242
- } = this.chartBoundingClientRect;
256
+ y_axis_show_value
257
+ } = chart.config;
243
258
  const {
244
259
  offsetX
245
260
  } = event;
246
261
  const minDistanceItem = this.getMinDistanceItem(offsetX, circleData);
247
262
  const circleList = (_rectsWrapper$selectA = rectsWrapper.selectAll('circle')) === null || _rectsWrapper$selectA === void 0 ? void 0 : _rectsWrapper$selectA.nodes();
248
- if (circleList.length !== 0) {
249
- if (state === 'zoomIn') {
250
- circleList.forEach(circle => {
251
- const name = circle.getAttribute('data-name');
252
- if (name === minDistanceItem.name) {
253
- d3.select(circle).attr('opacity', 1);
254
- d3.select(circle).attr('r', 5);
255
- } else {
256
- d3.select(circle).attr('opacity', 0);
257
- d3.select(circle).attr('r', 3);
258
- }
259
- });
260
- } else {
261
- circleList.forEach(circle => {
262
- !y_axis_show_value && d3.select(circle).attr('opacity', 0);
263
+ if (state === 'zoomIn') {
264
+ // circle
265
+ circleList && circleList.forEach(circle => {
266
+ const name = circle.getAttribute('data-name');
267
+ if (name === minDistanceItem.name) {
268
+ d3.select(circle).attr('opacity', 1);
269
+ d3.select(circle).attr('r', 5);
270
+ } else {
271
+ d3.select(circle).attr('opacity', 0);
263
272
  d3.select(circle).attr('r', 3);
264
- });
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
- }
273
+ }
274
+ });
275
+ // line
276
+ const theme = _constants.CHART_THEME_COLOR[globalTheme];
277
+ this.clearOldVerticalAnnotation(rectsWrapper);
278
+ this.addVerticalAnnotation(rectsWrapper, minDistanceItem, theme);
279
+ } else {
280
+ // circle
281
+ circleList && circleList.forEach(circle => {
282
+ !y_axis_show_value && d3.select(circle).attr('opacity', 0);
283
+ d3.select(circle).attr('r', 3);
284
+ });
285
+ // line
286
+ this.clearOldVerticalAnnotation(rectsWrapper);
283
287
  }
284
288
 
285
289
  // tooltip
package/dist/view/wrapper/pie.js CHANGED
@@ -83,7 +83,7 @@ class Pie extends _chartComponent.default {
83
83
  // Pie and Arc
84
84
  const pie = d3.pie().sort(null).value(d => d.value);
85
85
  const arcs = pie(data);
86
- const arc = d3.arc().innerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.7 * 0.03).outerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.7);
86
+ const arc = d3.arc().innerRadius(0).outerRadius(Math.min(chartWidth, chartHeight) / 2 * 0.7);
87
87
 
88
88
  // Draw Pie
89
89
  this.chart.append('g').attr('stroke', 'white').attr('stroke-width', 2).selectAll().data(arcs).join('path').attr('fill', d => color(d.data.name)).attr('d', arc).attr('data-groupName', d => d.data.name).call(g => {
package/dist/view/wrapper/ring.js CHANGED
@@ -130,7 +130,7 @@ class Ring extends _chartComponent.default {
130
130
  this.handleAcitveAndInActiveState('inActive', event);
131
131
  this.setAnnotationTotal(event.currentTarget.parentNode, {
132
132
  name: this.getTooltipName(rowData.data.name),
133
- value: this.getLabel(rowData.data.value, rowData.data.percent)
133
+ value: rowData.data.value
134
134
  });
135
135
  }).on('mousemove', event => {
136
136
  this.moveTooltip(event);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sea-chart",
3
- "version": "2.0.18",
3
+ "version": "2.0.19",
4
4
  "main": "./dist/index.js",
5
5
  "dependencies": {
6
6
  "@dnd-kit/core": "^6.1.0",