layerchart 2.0.0-next.5 → 2.0.0-next.51

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

@@ -0,0 +1,147 @@
+import type { ComponentProps, Snippet } from 'svelte';
+import TooltipContext from './tooltip/TooltipContext.svelte';
+import type Tooltip from './tooltip/Tooltip.svelte';
+import type TooltipHeader from './tooltip/TooltipHeader.svelte';
+import type TooltipList from './tooltip/TooltipList.svelte';
+import type TooltipItem from './tooltip/TooltipItem.svelte';
+import type TooltipSeparator from './tooltip/TooltipSeparator.svelte';
+export type ChartChildrenProps<TData, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale, ChartSnippet = Snippet<[{
+    context: ChartState<TData, XScale, YScale>;
+}]>> = {
+    /**
+     * The axis to be used for the chart.
+     *
+     * @default true
+     */
+    axis?: ComponentProps<typeof Axis> | 'x' | 'y' | boolean | ChartSnippet;
+    /**
+     * The grid to be used for the chart.
+     *
+     * @default true
+     */
+    grid?: ComponentProps<typeof Grid> | boolean | ChartSnippet;
+    /**
+     * The labels to be used for the chart.
+     *
+     * @default false
+     */
+    labels?: ComponentProps<typeof Labels<TData>> | boolean | ChartSnippet;
+    /**
+     * The legend to be used for the chart.
+     *
+     * @default false
+     */
+    legend?: ComponentProps<typeof Legend> | boolean | ChartSnippet;
+    /**
+     * The points to be used for the chart.
+     *
+     * @default false
+     */
+    points?: ComponentProps<typeof Points> | boolean | ChartSnippet;
+    /**
+     * The rule to be used for the chart.
+     *
+     * @default true
+     */
+    rule?: ComponentProps<typeof Rule> | boolean | ChartSnippet;
+    /**
+     * The tooltip snippet to be used for the chart.
+     */
+    tooltip?: ChartSnippet;
+    /**
+     * Tooltip context to be used for the chart.
+     */
+    tooltipContext?: Partial<ComponentProps<typeof TooltipContext>> | boolean;
+    highlight?: boolean | Partial<ComponentProps<typeof Highlight>> | ChartSnippet;
+    /** Annotations to show on chart */
+    annotations?: ChartAnnotationsType;
+    /**
+     * Callback when tooltip data is clicked.
+     */
+    onTooltipClick?: (e: MouseEvent, details: {
+        data: any;
+    }) => void;
+    /**
+     * Additional props to be passed to the components rendered internally by Chart components.
+     * This is useful for customizing the behavior of individual components, without having
+     * to fully override them via snippets.
+     */
+    props?: Partial<{
+        area: Partial<ComponentProps<typeof Area>>;
+        arc: Partial<ComponentProps<typeof Arc>>;
+        bars: Partial<ComponentProps<typeof Bars>>;
+        brush: Partial<ComponentProps<typeof BrushContext>>;
+        canvas: Partial<ComponentProps<typeof Canvas>>;
+        grid: Partial<ComponentProps<typeof Grid>>;
+        group: Partial<ComponentProps<typeof Group>>;
+        highlight: Partial<ComponentProps<typeof Highlight>>;
+        labels: Partial<ComponentProps<Labels<TData>>>;
+        legend: Partial<ComponentProps<typeof Legend>>;
+        line: Partial<ComponentProps<typeof Line>>;
+        pie: Partial<ComponentProps<typeof Pie>>;
+        spline: Partial<ComponentProps<typeof Spline>>;
+        points: Partial<ComponentProps<typeof Points>>;
+        rule: Partial<ComponentProps<typeof Rule>>;
+        svg: Partial<ComponentProps<typeof Svg>>;
+        tooltip: {
+            context?: Partial<ComponentProps<typeof TooltipContext>>;
+            root?: Omit<Partial<ComponentProps<typeof Tooltip>>, 'context'>;
+            header?: Partial<ComponentProps<typeof TooltipHeader>>;
+            list?: Partial<ComponentProps<typeof TooltipList>>;
+            item?: Partial<ComponentProps<typeof TooltipItem>>;
+            separator?: Partial<ComponentProps<typeof TooltipSeparator>>;
+            hideTotal?: boolean;
+        };
+        xAxis: Partial<ComponentProps<typeof Axis>>;
+        yAxis: Partial<ComponentProps<typeof Axis>>;
+    }>;
+    children?: ChartSnippet;
+    belowContext?: ChartSnippet;
+    belowMarks?: ChartSnippet;
+    marks?: ChartSnippet;
+    aboveMarks?: ChartSnippet;
+    aboveContext?: ChartSnippet;
+};
+import { type ChartState } from '../contexts/chart.js';
+import type { AnyScale } from '../utils/scales.svelte.js';
+import Area from './Area.svelte';
+import Arc from './Arc.svelte';
+import Axis from './Axis.svelte';
+import Bars from './Bars.svelte';
+import BrushContext from './BrushContext.svelte';
+import Grid from './Grid.svelte';
+import Group from './Group.svelte';
+import Highlight from './Highlight.svelte';
+import Points from './Points.svelte';
+import Labels from './Labels.svelte';
+import Legend from './Legend.svelte';
+import Line from './Line.svelte';
+import Pie from './Pie.svelte';
+import Rule from './Rule.svelte';
+import Spline from './Spline.svelte';
+import type { Canvas, Svg } from './index.js';
+import type { ChartAnnotations as ChartAnnotationsType } from './charts/types.js';
+declare function $$render<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(): {
+    props: ChartChildrenProps<TData, XScale, YScale>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> {
+    props(): ReturnType<typeof $$render<TData, XScale, YScale>>['props'];
+    events(): ReturnType<typeof $$render<TData, XScale, YScale>>['events'];
+    slots(): ReturnType<typeof $$render<TData, XScale, YScale>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, XScale, YScale>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, XScale, YScale>['props']>, ReturnType<__sveltets_Render<TData, XScale, YScale>['events']>, ReturnType<__sveltets_Render<TData, XScale, YScale>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, XScale, YScale>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, XScale, YScale>['exports']>;
+    <TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(internal: unknown, props: ReturnType<__sveltets_Render<TData, XScale, YScale>['props']> & {}): ReturnType<__sveltets_Render<TData, XScale, YScale>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const ChartChildren: $$IsomorphicComponent;
+type ChartChildren<TData = any, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale> = InstanceType<typeof ChartChildren<TData, XScale, YScale>>;
+export default ChartChildren;

package/dist/components/ChartClipPath.svelte

@@ -25,7 +25,7 @@
 </script>
 
 <script lang="ts">
-  import { getChartContext } from './Chart.svelte';
+  import { getChartContext } from '../contexts/chart.js';
 
   import RectClipPath, { type RectClipPathProps } from './RectClipPath.svelte';
   import { extractLayerProps } from '../utils/attributes.js';
@@ -41,5 +41,5 @@
   {disabled}
   height={ctx.height + (full ? (ctx.padding?.top ?? 0) + (ctx.padding?.bottom ?? 0) : 0)}
   width={ctx.width + (full ? (ctx.padding?.left ?? 0) + (ctx.padding?.right ?? 0) : 0)}
-  {...extractLayerProps(restProps, 'chart-clip-path')}
+  {...extractLayerProps(restProps, 'lc-chart-clip-path')}
 />

package/dist/components/Chord.svelte

@@ -0,0 +1,114 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+  import type { ChordGroup, Chord } from 'd3-chord';
+
+  export type ChordProps = {
+    /**
+     * The input adjacency matrix for the chord layout.
+     */
+    matrix: number[][];
+
+    /**
+     * The variant of chord layout to use.
+     *
+     * - `'default'` - symmetric chord layout (d3.chord)
+     * - `'directed'` - directed/asymmetric chord layout (d3.chordDirected)
+     * - `'transpose'` - transpose chord layout, highlights outgoing (d3.chordTranspose)
+     *
+     * @default 'default'
+     */
+    variant?: 'default' | 'directed' | 'transpose';
+
+    /**
+     * The angular padding between adjacent groups in radians.
+     *
+     * @default 0
+     */
+    padAngle?: number;
+
+    /**
+     * A comparator function to sort groups.
+     */
+    sortGroups?: ((a: number, b: number) => number) | null;
+
+    /**
+     * A comparator function to sort subgroups within each group.
+     */
+    sortSubgroups?: ((a: number, b: number) => number) | null;
+
+    /**
+     * A comparator function to sort chords.
+     */
+    sortChords?: ((a: number, b: number) => number) | null;
+
+    /**
+     * Multiplier for inner radius relative to outerRadius.
+     *
+     * @default 0.9
+     */
+    innerRadiusRatio?: number;
+
+    children?: Snippet<
+      [
+        {
+          groups: ChordGroup[];
+          chords: Chord[];
+          innerRadius: number;
+          outerRadius: number;
+        },
+      ]
+    >;
+  };
+</script>
+
+<script lang="ts">
+  import { chord as d3Chord, chordDirected, chordTranspose } from 'd3-chord';
+
+  import { getChartContext } from '../contexts/chart.js';
+
+  let {
+    matrix,
+    variant = 'default',
+    padAngle = 0,
+    sortGroups = null,
+    sortSubgroups = null,
+    sortChords = null,
+    innerRadiusRatio = 0.9,
+    children,
+  }: ChordProps = $props();
+
+  const ctx = getChartContext();
+
+  const outerRadius = $derived(Math.max(0, Math.min(ctx.width, ctx.height) / 2));
+  const innerRadius = $derived(outerRadius * innerRadiusRatio);
+
+  const chordLayout = $derived.by(() => {
+    const generator =
+      variant === 'directed'
+        ? chordDirected()
+        : variant === 'transpose'
+          ? chordTranspose()
+          : d3Chord();
+
+    generator.padAngle(padAngle);
+
+    if (sortGroups != null) {
+      generator.sortGroups(sortGroups);
+    }
+    if (sortSubgroups != null) {
+      generator.sortSubgroups(sortSubgroups);
+    }
+    if (sortChords != null) {
+      generator.sortChords(sortChords);
+    }
+
+    return generator(matrix);
+  });
+</script>
+
+{@render children?.({
+  groups: chordLayout.groups,
+  chords: chordLayout,
+  innerRadius,
+  outerRadius,
+})}

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

@@ -0,0 +1,53 @@
+import type { Snippet } from 'svelte';
+import type { ChordGroup, Chord } from 'd3-chord';
+export type ChordProps = {
+    /**
+     * The input adjacency matrix for the chord layout.
+     */
+    matrix: number[][];
+    /**
+     * The variant of chord layout to use.
+     *
+     * - `'default'` - symmetric chord layout (d3.chord)
+     * - `'directed'` - directed/asymmetric chord layout (d3.chordDirected)
+     * - `'transpose'` - transpose chord layout, highlights outgoing (d3.chordTranspose)
+     *
+     * @default 'default'
+     */
+    variant?: 'default' | 'directed' | 'transpose';
+    /**
+     * The angular padding between adjacent groups in radians.
+     *
+     * @default 0
+     */
+    padAngle?: number;
+    /**
+     * A comparator function to sort groups.
+     */
+    sortGroups?: ((a: number, b: number) => number) | null;
+    /**
+     * A comparator function to sort subgroups within each group.
+     */
+    sortSubgroups?: ((a: number, b: number) => number) | null;
+    /**
+     * A comparator function to sort chords.
+     */
+    sortChords?: ((a: number, b: number) => number) | null;
+    /**
+     * Multiplier for inner radius relative to outerRadius.
+     *
+     * @default 0.9
+     */
+    innerRadiusRatio?: number;
+    children?: Snippet<[
+        {
+            groups: ChordGroup[];
+            chords: Chord[];
+            innerRadius: number;
+            outerRadius: number;
+        }
+    ]>;
+};
+declare const Chord: import("svelte").Component<ChordProps, {}, "">;
+type Chord = ReturnType<typeof Chord>;
+export default Chord;