layerchart 2.0.0-next.45 → 2.0.0-next.47

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/components/charts/__fixtures__/ArcChartTooltip.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ArcChartTooltip: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ArcChartTooltip = InstanceType<typeof ArcChartTooltip>;
+export default ArcChartTooltip;

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

@@ -1,26 +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 '../../contexts/tooltip.js';
-import type Highlight from '../Highlight.svelte';
-import type Line from '../Line.svelte';
-import type Svg from '../layers/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 { ChartProps } from '../Chart.svelte';
-import type { ChartContextValue } from '../../contexts/chart.js';
-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 '../layers/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;
@@ -31,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'
-     */
-    layer?: '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<ChartProps<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 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,8 +46,12 @@ 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';
@@ -50,8 +60,8 @@ 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 } 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';
@@ -76,6 +86,8 @@ 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 './layers/Layer.svelte';
@@ -110,8 +122,12 @@ 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';
@@ -134,6 +150,10 @@ 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 './layers/WebGL.svelte';

package/dist/components/index.js

@@ -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 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,8 +46,12 @@ 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';
@@ -50,8 +60,8 @@ 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 } 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';
@@ -76,6 +86,8 @@ 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 './layers/Layer.svelte';
@@ -110,8 +122,12 @@ 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';
@@ -130,11 +146,14 @@ export * as Tooltip from './tooltip/index.js';
 export * from './tooltip/TooltipContext.svelte';
 export { default as TransformContext } from './TransformContext.svelte';
 export * from './TransformContext.svelte';
-// export { default as TransformControls } from './TransformControls.svelte'; // TODO: Restore once no longer using `svelte-ux` or `~icons` (as they are dev dependencies)
 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 './layers/WebGL.svelte';