@cfasim-ui/charts 0.1.9 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/charts",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "type": "module",
   "description": "Chart visualization components for cfasim-ui",
   "license": "Apache-2.0",
@@ -13,11 +13,21 @@
     "access": "public"
   },
   "files": [
-    "src"
+    "dist"
   ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts"
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css"
   },
+  "sideEffects": [
+    "*.css"
+  ],
   "dependencies": {
     "d3-geo": "^3.1.1",
     "d3-selection": "^3.0.0",
@@ -25,7 +35,7 @@
     "reka-ui": "^2.9.2",
     "topojson-client": "^3.1.0",
     "us-atlas": "^3.0.1",
-    "@cfasim-ui/shared": "0.1.9"
+    "@cfasim-ui/shared": "0.2.0"
   },
   "peerDependencies": {
     "vue": "^3.5.0"
@@ -37,8 +47,12 @@
     "@types/topojson-client": "^3.1.5",
     "@types/topojson-specification": "^1.0.5",
     "@vitejs/plugin-vue": "^6.0.5",
+    "vite-plugin-dts": "^4.5.4",
     "@vue/test-utils": "^2.4.6",
     "happy-dom": "^20.8.9",
     "vitest": "^4.1.0"
+  },
+  "scripts": {
+    "build": "vite build"
   }
 }

package/src/ChartMenu/ChartMenu.vue

@@ -1,140 +0,0 @@
-<script setup lang="ts">
-import {
-  DropdownMenuRoot,
-  DropdownMenuTrigger,
-  DropdownMenuPortal,
-  DropdownMenuContent,
-  DropdownMenuItem,
-} from "reka-ui";
-
-export interface ChartMenuItem {
-  label: string;
-  action: () => void;
-}
-
-defineProps<{
-  items: ChartMenuItem[];
-}>();
-</script>
-
-<template>
-  <div class="chart-menu-trigger-area">
-    <!-- Single item: plain button -->
-    <button
-      v-if="items.length === 1"
-      class="chart-menu-button chart-menu-single"
-      :aria-label="items[0].label"
-      @click="items[0].action"
-    >
-      <svg
-        width="14"
-        height="14"
-        viewBox="0 0 14 14"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        aria-hidden="true"
-      >
-        <path d="M7 1v8M3 6l4 4 4-4M2 13h10" />
-      </svg>
-    </button>
-    <!-- Multiple items: dropdown menu -->
-    <DropdownMenuRoot v-else>
-      <DropdownMenuTrigger class="chart-menu-button" aria-label="Chart options">
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 16 16"
-          fill="currentColor"
-          aria-hidden="true"
-        >
-          <circle cx="3" cy="8" r="1.5" />
-          <circle cx="8" cy="8" r="1.5" />
-          <circle cx="13" cy="8" r="1.5" />
-        </svg>
-      </DropdownMenuTrigger>
-      <DropdownMenuPortal>
-        <DropdownMenuContent
-          class="chart-menu-content"
-          :side-offset="4"
-          align="end"
-        >
-          <DropdownMenuItem
-            v-for="item in items"
-            :key="item.label"
-            class="chart-menu-item"
-            @select="item.action"
-          >
-            {{ item.label }}
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenuPortal>
-    </DropdownMenuRoot>
-  </div>
-</template>
-
-<style scoped>
-.chart-menu-trigger-area {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 1;
-}
-
-.chart-menu-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: 1px solid var(--color-border);
-  border-radius: 0.25em;
-  background: var(--color-bg-0, #fff);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.15s;
-}
-
-.chart-menu-button[data-state="open"] {
-  opacity: 1;
-}
-
-.chart-menu-button:hover {
-  background: var(--color-bg-1, rgba(0, 0, 0, 0.05));
-  color: var(--color-text);
-}
-</style>
-
-<style>
-.chart-menu-content {
-  z-index: 100;
-  background: var(--color-bg-0);
-  border: 1px solid var(--color-border);
-  border-radius: 0.25em;
-  padding: 0.25em;
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -2px rgba(0, 0, 0, 0.1);
-  min-width: 140px;
-}
-
-.chart-menu-item {
-  display: flex;
-  align-items: center;
-  padding: 0.375em 0.5em;
-  border-radius: 0.25em;
-  font-size: var(--font-size-sm);
-  cursor: pointer;
-  user-select: none;
-  outline: none;
-  white-space: nowrap;
-}
-
-.chart-menu-item[data-highlighted] {
-  background: var(--color-primary);
-  color: white;
-}
-</style>

