layerchart 2.0.0-next.1 → 2.0.0-next.3

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

@@ -0,0 +1,39 @@
+import type { SeriesData, SimplifiedChartProps, SimplifiedChartPropsObject } from './types.js';
+import type { AnyScale } from '../../utils/scales.svelte.js';
+import { type ComponentProps } from 'svelte';
+export type ScatterChartExtraSnippetProps<TData> = {
+    getLabelsProps: (s: SeriesData<TData, typeof Points>, i: number) => ComponentProps<typeof Labels<TData>>;
+    getPointsProps: (s: SeriesData<TData, typeof Points>, i: number) => ComponentProps<typeof Points>;
+    getHighlightProps: () => ComponentProps<typeof Highlight>;
+    getAxisProps: (axisDirection: 'x' | 'y') => ComponentProps<typeof Axis>;
+    getRuleProps: () => ComponentProps<typeof Rule>;
+};
+export type ScatterChartPropsObjProp = Pick<SimplifiedChartPropsObject, 'brush' | 'canvas' | 'grid' | 'highlight' | 'labels' | 'legend' | 'points' | 'rule' | 'svg' | 'tooltip' | 'xAxis' | 'yAxis'>;
+export type ScatterChartProps<TData> = Omit<SimplifiedChartProps<TData, typeof Points, ScatterChartExtraSnippetProps<TData>>, 'radial'> & {
+    props?: ScatterChartPropsObjProp;
+    yDomain?: ComponentProps<typeof BrushContext>['yDomain'];
+    yScale?: AnyScale;
+};
+import Axis from '../Axis.svelte';
+import BrushContext from '../BrushContext.svelte';
+import Highlight from '../Highlight.svelte';
+import Labels from '../Labels.svelte';
+import Points from '../Points.svelte';
+import Rule from '../Rule.svelte';
+declare class __sveltets_Render<TData> {
+    props(): ScatterChartProps<TData>;
+    events(): {};
+    slots(): {};
+    bindings(): "context";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ScatterChart: $$IsomorphicComponent;
+type ScatterChart<TData> = InstanceType<typeof ScatterChart<TData>>;
+export default ScatterChart;

package/dist/components/charts/index.d.ts

@@ -1,5 +1,13 @@
+export { default as ArcChart } from './ArcChart.svelte';
+export * from './ArcChart.svelte';
 export { default as AreaChart } from './AreaChart.svelte';
+export * from './AreaChart.svelte';
 export { default as BarChart } from './BarChart.svelte';
+export * from './BarChart.svelte';
 export { default as LineChart } from './LineChart.svelte';
+export * from './LineChart.svelte';
 export { default as PieChart } from './PieChart.svelte';
+export * from './PieChart.svelte';
 export { default as ScatterChart } from './ScatterChart.svelte';
+export * from './ScatterChart.svelte';
+export type * from './types.js';

package/dist/components/charts/index.js

@@ -1,5 +1,12 @@
+export { default as ArcChart } from './ArcChart.svelte';
+export * from './ArcChart.svelte';
 export { default as AreaChart } from './AreaChart.svelte';
+export * from './AreaChart.svelte';
 export { default as BarChart } from './BarChart.svelte';
+export * from './BarChart.svelte';
 export { default as LineChart } from './LineChart.svelte';
+export * from './LineChart.svelte';
 export { default as PieChart } from './PieChart.svelte';
+export * from './PieChart.svelte';
 export { default as ScatterChart } from './ScatterChart.svelte';
+export * from './ScatterChart.svelte';

package/dist/components/charts/types.d.ts

@@ -0,0 +1,253 @@
+import type { Accessor } from '../../utils/common.js';
+import type { Component, ComponentProps, Snippet } from 'svelte';
+import type BrushContext from '../BrushContext.svelte';
+import type { AnyScale } from '../../utils/scales.svelte.js';
+import type { AnnotationPoint, AnnotationLine, AnnotationRange, Area, Axis, Group, Labels, Legend, Points, Rule, Spline } from '../index.js';
+import type TooltipContext from '../tooltip/TooltipContext.svelte';
+import type { TooltipContextValue } from '../tooltip/TooltipContext.svelte';
+import type Highlight from '../Highlight.svelte';
+import type Line from '../Line.svelte';
+import type Svg from '../layout/Svg.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';
+import type { ChartContextValue, ChartPropsWithoutHTML } from '../Chart.svelte';
+import type Grid from '../Grid.svelte';
+import type Bars from '../Bars.svelte';
+import type Pie from '../Pie.svelte';
+import type Arc from '../Arc.svelte';
+import type Canvas from '../layout/Canvas.svelte';
+import type { Without } from '../../utils/types.js';
+export type SeriesData<TData, TComponent extends Component> = {
+    key: string;
+    label?: string;
+    value?: Accessor<TData>;
+    /**
+     * Maximum possible value. Useful when `data` is a single item
+     */
+    maxValue?: number;
+    data?: TData[];
+    color?: string;
+    props?: Partial<ComponentProps<TComponent>>;
+};
+export type SimplifiedChartSnippetProps<TData, TComponent extends Component, TSnippetProps> = {
+    /**
+     * The chart context
+     */
+    context: ChartContextValue<TData>;
+    /**
+     * The series of data for the chart.
+     */
+    series: SeriesData<TData, TComponent>[];
+    /**
+     * The visible series of data for the chart.
+     */
+    visibleSeries: SeriesData<TData, TComponent>[];
+    /**
+     * The current highlight series key for the chart.
+     */
+    highlightKey: SeriesData<TData, TComponent>['key'] | null;
+    /**
+     * A function to set the highlight series key for the chart.
+     */
+    setHighlightKey: (seriesKey: SeriesData<TData, TComponent>['key'] | null) => void;
+    /**
+     * Get the default props for the legend component.
+     */
+    getLegendProps: () => ComponentProps<typeof Legend>;
+} & TSnippetProps;
+export type SimplifiedChartSnippet<TData, TComponent extends Component, TSnippetProps> = Snippet<[
+    SimplifiedChartSnippetProps<TData, TComponent, TSnippetProps>
+]>;
+export type SimplifiedChartPropsObject<TData = any> = {
+    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<typeof 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>>;
+};
+export type BaseChartProps<TData, TComponent extends Component, TSnippetProps = {}, ChartSnippet = SimplifiedChartSnippet<TData, TComponent, TSnippetProps>> = {
+    /**
+     * The data to be rendered in the chart.
+     *
+     * @default []
+     */
+    data?: TData[];
+    /**
+     * The x accessor function to be used for the chart.
+     *
+     */
+    x?: Accessor<TData>;
+    /**
+     * The y accessor function to be used for the chart.
+     *
+     */
+    y?: Accessor<TData>;
+    xScale?: AnyScale;
+    /**
+     * The x domain to be used for the chart.
+     *
+     */
+    xDomain?: ComponentProps<typeof BrushContext>['xDomain'];
+    /**
+     * Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to
+     * radial.  Radial lines are positioned relative to the origin, use transform
+     * (ex. `<Group center>`) to change the origin
+     *
+     * @default false
+     */
+    radial?: boolean;
+    /**
+     * The series data to be used for the chart.
+     *
+     * @default [{ key: 'default', value: y, color: 'var(--color-primary)' }]
+     */
+    series?: SeriesData<TData, TComponent>[];
+    /**
+     * The layout of the series.
+     *
+     * @default 'overlap'
+     */
+    seriesLayout?: 'overlap' | 'stack' | 'stackExpand' | 'stackDiverging';
+    /**
+     * The axis to be used for the chart.
+     *
+     * @default true
+     */
+    axis?: ComponentProps<typeof Axis> | 'x' | 'y' | boolean | SimplifiedChartSnippet<TData, TComponent, TSnippetProps>;
+    /**
+     * The brush to be used for the chart.
+     *
+     * @default false
+     */
+    brush?: ComponentProps<typeof BrushContext> | boolean;
+    /**
+     * 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 to be used for the chart.
+     */
+    tooltip?: ComponentProps<typeof TooltipContext> | boolean | ChartSnippet;
+    highlight?: boolean | ChartSnippet;
+    /** Annotations to show on chart */
+    annotations?: ChartAnnotations;
+    /**
+     * The tooltip context to be used for the chart.
+     */
+    tooltipContext?: TooltipContextValue;
+    /**
+     * The event to be dispatched when the tooltip is clicked.
+     *
+     */
+    onTooltipClick?: (e: MouseEvent, details: {
+        data: any;
+    }) => void;
+    /**
+     * The render context to be used for the chart.
+     *
+     * @default 'svg'
+     */
+    renderContext?: 'svg' | 'canvas';
+    /**
+     * Whether to log the initial render performance using `console.time`.
+     *
+     * @default false
+     */
+    profile?: boolean;
+    /**
+     * Whether to enable debug mode.
+     *
+     * @default false
+     */
+    debug?: boolean;
+    /**
+     * A bindable reference to the chart context.
+     */
+    context?: ChartContextValue<TData>;
+    children?: ChartSnippet;
+    aboveContext?: ChartSnippet;
+    belowContext?: ChartSnippet;
+    belowMarks?: ChartSnippet;
+    aboveMarks?: ChartSnippet;
+    marks?: ChartSnippet;
+};
+export type SimplifiedChartProps<TData, TComponent extends Component, TSnippetProps = {}, ChartSnippet = SimplifiedChartSnippet<TData, TComponent, TSnippetProps>> = BaseChartProps<TData, TComponent, TSnippetProps, ChartSnippet> & Without<ChartPropsWithoutHTML<TData>, BaseChartProps<TData, TComponent, TSnippetProps, ChartSnippet>>;
+export type ChartAnnotations = Array<({
+    /** Create AnnotationPoint */
+    type: 'point';
+    /** Apply `above` or `below` marks
+     * @default 'above'
+     */
+    layer?: 'above' | 'below';
+    /** Related to specific series (if applicable).  Will hide if set and series not highlighted */
+    seriesKey?: string;
+} & ComponentProps<typeof AnnotationPoint>) | ({
+    /** Create AnnotationLine */
+    type: 'line';
+    /** Apply `above` or `below` marks
+     * @default 'above'
+     */
+    layer?: 'above' | 'below';
+    /** Related to specific series (if applicable).  Will hide if set and series not highlighted */
+    seriesKey?: string;
+} & ComponentProps<typeof AnnotationLine>) | ({
+    /** Create AnnotationRange */
+    type: 'range';
+    /** Apply `above` or `below` marks
+     * @default 'above'
+     */
+    layer?: 'above' | 'below';
+    /** Related to specific series (if applicable).  Will hide if set and series not highlighted */
+    seriesKey?: string;
+} & ComponentProps<typeof AnnotationRange>)>;

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

@@ -0,0 +1,30 @@
+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>;
+    selectedKeys: SelectionState<unknown>;
+    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>[];
+}
+type CreateLegendPropsOptions<TData, TComponent extends Component> = {
+    seriesState: SeriesState<TData, TComponent>;
+    props: Partial<ComponentProps<typeof Legend>>;
+};
+/**
+ * A prop builder for the legend component shared between the simplified charts.
+ */
+export declare function createLegendProps<TData, TComponent extends Component>(opts: CreateLegendPropsOptions<TData, TComponent>): ComponentProps<typeof Legend>;
+export {};

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

