@pushwoosh/kit-charts 0.0.23 → 0.0.24

package/core/Chart/Chart.styles.d.ts

@@ -62,15 +62,16 @@ export interface TooltipBoxProps {
     $shadow: string;
 }
 export declare const TooltipBox: import("styled-components").StyledComponent<"div", any, TooltipBoxProps, never>;
+/** Edge of the box the beak sits on, named after that edge. */
+export type TailSide = 'top' | 'right' | 'bottom' | 'left';
 export interface TailProps {
-    $left: number;
+    $offset: number;
     $width: number;
     $height: number;
-    $color: string;
-    $below: boolean;
+    $side: TailSide;
 }
-/** The callout beak, drawn as a CSS triangle so it inherits the box colour. */
-export declare const Tail: import("styled-components").StyledComponent<"span", any, TailProps, never>;
+/** The callout beak; an SVG, so it can carry the box border and cut it at the base. */
+export declare const Tail: import("styled-components").StyledComponent<"svg", any, TailProps, never>;
 export declare const TooltipTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TooltipRow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TooltipSwatch: import("styled-components").StyledComponent<"span", any, {

package/core/Chart/Chart.styles.js

@@ -127,25 +127,21 @@ export const TooltipBox = styled.div.withConfig({
 }) => $color, ({
   $whiteSpace
 }) => $whiteSpace);
