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

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.toggleSelected(item.value);
-        selectedSeries.toggleSelected(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>
@@ -367,24 +338,25 @@
   bind:context
   data={visibleData}
   x={value}
-  y={key}
   {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 : props.tooltip?.context}
+  tooltip={tooltip === false
+    ? false
+    : { ...props.tooltip?.context, ...(typeof tooltip === 'object' ? tooltip : null) }}
 >
   {#snippet children({ context })}
     {@const snippetProps = {
@@ -394,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,
@@ -451,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/ArcChart.svelte.d.ts

@@ -71,10 +71,17 @@ import Arc, { type ArcPropsWithoutHTML } from '../Arc.svelte';
 import Group from '../Group.svelte';
 import { type Accessor } from '../../utils/common.js';
 import type { SeriesData, SimplifiedChartProps, SimplifiedChartPropsObject, SimplifiedChartSnippet } from './types.js';
+declare function $$render<TData>(): {
+    props: ArcChartProps<TData>;
+    exports: {};
+    bindings: "context";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<TData> {
-    props(): ArcChartProps<TData>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
     bindings(): "context";
     exports(): {};
 }

package/dist/components/charts/AreaChart.svelte

@@ -67,9 +67,7 @@
 
 <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 { format } from '@layerstack/utils';
   import { cls } from '@layerstack/tailwind';
 
   import Area from '../Area.svelte';
@@ -94,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';
@@ -123,7 +122,6 @@
     renderContext = 'svg',
     profile = false,
     debug = false,
-    xScale: xScaleProp,
     children: childrenProp,
     aboveContext,
     belowContext,
@@ -136,7 +134,14 @@
 
   const series = $derived(
     seriesProp === undefined
-      ? [{ key: 'default', value: y, color: 'var(--color-primary)' }]
+      ? [
+          {
+            key: 'default',
+            label: typeof y === 'string' ? y : 'value',
+            value: y,
+            color: 'var(--color-primary, currentColor)',
+          },
+        ]
       : seriesProp
   );
 
@@ -190,11 +195,6 @@
     return _chartData;
   });
 
-  // Default xScale based on first data's `x` value
-  const xScale = $derived(
-    xScaleProp ?? (accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinear())
-  );
-
   function isStackData(d: TData): d is TData & { stackData: any[] } {
     return d && typeof d === 'object' && 'stackData' in d;
   }
@@ -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
-              ),
             },
     };
   }
@@ -398,13 +375,7 @@
     if (axisDirection === 'y') {
       return {
         placement: radial ? 'radius' : 'left',
-        format: (value) => {
-          if (seriesLayout === 'stackExpand') {
-            return format(value, 'percentRound');
-          } else {
-            return format(value, undefined, { variant: 'short' });
-          }
-        },
+        format: seriesLayout === 'stackExpand' ? 'percentRound' : undefined,
         ...(typeof axis === 'object' ? axis : null),
         ...props.yAxis,
       };
@@ -412,7 +383,6 @@
 
     return {
       placement: radial ? 'angle' : 'bottom',
-      format: (value) => format(value, undefined, { variant: 'short' }),
       ...(typeof axis === 'object' ? axis : null),
       ...props.xAxis,
     };
@@ -434,7 +404,6 @@
   data={chartData}
   {x}
   {xDomain}
-  {xScale}
   y={resolveAccessor(y)}
   yBaseline={0}
   yNice
@@ -444,10 +413,11 @@
   tooltip={tooltip === false
     ? false
     : {
-        mode: 'bisect-x',
+        mode: 'quadtree-x',
         onclick: onTooltipClick,
         debug,
         ...props.tooltip?.context,
+        ...(typeof tooltip === 'object' ? tooltip : null),
       }}
   brush={brush && (brush === true || brush.mode == undefined || brush.mode === 'integrated')
     ? {

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

@@ -42,10 +42,17 @@ import Labels from '../Labels.svelte';
 import Points from '../Points.svelte';
 import Rule from '../Rule.svelte';
 import type { SeriesData, SimplifiedChartProps, SimplifiedChartPropsObject } from './types.js';
+declare function $$render<TData>(): {
+    props: AreaChartProps<TData>;
+    exports: {};
+    bindings: "context";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<TData> {
-    props(): AreaChartProps<TData>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
     bindings(): "context";
     exports(): {};
 }