PlSparkline

모양만 남기고 전부 걷어낸 차트입니다. 축도, 격자도, legend도, tooltip도 없이 문장 안에 들어가 무언가가 어느 쪽으로 가고 있는지만 보여 줍니다.

React

import { PlSparkline } from 'plass-ui';

<PlSparkline data={signups} endDot />;

import 'package:plass_ui/plass_ui.dart';

PlSparkline(data: signups, endDot: true);

스파크라인은 차트를 줄여 놓은 것과는 다른 물건입니다. 여기에 붙일 수 있는 숫자는 이미 주변 글에 있고, 그래서 아무것도 붙이지 않습니다. PlStat 옆이나 표의 칸, 문장 속에 넣으세요.

Props

Prop	타입	기본값	설명
data *	readonly PlassChartDatum[]	—	값. null은 여기서도 빈 곳입니다
shape	'line' | 'area' | 'bar'	'line'	어떤 mark로 그릴지. 추세는 선, 양은 면적, 낱낱의 개수는 막대
curve	'linear' | 'smooth' | 'step'	'linear'	점에서 점으로 가는 방식
color	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | (string & {})	'--plass-chart-1'	mark의 색. 다른 차트와 달리 직접 받습니다 — series가 하나뿐이라 팔레트가 나눠 줄 것이 없습니다
endDot	boolean	false	값이 있는 마지막 점에 dot을 찍습니다. 이만한 띠에 들어갈 유일한 직접 label입니다
baseline	number	—	띠를 가로지르는 선. 목표치나 예산처럼 이만한 크기가 실을 수 있는 유일한 맥락입니다
min	number	—	척도의 아래끝. 비우면 자기 범위로 띠를 채웁니다
max	number	—	척도의 위끝. 한 줄에 같은 값을 주면 small multiples가 됩니다
width	number | string	'100%'	너비
label	string	—	띠의 이름. 없으면 접근성 트리에서 통째로 빠집니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	띠의 높이. 페이지가 아니라 옆에 놓인 글줄에 맞춰 잽니다

Prop	타입	기본값	설명
data *	List<PlassChartDatum>	—	값. null은 여기서도 빈 곳입니다
shape	PlSparklineShape	PlSparklineShape.line	어떤 mark로 그릴지. 추세는 선, 양은 면적, 낱낱의 개수는 막대
curve	PlChartCurve	PlChartCurve.linear	점에서 점으로 가는 방식
color	PlassColor?	'--plass-chart-1'	mark의 색 계열. 계열이 아닌 정확한 색은 tint가 받습니다
tint	Color?	—	계열 중 하나가 아닌 정확한 색. React의 PlassColor | (string & {})를 둘로 나눈 쪽입니다
endDot	bool	false	값이 있는 마지막 점에 dot을 찍습니다. 이만한 띠에 들어갈 유일한 직접 label입니다
baseline	double?	—	띠를 가로지르는 선. 목표치나 예산처럼 이만한 크기가 실을 수 있는 유일한 맥락입니다
min	double?	—	척도의 아래끝. 비우면 자기 범위로 띠를 채웁니다
max	double?	—	척도의 위끝. 한 줄에 같은 값을 주면 small multiples가 됩니다
width	double?	'100%'	너비
semanticLabel	String?	—	띠의 이름. 없으면 접근성 트리에서 통째로 빠집니다
size공통	PlassSize	PlassSize.md	띠의 높이. 페이지가 아니라 옆에 놓인 글줄에 맞춰 잽니다

색은 다른 차트와 달리 직접 받습니다. sparkline에는 series가 하나뿐이고 legend도 없으니 팔레트가 나눠 줄 것이 없습니다.

tooltip도 legend도 없습니다. 둘 중 하나라도 붙이면 차트가 됩니다. null은 여기서도 빈 곳이고, 선은 거기서 끊깁니다.

Examples

shape

React

import { PlSparkline } from 'plass-ui';

const readings = [12, 19, 15, 22, 18, 26, 24, 31];

