Merge pull request #156 from sakang07/develop

Add icons at widget list page
This commit is contained in:
SA K
2022-10-26 21:15:37 +09:00
committed by GitHub
9 changed files with 341 additions and 215 deletions

View File

@@ -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"

View File

@@ -30,6 +30,7 @@ function PageTitleBox(props) {
height: 56,
paddingLeft: '24px',
paddingRight: '24px',
borderBottom: '1px solid #e3e7ea',
backgroundColor: '#f5f6f8',
}}
>

View File

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

View File

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

View File

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

View File

@@ -70,7 +70,6 @@ const Widget = () => {
>
</Button>
// <AddIconButton link="create" />
}
>
<BoardList postList={widgetList} handleDeleteSelect={removeWidget} />

View File

@@ -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);

View File

@@ -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} />

View File

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