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

package/dist/components/charts/LineChart.svelte

@@ -44,12 +44,11 @@
     LineChartExtraSnippetProps<TData>
   > & {
     /**
-     * The event to be dispatched when the point is clicked.
+     * The orientation of the line chart.
+     *
+     * @default 'horizontal'
      */
-    onPointClick?: (
-      e: MouseEvent,
-      details: { data: HighlightPointData; series: SeriesData<TData, typeof Spline> }
-    ) => void;
+    orientation?: 'vertical' | 'horizontal';
 
     props?: LineChartPropsObjProp;
 
@@ -64,6 +63,14 @@
         seriesIndex: number;
       }
     >;
+
+    /**
+     * The event to be dispatched when the point is clicked.
+     */
+    onPointClick?: (
+      e: MouseEvent,
+      details: { data: HighlightPointData; series: SeriesData<TData, typeof Spline> }
+    ) => void;
   };
 </script>
 
@@ -83,12 +90,7 @@
   import Rule from '../Rule.svelte';
   import Spline from '../Spline.svelte';
 
-  import {
-    accessor,
-    chartDataArray,
-    defaultChartPadding,
-    findRelatedData,
-  } from '../../utils/common.js';
+  import { chartDataArray, defaultChartPadding, findRelatedData } from '../../utils/common.js';
   import { asAny } from '../../utils/types.js';
   import type {
     SeriesData,
@@ -96,18 +98,22 @@
     SimplifiedChartPropsObject,
     SimplifiedChartSnippet,
   } 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 { layerClass } from '../../utils/attributes.js';
   import DefaultTooltip from './DefaultTooltip.svelte';
   import ChartAnnotations from './ChartAnnotations.svelte';
+  import { isScaleTime } from '../../utils/scales.svelte.js';
 
   let {
     data = [],
     x: xProp,
-    y: yProp,
+    xScale,
     xDomain,
+    y: yProp,
+    yScale,
     radial = false,
+    orientation = 'horizontal',
     series: seriesProp,
     seriesLayout = 'overlap',
     axis = true,
@@ -137,14 +143,23 @@
     ...restProps
   }: LineChartProps<TData> = $props();
 
+  const isVertical = $derived(orientation === 'vertical');
+
   const series = $derived(
     seriesProp === undefined
       ? [
           {
             key: 'default',
-            label: typeof yProp === 'string' ? yProp : 'value',
-            value: yProp,
-            color: 'var(--color-primary)',
+
+            label: isVertical
+              ? typeof xProp === 'string'
+                ? xProp
+                : 'value'
+              : typeof yProp === 'string'
+                ? yProp
+                : 'value',
+            value: isVertical ? xProp : yProp,
+            color: 'var(--color-primary, currentColor)',
           },
         ]
       : seriesProp
@@ -160,21 +175,15 @@
   function getSplineProps(s: SeriesData<TData, typeof Spline>, i: number) {
     const splineProps: ComponentProps<typeof Spline> = {
       data: s.data,
-      y: s.value ?? (s.data ? undefined : s.key),
+      x: isVertical ? (s.value ?? (s.data ? undefined : s.key)) : undefined,
+      y: !isVertical ? (s.value ?? (s.data ? undefined : s.key)) : undefined,
       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,
       ...props.spline,
       ...s.props,
-      class: cls(
-        layerClass('line-chart-line'),
-        'transition-opacity',
-        // Checking `visibleSeries.length > 1` fixes re-animated tweened areas on hover
-        seriesState.visibleSeries.length > 1 &&
-          seriesState.highlightKey.current &&
-          seriesState.highlightKey.current !== s.key &&
-          'opacity-10',
-        props.spline?.class,
-        s.props?.class
-      ),
+      class: cls(props.spline?.class, s.props?.class),
     };
 
     return splineProps;
@@ -183,18 +192,14 @@
   function getPointsProps(s: SeriesData<TData, typeof Spline>, i: number) {
     const pointsProps: ComponentProps<typeof Points> = {
       data: s.data,
-      y: s.value ?? (s.data ? undefined : s.key),
+      x: isVertical ? (s.value ?? (s.data ? undefined : s.key)) : undefined,
+      y: !isVertical ? (s.value ?? (s.data ? undefined : s.key)) : undefined,
       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),
     };
 
     return pointsProps;
@@ -203,26 +208,17 @@
   function getLabelsProps(s: SeriesData<TData, typeof Spline>, i: number) {
     const labelsProps: ComponentProps<typeof Labels<TData>> = {
       data: s.data,
-      y: s.value ?? (s.data ? undefined : s.key),
+      x: isVertical ? (s.value ?? (s.data ? undefined : s.key)) : undefined,
+      y: !isVertical ? (s.value ?? (s.data ? undefined : s.key)) : undefined,
+      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),
     };
 
     return labelsProps;
   }
 
-  const highlightPointsProps = $derived(
-    typeof props.highlight?.points === 'object' ? props.highlight.points : null
-  );
-
   function getHighlightProps(
     s: SeriesData<TData, typeof Spline>,
     i: number
@@ -230,18 +226,22 @@
     if (!context || !context.tooltip.data) 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;
 
     return {
       data: seriesTooltipData,
-      y: s.value ?? (s.data ? undefined : s.key),
+      x: isVertical ? (s.value ?? (s.data ? undefined : s.key)) : undefined,
+      y: !isVertical ? (s.value ?? (s.data ? undefined : s.key)) : undefined,
       lines: i === 0,
       onPointClick: onPointClick
         ? (e, detail) => onPointClick(e, { ...detail, series: s })
         : undefined,
       onPointEnter: () => (seriesState.highlightKey.current = s.key),
       onPointLeave: () => (seriesState.highlightKey.current = null),
+      opacity: seriesState.isHighlighted(s.key, true) ? 1 : 0.1,
       ...props.highlight,
       points:
         props.highlight?.points == false
@@ -249,13 +249,6 @@
           : {
               ...highlightPointsProps,
               fill: s.color,
-              class: cls(
-                'transition-opacity',
-                seriesState.highlightKey.current &&
-                  seriesState.highlightKey.current !== s.key &&
-                  'opacity-10',
-                highlightPointsProps?.class
-              ),
             },
     };
   }
@@ -264,8 +257,8 @@
     return createLegendProps({
       seriesState,
       props: {
-        ...props.legend,
         ...(typeof legend === 'object' ? legend : null),
+        ...props.legend,
       },
     });
   }
