Skip to content

Commit a6094e3

Browse files
sherotreesherotree
authored
Feature: display multi dimensions multi values (#5)
* feat: display multi-demension and multi-value line-chart * refactor: optimize the code * feat: modify stirng length, update text * fix: colorMap is consistent with erda-ui * refactor: remove 'get' which from lodash
1 parent cf593ea commit a6094e3

File tree

5 files changed

+65
-28
lines changed

5 files changed

+65
-28
lines changed

‎src/components/DcChartEditor/data-config/dice-form/data-loader.ts

+30-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* @Last Modified by: licao
66
* @Last Modified time: 2021-02-25 12:38:00
77
*/
8-
import { reduce, map, merge, isEmpty, dropWhile, find, uniqBy, chunk, keyBy, isNumber } from 'lodash';
8+
import { reduce, map, merge, isEmpty, dropWhile, find, uniqBy, chunk, keyBy, isNumber, forEach } from 'lodash';
99
import { getChartData } from '../../../../services/chart-editor';
1010
import { getFormatter } from '../../../../common/utils';
1111
import { MAP_ALIAS, CUSTOM_TIME_RANGE_MAP } from './constants';
@@ -221,5 +221,34 @@ export const createLoadDataFn = ({
221221
}
222222
}
223223

224+
// 多个维度，多个数值
225+
if (typeDimensionsLen > 1 && valueDimensionsLen > 1) {
226+
if (isLineType) {
227+
const { data: dataSource } = data;
228+
const timeDimension = find(_typeDimensions, { type: 'time' });
229+
if (!timeDimension) return {};
230+
231+
const otherDimensions = dropWhile(_typeDimensions, { type: 'time' });
232+
const time = map(uniqBy(dataSource, timeDimension.key), (item) => item[timeDimension.key]);
233+
const metricData: any = [];
234+
const groups = chunk(dataSource, time.length);
235+
forEach(groups, (group) => {
236+
forEach(_valueDimensions, (valueDimension) => {
237+
const nameItem: any = find(group, (item: any) => (!!item[valueDimension.key] || isNumber(item[valueDimension.key])) && Object.values(item).every((value) => value !== null)) || {};
238+
metricData.push({
239+
data: map(group, (item: any) => item[valueDimension.key]),
240+
name: reduce(otherDimensions, (name, { key }, index) => `${name}${nameItem[key]}${index !== otherDimensions.length - 1 ? ' / ' : ''}`, ''),
241+
...valueDimension,
242+
});
243+
});
244+
});
245+
246+
return {
247+
metricData,
248+
time,
249+
valueNames: _valueDimensions.map((x) => x.alias),
250+
};
251+
}
252+
}
224253
return {};
225254
};

