[FE-Widget] Add an icon to the widget list page: step 1 #168

This commit is contained in:
SA K
2022-10-27 11:35:45 +09:00
parent 5f8f31d3b3
commit 3ecbc9c798
8 changed files with 215 additions and 341 deletions

View File

@@ -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 (
<ListItem
@@ -83,7 +82,8 @@ function BoardListItem(props) {
>
<Avatar
alt={postItem.componentType}
src={`static/images/${getIconType(postItem.componentType)}`}
// src={`static/images/${getIconType(postItem.componentType)}`}
src={`static/images/icon/ct-pie.svg`}
sx={{ width: 'auto', height: '24px', borderRadius: 0, objectFit: 'contain', backgroundColor: 'transparent' }}
/>
</ListItemIcon>

View File

@@ -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 = {

View File

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

View File

@@ -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,6 +94,7 @@ const WidgetView = () => {
<PageTitleBox upperTitle="위젯" title="위젯 조회" sx={{ width: '100%', marginTop: '22px' }}>
<DashboardTitleBox
title={
<Stack>
<Typography
variant="subtitle1"
component="span"
@@ -100,7 +102,6 @@ const WidgetView = () => {
fontWeight: 500,
paddingLeft: '18px',
height: '16px',
fontFamily: 'Pretendard',
fontSize: '18px',
fontStretch: 'normal',
fontStyle: 'normal',
@@ -112,6 +113,7 @@ const WidgetView = () => {
>
{widgetOption.title}
</Typography>
</Stack>
}
button={
<Stack direction="row" alignItems="center" sx={{ marginRight: '20px' }}>

View File

@@ -17,6 +17,7 @@ const Widget = () => {
const { showLoading, hideLoading } = useContext(LoadingContext);
const [widgetList, setWidgetList] = useState([]);
console.log('widgetList', widgetList);
useEffect(() => {
getWidgetList();

View File

@@ -122,29 +122,29 @@ export const ChartComponent: FC<ChartProps> = ({ 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);

View File

@@ -70,133 +70,133 @@ const WidgetSetting = props => {
};
switch (widgetType) {
case WIDGET_TYPE.BOARD_NUMERIC.type:
case WIDGET_TYPE.BOARD_NUMERIC:
module = <NumericBoardSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.BOARD_TABLE.type:
case WIDGET_TYPE.BOARD_TABLE:
module = <TableBoardSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_LINE.type:
case WIDGET_TYPE.CHART_LINE:
module = <LineChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_STACKED_LINE.type:
case WIDGET_TYPE.CHART_STACKED_LINE:
module = <LineChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_AREA.type:
case WIDGET_TYPE.CHART_AREA:
module = <LineChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_STACKED_AREA.type:
case WIDGET_TYPE.CHART_STACKED_AREA:
module = <LineChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_BAR.type:
case WIDGET_TYPE.CHART_BAR:
module = <LineChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_STACKED_BAR.type:
case WIDGET_TYPE.CHART_STACKED_BAR:
module = <LineChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_COLUMN.type:
case WIDGET_TYPE.CHART_COLUMN:
module = <LineChartSetting {...chartSettingProps} axis="y" />;
break;
case WIDGET_TYPE.CHART_STACKED_COLUMN.type:
case WIDGET_TYPE.CHART_STACKED_COLUMN:
module = <LineChartSetting {...chartSettingProps} axis="y" />;
break;
case WIDGET_TYPE.MIXED_CHART_LINE_BAR.type:
case WIDGET_TYPE.MIXED_CHART_LINE_BAR:
module = <MixedLineBarChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_PIE.type:
case WIDGET_TYPE.CHART_PIE:
module = <PieChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_DONUT.type:
case WIDGET_TYPE.CHART_DONUT:
module = <DonutChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_NIGHTINGALE.type:
case WIDGET_TYPE.CHART_NIGHTINGALE:
module = <DonutChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_SCATTER.type:
case WIDGET_TYPE.CHART_SCATTER:
module = <ScatterChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_BUBBLE.type:
case WIDGET_TYPE.CHART_BUBBLE:
module = <BubbleChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_RADAR.type:
case WIDGET_TYPE.CHART_RADAR:
module = <RadarChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_TREEMAP.type:
case WIDGET_TYPE.CHART_TREEMAP:
module = <TreemapChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_HEATMAP.type:
case WIDGET_TYPE.CHART_HEATMAP:
module = <HeatmapChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_SUNBURST.type:
case WIDGET_TYPE.CHART_SUNBURST:
module = <TreemapChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_GAUGE.type:
case WIDGET_TYPE.CHART_GAUGE:
module = <GaugeChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_CANDLESTICK.type:
case WIDGET_TYPE.CHART_CANDLESTICK:
module = <CandlestickChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_FUNNEL.type:
case WIDGET_TYPE.CHART_FUNNEL:
module = <FunnelChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_3D_BAR.type:
case WIDGET_TYPE.CHART_3D_BAR:
module = <Bar3DChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_3D_LINE.type:
case WIDGET_TYPE.CHART_3D_LINE:
module = <Line3DChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_3D_SCATTER.type:
case WIDGET_TYPE.CHART_3D_SCATTER:
module = <Scatter3DChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_3D_BUBBLE.type:
case WIDGET_TYPE.CHART_3D_BUBBLE:
module = <Bubble3DChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_WATERFALL_BAR.type:
case WIDGET_TYPE.CHART_WATERFALL_BAR:
module = <WaterfallChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_WATERFALL_COLUMN.type:
case WIDGET_TYPE.CHART_WATERFALL_COLUMN:
module = <WaterfallChartSetting {...chartSettingProps} axis="y" />;
break;
case WIDGET_TYPE.CHART_POLAR_BAR.type:
case WIDGET_TYPE.CHART_POLAR_BAR:
module = <PolarBarChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.CHART_POLAR_STACKED_BAR.type:
case WIDGET_TYPE.CHART_POLAR_STACKED_BAR:
module = <PolarBarChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.MIXED_CHART_LINE_PIE.type:
case WIDGET_TYPE.MIXED_CHART_LINE_PIE:
module = <MixedLinePieChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.MIXED_CHART_AREA_PIE.type:
case WIDGET_TYPE.MIXED_CHART_AREA_PIE:
module = <MixedLinePieChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.MIXED_CHART_BAR_PIE.type:
case WIDGET_TYPE.MIXED_CHART_BAR_PIE:
module = <MixedLinePieChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.MIXED_CHART_COLUMN_PIE.type:
case WIDGET_TYPE.MIXED_CHART_COLUMN_PIE:
module = <MixedLinePieChartSetting {...chartSettingProps} axis="y" />;
break;
case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_PIE.type:
case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_PIE:
module = <MixedLinePieChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_PIE.type:
case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_PIE:
module = <MixedLinePieChartSetting {...chartSettingProps} axis="y" />;
break;
case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_PIE.type:
case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_PIE:
module = <MixedLinePieChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_PIE.type:
case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_PIE:
module = <MixedLinePieChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.MIXED_CHART_DONUT_PIE.type:
case WIDGET_TYPE.MIXED_CHART_DONUT_PIE:
module = <MixedDonutPieChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_PIE.type:
case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_PIE:
module = <MixedDonutPieChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.MIXED_CHART_LINE_STACKED_BAR.type:
case WIDGET_TYPE.MIXED_CHART_LINE_STACKED_BAR:
module = <MixedLineStackedBarChartSetting {...chartSettingProps} />;
break;
case WIDGET_TYPE.MIXED_CHART_LINE_BOARD_NUMERIC.type:
case WIDGET_TYPE.MIXED_CHART_LINE_BOARD_NUMERIC:
module = (
<React.Fragment>
<NumericBoardSetting
@@ -211,7 +211,7 @@ const WidgetSetting = props => {
</React.Fragment>
);
break;
case WIDGET_TYPE.MIXED_CHART_AREA_BOARD_NUMERIC.type:
case WIDGET_TYPE.MIXED_CHART_AREA_BOARD_NUMERIC:
module = (
<React.Fragment>
<NumericBoardSetting {...chartSettingProps} />
@@ -220,7 +220,7 @@ const WidgetSetting = props => {
</React.Fragment>
);
break;
case WIDGET_TYPE.MIXED_CHART_BAR_BOARD_NUMERIC.type:
case WIDGET_TYPE.MIXED_CHART_BAR_BOARD_NUMERIC:
module = (
<React.Fragment>
<NumericBoardSetting {...chartSettingProps} />
@@ -229,7 +229,7 @@ const WidgetSetting = props => {
</React.Fragment>
);
break;
case WIDGET_TYPE.MIXED_CHART_COLUMN_BOARD_NUMERIC.type:
case WIDGET_TYPE.MIXED_CHART_COLUMN_BOARD_NUMERIC:
module = (
<React.Fragment>
<NumericBoardSetting {...chartSettingProps} />
@@ -238,7 +238,7 @@ const WidgetSetting = props => {
</React.Fragment>
);
break;
case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_BOARD_NUMERIC.type:
case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_BOARD_NUMERIC:
module = (
<React.Fragment>
<NumericBoardSetting {...chartSettingProps} />
@@ -247,7 +247,7 @@ const WidgetSetting = props => {
</React.Fragment>
);
break;
case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_BOARD_NUMERIC.type:
case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_BOARD_NUMERIC:
module = (
<React.Fragment>
<NumericBoardSetting {...chartSettingProps} />
@@ -256,7 +256,7 @@ const WidgetSetting = props => {
</React.Fragment>
);
break;
case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_BOARD_NUMERIC.type:
case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_BOARD_NUMERIC:
module = (
<React.Fragment>
<NumericBoardSetting {...chartSettingProps} />
@@ -265,7 +265,7 @@ const WidgetSetting = props => {
</React.Fragment>
);
break;
case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_BOARD_NUMERIC.type:
case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_BOARD_NUMERIC:
module = (
<React.Fragment>
<NumericBoardSetting {...chartSettingProps} />
@@ -274,7 +274,7 @@ const WidgetSetting = props => {
</React.Fragment>
);
break;
case WIDGET_TYPE.MIXED_CHART_DONUT_BOARD_NUMERIC.type:
case WIDGET_TYPE.MIXED_CHART_DONUT_BOARD_NUMERIC:
module = (
<React.Fragment>
<NumericBoardSetting {...chartSettingProps} />
@@ -283,7 +283,7 @@ const WidgetSetting = props => {
</React.Fragment>
);
break;
case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_BOARD_NUMERIC.type:
case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_BOARD_NUMERIC:
module = (
<React.Fragment>
<NumericBoardSetting {...chartSettingProps} />

View File

@@ -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 = <NumericBoard {...chartProps} />;
break;
case WIDGET_TYPE.BOARD_TABLE.type:
case WIDGET_TYPE.BOARD_TABLE:
module = <TableBoard {...chartProps} />;
break;
case WIDGET_TYPE.CHART_LINE.type:
case WIDGET_TYPE.CHART_LINE:
module = <LineChart {...chartProps} />;
// testModule = testLineChart;
break;
case WIDGET_TYPE.CHART_STACKED_LINE.type:
case WIDGET_TYPE.CHART_STACKED_LINE:
module = <LineChart {...chartProps} seriesOp={{ stack: 'total' }} />;
break;
case WIDGET_TYPE.CHART_AREA.type:
case WIDGET_TYPE.CHART_AREA:
module = <LineChart {...chartProps} seriesOp={{ areaStyle: {} }} />;
break;
case WIDGET_TYPE.CHART_STACKED_AREA.type:
case WIDGET_TYPE.CHART_STACKED_AREA:
module = (
<LineChart
{...chartProps}
@@ -69,7 +69,7 @@ const WidgetViewer = props => {
/>
);
break;
case WIDGET_TYPE.CHART_BAR.type:
case WIDGET_TYPE.CHART_BAR:
module = (
<LineChart
{...chartProps}
@@ -82,10 +82,10 @@ const WidgetViewer = props => {
/>
);
break;
case WIDGET_TYPE.CHART_STACKED_BAR.type:
case WIDGET_TYPE.CHART_STACKED_BAR:
module = <LineChart {...chartProps} seriesOp={{ type: 'bar', stack: 'total' }} />;
break;
case WIDGET_TYPE.CHART_COLUMN.type:
case WIDGET_TYPE.CHART_COLUMN:
module = (
<LineChart
{...chartProps}
@@ -99,10 +99,10 @@ const WidgetViewer = props => {
/>
);
break;
case WIDGET_TYPE.CHART_STACKED_COLUMN.type:
case WIDGET_TYPE.CHART_STACKED_COLUMN:
module = <LineChart {...chartProps} axis="y" seriesOp={{ type: 'bar', stack: 'total' }} />;
break;
case WIDGET_TYPE.MIXED_CHART_LINE_BAR.type:
case WIDGET_TYPE.MIXED_CHART_LINE_BAR:
module = (
<LineChart
{...chartProps}
@@ -114,14 +114,14 @@ const WidgetViewer = props => {
/>
);
break;
case WIDGET_TYPE.CHART_PIE.type:
case WIDGET_TYPE.CHART_PIE:
module = <PieChart {...chartProps} />;
break;
case WIDGET_TYPE.CHART_DONUT.type:
case WIDGET_TYPE.CHART_DONUT:
module = <DonutChart {...chartProps} />;
break;
case WIDGET_TYPE.CHART_NIGHTINGALE.type:
case WIDGET_TYPE.CHART_NIGHTINGALE:
module = (
<DonutChart
{...chartProps}
@@ -132,22 +132,22 @@ const WidgetViewer = props => {
/>
);
break;
case WIDGET_TYPE.CHART_SCATTER.type:
case WIDGET_TYPE.CHART_SCATTER:
module = <ScatterChart {...chartProps} />;
break;
case WIDGET_TYPE.CHART_BUBBLE.type:
case WIDGET_TYPE.CHART_BUBBLE:
module = <BubbleChart {...chartProps} />;
break;
case WIDGET_TYPE.CHART_RADAR.type:
case WIDGET_TYPE.CHART_RADAR:
module = <RadarChart {...chartProps} />;
break;
case WIDGET_TYPE.CHART_TREEMAP.type:
case WIDGET_TYPE.CHART_TREEMAP:
module = <TreemapChart {...chartProps} />;
break;
case WIDGET_TYPE.CHART_HEATMAP.type:
case WIDGET_TYPE.CHART_HEATMAP:
module = <HeatmapChart {...chartProps} />;
break;
case WIDGET_TYPE.CHART_SUNBURST.type:
case WIDGET_TYPE.CHART_SUNBURST:
module = (
<TreemapChart
{...chartProps}
@@ -158,46 +158,46 @@ const WidgetViewer = props => {
/>
);
break;
case WIDGET_TYPE.CHART_GAUGE.type:
case WIDGET_TYPE.CHART_GAUGE:
module = <GaugeChart {...chartProps} />;
break;
case WIDGET_TYPE.CHART_CANDLESTICK.type:
case WIDGET_TYPE.CHART_CANDLESTICK:
module = <CandlestickChart {...chartProps} />;
break;
case WIDGET_TYPE.CHART_FUNNEL.type:
case WIDGET_TYPE.CHART_FUNNEL:
module = <FunnelChart {...chartProps} />;
break;
case WIDGET_TYPE.CHART_3D_BAR.type:
case WIDGET_TYPE.CHART_3D_BAR:
module = <Bar3DChart {...chartProps} />;
break;
case WIDGET_TYPE.CHART_3D_LINE.type:
case WIDGET_TYPE.CHART_3D_LINE:
module = <Line3DChart {...chartProps} />;
break;
case WIDGET_TYPE.CHART_3D_SCATTER.type:
case WIDGET_TYPE.CHART_3D_SCATTER:
module = <Scatter3DChart {...chartProps} />;
break;
case WIDGET_TYPE.CHART_3D_BUBBLE.type:
case WIDGET_TYPE.CHART_3D_BUBBLE:
module = <Bubble3dChart {...chartProps} />;
break;
case WIDGET_TYPE.CHART_WATERFALL_BAR.type:
case WIDGET_TYPE.CHART_WATERFALL_BAR:
module = <WaterfallBarChart {...chartProps} />;
break;
case WIDGET_TYPE.CHART_WATERFALL_COLUMN.type:
case WIDGET_TYPE.CHART_WATERFALL_COLUMN:
module = <WaterfallBarChart {...chartProps} axis="y" />;
break;
case WIDGET_TYPE.CHART_POLAR_BAR.type:
case WIDGET_TYPE.CHART_POLAR_BAR:
module = <PolarBarChart {...chartProps} />;
break;
case WIDGET_TYPE.CHART_POLAR_STACKED_BAR.type:
case WIDGET_TYPE.CHART_POLAR_STACKED_BAR:
module = <PolarBarChart {...chartProps} seriesOp={{ stack: 'stack' }} />;
break;
case WIDGET_TYPE.MIXED_CHART_LINE_PIE.type:
case WIDGET_TYPE.MIXED_CHART_LINE_PIE:
module = <MixedLinePieChart {...chartProps} />;
break;
case WIDGET_TYPE.MIXED_CHART_AREA_PIE.type:
case WIDGET_TYPE.MIXED_CHART_AREA_PIE:
module = <MixedLinePieChart {...chartProps} seriesOp={{ areaStyle: {} }} />;
break;
case WIDGET_TYPE.MIXED_CHART_BAR_PIE.type:
case WIDGET_TYPE.MIXED_CHART_BAR_PIE:
module = (
<MixedLinePieChart
{...chartProps}
@@ -210,7 +210,7 @@ const WidgetViewer = props => {
/>
);
break;
case WIDGET_TYPE.MIXED_CHART_COLUMN_PIE.type:
case WIDGET_TYPE.MIXED_CHART_COLUMN_PIE:
module = (
<MixedLinePieChart
{...chartProps}
@@ -224,16 +224,16 @@ const WidgetViewer = props => {
/>
);
break;
case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_PIE.type:
case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_PIE:
module = <MixedLinePieChart {...chartProps} seriesOp={{ type: 'bar', stack: 'total' }} />;
break;
case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_PIE.type:
case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_PIE:
module = <MixedLinePieChart {...chartProps} axis="y" seriesOp={{ type: 'bar', stack: 'total' }} />;
break;
case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_PIE.type:
case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_PIE:
module = <MixedLinePieChart {...chartProps} seriesOp={{ stack: 'total' }} />;
break;
case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_PIE.type:
case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_PIE:
module = (
<MixedLinePieChart
{...chartProps}
@@ -244,10 +244,10 @@ const WidgetViewer = props => {
/>
);
break;
case WIDGET_TYPE.MIXED_CHART_DONUT_PIE.type:
case WIDGET_TYPE.MIXED_CHART_DONUT_PIE:
module = <MixedDonutPieChart {...chartProps} />;
break;
case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_PIE.type:
case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_PIE:
module = (
<MixedDonutPieChart
{...chartProps}
@@ -258,10 +258,10 @@ const WidgetViewer = props => {
/>
);
break;
case WIDGET_TYPE.MIXED_CHART_LINE_STACKED_BAR.type:
case WIDGET_TYPE.MIXED_CHART_LINE_STACKED_BAR:
module = <MixedLineStackedBarChart {...chartProps} />;
break;
case WIDGET_TYPE.MIXED_CHART_LINE_BOARD_NUMERIC.type:
case WIDGET_TYPE.MIXED_CHART_LINE_BOARD_NUMERIC:
module = (
<React.Fragment>
<NumericBoard
@@ -275,7 +275,7 @@ const WidgetViewer = props => {
</React.Fragment>
);
break;
case WIDGET_TYPE.MIXED_CHART_AREA_BOARD_NUMERIC.type:
case WIDGET_TYPE.MIXED_CHART_AREA_BOARD_NUMERIC:
module = (
<React.Fragment>
<NumericBoard {...chartProps} />
@@ -283,7 +283,7 @@ const WidgetViewer = props => {
</React.Fragment>
);
break;
case WIDGET_TYPE.MIXED_CHART_BAR_BOARD_NUMERIC.type:
case WIDGET_TYPE.MIXED_CHART_BAR_BOARD_NUMERIC:
module = (
<React.Fragment>
<NumericBoard {...chartProps} />
@@ -299,7 +299,7 @@ const WidgetViewer = props => {
</React.Fragment>
);
break;
case WIDGET_TYPE.MIXED_CHART_COLUMN_BOARD_NUMERIC.type:
case WIDGET_TYPE.MIXED_CHART_COLUMN_BOARD_NUMERIC:
module = (
<React.Fragment>
<NumericBoard {...chartProps} />
@@ -316,7 +316,7 @@ const WidgetViewer = props => {
</React.Fragment>
);
break;
case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_BOARD_NUMERIC.type:
case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_BOARD_NUMERIC:
module = (
<React.Fragment>
<NumericBoard {...chartProps} />
@@ -324,7 +324,7 @@ const WidgetViewer = props => {
</React.Fragment>
);
break;
case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_BOARD_NUMERIC.type:
case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_BOARD_NUMERIC:
module = (
<React.Fragment>
<NumericBoard {...chartProps} />
@@ -338,7 +338,7 @@ const WidgetViewer = props => {
</React.Fragment>
);
break;
case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_BOARD_NUMERIC.type:
case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_BOARD_NUMERIC:
module = (
<React.Fragment>
<NumericBoard {...chartProps} />
@@ -346,7 +346,7 @@ const WidgetViewer = props => {
</React.Fragment>
);
break;
case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_BOARD_NUMERIC.type:
case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_BOARD_NUMERIC:
module = (
<React.Fragment>
<NumericBoard {...chartProps} />
@@ -354,7 +354,7 @@ const WidgetViewer = props => {
</React.Fragment>
);
break;
case WIDGET_TYPE.MIXED_CHART_DONUT_BOARD_NUMERIC.type:
case WIDGET_TYPE.MIXED_CHART_DONUT_BOARD_NUMERIC:
module = (
<React.Fragment>
<NumericBoard
@@ -373,7 +373,7 @@ const WidgetViewer = props => {
</React.Fragment>
);
break;
case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_BOARD_NUMERIC.type:
case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_BOARD_NUMERIC:
module = (
<React.Fragment>
<NumericBoard