@funnest/charts-react 0.2.0 → 0.2.1

package/dist/index.js

@@ -93,6 +93,7 @@ import {
 
 // src/viz/context.ts
 import { createContext as createContext2, useContext as useContext2 } from "react";
+var nearScrub = (ctx, x, within = 56) => ctx.scrubIndex !== null && Math.abs(ctx.x(ctx.scrubIndex) - x) < within;
 var CartesianContext = createContext2(null);
 function useCartesianChart() {
   const ctx = useContext2(CartesianContext);
@@ -244,6 +245,7 @@ function CartesianChart({
   const [motion, setMotion] = useState2(false);
   const [hidden, setHidden] = useState2([]);
   const [emphasis, setEmphasis] = useState2(null);
+  const [dimFuture, setDimFuture] = useState2(false);
   useEffect2(() => setMotion(animate && !prefersReducedMotion()), [animate]);
   const legendCfg = normalizeLegend(legend);
   const axes = useMemo(() => {
@@ -325,9 +327,11 @@ function CartesianChart({
       xData,
       scrubIndex,
       focused,
-      animate: motion
+      animate: motion,
+      futureMask: dimFuture && !band && scrubIndex !== null && scrubIndex < length ? `url(#${id}-future)` : void 0,
+      setDimFuture
     };
-  }, [id, width, height, inset, axisSpace, all, visible, axes, firstAxis, xAxis, stacked, scrubIndex, focused, motion]);
+  }, [id, width, height, inset, axisSpace, all, visible, axes, firstAxis, xAxis, stacked, scrubIndex, focused, motion, dimFuture]);
   const xsRef = useRef2([]);
   xsRef.current = useMemo(() => Array.from({ length: ctx.length }, (_, i) => ctx.x(i)), [ctx.length, ctx.x]);
   const updateScrub = useCallback(
@@ -415,6 +419,11 @@ function CartesianChart({
         updateScrub(null);
       } : void 0,
       children: [
+        ctx.futureMask && // Fade everything right of the scrubber to 35% (luminance mask: works on any background).
+        /* @__PURE__ */ jsxs2("mask", { id: `${id}-future`, maskUnits: "userSpaceOnUse", x: -width, y: -height, width: width * 3, height: height * 3, children: [
+          /* @__PURE__ */ jsx3("rect", { x: -width, y: -height, width: width + ctx.x(scrubIndex), height: height * 3, fill: "#fff" }),
+          /* @__PURE__ */ jsx3("rect", { x: ctx.x(scrubIndex), y: -height, width: width * 2, height: height * 3, fill: "#fff", fillOpacity: 0.35 })
+        ] }),
         width > 0 && hasData && /* @__PURE__ */ jsx3(CartesianContext.Provider, { value: ctx, children }),
         width > 0 && !hasData && /* @__PURE__ */ jsx3("text", { x: width / 2, y: height / 2, textAnchor: "middle", dominantBaseline: "central", fontSize: 13, style: { fill: VAR.text, fontFamily: VAR.font }, children: typeof emptyState === "string" || emptyState === void 0 ? emptyState ?? "" : null })
       ]
@@ -572,13 +581,13 @@ function Area({ seriesId, curve = "monotone", fill = "gradient", opacity, connec
     ] }, key);
   };
   if (splitColors && baseline !== void 0 && !run0IsStacked(ctx, s)) {
-    return /* @__PURE__ */ jsxs4("g", { children: [
+    return /* @__PURE__ */ jsxs4("g", { mask: ctx.futureMask, children: [
       /* @__PURE__ */ jsx5(SplitClips, { id: gid, y: base, ctx }),
       paint("above", splitColors.above, ctx.plot.top, `${gid}-above`),
       paint("below", splitColors.below, ctx.plot.bottom, `${gid}-below`)
     ] });
   }
-  return /* @__PURE__ */ jsx5("g", { children: paint("fill", s.color, ctx.plot.top) });
+  return /* @__PURE__ */ jsx5("g", { mask: ctx.futureMask, children: paint("fill", s.color, ctx.plot.top) });
 }
 var run0IsStacked = (ctx, s) => !!ctx.stacked?.get(s.id);
 function Line({
@@ -606,7 +615,7 @@ function Line({
   const gid = `${ctx.id}-line-${s.index}`;
   const baseY = baselineY(ctx, s.scale, baseline);
   const strokeOpacity = (opacity ?? 1) * (s.dimmed ? DIM_OPACITY : 1);
-  const strokes = (color, clip) => /* @__PURE__ */ jsx5("g", { clipPath: clip ? `url(#${clip})` : void 0, children: runs.map((run, k) => /* @__PURE__ */ jsx5(
+  const strokes = (color, clip) => /* @__PURE__ */ jsx5("g", { clipPath: clip ? `url(#${clip})` : void 0, mask: ctx.futureMask, children: runs.map((run, k) => /* @__PURE__ */ jsx5(
     "path",
     {
       d: linePath(run.upper, curve),
@@ -640,6 +649,7 @@ function Line({
           p.label && /* @__PURE__ */ jsx5(
             "text",
             {
+              opacity: nearScrub(ctx, x) ? 0 : 1,
               x,
               y: p.labelPosition === "bottom" ? y + r + 13 : y - r - 6,
               textAnchor: "middle",
@@ -887,6 +897,7 @@ function HorizontalBarChart({
 }
 
 // src/viz/scrubber.tsx
+import { useEffect as useEffect4 } from "react";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var TIP_FONT = 12;
 var ROW = 18;
@@ -905,6 +916,12 @@ function Scrubber({
 }) {
   const ctx = useCartesianChart();
   const i = ctx.scrubIndex;
+  const { setDimFuture } = ctx;
+  const fade = dimFuture && !hideOverlay;
+  useEffect4(() => {
+    setDimFuture(fade);
+    return () => setDimFuture(false);
+  }, [fade, setDimFuture]);
   const pick = seriesIds ? ctx.series.filter((s) => seriesIds.includes(s.id)) : ctx.series;
   const colorOf = (s, v) => beaconColor?.(v, s.id) ?? s.color;
   if (i === null || i >= ctx.length) {
@@ -944,7 +961,6 @@ function Scrubber({
   const tipX = tipRight ? x + 12 : x - 12 - tipW;
   const tipY = plot.top + 4;
   return /* @__PURE__ */ jsxs6("g", { pointerEvents: "none", children: [
-    dimFuture && !hideOverlay && !ctx.band && /* @__PURE__ */ jsx8("rect", { x, y: plot.top, width: Math.max(0, plot.right - x + 2), height: plot.height, fillOpacity: 0.55, style: { fill: VAR.bg } }),
     /* @__PURE__ */ jsx8("line", { x1: x, x2: x, y1: plot.top, y2: plot.bottom, strokeWidth: 1, shapeRendering: "crispEdges", style: { stroke: VAR.line } }),
     text && /* @__PURE__ */ jsx8("text", { x: textX, y: Math.max(11, plot.top - 2), textAnchor: "middle", fontSize: 11, fontWeight: 600, strokeWidth: 3, strokeLinejoin: "round", paintOrder: "stroke", style: { stroke: VAR.bg, fill: VAR.textStrong }, children: text }),
     !ctx.band && list.map((s) => {
@@ -1070,7 +1086,7 @@ function Point({ dataX, dataY, seriesId, yAxisId, color, radius = 4, label, labe
       /* @__PURE__ */ jsx9("animate", { attributeName: "fill-opacity", values: "0.35;0", dur: "1.6s", repeatCount: "indefinite" })
     ] }),
     /* @__PURE__ */ jsx9("circle", { cx: x, cy: y, r: radius, strokeWidth: 2, style: { fill, stroke: VAR.bg } }),
-    label !== void 0 && /* @__PURE__ */ jsx9("text", { x: lx, y: ly, textAnchor: anchor, fontSize: 11, fontWeight: 600, strokeWidth: 3, strokeLinejoin: "round", paintOrder: "stroke", style: { stroke: VAR.bg, fill }, children: label })
+    label !== void 0 && /* @__PURE__ */ jsx9("text", { opacity: nearScrub(ctx, x) ? 0 : 1, x: lx, y: ly, textAnchor: anchor, fontSize: 11, fontWeight: 600, strokeWidth: 3, strokeLinejoin: "round", paintOrder: "stroke", style: { stroke: VAR.bg, fill }, children: label })
   ] });
 }
 
@@ -1272,7 +1288,7 @@ function AreaChart({
           seriesId: s.id,
           curve,
           fill: own,
-          ...defined({ baseline, splitColors, gradientStops, opacity: fillOpacity ?? (chart.stacked && own === "solid" ? 0.55 : void 0) })
+          ...defined({ baseline, splitColors, gradientStops, opacity: fillOpacity ?? (chart.stacked && own === "solid" ? 0.3 : void 0) })
         },
         `a${s.id}`
       ) : null;

package/dist/viz/context.d.ts

@@ -65,7 +65,16 @@ export interface CartesianContextValue {
     /** The chart has keyboard focus (scrubbing with arrow keys). */
     focused: boolean;
     animate: boolean;
+    /**
+     * `mask` value for series marks while a Scrubber dims the future (right of the pointer);
+     * undefined otherwise. Lines and areas apply it, so the fade works on any background.
+     */
+    futureMask: string | undefined;
+    /** Scrubber turns future dimming on/off. */
+    setDimFuture(on: boolean): void;
 }
+/** Hide labels the scrubber line would run through. */
+export declare const nearScrub: (ctx: CartesianContextValue, x: number, within?: number) => boolean;
 export declare const CartesianContext: import("react").Context<CartesianContextValue | null>;
 export declare function useCartesianChart(): CartesianContextValue;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts-react",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "React bindings for Funnest Charts: the trading widget plus SVG line, area and bar charts",
   "keywords": [
     "react",
@@ -46,9 +46,9 @@
     "NOTICE"
   ],
   "dependencies": {
-    "@funnest/charts": "0.2.0",
-    "@funnest/charts-ui": "0.2.0",
-    "@funnest/charts-viz": "0.2.0"
+    "@funnest/charts": "0.2.1",
+    "@funnest/charts-viz": "0.2.1",
+    "@funnest/charts-ui": "0.2.1"
   },
   "peerDependencies": {
     "react": ">=18",