Map wip - added topojson, visx/geo markup, doesn't work xp

Author: mackenziebowes

docs/client/app/gym/charts/_components/gemini_map.tsx

@@ -0,0 +1,148 @@
+import React, { useMemo } from "react";
+import { CustomProjection, Graticule } from "@visx/geo";
+import type { Projection } from "@visx/geo/lib/types";
+// import { geoConicConformal } from "d3-geo";
+import { geoConicConformal } from "@visx/vendor/d3-geo";
+import * as topojson from "topojson-client";
+import { Topology } from "topojson-specification";
+
+// --- TYPES ---
+interface StatsCanFederalProperties {
+  PRNAME: string;
+  PRUID: string;
+}
+
+interface StatsCanProvincialProperties {
+  CDNAME: string;
+  PRNAME: string;
+  CDUID: string;
+}
+
+interface StatsCanRegionProperties {
+  PRUID: string;
+  PRNAME: string;
+  CDUID: string;
+  CDNAME: string;
+  CDTYPE: string;
+  CSDUID: string;
+  CSDNAME: string;
+  CSDTYPE: string;
+}
+
+// StatsCan standard properties (based on your mapshaper output)
+type StatsCanProperties =
+  | StatsCanFederalProperties
+  | StatsCanProvincialProperties
+  | StatsCanRegionProperties;
+
+interface PolygonGeometry {
+  type: "Polygon";
+  coordinates: number[][][]; // [Ring][Point]
+}
+
+interface MultiPolygonGeometry {
+  type: "MultiPolygon";
+  coordinates: number[][][][];
+}
+
+interface FeatureShape {
+  type: "Feature";
+  geometry: PolygonGeometry | MultiPolygonGeometry;
+  properties: StatsCanProperties;
+}
+
+interface CanadaMapProps {
+  width: number;
+  height: number;
+  data: Topology; // Generic Topology to accept any generated file
+  events?: boolean;
+  // Optional: Allow the parent to color shapes based on data (e.g., sequential palette)
+  getFill?: (feature: FeatureShape) => string;
+  onSelect?: (feature: FeatureShape) => void;
+}
+
+export const CanadaMap = ({
+  width,
+  height,
+  data,
+  events = false,
+  getFill,
+  onSelect,
+}: CanadaMapProps) => {
+  // 1. CONVERT TO GEOJSON (Dynamic Key)
+  const world = useMemo<FeatureShape[]>(() => {
+    if (!data) return [];
+
+    // Auto-detect the primary layer key so we don't crash on "PROVINCE" vs "regions"
+    const keys = Object.keys(data.objects);
+    if (keys.length === 0) return [];
+    const primaryLayer = keys[0]; // e.g., "provinces" or "lcsd000a25a_e"
+    const topodata = topojson.feature(data, data.objects[primaryLayer]);
+
+    // @ts-expect-error - topojson types are loose, but we know the structure
+    const features = topodata.features as FeatureShape[];
+    return features;
+  }, [data]);
+
+  // 2. DEFINE PROJECTION
+  // geoConicConformal + fitSize is the "Magic Bullet" here.
+  // It works for the whole country OR a single province drill-down automatically.
+  const projection = useMemo(
+    () =>
+      geoConicConformal()
+        .parallels([50, 70])
+        .rotate([96, 0])
+        .fitSize([width, height], {
+          type: "FeatureCollection",
+          features: world,
+        }),
+    [width, height, world],
+  );
+  console.dir({ projection });
+  if (world.length === 0) return null;
+
+  return (
+    <svg width={width} height={height}>
+      <CustomProjection<FeatureShape> projection={"mercator"} data={world}>
+        {(customProjection) => {
+          return (
+            <g>
+              {customProjection.features.map((feature, i) => {
+                const { path, feature: f } = feature;
+                // Use provided fill logic or default to StatsCan grey
+                // const fillColor = getFill ? getFill(f) : "#EAEAEA";
+                const fillColor = "#EAEAEA";
+
+                return (
+                  <path
+                    key={`map-feature-${i}`}
+                    d={path || ""}
+                    fill={fillColor}
+                    stroke="#FFFFFF"
+                    strokeWidth={0.5}
+                    // style={{
+                    //   transition: "fill 0.2s ease",
+                    //   cursor: events ? "pointer" : "default",
+                    //   outline: "none", // Prevents focus ring issues on click
+                    // }}
+                    // onClick={() => {
+                    //   if (events && onSelect) onSelect(f);
+                    // }}
+                    // onMouseEnter={(e) => {
+                    //   if (events && !getFill)
+                    //     e.currentTarget.style.fill = "#CFD8DC"; // Simple hover if no data color
+                    // }}
+                    // onMouseLeave={(e) => {
+                    //   if (events && !getFill)
+                    //     e.currentTarget.style.fill = fillColor;
+                    // }}
+                  />
+                );
+              })}
+            </g>
+          );
+        }}
+      </CustomProjection>
+    </svg>
+  );
+};

