layerchart 0.54.0 → 0.55.0

package/dist/components/Bounds.svelte

@@ -1,26 +1,42 @@
-<script>import { scaleLinear } from 'd3-scale';
-import { chartContext } from './ChartContext.svelte';
-import { motionScale } from '../utils/scales.js';
-const { width, height } = chartContext();
-export let domain = undefined;
-export let range = undefined;
-export let spring = undefined;
-export let tweened = undefined;
-function getExtents(extents, axis, fallback) {
-    const resolvedExtents = typeof extents === 'function' ? extents({ width: $width, height: $height }) : extents;
+<script lang="ts">
+  import { scaleLinear } from 'd3-scale';
+
+  import { chartContext } from './ChartContext.svelte';
+  import { motionScale } from '../utils/scales.js';
+
+  const { width, height } = chartContext();
+
+  type Extents = Partial<{ x0: number; y0: number; x1: number; y1: number }>;
+  type ExtentsAcccessor = (dimensions: { width: number; height: number }) => Extents;
+
+  export let domain: Extents | ExtentsAcccessor | null | undefined = undefined;
+  export let range: Extents | ExtentsAcccessor | null | undefined = undefined;
+  export let spring: boolean | Parameters<typeof motionScale>[1]['spring'] = undefined;
+  export let tweened: boolean | Parameters<typeof motionScale>[1]['tweened'] = undefined;
+
+  function getExtents(
+    extents: Extents | ExtentsAcccessor | null | undefined,
+    axis: 'x' | 'y',
+    fallback: number
+  ) {
+    const resolvedExtents =
+      typeof extents === 'function' ? extents({ width: $width, height: $height }) : extents;
+
     return [
-        // @ts-expect-error
-        resolvedExtents?.[axis + '0'] ?? 0, // x0 or y0
-        // @ts-expect-error
-        resolvedExtents?.[axis + '1'] ?? fallback, // x1 or y1, fallback as $width or $height
+      // @ts-expect-error
+      resolvedExtents?.[axis + '0'] ?? 0, // x0 or y0
+      // @ts-expect-error
+      resolvedExtents?.[axis + '1'] ?? fallback, // x1 or y1, fallback as $width or $height
     ];
-}
-const xScale = motionScale(scaleLinear, { spring, tweened });
-$: xScale.domain(getExtents(domain, 'x', $width));
-$: xScale.range(getExtents(range, 'x', $width));
-const yScale = motionScale(scaleLinear, { spring, tweened });
-$: yScale.domain(getExtents(domain, 'y', $height));
-$: yScale.range(getExtents(range, 'y', $height));
+  }
+
+  const xScale = motionScale(scaleLinear as any, { spring, tweened });
+  $: xScale.domain(getExtents(domain, 'x', $width));
+  $: xScale.range(getExtents(range, 'x', $width));
+
+  const yScale = motionScale(scaleLinear as any, { spring, tweened });
+  $: yScale.domain(getExtents(domain, 'y', $height));
+  $: yScale.range(getExtents(range, 'y', $height));
 </script>
 
 <slot xScale={$xScale} yScale={$yScale} />

package/dist/components/Brush.svelte

