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

frontend-web/src/widget/modules/mixedchart/MixedLinePieChart.tsx

@@ -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,

frontend-web/src/widget/modules/mixedchart/MixedLineStackedBarChart.tsx

@@ -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,

frontend-web/src/widget/settings/MixedLinePieChartSetting.tsx

@@ -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}`}

frontend-web/src/widget/settings/MixedLineStackedBarChartSetting.tsx

@@ -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)}

frontend-web/src/widget/wrapper/WidgetViewer.tsx

@@ -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;