/*! * Copyright (c) 2026-present, Okta, Inc. and/or its affiliates. All rights reserved. * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") * * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * * See the License for the specific language governing permissions and limitations under the License. */ import type { ChartTokens } from "../utils/chartTokens.js"; /** * The marker shapes that a chart popover can draw. The names match the Highcharts marker symbols of the same shape. */ export type ChartMarkerSymbol = "circle" | "diamond" | "square" | "triangle" | "triangleDown"; /** * The visual mark that sits before a series label in a chart popover. It carries the color of the series. * - If `'swatch'`, the popover draws the color in a rounded square. A chart whose series fill a shape, such as a bar chart, asks for this. * - If `'lineMarker'`, the popover draws the color as a line with the marker of the series at its center. A line chart asks for this, and it passes the marker symbols of its series in plotted order. */ export type ChartPopoverIndicator = { type: "swatch"; } | { symbols: readonly ChartMarkerSymbol[]; type: "lineMarker"; }; export type ChartPopoverContentProps = { /** * The Highcharts format-string placeholder for the popover header. Highcharts substitutes the value when it renders the popover. For example `"{point.key}"`. */ categoryPlaceholder: string; /** * The chart tokens from `useChartTokens`. The caller passes them as a prop because this component cannot read the token context. See the note on {@link ChartPopoverContent}. */ chartTokens: ChartTokens; /** * If `true`, the series row repeats once for each point in the category under the pointer. The component puts that row inside the Highcharts `{#each points}` block, which repeats it. If `false`, the component * renders the one row that a per-point popover needs. * @default false */ isShared?: boolean; /** * The visual mark that sits before the series label. The chart that owns the popover chooses the mark, and it passes the marker symbols that its own series use. See {@link ChartPopoverIndicator}. * @default { type: "swatch" } */ seriesIndicator?: ChartPopoverIndicator; /** * The Highcharts format-string placeholder for the series label line. For example `"{series.name}"`. */ seriesLabelPlaceholder: string; /** * The Highcharts format-string placeholder for the value that the popover shows. For example `"{point.custom.formattedValue}"`, which holds the value already formatted for the user's locale. The placeholder `"{point.y}"` renders the raw number and ignores the locale format. */ valuePlaceholder: string; }; /** * Renders chart popover contents as JSX that `@highcharts/react` serializes into a Highcharts format string. It is not mounted as a React component. * * Keep this component plain and serializable: * - Pass tokens as props. Do not add hooks, styled wrappers, or memoization. * - Keep `{#each points}` and `{/each}` as separate string expressions around the row. Do not parenthesize `points` or put the row markup in a string; * Highcharts otherwise treats the loop as text or escapes the markup. * - Include units in inline style values. Highcharts drops numeric values instead of adding units to them. * * The component owns the markup and indicator choice so callers do not have to reproduce these serialization rules. Highcharts escapes values substituted into placeholders, so this component does not escape them again. * * @see docs/decisions/2026-08-18-chart-tooltip-plain-serializable-component.md * @see docs/decisions/2026-08-21-shared-chart-tooltip-each-block.md */ export declare const ChartPopoverContent: { ({ categoryPlaceholder, chartTokens, isShared, seriesIndicator, seriesLabelPlaceholder, valuePlaceholder, }: ChartPopoverContentProps): import("@emotion/react/jsx-runtime").JSX.Element; displayName: string; }; //# sourceMappingURL=ChartPopoverContent.d.ts.map