prime-ui-kit 0.13.1 → 0.15.0

package/src/components/card/examples/screen.tsx

@@ -0,0 +1,362 @@
+/** A dashboard: the title, a line of data, the period switch and the report in the app header; one grid of KPI tiles that cross-fade to the new period, a revenue trend, invoiced against paid beside two panels, and the latest payments with a link to the list — `AppHeader.Tools`, `PageContent.Grid`. */
+import {
+  AppHeader,
+  Badge,
+  Button,
+  Card,
+  ChartFrame,
+  type ChartFrameSeries,
+  Crossfade,
+  chartColors,
+  DataTable,
+  type DataTableColumn,
+  Icon,
+  LinkButton,
+  PageContent,
+  PageToolbar,
+  ProgressBar,
+  type ProgressSegment,
+  SegmentedControl,
+  Sparkline,
+  type SparklinePoint,
+  Typography,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./screen.module.css";
+
+type Period = "week" | "month" | "quarter";
+type Payment = { id: string; client: string; date: string; amount: number; late: boolean };
+
+const KPIS: Record<
+  Period,
+  { label: string; value: string; delta: string; tone: "success" | "danger" | "neutral" }[]
+> = {
+  week: [
+    { label: "Выручка", value: "2,1 млн ₽", delta: "+6% к прошлой неделе", tone: "success" },
+    { label: "Оплачено счетов", value: "54", delta: "+4", tone: "success" },
+    { label: "Средний чек", value: "38 900 ₽", delta: "без изменений", tone: "neutral" },
+    { label: "Просрочено", value: "1,2 млн ₽", delta: "+180 тыс. ₽", tone: "danger" },
+  ],
+  month: [
+    { label: "Выручка", value: "8,4 млн ₽", delta: "+12% к сентябрю", tone: "success" },
+    { label: "Оплачено счетов", value: "214", delta: "+17", tone: "success" },
+    { label: "Средний чек", value: "39 300 ₽", delta: "−3% к сентябрю", tone: "danger" },
+    { label: "Просрочено", value: "1,2 млн ₽", delta: "−340 тыс. ₽", tone: "success" },
+  ],
+  quarter: [
+    { label: "Выручка", value: "24,6 млн ₽", delta: "+21% ко II кварталу", tone: "success" },
+    { label: "Оплачено счетов", value: "631", delta: "+88", tone: "success" },
+    { label: "Средний чек", value: "39 000 ₽", delta: "+1%", tone: "neutral" },
+    { label: "Просрочено", value: "1,2 млн ₽", delta: "−1,1 млн ₽", tone: "success" },
+  ],
+};
+
+const MONTHS = ["янв", "фев", "мар", "апр", "мая", "июн", "июл", "авг", "сен", "окт", "ноя", "дек"];
+
+/** Daily revenue up to 8 October 2026: `days` points ending that day, a deterministic wave. */
+function dailyRevenue(days: number, base: number): SparklinePoint[] {
+  return Array.from({ length: days }, (_, i) => {
+    const day = new Date(2026, 9, 8 - (days - 1 - i));
+    const wave = Math.sin(i / 2.3) * 0.12 + Math.sin(i / 0.9) * 0.05 + i / days / 6;
+    return {
+      label: `${day.getDate()} ${MONTHS[day.getMonth()]}`,
+      value: Math.round((base * (1 + wave)) / 1000) * 1000,
+    };
+  });
+}
+
+const REVENUE: Record<Period, SparklinePoint[]> = {
+  week: dailyRevenue(7, 300_000),
+  month: dailyRevenue(30, 280_000),
+  quarter: dailyRevenue(90, 270_000),
+};
+
+const formatRubles = (value: number) => `${value.toLocaleString("ru-RU")} ₽`;
+
+const BILLING_SERIES: ChartFrameSeries[] = [
+  { id: "invoiced", label: "Выставлено" },
+  { id: "paid", label: "Оплачено" },
+];
+
+/** Invoiced and paid, in millions of rubles, by the buckets of each period. */
+const BILLING: Record<Period, { label: string; invoiced: number; paid: number }[]> = {
+  week: [
+    { label: "пн", invoiced: 0.42, paid: 0.31 },
+    { label: "вт", invoiced: 0.38, paid: 0.4 },
+    { label: "ср", invoiced: 0.51, paid: 0.36 },
+    { label: "чт", invoiced: 0.47, paid: 0.44 },
+    { label: "пт", invoiced: 0.56, paid: 0.52 },
+  ],
+  month: [
+    { label: "нед 37", invoiced: 2.1, paid: 1.8 },
+    { label: "нед 38", invoiced: 2.4, paid: 2.0 },
+    { label: "нед 39", invoiced: 1.9, paid: 2.2 },
+    { label: "нед 40", invoiced: 2.6, paid: 2.1 },
+  ],
+  quarter: [
+    { label: "авг", invoiced: 7.8, paid: 6.9 },
+    { label: "сен", invoiced: 8.1, paid: 7.6 },
+    { label: "окт", invoiced: 8.9, paid: 8.4 },
+  ],
+};
+
+const BILLING_MARGIN = { top: 8, bottom: 24, left: 36 };
+
+const formatMillionsShort = (value: number) => `${value.toLocaleString("ru-RU")} млн ₽`;
+
+const PLAN = [
+  { manager: "Анна Климова", value: 92 },
+  { manager: "Илья Петров", value: 74 },
+  { manager: "Марат Хасанов", value: 48 },
+];
+
+/** Display of an amount in millions: «5,1 млн ₽». */
+const formatMillions = (value: number) => `${String(value).replace(".", ",")} млн ₽`;
+
+const RECEIVABLES: ProgressSegment[] = [
+  { value: 5.1, label: "В срок", tone: "success" },
+  { value: 1.9, label: "До 30 дней", tone: "warning" },
+  { value: 1.2, label: "Больше 30 дней", tone: "danger" },
+];
+
+const PAYMENTS: Payment[] = [
+  { id: "p1", client: "ООО «Мостострой»", date: "7 окт.", amount: 2_480_000, late: false },
+  { id: "p2", client: "АО «Волга-Энерго»", date: "6 окт.", amount: 1_095_000, late: false },
+  { id: "p3", client: "ООО «Логистик Плюс»", date: "5 окт.", amount: 312_000, late: true },
+  { id: "p4", client: "ООО «Гранит»", date: "3 окт.", amount: 94_750, late: false },
+];
+
+const MONEY = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Payment>[] = [
+  {
+    id: "client",
+    header: "Клиент",
+    cell: (row) => (
+      <span className={styles.client}>
+        {row.client}
+        {row.late ? <Badge.Root color="orange">С опозданием</Badge.Root> : null}
+      </span>
+    ),
+  },
+  { id: "date", header: "Дата", accessor: "date", numeric: true, headerAlign: "end" },
+  {
+    id: "amount",
+    header: "Сумма",
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => MONEY.format(row.amount),
+  },
+];
+
+export default function CardScreenExample() {
+  const [period, setPeriod] = React.useState<Period>("month");
+
+  return (
+    <>
+      {/* In an app this header fills the shell's `header` slot and carries the page: the only h1,
+          a line of data under it and the page's tools; main has no PageContent.Header. */}
+      <AppHeader.Root>
+        <AppHeader.Start>
+          <AppHeader.Title>
+            Обзор
+            <AppHeader.Description>Продажи и оплаты · на 8 октября, 9:40</AppHeader.Description>
+          </AppHeader.Title>
+        </AppHeader.Start>
+        <AppHeader.Tools>
+          <PageToolbar.Root aria-label="Обзор">
+            <PageToolbar.View>
+              <SegmentedControl.Root
+                aria-label="Период"
+                value={period}
+                onValueChange={(next) => setPeriod(next as Period)}
+              >
+                <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
+                <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
+                <SegmentedControl.Item value="quarter">Квартал</SegmentedControl.Item>
+              </SegmentedControl.Root>
+            </PageToolbar.View>
+            <PageToolbar.Actions>
+              <Button.Root variant="soft" tone="neutral">
+                <Button.Icon>
+                  <Icon name="action.download" />
+                </Button.Icon>
+                Отчёт
+              </Button.Root>
+            </PageToolbar.Actions>
+          </PageToolbar.Root>
+        </AppHeader.Tools>
+      </AppHeader.Root>
+
+      <PageContent.Root>
+        <PageContent.Body>
+          {/* One board: every tile of the screen in one grid, 16 apart on both axes. */}
+          <PageContent.Grid>
+            {KPIS[period].map((kpi) => (
+              <PageContent.Cell key={kpi.label} span={3}>
+                {/* Another period is another set of values: the tile cross-fades instead of flipping. */}
+                <Crossfade state={period}>
+                  <Card.Root variant="stat-trend">
+                    <Card.Label>{kpi.label}</Card.Label>
+                    <Card.Value>{kpi.value}</Card.Value>
+                    <Card.Delta tone={kpi.tone}>{kpi.delta}</Card.Delta>
+                  </Card.Root>
+                </Crossfade>
+              </PageContent.Cell>
+            ))}
+
+            <PageContent.Cell>
+              <Card.Root variant="panel">
+                <Card.Body>
+                  <Sparkline
+                    data={REVENUE[period]}
+                    label="Выручка по дням"
+                    summary="sum"
+                    formatValue={formatRubles}
+                  />
+                </Card.Body>
+              </Card.Root>
+            </PageContent.Cell>
+
+            {/* The chart spans two rows beside the two panels and fills their height. */}
+            <PageContent.Cell span={8} rows={2}>
+              <ChartFrame.Root series={BILLING_SERIES} formatValue={formatMillionsShort}>
+                <ChartFrame.Header>
+                  <ChartFrame.Title as="h2">Выставлено и оплачено</ChartFrame.Title>
+                  <ChartFrame.Description>Счета за период, млн ₽</ChartFrame.Description>
+                </ChartFrame.Header>
+                <ChartFrame.Plot
+                  height="fill"
+                  renderPlot={({ width, height, series }) => {
+                    const rows = BILLING[period];
+                    const top = Math.ceil(Math.max(...rows.map((row) => row.invoiced)));
+                    const innerH = height - BILLING_MARGIN.top - BILLING_MARGIN.bottom;
+                    const band = (width - BILLING_MARGIN.left) / rows.length;
+                    const bar = Math.min(28, (band - 16) / series.length);
+                    const y = (value: number) => BILLING_MARGIN.top + innerH * (1 - value / top);
+                    return (
+                      <svg width={width} height={height} aria-hidden="true">
+                        {[0, top / 2, top].map((tick) => (
+                          <g key={tick}>
+                            <line
+                              x1={BILLING_MARGIN.left}
+                              x2={width}
+                              y1={y(tick)}
+                              y2={y(tick)}
+                              stroke={tick === 0 ? chartColors.axis : chartColors.grid}
+                            />
+                            <text
+                              x={BILLING_MARGIN.left - 8}
+                              y={y(tick)}
+                              textAnchor="end"
+                              dominantBaseline="middle"
+                            >
+                              {tick.toLocaleString("ru-RU")}
+                            </text>
+                          </g>
+                        ))}
+                        {rows.map((row, i) => {
+                          const center = BILLING_MARGIN.left + band * i + band / 2;
+                          return (
+                            <g key={row.label}>
+                              {series.map((s, j) => {
+                                const value = s.id === "paid" ? row.paid : row.invoiced;
+                                return (
+                                  <rect
+                                    key={s.id}
+                                    data-hidden={s.hidden}
+                                    x={center - (bar * series.length) / 2 + bar * j}
+                                    y={y(value)}
+                                    width={bar - 2}
+                                    height={y(0) - y(value)}
+                                    rx={2}
+                                    fill={s.color}
+                                  />
+                                );
+                              })}
+                              <text x={center} y={height - 4} textAnchor="middle">
+                                {row.label}
+                              </text>
+                            </g>
+                          );
+                        })}
+                      </svg>
+                    );
+                  }}
+                />
+                <ChartFrame.Legend />
+                <ChartFrame.Table
+                  rows={BILLING[period].map((row) => ({
+                    label: row.label,
+                    values: { invoiced: row.invoiced, paid: row.paid },
+                  }))}
+                />
+              </ChartFrame.Root>
+            </PageContent.Cell>
+
+            <PageContent.Cell span={4}>
+              <Card.Root variant="panel">
+                <Card.Header>
+                  <Card.Title as="h2">План продаж</Card.Title>
+                  <Typography as="span" variant="caption" tone="muted">
+                    Октябрь
+                  </Typography>
+                </Card.Header>
+                <Card.Body>
+                  <div className={styles.bars}>
+                    {PLAN.map((row) => (
+                      <ProgressBar
+                        key={row.manager}
+                        value={row.value}
+                        label={row.manager}
+                        tone={row.value < 50 ? "warning" : "accent"}
+                        showValue
+                      />
+                    ))}
+                  </div>
+                </Card.Body>
+              </Card.Root>
+            </PageContent.Cell>
+
+            <PageContent.Cell span={4}>
+              <Card.Root variant="panel">
+                <Card.Header>
+                  <Card.Title as="h2">Дебиторка</Card.Title>
+                  <Typography as="span" variant="caption" tone="muted">
+                    8,2 млн ₽
+                  </Typography>
+                </Card.Header>
+                <Card.Body>
+                  <ProgressBar
+                    segments={RECEIVABLES}
+                    label="По сроку оплаты"
+                    legend
+                    formatValue={formatMillions}
+                  />
+                </Card.Body>
+              </Card.Root>
+            </PageContent.Cell>
+          </PageContent.Grid>
+
+          {/* A new topic: a titled section, set off by more air than the tiles. */}
+          <PageContent.Section label="Последние оплаты">
+            <PageContent.Actions>
+              <LinkButton href="#invoices">Все счета</LinkButton>
+            </PageContent.Actions>
+            <DataTable
+              columns={COLUMNS}
+              rows={PAYMENTS}
+              getRowKey={(row) => row.id}
+              paging="none"
+            />
+          </PageContent.Section>
+        </PageContent.Body>
+      </PageContent.Root>
+    </>
+  );
+}

package/src/components/card/examples/variants.tsx

@@ -1,4 +1,4 @@
-/** KPI templates: an icon tile with a value, a badge with a value in the header row, and a large value with its change and a reference line — `variant`, `Card.Delta`, `Card.Meta`. */
+/** KPI templates: an icon tile with a value, a badge with a value in the header row, and a large value with its change in every tone and a reference line — `variant`, `Card.Delta`, `tone`, `Card.Meta`. */
 import { Badge, Card, Icon } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -35,6 +35,20 @@ export default function CardVariantsExample() {
         <Card.Delta tone="danger">+0,6 п. п. за неделю</Card.Delta>
         <Card.Meta>Ушло 38 из 1 226 клиентов</Card.Meta>
       </Card.Root>
+
+      <Card.Root variant="stat-trend">
+        <Card.Label>Первый ответ поддержки</Card.Label>
+        <Card.Value>3,4 ч</Card.Value>
+        <Card.Delta tone="warning">+40 мин — близко к SLA 4 ч</Card.Delta>
+        <Card.Meta>Открыто 62 обращения</Card.Meta>
+      </Card.Root>
+
+      <Card.Root variant="stat-trend">
+        <Card.Label>Средний чек</Card.Label>
+        <Card.Value>38 900 ₽</Card.Value>
+        <Card.Delta>без изменений</Card.Delta>
+        <Card.Meta>Оплачено 214 счетов</Card.Meta>
+      </Card.Root>
     </div>
   );
 }

