Skip to content
Design System
العربية

Charts

import"@truvar-ai/design-system/charts"

Charts

Every chart uses the Truvar palette, formats numbers for the reader's language, flips its time axis in Arabic, and has a Table view with the same data for screen readers and for copying.

Palette

Built on --chart-1 … --chart-6

Navy and gold lead. Dark theme lightens navy so it stays visible. Red is kept for negative values only.

chart-1chart-2chart-3chart-4chart-5chart-6

Line chart

Built on LineChart

Trends over time. Two series at most per chart keeps it readable.

Calls handled per day

Last 30 days

  • AI agent
  • Human team
AI agent calls rose from 420 to 714 a day; the human team handled about 143.

Stacked area

Built on AreaChart

Parts of a growing total.

Call minutes by channel

Last 12 weeks

  • Phone
  • WhatsApp
  • Web widget
Minutes grew on every channel; WhatsApp grew fastest.

Bar charts

Built on BarChart

Grouped bars compare categories side by side; stacked bars show the mix inside each total.

Outcomes by month

May to October

  • Booked
  • Call back
  • No answer
Booked meetings rose every month while unanswered calls fell.

Outcome mix by month

May to October

  • Booked
  • Call back
  • No answer
Booked meetings rose every month while unanswered calls fell.

Ranked bars

Built on RankedBars (HTML)

Horizontal bars for long labels, sorted largest first. Built as a list, so labels never collide with bars and it mirrors in Arabic.

Why customers call

Top intents this month

  1. Billing question3,410
  2. Book an appointment2,980
  3. Order status2,310
  4. Cancel or change1,490
  5. Complaint980
  6. Other640

Bars with a line

Built on ComposedChart

Volume as bars on one axis, a rate as a line on the other. Each axis is labelled so the two scales aren't confused.

Calls and booking rate

  • Calls
  • Booking rate
Calls rose each month and the booking rate climbed from 33% to 41%.

Donut and pie

Built on PieChart

For parts of one whole, with five slices or fewer. The donut's centre carries the total.

Calls by language

  • Egyptian Arabic 58%
  • Gulf Arabic 17%
  • English 19%
  • French 6%
58% of calls were in Egyptian Arabic.

Caller sentiment

  • Positive 64%
  • Neutral 27%
  • Negative 9%
64% positive, 27% neutral, 9% negative.

Sparklines

Built on Sparkline + StatTile

Tiny trends inside stat tiles. Decorative: the number and the change carry the meaning.

Calls today1,28414% vs last week
Avg. handling time3:128% vs last week
Escalations4122% vs last week

Scatter and bubble

Built on ScatterChart + ZAxis

Relationships between two measures; bubble size adds a third.

Call length vs satisfaction

Each bubble is an agent script; size is number of calls

Satisfaction peaks for calls of about three to four minutes.

Radar

Built on RadarChart

Compares profiles across five to eight qualities.

Agent quality

  • Taysir
  • Nour
Taysir leads on accuracy and compliance; Nour leads on tone and upsell.

Gauge

Built on SVG

One number against a target. The gold tick marks the goal.

Funnel

Built on FunnelBars (HTML)

Drop-off between ordered stages. Each step shows its count and the conversion from the step before.

From call to customer

12,400 answered calls led to 860 won deals, 7% overall.

  1. Calls answered12,400
  2. Qualified7,30059% of the previous stage
  3. Meeting booked3,90053% of the previous stage
  4. Proposal sent2,10054% of the previous stage
  5. Won86041% of the previous stage

Treemap

Built on Treemap

Sizes of many parts at once, such as where the money goes.

Cost breakdown

This month

The AI model is the largest cost at 33%.

Heatmap

Built on CSS grid

Two dimensions of time at once. Hover a cell for its exact value; the scale runs from light to dark.

When customers call

FewerMore calls