@pushwoosh/kit-charts 0.0.21 → 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

@@ -54,7 +54,7 @@ export const Canvas = styled.svg.withConfig({
 export const SeriesLayer = styled.g.withConfig({
   displayName: "SeriesLayer",
   componentId: "sc-1pit1b9-4"
-})(["opacity:", ";pointer-events:", ";cursor:", ";transition:opacity ", "ms ", ";", " @media (prefers-reduced-motion:reduce){transition:none;path,rect,circle,line,text{transition:none;}}"], ({
+})(["opacity:", ";pointer-events:", ";cursor:", ";transition:opacity ", "ms ", ";", " @media (prefers-reduced-motion:reduce){transition:none;path,rect,circle,text{transition:none;}}"], ({
   $hidden,
   $inactive,
   $opacity
@@ -72,7 +72,7 @@ export const SeriesLayer = styled.g.withConfig({
 }) => $motionMs, MOTION_EASING, ({
   $selfAnimated,
   $motionMs
-}) => $selfAnimated ? '' : css(["path,rect,circle,line,text{transition:d ", "ms ", ",x ", "ms ", ",y ", "ms ", ",width ", "ms ", ",height ", "ms ", ",cx ", "ms ", ",cy ", "ms ", ",x1 ", "ms ", ",x2 ", "ms ", ",y1 ", "ms ", ",y2 ", "ms ", ",opacity ", "ms ", ";}"], $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING));
+}) => $selfAnimated ? '' : css(["path,rect,circle,text{transition:d ", "ms ", ",x ", "ms ", ",y ", "ms ", ",width ", "ms ", ",height ", "ms ", ",cx ", "ms ", ",cy ", "ms ", ",opacity ", "ms ", ";}"], $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING));
 export const LegendItemBox = styled.g.withConfig({
   displayName: "LegendItemBox",
   componentId: "sc-1pit1b9-5"
@@ -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.21",
+  "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/column/column.js

@@ -89,15 +89,15 @@ export const column = {
         stroke: borderWidth && !capped ? ctx.series.borderColor : undefined,
         strokeWidth: borderWidth && !capped ? borderWidth : undefined
       }, `c-${bar.point.index}`)), capped ? bars.map(bar => {
-        // The rule sits on the value edge, so a bar counting down wears it below.
+        // The rule sits on the value edge, so a bar counting down wears it below. It is a rect
+        // rather than a line: only `x`/`y`/`width`/`height` are CSS properties an SVG can tween.
         const edge = bar.py <= bar.baseY ? bar.y : bar.y + bar.height;
-        return _jsx("line", {
-          x1: bar.x,
-          x2: bar.x + bar.width,
-          y1: edge,
-          y2: edge,
-          stroke: ctx.series.borderColor ?? ctx.color,
-          strokeWidth: borderWidth
+        return _jsx("rect", {
+          x: bar.x,
+          y: edge - borderWidth / 2,
+          width: bar.width,
+          height: borderWidth,
+          fill: ctx.series.borderColor ?? ctx.color
         }, `cap-${bar.point.index}`);
       }) : null, _jsx(DataLabels, {
         ctx: ctx,

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
   }];
 }