layerchart 0.43.5 → 0.43.7

package/dist/components/Area.svelte

@@ -6,6 +6,8 @@ import { cls } from 'svelte-ux';
 import { motionStore } from '../stores/motionStore.js';
 import { chartContext } from './ChartContext.svelte';
 import Spline from './Spline.svelte';
+import { accessor } from '../utils/common.js';
+import { isScaleBand } from '../utils/scales.js';
 const { data: contextData, xScale, yScale, xGet, yGet, yRange } = chartContext();
 /** Override data instead of using context */
 export let data = undefined;
@@ -26,6 +28,11 @@ export let curve = undefined;
 export let defined = undefined;
 /** Enable showing line */
 export let line = false;
+const _x = accessor(x);
+const _y0 = accessor(y0);
+const _y1 = accessor(y1);
+$: xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
+$: yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
 $: tweenedOptions = tweened
     ? { interpolate: interpolatePath, ...(typeof tweened === 'object' ? tweened : null) }
     : false;
@@ -33,13 +40,13 @@ $: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
     const path = radial
         ? areaRadial()
-            .angle((d) => (x ? $xScale(x(d)) : $xGet(d)))
-            .innerRadius((d) => (y0 ? $yScale(y0(d)) : max($yRange)))
-            .outerRadius((d) => (y1 ? $yScale(y1(d)) : $yGet(d)))
+            .angle((d) => (x ? $xScale(_x(d)) : $xGet(d)))
+            .innerRadius((d) => (y0 ? $yScale(_y0(d)) : max($yRange)))
+            .outerRadius((d) => (y1 ? $yScale(_y1(d)) : $yGet(d)))
         : d3Area()
-            .x((d) => (x ? $xScale(x(d)) : $xGet(d)))
-            .y0((d) => (y0 ? $yScale(y0(d)) : max($yRange)))
-            .y1((d) => (y1 ? $yScale(y1(d)) : $yGet(d)));
+            .x((d) => (x ? $xScale(_x(d)) : $xGet(d)) + xOffset)
+            .y0((d) => (y0 ? $yScale(_y0(d)) : max($yRange)) + yOffset)
+            .y1((d) => (y1 ? $yScale(_y1(d)) : $yGet(d)) + yOffset);
     if (curve)
         path.curve(curve);
     if (defined)

package/dist/components/Area.svelte.d.ts

@@ -3,15 +3,16 @@ import { type ComponentProps } from 'svelte';
 import type { tweened as tweenedStore } from 'svelte/motion';
 import type { CurveFactory } from 'd3-shape';
 import Spline from './Spline.svelte';
