Merge pull request #217 from zimmerman-team/chore/DX-1781

chore: refactor code
zimmerman-team · Aug 27, 2024 · eb2ad94 · eb2ad94
2 parents db32d54 + 2403efb
commit eb2ad94
Show file tree

Hide file tree

Showing 18 changed files with 145 additions and 303 deletions.
diff --git 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<any>;
   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
@@ -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
@@ -33,7 +33,6 @@ interface Props {
   visualOptions: any;
   withHeader?: boolean;
   renderedChart: string;
-  renderedChartSsr: boolean;
   renderedChartMappedData: any;
   setRawViz?: React.Dispatch<any>;
   setVisualOptions: (value: any) => void;
@@ -79,6 +78,14 @@ export function CommonChart(props: Readonly<Props>) {
     .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<Props>) {
     }
   }, []);
 
-  // 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>) {
             : 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<Props>) {
         }
       }
     }
-  }, [
-    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 = (
+    <div
+      css={`
+        width: 100%;
+        overflow: hidden;
+        position: relative;
+        height: ${contentHeight};
+        * {
+          font-family: "GothamNarrow-Book", "Helvetica Neue", sans-serif !important;
+        }
+      `}
+    >
       <div
         ref={domRef}
         id={`common-chart-render-container-${props.chartId || "1"}-${
           props.chartPreviewInReport
         }`}
-        data-cy="common-chart-container-ssr"
+        data-cy="common-chart-container"
         css={`
-          overflow-x: auto;
-          margin-top: 40px;
-
-          ${chartType === "bigNumber" &&
-          window.location.pathname.indexOf("/chart/") > -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
-        css={`
-          width: 100%;
-          overflow: hidden;
-          position: relative;
-          height: ${contentHeight};
-          * {
-            font-family: "GothamNarrow-Book", "Helvetica Neue", sans-serif !important;
-          }
-        `}
-      >
-        <div
-          ref={domRef}
-          id={`common-chart-render-container-${props.chartId || "1"}-${
-            props.chartPreviewInReport
-          }`}
-          data-cy="common-chart-container"
-          css={`
-            width: auto !important;
-            height: calc(100% - ${dataSourcePHeight ?? 0}px);
-
-            > 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<Props>) {
               }
         `}
 
-              > 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);
               }
             }
-          `}
-        />
+          }
+        `}
+      />
 
-        <p
-          id={`datasource-${props.chartId || "1"}`}
-          css={`
-            color: #70777e;
+      <p
+        id={`datasource-${props.chartId || "1"}`}
+        css={`
+          color: #70777e;
+          font-family: "GothamNarrow-Bold", sans-serif;
+          font-size: 12px;
+          margin: 0;
+          display: ${props.hideChartSource ? "none" : "block"};
+          a {
             font-family: "GothamNarrow-Bold", sans-serif;
-            font-size: 12px;
-            margin: 0;
-            display: ${props.hideChartSource ? "none" : "block"};
-            a {
-              font-family: "GothamNarrow-Bold", sans-serif;
 
-              color: #70777e;
-              text-decoration: none;
-              border-bottom: 1px solid #70777e;
-            }
+            color: #70777e;
+            text-decoration: none;
+            border-bottom: 1px solid #70777e;
+          }
+        `}
+      >
+        Source:{" "}
+        <a href={sourceUrl} target="_blank" rel="noopener noreferrer">
+          {props.datasetDetails?.source ?? datasetDetails.source} - Data file:{" "}
+          {filename}
+        </a>
+      </p>
+      {chartType === "echartsGeomap" && props.visualOptions?.showLegend ? (
+        <div
+          css={`
+            position: absolute;
+            bottom: 0;
+            right: 0;
           `}
         >
-          Source:{" "}
-          <a href={sourceUrl} target="_blank" rel="noopener noreferrer">
-            {props.datasetDetails?.source ?? datasetDetails.source} - Data file:{" "}
-            {filename}
-          </a>
-        </p>
-        {chartType === "echartsGeomap" && props.visualOptions?.showLegend ? (
-          <div
-            css={`
-              position: absolute;
-              bottom: 0;
-              right: 0;
-            `}
-          >
-            <GeomapLegend
-              data={props.renderedChartMappedData}
-              visualOptions={props.visualOptions}
-              mapping={props.mapping}
-            />
-          </div>
-        ) : null}
-      </div>
-    );
-  }
+          <GeomapLegend
+            data={props.renderedChartMappedData}
+            visualOptions={props.visualOptions}
+            mapping={props.mapping}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
 
   return (
     <>

diff --git 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
@@ -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}