sea-chart 2.0.17 → 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 (15) hide show
  1. package/dist/utils/chart-utils/base-utils.js +30 -0
  2. package/dist/view/wrapper/area-group.js +64 -70
  3. package/dist/view/wrapper/area.js +43 -53
  4. package/dist/view/wrapper/bar-custom-stack.js +8 -0
  5. package/dist/view/wrapper/bar-group.js +8 -5
  6. package/dist/view/wrapper/bar-stack.js +14 -16
  7. package/dist/view/wrapper/chart-component.js +26 -10
  8. package/dist/view/wrapper/completeness-group.js +10 -6
  9. package/dist/view/wrapper/horizontal-bar-group.js +7 -4
  10. package/dist/view/wrapper/horizontal-bar-stack.js +10 -6
  11. package/dist/view/wrapper/line-group.js +47 -52
  12. package/dist/view/wrapper/line.js +51 -47
  13. package/dist/view/wrapper/pie.js +1 -1
  14. package/dist/view/wrapper/ring.js +1 -1
  15. package/package.json +1 -1
package/dist/utils/chart-utils/base-utils.js CHANGED
@@ -1780,4 +1780,34 @@ BaseUtils.isCollaboratorColumnOrMultipleColumn = columnMap => {
1780
1780
  }
1781
1781
  return false;
1782
1782
  };
1783
+ BaseUtils.sortDataByGroupName = function (data, groupKey, groupColumn) {
1784
+ let chart = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {
1785
+ config: {}
1786
+ };
1787
+ const {
1788
+ column_groupby_multiple_numeric_column
1789
+ } = chart.config;
1790
+ if (!column_groupby_multiple_numeric_column) {
1791
+ if (groupColumn) {
1792
+ if ([_dtableUtils.CellType.SINGLE_SELECT].includes(groupColumn.type)) {
1793
+ data.forEach(item => {
1794
+ const option = groupColumn.data.options.find(option => option.name === item[groupKey]);
1795
+ if (option !== null && option !== void 0 && option.id) {
1796
+ item['group_name_id'] = option.id;
1797
+ item['oldName'] = item.name;
1798
+ item.name = item['group_name_id'];
1799
+ }
1800
+ });
1801
+ _BaseUtils.sortCharts(data, groupColumn, 'name');
1802
+ data.forEach(item => {
1803
+ item.name = item['oldName'];
1804
+ });
1805
+ return data;
1806
+ }
1807
+ _BaseUtils.sortCharts(data, groupColumn, groupKey);
1808
+ }
1809
+ return data;
1810
+ }
1811
+ return data;
1812
+ };
1783
1813
  var _default = exports.default = BaseUtils;
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,
@@ -88,18 +90,18 @@ class AreaGroup extends _chartComponent.default {
88
90
  marginTop
89
91
  } = this.chartBoundingClientRect;
90
92
  const useSingleSelectColumnColor = (columnGroupbyColumn === null || columnGroupbyColumn === void 0 ? void 0 : columnGroupbyColumn.type) === _dtableUtils.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
91
- useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
93
+ useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme, 'group_name', columnGroupbyColumn, chart);
92
94
  const tooltipTitle = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
93
95
 
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 => {
@@ -204,11 +208,13 @@ class AreaGroup extends _chartComponent.default {
204
208
  legendName: 'group_name',
205
209
  theme,
206
210
  legendPosition: 'top-right',
207
- data
211
+ data,
212
+ groupColumn: this.props.columnGroupbyColumn,
213
+ chart
208
214
  });
209
215
  };
210
216
  this.updateCircleAndTickStyle = _ref4 => {
211
- var _rectsWrapper$selectA, _this$ticksWrapper$se;
217
+ var _rectsWrapper$selectA;
212
218
  let {
213
219
  event,
214
220
  state,
@@ -218,13 +224,12 @@ class AreaGroup extends _chartComponent.default {
218
224
  tooltipTitle
219
225
  } = _ref4;
220
226
  const {
221
- y_axis_show_value
222
- } = this.props.chart.config;
227
+ globalTheme,
228
+ chart
229
+ } = this.props;
223
230
  const {
224
- height: chartHeight,
225
- insertPadding,
226
- marginTop
227
- } = this.chartBoundingClientRect;
231
+ y_axis_show_value
232
+ } = chart.config;
228
233
  const {
229
234
  offsetX
230
235
  } = event;
