Profit/Loss Line

1"use client";
2 
3import { curveLinear } from "@visx/curve";
4import { LinePath } from "@visx/shape";
5import { useCallback, useId, useMemo } from "react";
6import { useChart, useChartStable } from "./chart-context";
7import {
8  type FadeEdges,
9  fadeGradientStops,
10  resolveFadeSides,
11} from "./fade-edges";
12import { useProfitLossLegendHover } from "./profit-loss-legend-hover";
13import { splitProfitLossSegments } from "./profit-loss-segments";
14 
15// CurveFactory type - simplified version compatible with visx
16// biome-ignore lint/suspicious/noExplicitAny: d3 curve factory type
17type CurveFactory = any;
18 
19export const PROFIT_LOSS_POSITIVE_COLOR = "var(--color-emerald-500)";
20export const PROFIT_LOSS_NEGATIVE_COLOR = "var(--color-red-500)";
21 
22const LEGEND_DIM_OPACITY = 0.25;
23 
24export function profitLossColor(value: number) {
25  return value >= 0 ? PROFIT_LOSS_POSITIVE_COLOR : PROFIT_LOSS_NEGATIVE_COLOR;
26}
27 
28export const PROFIT_LOSS_TOOLTIP_LABEL_FALLBACK = "Profit/Loss";
29 
30export function resolveProfitLossTooltipLabel(label: string) {
31  const trimmed = label.trim();
32  return trimmed || PROFIT_LOSS_TOOLTIP_LABEL_FALLBACK;
33}
34 
35export interface ProfitLossLineProps {
36  dataKey: string;
37  xDataKey?: string;
38  strokeWidth?: number;
39  positiveColor?: string;
40  negativeColor?: string;
41  /** Curve function. Default: curveLinear */
42  curve?: CurveFactory;
43  /**
44   * Fade the line stroke toward transparent at the chart edges.
45   * Default: false
46   */
47  fadeEdges?: FadeEdges;
48}
49 
50function segmentLegendIndex(isPositive: boolean) {
51  return isPositive ? 0 : 1;
52}
53 
54export function ProfitLossLine({
55  dataKey,
56  xDataKey = "date",
57  strokeWidth = 2.5,
58  positiveColor = PROFIT_LOSS_POSITIVE_COLOR,
59  negativeColor = PROFIT_LOSS_NEGATIVE_COLOR,
60  curve = curveLinear,
61  fadeEdges = false,
62}: ProfitLossLineProps) {
63  const { tooltipData } = useChart();
64  const { hoveredIndex } = useProfitLossLegendHover();
65  const { renderData, xScale, yScale, xAccessor, innerWidth } =
66    useChartStable();
67  const reactId = useId();
68  const fadeSides = resolveFadeSides(fadeEdges);
69  const fadeStops = fadeSides.any ? fadeGradientStops(fadeSides) : null;
70  const positiveGradientId = `profit-loss-gradient-pos-${dataKey}-${reactId}`;
71  const negativeGradientId = `profit-loss-gradient-neg-${dataKey}-${reactId}`;
72 
73  const focusedLegendIndex = useMemo(() => {
74    if (hoveredIndex !== null) {
75      return hoveredIndex;
76    }
77    if (!tooltipData) {
78      return null;
79    }
80    const value = tooltipData.point[dataKey];
81// … truncated