package/src/ChartMenu/download.ts

@@ -1,44 +0,0 @@
-export function downloadBlob(blob: Blob, name: string) {
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = name;
-  a.click();
-  URL.revokeObjectURL(url);
-}
-
-export function saveSvg(svg: SVGSVGElement, filename: string) {
-  const clone = svg.cloneNode(true) as SVGSVGElement;
-  clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-  const xml = new XMLSerializer().serializeToString(clone);
-  downloadBlob(new Blob([xml], { type: "image/svg+xml" }), `${filename}.svg`);
-}
-
-export function savePng(svg: SVGSVGElement, filename: string) {
-  const clone = svg.cloneNode(true) as SVGSVGElement;
-  clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-  const xml = new XMLSerializer().serializeToString(clone);
-  const svgBlob = new Blob([xml], { type: "image/svg+xml;charset=utf-8" });
-  const url = URL.createObjectURL(svgBlob);
-  const img = new Image();
-  const w = svg.width.baseVal.value || svg.clientWidth;
-  const h = svg.height.baseVal.value || svg.clientHeight;
-  const scale = 2;
-  img.onload = () => {
-    const canvas = document.createElement("canvas");
-    canvas.width = w * scale;
-    canvas.height = h * scale;
-    const ctx = canvas.getContext("2d")!;
-    ctx.scale(scale, scale);
-    ctx.drawImage(img, 0, 0, w, h);
-    canvas.toBlob((blob) => {
-      if (blob) downloadBlob(blob, `${filename}.png`);
-    });
-    URL.revokeObjectURL(url);
-  };
-  img.src = url;
-}
-
-export function downloadCsv(csv: string, filename: string) {
-  downloadBlob(new Blob([csv], { type: "text/csv" }), `${filename}.csv`);
-}

package/src/ChoroplethMap/ChoroplethMap.md

