Merge pull request #156 from sakang07/develop
Add icons at widget list page
This commit is contained in:
@@ -1,11 +1,10 @@
|
||||
import React from 'react';
|
||||
import { ListItem, ListItemButton, ListItemIcon, Stack } from '@mui/material';
|
||||
import { BarChart, BubbleChart, Dashboard, PieChart, ScatterPlot, StackedLineChart } from '@mui/icons-material';
|
||||
import { Avatar, Box, ListItem, ListItemIcon, Stack } from '@mui/material';
|
||||
import { Link as RouterLink, useLocation, useNavigate } from 'react-router-dom';
|
||||
import DonutChart from '@/widget/modules/piechart/DonutChart';
|
||||
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';
|
||||
|
||||
@@ -54,32 +53,11 @@ function BoardListItem(props) {
|
||||
color: '#333333',
|
||||
});
|
||||
|
||||
let iconType;
|
||||
switch (postItem.componentType) {
|
||||
case 'DASHBOARD':
|
||||
iconType = <Dashboard />;
|
||||
break;
|
||||
case 'CHART_LINE':
|
||||
iconType = <StackedLineChart />;
|
||||
break;
|
||||
case 'CHART_BAR':
|
||||
iconType = <BarChart />;
|
||||
break;
|
||||
case 'CHART_BUBBLE':
|
||||
iconType = <BubbleChart />;
|
||||
break;
|
||||
case 'CHART_SCATTER':
|
||||
iconType = <ScatterPlot />;
|
||||
break;
|
||||
case 'CHART_PIE':
|
||||
iconType = <PieChart />;
|
||||
break;
|
||||
case 'CHART_DONUT':
|
||||
iconType = <DonutChart />;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
const getIconType = type => {
|
||||
if (type) {
|
||||
return WIDGET_TYPE[type].icon;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ListItem
|
||||
@@ -95,7 +73,23 @@ function BoardListItem(props) {
|
||||
to={`${postItem.id}`}
|
||||
state={{ from: pathname }}
|
||||
>
|
||||
{postItem.type ? <ListItemIcon>{iconType}</ListItemIcon> : ''}
|
||||
{postItem.componentType ? (
|
||||
<ListItemIcon
|
||||
sx={{
|
||||
minWidth: '24px',
|
||||
ml: '20px',
|
||||
mr: '4px',
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
alt={postItem.componentType}
|
||||
src={`static/images/${getIconType(postItem.componentType)}`}
|
||||
sx={{ width: 'auto', height: '24px', borderRadius: 0, objectFit: 'contain', backgroundColor: 'transparent' }}
|
||||
/>
|
||||
</ListItemIcon>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
|
||||
@@ -30,6 +30,7 @@ function PageTitleBox(props) {
|
||||
height: 56,
|
||||
paddingLeft: '24px',
|
||||
paddingRight: '24px',
|
||||
borderBottom: '1px solid #e3e7ea',
|
||||
backgroundColor: '#f5f6f8',
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -1,56 +1,188 @@
|
||||
export const WIDGET_TYPE = {
|
||||
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',
|
||||
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',
|
||||
},
|
||||
};
|
||||
|
||||
export const WIDGET_AGGREGATION = {
|
||||
|
||||
@@ -11,13 +11,13 @@ import grid from '@/assets/images/grid.svg';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const WidgetAttributeSelect = props => {
|
||||
const { widgetOption, prevOption, saveWidgetInfo, dataset, isModifyMode = false } = props;
|
||||
|
||||
const alert = useAlert();
|
||||
const navigate = useNavigate();
|
||||
const { fixLayout } = useContext(LayoutContext);
|
||||
const { showLoading, hideLoading } = useContext(LoadingContext);
|
||||
|
||||
const { widgetOption, prevOption, saveWidgetInfo, dataset, isModifyMode = false } = props;
|
||||
|
||||
const [option, setOption] = useState(null);
|
||||
const [data, setData] = useState(null);
|
||||
const [spec, setSpec] = useState(null);
|
||||
@@ -93,7 +93,7 @@ const WidgetAttributeSelect = props => {
|
||||
width: '100%',
|
||||
height: 'calc(100vh - 195px)',
|
||||
overflow: 'hidden',
|
||||
borderTop: '1px solid #e3e7ea',
|
||||
borderBottom: '1px solid #e3e7ea',
|
||||
backgroundColor: '#f5f6f8',
|
||||
backgroundImage: `url(${grid})`,
|
||||
backgroundRepeat: 'repeat',
|
||||
|
||||
@@ -60,7 +60,7 @@ const WidgetCreate = () => {
|
||||
// Todo datasetType Table 일 경우 처리
|
||||
const param = {
|
||||
title: title,
|
||||
description: title,
|
||||
description: widgetOption.description,
|
||||
databaseId: dataset.databaseId,
|
||||
componentId: widgetOption.id,
|
||||
datasetType: dataset.datasetType,
|
||||
@@ -147,7 +147,7 @@ const WidgetCreate = () => {
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
borderTop: '1px solid #e3e7ea',
|
||||
borderBottom: '1px solid #e3e7ea',
|
||||
}}
|
||||
>
|
||||
<Stepper
|
||||
|
||||
@@ -70,7 +70,6 @@ const Widget = () => {
|
||||
>
|
||||
위젯 생성
|
||||
</Button>
|
||||
// <AddIconButton link="create" />
|
||||
}
|
||||
>
|
||||
<BoardList postList={widgetList} handleDeleteSelect={removeWidget} />
|
||||
|
||||
@@ -122,29 +122,29 @@ export const ChartComponent: FC<ChartProps> = ({ widgetType, option, dataSet })
|
||||
};
|
||||
|
||||
const ChartLookUpTable = {
|
||||
[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,
|
||||
[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,
|
||||
};
|
||||
|
||||
console.log(option);
|
||||
|
||||
@@ -70,133 +70,133 @@ const WidgetSetting = props => {
|
||||
};
|
||||
|
||||
switch (widgetType) {
|
||||
case WIDGET_TYPE.BOARD_NUMERIC:
|
||||
case WIDGET_TYPE.BOARD_NUMERIC.type:
|
||||
module = <NumericBoardSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.BOARD_TABLE:
|
||||
case WIDGET_TYPE.BOARD_TABLE.type:
|
||||
module = <TableBoardSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_LINE:
|
||||
case WIDGET_TYPE.CHART_LINE.type:
|
||||
module = <LineChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_STACKED_LINE:
|
||||
case WIDGET_TYPE.CHART_STACKED_LINE.type:
|
||||
module = <LineChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_AREA:
|
||||
case WIDGET_TYPE.CHART_AREA.type:
|
||||
module = <LineChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_STACKED_AREA:
|
||||
case WIDGET_TYPE.CHART_STACKED_AREA.type:
|
||||
module = <LineChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_BAR:
|
||||
case WIDGET_TYPE.CHART_BAR.type:
|
||||
module = <LineChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_STACKED_BAR:
|
||||
case WIDGET_TYPE.CHART_STACKED_BAR.type:
|
||||
module = <LineChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_COLUMN:
|
||||
case WIDGET_TYPE.CHART_COLUMN.type:
|
||||
module = <LineChartSetting {...chartSettingProps} axis="y" />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_STACKED_COLUMN:
|
||||
case WIDGET_TYPE.CHART_STACKED_COLUMN.type:
|
||||
module = <LineChartSetting {...chartSettingProps} axis="y" />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_LINE_BAR:
|
||||
case WIDGET_TYPE.MIXED_CHART_LINE_BAR.type:
|
||||
module = <MixedLineBarChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_PIE:
|
||||
case WIDGET_TYPE.CHART_PIE.type:
|
||||
module = <PieChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_DONUT:
|
||||
case WIDGET_TYPE.CHART_DONUT.type:
|
||||
module = <DonutChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_NIGHTINGALE:
|
||||
case WIDGET_TYPE.CHART_NIGHTINGALE.type:
|
||||
module = <DonutChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_SCATTER:
|
||||
case WIDGET_TYPE.CHART_SCATTER.type:
|
||||
module = <ScatterChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_BUBBLE:
|
||||
case WIDGET_TYPE.CHART_BUBBLE.type:
|
||||
module = <BubbleChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_RADAR:
|
||||
case WIDGET_TYPE.CHART_RADAR.type:
|
||||
module = <RadarChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_TREEMAP:
|
||||
case WIDGET_TYPE.CHART_TREEMAP.type:
|
||||
module = <TreemapChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_HEATMAP:
|
||||
case WIDGET_TYPE.CHART_HEATMAP.type:
|
||||
module = <HeatmapChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_SUNBURST:
|
||||
case WIDGET_TYPE.CHART_SUNBURST.type:
|
||||
module = <TreemapChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_GAUGE:
|
||||
case WIDGET_TYPE.CHART_GAUGE.type:
|
||||
module = <GaugeChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_CANDLESTICK:
|
||||
case WIDGET_TYPE.CHART_CANDLESTICK.type:
|
||||
module = <CandlestickChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_FUNNEL:
|
||||
case WIDGET_TYPE.CHART_FUNNEL.type:
|
||||
module = <FunnelChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_3D_BAR:
|
||||
case WIDGET_TYPE.CHART_3D_BAR.type:
|
||||
module = <Bar3DChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_3D_LINE:
|
||||
case WIDGET_TYPE.CHART_3D_LINE.type:
|
||||
module = <Line3DChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_3D_SCATTER:
|
||||
case WIDGET_TYPE.CHART_3D_SCATTER.type:
|
||||
module = <Scatter3DChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_3D_BUBBLE:
|
||||
case WIDGET_TYPE.CHART_3D_BUBBLE.type:
|
||||
module = <Bubble3DChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_WATERFALL_BAR:
|
||||
case WIDGET_TYPE.CHART_WATERFALL_BAR.type:
|
||||
module = <WaterfallChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_WATERFALL_COLUMN:
|
||||
case WIDGET_TYPE.CHART_WATERFALL_COLUMN.type:
|
||||
module = <WaterfallChartSetting {...chartSettingProps} axis="y" />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_POLAR_BAR:
|
||||
case WIDGET_TYPE.CHART_POLAR_BAR.type:
|
||||
module = <PolarBarChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_POLAR_STACKED_BAR:
|
||||
case WIDGET_TYPE.CHART_POLAR_STACKED_BAR.type:
|
||||
module = <PolarBarChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_LINE_PIE:
|
||||
case WIDGET_TYPE.MIXED_CHART_LINE_PIE.type:
|
||||
module = <MixedLinePieChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_AREA_PIE:
|
||||
case WIDGET_TYPE.MIXED_CHART_AREA_PIE.type:
|
||||
module = <MixedLinePieChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_BAR_PIE:
|
||||
case WIDGET_TYPE.MIXED_CHART_BAR_PIE.type:
|
||||
module = <MixedLinePieChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_COLUMN_PIE:
|
||||
case WIDGET_TYPE.MIXED_CHART_COLUMN_PIE.type:
|
||||
module = <MixedLinePieChartSetting {...chartSettingProps} axis="y" />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_PIE:
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_PIE.type:
|
||||
module = <MixedLinePieChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_PIE:
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_PIE.type:
|
||||
module = <MixedLinePieChartSetting {...chartSettingProps} axis="y" />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_PIE:
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_PIE.type:
|
||||
module = <MixedLinePieChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_PIE:
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_PIE.type:
|
||||
module = <MixedLinePieChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_DONUT_PIE:
|
||||
case WIDGET_TYPE.MIXED_CHART_DONUT_PIE.type:
|
||||
module = <MixedDonutPieChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_PIE:
|
||||
case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_PIE.type:
|
||||
module = <MixedDonutPieChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_LINE_STACKED_BAR:
|
||||
case WIDGET_TYPE.MIXED_CHART_LINE_STACKED_BAR.type:
|
||||
module = <MixedLineStackedBarChartSetting {...chartSettingProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_LINE_BOARD_NUMERIC:
|
||||
case WIDGET_TYPE.MIXED_CHART_LINE_BOARD_NUMERIC.type:
|
||||
module = (
|
||||
<React.Fragment>
|
||||
<NumericBoardSetting
|
||||
@@ -211,7 +211,7 @@ const WidgetSetting = props => {
|
||||
</React.Fragment>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_AREA_BOARD_NUMERIC:
|
||||
case WIDGET_TYPE.MIXED_CHART_AREA_BOARD_NUMERIC.type:
|
||||
module = (
|
||||
<React.Fragment>
|
||||
<NumericBoardSetting {...chartSettingProps} />
|
||||
@@ -220,7 +220,7 @@ const WidgetSetting = props => {
|
||||
</React.Fragment>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_BAR_BOARD_NUMERIC:
|
||||
case WIDGET_TYPE.MIXED_CHART_BAR_BOARD_NUMERIC.type:
|
||||
module = (
|
||||
<React.Fragment>
|
||||
<NumericBoardSetting {...chartSettingProps} />
|
||||
@@ -229,7 +229,7 @@ const WidgetSetting = props => {
|
||||
</React.Fragment>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_COLUMN_BOARD_NUMERIC:
|
||||
case WIDGET_TYPE.MIXED_CHART_COLUMN_BOARD_NUMERIC.type:
|
||||
module = (
|
||||
<React.Fragment>
|
||||
<NumericBoardSetting {...chartSettingProps} />
|
||||
@@ -238,7 +238,7 @@ const WidgetSetting = props => {
|
||||
</React.Fragment>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_BOARD_NUMERIC:
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_BOARD_NUMERIC.type:
|
||||
module = (
|
||||
<React.Fragment>
|
||||
<NumericBoardSetting {...chartSettingProps} />
|
||||
@@ -247,7 +247,7 @@ const WidgetSetting = props => {
|
||||
</React.Fragment>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_BOARD_NUMERIC:
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_BOARD_NUMERIC.type:
|
||||
module = (
|
||||
<React.Fragment>
|
||||
<NumericBoardSetting {...chartSettingProps} />
|
||||
@@ -256,7 +256,7 @@ const WidgetSetting = props => {
|
||||
</React.Fragment>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_BOARD_NUMERIC:
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_BOARD_NUMERIC.type:
|
||||
module = (
|
||||
<React.Fragment>
|
||||
<NumericBoardSetting {...chartSettingProps} />
|
||||
@@ -265,7 +265,7 @@ const WidgetSetting = props => {
|
||||
</React.Fragment>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_BOARD_NUMERIC:
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_BOARD_NUMERIC.type:
|
||||
module = (
|
||||
<React.Fragment>
|
||||
<NumericBoardSetting {...chartSettingProps} />
|
||||
@@ -274,7 +274,7 @@ const WidgetSetting = props => {
|
||||
</React.Fragment>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_DONUT_BOARD_NUMERIC:
|
||||
case WIDGET_TYPE.MIXED_CHART_DONUT_BOARD_NUMERIC.type:
|
||||
module = (
|
||||
<React.Fragment>
|
||||
<NumericBoardSetting {...chartSettingProps} />
|
||||
@@ -283,7 +283,7 @@ const WidgetSetting = props => {
|
||||
</React.Fragment>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_BOARD_NUMERIC:
|
||||
case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_BOARD_NUMERIC.type:
|
||||
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:
|
||||
case WIDGET_TYPE.BOARD_NUMERIC.type:
|
||||
module = <NumericBoard {...chartProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.BOARD_TABLE:
|
||||
case WIDGET_TYPE.BOARD_TABLE.type:
|
||||
module = <TableBoard {...chartProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_LINE:
|
||||
case WIDGET_TYPE.CHART_LINE.type:
|
||||
module = <LineChart {...chartProps} />;
|
||||
// testModule = testLineChart;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_STACKED_LINE:
|
||||
case WIDGET_TYPE.CHART_STACKED_LINE.type:
|
||||
module = <LineChart {...chartProps} seriesOp={{ stack: 'total' }} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_AREA:
|
||||
case WIDGET_TYPE.CHART_AREA.type:
|
||||
module = <LineChart {...chartProps} seriesOp={{ areaStyle: {} }} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_STACKED_AREA:
|
||||
case WIDGET_TYPE.CHART_STACKED_AREA.type:
|
||||
module = (
|
||||
<LineChart
|
||||
{...chartProps}
|
||||
@@ -69,7 +69,7 @@ const WidgetViewer = props => {
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_BAR:
|
||||
case WIDGET_TYPE.CHART_BAR.type:
|
||||
module = (
|
||||
<LineChart
|
||||
{...chartProps}
|
||||
@@ -82,10 +82,10 @@ const WidgetViewer = props => {
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_STACKED_BAR:
|
||||
case WIDGET_TYPE.CHART_STACKED_BAR.type:
|
||||
module = <LineChart {...chartProps} seriesOp={{ type: 'bar', stack: 'total' }} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_COLUMN:
|
||||
case WIDGET_TYPE.CHART_COLUMN.type:
|
||||
module = (
|
||||
<LineChart
|
||||
{...chartProps}
|
||||
@@ -99,10 +99,10 @@ const WidgetViewer = props => {
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_STACKED_COLUMN:
|
||||
case WIDGET_TYPE.CHART_STACKED_COLUMN.type:
|
||||
module = <LineChart {...chartProps} axis="y" seriesOp={{ type: 'bar', stack: 'total' }} />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_LINE_BAR:
|
||||
case WIDGET_TYPE.MIXED_CHART_LINE_BAR.type:
|
||||
module = (
|
||||
<LineChart
|
||||
{...chartProps}
|
||||
@@ -114,14 +114,14 @@ const WidgetViewer = props => {
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_PIE:
|
||||
case WIDGET_TYPE.CHART_PIE.type:
|
||||
module = <PieChart {...chartProps} />;
|
||||
break;
|
||||
|
||||
case WIDGET_TYPE.CHART_DONUT:
|
||||
case WIDGET_TYPE.CHART_DONUT.type:
|
||||
module = <DonutChart {...chartProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_NIGHTINGALE:
|
||||
case WIDGET_TYPE.CHART_NIGHTINGALE.type:
|
||||
module = (
|
||||
<DonutChart
|
||||
{...chartProps}
|
||||
@@ -132,22 +132,22 @@ const WidgetViewer = props => {
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_SCATTER:
|
||||
case WIDGET_TYPE.CHART_SCATTER.type:
|
||||
module = <ScatterChart {...chartProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_BUBBLE:
|
||||
case WIDGET_TYPE.CHART_BUBBLE.type:
|
||||
module = <BubbleChart {...chartProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_RADAR:
|
||||
case WIDGET_TYPE.CHART_RADAR.type:
|
||||
module = <RadarChart {...chartProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_TREEMAP:
|
||||
case WIDGET_TYPE.CHART_TREEMAP.type:
|
||||
module = <TreemapChart {...chartProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_HEATMAP:
|
||||
case WIDGET_TYPE.CHART_HEATMAP.type:
|
||||
module = <HeatmapChart {...chartProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_SUNBURST:
|
||||
case WIDGET_TYPE.CHART_SUNBURST.type:
|
||||
module = (
|
||||
<TreemapChart
|
||||
{...chartProps}
|
||||
@@ -158,46 +158,46 @@ const WidgetViewer = props => {
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_GAUGE:
|
||||
case WIDGET_TYPE.CHART_GAUGE.type:
|
||||
module = <GaugeChart {...chartProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_CANDLESTICK:
|
||||
case WIDGET_TYPE.CHART_CANDLESTICK.type:
|
||||
module = <CandlestickChart {...chartProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_FUNNEL:
|
||||
case WIDGET_TYPE.CHART_FUNNEL.type:
|
||||
module = <FunnelChart {...chartProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_3D_BAR:
|
||||
case WIDGET_TYPE.CHART_3D_BAR.type:
|
||||
module = <Bar3DChart {...chartProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_3D_LINE:
|
||||
case WIDGET_TYPE.CHART_3D_LINE.type:
|
||||
module = <Line3DChart {...chartProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_3D_SCATTER:
|
||||
case WIDGET_TYPE.CHART_3D_SCATTER.type:
|
||||
module = <Scatter3DChart {...chartProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_3D_BUBBLE:
|
||||
case WIDGET_TYPE.CHART_3D_BUBBLE.type:
|
||||
module = <Bubble3dChart {...chartProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_WATERFALL_BAR:
|
||||
case WIDGET_TYPE.CHART_WATERFALL_BAR.type:
|
||||
module = <WaterfallBarChart {...chartProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_WATERFALL_COLUMN:
|
||||
case WIDGET_TYPE.CHART_WATERFALL_COLUMN.type:
|
||||
module = <WaterfallBarChart {...chartProps} axis="y" />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_POLAR_BAR:
|
||||
case WIDGET_TYPE.CHART_POLAR_BAR.type:
|
||||
module = <PolarBarChart {...chartProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.CHART_POLAR_STACKED_BAR:
|
||||
case WIDGET_TYPE.CHART_POLAR_STACKED_BAR.type:
|
||||
module = <PolarBarChart {...chartProps} seriesOp={{ stack: 'stack' }} />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_LINE_PIE:
|
||||
case WIDGET_TYPE.MIXED_CHART_LINE_PIE.type:
|
||||
module = <MixedLinePieChart {...chartProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_AREA_PIE:
|
||||
case WIDGET_TYPE.MIXED_CHART_AREA_PIE.type:
|
||||
module = <MixedLinePieChart {...chartProps} seriesOp={{ areaStyle: {} }} />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_BAR_PIE:
|
||||
case WIDGET_TYPE.MIXED_CHART_BAR_PIE.type:
|
||||
module = (
|
||||
<MixedLinePieChart
|
||||
{...chartProps}
|
||||
@@ -210,7 +210,7 @@ const WidgetViewer = props => {
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_COLUMN_PIE:
|
||||
case WIDGET_TYPE.MIXED_CHART_COLUMN_PIE.type:
|
||||
module = (
|
||||
<MixedLinePieChart
|
||||
{...chartProps}
|
||||
@@ -224,16 +224,16 @@ const WidgetViewer = props => {
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_PIE:
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_PIE.type:
|
||||
module = <MixedLinePieChart {...chartProps} seriesOp={{ type: 'bar', stack: 'total' }} />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_PIE:
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_PIE.type:
|
||||
module = <MixedLinePieChart {...chartProps} axis="y" seriesOp={{ type: 'bar', stack: 'total' }} />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_PIE:
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_PIE.type:
|
||||
module = <MixedLinePieChart {...chartProps} seriesOp={{ stack: 'total' }} />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_PIE:
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_PIE.type:
|
||||
module = (
|
||||
<MixedLinePieChart
|
||||
{...chartProps}
|
||||
@@ -244,10 +244,10 @@ const WidgetViewer = props => {
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_DONUT_PIE:
|
||||
case WIDGET_TYPE.MIXED_CHART_DONUT_PIE.type:
|
||||
module = <MixedDonutPieChart {...chartProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_PIE:
|
||||
case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_PIE.type:
|
||||
module = (
|
||||
<MixedDonutPieChart
|
||||
{...chartProps}
|
||||
@@ -258,10 +258,10 @@ const WidgetViewer = props => {
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_LINE_STACKED_BAR:
|
||||
case WIDGET_TYPE.MIXED_CHART_LINE_STACKED_BAR.type:
|
||||
module = <MixedLineStackedBarChart {...chartProps} />;
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_LINE_BOARD_NUMERIC:
|
||||
case WIDGET_TYPE.MIXED_CHART_LINE_BOARD_NUMERIC.type:
|
||||
module = (
|
||||
<React.Fragment>
|
||||
<NumericBoard
|
||||
@@ -275,7 +275,7 @@ const WidgetViewer = props => {
|
||||
</React.Fragment>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_AREA_BOARD_NUMERIC:
|
||||
case WIDGET_TYPE.MIXED_CHART_AREA_BOARD_NUMERIC.type:
|
||||
module = (
|
||||
<React.Fragment>
|
||||
<NumericBoard {...chartProps} />
|
||||
@@ -283,7 +283,7 @@ const WidgetViewer = props => {
|
||||
</React.Fragment>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_BAR_BOARD_NUMERIC:
|
||||
case WIDGET_TYPE.MIXED_CHART_BAR_BOARD_NUMERIC.type:
|
||||
module = (
|
||||
<React.Fragment>
|
||||
<NumericBoard {...chartProps} />
|
||||
@@ -299,7 +299,7 @@ const WidgetViewer = props => {
|
||||
</React.Fragment>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_COLUMN_BOARD_NUMERIC:
|
||||
case WIDGET_TYPE.MIXED_CHART_COLUMN_BOARD_NUMERIC.type:
|
||||
module = (
|
||||
<React.Fragment>
|
||||
<NumericBoard {...chartProps} />
|
||||
@@ -316,7 +316,7 @@ const WidgetViewer = props => {
|
||||
</React.Fragment>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_BOARD_NUMERIC:
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_LINE_BOARD_NUMERIC.type:
|
||||
module = (
|
||||
<React.Fragment>
|
||||
<NumericBoard {...chartProps} />
|
||||
@@ -324,7 +324,7 @@ const WidgetViewer = props => {
|
||||
</React.Fragment>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_BOARD_NUMERIC:
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_AREA_BOARD_NUMERIC.type:
|
||||
module = (
|
||||
<React.Fragment>
|
||||
<NumericBoard {...chartProps} />
|
||||
@@ -338,7 +338,7 @@ const WidgetViewer = props => {
|
||||
</React.Fragment>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_BOARD_NUMERIC:
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_BAR_BOARD_NUMERIC.type:
|
||||
module = (
|
||||
<React.Fragment>
|
||||
<NumericBoard {...chartProps} />
|
||||
@@ -346,7 +346,7 @@ const WidgetViewer = props => {
|
||||
</React.Fragment>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_BOARD_NUMERIC:
|
||||
case WIDGET_TYPE.MIXED_CHART_STACKED_COLUMN_BOARD_NUMERIC.type:
|
||||
module = (
|
||||
<React.Fragment>
|
||||
<NumericBoard {...chartProps} />
|
||||
@@ -354,7 +354,7 @@ const WidgetViewer = props => {
|
||||
</React.Fragment>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_DONUT_BOARD_NUMERIC:
|
||||
case WIDGET_TYPE.MIXED_CHART_DONUT_BOARD_NUMERIC.type:
|
||||
module = (
|
||||
<React.Fragment>
|
||||
<NumericBoard
|
||||
@@ -373,7 +373,7 @@ const WidgetViewer = props => {
|
||||
</React.Fragment>
|
||||
);
|
||||
break;
|
||||
case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_BOARD_NUMERIC:
|
||||
case WIDGET_TYPE.MIXED_CHART_NIGHTINGALE_BOARD_NUMERIC.type:
|
||||
module = (
|
||||
<React.Fragment>
|
||||
<NumericBoard
|
||||
|
||||
Reference in New Issue
Block a user