Brickslab.Toolsv2.1.1

@brickslab./ui-webAnalytics

Color-intensity matrix for aggregated Likert or cross-tab data with optional scale legend.

Likert response matrix

Strongly disagreeDisagreeNeutralAgreeStrongly agree
Ease of use
12
28
45
180
320
Performance
8
42
89
210
240
Design
5
20
60
250
350
Documentation
30
80
120
180
175
Support
18
55
95
200
220
5
350

Props

PropTypeDéfautRequisDescription
rowsstring[]—✓Row labels.
colsstring[]—✓Column labels.
valuesnumber[][]—✓2D matrix — values[rowIndex][colIndex].
minnumber——Minimum value for color scale. Defaults to data minimum.
maxnumber——Maximum value for color scale. Defaults to data maximum.
showScalebooleantrue—Shows a color scale legend below the matrix.
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
  rows="..."
  cols="..."
  values={0}
  min={0}
  max={0}
  showScale={true}
/>
rowscolsvaluesminmaxshowScale

Usage

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

<HeatmapMatrix
  rows={["Ease of use", "Performance"]}
  cols={["Poor", "Fair", "Good", "Excellent"]}
  values={[
    [12, 45, 180, 320],
    [8, 89, 210, 240],
  ]}
/>