optimized code

src/components/charts/ChartContainer.jsx

@@ -1,15 +1,39 @@
 import React from "react";
+import { Empty } from "antd";
+import PropTypes from "prop-types";
 
 const TITLE_STYLE = {
     fontStyle: "italic",
     marginBottom: "10px",
 };
 
-const ChartContainer = ({ title, children }) => (
+const ChartContainer = ({ title, children, empty }) => (
     <div style={{ marginBottom: "20px", width: "420px" }}>
         <h2 style={TITLE_STYLE}>{title}</h2>
-        {children}
+        {empty ? <NoDataComponent height={300} /> : children}
     </div>
 );
 
+ChartContainer.propTypes = {
+    title: PropTypes.string.isRequired,
+    children: PropTypes.node.isRequired,
+    empty: PropTypes.bool,
+};
+const NoDataComponent = ({ height }) => (
+    <div
+        style={{
+            height: height,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        }}
+    >
+        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="No available data" />
+    </div>
+);
+
+NoDataComponent.propTypes = {
+    height: PropTypes.number.isRequired,
+};
+
 export default ChartContainer;

src/components/charts/Histogram.js

@@ -1,32 +1,15 @@
 import React, { useMemo } from "react";
 import PropTypes from "prop-types";
-import { Empty } from "antd";
 import { BarChart } from "bento-charts";
 import ChartContainer from "./ChartContainer";
 
-const transformData = (data) =>
-    data.map(({ ageBin, count }) => ({ x: ageBin, y: count }));
-
-const Histogram = ({
-    title = "Histogram",
-    data = [],
-    chartHeight = 300,
-}) => {
-
-    if (!data || !data.length) {
-        return (
-            <ChartContainer title={title}>
-                <div style={{ height: chartHeight, display: "flex", alignItems: "center", justifyContent: "center" }}>
-                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="No available data" />
-                </div>
-            </ChartContainer>
-        );
-    }
+const transformData = (data) => data && data.map(({ ageBin, count }) => ({ x: ageBin, y: count }));
 
+const Histogram = ({ title = "Histogram", data = [], chartHeight = 300 }) => {
     const transformedData = useMemo(() => transformData(data), [data]);
 
     return (
-        <ChartContainer title={title}>
+        <ChartContainer title={title} empty={!Array.isArray(data) || !data.length}>
             <BarChart data={transformedData} height={chartHeight} units="" />
         </ChartContainer>
     );
@@ -38,7 +21,7 @@ Histogram.propTypes = {
         PropTypes.shape({
             ageBin: PropTypes.string.isRequired,
             count: PropTypes.number.isRequired,
-        }),
+        })
     ),
     chartHeight: PropTypes.number,
 };

src/components/charts/PieChart.js

@@ -1,8 +1,7 @@
-import React, { useCallback, useMemo } from "react";
+import React, {useCallback, useMemo} from "react";
 import PropTypes from "prop-types";
 import { useHistory } from "react-router-dom";
 import { PieChart as BentoPie } from "bento-charts";
-import { Empty } from "antd";
 import ChartContainer from "./ChartContainer";
 
 const PieChart = ({
@@ -18,31 +17,17 @@ const PieChart = ({
 
     const handleChartClick = useCallback(
         (pointData) => {
-            if (!onAutoQueryTransition || pointData.skipAutoquery) return;
-
-            onAutoQueryTransition(window.location.href, dataType, labelKey, pointData.name);
-            history.push("/data/explorer/search");
+            if (onAutoQueryTransition && !pointData.skipAutoquery) {
+                onAutoQueryTransition(window.location.href, dataType, labelKey, pointData.name);
+                history.push("/data/explorer/search");
+            }
         },
         [onAutoQueryTransition, dataType, labelKey, history]
     );
 
-    if (!data.length) {
-        return (
-            <ChartContainer title={title}>
-                <div style={{ height: chartHeight, display: "flex", alignItems: "center", justifyContent: "center" }}>
-                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="No available data" />
-                </div>
-            </ChartContainer>
-        );
-    }
-
-    const pieChartData = useMemo(
-        data.map(({ name, value }) => ({ x: name, y: value })),
-        [data]
-    );
-
+    const pieChartData = useMemo(() => data.map(({ name, value }) => ({ x: name, y: value })), [data]);
     return (
-        <ChartContainer title={title}>
+        <ChartContainer title={title} empty={!Array.isArray(data) && !data.length}>
             <BentoPie data={pieChartData} height={chartHeight} onClick={handleChartClick} sort={sortData} />
         </ChartContainer>
     );