prime-ui-kit 0.10.0 → 0.11.0

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

@@ -0,0 +1,127 @@
+/** 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`. */
+import { ChartFrame, type ChartFrameSeries, chartColors, SegmentedControl } from "prime-ui-kit";
+import * as React from "react";
+
+type Point = { month: string; values: Record<string, number> };
+
+const SERIES: ChartFrameSeries[] = [
+  { id: "new", label: "Новые клиенты" },
+  { id: "renewals", label: "Продления" },
+];
+
+const YEAR: Point[] = [
+  { month: "ноя", values: { new: 1.9, renewals: 3.1 } },
+  { month: "дек", values: { new: 2.4, renewals: 3.4 } },
+  { month: "янв", values: { new: 1.6, renewals: 3.0 } },
+  { month: "фев", values: { new: 2.1, renewals: 3.3 } },
+  { month: "мар", values: { new: 2.8, renewals: 3.5 } },
+  { month: "апр", values: { new: 2.6, renewals: 3.8 } },
+  { month: "мая", values: { new: 3.0, renewals: 3.6 } },
+  { month: "июн", values: { new: 3.4, renewals: 4.0 } },
+  { month: "июл", values: { new: 3.1, renewals: 4.2 } },
+  { month: "авг", values: { new: 3.6, renewals: 4.1 } },
+  { month: "сен", values: { new: 3.9, renewals: 4.4 } },
+  { month: "окт", values: { new: 4.2, renewals: 4.6 } },
+];
+
+const PERIODS = { half: YEAR.slice(6), year: YEAR };
+
+const MARGIN = { top: 8, right: 16, bottom: 24, left: 40 };
+
+const formatMillions = (value: number) => `${value.toLocaleString("ru-RU")} млн ₽`;
+
+/** Round gridline steps from 0 to just above the largest value. */
+function ticks(max: number): number[] {
+  const step = max > 6 ? 2 : 1;
+  return Array.from({ length: Math.ceil(max / step) + 1 }, (_, i) => i * step);
+}
+
+export default function ChartFrameOverviewExample() {
+  const [period, setPeriod] = React.useState<keyof typeof PERIODS>("year");
+  const points = PERIODS[period];
+  const last = points[points.length - 1];
+  const total = last.values.new + last.values.renewals;
+
+  return (
+    <ChartFrame.Root series={SERIES} formatValue={formatMillions}>
+      <ChartFrame.Header>
+        <ChartFrame.Title>Выручка</ChartFrame.Title>
+        <ChartFrame.Description>По месяцам, в млн ₽</ChartFrame.Description>
+        <ChartFrame.Actions>
+          <SegmentedControl.Root
+            aria-label="Период"
+            value={period}
+            onValueChange={(next) => setPeriod(next as keyof typeof PERIODS)}
+          >
+            <SegmentedControl.Item value="half">6 мес</SegmentedControl.Item>
+            <SegmentedControl.Item value="year">Год</SegmentedControl.Item>
+          </SegmentedControl.Root>
+        </ChartFrame.Actions>
+      </ChartFrame.Header>
+      <ChartFrame.Value>
+        {formatMillions(Math.round(total * 10) / 10)}
+        <ChartFrame.Delta tone="success">+8% к сентябрю</ChartFrame.Delta>
+      </ChartFrame.Value>
+      <ChartFrame.Plot
+        renderPlot={({ width, height, series }) => {
+          const grid = ticks(Math.max(...points.flatMap((p) => Object.values(p.values))));
+          const top = grid[grid.length - 1];
+          const innerW = width - MARGIN.left - MARGIN.right;
+          const innerH = height - MARGIN.top - MARGIN.bottom;
+          const x = (i: number) => MARGIN.left + (innerW * i) / Math.max(points.length - 1, 1);
+          const y = (v: number) => MARGIN.top + innerH * (1 - v / top);
+          const labelStep = Math.ceil(points.length / Math.max(1, Math.floor(innerW / 44)));
+          return (
+            <svg width={width} height={height} aria-hidden="true">
+              {grid.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>
+              ))}
+              {points.map((point, i) =>
+                // A narrow plot labels every second or third month, so the labels never collide.
+                i % labelStep === 0 ? (
+                  <text key={point.month} x={x(i)} y={height - 4} textAnchor="middle">
+                    {point.month}
+                  </text>
+                ) : null,
+              )}
+              {series.map((s) => {
+                const line = points
+                  .map((p, i) => `${i ? "L" : "M"}${x(i)},${y(p.values[s.id])}`)
+                  .join("");
+                return (
+                  <g key={s.id} data-hidden={s.hidden}>
+                    <path
+                      d={`${line}L${x(points.length - 1)},${y(0)}L${x(0)},${y(0)}Z`}
+                      fill={s.color}
+                      fillOpacity={0.08}
+                    />
+                    <path
+                      d={line}
+                      fill="none"
+                      stroke={s.color}
+                      strokeWidth={2}
+                      strokeLinejoin="round"
+                    />
+                  </g>
+                );
+              })}
+            </svg>
+          );
+        }}
+      />
+      <ChartFrame.Legend />
+      <ChartFrame.Table rows={points.map((p) => ({ label: p.month, values: p.values }))} />
+    </ChartFrame.Root>
+  );
+}

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

