Merge pull request #414 from sakang07/develop

Fix bugs and Add features
2023-02-23 20:54:59 +09:00
parent c1495716b6 e9abc4b49f
commit 3c58d35ed5
22 changed files with 77 additions and 51 deletions
--- a/frontend-web/src/components/Copyright.tsx
+++ b/frontend-web/src/components/Copyright.tsx
@@ -9,7 +9,7 @@ const Copyright = (props: any) => {
        href="https://vanillabrain.com/"
        sx={{ fontSize: '13px', color: '#767676', fontWeight: 'bold', textDecoration: 'none' }}
      >
-        ⓒ VanillaBrain Icn.
+        ⓒ VanillaBrain Inc.
      </Link>
    </Typography>
  );
--- a/frontend-web/src/constant/index.ts
+++ b/frontend-web/src/constant/index.ts
@@ -75,7 +75,9 @@ export const AGGREGATION_LIST = [
  { label: '최소', value: WIDGET_AGGREGATION.MIN },
 ];

-export const LABEL_LIST = [{ label: '표시', value: true }];
+export const DISPLAY_LIST = [{ label: '표시', value: true }];
+
+export const HIDDEN_LIST = [{ label: '숨기기', value: true }];

 export const PIE_LABEL_LIST = [
  { label: '이름', value: '{b}' },
--- a/frontend-web/src/layouts/Footer/Footer.tsx
+++ b/frontend-web/src/layouts/Footer/Footer.tsx
@@ -27,7 +27,7 @@ const Footer = props => {
            color: '#767676',
          }}
        >
-          ⓒ VanillaBrain Icn.
+          ⓒ VanillaBrain Inc.
        </Typography>
      </Link>
    </Stack>
--- a/frontend-web/src/pages/Widget/WidgetCreate/WidgetAttributeSelect.tsx
+++ b/frontend-web/src/pages/Widget/WidgetCreate/WidgetAttributeSelect.tsx
@@ -112,12 +112,7 @@ const WidgetAttributeSelect = props => {
          overflow: 'hidden',
        }}
      >
-        <WidgetViewer
-          title={widgetOption.title}
-          widgetType={widgetOption.componentType}
-          widgetOption={option}
-          dataSet={data}
-        />
+        <WidgetViewer title={title} widgetType={widgetOption.componentType} widgetOption={option} dataSet={data} />
      </Box>
      <WidgetSetting
        widgetTypeName={widgetTypeName}
