50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T13a3,import { indicatorBackground, type ResolvedColors } from "@/registry/ui/echarts-chart"; import type { TooltipComponentOption } from "echarts/components"; // ───────────────────────────────────────────────────────────────────────────── // Tooltip — the shared HTML shell/row primitives and the chart-agnostic option // fields. The tooltip DOM lives inside `[data-chart={id}]`, so the injected // `--color-*` vars and Tailwind classes resolve directly (no color read). Each // chart composes its own rows but shares the shell/styling and base option. // ───────────────────────────────────────────────────────────────────────────── export type TooltipVariant = "default" | "frosted-glass"; export type TooltipRoundness = "sm" | "md" | "lg" | "xl"; // Tooltip anchoring: "variable" follows both axes (ECharts default, current // behavior); "fixed" tracks the pointer's X (centered) but stays pinned near // the top (fixed Y). export type TooltipPosition = "fixed" | "variable"; export const roundnessClass: Record = { sm: "rounded-sm", md: "rounded-md", lg: "rounded-lg", xl: "rounded-xl", }; export const tooltipVariantClass: Record = { default: "bg-background", "frosted-glass": "bg-background/50 backdrop-blur-md", }; // The standard series indicator swatch — a rounded square filled with the // series' solid var or multi-stop gradient (indicatorBackground). A chart drops // this into a tooltipRow's `indicatorHtml`. export function tooltipIndicatorHtml(key: string, colorsCount: number): string { return `

`; } // One tooltip row: indicator swatch + label/value pair. `dimmed` is a class // fragment (e.g. " opacity-30") appended to the row so the selection/hover dim // stays byte-identical to the inlined markup. export function tooltipRow({ indicatorHtml, labelText, valueText, dimmed, }: { indicatorHtml: string; labelText: string; valueText: string; dimmed: string; }): string { return `

${indicatorHtml}

${labelText} ${valueText}

`; } // The outer tooltip surface — border, padding, shadow, roundness + variant // classes — wrapping the axis label and the composed rows. export function tooltipShell({ label, body, roundness, variant, }: { label: string; body: string; roundness: TooltipRoundness; variant: TooltipVariant; }): string { return `

${label}

${body}

`; } // Maps the TooltipPosition prop onto the ECharts tooltip `position` field. // "variable" → undefined (default follow-both-axes, current behavior); "fixed" → // a callback that centers the tooltip on the pointer's X but pins it near the // top (fixed Y). export function resolveTooltipPosition( position: TooltipPosition, ): TooltipComponentOption["position"] { if (position === "variable") return undefined; return (point, _params, _dom, _rect, size) => [point[0] - size.contentSize[0] / 2, 8]; } // The chart-agnostic tooltip option fields (show, trigger, confine, // background/border/padding/extraCssText, axisPointer, position). The chart // supplies only `formatter` and spreads this in. `axisPointerColor` is the // pre-resolved cursor-line color, so this helper needs no live token read. export function tooltipBaseOption(params: { present: boolean; cursor: boolean; tokens: ResolvedColors["tokens"]; position: TooltipPosition; axisPointerColor: string; strokeWidth: number; }): TooltipComponentOption { const { present, cursor, position, axisPointerColor, strokeWidth } = params; return { show: present, trigger: "axis", confine: true, displayTransition: false, backgroundColor: "transparent", borderWidth: 0, padding: 0, extraCssText: "box-shadow:none;", axisPointer: cursor ? { type: "line", lineStyle: { color: axisPointerColor, width: strokeWidth, type: [3, 3] as [number, number], }, } : { type: "none" }, position: resolveTooltipPosition(position), }; } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","echarts",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/echarts","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"echarts"}]]}]}]]}],["$","$L50",null,{"namespace":"@evilcharts","registryDependencies":["@evilcharts/echarts-chart"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/ui/echarts-tooltip.tsx","content":"$52","type":"registry:component","target":"components/evilcharts/ui/echarts-tooltip.tsx"}],"className":"h-[70svh] min-h-80"}]]}]