refactor: simplified plot functions to a single function CountsByYear…

…Plot with specification using a type property
brown-ccv · Dec 18, 2024 · 27c7cbd · 27c7cbd
1 parent 8921b68
commit 27c7cbd
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 25 deletions.
diff --git a/src/components/BarChart.js b/src/components/BarChart.js
@@ -451,27 +451,24 @@ const inputJson = [
   { label: '2024', count: 5 },
 ];
 
-export function YearBarPlot() {
-  // Generate the Vega spec
-  const vegaSpec = generateBarPlot({ data: inputJson, xLabel: 'Year', yLabel: 'Publications' });
-
-  return <Vega spec={vegaSpec} />;
-}
-
-export function YearLinePlotCumu() {
-  // Generate the Vega spec
-  const vegaSpec = generateCumuSumPlot({
-    data: inputJson,
-    xLabel: 'Year',
-    yLabel: 'Cumulative Publications',
-  });
-
-  return <Vega spec={vegaSpec} />;
-}
-
-export function YearBarPlotCumu() {
-  // Generate the Vega spec
-  const vegaSpec = generateBarPlotWithCumuSum(inputJson, 'Year');
+export function CountsByYearPlot({ type }) {
+  let vegaSpec = {};
+  const xLabel = 'Year';
+  if (type === 'bar') {
+    vegaSpec = generateBarPlot({
+      data: inputJson,
+      xLabel: xLabel,
+      yLabel: 'Publications',
+    });
+  } else if (type === 'cumu-line') {
+    vegaSpec = generateCumuSumPlot({
+      data: inputJson,
+      xLabel: xLabel,
+      yLabel: 'Cumulative Publications',
+    });
+  } else if (type === 'bar-cumu-line') {
+    vegaSpec = generateBarPlotWithCumuSum(inputJson, 'Year');
+  }
 
   return <Vega spec={vegaSpec} />;
 }
diff --git a/src/components/ContentPage.jsx b/src/components/ContentPage.jsx
@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
 import { selectUser } from '../store/slice/appState';
 import { PublicationsTable } from './PublicationsTable.tsx';
 import { AddPublicationModal } from './AddPublicationModal.tsx';
-import { YearBarPlot, YearBarPlotCumu, YearLinePlotCumu } from './BarChart.js';
+import { CountsByYearPlot } from './BarChart.js';
 
 export function ContentPage() {
   const user = useSelector(selectUser);
@@ -30,9 +30,9 @@ export function ContentPage() {
       {/*<div className="viz d-flex justify-content-center pt-5">*/}
       {/*  <WordCloud />*/}
       {/*<YearChart />*/}
-      <YearBarPlot />
-      <YearLinePlotCumu />
-      <YearBarPlotCumu />
+      <CountsByYearPlot type="bar" />
+      <CountsByYearPlot type="cumu-line" />
+      <CountsByYearPlot type="bar-cumu-line" />
       {/*</div>*/}
     </div>
   );