From 3ecbc9c7982ef5eb68d3b9fe76c5d16040a91161 Mon Sep 17 00:00:00 2001 From: SA K Date: Thu, 27 Oct 2022 11:35:45 +0900 Subject: [PATCH] [FE-Widget] Add an icon to the widget list page: step 1 #168 --- frontend-web/src/components/BoardListItem.tsx | 16 +- frontend-web/src/constant/index.ts | 236 ++++-------------- .../WidgetCreate/WidgetAttributeSelect.tsx | 7 +- .../src/pages/Widget/WidgetView/index.tsx | 42 ++-- frontend-web/src/pages/Widget/index.tsx | 1 + .../src/widget/modules/utils/switchChart.tsx | 46 ++-- .../src/widget/wrapper/WidgetSetting.tsx | 104 ++++---- .../src/widget/wrapper/WidgetViewer.tsx | 104 ++++---- 8 files changed, 215 insertions(+), 341 deletions(-) diff --git a/frontend-web/src/components/BoardListItem.tsx b/frontend-web/src/components/BoardListItem.tsx index 56aa2e2..ae83a06 100644 --- a/frontend-web/src/components/BoardListItem.tsx +++ b/frontend-web/src/components/BoardListItem.tsx @@ -1,10 +1,9 @@ import React from 'react'; -import { Avatar, Box, ListItem, ListItemIcon, Stack } from '@mui/material'; +import { Avatar, ListItem, ListItemIcon, Stack } from '@mui/material'; import { Link as RouterLink, useLocation, useNavigate } from 'react-router-dom'; import DeleteButton from '@/components/button/DeleteButton'; import ModifyButton from '@/components/button/ModifyButton'; import { styled } from '@mui/system'; -import { WIDGET_TYPE } from '@/constant'; const tableBorder = '1px solid #DADDDD'; @@ -53,11 +52,11 @@ function BoardListItem(props) { color: '#333333', }); - const getIconType = type => { - if (type) { - return WIDGET_TYPE[type].icon; - } - }; + // const getIconType = type => { + // if (type) { + // return WIDGET_TYPE[type].icon; + // } + // }; return ( diff --git a/frontend-web/src/constant/index.ts b/frontend-web/src/constant/index.ts index 471eca8..9943495 100644 --- a/frontend-web/src/constant/index.ts +++ b/frontend-web/src/constant/index.ts @@ -1,188 +1,56 @@ export const WIDGET_TYPE = { - CHART_LINE: { type: 'CHART_LINE', name: '선형 차트', description: 'Line Chart', icon: 'icon/ct-line.svg' }, - CHART_AREA: { type: 'CHART_AREA', name: '영역형 차트', description: 'Area Chart', icon: 'icon/ct-area.svg' }, - CHART_BAR: { type: 'CHART_BAR', name: '세로 막대형 차트', description: 'Bar Chart', icon: 'icon/ct-bar.svg' }, - CHART_COLUMN: { type: 'CHART_COLUMN', name: '가로 막대형 차트', description: 'Column Chart', icon: 'icon/ct-column.svg' }, - MIXED_CHART_LINE_BAR: { - type: 'MIXED_CHART_LINE_BAR', - name: '선형과 세로 막대형 복합 차트', - description: 'Mixed Line and Bar Chart', - icon: 'icon/ct-bar-line.svg', - }, - CHART_PIE: { type: 'CHART_PIE', name: '원형 차트', description: 'Pie Chart', icon: 'icon/ct-pie.svg' }, - CHART_NIGHTINGALE: { - type: 'CHART_NIGHTINGALE', - name: '나이팅게일 차트', - description: 'Nightingale Chart', - icon: 'icon/ct-nightingale.svg', - }, - CHART_BUBBLE: { type: 'CHART_BUBBLE', name: '거품형 차트', description: 'Bubble Chart', icon: 'icon/ct-bubble.svg' }, - CHART_RADAR: { type: 'CHART_RADAR', name: '방사형 차트', description: 'Radar Chart', icon: 'icon/ct-radar.svg' }, - CHART_SCATTER: { type: 'CHART_SCATTER', name: '분산형 차트', description: 'Scatter Chart', icon: 'icon/ct-scatter.svg' }, - CHART_DONUT: { type: 'CHART_DONUT', name: '도넛형 차트', description: 'Donut Chart', icon: 'icon/ct-donut.svg' }, - BOARD_NUMERIC: { type: 'BOARD_NUMERIC', name: '숫자판', description: 'Score Board', icon: 'icon/ct-score.svg' }, - BOARD_TABLE: { type: 'BOARD_TABLE', name: '표', description: 'Data Grid', icon: 'icon/ct-data.svg' }, - CHART_STACKED_LINE: { - type: 'CHART_STACKED_LINE', - name: '누적 선형 차트', - description: 'Stacked Line Chart', - icon: 'icon/ct-stacked-line.svg', - }, - CHART_STACKED_AREA: { - type: 'CHART_STACKED_AREA', - name: '누적 영역형 차트', - description: 'Stacked Area Chart', - icon: 'icon/ct-stacked-area.svg', - }, - CHART_STACKED_COLUMN: { - type: 'CHART_STACKED_COLUMN', - name: '누적 가로 막대형 차트', - description: 'Stacked Column Chart', - icon: 'icon/ct-stacked-column.svg', - }, - CHART_STACKED_BAR: { - type: 'CHART_STACKED_BAR', - name: '누적 세로 막대형 차트', - description: 'Stacked Bar Chart', - icon: 'icon/ct-stacked-bar.svg', - }, - CHART_TREEMAP: { type: 'CHART_TREEMAP', name: '트리맵 차트', description: 'Treemap Chart', icon: 'icon/ct-treemap.svg' }, - CHART_CANDLESTICK: { - type: 'CHART_CANDLESTICK', - name: '캔들스틱 차트', - description: 'Candlestick Chart', - icon: 'icon/ct-candle.svg', - }, - CHART_GAUGE: { type: 'CHART_GAUGE', name: '계기판 차트', description: 'Gauge Chart', icon: 'icon/ct-gauge.svg' }, - CHART_SUNBURST: { - type: 'CHART_SUNBURST', - name: '선버스트 차트', - description: 'Sunburst Chart', - icon: 'icon/ct-sunburst.svg', - }, - CHART_HEATMAP: { type: 'CHART_HEATMAP', name: '히트맵 차트', description: 'Heatmap Chart', icon: 'icon/ct-heatmap.svg' }, - CHART_FUNNEL: { type: 'CHART_FUNNEL', name: '깔때기형 차트', description: 'Funnel Chart', icon: 'icon/ct-funnel.svg' }, - CHART_3D_BAR: { type: 'CHART_3D_BAR', name: '3D 막대형 차트', description: '3D Bar Chart' }, - CHART_3D_LINE: { type: 'CHART_3D_LINE', name: '3D 선형 차트', description: '3D Line Chart' }, - CHART_3D_SCATTER: { type: 'CHART_3D_SCATTER', name: '3D 분산형 차트', description: '3D Scatter Chart' }, - CHART_3D_BUBBLE: { type: 'CHART_3D_BUBBLE', name: '3D 거품형 차트', description: '3D Bubble Chart' }, - CHART_WATERFALL_BAR: { type: 'CHART_WATERFALL_BAR', name: '폭포수 세로 차트', description: 'Waterfall Bar Chart' }, - CHART_WATERFALL_COLUMN: { - type: 'CHART_WATERFALL_COLUMN', - name: '폭포수 가로 차트', - description: 'Waterfall Column Chart', - }, - CHART_POLAR_BAR: { type: 'CHART_POLAR_BAR', name: '극좌표 막대형 차트', description: 'Polar Bar Chart' }, - MIXED_CHART_LINE_PIE: { - type: 'MIXED_CHART_LINE_PIE', - name: '선형과 원형 복합 차트', - description: 'Mixed Line and Pie Chart', - }, - CHART_POLAR_STACKED_BAR: { - type: 'CHART_POLAR_STACKED_BAR', - name: '극좌표 누적 막대형 차트', - description: 'Polar Stacked Bar Chart', - }, - MIXED_CHART_AREA_PIE: { - type: 'MIXED_CHART_AREA_PIE', - name: '영역형과 원형 복합 차트', - description: 'Mixed Area and Pie Chart', - }, - MIXED_CHART_BAR_PIE: { - type: 'MIXED_CHART_BAR_PIE', - name: '세로 막대형과 원형 복합 차트', - description: 'Mixed Bar and Pie Chart', - }, - MIXED_CHART_COLUMN_PIE: { - type: 'MIXED_CHART_COLUMN_PIE', - name: '가로 막대형과 원형 복합 차트', - description: 'Mixed Column and Pie Chart', - }, - MIXED_CHART_STACKED_BAR_PIE: { - type: 'MIXED_CHART_STACKED_BAR_PIE', - name: '누적 세로 막대형과 원형 복합 차트', - description: 'Mixed Stacked-Bar and Pie Chart', - }, - MIXED_CHART_STACKED_COLUMN_PIE: { - type: 'MIXED_CHART_STACKED_COLUMN_PIE', - name: '누적 가로 막대형과 원형 복합 차트', - description: 'Mixed Stacked-Column and Pie Chart', - }, - MIXED_CHART_STACKED_LINE_PIE: { - type: 'MIXED_CHART_STACKED_LINE_PIE', - name: '누적 선형과 원형 복합 차트', - description: 'Mixed Stacked-Line and Pie Chart', - }, - MIXED_CHART_STACKED_AREA_PIE: { - type: 'MIXED_CHART_STACKED_AREA_PIE', - name: '누적 영역형과 원형 복합 차트', - description: 'Mixed Stacked-Area and Pie Chart', - }, - MIXED_CHART_DONUT_PIE: { - type: 'MIXED_CHART_DONUT_PIE', - name: '도넛형과 원형 복합 차트', - description: 'Mixed Donut and Pie Chart', - }, - MIXED_CHART_NIGHTINGALE_PIE: { - type: 'MIXED_CHART_NIGHTINGALE_PIE', - name: '나이팅게일과 원형 복합 차트', - description: 'Mixed Nightingale and Pie Chart', - }, - MIXED_CHART_LINE_STACKED_BAR: { - type: 'MIXED_CHART_LINE_STACKED_BAR', - name: '선형과 누적 세로 막대형 복합 차트', - description: 'Mixed Line and Stacked-Bar Chart', - }, - MIXED_CHART_LINE_BOARD_NUMERIC: { - type: 'MIXED_CHART_LINE_BOARD_NUMERIC', - name: '선형 차트와 숫자 보드', - description: 'Line Chart and Score Board', - }, - MIXED_CHART_AREA_BOARD_NUMERIC: { - type: 'MIXED_CHART_AREA_BOARD_NUMERIC', - name: '영역형 차트와 숫자 보드', - description: 'Area Chart and Score Board', - }, - MIXED_CHART_BAR_BOARD_NUMERIC: { - type: 'MIXED_CHART_BAR_BOARD_NUMERIC', - name: '세로 막대형 차트와 숫자 보드', - description: 'Bar Chart and Score Board', - }, - MIXED_CHART_COLUMN_BOARD_NUMERIC: { - type: 'MIXED_CHART_COLUMN_BOARD_NUMERIC', - name: '가로 막대형 차트와 숫자 보드', - description: 'Column Chart and Score Board', - }, - MIXED_CHART_STACKED_LINE_BOARD_NUMERIC: { - type: 'MIXED_CHART_STACKED_LINE_BOARD_NUMERIC', - name: '누적 선형 차트와 숫자 보드', - description: 'Stacked Line Chart and Score Board', - }, - MIXED_CHART_STACKED_AREA_BOARD_NUMERIC: { - type: 'MIXED_CHART_STACKED_AREA_BOARD_NUMERIC', - name: '누적 영역형 차트와 숫자 보드', - description: 'Stacked Area Chart and Score Board', - }, - MIXED_CHART_STACKED_BAR_BOARD_NUMERIC: { - type: 'MIXED_CHART_STACKED_BAR_BOARD_NUMERIC', - name: '누적 세로 막대형 차트와 숫자 보드', - description: 'Stacked Bar Chart and Score Board', - }, - MIXED_CHART_STACKED_COLUMN_BOARD_NUMERIC: { - type: 'MIXED_CHART_STACKED_COLUMN_BOARD_NUMERIC', - name: '누적 가로 막대형 차트와 숫자 보드', - description: 'Stacked Column Chart and Score Board', - }, - MIXED_CHART_DONUT_BOARD_NUMERIC: { - type: 'MIXED_CHART_DONUT_BOARD_NUMERIC', - name: '도넛형 차트와 숫자 보드', - description: 'Donut Chart and Score Board', - }, - MIXED_CHART_NIGHTINGALE_BOARD_NUMERIC: { - type: 'MIXED_CHART_NIGHTINGALE_BOARD_NUMERIC', - name: '나이팅게일 차트와 숫자 보드', - description: 'Nightingale Chart and Score Board', - }, + BOARD_NUMERIC: 'BOARD_NUMERIC', + BOARD_TABLE: 'BOARD_TABLE', + CHART_LINE: 'CHART_LINE', + CHART_STACKED_LINE: 'CHART_STACKED_LINE', + CHART_AREA: 'CHART_AREA', + CHART_STACKED_AREA: 'CHART_STACKED_AREA', + CHART_BAR: 'CHART_BAR', + CHART_STACKED_BAR: 'CHART_STACKED_BAR', + CHART_COLUMN: 'CHART_COLUMN', + CHART_STACKED_COLUMN: 'CHART_STACKED_COLUMN', + CHART_PIE: 'CHART_PIE', + CHART_DONUT: 'CHART_DONUT', + CHART_NIGHTINGALE: 'CHART_NIGHTINGALE', + MIXED_CHART_LINE_BAR: 'MIXED_CHART_LINE_BAR', + CHART_SCATTER: 'CHART_SCATTER', + CHART_BUBBLE: 'CHART_BUBBLE', + CHART_RADAR: 'CHART_RADAR', + CHART_TREEMAP: 'CHART_TREEMAP', + CHART_SUNBURST: 'CHART_SUNBURST', + CHART_HEATMAP: 'CHART_HEATMAP', + CHART_GAUGE: 'CHART_GAUGE', + CHART_CANDLESTICK: 'CHART_CANDLESTICK', + CHART_FUNNEL: 'CHART_FUNNEL', + CHART_3D_BAR: 'CHART_3D_BAR', + CHART_3D_LINE: 'CHART_3D_LINE', + CHART_3D_SCATTER: 'CHART_3D_SCATTER', + CHART_3D_BUBBLE: 'CHART_3D_BUBBLE', + CHART_WATERFALL_BAR: 'CHART_WATERFALL_BAR', + CHART_WATERFALL_COLUMN: 'CHART_WATERFALL_COLUMN', + CHART_POLAR_BAR: 'CHART_POLAR_BAR', + CHART_POLAR_STACKED_BAR: 'CHART_POLAR_STACKED_BAR', + MIXED_CHART_LINE_PIE: 'MIXED_CHART_LINE_PIE', + MIXED_CHART_AREA_PIE: 'MIXED_CHART_AREA_PIE', + MIXED_CHART_BAR_PIE: 'MIXED_CHART_BAR_PIE', + MIXED_CHART_COLUMN_PIE: 'MIXED_CHART_COLUMN_PIE', + MIXED_CHART_STACKED_BAR_PIE: 'MIXED_CHART_STACKED_BAR_PIE', + MIXED_CHART_STACKED_COLUMN_PIE: 'MIXED_CHART_STACKED_COLUMN_PIE', + MIXED_CHART_STACKED_LINE_PIE: 'MIXED_CHART_STACKED_LINE_PIE', + MIXED_CHART_STACKED_AREA_PIE: 'MIXED_CHART_STACKED_AREA_PIE', + MIXED_CHART_DONUT_PIE: 'MIXED_CHART_DONUT_PIE', + MIXED_CHART_NIGHTINGALE_PIE: 'MIXED_CHART_NIGHTINGALE_PIE', + MIXED_CHART_LINE_STACKED_BAR: 'MIXED_CHART_LINE_STACKED_BAR', + MIXED_CHART_LINE_BOARD_NUMERIC: 'MIXED_CHART_LINE_BOARD_NUMERIC', + MIXED_CHART_AREA_BOARD_NUMERIC: 'MIXED_CHART_AREA_BOARD_NUMERIC', + MIXED_CHART_BAR_BOARD_NUMERIC: 'MIXED_CHART_BAR_BOARD_NUMERIC', + MIXED_CHART_COLUMN_BOARD_NUMERIC: 'MIXED_CHART_COLUMN_BOARD_NUMERIC', + MIXED_CHART_STACKED_LINE_BOARD_NUMERIC: 'MIXED_CHART_STACKED_LINE_BOARD_NUMERIC', + MIXED_CHART_STACKED_AREA_BOARD_NUMERIC: 'MIXED_CHART_STACKED_AREA_BOARD_NUMERIC', + MIXED_CHART_STACKED_BAR_BOARD_NUMERIC: 'MIXED_CHART_STACKED_BAR_BOARD_NUMERIC', + MIXED_CHART_STACKED_COLUMN_BOARD_NUMERIC: 'MIXED_CHART_STACKED_COLUMN_BOARD_NUMERIC', + MIXED_CHART_DONUT_BOARD_NUMERIC: 'MIXED_CHART_DONUT_BOARD_NUMERIC', + MIXED_CHART_NIGHTINGALE_BOARD_NUMERIC: 'MIXED_CHART_NIGHTINGALE_BOARD_NUMERIC', }; export const WIDGET_AGGREGATION = { diff --git a/frontend-web/src/pages/Widget/WidgetCreate/WidgetAttributeSelect.tsx b/frontend-web/src/pages/Widget/WidgetCreate/WidgetAttributeSelect.tsx index 70064bd..37c252b 100644 --- a/frontend-web/src/pages/Widget/WidgetCreate/WidgetAttributeSelect.tsx +++ b/frontend-web/src/pages/Widget/WidgetCreate/WidgetAttributeSelect.tsx @@ -30,6 +30,11 @@ const WidgetAttributeSelect = props => { }; }, []); + // useEffect(() => { + // setTitle(widgetOption.title); + // console.log(title); + // }, []); + useEffect(() => { if (dataset || widgetOption) { getData(); @@ -37,7 +42,6 @@ const WidgetAttributeSelect = props => { }, [dataset, widgetOption]); useEffect(() => { - // setTitle(widgetOption.title); setOption(JSON.parse(JSON.stringify(widgetOption.option))); }, [widgetOption]); @@ -93,7 +97,6 @@ const WidgetAttributeSelect = props => { width: '100%', height: 'calc(100vh - 195px)', overflow: 'hidden', - borderBottom: '1px solid #e3e7ea', backgroundColor: '#f5f6f8', backgroundImage: `url(${grid})`, backgroundRepeat: 'repeat', diff --git a/frontend-web/src/pages/Widget/WidgetView/index.tsx b/frontend-web/src/pages/Widget/WidgetView/index.tsx index e541b44..a5a2f85 100644 --- a/frontend-web/src/pages/Widget/WidgetView/index.tsx +++ b/frontend-web/src/pages/Widget/WidgetView/index.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { Box, Stack, Typography } from '@mui/material'; +import { Avatar, Box, ListItemIcon, Stack, Typography } from '@mui/material'; import { Link as RouterLink, useNavigate, useParams } from 'react-router-dom'; import PageTitleBox from '@/components/PageTitleBox'; import WidgetService from '@/api/widgetService'; @@ -10,6 +10,7 @@ import ModifyButton from '@/components/button/ModifyButton'; import DeleteButton from '@/components/button/DeleteButton'; import DashboardTitleBox from '@/pages/Dashboard/Components/DashboardTitleBox'; import { useAlert } from 'react-alert'; +import { WIDGET_TYPE } from '@/constant'; const WidgetView = () => { const navigate = useNavigate(); @@ -93,25 +94,26 @@ const WidgetView = () => { - {widgetOption.title} - + + + {widgetOption.title} + + } button={ diff --git a/frontend-web/src/pages/Widget/index.tsx b/frontend-web/src/pages/Widget/index.tsx index 718d7eb..e3d5d6b 100644 --- a/frontend-web/src/pages/Widget/index.tsx +++ b/frontend-web/src/pages/Widget/index.tsx @@ -17,6 +17,7 @@ const Widget = () => { const { showLoading, hideLoading } = useContext(LoadingContext); const [widgetList, setWidgetList] = useState([]); + console.log('widgetList', widgetList); useEffect(() => { getWidgetList(); diff --git a/frontend-web/src/widget/modules/utils/switchChart.tsx b/frontend-web/src/widget/modules/utils/switchChart.tsx index 9e69a9a..5c758ac 100644 --- a/frontend-web/src/widget/modules/utils/switchChart.tsx +++ b/frontend-web/src/widget/modules/utils/switchChart.tsx @@ -122,29 +122,29 @@ export const ChartComponent: FC = ({ widgetType, option, dataSet }) }; const ChartLookUpTable = { - [WIDGET_TYPE.BOARD_NUMERIC.type]: NumericBoard, - [WIDGET_TYPE.BOARD_TABLE.type]: TableBoard, - [WIDGET_TYPE.CHART_LINE.type]: LineChart, - [WIDGET_TYPE.CHART_AREA.type]: () => LineChart({ area, ...rest }), - [WIDGET_TYPE.CHART_BAR.type]: () => LineChart({ bar, ...rest }), - [WIDGET_TYPE.CHART_COLUMN.type]: () => LineChart({ column, ...rest }), - [WIDGET_TYPE.CHART_STACKED_LINE.type]: () => LineChart({ stackedLine, ...rest }), - [WIDGET_TYPE.CHART_STACKED_AREA.type]: () => LineChart({ stackedArea, ...rest }), - [WIDGET_TYPE.CHART_STACKED_BAR.type]: () => LineChart({ stackedBar, ...rest }), - [WIDGET_TYPE.CHART_STACKED_COLUMN.type]: () => LineChart({ stackedColumn, ...rest }), - [WIDGET_TYPE.MIXED_CHART_LINE_BAR.type]: () => LineChart({ mixedLineBar, ...rest }), - [WIDGET_TYPE.CHART_PIE.type]: PieChart, - [WIDGET_TYPE.CHART_DONUT.type]: () => PieChart({ donut, ...rest }), - [WIDGET_TYPE.CHART_NIGHTINGALE.type]: () => PieChart({ nightingale, ...rest }), - [WIDGET_TYPE.CHART_FUNNEL.type]: () => PieChart({ funnel, ...rest }), - [WIDGET_TYPE.CHART_SCATTER.type]: ScatterChart, - [WIDGET_TYPE.CHART_BUBBLE.type]: BubbleChart, - [WIDGET_TYPE.CHART_RADAR.type]: RadarChart, - [WIDGET_TYPE.CHART_TREEMAP.type]: TreemapChart, - [WIDGET_TYPE.CHART_SUNBURST.type]: () => TreemapChart({ sunburst, ...rest }), - [WIDGET_TYPE.CHART_HEATMAP.type]: HeatmapChart, - [WIDGET_TYPE.CHART_GAUGE.type]: GaugeChart, - [WIDGET_TYPE.CHART_CANDLESTICK.type]: CandlestickChart, + [WIDGET_TYPE.BOARD_NUMERIC]: NumericBoard, + [WIDGET_TYPE.BOARD_TABLE]: TableBoard, + [WIDGET_TYPE.CHART_LINE]: LineChart, + [WIDGET_TYPE.CHART_AREA]: () => LineChart({ area, ...rest }), + [WIDGET_TYPE.CHART_BAR]: () => LineChart({ bar, ...rest }), + [WIDGET_TYPE.CHART_COLUMN]: () => LineChart({ column, ...rest }), + [WIDGET_TYPE.CHART_STACKED_LINE]: () => LineChart({ stackedLine, ...rest }), + [WIDGET_TYPE.CHART_STACKED_AREA]: () => LineChart({ stackedArea, ...rest }), + [WIDGET_TYPE.CHART_STACKED_BAR]: () => LineChart({ stackedBar, ...rest }), + [WIDGET_TYPE.CHART_STACKED_COLUMN]: () => LineChart({ stackedColumn, ...rest }), + [WIDGET_TYPE.MIXED_CHART_LINE_BAR]: () => LineChart({ mixedLineBar, ...rest }), + [WIDGET_TYPE.CHART_PIE]: PieChart, + [WIDGET_TYPE.CHART_DONUT]: () => PieChart({ donut, ...rest }), + [WIDGET_TYPE.CHART_NIGHTINGALE]: () => PieChart({ nightingale, ...rest }), + [WIDGET_TYPE.CHART_FUNNEL]: () => PieChart({ funnel, ...rest }), + [WIDGET_TYPE.CHART_SCATTER]: ScatterChart, + [WIDGET_TYPE.CHART_BUBBLE]: BubbleChart, + [WIDGET_TYPE.CHART_RADAR]: RadarChart, + [WIDGET_TYPE.CHART_TREEMAP]: TreemapChart, + [WIDGET_TYPE.CHART_SUNBURST]: () => TreemapChart({ sunburst, ...rest }), + [WIDGET_TYPE.CHART_HEATMAP]: HeatmapChart, + [WIDGET_TYPE.CHART_GAUGE]: GaugeChart, + [WIDGET_TYPE.CHART_CANDLESTICK]: CandlestickChart, }; console.log(option); diff --git a/frontend-web/src/widget/wrapper/WidgetSetting.tsx b/frontend-web/src/widget/wrapper/WidgetSetting.tsx index 10cd5a0..3413473 100644 --- a/frontend-web/src/widget/wrapper/WidgetSetting.tsx +++ b/frontend-web/src/widget/wrapper/WidgetSetting.tsx @@ -70,133 +70,133 @@ const WidgetSetting = props => { }; switch (widgetType) { - case WIDGET_TYPE.BOARD_NUMERIC.type: + case WIDGET_TYPE.BOARD_NUMERIC: module = ; break; - case WIDGET_TYPE.BOARD_TABLE.type: + case WIDGET_TYPE.BOARD_TABLE: module = ; break; - case WIDGET_TYPE.CHART_LINE.type: + case WIDGET_TYPE.CHART_LINE: module = ; break; - case WIDGET_TYPE.CHART_STACKED_LINE.type: + case WIDGET_TYPE.CHART_STACKED_LINE: module = ; break; - case WIDGET_TYPE.CHART_AREA.type: + case WIDGET_TYPE.CHART_AREA: module = ; break; - case WIDGET_TYPE.CHART_STACKED_AREA.type: + case WIDGET_TYPE.CHART_STACKED_AREA: module = ; break; - case WIDGET_TYPE.CHART_BAR.type: + case WIDGET_TYPE.CHART_BAR: module = ; break; - case WIDGET_TYPE.CHART_STACKED_BAR.type: + case WIDGET_TYPE.CHART_STACKED_BAR: module = ; break; - case WIDGET_TYPE.CHART_COLUMN.type: + case WIDGET_TYPE.CHART_COLUMN: module = ; break; - case WIDGET_TYPE.CHART_STACKED_COLUMN.type: + case WIDGET_TYPE.CHART_STACKED_COLUMN: module = ; break; - case WIDGET_TYPE.MIXED_CHART_LINE_BAR.type: + case WIDGET_TYPE.MIXED_CHART_LINE_BAR: module = ; break; - case WIDGET_TYPE.CHART_PIE.type: + case WIDGET_TYPE.CHART_PIE: module = ; break; - case WIDGET_TYPE.CHART_DONUT.type: + case WIDGET_TYPE.CHART_DONUT: module = ; break; - case WIDGET_TYPE.CHART_NIGHTINGALE.type: + case WIDGET_TYPE.CHART_NIGHTINGALE: module = ; break; - case WIDGET_TYPE.CHART_SCATTER.type: + case WIDGET_TYPE.CHART_SCATTER: module = ; break; - case WIDGET_TYPE.CHART_BUBBLE.type: + case WIDGET_TYPE.CHART_BUBBLE: module = ; break; - case WIDGET_TYPE.CHART_RADAR.type: + case WIDGET_TYPE.CHART_RADAR: module = ; break; - case WIDGET_TYPE.CHART_TREEMAP.type: + case WIDGET_TYPE.CHART_TREEMAP: module = ; break; - case WIDGET_TYPE.CHART_HEATMAP.type: + case WIDGET_TYPE.CHART_HEATMAP: module = ; break; - case WIDGET_TYPE.CHART_SUNBURST.type: + case WIDGET_TYPE.CHART_SUNBURST: module = ; break; - case WIDGET_TYPE.CHART_GAUGE.type: + case WIDGET_TYPE.CHART_GAUGE: module = ; break; - case WIDGET_TYPE.CHART_CANDLESTICK.type: + case WIDGET_TYPE.CHART_CANDLESTICK: module = ; break; - case WIDGET_TYPE.CHART_FUNNEL.type: + case WIDGET_TYPE.CHART_FUNNEL: module = ; break; - case WIDGET_TYPE.CHART_3D_BAR.type: + case WIDGET_TYPE.CHART_3D_BAR: module = ; break; - case WIDGET_TYPE.CHART_3D_LINE.type: + case WIDGET_TYPE.CHART_3D_LINE: module = ; break; - case WIDGET_TYPE.CHART_3D_SCATTER.type: + case WIDGET_TYPE.CHART_3D_SCATTER: module = ; break; - case WIDGET_TYPE.CHART_3D_BUBBLE.type: + case WIDGET_TYPE.CHART_3D_BUBBLE: module = ; break; - case WIDGET_TYPE.CHART_WATERFALL_BAR.type: + case WIDGET_TYPE.CHART_WATERFALL_BAR: module = ; break; - case WIDGET_TYPE.CHART_WATERFALL_COLUMN.type: + case WIDGET_TYPE.CHART_WATERFALL_COLUMN: module = ; break; - case WIDGET_TYPE.CHART_POLAR_BAR.type: + case WIDGET_TYPE.CHART_POLAR_BAR: module = ; break; - case WIDGET_TYPE.CHART_POLAR_STACKED_BAR.type: + case WIDGET_TYPE.CHART_POLAR_STACKED_BAR: module = ; break; - case WIDGET_TYPE.MIXED_CHART_LINE_PIE.type: + case WIDGET_TYPE.MIXED_CHART_LINE_PIE: module = ; break; - case WIDGET_TYPE.MIXED_CHART_AREA_PIE.type: + case WIDGET_TYPE.MIXED_CHART_AREA_PIE: module = ; break; - case WIDGET_TYPE.MIXED_CHART_BAR_PIE.type: + case WIDGET_TYPE.MIXED_CHART_BAR_PIE: module = ; break; - case WIDGET_TYPE.MIXED_CHART_COLUMN_PIE.type: + case WIDGET_TYPE.MIXED_CHART_COLUMN_PIE: module = ; break; - case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_PIE.type: + case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_PIE: module = ; break; - case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_PIE.type: + case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_PIE: module = ; break; - case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_PIE.type: + case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_PIE: module = ; break; - case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_PIE.type: + case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_PIE: module = ; break; - case WIDGET_TYPE.MIXED_CHART_DONUT_PIE.type: + case WIDGET_TYPE.MIXED_CHART_DONUT_PIE: module = ; break; - case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_PIE.type: + case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_PIE: module = ; break; - case WIDGET_TYPE.MIXED_CHART_LINE_STACKED_BAR.type: + case WIDGET_TYPE.MIXED_CHART_LINE_STACKED_BAR: module = ; break; - case WIDGET_TYPE.MIXED_CHART_LINE_BOARD_NUMERIC.type: + case WIDGET_TYPE.MIXED_CHART_LINE_BOARD_NUMERIC: module = ( { ); break; - case WIDGET_TYPE.MIXED_CHART_AREA_BOARD_NUMERIC.type: + case WIDGET_TYPE.MIXED_CHART_AREA_BOARD_NUMERIC: module = ( @@ -220,7 +220,7 @@ const WidgetSetting = props => { ); break; - case WIDGET_TYPE.MIXED_CHART_BAR_BOARD_NUMERIC.type: + case WIDGET_TYPE.MIXED_CHART_BAR_BOARD_NUMERIC: module = ( @@ -229,7 +229,7 @@ const WidgetSetting = props => { ); break; - case WIDGET_TYPE.MIXED_CHART_COLUMN_BOARD_NUMERIC.type: + case WIDGET_TYPE.MIXED_CHART_COLUMN_BOARD_NUMERIC: module = ( @@ -238,7 +238,7 @@ const WidgetSetting = props => { ); break; - case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_BOARD_NUMERIC.type: + case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_BOARD_NUMERIC: module = ( @@ -247,7 +247,7 @@ const WidgetSetting = props => { ); break; - case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_BOARD_NUMERIC.type: + case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_BOARD_NUMERIC: module = ( @@ -256,7 +256,7 @@ const WidgetSetting = props => { ); break; - case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_BOARD_NUMERIC.type: + case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_BOARD_NUMERIC: module = ( @@ -265,7 +265,7 @@ const WidgetSetting = props => { ); break; - case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_BOARD_NUMERIC.type: + case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_BOARD_NUMERIC: module = ( @@ -274,7 +274,7 @@ const WidgetSetting = props => { ); break; - case WIDGET_TYPE.MIXED_CHART_DONUT_BOARD_NUMERIC.type: + case WIDGET_TYPE.MIXED_CHART_DONUT_BOARD_NUMERIC: module = ( @@ -283,7 +283,7 @@ const WidgetSetting = props => { ); break; - case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_BOARD_NUMERIC.type: + case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_BOARD_NUMERIC: module = ( diff --git a/frontend-web/src/widget/wrapper/WidgetViewer.tsx b/frontend-web/src/widget/wrapper/WidgetViewer.tsx index a661230..2f9a17f 100644 --- a/frontend-web/src/widget/wrapper/WidgetViewer.tsx +++ b/frontend-web/src/widget/wrapper/WidgetViewer.tsx @@ -42,23 +42,23 @@ const WidgetViewer = props => { const chartProps = { option: widgetOption, dataSet: dataSet }; switch (widgetType) { - case WIDGET_TYPE.BOARD_NUMERIC.type: + case WIDGET_TYPE.BOARD_NUMERIC: module = ; break; - case WIDGET_TYPE.BOARD_TABLE.type: + case WIDGET_TYPE.BOARD_TABLE: module = ; break; - case WIDGET_TYPE.CHART_LINE.type: + case WIDGET_TYPE.CHART_LINE: module = ; // testModule = testLineChart; break; - case WIDGET_TYPE.CHART_STACKED_LINE.type: + case WIDGET_TYPE.CHART_STACKED_LINE: module = ; break; - case WIDGET_TYPE.CHART_AREA.type: + case WIDGET_TYPE.CHART_AREA: module = ; break; - case WIDGET_TYPE.CHART_STACKED_AREA.type: + case WIDGET_TYPE.CHART_STACKED_AREA: module = ( { /> ); break; - case WIDGET_TYPE.CHART_BAR.type: + case WIDGET_TYPE.CHART_BAR: module = ( { /> ); break; - case WIDGET_TYPE.CHART_STACKED_BAR.type: + case WIDGET_TYPE.CHART_STACKED_BAR: module = ; break; - case WIDGET_TYPE.CHART_COLUMN.type: + case WIDGET_TYPE.CHART_COLUMN: module = ( { /> ); break; - case WIDGET_TYPE.CHART_STACKED_COLUMN.type: + case WIDGET_TYPE.CHART_STACKED_COLUMN: module = ; break; - case WIDGET_TYPE.MIXED_CHART_LINE_BAR.type: + case WIDGET_TYPE.MIXED_CHART_LINE_BAR: module = ( { /> ); break; - case WIDGET_TYPE.CHART_PIE.type: + case WIDGET_TYPE.CHART_PIE: module = ; break; - case WIDGET_TYPE.CHART_DONUT.type: + case WIDGET_TYPE.CHART_DONUT: module = ; break; - case WIDGET_TYPE.CHART_NIGHTINGALE.type: + case WIDGET_TYPE.CHART_NIGHTINGALE: module = ( { /> ); break; - case WIDGET_TYPE.CHART_SCATTER.type: + case WIDGET_TYPE.CHART_SCATTER: module = ; break; - case WIDGET_TYPE.CHART_BUBBLE.type: + case WIDGET_TYPE.CHART_BUBBLE: module = ; break; - case WIDGET_TYPE.CHART_RADAR.type: + case WIDGET_TYPE.CHART_RADAR: module = ; break; - case WIDGET_TYPE.CHART_TREEMAP.type: + case WIDGET_TYPE.CHART_TREEMAP: module = ; break; - case WIDGET_TYPE.CHART_HEATMAP.type: + case WIDGET_TYPE.CHART_HEATMAP: module = ; break; - case WIDGET_TYPE.CHART_SUNBURST.type: + case WIDGET_TYPE.CHART_SUNBURST: module = ( { /> ); break; - case WIDGET_TYPE.CHART_GAUGE.type: + case WIDGET_TYPE.CHART_GAUGE: module = ; break; - case WIDGET_TYPE.CHART_CANDLESTICK.type: + case WIDGET_TYPE.CHART_CANDLESTICK: module = ; break; - case WIDGET_TYPE.CHART_FUNNEL.type: + case WIDGET_TYPE.CHART_FUNNEL: module = ; break; - case WIDGET_TYPE.CHART_3D_BAR.type: + case WIDGET_TYPE.CHART_3D_BAR: module = ; break; - case WIDGET_TYPE.CHART_3D_LINE.type: + case WIDGET_TYPE.CHART_3D_LINE: module = ; break; - case WIDGET_TYPE.CHART_3D_SCATTER.type: + case WIDGET_TYPE.CHART_3D_SCATTER: module = ; break; - case WIDGET_TYPE.CHART_3D_BUBBLE.type: + case WIDGET_TYPE.CHART_3D_BUBBLE: module = ; break; - case WIDGET_TYPE.CHART_WATERFALL_BAR.type: + case WIDGET_TYPE.CHART_WATERFALL_BAR: module = ; break; - case WIDGET_TYPE.CHART_WATERFALL_COLUMN.type: + case WIDGET_TYPE.CHART_WATERFALL_COLUMN: module = ; break; - case WIDGET_TYPE.CHART_POLAR_BAR.type: + case WIDGET_TYPE.CHART_POLAR_BAR: module = ; break; - case WIDGET_TYPE.CHART_POLAR_STACKED_BAR.type: + case WIDGET_TYPE.CHART_POLAR_STACKED_BAR: module = ; break; - case WIDGET_TYPE.MIXED_CHART_LINE_PIE.type: + case WIDGET_TYPE.MIXED_CHART_LINE_PIE: module = ; break; - case WIDGET_TYPE.MIXED_CHART_AREA_PIE.type: + case WIDGET_TYPE.MIXED_CHART_AREA_PIE: module = ; break; - case WIDGET_TYPE.MIXED_CHART_BAR_PIE.type: + case WIDGET_TYPE.MIXED_CHART_BAR_PIE: module = ( { /> ); break; - case WIDGET_TYPE.MIXED_CHART_COLUMN_PIE.type: + case WIDGET_TYPE.MIXED_CHART_COLUMN_PIE: module = ( { /> ); break; - case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_PIE.type: + case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_PIE: module = ; break; - case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_PIE.type: + case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_PIE: module = ; break; - case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_PIE.type: + case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_PIE: module = ; break; - case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_PIE.type: + case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_PIE: module = ( { /> ); break; - case WIDGET_TYPE.MIXED_CHART_DONUT_PIE.type: + case WIDGET_TYPE.MIXED_CHART_DONUT_PIE: module = ; break; - case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_PIE.type: + case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_PIE: module = ( { /> ); break; - case WIDGET_TYPE.MIXED_CHART_LINE_STACKED_BAR.type: + case WIDGET_TYPE.MIXED_CHART_LINE_STACKED_BAR: module = ; break; - case WIDGET_TYPE.MIXED_CHART_LINE_BOARD_NUMERIC.type: + case WIDGET_TYPE.MIXED_CHART_LINE_BOARD_NUMERIC: module = ( { ); break; - case WIDGET_TYPE.MIXED_CHART_AREA_BOARD_NUMERIC.type: + case WIDGET_TYPE.MIXED_CHART_AREA_BOARD_NUMERIC: module = ( @@ -283,7 +283,7 @@ const WidgetViewer = props => { ); break; - case WIDGET_TYPE.MIXED_CHART_BAR_BOARD_NUMERIC.type: + case WIDGET_TYPE.MIXED_CHART_BAR_BOARD_NUMERIC: module = ( @@ -299,7 +299,7 @@ const WidgetViewer = props => { ); break; - case WIDGET_TYPE.MIXED_CHART_COLUMN_BOARD_NUMERIC.type: + case WIDGET_TYPE.MIXED_CHART_COLUMN_BOARD_NUMERIC: module = ( @@ -316,7 +316,7 @@ const WidgetViewer = props => { ); break; - case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_BOARD_NUMERIC.type: + case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_BOARD_NUMERIC: module = ( @@ -324,7 +324,7 @@ const WidgetViewer = props => { ); break; - case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_BOARD_NUMERIC.type: + case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_BOARD_NUMERIC: module = ( @@ -338,7 +338,7 @@ const WidgetViewer = props => { ); break; - case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_BOARD_NUMERIC.type: + case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_BOARD_NUMERIC: module = ( @@ -346,7 +346,7 @@ const WidgetViewer = props => { ); break; - case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_BOARD_NUMERIC.type: + case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_BOARD_NUMERIC: module = ( @@ -354,7 +354,7 @@ const WidgetViewer = props => { ); break; - case WIDGET_TYPE.MIXED_CHART_DONUT_BOARD_NUMERIC.type: + case WIDGET_TYPE.MIXED_CHART_DONUT_BOARD_NUMERIC: module = ( { ); break; - case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_BOARD_NUMERIC.type: + case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_BOARD_NUMERIC: module = (