Cleanup a11y and TS warnings/errors (#207)

* Add workspace level (recursive) `pnpm check`

* Fix VSCode not displaying errors due to monorepo handling of mdsvex layout. Related: pngwn/MDsveX#556

* Cleanup warnings/TS errors on docs components (except GeoDebug)

* Add `chartContext()` to get strongly typed chart context (from LayerCake)

* More TS / a11y improvements

* More TS / a11y improvements

* Fix/workaround remaining TS / a11y improvements in src/lib

* Fix remaining a11y warnings

* Add types to topojson data and other type improvements

* More progress

* Ignore autoType TS error (unsure how to make it happy)

* More type progress (AnyScale, etc)

* More type progress

* More type progress

* More progress (90 to go)

* Rework accessor and use consistently.  More type fixes

* Improve types of create series data generators

* Fix ts warnings on Bars and Columns examples

* Replace `@ts-ignore` with `@ts-expect-error`

* More type fixes/workarounds

* Update Svelte UX with improved MenuOption type

* Hacks to make typescript happy in template

* Allow <Chart {xDomain}> to be `null` or `null[]` to support Brush use cases

* Support array as well as tuple for `null` | `number` domains

* [Brush] Support passing Date for min/max.  Cast `Date[]` xDomain example as `[Date, Date]`

* Add changesets

* Run svelte-check during CI

* Add missing `@types/d3-color` and `@types/d3-path` packages

* [Chart] Improve default value jsdoc comments

* Add changeset

* Fix createDimensionGetter() for non-band scales (ex. <Labels> on Area chart)

* Use pattern for individual bar highlighting

* Tween all histogram examples

* Fix sparkbar tooltip example

* Hide overflow on ForceGraph examples

* Cleanup console.logs

Author: techniq

.changeset/early-bugs-grab.md

@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+Cleanup a11y and TS warnings/errors

.changeset/light-toys-end.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+Add type-safe `chartContext()` instead of using `getContext('LayerCake')`

.changeset/quick-cooks-marry.md

@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+Improve types across project

.github/workflows/ci.yml

@@ -27,6 +27,8 @@ jobs:
 
       - run: pnpm install --frozen-lockfile
 
+      - run: pnpm check
+
       - run: pnpm lint
 
       - run: pnpm test:unit

package.json

@@ -7,6 +7,7 @@
   "scripts": {
     "test:unit": "pnpm -r test:unit",
     "build": "rimraf packages/*/dist && pnpm -r build",
+    "check": "pnpm -r check",
     "lint": "pnpm -r lint",
     "format": "pnpm -r format",
     "changeset": "changeset",

packages/layerchart/mdsvex.config.js

@@ -1,8 +1,11 @@
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
 import slug from 'rehype-slug';
 
 export default {
   extensions: ['.md', '.svx'],
-  layout: './src/lib/docs/Layout.svelte',
+  // https://github.com/pngwn/MDsveX/issues/556
+  layout: dirname(fileURLToPath(import.meta.url)) + '/src/lib/docs/Layout.svelte',
   rehypePlugins: [slug],
   // highlight: false
 };

packages/layerchart/package.json

@@ -28,13 +28,15 @@
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@tailwindcss/typography": "^0.5.13",
     "@types/d3-array": "^3.2.1",
+    "@types/d3-color": "^3.1.3",
     "@types/d3-delaunay": "^6.0.4",
     "@types/d3-dsv": "^3.0.7",
     "@types/d3-force": "^3.0.10",
     "@types/d3-geo": "^3.1.0",
     "@types/d3-hierarchy": "^3.1.7",
     "@types/d3-interpolate": "^3.0.4",
     "@types/d3-interpolate-path": "^2.0.3",
+    "@types/d3-path": "^3.1.0",
     "@types/d3-quadtree": "^3.0.6",
     "@types/d3-random": "^3.0.3",
     "@types/d3-sankey": "^0.12.4",
@@ -47,6 +49,7 @@
     "@types/shapefile": "^0.6.4",
     "@types/topojson-client": "^3.1.4",
     "@types/topojson-simplify": "^3.0.3",
+    "@types/topojson-specification": "^1.0.5",
     "autoprefixer": "^10.4.19",
     "marked": "^13.0.0",
     "mdsvex": "^0.11.2",
@@ -99,7 +102,7 @@
     "lodash-es": "^4.17.21",
     "posthog-js": "^1.140.1",
     "shapefile": "^0.6.6",
-    "svelte-ux": "^0.71.0",
+    "svelte-ux": "^0.71.1",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {

packages/layerchart/src/app.d.ts

@@ -1,10 +1,25 @@
-declare global {
-  namespace App {
-    // interface Error {}
-    // interface Locals {}
-    // interface PageData {}
-    // interface Platform {}
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+  // interface Error {}
+  // interface Locals {}
+
+  interface PageData {
+    meta: {
+      title?: string;
+      description?: string;
+      source?: string;
+      pageSource?: string;
+      api?: SveldJson;
+      features?: string[];
+      related?: string[];
+      hideUsage?: boolean;
+      hideTableOfContents?: boolean;
+      status?: string;
+    };
   }
-}
 
-export {};
+  // interface PageState {}
+  // interface Platform {}
+}

packages/layerchart/src/lib/components/Arc.svelte

@@ -17,13 +17,14 @@
   // https://svelte.dev/repl/09711e43a1264ba18945d7db7cab9335?version=3.38.2
   // https://codepen.io/simeydotme/pen/rrOEmO/
 
-  import { getContext, tick } from 'svelte';
+  import { tick } from 'svelte';
   import type { SVGAttributes } from 'svelte/elements';
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
   import { arc as d3arc } from 'd3-shape';
   import { scaleLinear } from 'd3-scale';
   import { min, max } from 'd3-array';
 
+  import { chartContext } from './ChartContext.svelte';
   import { motionStore } from '$lib/stores/motionStore.js';
   import { degreesToRadians } from '$lib/utils/math.js';
 
@@ -80,7 +81,7 @@
 
   export let track: boolean | SVGAttributes<SVGPathElement> = false;
 
-  const { yRange } = getContext('LayerCake');
+  const { yRange } = chartContext();
 
   $: scale = scaleLinear().domain(domain).range(range);
 
@@ -102,7 +103,7 @@
     }
   }
 
-  $: _outerRadius = getOuterRadius(outerRadius, max($yRange) / 2);
+  $: _outerRadius = getOuterRadius(outerRadius, (max<number>($yRange) ?? 0) / 2);
 
   function getInnerRadius(innerRadius: number | undefined, outerRadius: number) {
     if (innerRadius == null) {
@@ -129,7 +130,7 @@
     .startAngle(startAngle ?? degreesToRadians(range[0]))
     .endAngle(endAngle ?? degreesToRadians(scale($tweened_value)))
     .cornerRadius(cornerRadius)
-    .padAngle(padAngle);
+    .padAngle(padAngle) as Function;
   // .padRadius(padRadius);
 
   $: trackArc = d3arc()
@@ -138,45 +139,51 @@
     .startAngle(startAngle ?? degreesToRadians(range[0]))
     .endAngle(endAngle ?? degreesToRadians(range[1]))
     .cornerRadius(cornerRadius)
-    .padAngle(padAngle);
+    .padAngle(padAngle) as Function;
   // .padRadius(padRadius);
 
+  // @ts-expect-error
   $: trackArcCentroid = trackArc.centroid();
   // $: console.log(trackArcCentroid)
 
-  let trackArcEl;
-  $: boundingBox = trackArc && trackArcEl ? trackArcEl.getBBox() : {};
-  // $: console.log(boundingBox)
+  let trackArcEl: SVGPathElement | undefined = undefined;
+  $: boundingBox = trackArcEl ? trackArcEl.getBBox() : ({} as DOMRect);
 
-  $: labelArcCenterOffset = {
-    x: outerRadius - boundingBox.width / 2,
-    // x: 0,
-    y: (outerRadius - boundingBox.height / 2) * -1,
-  };
+  // $: labelArcCenterOffset = {
+  //   x: outerRadius - boundingBox.width / 2,
+  //   // x: 0,
+  //   y: (outerRadius - boundingBox.height / 2) * -1,
+  // };
   // $: console.log(labelArcCenterOffset)
 
-  $: labelArcBottomOffset = {
-    // x: outerRadius - boundingBox.width / 2,
-    x: outerRadius - boundingBox.width / 2,
-    // x: 0,
-    // y: (outerRadius - boundingBox.height) * -1
-    y: (outerRadius - boundingBox.height) * -1,
-  };
+  // $: labelArcBottomOffset = {
+  //   // x: outerRadius - boundingBox.width / 2,
+  //   x: outerRadius - boundingBox.width / 2,
+  //   // x: 0,
+  //   // y: (outerRadius - boundingBox.height) * -1
+  //   y: (outerRadius - boundingBox.height) * -1,
+  // };
   // $: console.log(labelArcBottomOffset)
 
   /**
    * Offset arc from center
    */
   export let offset = 0;
-  $: angle = (startAngle + endAngle) / 2;
+  $: angle = ((startAngle ?? 0) + (endAngle ?? 0)) / 2;
   $: xOffset = Math.sin(angle) * offset;
   $: yOffset = -Math.cos(angle) * offset;
 </script>
 
 {#if track}
-  <path d={trackArc()} class="track" bind:this={trackArcEl} {...track} />
+  <path
+    d={trackArc()}
+    class="track"
+    bind:this={trackArcEl}
+    {...typeof track === 'object' ? track : null}
+  />
 {/if}
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <path
   d={arc()}
   transform="translate({xOffset}, {yOffset})"

packages/layerchart/src/lib/components/Area.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getContext, type ComponentProps } from 'svelte';
+  import { type ComponentProps } from 'svelte';
   import type { tweened as tweenedStore } from 'svelte/motion';
   import { type Area, area as d3Area, areaRadial } from 'd3-shape';
   import type { CurveFactory } from 'd3-shape';
@@ -10,9 +10,10 @@
 
   import { motionStore } from '$lib/stores/motionStore.js';
 
+  import { chartContext } from './ChartContext.svelte';
   import Spline from './Spline.svelte';
 
-  const { data: contextData, xScale, yScale, xGet, yGet, yRange } = getContext('LayerCake');
+  const { data: contextData, xScale, yScale, xGet, yGet, yRange } = chartContext();
 
   /** Override data instead of using context */
   export let data: any = undefined;
@@ -24,12 +25,12 @@
   export let radial = false;
 
   /** Override x accessor */
-  export let x: any = undefined; // TODO: Update Type
+  export let x: ((d: any) => any) | undefined = undefined;
 
   /** Override y0 accessor.  Defaults to max($yRange) */
-  export let y0: any = undefined; // TODO: Update Type
+  export let y0: ((d: any) => any) | undefined = undefined;
   /** Override y1 accessor.  Defaults to y accessor */
-  export let y1: any = undefined; // TODO: Update Type
+  export let y1: ((d: any) => any) | undefined = undefined;
 
   /** Interpolate path data using d3-interpolate-path */
   export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
@@ -42,7 +43,9 @@
   /** Enable showing line */
   export let line: boolean | Partial<ComponentProps<Spline>> = false;
 
-  $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
+  $: tweenedOptions = tweened
+    ? { interpolate: interpolatePath, ...(typeof tweened === 'object' ? tweened : null) }
+    : false;
   $: tweened_d = motionStore('', { tweened: tweenedOptions });
   $: {
     const path = radial
@@ -58,14 +61,15 @@
     if (defined) path.defined(defined);
 
     const d = pathData ?? path(data ?? $contextData);
-    tweened_d.set(d);
+    tweened_d.set(d ?? '');
   }
 </script>
 
 {#if line}
   <Spline {data} y={y1} {curve} {defined} {tweened} {...typeof line === 'object' ? line : null} />
 {/if}
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <path
   d={$tweened_d}
   clip-path={clipPath}

packages/layerchart/src/lib/components/AreaStack.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
-  import { getContext, type ComponentProps } from 'svelte';
+  import { type ComponentProps } from 'svelte';
   import type { tweened as tweenedStore } from 'svelte/motion';
   import type { CurveFactory } from 'd3-shape';
 
+  import { chartContext } from './ChartContext.svelte';
   import Area from './Area.svelte';
   import Spline from './Spline.svelte';
 
-  const { data, rGet } = getContext('LayerCake');
-
-  // TODO: Add as generic
-  type Datum = any;
+  const { data, rGet } = chartContext();
 
   export let curve: CurveFactory | undefined = undefined;
   export let defined: ComponentProps<Spline>['defined'] | undefined = undefined;