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

package/dist/components/TransformContext.svelte

@@ -216,8 +216,6 @@
   import type { Without } from '../utils/types.js';
   import { getChartContext } from './Chart.svelte';
   import type { Snippet } from 'svelte';
-  import { cls } from '@layerstack/tailwind';
-  import { layerClass } from '../utils/attributes.js';
   import {
     createControlledMotion,
     createMotionTracker,
@@ -519,9 +517,17 @@
   onpointerup={onPointerUp}
   ondblclick={onDoubleClick}
   onclickcapture={onClick}
-  class={cls(layerClass('transform-context'), 'h-full', className)}
+  class={['lc-transform-context', className]}
   bind:this={ref}
   {...restProps}
 >
   {@render children?.({ transformContext: transformContext })}
 </div>
+
+<style>
+  @layer base {
+    :where(.lc-transform-context) {
+      height: 100%;
+    }
+  }
+</style>

package/dist/components/TransformControls.svelte

@@ -32,7 +32,6 @@
 <script lang="ts">
   import { type ComponentProps } from 'svelte';
   import { Button, Icon, MenuButton, Tooltip } from 'svelte-ux';
-  import { cls } from '@layerstack/tailwind';
 
   import LucideFocus from '~icons/lucide/focus';
   import LucideChevronDown from '~icons/lucide/chevron-down';
@@ -85,22 +84,9 @@
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-  class={cls(
-    'bg-surface-300/50 border rounded-full m-1 backdrop-blur-sm z-10 flex',
-    orientation === 'vertical' && 'flex-col',
-    {
-      'top-left': 'absolute top-0 left-0',
-      top: 'absolute top-0 left-1/2 -translate-x-1/2',
-      'top-right': 'absolute top-0 right-0',
-      left: 'absolute top-1/2 left-0 -translate-y-1/2',
-      center: 'absolute top-1/2 left-1/2 -translate-x-1/2  -translate-y-1/2',
-      right: 'absolute top-1/2 right-0 -translate-y-1/2',
-      'bottom-left': 'absolute bottom-0 left-0',
-      bottom: 'absolute bottom-0 left-1/2 -translate-x-1/2',
-      'bottom-right': 'absolute bottom-0 right-0',
-    }[placement],
-    className
-  )}
+  class={['lc-transform-controls', className]}
+  data-orientation={orientation}
+  data-placement={placement}
   ondblclick={(e) => {
     // Stop from propagating to TransformContext
     e.stopPropagation();
@@ -173,3 +159,72 @@
     </Tooltip>
   {/if}
 </div>
+
+<style>
+  @layer components {
+    :where(.lc-transform-controls) {
+      display: flex;
+      background: color-mix(
+        in oklab,
+        var(--color-surface-300, light-dark(white, black)) 50%,
+        transparent
+      );
+      border: 1px solid
+        color-mix(in oklab, var(--color-surface-content, currentColor) 20%, transparent);
+      border-radius: 9999px;
+      margin: 4px;
+      backdrop-filter: blur(8px);
+      z-index: 10;
+
+      &[data-orientation='vertical'] {
+        flex-direction: column;
+      }
+
+      &[data-placement] {
+        position: absolute;
+      }
+
+      &[data-placement='top-left'] {
+        top: 0;
+        left: 0;
+      }
+      &[data-placement='top'] {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      &[data-placement='top-right'] {
+        top: 0;
+        right: 0;
+      }
+      &[data-placement='left'] {
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+      }
+      &[data-placement='center'] {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+      &[data-placement='right'] {
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+      }
+      &[data-placement='bottom-left'] {
+        bottom: 0;
+        left: 0;
+      }
+      &[data-placement='bottom'] {
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      &[data-placement='bottom-right'] {
+        bottom: 0;
+        right: 0;
+      }
+    }
+  }
+</style>

package/dist/components/Voronoi.svelte

@@ -71,8 +71,6 @@
   import { getGeoContext } from './GeoContext.svelte';
   import CircleClipPath from './CircleClipPath.svelte';
 
-  import { layerClass } from '../utils/attributes.js';
-
   let {
     data,
     r,
@@ -118,7 +116,7 @@
   const disableClip = $derived(r === 0 || r == null || r === Infinity);
 </script>
 
-<Group {...restProps} class={cls(layerClass('voronoi-g'), classes.root, className)}>
+<Group {...restProps} class={cls('lc-voronoi-g', classes.root, className)}>
   {#if geo.projection}
     {@const polygons = geoVoronoi().polygons(points)}
     {#each polygons.features as feature}
@@ -131,11 +129,7 @@
       >
         <GeoPath
           geojson={feature}
-          class={cls(
-            layerClass('voronoi-geo-path'),
-            'fill-transparent stroke-transparent',
-            classes.path
-          )}
+          class={['lc-voronoi-geo-path', classes.path]}
           onclick={(e) => onclick?.(e, { data: feature.properties.site.data, feature })}
           onpointerenter={(e) =>
             onpointerenter?.(e, { data: feature.properties.site.data, feature })}
@@ -158,11 +152,7 @@
         <CircleClipPath cx={point[0]} cy={point[1]} r={r ?? 0} disabled={disableClip}>
           <Spline
             {pathData}
-            class={cls(
-              layerClass('voronoi-path'),
-              'fill-transparent stroke-transparent',
-              classes.path
-            )}
+            class={['lc-voronoi-path', classes.path]}
             onclick={(e) => onclick?.(e, { data: point.data, point })}
             onpointerenter={(e) => onpointerenter?.(e, { data: point.data, point })}
             onpointermove={(e) => onpointermove?.(e, { data: point.data, point })}
@@ -178,3 +168,12 @@
     {/each}
   {/if}
 </Group>
+
+<style>
+  @layer components {
+    :global(:where(.lc-voronoi-path, .lc-voronoi-geo-path)) {
+      fill: transparent;
+      stroke: transparent;
+    }
+  }
+</style>

package/dist/components/charts/ArcChart.svelte

@@ -124,7 +124,6 @@
   import { sum } from 'd3-array';
   import { format } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
-  import { SelectionState } from '@layerstack/svelte-state';
 
   import Arc, { type ArcPropsWithoutHTML } from '../Arc.svelte';
   import Chart from '../Chart.svelte';
@@ -133,7 +132,13 @@
   import Legend from '../Legend.svelte';
   import * as Tooltip from '../tooltip/index.js';
 
-  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+  import {
+    accessor,
+    chartDataArray,
+    getObjectOrNull,
+    resolveMaybeFn,
+    type Accessor,
+  } from '../../utils/common.js';
   import { asAny } from '../../utils/types.js';
   import type {
     SeriesData,
@@ -141,7 +146,8 @@
     SimplifiedChartPropsObject,
     SimplifiedChartSnippet,
   } from './types.js';
-  import { HighlightKey } from './utils.svelte.js';
+  import { SeriesState } from '../../states/series.svelte.js';
+  import { createLegendProps } from './utils.svelte.js';
   import { setTooltipMetaContext } from '../tooltip/tooltipMetaContext.js';
   import { getColorIfDefined } from '../../utils/color.js';
 
@@ -223,63 +229,32 @@
     });
   });
 
-  const selectedSeries = new SelectionState();
-
-  const visibleSeries = $derived(
-    series.filter((s) => selectedSeries.isEmpty() || selectedSeries.isSelected(s.key))
-  );
-
-  const allSeriesData = $derived(
-    visibleSeries
-      .flatMap((s) =>
-        s.data?.map((d) => {
-          return { seriesKey: s.key, ...d };
-        })
-      )
-      .filter((d) => d) as Array<TData & { stackData?: any }>
-  );
+  const seriesState = new SeriesState(() => series);
 
   const chartData = $derived(
-    allSeriesData.length ? allSeriesData : chartDataArray(data)
+    seriesState.allSeriesData.length ? seriesState.allSeriesData : chartDataArray(data)
   ) as Array<TData>;
 
-  const seriesColors = $derived(series.map((s) => s.color).filter((d) => d != null));
-
-  const highlightKey = new HighlightKey<TData, typeof Arc>();
-  const selectedKeys = new SelectionState();
-
   const visibleData = $derived(
     chartData.filter((d) => {
       const dataKey = keyAccessor(d);
-      return selectedKeys.isEmpty() || selectedKeys.isSelected(dataKey);
+      return seriesState.selectedKeys.isEmpty() || seriesState.selectedKeys.isSelected(dataKey);
     })
   );
 
   function getLegendProps(): ComponentProps<typeof Legend> {
-    return {
-      tickFormat: (tick) => {
-        const item = chartData.find((d) => keyAccessor(d) === tick);
-        return item ? (labelAccessor(item) ?? tick) : tick;
-      },
-      placement: 'bottom',
-      variant: 'swatches',
-      onclick: (e, item) => {
-        selectedKeys.toggle(item.value);
-        selectedSeries.toggle(item.value);
-      },
-      onpointerenter: (e, item) => (highlightKey.current = item.value),
-      onpointerleave: (e) => (highlightKey.current = null),
-      ...props.legend,
-      ...(typeof legend === 'object' ? legend : null),
-      classes: {
-        item: (item) =>
-          visibleData.length && !visibleData.some((d) => keyAccessor(d) === item.value)
-            ? 'opacity-50'
-            : '',
-        ...props.legend?.classes,
-        ...(typeof legend === 'object' ? legend.classes : null),
+    return createLegendProps({
+      seriesState,
+      props: {
+        tickFormat: (tick) => {
+          // Use data label instead of series label
+          const item = chartData.find((d) => keyAccessor(d) === tick);
+          return item ? (labelAccessor(item) ?? tick) : tick;
+        },
+        ...props.legend,
+        ...getObjectOrNull(legend),
       },
-    };
+    });
   }
 
   function getGroupProps(): ComponentProps<typeof Group> {
@@ -317,6 +292,7 @@
         multiSeries && (trackOuterRadius ?? 0) < 0 ? i * (trackOuterRadius ?? 0) : trackOuterRadius,
       fill: s.color ?? context.cScale?.(context.c(d)),
       track: { fill: s.color ?? context.cScale?.(context.c(d)), fillOpacity: 0.1 },
+      opacity: seriesState.isHighlighted(keyAccessor(d), true) ? 1 : 0.1,
       tooltipContext: context.tooltip,
       data: d,
       onclick: (e) => {
@@ -326,12 +302,7 @@
       },
       ...props.arc,
       ...s.props,
-      class: cls(
-        'transition-opacity',
-        highlightKey.current && highlightKey.current !== keyAccessor(d) && 'opacity-50',
-        props.arc?.class,
-        s.props?.class
-      ),
+      class: cls(props.arc?.class, s.props?.class),
     };
   }
 
@@ -357,7 +328,7 @@
       return key;
     },
     get visibleSeries() {
-      return visibleSeries;
+      return seriesState.visibleSeries;
     },
   });
 </script>
@@ -369,19 +340,19 @@
   x={value}
   {c}
   cDomain={chartData.map(keyAccessor)}
-  cRange={seriesColors.length
-    ? seriesColors
+  cRange={seriesState.allSeriesColors.length
+    ? seriesState.allSeriesColors
     : c !== key
       ? chartData.map((d) => cAccessor(d))
       : [
-          'var(--color-primary)',
-          'var(--color-secondary)',
-          'var(--color-info)',
-          'var(--color-success)',
-          'var(--color-warning)',
-          'var(--color-danger)',
+          'var(--color-primary, currentColor)',
+          'var(--color-secondary, currentColor)',
+          'var(--color-info, currentColor)',
+          'var(--color-success, currentColor)',
+          'var(--color-warning, currentColor)',
+          'var(--color-danger, currentColor)',
         ]}
-  padding={{ bottom: legend === true ? 32 : 0 }}
+  padding={{ bottom: legend ? 32 : 0 }}
   {...restProps}
   tooltip={tooltip === false
     ? false
@@ -395,10 +366,10 @@
       color: cAccessor,
       context,
       series,
-      visibleSeries,
+      visibleSeries: seriesState.visibleSeries,
       visibleData,
-      highlightKey: highlightKey.current,
-      setHighlightKey: highlightKey.set,
+      highlightKey: seriesState.highlightKey.current,
+      setHighlightKey: seriesState.highlightKey.set,
       getLegendProps,
       getGroupProps,
       getArcProps,
@@ -452,8 +423,8 @@
                 value={valueAccessor(data)}
                 color={context.cScale?.(context.c(data))}
                 {format}
-                onpointerenter={() => (highlightKey.current = keyAccessor(data))}
-                onpointerleave={() => (highlightKey.current = null)}
+                onpointerenter={() => (seriesState.highlightKey.current = keyAccessor(data))}
+                onpointerleave={() => (seriesState.highlightKey.current = null)}
                 {...props.tooltip?.item}
               />
             </Tooltip.List>

package/dist/components/charts/AreaChart.svelte

@@ -67,7 +67,6 @@
 
 <script lang="ts" generics="TData">
   import { onMount, type ComponentProps } from 'svelte';
-  import { scaleLinear, scaleTime } from 'd3-scale';
   import { stack, stackOffsetDiverging, stackOffsetExpand, stackOffsetNone } from 'd3-shape';
   import { cls } from '@layerstack/tailwind';
 
@@ -93,7 +92,8 @@
   import { asAny } from '../../utils/types.js';
   import Spline from '../Spline.svelte';
   import type { SeriesData, SimplifiedChartProps, SimplifiedChartPropsObject } from './types.js';
-  import { createLegendProps, SeriesState } from './utils.svelte.js';
+  import { SeriesState } from '../../states/series.svelte.js';
+  import { createLegendProps } from './utils.svelte.js';
   import { setTooltipMetaContext } from '../tooltip/tooltipMetaContext.js';
   import DefaultTooltip from './DefaultTooltip.svelte';
   import ChartAnnotations from './ChartAnnotations.svelte';
@@ -139,7 +139,7 @@
             key: 'default',
             label: typeof y === 'string' ? y : 'value',
             value: y,
-            color: 'var(--color-primary)',
+            color: 'var(--color-primary, currentColor)',
           },
         ]
       : seriesProp
@@ -221,13 +221,6 @@
       ...(typeof s.props?.line === 'object' ? s.props.line : null),
     };
 
-    const highlightClass =
-      seriesState.visibleSeries.length > 1 &&
-      seriesState.highlightKey.current &&
-      seriesState.highlightKey.current !== s.key
-        ? 'opacity-10'
-        : '';
-
     return {
       data: s.data,
       y0: stackSeries
@@ -242,19 +235,18 @@
           : (s.value ?? (s.data ? undefined : s.key)),
       fill: s.color,
       fillOpacity: 0.3,
+      opacity:
+        // Checking `visibleSeries.length <= 1` fixes re-animated tweened areas on hover
+        seriesState.visibleSeries.length <= 1 || seriesState.isHighlighted(s.key, true) ? 1 : 0.1,
       ...props.area,
       ...s.props,
-      class: cls(
-        'transition-opacity',
-        // Checking `visibleSeries.length > 1` fixes re-animated tweened areas on hover
-        highlightClass,
-        props.area?.class,
-        s.props?.class
-      ),
+      class: cls(props.area?.class, s.props?.class),
       line: {
         stroke: s.color,
+        opacity:
+          // Checking `visibleSeries.length <= 1` fixes re-animated tweened areas on hover
+          seriesState.visibleSeries.length <= 1 || seriesState.isHighlighted(s.key, true) ? 1 : 0.1,
         ...lineProps,
-        class: cls('transition-opacity', highlightClass, lineProps.class),
       },
     };
   }