package/src/components/chart-frame/COMPONENT.md

@@ -33,7 +33,7 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 ├─ ChartFrame.Plot           <div>; fixed height, measured; Crossfade of plot / Skeleton / empty / error
 ├─ ChartFrame.Legend         <ul>; a toggle button per series: swatch · name · value
 ├─ ChartFrame.Table          <table>; visually hidden data, ready state only
-└─ ChartFrame.Tooltip        <div>; rendered by the chart library's tooltip hook, inside the Root
+└─ ChartFrame.Tooltip        <div>; with `point` portaled beside that point of the plot, else in place for a library's tooltip hook
 ```
 
 ## API
@@ -104,7 +104,7 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `height` | `number` | `240, 160 under 30rem` | Height of the plot area in px. |
+| `height` | `number \| "fill"` | `240, 160 under 30rem` | Height of the plot area in px. `fill` takes the free height of a stretched panel (a `PageContent.Cell` with `rows`), the default height at least. |
 | `renderPlot` | `(area: ChartFramePlotArea) => ReactNode` | — | Renders the chart at the measured `{ width, height }` with every series `{ id, label, color, hidden }` — for libraries that need explicit sizes (Chart.js, visx). |
 | `children` | `ReactNode` | — | A chart that sizes itself to its container (an SVG with a `viewBox`, `ResponsiveContainer`); it fills the area. |
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className` and the other div attributes. |
@@ -118,12 +118,13 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 | `…rest` | `HTMLAttributes<HTMLUListElement>` | — | `className` and the other ul attributes. |
 
 ### ChartFrame.Tooltip