@@ -235,49 +240,38 @@ class AreaGroup extends _chartComponent.default {
235
240
  const minDistanceItem = this.getMinDistanceItem(offsetX, circleData);
236
241
  const tooltipItems = circleData.filter(item => item.name && item.name === minDistanceItem.name);
237
242
  const circleList = (_rectsWrapper$selectA = rectsWrapper.selectAll('circle')) === null || _rectsWrapper$selectA === void 0 ? void 0 : _rectsWrapper$selectA.nodes();
238
- if (circleList.length !== 0) {
239
- if (state === 'zoomIn') {
240
- circleList.forEach(circle => {
241
- const name = circle.getAttribute('data-name');
242
- if (name === minDistanceItem.name) {
243
- d3.select(circle).attr('opacity', 1);
244
- d3.select(circle).attr('r', 5);
245
- } else {
246
- d3.select(circle).attr('opacity', 0.3);
247
- d3.select(circle).attr('r', 3);
248
- }
249
- });
250
- rectsWrapper.selectAll('.area').attr('opacity', 0.1);
251
- rectsWrapper.selectAll('.line').attr('opacity', 0.3);
252
- } else {
253
- circleList.forEach(circle => {
254
- if (!y_axis_show_value) {
255
- d3.select(circle).attr('opacity', 0);
256
- } else {
257
- d3.select(circle).attr('opacity', 1);
258
- }
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);
259
252
  d3.select(circle).attr('r', 3);
260
- });
261
- rectsWrapper.selectAll('.area').attr('opacity', 0.3);
262
- rectsWrapper.selectAll('.line').attr('opacity', 1);
263
- }
264
- }
265
- const ticks = (_this$ticksWrapper$se = this.ticksWrapper.selectAll('.tick line')) === null || _this$ticksWrapper$se === void 0 ? void 0 : _this$ticksWrapper$se.nodes();
266
- if (ticks.length !== 0) {
267
- if (state === 'zoomIn') {
268
- ticks.forEach(tick => {
269
- const name = tick.getAttribute('data-name');
270
- if (name === minDistanceItem.name) {
271
- d3.select(tick).attr('y2', -(chartHeight - insertPadding * 2 - marginTop));
272
- } else {
273
- d3.select(tick).attr('y2', 0);
274
- }
275
- });
276
- } else {
277
- ticks.forEach(tick => {
278
- d3.select(tick).attr('y2', 0);
279
- });
280
- }
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);
281
275
  }
282
276
 
283
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/bar-custom-stack.js CHANGED
@@ -71,6 +71,14 @@ class BarCustom extends _chartComponent.default {
71
71
  }
72
72
  }
73
73
  });
74
+
75
+ // sort Data
76
+ Object.keys(dataMap).forEach(key => {
77
+ const item = dataMap[key];
78
+ Object.keys(item).forEach(itemKey => {
79
+ item[itemKey].reverse();
80
+ });
81
+ });
74
82
  const stacksData = this.handleStacks(dataMap);
75
83
  return stacksData;
76
84
  };
package/dist/view/wrapper/bar-group.js CHANGED
@@ -62,7 +62,8 @@ class BarGroup extends _chartComponent.default {
62
62
  chart,
63
63
  globalTheme,
64
64
  chartColorTheme,
65
- tables
65
+ tables,
66
+ columnGroupbyColumn
66
67
  } = this.props;