@@ -271,16 +263,11 @@
           ? s.value[1]
           : (s.value ?? (s.data ? undefined : s.key)),
       fill: s.color,
+      stroke: 'var(--color-surface-100, light-dark(white, black))',
+      opacity: seriesState.isHighlighted(s.key, true) ? 1 : 0.1,
       ...props.points,
       ...(typeof points === 'object' ? points : null),
-      class: cls(
-        'stroke-surface-200 transition-opacity',
-        seriesState.highlightKey.current &&
-          seriesState.highlightKey.current !== s.key &&
-          'opacity-10',
-        props.points?.class,
-        typeof points === 'object' && points.class
-      ),
+      class: cls(props.points?.class, typeof points === 'object' && points.class),
     };
   }
 
@@ -295,16 +282,11 @@
         : Array.isArray(s.value)
           ? s.value[1]
           : (s.value ?? (s.data ? undefined : s.key)),
+      stroke: 'var(--color-surface-100, light-dark(white, black))',
+      opacity: seriesState.isHighlighted(s.key, true) ? 1 : 0.1,
       ...props.labels,
       ...(typeof labels === 'object' ? labels : null),
-      class: cls(
-        'stroke-surface-200 transition-opacity',
-        seriesState.highlightKey.current &&
-          seriesState.highlightKey.current !== s.key &&
-          'opacity-10',
-        props.labels?.class,
-        typeof labels === 'object' && labels.class
-      ),
+      class: cls(props.labels?.class, typeof labels === 'object' && labels.class),
     };
   }
 
