@krizaka/charts 0.1.0 → 0.2.0

package/dist/native.js

@@ -66,6 +66,14 @@ function fill(template, values) {
   return template.replace(/\{(\w+)\}/g, (match, name) => name in values ? String(values[name]) : match);
 }
 
+// src/needs/statuses.ts
+var DEFAULT_STATUSES = [
+  { key: "completed", label: "Completed", tone: "success", outcome: "succeeded" },
+  { key: "failed", label: "Failed", tone: "danger", outcome: "failed" },
+  { key: "running", label: "Running", tone: "info" },
+  { key: "queued", label: "Queued", tone: "neutral" }
+];
+
 // src/native/cartesian.tsx
 import { useMemo as useMemo2, useState as useState2 } from "react";
 import Svg, { Circle, G, Line, Path, Text as SvgText } from "react-native-svg";
@@ -145,12 +153,12 @@ function summarize(series, categories, writeCategory) {
   let max = null;
   let first = null;
   let last = null;
-  let total = 0;
+  let total2 = 0;
   let count = 0;
   series.values.forEach((v, i) => {
     if (v == null) return;
     count += 1;
-    total += v;
+    total2 += v;
     if (first === null) first = v;
     last = v;
     if (!min || v < min.value) min = { value: v, category: writeCategory(categories[i]) };
@@ -158,7 +166,7 @@ function summarize(series, categories, writeCategory) {
   });
   const change = first !== null && last !== null && first !== 0 && count > 1 ? last / first - 1 : null;
   const trend = count < 2 || change === null ? count < 2 ? "none" : last > first ? "up" : last < first ? "down" : "flat" : Math.abs(change) < 0.01 ? "flat" : change > 0 ? "up" : "down";
-  return { label: series.label, count, min, max, first, last, total, change, trend };
+  return { label: series.label, count, min, max, first, last, total: total2, change, trend };
 }
 
 // src/core/describe.ts
@@ -183,11 +191,11 @@ function describeSeries(table, { kind, labels, value, category, share, threshold
   return [intro, ...sentences, ...marks.length ? [`${marks.join(", ")}.`] : []].join(" ");
 }
 function describeParts(kind, parts, { labels, value, share }) {
-  const total = parts.reduce((sum, p) => sum + Math.max(0, p.value), 0);
+  const total2 = parts.reduce((sum, p) => sum + Math.max(0, p.value), 0);
   const intro = fill(labels.summaryIntro, { kind: labels.kinds[kind], count: parts.length });
   const sorted = [...parts].sort((a, b) => b.value - a.value);
-  const items = sorted.map((p) => fill(labels.summaryShare, { label: p.label, value: value(p.value), share: share(total ? p.value / total : 0) }));
-  return `${intro} ${items.join(", ")}. ${capitalize(fill(labels.summaryTotal, { total: value(total) }))}.`;
+  const items = sorted.map((p) => fill(labels.summaryShare, { label: p.label, value: value(p.value), share: share(total2 ? p.value / total2 : 0) }));
+  return `${intro} ${items.join(", ")}. ${capitalize(fill(labels.summaryTotal, { total: value(total2) }))}.`;
 }
 
 // src/core/format.ts
@@ -458,15 +466,25 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "brandGradientTo": "#0c0c0e",
   "success": "#10b77f",
   "successText": "#36d399",
+  "successSoft": "rgba(16,183,127,0.14)",
   "warning": "#f59f0a",
   "warningText": "#f6a823",
+  "warningSoft": "rgba(245,159,10,0.14)",
   "danger": "#ef4343",
   "dangerText": "#f87272",
+  "dangerSoft": "rgba(239,67,67,0.14)",
   "info": "#196df5",
   "infoText": "#629cf8",
   "scrim": "rgba(0,0,0,0.6)",
   "scrimStrong": "rgba(0,0,0,0.8)",
-  "overlay": "rgba(0,0,0,0.7)"
+  "overlay": "rgba(0,0,0,0.7)",
+  "surfaceSheen": "rgba(255,255,255,0.045)",
+  "fillShade": "rgba(0,0,0,0.12)",
+  "edgeLight": "rgba(255,255,255,0.07)",
+  "edgeOnFill": "rgba(255,255,255,0.22)",
+  "edgeWell": "rgba(4,4,7,0.5)",
+  "glassBg": "rgba(29,29,32,0.88)",
+  "glassBorder": "rgba(255,255,255,0.1)"
 }), light: /* @__PURE__ */ Object.freeze({
   "surface0": "#fafafa",
   "surface1": "#ffffff",
@@ -492,15 +510,25 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "brandGradientTo": "#fafafa",
   "success": "#10b77f",
   "successText": "#0a714e",
+  "successSoft": "rgba(16,183,127,0.1)",
   "warning": "#f59f0a",
   "warningText": "#955104",
+  "warningSoft": "rgba(245,159,10,0.12)",
   "danger": "#ef4343",
   "dangerText": "#af1d1d",
+  "dangerSoft": "rgba(239,67,67,0.1)",
   "info": "#0a64f5",
   "infoText": "#0954ce",
   "scrim": "rgba(0,0,0,0.6)",
   "scrimStrong": "rgba(0,0,0,0.8)",
-  "overlay": "rgba(0,0,0,0.7)"
+  "overlay": "rgba(0,0,0,0.7)",
+  "surfaceSheen": "rgba(255,255,255,0.7)",
+  "fillShade": "rgba(0,0,0,0.12)",
+  "edgeLight": "rgba(255,255,255,0.9)",
+  "edgeOnFill": "rgba(255,255,255,0.22)",
+  "edgeWell": "rgba(48,52,80,0.08)",
+  "glassBg": "rgba(255,255,255,0.88)",
+  "glassBorder": "rgba(0,0,0,0.08)"
 }) });
 
 // src/native/frame.tsx
