@siyahi/ui 0.1.9-next.2 → 0.1.9-next.21

package/agents/examples/breadcrumb.tsx

@@ -0,0 +1,28 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@siyahi/ui";
+
+export default function BreadcrumbExample() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#/components">Portfolio</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#/components">Equity</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>INFY</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}

package/agents/examples/button-states.tsx

@@ -0,0 +1,23 @@
+import { Button, Toggle } from "@siyahi/ui";
+import { DownloadIcon, Loader2Icon, PinIcon } from "lucide-react";
+
+export default function ButtonStatesExample() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Button disabled>Save</Button>
+      <Button variant="outline" disabled>
+        <DownloadIcon />
+        Export
+      </Button>
+      {/* Busy: the label stays and the icon spins, so the button keeps its width while the work runs. */}
+      <Button disabled aria-busy>
+        <Loader2Icon className="motion-safe:animate-spin" />
+        Saving
+      </Button>
+      <Toggle variant="outline" defaultPressed aria-label="Pin to top">
+        <PinIcon />
+        Pinned
+      </Toggle>
+    </div>
+  );
+}

package/agents/examples/button.tsx

@@ -0,0 +1,21 @@
+import { Button } from "@siyahi/ui";
+import { DownloadIcon, RefreshCwIcon } from "lucide-react";
+
+export default function ButtonExample() {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Button>Save</Button>
+      <Button variant="outline">
+        <DownloadIcon />
+        Export
+      </Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="destructive">Delete</Button>
+      <Button variant="link">Link</Button>
+      <Button variant="outline" size="icon" aria-label="Refresh">
+        <RefreshCwIcon />
+      </Button>
+    </div>
+  );
+}

package/agents/examples/calendar.tsx

@@ -0,0 +1,15 @@
+import { Calendar } from "@siyahi/ui";
+import { useState } from "react";
+
+export default function CalendarExample() {
+  const [date, setDate] = useState<Date | undefined>(new Date(2026, 9, 20));
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      defaultMonth={new Date(2026, 9, 1)}
+      className="w-fit rounded-lg border"
+    />
+  );
+}

package/agents/examples/callout.tsx

@@ -0,0 +1,33 @@
+import { Callout, Quote, WarningAlert, AlertDescription, AlertTitle } from "@siyahi/ui";
+import { LightbulbIcon, InfoIcon, TriangleAlertIcon, TrendingUpIcon, TrendingDownIcon } from "lucide-react";
+
+export default function CalloutExample() {
+  return (
+    <div className="grid max-w-2xl gap-3">
+      <Callout tone="accent" icon={<LightbulbIcon />} title="The takeaway">
+        Two of eleven gold rules made a profit in the final test; <strong>none</strong> held up in both metals.
+      </Callout>
+      <Callout icon={<InfoIcon />} title="How the test was run">
+        One mini lot per trade, after charges and a harsher assumed execution cost.
+      </Callout>
+      <Callout tone="warning" icon={<TriangleAlertIcon />} title="Do not use the combined result">
+        Its test used later information, so its profit claims are withdrawn.
+      </Callout>
+      <div className="grid gap-3 sm:grid-cols-2">
+        <Callout tone="positive" icon={<TrendingUpIcon />} title="Best rule">
+          A failed range break reverses: <strong>▲₹10,616</strong>.
+        </Callout>
+        <Callout tone="negative" icon={<TrendingDownIcon />} title="Worst rule">
+          Break the first-hour range: <strong>▼₹70,679</strong>.
+        </Callout>
+      </div>
+      <Quote source="eMudhra's incident notice, 21 Oct 2026">
+        The affected intermediate keys were generated with insufficient entropy and have been revoked.
+      </Quote>
+      <WarningAlert>
+        <AlertTitle>Ledger history is incomplete</AlertTitle>
+        <AlertDescription>Dhan's cash ledger starts in April 2024; earlier flows are missing.</AlertDescription>
+      </WarningAlert>
+    </div>
+  );
+}

package/agents/examples/card.tsx

