Krizaka UI
Krizaka UI
Composants

Affichage de données

Vous venez ici pour lire des données : tableaux, listes, chiffres, jauges, descriptions.

Règle du responsable
Les tableaux et les listes reposent uniquement sur les façades @krizaka/* (ADR-001).
Budget de taille
72.0 kB gzip pour tout le domaine ; il ne fait que baisser.

Entrées

40 entrées, dont 8 utilisées par des produits et sites en production.

  • CountdownThe time left until a moment, in tabular figures, turning urgent under a threshold.
  • StatA key figure: a label, a value in tabular digits, a hint and a trend said in words.18 fichiers l'importent
  • Activity feedBêtaWhat happened, newest first: grouped by day, runs folded (“×3”), “2 min ago” kept fresh, new events announced — and Timeline, one thing's history on a rail.1 fichiers l'importent
  • Area chartBêtaA volume over time: a line over a soft wash, or stacked areas whose parts add up to a total.
  • Bar chartBêtaAmounts compared across categories: grouped, stacked or horizontal bars, each value written at its tip.
  • Calendar heatmapBêtaOne cell a day over a year, weeks in columns, in one sequential hue: streaks, rhythms and gaps at a glance.
  • CandlestickBêtaOpen, high, low and close per period, rising candles hollow and falling ones filled, the volume in its own panel, zoom and thresholds.
  • Chart (ECharts option)BêtaAny ECharts option on the Krizaka frame: the theme resolved from the tokens, the lazy engine, the states, the table, the keyboard, the export.
  • Chart cardBêtaThe frame of a chart: title, one line of insight, the chart, a footer, and the actions menu (view as table, download, copy) — used everywhere a chart is shown.
  • Charts providerBêtaThe locale, the brand palette and the words of every chart below it, set once; plus the sliding window for live data.
  • Credit usageBêtaWhat is left of an allowance: the remaining amount in large, a meter that turns to warning then danger, the use per day and the day it runs out.
  • Data tableBêtaA table of records on TanStack Table v9 — sort, filters and facets, groups, details, pages, selection, column visibility, pinning and resizing — in the browser or on the server, cards on a phone, windowing for long lists.60 fichiers l'importent
  • Description listBêtaFacts about one thing as term and value: stacked, inline like a receipt, or a grid of key figures (KeyValueGrid).18 fichiers l'importent
  • Earnings chartBêtaEarnings per period in money: the bars of the net amount, the total and the last period's change written above, the payout threshold as a line.
  • FunnelBêtaStages that lose people on the way, with the conversion from each stage to the next and from the first written beside it.
  • GaugeBêtaOne value against its range on a 240° arc: zones that change its tone, a target tick, the value written in the middle.
  • Generated view catalogBêtaKpiStat and ChartCard as entries of the data-driven UI catalog (A2UI v0.9): a model's answer draws figures and charts from data, never code.
  • Geo mapBêtaWhere: a world choropleth in one sequential hue, bubbles on places, country names in the reader's language — plain SVG, the world loaded on demand.
  • GlobeBêtaThe world as a lit 3D sphere — places, great-circle arcs, tinted regions — turning slowly while on screen, dragged by hand, in SVG without WebGL.
  • Goal gaugeBêtaA goal counted in steps — 6 of 10 backers, 3 dares done, 3 seats left: a meter whose reached steps light one by one (or whose spent ones drain) when its chapter plays.
  • Goal progressBêtaA pot towards its goal, in money: an arc that fills, “raised of $500” under the amount, the supporters and the time left.
  • HeatmapBêtaA measure across two dimensions — activity by weekday and hour — in one sequential hue, with a step legend.
  • Job throughputBêtaJobs per period stacked by status, with the total and the success rate of the finished jobs written above.
  • KPI statBêtaA key figure with its change against the previous period and a sparkline of the period, on the kit's Stat.
  • Latency chartBêtaMedian and 95th-percentile latency per item, in the unit that fits (ms, s, min), against a service objective.
  • Line chartBêtaChange over time: one line per series, the last value written at its end, thresholds, markers and a crosshair tooltip.
  • ListBêtaRecords read top to bottom — a leading visual, a title and a line, details and actions beside — dense or comfortable, selectable, windowed when long.12 fichiers l'importent
  • Meta rowBêtaOne quiet line of facts about a thing, separated by dots, with optional status chips at its end: the line under a title.
  • MeterBêtaA measure within a known range — a quota, a balance, a share: thresholds turn it to warning then danger (or the reverse when high is good), and split into parts it becomes a stacked bar or ring with its legend.8 fichiers l'importent
  • Pie and donut chartBêtaPart of a whole: slices sorted by size, folded into “Other” past six, each share written in the legend; a donut carries the total in its hole.
  • Price tickerBêtaA live auction's price: the current bid in large, the change since the opening and the number of bids, the bids as steps, the reserve as a line.
  • QR codeBêtaA QR code drawn offline from a text: dark modules on a light tile in both themes, with its quiet zone, an accessible name and an optional « copy the link » action.2 fichiers l'importent
  • Radar chartBêtaSeveral measures of a few entities at once — models compared on quality, speed, cost — on axes around a centre.
  • SankeyBêtaFlows between stages — credits from plans to models to outcomes — with widths proportional to the amounts.
  • Scatter chartBêtaThe relation between two measures, a bubble's area for a third, a colour per group, and the correlation said in words.
  • SparklineBêtaA word-sized trend without axes — in a stat, a table cell or a sentence — drawn on the server when its width is known.
  • Status chipBêtaA state of a status set (@krizaka/organize, krizaka-ts#89): its label in the person's language and its tone as a badge; read-only, or a menu of the moves the role may make — a second press to confirm, a reason picked from a list.4 fichiers l'importent
  • Swipeable rowBêtaA row whose actions show under a swipe: left for the trailing ones, right for the leading ones, a full swipe runs the outermost.
  • TreemapBêtaNested parts of a whole as rectangles — storage by project then by kind — a click zooming into a part.
  • VirtualBêtaLong lists and galleries rendered by what is in view, on TanStack Virtual: a list in its own region or the page's, a grid that fits the width, measured items, the end announced for infinite loading.

Sur cette page