​

D3js PRAWN Line Chart

PRAWN stands for Predictive, Real‑time, Automatic, Workflow Navigator. The goal of every PRAWN component is to visually demonstrate how your application is getting the job done for the user (in the Clayton Christensen Jobs‑to‑Be‑Done sense) and, more importantly, how well it is doing so.

The LineChart component does this by combining traditional time‑series visualisation with forward‑looking predictions and on‑chart editing. Users can quickly see where things are headed, adjust expectations, and understand the factors driving outcomes – all without leaving the context of the dashboard.

🦐 Why “PRAWN”? Much like its shell‑fish namesake, a PRAWN component should be small, tasty and easy to consume. The acronym captures its four core principles:

• Predictive – includes built‑in forecast lines (expected, optimistic & pessimistic)
• Real‑time – updates as soon as fresh data arrives
• Automatic – sensible defaults mean zero configuration for common use‑cases
• Workflow Navigator – makes it obvious what action the user should take next

​

Quick start

import { LineChart } from '@repo/design-system/components/d3js-prawn/line-chart';

const { data, prediction } = generateSampleData(12, true, true); // helper from utils

export default function Example() {
  return (
    <LineChart
      data={data}
      prediction={prediction}
      title="Weekly Revenue"
      yLabel="USD ($)"
      showGrid
      showLatestValue
      latestValueTitle="Latest revenue"
    />
  );
}

​

Props

Refer to the full type definition in utils/types.ts for advanced options like drag‑to‑edit predictions, custom date formats and currency symbols.

​

Tour integration

All PRAWN components support the Tour overlay so you can guide first‑time users through the metrics that matter:

import type { TourStep } from '@repo/design-system/components/ui/tour';

const steps: TourStep[] = [
  { id: 'prawn-chart', title: 'Trend', description: 'Shows historical revenue' },
  { id: 'prawn-prediction', title: 'Forecast', description: 'Machine‑generated projection' },
];

<LineChart data={data} prediction={prediction} tourSteps={steps} />;