@@ -317,7 +299,7 @@
     if (!context) return {};
     const seriesTooltipData =
       s.data && context.tooltip.data
-        ? findRelatedData(s.data, context.tooltip.data, context.x)
+        ? (findRelatedData(s.data, context.tooltip.data, context.x) ?? {})
         : null;
     const highlightPointsProps =
       typeof props.highlight?.points === 'object' ? props.highlight.points : null;
@@ -332,19 +314,14 @@
       onPointEnter: () => (seriesState.highlightKey.current = s.key),
       onPointLeave: () => (seriesState.highlightKey.current = null),
       ...props.highlight,
+      opacity:
+        seriesState.highlightKey.current && seriesState.highlightKey.current !== s.key ? 0.1 : 1,
       points:
         props.highlight?.points == false
           ? false
           : {
               ...highlightPointsProps,
               fill: s.color,
-              class: cls(
-                'transition-opacity',
-                seriesState.highlightKey.current &&
-                  seriesState.highlightKey.current !== s.key &&
-                  'opacity-10',
-                highlightPointsProps?.class
-              ),
             },
     };
   }

package/dist/components/charts/BarChart.svelte

@@ -109,7 +109,8 @@
   import type { Insets } from '../../utils/rect.svelte.js';
   import type { SeriesData, SimplifiedChartProps, SimplifiedChartPropsObject } from './types.js';
   import { isScaleTime, type AnyScale } from '../../utils/scales.svelte.js';
