@arcfusionz/arc-analytic-ui 0.0.0

package/dist/components/TrendCard/TrendCard.chart.js

@@ -0,0 +1,393 @@
+import { AXIS_LABEL_LIMIT_EXPR } from "../../lib/vega/axisTicks.js";
+import { arcVegaConfig } from "../../lib/vega/config.js";
+//#region src/components/TrendCard/TrendCard.chart.ts
+/** Long-form readings: `{ x, s, y, raw, i, c, n }` per `TrendRow`, for the visible series only. */
+const TREND_TABLE_DATASET = "table";
+/** One row per period, `{ x }` — the crosshair, filtered by the hover selection. */
+const TREND_PERIODS_DATASET = "periods";
+/** Zero or one row `{ value }` — the target reference rule. */
+const TREND_REFERENCE_DATASET = "reference";
+/** Resolved bands `{ start, end, label? }` — the washed period annotations. */
+const TREND_BANDS_DATASET = "bands";
+/** One row per visible series — its last finite reading, for the endpoint labels. */
+const TREND_LATEST_DATASET = "latest";
+/** The shared-x hover selection: projected onto `x`, so every series lights up at the pointed period. */
+const TREND_HOVER_PARAM = "hover";
+/** Responsive x tick values, recomputed by Vega when the domain or the width changes. */
+const TREND_X_TICKS_PARAM = "trend_x_ticks";
+const POINT_SIZE = 64;
+const BAR_WIDTH_EXPR = "min(24, bandwidth('x') * 0.8)";
+const PLOT_PADDING = 6;
+const LABEL_LIMIT_PX = 64;
+const LABEL_DODGE_PX = 14;
+const LABEL_DODGE_ROOM_PX = 20;
+const LABEL_INSET_PX = 4;
+const BAND_OPACITY = .5;
+const CONTEXT_OPACITY = .85;
+const DISCRETE_DOMAIN_EXPR = `pluck(data('${TREND_PERIODS_DATASET}'), 'x')`;
+/**
+* Builds the plot: one mark per series on a SHARED y scale (never a second
+* axis — series in different units are indexed to a common base instead, which
+* the card does before it gets here), quiet labelled axes, an optional dotted
+* target rule, washed period bands behind everything, and the documented
+* multi-series hover: a transparent `point` layer carrying a `nearest`
+* selection projected onto `x`, a crosshair rule filtered by that selection,
+* and dots on every series at the pointed period.
+*
+* Gaps stay gaps — a `null` reading breaks the path rather than dropping it to
+* zero. Lines may crop (`scale: "auto"`); areas and bars keep a zero baseline
+* whatever `scale` says, because proportional ink is not negotiable.
+*/
+function buildTrendPlotSpec(options, tokens) {
+	const { mark, scale, xType, stack, height, axes, yTicks, reference, bands, tooltip, labelSeries, emphasize, xTitle, yTitle, plotFormat, timeFormat, axisTimeFormat } = options;
+	const zero = mark !== "line" || scale === "zero";
+	const discreteX = mark === "bar" || xType === "ordinal";
+	const stackMode = mark === "line" ? null : stack === false ? null : stack;
+	const grouped = mark === "bar" && stackMode === null;
+	const xTickFormat = xType === "temporal" ? axisTimeFormat : "compact";
+	const xTickKind = xType === "temporal" ? "time" : xType === "quantitative" ? "number" : "text";
+	const axisArgs = `domain('x'), width, ${discreteX}, ${JSON.stringify(xTickFormat)}, ${JSON.stringify(xTickKind)}`;
+	const xAxisLabels = xType === "temporal" ? {
+		format: axisTimeFormat,
+		formatType: "arcTime"
+	} : xType === "quantitative" ? {
+		format: "compact",
+		formatType: "arcNumber"
+	} : {};
+	const xAxis = axes ? {
+		title: null,
+		orient: "bottom",
+		domain: true,
+		ticks: false,
+		grid: false,
+		values: { expr: TREND_X_TICKS_PARAM },
+		labelAngle: 0,
+		labelAlign: { expr: `arcAxisLabelAlign(datum.value, ${axisArgs})` },
+		labelFlush: false,
+		labelOverlap: false,
+		labelLimit: { expr: AXIS_LABEL_LIMIT_EXPR },
+		labelPadding: 4,
+		...xAxisLabels
+	} : null;
+	const yAxis = axes ? {
+		title: null,
+		orient: "left",
+		domain: false,
+		ticks: false,
+		grid: true,
+		tickCount: yTicks,
+		labelOverlap: true,
+		labelPadding: 6,
+		format: plotFormat,
+		formatType: "arcNumber"
+	} : null;
+	const xField = discreteX ? {
+		field: "x",
+		type: "ordinal",
+		sort: null,
+		axis: xAxis,
+		...discreteX ? { scale: {
+			domain: { expr: DISCRETE_DOMAIN_EXPR },
+			paddingOuter: .05
+		} } : {}
+	} : {
+		field: "x",
+		type: xType,
+		axis: xAxis,
+		scale: {
+			nice: false,
+			...xType === "quantitative" ? { zero: false } : {}
+		}
+	};
+	const yField = {
+		field: "y",
+		type: "quantitative",
+		axis: yAxis,
+		scale: {
+			zero,
+			nice: axes
+		},
+		...stackMode === null ? { stack: null } : { stack: stackMode }
+	};
+	const seriesDetail = {
+		field: "s",
+		type: "nominal"
+	};
+	const colorField = {
+		field: "c",
+		type: "nominal",
+		scale: null,
+		legend: null
+	};
+	const emphasisOpacity = emphasize ? { opacity: {
+		condition: {
+			test: "datum.f",
+			value: 1
+		},
+		value: CONTEXT_OPACITY
+	} } : {};
+	const tooltipChannel = [
+		xType === "temporal" ? {
+			field: "x",
+			type: "temporal",
+			title: xTitle,
+			format: timeFormat,
+			formatType: "arcTime"
+		} : xType === "quantitative" ? {
+			field: "x",
+			type: "quantitative",
+			title: xTitle,
+			format: "number",
+			formatType: "arcNumber"
+		} : {
+			field: "x",
+			type: "nominal",
+			title: xTitle
+		},
+		{
+			field: "n",
+			type: "nominal",
+			title: yTitle
+		},
+		{
+			field: "y",
+			type: "quantitative",
+			title: yTitle,
+			format: plotFormat,
+			formatType: "arcNumber"
+		}
+	];
+	const layers = [];
+	if (bands) layers.push({
+		data: { name: TREND_BANDS_DATASET },
+		mark: {
+			type: "rect",
+			fill: tokens.brush,
+			opacity: BAND_OPACITY,
+			aria: false
+		},
+		encoding: {
+			x: {
+				...xField,
+				field: "start",
+				axis: xAxis,
+				...discreteX ? { bandPosition: 0 } : {}
+			},
+			x2: {
+				field: "end",
+				...discreteX ? { bandPosition: 1 } : {}
+			}
+		}
+	});
+	if (mark === "area") {
+		layers.push({
+			mark: {
+				type: "area",
+				line: false,
+				fillOpacity: stackMode === null ? .12 : .85,
+				interpolate: "linear",
+				invalid: "break-paths-show-domains"
+			},
+			encoding: {
+				x: xField,
+				y: yField,
+				detail: seriesDetail,
+				fill: colorField,
+				...emphasisOpacity
+			}
+		});
+		layers.push({
+			mark: {
+				type: "line",
+				strokeWidth: stackMode === null ? 2 : 1,
+				strokeCap: "round",
+				strokeJoin: "round",
+				interpolate: "linear",
+				invalid: "break-paths-show-domains",
+				...stackMode === null ? {} : { stroke: tokens.background }
+			},
+			encoding: {
+				x: xField,
+				y: yField,
+				detail: seriesDetail,
+				...stackMode === null ? { stroke: colorField } : {},
+				...emphasisOpacity
+			}
+		});
+	} else if (mark === "bar") layers.push({
+		mark: {
+			type: "bar",
+			cornerRadiusEnd: 2,
+			...grouped ? {} : { width: { expr: BAR_WIDTH_EXPR } },
+			...stackMode === null ? {} : {
+				stroke: tokens.background,
+				strokeWidth: 1
+			}
+		},
+		encoding: {
+			x: xField,
+			y: yField,
+			...grouped ? { xOffset: {
+				field: "i",
+				type: "ordinal",
+				sort: null
+			} } : { detail: seriesDetail },
+			fill: colorField,
+			...emphasisOpacity
+		}
+	});
+	else layers.push({
+		mark: {
+			type: "line",
+			strokeWidth: 2,
+			strokeCap: "round",
+			strokeJoin: "round",
+			interpolate: "linear",
+			invalid: "break-paths-show-domains"
+		},
+		encoding: {
+			x: xField,
+			y: yField,
+			detail: seriesDetail,
+			stroke: colorField,
+			...emphasisOpacity
+		}
+	});
+	if (reference) layers.push({
+		data: { name: TREND_REFERENCE_DATASET },
+		mark: {
+			type: "rule",
+			stroke: tokens.reference,
+			strokeWidth: 1.5,
+			strokeDash: [0, 4],
+			strokeCap: "round",
+			opacity: .9,
+			aria: false
+		},
+		encoding: {
+			y: {
+				...yField,
+				field: "value",
+				stack: null
+			},
+			...tooltip ? { tooltip: [{
+				field: "value",
+				type: "quantitative",
+				title: options.targetTitle ?? "Target",
+				format: plotFormat,
+				formatType: "arcNumber"
+			}] } : {}
+		}
+	});
+	if (tooltip) {
+		layers.push({
+			params: [{
+				name: TREND_HOVER_PARAM,
+				select: {
+					type: "point",
+					on: "pointermove",
+					nearest: true,
+					clear: "pointerout",
+					encodings: ["x"]
+				}
+			}],
+			mark: {
+				type: "point",
+				filled: true,
+				size: POINT_SIZE,
+				stroke: tokens.background,
+				strokeWidth: 1.5,
+				aria: false
+			},
+			encoding: {
+				x: xField,
+				y: {
+					...yField,
+					stack: stackMode === null ? null : stackMode
+				},
+				detail: seriesDetail,
+				fill: colorField,
+				opacity: {
+					condition: {
+						param: TREND_HOVER_PARAM,
+						empty: false,
+						value: 1
+					},
+					value: 0
+				},
+				tooltip: tooltipChannel
+			}
+		});
+		layers.push({
+			data: { name: TREND_PERIODS_DATASET },
+			mark: {
+				type: "rule",
+				stroke: tokens.axis,
+				strokeWidth: 1,
+				aria: false
+			},
+			encoding: {
+				x: xField,
+				opacity: {
+					condition: {
+						param: TREND_HOVER_PARAM,
+						empty: false,
+						value: .6
+					},
+					value: 0
+				}
+			}
+		});
+	}
+	if (labelSeries) layers.push({
+		data: { name: TREND_LATEST_DATASET },
+		mark: {
+			type: "text",
+			align: "right",
+			baseline: "middle",
+			dx: LABEL_INSET_PX,
+			dy: { expr: `scale('y', datum.y) < height / 2 ? (scale('y', datum.y) >= ${LABEL_DODGE_ROOM_PX} ? -${LABEL_DODGE_PX} : ${LABEL_DODGE_PX}) : (height - scale('y', datum.y) >= ${LABEL_DODGE_ROOM_PX} ? ${LABEL_DODGE_PX} : -${LABEL_DODGE_PX})` },
+			fontSize: 11,
+			fontWeight: 500,
+			limit: { expr: `max(${LABEL_LIMIT_PX}, width / 3)` },
+			aria: false
+		},
+		encoding: {
+			x: xField,
+			y: {
+				...yField,
+				stack: null
+			},
+			text: {
+				field: "n",
+				type: "nominal"
+			},
+			color: colorField
+		}
+	});
+	const params = [];
+	if (axes) params.push({
+		name: TREND_X_TICKS_PARAM,
+		expr: `arcAxisTicks(${axisArgs})`
+	});
+	return {
+		$schema: "https://vega.github.io/schema/vega-lite/v6.json",
+		width: 320,
+		height,
+		autosize: {
+			type: "fit",
+			contains: "padding"
+		},
+		padding: PLOT_PADDING,
+		background: "transparent",
+		data: { name: TREND_TABLE_DATASET },
+		...params.length > 0 ? { params } : {},
+		layer: layers,
+		config: arcVegaConfig(tokens, {
+			locale: options.locale,
+			timeZone: options.timeZone
+		})
+	};
+}
+//#endregion
+export { TREND_BANDS_DATASET, TREND_HOVER_PARAM, TREND_LATEST_DATASET, TREND_PERIODS_DATASET, TREND_REFERENCE_DATASET, TREND_TABLE_DATASET, TREND_X_TICKS_PARAM, buildTrendPlotSpec };

