From 2403efbc341f11a95b7706a6908814918a981699 Mon Sep 17 00:00:00 2001 From: okorie2 Date: Mon, 12 Aug 2024 09:27:51 +0100 Subject: [PATCH] chore: refactor code --- .../EmbedChartDialog/chartContainer.tsx | 2 - .../Dialogs/EmbedChartDialog/index.tsx | 5 - .../components/common-chart/index.tsx | 220 ++++++------------ src/app/modules/chart-module/data.ts | 3 +- src/app/modules/chart-module/index.tsx | 14 -- .../chart-module/routes/chart-type/data.tsx | 32 ++- .../chart-module/routes/chart-type/index.tsx | 3 +- .../chart-module/routes/customize/data.ts | 1 - .../chart-module/routes/customize/index.tsx | 1 - .../chart-module/routes/filters/data.ts | 1 - .../chart-module/routes/filters/index.tsx | 1 - .../chart-module/routes/mapping/data.tsx | 1 - .../chart-module/routes/mapping/index.tsx | 1 - .../chart-module/routes/preview-theme/data.ts | 1 - .../routes/preview-theme/index.tsx | 125 +++------- .../modules/embed-module/embedChart/index.tsx | 5 - .../components/chart-wrapper/index.tsx | 5 - .../api/action-reducers/sync/charts/index.tsx | 27 ++- 18 files changed, 145 insertions(+), 303 deletions(-) diff --git a/src/app/components/Dialogs/EmbedChartDialog/chartContainer.tsx b/src/app/components/Dialogs/EmbedChartDialog/chartContainer.tsx index 21ff8ee0c..80936b477 100644 --- a/src/app/components/Dialogs/EmbedChartDialog/chartContainer.tsx +++ b/src/app/components/Dialogs/EmbedChartDialog/chartContainer.tsx @@ -13,7 +13,6 @@ export default function ChartContainer(props: { visualOptions: any; withHeader?: boolean; renderedChart: string; - renderedChartSsr: boolean; renderedChartMappedData: any; setRawViz?: React.Dispatch; setVisualOptions: (value: any) => void; @@ -96,7 +95,6 @@ export default function ChartContainer(props: { containerRef={props.containerRef} renderedChart={props.renderedChart} visualOptions={props.visualOptions} - renderedChartSsr={props.renderedChartSsr} setVisualOptions={props.setVisualOptions} renderedChartType={props.renderedChartType} renderedChartMappedData={props.renderedChartMappedData} diff --git a/src/app/components/Dialogs/EmbedChartDialog/index.tsx b/src/app/components/Dialogs/EmbedChartDialog/index.tsx index a6d9481a1..b4e4ea4ec 100644 --- a/src/app/components/Dialogs/EmbedChartDialog/index.tsx +++ b/src/app/components/Dialogs/EmbedChartDialog/index.tsx @@ -71,10 +71,6 @@ export default function EmbedChartDialog(props: { return get(chartFromAPI, "mappedData", []); }, [chartFromAPI]); - const renderedChartSsr = React.useMemo(() => { - return get(chartFromAPI, "ssr", false); - }, [chartFromAPI]); - const renderedChartType = React.useMemo(() => { return get(chartFromAPI, "vizType", "echartsBarchart"); }, [chartFromAPI]); @@ -188,7 +184,6 @@ export default function EmbedChartDialog(props: { datasetDetails={datasetDetails} renderedChart={renderedChart} renderedChartMappedData={renderedChartMappedData} - renderedChartSsr={renderedChartSsr} renderedChartType={renderedChartType} setChartError={setNotFound} setNotFound={setNotFound} diff --git a/src/app/modules/chart-module/components/common-chart/index.tsx b/src/app/modules/chart-module/components/common-chart/index.tsx index b3d471fbd..1c850350a 100644 --- a/src/app/modules/chart-module/components/common-chart/index.tsx +++ b/src/app/modules/chart-module/components/common-chart/index.tsx @@ -33,7 +33,6 @@ interface Props { visualOptions: any; withHeader?: boolean; renderedChart: string; - renderedChartSsr: boolean; renderedChartMappedData: any; setRawViz?: React.Dispatch; setVisualOptions: (value: any) => void; @@ -79,6 +78,14 @@ export function CommonChart(props: Readonly) { .getElementById(`datasource-${props.chartId || "1"}`) ?.getBoundingClientRect().height; + let content; + let contentHeight; + if (!props.chartPreviewInReport && props.renderedChartType !== "bigNumber") { + contentHeight = props.visualOptions?.height - 28 + "px"; + } else { + contentHeight = "auto"; + } + React.useEffect(() => { if (token) { loadDataset({ @@ -107,34 +114,6 @@ export function CommonChart(props: Readonly) { } }, []); - // server side rendering - React.useEffect(() => { - if (props.renderedChartSsr && domRef && domRef.current) { - try { - while (domRef.current.firstChild) { - domRef.current.removeChild(domRef.current.firstChild); - } - } catch (e) {} - try { - const element = document.createElement("div"); - element.innerHTML = props.renderedChart.trim(); - const newRawViz = domRef.current.appendChild( - chartType === "bigNumber" - ? element.children[0].children[0].children[0] - : element.firstChild || element - ); - props.setRawViz && props.setRawViz(newRawViz); - } catch (e) { - while (domRef.current.firstChild) { - domRef.current.removeChild(domRef.current.firstChild); - } - if (process.env.NODE_ENV === "development") { - console.log("chart error", e); - } - } - } - }, [props.renderedChart]); - // client side rendering React.useEffect(() => { const visualOptions = props.containerRef.current @@ -147,13 +126,7 @@ export function CommonChart(props: Readonly) { : props.visualOptions.height, } : props.visualOptions; - if ( - !props.renderedChartSsr && - domRef && - domRef.current && - chartType && - props.containerRef.current - ) { + if (domRef && domRef.current && chartType && props.containerRef.current) { try { render( props.renderedChartMappedData, @@ -200,82 +173,34 @@ export function CommonChart(props: Readonly) { } } } - }, [ - chartType, - props.visualOptions, - props.renderedChartSsr, - props.renderedChartMappedData, - ]); - let content; - let contentHeight; - if (!props.chartPreviewInReport && props.renderedChartType !== "bigNumber") { - contentHeight = props.visualOptions?.height - 28 + "px"; - } else { - contentHeight = "auto"; - } + }, [chartType, props.visualOptions, props.renderedChartMappedData]); - if (props.renderedChartSsr) { - content = ( + content = ( +
-1 && - ` - > div { - width: 135px; - } - `} - ${chartType === "bigNumber" && - props.inChartWrapper && - ` - > div { - ::nth-child(1) { - font-size: 10px !important; - } - } - `} + width: auto !important; + height: calc(100% - ${dataSourcePHeight ?? 0}px); - * { - font-family: "GothamNarrow-Book", "Helvetica Neue", sans-serif !important; - } - `} - /> - ); - } else { - content = ( -
-
div:first-of-type { - ${props.renderedChartType === "bigNumber" && - props.inChartWrapper && - ` + > div:first-of-type { + ${props.renderedChartType === "bigNumber" && + props.inChartWrapper && + ` div:nth-child(1) { font-size: 12px !important; padding-bottom: 6px !important; @@ -309,58 +234,57 @@ export function CommonChart(props: Readonly) { } `} - > svg { - height: calc(100% - ${dataSourcePHeight ?? 0}px); + > svg { + height: calc(100% - ${dataSourcePHeight ?? 0}px); - > rect { - height: calc(100% - ${dataSourcePHeight ?? 0}px); - } + > rect { + height: calc(100% - ${dataSourcePHeight ?? 0}px); } } - `} - /> + } + `} + /> -

+ Source:{" "} + + {props.datasetDetails?.source ?? datasetDetails.source} - Data file:{" "} + {filename} + +

+ {chartType === "echartsGeomap" && props.visualOptions?.showLegend ? ( +
- Source:{" "} - - {props.datasetDetails?.source ?? datasetDetails.source} - Data file:{" "} - {filename} - -

- {chartType === "echartsGeomap" && props.visualOptions?.showLegend ? ( -
- -
- ) : null} -
- ); - } + +
+ ) : null} +
+ ); return ( <> diff --git a/src/app/modules/chart-module/data.ts b/src/app/modules/chart-module/data.ts index d2a9611ac..479475e85 100644 --- a/src/app/modules/chart-module/data.ts +++ b/src/app/modules/chart-module/data.ts @@ -24,6 +24,7 @@ import { // @ts-ignore } from "@rawgraphs/rawgraphs-charts"; import { FilterGroupModel } from "app/components/ToolBoxPanel/components/filters/data"; +import { IChartType } from "app/state/api/action-reducers/sync/charts"; export const charts = { echartsBarchart, @@ -350,7 +351,7 @@ export const defaultChartOptions = { export interface ChartAPIModel { id: string; name: string; - vizType: string | null; + vizType: IChartType | null; datasetId: string | null; mapping: any; vizOptions: any; diff --git a/src/app/modules/chart-module/index.tsx b/src/app/modules/chart-module/index.tsx index 5c5ad8cf9..f5bf720f1 100644 --- a/src/app/modules/chart-module/index.tsx +++ b/src/app/modules/chart-module/index.tsx @@ -387,15 +387,6 @@ export default function ChartModule() { return get(chartFromAPI, "mappedData", []); }, [chartFromAPI]); - const renderedChartSsr = React.useMemo(() => { - return get(chartFromAPI, "ssr", false); - }, [chartFromAPI]); - - const activeRenderedChartSsr = React.useMemo( - () => Boolean(renderedChartSsr), - [renderedChartSsr] - ); - function setVisualOptionsOnChange(chartType: string | null = null) { const options = { ...getOptionsConfig( @@ -589,7 +580,6 @@ export default function ChartModule() { renderedChart={content} visualOptions={visualOptions} setVisualOptions={setVisualOptions} - renderedChartSsr={activeRenderedChartSsr} renderedChartMappedData={renderedChartMappedData} renderedChartType={chartType as ChartType} setChartErrorMessage={setChartErrorMessage} @@ -609,7 +599,6 @@ export default function ChartModule() { visualOptions={visualOptions} containerRef={containerRef} setVisualOptions={setVisualOptions} - renderedChartSsr={activeRenderedChartSsr} renderedChartMappedData={renderedChartMappedData} renderedChartType={chartType as ChartType} setChartErrorMessage={setChartErrorMessage} @@ -628,7 +617,6 @@ export default function ChartModule() { dimensions={dimensions} renderedChart={content} containerRef={containerRef} - renderedChartSsr={activeRenderedChartSsr} renderedChartMappedData={renderedChartMappedData} renderedChartType={chartType as ChartType} setChartErrorMessage={setChartErrorMessage} @@ -675,7 +663,6 @@ export default function ChartModule() { visualOptions={visualOptions} renderedChart={renderedChart} setVisualOptions={setVisualOptions} - renderedChartSsr={renderedChartSsr} renderedChartMappedData={renderedChartMappedData} editable={!isPreviewMode || (page === "new" && !view)} setIsPreviewView={setIsPreviewView} @@ -695,7 +682,6 @@ export default function ChartModule() { visualOptions={visualOptions} renderedChart={renderedChart} setVisualOptions={setVisualOptions} - renderedChartSsr={renderedChartSsr} renderedChartMappedData={renderedChartMappedData} editable={!isPreviewMode} setIsPreviewView={setIsPreviewView} diff --git a/src/app/modules/chart-module/routes/chart-type/data.tsx b/src/app/modules/chart-module/routes/chart-type/data.tsx index d0fbabbbd..f38ac1d0e 100644 --- a/src/app/modules/chart-module/routes/chart-type/data.tsx +++ b/src/app/modules/chart-module/routes/chart-type/data.tsx @@ -72,6 +72,7 @@ import { ReactComponent as ScatterChartPreviewImg } from "app/modules/chart-modu import { ReactComponent as GraphGlPreviewImg } from "app/modules/chart-module/assets/graphglPreview.svg"; import { ReactComponent as AreatimeaxisPreviewImg } from "app/modules/chart-module/assets/areastackedPreview.svg"; import { ChartRenderedItem } from "app/modules/chart-module/data"; +import { IChartType } from "app/state/api/action-reducers/sync/charts"; export interface ChartBuilderChartTypeProps { loading: boolean; @@ -85,7 +86,7 @@ export interface ChartBuilderChartTypeProps { } export interface ChartTypeModel { - id: string; + id: IChartType; label: string; icon: React.ReactNode; categories: string[]; @@ -113,8 +114,18 @@ export const chartTypesFromMiddleWare = { areatimeaxis: "echartsAreatimeaxis", scatterchart: "echartsScatterchart", }; +interface IEchartTypes { + id: IChartType; + label: string; + icon: React.ReactNode; + preview: React.ReactNode; + categories: string[]; + class: string; + ssr: boolean; + description: string; +} -export const echartTypes = (big: boolean) => { +export const echartTypes = (big: boolean): IEchartTypes[] => { return [ { id: "echartsBarchart", @@ -345,23 +356,6 @@ export const echartTypes = (big: boolean) => { description: "Network graphs illustrate relationships between nodes in a network. Nodes are represented as points, and connections between nodes are depicted as lines", }, - - { - id: "placeholder9", - label: "", - icon: <>, - categories: [], - ssr: false, - description: "", - }, - { - id: "placeholder10", - label: "", - icon: <>, - categories: [], - ssr: false, - description: "", - }, ]; }; diff --git a/src/app/modules/chart-module/routes/chart-type/index.tsx b/src/app/modules/chart-module/routes/chart-type/index.tsx index 810e68b22..863df459d 100644 --- a/src/app/modules/chart-module/routes/chart-type/index.tsx +++ b/src/app/modules/chart-module/routes/chart-type/index.tsx @@ -23,6 +23,7 @@ import { import { charts } from "app/modules/chart-module/data"; import AILoader from "app/modules/chart-module/routes/chart-type/loader"; import { handleValidityCheckOfDimensionsToBeMapped } from "app/modules/chart-module/components/toolbox/steps/panels-content/Mapping"; +import { IChartType } from "app/state/api/action-reducers/sync/charts"; function ChartBuilderChartType(props: Readonly) { useTitle("DX Dataxplorer - Chart Type"); @@ -180,7 +181,7 @@ function ChartBuilderChartType(props: Readonly) { } const onChartTypeChange = - (chartTypeId: string) => (e: React.MouseEvent) => { + (chartTypeId: IChartType) => (e: React.MouseEvent) => { sessionStorage.setItem("visualOptions", JSON.stringify({})); props.setVisualOptionsOnChange( chartType === chartTypeId ? null : chartTypeId diff --git a/src/app/modules/chart-module/routes/customize/data.ts b/src/app/modules/chart-module/routes/customize/data.ts index 4cf2f7147..36f95a357 100644 --- a/src/app/modules/chart-module/routes/customize/data.ts +++ b/src/app/modules/chart-module/routes/customize/data.ts @@ -6,7 +6,6 @@ export interface ChartBuilderCustomizeProps { mappedData: any[]; visualOptions: any; renderedChart: string; - renderedChartSsr: boolean; renderedChartMappedData: any; setVisualOptions: (value: any) => void; setChartErrorMessage: React.Dispatch>; diff --git a/src/app/modules/chart-module/routes/customize/index.tsx b/src/app/modules/chart-module/routes/customize/index.tsx index 3d5327044..904693d6f 100644 --- a/src/app/modules/chart-module/routes/customize/index.tsx +++ b/src/app/modules/chart-module/routes/customize/index.tsx @@ -42,7 +42,6 @@ function ChartBuilderCustomize(props: Readonly) { renderedChart={props.renderedChart} visualOptions={props.visualOptions} setVisualOptions={props.setVisualOptions} - renderedChartSsr={props.renderedChartSsr} renderedChartMappedData={props.renderedChartMappedData} setChartErrorMessage={props.setChartErrorMessage} setChartError={props.setChartError} diff --git a/src/app/modules/chart-module/routes/filters/data.ts b/src/app/modules/chart-module/routes/filters/data.ts index ac8558336..1219944a4 100644 --- a/src/app/modules/chart-module/routes/filters/data.ts +++ b/src/app/modules/chart-module/routes/filters/data.ts @@ -5,7 +5,6 @@ export interface ChartBuilderFiltersProps { dimensions: any[]; visualOptions: any; renderedChart: string; - renderedChartSsr: boolean; renderedChartMappedData: any; setVisualOptions: (value: any) => void; setChartErrorMessage: React.Dispatch>; diff --git a/src/app/modules/chart-module/routes/filters/index.tsx b/src/app/modules/chart-module/routes/filters/index.tsx index 25aae325d..182919dad 100644 --- a/src/app/modules/chart-module/routes/filters/index.tsx +++ b/src/app/modules/chart-module/routes/filters/index.tsx @@ -42,7 +42,6 @@ function ChartBuilderFilters(props: Readonly) { renderedChart={props.renderedChart} visualOptions={props.visualOptions} setVisualOptions={props.setVisualOptions} - renderedChartSsr={props.renderedChartSsr} renderedChartMappedData={props.renderedChartMappedData} setChartErrorMessage={props.setChartErrorMessage} setChartError={props.setChartError} diff --git a/src/app/modules/chart-module/routes/mapping/data.tsx b/src/app/modules/chart-module/routes/mapping/data.tsx index 28f5d14f6..ad948a211 100644 --- a/src/app/modules/chart-module/routes/mapping/data.tsx +++ b/src/app/modules/chart-module/routes/mapping/data.tsx @@ -5,7 +5,6 @@ export interface ChartBuilderMappingProps { dimensions: any[]; visualOptions: any; renderedChart: string; - renderedChartSsr: boolean; renderedChartMappedData: any; setChartError: React.Dispatch>; setChartErrorMessage: React.Dispatch>; diff --git a/src/app/modules/chart-module/routes/mapping/index.tsx b/src/app/modules/chart-module/routes/mapping/index.tsx index 1af6fb9ab..f05b8a300 100644 --- a/src/app/modules/chart-module/routes/mapping/index.tsx +++ b/src/app/modules/chart-module/routes/mapping/index.tsx @@ -95,7 +95,6 @@ function ChartBuilderMapping(props: Readonly) { renderedChart={props.renderedChart} visualOptions={props.visualOptions} setVisualOptions={props.setVisualOptions} - renderedChartSsr={props.renderedChartSsr} renderedChartMappedData={props.renderedChartMappedData} setChartErrorMessage={props.setChartErrorMessage} setChartError={props.setChartError} diff --git a/src/app/modules/chart-module/routes/preview-theme/data.ts b/src/app/modules/chart-module/routes/preview-theme/data.ts index b77ed1f18..8756631b1 100644 --- a/src/app/modules/chart-module/routes/preview-theme/data.ts +++ b/src/app/modules/chart-module/routes/preview-theme/data.ts @@ -5,7 +5,6 @@ export interface ChartBuilderPreviewThemeProps { loading: boolean; visualOptions: any; renderedChart: string; - renderedChartSsr: boolean; renderedChartMappedData: any; setVisualOptions: (value: any) => void; setIsPreviewView: React.Dispatch>; diff --git a/src/app/modules/chart-module/routes/preview-theme/index.tsx b/src/app/modules/chart-module/routes/preview-theme/index.tsx index bb7a37011..ba10e7c9e 100644 --- a/src/app/modules/chart-module/routes/preview-theme/index.tsx +++ b/src/app/modules/chart-module/routes/preview-theme/index.tsx @@ -3,10 +3,10 @@ import React from "react"; import get from "lodash/get"; import isEmpty from "lodash/isEmpty"; import useTitle from "react-use/lib/useTitle"; -import { useStoreActions, useStoreState } from "app/state/store/hooks"; import { useHistory, useParams } from "react-router-dom"; -/* project */ import Skeleton from "@material-ui/lab/Skeleton"; +/* project */ +import { useStoreActions, useStoreState } from "app/state/store/hooks"; import { useDataThemesEchart } from "app/hooks/useDataThemesEchart"; import { styles as commonStyles } from "app/modules/chart-module/routes/common/styles"; import { ChartBuilderPreviewThemeProps } from "app/modules/chart-module/routes/preview-theme/data"; @@ -16,29 +16,20 @@ import GeomapLegend from "app/modules/chart-module/components/geomap-legend"; import ErrorComponent from "app/modules/chart-module/components/dialog/errrorComponent"; import { DatasetListItemAPIModel } from "app/modules/dataset-module/data"; import { getDatasetDetailsSource } from "app/modules/chart-module/util/getDatasetDetailsSource"; -import { ChartAPIModel } from "app/modules/chart-module/data"; export function ChartBuilderPreviewTheme(props: ChartBuilderPreviewThemeProps) { useTitle("DX Dataxplorer - Preview Chart"); + const { visualOptions } = props; const token = useStoreState((state) => state.AuthToken.value); - const domRef = React.useRef(null); - const { page } = useParams<{ page: string; view: string }>(); const dataset = useStoreState((state) => state.charts.dataset.value); const history = useHistory(); const { render } = useDataThemesEchart(); - - const { visualOptions } = props; - const mapping = useStoreState((state) => state.charts.mapping.value); const selectedChartType = useStoreState( (state) => state.charts.chartType.value ); - const editChartCrudData = useStoreState( - (state) => state.charts.ChartUpdate.crudData - ) as ChartAPIModel; - const loadDataset = useStoreActions( (actions) => actions.dataThemes.DatasetGet.fetch ); @@ -80,92 +71,52 @@ export function ChartBuilderPreviewTheme(props: ChartBuilderPreviewThemeProps) { !isEmpty(visualOptions) ) { const loader = document.getElementById("chart-placeholder"); - + if (loader) { + loader.style.display = "flex"; + } try { - new Promise((resolve, reject) => { - try { - if (loader) { - loader.style.display = "flex"; - } - if (props.renderedChartSsr) { - const element = document.createElement("div"); - element.innerHTML = props.renderedChart.trim(); - if (domRef.current?.firstChild) { - while (domRef.current.firstChild) { - domRef.current.removeChild(domRef.current.firstChild); - } - } - // @ts-ignore - domRef.current.appendChild( - selectedChartType === "bigNumber" - ? element.children[0].children[0].children[0] - : element.firstChild || element - ); - } else { - render( - props.renderedChartMappedData, - // @ts-ignore - domRef.current, - selectedChartType || "echartsBarchart", - visualOptions, - mapping, - "common-chart-render-container" - ); - } - resolve(1); - } catch (e) { - if (process.env.NODE_ENV === "development") { - console.log("chart error", e); - } - - if (loader) { - loader.style.display = "none"; - } - reject(0); - } - }) - .then(() => { - if (loader) { - loader.style.display = "none"; - } - }) - .catch(() => { - if (loader) { - loader.style.display = "none"; - } - }); - } catch (e) { if (loader) { loader.style.display = "none"; } - - while (domRef.current.firstChild) { - domRef.current.removeChild(domRef.current.firstChild); - } + render( + props.renderedChartMappedData, + // @ts-ignore + domRef.current, + selectedChartType ?? "echartsBarchart", + visualOptions, + mapping, + "common-chart-render-container" + ); + } catch (e) { if (process.env.NODE_ENV === "development") { console.log("chart error", e); } + + if (loader) { + loader.style.display = "none"; + } } } }, [ mapping, visualOptions, props.renderedChart, - props.renderedChartSsr, props.renderedChartMappedData, ]); - const handleVizClick = () => { - if (page === "new" || props.editable) { - history.push(`/chart/${page}/customize`); - } - }; React.useEffect(() => { props.setIsPreviewView(true); return () => { props.setIsPreviewView(false); }; }, []); + + const handleVizClick = () => { + if (page === "new" || props.editable) { + history.push(`/chart/${page}/customize`); + } + }; + if (props.dataError || props.chartError) { return ( <> @@ -179,12 +130,6 @@ export function ChartBuilderPreviewTheme(props: ChartBuilderPreviewThemeProps) { ); } - const isMappingValid = React.useMemo(() => { - return ( - editChartCrudData?.isMappingValid && props.loadedChart?.isMappingValid - ); - }, [props.loadedChart?.isMappingValid, editChartCrudData?.isMappingValid]); - return (
{!props.isMappingValid ? ( @@ -248,22 +193,16 @@ export function ChartBuilderPreviewTheme(props: ChartBuilderPreviewThemeProps) { onClick={handleVizClick} id="common-chart-render-container" css={` - ${props.renderedChartSsr - ? `overflow-x: auto;` - : `height: ${get(visualOptions, "height", 500)}px;`} + height: ${get(visualOptions, "height", 500)}px; ${selectedChartType === "bigNumber" && window.location.pathname.indexOf("/chart/") > -1 && ` - - - > div { - width: 135px; - } + > div { + width: 135px; + } `} - - - * { + * { font-family: "GothamNarrow-Book", "Helvetica Neue", sans-serif !important; } diff --git a/src/app/modules/embed-module/embedChart/index.tsx b/src/app/modules/embed-module/embedChart/index.tsx index e595a5147..04892ab70 100644 --- a/src/app/modules/embed-module/embedChart/index.tsx +++ b/src/app/modules/embed-module/embedChart/index.tsx @@ -56,10 +56,6 @@ export default function EmbedChartRoute() { return get(chartFromAPI, "mappedData", []); }, [chartFromAPI]); - const renderedChartSsr = React.useMemo(() => { - return get(chartFromAPI, "ssr", false); - }, [chartFromAPI]); - const renderedChartType = React.useMemo(() => { return get(chartFromAPI, "vizType", "echartsBarchart"); }, [chartFromAPI]); @@ -112,7 +108,6 @@ export default function EmbedChartRoute() { datasetDetails={datasetDetails} renderedChart={renderedChart} renderedChartMappedData={renderedChartMappedData} - renderedChartSsr={renderedChartSsr} renderedChartType={renderedChartType} setChartError={setNotFound} setNotFound={setNotFound} diff --git a/src/app/modules/report-module/components/chart-wrapper/index.tsx b/src/app/modules/report-module/components/chart-wrapper/index.tsx index 11197beb3..db3ef3d2e 100644 --- a/src/app/modules/report-module/components/chart-wrapper/index.tsx +++ b/src/app/modules/report-module/components/chart-wrapper/index.tsx @@ -66,10 +66,6 @@ export function ReportChartWrapper(props: Props) { return get(chartFromAPI, "mappedData", []); }, [chartFromAPI]); - const renderedChartSsr = React.useMemo(() => { - return get(chartFromAPI, "ssr", false); - }, [chartFromAPI]); - const renderedChartType = React.useMemo(() => { return get(chartFromAPI, "vizType", "echartsBarchart"); }, [chartFromAPI]); @@ -235,7 +231,6 @@ export function ReportChartWrapper(props: Props) { containerRef={containerRef} renderedChart={renderedChart} visualOptions={visualOptions} - renderedChartSsr={renderedChartSsr} setVisualOptions={setVisualOptions} renderedChartType={renderedChartType} renderedChartMappedData={renderedChartMappedData} diff --git a/src/app/state/api/action-reducers/sync/charts/index.tsx b/src/app/state/api/action-reducers/sync/charts/index.tsx index 8322a0ced..eff549713 100644 --- a/src/app/state/api/action-reducers/sync/charts/index.tsx +++ b/src/app/state/api/action-reducers/sync/charts/index.tsx @@ -118,14 +118,35 @@ export const ChartsMappingState: ChartsMappingStateModel = { }), }; +export type IChartType = + | "echartsBarchart" + | "echartsGeomap" + | "echartsLinechart" + | "echartsAreatimeaxis" + | "echartsAreastack" + | "echartsSankey" + | "echartsTreemap" + | "bigNumber" + | "echartsSunburst" + | "echartsForcegraph" + | "echartsCirculargraph" + | "echartsPiechart" + | "echartsBubblechart" + | "echartsMultisetBarchart" + | "echartsStackedBarchart" + | "echartsScatterchart" + | "echartsHeatmap" + | "echartsGraphgl" + | "echartsRadarchart" + | "echartsCirclepacking"; export interface ChartsChartTypeStateModel { - value: string | null; - setValue: Action; + value: IChartType | null; + setValue: Action; reset: Action; } export const ChartsChartTypeState: ChartsChartTypeStateModel = { value: null, - setValue: action((state, payload: string | null) => { + setValue: action((state, payload: IChartType | null) => { state.value = payload; }), reset: action((state) => {