@@ -727,6 +755,108 @@ function BarChart({ stacked, ...props }) {
   return /* @__PURE__ */ jsx2(NativeCartesian, { props, mode: { kind: "bar", stacked } });
 }
 
+// src/native/needs.tsx
+import { StyleSheet as StyleSheet2, Text as Text2, View as View2 } from "react-native";
+import Svg3, { Path as Path3 } from "react-native-svg";
+
+// src/needs/labels.ts
+var EARNINGS_LABELS = {
+  total: "earned over {count} periods",
+  change: "{change} vs the previous period",
+  gross: "Gross",
+  net: "Net"
+};
+var THROUGHPUT_LABELS = { total: "jobs over {count} periods", success: "{rate} succeeded" };
+var LATENCY_LABELS = {
+  p50: "Median (p50)",
+  p95: "p95",
+  slowest: "p95 of {name}, the slowest",
+  over: "{count} over the objective",
+  within: "all within the objective"
+};
+var CREDIT_LABELS = {
+  remaining: "left of {limit}",
+  used: "{used} used ({percent})",
+  runsOut: "At this pace, runs out on {date}",
+  steady: "No use lately",
+  renews: "Renews on {date}",
+  daily: "Use per day"
+};
+var GOAL_LABELS = { raised: "raised of {goal}", reached: "Goal reached", supporters: "{count} supporters", left: "{time} left" };
+var TICKER_LABELS = {
+  current: "current bid",
+  change: "{change} since the opening \xB7 {count} bids",
+  opening: "opening price, no bid yet",
+  reserve: "Reserve price",
+  price: "Price"
+};
+
+// src/needs/model.ts
+import { currencyDigits as currencyDigits2, getNumberFormat as getNumberFormat2 } from "@krizaka/intl";
+function numberOf(row, accessor, index) {
+  const value = typeof accessor === "function" ? accessor(row, index) : row[accessor];
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+function total(rows, accessor) {
+  return rows.reduce((sum, row, i) => sum + (numberOf(row, accessor, i) ?? 0), 0);
+}
+function lastChange(values) {
+  if (values.length < 2) return null;
+  const last = values[values.length - 1];
+  const previous = values[values.length - 2];
+  if (last == null || previous == null || previous === 0) return null;
+  return last / previous - 1;
+}
+function direction(change) {
+  if (change == null) return null;
+  return Math.abs(change) < 5e-3 ? "flat" : change > 0 ? "up" : "down";
+}
+function successRate(succeeded, failed) {
+  const finished = succeeded + failed;
+  return finished > 0 ? succeeded / finished : null;
+}
+function daysLeft(remaining, daily, days = 7) {
+  const recent = daily.slice(-days).filter((v) => v != null && v >= 0);
+  if (recent.length === 0) return null;
+  const pace = recent.reduce((a, b) => a + b, 0) / recent.length;
+  if (pace <= 0) return null;
+  return Math.max(0, Math.floor(remaining / pace));
+}
+var addDays = (from, days) => new Date(from.getTime() + days * 864e5);
+function quotaLevel(ratio, warning = 0.8, danger = 0.95) {
+  return ratio >= danger ? "danger" : ratio >= warning ? "warning" : "ok";
+}
+function fillIn(template, values) {
+  return template.replace(/\{(\w+)\}/g, (match, key) => key in values ? String(values[key]) : match);
+}
+function signedPercent(change, locale) {
+  return getNumberFormat2(locale, { style: "percent", signDisplay: "exceptZero", maximumFractionDigits: Math.abs(change) < 0.1 ? 1 : 0 }).format(change);
+}
+function formatDuration(ms, locale) {
+  const unit = (value, name, digits) => getNumberFormat2(locale, { style: "unit", unit: name, unitDisplay: "short", maximumFractionDigits: digits }).format(value);
+  const abs = Math.abs(ms);
+  if (abs < 1e3) return unit(Math.round(ms), "millisecond", 0);
+  if (abs < 6e4) return unit(ms / 1e3, "second", abs < 1e4 ? 1 : 0);
+  if (abs < 36e5) return unit(ms / 6e4, "minute", 1);
+  return unit(ms / 36e5, "hour", 1);
+}
+function roundMoney(currency) {
+  const digits = currencyDigits2(currency);
+  return (value, locale) => {
+    const minor = Math.round(value);
+    const whole = minor % 10 ** digits === 0;
+    return getNumberFormat2(locale, { style: "currency", currency, minimumFractionDigits: whole ? 0 : digits, maximumFractionDigits: whole ? 0 : digits }).format(minor / 10 ** digits);
+  };
+}
+
+// src/needs/ticker.ts
+function tickerModel(bids, opening, openedAt) {
+  const sorted = [...bids].sort((a, b) => new Date(a.at).getTime() - new Date(b.at).getTime());
+  const points = [...openedAt ? [{ at: openedAt, amount: opening }] : [], ...sorted];
+  const current = sorted.length > 0 ? sorted[sorted.length - 1].amount : opening;
+  return { points, current, change: current - opening, ratio: opening > 0 ? current / opening - 1 : null, count: sorted.length };
+}
+
 // src/native/round.tsx
 import { useMemo as useMemo3, useState as useState3 } from "react";
 import Svg2, { Circle as Circle2, Line as Line2, Path as Path2, Text as SvgText2 } from "react-native-svg";
@@ -743,9 +873,9 @@ function PieChart(props) {
     if (rows.length > maxSlices) out.push({ label: otherLabel, value: rows.slice(maxSlices - 1).reduce((s, r2) => s + r2.value, 0), color: theme.textMuted });
     return out;
   }, [data, label, value, maxSlices, otherLabel, color, theme.textMuted]);
