layerchart 2.0.0-next.37 → 2.0.0-next.39

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,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/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(): {};
 }

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

@@ -57,10 +57,17 @@ import Highlight from '../Highlight.svelte';
 import Labels from '../Labels.svelte';
 import Rule from '../Rule.svelte';
 import type { SeriesData, SimplifiedChartProps, SimplifiedChartPropsObject } from './types.js';
+declare function $$render<TData>(): {
+    props: BarChartProps<TData>;
+    exports: {};
+    bindings: "context";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<TData> {
-    props(): BarChartProps<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/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>;

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';
@@ -34,10 +40,17 @@ import Points from '../Points.svelte';
 import Rule from '../Rule.svelte';
 import Spline from '../Spline.svelte';
 import type { SeriesData, SimplifiedChartProps, SimplifiedChartPropsObject, SimplifiedChartSnippet } from './types.js';
+declare function $$render<TData>(): {
+    props: LineChartProps<TData>;
+    exports: {};
+    bindings: "context";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<TData> {
-    props(): LineChartProps<TData>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
     bindings(): "context";
     exports(): {};
 }