layerchart 0.72.1 → 0.73.0

package/dist/components/charts/AreaChart.svelte

@@ -92,6 +92,13 @@
     points?: Partial<ComponentProps<Points>>;
     highlight?: Partial<ComponentProps<Highlight>>;
     labels?: Partial<ComponentProps<Labels>>;
+    tooltip?: {
+      root?: Partial<ComponentProps<Tooltip.Root>>;
+      header?: Partial<ComponentProps<Tooltip.Header>>;
+      list?: Partial<ComponentProps<Tooltip.List>>;
+      item?: Partial<ComponentProps<Tooltip.Item>>;
+      separator?: Partial<ComponentProps<Tooltip.Separator>>;
+    };
   } = {};
 
   export let renderContext: 'svg' | 'canvas' = 'svg';
@@ -303,9 +310,9 @@
     </slot>
 
     <slot name="tooltip" {...slotProps}>
-      <Tooltip.Root let:data>
-        <Tooltip.Header>{format(x(data))}</Tooltip.Header>
-        <Tooltip.List>
+      <Tooltip.Root {...props.tooltip?.root} let:data>
+        <Tooltip.Header {...props.tooltip?.header}>{format(x(data))}</Tooltip.Header>
+        <Tooltip.List {...props.tooltip?.list}>
           <!-- Reverse series order so tooltip items match stacks -->
           {@const seriesItems = stackSeries ? [...series].reverse() : series}
           {#each seriesItems as s}
@@ -318,11 +325,12 @@
               color={s.color}
               {format}
               valueAlign="right"
+              {...props.tooltip?.item}
             />
           {/each}
 
           {#if stackSeries}
-            <Tooltip.Separator />
+            <Tooltip.Separator {...props.tooltip?.separator} />
 
             <Tooltip.Item
               label="total"
@@ -334,6 +342,7 @@
               })}
               format="integer"
               valueAlign="right"
+              {...props.tooltip?.root}
             />
           {/if}
         </Tooltip.List>

package/dist/components/charts/BarChart.svelte

@@ -24,6 +24,7 @@
     findRelatedData,
     type Accessor,
   } from '../../utils/common.js';
+  import { asAny } from '../../utils/types.js';
 
   type ChartProps = ComponentProps<Chart<TData>>;
 
@@ -126,6 +127,13 @@
     legend?: Partial<ComponentProps<Legend>>;
     highlight?: Partial<ComponentProps<Highlight>>;
     labels?: Partial<ComponentProps<Labels>>;
+    tooltip?: {
+      root?: Partial<ComponentProps<Tooltip.Root>>;
+      header?: Partial<ComponentProps<Tooltip.Header>>;
+      list?: Partial<ComponentProps<Tooltip.List>>;
+      item?: Partial<ComponentProps<Tooltip.Item>>;
+      separator?: Partial<ComponentProps<Tooltip.Separator>>;
+    };
   } = {};
 
   export let renderContext: 'svg' | 'canvas' = 'svg';
@@ -336,35 +344,39 @@
     </slot>
 
     <slot name="tooltip" {...slotProps}>