-  import { createLegendProps, SeriesState } from './utils.svelte.js';
+  import { SeriesState } from '../../states/series.svelte.js';
+  import { createLegendProps } from './utils.svelte.js';
   import { setTooltipMetaContext } from '../tooltip/tooltipMetaContext.js';
   import DefaultTooltip from './DefaultTooltip.svelte';
   import ChartAnnotations from './ChartAnnotations.svelte';
@@ -311,17 +312,11 @@
       strokeWidth: 1,
       insets: stackInsets,
       fill: s.color,
+      opacity: seriesState.isHighlighted(s.key, true) ? 1 : 0.1,
       onBarClick: (e, detail) => onBarClick(e, { ...detail, series: s }),
       ...props.bars,
       ...s.props,
-      class: cls(
-        'transition-opacity',
-        seriesState.highlightKey.current &&
-          seriesState.highlightKey.current !== s.key &&
-          'opacity-10',
-        props.bars?.class,
-        s.props?.class
-      ),
+      class: cls(props.bars?.class, s.props?.class),
     };
   }
 
@@ -333,16 +328,10 @@
       // TODO: Improve placement when using `seriesLayout="group"`
       // data: s.data,
       // y: s.value ?? (s.data ? undefined : s.key),
+      opacity: seriesState.isHighlighted(s.key, true) ? 1 : 0.1,
       ...props.labels,
       ...(typeof labels === 'object' ? labels : null),
