layerchart 0.53.0 → 0.54.1

package/dist/components/tooltip/Tooltip.svelte

@@ -1,100 +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';
-/** `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 = typeof x === 'number' || typeof y === 'number' ? 0 : 10;
-/** Offset added to `y` position */
-export let yOffset = typeof x === 'number' || typeof y === 'number' ? 0 : 10;
-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, xGet, 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) {
-    const xValue = typeof x === 'number' ? x : x === 'data' ? $xGet($tooltip.data) + $padding.left : $tooltip.x;
-    let xAlign = 'start';
+  }
+
+  $: if ($tooltip?.data) {
+    const xBandOffset = isScaleBand($xScale)
+      ? $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: 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 yValue = typeof y === 'number' ? y : y === 'data' ? $yGet($tooltip.data) + $padding.top : $tooltip.y;
-    let yAlign = 'start';
+
+    const yBandOffset = isScaleBand($yScale)
+      ? $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: 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;