@stackframe/dashboard-ui-components 2.8.84 → 2.8.85

package/dist/components/analytics-chart/analytics-chart.d.ts

@@ -0,0 +1,554 @@
+import { AnalyticsChartStrings } from "./strings.js";
+import { AnalyticsChartPalette, AnalyticsChartPieProps, AnalyticsChartState, Annotation, FormatKind, Point } from "./types.js";
+import { AnalyticsChartTooltipContext } from "./default-analytics-chart-tooltip.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region src/components/analytics-chart/analytics-chart.d.ts
+/** Mirrors Recharts' internal `Margin` shape (not exported from their typings). */
+type Margin = {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+};
+/**
+ * Props for {@link AnalyticsChart}.
+ *
+ * ## HOW TO REFERENCE THIS COMPONENT
+ *
+ * **In the custom dashboard sandbox** (AI-generated dashboard code): every
+ * export lives on the global `DashboardUI` object. Use
+ * `DashboardUI.AnalyticsChart`, `DashboardUI.ANALYTICS_CHART_DEFAULT_STATE`,
+ * `DashboardUI.pointValue`, etc. **Never** use bare identifiers like
+ * `<AnalyticsChart />` inside the sandbox — there is no module system and
+ * nothing is destructured into scope. Types (`AnalyticsChartState`,
+ * `Point`, …) don't exist at runtime anyway, so just drop the type
+ * annotations in sandbox code.
+ *
+ * **In a regular TypeScript app** (anywhere importing `@stackframe/dashboard-ui-components`
+ * directly): `import { AnalyticsChart, ANALYTICS_CHART_DEFAULT_STATE } from
+ * "@stackframe/dashboard-ui-components"` and use the bare name. Drop the
+ * `DashboardUI.` prefix from the examples below when doing so.
+ *
+ * ## Data shape in 30 seconds
+ *
+ * - `data` is `Point[]`. Each `Point` is `{ ts: number, values: Record<string, number> }`.
+ *   `ts` is a Unix millisecond timestamp; `values` is keyed by **layer id**.
+ * - `state` is fully controlled. Start from
+ *   `DashboardUI.ANALYTICS_CHART_DEFAULT_STATE` (which ships with a
+ *   `"primary"` + `"compare"` + `"annotations"` layer set) and override
+ *   what you need. Do **not** hand-build the layer array from scratch.
+ * - For a breakdown (e.g. signups by region), add `segments` (a `number[][]`
+ *   with one row per `data` point) and `segmentSeries` (the category labels)
+ *   to the primary layer. Rows of `segments` should sum to the point's layer
+ *   value. Same for the compare layer if you want a compared breakdown.
+ *
+ * ## **SCALE YOUR DATA BEFORE PUTTING IT ON A POINT** (critical)
+ *
+ * The chart renders every visible layer on a **single shared y-axis**. If
+ * two layers are on different orders of magnitude (e.g. revenue in cents
+ * `1_200_000` and sign-ups `450`), the smaller series collapses to a flat
+ * line at the bottom and the chart looks broken. You **must** normalize
+ * both metrics into the same range before building `data`. Rules of thumb:
+ *
+ * - **Cents → dollars / units**: divide money amounts by 100 (or 1000 for
+ *   large currencies). Use a `valueFormatter` to render the original unit
+ *   in tooltips so the UX still reads as "$12,543".
+ * - **Counts vs rates**: if one layer is a count (e.g. requests) and the
+ *   other is a ratio (e.g. error rate 0.02), multiply the ratio by the
+ *   count's scale (or by `max(counts)`) so both sit in the same band.
+ * - **Very different counts** (e.g. page views `120_000` vs sign-ups `430`):
+ *   either divide the large metric (`views / 100`) or promote the small
+ *   one to a rate (`signups / views * 1000`). Note the transformation in
+ *   the layer `label` ("Sign-ups per 1k views") so it's honest.
+ * - **Pick the target range from the layer with the most natural scale**
+ *   — usually the metric the user actually cares about — and normalize
+ *   everything else into it. Don't normalize by fighting Recharts with
+ *   `yDomain` hacks; do it in the data.
+ *
+ * If the two metrics truly can't share an axis (e.g. latency ms vs error
+ * count), render them as **two separate `AnalyticsChart` instances** stacked
+ * in the layout instead of jamming them into one chart.
+ *
+ * ## Example 1 — simplest possible: one area layer, no compare
+ *
+ * ```jsx
+ * // Sandbox dashboard code — everything prefixed with DashboardUI.*
+ * function Dashboard() {
+ *   const data = [
+ *     { ts: Date.UTC(2026, 2, 1), values: { primary: 420 } },
+ *     { ts: Date.UTC(2026, 2, 2), values: { primary: 512 } },
+ *     { ts: Date.UTC(2026, 2, 3), values: { primary: 604 } },
+ *     // ...one row per time bucket
+ *   ];
+ *
+ *   // Start from defaults, hide the compare layer so it's a single series.
+ *   const [state, setState] = React.useState({
+ *     ...DashboardUI.ANALYTICS_CHART_DEFAULT_STATE,
+ *     layers: DashboardUI.ANALYTICS_CHART_DEFAULT_STATE.layers.map((l) =>
+ *       l.kind === "compare" ? { ...l, visible: false } : l,
+ *     ),
+ *   });
+ *
+ *   return (
+ *     <DashboardUI.DesignChartCard title="Sign-ups" description="Last 30 days">
+ *       <DashboardUI.AnalyticsChart
+ *         data={data}
+ *         state={state}
+ *         onChange={setState}
+ *       />
+ *     </DashboardUI.DesignChartCard>
+ *   );
+ * }
+ * ```
+ *
+ * ## Example 2 — current vs previous period (compare)
+ *
+ * Each point carries both layer values under their layer ids. The default
+ * state's `"primary"` and `"compare"` layers are already visible, so no
+ * state customization is needed.
+ *
+ * ```jsx
+ * function Dashboard() {
+ *   const data = rows.map((r) => ({
+ *     ts: r.bucketTs,
+ *     values: {
+ *       primary: r.signupsThisPeriod,   // keyed by layer id "primary"
+ *       compare: r.signupsLastPeriod,   // keyed by layer id "compare"
+ *     },
+ *   }));
+ *
+ *   const [state, setState] = React.useState(
+ *     DashboardUI.ANALYTICS_CHART_DEFAULT_STATE,
+ *   );
+ *
+ *   return (
+ *     <DashboardUI.AnalyticsChart
+ *       data={data}
+ *       state={state}
+ *       onChange={setState}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ## Example 3 — stacked bar with region breakdown (segmented)
+ *
+ * ```jsx
+ * function Dashboard() {
+ *   const regions = [
+ *     { key: "us", label: "United States" },
+ *     { key: "eu", label: "European Union" },
+ *     { key: "asia", label: "Asia-Pacific" },
+ *   ];
+ *
+ *   // Row index matches `data` index; column index matches `regions`.
+ *   // Each row MUST sum to data[i].values.primary.
+ *   const segments = [
+ *     [210, 140,  70],  // day 0 → total 420
+ *     [250, 170,  92],  // day 1 → total 512
+ *     [300, 200, 104],  // day 2 → total 604
+ *   ];
+ *
+ *   const data = [
+ *     { ts: Date.UTC(2026, 2, 1), values: { primary: 420 } },
+ *     { ts: Date.UTC(2026, 2, 2), values: { primary: 512 } },
+ *     { ts: Date.UTC(2026, 2, 3), values: { primary: 604 } },
+ *   ];
+ *
+ *   const [state, setState] = React.useState({
+ *     ...DashboardUI.ANALYTICS_CHART_DEFAULT_STATE,
+ *     layers: DashboardUI.ANALYTICS_CHART_DEFAULT_STATE.layers.map((l) => {
+ *       if (l.kind === "primary") {
+ *         return {
+ *           ...l,
+ *           type: "bar",        // switch from area → stacked bars
+ *           segmented: true,
+ *           segments,
+ *           segmentSeries: regions,
+ *         };
+ *       }
+ *       if (l.kind === "compare") {
+ *         return { ...l, visible: false };
+ *       }
+ *       return l;
+ *     }),
+ *   });
+ *
+ *   return (
+ *     <DashboardUI.AnalyticsChart
+ *       data={data}
+ *       state={state}
+ *       onChange={setState}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ## Example 4 — mixing display types (e.g. revenue bars + signups area)
+ *
+ * Use two layers. The "primary" layer holds one metric; reuse the "compare"
+ * layer slot for the second metric by overriding its `id`, `label`, and
+ * `type`. Then key both values in each `Point`.
+ *
+ * **IMPORTANT**: the two metrics share a single y-axis, so scale them into
+ * the same range before putting them on the point. A common trick is to
+ * pass a `valueFormatter` that reports each layer's number with its own
+ * unit so tooltips still read correctly.
+ *
+ * ```jsx
+ * function Dashboard() {
+ *   // Sign-ups are already in range; revenue cents would dwarf them, so
+ *   // we normalize revenue (cents → dollars) onto the same scale.
+ *   const data = rows.map((r) => ({
+ *     ts: r.bucketTs,
+ *     values: {
+ *       revenue: r.revenueCents / 100,
+ *       signups: r.signups,
+ *     },
+ *   }));
+ *
+ *   const [state, setState] = React.useState({
+ *     ...DashboardUI.ANALYTICS_CHART_DEFAULT_STATE,
+ *     layers: DashboardUI.ANALYTICS_CHART_DEFAULT_STATE.layers.map((l) => {
+ *       if (l.kind === "primary") {
+ *         return { ...l, id: "revenue", label: "Revenue", type: "bar" };
+ *       }
+ *       if (l.kind === "compare") {
+ *         return {
+ *           ...l,
+ *           id: "signups",
+ *           label: "Sign-ups",
+ *           type: "area",
+ *           visible: true,
+ *         };
+ *       }
+ *       return l;
+ *     }),
+ *   });
+ *
+ *   // Per-layer formatter: `kind` lets you branch per-axis vs per-layer
+ *   // using the layer id passed in via the tooltip context. For most
+ *   // cases formatting by raw value is enough.
+ *   const valueFormatter = (value, kind) => {
+ *     if (kind.type === "currency") return `$${value.toFixed(0)}`;
+ *     return value.toLocaleString();
+ *   };
+ *
+ *   return (
+ *     <DashboardUI.AnalyticsChart
+ *       data={data}
+ *       state={state}
+ *       onChange={setState}
+ *       valueFormatter={valueFormatter}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ## Example 5 — segmented sign-ups stacked with a revenue line (mix + segment)
+ *
+ * Combines Example 3 and Example 4: primary layer is revenue as a line
+ * (un-segmented), compare layer is sign-ups as a stacked bar (segmented
+ * by region). Remember: row sums of the compare segments must equal
+ * `point.values.signups`, and both metrics share one y-axis.
+ *
+ * ```jsx
+ * function Dashboard() {
+ *   const regions = [
+ *     { key: "us", label: "United States" },
+ *     { key: "eu", label: "European Union" },
+ *     { key: "asia", label: "Asia-Pacific" },
+ *   ];
+ *
+ *   // Normalize revenue to the same order of magnitude as sign-ups.
+ *   const data = rows.map((r) => ({
+ *     ts: r.bucketTs,
+ *     values: {
+ *       revenue: r.revenueCents / 100,
+ *       signups: r.signupsTotal,
+ *     },
+ *   }));
+ *
+ *   // Row index matches `data` index. Each row sums to signupsTotal.
+ *   const signupSegments = rows.map((r) => [
+ *     r.signupsUs,
+ *     r.signupsEu,
+ *     r.signupsAsia,
+ *   ]);
+ *
+ *   const [state, setState] = React.useState({
+ *     ...DashboardUI.ANALYTICS_CHART_DEFAULT_STATE,
+ *     layers: DashboardUI.ANALYTICS_CHART_DEFAULT_STATE.layers.map((l) => {
+ *       if (l.kind === "primary") {
+ *         return { ...l, id: "revenue", label: "Revenue", type: "line" };
+ *       }
+ *       if (l.kind === "compare") {
+ *         return {
+ *           ...l,
+ *           id: "signups",
+ *           label: "Sign-ups",
+ *           type: "bar",
+ *           visible: true,
+ *           segmented: true,
+ *           segments: signupSegments,
+ *           segmentSeries: regions,
+ *         };
+ *       }
+ *       return l;
+ *     }),
+ *   });
+ *
+ *   return (
+ *     <DashboardUI.AnalyticsChart
+ *       data={data}
+ *       state={state}
+ *       onChange={setState}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+type AnalyticsChartProps = {
+  /** Time-series points — each point carries `values` keyed by layer id.
+   * See {@link AnalyticsChartProps} for full data-shape examples. */
+  data: Point[]; /** Annotations. Fully prop-driven; the consumer owns the array. */
+  annotations?: Annotation[];
+  /** Fully-controlled state + dispatch. The chart reads every config and
+   * persistent-interaction slice from `state` and mutates it through
+   * `onChange`. Ephemeral interaction state (hover, brush, pin, draft) is
+   * managed internally and surfaces only through the state callbacks. */
+  state: AnalyticsChartState;
+  onChange: React.Dispatch<React.SetStateAction<AnalyticsChartState>>;
+  /** Fired when the user submits the in-chart annotation form. The consumer
+   * is expected to append to its own annotations array. */
+  onAnnotationCreate?: (annotation: Annotation) => void; /** Override any user-visible copy. Shallow-merges over the defaults. */
+  strings?: Partial<AnalyticsChartStrings>;
+  /** Override segment color ramps. Each ramp is either procedural
+   * (hue + sat + lightness range) or explicit (concrete color lists). */
+  palette?: Partial<AnalyticsChartPalette>;
+  /** Render slot for the tooltip body. Receives a prepared context with
+   * the active point, primary/compare layer views, pre-bound formatters,
+   * and resolved strings. Defaults to `DefaultAnalyticsChartTooltip`. */
+  renderTooltip?: (ctx: AnalyticsChartTooltipContext) => ReactNode;
+  /** Recharts plot margins. Also drives overlay positioning math so the
+   * crosshair, tooltip anchor, brush popup, and flag markers line up with
+   * the actual plot area. Defaults to `{ top: 16, right: 24, bottom: 8, left: 12 }`. */
+  plotMargin?: Margin; /** Y-axis reserved width in pixels. Defaults to 48. */
+  yAxisWidth?: number; /** Fractional headroom added to the y-axis top. Defaults to 0.1. */
+  yDomainPadding?: number; /** Grouped pie configuration. Each field has a sensible default. */
+  pie?: AnalyticsChartPieProps;
+  /** Custom number formatter. Receives the raw value and the kind to format
+   * with — the same function is invoked for both x-axis and y-axis values. */
+  valueFormatter?: (value: number, kind: FormatKind) => string;
+};
+/**
+ * Preferred chart for all time-series: area, line, bar, compare layers,
+ * segmented stacks, tooltips, zoom, and annotations. Wrap in
+ * `DesignChartCard` for the title/description chrome. Only fall back to
+ * raw Recharts for non-time-series visuals (static rankings etc.).
+ *
+ * ## Data shape
+ *
+ * `data` is `Point[]`, where `Point = { ts: number, values: Record<string, number> }`.
+ * `ts` is a Unix milliseconds timestamp. `values` maps layer id → numeric value
+ * at that bucket. Example:
+ *
+ * ```ts
+ * { ts: 1743465600000, values: { primary: 420 } }
+ * { ts: 1743465600000, values: { primary: 420, compare: 380 } }  // with compare layer
+ * ```
+ *
+ * ## State is fully controlled — start from ANALYTICS_CHART_DEFAULT_STATE
+ *
+ * The default state ships with three pre-configured layers: `"primary"`,
+ * `"compare"`, and `"annotations"`. ALWAYS spread from
+ * `ANALYTICS_CHART_DEFAULT_STATE` and map over `layers` to override. Do NOT
+ * hand-build the layer array from scratch — you will miss fields and crash.
+ *
+ * ```ts
+ * // Default state shape (for reference — spread from the constant, don't copy):
+ * {
+ *   view: "timeseries",
+ *   layers: [
+ *     { id: "primary", kind: "primary", label: "Current", visible: true, color: "#2563eb",
+ *       segmented: false, type: "area", strokeStyle: "solid", fillOpacity: 0.22, inProgressFromIndex: null },
+ *     { id: "compare", kind: "compare", label: "Previous period", visible: true, color: "#f59e0b",
+ *       segmented: false, type: "line", strokeStyle: "dashed", inProgressFromIndex: null },
+ *     { id: "annotations", kind: "annotations", label: "Annotations", visible: true, color: "#f59e0b" },
+ *   ],
+ *   xFormatKind: { type: "datetime", style: "short" },
+ *   yFormatKind: { type: "short" },
+ *   showGrid: true, showXAxis: true, showYAxis: true,
+ *   zoomRange: null, pinnedIndex: null,
+ * }
+ * ```
+ *
+ * ## onChange — CRITICAL, get this right
+ *
+ * `onChange` fires with an `AnalyticsChartState` object — NOT your custom
+ * wrapper. If you store chart data and state together, `onChange` MUST only
+ * update the state part. Keep data and state in SEPARATE hooks:
+ *
+ * ```tsx
+ * // WRONG — overwrites your data with a bare state object, crashes on next render:
+ * const [combined, setCombined] = React.useState({ data: [], state: ANALYTICS_CHART_DEFAULT_STATE });
+ * <AnalyticsChart data={combined.data} state={combined.state} onChange={setCombined} />
+ *
+ * // RIGHT — two hooks:
+ * const [data, setData] = React.useState([]);
+ * const [chartState, setChartState] = React.useState({ ...ANALYTICS_CHART_DEFAULT_STATE });
+ * <AnalyticsChart data={data} state={chartState} onChange={setChartState} />
+ * ```
+ *
+ * NEVER pass a setter that manages a combined `{ data, state }` object directly to `onChange`.
+ *
+ * ## Common patterns
+ *
+ * ### 1. Simplest — one area layer, no compare
+ *
+ * ```tsx
+ * const data = rows.map(r => ({ ts: r.bucketTs, values: { primary: r.count } }));
+ * const [state, setState] = React.useState({
+ *   ...ANALYTICS_CHART_DEFAULT_STATE,
+ *   layers: ANALYTICS_CHART_DEFAULT_STATE.layers.map(l =>
+ *     l.kind === "compare" ? { ...l, visible: false } : l
+ *   ),
+ * });
+ * <DesignChartCard title="Signups" description="Last 30 days">
+ *   <AnalyticsChart data={data} state={state} onChange={setState} />
+ * </DesignChartCard>
+ * ```
+ *
+ * ### 2. Current vs previous period (compare)
+ *
+ * ```tsx
+ * const data = rows.map(r => ({
+ *   ts: r.bucketTs,
+ *   values: { primary: r.thisPeriod, compare: r.lastPeriod },
+ * }));
+ * const [state, setState] = React.useState(ANALYTICS_CHART_DEFAULT_STATE);
+ * <AnalyticsChart data={data} state={state} onChange={setState} />
+ * ```
+ *
+ * ### 3. Stacked bar with breakdown (segmented)
+ *
+ * ```tsx
+ * const regions = [{ key: "us", label: "US" }, { key: "eu", label: "EU" }];
+ * const segments = rows.map(r => [r.signupsUs, r.signupsEu]); // MUST sum to primary value per row
+ * const [state, setState] = React.useState({
+ *   ...ANALYTICS_CHART_DEFAULT_STATE,
+ *   layers: ANALYTICS_CHART_DEFAULT_STATE.layers.map(l => {
+ *     if (l.kind === "primary") return { ...l, type: "bar", segmented: true, segments, segmentSeries: regions };
+ *     if (l.kind === "compare") return { ...l, visible: false };
+ *     return l;
+ *   }),
+ * });
+ * <AnalyticsChart data={data} state={state} onChange={setState} />
+ * ```
+ *
+ * ### 4. Two metrics on one chart (revenue bars + signups area)
+ *
+ * ```tsx
+ * // IMPORTANT: metrics share one y-axis, so normalize into the same range.
+ * const data = rows.map(r => ({
+ *   ts: r.bucketTs,
+ *   values: { revenue: r.revenueCents / 100, signups: r.signups },
+ * }));
+ * const [state, setState] = React.useState({
+ *   ...ANALYTICS_CHART_DEFAULT_STATE,
+ *   layers: ANALYTICS_CHART_DEFAULT_STATE.layers.map(l => {
+ *     if (l.kind === "primary") return { ...l, id: "revenue", label: "Revenue", type: "bar" };
+ *     if (l.kind === "compare") return { ...l, id: "signups", label: "Sign-ups", type: "area", visible: true };
+ *     return l;
+ *   }),
+ * });
+ * <AnalyticsChart data={data} state={state} onChange={setState} />
+ * ```
+ *
+ * ### 5. Pie view (distribution / breakdown, non-time-series)
+ *
+ * Pie needs one data point, `segments` with one row, and `segmentSeries` with labels:
+ *
+ * ```tsx
+ * const categories = [{ key: "verified", label: "Verified" }, { key: "unverified", label: "Unverified" }, { key: "anonymous", label: "Anonymous" }];
+ * const total = verified + unverified + anonymous;
+ * const data = [{ ts: 0, values: { primary: total } }];
+ * const segments = [[verified, unverified, anonymous]]; // one row; values sum to total
+ * const [state, setState] = React.useState({
+ *   ...ANALYTICS_CHART_DEFAULT_STATE,
+ *   view: "pie",
+ *   layers: ANALYTICS_CHART_DEFAULT_STATE.layers.map(l => {
+ *     if (l.kind === "primary") return { ...l, segmented: true, segments, segmentSeries: categories };
+ *     if (l.kind === "compare") return { ...l, visible: false };
+ *     return l;
+ *   }),
+ * });
+ * <AnalyticsChart data={data} state={state} onChange={setState} />
+ * ```
+ *
+ * ## Segment data contract (MUST follow when segmented: true)
+ *
+ * `segments` is a 2D array: `segments[dayIndex][categoryIndex] = number`.
+ *
+ * - Outer length MUST equal `data.length` (one row per Point).
+ * - Inner length MUST equal `segmentSeries.length` (one value per category).
+ * - Each row MUST sum to `data[dayIndex].values[layerId]` (the layer's total for that day).
+ * - `segmentSeries` defines the category labels, in the SAME order as segment columns.
+ *
+ * Example: if `segmentSeries = [{ key: "us", label: "US" }, { key: "eu", label: "EU" }]`
+ * and `data[0].values.primary = 420`, then `segments[0]` must be `[usValue, euValue]`
+ * where `usValue + euValue === 420`. If rows don't sum to the layer total, stacked bars
+ * will render incorrectly (gaps or overflow).
+ *
+ * ## Palette
+ *
+ * AnalyticsChart auto-generates segment colors (blue shades for primary, amber for
+ * compare). You do NOT need to pass a palette prop — it just works. Segment keys
+ * can be any string; the component sanitizes them for CSS purposes internally.
+ *
+ * ## Layer quick reference
+ *
+ * - Layer `type` options: `"area" | "line" | "bar"`
+ * - Layer `kind` values: `"primary" | "compare" | "annotations"`
+ * - To hide a layer: `{ ...l, visible: false }`
+ * - To switch chart type: `{ ...l, type: "bar" }` (or `"line"`, `"area"`)
+ * - To rename a layer: `{ ...l, id: "myMetric", label: "My Metric" }`
+ *
+ * ## Formatting (xFormatKind / yFormatKind on state)
+ *
+ * - `{ type: "numeric" }` — plain number
+ * - `{ type: "short" }` — abbreviated (1.2K, 3.4M) — good default for y-axis
+ * - `{ type: "currency", currency: "USD", divisor: 100 }` — for cents → dollars
+ * - `{ type: "percent", source: "fraction" }` — for 0..1 → "45.2%"
+ * - `{ type: "datetime", style: "short" }` — good default for x-axis timestamps
+ *
+ * Set these on state:
+ * `{ ...ANALYTICS_CHART_DEFAULT_STATE, yFormatKind: { type: "currency", currency: "USD" } }`
+ *
+ * ## Scale warning
+ *
+ * All visible layers share ONE y-axis. If magnitudes differ wildly (e.g. revenue
+ * cents vs signup count), normalize the data BEFORE building Points. If
+ * normalization is impossible, use two separate `AnalyticsChart` instances stacked
+ * vertically.
+ */
+declare function AnalyticsChart({
+  data: fullData,
+  annotations: fullAnnotations,
+  state,
+  onChange,
+  onAnnotationCreate,
+  strings: stringsOverride,
+  palette: paletteOverride,
+  renderTooltip,
+  plotMargin,
+  yAxisWidth,
+  yDomainPadding,
+  pie,
+  valueFormatter
+}: AnalyticsChartProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { AnalyticsChart, AnalyticsChartProps, Margin };
+//# sourceMappingURL=analytics-chart.d.ts.map

package/dist/components/analytics-chart/analytics-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"analytics-chart.d.ts","names":[],"sources":["../../../src/components/analytics-chart/analytics-chart.tsx"],"mappings":";;;;;;;;KAyEY,MAAA;EACV,GAAA;EACA,KAAA;EACA,MAAA;EACA,IAAA;AAAA;;;;;;;AA6SF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4SA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA5SY,mBAAA;;;EAGV,IAAA,EAAM,KAAA;EAEN,WAAA,GAAc,UAAA;;;;;EAKd,KAAA,EAAO,mBAAA;EACP,QAAA,EAAU,KAAA,CAAM,QAAA,CAAS,KAAA,CAAM,cAAA,CAAe,mBAAA;;;EAG9C,kBAAA,IAAsB,UAAA,EAAY,UAAA;EAElC,OAAA,GAAU,OAAA,CAAQ,qBAAA;;;EAGlB,OAAA,GAAU,OAAA,CAAQ,qBAAA;;;;EAIlB,aAAA,IAAiB,GAAA,EAAK,4BAAA,KAAiC,SAAA;;;;EAIvD,UAAA,GAAa,MAAA;EAEb,UAAA;EAEA,cAAA;EAEA,GAAA,GAAM,sBAAA;;;EAGN,cAAA,IAAkB,KAAA,UAAe,IAAA,EAAM,UAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAwQzB,cAAA,CAAA;EACd,IAAA,EAAM,QAAA;EACN,WAAA,EAAa,eAAA;EACb,KAAA;EACA,QAAA;EACA,kBAAA;EACA,OAAA,EAAS,eAAA;EACT,OAAA,EAAS,eAAA;EACT,aAAA;EACA,UAAA;EACA,UAAA;EACA,cAAA;EACA,GAAA;EACA;AAAA,GACC,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}