@@ -324,18 +317,20 @@
 <Chart
   bind:context
   data={chartData}
-  x={xProp}
+  x={xProp ?? (isVertical ? series.map((s) => s.value ?? s.key) : undefined)}
   {xDomain}
-  y={yProp ?? series.map((s) => s.value ?? s.key)}
-  yBaseline={0}
-  yNice
+  xBaseline={!isVertical || (xScale && isScaleTime(xScale)) ? undefined : 0}
+  xNice={orientation === 'vertical'}
+  y={yProp ?? (isVertical ? undefined : series.map((s) => s.value ?? s.key))}
+  yBaseline={isVertical || (yScale && isScaleTime(yScale)) ? undefined : 0}
+  yNice={orientation === 'horizontal'}
   {radial}
   padding={radial ? undefined : defaultChartPadding(axis, legend)}
   {...restProps}
   tooltip={tooltip === false
     ? false
     : {
-        mode: 'quadtree-x',
+        mode: isVertical ? 'quadtree-y' : 'quadtree-x',
         onclick: onTooltipClick,
         debug,
         ...props.tooltip?.context,

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

@@ -10,12 +10,11 @@ export type LineChartExtraSnippetProps<TData> = {
 export type LineChartPropsObjProp = Pick<SimplifiedChartPropsObject, 'brush' | 'canvas' | 'grid' | 'highlight' | 'labels' | 'legend' | 'points' | 'rule' | 'spline' | 'svg' | 'tooltip' | 'xAxis' | 'yAxis'>;
 export type LineChartProps<TData> = SimplifiedChartProps<TData, typeof Spline, LineChartExtraSnippetProps<TData>> & {
     /**
-     * The event to be dispatched when the point is clicked.
+     * The orientation of the line chart.
+     *
+     * @default 'horizontal'
      */
-    onPointClick?: (e: MouseEvent, details: {
-        data: HighlightPointData;
-        series: SeriesData<TData, typeof Spline>;
-    }) => void;
+    orientation?: 'vertical' | 'horizontal';
     props?: LineChartPropsObjProp;
     spline?: SimplifiedChartSnippet<TData, typeof Spline, LineChartExtraSnippetProps<TData> & {
         props: ComponentProps<typeof Spline>;
@@ -24,6 +23,13 @@ export type LineChartProps<TData> = SimplifiedChartProps<TData, typeof Spline, L
          */
         seriesIndex: number;
     }>;
+    /**
+     * The event to be dispatched when the point is clicked.
+     */
+    onPointClick?: (e: MouseEvent, details: {
+        data: HighlightPointData;
+        series: SeriesData<TData, typeof Spline>;
+    }) => void;
 };
 import { type ComponentProps } from 'svelte';
 import Axis from '../Axis.svelte';

package/dist/components/charts/PieChart.svelte

@@ -172,11 +172,11 @@
 </script>
 
 <script lang="ts" generics="TData">
-  import { onMount, type ComponentProps, type Snippet } from 'svelte';
+  import { onMount, type ComponentProps } from 'svelte';
   import { format } from '@layerstack/utils';
-  import { cls } from '@layerstack/tailwind';
-  import { SelectionState } from '@layerstack/svelte-state';
   import type { PieArcDatum } from 'd3-shape';
+  import { schemeObservable10 } from 'd3-scale-chromatic';
+  import { getObjectOrNull } from '../../utils/common.js';
 
   import Arc from '../Arc.svelte';
   import Chart from '../Chart.svelte';
@@ -194,7 +194,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';
 
   let {
@@ -237,67 +238,37 @@
   const series = $derived(
     seriesProp === undefined ? [{ key: 'default', value: value }] : seriesProp
   );
+  const seriesState = new SeriesState(() => series);
 
   const keyAccessor = $derived(accessor(key));
   const labelAccessor = $derived(accessor(label));
   const valueAccessor = $derived(accessor(value));
   const cAccessor = $derived(accessor(c));
 
-  const allSeriesData = $derived(
-    series
-      .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
-      .filter((d) => d) as Array<TData>
-  );
-
   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 selectedSeries = 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);
     })
   );
 