@@ -0,0 +1,34 @@
+import {
+  Button,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  useFormat,
+} from "@siyahi/ui";
+import { DownloadIcon } from "lucide-react";
+
+export default function CardExample() {
+  const { money } = useFormat();
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Portfolio value</CardTitle>
+        <CardDescription>Across all accounts</CardDescription>
+        <CardAction>
+          <Button variant="outline" size="sm">
+            <DownloadIcon />
+            CSV
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <p className="text-3xl font-semibold">{money(4512300)}</p>
+      </CardContent>
+      <CardFooter className="text-muted-foreground">Updated after the market close</CardFooter>
+    </Card>
+  );
+}

package/agents/examples/change-bar.tsx

@@ -0,0 +1,104 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  ChangeBar,
+  DataTable,
+  DataTableBody,
+  DataTableCompactColumnsToggle,
+  DataTableFootnote,
+  DataTableHeader,
+  DataTableRoot,
+  DataTableSortHeader,
+  DataTableToolbarSection,
+  useFormat,
+  type DataTableColumnDef,
+} from "@siyahi/ui";
+
+interface Holding {
+  symbol: string;
+  /** Value at the close of 31 January and of 28 February, in rupees; made-up figures. */
+  january: number;
+  february: number;
+  change: number;
+}
+
+const holding = (symbol: string, january: number, february: number): Holding => ({
+  symbol,
+  january,
+  february,
+  change: february / january - 1,
+});
+
+const holdings: Holding[] = [
+  holding("ICICIBANK", 231900, 258000),
+  holding("HDFCBANK", 248300, 262500),
+  holding("TCS", 161300, 166000),
+  holding("NIFTYBEES", 250400, 255600),
+  holding("ITC", 283100, 276000),
+  holding("INFY", 241800, 224400),
+];
+
+// Every bar is a share of the column's largest move, and the column holds gains and losses, so the bars diverge.
+const largestChange = Math.max(...holdings.map((h) => Math.abs(h.change)));
+const diverging = holdings.some((h) => h.change < 0) && holdings.some((h) => h.change > 0);
+
+function Money({ amount, muted = false }: { amount: number; muted?: boolean }) {
+  const text = useFormat().money(amount);
+  return muted ? <span className="text-muted-foreground">{text}</span> : text;
+}
+
+const header = () => <DataTableSortHeader />;
+
+const columns: DataTableColumnDef<Holding>[] = [
+  { accessorKey: "symbol", header, size: 130, meta: { label: "Holding", compact: true } },
+  {
+    accessorKey: "january",
+    header,
+    size: 130,
+    meta: { label: "31 Jan", variant: "number" },
+    cell: ({ row }) => <Money amount={row.original.january} muted />,
+  },
+  {
+    accessorKey: "february",
+    header,
+    size: 130,
+    meta: { label: "28 Feb", variant: "number", compact: true },
+    cell: ({ row }) => <Money amount={row.original.february} />,
+  },
+  {
+    accessorKey: "change",
+    header,
+    size: 150,
+    meta: { label: "Change", variant: "number", compact: true },
+    cell: ({ row }) => <ChangeBar value={row.original.change} max={largestChange} diverging={diverging} />,
+  },
+];
+
+export default function ChangeBarExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>ICICIBANK rose 11.3% in February, INFY fell 7.2%</CardTitle>
+        <CardDescription>Each holding's value at the end of February against the end of January</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <DataTableRoot data={holdings} columns={columns}>
+          <DataTableToolbarSection>
+            <DataTableCompactColumnsToggle />
+          </DataTableToolbarSection>
+          <DataTable aria-label="February against January">
+            <DataTableHeader />
+            <DataTableBody />
+            <DataTableFootnote>
+              Each percent is the change on January's value, and the bar is its size against the largest move. Gains run
+              right of the centre line, losses left.
+            </DataTableFootnote>
+          </DataTable>
+        </DataTableRoot>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/chart-area.tsx

