Chart Donut

Chart Donut делит круг на сегменты по значениям items: кольцо (donut) держит в центре итог и подпись капсом, круг (donut={false}) — сплошной. Диаметр задаёт size: s | m | l для кольца, xl — круг в широкой ячейке виджета. Сегменты разделяет зазор цвета поверхности --chart-segment-gap; по наведению остальные приглушаются до --chart-dim-opacity, подсказка показывает значение и долю. Цвета — из items или по кругу --c-chart-1…6. Расшифровку даёт Legend рядом.

Статус: experimental · в системе с 2026-09 · интерактивность: conditional (по конфигурации)

Когда использовать

Кампании по статусам с итогом в центре.
Трафик по устройствам.
Доля форматов в расходе.

Не использовать:

Больше шести долей — Chart Ranked.
Сравнение по времени — Chart Line или Chart Bars.

Альтернативы:

chart-ranked — много категорий с рейтингом
legend — расшифровка сегментов

Кампании по статусам

Кольцо с итогом 12 и легендой с мини-полосами.

Активные 6
На модерации 3
Заблокированы 2
Остановлены 1

<!--
  🟢

  Кампании по статусам (виджет Campaigns summary галереи): кольцо с итогом и
  подписью TOTAL, рядом легенда с числами и мини-полосами долей от общего.
  Заблокированные — красным статуса (в макете A500), остановленные — серой
  серией.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import ChartDonut from "$lib/ui/ChartDonut.svelte";
import Legend from "$lib/ui/Legend.svelte";

const items = [
	{ label: t("Active"), value: 6, share: 50, color: "var(--c-chart-4)" },
	{ label: t("Moderated"), value: 3, share: 25, color: "var(--c-chart-3)" },
	{ label: t("Blocked"), value: 2, share: 16.7, color: "var(--c-status-rejected)" },
	{ label: t("Stopped"), value: 1, share: 8.3, color: "var(--c-chart-5)" },
];
</script>

<div style="display: flex; align-items: center; gap: var(--sp-2); width: 360px;">
	<ChartDonut {items} totalLabel={t("Total")} label={t("Кампании по статусам")} />
	<div style="flex: 1;"><Legend {items} bars /></div>
</div>

Круг

donut={false}: трафик по устройствам.

Android 29K
iOS 12K
Десктоп 5 210
Планшет 2 007

<!--
  🟢

  Трафик по устройствам (виджет Traffic by device галереи): сплошной круг и
  легенда строками с линиями; значения от 10 000 сокращены до тысяч — «29K».
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import ChartDonut from "$lib/ui/ChartDonut.svelte";
import Legend from "$lib/ui/Legend.svelte";

const items = [
	{ label: "Android", value: 28_940, color: "var(--c-chart-1)" },
	{ label: "iOS", value: 12_060, color: "var(--c-chart-2)" },
	{ label: t("Desktop"), value: 5_210, color: "var(--c-chart-3)" },
	{ label: t("Tablet"), value: 2_007, color: "var(--c-chart-5)" },
];
const legend = items.map((item) => ({ ...item, value: item.value >= 10_000 ? `${Math.round(item.value / 1000)}K` : item.value }));
</script>

<div style="display: flex; align-items: center; gap: var(--sp-2); width: 360px;">
	<ChartDonut {items} donut={false} label={t("Трафик по устройствам")} />
	<div style="flex: 1;"><Legend items={legend} /></div>
</div>