Intentwise Primitives
Product Analytics
Specialized components for product-level analysis including anomaly detection, AI chat assistance, change driver analysis, and multi-line filter inputs.
AnomalyCard
Product Anomaly
Displays a product anomaly card with image, metrics, key drivers, and action buttons for sharing and PDP links.
Show code
<AnomalyCard
data={{
product: { id: '...', name: '...', title: '...', imageUrl: '...' },
performance: { label: 'Mix', value: '-15.2%', isPositive: false },
keyDrivers: ['Buy Box Seller Changed', 'Price increased by 12%']
}}
onShare={(id) => {}}
onProductClick={(id) => {}}
/>With Chip Drivers
Key drivers displayed as chips instead of a bulleted list using driverDisplayType='chips'.
Sales Anomaly
Key Drivers
Show code
<AnomalyCard data={data} driverDisplayType="chips" />WiziChat
AI Chat Assistant
Full-featured Wizi AI chat with IndexedDB state persistence, 5 message colors, copy, feedback, quick links, and loading indicator.
Show code
<WiziChat
userName="Sourav"
storageKey="demo-wizi"
onSendMessage={async (msg) => ({ content: '...', status: 'success' })}
/>MultiLineInput
Multi-Line Text Input
Textarea input for entering values separated by new lines. Used in filter dialogs for Campaign, ASIN, Ad Group, and Keyword filters.
Show code
<MultiLineInput
value={value}
onChange={setValue}
label="Enter the Campaigns name separated by new line"
countLabel="Campaign(s)"
/>ChangeDrivers
Change Drivers Accordion
Collapsible accordion list of change drivers, each containing a DataTable. Supports global expand/collapse.
Show code
<ChangeDrivers items={[
{ id: '1', title: 'Buy Box', count: 3, data: { columns: [...], rows: [...] } },
]} />FilterSelect
Immediate multi-select
A labeled filter dropdown with search and Select all / Clear. onChange fires on every toggle.
Show code
<FilterSelect
data={{ label: 'Campaign Type', options, value, mode: 'multi' }}
onChange={setValue}
/>Staged Apply / Cancel
`confirm` stages toggles in a temp selection and commits only on Apply — with a title header, Select All / Deselect All, and a footer count.
Show code
<FilterSelect
data={{ label: 'Campaign Type', options, value, mode: 'multi' }}
title="Campaign Type"
hideLabel
confirm
bulkActions="select-deselect"
onChange={setValue}
/>RankedMetricList
Chevron (Top 5 Path Performance)
Ranked rows with a leading chevron flow, a primary metric, and a secondary metric.
Top 5 Path Performance by Spend
Show code
<RankedMetricList
title="Top 5 Path Performance by Spend"
rankStyle="hash"
rows={rows}
/>Chevron + metric selector (top-right)
A SelectField in the header `selector` slot swaps the primary + secondary metric per row, mirroring the Path-to-Conversion card's dropdown.
Top 5 Path Performance by Spend
Show code
const [metric, setMetric] = useState('spend');
<RankedMetricList
title={`Top 5 Path Performance by ${label}`}
rankStyle="hash"
rows={rows}
selector={
<SelectField value={metric} onChange={(v) => setMetric(v)}>
{PATH_METRICS.map((m) => (
<option key={m.value} value={m.value}>{m.label}</option>
))}
</SelectField>
}
/>RankedCardGrid
Top 10 Regions (5 × 2)
Responsive grid of ranked cards, each with a primary and secondary metric, plus an optional header selector.
Top 10 Regions by Total Sales
Show code
<RankedCardGrid
title="Top 10 Regions by Total Sales"
columns={5}
cards={topRegions}
selector={<select>...</select>}
/>Entity Cards
ProductStatCard — product + 2 metrics + bar
A ranked product card with image, title link, two stats, and a proportion bar.
Show code
<ProductStatCard
data={{
rank: 1,
code: 'B0CV5ZDC9X',
title: '...',
href: 'https://www.amazon.com/dp/B0CV5ZDC9X',
stats: [
{ label: 'NTB Purchased Users', value: '163.31K' },
{ label: 'NTB Purchased Users %', value: '68.13%' },
],
progress: 68,
}}
/>EntityComboCard — 2 products + 2 metrics
A pairing card for ASIN combinations with high overlap purchasers: a lead entity, an overlap entity, and shared metrics.
Show code
<EntityComboCard
data={{
rank: 1,
leadLabel: 'Lead ASIN',
lead: { code: 'B0D2P5NFYT', title: '...', href: '...' },
overlapLabel: 'Overlap ASIN',
overlap: { code: 'B0CV5ZDC9X', title: '...', href: '...' },
metricsTitle: 'Overlap Metrics',
metrics: [
{ label: 'Purchases', value: '4,291' },
{ label: 'Ratio', value: '6.1%' },
],
}}
/>AsinDetail
ASIN reference (image + code + title)
A compact ASIN reference block: thumbnail, code with an external link, and a title clamped to 1–2 lines (full title on hover).
Show code
<AsinDetail
variant="compact"
data={{ code: 'B0CV5ZDC9X', title: '...', href: '...' }}
titleLines={2}
/>Single line (truncated)
`titleLines={1}` clamps the title to one line with an ellipsis; the full title shows on hover.
Show code
<AsinDetail variant="compact" data={{ code: 'B0F1BRZ563', title: '...' }} titleLines={1} />Full title (expandTitle)
`expandTitle` renders the full title with no clamp — the block grows to fit.
Show code
<AsinDetail variant="compact" data={{ code: 'B0D2P5NFYT', title: '...' }} expandTitle />PathToConversionCard
Block with 4 metrics
First-touch / last-touch path analysis card: a ranked block with the path stages, four metrics, and a footer proportion bar.
Show code
<PathToConversionCard
data={{
rank: 1,
stages: ['SP', 'DSP'],
metrics: [
{ label: 'Total Sales', value: '$15,292,729' },
{ label: 'Total Spend', value: '$7,519,376' },
{ label: 'Total Users', value: '283,390' },
{ label: 'Purchase Rate', value: '0.03%' },
],
footerLabel: '% of total sales',
footerValue: '10.23%',
progress: 10.23,
}}
/>MetricBarCell
Primary + bar + secondary
A table cell renderer with a primary metric, an inline proportion bar, and a secondary metric (the metric-with-inline-bar cells on the IGPPC product table).
Show code
<MetricBarCell
primary={{ label: 'Total Ad Sales', value: '$62.64K' }}
progress={68}
secondary={{ value: '68.30%' }}
/>Variants — inline / dual / stat / compact
`variant` switches the layout: inline (value · bar · %-pill), dual (two label/value rows + bar), stat (label header + bar), and compact (value + bar).
Show code
<MetricBarCell variant="dual" primary={{ label: 'NTB Purchased Users', value: '163.31K' }} secondary={{ label: 'NTB Purchased Users %', value: '68.13%' }} progress={68} />StarRating
Rating + value
Star rating indicator for Content Analytics ratings, with optional numeric value and size variants.
Show code
<StarRating data={{ value: 4.5, showValue: true }} />