@@ -0,0 +1,39 @@
+import { AreaChartCard, ToggleGroup, ToggleGroupItem, useFormat, type ChartSeries } from "@siyahi/ui";
+
+const data = [
+  { month: "May", value: 3820000, invested: 3600000 },
+  { month: "Jun", value: 3950000, invested: 3685000 },
+  { month: "Jul", value: 4110000, invested: 3770000 },
+  { month: "Aug", value: 4020000, invested: 3855000 },
+  { month: "Sep", value: 4380000, invested: 3940000 },
+  { month: "Oct", value: 4512300, invested: 4025000 },
+];
+
+// The title states the finding, not the measure: what the reader would say after looking.
+// The first series fills; the money put in draws as a line over it.
+const series: ChartSeries<(typeof data)[number]> = [
+  { key: "value", label: "Value", color: "var(--chart-1)" },
+  { key: "invested", label: "Invested", color: "var(--chart-2)" },
+];
+
+export default function ChartAreaExample() {
+  const { money, moneyCompact } = useFormat();
+  return (
+    <AreaChartCard
+      title="₹4.9L ahead of the money put in"
+      description="Portfolio value against money invested, at each month end"
+      action={
+        <ToggleGroup defaultValue={["6M"]} variant="outline" size="sm" aria-label="Range">
+          <ToggleGroupItem value="6M">6M</ToggleGroupItem>
+          <ToggleGroupItem value="1Y">1Y</ToggleGroupItem>
+        </ToggleGroup>
+      }
+      data={data}
+      xKey="month"
+      series={series}
+      valueFormatter={money}
+      yTickFormatter={moneyCompact}
+      height={256}
+    />
+  );
+}

package/agents/examples/chart-bar-flows.tsx

