Brickslab.Toolsv2.1.1

@brickslab./ui-webAnalytics

Multi-series SVG line chart with axis labels, data point tooltips, and legend.

Multi-series

Completionsweek
0230459.14W1W4W8Campaign A: 320 (W1)Campaign A: 354.8294196961579 (W2)Campaign A: 374.18594853651365 (W3)Campaign A: 376.8224001611973 (W4)Campaign A: 376.8639500938414 (W5)Campaign A: 390.82151450673723 (W6)Campaign A: 422.41169003602147 (W7)Campaign A: 459.13973197437576 (W8)Campaign B: 195 (W1)Campaign B: 196.1045345880221 (W2)Campaign B: 189.75779745179287 (W3)Campaign B: 189.15011255099333 (W4)Campaign B: 202.19534568704583 (W5)Campaign B: 224.25493278194838 (W6)Campaign B: 242.40255429975548 (W7)Campaign B: 247.30853381514956 (W8)Organic: 250 (W1)Organic: 262 (W2)Organic: 274 (W3)Organic: 286 (W4)Organic: 298 (W5)Organic: 310 (W6)Organic: 322 (W7)Organic: 334 (W8)
Campaign A
Campaign B
Organic

Single series

NPS scoremonth
0230459.14W1W4W8Campaign A: 320 (W1)Campaign A: 354.8294196961579 (W2)Campaign A: 374.18594853651365 (W3)Campaign A: 376.8224001611973 (W4)Campaign A: 376.8639500938414 (W5)Campaign A: 390.82151450673723 (W6)Campaign A: 422.41169003602147 (W7)Campaign A: 459.13973197437576 (W8)

Props

PropTypeDéfautRequisDescription
seriesTrendSeries[]—✓Array of { name, points: { x, y }[] }.
metricstring—✓Metric label shown above the chart.
granularity"day" | "week" | "month""day"—Time granularity label.
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  series={[]}
  metric="..."
  granularity="day"
/>
seriesmetricgranularity

Usage

tsx
import { CohortTrends } from "@brickslab./ui-web";

<CohortTrends
  metric="Completion rate"
  granularity="week"
  series={[
    { name: "Group A", points: [{ x: "W1", y: 320 }, { x: "W2", y: 380 }] },
    { name: "Group B", points: [{ x: "W1", y: 180 }, { x: "W2", y: 210 }] },
  ]}
/>