67
68
  const {
68
69
  display_goal_line,
@@ -88,14 +89,15 @@ class BarGroup extends _chartComponent.default {
88
89
  const theme = _constants.CHART_THEME_COLOR[globalTheme];
89
90
  const column_groupby_column = this.getColumn(tables, table_id, column_groupby_column_key);
90
91
  const useSingleSelectColumnColor = (column_groupby_column === null || column_groupby_column === void 0 ? void 0 : column_groupby_column.type) === _dtableUtils.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
91
- useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme); // use single select column color
92
+ useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme, 'group_name', columnGroupbyColumn, chart); // use single select column color
92
93
 
93
94
  const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, d3.max(data, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding + marginTop]);
94
95
 
95
96
  // Y axis
96
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));
97
98
  const fx = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
98
- const x = d3.scaleBand().domain(new Set(data.map(d => d.group_name))).range([0, fx.bandwidth()]).paddingInner(0).paddingOuter(0);
99
+ const sortedData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), 'group_name', columnGroupbyColumn, chart);
100
+ const x = d3.scaleBand().domain(new Set(sortedData.map(d => d.group_name))).range([0, fx.bandwidth()]).paddingInner(0).paddingOuter(0);
99
101
 
100
102
  // X axis
101
103
  this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
@@ -107,7 +109,7 @@ class BarGroup extends _chartComponent.default {
107
109
  });
108
110
 
109
111
  // Rect group
110
- this.chart.append('g').selectAll().data(d3.group(data, d => d.name)).join('g').attr('transform', _ref => {
112
+ this.chart.append('g').selectAll().data(d3.group(sortedData, d => d.name)).join('g').attr('transform', _ref => {
111
113
  let [name, dum] = _ref;
112
114
  // Each group is horizontally centered
113
115
  const offset = (fx.bandwidth() - dum.length * x.bandwidth()) / 2;
@@ -159,7 +161,8 @@ class BarGroup extends _chartComponent.default {
159
161
  theme,
160
162
  legendPosition: 'top-right',
161
163
  data,
162
- groupColumn: this.props.columnGroupbyColumn
164
+ groupColumn: this.props.columnGroupbyColumn,
165
+ chart
163
166
  });
164
167
  };
165
168
  this.showTooltip = event => {
package/dist/view/wrapper/bar-stack.js CHANGED
@@ -47,23 +47,18 @@ class BarStack extends _chartComponent.default {
47
47
  };
48
48
  this.drawChart = () => {
49
49
  const {
50
- customRender
50
+ customRender,
51
+ chart
51
52
  } = this.props;
53
+ const {
54
+ sort_type
55
+ } = chart.config;
52
56
  let {
53
57
  result: data
54
58
  } = this.props;
55
59
  data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
56
60
  if (!Array.isArray(data)) return;
57
- const {
58
- chart
59
- } = this.props;
60
- const {
61
- sort_type,
62
- type
63
- } = chart.config;
64
- if (type === _constants.CHART_TYPE.BAR_STACK && sort_type) {
65
- data = (0, _columnUtils.sortDataByGroupSum)(data, sort_type);
66
- }
61
+ sort_type && (data = (0, _columnUtils.sortDataByGroupSum)(data, sort_type));
67
62
  this.draw(data);
68
63
  this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
69
64
  (0, _utils.isFunction)(customRender) && customRender(this.chart);
@@ -73,7 +68,8 @@ class BarStack extends _chartComponent.default {
73
68
  chart,
74
69
  globalTheme,
75
70
  chartColorTheme,
76
- tables
71
+ tables,
72
+ columnGroupbyColumn
77
73
  } = this.props;
78
74
  const {
79
75
  display_goal_line,
@@ -94,18 +90,19 @@ class BarStack extends _chartComponent.default {
94
90
  const column_groupby_column = this.getColumn(tables, table_id, column_groupby_column_key);
95
91
  const useSingleSelectColumnColor = (column_groupby_column === null || column_groupby_column === void 0 ? void 0 : column_groupby_column.type) === _dtableUtils.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
96
92
  // use single select column color
97
- useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
93
+ useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme, 'group_name', columnGroupbyColumn, chart);
98
94
  const {
99
95
  width: chartWidth,
100
96
  height: chartHeight,
101
97
  insertPadding,
102
98
  marginTop
103
99
  } = this.chartBoundingClientRect;
104
- const series = d3.stack().keys(d3.union(data.map(d => d.group_name))).value((_ref, key) => {
100
+ const sortedData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), 'group_name', columnGroupbyColumn, chart).reverse();
101
+ const series = d3.stack().keys(d3.union(sortedData.map(d => d.group_name))).value((_ref, key) => {
105
102
  var _group$get;
106
103
  let [_, group] = _ref;
107
104
  return (_group$get = group.get(String(key))) === null || _group$get === void 0 ? void 0 : _group$get.value;
108
- })(d3.index(data, d => d.name, d => d.group_name));
105
+ })(d3.index(sortedData, d => d.name, d => d.group_name));
109
106
  const niceEnd = d3.nice(0, d3.max(series, d => d3.max(d, d => d[1])), 5)[1];
110
107
  const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding + marginTop]);
111
108
 
@@ -187,7 +184,8 @@ class BarStack extends _chartComponent.default {
187
184
  theme,
188
185
  legendPosition: 'top-right',
189
186
  data,
190
- groupColumn: this.props.columnGroupbyColumn
187
+ groupColumn: this.props.columnGroupbyColumn,
188
+ chart
191
189
  });