-`ref` → `HTMLDivElement`. The kit's tooltip body for a chart library's custom tooltip (Recharts `content`, visx `TooltipWithBounds`). The library positions it; render it inside `ChartFrame.Root`.
+`ref` → `HTMLDivElement`. The kit's chart tooltip: with `point` it floats beside that point of the plot; without it it is the body for a library's tooltip hook (Recharts `content`). Inside `ChartFrame.Root`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `label` | `string` | — | The point the rows belong to («Неделя 41»). |
 | `items` | `ChartFrameTooltipItem[]` | — (required) | `{ id, value }` per series at that point; name and color come from the root's series, rows of hidden series are left out, values go through `formatValue`. |
+| `point` | `{ x: number; y: number } \| null` | — | A point in `renderPlot` coordinates (the pointer, or the point the arrows reached): the tooltip floats right of it, left only without room; `null` hides it. Floating, it is `aria-hidden`. |
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className` and the other div attributes. |
 
 ### ChartFrame.Table
@@ -177,7 +178,7 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 - The header puts the title and the description in the first column and the actions at the end; under 24rem of panel width the actions drop under the description.
 - The plot is 240 px high (160 px under 30rem of panel width) unless `height` is set; it never changes height between states.
 - Legend entries wrap onto more lines; each has a 44 px touch hit area on coarse pointers.
-- `ChartFrame.Tooltip` is a floating panel with the point's label over rows of swatch · series name · value; the chart library positions it (Recharts `content`, visx `TooltipWithBounds`, a hand-drawn overlay).
+- `ChartFrame.Tooltip` is the floating layer of the ladder with the point's label over rows of swatch · series name · value. With `point` the kit places it like every anchored layer (`usePosition`): right of the point at its height, on the left only where the right has no room in the viewport, inside the viewport, following the plot on scroll. Without `point` the chart library positions it (Recharts `content`).
 - SVG `<text>` in the plot takes the caption type in `--prime-color-text-muted`; a class of your own still wins.
 - Works from 320 px; the container queries are on the panel's own width, so it adapts in a grid cell as on a phone.
 
@@ -195,6 +196,7 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 - The root is a `<figure>` named by `ChartFrame.Title` and described by `ChartFrame.Description`; `aria-busy` while loading.
 - A legend entry is a button with `aria-pressed` — pressed while its series is shown; the legend list is named by `labels.legend`. A hidden series differs by the swatch's shape (a ring) and a quiet name, never by color alone.
 - `ChartFrame.Table` is a visually hidden table with the chart's data, named by the title: a row header per point, a column per shown series, values through `formatValue`.
+- A `ChartFrame.Tooltip` with `point` is `aria-hidden` and passive (no focus, no presses; `Escape` hides it until the point moves): it repeats what the plot speaks — give a focusable plot an `aria-valuetext`, like the slider in the tooltip example.
 - The empty state is `role="status"`, the error `role="alert"` with the retry button.
 - The drawing is the library's: hide a decorative SVG (`aria-hidden`) when `ChartFrame.Table` carries the data; marks you make focusable need their own `aria-label`.
 
@@ -213,8 +215,9 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 | Example | Shows |
 |---|---|
 | [overview.tsx](examples/overview.tsx) | Revenue by month as a hand-drawn SVG line chart in a dashboard panel: the headline with its change, a period switch, a legend that turns series off and a table for screen readers — `series`, `formatValue`, `renderPlot`. |
-| [tooltip.tsx](examples/tooltip.tsx) | Invoices by week as grouped bars: pointing at a week or stepping with the arrows shows the kit tooltip body with a row per series — `ChartFrame.Tooltip`, `items`. |
-| [states.tsx](examples/states.tsx) | Loading, empty, error and data swap in the plot's place without moving the panel; the error retries — `state`, `onRetry`. |
+| [tooltip.tsx](examples/tooltip.tsx) | Invoices by week as grouped bars: the kit tooltip follows the pointer with a row per series, the arrows step through the weeks — `ChartFrame.Tooltip`, `items`, `point`. |
+| [fill-height.tsx](examples/fill-height.tsx) | Revenue against the plan beside two KPI tiles: the plot takes the height of the stretched grid cell, and the plan line starts hidden until the legend turns it on — `height`, `defaultHiddenSeries`. |
+| [states.tsx](examples/states.tsx) | Loading, empty, error and data swap in the plot's place without moving the panel; the error retries, and the legend of the one series only names it — `state`, `onRetry`, `readOnly`. |
 | [controlled.tsx](examples/controlled.tsx) | Lead sources with totals in the legend; the hidden series live in the page state and one button shows them all again — `hiddenSeries`, `onHiddenSeriesChange`. |
 | [narrow.tsx](examples/narrow.tsx) | A 320px column: the actions drop under the title, the plot gets lower and a self-sizing SVG stretches to it — `children`, `height`. |
 
@@ -249,7 +252,7 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
   <ChartFrame.Table rows={tableRows} />
 </ChartFrame.Root>
 ```
