import type React from "react";
/**
 * The height of a chart.
 *
 * The token covers the whole chart: a title and a legend fit inside it rather than adding to it.
 *
 * `"auto"` fills the space the chart's siblings leave.
 */
export type ChartHeight = "small" | "medium" | "large" | "extraLarge" | "auto";
/**
 * How a value is rendered, in the viewer's locale.
 *
 * | format       | `1234567` renders as                                  |
 * | ------------ | ----------------------------------------------------- |
 * | omitted      | `1234567`                                             |
 * | `"number"`   | `1,234,567`                                           |
 * | `"compact"`  | `1.2M`                                                |
 * | `"percent"`  | send the fraction: `0.42` renders as `42%`            |
 * | `"currency"` | `$1,234,567`, reading the sibling `currency`          |
 * | `"date"`     | `1 Jan`, with the year when it is not the current one |
 * | `"datetime"` | date and time                                         |
 *
 * `"date"` reads an ISO string as the calendar date it names, so the viewer's timezone never
 * shifts it a day.
 */
export type ChartFormat = "number" | "compact" | "percent" | "currency" | "date" | "datetime";
/**
 * A colour name. Names rather than hex values, so charts follow the viewer's theme.
 */
export type ChartColor = "blue" | "green" | "yellow" | "orange" | "red" | "purple" | "pink" | "teal" | "grey";
/**
 * The format of a value, with the `currency` that `format: "currency"` requires. Every other
 * format rejects `currency`.
 */
export type ChartFormatting = {
    format?: Exclude<ChartFormat, "currency">;
    currency?: never;
} | {
    format: "currency";
    /**
     * An ISO 4217 code, for example `"USD"`, `"EUR"` or `"BRL"`.
     */
    currency: string;
};
/**
 * An axis of a cartesian chart.
 */
export type ChartAxis = {
    /**
     * A label drawn alongside the axis.
     */
    label?: string;
} & ChartFormatting;
/**
 * The props every chart shares.
 */
export interface ChartBase {
    /**
     * A caption above the chart. Counts against `height`.
     */
    title?: string;
    /**
     * @default "medium"
     */
    height?: ChartHeight;
}
/**
 * One point of a cartesian chart.
 */
export interface ChartDatum {
    /**
     * The category or position. An ISO date string or a number, never a `Date`, because it has to
     * survive as JSON.
     */
    x: string | number;
    y: number;
    /**
     * Which series this point belongs to. Never rendered: name it in `series`.
     */
    seriesId?: string;
}
/**
 * One point of a cartesian chart, with a required `seriesId`.
 */
export interface ChartSeriesDatum {
    x: string | number;
    y: number;
    seriesId: string;
}
/**
 * One series of a chart, and the only place a series' colour is set.
 *
 * Listing a series is optional, and listing an id that no point uses is ignored. The array's order
 * is the order of the legend, the grouping and the stacking. Ids missing from it follow, in order
 * of first appearance in `data`.
 *
 * A single-series chart — one whose points carry no `seriesId` — takes its colour and its tooltip
 * label from the first entry, and ignores that entry's `id`, because there is no `seriesId` for it
 * to match.
 */
export interface ChartSeries {
    /**
     * Matches `seriesId` on a point. Never rendered, and unused on a single-series chart.
     */
    id: string;
    /**
     * The legend text, and a single-series chart's tooltip label.
     */
    label: string;
    /**
     * @default its slot in the report palette
     */
    color?: ChartColor;
}
/**
 * The props both bar chart modes share.
 */
export interface ChartBarShared extends ChartBase {
    xAxis?: ChartAxis;
    yAxis?: ChartAxis;
    /**
     * Names, colours and **orders** the series ids used in `data`. A single-series chart lists one
     * entry, for its colour.
     */
    series?: Array<ChartSeries>;
}
/**
 * Bars side by side.
 */
export interface ChartBarGroupedProps extends ChartBarShared {
    /**
     * @default "grouped"
     */
    mode?: "grouped";
    data: Array<ChartDatum>;
}
/**
 * Bars stacked on each other, one segment per series.
 */
