[FE-Widget] Add an icon to the widget list page: step 1 #168
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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 = {
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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 = () => {
|
||||
<PageTitleBox upperTitle="위젯" title="위젯 조회" sx={{ width: '100%', marginTop: '22px' }}>
|
||||
<DashboardTitleBox
|
||||
title={
|
||||
<Typography
|
||||
variant="subtitle1"
|
||||
component="span"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
paddingLeft: '18px',
|
||||
height: '16px',
|
||||
fontFamily: 'Pretendard',
|
||||
fontSize: '18px',
|
||||
fontStretch: 'normal',
|
||||
fontStyle: 'normal',
|
||||
lineHeight: 0.89,
|
||||
letterSpacing: '-0.18px',
|
||||
textAlign: 'left',
|
||||
color: '#141414',
|
||||
}}
|
||||
>
|
||||
{widgetOption.title}
|
||||
</Typography>
|
||||
<Stack>
|
||||
<Typography
|
||||
variant="subtitle1"
|
||||
component="span"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
paddingLeft: '18px',
|
||||
height: '16px',
|
||||
fontSize: '18px',
|
||||
fontStretch: 'normal',
|
||||
fontStyle: 'normal',
|
||||
lineHeight: 0.89,
|
||||
letterSpacing: '-0.18px',
|
||||
textAlign: 'left',
|
||||
color: '#141414',
|
||||
}}
|
||||
>
|
||||
{widgetOption.title}
|
||||
</Typography>
|
||||
</Stack>
|
||||
}
|
||||
button={
|
||||
<Stack direction="row" alignItems="center" sx={{ marginRight: '20px' }}>
|
||||
|
||||
@@ -17,6 +17,7 @@ const Widget = () => {
|
||||
const { showLoading, hideLoading } = useContext(LoadingContext);
|
||||
|
||||
const [widgetList, setWidgetList] = useState([]);
|
||||
console.log('widgetList', widgetList);
|
||||
|
||||
useEffect(() => {
|
||||
getWidgetList();
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user