diff --git a/src/app/modules/chart-module/routes/mapping/error.tsx b/src/app/modules/chart-module/routes/mapping/error.tsx new file mode 100644 index 000000000..5733af70f --- /dev/null +++ b/src/app/modules/chart-module/routes/mapping/error.tsx @@ -0,0 +1,418 @@ +import React from "react"; +import { styles as commonStyles } from "app/modules/chart-module/routes/common/styles"; + +import GeomapPlaceholder from "app/modules/chart-module/components/placeholder/geomapPlaceholder"; +import { ReactComponent as LinechartPlaceholderImage } from "app/modules/chart-module/assets/lineChartPlaceholder.svg"; +import { ReactComponent as BigNumberPlaceholderImage } from "app/modules/chart-module/assets/bigNumberPlaceholder.svg"; +import { ReactComponent as BarChartPlaceholderImage } from "app/modules/chart-module/assets/barChartPlaceholder.svg"; +import { ReactComponent as SankeyPlaceholderImage } from "app/modules/chart-module/assets/sankeyPlaceholder.svg"; +import { ReactComponent as TreemapPlaceholderImage } from "app/modules/chart-module/assets/treemapPlaceholder.svg"; + +import { ReactComponent as SunburstPlaceholderImage } from "app/modules/chart-module/assets/sunburstPlaceholder.svg"; +import { ReactComponent as PieChartPlaceholderImage } from "app/modules/chart-module/assets/pieChartPlaceholder.svg"; +import { ReactComponent as CirclepackingPlaceholderImage } from "app/modules/chart-module/assets/circlepackingPlaceholder.svg"; +import { ReactComponent as ForcegraphPlaceholderImage } from "app/modules/chart-module/assets/forcegraphPlaceholder.svg"; +import { ReactComponent as CirculargraphPlaceholderImage } from "app/modules/chart-module/assets/circulargraphPlaceholder.svg"; +import { ReactComponent as RadarChartPlaceholderImage } from "app/modules/chart-module/assets/radarChartPlaceholder.svg"; +import { ReactComponent as ScatterChartPlaceholderImage } from "app/modules/chart-module/assets/scatterChartPlaceholder.svg"; +import { ReactComponent as GraphglPlaceholderImage } from "app/modules/chart-module/assets/graphglPlaceholder.svg"; +import { ReactComponent as HeatmapPlaceholderImage } from "app/modules/chart-module/assets/heatmapPlaceholder.svg"; +import { ReactComponent as AreatimeaxisPlaceholderImage } from "app/modules/chart-module/assets/areatimeaxisPlaceholder.svg"; +import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline"; + +import { useStoreState } from "app/state/store/hooks"; +import { CHART_DEFAULT_HEIGHT } from "../../data"; +export default function MappingErrorComponent(props: { + page: string; + chartError: boolean; + dataError: boolean; + chartErrorMessage: string; +}) { + const chartType = useStoreState((state) => state.charts.chartType.value); + + const chartPlaceholders = [ + { + id: "echartsBarchart", + placeholder: ( +
+ +
+ ), + }, + { + id: "echartsGeomap", + placeholder: , + }, + { + id: "echartsLinechart", + placeholder: ( +
+ +
+ ), + }, + { + id: "echartsSankey", + placeholder: ( +
+ +
+ ), + }, + { + id: "echartsTreemap", + placeholder: ( +
+ +
+ ), + }, + { + id: "bigNumber", + placeholder: ( +
+
+ +
+ ), + }, + { + id: "echartsSunburst", + placeholder: ( +
+ +
+ ), + }, + { + id: "echartsPiechart", + placeholder: ( +
+ +
+ ), + }, + { + id: "echartsCirclepacking", + placeholder: ( +
+ +
+ ), + }, + { + id: "echartsForcegraph", + placeholder: ( +
+ +
+ ), + }, + { + id: "echartsCirculargraph", + placeholder: ( +
+ +
+ ), + }, + + { + id: "echartsBubblechart", + placeholder: ( +
+ +
+ ), + }, + { + id: "echartsScatterchart", + placeholder: ( +
+ +
+ ), + }, + { + id: "echartsHeatmap", + placeholder: ( +
+ +
+ ), + }, + { + id: "echartsAreatimeaxis", + placeholder: ( +
+ +
+ ), + }, + { + id: "echartsGraphgl", + placeholder: ( +
+ +
+ ), + }, + { + id: "echartsRadarchart", + placeholder: ( +
+ +
+ ), + }, + { + id: "echartsAreastack", + placeholder: ( +
+ +
+ ), + }, + ]; + const getChartPlaceholder = () => { + const placeholder = chartPlaceholders.find( + (chartPlaceholder) => chartPlaceholder.id === chartType + ); + return placeholder?.placeholder; + }; + + return ( +
+
+
+ {getChartPlaceholder()} +
+
+
+ <> + +

+ Something went wrong rendering your chart!
Check your + mapping or pick different dimensions. +

+

"Error rendering dimensions"

+ + {/* {(props.chartError || props.dataError) && ( + )} */} +
+
{" "} +
+
+ ); +} diff --git a/src/app/modules/chart-module/routes/mapping/index.tsx b/src/app/modules/chart-module/routes/mapping/index.tsx index e1407c77e..6254ff1c6 100644 --- a/src/app/modules/chart-module/routes/mapping/index.tsx +++ b/src/app/modules/chart-module/routes/mapping/index.tsx @@ -16,10 +16,10 @@ import ChartPlaceholder from "app/modules/chart-module/components/placeholder"; import { ChartAPIModel, emptyChartAPI } from "app/modules/chart-module/data"; import { NotAuthorizedMessageModule } from "app/modules/common/not-authorized-message"; import { ReactComponent as AIIcon } from "app/modules/chart-module/assets/ai-icon.svg"; -import ErrorComponent from "app/modules/chart-module/components/dialog/errrorComponent"; import { useRecoilState } from "recoil"; import { chartFromReportAtom } from "app/state/recoil/atoms"; import { useParams } from "react-router-dom"; +import MappingErrorComponent from "app/modules/chart-module/routes/mapping/error"; function ChartBuilderMapping(props: Readonly) { useTitle("DX DataXplorer - Mapping"); @@ -27,6 +27,8 @@ function ChartBuilderMapping(props: Readonly) { const { page, view } = useParams<{ page: string; view?: string }>(); const mapping = useStoreState((state) => state.charts.mapping.value); + const chartType = useStoreState((state) => state.charts.chartType.value); + const [requiredFields, setRequiredFields] = React.useState< { id: string; name: string }[] >([]); @@ -79,7 +81,7 @@ function ChartBuilderMapping(props: Readonly) { if (props.dataError || props.chartError) { return ( <> -