PlPieChart

한눈에 보는 전체의 부분입니다. 라이브러리에서 가장 좁고 가장 잘못 쓰기 쉬운 차트로, 답할 수 있는 질문은 이 중 하나가 대부분인가 하나뿐입니다.

React

import { PlPieChart } from 'plass-ui';

<PlPieChart data={traffic} categories={sources} />;

import 'package:plass_ui/plass_ui.dart';

PlPieChart(data: traffic, categories: sources);

각도는 비교하기에 나쁜 재료입니다. 몇 퍼센트 차이 나는 두 조각은 구별되지 않고, 여섯 조각의 순위는 매길 수 없습니다. "이 중 하나가 대부분인가"보다 세밀한 질문이거나 조각이 여섯을 넘으면 막대 차트를 쓰세요.

Props

Prop	타입	기본값	설명
data *	readonly PlassChartDatum[]	—	조각. series 목록이 아니라 조각 하나하나의 목록입니다
categories	readonly PlassChartCategory[]	—	각 조각의 이름
shape	'pie' | 'donut' | 'semi'	'pie'	채운 원, 가운데가 열린 고리, 또는 아래로 열린 반원
startAngle	number	0	첫 조각이 시작하는 각도. 열두 시에서 시계 방향이며, semi는 무시합니다
center	ReactNode	—	구멍에 들어가는 것. 고리를 두른 이유인 그 숫자입니다
valueLabels	'none' | 'all'	'none'	조각마다 비중을 적습니다. 값이 아니라 비중이고, 들어가지 않는 label은 지웁니다
legend	PlassChartLegend	—	범례
tooltip	PlassChartTooltip	—	툴팁
height	number | string	—	그림의 높이
format	Intl.NumberFormatOptions	—	값을 쓰는 방식
label	string	'Chart'	그림 전체의 접근성 이름
empty	ReactNode	—	그릴 것이 없을 때 그리는 것
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	타입 스케일과 그림 높이

Prop	타입	기본값	설명
data *	List<PlassChartDatum>	—	조각. series 목록이 아니라 조각 하나하나의 목록입니다
categories	List<PlassChartCategory>?	—	각 조각의 이름
shape	PlPieShape	PlPieShape.pie	채운 원, 가운데가 열린 고리, 또는 아래로 열린 반원
startAngle	double	0	첫 조각이 시작하는 각도. 열두 시에서 시계 방향이며, semi는 무시합니다
center	Widget?	—	구멍에 들어가는 것. 고리를 두른 이유인 그 숫자입니다
valueLabels	PlPieLabels	PlPieLabels.none	조각마다 비중을 적습니다. 파이에 뜻이 없는 last와 extremes를 뺀 두 값짜리 enum입니다
legend	PlChartLegend	PlChartLegend()	범례
tooltip	PlChartTooltip	PlChartTooltip()	툴팁
height	double?	—	그림의 높이
format	String Function(double)?	—	값을 쓰는 방식
semanticLabel	String?	'Chart'	그림 전체의 접근성 이름
empty	Widget?	—	그릴 것이 없을 때 그리는 것
size공통	PlassSize	PlassSize.md	타입 스케일과 그림 높이

데이터는 series 목록이 아니라 조각 하나하나의 목록입니다. 파이란 원래 그런 것이기 때문입니다. 여기서 주체는 조각입니다. 조각마다 팔레트 자리를 하나씩 가져가고, legend도 조각을 나열하며, 색은 크기가 아니라 조각을 따라다닙니다. 그래서 다시 거르거나 다시 정렬해도 category마다 색이 그대로입니다.

null과 0은 둘 다 그리지 않습니다. 어느 쪽도 각도가 없고, 폭이 없는 조각은 가리킬 수 없는 조각입니다.

라이브러리 전체에서 공유 prop이 뜻하는 바는 prop 규약에 있습니다.

Examples

shape

React

import { PlPieChart } from 'plass-ui';

const spend = [46, 31, 23];

const teams = ['Engineering', 'Marketing', 'Support'];

export default function PieChartShape() {
  return (
    <div className="grid w-full gap-6 sm:grid-cols-3">
      {(['pie', 'donut', 'semi'] as const).map((shape) => (
        <PlPieChart
          key={shape}
          data={spend}
          categories={teams}
          shape={shape}
          height={160}
          label={`Spend, ${shape}`}
          legend={false}
        />
      ))}
    </div>
  );
}

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

const List<PlassChartDatum> _spend = <PlassChartDatum>[
  PlassChartDatum(46),
  PlassChartDatum(31),
  PlassChartDatum(23),
];