docs/client/app/gym/charts/_components/maps/MapController.tsx

@@ -0,0 +1,13 @@
+import { Topology } from "topojson-specification";
+import * as Federal from "../../_data/maps/canada-provinces.json";
+import * as Alberta from "../../_data/maps/provinces/ab.json";
+import VisxMercator from "./visx_map";
+
+export default function MapController() {
+  console.log();
+  return (
+    <div className="grid place-items-center">
+      <VisxMercator width={480} height={480} />
+    </div>
+  );
+}

docs/client/app/gym/charts/_components/maps/visx_map.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { scaleQuantize } from "@visx/scale";
+import { Mercator, Graticule } from "@visx/geo";
+import * as topojson from "topojson-client";
+import * as topology from "../../_data/maps/canada-provinces.json";
+
+export const background = "#f9f7e8";
+
+export type GeoMercatorProps = {
+  width: number;
+  height: number;
+  events?: boolean;
+};
+
+interface FeatureShape {
+  type: "Feature";
+  id: string;
+  geometry: { coordinates: [number, number][][]; type: "Polygon" };
+  properties: { name: string };
+}
+
+// @ts-expect-error Topojson is untyped
+const world = topojson.feature(topology, topology.objects.units) as {
+  type: "FeatureCollection";
+  features: FeatureShape[];
+};
+
+const color = scaleQuantize({
+  domain: [
+    Math.min(...world.features.map((f) => f.geometry.coordinates.length)),
+    Math.max(...world.features.map((f) => f.geometry.coordinates.length)),
+  ],
+  range: [
+    "#ffb01d",
+    "#ffa020",
+    "#ff9221",
+    "#ff8424",
+    "#ff7425",
+    "#fc5e2f",
+    "#f94b3a",
+    "#f63a48",
+  ],
+});
+
+export default function VisxMercator({
+  width,
+  height,
+  events = false,
+}: GeoMercatorProps) {
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const scale = (width / 630) * 100;
+
+  return width < 10 ? null : (
+    <svg width={width} height={height}>
+      <rect
+        x={0}
+        y={0}
+        width={width}
+        height={height}
+        fill={background}
+        rx={14}
+      />
+      <Mercator<FeatureShape>
+        data={world.features}
+        scale={scale}
+        translate={[centerX, centerY + 50]}
+      >
+        {(mercator) => (
+          <g>
+            <Graticule
+              graticule={(g) => mercator.path(g) || ""}
+              stroke="rgba(33,33,33,0.05)"
+            />
+            {mercator.features.map(({ feature, path }, i) => (
+              <path
+                key={`map-feature-${i}`}
+                d={path || ""}
+                fill={color(feature.geometry.coordinates.length)}
+                stroke={background}
+                strokeWidth={0.5}
+                onClick={() => {
+                  if (events)
+                    alert(
+                      `Clicked: ${feature.properties.name} (${feature.id})`,
+                    );
+                }}
+              />
+            ))}
+          </g>
+        )}
+      </Mercator>
+    </svg>
+  );
+}