@@ -0,0 +1,55 @@
+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();
+    }
+    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));
+    }
+}
+/**
+ * A prop builder for the legend component shared between the simplified charts.
+ */
+export function createLegendProps(opts) {
+    return {
+        scale: opts.seriesState.isDefaultSeries
+            ? undefined
+            : scaleOrdinal(opts.seriesState.series.map((s) => s.key), opts.seriesState.series.map((s) => s.color)),
+        tickFormat: (key) => opts.seriesState.series.find((s) => s.key === key)?.label ?? key,
+        placement: 'bottom',
+        variant: 'swatches',
+        onclick: (_, item) => opts.seriesState.selectedSeries.toggleSelected(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'
+                : '',
+            ...opts.props?.classes,
+        },
+    };
+}

package/dist/components/index.d.ts

@@ -1,62 +1,134 @@
-export { WebGL } from 'layercake';
 export * from './charts/index.js';
+export * from './types.js';
+export { default as AnnotationLine } from './AnnotationLine.svelte';
+export * from './AnnotationLine.svelte';
+export { default as AnnotationPoint } from './AnnotationPoint.svelte';
+export * from './AnnotationPoint.svelte';
+export { default as AnnotationRange } from './AnnotationRange.svelte';
+export * from './AnnotationRange.svelte';
 export { default as Arc } from './Arc.svelte';
