layerchart 2.0.0-next.4 → 2.0.0-next.40

package/dist/docs/Preview.svelte

@@ -1,34 +1,32 @@
 <script lang="ts">
   import { slide } from 'svelte/transition';
-  // TODO: No longer copy from svelte-ux after prismjs is migrated to ESM (commonjs causes issue with Vite from another library)
-  import Prism from 'prismjs';
-  import 'prism-svelte';
-  import { mdiCodeTags, mdiTable } from '@mdi/js';
+  import LucideCode from '~icons/lucide/code';
+  import LucideTable from '~icons/lucide/table';
 
   import { Button, CopyButton, Dialog, Toggle, Tooltip } from 'svelte-ux';
   import { cls } from '@layerstack/tailwind';
 
   import Code from './Code.svelte';
   import Json from './Json.svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
   import type { Snippet } from 'svelte';
 
-  let {
-    code,
-    data,
-    language = 'svelte',
-    highlightedCode = code ? Prism.highlight(code, Prism.languages.svelte, language) : '',
-    showCode = false,
-    class: className,
-    children,
-  }: {
+  interface Props {
+    children: Snippet;
     code?: string;
     data?: any;
     language?: string;
-    highlightedCode?: string;
     showCode?: boolean;
-    class?: string | null;
-    children: Snippet;
-  } = $props();
+  }
+
+  let {
+    children,
+    code = undefined,
+    data = undefined,
+    language = 'svelte',
+    showCode = false,
+    class: className,
+  }: Props & HTMLAttributes<HTMLDivElement> = $props();
 
   /**
    * Custom JSON replacer (to use with JSON.stringify()) to convert `Date` instances to `new Date()`
@@ -54,21 +52,21 @@
   }
 </script>
 
-<div class={cls('Preview border rounded-sm bg-surface-100', className)}>
+<div class={cls('Preview border rounded bg-surface-100', className)}>
   <div class="p-4">
-    {@render children?.()}
+    {@render children()}
   </div>
 
   {#if code && showCode}
-    <div transition:slide class="bg-surface-200">
-      <Code source={code} highlightedSource={highlightedCode} classes={{ pre: 'rounded-t-none' }} />
+    <div transition:slide class="border-t">
+      <Code source={code} {language} />
     </div>
   {/if}
 </div>
 
 {#if code}
   <Button
-    icon={mdiCodeTags}
+    icon={LucideCode}
     class="text-surface-content/70 py-1"
     on:click={() => (showCode = !showCode)}
   >
@@ -78,7 +76,8 @@
 
 {#if data}
   <Toggle let:on={open} let:toggle let:toggleOff>
-    <Button icon={mdiTable} class="text-surface-content/70 py-1" on:click={toggle}>View data</Button
+    <Button icon={LucideTable} class="text-surface-content/70 py-1" on:click={toggle}
+      >View data</Button
     >
     <Dialog
       {open}

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

@@ -1,14 +1,13 @@
-import 'prism-svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
-type $$ComponentProps = {
+interface Props {
+    children: Snippet;
     code?: string;
     data?: any;
     language?: string;
-    highlightedCode?: string;
     showCode?: boolean;
-    class?: string | null;
-    children: Snippet;
-};
+}
+type $$ComponentProps = Props & HTMLAttributes<HTMLDivElement>;
 declare const Preview: import("svelte").Component<$$ComponentProps, {}, "">;
 type Preview = ReturnType<typeof Preview>;
 export default Preview;

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/docs/ViewSourceButton.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
   import type { ComponentProps } from 'svelte';
   import { Button, Dialog, Toggle, Tooltip } from 'svelte-ux';
-  import { mdiGithub } from '@mdi/js';
+  import LucideGithub from '~icons/lucide/github.svelte';
 
   import Code from './Code.svelte';
 
-  export let label: string;
-  export let source: string | undefined = undefined;
-  export let href: string | undefined = undefined;
-  export let icon: ComponentProps<Button>['icon'];
+  const {
+    label,
+    source,
+    href,
+    icon,
+  }: { label: string; source?: string; href?: string; icon: ComponentProps<Button>['icon'] } =
+    $props();
 </script>
 
 {#if source}
@@ -26,13 +29,13 @@
         </div>
 
         {#if href}
-          <Button icon={mdiGithub} variant="fill-light" color="primary" {href} target="_blank">
+          <Button icon={LucideGithub} variant="fill-light" color="primary" {href} target="_blank">
             View on Github
           </Button>
         {/if}
       </div>
 
-      <div class="overflow-auto">
+      <div class="overflow-auto border-t">
         <Code {source} language={source.startsWith('<script') ? 'svelte' : 'js'} />
       </div>
 

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

@@ -1,25 +1,11 @@
 import type { ComponentProps } from 'svelte';
 import { Button } from 'svelte-ux';
-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 ViewSourceButton: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     label: string;
-    source?: string | undefined;
-    href?: string | undefined;
-    icon: ComponentProps<Button>["icon"];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ViewSourceButton = InstanceType<typeof ViewSourceButton>;
+    source?: string;
+    href?: string;
+    icon: ComponentProps<Button>['icon'];
+};
+declare const ViewSourceButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type ViewSourceButton = ReturnType<typeof ViewSourceButton>;
 export default ViewSourceButton;

package/dist/states/series.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Component } from 'svelte';
+import type { SeriesData } from '../components/charts/types.js';
+import { SelectionState } from '@layerstack/svelte-state';
+declare class HighlightKey<TData, SeriesComponent extends Component> {
+    current: string | null;
+    set: (seriesKey: typeof this.current) => void;
+}
+export declare class SeriesState<TData, TComponent extends Component> {
+    #private;
+    selectedKeys: SelectionState<string, false>;
+    highlightKey: HighlightKey<TData, TComponent>;
+    constructor(getSeries: () => SeriesData<TData, TComponent>[]);
+    get series(): SeriesData<TData, TComponent>[];
+    get isDefaultSeries(): boolean;
+    get visibleSeries(): SeriesData<TData, TComponent>[];
+    /**
+     * Check if series is visible
+     */
+    isVisible(seriesKey: SeriesData<TData, TComponent>['key']): boolean;
+    /**
+     * Check if series is highlighted
+     * Changing default to `true` is useful to determine if series should be faded
+     */
+    isHighlighted(seriesKey: SeriesData<TData, TComponent>['key'], defaultValue?: boolean): boolean;
+    get allSeriesData(): Array<TData & {
+        seriesKey: string;
+    }>;
+    get allSeriesColors(): Array<NonNullable<SeriesData<TData, TComponent>["color"]>>;
+}
+export {};