192
190
  };
193
191
  // Horizontal stacking processing position vertical stacking
package/dist/view/wrapper/chart-component.js CHANGED
@@ -592,11 +592,10 @@ class ChartComponent extends _react.Component {
592
592
  legendPosition = 'top-left',
593
593
  data,
594
594
  colorScale,
595
- groupColumn
595
+ groupColumn,
596
+ chart
596
597
  } = _ref;
597
598
  if (!this.chart) return;
598
- data.forEach(item => item[legendName] = String(item[legendName]));
599
- const legendData = (0, _lodashEs.cloneDeep)(data);
600
599
  this.legendConfig = {
601
600
  legendRectWidth: 20,
602
601
  legendRectHeight: 6,
@@ -611,10 +610,9 @@ class ChartComponent extends _react.Component {
611
610
  theme
612
611
  };
613
612
 
614
- // sort legend data
615
- if (groupColumn && [_dtableUtils.CellType.SINGLE_SELECT].includes(groupColumn.type)) {
616
- this.sortLegend(legendData, groupColumn, legendName);
617
- }
613
+ // sort legend data and format data
614
+ data.forEach(item => item[legendName] = String(item[legendName]));
615
+ const legendData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), legendName, groupColumn, chart);
618
616
  const {
619
617
  width: chartWidth,
620
618
  insertPadding,
@@ -949,13 +947,16 @@ class ChartComponent extends _react.Component {
949
947
  };
950
948
  this.setColorMap = function (data, chartColorTheme) {
951
949
  let groupName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'group_name';
950
+ let groupColumn = arguments.length > 3 ? arguments[3] : undefined;
951
+ let chart = arguments.length > 4 ? arguments[4] : undefined;
952
+ const newData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), groupName, groupColumn, chart);
952
953
  let currentIdx = 0;
953
954
  const defaultColors = _constants.CHART_STYLE_COLORS;
954
955
  let colors = defaultColors;
955
956
  if (chartColorTheme) {
956
957
  colors = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors;
957
958
  }
