Skip to content

Interactive Answers

Iso Bars

Isometric stacked bars in two rows — the main volume behind, rework or failures in front.

2 variantsMIT

Preview

Daily tokens

support-agent · last 14 days

20.8Mtokens

failed 3.0%

Oct 23Oct 24Oct 25Oct 26Oct 27Oct 28Oct 29Oct 30Oct 31Nov 1Nov 2Nov 3Nov 4Nov 5
InputCachedOutputReasoningFailedRetried
Daily tokens
PeriodInputCachedOutputReasoningFailedRetried
Oct 23520k380k210k102k26k48k
Oct 24569.4k444.3k262.4k111.3k36.7k71k
Oct 25314.2k262.6k129.6k75.5k19k42k
Oct 26327.5k259.9k130.4k63k16k45.5k
Oct 27631.2k523.4k271.1k143.7k49.4k83.4k
Oct 28651.5k512.6k266.2k154.1k39.4k82.6k
Oct 29612.6k549.8k260.4k134.8k43k76.3k
Oct 30614.9k589.5k290.9k124.5k42.6k85.5k
Oct 31628.1k618.9k297.3k275.8k180k252k
Nov 1399.1k368.1k159.8k170.6k21.7k35.4k
Nov 2366.8k395.3k167.9k176.2k21.2k53.3k
Nov 3727.1k726.5k308.3k348.9k53.2k90k
Nov 4733.7k724.5k326.1k335.8k37.8k93.7k
Nov 5701.4k758.4k294.3k325k45.5k81.5k

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/iso-bars.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { IsoBars } from "@/components/ui/iso-bars";

export function DailyTokens({ usage }: { usage: DailyUsage }) {
  return (
    <IsoBars
      title="Daily tokens"
      subtitle="Last 14 days"
      labels={usage.days} // "Oct 23" … "Nov 5"
      back={[
        { id: "input", label: "Input", values: usage.input },
        { id: "cached", label: "Cached", values: usage.cached },
        { id: "output", label: "Output", values: usage.output },
      ]}
      front={[
        { id: "failed", label: "Failed", values: usage.failed },
        { id: "retried", label: "Retried", values: usage.retried },
      ]}
      aside={{ value: "18.4M", caption: "tokens", flag: "failed 1.9%" }}
      onSelect={({ row, index }) => openDay(usage.days[index], row)}
    />
  );
}

Props

PropTypeDefaultDescription
labels*string[]—One label per period, drawn along the front edge of the floor.
back*IsoSeries[]—The main stack, drawn as the back row. Series stack upward in order.
frontIsoSeries[]—A smaller stack in front, e.g. rework or failures. Shares the back row's scale and defaults to warning and negative colors.
title*string—Header title.
subtitlestring—Secondary line under the title.
aside{ value: string; caption?: string; flag?: string; tone?: "warning" | "negative" }—Headline in the header. The flag sits under it in the tone color.
format(value: number) => string—Formats values in the tooltip and the table. Defaults to 1.2k.
onSelect(point: { row: "back" | "front"; index: number }) => void—Called when a prism is hovered, clicked or reached with the arrow keys.
classNamestring—Extra classes for the root element.
type IsoSeries = {
  id: string;
  label: string;
  values: number[]; // one per period
  color?: string;   // faces are shaded from it with color-mix
};