-      <Tooltip.Root let:data>
-        <Tooltip.Header>{format(isVertical ? x(data) : y(data))}</Tooltip.Header>
-        <Tooltip.List>
+      <Tooltip.Root {...props.tooltip?.root} let:data>
+        <Tooltip.Header {...props.tooltip?.header}
+          >{format(isVertical ? x(data) : y(data))}</Tooltip.Header
+        >
+        <Tooltip.List {...props.tooltip?.list}>
           <!-- Reverse series order so tooltip items match stacks -->
           {@const seriesItems = stackSeries ? [...series].reverse() : series}
           {#each seriesItems as s}
             {@const seriesTooltipData = s.data ? findRelatedData(s.data, data, x) : data}
-            {@const valueAccessor = accessor(s.value ?? (s.data ? (y as any) : s.key))}
+            {@const valueAccessor = accessor(s.value ?? (s.data ? asAny(y) : s.key))}
             <Tooltip.Item
               label={s.label ?? (s.key !== 'default' ? s.key : 'value')}
               value={seriesTooltipData ? valueAccessor(seriesTooltipData) : null}
               color={s.color ?? cScale?.(c(data))}
               {format}
               valueAlign="right"
+              {...props.tooltip?.item}
             />
           {/each}
 
           {#if stackSeries || groupSeries}
-            <Tooltip.Separator />
+            <Tooltip.Separator {...props.tooltip?.separator} />
 
             <Tooltip.Item
               label="total"
               value={sum(series, (s) => {
                 const seriesTooltipData = s.data ? findRelatedData(s.data, data, x) : data;
-                const valueAccessor = accessor(s.value ?? (s.data ? (y as any) : s.key));
+                const valueAccessor = accessor(s.value ?? (s.data ? asAny(y) : s.key));
                 return valueAccessor(seriesTooltipData);
               })}
               format="integer"
               valueAlign="right"
+              {...props.tooltip?.item}
             />
           {/if}
         </Tooltip.List>

package/dist/components/charts/LineChart.svelte

@@ -83,6 +83,13 @@
     highlight?: Partial<ComponentProps<Highlight>>;
     labels?: Partial<ComponentProps<Labels>>;
     points?: Partial<ComponentProps<Points>>;
+    tooltip?: {
+      root?: Partial<ComponentProps<Tooltip.Root>>;
+      header?: Partial<ComponentProps<Tooltip.Header>>;
+      list?: Partial<ComponentProps<Tooltip.List>>;
+      item?: Partial<ComponentProps<Tooltip.Item>>;
+      separator?: Partial<ComponentProps<Tooltip.Separator>>;
+    };
   } = {};
 
   export let renderContext: 'svg' | 'canvas' = 'svg';
@@ -243,9 +250,9 @@
     </slot>
 
     <slot name="tooltip" {...slotProps}>
-      <Tooltip.Root let:data>
-        <Tooltip.Header>{format(x(data))}</Tooltip.Header>
-        <Tooltip.List>
+      <Tooltip.Root {...props.tooltip?.root} let:data>
+        <Tooltip.Header {...props.tooltip?.header}>{format(x(data))}</Tooltip.Header>
+        <Tooltip.List {...props.tooltip?.list}>
           {#each series as s}
             {@const seriesTooltipData = s.data ? findRelatedData(s.data, data, x) : data}
             {@const valueAccessor = accessor(s.value ?? (s.data ? asAny(y) : s.key))}
@@ -255,6 +262,7 @@
               value={seriesTooltipData ? valueAccessor(seriesTooltipData) : null}
               color={s.color}
               {format}
+              {...props.tooltip?.item}
             />
           {/each}
         </Tooltip.List>

package/dist/components/charts/PieChart.svelte

@@ -107,6 +107,13 @@
     group?: Partial<ComponentProps<Group>>;
     arc?: Partial<ComponentProps<Arc>>;
     legend?: Partial<ComponentProps<Legend>>;
+    tooltip?: {
+      root?: Partial<ComponentProps<Tooltip.Root>>;
+      header?: Partial<ComponentProps<Tooltip.Header>>;
+      list?: Partial<ComponentProps<Tooltip.List>>;
+      item?: Partial<ComponentProps<Tooltip.Item>>;
+      separator?: Partial<ComponentProps<Tooltip.Separator>>;
+    };
   } = {};
 
   export let renderContext: 'svg' | 'canvas' = 'svg';
@@ -257,13 +264,14 @@
     </slot>
 
     <slot name="tooltip" {...slotProps}>
-      <Tooltip.Root let:data>
-        <Tooltip.List>
+      <Tooltip.Root {...props.tooltip?.root} let:data>
+        <Tooltip.List {...props.tooltip?.list}>
           <Tooltip.Item
             label={labelAccessor(data) || keyAccessor(data)}
             value={valueAccessor(data)}
             color={cScale?.(c(data))}
             {format}
+            {...props.tooltip?.item}
           />
         </Tooltip.List>
       </Tooltip.Root>

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

@@ -4,6 +4,7 @@ import Arc from '../Arc.svelte';
 import Group from '../Group.svelte';
 import Legend from '../Legend.svelte';
 import Pie from '../Pie.svelte';
+import * as Tooltip from '../tooltip/index.js';
 import { type Accessor } from '../../utils/common.js';
 declare class __sveltets_Render<TData> {
     props(): {
@@ -230,6 +231,13 @@ declare class __sveltets_Render<TData> {
             group?: Partial<ComponentProps<Group>>;
             arc?: Partial<ComponentProps<Arc>>;
             legend?: Partial<ComponentProps<Legend>>;
+            tooltip?: {
+                root?: Partial<ComponentProps<Tooltip.Root>>;
+                header?: Partial<ComponentProps<Tooltip.Header>>;
+                list?: Partial<ComponentProps<Tooltip.List>>;
+                item?: Partial<ComponentProps<Tooltip.Item>>;
+                separator?: Partial<ComponentProps<Tooltip.Separator>>;
+            } | undefined;
         } | undefined;
         range?: number[];
         series?: {

package/dist/components/charts/ScatterChart.svelte

@@ -64,6 +64,13 @@
     labels?: Partial<ComponentProps<Labels>>;
     legend?: Partial<ComponentProps<Legend>>;
     rule?: Partial<ComponentProps<Rule>>;
+    tooltip?: {
+      root?: Partial<ComponentProps<Tooltip.Root>>;
+      header?: Partial<ComponentProps<Tooltip.Header>>;
+      list?: Partial<ComponentProps<Tooltip.List>>;
+      item?: Partial<ComponentProps<Tooltip.Item>>;
+      separator?: Partial<ComponentProps<Tooltip.Separator>>;
+    };
   } = {};
 
   export let renderContext: 'svg' | 'canvas' = 'svg';
@@ -199,28 +206,31 @@
     </slot>
 
     <slot name="tooltip" {...slotProps}>
-      <Tooltip.Root let:data>
+      <Tooltip.Root {...props.tooltip?.root} let:data>
         {#if activeSeries?.key !== 'default'}
-          <Tooltip.Header color={activeSeries?.color}>
+          <Tooltip.Header {...props.tooltip?.header} color={activeSeries?.color}>
             {activeSeries?.label ?? activeSeries?.key}
           </Tooltip.Header>
         {/if}
-        <Tooltip.List>
+        <Tooltip.List {...props.tooltip?.list}>
           <Tooltip.Item
             label={typeof config.x === 'string' ? config.x : 'x'}
             value={x(data)}
             {format}
+            {...props.tooltip?.item}
           />
           <Tooltip.Item
             label={typeof config.y === 'string' ? config.y : 'y'}
             value={y(data)}
             {format}
+            {...props.tooltip?.item}
           />
           {#if config.r}
             <Tooltip.Item
               label={typeof config.r === 'string' ? config.r : 'r'}
               value={r(data)}
               {format}
+              {...props.tooltip?.item}
             />
           {/if}
         </Tooltip.List>

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.72.1",
+  "version": "0.73.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.10",
     "@mdi/js": "^7.4.47",