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

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

@@ -1,29 +1,33 @@
-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>;
+import type { ChartProps } from '../Chart.svelte';
+import type { SeriesData } from './types.js';
+import Points from '../Points.svelte';
+export type ScatterChartProps<TData> = {
+    /**
+     * The data for the chart
+     */
+    data?: TData[] | readonly TData[];
+} & Omit<ChartProps<any>, 'data'> & {
+    /**
+     * The series data to be used for the chart.
+     */
+    series?: SeriesData<TData, typeof Points>[];
+    /**
+     * Enable profiling to measure render time.
+     * @default false
+     */
+    profile?: boolean;
 };
-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;
+declare function $$render<TData>(): {
+    props: ScatterChartProps<TData>;
+    exports: {};
+    bindings: "context";
+    slots: {};
+    events: {};
 };
-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(): {};
+    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/__fixtures__/ArcChartTooltip.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import ArcChart from '../ArcChart.svelte';
+
+  const data = [
+    { browser: 'other', visitors: 90, color: 'gray' },
+    { browser: 'edge', visitors: 173, color: 'green' },
+    { browser: 'firefox', visitors: 187, color: 'orange' },
+    { browser: 'safari', visitors: 200, color: 'blue' },
+    { browser: 'chrome', visitors: 275, color: 'red' },
+  ];
+
+  const series = data.map((datum) => ({
+    key: datum.browser,
+    label: datum.browser,
+    color: datum.color,
+    data: [datum],
+  }));
+</script>
+
+<ArcChart
+  {data}
+  label="browser"
+  value="visitors"
+  innerRadius={40}
+  outerRadius={70}
+  height={240}
+  width={240}
+  {series}
+>
+  {#snippet tooltip({ context })}
+    {@const visibleSeries = context.tooltip.series.filter((series) => series.value !== undefined)}
+    <div class="arc-chart-tooltip">
+      {#each visibleSeries as series (series.key)}
+        <span class="arc-chart-tooltip-label">{series.label}</span>
+        <span class="arc-chart-tooltip-value">{series.value}</span>
+      {/each}
+    </div>
+  {/snippet}
+</ArcChart>

package/dist/{docs/Blockquote.svelte.d.ts → components/charts/__fixtures__/ArcChartTooltip.svelte.d.ts}

@@ -11,10 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Blockquote: $$__sveltets_2_IsomorphicComponent<any, {
+declare const ArcChartTooltip: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Blockquote = InstanceType<typeof Blockquote>;
-export default Blockquote;
+}, {}, {}, string>;
+type ArcChartTooltip = InstanceType<typeof ArcChartTooltip>;
+export default ArcChartTooltip;

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

@@ -1,25 +1,6 @@
 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';
+import type { Component, ComponentProps } from 'svelte';
+import type { AnnotationPoint, AnnotationLine, AnnotationRange } from '../index.js';
 export type SeriesData<TData, TComponent extends Component> = {
     key: string;
     label?: string;
@@ -30,199 +11,13 @@ export type SeriesData<TData, TComponent extends Component> = {
     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 []
+     * Whether the series is initially visible. Defaults to `true` (visible).
+     * Set to `false` to hide a series on mount. Reactive — changing this will update visibility.
      */
-    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;
+    selected?: boolean;
+    props?: Partial<ComponentProps<TComponent>>;
 };
-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';

package/dist/components/index.d.ts

@@ -18,16 +18,22 @@ 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 BoxPlot } from './BoxPlot.svelte';
+export * from './BoxPlot.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 * from './layout/Canvas.svelte';
-export { default as Chart, getChartContext, getRenderContext } from './Chart.svelte';
+export { default as Cell } from './Cell.svelte';
+export * from './Cell.svelte';
+export { default as Canvas } from './layers/Canvas.svelte';
+export * from './layers/Canvas.svelte';
+export { default as Chart } from './Chart.svelte';
 export * from './Chart.svelte';
+export { default as Chord } from './Chord.svelte';
+export * from './Chord.svelte';
 export { default as ChartClipPath } from './ChartClipPath.svelte';
 export * from './ChartClipPath.svelte';
 export { default as Circle } from './Circle.svelte';
@@ -40,22 +46,30 @@ 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 Contour } from './Contour.svelte';
+export * from './Contour.svelte';
 export { default as Dagre } from './Dagre.svelte';
 export * from './Dagre.svelte';
+export { default as Density } from './Density.svelte';
+export * from './Density.svelte';
+export { default as Ellipse } from './Ellipse.svelte';
+export * from './Ellipse.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 * from './GeoCircle.svelte';
-export { default as GeoContext, getGeoContext } from './GeoContext.svelte';
-export * from './GeoContext.svelte';
+export { default as GeoProjection } from './GeoProjection.svelte';
+export * from './GeoProjection.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 GeoRaster } from './GeoRaster.svelte';
+export * from './GeoRaster.svelte';
 export { default as GeoSpline } from './GeoSpline.svelte';
 export * from './GeoSpline.svelte';
 export { default as GeoTile } from './GeoTile.svelte';
@@ -70,14 +84,16 @@ 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 Html } from './layers/Html.svelte';
+export * from './layers/Html.svelte';
 export { default as Hull } from './Hull.svelte';
 export * from './Hull.svelte';
+export { default as Image } from './Image.svelte';
+export * from './Image.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 Layer } from './layers/Layer.svelte';
+export * from './layers/Layer.svelte';
 export { default as Legend } from './Legend.svelte';
 export * from './Legend.svelte';
 export { default as Line } from './Line.svelte';
@@ -90,10 +106,14 @@ 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 Month } from './Month.svelte';
+export * from './Month.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 Path } from './Path.svelte';
+export * from './Path.svelte';
 export { default as Pattern } from './Pattern.svelte';
 export * from './Pattern.svelte';
 export { default as Pie } from './Pie.svelte';
@@ -102,20 +122,28 @@ 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 Polygon } from './Polygon.svelte';
+export * from './Polygon.svelte';
 export { default as RadialGradient } from './RadialGradient.svelte';
 export * from './RadialGradient.svelte';
+export { default as Raster } from './Raster.svelte';
+export * from './Raster.svelte';
 export { default as Rect } from './Rect.svelte';
 export * from './Rect.svelte';
+export { default as Ribbon } from './Ribbon.svelte';
+export * from './Ribbon.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 Svg } from './layers/Svg.svelte';
+export * from './layers/Svg.svelte';
 export { default as Text } from './Text.svelte';
 export * from './Text.svelte';
+export { default as Trail } from './Trail.svelte';
+export * from './Trail.svelte';
 export { default as Threshold } from './Threshold.svelte';
 export * from './Threshold.svelte';
 export { default as TileImage } from './TileImage.svelte';
@@ -128,7 +156,11 @@ 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 Vector } from './Vector.svelte';
+export * from './Vector.svelte';
+export { default as Violin } from './Violin.svelte';
+export * from './Violin.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';
+export { default as WebGL } from './layers/WebGL.svelte';
+export * from './layers/WebGL.svelte';