@@ -1,330 +0,0 @@
-# ChoroplethMap
-
-A US choropleth map using D3's Albers USA projection, which repositions Alaska and Hawaii to the bottom left. Supports state-level, county-level, and HSA-level (Health Service Areas) rendering via the `geoType` prop. Includes built-in GeoJSON for all US states, territories, counties, and 949 HSAs.
-
-## Examples
-
-### Basic with state data
-
-<ComponentDemo>
-  <ChoroplethMap
-    :data="[
-      { id: '06', value: 100 },
-      { id: '36', value: 80 },
-      { id: '48', value: 90 },
-      { id: '12', value: 70 },
-      { id: '17', value: 60 },
-      { id: '37', value: 50 },
-      { id: '42', value: 55 },
-      { id: '39', value: 45 },
-      { id: '13', value: 40 },
-      { id: '26', value: 35 },
-    ]"
-    title="Cases by State"
-    :legend-title="'Cases'"
-    :height="400"
-  />
-
-<template #code>
-
-```vue
-<ChoroplethMap
-  :data="[
-    { id: '06', value: 100 },
-    { id: '36', value: 80 },
-    { id: '48', value: 90 },
-    { id: '12', value: 70 },
-    { id: '17', value: 60 },
-  ]"
-  title="Cases by State"
-  :legend-title="'Cases'"
-  :height="400"
-/>
-```
-
-  </template>
-</ComponentDemo>
-
-### Custom color scale
-
-<ComponentDemo>
-  <ChoroplethMap
-    :data="[
-      { id: 'California', value: 100 },
-      { id: 'Texas', value: 85 },
-      { id: 'Florida', value: 70 },
-      { id: 'New York', value: 90 },
-      { id: 'Pennsylvania', value: 50 },
-      { id: 'Illinois', value: 60 },
-      { id: 'Ohio', value: 40 },
-      { id: 'Georgia', value: 55 },
-      { id: 'North Carolina', value: 45 },
-      { id: 'Michigan', value: 35 },
-    ]"
-    :color-scale="{ min: '#fff5f0', max: '#a50f15' }"
-    :legend-title="'Severity'"
-    :height="400"
-  />
-
-<template #code>
-
-```vue
-<ChoroplethMap
-  :data="[
-    { id: 'California', value: 100 },
-    { id: 'Texas', value: 85 },
-    { id: 'Florida', value: 70 },
-    { id: 'New York', value: 90 },
-  ]"
-  :color-scale="{ min: '#fff5f0', max: '#a50f15' }"
-  :legend-title="'Severity'"
-  :height="400"
-/>
-```
-
-  </template>
-</ComponentDemo>
-
-### Threshold color scale
-
-Use an array of `ThresholdStop` objects instead of a linear scale. Each stop defines a `min` threshold — values at or above that threshold get the stop's color. The highest matching stop wins.
-
-<ComponentDemo>
-  <ChoroplethMap
-    :data="[
-      { id: 'California', value: 80 },
-      { id: 'Texas', value: 45 },
-      { id: 'Florida', value: 60 },
-      { id: 'New York', value: 25 },
-      { id: 'Pennsylvania', value: 8 },
-      { id: 'Illinois', value: 55 },
-      { id: 'Ohio', value: 30 },
-      { id: 'Georgia', value: 70 },
-      { id: 'North Carolina', value: 15 },
-      { id: 'Michigan', value: 3 },
-    ]"
-    :color-scale="[
-      { min: 0, color: '#fee5d9', label: 'Low' },
-      { min: 10, color: '#fcae91', label: 'Some' },
-      { min: 30, color: '#fb6a4a', label: 'Moderate' },
-      { min: 60, color: '#cb181d', label: 'High' },
-    ]"
-    title="Risk Level"
-    :legend-title="'Risk'"
-    :height="400"
-  />
-
-<template #code>
-
-```vue
-<ChoroplethMap
-  :data="stateData"
-  :color-scale="[
-    { min: 0, color: '#fee5d9', label: 'Low' },
-    { min: 10, color: '#fcae91', label: 'Some' },
-    { min: 30, color: '#fb6a4a', label: 'Moderate' },
-    { min: 60, color: '#cb181d', label: 'High' },
-  ]"
-  title="Risk Level"
-  :legend-title="'Risk'"
-  :height="400"
-/>
-```
-
-  </template>
-</ComponentDemo>
-
-### Categorical color scale
-
-Use an array of `CategoricalStop` objects to map string values to colors. Each stop defines a `value` to match and a `color` to apply.
-
-<ComponentDemo>
-  <ChoroplethMap
-    :data="[
-      { id: 'California', value: 'high' },
-      { id: 'Texas', value: 'medium' },
-      { id: 'Florida', value: 'high' },
-      { id: 'New York', value: 'low' },
-      { id: 'Pennsylvania', value: 'low' },
-      { id: 'Illinois', value: 'medium' },
-      { id: 'Ohio', value: 'low' },
-      { id: 'Georgia', value: 'high' },
-      { id: 'North Carolina', value: 'medium' },
-      { id: 'Michigan', value: 'low' },
-    ]"
-    :color-scale="[
-      { value: 'low', color: '#fee5d9' },
-      { value: 'medium', color: '#fb6a4a' },
-      { value: 'high', color: '#cb181d' },
-    ]"
-    title="Risk Category"
-    :legend-title="'Risk'"
-    :height="400"
-  />
-
-<template #code>
-
-```vue
-<ChoroplethMap
-  :data="stateData"
-  :color-scale="[
-    { value: 'low', color: '#fee5d9' },
-    { value: 'medium', color: '#fb6a4a' },
-    { value: 'high', color: '#cb181d' },
-  ]"
-  title="Risk Category"
-  :legend-title="'Risk'"
-  :height="400"
-/>
-```
-
-  </template>
-</ComponentDemo>
-
-### County-level map with pan and zoom
-
-Set `geoType="counties"` to render county-level data using 5-digit FIPS codes. State borders are drawn on top for context. Use `pan` and `zoom` props to enable interactive navigation — useful for dense county data.
-
-<ComponentDemo>
-  <ChoroplethMap
-    geo-type="counties"
-    :pan="true"
-    :zoom="true"
-    :data="[
-      { id: '06037', value: 100 },
-      { id: '06073', value: 80 },
-      { id: '06059', value: 70 },
-      { id: '36061', value: 90 },
-      { id: '36047', value: 75 },
-      { id: '17031', value: 85 },
-      { id: '48201', value: 65 },
-      { id: '04013', value: 60 },
-      { id: '12086', value: 55 },
-      { id: '53033', value: 50 },
-    ]"
-    title="Cases by County"
-    :legend-title="'Cases'"
-    :height="400"
-  />
-
-<template #code>
-
-```vue
-<ChoroplethMap
-  geo-type="counties"
-  pan
-  zoom
-  :data="[
-    { id: '06037', value: 100 },
-    { id: '36061', value: 90 },
-    { id: '17031', value: 85 },
-    { id: '48201', value: 65 },
-    { id: '04013', value: 60 },
-  ]"
-  title="Cases by County"
-  :legend-title="'Cases'"
-  :height="400"
-/>
-```
-
-  </template>
-</ComponentDemo>
-
-### HSA-level map
-
-Set `geoType="hsas"` to render Health Service Area boundaries. HSAs are dissolved from county boundaries using a built-in FIPS-to-HSA mapping. Use 6-digit HSA codes as IDs. State borders are overlaid for context.
-
-<ComponentDemo>
-  <ChoroplethMap
-    geo-type="hsas"
-    :pan="true"
-    :zoom="true"
-    :data="[
-      { id: '010259', value: 100 },
-      { id: '060766', value: 90 },
-      { id: '120159', value: 85 },
-      { id: '090121', value: 70 },
-      { id: '110061', value: 60 },
-      { id: '040765', value: 55 },
-      { id: '080731', value: 50 },
-      { id: '050527', value: 45 },
-      { id: '100075', value: 40 },
-      { id: '020820', value: 35 },
-    ]"
-    title="Cases by HSA"
-    :legend-title="'Cases'"
-    :height="400"
-  />
-
-<template #code>
-
-```vue
-<ChoroplethMap
-  geo-type="hsas"
-  pan
-  zoom
-  :data="[
-    { id: '010259', value: 100 },
-    { id: '060766', value: 90 },
-    { id: '120159', value: 85 },
-    { id: '090121', value: 70 },
-    { id: '110061', value: 60 },
-  ]"
-  title="Cases by HSA"
-  :legend-title="'Cases'"
-  :height="400"
-/>
-```
-
-  </template>
-</ComponentDemo>
-
-<!--@include: ./_api/choropleth-map.md-->
-
-### StateData
-
-```ts
-interface StateData {
-  /** FIPS code (e.g. "06" for California, "06037" for LA County) or name */
-  id: string;
-  value: number | string;
-}
-```
-
-### ChoroplethColorScale
-
-```ts
-interface ChoroplethColorScale {
-  /** Minimum color (CSS color string). Default: "#e5f0fa" */
-  min?: string;
-  /** Maximum color (CSS color string). Default: "#08519c" */
-  max?: string;
-}
-```
-
-### ThresholdStop
-
-Pass an array of `ThresholdStop` as `colorScale` for discrete color buckets instead of a linear gradient. The highest matching `min` wins.
-
-```ts
-interface ThresholdStop {
-  /** Lower bound (inclusive). Values at or above this get this color. */
-  min: number;
-  color: string;
-  /** Optional label for the legend (defaults to the min value) */
-  label?: string;
-}
-```
-
-### CategoricalStop
-
-Pass an array of `CategoricalStop` as `colorScale` to map string values to colors. States whose `value` matches a stop's `value` get that color; unmatched values get `noDataColor`.
-
-```ts
-interface CategoricalStop {
-  /** The categorical value to match */
-  value: string;
-  /** CSS color string */
-  color: string;
-}
-```