PlAreaChart

아래 공간이 채워진 선입니다. 그 채움이 차트의 주제를 바꿉니다. 선은 값이 어디로 갔는지를, 면적은 무언가가 얼마나 있었는지를 보여 줍니다. 쌓으면 그 양이 무엇으로 이루어졌는지까지 보여 줍니다.

React

import { PlAreaChart } from 'plass-ui';

<PlAreaChart series={traffic} categories={months} stacked />;

import 'package:plass_ui/plass_ui.dart';

PlAreaChart(
  series: traffic,
  categories: months,
  stacking: PlAreaStacking.total,
);

선 차트 대신 이것을 쓸지 판단하는 기준은 그것뿐입니다. 그 양이 무엇으로도 합쳐지지 않는다면(온도, 비율, 점수) 아래의 채움은 장식이고, 그런 것이 둘 있는 차트는 서로 싸우는 두 개의 wash입니다.

Props

Prop	타입	기본값	설명
series *	readonly PlassChartSeries[]	—	데이터
categories	readonly PlassChartCategory[]	—	category 축이 말하는 것
curve	'linear' | 'smooth' | 'step'	'linear'	띠의 가장자리가 다음 점으로 가는 방법. PlLineChart와 같은 세 모양입니다
stacked	boolean | 'full'	false	띠를 쌓습니다. full은 각 category를 100%로 정규화해 크기가 아니라 비중에 대한 차트로 만듭니다
markers	'none' | 'auto' | 'all'	'none'	점 위의 dot. 채워진 띠에는 이미 보이는 가장자리가 있으므로 기본은 none입니다
valueLabels	'none' | 'last' | 'extremes' | 'all'	'none'	띠 위에 어떤 값을 적을지
connectNulls	boolean	false	빈 곳에서 끊지 않고 띠를 통과시킵니다. 선보다 더 중요합니다 — 닫힌 채움은 지어낸 숫자를 더 넓게 칠합니다
xAxis	PlassChartAxis	—	category 축
yAxis	PlassChartAxis	—	값 축
legend	PlassChartLegend	—	범례
tooltip	PlassChartTooltip	—	툴팁
height	number | string	—	plot의 높이
format	Intl.NumberFormatOptions	—	값을 쓰는 방식
label	string	'Chart'	그림 전체의 접근성 이름
empty	ReactNode	—	그릴 것이 없을 때 그리는 것
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	타입 스케일, plot 높이, 선 굵기

Prop	타입	기본값	설명
series *	List<PlassChartSeries>	—	데이터
categories	List<PlassChartCategory>?	—	category 축이 말하는 것
curve	PlChartCurve	PlChartCurve.linear	띠의 가장자리가 다음 점으로 가는 방법. PlLineChart와 같은 세 모양입니다
stacking	PlAreaStacking	PlAreaStacking.none	띠를 어떻게 쌓을지. React의 boolean | 'full' 대신 enum 하나입니다 — Dart에는 union 타입이 없고, 세 상태에 이름이 붙는 편이 낫습니다
markers	PlChartMarkers	PlChartMarkers.none	점 위의 dot. 채워진 띠에는 이미 보이는 가장자리가 있으므로 기본은 none입니다
valueLabels	PlassChartValueLabels	PlassChartValueLabels.none	띠 위에 어떤 값을 적을지
connectNulls	bool	false	빈 곳에서 끊지 않고 띠를 통과시킵니다. 선보다 더 중요합니다 — 닫힌 채움은 지어낸 숫자를 더 넓게 칠합니다
xAxis	PlChartAxis	PlChartAxis()	category 축
yAxis	PlChartAxis	PlChartAxis()	값 축
legend	PlChartLegend	PlChartLegend()	범례
tooltip	PlChartTooltip	PlChartTooltip()	툴팁
height	double?	—	plot의 높이
format	String Function(double)?	—	값을 쓰는 방식
semanticLabel	String?	'Chart'	그림 전체의 접근성 이름
empty	Widget?	—	그릴 것이 없을 때 그리는 것
size공통	PlassSize	PlassSize.md	타입 스케일, plot 높이, 선 굵기

데이터는 모든 차트가 받는 같은 PlassChartSeries이고, 여기서도 null은 빈 곳입니다. 오히려 더 눈에 띕니다. 없는 달을 가로질러 닫힌 채움은 이어 붙인 선보다 더 넓은 면적에 지어낸 숫자를 칠하기 때문입니다.

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

Examples

stacked

각 띠가 아래 것들의 합계 위에 올라타고, 맨 위 가장자리가 합입니다. 쌓은 면적 차트가 대개 그것을 보이려고 그려지는 것이기 때문입니다.

쌓인 띠에는 위쪽 선을 따로 긋지 않습니다. 그러면 위의 띠가 색 있는 선으로 분리되고, 두 마크 사이의 선은 데이터가 아닌 잉크입니다. 둘을 가르는 것은 아래의 간격입니다.

크기가 아니라 비중

