layerchart 2.0.0-next.38 → 2.0.0-next.39

package/dist/components/tooltip/TooltipHeader.svelte

@@ -56,7 +56,6 @@
 <script lang="ts">
   import { format as formatUtil, type FormatType, type FormatConfig } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
-  import { layerClass } from '../../utils/attributes.js';
 
   let {
     ref: refProp = $bindable(),
@@ -89,25 +88,14 @@
 </script>
 
 <div
-  class={cls(
-    layerClass('tooltip-header'),
-    'font-semibold whitespace-nowrap border-b mb-1 pb-1 flex items-center gap-2',
-    classes.root,
-    props.root?.class,
-    className
-  )}
+  class={cls('lc-tooltip-header', classes.root, props.root?.class, className)}
   {...restProps}
   bind:this={ref}
 >
   {#if color}
     <div
       bind:this={colorRef}
-      class={cls(
-        layerClass('tooltip-header-color'),
-        'color',
-        'inline-block size-2 rounded-full bg-[var(--color)]',
-        classes.color
-      )}
+      class={cls('lc-tooltip-header-color', classes.color)}
       style:--color={color}
     ></div>
   {/if}
@@ -118,3 +106,28 @@
     {format ? formatUtil(value, asAny(format)) : value}
   {/if}
 </div>
+
+<style>
+  @layer component {
+    :where(.lc-tooltip-header) {
+      font-weight: 600;
+      white-space: nowrap;
+      border-bottom: 1px solid
+        color-mix(in oklab, var(--color-surface-content, currentColor) 20%, transparent);
+      margin-bottom: 4px;
+      padding-bottom: 4px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    :where(.lc-tooltip-header-color) {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 9999px; /* rounded-full */
+      background-color: var(--color);
+      flex-shrink: 0;
+    }
+  }
+</style>

package/dist/components/tooltip/TooltipItem.svelte

@@ -78,7 +78,6 @@
   import { format as formatUtil, type FormatType, type FormatConfig } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
   import type { Snippet } from 'svelte';
-  import { layerClass } from '../../utils/attributes.js';
 
   let {
     ref: refProp = $bindable(),
@@ -129,37 +128,19 @@
 
 <div
   {...props.root}
-  class={cls(
-    layerClass('tooltip-item-root'),
-    'contents',
-    classes.root,
-    className,
-    props.root?.class
-  )}
+  class={cls('lc-tooltip-item-root', classes.root, className, props.root?.class)}
   {...restProps}
   bind:this={ref}
 >
   <div
     {...props.label}
-    class={cls(
-      layerClass('tooltip-item-label'),
-      'label',
-      'flex items-center gap-2 whitespace-nowrap',
-      classes.label,
-      props.label?.class
-    )}
+    class={cls('lc-tooltip-item-label', 'label', classes.label, props.label?.class)}
     bind:this={labelRef}
   >
     {#if color}
       <div
         {...props.color}
-        class={cls(
-          layerClass('tooltip-item-color'),
-          'color',
-          'inline-block size-2 rounded-full bg-[var(--color)]',
-          classes.color,
-          props.color?.class
-        )}
+        class={cls('lc-tooltip-item-color', 'color', classes.color, props.color?.class)}
         style:--color={color}
         bind:this={colorRef}
       ></div>
@@ -174,17 +155,8 @@
   <div
     bind:this={valueRef}
     {...props.value}
-    class={cls(
-      layerClass('tooltip-item-value'),
-      'value',
-      'tabular-nums',
-      {
-        'text-right': valueAlign === 'right',
-        'text-center': valueAlign === 'center',
-      },
-      classes.value,
-      props.value?.class
-    )}
+    class={cls('lc-tooltip-item-value', 'value', classes.value, props.value?.class)}
+    data-align={valueAlign}
   >
     {#if children}
       {@render children()}
@@ -194,3 +166,39 @@
     {/if}
   </div>
 </div>
+
+<style>
+  @layer component {
+    :where(.lc-tooltip-item-root) {
+      display: contents;
+    }
+
+    :where(.lc-tooltip-item-color) {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-radius: 9999px; /* full */
+      background-color: var(--color);
+    }
+
+    :where(.lc-tooltip-item-label) {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      white-space: nowrap;
+    }
+
+    :where(.lc-tooltip-item-value) {
+      /* tabular-nums */
+      font-variant-numeric: tabular-nums;
+
+      &[data-align='right'] {
+        text-align: right;
+      }
+
+      &[data-align='center'] {
+        text-align: center;
+      }
+    }
+  }
+</style>

package/dist/components/tooltip/TooltipList.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
-  import { layerClass } from '../../utils/attributes.js';
   import type { HTMLAttributes } from 'svelte/elements';
 
   let {
@@ -19,14 +18,17 @@
   });
 </script>
 
-<div
-  bind:this={ref}
-  class={cls(
-    layerClass('tooltip-list'),
-    'grid grid-cols-[1fr_auto] gap-x-2 gap-y-1 items-start',
-    className
-  )}
-  {...restProps}
->
+<div bind:this={ref} class={cls('lc-tooltip-list', className)} {...restProps}>
   {@render children?.()}
 </div>
+
+<style>
+  @layer component {
+    :where(.lc-tooltip-list) {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: 4px 8px;
+      align-items: start;
+    }
+  }
+</style>

package/dist/components/tooltip/TooltipSeparator.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
-  import { layerClass } from '../../utils/attributes.js';
   import type { HTMLAttributes } from 'svelte/elements';
 
   let {
@@ -18,14 +17,23 @@
   });
 </script>
 
-<div
-  bind:this={ref}
-  class={cls(
-    layerClass('tooltip-separator'),
-    'rounded-sm bg-surface-content/20 my-1 col-span-full h-px',
-    className
-  )}
-  {...restProps}
->
+<div bind:this={ref} class={cls('lc-tooltip-separator', className)} {...restProps}>
   {@render children?.()}
 </div>
+
+<style>
+  @layer component {
+    :where(.lc-tooltip-separator) {
+      height: 1px;
+      border-radius: 4px;
+      background-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 20%,
+        transparent
+      );
+      margin-top: 4px;
+      margin-bottom: 4px;
+      grid-column: 1 / -1; /* col-span-full */
+    }
+  }
+</style>

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/attributes.d.ts

@@ -1,14 +1,4 @@
-/**
- * Creates a string containing a class name that can be used by
- * developers to target a specific layer/element within a LayerChart.
- *
- * This is a function so that the class names remain consistent and the
- * prefix/structure can be changed in the future if needed
- *
- * @param layerName - the name of the layer to be appended to the generated class name
- * @returns a string to be used as a class on an element
- */
-export declare function layerClass(layerName: string): string;
+import type { ClassValue } from 'svelte/elements';
 type ExtractObjectType<T> = T extends object ? (T extends Function ? never : T) : never;
 type WithClass<T> = T & {
     class?: string;
@@ -21,9 +11,9 @@ type DefaultProps = WithClass<{
  * a class name to its class property to identify the layer for CSS targeting.
  *
  * @param props The props to be extracted, can be an object, function or any other type
- * @param layerName The name of the layer used to apply a layer classname for targeting styling
+ * @param className The class name to be applied to the layer for targeting styling (e.g. 'lc-layer')
  * @param extraClasses Additional classes to be applied to the layer if they don't exist in the props already
  * @returns a typed spreadable object with props for the layer
  */
-export declare function extractLayerProps<T>(props: T, layerName: string, extraClasses?: string): WithClass<ExtractObjectType<T> extends never ? DefaultProps : ExtractObjectType<T>>;
+export declare function extractLayerProps<T>(props: T, className: string, ...extraClasses: ClassValue[]): WithClass<ExtractObjectType<T> extends never ? DefaultProps : ExtractObjectType<T>>;
 export {};

package/dist/utils/attributes.js

@@ -1,17 +1,4 @@
 import { cls } from '@layerstack/tailwind';
-/**
- * Creates a string containing a class name that can be used by
- * developers to target a specific layer/element within a LayerChart.
- *
- * This is a function so that the class names remain consistent and the
- * prefix/structure can be changed in the future if needed
- *
- * @param layerName - the name of the layer to be appended to the generated class name
- * @returns a string to be used as a class on an element
- */
-export function layerClass(layerName) {
-    return `lc-${layerName}`;
-}
 // type guard to narrow props to an object with optional class
 // for extractLayerProps
 function isObjectWithClass(val) {
@@ -22,19 +9,18 @@ function isObjectWithClass(val) {
  * a class name to its class property to identify the layer for CSS targeting.
  *
  * @param props The props to be extracted, can be an object, function or any other type
- * @param layerName The name of the layer used to apply a layer classname for targeting styling
+ * @param className The class name to be applied to the layer for targeting styling (e.g. 'lc-layer')
  * @param extraClasses Additional classes to be applied to the layer if they don't exist in the props already
  * @returns a typed spreadable object with props for the layer
  */
-export function extractLayerProps(props, layerName, extraClasses) {
-    const className = layerClass(layerName);
+export function extractLayerProps(props, className, ...extraClasses) {
     if (isObjectWithClass(props)) {
         return {
             ...props,
-            class: cls(className, props.class ?? '', extraClasses),
+            class: cls(className, ...extraClasses, props.class),
         };
     }
     return {
-        class: cls(className, extraClasses),
+        class: cls(className, ...extraClasses),
     };
 }

package/dist/utils/common.d.ts

@@ -16,3 +16,12 @@ export declare function defaultChartPadding<TData, SeriesComponent extends Compo
  * Handles complex objects such as `Date` by invoking `.valueOf()`
  */
 export declare function findRelatedData(data: any[], original: any, accessor: Function): any;
+/**
+ * Return the object if the value is an object, otherwise return null.
+ * Functions (including Snippet types) are treated as non-objects and return null.
+ */
+export declare function getObjectOrNull<T>(value: T): T extends object ? T extends Function ? null : T : T extends null ? null : T extends undefined ? undefined : null;
+/**
+ * Call with args if function, otherwise return the value.
+ */
+export declare function resolveMaybeFn<T>(value: T | ((...args: any[]) => T), ...args: any[]): any;

package/dist/utils/common.js

@@ -40,7 +40,7 @@ export function defaultChartPadding(axis = true, legend = false) {
         return {
             top: axis === true || axis === 'y' ? 4 : 0,
             left: axis === true || axis === 'y' ? 20 : 0,
-            bottom: (axis === true || axis === 'x' ? 20 : 0) + (legend === true ? 32 : 0),
+            bottom: (axis === true || axis === 'x' ? 20 : 0) + (legend ? 32 : 0),
             right: axis === true || axis === 'x' ? 4 : 0,
         };
     }
@@ -54,3 +54,20 @@ export function findRelatedData(data, original, accessor) {
         return accessor(d)?.valueOf() === accessor(original)?.valueOf();
     });
 }
+/**
+ * Return the object if the value is an object, otherwise return null.
+ * Functions (including Snippet types) are treated as non-objects and return null.
+ */
+export function getObjectOrNull(value) {
+    if (typeof value === 'object')
+        return value;
+    if (value === undefined)
+        return undefined;
+    return null;
+}
+/**
+ * Call with args if function, otherwise return the value.
+ */
+export function resolveMaybeFn(value, ...args) {
+    return typeof value === 'function' ? value(...args) : value;
+}

package/dist/utils/common.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { accessor } from './common.js';
+import { accessor, resolveMaybeFn, getObjectOrNull } from './common.js';
 export const testData = {
     one: 1,
     two: 2,
@@ -36,3 +36,28 @@ describe('accessor', () => {
         expect(actual).toEqual(testData);
     });
 });
+describe('getObjectOrNull', () => {
+    it('returns null for non-object values', () => {
+        expect(getObjectOrNull(5)).toBeNull();
+        expect(getObjectOrNull('string')).toBeNull();
+        expect(getObjectOrNull(null)).toBeNull();
+        expect(getObjectOrNull(undefined)).toBeUndefined();
+    });
+    it('returns null for functions', () => {
+        const fn = () => { };
+        expect(getObjectOrNull(fn)).toBeNull();
+    });
+    it('returns the object if value is an object', () => {
+        const obj = { a: 1 };
+        expect(getObjectOrNull(obj)).toBe(obj);
+    });
+});
+describe('resolveMaybeFn', () => {
+    it('returns value if not a function', () => {
+        expect(resolveMaybeFn(5)).toBe(5);
+    });
+    it('calls function with args', () => {
+        const fn = (a, b) => a + b;
+        expect(resolveMaybeFn(fn, 2, 3)).toBe(5);
+    });
+});

package/dist/utils/math.d.ts

@@ -23,6 +23,23 @@ export declare function cartesianToPolar(x: number, y: number): {
     radius: number;
     radians: number;
 };
+/**
+ * Calculate the angle and length between two points
+ * @param point1 - First point
+ * @param point2 - Second point
+ * @returns Angle in degrees and length
+ */
+export declare function pointsToAngleAndLength(point1: {
+    x: number;
+    y: number;
+}, point2: {
+    x: number;
+    y: number;
+}): {
+    radians: number;
+    angle: number;
+    length: number;
+};
 /** Convert celsius temperature to fahrenheit */
 export declare function celsiusToFahrenheit(temperature: number): number;
 /** Convert fahrenheit temperature to celsius */

package/dist/utils/math.js

@@ -37,6 +37,23 @@ export function cartesianToPolar(x, y) {
         radians,
     };
 }
+/**
+ * Calculate the angle and length between two points
+ * @param point1 - First point
+ * @param point2 - Second point
+ * @returns Angle in degrees and length
+ */
+export function pointsToAngleAndLength(point1, point2) {
+    const dx = point2.x - point1.x;
+    const dy = point2.y - point1.y;
+    const radians = Math.atan2(dy, dx);
+    const length = Math.sqrt(dx * dx + dy * dy);
+    return {
+        radians,
+        angle: radiansToDegrees(radians),
+        length,
+    };
+}
 /** Convert celsius temperature to fahrenheit */
 export function celsiusToFahrenheit(temperature) {
     return temperature * (9 / 5) + 32;

package/dist/utils/types.d.ts

@@ -1,7 +1,8 @@
+import type { MouseEventHandler, PointerEventHandler } from 'svelte/elements';
+import type { TransitionConfig } from 'svelte/transition';
 import type { HierarchyNode } from 'd3-hierarchy';
-import type { AnyScale } from './scales.svelte.js';
 import type { SankeyGraph } from 'd3-sankey';
-import type { TransitionConfig } from 'svelte/transition';
+import type { AnyScale } from './scales.svelte.js';
 /**
  * Useful to workaround Svelte 3/4 markup type issues
  * TODO: Remove usage after migrating to Svelte 5
@@ -79,6 +80,18 @@ export type CommonStyleProps = {
      */
     opacity?: number;
 };
+/**
+ * Events for primatives which support `SVGRectElement` and `HTMLDivElement` elements based on render context
+ */
+export type CommonEvents = {
+    onclick?: MouseEventHandler<Element> | null;
+    ondblclick?: MouseEventHandler<Element> | null;
+    onpointerenter?: PointerEventHandler<Element> | null;
+    onpointermove?: PointerEventHandler<Element> | null;
+    onpointerleave?: PointerEventHandler<Element> | null;
+    onpointerover?: PointerEventHandler<Element> | null;
+    onpointerout?: PointerEventHandler<Element> | null;
+};
 export type OnlyObjects<T> = T extends object ? T : never;
 export type Getter<T> = () => T;
 export type GetterValues<T> = {

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "2.0.0-next.38",
+  "version": "2.0.0-next.39",
   "devDependencies": {
     "@changesets/cli": "^2.29.6",
     "@iconify-json/lucide": "^1.2.62",
@@ -109,6 +109,10 @@
       "types": "./dist/utils/*.d.ts",
       "svelte": "./dist/utils/*.js",
       "default": "./dist/utils/*.js"
+    },
+    "./*.css": {
+      "style": "./dist/styles/*.css",
+      "default": "./dist/styles/*.css"
     }
   },
   "files": [