mindol1004/vanillameta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[FE-chart] Add series label option at Mixed chart #413

Browse Source
This commit is contained in:
SA K
2023-02-25 16:48:54 +09:00
parent e9f72b7290
commit 0b43978d6a
5 changed files with 31 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend-web/src/widget/modules/mixedchart/MixedLinePieChart.tsx
View File

@@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react';
import ReactECharts from 'echarts-for-react';
import { getAggregationDataForChart, getGridSize, getLegendOption } from '@/widget/modules/utils/chartUtil';
import { AGGREGATION_LIST } from '@/constant';
const MixedLinePieChart = props => {
const { option, dataSet, axis = 'x', seriesOp, defaultOp, createOp } = props;
@@ -48,7 +49,11 @@ const MixedLinePieChart = props => {
console.log('aggrData : ', aggrData);
if (item.field) {
const series = {
name: option.legendAggregation ? `${item.field} (${item.aggregation})` : item.field,
name:
(item?.fieldLabel ? item.fieldLabel : item.field) +
(option?.legendAggregation
? ` (${AGGREGATION_LIST.find(element => element.value === item.aggregation).label})`
: ''),
data: aggrData.map(dataItem => dataItem[item.field]),
type: item.type ? item.type : 'line',
color: item.color,

7
frontend-web/src/widget/modules/mixedchart/MixedLineStackedBarChart.tsx
View File

@@ -1,6 +1,7 @@
import React, { useEffect, useState } from 'react';
import ReactECharts from 'echarts-for-react';
import { getAggregationDataForChart, getGridSize, getLegendOption } from '@/widget/modules/utils/chartUtil';
import { AGGREGATION_LIST } from '@/constant';
const LineChart = props => {
const { option, dataSet, axis = 'x', seriesOp, defaultOp, createOp } = props;
@@ -49,7 +50,11 @@ const LineChart = props => {
// console.log('aggrData : ', aggrData);
if (item.field && item.type) {
const series = {
name: option.legendAggregation ? `${item.field} (${item.aggregation})` : item.field,
name:
(item?.fieldLabel ? item.fieldLabel : item.field) +
(option?.legendAggregation
? ` (${AGGREGATION_LIST.find(element => element.value === item.aggregation).label})`
: ''),
data: aggrData.map(dataItem => dataItem[item.field]),
type: item.type,
color: item.color,

8
frontend-web/src/widget/settings/MixedLinePieChartSetting.tsx
View File

@@ -116,6 +116,14 @@ const MixedLinePieChartSetting = props => {
onChange={event => handleSeriesChange(event, setOption)}
endButton={<ColorButtonForm index={index} option={option} setOption={setOption} />}
/>
<TextFieldForm
id={`fieldLabel${index + 1}`}
name={`fieldLabel${index + 1}`}
label={`레이블`}
value={item.fieldLabel ? item.fieldLabel : ''}
onChange={event => handleSeriesChange(event, setOption)}
endButton={' '}
/>
<SelectForm
id={`aggregation${index + 1}`}
name={`aggregation${index + 1}`}

11
frontend-web/src/widget/settings/MixedLineStackedBarChartSetting.tsx
View File

@@ -5,6 +5,7 @@ import ColorButtonForm from '@/components/form/ColorButtonForm';
import { AddButton, RemoveButton } from '@/components/button/AddIconButton';
import { handleAddClick, handleChange, handleRemoveClick, handleSeriesChange } from '@/widget/utils/handler';
import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';
import TextFieldForm from '@/components/form/TextFieldForm';
const MixedLineStackedBarChartSetting = props => {
const { option, setOption, axis = 'x', spec } = props;
@@ -61,6 +62,14 @@ const MixedLineStackedBarChartSetting = props => {
onChange={event => handleSeriesChange(event, setOption)}
endButton={<ColorButtonForm index={index} option={option} setOption={setOption} />}
/>
<TextFieldForm
id={`fieldLabel${index + 1}`}
name={`fieldLabel${index + 1}`}
label={`레이블`}
value={item.fieldLabel ? item.fieldLabel : ''}
onChange={event => handleSeriesChange(event, setOption)}
endButton={' '}
/>
<SelectForm
id={`aggregation${index + 1}`}
name={`aggregation${index + 1}`}
@@ -81,7 +90,7 @@ const MixedLineStackedBarChartSetting = props => {
required={true}
id={`type${index + 1}`}
name={`type${index + 1}`}
label={`종류 ${index + 1}`}
label={`종류`}
optionList={chartTypeList}
value={item.type}
onChange={event => handleSeriesChange(event, setOption)}

2
frontend-web/src/widget/wrapper/WidgetViewer.tsx
View File

@@ -446,7 +446,7 @@ const WidgetViewer = props => {
};
const renderTitle = () => {
if (widgetType === WIDGET_TYPE.BOARD_NUMERIC && widgetOption.header?.titleHidden) {
if (widgetOption?.header?.titleHidden) {
return '';
} else {
return title;