Intentwise Primitives
Charts
Full-featured data visualization components built on Recharts. Support multi-series, dual axes, auto-coloring from the design token palette, tooltips, legends, and PNG export.
AreaChart
Revenue & Ad Spend
Multi-series area chart with a dashed line for the secondary series.
Show code
<AreaChart data={timeSeriesData} title="Revenue & Ad Spend" height={350} exportable />Dual Y-Axis
Two metrics on separate axes — revenue on the left, growth percentage on the right.
Show code
<AreaChart data={dualAxisData} title="Revenue vs Growth" />LineChart
Multi-Series Comparison
LineChart is a thin wrapper over the same time-series engine as AreaChart, without the area fill.
Show code
<LineChart data={data} title="Comparison" showDots />BarChart
Grouped Bars
Side-by-side comparison of multiple metrics across categories.
Show code
<BarChart data={categoricalData} title="Revenue by Ad Type" />Stacked Bars
Use stackId on series to create stacked bar charts.
Show code
<BarChart data={stackedData} title="Revenue Composition" />Horizontal Layout
Switch to horizontal bars with layout='horizontal' on the data.
Show code
<BarChart data={{ ...data, layout: 'horizontal' }} />With Bar Labels
Show formatted values above each bar.
Show code
<BarChart data={data} showBarLabels />DonutChart
Revenue Breakdown
Donut chart with center label showing total. Auto-colors from the design token palette.
Show code
<DonutChart data={{ slices: [...], centerLabel: 'Total', centerValue: 146000 }} />ScatterChart
Ad Spend vs ROAS
Scatter plot for correlation analysis. Supports multiple series and bubble sizing.
Show code
<ScatterChart data={{ points: [...], series: [...] }} />FunnelChart
Purchase Funnel
Conversion funnel with stage-to-stage conversion rates. Built on Recharts FunnelChart.
Show code
<FunnelChart data={{ stages: [...], showConversionRate: true }} />HeatMap
Clicks by Day & Hour
2D grid with color intensity based on values. Uses the sequential blue palette from design tokens.
Show code
<HeatMap data={{ rows: [...], columns: [...], cells: [...] }} />WaterfallChart
Revenue Waterfall
Cumulative bar chart showing increases and decreases. Green for gains, red for losses, blue for totals.
Show code
<WaterfallChart data={{ steps: [...], format: 'currency' }} />RadarChart
Campaign Performance Radar
Multi-series radar (spider) chart for comparing performance profiles across dimensions. Supports configurable fill opacity and grid visibility.
Show code
<RadarChart data={{ points: [...], series: [...] }} />Without Grid Lines
Hide the polar grid for a cleaner look.
Show code
<RadarChart data={...} showGrid={false} />ComboChart
Bars + Line (Dual Axis)
ComboChart combines bars and lines on the same canvas with independent Y-axes — ideal for showing volume alongside a rate or percentage.
Show code
<ComboChart data={{ points, xAxisKey, series, yAxes }} title="Orders & Return Rate" />With Metric Chips
Shows the metric chips and Add Metric flow used in DSP-Order chart experiences.
Show code
<ComboChart
data={comboChartData}
enableMetricSelection
availableMetrics={comboChartData.series}
defaultVisibleMetrics={['ordered_quantity', 'return_rate']}
/>Compare Mode
Pass compareData (previous-period points aligned by index) and an optional comparePeriodLabel. Dashed lines and translucent bars represent the previous period; the tooltip groups current vs previous entries.
Show code
<ComboChart
data={comboChartCompareData}
compareData={comboChartComparePreviousPoints}
comparePeriodLabel="Previous Period"
title="Compare Mode — Campaigns"
/>BiggestCampaignMovers
All Four Cards (Walmart Overview Layout)
Campaigns, Products, SP Keywords, and SB Keywords — the 2×2 grid layout used on the Walmart overview page. Campaign rows show targeting type badges (SP A, SP KT, SB KT); products show item name as the sub-badge; keywords show match type (PHRASE, EXACT, BROAD).
Biggest Changes By Campaigns
Biggest Changes By Products
Biggest Changes By SP Keywords
Biggest Changes By SB Keywords
Show code
<div className="grid grid-cols-2 gap-4">
<BiggestCampaignMovers
title="Biggest Changes By Campaigns"
entityLabel="Campaign" itemNoun="campaigns"
data={{ items: storyCampaignItems, format: 'currency', isIncreasePositive: true }}
metrics={MOVERS_METRICS} selectedMetric="Ad Revenue"
/>
<BiggestCampaignMovers
title="Biggest Changes By Products"
entityLabel="Product" itemNoun="products"
data={{ items: storyProductItems, format: 'currency', isIncreasePositive: true }}
metrics={MOVERS_METRICS} selectedMetric="Ad Revenue"
/>
<BiggestCampaignMovers
title="Biggest Changes By SP Keywords"
entityLabel="Keyword" itemNoun="keywords"
data={{ items: storySpKeywordItems, format: 'currency', isIncreasePositive: true }}
metrics={MOVERS_METRICS} selectedMetric="Ad Revenue"
/>
<BiggestCampaignMovers
title="Biggest Changes By SB Keywords"
entityLabel="Keyword" itemNoun="keywords"
data={{ items: storySbKeywordItems, format: 'currency', isIncreasePositive: true }}
metrics={MOVERS_METRICS} selectedMetric="Ad Revenue"
/>
</div>