layerchart 0.54.0 → 0.55.0

package/dist/components/layout/Svg.svelte

@@ -1,41 +1,56 @@
-<script>import { cls } from '@layerstack/tailwind';
-import { chartContext } from '../ChartContext.svelte';
-import { transformContext } from '../TransformContext.svelte';
-/** The layer's `<svg>` tag. Useful for bindings. */
-export let element = undefined;
-/** The layer's `<g>` tag. Useful for bindings. */
-export let innerElement = undefined;
-/** The layer's z-index. */
-export let zIndex = undefined;
-/** Set this to `false` to set `pointer-events: none;` on the entire layer. */
-export let pointerEvents = undefined;
-/** A string passed to the `viewBox` property on the `<svg>` tag. */
-export let viewBox = undefined;
-/** A string passed to the `aria-label` property on the `<svg>` tag. */
-export let label = undefined;
-/** A string passed to the `aria-labelledby property` on the `<svg>` tag. */
-export let labelledBy = undefined;
-/** A string passed to the `aria-describedby` property on the `<svg>` tag. */
-export let describedBy = undefined;
-/** Shorthand to set the contents of `<title></title>` for accessibility. You can also set arbitrary HTML via the "title" slot but this is a convenient shorthand. If you use the "title" slot, this prop is ignored. */
-export let title = undefined;
-/**
- * Translate children to center, useful for radial layouts
- */
-export let center = false;
-const { containerWidth, containerHeight, width, height, padding } = chartContext();
-const { mode, scale, translate } = transformContext();
-$: transform = center
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+
+  import { chartContext } from '../ChartContext.svelte';
+  import { transformContext } from '../TransformContext.svelte';
+
+  /** The layer's `<svg>` tag. Useful for bindings. */
+  export let element: SVGElement | undefined = undefined;
+
+  /** The layer's `<g>` tag. Useful for bindings. */
+  export let innerElement: SVGGElement | undefined = undefined;
+
+  /** The layer's z-index. */
+  export let zIndex = undefined;
+
+  /** Set this to `false` to set `pointer-events: none;` on the entire layer. */
+  export let pointerEvents: boolean | undefined = undefined;
+
+  /** A string passed to the `viewBox` property on the `<svg>` tag. */
+  export let viewBox: string | undefined = undefined;
+
+  /** A string passed to the `aria-label` property on the `<svg>` tag. */
+  export let label: string | undefined = undefined;
+
+  /** A string passed to the `aria-labelledby property` on the `<svg>` tag. */
+  export let labelledBy: string | undefined = undefined;
+
+  /** A string passed to the `aria-describedby` property on the `<svg>` tag. */
+  export let describedBy: string | undefined = undefined;
+
+  /** Shorthand to set the contents of `<title></title>` for accessibility. You can also set arbitrary HTML via the "title" slot but this is a convenient shorthand. If you use the "title" slot, this prop is ignored. */
+  export let title: string | undefined = undefined;
+
+  /**
+   * Translate children to center, useful for radial layouts
+   */
+  export let center: boolean | 'x' | 'y' = false;
+
+  const { containerWidth, containerHeight, width, height, padding } = chartContext();
+
+  const { mode, scale, translate } = transformContext();
+
+  $: transform = center
     ? `translate(${center === 'x' || center === true ? $width / 2 : 0}, ${center === 'y' || center === true ? $height / 2 : 0})`
     : '';
-$: if (mode === 'canvas') {
+  $: if (mode === 'canvas') {
     const center = { x: $width / 2, y: $height / 2 };
     const newTranslate = {
-        x: $translate.x * $scale + center.x - center.x * $scale,
-        y: $translate.y * $scale + center.y - center.y * $scale,
+      x: $translate.x * $scale + center.x - center.x * $scale,
+      y: $translate.y * $scale + center.y - center.y * $scale,
     };
     transform = `translate(${newTranslate.x},${newTranslate.y}) scale(${$scale})`;
-}
+  }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->

package/dist/components/tooltip/Tooltip.svelte