export default function SparklineShape() {
  return (
    <div className="w-full max-w-xs flex flex-col gap-6">
      {(['line', 'area', 'bar'] as const).map((shape) => (
        <div key={shape} className="flex items-center gap-4">
          <span className="w-12 shrink-0 text-sm text-(--plass-muted-fg)">{shape}</span>
          <PlSparkline data={readings} shape={shape} />
        </div>
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

final List<PlassChartDatum> _readings = <double>[
  12,
  19,
  15,
  22,
  18,
  26,
  24,
  31,
].map(PlassChartDatum.new).toList();

class SparklineShape extends StatelessWidget {
  const SparklineShape({super.key});

  @override
  Widget build(BuildContext context) {
    final tokens = PlassTheme.of(context);

    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisSize: MainAxisSize.min,
      spacing: 16,
      children: <Widget>[
        for (final PlSparklineShape shape in PlSparklineShape.values)
          Row(
            children: <Widget>[
              SizedBox(
                width: 56,
                child: Text(shape.name, style: TextStyle(fontSize: 14, color: tokens.mutedFg)),
              ),
              Expanded(
                child: PlSparkline(data: _readings, shape: shape),
              ),
            ],
          ),
      ],
    );
  }
}

큰 차트들이 하는 세 문장을, 다른 말은 아무것도 하지 않는 크기에서 그대로 합니다. 추세는 선, 양은 면적, 낱낱의 개수는 막대입니다.

min과 max

React

import { PlSparkline } from 'plass-ui';

const rows = [
  { name: 'Europe', data: [82, 88, 91, 87, 94, 99] },
  { name: 'Asia', data: [11, 14, 12, 17, 15, 21] }
];

export default function SparklineScale() {
  return (
    <div className="grid w-full max-w-lg gap-8 sm:grid-cols-2">
      {[undefined, 0].map((min, at) => (
        <div key={at} className="flex flex-col gap-2">
          <span className="text-xs text-(--plass-muted-fg)">
            {min === undefined ? 'Each to its own range' : 'Both from 0 to 100'}
          </span>
          {rows.map((row) => (
            <div key={row.name} className="flex items-center gap-3">
              <span className="w-14 shrink-0 text-sm text-(--plass-muted-fg)">{row.name}</span>
              <PlSparkline data={row.data} min={min} max={min === undefined ? undefined : 100} />
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

final Map<String, List<PlassChartDatum>> _rows = <String, List<PlassChartDatum>>{
  'Europe': <double>[82, 88, 91, 87, 94, 99].map(PlassChartDatum.new).toList(),
  'Asia': <double>[11, 14, 12, 17, 15, 21].map(PlassChartDatum.new).toList(),
};

class SparklineScale extends StatelessWidget {
  const SparklineScale({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisSize: MainAxisSize.min,
      spacing: 24,
      children: <Widget>[const _Group(shared: false), const _Group(shared: true)],
    );
  }
}

class _Group extends StatelessWidget {
  const _Group({required this.shared});

  final bool shared;

  @override
  Widget build(BuildContext context) {
    final tokens = PlassTheme.of(context);

    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisSize: MainAxisSize.min,
      spacing: 8,
      children: <Widget>[
        Text(
          shared ? 'Both from 0 to 100' : 'Each to its own range',
          style: TextStyle(fontSize: 12, color: tokens.mutedFg),
        ),
        for (final MapEntry<String, List<PlassChartDatum>> row in _rows.entries)
          Row(
            children: <Widget>[
              SizedBox(
                width: 64,
                child: Text(row.key, style: TextStyle(fontSize: 14, color: tokens.mutedFg)),
              ),
              Expanded(
                child: PlSparkline(
                  data: row.value,
                  min: shared ? 0 : null,
                  max: shared ? 100 : null,
                ),
              ),
            ],
          ),
      ],
    );
  }
}

sparkline은 자기 범위에 맞춰 스스로 늘어나므로 띠가 언제나 꽉 찹니다. 20px 높이에서도 읽히는 이유이자 함정입니다. 나란히 놓인 둘은 서로 다른 척도로 그려지므로, 가파르게 오르는 띠가 더 작은 숫자일 수 있습니다. 한 줄로 늘어놓을 때 같은 min과 max를 주면 small multiples 차트가 됩니다.

baseline

React

import { PlSparkline } from 'plass-ui';

const latency = [180, 210, 240, 195, 320, 280, 260, 340, 300, 250];

export default function SparklineBaseline() {
  return (
    <div className="flex w-full max-w-sm items-center gap-4">
      <span className="w-16 shrink-0 text-sm text-(--plass-muted-fg)">p95 ms</span>
      <PlSparkline data={latency} shape="area" baseline={250} endDot label="p95 latency" />
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

final List<PlassChartDatum> _latency = <double>[
  180,
  210,
  240,
  195,
  320,
  280,
  260,
  340,
  300,
  250,
].map(PlassChartDatum.new).toList();

class SparklineBaseline extends StatelessWidget {
  const SparklineBaseline({super.key});

  @override
  Widget build(BuildContext context) {
    final tokens = PlassTheme.of(context);

    return Row(
      children: <Widget>[
        SizedBox(
          width: 64,
          child: Text('p95 ms', style: TextStyle(fontSize: 14, color: tokens.mutedFg)),
        ),
        Expanded(
          child: PlSparkline(
            data: _latency,
            shape: PlSparklineShape.area,
            baseline: 250,
            endDot: true,
            semanticLabel: 'p95 latency',
          ),
        ),
      ],
    );
  }
}

목표치, 예산, 작년 평균. 이만한 띠가 실을 수 있는 맥락은 이것 하나입니다. 데이터 바깥에 있으면 범위 안으로 끌어들이므로 선은 언제나 보입니다.

endDot

마지막 칸이 아니라 값이 있는 마지막 점에 dot을 찍습니다. 이만한 띠에 들어갈 수 있는 유일한 직접 label이고, series가 어디서 끝났는지를 보여 줍니다. 막대에는 붙지 않습니다. 막대는 이미 끝나는 자리에서 끝나기 때문입니다.

Accessibility

• label이 없으면 띠는 접근성 트리에서 통째로 빠집니다. sparkline은 숫자를 이미 가진 글 옆의 장식이고, 이름 없는 이미지를 이미지라고 읽어 주는 것은 소음입니다.
• label이 있으면 이름 붙은 role="img"가 되고, 값이 옆에 적힙니다. 화면에서만 잘라낼 뿐 트리에서 감추지는 않습니다. sparkline이 갚아야 할 것은 숫자이지, 그 숫자가 만든 모양에 대한 설명이 아닙니다.
• 색이 유일한 통로가 아닌 것도 같습니다. sparkline은 자기가 속한 이름과 숫자 옆에 놓입니다.