-      class: cls(
-        'stroke-surface-200 transition-opacity',
-        seriesState.highlightKey.current &&
-          seriesState.highlightKey.current !== s.key &&
-          'opacity-10',
-        props.labels?.class,
-        typeof labels === 'object' && labels.class
-      ),
+      class: cls(props.labels?.class, typeof labels === 'object' && labels.class),
     };
   }
 
@@ -452,7 +441,7 @@
   {y1Range}
   {yInterval}
   c={isVertical ? yProp : xProp}
-  cRange={['var(--color-primary)']}
+  cRange={['var(--color-primary, currentColor)']}
   {radial}
   padding={radial ? undefined : defaultChartPadding(axis, legend)}
   {...restProps}

package/dist/components/charts/DefaultTooltip.svelte

@@ -4,7 +4,7 @@
   import { getChartContext } from '../Chart.svelte';
   import * as Tooltip from '../tooltip/index.js';
   import type { SimplifiedChartPropsObject } from './types.js';
-  import type { SeriesState } from './utils.svelte.js';
+  import type { SeriesState } from '../../states/series.svelte.js';
   import { format } from '@layerstack/utils';
   import { accessor, findRelatedData } from '../../utils/common.js';
 
@@ -48,7 +48,7 @@
           value={sum(seriesState.visibleSeries, (s) => {
             const seriesTooltipData = s.data ? findRelatedData(s.data, data, context.x) : data;
             const valueAccessor = accessor(s.value ?? (s.data ? context.y : s.key));
-            return valueAccessor(seriesTooltipData);
+            return seriesTooltipData ? valueAccessor(seriesTooltipData) : 0;
           })}
           format="integer"
           valueAlign="right"

package/dist/components/charts/DefaultTooltip.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { SimplifiedChartPropsObject } from './types.js';
-import type { SeriesState } from './utils.svelte.js';
+import type { SeriesState } from '../../states/series.svelte.js';
 type $$ComponentProps = {
     tooltipProps?: SimplifiedChartPropsObject['tooltip'];
     seriesState: SeriesState<any, any>;