-  const total = slices.reduce((s, x) => s + x.value, 0);
+  const total2 = slices.reduce((s, x) => s + x.value, 0);
   const [active, setActive] = useState3(null);
-  const isEmpty = total <= 0;
+  const isEmpty = total2 <= 0;
   const summary = isEmpty ? labels.empty : describeParts(donut ? "donut" : "pie", slices, { labels, value: fmt.value, share: fmt.share });
   return /* @__PURE__ */ jsx3(
     NativeFrame,
@@ -755,10 +885,10 @@ function PieChart(props) {
       resolved,
       summary,
       isEmpty,
-      points: slices.map((s) => `${s.label}: ${fmt.value(s.value)} (${fmt.share(total ? s.value / total : 0)})`),
+      points: slices.map((s) => `${s.label}: ${fmt.value(s.value)} (${fmt.share(total2 ? s.value / total2 : 0)})`),
       active,
       onActive: setActive,
-      legend: /* @__PURE__ */ jsx3(NativeLegend, { theme, items: slices.map((s) => ({ label: `${s.label} \xB7 ${fmt.share(total ? s.value / total : 0)}`, color: s.color })) }),
+      legend: /* @__PURE__ */ jsx3(NativeLegend, { theme, items: slices.map((s) => ({ label: `${s.label} \xB7 ${fmt.share(total2 ? s.value / total2 : 0)}`, color: s.color })) }),
       children: (width, height) => {
         const radius = Math.max(10, Math.min(width, height) / 2 - 6);
         const inner = donut ? radius * 0.64 : 0;
@@ -766,10 +896,10 @@ function PieChart(props) {
         return /* @__PURE__ */ jsxs3(Svg2, { width, height, children: [
           slices.map((s, i) => {
             const start = angle;
-            angle += total ? s.value / total * Math.PI * 2 : 0;
+            angle += total2 ? s.value / total2 * Math.PI * 2 : 0;
             return /* @__PURE__ */ jsx3(Path2, { d: arcPath(width / 2, height / 2, inner, radius, start, angle), fill: s.color, stroke: theme.surface1, strokeWidth: slices.length > 1 ? 2 : 0, opacity: active !== null && active !== i ? 0.4 : 1 }, s.label);
           }),
-          donut && /* @__PURE__ */ jsx3(SvgText2, { x: width / 2, y: height / 2 + (centerLabel ? 0 : 7), fontSize: Math.max(14, Math.min(24, inner / 3)), fontWeight: "600", fill: theme.textPrimary, textAnchor: "middle", children: fmt.value(total) }),
+          donut && /* @__PURE__ */ jsx3(SvgText2, { x: width / 2, y: height / 2 + (centerLabel ? 0 : 7), fontSize: Math.max(14, Math.min(24, inner / 3)), fontWeight: "600", fill: theme.textPrimary, textAnchor: "middle", children: fmt.value(total2) }),
           donut && centerLabel ? /* @__PURE__ */ jsx3(SvgText2, { x: width / 2, y: height / 2 + 18, fontSize: 11, fill: theme.textSecondary, textAnchor: "middle", children: centerLabel }) : null
         ] });
       }
@@ -861,15 +991,254 @@ function Sparkline(props) {
     }
   );
 }
+
+// src/native/needs.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var ARROW = { up: "M7 17 17 7M8 7h9v9", down: "M7 7l10 10M17 8v9H8", flat: "M5 12h14M13 6l6 6-6 6" };
+function toneColor(resolved, tone) {
+  return resolved.color(tone, 1);
+}
+function Headline({
+  resolved,
+  title,
+  hideTitle,
+  value,
+  label,
+  delta,
+  way,
+  tone = "neutral"
+}) {
+  const { theme } = resolved;
+  return /* @__PURE__ */ jsxs4(View2, { style: styles2.head, children: [
+    !hideTitle ? /* @__PURE__ */ jsx4(Text2, { role: "heading", style: [styles2.title, { color: theme.textPrimary }], children: title }) : null,
+    /* @__PURE__ */ jsxs4(View2, { style: styles2.kpi, children: [
+      /* @__PURE__ */ jsx4(Text2, { style: [styles2.value, { color: theme.textPrimary }], children: value }),
+      label ? /* @__PURE__ */ jsx4(Text2, { style: [styles2.small, { color: theme.textSecondary }], children: label }) : null
+    ] }),
+    delta ? /* @__PURE__ */ jsxs4(View2, { style: styles2.delta, children: [
+      way ? /* @__PURE__ */ jsx4(Svg3, { width: 12, height: 12, viewBox: "0 0 24 24", "aria-hidden": true, children: /* @__PURE__ */ jsx4(Path3, { d: ARROW[way], fill: "none", stroke: toneColor(resolved, tone), strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" }) }) : null,
+      /* @__PURE__ */ jsx4(Text2, { style: [styles2.small, styles2.strong, { color: theme.textPrimary }], children: delta })
+    ] }) : null
+  ] });
+}
+var good = (way, up) => !way || way === "flat" ? "neutral" : way === "up" === up ? "success" : "danger";
+function EarningsChart({ x = "month", net, gross, currency, period = "month", payoutThreshold, labels: given, title, hideTitle, data, ...props }) {
+  const words = { ...EARNINGS_LABELS, ...given };
+  const resolved = useNativeSettings(props);
+  const format = { style: "money", currency };
+  const change = lastChange(data.map((row, i) => numberOf(row, net, i)));
+  const way = direction(change);
+  const series = gross ? [{ key: gross, label: words.gross, color: 2 }, { key: net, label: words.net, color: 1 }] : [{ key: net, label: words.net, color: 1 }];
+  return /* @__PURE__ */ jsxs4(View2, { style: styles2.root, children: [
+    /* @__PURE__ */ jsx4(
+      Headline,
+      {
+        resolved,
+        title,
+        hideTitle,
+        value: valueFormatter(format, resolved.locale)(total(data, net)),
+        label: fillIn(words.total, { count: data.length }),
+        delta: change == null ? null : fillIn(words.change, { change: signedPercent(change, resolved.locale) }),
+        way,
+        tone: good(way, true)
+      }
+    ),
+    /* @__PURE__ */ jsx4(BarChart, { ...props, title, hideTitle: true, data, x, series, format, xFormat: period, thresholds: payoutThreshold ? [{ tone: "success", ...payoutThreshold }] : void 0 })
+  ] });
+}
+function JobThroughput({ x = "day", period = "day", statuses = DEFAULT_STATUSES, labels: given, title, hideTitle, data, ...props }) {
+  const words = { ...THROUGHPUT_LABELS, ...given };
+  const resolved = useNativeSettings(props);
+  const sum = (outcome) => statuses.filter((s) => outcome === void 0 || s.outcome === outcome).reduce((n, s) => n + total(data, s.key), 0);
+  const rate = successRate(sum("succeeded"), sum("failed"));
+  const series = statuses.map((s) => ({ key: s.key, label: s.label, color: s.tone }));
+  return /* @__PURE__ */ jsxs4(View2, { style: styles2.root, children: [
+    /* @__PURE__ */ jsx4(
+      Headline,
+      {
+        resolved,
+        title,
+        hideTitle,
+        value: valueFormatter("integer", resolved.locale)(sum()),
+        label: fillIn(words.total, { count: data.length }),
+        delta: rate == null ? null : fillIn(words.success, { rate: valueFormatter("percent", resolved.locale)(rate) })
+      }
+    ),
+    /* @__PURE__ */ jsx4(BarChart, { ...props, title, hideTitle: true, data, x, xFormat: period, series, format: "integer", stacked: true })
+  ] });
+}
+function LatencyChart({
+  x = "name",
+  p50 = "p50",
+  p95 = "p95",
+  objective,
+  labels: given,
+  title,
+  hideTitle,
+  data,
+  ...props
+}) {
+  const words = { ...LATENCY_LABELS, ...given };
+  const resolved = useNativeSettings(props);
+  const tail = p95 ?? p50;
+  const measured = data.map((row, i) => ({ row, i, value: numberOf(row, tail, i) ?? 0 }));
+  const slowest = measured.reduce((a, m) => !a || m.value > a.value ? m : a, null);
+  const over = objective ? measured.filter((m) => m.value > objective.value).length : 0;
+  const nameOf = (row, i) => String(typeof x === "function" ? x(row, i) : row[x]);
+  const series = [{ key: p50, label: words.p50, color: "neutral" }, ...p95 ? [{ key: p95, label: words.p95, color: 1 }] : []];
+  return /* @__PURE__ */ jsxs4(View2, { style: styles2.root, children: [
+    /* @__PURE__ */ jsx4(
+      Headline,
+      {
+        resolved,
+        title,
+        hideTitle,
+        value: slowest ? formatDuration(slowest.value, resolved.locale) : "\u2014",
+        label: slowest ? fillIn(words.slowest, { name: nameOf(slowest.row, slowest.i) }) : void 0,
+        delta: objective ? over > 0 ? fillIn(words.over, { count: over }) : words.within : null,
+        way: objective ? over > 0 ? "up" : "flat" : null,
+        tone: over > 0 ? "danger" : "success"
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      BarChart,
+      {
+        ...props,
+        title,
+        hideTitle: true,
+        data,
+        x,
+        series,
+        format: (value, l) => formatDuration(value, l),
+        thresholds: objective ? [{ ...objective, tone: "danger" }] : void 0
+      }
+    )
+  ] });
+}
+function CreditUsage({ title, hideTitle, used, limit, format = "integer", daily, renewsAt, now, levels = [0.8, 0.95], labels: given, style, ...settings }) {
+  const words = { ...CREDIT_LABELS, ...given };
+  const resolved = useNativeSettings(settings);
+  const { theme, locale } = resolved;
+  const write = valueFormatter(format, locale);
+  const date = categoryFormatter("date", locale);
+  const ratio = limit > 0 ? Math.min(1, Math.max(0, used / limit)) : 0;
+  const level = quotaLevel(ratio, levels[0], levels[1]);
+  const remaining = Math.max(0, limit - used);
+  const usedText = fillIn(words.used, { used: write(used), percent: valueFormatter("percent", locale)(ratio) });
+  const left = daily ? daysLeft(remaining, daily) : null;
+  const runOut = left == null ? null : addDays(now ?? /* @__PURE__ */ new Date(), left);
+  const renews = renewsAt ? new Date(renewsAt) : null;
+  const projection = daily ? runOut && (!renews || runOut < renews) ? fillIn(words.runsOut, { date: date(runOut) }) : left == null ? words.steady : null : null;
+  const fill2 = level === "danger" ? theme.danger : level === "warning" ? theme.warning : theme.accent;
+  return /* @__PURE__ */ jsxs4(View2, { style: [styles2.root, style], children: [
+    /* @__PURE__ */ jsx4(Headline, { resolved, title, hideTitle, value: write(remaining), label: fillIn(words.remaining, { limit: write(limit) }) }),
+    /* @__PURE__ */ jsx4(
+      View2,
+      {
+        role: "meter",
+        "aria-label": title,
+        "aria-valuemin": 0,
+        "aria-valuemax": limit,
+        "aria-valuenow": Math.min(limit, Math.max(0, used)),
+        "aria-valuetext": usedText,
+        accessible: true,
+        style: [styles2.meter, { backgroundColor: theme.surface3 }],
+        children: /* @__PURE__ */ jsx4(View2, { style: [styles2.meterFill, { width: `${ratio * 100}%`, backgroundColor: fill2 }] })
+      }
+    ),
+    /* @__PURE__ */ jsxs4(View2, { style: styles2.row, children: [
+      /* @__PURE__ */ jsx4(Text2, { style: [styles2.small, { color: theme.textSecondary }], children: usedText }),
+      renews ? /* @__PURE__ */ jsx4(Text2, { style: [styles2.small, { color: theme.textSecondary }], children: fillIn(words.renews, { date: date(renews) }) }) : null
+    ] }),
+    daily && daily.length > 1 ? /* @__PURE__ */ jsx4(Sparkline, { ...settings, title: words.daily, data: daily, variant: "bar", format, height: 36 }) : null,
+    projection ? /* @__PURE__ */ jsx4(Text2, { style: [styles2.small, styles2.strong, { color: theme.textPrimary }], children: projection }) : null
+  ] });
+}
+function GoalProgress({ raised, goal, currency, supporters, timeLeft, labels: given, ...props }) {
+  const words = { ...GOAL_LABELS, ...given };
+  const resolved = useNativeSettings(props);
+  const format = roundMoney(currency);
+  const reached = goal > 0 && raised >= goal;
+  const facts = [
+    supporters != null ? fillIn(words.supporters, { count: valueFormatter("integer", resolved.locale)(supporters) }) : null,
+    reached ? words.reached : null,
+    timeLeft ? fillIn(words.left, { time: timeLeft }) : null
+  ].filter(Boolean);
+  return /* @__PURE__ */ jsxs4(View2, { style: styles2.root, children: [
+    /* @__PURE__ */ jsx4(Gauge, { ...props, value: raised, max: goal, format, caption: fillIn(words.raised, { goal: valueFormatter(format, resolved.locale)(goal) }), tone: reached ? "success" : "accent" }),
+    facts.length > 0 ? /* @__PURE__ */ jsx4(Text2, { style: [styles2.small, { color: resolved.theme.textSecondary, textAlign: "center" }], children: facts.join(" \xB7 ") }) : null
+  ] });
+}
+function PriceTicker({ bids, opening, openedAt, currency, reserve, timeFormat = "time", labels: given, title, hideTitle, ...props }) {
+  const words = { ...TICKER_LABELS, ...given };
+  const resolved = useNativeSettings(props);
+  const format = { style: "money", currency };
+  const write = valueFormatter(format, resolved.locale);
+  const model = tickerModel(bids, opening, openedAt);
+  const way = model.count > 0 ? direction(model.ratio) : null;
+  const signed = `${model.change > 0 ? "+" : ""}${write(model.change)}`;
+  const change = model.ratio == null ? signed : `${signed} (${signedPercent(model.ratio, resolved.locale)})`;
+  return /* @__PURE__ */ jsxs4(View2, { style: styles2.root, children: [
+    /* @__PURE__ */ jsx4(
+      Headline,
+      {
+        resolved,
+        title,
+        hideTitle,
+        value: write(model.current),
+        label: model.count > 0 ? words.current : words.opening,
+        delta: model.count > 0 ? fillIn(words.change, { change, count: model.count }) : null,
+        way,
+        tone: good(way, true)
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      LineChart,
+      {
+        ...props,
+        title,
+        hideTitle: true,
+        data: model.points,
+        x: "at",
+        y: "amount",
+        yLabel: words.price,
+        xFormat: timeFormat,
+        format,
+        curve: "step",
+        thresholds: reserve != null && model.current < reserve ? [{ value: reserve, label: words.reserve, tone: "warning" }] : void 0
+      }
+    )
+  ] });
+}
+var styles2 = StyleSheet2.create({
+  root: { gap: 8 },
+  head: { gap: 2 },
+  title: { fontSize: 14, fontWeight: "600", lineHeight: 20 },
+  kpi: { flexDirection: "row", flexWrap: "wrap", alignItems: "baseline", columnGap: 8 },
+  value: { fontSize: 24, lineHeight: 30, fontWeight: "800", fontVariant: ["tabular-nums"] },
+  delta: { flexDirection: "row", alignItems: "center", gap: 4 },
+  small: { fontSize: 12, lineHeight: 16, fontVariant: ["tabular-nums"] },
+  strong: { fontWeight: "600" },
+  meter: { height: 10, borderRadius: 999, overflow: "hidden" },
+  meterFill: { height: "100%", borderRadius: 999 },
+  row: { flexDirection: "row", flexWrap: "wrap", justifyContent: "space-between", columnGap: 12 }
+});
 export {
   AreaChart,
   BarChart,
   ChartsProvider,
+  CreditUsage,
   DEFAULT_LABELS,
+  DEFAULT_STATUSES,
   DonutChart,
+  EarningsChart,
   Gauge,
+  GoalProgress,
+  JobThroughput,
+  LatencyChart,
   LineChart,
   PieChart,
+  PriceTicker,
   Sparkline
 };
 //# sourceMappingURL=native.js.map