layerchart 2.0.0-next.0 → 2.0.0-next.2

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

@@ -1,73 +1,105 @@
-import { SvelteComponentTyped } from "svelte";
-import { type Readable } from 'svelte/store';
-export declare const brushContextKey: unique symbol;
+export type BrushRange = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
 export type BrushContextValue = {
     xDomain: DomainType;
     yDomain: DomainType;
     isActive: boolean;
-    range: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    };
+    range: BrushRange;
     handleSize: number;
 };
-export type BrushContext = Readable<BrushContextValue>;
-export declare function brushContext(): BrushContext;
-import type { DomainType } from '../utils/scales.js';
-import type { HTMLAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: {
-        /** Axis to apply brushing */ axis?: "x" | "y" | "both";
-        /** Size of draggable handles (width/height) */ handleSize?: number;
-        /** Only show range while actively brushing.  Useful with `brushEnd` event */ resetOnEnd?: boolean;
-        xDomain?: DomainType;
-        yDomain?: DomainType;
-        /** Mode of operation
-           *   `integrated`: use with single chart
-           *   `separated`: use with separate (typically smaller) chart and state can be managed externally (sync with other charts, etc).  Show active selection when domain does not equal original
-           */ mode?: "integrated" | "separated";
-        /** Disable brush */ disabled?: boolean;
-        /** Attributes passed to range <div> element */ range?: Partial<HTMLAttributes<HTMLDivElement>> | undefined;
-        /** Attributes passed to handle <div> elements */ handle?: Partial<HTMLAttributes<HTMLDivElement>> | undefined;
-        classes?: {
-            root?: string;
-            frame?: string;
-            range?: string;
-            handle?: string;
-            labels?: string;
-        };
-        onchange?: (detail: {
-            xDomain?: DomainType;
-            yDomain?: DomainType;
-        }) => void;
-        onbrushstart?: (detail: {
-            xDomain?: DomainType;
-            yDomain?: DomainType;
-        }) => void;
-        onbrushend?: (detail: {
-            xDomain?: DomainType;
-            yDomain?: DomainType;
-        }) => void;
-        onreset?: (detail: {
-            xDomain?: DomainType;
-            yDomain?: DomainType;
-        }) => void;
-        /** Exposed to allow binding in Chart */ brush?: import("svelte/store").Writable<BrushContextValue>;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            brush: BrushContextValue;
-        };
+export declare function getBrushContext(): BrushContextValue;
+export declare function setBrushContext(brush: BrushContextValue): BrushContextValue;
+type BrushEventPayload = {
+    xDomain: DomainType | null;
+    yDomain: DomainType | null;
+};
+type BrushContextPropsWithoutHTML = {
+    /**
+     * The axis to apply brushing
+     *
+     * @default 'x'
+     */
+    axis?: 'x' | 'y' | 'both';
+    /**
+     * Size of the draggable handles (width/height)
+     *
+     * @default 5
+     */
+    handleSize?: number;
+    /**
+     * Only show range while actively brushing.
+     * Useful with `brushEnd` event
+     *
+     * @default false
+     */
+    resetOnEnd?: boolean;
+    /**
+     * Ignore click to reset.
+     * Useful to add click handlers to marks.  Requires external resetting (button, another chart, etc)
+     *
+     * @default false
+     */
+    ignoreResetClick?: boolean;
+    xDomain?: DomainType;
+    yDomain?: DomainType;
+    /**
+     * Mode of operation
+     *  - `integrated`: use with single chart
+     *  - `separated`: use with separate (typically smaller) chart and state can be managed
+     * externally (sync with other charts, etc).  Show active selection when domain does not equal
+     * original
+     *
+     * @default 'integrated'
+     */
+    mode?: 'integrated' | 'separated';
+    /**
+     * Disable brush
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Attributes passed to the range <div> element
+     */
+    range?: Partial<HTMLAttributes<HTMLElement>>;
+    /**
+     * Attributes passed to the handle <div> elements
+     */
+    handle?: Partial<HTMLAttributes<HTMLElement>>;
+    /**
+     * Classes to apply to the various elements rendered
+     *
+     * @default {}
+     */
+    classes?: {
+        root?: string;
+        frame?: string;
+        range?: string;
+        handle?: string;
+        labels?: string;
     };
+    onChange?: (detail: BrushEventPayload) => void;
+    onBrushStart?: (detail: BrushEventPayload) => void;
+    onBrushEnd?: (detail: BrushEventPayload) => void;
+    onReset?: (detail: BrushEventPayload) => void;
+    /**
+     * A reference to this brush's context for use in parent
+     * components.
+     *
+     * @bindable
+     */
+    brushContext?: BrushContextValue;
+    children?: Snippet<[{
+        brushContext: BrushContextValue;
+    }]>;
 };
-export type BrushContextProps = typeof __propDef.props;
-export type BrushContextEvents = typeof __propDef.events;
-export type BrushContextSlots = typeof __propDef.slots;
-export default class BrushContext extends SvelteComponentTyped<BrushContextProps, BrushContextEvents, BrushContextSlots> {
-}
-export {};
+import { type DomainType } from '../utils/scales.svelte.js';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+declare const BrushContext: import("svelte").Component<BrushContextPropsWithoutHTML, {}, "brushContext">;
+type BrushContext = ReturnType<typeof BrushContext>;
+export default BrushContext;

package/dist/components/Calendar.svelte

@@ -1,90 +1,147 @@
+<script lang="ts" module>
+  export type CalendarCell = {
+    x: number;
+    y: number;
+    color: any;
+    data: any;
+  };
+
+  export type CalendarPropsWithoutHTML = {
+    /**
+     * The start date of the calendar.
+     */
+    start: Date;
+
+    /**
+     * The end date of the calendar.
+     */
+    end: Date;
+
+    /**
+     * Size of the cell in the calendar.
+     *
+     * - `number`: sets width/height as same value (square).
+     * - `array`: sets as [width,height].
+     * - `undefined/omitted`: is derived from Chart width/height
+     */
+    cellSize?: number | [number, number];
+
+    /**
+     * Enable drawing path around each month.  If object, pass as props to underlying <path>
+     *
+     * @default false
+     */
+    monthPath?: boolean | Partial<ComponentProps<typeof MonthPath>>;
+
+    /**
+     * Props to pass to the `<text>` element for month labels.
+     */
+    monthLabel?: Partial<ComponentProps<typeof Text>>;
+
+    /**
+     * Tooltip context to setup mouse events to show tooltip for related data
+     */
+    tooltipContext?: TooltipContextValue;
+
+    children?: Snippet<[{ cells: CalendarCell[] }]>;
+  } & Omit<
+    RectPropsWithoutHTML,
+    'children' | 'x' | 'y' | 'width' | 'height' | 'fill' | 'onpointermove' | 'onpointerleave'
+  >;
+
+  export type CalendarProps = CalendarPropsWithoutHTML &
+    Without<SVGAttributes<SVGRectElement>, CalendarPropsWithoutHTML>;
+</script>
+
 <script lang="ts">
-  import { type ComponentProps } from 'svelte';
+  import { type ComponentProps, type Snippet } from 'svelte';
   import { timeDays, timeMonths, timeWeek, timeYear } from 'd3-time';
   import { index } from 'd3-array';
   import { format } from 'date-fns';
 
-  import { chartContext } from './ChartContext.svelte';
-  import Rect from './Rect.svelte';
+  import Rect, { type RectPropsWithoutHTML } from './Rect.svelte';
   import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
   import MonthPath from './MonthPath.svelte';
   import Text from './Text.svelte';
   import { chartDataArray } from '../utils/common.js';
+  import { getChartContext } from './Chart.svelte';
+  import type { SVGAttributes } from 'svelte/elements';
+  import type { Without } from '../utils/types.js';
+  import { extractLayerProps } from '../utils/attributes.js';
+
+  let {
+    end,
+    start,
+    cellSize: cellSizeProp,
+    monthPath = false,
+    tooltipContext: tooltip,
+    children,
+    monthLabel,
+    ...restProps
+  }: CalendarPropsWithoutHTML = $props();
+
+  const ctx = getChartContext();
+
+  const yearDays = $derived(timeDays(start, end));
+  const yearMonths = $derived(timeMonths(start, end));
+  const yearWeeks = $derived(timeWeek.count(start, end));
+  const chartCellWidth = $derived(ctx.width / (yearWeeks + 1));
+  const chartCellHeight = $derived(ctx.height / 7);
+  // Use smallest to fit, and keep square aspect
+  const chartCellSize = $derived(Math.min(chartCellWidth, chartCellHeight));
 
-  export let start: Date;
-  export let end: Date;
-
-  /**
-   * Size of cell.  If `number`, sets width/height as same value (square).  If array, sets as [width,height].  If undefined, is derived from Chart width/height
-   */
-  export let cellSize: number | [number, number] | undefined = undefined;
-
-  /** Enable drawing path around each month.  If object, pass as props to underlying <path> */
-  export let monthPath: boolean | Partial<ComponentProps<MonthPath>> = false;
-
-  /**
-   * Tooltip context to setup mouse events to show tooltip for related data
-   */
-  export let tooltip: TooltipContextValue | undefined = undefined;
-
-  const { width, height, x, cGet, data, config } = chartContext();
-
-  $: yearDays = timeDays(start, end);
-  $: yearMonths = timeMonths(start, end);
-  $: yearWeeks = timeWeek.count(start, end);
-
-  $: chartCellWidth = $width / (yearWeeks + 1);
-  $: chartCellHeight = $height / 7;
-  $: chartCellSize = Math.min(chartCellWidth, chartCellHeight); // Use smallest to fit, and keep square aspect
-
-  $: [cellWidth, cellHeight] = Array.isArray(cellSize)
-    ? cellSize
-    : typeof cellSize === 'number'
-      ? [cellSize, cellSize]
-      : [chartCellSize, chartCellSize];
-
-  $: dataByDate = data && $config.x ? index(chartDataArray($data), (d) => $x(d)) : new Map();
-
-  $: cells = yearDays.map((date) => {
-    const cellData = dataByDate.get(date) ?? { date };
-    return {
-      x: timeWeek.count(timeYear(date), date) * cellWidth,
-      y: date.getDay() * cellHeight,
-      color: $config.c ? $cGet(cellData) : 'transparent',
-      data: cellData,
-    };
-  });
+  // [width, height]
+  const cellSize: [number, number] = $derived(
+    Array.isArray(cellSizeProp)
+      ? cellSizeProp
+      : typeof cellSizeProp === 'number'
+        ? [cellSizeProp, cellSizeProp]
+        : [chartCellSize, chartCellSize]
+  );
+
+  const dataByDate = $derived(
+    ctx.data && ctx.config.x ? index(chartDataArray(ctx.data), (d) => ctx.x(d)) : new Map()
+  );
+
+  const cells = $derived(
+    yearDays.map((date) => {
+      const cellData = dataByDate.get(date) ?? { date };
+      return {
+        x: timeWeek.count(timeYear(date), date) * cellSize[0],
+        y: date.getDay() * cellSize[1],
+        color: ctx.config.c ? ctx.cGet(cellData) : 'transparent',
+        data: cellData,
+      };
+    })
+  ) satisfies CalendarCell[];
 </script>
 
-<slot {cells}>
+{#if children}
+  {@render children({ cells })}
+{:else}
   {#each cells as cell}
     <Rect
       x={cell.x}
       y={cell.y}
-      width={cellWidth}
-      height={cellHeight}
+      width={cellSize[0]}
+      height={cellSize[1]}
       fill={cell.color}
       onpointermove={(e) => tooltip?.show(e, cell.data)}
       onpointerleave={(e) => tooltip?.hide()}
-      class="stroke-surface-content/5"
-      {...$$restProps}
+      {...extractLayerProps(restProps, 'calendar-cell', 'stroke-surface-content/5')}
     />
   {/each}
-</slot>
+{/if}
 
 {#if monthPath}
   {#each yearMonths as date}
-    <MonthPath
-      {date}
-      cellSize={[cellWidth, cellHeight]}
-      {...typeof monthPath === 'object' ? monthPath : null}
-    />
+    <MonthPath {date} {cellSize} {...extractLayerProps(monthPath, 'calendar-month-path')} />
 
     <Text
-      x={timeWeek.count(timeYear.floor(date), timeWeek.ceil(date)) * cellWidth}
+      x={timeWeek.count(timeYear.floor(date), timeWeek.ceil(date)) * cellSize[0]}
       y={-4}
       value={format(date, 'MMM')}
-      class="text-xs"
+      {...extractLayerProps(monthLabel, 'calendar-month-label', 'text-xs')}
     />
   {/each}
 {/if}

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

@@ -1,33 +1,52 @@
-import { SvelteComponentTyped } from "svelte";
-import { type ComponentProps } from 'svelte';
+export type CalendarCell = {
+    x: number;
+    y: number;
+    color: any;
+    data: any;
+};
+export type CalendarPropsWithoutHTML = {
+    /**
+     * The start date of the calendar.
+     */
+    start: Date;
+    /**
+     * The end date of the calendar.
+     */
+    end: Date;
+    /**
+     * Size of the cell in the calendar.
+     *
+     * - `number`: sets width/height as same value (square).
+     * - `array`: sets as [width,height].
+     * - `undefined/omitted`: is derived from Chart width/height
+     */
+    cellSize?: number | [number, number];
+    /**
+     * Enable drawing path around each month.  If object, pass as props to underlying <path>
+     *
+     * @default false
+     */
+    monthPath?: boolean | Partial<ComponentProps<typeof MonthPath>>;
+    /**
+     * Props to pass to the `<text>` element for month labels.
+     */
+    monthLabel?: Partial<ComponentProps<typeof Text>>;
+    /**
+     * Tooltip context to setup mouse events to show tooltip for related data
+     */
+    tooltipContext?: TooltipContextValue;
+    children?: Snippet<[{
+        cells: CalendarCell[];
+    }]>;
+} & Omit<RectPropsWithoutHTML, 'children' | 'x' | 'y' | 'width' | 'height' | 'fill' | 'onpointermove' | 'onpointerleave'>;
+export type CalendarProps = CalendarPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, CalendarPropsWithoutHTML>;
+import { type ComponentProps, type Snippet } from 'svelte';
+import { type RectPropsWithoutHTML } from './Rect.svelte';
 import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
 import MonthPath from './MonthPath.svelte';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        start: Date;
-        end: Date;
-        cellSize?: number | [number, number] | undefined | undefined;
-        monthPath?: (boolean | Partial<ComponentProps<MonthPath>>) | undefined;
-        tooltip?: TooltipContextValue | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            cells: {
-                x: number;
-                y: number;
-                color: any;
-                data: any;
-            }[];
-        };
-    };
-};
-export type CalendarProps = typeof __propDef.props;
-export type CalendarEvents = typeof __propDef.events;
-export type CalendarSlots = typeof __propDef.slots;
-export default class Calendar extends SvelteComponentTyped<CalendarProps, CalendarEvents, CalendarSlots> {
-}
-export {};
+import Text from './Text.svelte';
+import type { SVGAttributes } from 'svelte/elements';
+import type { Without } from '../utils/types.js';
+declare const Calendar: import("svelte").Component<CalendarPropsWithoutHTML, {}, "">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;