--- a/frontend-web/src/widget/modules/linechart/LineChart.tsx
+++ b/frontend-web/src/widget/modules/linechart/LineChart.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) {
        const series = {
-          name: option.legendAggregation ? `${item.field} (${item.aggregation})` : item.field,
+          name:
+            (item?.name ? item.name : 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,
--- a/frontend-web/src/widget/settings/Bar3DChartSetting.tsx
+++ b/frontend-web/src/widget/settings/Bar3DChartSetting.tsx
@@ -3,7 +3,7 @@ import { Divider, ListItem, ListItemText } from '@mui/material';
 import SelectForm from '@/components/form/SelectForm';
 import { AddButton, RemoveButton } from '@/components/button/AddIconButton';
 import { handleAddClick, handleChange, handleRemoveClick, handleSeriesChange } from '@/widget/utils/handler';
-import { AGGREGATION_LIST, COLUMN_TYPE, LABEL_LIST, WIDGET_AGGREGATION } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST, WIDGET_AGGREGATION } from '@/constant';
 import ColorFieldForm from '@/components/form/ColorFieldForm';

 const Bar3DChartSetting = props => {
@@ -88,7 +88,7 @@ const Bar3DChartSetting = props => {
        <SelectForm
          name="label"
          label="레이블"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.label}
          onChange={event => handleChange(event, setOption)}
        />
--- a/frontend-web/src/widget/settings/Bubble3DChartSetting.tsx
+++ b/frontend-web/src/widget/settings/Bubble3DChartSetting.tsx
@@ -3,7 +3,7 @@ import { Divider, ListItem, ListItemText } from '@mui/material';
 import SelectForm from '@/components/form/SelectForm';
 import { AddButton, RemoveButton } from '@/components/button/AddIconButton';
 import { handleAddClick, handleChange, handleRemoveClick, handleSeriesChange } from '@/widget/utils/handler';
-import { COLUMN_TYPE, LABEL_LIST, LEGEND_LIST } from '@/constant';
+import { COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST } from '@/constant';
 import TextFieldForm from '@/components/form/TextFieldForm';
 import ColorButtonForm from '@/components/form/ColorButtonForm';

@@ -99,7 +99,7 @@ const Bubble3DChartSetting = props => {
        <SelectForm
          name="label"
          label="레이블"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.label}
          onChange={event => handleChange(event, setOption)}
        />
--- a/frontend-web/src/widget/settings/BubbleChartSetting.tsx
+++ b/frontend-web/src/widget/settings/BubbleChartSetting.tsx
@@ -5,7 +5,7 @@ import ColorButtonForm from '@/components/form/ColorButtonForm';
 import TextFieldForm from '@/components/form/TextFieldForm';
 import { AddButton, RemoveButton } from '@/components/button/AddIconButton';
 import { handleAddClick, handleChange, handleRemoveClick, handleSeriesChange } from '@/widget/utils/handler';
-import { COLUMN_TYPE, LABEL_LIST, LEGEND_LIST } from '@/constant';
+import { COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST } from '@/constant';

 const BubbleChartSetting = props => {
  const { option, setOption, spec } = props;
@@ -87,7 +87,7 @@ const BubbleChartSetting = props => {
        <SelectForm
          name="label"
          label="레이블"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.label}
          onChange={event => handleChange(event, setOption)}
        />
--- a/frontend-web/src/widget/settings/CandlestickChartSetting.tsx
+++ b/frontend-web/src/widget/settings/CandlestickChartSetting.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Divider, ListItem, ListItemText } from '@mui/material';
 import SelectForm from '@/components/form/SelectForm';
 import { handleChange, handleSeriesChange } from '@/widget/utils/handler';
-import { AGGREGATION_LIST, COLUMN_TYPE, LABEL_LIST } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST } from '@/constant';
 import ColorPickerForm from '@/components/form/ColorPickerForm';

 const CandlestickChartSetting = props => {
@@ -65,7 +65,7 @@ const CandlestickChartSetting = props => {
        <SelectForm
          name="mark"
          label="마크 포인트"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.mark}
          onChange={event => handleChange(event, setOption)}
        />
--- a/frontend-web/src/widget/settings/HeatmapChartSetting.tsx
+++ b/frontend-web/src/widget/settings/HeatmapChartSetting.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { ListItem, ListItemText } from '@mui/material';
 import SelectForm from '@/components/form/SelectForm';
 import { handleChange } from '@/widget/utils/handler';
-import { AGGREGATION_LIST, COLUMN_TYPE, LABEL_LIST } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST } from '@/constant';
 import ColorFieldForm from '@/components/form/ColorFieldForm';

 const HeatmapChartSetting = props => {
@@ -60,7 +60,7 @@ const HeatmapChartSetting = props => {
        <SelectForm
          name="label"
          label="레이블"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.label}
          onChange={event => handleChange(event, setOption)}
        />
--- a/frontend-web/src/widget/settings/Line3DChartSetting.tsx
+++ b/frontend-web/src/widget/settings/Line3DChartSetting.tsx
@@ -3,7 +3,7 @@ import { Divider, ListItem, ListItemText } from '@mui/material';
 import SelectForm from '@/components/form/SelectForm';
 import { AddButton, RemoveButton } from '@/components/button/AddIconButton';
 import { handleAddClick, handleChange, handleRemoveClick, handleSeriesChange } from '@/widget/utils/handler';
-import { AGGREGATION_LIST, COLUMN_TYPE, LABEL_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';
 import ColorButtonForm from '@/components/form/ColorButtonForm';

 const Line3DChartSetting = props => {
@@ -102,7 +102,7 @@ const Line3DChartSetting = props => {
          id="legendAggregation"
          name="legendAggregation"
          label="집계 방식 표시"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.legendAggregation}
          onChange={event => handleChange(event, setOption)}
        />
--- a/frontend-web/src/widget/settings/LineChartSetting.tsx
+++ b/frontend-web/src/widget/settings/LineChartSetting.tsx
@@ -4,7 +4,8 @@ import SelectForm from '@/components/form/SelectForm';
 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, LABEL_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';
+import TextFieldForm from '@/components/form/TextFieldForm';

 const LineChartSetting = props => {
  const { option, setOption, seriesItem, axis = 'x', spec } = props;
@@ -56,6 +57,14 @@ const LineChartSetting = props => {
              onChange={event => handleSeriesChange(event, setOption)}
              endButton={<ColorButtonForm index={index} option={option} setOption={setOption} />}
            />
+            <TextFieldForm
+              id={`name${index + 1}`}
+              name={`name${index + 1}`}
+              label="이름"
+              value={item.name}
+              onChange={event => handleSeriesChange(event, setOption)}
+              endButton={' '}
+            />
            <SelectForm
              id={`aggregation${index + 1}`}
              name={`aggregation${index + 1}`}
@@ -90,14 +99,14 @@ const LineChartSetting = props => {
        <SelectForm
          name="label"
          label="레이블"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.label}
          onChange={event => handleChange(event, setOption)}
        />
        <SelectForm
          name="mark"
          label="마크 포인트"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.mark}
          onChange={event => handleChange(event, setOption)}
        />
@@ -116,7 +125,7 @@ const LineChartSetting = props => {
          id="legendAggregation"
          name="legendAggregation"
          label="집계 방식 표시"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.legendAggregation}
          onChange={event => handleChange(event, setOption)}
        />
--- a/frontend-web/src/widget/settings/MixedLinePieChartSetting.tsx
+++ b/frontend-web/src/widget/settings/MixedLinePieChartSetting.tsx
@@ -4,7 +4,7 @@ import SelectForm from '@/components/form/SelectForm';
 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, LABEL_LIST, LEGEND_LIST, PIE_LABEL_LIST, WIDGET_AGGREGATION } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST, PIE_LABEL_LIST, WIDGET_AGGREGATION } from '@/constant';
 import ColorFieldReForm from '@/components/form/ColorFieldReForm';
 import { getAggregationDataForChart, getColorArr } from '@/widget/modules/utils/chartUtil';
 import TextFieldForm from '@/components/form/TextFieldForm';
@@ -149,14 +149,14 @@ const MixedLinePieChartSetting = props => {
        <SelectForm
          name="label"
          label="레이블"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.label}
          onChange={event => handleChange(event, setOption)}
        />
        <SelectForm
          name="mark"
          label="마크 포인트"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.mark}
          onChange={event => handleChange(event, setOption)}
        />
@@ -248,7 +248,7 @@ const MixedLinePieChartSetting = props => {
          id="legendAggregation"
          name="legendAggregation"
          label="집계 방식 표시"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.legendAggregation}
          onChange={event => handleChange(event, setOption)}
        />
--- a/frontend-web/src/widget/settings/MixedLineStackedBarChartSetting.tsx
+++ b/frontend-web/src/widget/settings/MixedLineStackedBarChartSetting.tsx
@@ -4,7 +4,7 @@ import SelectForm from '@/components/form/SelectForm';
 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, LABEL_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';

 const MixedLineStackedBarChartSetting = props => {
  const { option, setOption, axis = 'x', spec } = props;
@@ -93,14 +93,14 @@ const MixedLineStackedBarChartSetting = props => {
        <SelectForm
          name="label"
          label="레이블"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.label}
          onChange={event => handleChange(event, setOption)}
        />
        <SelectForm
          name="mark"
          label="마크 포인트"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.mark}
          onChange={event => handleChange(event, setOption)}
        />
@@ -119,7 +119,7 @@ const MixedLineStackedBarChartSetting = props => {
          id="legendAggregation"
          name="legendAggregation"
          label="집계 방식 표시"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.legendAggregation}
          onChange={event => handleChange(event, setOption)}
        />
--- a/frontend-web/src/widget/settings/NumericBoardSetting.tsx
+++ b/frontend-web/src/widget/settings/NumericBoardSetting.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { ListItem, ListItemText, Divider } from '@mui/material';
 import SelectForm from '@/components/form/SelectForm';
 import ColorPickerForm from '@/components/form/ColorPickerForm';
-import { AGGREGATION_LIST, COLUMN_TYPE, LABEL_LIST } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST, HIDDEN_LIST } from '@/constant';
 import TextFieldForm from '@/components/form/TextFieldForm';

 const fontSizeList = [10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 40, 50, 60, 70, 80, 85, 90, 95, 100];
@@ -43,6 +43,13 @@ const NumericBoardSetting = props => {
          onChange={handleHeaderChange}
          endButton={<ColorPickerForm color={option.header.color} name="color" onChange={handleHeaderChange} />}
        />
+        <SelectForm
+          name="titleHidden"
+          label="위젯 이름 숨기기"
+          optionList={HIDDEN_LIST}
+          value={option.header.titleHidden}
+          onChange={handleHeaderChange}
+        />
      </ListItem>
      <ListItem>
        <ListItemText primary="숫자값 설정" />
@@ -78,7 +85,7 @@ const NumericBoardSetting = props => {
        <SelectForm
          name="numForm"
          label="숫자 서식"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.content.numForm}
          onChange={handleContentChange}
        />
--- a/frontend-web/src/widget/settings/PolarBarChartSetting.tsx
+++ b/frontend-web/src/widget/settings/PolarBarChartSetting.tsx
@@ -3,7 +3,7 @@ import { Divider, InputAdornment, ListItem, ListItemText } from '@mui/material';
 import SelectForm from '@/components/form/SelectForm';
 import ColorButtonForm from '@/components/form/ColorButtonForm';
 import { handleAddClick, handleChange, handleRemoveClick, handleSeriesChange } from '@/widget/utils/handler';
-import { AGGREGATION_LIST, COLUMN_TYPE, LABEL_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';
 import TextFieldForm from '@/components/form/TextFieldForm';
 import { AddButton, RemoveButton } from '@/components/button/AddIconButton';

@@ -49,7 +49,7 @@ const PolarBarChartSetting = props => {
        <SelectForm
          name="label"
          label="레이블"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.label}
          onChange={event => handleChange(event, setOption)}
        />
@@ -133,7 +133,7 @@ const PolarBarChartSetting = props => {
          id="legendAggregation"
          name="legendAggregation"
          label="집계 방식 표시"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.legendAggregation}
          onChange={event => handleChange(event, setOption)}
        />
--- a/frontend-web/src/widget/settings/RadarChartSetting.tsx
+++ b/frontend-web/src/widget/settings/RadarChartSetting.tsx
@@ -4,7 +4,7 @@ import SelectForm from '@/components/form/SelectForm';
 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, LABEL_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST, WIDGET_AGGREGATION } from '@/constant';

 const RadarChartSetting = props => {
  const { option, setOption, seriesItem, spec } = props;
@@ -99,7 +99,7 @@ const RadarChartSetting = props => {
        <SelectForm
          name="label"
          label="레이블"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.label}
          onChange={event => handleChange(event, setOption)}
        />
@@ -118,7 +118,7 @@ const RadarChartSetting = props => {
          id="legendAggregation"
          name="legendAggregation"
          label="집계 방식 표시"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.legendAggregation}
          onChange={event => handleChange(event, setOption)}
        />
--- a/frontend-web/src/widget/settings/Scatter3DChartSetting.tsx
+++ b/frontend-web/src/widget/settings/Scatter3DChartSetting.tsx
@@ -3,7 +3,7 @@ import { Divider, ListItem, ListItemText } from '@mui/material';
 import SelectForm from '@/components/form/SelectForm';
 import { AddButton, RemoveButton } from '@/components/button/AddIconButton';
 import { handleAddClick, handleChange, handleRemoveClick, handleSeriesChange } from '@/widget/utils/handler';
-import { COLUMN_TYPE, LABEL_LIST, LEGEND_LIST } from '@/constant';
+import { COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST } from '@/constant';
 import TextFieldForm from '@/components/form/TextFieldForm';
 import ColorButtonForm from '@/components/form/ColorButtonForm';

@@ -96,7 +96,7 @@ const Scatter3DChartSetting = props => {
        <SelectForm
          name="label"
          label="레이블"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.label}
          onChange={event => handleChange(event, setOption)}
        />
--- a/frontend-web/src/widget/settings/ScatterChartSetting.tsx
+++ b/frontend-web/src/widget/settings/ScatterChartSetting.tsx
@@ -5,7 +5,7 @@ import ColorButtonForm from '@/components/form/ColorButtonForm';
 import TextFieldForm from '@/components/form/TextFieldForm';
 import { AddButton, RemoveButton } from '@/components/button/AddIconButton';
 import { handleAddClick, handleChange, handleRemoveClick, handleSeriesChange } from '@/widget/utils/handler';
-import { COLUMN_TYPE, LABEL_LIST, LEGEND_LIST } from '@/constant';
+import { COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST } from '@/constant';

 const ScatterChartSetting = props => {
  const { option, setOption, spec } = props;
@@ -84,7 +84,7 @@ const ScatterChartSetting = props => {
        <SelectForm
          name="label"
          label="레이블"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.label}
          onChange={event => handleChange(event, setOption)}
        />
--- a/frontend-web/src/widget/settings/TreemapChartSetting.tsx
+++ b/frontend-web/src/widget/settings/TreemapChartSetting.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Divider, ListItem, ListItemText } from '@mui/material';
 import SelectForm from '@/components/form/SelectForm';
-import { AGGREGATION_LIST, COLUMN_TYPE, LABEL_LIST } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST } from '@/constant';
 import ColorFieldForm from '@/components/form/ColorFieldForm';
 import { handleChange } from '@/widget/utils/handler';

@@ -36,7 +36,7 @@ const TreemapChartSetting = props => {
        <SelectForm
          name="label"
          label="레이블"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.label}
          onChange={event => handleChange(event, setOption)}
        />
--- a/frontend-web/src/widget/settings/WaterfallChartSetting.tsx
+++ b/frontend-web/src/widget/settings/WaterfallChartSetting.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Divider, ListItem, ListItemText } from '@mui/material';
 import SelectForm from '@/components/form/SelectForm';
 import { handleChange, handleSeriesChange } from '@/widget/utils/handler';
-import { AGGREGATION_LIST, COLUMN_TYPE, LABEL_LIST, LEGEND_LIST } from '@/constant';
+import { AGGREGATION_LIST, COLUMN_TYPE, DISPLAY_LIST, LEGEND_LIST } from '@/constant';
 import ColorFieldForm from '@/components/form/ColorFieldForm';

 const WaterfallChartSetting = props => {
@@ -50,7 +50,7 @@ const WaterfallChartSetting = props => {
        <SelectForm
          name="mark"
          label="마크 포인트"
-          optionList={LABEL_LIST}
+          optionList={DISPLAY_LIST}
          value={option.mark}
          onChange={event => handleChange(event, setOption)}
        />
--- a/frontend-web/src/widget/wrapper/WidgetViewer.tsx
+++ b/frontend-web/src/widget/wrapper/WidgetViewer.tsx
@@ -445,6 +445,14 @@ const WidgetViewer = props => {
    hideLoading();
  };

+  const renderTitle = () => {
+    if (widgetType === WIDGET_TYPE.BOARD_NUMERIC && widgetOption.header?.titleHidden) {
+      return '';
+    } else {
+      return title;
+    }
+  };
+
  // const defaultComponentOption = {
  //   grid: { top: '3%', right: '3%', bottom: '3%', left: '3%' },
  //   tooltip: { trigger: 'axis' },
@@ -506,7 +514,7 @@ const WidgetViewer = props => {
            textOverflow: 'ellipsis',
          }}
        >
-          {title}
+          {renderTitle()}
        </Typography>
      </Stack>