@@ -1,115 +1,161 @@
-<script>import { fade } from 'svelte/transition';
-import { cls } from '@layerstack/tailwind';
-import { chartContext } from './../ChartContext.svelte';
-import { tooltipContext } from './TooltipContext.svelte';
-import { motionStore } from '../../stores/motionStore.js';
-import { isScaleBand } from '../../utils/scales.js';
-/** `x` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
-export let x = 'pointer';
-/** `y` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
-export let y = 'pointer';
-/** Offset added to `x` position */
-export let xOffset = x === 'pointer' ? 10 : 0;
-/** Offset added to `y` position */
-export let yOffset = y === 'pointer' ? 10 : 0;
-export let anchor = 'top-left';
-export let contained = 'container'; // TODO: Support 'window' using getBoundingClientRect()
-export let variant = 'default';
-/** Set to `false` to disable spring transitions */
-export let motion = true;
-export let classes = {};
-const { padding, xScale, xGet, yScale, yGet, containerWidth, containerHeight } = chartContext();
-const tooltip = tooltipContext();
-let tooltipWidth = 0;
-let tooltipHeight = 0;
-const xPos = motionStore($tooltip.x, { spring: motion });
-const yPos = motionStore($tooltip.y, { spring: motion });
-function alignValue(value, align, addlOffset, tooltipSize) {
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+  import { cls } from '@layerstack/tailwind';
+
+  import { chartContext } from './../ChartContext.svelte';
+  import { tooltipContext } from './TooltipContext.svelte';
+  import { motionStore } from '../../stores/motionStore.js';
+  import { isScaleBand } from '../../utils/scales.js';
+
+  /** `x` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
+  export let x: 'pointer' | 'data' | number | undefined = 'pointer';
+  /** `y` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
+  export let y: 'pointer' | 'data' | number | undefined = 'pointer';
+
+  /** Offset added to `x` position */
+  export let xOffset = x === 'pointer' ? 10 : 0;
+
+  /** Offset added to `y` position */
+  export let yOffset = y === 'pointer' ? 10 : 0;
+
+  /** Align based on edge of tooltip */
+  type Placement =
+    | 'top-left'
+    | 'top'
+    | 'top-right'
+    | 'left'
+    | 'center'
+    | 'right'
+    | 'bottom-left'
+    | 'bottom'
+    | 'bottom-right';
+  export let anchor: Placement = 'top-left';
+
+  export let contained: 'container' | false = 'container'; // TODO: Support 'window' using getBoundingClientRect()
+  export let variant: 'default' | 'invert' | 'none' = 'default';
+
+  /** Set to `false` to disable spring transitions */
+  export let motion = true;
+
+  export let classes: {
+    root?: string;
+    container?: string;
+    header?: string;
+    content?: string;
+  } = {};
+
+  const { padding, xScale, xGet, yScale, yGet, containerWidth, containerHeight } = chartContext();
+  const tooltip = tooltipContext();
+
+  let tooltipWidth = 0;
+  let tooltipHeight = 0;
+
+  const xPos = motionStore($tooltip.x, { spring: motion });
+  const yPos = motionStore($tooltip.y, { spring: motion });
+
+  type Align = 'start' | 'center' | 'end';
+
+  function alignValue(value: number, align: Align, addlOffset: number, tooltipSize: number) {
     const alignOffset = align === 'center' ? tooltipSize / 2 : align === 'end' ? tooltipSize : 0;
     return value + (align === 'end' ? -addlOffset : addlOffset) - alignOffset;
-}
-$: if ($tooltip?.data) {
+  }
+
+  $: if ($tooltip?.data) {
     const xBandOffset = isScaleBand($xScale)
-        ? $xScale.step() / 2 - ($xScale.padding() * $xScale.step()) / 2
-        : 0;
-    const xValue = typeof x === 'number'
+      ? $xScale.step() / 2 - ($xScale.padding() * $xScale.step()) / 2
+      : 0;
+
+    const xValue: number =
+      typeof x === 'number'
         ? x
         : x === 'data'
-            ? $xGet($tooltip.data) + $padding.left + xBandOffset
-            : $tooltip.x;
-    let xAlign = 'start';
+          ? $xGet($tooltip.data) + $padding.left + xBandOffset
+          : $tooltip.x;
+
+    let xAlign: Align = 'start';
     switch (anchor) {
-        case 'top-left':
-        case 'left':
-        case 'bottom-left':
-            xAlign = 'start';
-            break;
-        case 'top':
-        case 'center':
-        case 'bottom':
-            xAlign = 'center';
-            break;
-        case 'top-right':
-        case 'right':
-        case 'bottom-right':
-            xAlign = 'end';
-            break;
+      case 'top-left':
+      case 'left':
+      case 'bottom-left':
+        xAlign = 'start';
+        break;
+
+      case 'top':
+      case 'center':
+      case 'bottom':
+        xAlign = 'center';
+        break;
+
+      case 'top-right':
+      case 'right':
+      case 'bottom-right':
+        xAlign = 'end';
+        break;
     }
+
     const yBandOffset = isScaleBand($yScale)
-        ? $yScale.step() / 2 - ($yScale.padding() * $yScale.step()) / 2
-        : 0;
-    const yValue = typeof y === 'number'
+      ? $yScale.step() / 2 - ($yScale.padding() * $yScale.step()) / 2
+      : 0;
+    const yValue: number =
+      typeof y === 'number'
         ? y
         : y === 'data'
-            ? $yGet($tooltip.data) + $padding.top + yBandOffset
-            : $tooltip.y;
-    let yAlign = 'start';
+          ? $yGet($tooltip.data) + $padding.top + yBandOffset
+          : $tooltip.y;
+
+    let yAlign: Align = 'start';
     switch (anchor) {
-        case 'top-left':
-        case 'top':
-        case 'top-right':
-            yAlign = 'start';
-            break;
-        case 'left':
-        case 'center':
-        case 'right':
-            yAlign = 'center';
-            break;
-        case 'bottom-left':
-        case 'bottom':
-        case 'bottom-right':
-            yAlign = 'end';
-            break;
+      case 'top-left':
+      case 'top':
+      case 'top-right':
+        yAlign = 'start';
+        break;
+
+      case 'left':
+      case 'center':
+      case 'right':
+        yAlign = 'center';
+        break;
+
+      case 'bottom-left':
+      case 'bottom':
+      case 'bottom-right':
+        yAlign = 'end';
+        break;
     }
+
     const rect = {
-        top: alignValue(yValue, yAlign, yOffset, tooltipHeight),
-        left: alignValue(xValue, xAlign, xOffset, tooltipWidth),
-        // set below
-        bottom: 0,
-        right: 0,
+      top: alignValue(yValue, yAlign, yOffset, tooltipHeight),
+      left: alignValue(xValue, xAlign, xOffset, tooltipWidth),
+      // set below
+      bottom: 0,
+      right: 0,
     };
     rect.bottom = rect.top + tooltipHeight;
     rect.right = rect.left + tooltipWidth;
+
     // Check if outside of container and swap align side accordingly
     if (contained === 'container') {
-        if ((xAlign === 'start' || xAlign === 'center') && rect.right > $containerWidth) {
-            rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
-        }
-        if ((xAlign === 'end' || xAlign === 'center') && rect.left < $padding.left) {
-            rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
-        }
-        rect.right = rect.left + tooltipWidth;
-        if ((yAlign === 'start' || yAlign === 'center') && rect.bottom > $containerHeight) {
-            rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
-        }
-        if ((yAlign === 'end' || yAlign === 'center') && rect.top < $padding.top) {
-            rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
-        }
-        rect.bottom = rect.top + tooltipHeight;
+      if ((xAlign === 'start' || xAlign === 'center') && rect.right > $containerWidth) {
+        rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
+      }
+      if ((xAlign === 'end' || xAlign === 'center') && rect.left < $padding.left) {
+        rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
+      }
+      rect.right = rect.left + tooltipWidth;
+
+      if ((yAlign === 'start' || yAlign === 'center') && rect.bottom > $containerHeight) {
+        rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
+      }
+      if ((yAlign === 'end' || yAlign === 'center') && rect.top < $padding.top) {
+        rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
+      }
+      rect.bottom = rect.top + tooltipHeight;
     }
+
     $yPos = rect.top;
     $xPos = rect.left;
-}
+  }
 </script>
 
 {#if $tooltip.data}

package/dist/components/tooltip/Tooltip.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         y?: "pointer" | "data" | number | undefined;
         xOffset?: number | undefined;
         yOffset?: number | undefined;
-        anchor?: ("left" | "right" | "center" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        anchor?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         contained?: ("container" | false) | undefined;
         variant?: ("default" | "invert" | "none") | undefined;
         motion?: boolean | undefined;