Make site buildable

PythonCoderAS · PythonCoderAS · commit f36d6b06d682 · 2025-04-18T15:20:01.000-04:00
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -0,0 +1,51 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["master"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: "npm"
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload dist folder
+          path: "./dist"
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/index.html b/index.html
@@ -1,13 +1,15 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Illustrating Trump's Tariffs</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
+    "@types/node": "^22.14.1",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,19 +1,16 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import './App.css'
 /* Imports */
-import { Button, Container, Graphics, HeatLegend, Root, color as am5color, p50 as am5p50, p100 as am5p100, percent as am5percent, Slider, Label } from "@amcharts/amcharts5/index";
+import { Button, Container, Graphics, HeatLegend, Root, color as am5color, p50 as am5p50, p100 as am5p100, percent as am5percent, Slider, Label, Circle } from "@amcharts/amcharts5/index";
 import * as am5map from "@amcharts/amcharts5/map";
 import am5geodataWorldLow from "@amcharts/amcharts5-geodata/worldLow";
 // import am5geodataUSALow from "@amcharts/amcharts5-geodata/usaLow";
 import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
 import { DataItem, IComponentDataItem } from '@amcharts/amcharts5/.internal/core/render/Component';
-import { FLATTENED_TARIFF_DATA, FlattenedTariffDataEntry, TariffType } from './data';
+import { FLATTENED_TARIFF_DATA, FlattenedTariffDataEntry, TariffType, Valid2DigitCountryCodesWithoutUSA } from './data';
 
 
-interface EffectiveTariff extends IComponentDataItem, FlattenedTariffDataEntry {
-}
-
 const dates = [...FLATTENED_TARIFF_DATA.keys()];
 
 function formatLargeMoney(value: number) {
@@ -37,34 +34,40 @@ function formatLargeMoney(value: number) {
   return `$${valueTo100ths} ${specifier}`;
 }
 
+type AmChartsData = ({ id: Valid2DigitCountryCodesWithoutUSA, approxValueFormatted?: string } & Partial<Pick<FlattenedTariffDataEntry, Exclude<keyof FlattenedTariffDataEntry, "id" | "date" | "type">>>) & IComponentDataItem;
 
-function AmChartsMap({
-  field = "percentValue", type = "announced"
-}: {
-  field: Exclude<keyof FlattenedTariffDataEntry, "id" | "date" | "type">,
-  type: TariffType
-}) {
-  const [dateIndex, setDateIndex] = useState<number>(0);
-  const [chart, setChart] = useState<am5map.MapChart | null>(null);
+function AmChartsMap() {
+  const [field, setField] = useState<Exclude<keyof FlattenedTariffDataEntry, "id" | "date" | "type">>("percentValue");
+  const [type, setType] = useState<TariffType>("announced");
+  const [dateIndex, setDateIndex] = useState<number>(-1);
   const [polygonSeries, setPolygonSeries] = useState<am5map.MapPolygonSeries | null>(null);
   const dateIndexRef = useRef(dateIndex); // Need to pass this value into a callback in the use effect
+  const oldData = useRef<AmChartsData[]>([]);
 
   useEffect(() => {
     if (polygonSeries) {
-      const mappedData = FLATTENED_TARIFF_DATA.get(dates[dateIndex])!.filter((d) => d.type === type).map(d => {
+      const mappedData: AmChartsData[] = dateIndex === -1 ? [] : FLATTENED_TARIFF_DATA.get(dates[dateIndex])!.filter((d) => d.type === type).map(d => {
         return {
           id: d.id,
           [field]: d[field],
           approxValueFormatted: field === "approximateValueOfImportsImpacted" ? formatLargeMoney(d.approximateValueOfImportsImpacted) : undefined,
         };
       });
-      console.log(mappedData);
       polygonSeries.data.setAll(mappedData);
-      if (chart) {
-        polygonSeries.mapPolygons.values.forEach(polygon => polygon.appear(1000));
-      }
+      const diffItems = mappedData.filter((d) => {
+        const oldItem = oldData.current.find((old) => old.id === d.id);
+        if (!oldItem) {
+          return true;
+        }
+        const isDifferent = oldItem[field] !== d[field];
+        return isDifferent;
+      }).map(d => d.id);
+      oldData.current = mappedData;
+      polygonSeries.mapPolygons.values
+        .filter(polygon => polygon.dataItem && diffItems.includes((polygon.dataItem as DataItem<AmChartsData>).get("id")))
+        .forEach(polygon => polygon.appear(1000));
     }
-  }, [polygonSeries, chart, dateIndex, field, type]);
+  }, [polygonSeries, dateIndex, field, type]);
 
   useEffect(() => {
     if (polygonSeries) {
@@ -94,7 +97,6 @@ function AmChartsMap({
       layout: root.horizontalLayout
     }));
 
-    setChart(chart);
     // Create polygon series
     const polygonSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {
       // geoJSON: am5geodataUSALow,
@@ -133,7 +135,7 @@ function AmChartsMap({
     }));
 
     polygonSeries.mapPolygons.template.events.on("pointerover", function (ev) {
-      heatLegend.showValue(Number((ev.target.dataItem as DataItem<EffectiveTariff>).get(field)));
+      heatLegend.showValue(Number((ev.target.dataItem as DataItem<AmChartsData>).get(field)));
     });
 
     heatLegend.startLabel.setAll({
@@ -150,13 +152,14 @@ function AmChartsMap({
     polygonSeries.events.on("datavalidated", function () {
       // console.log({ low: polygonSeries.getPrivate("valueLow"), high: polygonSeries.getPrivate("valueHigh") });
       // const low = polygonSeries.getPrivate("valueLow")!;
-      const high = polygonSeries.getPrivate("valueHigh")!;
+      const high = polygonSeries.getPrivate("valueHigh") ?? 0;
       // heatLegend.set("startValue", polygonSeries.getPrivate("valueLow"));
       // heatLegend.set("endValue", Math.max(polygonSeries.getPrivate("valueHigh") ?? 0, 100));
       if (field !== "percentValue") {
+        const endValue = Math.max(high, 1_000_000);
         heatLegend.setAll({
-          endValue: Math.max(high, 100),
-          endText: formatLargeMoney(high),
+          endValue,
+          endText: formatLargeMoney(endValue),
         });
       }
     })
@@ -173,8 +176,8 @@ function AmChartsMap({
       y: am5p100,
       centerX: am5p50,
       centerY: am5p100,
-      x: am5p50,
-      width: am5percent(90),
+      x: am5percent(50),
+      width: am5percent(135),
       layout: root.horizontalLayout,
       paddingBottom: 10
     }));
@@ -189,7 +192,6 @@ function AmChartsMap({
     }));
 
     const slider = container.children.push(Slider.new(root, {
-      //width: am5.percent(80),
       orientation: "horizontal",
       start: 0,
       centerY: am5p50
@@ -219,7 +221,7 @@ function AmChartsMap({
 
     slider.events.on("rangechanged", function () {
       const lastDateMillis = dayjs(dates[dates.length - 1]).valueOf();
-      const firstDateMillis = dayjs(dates[0]).valueOf();
+      const firstDateMillis = dayjs("2025-01-20").valueOf(); // Inauguration date
       // var year = firstYear + Math.round(slider.get("start", 0) * (lastYear - firstYear));
       const nextDateMillis = firstDateMillis + Math.round(slider.get("start", 0) * (lastDateMillis - firstDateMillis));
       const nextDate = dayjs(nextDateMillis);
@@ -229,10 +231,86 @@ function AmChartsMap({
       if (potentialNextDateIndex === -1) {
         setDateIndex(dates.length - 1);
       } else {
-        setDateIndex(potentialNextDateIndex === 0 ? 0 : (potentialNextDateIndex - 1));
+        setDateIndex(potentialNextDateIndex - 1);
+      }
+    });
+
+    const typeContainer = chart.children.push(Container.new(root, {
+      layout: root.horizontalLayout,
+      x: am5percent(85),
+      centerX: am5p100,
+      y: am5percent(100),
+      dy: -40
+    }));
+
+    // Add labels and controls
+    typeContainer.children.push(Label.new(root, {
+      centerY: am5p50,
+      text: "Announced"
+    }));
+
+    const typeSwitchButton = typeContainer.children.push(Button.new(root, {
+      themeTags: ["switch"],
+      centerY: am5p50,
+      icon: Circle.new(root, {
+        themeTags: ["icon"]
+      }),
+      active: type === "effective",
+    }));
+
+    typeSwitchButton.on("active", function () {
+      if (!typeSwitchButton.get("active")) {
+        setType("announced");
+      } else {
+        setType("effective");
       }
     });
 
+    typeContainer.children.push(
+      Label.new(root, {
+        centerY: am5p50,
+        text: "Effective"
+      })
+    );
+
+    const fieldContainer = chart.children.push(Container.new(root, {
+      layout: root.horizontalLayout,
+      x: am5percent(15),
+      centerX: am5p100,
+      y: am5percent(100),
+      dy: -40
+    }));
+
+    // Add labels and controls
+    fieldContainer.children.push(Label.new(root, {
+      centerY: am5p50,
+      text: "Percent"
+    }));
+
+    const fieldSwitchButton = fieldContainer.children.push(Button.new(root, {
+      themeTags: ["switch"],
+      centerY: am5p50,
+      icon: Circle.new(root, {
+        themeTags: ["icon"]
+      }),
+      active: field === "approximateValueOfImportsImpacted",
+    }));
+
+    fieldSwitchButton.on("active", function () {
+      if (!fieldSwitchButton.get("active")) {
+        setField("percentValue")
+      } else {
+        setField("approximateValueOfImportsImpacted")
+      }
+    });
+
+    fieldContainer.children.push(
+      Label.new(root, {
+        centerY: am5p50,
+        text: "Approximate Value of Imports"
+      })
+    );
+
     return () => {
       root.dispose();
     }
@@ -244,8 +322,8 @@ function AmChartsMap({
 
 function App() {
   return (
-    <AmChartsMap field='approximateValueOfImportsImpacted' type='announced' />
+    <AmChartsMap />
   )
 }
 
-export default App
+export default App;
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,7 +1,14 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import process from "process";
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  // If in Github Actions, set the base to the repository name
+  base: process.env.GITHUB_ACTIONS
+    ? process.env.GITHUB_REPOSITORY
+      ? `/${process.env.GITHUB_REPOSITORY.split("/")[1]}/`
+      : "/info-design-tariffs/"
+    : undefined,
+});
