MatrixChart

MatrixChart

범주형 축을 가진 범용 x/y 히트맵이에요. 각 셀은 값에 따라 색칠되고, 행/열이 범주인 히트맵을 만들 때 사용해요.

출처: 문서

본문

Usage

MatrixChart는 범주형 축을 가진 범용 x/y 히트맵이에요. 각 셀은 값에 따라 색이 정해져요. 데이터는 x, y, value 속성을 가진 객체 배열이에요.

import { MatrixChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <MatrixChart
      data={data}
      getTooltipLabel={(cell) =>
        `${cell.y}, Mar ${cell.x}: ${cell.value === null ? 'No contributions' : `${cell.value} contribution${cell.value > 1 ? 's' : ''}`}`
      }
    />
  );
}

Data format

데이터는 MatrixChartCell 객체의 배열이에요.

interface MatrixChartCell {
  x: string;
  y: string;
  value: number | null;
}

• x – 열 식별자
• y – 행 식별자
• value – 색 보간에 사용되는 숫자 값, 빈 셀이면 null

Labels

xLabels와 yLabels prop으로 축 라벨을 제공할 수 있어요. withXLabels로 x축 라벨을 하단(또는 xLabelsPosition="top"이면 상단)에, withYLabels로 y축 라벨을 왼쪽에 표시해요. 두 라벨 배열 모두 선택사항이에요. 제공하지 않으면 데이터의 x와 y 값이 처음 나타나는 순서대로 라벨로 사용돼요.

X-axis labels rotation

기본적으로 x축 라벨은 -90도 회전돼요. xLabelsRotation prop으로 각도를 바꿀 수 있어요. 가로 라벨은 0, 각진 라벨은 -45로 설정하세요.

Tooltip

withTooltip prop과 getTooltipLabel 함수를 제공하면 셀 호버 시 툴팁을 표시해요.

import { MatrixChart } from '@mantine/charts';
import { data, xLabels, yLabels } from './data';

function Demo() {
  return (
    <MatrixChart
      data={data}
      xLabels={xLabels}
      yLabels={yLabels}
      withTooltip
      getTooltipLabel={(cell) => `${cell.y} ${cell.x}: ${cell.value === null ? 'No data' : `${cell.value} visitors`}`}
    />
  );
}

Colors

colors prop으로 색상 팔레트를 커스터마이즈할 수 있어요. 색은 domain 범위 내 셀 값에 따라 보간돼요.

Values domain

기본적으로 domain은 데이터의 min/max 값에서 자동 계산돼요. domain prop으로 색 보간용 커스텀 [min, max] 범위를 설정할 수 있어요.

Cell size and gap

cellSize와 gap prop으로 셀 크기와 간격을 제어할 수 있어요. cellRadius는 셀의 모서리 반경을 제어해요.

Pass props to cells

getCellProps 콜백으로 데이터에 따라 개별 셀에 커스텀 props를 추가할 수 있어요.

import { MatrixChart } from '@mantine/charts';
import { data, xLabels, yLabels } from './data';

function Demo() {
  return (
    <MatrixChart
      data={data}
      xLabels={xLabels}
      yLabels={yLabels}
      getCellProps={(cell) => {
        if (cell.value === null) {
          return {};
        }

        if (cell.value >= 25) {
          return { fill: 'var(--mantine-color-teal-6)' };
        }

        if (cell.value >= 15) {
          return { fill: 'var(--mantine-color-yellow-6)' };
        }

        return { fill: 'var(--mantine-color-red-6)' };
      }}
    />
  );
}

Legend

withLegend prop을 설정하면 차트 아래에 색 범례를 표시해요. legendLabels prop으로 범례 텍스트를 커스터마이즈할 수 있어요.

Accessibility

Matrix 셀은 장식용 rect 요소라 스크린 리더용 텍스트가 없어요. aria-label(또는 aria-labelledby)을 설정해 차트가 무엇을 보여주는지 설명하세요. 그러면 차트가 익명 모양의 그리드가 아니라 하나의 라벨이 있는 이미지로 노출돼요.

import { MatrixChart } from '@mantine/charts';

function Demo() {
  return <MatrixChart data={[]} aria-label="Contributions by weekday and week" />;
}

더 알아보기 (Learn more)

• SankeyChart
• Heatmap