958
- const colorMap = data.reduce((acc, cur) => {
959
+ const colorMap = newData.reduce((acc, cur) => {
959
960
  if (cur[groupName] && !acc[cur[groupName]]) {
960
961
  acc[cur[groupName]] = colors[currentIdx++ % colors.length];
961
962
  }
@@ -1201,7 +1202,7 @@ class ChartComponent extends _react.Component {
1201
1202
  allGroup.forEach(g => {
1202
1203
  const rects = Array.from(g.children);
1203
1204
  rects.forEach(item => {
1204
- d3.select(item).attr('opacity', 1);
1205
+ d3.select(item).transition().duration(200).attr('opacity', 1);
1205
1206
  });
1206
1207
  });
1207
1208
  }
@@ -1210,7 +1211,7 @@ class ChartComponent extends _react.Component {
1210
1211
  const rects = Array.from(g.children);
1211
1212
  rects.forEach(item => {
1212
1213
  if (item.getAttribute('data-groupName') !== curGroupName) {
1213
- d3.select(item).attr('opacity', 0.3);
1214
+ d3.select(item).transition().duration(200).attr('opacity', 0.3);
1214
1215
  }
1215
1216
  });
1216
1217
  });
@@ -1409,6 +1410,21 @@ class ChartComponent extends _react.Component {
1409
1410
  const minItem = newAllData[minIndex];
1410
1411
  return minItem;
1411
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
+ };
1412
1428
  this.initLabelStroke(props === null || props === void 0 ? void 0 : props.globalTheme);
1413
1429
  this.chartBoundingClientRect = {};
1414
1430
  }
package/dist/view/wrapper/completeness-group.js CHANGED
@@ -50,7 +50,8 @@ class Completeness extends _chartComponent.default {
50
50
  const {
51
51
  chart,
52
52
  globalTheme,
53
- chartColorTheme
53
+ chartColorTheme,
54
+ columnGroupbyColumn
54
55
  } = this.props;
55
56
  const theme = _constants.CHART_THEME_COLOR[globalTheme];
56
57
  const {
@@ -69,8 +70,8 @@ class Completeness extends _chartComponent.default {
69
70
  } = this.chartBoundingClientRect;
70
71
  this.markLastForCompleteness(data);
71
72
  const colors = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors;
72
- this.setColorMap(data, chartColorTheme, 'groupby');
73
- const newSeries = this.getGroupSeries(data);
73
+ this.setColorMap(data, chartColorTheme, 'groupby', columnGroupbyColumn, chart);
74
+ const newSeries = this.getGroupSeries(data, columnGroupbyColumn, chart);
74
75
 
75
76
  // Y axis
76
77
  const fy = d3.scaleBand().domain(newSeries.map(item => item[0])).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);
@@ -177,7 +178,9 @@ class Completeness extends _chartComponent.default {
177
178
  legendName: 'groupby',
178
179
  theme,
179
180
  legendPosition: 'top-right',
180
- data
181
+ data,
182
+ groupColumn: columnGroupbyColumn,
183
+ chart
181
184
  });
182
185
  };
183
186
  this.handleAcitveAndInActiveState = (state, event) => {
@@ -250,8 +253,9 @@ class Completeness extends _chartComponent.default {
250
253
  toolTipPosition: null
251
254
  });
252
255
  };