-ECharts and Chart.js take the same `width`, `height` and `series[i].color`; their HTML tooltips are strings, so use their own tooltip there or a React overlay with `ChartFrame.Tooltip`.
+ECharts and Chart.js take the same `width`, `height` and `series[i].color`; their HTML tooltips are strings, so use their own tooltip there or `ChartFrame.Tooltip` with `point` from their hover event.
 
 ## Mistakes
 - Colors picked per chart (`#3b82f6`) → `series[i].color` from `renderPlot`, or `chartColors`; status tones (`success`, `danger`) never paint categories.
@@ -259,7 +262,8 @@ ECharts and Chart.js take the same `width`, `height` and `series[i].color`; thei
 - A legend for a single series → the title already names it; leave `ChartFrame.Legend` out.
 - Two y-axes of different measures in one frame → two ChartFrames side by side.
 - The data only in the drawing → add `ChartFrame.Table`; screen readers cannot read a plot.
+- A hand-drawn chart with its tooltip placed by hand (a `foreignObject`, clamped coordinates) → `ChartFrame.Tooltip` with `point`: it flips only when out of room and never jumps at the middle.
 
 ## Related
-- **Built from:** [Crossfade](../crossfade/COMPONENT.md) (state swap), [Skeleton](../skeleton/COMPONENT.md) (loading), [EmptyPage](../empty-page/COMPONENT.md) (empty, error, retry), `Icon`, `chartColors`
+- **Built from:** [Crossfade](../crossfade/COMPONENT.md) (state swap), [Skeleton](../skeleton/COMPONENT.md) (loading), [EmptyPage](../empty-page/COMPONENT.md) (empty, error, retry), `Icon`, `chartColors`, `ChartTooltip` (the chart tooltip shared with Sparkline)
 - **See also:** [Sparkline](../sparkline/COMPONENT.md), [Card](../card/COMPONENT.md), [ProgressBar](../progress-bar/COMPONENT.md), [DataTable](../data-table/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md)

