refactor: year chart

package.json

@@ -21,7 +21,7 @@
     "bootstrap": "^5.3.2",
     "firebase": "^10.7.2",
     "formik": "^2.4.5",
-    "lodash": "^4.17.11",
+    "lodash.clonedeep": "^4.5.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.0",
     "react-dom": "^18.2.0",
@@ -30,12 +30,12 @@
     "react-scripts": "^5.0.1",
     "react-spinners": "^0.13.8",
     "react-table": "^6.10.0",
+    "react-vega": "^7.6.0",
     "redux": "^5.0.1",
     "sass": "^1.69.7",
     "seamless-immutable": "^7.1.4",
     "table": "^5.4.1",
     "vega": "^5.27.0",
-    "vega-embed": "^6.24.0",
     "vega-lite": "^5.16.3",
     "yup": "^1.3.3"
   },

src/components/ContentPage.jsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBook } from '@fortawesome/free-solid-svg-icons';
-// import YearChart from "./YearChart";
-// import WordCloud from "./WordCloud";
 import { useSelector } from 'react-redux';
 import { selectPublications, selectUser } from '../store/slice/appState';
 import { PubsTable } from './PubsTable';
 import Spinner from './Spinner';
 import { AddPublicationModal } from './AddPublicationModal.tsx';
+import { YearChart } from './YearChart.tsx';
 
 export function ContentPage() {
   const publications = useSelector(selectPublications);
@@ -36,14 +35,10 @@ export function ContentPage() {
           </div>
 
           {/* TODO: Word Cloud */}
-          {/* TODO: Year Chart */}
-          {/*<h3 className="word-cloud-title pt-4 mt-4">*/}
-          {/*  {" "}*/}
-          {/*  What are these publications all about?{" "}*/}
-          {/*</h3>*/}
+          <h3 className="word-cloud-title pt-4 mt-4">What are these publications all about? </h3>
           {/*<div className="viz d-flex justify-content-center pt-5">*/}
           {/*  <WordCloud />*/}
-          {/*  <YearChart />*/}
+          <YearChart />
           {/*</div>*/}
         </div>
       )}

src/components/YearChart.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { Vega } from 'react-vega';
+import { useSelector } from 'react-redux';
+import cloneDeep from 'lodash.clonedeep';
+import { selectPublications } from '../store/slice/appState';
+export function YearChart() {
+  const [selectedYear, setSelectedYear] = React.useState(null);
+  const publications = useSelector(selectPublications);
+
+  const spec = {
+    $schema: 'https://vega.github.io/schema/vega/v5.json',
+    description: 'Bar Chart of the years of publications',
+    width: 400,
+    height: 400,
+    padding: 5,
+    title: 'Number of Publications by Year',
+
+    data: [
+      {
+        name: 'publications',
+        values: cloneDeep(publications),
+        transform: [
+          {
+            type: 'aggregate',
+            groupby: ['year'],
+          },
+        ],
+      },
+    ],
+
+    signals: [
+      {
+        name: 'selectedYear',
+        value: selectedYear,
+        on: [
+          {
+            events: 'click',
+            update: 'datum !== null && selectedYear === null ? datum.year : null',
+          },
+          {
+            events: 'dblclick',
+            update: 'null',
+          },
+        ],
+      },
+    ],
+
+    scales: [
+      {
+        name: 'xscale',
+        type: 'band',
+        domain: {
+          data: 'publications',
+          field: 'year',
+          sort: true,
+        },
+        range: 'width',
+        padding: 0.05,
+        round: true,
+      },
+      {
+        name: 'yscale',
+        domain: {
+          data: 'publications',
+          field: 'count',
+        },
+        nice: true,
+        range: 'height',
+      },
+    ],
+
+    axes: [
+      {
+        scale: 'xscale',
+        orient: 'bottom',
+        title: 'Year',
+        labelAngle: 270,
+        labelAlign: 'right',
+        labelBaseline: 'middle',
+      },
+      {
+        scale: 'yscale',
+        orient: 'left',
+        title: 'Count',
+        tickMinStep: 1,
+      },
+    ],
+
+    marks: [
+      {
+        type: 'rect',
+        from: { data: 'publications' },
+        encode: {
+          enter: {
+            x: { scale: 'xscale', field: 'year' },
+            width: { scale: 'xscale', band: 1 },
+            y: { scale: 'yscale', field: 'count' },
+            y2: { scale: 'yscale', value: 0 },
+            tooltip: {
+              signal: `{
+              "Year": datum.year,
+              "Count": datum.count
+              }`,
+            },
+          },
+          update: {
+            fill: [
+              {
+                value: '#ffc72c',
+                test: 'selectedYear == datum.year',
+              },
+              {
+                value: '#003c71',
+              },
+            ],
+            cursor: {
+              value: 'pointer',
+            },
+          },
+          hover: {
+            fill: { value: '#00b398' },
+          },
+        },
+      },
+    ],
+
+    config: {
+      title: {
+        fontSize: 24,
+      },
+      axis: {
+        labelFontSize: 16,
+        titleFontSize: 20,
+      },
+    },
+  };
+
+  const handleSelectedYear = (name, value) => {
+    setSelectedYear(value);
+  };
+
+  const signalListeners = { selectedYear: handleSelectedYear };
+
+  return <Vega spec={spec} signalListeners={signalListeners} actions={false} />;
+}

src/utils/firebase.ts

@@ -97,7 +97,7 @@ export const usePublicationsCollection = () => {
       query(
         collection(db, collectionName),
         orderBy('updatedAt', 'desc'),
-        limit(10) // TODO: TEMPORARY. Limiting right now. Set up pagination?
+        limit(100) // TODO: TEMPORARY. Limiting right now. Set up pagination?
       ),
       (snapshot) => {
         const publications = snapshot.docs.map((doc) => doc.data());