@pushwoosh/kit-charts 0.0.22 → 0.0.23

package/core/Chart/Chart.js

@@ -325,7 +325,8 @@ function ChartBody({
       anchor: {
         x: bounds.left + highest.anchor.x,
         y: bounds.top + highest.anchor.y
-      }
+      },
+      reach: highest.reach ?? 0
     });
   }, [model, hitsAt, options.tooltip, drag]);
   const handlePointerLeave = useCallback(() => setHover(null), []);
@@ -578,6 +579,13 @@ function ChartBody({
         }), model.axisless ? null : _jsx(XAxisLine, {
           plot: model.plot,
           axis: model.xAxis
+        }), model.series.map(series => {
+          const ctx = series.hidden ? null : contextFor(series);
+          const overlay = ctx ? series.renderer.renderOverlay?.(ctx) : null;
+          return overlay ? _jsx("g", {
+            "data-series-index": series.index,
+            children: overlay
+          }, `overlay-${series.index}`) : null;
         }), decorations('over'), drag ? _jsx(ZoomBand, {
           x: Math.min(drag.from, drag.to),
           y: model.plot.y,
@@ -627,6 +635,7 @@ function ChartBody({
       children: options.chart?.resetZoomText ?? 'Reset zoom'
     }) : null, hover && tooltipContent ? _jsx(Tooltip, {
       at: hover.anchor,
+      reach: hover.reach,
       pointer: hover.pointer,
       options: options.tooltip,
       children: tooltipContent

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

@@ -64,7 +64,8 @@ export interface TooltipBoxProps {
 export declare const TooltipBox: import("styled-components").StyledComponent<"div", any, TooltipBoxProps, never>;
 export interface TailProps {
     $left: number;
-    $size: number;
+    $width: number;
+    $height: number;
     $color: string;
     $below: boolean;
 }

package/core/Chart/Chart.styles.js

@@ -133,19 +133,19 @@ export const Tail = styled.span.withConfig({
   componentId: "sc-1pit1b9-9"
 })(["position:absolute;", " left:", ";width:0;height:0;border-right:", " solid transparent;border-left:", " solid transparent;", ""], ({
   $below,
-  $size
-}) => $below ? `top: -${$size}px;` : `bottom: -${$size}px;`, ({
+  $height
+}) => $below ? `top: -${$height}px;` : `bottom: -${$height}px;`, ({
   $left,
-  $size
-}) => `${$left - $size}px`, ({
-  $size
-}) => `${$size}px`, ({
-  $size
-}) => `${$size}px`, ({
+  $width
+}) => `${$left - $width / 2}px`, ({
+  $width
+}) => `${$width / 2}px`, ({
+  $width
+}) => `${$width / 2}px`, ({
   $below,
-  $size,
+  $height,
   $color
-}) => $below ? `border-bottom: ${$size}px solid ${$color};` : `border-top: ${$size}px solid ${$color};`);
+}) => $below ? `border-bottom: ${$height}px solid ${$color};` : `border-top: ${$height}px solid ${$color};`);
 export const TooltipTitle = styled.div.withConfig({
   displayName: "TooltipTitle",
   componentId: "sc-1pit1b9-10"

package/core/Chart/Tooltip.d.ts

@@ -4,10 +4,12 @@ import { type TooltipOptions } from '../types/options';
 interface TooltipProps {
     /** Anchor the callout points at, in viewport coordinates. */
     at: Point;
+    /** How far the hovered mark reaches past the anchor, so the beak clears it. */
+    reach?: number;
     /** Pointer position, used when the tooltip follows the cursor instead. */
     pointer: Point;
     options: TooltipOptions | undefined;
     children: ReactNode;
 }
-export declare function Tooltip({ at, options, pointer, children, }: TooltipProps): ReactElement | null;
+export declare function Tooltip({ at, reach: markReach, options, pointer, children, }: TooltipProps): ReactElement | null;
 export {};

package/core/Chart/Tooltip.js

@@ -2,11 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { DEFAULTS, Tail, TooltipBox } from './Chart.styles';
-import { TOOLTIP_CURSOR_OFFSET, TOOLTIP_PADDING, TOOLTIP_RADIUS, TOOLTIP_TAIL, VIEWPORT_MARGIN } from '../layout/metrics';
+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}`;
 export function Tooltip({
   at,
+  reach: markReach = 0,
   options,
   pointer,
   children
@@ -44,15 +45,16 @@ export function Tooltip({
     // Sit above the point with the tail 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 below = target.y - height - TOOLTIP_TAIL < VIEWPORT_MARGIN;
+    const reach = TOOLTIP_TAIL_HEIGHT + TOOLTIP_ANCHOR_GAP + markReach;
+    const below = target.y - height - reach < VIEWPORT_MARGIN;
     const x = limitX(target.x - width / 2);
     setPlacement({
       x,
-      y: below ? target.y + TOOLTIP_TAIL : target.y - height - TOOLTIP_TAIL,
-      tailX: Math.min(Math.max(TOOLTIP_TAIL * 2, target.x - x), Math.max(TOOLTIP_TAIL * 2, width - TOOLTIP_TAIL * 2)),
+      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
     });
-  }, [target.x, target.y, callout, children]);
+  }, [target.x, target.y, markReach, callout, children]);
   if (typeof document === 'undefined') {
     return null;
   }
@@ -78,7 +80,8 @@ export function Tooltip({
     "$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,
-      "$size": TOOLTIP_TAIL,
+      "$width": TOOLTIP_TAIL_WIDTH,
+      "$height": TOOLTIP_TAIL_HEIGHT,
       "$color": background,
       "$below": placement.below
     })]

package/core/layout/metrics.d.ts

@@ -36,8 +36,11 @@ 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: both its height and half its width. */
-export declare const TOOLTIP_TAIL = 7;
+/** Tooltip beak, as the design system draws it: a wide, shallow triangle. */
+export declare const TOOLTIP_TAIL_WIDTH = 20;
+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;
 /** Tooltip to the cursor, when it follows the pointer instead of a point. */
 export declare const TOOLTIP_CURSOR_OFFSET = 12;
 /** Keep a floating element this far inside the viewport. */

package/core/layout/metrics.js

@@ -36,8 +36,11 @@ 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: both its height and half its width. */
-export const TOOLTIP_TAIL = 7;
+/** Tooltip beak, as the design system draws it: a wide, shallow triangle. */
+export const TOOLTIP_TAIL_WIDTH = 20;
+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;
 /** Tooltip to the cursor, when it follows the pointer instead of a point. */
 export const TOOLTIP_CURSOR_OFFSET = 12;
 /** Keep a floating element this far inside the viewport. */

package/core/types/renderer.d.ts

@@ -61,6 +61,8 @@ export interface PointHit {
     y: number | null;
     value: number | null;
     anchor: Point;
+    /** How far the hovered mark reaches past `anchor`; 0 when it draws none. */
+    reach?: number;
     distance: number;
 }
 export interface LegendItem {
@@ -95,6 +97,8 @@ export interface SeriesRenderer<TSeries extends SeriesOptionsBase = SeriesOption
     readonly animatesGeometry?: boolean;
     extendDomain(series: TSeries, acc: DomainAcc): DomainAcc;
     render(ctx: RenderContext<TSeries>): ReactNode;
+    /** Drawn above every series and the axis line — the hovered point marker lives here. */
+    renderOverlay?(ctx: RenderContext<TSeries>): ReactNode;
     hitTest(ctx: RenderContext<TSeries>, pointer: Point): PointHit[] | null;
     legendItems(series: TSeries, seriesIndex: number, colors: readonly string[]): LegendItem[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/kit-charts",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "description": "Small React chart library on SVG, with a Highcharts-shaped configuration model",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     "directory": "dist"
   },
   "dependencies": {
-    "@pushwoosh/kit-constants": "^2.0.0"
+    "@pushwoosh/kit-constants": "^2.1.0"
   },
   "devDependencies": {
     "@pushwoosh/frontend-builder-engine": "^3.1.0",

package/series/area/area.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { drawable, projectSeries, toAreaPath, toLinePath } from '../../core/geometry/path';
-import { showsHoverMarker } from '../../core/options/normalize';
 import { includeZero } from '../shared/domain';
 import { nearestByX } from '../shared/hit';
 import { seriesLegend } from '../shared/legend';
-import { Markers } from '../shared/Markers';
+import { hoverMarkerFor, Markers } from '../shared/Markers';
 const DEFAULT_FILL_OPACITY = 0.75;
 export const area = {
   type: 'area',
@@ -21,10 +20,6 @@ export const area = {
     }
     const color = ctx.color;
     const lineWidth = ctx.series.lineWidth ?? 2;
-    const hoveredIndex = ctx.hovered?.pointIndex;
-    const hovered = hoveredIndex === undefined ? undefined : projected.find(({
-      point
-    }) => point.index === hoveredIndex);
     return _jsxs("g", {
       children: [_jsx("path", {
         d: toAreaPath(slots),
@@ -42,16 +37,10 @@ export const area = {
         marker: ctx.series.marker,
         projected: projected,
         color: color
-      }), hovered && showsHoverMarker(ctx.series.marker) ? _jsx("circle", {
-        cx: hovered.px,
-        cy: hovered.py,
-        r: ctx.series.marker?.states?.hover?.radius ?? 4,
-        fill: color,
-        stroke: "#FFFFFF",
-        strokeWidth: 2
-      }) : null]
+      })]
     });
   },
+  renderOverlay: ctx => hoverMarkerFor(ctx),
   hitTest: (ctx, pointer) => nearestByX(ctx, pointer),
   legendItems: (series, seriesIndex) => seriesLegend(series, seriesIndex, 'square')
 };

package/series/line/line.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { drawable, projectSeries, toLinePath } from '../../core/geometry/path';
-import { showsHoverMarker } from '../../core/options/normalize';
 import { nearestByX } from '../shared/hit';
 import { seriesLegend } from '../shared/legend';
-import { Markers } from '../shared/Markers';
+import { hoverMarkerFor, Markers } from '../shared/Markers';
 export const line = {
   type: 'line',
   scales: {
@@ -18,10 +17,6 @@ export const line = {
       return null;
     }
     const color = ctx.color;
-    const hoveredIndex = ctx.hovered?.pointIndex;
-    const hovered = hoveredIndex === undefined ? undefined : projected.find(({
-      point
-    }) => point.index === hoveredIndex);
     return _jsxs("g", {
       children: [_jsx("path", {
         d: toLinePath(slots),
@@ -34,16 +29,10 @@ export const line = {
         marker: ctx.series.marker,
         projected: projected,
         color: color
-      }), hovered && showsHoverMarker(ctx.series.marker) ? _jsx("circle", {
-        cx: hovered.px,
-        cy: hovered.py,
-        r: ctx.series.marker?.states?.hover?.radius ?? 4,
-        fill: color,
-        stroke: "#FFFFFF",
-        strokeWidth: 2
-      }) : null]
+      })]
     });
   },
+  renderOverlay: ctx => hoverMarkerFor(ctx),
   hitTest: (ctx, pointer) => nearestByX(ctx, pointer),
   legendItems: (series, seriesIndex) => seriesLegend(series, seriesIndex, 'line')
 };

package/series/shared/Markers.d.ts

@@ -1,6 +1,11 @@
 import { type ReactNode } from 'react';
 import { type Projected } from '../../core/geometry/path';
 import { type MarkerOptions } from '../../core/types/options';
+import { type RenderContext } from '../../core/types/renderer';
+/** How far the hover mark reaches past its point, so a tooltip can clear it. */
+export declare const hoverReachOf: (marker: MarkerOptions | undefined) => number;
+/** The hovered point of a series, or nothing when it has none. */
+export declare function hoverMarkerFor(ctx: RenderContext): ReactNode;
 export interface MarkersProps {
     marker: MarkerOptions | undefined;
     projected: readonly Projected[];

package/series/shared/Markers.js

@@ -1,6 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { showsMarkers } from '../../core/options/normalize';
+import { drawable, projectSeries } from '../../core/geometry/path';
+import { DEFAULT_SURFACE_COLOR } from '../../core/model/palette';
+import { showsHoverMarker, showsMarkers } from '../../core/options/normalize';
+/** Hovered point per the design system: a ring in the series colour on the surface. */
+const HOVER_RADIUS = 2.5;
+const HOVER_RING_WIDTH = 2;
 const markerRadius = marker => marker?.radius ?? (marker?.width ? marker.width / 2 : 3);
+/** How far the hover mark reaches past its point, so a tooltip can clear it. */
+export const hoverReachOf = marker => (marker?.states?.hover?.radius ?? HOVER_RADIUS) + HOVER_RING_WIDTH / 2;
+/** The hovered point of a series, or nothing when it has none. */
+export function hoverMarkerFor(ctx) {
+  const {
+    marker
+  } = ctx.series;
+  const hoveredIndex = ctx.hovered?.pointIndex;
+  if (hoveredIndex === undefined || !showsHoverMarker(marker)) {
+    return null;
+  }
+  const at = drawable(projectSeries(ctx)).find(({
+    point
+  }) => point.index === hoveredIndex);
+  return at ? _jsx("circle", {
+    cx: at.px,
+    cy: at.py,
+    r: marker?.states?.hover?.radius ?? HOVER_RADIUS,
+    fill: DEFAULT_SURFACE_COLOR,
+    stroke: ctx.color,
+    strokeWidth: HOVER_RING_WIDTH
+  }) : null;
+}
 export function Markers({
   marker,
   projected,

package/series/shared/hit.js

@@ -1,5 +1,7 @@
+import { hoverReachOf } from './Markers';
 import { pointKey } from '../../core/data/points';
 import { drawable, projectSeries } from '../../core/geometry/path';
+import { showsHoverMarker } from '../../core/options/normalize';
 const HIT_RADIUS = 40;
 export function nearestByX(ctx, pointer, radius = HIT_RADIUS) {
   const projected = drawable(projectSeries(ctx));
@@ -28,6 +30,7 @@ export function nearestByX(ctx, pointer, radius = HIT_RADIUS) {
       x: best.px,
       y: best.py
     },
+    reach: showsHoverMarker(ctx.series.marker) ? hoverReachOf(ctx.series.marker) : 0,
     distance: bestDistance
   }];
 }