layerchart 2.0.0-next.7 → 2.0.0-next.8

package/dist/components/Chart.svelte

@@ -844,12 +844,12 @@
     if (verbose === true) {
       if (width <= 0 && isMounted === true) {
         console.warn(
-          '[LayerChart] Target div has zero or negative width. Did you forget to set an explicit width in CSS on the container?'
+          `[LayerChart] Target div has zero or negative width (${width}). Did you forget to set an explicit width in CSS on the container?`
         );
       }
       if (height <= 0 && isMounted === true) {
         console.warn(
-          '[LayerChart] Target div has zero or negative height. Did you forget to set an explicit height in CSS on the container?'
+          `[LayerChart] Target div has zero or negative height (${height}). Did you forget to set an explicit height in CSS on the container?`
         );
       }
     }

package/dist/components/Spline.svelte

@@ -351,8 +351,8 @@
 
   $effect(() => {
     if (!draw) return;
-    [tweenedState.current];
     // Anytime the path data changes, redraw
+    [pathData, data, ctx.data];
     key = Symbol();
   });
 </script>

package/dist/components/charts/BarChart.svelte

@@ -84,7 +84,7 @@
 
 <script lang="ts" generics="TData">
   import { onMount, type ComponentProps } from 'svelte';
-  import { scaleBand, scaleLinear } from 'd3-scale';
+  import { scaleBand, scaleLinear, scaleTime } from 'd3-scale';
   import { stack, stackOffsetDiverging, stackOffsetExpand, stackOffsetNone } from 'd3-shape';
   import { format } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
@@ -109,7 +109,7 @@
   import { asAny } from '../../utils/types.js';
   import type { Insets } from '../../utils/rect.svelte.js';
   import type { SeriesData, SimplifiedChartProps, SimplifiedChartPropsObject } from './types.js';
-  import type { AnyScale } from '../../utils/scales.svelte.js';
+  import { isScaleTime, type AnyScale } from '../../utils/scales.svelte.js';
   import { createLegendProps, SeriesState } from './utils.svelte.js';
   import { setTooltipMetaContext } from '../tooltip/tooltipMetaContext.js';
   import DefaultTooltip from './DefaultTooltip.svelte';
@@ -171,15 +171,56 @@
   const isStackSeries = $derived(seriesLayout.startsWith('stack'));
   const isGroupSeries = $derived(seriesLayout === 'group');
 
+  const chartData: Array<TData & { stackData?: any }> = $derived.by(() => {
+    let _chartData = (
+      seriesState.allSeriesData.length ? seriesState.allSeriesData : chartDataArray(data)
+    ) as Array<TData & { stackData?: any }>;
+    if (isStackSeries) {
+      const seriesKeys = seriesState.visibleSeries.map((s) => s.key);
+
+      const offset =
+        seriesLayout === 'stackExpand'
+          ? stackOffsetExpand
+          : seriesLayout === 'stackDiverging'
+            ? stackOffsetDiverging
+            : stackOffsetNone;
+      const stackData = stack()
+        .keys(seriesKeys)
+        .value((d, key) => {
+          const s = series.find((d) => d.key === key)!;
+          return accessor(s.value ?? s.key)(d as any);
+        })
+        .offset(offset)(chartDataArray(data)) as any[];
+
+      _chartData = _chartData.map((d, i) => {
+        return {
+          ...d,
+          stackData: stackData.map((sd) => sd[i]),
+        };
+      });
+    }
+    return _chartData;
+  });
+
   const xScale = $derived(
-    xScaleProp ?? (isVertical ? scaleBand().padding(bandPadding) : scaleLinear())
+    xScaleProp ??
+      (isVertical
+        ? scaleBand().padding(bandPadding)
+        : accessor(xProp)(chartData[0]) instanceof Date // TODO: also check for Array<Date> instances (ex. x={['start', 'end']})
+          ? scaleTime()
+          : scaleLinear())
   );
-  const xBaseline = $derived(isVertical ? undefined : 0);
+  const xBaseline = $derived(isVertical || isScaleTime(xScale) ? undefined : 0);
 
   const yScale = $derived(
-    yScaleProp ?? (isVertical ? scaleLinear() : scaleBand().padding(bandPadding))
+    yScaleProp ??
+      (isVertical
+        ? accessor(yProp)(chartData[0]) instanceof Date // TODO: also check for Array<Date> instances (ex. y={['start', 'end']})
+          ? scaleTime()
+          : scaleLinear()
+        : scaleBand().padding(bandPadding))
   );