253
- this.getGroupSeries = data => {
254
- const groups = d3.groups(data, d => d.name);
256
+ this.getGroupSeries = (data, columnGroupbyColumn, chart) => {
257
+ const sortedData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), 'groupby', columnGroupbyColumn, chart);
258
+ const groups = d3.groups(sortedData, d => d.name);
255
259
  groups.forEach((item, index) => {
256
260
  const itemData = (0, _lodashEs.cloneDeep)(item[1]);
257
261
 
package/dist/view/wrapper/horizontal-bar-group.js CHANGED
@@ -69,7 +69,8 @@ class HorizontalBarGroup extends _chartComponent.default {
69
69
  chart,
70
70
  globalTheme,
71
71
  chartColorTheme,
72
- tables
72
+ tables,
73
+ columnGroupbyColumn
73
74
  } = this.props;
74
75
  const theme = _constants.CHART_THEME_COLOR[globalTheme];
75
76
  const {
@@ -92,7 +93,8 @@ class HorizontalBarGroup extends _chartComponent.default {
92
93
  const useSingleSelectColumnColor = (groupByColumn === null || groupByColumn === void 0 ? void 0 : groupByColumn.type) === _dtableUtils.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
93
94
  useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
94
95
  const fy = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);
95
- const y = d3.scaleBand().domain(new Set(data.map(d => d.group_name))).range([0, fy.bandwidth()]).paddingInner(0).paddingOuter(0);
96
+ const sortedData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), 'group_name', columnGroupbyColumn, chart);
97
+ const y = d3.scaleBand().domain(new Set(sortedData.map(d => d.group_name))).range([0, fy.bandwidth()]).paddingInner(0).paddingOuter(0);
96
98
  const yAxis = this.chart.append('g').call(d3.axisLeft(fy).tickSizeOuter(0).tickPadding(0).tickSizeInner(5)).call(g => {
97
99
  g.selectAll('.domain').attr('stroke', theme.XAxisColor);
98
100
  g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
@@ -117,7 +119,7 @@ class HorizontalBarGroup extends _chartComponent.default {
117
119
 
118
120
  // Rect group
119
121
  const rectsWrapper = this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id)).attr('transform', "translate(".concat(Number(yAxis.node().getAttribute('data-axisWidth')), ", 0)"));
120
- rectsWrapper.selectAll().data(d3.group(data, d => d.name)).join('g').attr('transform', _ref => {
122
+ rectsWrapper.selectAll().data(d3.group(sortedData, d => d.name)).join('g').attr('transform', _ref => {
121
123
  let [name, dum] = _ref;
122
124
  const offset = (fy.bandwidth() - dum.length * y.bandwidth()) / 2;
123
125
  return "translate(0, ".concat(fy(name) + offset, ")");
@@ -170,7 +172,8 @@ class HorizontalBarGroup extends _chartComponent.default {
170
172
  theme,
171
173
  legendPosition: 'top-left',
172
174
  data,
173
- groupColumn: this.props.columnGroupbyColumn
175
+ groupColumn: this.props.columnGroupbyColumn,
176
+ chart
174
177
  });
175
178
  };
176
179
  this.handleAcitveAndInActiveState = (state, event) => {
package/dist/view/wrapper/horizontal-bar-stack.js CHANGED
@@ -67,7 +67,8 @@ class HorizontalBarStack extends _chartComponent.default {
67
67
  chart,
68
68
  globalTheme,
69
69
  chartColorTheme,
70
- tables
70
+ tables,
71
+ columnGroupbyColumn
71
72
  } = this.props;
72
73
  const theme = _constants.CHART_THEME_COLOR[globalTheme];
73
74
  const {
@@ -87,13 +88,14 @@ class HorizontalBarStack extends _chartComponent.default {
87
88
  } = this.chartBoundingClientRect;
88
89
  const groupByColumn = this.getColumn(tables, table_id, column_groupby_column_key);
89
90
  const useSingleSelectColumnColor = (groupByColumn === null || groupByColumn === void 0 ? void 0 : groupByColumn.type) === _dtableUtils.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
90
- useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
91
- const series = d3.stack().keys(d3.union(data.map(d => d.group_name))).value((_ref, key) => {
91
+ useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme, 'group_name', columnGroupbyColumn, chart);
92
+ const sortedData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), 'group_name', columnGroupbyColumn, chart);
93
+ const series = d3.stack().keys(d3.union(sortedData.map(d => d.group_name))).value((_ref, key) => {
92
94
  var _group$get;
93
95
  let [_, group] = _ref;
94
96
  return ((_group$get = group.get(String(key))) === null || _group$get === void 0 ? void 0 : _group$get.value) || 0;
95
- })(d3.index(data, d => d.name, d => d.group_name));
96
- const newSeries = this.handleSeries(series, data);
97
+ })(d3.index(sortedData, d => d.name, d => d.group_name));
98
+ const newSeries = this.handleSeries(series, sortedData);
97
99
  const y = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([chartHeight - insertPadding, insertPadding]).paddingInner(0.5).paddingOuter(0.1);
98
100
 
99
101
  // Y axis
@@ -174,7 +176,9 @@ class HorizontalBarStack extends _chartComponent.default {
174
176
  legendName: 'group_name',
175
177
  theme,
176
178
  legendPosition: 'top-right',
177
- data
179
+ data,
180
+ groupColumn: this.props.columnGroupbyColumn,
181
+ chart
178
182
  });
179
183
  };
180
184
  this.handleAcitveAndInActiveState = (state, event) => {
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,
@@ -152,17 +161,17 @@ class LineGroup extends _chartComponent.default {
152
161
  marginTop
153
162
  } = this.chartBoundingClientRect;
154
163
  const useSingleSelectColumnColor = (columnGroupbyColumn === null || columnGroupbyColumn === void 0 ? void 0 : columnGroupbyColumn.type) === _dtableUtils.CellType.SINGLE_SELECT && color_theme === _colorRules.SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
155
- useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme);
164
+ useSingleSelectColumnColor ? this.setSingleSelectColorMap(data) : this.setColorMap(data, chartColorTheme, 'group_name', columnGroupbyColumn, chart);
156
165
 
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();
@@ -256,11 +265,13 @@ class LineGroup extends _chartComponent.default {
256
265
  legendName: 'group_name',
257
266
  theme,
258
267
  legendPosition: 'top-right',
259
- data
268
+ data,
269
+ groupColumn: this.props.columnGroupbyColumn,
270
+ chart
260
271
  });