package/dist/components/TrendCard/TrendCard.d.ts

@@ -0,0 +1,224 @@
+import { ArcTimeGranularity } from "../../lib/vega/formatters.js";
+import { TrendBand, TrendCardLabels, TrendCardSize, TrendCardStatus, TrendDeltaMode, TrendGoodDirection, TrendHeadline, TrendMark, TrendNormalize, TrendScale, TrendSeries, TrendSeriesColor, TrendStack } from "./TrendCard.model.js";
+import { ReactNode } from "react";
+import { BoxProps } from "@arcfusionz/arc-primitive-ui";
+import { TopLevelSpec } from "vega-lite";
+import { Result } from "vega-embed";
+//#region src/components/TrendCard/TrendCard.d.ts
+/** What the legend chips do. `auto` follows the colour job — see `legendMode`. */
+type TrendLegendMode = "auto" | "focus" | "visibility";
+interface TrendCardProps extends Omit<BoxProps, "children" | "padding" | "title"> {
+  /** The trend's name — the panel's heading. Pass `name` too when this is not plain text. */
+  label: ReactNode;
+  /** Plain-text name used in the generated descriptions and control labels. Defaults to `label` when it is a string. */
+  name?: string;
+  /** Definition of the metric, shown in a tooltip behind an info control beside the label and exposed to assistive technology as the control's description. */
+  hint?: string;
+  /**
+   * The series to plot: `{ key?, label, points }` in the order that decides
+   * identity (a colour slot follows a series' index, never its rank, so a
+   * filter cannot repaint the survivors). `points` is `{ x, y }` — `x` a
+   * `Date`, ISO string, number or period label; `y` the value or `null` for a
+   * gap. A series need not cover every period: the periods it never mentions
+   * simply have no marks. Pass `[]` while loading to reserve the plot's height.
+   */
+  series: readonly TrendSeries[];
+  /**
+   * Key of the subject series, controlled — pair with `onFocusChange`. It
+   * carries the headline, the change badge, the generated insight and, while
+   * colour is doing emphasis, the one hue on a context-gray field. Omit for
+   * the uncontrolled card (`defaultFocus`, else the first series).
+   */
+  focus?: string;
+  /** The subject on first render when `focus` is uncontrolled. Default: the first series. */
+  defaultFocus?: string;
+  /** Called with the chosen series' key when the reader picks another subject from the legend (legend mode `focus`). */
+  onFocusChange?: (key: string) => void;
+  /**
+   * Keys of the series currently shown, controlled — pair with
+   * `onVisibleSeriesChange`. Omit for the uncontrolled card
+   * (`defaultVisibleSeries`, else every series). The card never hides the last
+   * one: a plot with nothing in it is not a state.
+   */
+  visibleSeries?: readonly string[];
+  /** The series shown on first render when `visibleSeries` is uncontrolled. Default: all of them. */
+  defaultVisibleSeries?: readonly string[];
+  /** Called with the remaining keys when the reader shows or hides a series from the legend (legend mode `visibility`). */
+  onVisibleSeriesChange?: (keys: string[]) => void;
+  /**
+   * Draw the legend — one chip per series, with a swatch in the plot's own mark
+   * shape and the series' latest reading. Default `true` for two or more
+   * series and `false` for one (a single series needs no key). The tooltip,
+   * table and description name every series regardless.
+   */
+  legend?: boolean;
+  /**
+   * What the legend chips do. `auto` (default) follows the colour job, one job
+   * per control: while colour marks ONE series out (`emphasis`) the chips are a
+   * radio group choosing the subject — the only meaningful interaction on a
+   * field of gray lines; while colour carries identity (`categorical` /
+   * `sequential`) they are toggles choosing which series are shown. `focus`
+   * and `visibility` force one. Stamped as `data-legend`.
+   */
+  legendMode?: TrendLegendMode;
+  /** `line` (default, may crop), `area` (zero baseline) or `bar` (zero baseline, discrete periods). */
+  mark?: TrendMark;
+  /** Y-scale baseline for a `line` plot: `auto` (default) fits the data range and reads for shape; `zero` includes zero. Areas and bars always include zero. */
+  scale?: TrendScale;
+  /**
+   * How several `area` or `bar` series sit together: `false` (default) overlays
+   * them against the same axis, `"zero"` stacks them into a total, and
+   * `"normalize"` stacks them to 100% — the composition-over-time reading, with
+   * a caption saying so. Ignored for `line`, which never stacks. Stamped as
+   * `data-stack`.
+   */
+  stack?: TrendStack;
+  /**
+   * `none` (default) plots the readings. `index` divides every series by its
+   * own first finite reading × 100, which is how series in DIFFERENT UNITS
+   * compare on one axis — this package draws no second y axis. The raw reading
+   * stays in the tooltip and the table, and a caption names the base period,
+   * so the transform is never silent. Stamped as `data-normalize`.
+   */
+  normalize?: TrendNormalize;
+  /** Number format for an indexed axis and its tooltip. Default `number:0` (index points). */
+  indexFormat?: string;
+  /**
+   * How colour is used. `auto` (default) picks by count against the theme's own
+   * identity budget: one series takes the emphasis hue, a handful take the
+   * `chart-1…N` slots, and past the budget the subject takes the hue on a
+   * context-gray field. `categorical` forces identity slots and degrades to
+   * `emphasis` when there are more series than slots — repeating a hue would
+   * make two series look like one. `sequential` is for ORDERED series
+   * (cohorts, years, buckets), low → high through the ramp. The resolved job
+   * is stamped as `data-series-color`.
+   */
+  seriesColor?: TrendSeriesColor;
+  /**
+   * Fold every series past this count (in the consumer's order) into one
+   * `Other` series whose readings are the sum of the folded ones — honest only
+   * for additive measures, which passing this asserts. The subject is never
+   * folded. Stamped as `data-folded`.
+   */
+  maxSeries?: number;
+  /**
+   * Named stretches of the axis worth annotating — a launch, an outage, a
+   * promotion — as `{ start, end, label? }` in the series' own `x` type. Drawn
+   * as a quiet wash in the brush role (never a series hue, so a band cannot be
+   * read as data), named in the legend, marked on the table's rows and added to
+   * the tooltip. Each bound snaps inward to a period the data actually has.
+   */
+  bands?: readonly TrendBand[];
+  /** A goal for the plotted measure. Draws a dotted reference rule that joins the y domain. */
+  target?: number | null;
+  /**
+   * The big number: `latest` (default) is the subject's latest reading with the
+   * change across the span in a polarity badge; `change` makes the change
+   * itself the headline, coloured by polarity, with the two readings beneath;
+   * `none` leaves the plot to carry the panel. Stamped as `data-headline`.
+   */
+  headline?: TrendHeadline;
+  /** `percent` (default) is relative change; `absolute` is the difference in the value's units — percentage points for a `percent` format. */
+  deltaMode?: TrendDeltaMode;
+  /**
+   * Which direction is good. Drives the change badge's polarity: `up`
+   * (revenue), `down` (churn, latency, cost) or `none` (headcount — the change
+   * stays neutral). Default `up`.
+   */
+  goodDirection?: TrendGoodDirection;
+  /**
+   * Number format for the headline, the axis, the legend, the table and the
+   * tooltip — one grammar so nothing rounds two ways: `number[:digits]`,
+   * `integer`, `compact[:digits]`, `percent[:digits]`,
+   * `currency:CODE[:digits|compact]`. Default `compact`.
+   */
+  format?: string;
+  /** Custom formatter for values. Takes precedence over `format` everywhere a reading is rendered. */
+  formatValue?: (value: number) => string;
+  /** Unit shown after the headline in the muted role (`ms`, `req/s`). Prefer `format="currency:…"` for money. */
+  unit?: ReactNode;
+  /**
+   * How many series the transport is about to return, so a FIRST load reserves
+   * the legend row it cannot yet count (`series` is still `[]`, so the card has
+   * no other way to know) and the skeleton shows that many chips. Without it a
+   * first load reserves no legend and the panel grows by a row when the data
+   * lands. Ignored once `series` has anything in it. ComparisonCard's
+   * `expectedItems`, for the same reason.
+   */
+  expectedSeries?: number;
+  /** Plot height in pixels, axes included. Defaults per `size` (120 / 160 / 200), plus 24 when `axes` draws the x labels. */
+  plotHeight?: number;
+  /** Draw both axes with grid lines and labels. Default `true`; `false` shrinks the plot toward a sparkline — the table still carries every value. */
+  axes?: boolean;
+  /**
+   * Label each visible series' last reading in a right-hand gutter, so a
+   * reader need not travel to the legend and back — label the endpoint, never
+   * every point. Default `false`; ignored while the plot is stacked, where a
+   * series' own reading is not where its band sits.
+   */
+  labelSeries?: boolean;
+  /** Period granularity of temporal `x` values for the axis, tooltips and the table. Inferred from the spacing when omitted. */
+  granularity?: ArcTimeGranularity;
+  /**
+   * The takeaway in a sentence, rendered beside the AI mark under the plot —
+   * the insight slot. Wrap values in `<strong>` to set them in bold. Omitted,
+   * the card generates one from the subject's movement across the span; pass
+   * `null` or `false` to render none.
+   */
+  insight?: ReactNode;
+  /** The transport's status. `loading` with series already present is a refresh: the previous render stays under the veil. Default `ready`. */
+  status?: TrendCardStatus;
+  /** The consumer's filter is active — no readings then reads as no-match rather than empty, with a clear-filters action when `onClearFilters` is set. */
+  filtered?: boolean;
+  /** The data is older than the product's freshness rule (TanStack Query's `isStale`). Shows a badge and stamps `data-stale`. */
+  stale?: boolean;
+  /** When the data was last true. Rendered as an "as of" line and included in the description. */
+  updatedAt?: Date | string | number;
+  /**
+   * How `updatedAt` is written, as a time-grammar granularity — `day`
+   * (default, `Sep 8, 2026`), `datetime`, `time`, `month`, `year` — or a
+   * formatter for a custom form. Applies to the as-of line and the description
+   * alike, in the card's `locale` and `timeZone`.
+   */
+  updatedAtFormat?: ArcTimeGranularity | ((date: Date) => string);
+  /** Recovery action for the error state; renders a retry button when set. */
+  onRetry?: () => void;
+  /** Recovery action for the no-match state; renders a clear-filters button when set. */
+  onClearFilters?: () => void;
+  /** Density: `sm` for dense grids, `md` (default), `lg` for a hero panel. Scales type, padding and the default plot height. */
+  size?: TrendCardSize;
+  /** Heading level of the label for the document outline. Default 3 — panels usually sit under a page's h2. */
+  titleLevel?: 2 | 3 | 4 | 5 | 6;
+  /** BCP 47 locale for every number and date. Defaults to the runtime's. Thai products on the Gregorian calendar pass `th-TH-u-ca-gregory`. */
+  locale?: string;
+  /** IANA time zone for dates. Defaults to the runtime's — pass it for deterministic output and single-business-zone reporting. */
+  timeZone?: string;
+  /** Overrides for every rendered or announced string. */
+  labels?: Partial<TrendCardLabels>;
+  /** Replaces the generated accessible description of the whole card (the figure's `aria-describedby` text). */
+  description?: string;
+  /** Trailing header slot — a ghost `Button` or `Menu` for drill-through, export, or settings. */
+  action?: ReactNode;
+  /** Open the data popover on first render, anchored to the card. */
+  defaultTableOpen?: boolean;
+  /** Hide the header info button for the data popover. Only when another surface exposes the same values to keyboard and screen-reader users. */
+  hideTableToggle?: boolean;
+  /** Called with vega-embed's result once the plot mounts — for `view` access in advanced compositions. */
+  onEmbed?: (result: Result) => void;
+  /** Escape hatch: transform the plot spec before it renders. Voids the token and accessibility guarantees for whatever it changes. */
+  patchSpec?: (spec: TopLevelSpec) => TopLevelSpec;
+}
+/**
+ * A trend panel for dashboards: several series over the same periods on one
+ * shared scale, with labelled axes, a legend the reader operates, a shared-x
+ * crosshair that reads every series at the pointed period, named period bands,
+ * an optional target rule, the subject's change across the span as a headline,
+ * and every loading, empty, error and stale state — layout-stable, with a
+ * generated text equivalent and a data table in an info popover.
+ *
+ * Where `MetricCard` answers "what is this number and is it good", TrendCard
+ * answers "what shape is this metric in, and which series is driving it".
+ */
+declare const TrendCard: import("react").ForwardRefExoticComponent<TrendCardProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+export { TrendCard, TrendCardProps, TrendLegendMode };