export interface ChartBarStackedProps extends ChartBarShared {
    mode: "stacked";
    /**
     * `seriesId` is required: there is nothing to stack without it.
     */
    data: Array<ChartSeriesDatum>;
}
/**
 * Bars, either side by side or stacked.
 */
export type ChartBarProps = ChartBarGroupedProps | ChartBarStackedProps;
/**
 * A line over a category axis.
 *
 * No `mode`, because area charts do not exist. Like a bar chart, a multi-series line chart always
 * draws a legend and a single-series one draws none.
 */
export interface ChartLineProps extends ChartBase {
    data: Array<ChartDatum>;
    xAxis?: ChartAxis;
    yAxis?: ChartAxis;
    /**
     * Names, colours and **orders** the series ids used in `data`. A single-series chart lists one
     * entry, for its colour.
     */
    series?: Array<ChartSeries>;
}
/**
 * One slice of a pie chart.
 *
 * A pie has no axes, so a slice has no `x`, `y` or `seriesId`: it is a labelled part, the same shape
 * a funnel step takes.
 */
export interface ChartPieSlice {
    /**
     * The slice's legend text, and the only thing that identifies it.
     */
    label: string;
    value: number;
    /**
     * @default its slot in the report palette
     */
    color?: ChartColor;
}
/**
 * A pie. `format` and `currency` render the slice values, in the legend and in the tooltip.
 *
 * The legend is always drawn, and slices are ordered largest first regardless of the order they are
 * sent in. Both are what Attio's pie chart does; neither is configurable.
 */
export type ChartPieProps = ChartBase & ChartFormatting & {
    data: Array<ChartPieSlice>;
};
/**
 * One step of a funnel.
 *
 * A funnel has no axes, so a step has no `x`, `y` or `seriesId`: it is a labelled stage, the same
 * shape a pie slice takes.
 */
export interface ChartFunnelStep {
    /**
     * The step's text, drawn above its stage.
     */
    label: string;
    value: number;
    /**
     * @default "blue"
     */
    color?: ChartColor;
}
/**
 * A funnel. `format` and `currency` render the step values, in the tooltip.
 *
 * Steps draw in the order they are sent, and each one's conversion is measured against the step
 * before it. The first step is the whole.
 */
export type ChartFunnelProps = ChartBase & ChartFormatting & {
    /**
     * Two or more steps, in the order they are passed through. A funnel keeps a minimum width
     * per step and draws wider than its container rather than squeeze, so keep the steps in the
     * handful.
     */
    data: Array<ChartFunnelStep>;
};
/**
 * A single number, rendered large.
 *
 * A metric takes no `height`: it is as tall as the number, the title and the label it draws.
 */
export type ChartMetricProps = ChartFormatting & {
    /**
     * A caption above the number.
     */
    title?: string;
    /**
     * The number, run through `format`.
     */
    value: number;
    /**
     * A caption under the number.
     */
    label?: string;
    /**
     * @default "blue"
     */
    color?: ChartColor;
};
/**
 * A placeholder drawn while a chart's data is loading.
 */
export interface ChartLoadingProps {
    /**
     * Give this the same value as the chart it stands in for, and the dialog will not reflow when
     * the data lands.
     *
     * @default "medium"
     */
    height?: ChartHeight;
}
/**
 * A set of components for drawing charts.
 *
 * `Chart` is a namespace and is not itself renderable: use one of its components.
 */
export interface ChartType {
    /**
     * Bars over a category axis. Points with no `seriesId` draw as one series; points that carry
     * one draw grouped side by side, or stacked with `mode="stacked"`.
     *
     * A multi-series chart always draws a legend, since its colours are the only thing naming the
     * series. A single-series chart has nothing to label, and so draws none.
     *
     * @example
     *
     * import { Chart } from "attio/client"
     *
     * export function MyDialog() {
     *     return (
     *         <Chart.Bar
     *             title="Revenue by month"
     *             data={[
     *                 { x: "Jan", y: 12000, seriesId: "us" },
     *                 { x: "Jan", y: 8000, seriesId: "eu" },
     *                 { x: "Feb", y: 15000, seriesId: "us" },
     *                 { x: "Feb", y: 9000, seriesId: "eu" },
     *             ]}
     *             series={[
     *                 { id: "us", label: "United States", color: "blue" },
     *                 { id: "eu", label: "Europe", color: "green" },
     *             ]}
     *             yAxis={{ label: "Revenue", format: "currency", currency: "USD" }}
     *         />
     *     )
     * }
     */
    Bar: (props: ChartBarProps) => React.JSX.Element;
    /**
     * A line over a category axis. Attio picks the chart from the data: points with no `seriesId`
     * draw as one line, and points that carry one draw as a line each, with a legend.
     *
     * @example
     *
     * import { Chart } from "attio/client"
     *
     * export function MyDialog() {
     *     return (
     *         <Chart.Line
     *             title="Revenue by month"
     *             data={[
     *                 { x: "2026-01-01", y: 12000 },
     *                 { x: "2026-02-01", y: 15000 },
     *                 { x: "2026-03-01", y: 21000 },
     *             ]}
     *             xAxis={{ label: "Month", format: "date" }}
     *             yAxis={{ label: "Revenue", format: "currency", currency: "USD" }}
     *             series={[{ id: "revenue", label: "Revenue", color: "green" }]}
     *         />
     *     )
     * }
     */
    Line: (props: ChartLineProps) => React.JSX.Element;
    /**
     * Labelled slices of a whole. A pie has no axes, so it takes a `label` and a `value` per slice
     * rather than points, and each slice carries its own colour.
     *
     * The legend is always drawn, and slices are ordered largest first.
     *
     * @example
     *
     * import { Chart } from "attio/client"
     *
     * export function MyDialog() {
     *     return (
     *         <Chart.Pie
     *             title="Deals by stage"
     *             data={[
     *                 { label: "Won", value: 12, color: "green" },
     *                 { label: "Lost", value: 3, color: "red" },
     *                 { label: "In progress", value: 7 },
     *             ]}
     *             format="number"
     *         />
     *     )
     * }
     */
    Pie: (props: ChartPieProps) => React.JSX.Element;
    /**
     * A single number, rendered large. A metric has no axes and no data array: its `value` and
     * `label` sit directly on the component, and it is sized by its contents rather than a
     * `height` token.
     *
     * @example
     *
     * import { Chart } from "attio/client"
     *
     * export function MyDialog() {
     *     return <Chart.Metric title="Pipeline" value={42} label="Open deals" format="number" />
     * }
     */
    Metric: (props: ChartMetricProps) => React.JSX.Element;
    /**
     * Labelled steps narrowing from the first. A funnel has no axes, so it takes a `label` and a
     * `value` per step rather than points, and each step carries its own colour.
     *
     * Steps draw in the order they are sent, and each step's conversion is measured against the one
     * before it, so the first step is the whole.
     *
     * @example
     *
     * import { Chart } from "attio/client"
     *
     * export function MyDialog() {
     *     return (
     *         <Chart.Funnel
     *             title="Pipeline"
     *             data={[
     *                 { label: "Leads", value: 400 },
     *                 { label: "Qualified", value: 220, color: "yellow" },
     *                 { label: "Proposal", value: 90, color: "red" },
     *                 { label: "Won", value: 40, color: "green" },
     *             ]}
     *             format="number"
     *         />
     *     )
     * }
     */
    Funnel: (props: ChartFunnelProps) => React.JSX.Element;
    /**
     * A placeholder drawn while a chart's data is loading.
     *
     * @example
     *
     * import { Chart } from "attio/client"
     *
     * export function MyDialog() {
     *     const { data, isPending } = useQuery({ queryKey: ["revenue"], queryFn: loadRevenue })
     *
     *     if (isPending) {
     *         return <Chart.Loading height="large" />
     *     }
     *
     *     return <Chart.Line height="large" data={data.points} yAxis={{ format: "currency", currency: "USD" }} />
     * }
     */
    Loading: (props: ChartLoadingProps) => React.JSX.Element;
}
/** Charts for visualising data. See the members of {@link ChartType} for usage. */
export declare const Chart: ChartType;
//# sourceMappingURL=chart.d.ts.map