@@ -1,135 +1,234 @@
-<script>import { createEventDispatcher } from 'svelte';
-import { extent } from 'd3-array';
-import { clamp } from '@layerstack/utils';
-import { cls } from '@layerstack/tailwind';
-import { chartContext } from './ChartContext.svelte';
-import Frame from './Frame.svelte';
-import { localPoint } from '../utils/event.js';
-import Group from './Group.svelte';
-const { xScale, yScale, width, height, padding } = chartContext();
-const dispatch = createEventDispatcher();
-/** Axis to apply brushing */
-export let axis = 'x';
-/** Size of draggable handles (width/height) */
-export let handleSize = 5;
-/** Only show range while actively brushing.  Useful with `brushEnd` event */
-export let resetOnEnd = false;
-export let xDomain = $xScale.domain();
-export let yDomain = $yScale.domain();
-// Capture original domains for reset()
-const originalXDomain = $xScale.domain();
-const originalYDomain = $yScale.domain();
-$: [xDomainMin, xDomainMax] = extent($xScale.domain());
-$: [yDomainMin, yDomainMax] = extent($yScale.domain());
-/** Attributes passed to range <rect> element */
-export let range = undefined;
-/** Attributes passed to handle <rect> elements */
-export let handle = undefined;
-export let classes = {};
-let frameEl;
-function handler(fn) {
-    return (e) => {
-        const start = {
-            xDomain: [xDomain[0] ?? xDomainMin, xDomain[1] ?? xDomainMax],
-            yDomain: [yDomain[0] ?? yDomainMin, yDomain[1] ?? yDomainMax],
-            value: {
-                x: $xScale.invert?.((localPoint(frameEl, e)?.x ?? 0) - $padding.left),
-                y: $yScale.invert?.((localPoint(frameEl, e)?.y ?? 0) - $padding.top),
-            },
-        };
-        dispatch('brushStart', { xDomain, yDomain });
-        const onPointerMove = (e) => {
-            fn(start, {
-                x: $xScale.invert?.((localPoint(frameEl, e)?.x ?? 0) - $padding.left),
-                y: $yScale.invert?.((localPoint(frameEl, e)?.y ?? 0) - $padding.top),
-            });
-            // if (xDomain[0] === xDomain[1] || yDomain[0] === yDomain[1]) {
-            //   // Ignore?
-            //   // TODO: What about when using `x` or `y` axis?
-            // } else {
-            dispatch('change', { xDomain, yDomain });
-            // }
-        };
-        const onPointerUp = (e) => {
-            if (e.target === frameEl) {
-                reset();
-                dispatch('change', { xDomain, yDomain });
-            }
-            dispatch('brushEnd', { xDomain, yDomain });
-            if (resetOnEnd) {
-                reset();
-            }
-            window.removeEventListener('pointermove', onPointerMove);
-            window.removeEventListener('pointerup', onPointerUp);
-        };
-        window.addEventListener('pointermove', onPointerMove);
-        window.addEventListener('pointerup', onPointerUp);
+<script lang="ts">
+  import { createEventDispatcher, type ComponentProps } from 'svelte';
+  import type { SVGAttributes } from 'svelte/elements';
+  import { extent, min, max } from 'd3-array';
+  import { clamp } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
+  import { format as formatValue, type FormatType } from '@layerstack/utils';
+
+  import { chartContext } from './ChartContext.svelte';
+  import Frame from './Frame.svelte';
+  import Group from './Group.svelte';
+  import Text from './Text.svelte';
+
+  import { localPoint } from '../utils/event.js';
+
+  const { xScale, yScale, width, height, padding } = chartContext();
+
+  const dispatch = createEventDispatcher<{
+    change: { xDomain?: [any, any]; yDomain?: [any, any] };
+    brushStart: { xDomain?: [any, any]; yDomain?: [any, any] };
+    brushEnd: { xDomain?: [any, any]; yDomain?: [any, any] };
+  }>();
+
+  /** Axis to apply brushing */
+  export let axis: 'x' | 'y' | 'both' = 'x';
+
+  /** Size of draggable handles (width/height) */
+  export let handleSize = 5;
+
+  /** Only show range while actively brushing.  Useful with `brushEnd` event */
+  export let resetOnEnd = false;
+
+  export let xDomain: [number | Date | null, number | Date | null] = $xScale.domain() as [
+    number,
+    number,
+  ];
+  export let yDomain: [number | Date | null, number | Date | null] = $yScale.domain() as [
+    number,
+    number,
+  ];
+
+  export let labels: ComponentProps<Text> | boolean = false;
+
+  // Capture original domains for reset()
+  const originalXDomain = $xScale.domain() as [number, number];
+  const originalYDomain = $yScale.domain() as [number, number];
+
+  $: [xDomainMin, xDomainMax] = extent<number>($xScale.domain()) as [number, number];
+  $: [yDomainMin, yDomainMax] = extent<number>($yScale.domain()) as [number, number];
+
+  /** Attributes passed to range <rect> element */
+  export let range: SVGAttributes<SVGRectElement> | undefined = undefined;
+
+  /** Attributes passed to handle <rect> elements */
+  export let handle: SVGAttributes<SVGRectElement> | undefined = undefined;
+
+  /** Apply format to labels, if shown */
+  export let format: FormatType | undefined = undefined;
+
+  export let classes: {
+    root?: string;
+    frame?: string;
+    range?: string;
+    handle?: string;
+    labels?: string;
+  } = {};
+
+  let frameEl: SVGRectElement;
+
+  function handler(
+    fn: (
+      start: {
+        xDomain: [number, number];
+        yDomain: [number, number];
+        value: { x: number; y: number };
+      },
+      value: { x: number; y: number }
+    ) => void
+  ) {
+    return (e: PointerEvent) => {
+      const start = {
+        xDomain: [xDomain[0] ?? xDomainMin, xDomain[1] ?? xDomainMax] as [number, number],
+        yDomain: [yDomain[0] ?? yDomainMin, yDomain[1] ?? yDomainMax] as [number, number],
+        value: {
+          x: $xScale.invert?.((localPoint(frameEl, e)?.x ?? 0) - $padding.left),
+          y: $yScale.invert?.((localPoint(frameEl, e)?.y ?? 0) - $padding.top),
+        },
+      };
+
+      dispatch('brushStart', { xDomain, yDomain });
+
+      const onPointerMove = (e: PointerEvent) => {
+        fn(start, {
+          x: $xScale.invert?.((localPoint(frameEl, e)?.x ?? 0) - $padding.left),
+          y: $yScale.invert?.((localPoint(frameEl, e)?.y ?? 0) - $padding.top),
+        });
+
+        // if (xDomain[0] === xDomain[1] || yDomain[0] === yDomain[1]) {
+        //   // Ignore?
+        //   // TODO: What about when using `x` or `y` axis?
+        // } else {
+        dispatch('change', { xDomain, yDomain });
+        // }
+      };
+
+      const onPointerUp = (e: PointerEvent) => {
+        if (e.target === frameEl) {
+          reset();
+          dispatch('change', { xDomain, yDomain });
+        }
+
+        dispatch('brushEnd', { xDomain, yDomain });
+
+        if (resetOnEnd) {
+          reset();
+        }
+
+        window.removeEventListener('pointermove', onPointerMove);
+        window.removeEventListener('pointerup', onPointerUp);
+      };
+
+      window.addEventListener('pointermove', onPointerMove);
+      window.addEventListener('pointerup', onPointerUp);
     };
-}
-const createRange = handler((start, value) => {
+  }
+
+  /** Add second value while maintaining `Date` or `number` type */
+  function add(value1: Date | number, value2: number) {
+    if (value1 instanceof Date) {
+      return new Date(value1.getTime() + value2);
+    } else {
+      return value1 + value2;
+    }
+  }
+
+  const createRange = handler((start, value) => {
     isActive = true;
+
     xDomain = [
-        clamp(Math.min(start.value.x, value.x), xDomainMin, xDomainMax),
-        clamp(Math.max(start.value.x, value.x), xDomainMin, xDomainMax),
+      // @ts-expect-error
+      clamp(min([start.value.x, value.x]), xDomainMin, xDomainMax),
+      // @ts-expect-error
+      clamp(max([start.value.x, value.x]), xDomainMin, xDomainMax),
     ];
+    // xDomain = [start.value.x, value.x];
+
     yDomain = [
-        clamp(Math.min(start.value.y, value.y), yDomainMin, yDomainMax),
-        clamp(Math.max(start.value.y, value.y), yDomainMin, yDomainMax),
+      // @ts-expect-error
+      clamp(min([start.value.y, value.y]), yDomainMin, yDomainMax),
+      // @ts-expect-error
+      clamp(max([start.value.y, value.y]), yDomainMin, yDomainMax),
     ];
-});
-const adjustRange = handler((start, value) => {
-    const dx = clamp(value.x - start.value.x, xDomainMin - start.xDomain[0], xDomainMax - start.xDomain[1]);
-    xDomain = [Number(start.xDomain[0]) + dx, Number(start.xDomain[1]) + dx];
-    const dy = clamp(value.y - start.value.y, yDomainMin - start.yDomain[0], yDomainMax - start.yDomain[1]);
-    yDomain = [Number(start.yDomain[0]) + dy, Number(start.yDomain[1]) + dy];
-});
-const adjustBottom = handler((start, value) => {
+  });
+
+  const adjustRange = handler((start, value) => {
+    const dx = clamp(
+      value.x - start.value.x,
+      xDomainMin - start.xDomain[0],
+      xDomainMax - start.xDomain[1]
+    );
+    xDomain = [add(start.xDomain[0], dx), add(start.xDomain[1], dx)];
+
+    const dy = clamp(
+      value.y - start.value.y,
+      yDomainMin - start.yDomain[0],
+      yDomainMax - start.yDomain[1]
+    );
+    yDomain = [add(start.yDomain[0], dy), add(start.yDomain[1], dy)];
+  });
+
+  const adjustBottom = handler((start, value) => {
     yDomain = [
-        clamp(value.y > start.yDomain[1] ? start.yDomain[1] : value.y, yDomainMin, yDomainMax),
-        clamp(value.y > start.yDomain[1] ? value.y : start.yDomain[1], yDomainMin, yDomainMax),
+      clamp(value.y > start.yDomain[1] ? start.yDomain[1] : value.y, yDomainMin, yDomainMax),
+      clamp(value.y > start.yDomain[1] ? value.y : start.yDomain[1], yDomainMin, yDomainMax),
     ];
-});
-const adjustTop = handler((start, value) => {
+  });
+
+  const adjustTop = handler((start, value) => {
     yDomain = [
-        clamp(value.y < start.yDomain[1] ? value.y : start.yDomain[0], yDomainMin, yDomainMax),
-        clamp(value.y < start.yDomain[1] ? start.yDomain[0] : value.y, yDomainMin, yDomainMax),
+      clamp(value.y < start.yDomain[1] ? value.y : start.yDomain[0], yDomainMin, yDomainMax),
+      clamp(value.y < start.yDomain[1] ? start.yDomain[0] : value.y, yDomainMin, yDomainMax),
     ];
-});
-const adjustLeft = handler((start, value) => {
+  });
+
+  const adjustLeft = handler((start, value) => {
     xDomain = [
-        clamp(value.x > start.xDomain[1] ? start.xDomain[1] : value.x, xDomainMin, xDomainMax),
-        clamp(value.x > start.xDomain[1] ? value.x : start.xDomain[1], xDomainMin, xDomainMax),
+      clamp(value.x > start.xDomain[1] ? start.xDomain[1] : value.x, xDomainMin, xDomainMax),
+      clamp(value.x > start.xDomain[1] ? value.x : start.xDomain[1], xDomainMin, xDomainMax),
     ];
-});
-const adjustRight = handler((start, value) => {
+  });
+
+  const adjustRight = handler((start, value) => {
     xDomain = [
-        clamp(value.x < start.xDomain[0] ? value.x : start.xDomain[0], xDomainMin, xDomainMax),
-        clamp(value.x < start.xDomain[0] ? start.xDomain[0] : value.x, xDomainMin, xDomainMax),
+      clamp(value.x < start.xDomain[0] ? value.x : start.xDomain[0], xDomainMin, xDomainMax),
+      clamp(value.x < start.xDomain[0] ? start.xDomain[0] : value.x, xDomainMin, xDomainMax),
     ];
-});
-function reset() {
+  });
+
+  function reset() {
     isActive = false;
+
     xDomain = originalXDomain;
     yDomain = originalYDomain;
-}
-function selectAll() {
+  }
+
+  function selectAll() {
     xDomain = [xDomainMin, xDomainMax];
     yDomain = [yDomainMin, yDomainMax];
-}
-$: top = $yScale(yDomain[1]);
-$: bottom = $yScale(yDomain[0]);
-$: left = $xScale(xDomain[0]);
-$: right = $xScale(xDomain[1]);
-$: rangeTop = axis === 'both' || axis === 'y' ? top : 0;
-$: rangeLeft = axis === 'both' || axis === 'x' ? left : 0;
-$: rangeWidth = axis === 'both' || axis === 'x' ? right - left : $width;
-$: rangeHeight = axis === 'both' || axis === 'y' ? bottom - top : $height;
-// Set reactively to handle cases where xDomain/yDomain are set externally (ex. `bind:xDomain`)
-$: isActive =
+  }
+
+  $: top = $yScale(yDomain[1]);
+  $: bottom = $yScale(yDomain[0]);
+  $: left = $xScale(xDomain[0]);
+  $: right = $xScale(xDomain[1]);
+
+  $: rangeTop = axis === 'both' || axis === 'y' ? top : 0;
+  $: rangeLeft = axis === 'both' || axis === 'x' ? left : 0;
+  $: rangeWidth = axis === 'both' || axis === 'x' ? right - left : $width;
+  $: rangeHeight = axis === 'both' || axis === 'y' ? bottom - top : $height;
+
+  // Set reactively to handle cases where xDomain/yDomain are set externally (ex. `bind:xDomain`)
+  $: isActive =
     xDomain[0]?.valueOf() !== originalXDomain[0]?.valueOf() ||
-        xDomain[1]?.valueOf() !== originalXDomain[1]?.valueOf() ||
-        yDomain[0]?.valueOf() !== originalYDomain[0]?.valueOf() ||
-        yDomain[1]?.valueOf() !== originalYDomain[1]?.valueOf();
+    xDomain[1]?.valueOf() !== originalXDomain[1]?.valueOf() ||
+    yDomain[0]?.valueOf() !== originalYDomain[0]?.valueOf() ||
+    yDomain[1]?.valueOf() !== originalYDomain[1]?.valueOf();
+
+  /** TODO: Fix types and remove workaround (Svelte 5)*/
+  function any(value: any): any {
+    return value;
+  }
 </script>
 
 <g class={cls('Brush select-none', classes.root, $$props.class)}>
@@ -242,6 +341,64 @@ $: isActive =
       </Group>
     {/if}
 
+    <slot name="labels">
+      {#if labels}
+        {@const labelClass = cls(
+          'text-xs',
+          classes.labels,
+          typeof labels === 'object' ? labels.class : null
+        )}
+
+        {#if axis === 'x' || axis === 'both'}
+          <Text
+            x={left}
+            y={rangeTop + rangeHeight / 2}
+            dx={-4}
+            textAnchor="end"
+            verticalAnchor="middle"
+            value={formatValue(any(xDomain[0]), format)}
+            {...typeof labels === 'object' ? labels : null}
+            class={labelClass}
+          />
+
+          <Text
+            x={right}
+            y={rangeTop + rangeHeight / 2}
+            dx={4}
+            textAnchor="start"
+            verticalAnchor="middle"
+            value={formatValue(any(xDomain[1]), format)}
+            {...typeof labels === 'object' ? labels : null}
+            class={labelClass}
+          />
+        {/if}
+
+        {#if axis === 'y' || axis === 'both'}
+          <Text
+            x={rangeLeft + rangeWidth / 2}
+            y={top}
+            dy={-4}
+            textAnchor="middle"
+            verticalAnchor="end"
+            value={formatValue(any(yDomain[1]), format)}
+            {...typeof labels === 'object' ? labels : null}
+            class={labelClass}
+          />
+
+          <Text
+            x={rangeLeft + rangeWidth / 2}
+            y={bottom}
+            dy={4}
+            textAnchor="middle"
+            verticalAnchor="start"
+            value={formatValue(any(yDomain[0]), format)}
+            {...typeof labels === 'object' ? labels : null}
+            class={labelClass}
+          />
+        {/if}
+      {/if}
+    </slot>
+
     <!-- TODO: Add diagonal/corner handles -->
   {/if}
 </g>

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

@@ -1,5 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
+import { type ComponentProps } from 'svelte';
 import type { SVGAttributes } from 'svelte/elements';
+import { type FormatType } from '@layerstack/utils';
+import Text from './Text.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -8,13 +11,16 @@ declare const __propDef: {
         resetOnEnd?: boolean | undefined;
         xDomain?: [number | Date | null, number | Date | null] | undefined;
         yDomain?: [number | Date | null, number | Date | null] | undefined;
+        labels?: (ComponentProps<Text> | boolean) | undefined;
         range?: SVGAttributes<SVGRectElement> | undefined;
         handle?: SVGAttributes<SVGRectElement> | undefined;
+        format?: FormatType | undefined;
         classes?: {
             root?: string;
             frame?: string;
             range?: string;
             handle?: string;
+            labels?: string;
         } | undefined;
     };
     events: {
@@ -43,6 +49,7 @@ declare const __propDef: {
             rangeWidth: any;
             rangeHeight: any;
         };
+        labels: {};
     };
 };
 export type BrushProps = typeof __propDef.props;

package/dist/components/Calendar.svelte

@@ -1,46 +1,59 @@
-<script>import {} 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 MonthPath from './MonthPath.svelte';
-import Text from './Text.svelte';
-import { chartDataArray } from '../utils/common.js';
-export let start;
-export let end;
-/**
- * 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 = undefined;
-/** Enable drawing path around each month.  If object, pass as props to underlying <path> */
-export let monthPath = false;
-/**
- * Tooltip context to setup mouse events to show tooltip for related data
- */
-export let tooltip = 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)
+<script lang="ts">
+  import { type ComponentProps } 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 type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
+  import MonthPath from './MonthPath.svelte';
+  import Text from './Text.svelte';
+  import { chartDataArray } from '../utils/common.js';
+
+  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) => {
+      ? [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,
+      x: timeWeek.count(timeYear(date), date) * cellWidth,
+      y: date.getDay() * cellHeight,
+      color: $config.c ? $cGet(cellData) : 'transparent',
+      data: cellData,
     };
-});
+  });
 </script>
 
 <slot {cells}>