+import { type Accessor } from '../utils/common.js';
 declare const __propDef: {
     props: {
         [x: string]: any;
         data?: any;
         pathData?: string | undefined | null;
         radial?: boolean;
-        x?: ((d: any) => any) | undefined;
-        y0?: ((d: any) => any) | undefined;
-        y1?: ((d: any) => any) | undefined;
+        x?: Accessor;
+        y0?: Accessor;
+        y1?: Accessor;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         clipPath?: string | undefined;
         curve?: CurveFactory | undefined;

package/dist/components/Spline.svelte

@@ -10,6 +10,8 @@ import { cls } from 'svelte-ux';
 import { chartContext } from './ChartContext.svelte';
 import Group from './Group.svelte';
 import { motionStore } from '../stores/motionStore.js';
+import { accessor } from '../utils/common.js';
+import { isScaleBand } from '../utils/scales.js';
 const { data: contextData, xScale, yScale, x: contextX, y: contextY } = chartContext();
 /** Override data instead of using context */
 export let data = undefined;
@@ -18,9 +20,9 @@ export let pathData = undefined;
 /** Use radial instead of cartesian line generator, mapping `x` to `angle` and `y` to `radius`.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
 export let radial = false;
 /** Override `x` accessor from Chart context.  Applies to `angle` when `radial=true` */
-export let x = undefined; // TODO: Update Type
+export let x = undefined;
 /** Override `y` accessor from Chart context.  Applies to `radius` when `radial=true` */
-export let y = undefined; // TODO: Update Type
+export let y = undefined;
 /** Interpolate path data using d3-interpolate-path.  Works best without `draw` enabled */
 export let tweened = undefined;
 /** Draw path over time.  Works best without `tweened` enabled */
@@ -46,6 +48,10 @@ function getScaleValue(data, scale, accessor) {
         return accessor(data);
     }
 }
+const _x = accessor(x);
+const _y = accessor(y);
+$: xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
+$: yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
 let d = '';
 // @ts-expect-error
 $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
@@ -53,11 +59,11 @@ $: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
     const path = radial
         ? lineRadial()
-            .angle((d) => getScaleValue(d, $xScale, x ?? $contextX))
-            .radius((d) => getScaleValue(d, $yScale, y ?? $contextY))
+            .angle((d) => getScaleValue(d, $xScale, x ? _x : $contextX))
+            .radius((d) => getScaleValue(d, $yScale, y ? _y : $contextY))
         : d3Line()
-            .x((d) => getScaleValue(d, $xScale, x ?? $contextX))
-            .y((d) => getScaleValue(d, $yScale, y ?? $contextY));
+            .x((d) => getScaleValue(d, $xScale, x ? _x : $contextX) + xOffset)
+            .y((d) => getScaleValue(d, $yScale, y ? _y : $contextY) + yOffset);
     if (curve)
         path.curve(curve);
     if (defined)

package/dist/components/Spline.svelte.d.ts

@@ -2,14 +2,15 @@ import { SvelteComponentTyped } from "svelte";
 import { tweened as tweenedStore } from 'svelte/motion';
 import { draw as _drawTransition } from 'svelte/transition';
 import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
+import { type Accessor } from '../utils/common.js';
 declare const __propDef: {
     props: {
         [x: string]: any;
         data?: any;
         pathData?: string | undefined | null;
         radial?: boolean;
-        x?: ((d: any) => any) | undefined;
-        y?: ((d: any) => any) | undefined;
+        x?: Accessor;
+        y?: Accessor;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         draw?: boolean | Parameters<typeof _drawTransition>[1];
         curve?: CurveFactory | CurveFactoryLineOnly | undefined;

package/dist/components/Threshold.svelte

@@ -6,49 +6,53 @@
 import { area as d3Area, line as d3Line } from 'd3-shape';
 import { min, max } from 'd3-array';
 import { chartContext } from './ChartContext.svelte';
+import { accessor } from '../utils/common.js';
 const { data: contextData, xGet, yGet, yRange } = chartContext();
 // Properties to override what is used from context
 export let data = undefined; // TODO: Update Type
-export let x = undefined; // TODO: Update Type
-export let y0 = undefined; // TODO: Update Type
-export let y1 = undefined; // TODO: Update Type
+export let x = undefined;
+export let y0 = undefined;
+export let y1 = undefined;
 export let curve = undefined;
 export let defined = undefined;
 export let id = Math.random().toString(16).slice(-4);
+const _x = accessor(x);
+const _y0 = accessor(y0);
+const _y1 = accessor(y1);
 $: areaPath = d3Area()
-    .x(x ?? $xGet)
-    .y0(y0 ?? ((d) => $yGet(d)[0]))
-    .y1(y1 ?? ((d) => $yGet(d)[1]));
+    .x(x ? _x : $xGet)
+    .y0(y0 ? _y0 : (d) => $yGet(d)[0])
+    .y1(y1 ? _y1 : (d) => $yGet(d)[1]);
 $: if (curve)
     areaPath.curve(curve);
 $: if (defined)
     areaPath.defined(defined);
 $: clipPathBelow = d3Area()
-    .x(x ?? $xGet)
-    .y0(y0 ?? ((d) => $yGet(d)[0]))
-    .y1(y1 ?? ((d) => max($yRange)));
+    .x(x ? _x : $xGet)
+    .y0(y0 ? _y0 : (d) => $yGet(d)[0])
+    .y1(y1 ? _y1 : (d) => max($yRange));
 $: if (curve)
     clipPathBelow.curve(curve);
 $: if (defined)
     clipPathBelow.defined(defined);
 $: clipPathAbove = d3Area()
-    .x(x ?? $xGet)
-    .y0(y0 ?? ((d) => max($yRange)))
-    .y1(y1 ?? ((d) => $yGet(d)[1]));
+    .x(x ? _x : $xGet)
+    .y0(y0 ? _y0 : (d) => max($yRange))
+    .y1(y1 ? _y1 : (d) => $yGet(d)[1]);
 $: if (curve)
     clipPathAbove.curve(curve);
 $: if (defined)
     clipPathAbove.defined(defined);
 $: linePathAbove = d3Line()
-    .x(x ?? $xGet)
-    .y(y0 ?? ((d) => $yGet(d)[0]));
+    .x(x ? _x : $xGet)
+    .y(y0 ? _y0 : (d) => $yGet(d)[0]);
 $: if (curve)
     linePathAbove.curve(curve);
 $: if (defined)
     linePathAbove.defined(defined);
 $: linePathBelow = d3Line()
-    .x(x ?? $xGet)
-    .y(y1 ?? ((d) => $yGet(d)[1]));
+    .x(x ? _x : $xGet)
+    .y(y1 ? _y1 : (d) => $yGet(d)[1]);
 $: if (curve)
     linePathBelow.curve(curve);
 $: if (defined)

package/dist/components/Threshold.svelte.d.ts

@@ -1,11 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
 import type { CurveFactory } from 'd3-shape';
+import { type Accessor } from '../utils/common.js';
 declare const __propDef: {
     props: {
         data?: any;
-        x?: any;
-        y0?: any;
-        y1?: any;
+        x?: Accessor;
+        y0?: Accessor;
+        y1?: Accessor;
         curve?: CurveFactory | undefined;
         defined?: Parameters<{
             (): (d: [number, number], index: number, data: [number, number][]) => boolean;

package/dist/utils/scales.js

@@ -18,8 +18,7 @@ export function scaleBandInvert(scale) {
     const eachBand = scale.step();
     const paddingOuter = eachBand * (scale.paddingOuter?.() ?? scale.padding()); // `scaleBand` uses paddingOuter(), while `scalePoint` uses padding() for outer paddding - https://github.com/d3/d3-scale#point_padding
     return function (value) {
-        // TODO: Should this use Math.round to better select? https://stackoverflow.com/questions/38633082/d3-getting-invert-value-of-band-scales/50846323#comment104743795_50846323
-        const index = Math.floor((value - paddingOuter) / eachBand);
+        const index = Math.floor((value - paddingOuter / 2) / eachBand);
         return domain[Math.max(0, Math.min(index, domain.length - 1))];
     };
 }

package/package.json

@@ -4,13 +4,13 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.43.5",
+  "version": "0.43.7",
   "devDependencies": {
-    "@changesets/cli": "^2.27.5",
+    "@changesets/cli": "^2.27.7",
     "@mdi/js": "^7.4.47",
     "@rollup/plugin-dsv": "^3.0.4",
     "@sveltejs/adapter-auto": "^3.2.2",
-    "@sveltejs/kit": "^2.5.17",
+    "@sveltejs/kit": "^2.5.18",
     "@sveltejs/package": "^2.3.2",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
@@ -39,7 +39,7 @@
     "@types/topojson-simplify": "^3.0.3",
     "@types/topojson-specification": "^1.0.5",
     "autoprefixer": "^10.4.19",
-    "marked": "^13.0.0",
+    "marked": "^13.0.2",
     "mdsvex": "^0.11.2",
     "posthog-js": "^1.95.1",
     "prettier": "^3.3.2",
@@ -51,18 +51,18 @@
     "shapefile": "^0.6.6",
     "solar-calculator": "^0.3.0",
     "svelte": "^4.2.18",
-    "svelte-check": "^3.8.1",
+    "svelte-check": "^3.8.4",
     "svelte-json-tree": "^2.2.0",
-    "svelte-preprocess": "^6.0.1",
-    "svelte2tsx": "^0.7.10",
+    "svelte-preprocess": "^6.0.2",
+    "svelte2tsx": "^0.7.13",
     "tailwindcss": "^3.4.4",
     "topojson-client": "^3.1.0",
     "topojson-simplify": "^3.0.3",
     "tslib": "^2.6.3",
-    "typescript": "^5.5.2",
+    "typescript": "^5.5.3",
     "unist-util-visit": "^5.0.0",
     "us-atlas": "^3.0.1",
-    "vite": "^5.3.1"
+    "vite": "^5.3.3"
   },
   "type": "module",
   "dependencies": {
@@ -86,11 +86,11 @@
     "d3-tile": "^1.0.0",
     "d3-time": "^3.1.0",
     "date-fns": "^3.6.0",
-    "layercake": "^8.3.0",
+    "layercake": "^8.3.4",
     "lodash-es": "^4.17.21",
-    "posthog-js": "^1.140.1",
+    "posthog-js": "^1.145.0",
     "shapefile": "^0.6.6",
-    "svelte-ux": "^0.71.1",
+    "svelte-ux": "^0.72.4",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {