@siyahi/ui 0.1.9-next.3 → 0.1.9-next.30

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

@@ -0,0 +1,28 @@
+import { BarChartCard } from "@siyahi/ui";
+
+// Opening 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";
+
+// A new product line's operating result 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: "Operating result", color: "var(--positive)", negativeColor: "var(--negative)" },
+];
+
+export default function ChartBarLossesExample() {
+  const { money, moneyCompact } = useFormat();
+  return (
+    <BarChartCard
+      title="Operating loss 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-teams.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { BarChartCard, ToggleGroup, ToggleGroupItem, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// Each team's share of this year's spend against a comparison; made-up figures.
+const SHARES = {
+  Plan: [
+    { team: "Engineering and Infrastructure", actual: 0.34, comparison: 0.37 },
+    { team: "Sales and Business Development", actual: 0.21, comparison: 0.13 },
+    { team: "Finance, Legal & Compliance", actual: 0.06, comparison: 0.1 },
+    { team: "Marketing and Communications", actual: 0.12, comparison: 0.08 },
+    { team: "Customer Support and Success", actual: 0.09, comparison: 0.07 },
+    { team: "Operations", actual: 0.08, comparison: 0.04 },
+  ],
+  "Last year": [
+    { team: "Engineering and Infrastructure", actual: 0.34, comparison: 0.31 },
+    { team: "Sales and Business Development", actual: 0.21, comparison: 0.1 },
+    { team: "Finance, Legal & Compliance", actual: 0.06, comparison: 0.08 },
+    { team: "Marketing and Communications", actual: 0.12, comparison: 0.07 },
+    { team: "Customer Support and Success", actual: 0.09, comparison: 0.07 },
+    { team: "Operations", actual: 0.08, comparison: 0.06 },
+  ],
+};
+type Comparison = keyof typeof SHARES;
+type Row = (typeof SHARES)[Comparison][number];
+
+export default function ChartBarTeamsExample() {
+  const { pct } = useFormat();
+  const [comparison, setComparison] = useState<Comparison>("Plan");
+  const rows = SHARES[comparison];
+  const series: ChartSeries<Row> = [
+    { key: "actual", label: "This year", color: "var(--chart-1)" },
+    { key: "comparison", label: comparison, color: "var(--chart-2)" },
+  ];
+  const gap = (row: Row) => {
+    const points = Math.abs(row.actual - row.comparison) * 100;
+    return row.actual >= row.comparison ? `+${points.toFixed(1)} pts over` : `\u2212${points.toFixed(1)} pts under`;
+  };
+  return (
+    <BarChartCard
+      title="Spend by team against plan or last year"
+      description="Each team's share of this year's spend and of the comparison"
+      action={
+        <ToggleGroup
+          value={[comparison]}
+          onValueChange={([next]) => {
+            // Pressing the selected comparison again would leave none selected; keep it.
+            if (next) setComparison(next as Comparison);
+          }}
+          variant="outline"
+          size="sm"
+          aria-label="Compare with"
+        >
+          <ToggleGroupItem value="Plan">Plan</ToggleGroupItem>
+          <ToggleGroupItem value="Last year">Last year</ToggleGroupItem>
+        </ToggleGroup>
+      }
+      horizontal
+      data={rows}
+      xKey="team"
+      xTickDetail={(row) => `${pct(row.actual)} vs ${pct(row.comparison)} · ${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">Salaries are left out; they are budgeted separately.</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 profit 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 profit", 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 ? "\u2212" : "+"}${moneyCompact(Math.abs(v))}`;
+  return (
+    <BarChartCard
+      title="Profit by financial year"
+      description={
+        year ? `${year} picked; click it again for every year` : "April to March, before tax. 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", online: 120000, retail: 40000, wholesale: 15000, marketplace: 9000, events: 4000 },
+  { quarter: "Q2", online: 95000, retail: 52000, wholesale: 20000, marketplace: 6000, events: 3000 },
+  { quarter: "Q3", online: 140000, retail: 38000, wholesale: 12000, marketplace: 11000, events: 5000 },
+  { quarter: "Q4", online: 160000, retail: 45000, wholesale: 25000, marketplace: 7000, events: 2000 },
+];
+
+// Series take the slots in order: neighbours differ in lightness, slots two
+// apart differ in hue.
+const series: ChartSeries<(typeof data)[number]> = [
+  { key: "online", label: "Online", color: "var(--chart-1)" },
+  { key: "retail", label: "Retail", color: "var(--chart-2)" },
+  { key: "wholesale", label: "Wholesale", color: "var(--chart-3)" },
+  { key: "marketplace", label: "Marketplace", color: "var(--chart-4)" },
+  { key: "events", label: "Events", color: "var(--chart-5)" },
+];
+
+export default function ChartBarExample() {
+  const { money, moneyCompact } = useFormat();
+  const [layout, setLayout] = useState("grouped");
+  return (
+    <BarChartCard
+      title="Revenue by channel and 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 category"
+        description="Demo orders; one long category label on a narrow chart"
+        data={[
+          { category: "Home Appliances and Kitchen Equipment", orders: 100 },
+          { category: "Other", orders: 50 },
+          { category: "Third", orders: 70 },
+        ]}
+        xKey="category"
+        xTicks={["Home Appliances and Kitchen Equipment"]}
+        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}
+    />
+  );
+}

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

@@ -0,0 +1,36 @@
+import { LineChartCard, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// Net worth's growth against the plan since May; November and December are a forecast.
+const worth = [
+  { month: "May", actual: 0, plan: 0 },
+  { month: "Jun", actual: 0.025, plan: 0.022 },
+  { month: "Jul", actual: 0.061, plan: 0.044 },
+  { month: "Aug", actual: 0.047, plan: 0.067 },
+  { month: "Sep", actual: 0.11, plan: 0.089 },
+  { month: "Oct", actual: 0.156, plan: 0.111 },
+  { month: "Nov", actual: 0.177, plan: 0.133 },
+  { month: "Dec", actual: 0.202, plan: 0.156 },
+];
+const series: ChartSeries<(typeof worth)[number]> = [
+  { key: "actual", label: "Net worth", color: "var(--chart-1)" },
+  { key: "plan", label: "Plan", color: "var(--chart-2)" },
+];
+
+// Today is a rule in the link colour; from forecastFrom the lines dash, a hatched band covers the stretch and the end
+// dots are hollow.
+export default function ChartLineForecastExample() {
+  const { pct } = useFormat();
+  return (
+    <LineChartCard
+      title="Growth against plan"
+      description="Since May, month-end; November and December are a forecast"
+      data={worth}
+      xKey="month"
+      series={series}
+      today="Oct"
+      forecastFrom="Oct"
+      valueFormatter={pct}
+      height={256}
+    />
+  );
+}

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

@@ -0,0 +1,39 @@
+import { Badge, LineChartCard, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// Monthly active users in the app's first year, made up for the catalogue: from a few hundred to tens of thousands.
+const data = [
+  { month: "Nov", users: 240 },
+  { month: "Dec", users: 410 },
+  { month: "Jan", users: 780 },
+  { month: "Feb", users: 1350 },
+  { month: "Mar", users: 2100 },
+  { month: "Apr", users: 3900 },
+  { month: "May", users: 6200 },
+  { month: "Jun", users: 9800 },
+  { month: "Jul", users: 14100 },
+  { month: "Aug", users: 21500 },
+  { month: "Sep", users: 30200 },
+  { month: "Oct", users: 46800 },
+];
+
+const series: ChartSeries<(typeof data)[number]> = [{ key: "users", label: "Active users", color: "var(--chart-1)" }];
+
+export default function ChartLineLogExample() {
+  const { count } = useFormat();
+  return (
+    <LineChartCard
+      title="Active users grew about 1.5× a month all year"
+      description="On log, steady growth is a straight line; Linear shows how much of it came in the last few months."
+      action={<Badge variant="outline">First year</Badge>}
+      data={data}
+      xKey="month"
+      series={series}
+      // Log is selected first; the buttons in the header let the reader switch.
+      yScale="log"
+      yScaleToggle
+      yLabel="Active users"
+      valueFormatter={count}
+      height={256}
+    />
+  );
+}

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

@@ -0,0 +1,114 @@
+import { LineChartCard, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// Eight funds' month-end growth; November and December are a forecast.
+const growth = [
+  { month: "May", flexi: 0, debt: 0, small: 0, intl: 0, liquid: 0, midcap: 0, nifty: 0, gold: 0 },
+  {
+    month: "Jun",
+    flexi: 0.018,
+    debt: 0.006,
+    small: 0.034,
+    intl: 0.012,
+    liquid: 0.005,
+    midcap: 0.022,
+    nifty: 0.025,
+    gold: 0.041,
+  },
+  {
+    month: "Jul",
+    flexi: 0.049,
+    debt: 0.013,
+    small: 0.012,
+    intl: 0.038,
+    liquid: 0.011,
+    midcap: 0.03,
+    nifty: 0.061,
+    gold: 0.072,
+  },
+  {
+    month: "Aug",
+    flexi: 0.058,
+    debt: 0.02,
+    small: -0.041,
+    intl: 0.066,
+    liquid: 0.017,
+    midcap: 0.011,
+    nifty: 0.047,
+    gold: 0.118,
+  },
+  {
+    month: "Sep",
+    flexi: 0.094,
+    debt: 0.027,
+    small: -0.018,
+    intl: 0.081,
+    liquid: 0.023,
+    midcap: 0.052,
+    nifty: 0.11,
+    gold: 0.153,
+  },
+  {
+    month: "Oct",
+    flexi: 0.141,
+    debt: 0.034,
+    small: -0.052,
+    intl: 0.119,
+    liquid: 0.029,
+    midcap: 0.078,
+    nifty: 0.156,
+    gold: 0.196,
+  },
+  {
+    month: "Nov",
+    flexi: 0.166,
+    debt: 0.043,
+    small: -0.04,
+    intl: 0.142,
+    liquid: 0.037,
+    midcap: 0.099,
+    nifty: 0.177,
+    gold: 0.221,
+  },
+  {
+    month: "Dec",
+    flexi: 0.189,
+    debt: 0.052,
+    small: -0.031,
+    intl: 0.164,
+    liquid: 0.046,
+    midcap: 0.12,
+    nifty: 0.202,
+    gold: 0.245,
+  },
+];
+
+// The palette has five colours, so past five the page names the few it is about in colour; the rest are muted, draw
+// first in grey, each still named at its end.
+const QUIET = "var(--muted-foreground)";
+const series: ChartSeries<(typeof growth)[number]> = [
+  { key: "flexi", label: "Flexi cap", color: QUIET },
+  { key: "debt", label: "Debt", color: QUIET },
+  { key: "small", label: "Small cap", color: QUIET },
+  { key: "intl", label: "International", color: QUIET },
+  { key: "liquid", label: "Liquid", color: QUIET },
+  { key: "midcap", label: "Mid cap", color: QUIET },
+  { key: "nifty", label: "Nifty 50", color: "var(--chart-1)" },
+  { key: "gold", label: "Gold", color: "var(--chart-2)" },
+];
+
+export default function ChartLineQuietExample() {
+  const { pct } = useFormat();
+  return (
+    <LineChartCard
+      title="Growth by fund"
+      description="Eight funds; the two you are watching in colour"
+      data={growth}
+      xKey="month"
+      series={series}
+      today="Oct"
+      forecastFrom="Oct"
+      valueFormatter={pct}
+      height={256}
+    />
+  );
+}

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

@@ -0,0 +1,41 @@
+import { LineChartCard, type ChartSeries } from "@siyahi/ui";
+
+// A sar sample every 10 minutes from 15:00; the numbers are made up for the catalogue.
+const data = [
+  { minute: 0, used: 4.1, anon: 2.9 },
+  { minute: 10, used: 4.3, anon: 3.1 },
+  { minute: 20, used: 4.6, anon: 3.4 },
+  { minute: 30, used: 5.2, anon: 4.2 },
+  { minute: 40, used: 7.8, anon: 7.1 },
+  { minute: 50, used: 8.1, anon: 7.6 },
+  { minute: 60, used: 6.2, anon: 5.3 },
+  { minute: 70, used: 4.4, anon: 3.2 },
+];
+
+const series: ChartSeries<(typeof data)[number]> = [
+  { key: "used", label: "Used", color: "var(--chart-1)" },
+  { key: "anon", label: "Anon", color: "var(--chart-2)" },
+];
+
+const clock = (minute: number) => `${Math.floor(15 + minute / 60)}:${String(minute % 60).padStart(2, "0")}`;
+
+export default function ChartLineTimelineExample() {
+  return (
+    <LineChartCard
+      title="Memory in use, GiB"
+      description="sar -r. Used excludes cache; anon is program memory."
+      data={data}
+      xKey="minute"
+      // Ticks on both ends of the domain: the first sits at the plot's left edge.
+      xDomain={[0, 70]}
+      xTicks={[0, 10, 20, 30, 40, 50, 60, 70]}
+      xFormatter={clock}
+      xTooltipFormatter={(minute) => `${clock(minute)} IST, 10-min average`}
+      series={series}
+      valueFormatter={(v) => v.toFixed(1)}
+      yTickFormatter={(v) => v.toFixed(0)}
+      curve="linear"
+      height={192}
+    />
+  );
+}

package/agents/examples/chart-line.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { LineChartCard, ToggleGroup, ToggleGroupItem, useFormat, type ChartSeries } from "@siyahi/ui";
+
+const cumulative = [
+  { month: "May", store: 0.012, category: 0.008 },
+  { month: "Jun", store: 0.021, category: 0.015 },
+  { month: "Jul", store: 0.034, category: 0.029 },
+  { month: "Aug", store: -0.006, category: 0.004 },
+  { month: "Sep", store: 0.041, category: 0.031 },
+  { month: "Oct", store: 0.052, category: 0.036 },
+];
+
+const monthly = [
+  { month: "May", store: 0.012, category: 0.008 },
+  { month: "Jun", store: 0.009, category: 0.007 },
+  { month: "Jul", store: 0.013, category: 0.014 },
+  { month: "Aug", store: -0.039, category: -0.024 },
+  { month: "Sep", store: 0.047, category: 0.027 },
+  { month: "Oct", store: 0.011, category: 0.005 },
+];
+
+const series: ChartSeries<(typeof cumulative)[number]> = [
+  { key: "store", label: "Our store", color: "var(--chart-1)" },
+  { key: "category", label: "Category average", color: "var(--chart-2)" },
+];
+
+export default function ChartLineExample() {
+  const { pct } = useFormat();
+  const [mode, setMode] = useState("cumulative");
+  return (
+    <LineChartCard
+      title="Sales growth against the category"
+      description={mode === "cumulative" ? "Cumulative, from the start of May" : "Each month on its own"}
+      action={
+        <ToggleGroup
+          value={[mode]}
+          onValueChange={([next]) => {
+            // Pressing the selected mode again would leave none selected; keep it.
+            if (next) setMode(next);
+          }}
+          variant="outline"
+          size="sm"
+          aria-label="Mode"
+        >
+          <ToggleGroupItem value="cumulative">Cumulative growth</ToggleGroupItem>
+          <ToggleGroupItem value="monthly">Monthly growth</ToggleGroupItem>
+        </ToggleGroup>
+      }
+      data={mode === "cumulative" ? cumulative : monthly}
+      xKey="month"
+      series={series}
+      // A formatter goes in as it is: the card calls it with the value alone.
+      valueFormatter={pct}
+      height={256}
+    />
+  );
+}