-  // TODO: note, I added this because it wasn't consistent with all the other charts
-  // unsure if it is correct but will validate with Sean
-  const visibleSeries = $derived(
-    series.filter((s) => selectedSeries.isEmpty() || selectedSeries.isSelected(s.key))
-  );
-
   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);
-        // TODO: investigate
-        // 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> {
@@ -338,7 +309,8 @@
     return {
       startAngle: arc.startAngle,
       endAngle: arc.endAngle,
-      outerRadius: visibleSeries.length > 1 ? seriesIndex * (outerRadius ?? 0) : outerRadius,
+      outerRadius:
+        seriesState.visibleSeries.length > 1 ? seriesIndex * (outerRadius ?? 0) : outerRadius,
       innerRadius,
       cornerRadius,
       padAngle,
@@ -350,10 +322,7 @@
         // Workaround for `tooltip={{ mode: 'manual' }}
         onTooltipClick(e, { data: arc.data });
       },
-      class: cls(
-        'transition-opacity',
-        highlightKey.current && highlightKey.current !== keyAccessor(arc.data) && 'opacity-50'
-      ),
+      opacity: seriesState.isHighlighted(keyAccessor(arc.data), true) ? 1 : 0.5,
       ...props.arc,
       ...s.props,
       ...arcDataProps,
@@ -382,7 +351,7 @@
       return key;
     },
     get visibleSeries() {
-      return visibleSeries;
+      return seriesState.visibleSeries;
     },
   });
 </script>