package/dist/states/series.svelte.js

@@ -0,0 +1,54 @@
+import { SelectionState } from '@layerstack/svelte-state';
+class HighlightKey {
+    current = $state(null);
+    set = (seriesKey) => {
+        this.current = seriesKey;
+    };
+}
+export class SeriesState {
+    #series = $state.raw([]);
+    selectedKeys = new SelectionState();
+    highlightKey = new HighlightKey();
+    constructor(getSeries) {
+        this.#series = getSeries();
+        $effect.pre(() => {
+            // keep series state in sync with the prop
+            this.#series = getSeries();
+        });
+    }
+    get series() {
+        return this.#series;
+    }
+    get isDefaultSeries() {
+        return this.#series.length === 1 && this.#series[0].key === 'default';
+    }
+    get visibleSeries() {
+        return this.#series.filter((s) => this.isVisible(s.key));
+    }
+    /**
+     * Check if series is visible
+     */
+    isVisible(seriesKey) {
+        return this.selectedKeys.isEmpty() || this.selectedKeys.isSelected(seriesKey);
+    }
+    /**
+     * Check if series is highlighted
+     * Changing default to `true` is useful to determine if series should be faded
+     */
+    isHighlighted(seriesKey, defaultValue = false) {
+        if (this.highlightKey.current === null) {
+            return defaultValue;
+        }
+        else {
+            return this.highlightKey.current === seriesKey;
+        }
+    }
+    get allSeriesData() {
+        return this.#series
+            .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
+            .filter((d) => d);
+    }
+    get allSeriesColors() {
+        return this.#series.map((s) => s.color).filter((c) => c != null);
+    }
+}

package/dist/styles/daisyui-5.css

@@ -0,0 +1,6 @@
+.lc-root-container {
+  --color-surface-100: var(--color-base-100);
+  --color-surface-200: var(--color-base-200);
+  --color-surface-300: var(--color-base-300);
+  --color-surface-content: var(--color-base-content);
+}