‎src/components/DcChartEditor/data-config/dice-form/dimensions-configurator/create-alias-modal.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const CreateAliasModal = ({ defaultValue, isNeedUnit, ...rest }: IProps) => {
7171
},
7272
},
7373
{
74-
label: textMap['unit config'],
74+
label: textMap['source data unit config'],
7575
type: UnitConfig,
7676
name: 'unit',
7777
show: () => isNeedUnit,

‎src/components/DcCharts/chart-line/option.ts

+29-21
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,12 @@ const changeColors = ['rgb(0, 209, 156)', 'rgb(251, 162, 84)', 'rgb(247, 91, 96)
1010

1111
export function getOption(data: DC.StaticData, config: DC.ChartConfig = {}) {
1212
const { metricData = [], xData, time, valueNames = [] } = data;
13-
const { optionProps = {} } = config;
13+
const { optionProps = {}, dataSourceConfig = {} } = config;
14+
const { typeDimensions, valueDimensions } = dataSourceConfig;
15+
16+
// 多个维度，多个数值
17+
const isMultipleTypeAndMultipleValue = (typeDimensions?.length || 0) > 1 && (valueDimensions?.length || 0) > 1;
18+
1419
const {
1520
seriesName,
1621
isBarChangeColor,
@@ -45,14 +50,25 @@ export function getOption(data: DC.StaticData, config: DC.ChartConfig = {}) {
4550
? map(dataList, (item) => (typeof item === 'number' && item > 0 ? item : 0))
4651
: dataList;
4752
};
48-
4953
map(metricData, (value, i) => {
50-
const { axisIndex, name, tag, unit: _unit, ...rest } = value;
54+
const { axisIndex, name, tag, alias = '', unit: _unit, ...rest } = value;
5155
if (tag || name) {
5256
legendData.push({ name: tag || name });
5357
}
5458
const yAxisIndex = axisIndex || 0;
5559
const areaColor = areaColors[i];
60+
61+
const normalSeriesData = isMultipleTypeAndMultipleValue
62+
? convertInvalidValueToZero(value.data).map((x) => ({ value: x, category: name, alias }))
63+
: convertInvalidValueToZero(value.data);
64+
65+
const seriesData = !isBarChangeColor // TODO: isBarChangeColor seem to be useless anymore
66+
? normalSeriesData
67+
: map(value.data, (item: any, j) => {
68+
const sect = Math.ceil(value.data.length / changeColors.length);
69+
return { ...item, itemStyle: { normal: { color: changeColors[Number.parseInt(j / sect, 10)] } } };
70+
});
71+
5672
series.push({
5773
name: value.tag || seriesName || value.name || value.key,
5874
yAxisIndex,
@@ -74,12 +90,7 @@ export function getOption(data: DC.StaticData, config: DC.ChartConfig = {}) {
7490
},
7591
...rest,
7692
type: value.type || 'line',
77-
data: !isBarChangeColor // TODO: isBarChangeColor seem to be useless anymore
78-
? convertInvalidValueToZero(value.data)
79-
: map(value.data, (item: any, j) => {
80-
const sect = Math.ceil(value.data.length / changeColors.length);
81-
return { ...item, itemStyle: { normal: { color: changeColors[Number.parseInt(j / sect, 10)] } } };
82-
}),
93+
data: seriesData,
8394
});
8495
// y 轴单位类型
8596
const curUnitType = (_unit?.type || customUnitType || '');
@@ -115,26 +126,23 @@ export function getOption(data: DC.StaticData, config: DC.ChartConfig = {}) {
115126

116127
const lgFormatter = (name: string) => {
117128
const defaultName = legendFormatter ? legendFormatter(name) : name;
118-
return cutStr(defaultName, 20);
129+
return cutStr(defaultName, 40);
119130
};
120131
const haveTwoYAxis = yAxis.length > 1;
121132
const getTTUnitType = (i: number) => {
122133
const curYAxis = yAxis[i] || yAxis[yAxis.length - 1];
123134
return [curYAxis.unitType, curYAxis.unit];
124135
};
125-
const genTTArray = (param: any[]) => param.map((unit, i) => `<span style='color: ${unit.color}'>${cutStr(unit.seriesName, 20)} : ${(preciseTooltip || isNaN(unit.value)) ? (isNaN(unit.value) ? (nullDisplay || '--') : unit.value) : getFormatter(...getTTUnitType(i)).format(unit.value, 2)}</span><br/>`);
136+
const genTTArray = (param: any[]) => param.map((unit, i) => `<span style='color: ${unit.color}'>${cutStr(unit.seriesName, 40)} : ${(preciseTooltip || isNaN(unit.value)) ? (isNaN(unit.value) ? (nullDisplay || '--') : unit.value) : getFormatter(...getTTUnitType(i)).format(unit.value, 2)}</span><br/>`);
126137
const formatTime = (timeStr: string) => moment(Number(timeStr)).format(moreThanOneDay ? 'M月D日 HH:mm' : 'HH:mm');
127-
let defaultTTFormatter = (param: any[]) => `${param[0].name}<br/>${genTTArray(param).join('')}`;
128138

129-
if (time) {
130-
defaultTTFormatter = (param) => {
131-
// eslint-disable-next-line @typescript-eslint/restrict-plus-operands
132-
// const endTime = time[param[0].dataIndex + 1];
133-
// if (!endTime) {
134-
// return `${formatTime(param[0].name)}<br />${genTTArray(param).join('')}`;
135-
// }
136-
// return `${formatTime(param[0].name)} 到 ${formatTime(endTime)}<br/>${genTTArray(param).join('')}`;
137-
return `${formatTime(param[0].name)}<br />${genTTArray(param).join('')}`;
139+
const formatTooltipTitle = (title: any) => (time ? formatTime(title) : title);
140+
let defaultTTFormatter = (param: any[]) => `${formatTooltipTitle(param[0].name)}<br />${genTTArray(param).join('')}`;
141+
142+
// 多个维度，多个数值
143+
if (isMultipleTypeAndMultipleValue) {
144+
defaultTTFormatter = (param: any) => {
145+
return `${formatTooltipTitle(param[0].name)}<br />${genTTArray(param.map((x: any) => ({ ...x, seriesName: `${x.data.category}(${x.data.alias})` }))).join('')}`;
138146
};
139147
}
140148

‎src/constants/index.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,14 @@ export const TEXT_ZH_MAP = {
4141
description: '描述',
4242
showTotal: '显示总量',
4343
unit: '显示单位',
44-
'unit config': '数值单位配置',
44+
'source data unit config': '源数据单位配置',
4545
'select chart type': '选择图表类型',
4646
'chart type': '图表类型',
4747
'chart label': '图表标签',
4848
'show chart label': '显示图表标签',
4949
'connect null': '连接空值',
5050
'connect null tip': '跳过空值, 连接不为空值的点',
51-
'invalidToZero': '非法值置0',
51+
invalidToZero: '非法值置0',
5252
'invalid to zero tip': '将非法值如 null, 字符串, 负数展示为0',
5353
placeholder: '空占位',
5454
'null display': '空值显示',
@@ -184,15 +184,15 @@ export const TEXT_EN_MAP = {
184184
description: 'description',
185185
showTotal: 'show total num',
186186
unit: 'unit',
187-
'unit config': 'unit config',
187+
'source data unit config': 'source data unit config',
188188
'select chart type': 'select chart type',
189189
'chart type': 'chart type',
190190
'chart label': 'chart label',
191191
'show chart label': 'show chart label',
192192
'null display': 'null display',
193193
'connect null': 'connect null value',
194194
'connect null tip': 'skip null values and join points that are not null',
195-
'invalidToZero': 'show invalid value as zero',
195+
invalidToZero: 'show invalid value as zero',
196196
'invalid to zero tip': 'show invalid value such as null, string, negative number as zero',
197197
placeholder: 'placeholder',
198198
line: 'line',

‎src/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@ import PureBoardGrid from './components/DcBoard/pure-board';
55
export * from './config';
66
export { createLoadDataFn } from './components/DcChartEditor/data-config/dice-form/data-loader';
77
export { createLoadDataFn as createOldLoadDataFn } from './components/DcChartEditor/data-config/dice-form/old-data-loader';
8-
export { colorMap as diceColorMap } from './theme/dice';
8+
export { colorMap } from './theme/dice';
99
export { getLocale, setLocale, getTheme, setTheme };
1010
export { PureBoardGrid, BoardGrid };

0 commit comments

Comments
 (0)