layerchart 2.0.0-next.4 → 2.0.0-next.41

package/dist/components/Group.svelte.d.ts

@@ -62,10 +62,17 @@ export type GroupPropsWithoutHTML<In extends Transition = Transition> = {
     transitionInParams?: TransitionParams<In>;
 };
 export type GroupProps = GroupPropsWithoutHTML & Without<HTMLAttributes<Element>, GroupPropsWithoutHTML>;
+declare function $$render<T extends Transition = Transition>(): {
+    props: GroupProps;
+    exports: {};
+    bindings: "ref";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T extends Transition = Transition> {
-    props(): GroupProps;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "ref";
     exports(): {};
 }

package/dist/components/Highlight.svelte

@@ -101,6 +101,11 @@
      */
     motion?: MotionProp;
 
+    /**
+     * The opacity of the element. (0 to 1)
+     */
+    opacity?: number;
+
     onAreaClick?: (e: MouseEvent, detail: { data: any }) => void;
     onBarClick?: (e: MouseEvent, detail: { data: any }) => void;
 
@@ -114,9 +119,8 @@
   import { max, min } from 'd3-array';
   import { pointRadial, type Series, type SeriesPoint } from 'd3-shape';
   import { notNull } from '@layerstack/utils';
-  import { cls } from '@layerstack/tailwind';
 
-  import { isScaleBand } from '../utils/scales.svelte.js';
+  import { isScaleBand, isScaleTime } from '../utils/scales.svelte.js';
   import { asAny } from '../utils/types.js';
   import { getChartContext } from './Chart.svelte';
   import { getTooltipContext } from './tooltip/TooltipContext.svelte';
@@ -136,6 +140,7 @@
     lines: linesProp = false,
     area = false,
     bar = false,
+    opacity,
     motion = 'spring',
     onAreaClick,
     onBarClick,
@@ -158,7 +163,9 @@
     Array.isArray(yValue) ? yValue.map((v) => ctx.yScale(v)) : ctx.yScale(yValue)
   );
   const yOffset = $derived(isScaleBand(ctx.yScale) && !ctx.radial ? ctx.yScale.bandwidth() / 2 : 0);
-  const axis = $derived(axisProp == null ? (isScaleBand(ctx.yScale) ? 'y' : 'x') : axisProp);
+  const axis = $derived(
+    axisProp == null ? (isScaleBand(ctx.yScale) || isScaleTime(ctx.yScale) ? 'y' : 'x') : axisProp
+  );
 
   const _lines: { x1: number; y1: number; x2: number; y2: number }[] = $derived.by(() => {
     let tmpLines: { x1: number; y1: number; x2: number; y2: number }[] = [];
@@ -175,7 +182,7 @@
             y2: max(ctx.yRange) as unknown as number,
           })),
         ];
-      } else if (xCoord) {
+      } else if (xCoord != null) {
         tmpLines = [
           ...tmpLines,
           {
@@ -201,7 +208,7 @@
             y2: yItem + yOffset,
           })),
         ];