@@ -0,0 +1,32 @@
+import { BarChartCard, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// Money into and out of the account each month; out is negative. Made-up figures.
+const data = [
+  { month: "Jul", in: 84000, out: -52000 },
+  { month: "Aug", in: 61000, out: -73000 },
+  { month: "Sep", in: 92000, out: -48000 },
+  { month: "Oct", in: 70000, out: -66000 },
+];
+
+// Money moving is not a gain or a loss, so in and out take chart colours, not green and red.
+const series: ChartSeries<(typeof data)[number]> = [
+  { key: "in", label: "In", color: "var(--chart-1)" },
+  { key: "out", label: "Out", color: "var(--chart-2)" },
+];
+
+export default function ChartBarFlowsExample() {
+  const { money, moneyCompact } = useFormat();
+  return (
+    <BarChartCard
+      title="Cash in and out by month"
+      description="Money in above the line, money out below it"
+      data={data}
+      xKey="month"
+      series={series}
+      stacked
+      valueFormatter={money}
+      yTickFormatter={moneyCompact}
+      height={256}
+    />
+  );
+}

package/agents/examples/chart-bar-hourly.tsx

@@ -0,0 +1,28 @@
+import { BarChartCard } from "@siyahi/ui";
+
+// Market hours in IST; each row is the hour an order was placed in.
+const data = [
+  { hour: 9, orders: 42 },
+  { hour: 10, orders: 31 },
+  { hour: 11, orders: 18 },
+  { hour: 12, orders: 12 },
+  { hour: 13, orders: 15 },
+  { hour: 14, orders: 24 },
+  { hour: 15, orders: 38 },
+];
+
+export default function ChartBarHourlyExample() {
+  return (
+    <BarChartCard
+      title="Orders by hour"
+      description="Last 30 days, by the hour each order was placed"
+      data={data}
+      xKey="hour"
+      xFormatter={(hour) => `${String(hour).padStart(2, "0")}:00`}
+      xLabel="Hour of day (IST)"
+      yLabel="Orders"
+      series={[{ key: "orders", label: "Orders", color: "var(--chart-1)" }]}
+      height={256}
+    />
+  );
+}

package/agents/examples/chart-bar-losses.tsx

@@ -0,0 +1,29 @@
+import { BarChartCard, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// F&O net realized per financial year, a loss every year; made-up figures.
+const data = [
+  { fy: "FY23", net: -48000 },
+  { fy: "FY24", net: -91000 },
+  { fy: "FY25", net: -27000 },
+  { fy: "FY26", net: -63000 },
+];
+
+const series: ChartSeries<(typeof data)[number]> = [
+  { key: "net", label: "F&O net realized", color: "var(--positive)", negativeColor: "var(--negative)" },
+];
+
+export default function ChartBarLossesExample() {
+  const { money, moneyCompact } = useFormat();
+  return (
+    <BarChartCard
+      title="F&O realized by financial year"
+      description="A loss every year, so every bar runs down from zero"
+      data={data}
+      xKey="fy"
+      series={series}
+      valueFormatter={money}
+      yTickFormatter={moneyCompact}
+      height={240}
+    />
+  );
+}

package/agents/examples/chart-bar-sectors.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { BarChartCard, ToggleGroup, ToggleGroupItem, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// Share of equity by sector against an index's weights; made-up figures.
+const WEIGHTS = {
+  "Nifty 50": [
+    { sector: "Financial Services", you: 0.34, index: 0.37 },
+    { sector: "Information Technology", you: 0.21, index: 0.13 },
+    { sector: "Oil, Gas & Consumable Fuels", you: 0.06, index: 0.1 },
+    { sector: "Fast Moving Consumer Goods", you: 0.12, index: 0.08 },
+    { sector: "Automobile and Auto Components", you: 0.09, index: 0.07 },
+    { sector: "Healthcare", you: 0.08, index: 0.04 },
+  ],
+  "Nifty 500": [
+    { sector: "Financial Services", you: 0.34, index: 0.31 },
+    { sector: "Information Technology", you: 0.21, index: 0.1 },
+    { sector: "Oil, Gas & Consumable Fuels", you: 0.06, index: 0.08 },
+    { sector: "Fast Moving Consumer Goods", you: 0.12, index: 0.07 },
+    { sector: "Automobile and Auto Components", you: 0.09, index: 0.07 },
+    { sector: "Healthcare", you: 0.08, index: 0.06 },
+  ],
+};
+type Index = keyof typeof WEIGHTS;
+type Row = (typeof WEIGHTS)[Index][number];
+
+export default function ChartBarSectorsExample() {
+  const { pct } = useFormat();
+  const [index, setIndex] = useState<Index>("Nifty 50");
+  const rows = WEIGHTS[index];
+  const series: ChartSeries<Row> = [
+    { key: "you", label: "You", color: "var(--chart-1)" },
+    { key: "index", label: index, color: "var(--chart-2)" },
+  ];
+  const gap = (row: Row) => {
+    const points = Math.abs(row.you - row.index) * 100;
+    return row.you >= row.index ? `▲${points.toFixed(1)} pts over` : `▼${points.toFixed(1)} pts under`;
+  };
+  return (
+    <BarChartCard
+      title="Sectors against the index"
+      description="Share of your equity and of the index, by sector"
+      action={
+        <ToggleGroup
+          value={[index]}
+          onValueChange={([next]) => {
+            // Pressing the selected index again would leave none selected; keep it.
+            if (next) setIndex(next as Index);
+          }}
+          variant="outline"
+          size="sm"
+          aria-label="Index"
+        >
+          <ToggleGroupItem value="Nifty 50">Nifty 50</ToggleGroupItem>
+          <ToggleGroupItem value="Nifty 500">Nifty 500</ToggleGroupItem>
+        </ToggleGroup>
+      }
+      horizontal
+      data={rows}
+      xKey="sector"
+      xTickDetail={(row) => `${pct(row.you)} vs ${pct(row.index)} · ${gap(row)}`}
+      series={series}
+      valueFormatter={(v) => pct(v)}
+      // A tick format puts the value axis along the bottom of the sideways bars.
+      yTickFormatter={(v) => pct(v, 0)}
+      // Sideways, y is still the value: the axis runs 0 to 40% and the cap is a value level.
+      yDomain={[0, 0.4]}
+      referenceLines={[{ y: 0.3, label: "cap 30%", labelPosition: "insideBottomRight" }]}
+      height={rows.length * 56 + 48}
+      footer={<p className="text-muted-foreground">Company shares only; ETFs and funds are left out.</p>}
+    />
+  );
+}

package/agents/examples/chart-bar-years.tsx

@@ -0,0 +1,40 @@
+import { useState } from "react";
+import { BarChartCard, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// Net realized gain per financial year (April to March); made-up figures.
+const data = [
+  { fy: "FY22", net: 142000 },
+  { fy: "FY23", net: 186000 },
+  { fy: "FY24", net: -164000 },
+  { fy: "FY25", net: 128000 },
+  { fy: "FY26", net: -121000 },
+];
+
+// A gain and a loss take the meaning colours; the arrow in each tick says the same without colour.
+const series: ChartSeries<(typeof data)[number]> = [
+  { key: "net", label: "Net realized", color: "var(--positive)", negativeColor: "var(--negative)" },
+];
+
+export default function ChartBarYearsExample() {
+  const { money, moneyCompact } = useFormat();
+  // The page owns the pick, so it can narrow the rest of the page to that year.
+  const [year, setYear] = useState<string | null>(null);
+  const signed = (v: number) => `${v < 0 ? "▼" : "▲"}${moneyCompact(Math.abs(v))}`;
+  return (
+    <BarChartCard
+      title="Realized by financial year"
+      description={
+        year ? `${year} picked; click it again for every year` : "April to March, gross. Click a year to pick it."
+      }
+      data={data}
+      xKey="fy"
+      xTickDetail={(row) => signed(row.net)}
+      selected={year}
+      onSelect={setYear}
+      series={series}
+      valueFormatter={money}
+      yTickFormatter={moneyCompact}
+      height={272}
+    />
+  );
+}

package/agents/examples/chart-bar.tsx

@@ -0,0 +1,56 @@
+import { useState } from "react";
+import { BarChartCard, ToggleGroup, ToggleGroupItem, useFormat, type ChartSeries } from "@siyahi/ui";
+
+const data = [
+  { quarter: "Q1", equity: 120000, debt: 40000, gold: 15000, cash: 9000, reits: 4000 },
+  { quarter: "Q2", equity: 95000, debt: 52000, gold: 20000, cash: 6000, reits: 3000 },
+  { quarter: "Q3", equity: 140000, debt: 38000, gold: 12000, cash: 11000, reits: 5000 },
+  { quarter: "Q4", equity: 160000, debt: 45000, gold: 25000, cash: 7000, reits: 2000 },
+];
+
+// Series take the slots in order: neighbours differ in lightness, slots two
+// apart differ in hue.
+const series: ChartSeries<(typeof data)[number]> = [
+  { key: "equity", label: "Equity", color: "var(--chart-1)" },
+  { key: "debt", label: "Debt", color: "var(--chart-2)" },
+  { key: "gold", label: "Gold", color: "var(--chart-3)" },
+  { key: "cash", label: "Cash", color: "var(--chart-4)" },
+  { key: "reits", label: "REITs", color: "var(--chart-5)" },
+];
+
+export default function ChartBarExample() {
+  const { money, moneyCompact } = useFormat();
+  const [layout, setLayout] = useState("grouped");
+  return (
+    <BarChartCard
+      title="Money invested by quarter"
+      description={
+        layout === "grouped"
+          ? "All five chart colours side by side, in series order"
+          : "All five chart colours stacked into the quarter's total"
+      }
+      action={
+        <ToggleGroup
+          value={[layout]}
+          onValueChange={([next]) => {
+            // Pressing the selected layout again would leave none selected; keep it.
+            if (next) setLayout(next);
+          }}
+          variant="outline"
+          size="sm"
+          aria-label="Layout"
+        >
+          <ToggleGroupItem value="grouped">Grouped</ToggleGroupItem>
+          <ToggleGroupItem value="stacked">Stacked</ToggleGroupItem>
+        </ToggleGroup>
+      }
+      data={data}
+      xKey="quarter"
+      series={series}
+      stacked={layout === "stacked"}
+      valueFormatter={money}
+      yTickFormatter={moneyCompact}
+      height={256}
+    />
+  );
+}

package/agents/examples/chart-category-ticks.tsx

@@ -0,0 +1,50 @@
+import { AreaChartCard, BarChartCard, LineChartCard, type SeriesChartProps } from "@siyahi/ui";
+
+const data = Array.from({ length: 84 }, (_, index) => ({
+  month: `${2019 + Math.floor(index / 12)}-${String((index % 12) + 1).padStart(2, "0")}`,
+  orders: 20 + ((index * 7) % 31),
+}));
+const props: SeriesChartProps<(typeof data)[number], "month"> = {
+  title: "Monthly orders, bars",
+  description: "Demo orders per month, 2019–2025; only April is labelled",
+  data,
+  xKey: "month",
+  xTicks: data.filter(({ month }) => month.endsWith("-04")).map(({ month }) => month),
+  xFormatter: (month) => `Apr ${month.slice(2, 4)}`,
+  xTooltipFormatter: (month) => month,
+  series: [{ key: "orders", label: "Orders", color: "var(--chart-1)" }],
+  height: 200,
+};
+
+export default function ChartCategoryTicksExample() {
+  return (
+    <div className="flex flex-col gap-4">
+      <BarChartCard {...props} />
+      <BarChartCard
+        {...props}
+        title="Monthly orders, sideways"
+        description="Demo orders per month in 2019; only April is labelled"
+        data={data.slice(0, 12)}
+        xTicks={["2019-04"]}
+        horizontal
+        height={300}
+      />
+      <BarChartCard
+        title="Orders by sector"
+        description="Demo orders; one long category label on a narrow chart"
+        data={[
+          { sector: "Information Technology and Services", orders: 100 },
+          { sector: "Other", orders: 50 },
+          { sector: "Third", orders: 70 },
+        ]}
+        xKey="sector"
+        xTicks={["Information Technology and Services"]}
+        series={[{ key: "orders", label: "Orders", color: "var(--chart-1)" }]}
+        horizontal
+        height={220}
+      />
+      <LineChartCard {...props} title="Monthly orders, line" />
+      <AreaChartCard {...props} title="Monthly orders, area" />
+    </div>
+  );
+}

package/agents/examples/chart-line-events.tsx

@@ -0,0 +1,47 @@
+import { LineChartCard, type ChartSeries } from "@siyahi/ui";
+
+// A sample every 15 s from 19:33:58; the numbers are made up for the catalogue.
+const START = (19 * 60 + 33) * 60 + 58;
+const PRESSURE = [
+  4, 18, 41, 58, 63, 66, 61, 70, 72, 68, 64, 71, 74, 69, 66, 62, 67, 73, 70, 65, 68, 71, 66, 63, 69, 72,
+];
+const data = PRESSURE.map((pressure, i) => ({ second: i * 15, pressure }));
+
+const series: ChartSeries<(typeof data)[number]> = [
+  { key: "pressure", label: "Full pressure", color: "var(--chart-1)" },
+];
+
+const pad = (n: number) => String(n).padStart(2, "0");
+
+function clock(second: number) {
+  const t = START + second;
+  return `${Math.floor(t / 3600)}:${pad(Math.floor(t / 60) % 60)}:${pad(t % 60)}`;
+}
+
+export default function ChartLineEventsExample() {
+  return (
+    <LineChartCard
+      title="Memory pressure of a test group, %"
+      description="avg10, sampled every 15 s"
+      data={data}
+      xKey="second"
+      // A numeric axis: ticks fall on whole minutes, 2 s after the first sample.
+      xDomain={[0, 390]}
+      xTicks={[2, 62, 122, 182, 242, 302, 362]}
+      xFormatter={(second) => clock(second).slice(0, 5)}
+      xTooltipFormatter={(second) => `${clock(second)} IST, 10 s average`}
+      series={series}
+      curve="linear"
+      valueFormatter={(v) => `${v}%`}
+      yDomain={[0, 100]}
+      yTicks={[0, 25, 50, 75, 100]}
+      referenceLines={[
+        { y: 80, label: "old limit, 80%" },
+        { y: 50, label: "new limit, 50%", emphasis: "strong" },
+        { x: 313, label: "limit 50%", labelPosition: "insideBottomRight" },
+        { x: 367, label: "killed", emphasis: "strong", labelPosition: "insideTopRight" },
+      ]}
+      height={224}
+    />
+  );
+}