package/src/components/chart-frame/examples/fill-height.tsx

@@ -0,0 +1,119 @@
+/** Revenue against the plan beside two KPI tiles: the plot takes the height of the stretched grid cell, and the plan line starts hidden until the legend turns it on — `height`, `defaultHiddenSeries`. */
+import { Card, ChartFrame, type ChartFrameSeries, chartColors, PageContent } from "prime-ui-kit";
+
+const SERIES: ChartFrameSeries[] = [
+  { id: "fact", label: "Факт" },
+  { id: "plan", label: "План" },
+];
+
+const MONTHS = [
+  { month: "май", fact: 6.2, plan: 6.0 },
+  { month: "июн", fact: 6.8, plan: 6.5 },
+  { month: "июл", fact: 6.4, plan: 7.0 },
+  { month: "авг", fact: 7.1, plan: 7.4 },
+  { month: "сен", fact: 7.5, plan: 7.8 },
+  { month: "окт", fact: 7.9, plan: 8.2 },
+];
+
+const MARGIN = { top: 8, right: 16, bottom: 24, left: 32 };
+const TICKS = [0, 3, 6, 9];
+
+const formatMillions = (value: number) => `${value.toLocaleString("ru-RU")} млн ₽`;
+
+export default function ChartFrameFillHeightExample() {
+  return (
+    <PageContent.Grid>
+      {/* The cell spans two rows beside the tiles; `height="fill"` takes all of it. */}
+      <PageContent.Cell span={8} rows={2}>
+        <ChartFrame.Root
+          series={SERIES}
+          defaultHiddenSeries={["plan"]}
+          formatValue={formatMillions}
+        >
+          <ChartFrame.Header>
+            <ChartFrame.Title as="h2">Выручка и план</ChartFrame.Title>
+            <ChartFrame.Description>По месяцам, млн ₽</ChartFrame.Description>
+          </ChartFrame.Header>
+          <ChartFrame.Value>
+            7,9 млн ₽<ChartFrame.Delta tone="warning">−4% к плану</ChartFrame.Delta>
+          </ChartFrame.Value>
+          <ChartFrame.Plot
+            height="fill"
+            renderPlot={({ width, height, series }) => {
+              const innerW = width - MARGIN.left - MARGIN.right;
+              const innerH = height - MARGIN.top - MARGIN.bottom;
+              const x = (i: number) => MARGIN.left + (innerW * i) / (MONTHS.length - 1);
+              const y = (v: number) => MARGIN.top + innerH * (1 - v / TICKS[TICKS.length - 1]);
+              return (
+                <svg width={width} height={height} aria-hidden="true">
+                  {TICKS.map((tick) => (
+                    <g key={tick}>
+                      <line
+                        x1={MARGIN.left}
+                        x2={width - MARGIN.right}
+                        y1={y(tick)}
+                        y2={y(tick)}
+                        stroke={tick === 0 ? chartColors.axis : chartColors.grid}
+                      />
+                      <text
+                        x={MARGIN.left - 8}
+                        y={y(tick)}
+                        textAnchor="end"
+                        dominantBaseline="middle"
+                      >
+                        {tick}
+                      </text>
+                    </g>
+                  ))}
+                  {MONTHS.map((row, i) => (
+                    <text key={row.month} x={x(i)} y={height - 4} textAnchor="middle">
+                      {row.month}
+                    </text>
+                  ))}
+                  {series.map((s) => (
+                    <path
+                      key={s.id}
+                      data-hidden={s.hidden}
+                      d={MONTHS.map(
+                        (row, i) =>
+                          `${i ? "L" : "M"}${x(i)},${y(s.id === "plan" ? row.plan : row.fact)}`,
+                      ).join("")}
+                      fill="none"
+                      stroke={s.color}
+                      strokeWidth={2}
+                      strokeDasharray={s.id === "plan" ? "4 4" : undefined}
+                      strokeLinejoin="round"
+                    />
+                  ))}
+                </svg>
+              );
+            }}
+          />
+          <ChartFrame.Legend />
+          <ChartFrame.Table
+            rows={MONTHS.map((row) => ({
+              label: row.month,
+              values: { fact: row.fact, plan: row.plan },
+            }))}
+          />
+        </ChartFrame.Root>
+      </PageContent.Cell>
+
+      <PageContent.Cell span={4}>
+        <Card.Root variant="stat-trend">
+          <Card.Label>Выполнение плана</Card.Label>
+          <Card.Value>96%</Card.Value>
+          <Card.Delta tone="warning">−4 п. п. за октябрь</Card.Delta>
+        </Card.Root>
+      </PageContent.Cell>
+
+      <PageContent.Cell span={4}>
+        <Card.Root variant="stat-trend">
+          <Card.Label>Прогноз на год</Card.Label>
+          <Card.Value>84 млн ₽</Card.Value>
+          <Card.Delta>План — 86 млн ₽</Card.Delta>
+        </Card.Root>
+      </PageContent.Cell>
+    </PageContent.Grid>
+  );
+}

package/src/components/chart-frame/examples/states.tsx

@@ -1,4 +1,4 @@
-/** Loading, empty, error and data swap in the plot's place without moving the panel; the error retries — `state`, `onRetry`. */
+/** Loading, empty, error and data swap in the plot's place without moving the panel; the error retries, and the legend of the one series only names it — `state`, `onRetry`, `readOnly`. */
 import {
   ChartFrame,
   type ChartFrameSeries,
@@ -72,6 +72,8 @@ export default function ChartFrameStatesExample() {
             );
           }}
         />
+        {/* One series: the legend only names it, there is nothing to turn off. */}
+        <ChartFrame.Legend readOnly />
       </ChartFrame.Root>
     </>
   );