sea-chart 0.0.71 → 0.0.73
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.
- package/dist/utils/chart-utils/original-data-utils/pivot-table-calculator.js +20 -10
- package/dist/view/wrapper/area.js +7 -3
- package/dist/view/wrapper/bar.js +8 -3
- package/dist/view/wrapper/chart-component.js +8 -0
- package/dist/view/wrapper/combination.js +6 -4
- package/dist/view/wrapper/horizontal-bar.js +8 -2
- package/dist/view/wrapper/line-group.js +2 -3
- package/dist/view/wrapper/line.js +11 -4
- package/dist/view/wrapper/table/two-dimension-table.js +2 -3
- package/package.json +1 -1
|
@@ -379,10 +379,13 @@ function updateTwoDimensionRows(pivot_rows, pivot_columns, index, name, row, isC
|
|
|
379
379
|
} = chart;
|
|
380
380
|
const isCount = summary_type === CHART_SUMMARY_TYPE.COUNT;
|
|
381
381
|
let summarySQLColumnName2ColumnKey = {};
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
382
|
+
let numericColumns = [];
|
|
383
|
+
if (summary_column_key) {
|
|
384
|
+
numericColumns = [{
|
|
385
|
+
column_key: summary_column_key,
|
|
386
|
+
summary_method: summary_method
|
|
387
|
+
}, ...summary_columns];
|
|
388
|
+
}
|
|
386
389
|
numericColumns.forEach(item => {
|
|
387
390
|
const {
|
|
388
391
|
column_key,
|
|
@@ -400,7 +403,6 @@ function updateTwoDimensionRows(pivot_rows, pivot_columns, index, name, row, isC
|
|
|
400
403
|
summarySQLColumnName2ColumnKey[sqlNumericColumnKey] = summaryColumnKey;
|
|
401
404
|
}
|
|
402
405
|
});
|
|
403
|
-
const summarySQLnames = Object.keys(summarySQLColumnName2ColumnKey);
|
|
404
406
|
const summarySQLColumnKeys = Object.values(summarySQLColumnName2ColumnKey);
|
|
405
407
|
const summaryColumn = getTableColumnByKey(table, summary_column_key) || {};
|
|
406
408
|
const singleNumeriColumnWithMethod = {
|
|
@@ -577,11 +579,19 @@ function getTwoDimensionTotal(summaryColumn, summary_type, summary_method, formu
|
|
|
577
579
|
// cells[key].total = subTotal.date;
|
|
578
580
|
}
|
|
579
581
|
} else {
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
582
|
+
if (Array.isArray(subTotal)) {
|
|
583
|
+
cells[key].total = subTotal;
|
|
584
|
+
total += subTotal[0][1] ? subTotal[0][1] - 0 : 0;
|
|
585
|
+
let columnTotal = pivot_columns_total[key] ? pivot_columns_total[key] : 0;
|
|
586
|
+
columnTotal += subTotal[0][1] ? subTotal[0][1] - 0 : 0;
|
|
587
|
+
pivot_columns_total[key] = columnTotal;
|
|
588
|
+
} else {
|
|
589
|
+
cells[key].total = subTotal;
|
|
590
|
+
total += subTotal ? subTotal - 0 : 0;
|
|
591
|
+
let columnTotal = pivot_columns_total[key] ? pivot_columns_total[key] : 0;
|
|
592
|
+
columnTotal += subTotal ? subTotal - 0 : 0;
|
|
593
|
+
pivot_columns_total[key] = columnTotal;
|
|
594
|
+
}
|
|
585
595
|
}
|
|
586
596
|
}
|
|
587
597
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import PropTypes from 'prop-types';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
|
-
import { CHART_LINE_TYPES, CHART_SUMMARY_SHOW, CHART_SUMMARY_TYPE, CHART_THEME_COLOR } from '../../constants';
|
|
4
|
+
import { CHART_LINE_TYPES, CHART_SUMMARY_SHOW, CHART_SUMMARY_TYPE, CHART_THEME_COLOR, CHART_TYPE } from '../../constants';
|
|
5
5
|
import intl from '../../intl';
|
|
6
6
|
import { BaseUtils, isFunction } from '../../utils';
|
|
7
7
|
import ChartComponent from './chart-component';
|
|
@@ -68,10 +68,13 @@ class Area extends ChartComponent {
|
|
|
68
68
|
y_axis_label_color,
|
|
69
69
|
line_type,
|
|
70
70
|
y_axis_show_value,
|
|
71
|
-
label_font_size
|
|
71
|
+
label_font_size,
|
|
72
|
+
summary_columns
|
|
72
73
|
} = chart.config;
|
|
73
74
|
const newData = this.getChartGroupData(data);
|
|
74
75
|
const isSmooth = line_type === CHART_LINE_TYPES[1];
|
|
76
|
+
const isMutipleSummary = summary_columns.length;
|
|
77
|
+
const isAreaGroup = chart.config.type === CHART_TYPE.AREA_GROUP;
|
|
75
78
|
let chartBarColor;
|
|
76
79
|
let colorCallBack = null;
|
|
77
80
|
if (this.isGroupChart) {
|
|
@@ -89,6 +92,7 @@ class Area extends ChartComponent {
|
|
|
89
92
|
}
|
|
90
93
|
this.drawLabels(newData);
|
|
91
94
|
}
|
|
95
|
+
const title = this.getTitle(this.props.tables, chart.config.table_id, y_axis_summary_type, chart.config.y_axis_column_key || chart.config.y_axis_summary_column_key);
|
|
92
96
|
|
|
93
97
|
// set Coord type
|
|
94
98
|
this.chart.coordinate('rect');
|
|
@@ -144,7 +148,7 @@ class Area extends ChartComponent {
|
|
|
144
148
|
}
|
|
145
149
|
}).shape(isSmooth ? 'smooth' : 'area').color(chartBarColor, colorCallBack).tooltip('group_name*name*value', (group_name, name, value) => {
|
|
146
150
|
return {
|
|
147
|
-
title:
|
|
151
|
+
title: isAreaGroup && isMutipleSummary ? !name && typeof name !== 'number' ? intl.get('Empty') : name : title,
|
|
148
152
|
value: BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
|
|
149
153
|
name: group_name
|
|
150
154
|
};
|
package/dist/view/wrapper/bar.js
CHANGED
|
@@ -51,17 +51,21 @@ class Bar extends ChartComponent {
|
|
|
51
51
|
summaryColumn,
|
|
52
52
|
globalTheme,
|
|
53
53
|
customRender,
|
|
54
|
-
chartColorTheme
|
|
54
|
+
chartColorTheme,
|
|
55
|
+
tables
|
|
55
56
|
} = this.props;
|
|
56
57
|
const theme = CHART_THEME_COLOR[globalTheme];
|
|
57
58
|
const {
|
|
58
59
|
y_axis_summary_type,
|
|
60
|
+
y_axis_summary_column_key,
|
|
61
|
+
y_axis_column_key,
|
|
59
62
|
y_axis_summary_method,
|
|
60
63
|
y_axis_label_color,
|
|
61
64
|
y_axis_show_value,
|
|
62
65
|
label_font_size,
|
|
63
66
|
color_option,
|
|
64
|
-
y_axis_label_color_rules
|
|
67
|
+
y_axis_label_color_rules,
|
|
68
|
+
table_id
|
|
65
69
|
} = chart.config;
|
|
66
70
|
// y-axis label width:6 + 10
|
|
67
71
|
const chartWidth = this.chart.width - 6 - 10;
|
|
@@ -72,6 +76,7 @@ class Bar extends ChartComponent {
|
|
|
72
76
|
chartBarColor = BaseUtils.getCurrentTheme(chartColorTheme).colors[0];
|
|
73
77
|
}
|
|
74
78
|
const colorRules = color_option === TYPE_COLOR_USING.USE_RULES && y_axis_label_color_rules && getConvertedColorRules(y_axis_label_color_rules);
|
|
79
|
+
const title = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
|
|
75
80
|
this.drawLabels(data);
|
|
76
81
|
// set Coord type
|
|
77
82
|
this.chart.coordinate('rect');
|
|
@@ -92,7 +97,7 @@ class Bar extends ChartComponent {
|
|
|
92
97
|
return color || chartBarColor;
|
|
93
98
|
}).tooltip('name*value', (name, value) => {
|
|
94
99
|
return {
|
|
95
|
-
title
|
|
100
|
+
title,
|
|
96
101
|
value: BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
|
|
97
102
|
name
|
|
98
103
|
};
|
|
@@ -19,6 +19,14 @@ export default class ChartComponent extends Component {
|
|
|
19
19
|
this.renderAxisLabel(this.props.chart, this.props.tables);
|
|
20
20
|
}
|
|
21
21
|
}, 300);
|
|
22
|
+
this.getTitle = (tables, table_id, yAxisType, yAxisKey) => {
|
|
23
|
+
return yAxisType === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : this.getAxisLabel(tables, table_id, yAxisKey);
|
|
24
|
+
};
|
|
25
|
+
this.getAxisLabel = (tables, tableId, columnKey) => {
|
|
26
|
+
const table = getTableById(tables, tableId);
|
|
27
|
+
const column = getTableColumnByKey(table, columnKey) || {};
|
|
28
|
+
return column.name || '';
|
|
29
|
+
};
|
|
22
30
|
this.initChart = (container, _ref) => {
|
|
23
31
|
let {
|
|
24
32
|
appendPadding,
|
|
@@ -93,6 +93,8 @@ class Combination extends ChartComponent {
|
|
|
93
93
|
const rightSummaryColumn = getTableColumnByKey(table, y_axis_right_summary_column) || {};
|
|
94
94
|
// const xAxisColumn = getTableColumnByKey(table, x_axis_column_key);
|
|
95
95
|
|
|
96
|
+
const leftTitle = this.getTitle(tables, table_id, y_axis_left_summary_type, y_axis_left_summary_column);
|
|
97
|
+
const rightTitle = this.getTitle(tables, table_id, y_axis_right_summary_type, y_axis_right_summary_column);
|
|
96
98
|
let leftValueScaleOptions = {
|
|
97
99
|
formatter: value => {
|
|
98
100
|
return BaseUtils.getSummaryValueDisplayString(leftSummaryColumn, value, y_axis_left_summary_method);
|
|
@@ -229,7 +231,7 @@ class Combination extends ChartComponent {
|
|
|
229
231
|
if (isMultiple) {
|
|
230
232
|
title = name;
|
|
231
233
|
} else {
|
|
232
|
-
title =
|
|
234
|
+
title = leftTitle;
|
|
233
235
|
}
|
|
234
236
|
return {
|
|
235
237
|
title,
|
|
@@ -280,7 +282,7 @@ class Combination extends ChartComponent {
|
|
|
280
282
|
}
|
|
281
283
|
}).tooltip('name*value_right', (name, value) => {
|
|
282
284
|
return {
|
|
283
|
-
title:
|
|
285
|
+
title: rightTitle,
|
|
284
286
|
value: BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method),
|
|
285
287
|
name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
|
|
286
288
|
};
|
|
@@ -329,7 +331,7 @@ class Combination extends ChartComponent {
|
|
|
329
331
|
if (isMultiple) {
|
|
330
332
|
title = name;
|
|
331
333
|
} else {
|
|
332
|
-
title =
|
|
334
|
+
title = leftTitle;
|
|
333
335
|
}
|
|
334
336
|
return {
|
|
335
337
|
title,
|
|
@@ -353,7 +355,7 @@ class Combination extends ChartComponent {
|
|
|
353
355
|
interval.tooltip(false);
|
|
354
356
|
point.tooltip('name*value_right', (name, value) => {
|
|
355
357
|
return {
|
|
356
|
-
title:
|
|
358
|
+
title: rightTitle,
|
|
357
359
|
value: BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method),
|
|
358
360
|
name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
|
|
359
361
|
};
|
|
@@ -46,12 +46,17 @@ class HorizontalBar extends HorizontalComponent {
|
|
|
46
46
|
chart,
|
|
47
47
|
summaryColumn,
|
|
48
48
|
globalTheme,
|
|
49
|
-
chartColorTheme
|
|
49
|
+
chartColorTheme,
|
|
50
|
+
tables
|
|
50
51
|
} = this.props;
|
|
51
52
|
const theme = CHART_THEME_COLOR[globalTheme];
|
|
52
53
|
const {
|
|
54
|
+
table_id,
|
|
53
55
|
horizontal_axis_summary_type,
|
|
54
56
|
horizontal_axis_summary_method,
|
|
57
|
+
y_axis_summary_type,
|
|
58
|
+
y_axis_column_key,
|
|
59
|
+
y_axis_summary_column_key,
|
|
55
60
|
color_option,
|
|
56
61
|
horizontal_axis_label_color_rules,
|
|
57
62
|
horizontal_axis_label_color,
|
|
@@ -68,6 +73,7 @@ class HorizontalBar extends HorizontalComponent {
|
|
|
68
73
|
chartBarColor = BaseUtils.getCurrentTheme(chartColorTheme).colors[0];
|
|
69
74
|
}
|
|
70
75
|
const colorRules = color_option === TYPE_COLOR_USING.USE_RULES && horizontal_axis_label_color_rules && getConvertedColorRules(horizontal_axis_label_color_rules);
|
|
76
|
+
const title = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
|
|
71
77
|
data.reverse();
|
|
72
78
|
this.drawLabels(data);
|
|
73
79
|
|
|
@@ -90,7 +96,7 @@ class HorizontalBar extends HorizontalComponent {
|
|
|
90
96
|
return color || chartBarColor;
|
|
91
97
|
}).size(singleBarWidth).tooltip('name*value', (name, value) => {
|
|
92
98
|
return {
|
|
93
|
-
title
|
|
99
|
+
title,
|
|
94
100
|
value: BaseUtils.getSummaryValueDisplayString(summaryColumn, value, horizontal_axis_summary_method),
|
|
95
101
|
name
|
|
96
102
|
};
|
|
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import { BaseUtils, isFunction } from '../../utils';
|
|
5
5
|
import intl from '../../intl';
|
|
6
|
-
import { CHART_LINE_TYPES, CHART_SUMMARY_SHOW, CHART_SUMMARY_TYPE, CHART_THEME_COLOR } from '../../constants';
|
|
6
|
+
import { CHART_LINE_TYPES, CHART_SUMMARY_SHOW, CHART_SUMMARY_TYPE, CHART_THEME_COLOR, CHART_TYPE, EMPTY_NAME } from '../../constants';
|
|
7
7
|
import ChartComponent from './chart-component';
|
|
8
8
|
class LineGroup extends ChartComponent {
|
|
9
9
|
constructor(props) {
|
|
@@ -51,7 +51,6 @@ class LineGroup extends ChartComponent {
|
|
|
51
51
|
y_axis_show_value,
|
|
52
52
|
label_font_size,
|
|
53
53
|
line_type,
|
|
54
|
-
y_axis_summary_type,
|
|
55
54
|
y_axis_summary_method
|
|
56
55
|
} = chart.config;
|
|
57
56
|
const chartBarColor = this.groupName;
|
|
@@ -88,7 +87,7 @@ class LineGroup extends ChartComponent {
|
|
|
88
87
|
opacity: 1
|
|
89
88
|
}).tooltip('group_name*name*value', (group_name, name, value) => {
|
|
90
89
|
return {
|
|
91
|
-
title:
|
|
90
|
+
title: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,
|
|
92
91
|
value: BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
|
|
93
92
|
name: group_name
|
|
94
93
|
};
|
|
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import { BaseUtils, isFunction } from '../../utils';
|
|
5
5
|
import intl from '../../intl';
|
|
6
|
-
import { CHART_LINE_TYPES,
|
|
6
|
+
import { CHART_LINE_TYPES, CHART_THEME_COLOR } from '../../constants';
|
|
7
7
|
import ChartComponent from './chart-component';
|
|
8
8
|
class Line extends ChartComponent {
|
|
9
9
|
constructor(props) {
|
|
@@ -44,10 +44,14 @@ class Line extends ChartComponent {
|
|
|
44
44
|
chart,
|
|
45
45
|
globalTheme,
|
|
46
46
|
chartColorTheme,
|
|
47
|
-
summaryColumn
|
|
47
|
+
summaryColumn,
|
|
48
|
+
tables
|
|
48
49
|
} = this.props;
|
|
49
50
|
const theme = CHART_THEME_COLOR[globalTheme];
|
|
50
51
|
const {
|
|
52
|
+
table_id,
|
|
53
|
+
y_axis_column_key,
|
|
54
|
+
y_axis_summary_column_key,
|
|
51
55
|
y_axis_label_color,
|
|
52
56
|
y_axis_show_value,
|
|
53
57
|
label_font_size,
|
|
@@ -60,11 +64,14 @@ class Line extends ChartComponent {
|
|
|
60
64
|
chartBarColor = BaseUtils.getCurrentTheme(chartColorTheme).colors[0];
|
|
61
65
|
}
|
|
62
66
|
this.drawLabels(data);
|
|
67
|
+
|
|
68
|
+
// y axis label
|
|
69
|
+
const title = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
|
|
63
70
|
const isSmooth = line_type === CHART_LINE_TYPES[1];
|
|
64
71
|
|
|
65
72
|
// set Coord type
|
|
66
73
|
this.chart.coordinate('rect');
|
|
67
|
-
|
|
74
|
+
this.chart.line().label(y_axis_show_value ? 'value' : false, {
|
|
68
75
|
style: {
|
|
69
76
|
fontSize: BaseUtils.getLabelFontSize(label_font_size),
|
|
70
77
|
fill: theme.labelColor,
|
|
@@ -84,7 +91,7 @@ class Line extends ChartComponent {
|
|
|
84
91
|
opacity: 1
|
|
85
92
|
}).tooltip('name*value', (name, value) => {
|
|
86
93
|
return {
|
|
87
|
-
title
|
|
94
|
+
title,
|
|
88
95
|
value: BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
|
|
89
96
|
name
|
|
90
97
|
};
|
|
@@ -151,8 +151,7 @@ class TwoDimensionTable extends PureComponent {
|
|
|
151
151
|
selectedCell,
|
|
152
152
|
summaryColumn,
|
|
153
153
|
summaryMethod,
|
|
154
|
-
chart
|
|
155
|
-
isCalculateByView
|
|
154
|
+
chart
|
|
156
155
|
} = this.props;
|
|
157
156
|
const {
|
|
158
157
|
display_total = true,
|
|
@@ -270,7 +269,7 @@ class TwoDimensionTable extends PureComponent {
|
|
|
270
269
|
'selected-pivot-cell-border': isSelectedCell
|
|
271
270
|
})
|
|
272
271
|
}));
|
|
273
|
-
}), !total && this.renderEmpty(summaryColumns, cellIdx)));
|
|
272
|
+
}), !total && !(typeof total === 'number') && this.renderEmpty(summaryColumns, cellIdx)));
|
|
274
273
|
}), display_total && /*#__PURE__*/React.createElement("td", {
|
|
275
274
|
className: classnames('pivot-cell', {
|
|
276
275
|
'pivot-empty-cell': !isValidSummaryDisplayValue,
|