Sparkline

축도 격자도 범례도 없는, 단어 크기의 추세 그림입니다. 숫자 옆, 문장 안, 표의 한 칸에 들어가 무언가가 어느 쪽으로 가고 있는지를 말합니다.

import { Sparkline } from 'neba';

<Sparkline data={[18, 22, 19, 27, 24, 31, 29, 36]} label="최근 8주 가입" endDot />;

작은 차트가 아닙니다. 이것이 붙일 수 있는 숫자는 이미 주변 텍스트가 갖고 있고, 그래서 아무것도 붙이지 않습니다. series 배열이 아니라 data를 직접 받는 이유도 같습니다.

data는 모든 차트가 공유하는 NebaChartDatum의 배열입니다. 숫자이거나, 결측을 뜻하는 null이거나, 점입니다. 전체 정의는 LineChart에 있습니다.

Props

Prop	타입	기본값	설명
data *	NebaChartDatum[]	—	값들. 다른 차트와 마찬가지로 null은 결측입니다
shape	'line' | 'area' | 'bar'	'line'	어떤 마크로 그릴지. 추세에는 선, 양에는 area, 세는 것에는 막대
curve	'linear' | 'smooth' | 'step'	'linear'	점과 점 사이를 잇는 방식
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	띠의 높이. 페이지가 아니라 옆에 놓인 한 줄의 글자를 기준으로 만든 사다리입니다
color	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | string	첫 번째 chart slot / the first chart slot	마크의 색. 전체 차트와 달리 색을 직접 받습니다. series가 하나이고 팔레트가 나눠 줄 범례도 없기 때문입니다
endDot	boolean	false	마지막 점에 dot을 찍습니다. 이만한 크기가 담을 수 있는 유일한 직접 라벨입니다
baseline	number	—	이 값의 자리에 가로선을 긋습니다. 목표, 예산, 작년 평균
min	number	—	축의 아래 끝. 생략하면 자기 데이터로 띠를 가득 채웁니다. 나란히 놓인 둘을 비교하려면 같은 값을 주어야 합니다
max	number	—	축의 위 끝
width	number | string	'100%'	너비. 기본은 컨테이너를 채웁니다
label	string	—	띠의 이름. 주면 값들이 보조 기술에 노출되고, 주지 않으면 완전히 감춰집니다

<div>의 native 속성이 그대로 전달됩니다. 공용 축은 prop 규약을 참고하세요.

예시

shape · curve · endDot · baseline

shape가 마크를 정합니다. 추세에는 선, 양에는 area, 세는 것에는 막대입니다. endDot은 마지막 점에 dot을 찍습니다. 이만한 크기의 그림이 담을 수 있는 유일한 직접 라벨입니다. baseline은 목표나 예산 위치에 가로선을 긋습니다.

import { Box, Grid, GridContainer, Sparkline, Typography } from 'neba';

const DATA = [32, 28, 41, 39, 52, 47, 61, 58, 72, 68, 81, 94];

const SHAPES = ['line', 'area', 'bar'] as const;

export default function SparklineVariants() {
  return (
    <GridContainer spacing={3} padded={false}>
      {SHAPES.map((shape) => (
        <Grid key={shape} span={{ xs: 12, sm: 4 }}>
          <Box className="flex h-full flex-col gap-2">
            <Typography level="overline">shape=&quot;{shape}&quot;</Typography>
            <Sparkline data={DATA} shape={shape} size="lg" label={`Example, ${shape}`} />
          </Box>
        </Grid>
      ))}

      <Grid span={{ xs: 12, sm: 6 }}>
        <Box className="flex h-full flex-col gap-2">
          <Typography level="overline">curve=&quot;smooth&quot; · endDot</Typography>
          <Sparkline data={DATA} curve="smooth" size="lg" endDot label="Example, smoothed" />
        </Box>
      </Grid>
      <Grid span={{ xs: 12, sm: 6 }}>
        <Box className="flex h-full flex-col gap-2">
          <Typography level="overline">
            baseline={'{'}60{'}'}
          </Typography>
          <Sparkline
            data={DATA}
            shape="area"
            size="lg"
            baseline={60}
            color="success"
            label="Example against a target of 60"
          />
        </Box>
      </Grid>
    </GridContainer>
  );
}

min · max

Sparkline은 자기 데이터의 범위로 스스로를 채웁니다. 20px 높이에서도 읽히는 이유가 그것이고, 동시에 함정도 그것입니다. min과 max를 같게 주지 않으면 나란히 놓인 두 Sparkline은 서로 다른 축 위에 그려집니다. 같게 주면 한 열의 Sparkline이 small multiples 차트가 됩니다.

import { Card, Sparkline, Table } from 'neba';

const ROWS = [
  { region: 'Americas', mrr: '$412K', trend: [31, 34, 33, 38, 41, 39, 44, 48] },
  { region: 'EMEA', mrr: '$298K', trend: [28, 27, 30, 29, 31, 30, 33, 34] },
  { region: 'APAC', mrr: '$186K', trend: [11, 14, 13, 18, 17, 22, 26, 29] },
  { region: 'LATAM', mrr: '$74K', trend: [12, 11, 10, 11, 9, 8, 9, 7] }
];

/**
 * The shape a sparkline is usually reached for: one strip per row, in a column
 * of its own. All four are drawn on the same `min` and `max`, without which the
 * bottom row's decline would fill its cell exactly as fully as the top row's
 * climb fills that one.
 */
export default function SparklineShapes() {
  return (
    <Card title="MRR by region" className="w-full">
      <Table
        variant="text"
        headers={[
          { key: 'region', label: 'Region' },
          { key: 'mrr', label: 'MRR', align: 'end' },
          {
            key: 'trend',
            label: 'Eight weeks',
            width: 140,
            render: (row: (typeof ROWS)[number]) => (
              <Sparkline
                data={row.trend}
                shape="area"
                size="sm"
                min={0}
                max={60}
                label={`${row.region} trend`}
              />
            )
          }
        ]}
        items={ROWS}
      />
    </Card>
  );
}

size · color · width

size는 높이를 정합니다. 페이지가 아니라 옆에 놓인 한 줄의 글자를 기준으로 만든 사다리입니다. width는 기본적으로 컨테이너를 채우고, 숫자를 주면 고정됩니다.

color는 NebaColor 이름이나 임의의 CSS 색을 받습니다. 전체 차트와 달리 이것은 색을 직접 받는데, Sparkline에는 series가 하나뿐이고 팔레트가 나눠 줄 범례도 없기 때문입니다.

<Sparkline data={data} size="xs" color="success" width={72} />

접근성

• label이 있는 Sparkline은 값들을 화면에 보이지 않는 텍스트로 렌더링하고, 그 이름을 가진 이미지로 노출됩니다. label이 없으면 보조 기술에서 완전히 감춰집니다. 이미 숫자를 말하고 있는 Statistic 옆에 놓일 때는 맞는 동작이고, 그 밖의 자리에서는 틀린 동작입니다.
• 상호작용하는 요소가 없고, 포인터로만 닿을 수 있는 것도 없습니다.