'full'은 각 category를 100%로 정규화해서, 차트가 크기가 아니라 비중에 대한 것이 되게 합니다. 값 축도 백분율로 다시 표시됩니다.

React

import { PlAreaChart } from 'plass-ui';

const plans = [
  { name: 'Free', data: [62, 58, 54, 49, 44, 40] },
  { name: 'Pro', data: [30, 33, 35, 38, 41, 43] },
  { name: 'Team', data: [8, 9, 11, 13, 15, 17] }
];

const quarters = ['Q1 24', 'Q2 24', 'Q3 24', 'Q4 24', 'Q1 25', 'Q2 25'];

export default function AreaChartShare() {
  return <PlAreaChart className="w-full" series={plans} categories={quarters} stacked="full" />;
}

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

List<PlassChartDatum> _readings(List<double> values) => values.map(PlassChartDatum.new).toList();

final List<PlassChartSeries> _plans = <PlassChartSeries>[
  PlassChartSeries(name: 'Free', data: _readings(<double>[62, 58, 54, 49, 44, 40])),
  PlassChartSeries(name: 'Pro', data: _readings(<double>[30, 33, 35, 38, 41, 43])),
  PlassChartSeries(name: 'Team', data: _readings(<double>[8, 9, 11, 13, 15, 17])),
];

const List<PlassChartCategory> _quarters = <PlassChartCategory>[
  PlassChartCategory.text('Q1 24'),
  PlassChartCategory.text('Q2 24'),
  PlassChartCategory.text('Q3 24'),
  PlassChartCategory.text('Q4 24'),
  PlassChartCategory.text('Q1 25'),
  PlassChartCategory.text('Q2 25'),
];

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

  @override
  Widget build(BuildContext context) {
    return PlAreaChart(series: _plans, categories: _quarters, stacking: PlAreaStacking.full);
  }
}

정규화는 그림이 아니라 데이터에 대한 변경입니다. 축과 툴팁과 표가 모두 그 숫자가 비중이라는 데 동의하게 하는 것이 그것입니다. 툴팁은 넘긴 원래 숫자를 그대로 지닙니다. 백분율밖에 보여 주지 못하는 차트는 데이터를 버린 차트입니다.

stacking은 React의 boolean | 'full' 대신 세 상태를 가진 enum 하나입니다. Dart에는 union 타입이 없고, 예외를 덧붙인 boolean보다 이름 붙은 세 상태가 낫습니다.

쌓지 않은 띠는 겹칩니다

쌓지 않으면 각 띠가 기준선에서 시작해 서로 위에 놓입니다. 채움은 판이 아니라 아래로 흐려지는 wash입니다. 둘이 겹쳐도 읽히고, 값을 나르는 것은 위쪽의 선입니다.

React

import { PlAreaChart } from 'plass-ui';

const load = [
  { name: 'Capacity', data: [100, 100, 100, 100, 100, 100, 100] },
  { name: 'Peak load', data: [42, 61, 88, 71, 94, 56, 38] }
];

const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

export default function AreaChartOverlap() {
  return (
    <PlAreaChart
      className="w-full"
      series={load}
      categories={days}
      curve="smooth"
      format={{ style: 'unit', unit: 'percent' }}
    />
  );
}

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

List<PlassChartDatum> _readings(List<double> values) => values.map(PlassChartDatum.new).toList();

final List<PlassChartSeries> _load = <PlassChartSeries>[
  PlassChartSeries(name: 'Capacity', data: _readings(<double>[100, 100, 100, 100, 100, 100, 100])),
  PlassChartSeries(name: 'Peak load', data: _readings(<double>[42, 61, 88, 71, 94, 56, 38])),
];

const List<PlassChartCategory> _days = <PlassChartCategory>[
  PlassChartCategory.text('Mon'),
  PlassChartCategory.text('Tue'),
  PlassChartCategory.text('Wed'),
  PlassChartCategory.text('Thu'),
  PlassChartCategory.text('Fri'),
  PlassChartCategory.text('Sat'),
  PlassChartCategory.text('Sun'),
];

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

  @override
  Widget build(BuildContext context) {
    return PlAreaChart(
      series: _load,
      categories: _days,
      curve: PlChartCurve.smooth,
      format: (double value) => '${value.toInt()}%',
    );
  }
}

쌓인 띠는 대신 더 평평하고 불투명한 색을 씁니다. 거기서는 채움이 곧 마크이고, 흐려지는 띠에는 아래 가장자리가 없기 때문입니다.

기준선은 언제나 0

선과 달리 면적은 채움이 곧 크기이므로, 기준선이 0이 아니면 띠의 두께가 아무 뜻도 없어집니다. 축을 자를 수 있는 PlLineChart와 이 차트가 공유하지 않는 유일한 축 규칙입니다.

Accessibility

PlLineChart에 적힌 내용이 그대로 적용됩니다. 이름과 series별 요약, 진짜 컨트롤인 범례, 그리고 React 쪽의 숨은 표.