-  const yBaseline = $derived(isVertical ? 0 : undefined);
+  const yBaseline = $derived(isVertical || isScaleTime(yScale) ? 0 : undefined);
 
   const x1Scale = $derived(
     isGroupSeries && isVertical ? scaleBand().padding(groupPadding) : undefined
@@ -214,37 +255,6 @@
     return d && typeof d === 'object' && 'stackData' in d;
   }
 
-  const chartData: Array<TData & { stackData?: any }> = $derived.by(() => {
-    let _chartData = (
-      seriesState.allSeriesData.length ? seriesState.allSeriesData : chartDataArray(data)
-    ) as Array<TData & { stackData?: any }>;
-    if (isStackSeries) {
-      const seriesKeys = seriesState.visibleSeries.map((s) => s.key);
-
-      const offset =
-        seriesLayout === 'stackExpand'
-          ? stackOffsetExpand
-          : seriesLayout === 'stackDiverging'
-            ? stackOffsetDiverging
-            : stackOffsetNone;
-      const stackData = stack()
-        .keys(seriesKeys)
-        .value((d, key) => {
-          const s = series.find((d) => d.key === key)!;
-          return accessor(s.value ?? s.key)(d as any);
-        })
-        .offset(offset)(chartDataArray(data)) as any[];
-
-      _chartData = _chartData.map((d, i) => {
-        return {
-          ...d,
-          stackData: stackData.map((sd) => sd[i]),
-        };
-      });
-    }
-    return _chartData;
-  });
-
   function getBarsProps(s: SeriesData<TData, typeof Bars>, i: number): ComponentProps<typeof Bars> {
     const isFirst = i == 0;
     const isLast = i == seriesState.visibleSeries.length - 1;
@@ -278,7 +288,12 @@
       y: isVertical ? valueAccessor : undefined,
       x1: isVertical && isGroupSeries ? (d) => s.value ?? s.key : undefined,
       y1: !isVertical && isGroupSeries ? (d) => s.value ?? s.key : undefined,
-      rounded: isStackLayout && i !== seriesState.visibleSeries.length - 1 ? 'none' : 'edge',
+      rounded:
+        isStackLayout && i !== seriesState.visibleSeries.length - 1
+          ? 'none'
+          : Array.isArray(xProp) || Array.isArray(yProp)
+            ? 'all'
+            : 'edge',
       radius: 4,
       strokeWidth: 1,
       insets: stackInsets,

package/dist/docs/Code.svelte

@@ -14,14 +14,14 @@
     class: className,
   }: {
     source: string | null;
-    language: string;
-    highlightedSource: string;
-    classes: {
+    language?: string;
+    highlightedSource?: string;
+    classes?: {
       root?: string;
       pre?: string;
       code?: string;
     };
-    class: string;
+    class?: string;
   } = $props();
 </script>
 

package/dist/docs/Code.svelte.d.ts

@@ -1,14 +1,14 @@
 import 'prism-svelte';
 type $$ComponentProps = {
     source: string | null;
-    language: string;
-    highlightedSource: string;
-    classes: {
+    language?: string;
+    highlightedSource?: string;
+    classes?: {
         root?: string;
         pre?: string;
         code?: string;
     };
-    class: string;
+    class?: string;
 };
 declare const Code: import("svelte").Component<$$ComponentProps, {}, "">;
 type Code = ReturnType<typeof Code>;

package/dist/docs/Json.svelte

@@ -1,8 +1,17 @@
 <script lang="ts">
+  import { type ComponentProps } from 'svelte';
   import JsonTree from 'svelte-json-tree';
   import { cls } from '@layerstack/tailwind';
 
-  const { value, defaultExpandedPaths = ['$'], class: className } = $props();
+  const {
+    value,
+    defaultExpandedPaths = ['$'],
+    class: className,
+  }: {
+    value: ComponentProps<JsonTree>['value'];
+    defaultExpandedPaths?: ComponentProps<JsonTree>['defaultExpandedPaths'];
+    class?: string;
+  } = $props();
 </script>
 
 <div class={cls('overflow-auto px-4 py-2 bg-[#1e1e1e]', className)}>

package/dist/docs/Json.svelte.d.ts

@@ -1,7 +1,10 @@
-declare const Json: import("svelte").Component<{
-    value: any;
-    defaultExpandedPaths?: any[];
-    class: any;
-}, {}, "">;
+import { type ComponentProps } from 'svelte';
+import JsonTree from 'svelte-json-tree';
+type $$ComponentProps = {
+    value: ComponentProps<JsonTree>['value'];
+    defaultExpandedPaths?: ComponentProps<JsonTree>['defaultExpandedPaths'];
+    class?: string;
+};
+declare const Json: import("svelte").Component<$$ComponentProps, {}, "">;
 type Json = ReturnType<typeof Json>;
 export default Json;

package/dist/docs/TilesetField.svelte

@@ -1,26 +1,26 @@
 <script lang="ts">
   import { SelectField, Switch } from 'svelte-ux';
 
-  export let doubleScale = devicePixelRatio > 1;
+  let { doubleScale = $bindable(devicePixelRatio > 1), serviceUrl = $bindable() } = $props();
 
   // TODO: Access via context, or possibly global state
   const ACCESS_TOKEN =
     'pk.eyJ1IjoidGVjaG5pcTM1IiwiYSI6ImNsZTR5cDd0ZjAyNm8zdnFvczhzdnFpcXkifQ.-LAr8sl5BZ3y-H0pDyD1qA';
 
   // https://docs.mapbox.com/api/maps/styles/
-  $: mapboxv1 = (style: string) => (x: number, y: number, z: number) => {
+  const mapboxv1 = $derived((style: string) => (x: number, y: number, z: number) => {
     return `https://api.mapbox.com/styles/v1/mapbox/${style}/tiles/${z}/${x}/${y}${
       doubleScale ? '@2x' : ''
     }?access_token=${ACCESS_TOKEN}`;
-  };
+  });
 
   // https://docs.mapbox.com/api/maps/raster-tiles/
   // https://docs.mapbox.com/data/tilesets/reference/mapbox-streets-v8/
-  $: mapboxv4 = (tileset: string) => (x: number, y: number, z: number) => {
+  const mapboxv4 = $derived((tileset: string) => (x: number, y: number, z: number) => {
     return `https://${'abc'[Math.abs(x + y) % 3]}.tiles.mapbox.com/v4/${tileset}/${z}/${x}/${y}${
       doubleScale ? '@2x' : ''
     }.png?access_token=${ACCESS_TOKEN}`;
-  };
+  });
 
   // https://apps.nationalmap.gov/services/
   const nationalmap = (tileset: string) => (x: number, y: number, z: number) => {
@@ -54,7 +54,7 @@
     return `https://${s}.tile.opentopomap.org/${z}/${x}/${y}.png`;
   };
 
-  $: services = {
+  const services = $derived<Record<string, Record<string, Function>>>({
     'mapbox v1': {
       'streets-v11': mapboxv1('streets-v11'),
       'light-v10': mapboxv1('light-v10'),
@@ -100,24 +100,25 @@
     // 'ArcGIS Vector': {
     // 	 'Community Map', url: arcgisVector('World_Basemap_v2'),
     // }
-  } as Record<string, Record<string, Function>>;
-
-  $: serviceOptions = Object.entries(services).flatMap(([group, service]) => {
-    return Object.entries(service).map(([label, value]) => {
-      return { label, value: `${group}:${label}`, group, serviceUrl: value };
-    });
   });
 
-  $: defaultServiceUrl = services['mapbox v1']['streets-v11'];
-  export let serviceUrl = defaultServiceUrl;
+  const serviceOptions = $derived(
+    Object.entries(services).flatMap(([group, service]) => {
+      return Object.entries(service).map(([label, value]) => {
+        return { label, value: `${group}:${label}`, group, serviceUrl: value };
+      });
+    })
+  );
 
-  $: getServiceUrl = (option: string) => {
+  const getServiceUrl = $derived((option: string) => {
     const [selectedService, selectedTileset] = selected.split(':');
     return services[selectedService][selectedTileset];
-  };
+  });
 
-  let selected = 'mapbox v1:streets-v11';
-  $: serviceUrl = getServiceUrl(selected);
+  let selected = $state('mapbox v1:streets-v11');
+  $effect(() => {
+    serviceUrl = getServiceUrl(selected);
+  });
 </script>
 
 <SelectField
@@ -128,7 +129,7 @@
   toggleIcon={null}
   stepper
 >
-  <div slot="append" on:click|stopPropagation role="none">
+  <div slot="append" onclick={(e) => e.stopPropagation()} role="none">
     <div class="text-[10px] text-surface-content/50 text-center">2x</div>
     <Switch bind:checked={doubleScale} size="md" />
   </div>

package/dist/docs/TilesetField.svelte.d.ts

@@ -1,23 +1,6 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const TilesetField: $$__sveltets_2_IsomorphicComponent<{
-    doubleScale?: boolean;
-    serviceUrl?: Function;
-}, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type TilesetField = InstanceType<typeof TilesetField>;
+declare const TilesetField: import("svelte").Component<{
+    doubleScale?: any;
+    serviceUrl?: any;
+}, {}, "doubleScale" | "serviceUrl">;
+type TilesetField = ReturnType<typeof TilesetField>;
 export default TilesetField;

package/dist/utils/scales.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type ScaleBand } from 'd3-scale';
+import { type ScaleBand, type ScaleTime } from 'd3-scale';
 import { type MotionProp, type MotionOptions, type SpringOptions, type TweenOptions } from './motion.svelte.js';
 import type { Accessor } from './common.js';
 import type { OnlyObjects } from './types.js';
@@ -23,6 +23,8 @@ export type AnyScale<TInput extends SingleDomainType = any, TOutput extends Sing
     thresholds?: () => TInput[];
     quantiles?: () => TInput[];
 };
+export declare function isScaleBand(scale: AnyScale<any, any>): scale is ScaleBand<any>;
+export declare function isScaleTime(scale: AnyScale<any, any>): scale is ScaleTime<any, any>;
 export declare function getRange(scale: any): any[];
 export type SingleDomainType = number | string | Date | null | undefined;
 export type DomainType = (number | string | Date | null | undefined)[] | null | undefined;
@@ -45,7 +47,6 @@ export declare function createMotionScale<Domain, Range>(scale: AnyScale, motion
  * 			https://gist.github.com/LuisSevillano/d53a1dc529eef518780c6df99613e2fd
  */
 export declare function scaleBandInvert(scale: ScaleBand<any>): (value: number) => any;
-export declare function isScaleBand(scale: AnyScale<any, any>): scale is ScaleBand<any>;
 /**
  *  Generic way to invert a scale value, handling scaleBand and continuous scales (linear, time, etc).
  *  Useful to map mouse event location (x,y) to domain value

package/dist/utils/scales.svelte.js

@@ -5,6 +5,13 @@ import { Spring, Tween } from 'svelte/motion';
 function isAnyScale(scale) {
     return typeof scale === 'function' && typeof scale.range === 'function';
 }
+export function isScaleBand(scale) {
+    return typeof scale.bandwidth === 'function';
+}
+export function isScaleTime(scale) {
+    const domain = scale.domain();
+    return domain[0] instanceof Date || domain[1] instanceof Date;
+}
 export function getRange(scale) {
     if (isAnyScale(scale)) {
         return scale.range();
@@ -54,9 +61,6 @@ export function scaleBandInvert(scale) {
         return domain[Math.max(0, Math.min(index, domain.length - 1))];
     };
 }
-export function isScaleBand(scale) {
-    return typeof scale.bandwidth === 'function';
-}
 /**
  *  Generic way to invert a scale value, handling scaleBand and continuous scales (linear, time, etc).
  *  Useful to map mouse event location (x,y) to domain value

package/dist/utils/ticks.js

@@ -1,7 +1,7 @@
 import { timeYear, timeMonth, timeWeek, timeDay, timeHour, timeMinute, timeSecond, timeMillisecond, } from 'd3-time';
 import { format } from 'date-fns';
 import { formatDate, PeriodType, getDuration, fail } from '@layerstack/utils';
-import { isScaleBand } from './scales.svelte.js';
+import { isScaleBand, isScaleTime } from './scales.svelte.js';
 // TODO: Use PeriodType along with Duration to format (and possibly select intervals)
 const majorTicks = [
     {
@@ -170,6 +170,12 @@ export function resolveTickVals(scale, ticks, placement) {
             ? scale.domain().filter((_, i) => i % ticks === 0)
             : scale.domain();
     }
+    // if (isScaleTime(scale)) {
+    //   const interval = getMajorTicks(scale.domain()[0], scale.domain()[1])!;
+    //   // const interval = getMinorTicks(scale.domain()[0], scale.domain()[1]);
+    //   return scale.ticks(interval);
+    // }
+    // Ticks from scale
     if (scale.ticks && typeof scale.ticks === 'function') {
         if (placement) {
             return scale.ticks(ticks ?? (placement === 'left' || placement === 'right' ? 4 : undefined));

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.7",
+  "version": "2.0.0-next.8",
   "devDependencies": {
     "@changesets/cli": "^2.29.4",
     "@iconify-json/lucide": "^1.2.42",