@@ -0,0 +1,78 @@
+/** Loading, empty, error and data swap in the plot's place without moving the panel; the error retries — `state`, `onRetry`. */
+import {
+  ChartFrame,
+  type ChartFrameSeries,
+  type ChartFrameState,
+  chartColors,
+  SegmentedControl,
+} from "prime-ui-kit";
+import * as React from "react";
+
+const SERIES: ChartFrameSeries[] = [{ id: "orders", label: "Заказы" }];
+
+const DAYS = [132, 158, 141, 176, 190, 164, 203, 188, 214, 197];
+
+const formatOrders = (value: number) => value.toLocaleString("ru-RU");
+
+export default function ChartFrameStatesExample() {
+  const [state, setState] = React.useState<ChartFrameState>("loading");
+
+  return (
+    <>
+      <SegmentedControl.Root
+        aria-label="Состояние"
+        value={state}
+        onValueChange={(next) => setState(next as ChartFrameState)}
+      >
+        <SegmentedControl.Item value="loading">Загрузка</SegmentedControl.Item>
+        <SegmentedControl.Item value="ready">Данные</SegmentedControl.Item>
+        <SegmentedControl.Item value="empty">Пусто</SegmentedControl.Item>
+        <SegmentedControl.Item value="error">Ошибка</SegmentedControl.Item>
+      </SegmentedControl.Root>
+      <ChartFrame.Root
+        state={state}
+        series={SERIES}
+        formatValue={formatOrders}
+        onRetry={() =>
+          new Promise<void>((resolve) => {
+            window.setTimeout(() => {
+              setState("ready");
+              resolve();
+            }, 900);
+          })
+        }
+      >
+        <ChartFrame.Header>
+          <ChartFrame.Title>Заказы за 10 дней</ChartFrame.Title>
+        </ChartFrame.Header>
+        <ChartFrame.Value>
+          1 284
+          <ChartFrame.Delta tone="success">+14%</ChartFrame.Delta>
+        </ChartFrame.Value>
+        <ChartFrame.Plot
+          renderPlot={({ width, height, series }) => {
+            const band = width / DAYS.length;
+            const max = Math.max(...DAYS);
+            return (
+              <svg width={width} height={height} aria-hidden="true">
+                <line x1={0} x2={width} y1={height} y2={height} stroke={chartColors.axis} />
+                {DAYS.map((value, i) => (
+                  <rect
+                    // biome-ignore lint/suspicious/noArrayIndexKey: one bar per day, in order
+                    key={i}
+                    x={band * i + 4}
+                    y={height - (height * value) / max}
+                    width={band - 8}
+                    height={(height * value) / max}
+                    rx={2}
+                    fill={series[0].color}
+                  />
+                ))}
+              </svg>
+            );
+          }}
+        />
+      </ChartFrame.Root>
+    </>
+  );
+}

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