-/** The callout beak, drawn as a CSS triangle so it inherits the box colour. */
-export const Tail = styled.span.withConfig({
+/** The side names the CSS edge the beak hangs off; the other axis carries its offset. */
+function tailAnchor({
+  $side,
+  $offset,
+  $width,
+  $height
+}) {
+  const along = $side === 'top' || $side === 'bottom' ? 'left' : 'top';
+  return `${$side}: -${$height}px; ${along}: ${$offset - $width / 2}px;`;
+}
+/** The callout beak; an SVG, so it can carry the box border and cut it at the base. */
+export const Tail = styled.svg.withConfig({
   displayName: "Tail",
   componentId: "sc-1pit1b9-9"
-})(["position:absolute;", " left:", ";width:0;height:0;border-right:", " solid transparent;border-left:", " solid transparent;", ""], ({
-  $below,
-  $height
-}) => $below ? `top: -${$height}px;` : `bottom: -${$height}px;`, ({
-  $left,
-  $width
-}) => `${$left - $width / 2}px`, ({
-  $width
-}) => `${$width / 2}px`, ({
-  $width
-}) => `${$width / 2}px`, ({
-  $below,
-  $height,
-  $color
-}) => $below ? `border-bottom: ${$height}px solid ${$color};` : `border-top: ${$height}px solid ${$color};`);
+})(["position:absolute;", ";overflow:visible;"], tailAnchor);
 export const TooltipTitle = styled.div.withConfig({
   displayName: "TooltipTitle",
   componentId: "sc-1pit1b9-10"

package/core/Chart/Tooltip.js

@@ -5,6 +5,74 @@ import { DEFAULTS, Tail, TooltipBox } from './Chart.styles';
 import { TOOLTIP_ANCHOR_GAP, TOOLTIP_CURSOR_OFFSET, TOOLTIP_PADDING, TOOLTIP_RADIUS, TOOLTIP_TAIL_HEIGHT, TOOLTIP_TAIL_WIDTH, VIEWPORT_MARGIN } from '../layout/metrics';
 const SHADOW_COLOR = 'rgba(0, 0, 0, 0.12)';
 const DEFAULT_SHADOW = `0 2px 8px ${SHADOW_COLOR}`;
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), Math.max(min, max));
+}
+/** Keeps a box of `size` inside `viewport`, margins included. */
+function fit(value, size, viewport) {
+  return clamp(value, VIEWPORT_MARGIN, viewport - size - VIEWPORT_MARGIN);
+}
+/** Two slopes only: left open so the fill closes it without a stroke along the base. */
+function beakPath(side) {
+  const long = TOOLTIP_TAIL_WIDTH;
+  const deep = TOOLTIP_TAIL_HEIGHT;
+  const half = long / 2;
+  switch (side) {
+    case 'top':
+      return `M0 ${deep} L${half} 0 L${long} ${deep}`;
+    case 'left':
+      return `M${deep} 0 L0 ${half} L${deep} ${long}`;
+    case 'right':
+      return `M0 0 L${deep} ${half} L0 ${long}`;
+    default:
+      return `M0 0 L${half} ${deep} L${long} 0`;
+  }
+}
+/** The beak viewport: deep across the edge it leaves, long along it. */
+function beakBox(side) {
+  return side === 'left' || side === 'right' ? {
+    width: TOOLTIP_TAIL_HEIGHT,
+    height: TOOLTIP_TAIL_WIDTH
+  } : {
+    width: TOOLTIP_TAIL_WIDTH,
+    height: TOOLTIP_TAIL_HEIGHT
+  };
+}
+/** The 1px of box border the beak covers where it leaves the edge. */
+function beakSeam(side) {
+  const long = TOOLTIP_TAIL_WIDTH - 1;
+  const deep = TOOLTIP_TAIL_HEIGHT;
+  switch (side) {
+    case 'top':
+      return {
+        x: 0.5,
+        y: deep,
+        width: long,
+        height: 1
+      };
+    case 'left':
+      return {
+        x: deep,
+        y: 0.5,
+        width: 1,
+        height: long
+      };
+    case 'right':
+      return {
+        x: -1,
+        y: 0.5,
+        width: 1,
+        height: long
+      };
+    default:
+      return {
+        x: 0.5,
+        y: -1,
+        width: long,
+        height: 1
+      };
+  }
+}
 export function Tooltip({
   at,
   reach: markReach = 0,
@@ -14,12 +82,13 @@ export function Tooltip({
 }) {
   const ref = useRef(null);
   const callout = (options?.shape ?? 'callout') === 'callout' && !options?.followPointer;
+  const radius = options?.borderRadius ?? TOOLTIP_RADIUS;
   const target = options?.followPointer ? pointer : at;
   const [placement, setPlacement] = useState({
     x: target.x + TOOLTIP_CURSOR_OFFSET,
     y: target.y + TOOLTIP_CURSOR_OFFSET,
-    tailX: null,
-    below: true
+    tail: null,
+    side: 'top'
   });
   useLayoutEffect(() => {
     const node = ref.current;
@@ -30,31 +99,49 @@ export function Tooltip({
       width,
       height
     } = node.getBoundingClientRect();
-    const limitX = value => Math.min(Math.max(VIEWPORT_MARGIN, value), Math.max(VIEWPORT_MARGIN, window.innerWidth - width - VIEWPORT_MARGIN));
+    const fitX = value => fit(value, width, window.innerWidth);
+    const fitY = value => fit(value, height, window.innerHeight);
     if (!callout) {
       const flipX = target.x + TOOLTIP_CURSOR_OFFSET + width > window.innerWidth - VIEWPORT_MARGIN;
       const flipY = target.y + TOOLTIP_CURSOR_OFFSET + height > window.innerHeight - VIEWPORT_MARGIN;
       setPlacement({
-        x: limitX(flipX ? target.x - TOOLTIP_CURSOR_OFFSET - width : target.x + TOOLTIP_CURSOR_OFFSET),
-        y: Math.max(VIEWPORT_MARGIN, flipY ? target.y - TOOLTIP_CURSOR_OFFSET - height : target.y + TOOLTIP_CURSOR_OFFSET),
-        tailX: null,
-        below: !flipY
+        x: fitX(flipX ? target.x - TOOLTIP_CURSOR_OFFSET - width : target.x + TOOLTIP_CURSOR_OFFSET),
+        y: fitY(flipY ? target.y - TOOLTIP_CURSOR_OFFSET - height : target.y + TOOLTIP_CURSOR_OFFSET),
+        tail: null,
+        side: flipY ? 'bottom' : 'top'
+      });
+      return;
+    }
+    // What the beak needs of an edge: its own half plus the rounded corner beside it.
+    const beakReach = TOOLTIP_TAIL_WIDTH / 2 + radius;
+    const standoff = TOOLTIP_TAIL_HEIGHT + TOOLTIP_ANCHOR_GAP + markReach;
+    const centred = target.x - width / 2;
+    const x = fitX(centred);
+    // Only the viewport can push the box off centre; if that pushed the anchor past
+    // the edge the beak reaches, the box stands beside the point instead of over it.
+    const beside = x !== centred && (target.x < x + beakReach || target.x > x + width - beakReach);
+    if (beside) {
+      const onLeft = target.x > x + width - beakReach;
+      const y = fitY(target.y - height / 2);
+      setPlacement({
+        x: fitX(onLeft ? target.x - standoff - width : target.x + standoff),
+        y,
+        tail: clamp(target.y - y, beakReach, height - beakReach),
+        side: onLeft ? 'right' : 'left'
       });
       return;
     }
-    // Sit above the point with the tail pointing down at it, and flip under the
+    // Sit above the point with the beak pointing down at it, and flip under the
     // point when there is no room. The box may be nudged sideways to stay on
-    // screen, so the tail keeps its own offset and still points at the anchor.
-    const reach = TOOLTIP_TAIL_HEIGHT + TOOLTIP_ANCHOR_GAP + markReach;
-    const below = target.y - height - reach < VIEWPORT_MARGIN;
-    const x = limitX(target.x - width / 2);
+    // screen, so the beak keeps its own offset and still points at the anchor.
+    const below = target.y - height - standoff < VIEWPORT_MARGIN;
     setPlacement({
       x,
-      y: below ? target.y + reach : target.y - height - reach,
-      tailX: Math.min(Math.max(TOOLTIP_TAIL_WIDTH, target.x - x), Math.max(TOOLTIP_TAIL_WIDTH, width - TOOLTIP_TAIL_WIDTH)),
-      below
+      y: below ? target.y + standoff : target.y - height - standoff,
+      tail: clamp(target.x - x, beakReach, width - beakReach),
+      side: below ? 'top' : 'bottom'
     });
-  }, [target.x, target.y, markReach, callout, children]);
+  }, [target.x, target.y, markReach, callout, radius, children]);
   if (typeof document === 'undefined') {
     return null;
   }
@@ -63,27 +150,42 @@ export function Tooltip({
   // so the tabular tooltip is a light card unless the caller says otherwise.
   const tabular = Boolean(options?.table);
   const background = options?.backgroundColor ?? (tabular ? DEFAULTS.surface : DEFAULTS.tooltipSurface);
+  const borderColor = options?.borderColor ?? (tabular ? DEFAULTS.border : 'transparent');
   const color = options?.style?.color ?? (tabular ? DEFAULTS.text : DEFAULTS.tooltipText);
+  const beak = beakBox(placement.side);
   return createPortal(_jsxs(TooltipBox, {
     ref: ref,
     role: "tooltip",
     "$x": placement.x,
     "$y": placement.y,
     "$padding": options?.padding ?? TOOLTIP_PADDING,
-    "$radius": options?.borderRadius ?? TOOLTIP_RADIUS,
-    "$borderColor": options?.borderColor ?? (tabular ? DEFAULTS.border : 'transparent'),
+    "$radius": radius,
+    "$borderColor": borderColor,
     "$background": background,
     "$color": color,
     "$fontFamily": options?.style?.fontFamily ?? DEFAULTS.fontFamily,
     "$fontSize": options?.style?.fontSize ?? DEFAULTS.fontSize,
     "$whiteSpace": options?.style?.whiteSpace ?? 'nowrap',
     "$shadow": shadow ? `${shadow.offsetX ?? 0}px ${shadow.offsetY ?? 2}px ${shadow.width ?? 8}px ` + `${shadow.color ?? SHADOW_COLOR}` : DEFAULT_SHADOW,
-    children: [children, placement.tailX === null ? null : _jsx(Tail, {
-      "$left": placement.tailX,
+    children: [children, placement.tail === null ? null : _jsxs(Tail, {
+      "$offset": placement.tail,
       "$width": TOOLTIP_TAIL_WIDTH,
       "$height": TOOLTIP_TAIL_HEIGHT,
-      "$color": background,
-      "$below": placement.below
+      "$side": placement.side,
+      width: beak.width,
+      height: beak.height,
+      viewBox: `0 0 ${beak.width} ${beak.height}`,
+      "aria-hidden": true,
+      children: [_jsx("path", {
+        d: beakPath(placement.side),
+        fill: background,
+        stroke: borderColor,
+        strokeWidth: 1,
+        strokeLinejoin: "round"
+      }), _jsx("rect", {
+        ...beakSeam(placement.side),
+        fill: background
+      })]
     })]
   }), document.body);
 }

package/core/layout/metrics.d.ts

@@ -36,8 +36,8 @@ export declare const HINT_ICON_GAP = 6;
 export declare const HINT_PADDING = 12;
 /** Between the title block and the plot below it. */
 export declare const TITLE_BLOCK_GAP = 10;
-/** Tooltip beak, as the design system draws it: a wide, shallow triangle. */
-export declare const TOOLTIP_TAIL_WIDTH = 20;
+/** Tooltip beak, as the design system draws it. */
+export declare const TOOLTIP_TAIL_WIDTH = 14;
 export declare const TOOLTIP_TAIL_HEIGHT = 4;
 /** Air between the beak tip and the edge of the mark it points at. */
 export declare const TOOLTIP_ANCHOR_GAP = 8;

package/core/layout/metrics.js

@@ -36,8 +36,8 @@ export const HINT_ICON_GAP = 6;
 export const HINT_PADDING = 12;
 /** Between the title block and the plot below it. */
 export const TITLE_BLOCK_GAP = 10;
-/** Tooltip beak, as the design system draws it: a wide, shallow triangle. */
-export const TOOLTIP_TAIL_WIDTH = 20;
+/** Tooltip beak, as the design system draws it. */
+export const TOOLTIP_TAIL_WIDTH = 14;
 export const TOOLTIP_TAIL_HEIGHT = 4;
 /** Air between the beak tip and the edge of the mark it points at. */
 export const TOOLTIP_ANCHOR_GAP = 8;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/kit-charts",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "description": "Small React chart library on SVG, with a Highcharts-shaped configuration model",
   "license": "MIT",
   "repository": {