261
272
  };
262
273
  this.updateCircleAndTickStyle = _ref2 => {
263
- var _rectsWrapper$selectA2, _this$ticksWrapper$se;
274
+ var _rectsWrapper$selectA2;
264
275
  let {
265
276
  event,
266
277
  state,
@@ -269,13 +280,12 @@ class LineGroup extends _chartComponent.default {
269
280
  eventState
270
281
  } = _ref2;
271
282
  const {
272
- y_axis_show_value
273
- } = this.props.chart.config;
283
+ globalTheme,
284
+ chart
285
+ } = this.props;
274
286
  const {
275
- height: chartHeight,
276
- insertPadding,
277
- marginTop
278
- } = this.chartBoundingClientRect;
287
+ y_axis_show_value
288
+ } = chart.config;
279
289
  const {
280
290
  offsetX
281
291
  } = event;
@@ -290,46 +300,31 @@ class LineGroup extends _chartComponent.default {
290
300
  });
291
301
  const minIndex = d3.minIndex(minDistanceArr, d => d.distance);
292
302
  const minDistanceItem = minDistanceArr[minIndex];
293
-
294
- // circle
295
303
  const circleList = (_rectsWrapper$selectA2 = rectsWrapper.selectAll('circle')) === null || _rectsWrapper$selectA2 === void 0 ? void 0 : _rectsWrapper$selectA2.nodes();
296
- if (circleList.length !== 0) {
297
- if (state === 'zoomIn') {
298
- circleList.forEach(circle => {
299
- const name = circle.getAttribute('data-name');
300
- if (name === minDistanceItem.name) {
301
- d3.select(circle).attr('opacity', 1);
302
- d3.select(circle).attr('r', 5);
303
- } else {
304
- d3.select(circle).attr('opacity', 0);
305
- d3.select(circle).attr('r', 3);
306
- }
307
- });
308
- } else {
309
- circleList.forEach(circle => {
310
- !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);
311
313
  d3.select(circle).attr('r', 3);
312
- });
313
- }
314
- }
315
-
316
- // tick
317
- const ticks = (_this$ticksWrapper$se = this.ticksWrapper.selectAll('.tick line')) === null || _this$ticksWrapper$se === void 0 ? void 0 : _this$ticksWrapper$se.nodes();
318
- if (ticks.length !== 0) {
319
- if (state === 'zoomIn') {
320
- ticks.forEach(tick => {
321
- const name = tick.getAttribute('data-name');
322
- if (name === minDistanceItem.name) {
323
- d3.select(tick).attr('y2', -(chartHeight - insertPadding * 2 - marginTop));
324
- } else {
325
- d3.select(tick).attr('y2', 0);
326
- }
327
- });
328
- } else {
329
- ticks.forEach(tick => {
330
- d3.select(tick).attr('y2', 0);
331
- });
332
- }
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);
333
328
  }
334
329
 
335
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.17",
3
+ "version": "2.0.19",
4
4
  "main": "./dist/index.js",
5
5
  "dependencies": {
6
6
  "@dnd-kit/core": "^6.1.0",