+export * from './Arc.svelte';
 export { default as Area } from './Area.svelte';
+export * from './Area.svelte';
 export { default as Axis } from './Axis.svelte';
+export * from './Axis.svelte';
 export { default as Bar } from './Bar.svelte';
+export * from './Bar.svelte';
 export { default as Bars } from './Bars.svelte';
+export * from './Bars.svelte';
 export { default as Blur } from './Blur.svelte';
+export * from './Blur.svelte';
 export { default as Bounds } from './Bounds.svelte';
+export * from './Bounds.svelte';
 export { default as BrushContext } from './BrushContext.svelte';
+export * from './BrushContext.svelte';
 export { default as Calendar } from './Calendar.svelte';
+export * from './Calendar.svelte';
 export { default as Canvas } from './layout/Canvas.svelte';
-export { default as Chart } from './Chart.svelte';
+export * from './layout/Canvas.svelte';
+export { default as Chart, getChartContext, getRenderContext } from './Chart.svelte';
+export * from './Chart.svelte';
 export { default as ChartClipPath } from './ChartClipPath.svelte';
+export * from './ChartClipPath.svelte';
 export { default as Circle } from './Circle.svelte';
+export * from './Circle.svelte';
 export { default as CircleClipPath } from './CircleClipPath.svelte';
+export * from './CircleClipPath.svelte';
 export { default as ClipPath } from './ClipPath.svelte';