@@ -394,19 +363,21 @@
   x={value}
   c={key}
   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, ${schemeObservable10[0]})`,
+          `var(--color-secondary, ${schemeObservable10[1]})`,
+          `var(--color-info, ${schemeObservable10[2]})`,
+          `var(--color-success, ${schemeObservable10[3]})`,
+          `var(--color-warning, ${schemeObservable10[4]})`,
+          `var(--color-danger, ${schemeObservable10[5]})`,
         ]}
-  padding={{ bottom: legend === true ? 32 : 0 }}
+  padding={{
+    bottom: legend === true || getObjectOrNull(legend)?.placement?.includes('bottom') ? 32 : 0,
+  }}
   {...restProps}
   tooltip={tooltip === false
     ? false
@@ -420,10 +391,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,
     }}
@@ -444,7 +415,8 @@
           {@render marks(snippetProps)}
         {:else}
           <Group {...getGroupProps()}>
-            {#each visibleSeries as s, seriesIdx (s.key)}
+            <!-- Use `series` instead of `visibleSeries` since data is filtered (legend) instead of series -->
+            {#each series as s, seriesIdx (s.key)}
               {#if typeof pie === 'function'}
                 {@render pie({
                   ...snippetProps,
@@ -496,8 +468,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/ScatterChart.svelte

@@ -61,9 +61,10 @@
   import Rule from '../Rule.svelte';
   import * as Tooltip from '../tooltip/index.js';
 
-  import { accessor, chartDataArray, defaultChartPadding } from '../../utils/common.js';
+  import { chartDataArray, defaultChartPadding } from '../../utils/common.js';
   import { asAny } from '../../utils/types.js';
-  import { createLegendProps, SeriesState } from './utils.svelte.js';
+  import { SeriesState } from '../../states/series.svelte.js';
+  import { createLegendProps } from './utils.svelte.js';
 
   let {
     data = [],
@@ -117,16 +118,10 @@
     return {
       data: s.data,
       fill: s.color,
+      opacity: seriesState.isHighlighted(s.key, true) ? 1 : 0.1,
       ...props.points,
       ...s.props,
-      class: cls(
-        'transition-opacity',
-        seriesState.highlightKey.current &&
-          seriesState.highlightKey.current !== s.key &&
-          'opacity-10',
-        props.points?.class,
-        s.props?.class
-      ),
+      class: cls(props.points?.class, s.props?.class),
     };
   }
 
@@ -136,16 +131,10 @@
   ): ComponentProps<typeof Labels<TData>> {
     return {
       data: s.data,
+      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),
     };
   }
 
@@ -230,7 +219,7 @@
   {yDomain}
   yNice
   c={yProp}
-  cRange={['var(--color-primary)']}
+  cRange={['var(--color-primary, currentColor)']}
   padding={defaultChartPadding(axis, legend)}
   {...restProps}
   tooltip={tooltip === false

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

@@ -1,24 +1,6 @@
 import type { Component, ComponentProps } from 'svelte';
-import { SelectionState } from '@layerstack/svelte-state';
-import type { SeriesData } from './types.js';
 import type Legend from '../Legend.svelte';
-export 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;
-    selectedSeries: SelectionState<unknown, false>;
-    selectedKeys: SelectionState<unknown, false>;
-    highlightKey: HighlightKey<TData, TComponent>;
-    constructor(getSeries: () => SeriesData<TData, TComponent>[]);
-    get series(): SeriesData<TData, TComponent>[];
-    get isDefaultSeries(): boolean;
-    get allSeriesData(): Array<TData & {
-        seriesKey: string;
-    }>;
-    get visibleSeries(): SeriesData<TData, TComponent>[];
-}
+import type { SeriesState } from '../../states/series.svelte.js';
 type CreateLegendPropsOptions<TData, TComponent extends Component> = {
     seriesState: SeriesState<TData, TComponent>;
     props: Partial<ComponentProps<typeof Legend>>;

package/dist/components/charts/utils.svelte.js

@@ -1,38 +1,6 @@
-import { SelectionState } from '@layerstack/svelte-state';
 import { scaleOrdinal } from 'd3-scale';
-export class HighlightKey {
-    current = $state(null);
-    set = (seriesKey) => {
-        this.current = seriesKey;
-    };
-}
-export class SeriesState {
-    #series = $state.raw([]);
-    selectedSeries = new SelectionState();
-    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 allSeriesData() {
-        return this.#series
-            .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
-            .filter((d) => d);
-    }
-    get visibleSeries() {
-        return this.#series.filter((s) => this.selectedSeries.isEmpty() || this.selectedSeries.isSelected(s.key));
-    }
-}
+import { cls } from '@layerstack/tailwind';
+import { resolveMaybeFn } from '../../utils/common.js';
 /**
  * A prop builder for the legend component shared between the simplified charts.
  */
@@ -44,15 +12,15 @@ export function createLegendProps(opts) {
         tickFormat: (key) => opts.seriesState.series.find((s) => s.key === key)?.label ?? key,
         placement: 'bottom',
         variant: 'swatches',
-        onclick: (_, item) => opts.seriesState.selectedSeries.toggle(item.value),
+        selected: opts.seriesState.selectedKeys.current,
+        onclick: (_, item) => opts.seriesState.selectedKeys.toggle(item.value),
         onpointerenter: (_, item) => (opts.seriesState.highlightKey.current = item.value),
         onpointerleave: () => (opts.seriesState.highlightKey.current = null),
         ...opts.props,
         classes: {
-            item: (item) => opts.seriesState.visibleSeries.length &&
-                !opts.seriesState.visibleSeries.some((s) => s.key === item.value)
-                ? 'opacity-50'
-                : '',
+            item: (item) => {
+                return cls(resolveMaybeFn(opts.props?.classes?.item, item));
+            },
             ...opts.props?.classes,
         },
     };