@@ -0,0 +1,158 @@
+/** 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`. */
+import { ChartFrame, type ChartFrameSeries, chartColors } from "prime-ui-kit";
+import * as React from "react";
+
+const SERIES: ChartFrameSeries[] = [
+  { id: "paid", label: "Оплачены" },
+  { id: "pending", label: "Ждут оплаты" },
+];
+
+const WEEKS = [
+  { label: "Неделя 36", paid: 42, pending: 11 },
+  { label: "Неделя 37", paid: 38, pending: 15 },
+  { label: "Неделя 38", paid: 51, pending: 9 },
+  { label: "Неделя 39", paid: 47, pending: 14 },
+  { label: "Неделя 40", paid: 56, pending: 12 },
+  { label: "Неделя 41", paid: 61, pending: 8 },
+];
+
+const MARGIN = { top: 8, right: 0, bottom: 24, left: 32 };
+const TICKS = [0, 20, 40, 60];
+const TOOLTIP = { width: 176, height: 88 };
+
+const formatCount = (value: number) => `${value} шт.`;
+
+export default function ChartFrameTooltipExample() {
+  const [active, setActive] = React.useState<number | null>(null);
+
+  return (
+    <ChartFrame.Root series={SERIES} formatValue={formatCount}>
+      <ChartFrame.Header>
+        <ChartFrame.Title>Счета по неделям</ChartFrame.Title>
+        <ChartFrame.Description>Выставлено за последние 6 недель</ChartFrame.Description>
+      </ChartFrame.Header>
+      <ChartFrame.Plot
+        renderPlot={({ width, height, series }) => {
+          const innerW = width - MARGIN.left - MARGIN.right;
+          const innerH = height - MARGIN.top - MARGIN.bottom;
+          const band = innerW / WEEKS.length;
+          const bar = Math.min(24, (band - 16) / series.length);
+          const y = (v: number) => MARGIN.top + innerH * (1 - v / TICKS[TICKS.length - 1]);
+          const point = active === null ? null : WEEKS[active];
+          const tooltipX =
+            active === null
+              ? 0
+              : Math.min(
+                  Math.max(MARGIN.left + band * active + band / 2 - TOOLTIP.width / 2, 0),
+                  width - TOOLTIP.width,
+                );
+          return (
+            <div
+              role="slider"
+              tabIndex={0}
+              aria-label="Неделя"
+              aria-valuemin={0}
+              aria-valuemax={WEEKS.length - 1}
+              aria-valuenow={active ?? 0}
+              aria-valuetext={`${(point ?? WEEKS[0]).label}: оплачены ${(point ?? WEEKS[0]).paid}, ждут оплаты ${(point ?? WEEKS[0]).pending}`}
+              onPointerMove={(event) => {
+                const rect = event.currentTarget.getBoundingClientRect();
+                const index = Math.floor((event.clientX - rect.left - MARGIN.left) / band);
+                setActive(index >= 0 && index < WEEKS.length ? index : null);
+              }}
+              onPointerLeave={() => setActive(null)}
+              onFocus={() => setActive((current) => current ?? 0)}
+              onBlur={() => setActive(null)}
+              onKeyDown={(event) => {
+                const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
+                if (!step) return;
+                event.preventDefault();
+                setActive((current) =>
+                  Math.min(Math.max((current ?? 0) + step, 0), WEEKS.length - 1),
+                );
+              }}
+            >
+              <svg width={width} height={height} aria-hidden="true">
+                {TICKS.map((tick) => (
+                  <g key={tick}>
+                    <line
+                      x1={MARGIN.left}
+                      x2={width}
+                      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>
+                ))}
+                {WEEKS.map((week, i) => {
+                  const left = MARGIN.left + band * i;
+                  return (
+                    <g key={week.label}>
+                      <rect
+                        x={left}
+                        y={MARGIN.top}
+                        width={band}
+                        height={innerH}
+                        fill={active === i ? chartColors.grid : "transparent"}
+                      />
+                      {series.map((s, j) => {
+                        const value = s.id === "paid" ? week.paid : week.pending;
+                        return (
+                          <rect
+                            key={s.id}
+                            data-hidden={s.hidden}
+                            x={left + band / 2 - (bar * series.length) / 2 + bar * j}
+                            y={y(value)}
+                            width={bar - 2}
+                            height={y(0) - y(value)}
+                            rx={2}
+                            fill={s.color}
+                          />
+                        );
+                      })}
+                      <text x={left + band / 2} y={height - 4} textAnchor="middle">
+                        {week.label.replace("Неделя ", "")}
+                      </text>
+                    </g>
+                  );
+                })}
+                {point ? (
+                  <foreignObject
+                    x={tooltipX}
+                    y={0}
+                    width={TOOLTIP.width}
+                    height={TOOLTIP.height}
+                    overflow="visible"
+                  >
+                    <ChartFrame.Tooltip
+                      label={point.label}
+                      items={[
+                        { id: "paid", value: point.paid },
+                        { id: "pending", value: point.pending },
+                      ]}
+                    />
+                  </foreignObject>
+                ) : null}
+              </svg>
+            </div>
+          );
+        }}
+      />
+      <ChartFrame.Legend />
+      <ChartFrame.Table
+        rows={WEEKS.map((week) => ({
+          label: week.label,
+          values: { paid: week.paid, pending: week.pending },
+        }))}
+      />
+    </ChartFrame.Root>
+  );
+}