layerchart 2.0.0-next.1 → 2.0.0-next.2

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

@@ -0,0 +1,76 @@
+export type BarChartExtraSnippetProps<TData> = {
+    getBarsProps: (s: SeriesData<TData, typeof Bars>, i: number) => ComponentProps<typeof Bars>;
+    getLabelsProps: (s: SeriesData<TData, typeof Bars>, i: number) => ComponentProps<typeof Labels<TData>>;
+    getGridProps: () => ComponentProps<typeof Grid>;
+    getHighlightProps: () => ComponentProps<typeof Highlight>;
+    getAxisProps: (axisDirection: 'x' | 'y') => ComponentProps<typeof Axis>;
+    getRuleProps: () => ComponentProps<typeof Rule>;
+};
+export type BarChartPropsObjProp<TData> = Pick<SimplifiedChartPropsObject<TData>, 'bars' | 'brush' | 'canvas' | 'grid' | 'highlight' | 'labels' | 'legend' | 'rule' | 'svg' | 'tooltip' | 'xAxis' | 'yAxis'>;
+export type BarChartProps<TData> = Omit<SimplifiedChartProps<TData, typeof Bars, BarChartExtraSnippetProps<TData>>, 'seriesLayout'> & {
+    /**
+     * Padding between primary x or y bands/bars, applied to scaleBand().padding()
+     *
+     * @default 0.4
+     */
+    bandPadding?: number;
+    /**
+     * Padding between group/series items when using 'seriesLayout="group"', applied to scaleBand().padding()
+     *
+     * @default 0
+     */
+    groupPadding?: number;
+    /**
+     * Padding between series items within bars when using 'seriesLayout="stack"'
+     *
+     * @default 0
+     */
+    stackPadding?: number;
+    /**
+     * The orientation of the bar chart.
+     *
+     * @default 'vertical'
+     */
+    orientation?: 'vertical' | 'horizontal';
+    props?: BarChartPropsObjProp<TData>;
+    /**
+     * A callback function that is called when a bar is clicked.
+     * @param e - The original event that triggered the callback
+     * @param detail - An object containing the bar's data and series information
+     */
+    onBarClick?: (event: MouseEvent, detail: {
+        data: any;
+        series: SeriesData<TData, typeof Bars>;
+    }) => void;
+    /**
+     * The layout of the series.
+     *
+     * @default 'overlap'
+     */
+    seriesLayout?: SimplifiedChartProps<TData, typeof Bars, BarChartExtraSnippetProps<TData>>['seriesLayout'] | 'group';
+};
+import { type ComponentProps } from 'svelte';
+import Axis from '../Axis.svelte';
+import Bars from '../Bars.svelte';
+import Grid from '../Grid.svelte';
+import Highlight from '../Highlight.svelte';
+import Labels from '../Labels.svelte';
+import Rule from '../Rule.svelte';
+import type { SeriesData, SimplifiedChartProps, SimplifiedChartPropsObject } from './types.js';
+declare class __sveltets_Render<TData> {
+    props(): BarChartProps<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 BarChart: $$IsomorphicComponent;
+type BarChart<TData> = InstanceType<typeof BarChart<TData>>;
+export default BarChart;

package/dist/components/charts/ChartAnnotations.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { ChartAnnotations, SeriesData } from './types.js';
+  import AnnotationLine from '../AnnotationLine.svelte';
+  import AnnotationPoint from '../AnnotationPoint.svelte';
+  import AnnotationRange from '../AnnotationRange.svelte';
+
+  let {
+    annotations,
+    layer,
+    highlightKey,
+    visibleSeries,
+  }: {
+    annotations: ChartAnnotations;
+    layer: 'below' | 'above';
+    highlightKey: string | null;
+    visibleSeries: SeriesData<any, any>[];
+  } = $props();
+
+  let visibleAnnotations = $derived(
+    annotations.filter(
+      (a) =>
+        (a.layer === layer || (a.layer == null && layer === 'above')) &&
+        (highlightKey == null || a.seriesKey == null || a.seriesKey === highlightKey) &&
+        visibleSeries.some((s) => a.seriesKey == null || a.seriesKey === s.key)
+    )
+  );
+</script>
+
+{#each visibleAnnotations as annotation}
+  {#if annotation.type === 'point'}
+    <AnnotationPoint {...annotation} />
+  {:else if annotation.type === 'line'}
+    <AnnotationLine {...annotation} />
+  {:else if annotation.type === 'range'}
+    <AnnotationRange {...annotation} />
+  {/if}
+{/each}

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

@@ -0,0 +1,10 @@
+import type { ChartAnnotations, SeriesData } from './types.js';
+type $$ComponentProps = {
+    annotations: ChartAnnotations;
+    layer: 'below' | 'above';
+    highlightKey: string | null;
+    visibleSeries: SeriesData<any, any>[];
+};
+declare const ChartAnnotations: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChartAnnotations = ReturnType<typeof ChartAnnotations>;
+export default ChartAnnotations;

package/dist/components/charts/DefaultTooltip.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  // Shared tooltip logic across simplified chart components
+  import { sum } from 'd3-array';
+  import { getChartContext } from '../Chart.svelte';
+  import * as Tooltip from '../tooltip/index.js';
+  import type { SimplifiedChartPropsObject } from './types.js';
+  import type { SeriesState } from './utils.svelte.js';
+  import { format } from '@layerstack/utils';
+  import { accessor, findRelatedData } from '../../utils/common.js';
+
+  let {
+    tooltipProps,
+    seriesState,
+    canHaveTotal = false,
+  }: {
+    tooltipProps?: SimplifiedChartPropsObject['tooltip'];
+    seriesState: SeriesState<any, any>;
+    canHaveTotal?: boolean;
+  } = $props();
+
+  const context = getChartContext();
+</script>
+
+<Tooltip.Root {context} {...tooltipProps?.root}>
+  {#snippet children({ data, payload })}
+    <Tooltip.Header value={payload[0].label} {format} {...tooltipProps?.header} />
+
+    <Tooltip.List {...tooltipProps?.list}>
+      <!-- Reverse series order so tooltip items match stacks -->
+      {#each payload as p, i (p.key ?? i)}
+        <Tooltip.Item
+          label={p.name}
+          value={p.value}
+          color={p.color}
+          {format}
+          valueAlign="right"
+          onpointerenter={() => (seriesState.highlightKey.current = p.key)}
+          onpointerleave={() => (seriesState.highlightKey.current = null)}
+          {...tooltipProps?.item}
+        />
+      {/each}
+
+      {#if canHaveTotal && payload.length > 1 && !tooltipProps?.hideTotal}
+        <Tooltip.Separator {...tooltipProps?.separator} />
+
+        <Tooltip.Item
+          label="total"
+          value={sum(seriesState.visibleSeries, (s) => {
+            const seriesTooltipData = s.data ? findRelatedData(s.data, data, context.x) : data;
+            const valueAccessor = accessor(s.value ?? (s.data ? context.y : s.key));
+            return valueAccessor(seriesTooltipData);
+          })}
+          format="integer"
+          valueAlign="right"
+          {...tooltipProps?.item}
+        />
+      {/if}
+    </Tooltip.List>
+  {/snippet}
+</Tooltip.Root>

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

@@ -0,0 +1,10 @@
+import type { SimplifiedChartPropsObject } from './types.js';
+import type { SeriesState } from './utils.svelte.js';
+type $$ComponentProps = {
+    tooltipProps?: SimplifiedChartPropsObject['tooltip'];
+    seriesState: SeriesState<any, any>;
+    canHaveTotal?: boolean;
+};
+declare const DefaultTooltip: import("svelte").Component<$$ComponentProps, {}, "">;
+type DefaultTooltip = ReturnType<typeof DefaultTooltip>;
+export default DefaultTooltip;