package/dist/styles/shadcn-svelte.css

@@ -0,0 +1,11 @@
+/*
+  When NOT using shadcn-svelte Chart component.
+  Not typically needed even when using built-in Chart, as defaults typically are sufficient
+*/
+.lc-root-container {
+  --color-primary: var(--primary);
+  --color-surface-100: var(--card-background);
+  --color-surface-200: var(--card-muted);
+  /* No direct mapping, should add explicit color (light and dark mode) */
+  --color-surface-content: var(--card-foreground);
+}

package/dist/styles/skeleton-3.css

@@ -0,0 +1,15 @@
+.lc-root-container {
+  --color-primary: var(--color-primary-500);
+
+  --color-surface-100: var(--color-surface-50);
+  --color-surface-200: var(--color-surface-100);
+  --color-surface-300: var(--color-surface-200);
+  --color-surface-content: var(--base-font-color);
+
+  html.dark & {
+    --color-surface-100: var(--color-surface-700);
+    --color-surface-200: var(--color-surface-800);
+    --color-surface-300: var(--color-surface-900);
+    --color-surface-content: var(--base-font-color-dark);
+  }
+}

package/dist/utils/arcText.svelte.js

@@ -216,7 +216,7 @@ export function createArcTextProps(props, opts = {}, position) {
             x: x,
             y: y,
             textAnchor,
-            'dominant-baseline': 'middle',
+            dominantBaseline: 'middle',
         };
     });
     const current = $derived.by(() => {
@@ -224,21 +224,21 @@ export function createArcTextProps(props, opts = {}, position) {
             return {
                 path: innerPath.current,
                 ...sharedProps,
-                'dominant-baseline': innerDominantBaseline,
+                dominantBaseline: innerDominantBaseline,
             };
         }
         else if (position === 'outer') {
             return {
                 path: outerPath.current,
                 ...sharedProps,
-                'dominant-baseline': outerDominantBaseline,
+                dominantBaseline: outerDominantBaseline,
             };
         }
         else if (position === 'middle') {
             return {
                 path: middlePath.current,
                 ...sharedProps,
-                'dominant-baseline': 'middle',
+                dominantBaseline: 'middle',
             };
         }
         else if (position === 'centroid') {

package/dist/utils/array.d.ts

@@ -1,5 +1,6 @@
 import type { Numeric } from 'd3-array';
 import { extent as d3extent } from 'd3-array';
+import { type Accessor } from './common.js';
 /**
  * Wrapper around d3-array's `extent()` but remove [undefined, undefined] return type
  */
@@ -11,3 +12,13 @@ export declare function extent<T extends Numeric>(iterable: Parameters<typeof d3
  * of making a set
  */
 export declare function arraysEqual(arr1: unknown[], arr2: unknown[]): boolean;
+/**
+ * Add `lanes` property to each element in the data array support densely packing.
+ * This is useful for visualizing overlapping events in a timeline / Gantt chart.
+ */
+export declare function applyLanes<T extends Record<string, any>>(data: T[], options?: {
+    start: Accessor<T>;
+    end: Accessor<T>;
+}): (T & {
+    lane: number;
+})[];

package/dist/utils/array.js

@@ -1,4 +1,5 @@
 import { extent as d3extent } from 'd3-array';
+import { accessor } from './common.js';
 /**
  * Wrapper around d3-array's `extent()` but remove [undefined, undefined] return type
  */
@@ -18,3 +19,25 @@ export function arraysEqual(arr1, arr2) {
         return arr2.includes(k);
     });
 }
+/**
+ * Add `lanes` property to each element in the data array support densely packing.
+ * This is useful for visualizing overlapping events in a timeline / Gantt chart.
+ */
+export function applyLanes(data, options = {
+    start: 'start',
+    end: 'end',
+}) {
+    const result = [];
+    let stack = [];
+    const startAccessor = accessor(options.start);
+    const endAccessor = accessor(options.end);
+    for (const d of data) {
+        let lane = stack.findIndex((s) => endAccessor(s) <= startAccessor(d) && startAccessor(s) < startAccessor(d));
+        if (lane === -1) {
+            lane = stack.length;
+        }
+        result.push({ ...d, lane });
+        stack[lane] = d;
+    }
+    return result;
+}

package/dist/utils/array.test.d.ts

@@ -0,0 +1 @@
+export {};