-      } else if (yCoord) {
+      } else if (yCoord != null) {
         tmpLines = [
           ...tmpLines,
           {
@@ -249,6 +256,7 @@
       height: 0,
     };
     if (!highlightData) return tmpArea;
+
     if (axis === 'x' || axis === 'both') {
       // x area
       if (Array.isArray(xCoord)) {
@@ -284,9 +292,9 @@
         tmpArea.height = ctx.yScale.step();
       } else {
         // Find width to next data point
-        const index = ctx.flatData.findIndex((d) => Number(x(d)) === Number(x(highlightData)));
+        const index = ctx.flatData.findIndex((d) => Number(y(d)) === Number(y(highlightData)));
         const isLastPoint = index + 1 === ctx.flatData.length;
-        const nextDataPoint = isLastPoint ? max(ctx.yDomain) : x(ctx.flatData[index + 1]);
+        const nextDataPoint = isLastPoint ? max(ctx.yDomain) : y(ctx.flatData[index + 1]);
         tmpArea.height = (ctx.yScale(nextDataPoint) ?? 0) - (yCoord ?? 0);
       }
 
@@ -432,11 +440,6 @@
       return tmpPoints;
     }
   );
-
-  const areaProps = $derived(extractLayerProps(area, 'highlight-area'));
-  const barProps = $derived(extractLayerProps(bar, 'highlight-bar'));
-  const linesProps = $derived(extractLayerProps(linesProp, 'highlight-line'));
-  const pointsProps = $derived(extractLayerProps(points, 'highlight-point'));
 </script>
 
 {#if highlightData}
@@ -451,15 +454,16 @@
         endAngle={_area.x + _area.width}
         innerRadius={_area.y}
         outerRadius={_area.y + _area.height}
-        class={cls(!areaProps.fill && 'fill-surface-content/5', areaProps.class)}
+        {opacity}
+        class="lc-highlight-area"
         onclick={onAreaClick && ((e) => onAreaClick(e, { data: highlightData }))}
       />
     {:else}
       <Rect
         motion={motion === 'spring' ? 'spring' : undefined}
+        {opacity}
         {..._area}
-        {...areaProps}
-        class={cls(!areaProps.fill && 'fill-surface-content/5', areaProps.class)}
+        {...extractLayerProps(area, 'lc-highlight-area')}
         onclick={onAreaClick && ((e) => onAreaClick(e, { data: highlightData }))}
       />
     {/if}
@@ -472,8 +476,8 @@
       <Bar
         motion={motion === 'spring' ? 'spring' : undefined}
         data={highlightData}
-        {...barProps}
-        class={cls(!barProps.fill && 'fill-primary', barProps.class)}
+        {opacity}
+        {...extractLayerProps(bar, 'lc-highlight-bar')}
         onclick={onBarClick && ((e) => onBarClick(e, { data: highlightData }))}
       />
     {/if}
@@ -490,11 +494,8 @@
           y1={line.y1}
           x2={line.x2}
           y2={line.y2}
-          {...linesProps}
-          class={cls(
-            'stroke-surface-content/20 stroke-2 [stroke-dasharray:2,2] pointer-events-none',
-            linesProps.class
-          )}
+          {opacity}
+          {...extractLayerProps(linesProp, 'lc-highlight-line')}
         />
       {/each}
     {/if}
@@ -512,12 +513,8 @@
           fill={point.fill}
           r={4}
           strokeWidth={6}
-          {...pointsProps}
-          class={cls(
-            'stroke-white [paint-order:stroke] drop-shadow-sm',
-            !point.fill && (typeof points === 'boolean' || !points.fill) && 'fill-primary',
-            pointsProps.class
-          )}
+          {opacity}
+          {...extractLayerProps(points, 'lc-highlight-point')}
           onpointerdown={onPointClick &&
             ((e) => {
               // Do not propagate `pointerdown` event to `BrushContext` if `onclick` is provided
@@ -543,3 +540,33 @@
     {/if}
   {/if}
 {/if}
+
+<style>
+  @layer components {
+    :global(:where(.lc-highlight-area)) {
+      --fill-color: color-mix(in oklab, var(--color-surface-content, currentColor) 5%, transparent);
+    }
+
+    :global(:where(.lc-highlight-bar)) {
+      --fill-color: var(--color-primary, currentColor);
+    }
+
+    :global(:where(.lc-highlight-line)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 20%,
+        transparent
+      );
+      stroke-width: 2;
+      stroke-dasharray: 2 2;
+      pointer-events: none;
+    }
+
+    :global(:where(.lc-highlight-point)) {
+      --stroke-color: white;
+      --fill-color: var(--color-primary, currentColor);
+      paint-order: stroke;
+      filter: drop-shadow(var(--drop-shadow-sm, 0 1px 2px rgb(0 0 0 / 0.15)));
+    }
+  }
+</style>

package/dist/components/Highlight.svelte.d.ts

@@ -82,6 +82,10 @@ export type HighlightPropsWithoutHTML = {
      * @default true
      */
     motion?: MotionProp;
+    /**
+     * The opacity of the element. (0 to 1)
+     */
+    opacity?: number;
     onAreaClick?: (e: MouseEvent, detail: {
         data: any;
     }) => void;

package/dist/components/Hull.svelte

@@ -55,7 +55,7 @@
 <script lang="ts">
   import { min } from 'd3-array';
   import { Delaunay } from 'd3-delaunay';
-  // @ts-expect-error
+  // @ts-expect-error - no types available
   import { geoVoronoi } from 'd3-geo-voronoi';
   import { curveLinearClosed } from 'd3-shape';
   import { cls } from '@layerstack/tailwind';
@@ -65,7 +65,6 @@
   import Spline from './Spline.svelte';
   import { getChartContext } from './Chart.svelte';
   import { getGeoContext } from './GeoContext.svelte';
-  import { layerClass } from '../utils/attributes.js';
 
   let {
     data,
@@ -104,13 +103,13 @@
   );
 </script>
 
-<Group {...restProps} class={cls(layerClass('hull-g'), classes.root, className)} bind:ref>
+<Group {...restProps} class={cls('lc-hull-g', classes.root, className)} bind:ref>
   {#if geoCtx.projection}
     {@const polygon = geoVoronoi().hull(points)}
     <GeoPath
       geojson={polygon}
       {curve}
-      class={cls(layerClass('hull-path'), 'fill-transparent', classes.path)}
+      class={['lc-hull-path', classes.path]}
       onclick={(e) => onclick?.(e, { points, polygon })}
       onpointermove={(e) => onpointermove?.(e, { points, polygon })}
       {onpointerleave}
@@ -123,10 +122,18 @@
       x={(d) => d[0]}
       y={(d) => d[1]}
       {curve}
-      class={cls(layerClass('hull-class'), 'fill-transparent', classes.path)}
+      class={['lc-hull-class', classes.path]}
       onclick={(e) => onclick?.(e, { points, polygon })}
       onpointermove={(e) => onpointermove?.(e, { points, polygon })}
       {onpointerleave}
     />
   {/if}
 </Group>
+
+<style>
+  @layer components {
+    :global(:where(.lc-hull-path, .lc-hull-geo-path)) {
+      fill: transparent;
+    }
+  }
+</style>

package/dist/components/Labels.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" module>
   import Text, { type TextProps } from './Text.svelte';
   import { type ComponentProps, type Snippet } from 'svelte';
-  import { format as formatValue, type FormatType } from '@layerstack/utils';
+  import { format as formatValue, type FormatType, type FormatConfig } from '@layerstack/utils';
   import type { Without } from '../utils/types.js';
   import Points, { type Point } from './Points.svelte';
   import { accessor, type Accessor } from '../utils/common.js';
@@ -51,7 +51,7 @@
     /**
      * The format of the label
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
 
     /**
      * Define unique value for {#each} `(key)` expressions to improve transitions.
@@ -74,7 +74,7 @@
   import { isScaleBand } from '../utils/scales.svelte.js';
   import { getChartContext } from './Chart.svelte';
   import Group from './Group.svelte';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { extractLayerProps } from '../utils/attributes.js';
 
   const ctx = getChartContext();
 
@@ -109,6 +109,7 @@
 
     const formattedValue = formatValue(
       displayValue,
+      // @ts-expect-error - improve types
       format ??
         (value
           ? undefined
@@ -173,28 +174,38 @@
   }
 </script>
 
-<Group class={layerClass('labels-g')}>
+<Group class="lc-labels-g">
   <Points {data} {x} {y}>
     {#snippet children({ points })}
       {#each points as point, i (key(point.data, i))}
-        {@const textProps = extractLayerProps(getTextProps(point), 'labels-text')}
+        {@const textProps = extractLayerProps(getTextProps(point), 'lc-labels-text')}
         {#if childrenProp}
           {@render childrenProp({ data: point, textProps })}
         {:else}
           <Text
+            data-placement={placement}
             {...textProps}
             {...restProps}
-            class={cls(
-              'text-xs',
-              placement === 'inside'
-                ? 'fill-surface-300 stroke-surface-content'
-                : 'fill-surface-content stroke-surface-100',
-              textProps.class,
-              className
-            )}
+            {...extractLayerProps(getTextProps(point), 'lc-labels-text', className ?? '')}
           />
         {/if}
       {/each}
     {/snippet}
   </Points>
 </Group>
+
+<style>
+  @layer components {
+    :global(:where(.lc-labels-text)) {
+      font-size: 12px;
+
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: var(--color-surface-100, light-dark(white, black));
+
+      &[data-placement='inside'] {
+        --fill-color: var(--color-surface-100, light-dark(white, black));
+        --stroke-color: var(--color-surface-content, currentColor);
+      }
+    }
+  }
+</style>

package/dist/components/Labels.svelte.d.ts

@@ -1,6 +1,6 @@
 import Text, { type TextProps } from './Text.svelte';
 import { type ComponentProps, type Snippet } from 'svelte';
-import { type FormatType } from '@layerstack/utils';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
 import type { Without } from '../utils/types.js';
 import { type Point } from './Points.svelte';
 import { type Accessor } from '../utils/common.js';
@@ -42,7 +42,7 @@ export type LabelsPropsWithoutHTML<T = any> = {
     /**
      * The format of the label
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
     /**
      * Define unique value for {#each} `(key)` expressions to improve transitions.
      * `index` position used by default
@@ -56,10 +56,17 @@ export type LabelsPropsWithoutHTML<T = any> = {
     }]>;
 };
 export type LabelsProps<T = any> = LabelsPropsWithoutHTML<T> & Without<TextProps, LabelsPropsWithoutHTML<T>>;
+declare function $$render<TData = any>(): {
+    props: LabelsProps<TData>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<TData = any> {
-    props(): LabelsProps<TData>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
     bindings(): "";
     exports(): {};
 }