+export * from './ClipPath.svelte';
 export { default as ColorRamp } from './ColorRamp.svelte';
+export * from './ColorRamp.svelte';
+export { default as Connector } from './Connector.svelte';
+export * from './Connector.svelte';
 export { default as Dagre } from './Dagre.svelte';
+export * from './Dagre.svelte';
 export { default as Frame } from './Frame.svelte';
+export * from './Frame.svelte';
 export { default as ForceSimulation } from './ForceSimulation.svelte';
+export * from './ForceSimulation.svelte';
 export { default as GeoCircle } from './GeoCircle.svelte';
-export { default as GeoContext, geoContext } from './GeoContext.svelte';
+export * from './GeoCircle.svelte';
+export { default as GeoContext, getGeoContext } from './GeoContext.svelte';
+export * from './GeoContext.svelte';
 export { default as GeoEdgeFade } from './GeoEdgeFade.svelte';
+export * from './GeoEdgeFade.svelte';
 export { default as GeoPath } from './GeoPath.svelte';
+export * from './GeoPath.svelte';
 export { default as GeoPoint } from './GeoPoint.svelte';
+export * from './GeoPoint.svelte';
 export { default as GeoSpline } from './GeoSpline.svelte';
+export * from './GeoSpline.svelte';
 export { default as GeoTile } from './GeoTile.svelte';
+export * from './GeoTile.svelte';
 export { default as GeoVisible } from './GeoVisible.svelte';
+export * from './GeoVisible.svelte';
 export { default as Graticule } from './Graticule.svelte';
+export * from './Graticule.svelte';
 export { default as Grid } from './Grid.svelte';
+export * from './Grid.svelte';
 export { default as Group } from './Group.svelte';
+export * from './Group.svelte';
 export { default as Highlight } from './Highlight.svelte';
+export * from './Highlight.svelte';
 export { default as Html } from './layout/Html.svelte';
+export * from './layout/Html.svelte';
 export { default as Hull } from './Hull.svelte';
+export * from './Hull.svelte';
 export { default as Labels } from './Labels.svelte';
+export * from './Labels.svelte';
+export { default as Layer } from './layout/Layer.svelte';
+export * from './layout/Layer.svelte';
 export { default as Legend } from './Legend.svelte';
+export * from './Legend.svelte';
 export { default as Line } from './Line.svelte';
+export * from './Line.svelte';
 export { default as Spline } from './Spline.svelte';
+export * from './Spline.svelte';
 export { default as LinearGradient } from './LinearGradient.svelte';
+export * from './LinearGradient.svelte';
 export { default as Link } from './Link.svelte';
+export * from './Link.svelte';
 export { default as MotionPath } from './MotionPath.svelte';
+export * from './MotionPath.svelte';
 export { default as Pack } from './Pack.svelte';
+export * from './Pack.svelte';
 export { default as Partition } from './Partition.svelte';
+export * from './Partition.svelte';
 export { default as Pattern } from './Pattern.svelte';
+export * from './Pattern.svelte';
 export { default as Pie } from './Pie.svelte';
+export * from './Pie.svelte';
 export { default as Point } from './Point.svelte';
+export * from './Point.svelte';
 export { default as Points } from './Points.svelte';
+export * from './Points.svelte';
 export { default as RadialGradient } from './RadialGradient.svelte';
+export * from './RadialGradient.svelte';
 export { default as Rect } from './Rect.svelte';
+export * from './Rect.svelte';
 export { default as RectClipPath } from './RectClipPath.svelte';
+export * from './RectClipPath.svelte';
 export { default as Rule } from './Rule.svelte';
+export * from './Rule.svelte';
 export { default as Sankey } from './Sankey.svelte';
+export * from './Sankey.svelte';
 export { default as Svg } from './layout/Svg.svelte';
+export * from './layout/Svg.svelte';
 export { default as Text } from './Text.svelte';
+export * from './Text.svelte';
 export { default as Threshold } from './Threshold.svelte';
+export * from './Threshold.svelte';
 export { default as TileImage } from './TileImage.svelte';
+export * from './TileImage.svelte';
 export * as Tooltip from './tooltip/index.js';
-export { default as TransformContext, transformContext } from './TransformContext.svelte';
+export * from './tooltip/TooltipContext.svelte';
+export { default as TransformContext } from './TransformContext.svelte';
+export * from './TransformContext.svelte';
 export { default as Tree } from './Tree.svelte';
+export * from './Tree.svelte';
 export { default as Treemap } from './Treemap.svelte';
+export * from './Treemap.svelte';
 export { default as Voronoi } from './Voronoi.svelte';
+export * from './Voronoi.svelte';
+export { default as WebGL } from './layout/WebGL.svelte';
+export * from './layout/WebGL.svelte';