const List<PlassChartCategory> _teams = <PlassChartCategory>[
  PlassChartCategory.text('Engineering'),
  PlassChartCategory.text('Marketing'),
  PlassChartCategory.text('Support'),
];

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

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        for (final PlPieShape shape in PlPieShape.values)
          Expanded(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 6),
              child: PlPieChart(
                data: _spend,
                categories: _teams,
                shape: shape,
                height: 160,
                legend: const PlChartLegend(hidden: true),
                semanticLabel: 'Spend, ${shape.name}',
              ),
            ),
          ),
      ],
    );
  }
}

semi는 반지름으로 높이의 절반이 아니라 전체를 씁니다. 위쪽 절반만 그리기 때문입니다. 그래서 중심이 상자 한가운데보다 반지름의 절반만큼 아래에 놓이고, 그 결과 호 자체가 타일 한가운데에 옵니다.

center

React

import { PlPieChart } from 'plass-ui';

const plans = [1840, 620, 210];

const tiers = ['Starter', 'Team', 'Enterprise'];

export default function PieChartCenter() {
  return (
    <PlPieChart
      className="w-full"
      data={plans}
      categories={tiers}
      shape="donut"
      label="Accounts by plan"
      center={
        <>
          <span className="text-2xl font-semibold text-(--plass-fg)">2,670</span>
          <span className="text-xs text-(--plass-muted-fg)">accounts</span>
        </>
      }
    />
  );
}

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

const List<PlassChartDatum> _plans = <PlassChartDatum>[
  PlassChartDatum(1840),
  PlassChartDatum(620),
  PlassChartDatum(210),
];

const List<PlassChartCategory> _tiers = <PlassChartCategory>[
  PlassChartCategory.text('Starter'),
  PlassChartCategory.text('Team'),
  PlassChartCategory.text('Enterprise'),
];

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

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

    return PlPieChart(
      data: _plans,
      categories: _tiers,
      shape: PlPieShape.donut,
      semanticLabel: 'Accounts by plan',
      center: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            '2,670',
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.w600, color: tokens.fg),
          ),
          Text('accounts', style: TextStyle(fontSize: 12, color: tokens.mutedFg)),
        ],
      ),
    );
  }
}

가운데가 빈 도넛은 한 입 베어 문 파이일 뿐입니다. 합계, 또는 이 차트가 전하려는 그 숫자 하나가 고리를 두른 이유입니다. 넣을 구멍이 없는 pie에서는 무시됩니다.

valueLabels

React

import { PlPieChart } from 'plass-ui';

const devices = [58, 34, 8];

const kinds = ['Mobile', 'Desktop', 'Tablet'];

export default function PieChartValueLabels() {
  return (
    <PlPieChart
      className="w-full"
      data={devices}
      categories={kinds}
      shape="donut"
      valueLabels="all"
      label="Sessions by device"
    />
  );
}

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

const List<PlassChartDatum> _devices = <PlassChartDatum>[
  PlassChartDatum(58),
  PlassChartDatum(34),
  PlassChartDatum(8),
];

const List<PlassChartCategory> _kinds = <PlassChartCategory>[
  PlassChartCategory.text('Mobile'),
  PlassChartCategory.text('Desktop'),
  PlassChartCategory.text('Tablet'),
];

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

  @override
  Widget build(BuildContext context) {
    return const PlPieChart(
      data: _devices,
      categories: _kinds,
      shape: PlPieShape.donut,
      valueLabels: PlPieLabels.all,
      semanticLabel: 'Sessions by device',
    );
  }
}

조각에 적히는 숫자는 값이 아니라 비중입니다. 파이가 그리는 그림이 비중이고, 값은 hover 한 번 거리에 있습니다. 조각보다 넓은 label은 잘리는 대신 지워지므로, 옆 조각 위에 얹혀 그쪽을 설명하는 일이 생기지 않습니다.

startAngle

첫 조각이 시작하는 자리를, 열두 시에서 시계 방향으로 잰 각도로 지정합니다. semi는 무시합니다. 그 모양은 어디가 열려 있는지로 정의되기 때문입니다.

Accessibility

• 그림은 차트의 이름을 지니고, 눈으로 각도를 읽어 얻는 내용을 글로 넘깁니다. 보이는 조각 전부와 그 값, 비중입니다.
• React에서 그림은 role="img"이자 tab 정거장이고, 화살표 키로 조각을 옮겨 다닙니다. 각 조각이 얼마인지는 focus가 옮겨갈 때 live region으로 읽힙니다.
• React에서는 같은 숫자가 차트 아래 표에도 적힙니다. 화면에서만 잘라낼 뿐 접근성 트리에서 감추지는 않습니다.
• legend는 진짜 button입니다. 하나를 누르면 그 조각이 고리에서 빠지고 각도가 나머지에 다시 나뉩니다.
• 색은 유일한 통로가 아닙니다. 모든 조각은 legend에도, 읽어주는 값에도, 표에도 이름으로 있습니다.