PlLineChart

시간에 대한, 또는 순서가 있는 무엇에 대한 값입니다. 선은 변화를 나타내는 마크입니다. 두 점 사이의 공간이 별개의 두 사실이 아니라 하나의 움직임으로 읽힙니다.

React

import { PlLineChart } from 'plass-ui';

<PlLineChart
  series={[{ name: 'Europe', data: [42, 45, 51, 49] }]}
  categories={['Jan', 'Feb', 'Mar', 'Apr']}
/>;

import 'package:plass_ui/plass_ui.dart';

PlLineChart(
  series: const <PlassChartSeries>[
    PlassChartSeries(
      name: 'Europe',
      data: <PlassChartDatum>[
        PlassChartDatum(42), PlassChartDatum(45), PlassChartDatum(51),
      ],
    ),
  ],
  categories: const <PlassChartCategory>[
    PlassChartCategory.text('Jan'),
    PlassChartCategory.text('Feb'),
    PlassChartCategory.text('Mar'),
  ],
);

category를 섞어도 잃을 것이 없다면 막대 차트를 쓰세요. 제품 둘 사이의 선은 데이터에 없는 관계를 선언합니다.

선을 둘러싼 모든 것(축, 격자, crosshair, 범례, 툴팁, 그리고 스크린 리더가 그림 대신 받는 것)은 공유 프레임에서 옵니다. 한 대시보드의 서로 다른 차트 둘이 두 개의 그림이 아니라 하나의 그림으로 읽히는 이유입니다.

Props

Prop	타입	기본값	설명
series *	readonly PlassChartSeries[]	—	데이터
categories	readonly PlassChartCategory[]	—	category 축이 말하는 것. point가 직접 x를 지니지 않을 때
curve	'linear' | 'smooth' | 'step'	'linear'	선이 다음 점으로 가는 방법. smooth는 monotone cubic이라 이웃 둘보다 낮은 값으로 내려가지 않습니다
markers	'none' | 'auto' | 'all'	'auto'	점 위의 dot. auto는 열넷까지. 무엇이든 포인터 아래의 점에는 늘 붙습니다
connectNulls	boolean	false	빈 곳에서 끊지 않고 선을 통과시킵니다. 이어 붙인 공백은 차트가 지어낸 숫자입니다
valueLabels	'none' | 'last' | 'extremes' | 'all'	'none'	선 위에 어떤 값을 적을지. last가 손이 가는 것입니다 — 각 series가 어디서 끝났는지
stacked	boolean	false	series를 쌓습니다. 선 차트에서는 드물고 두 번 생각할 일입니다
gradient	boolean	false	선을 자기 색의 옅은 단계에서 온전한 색으로 흐리게 합니다
xAxis	PlassChartAxis	—	category 축
yAxis	PlassChartAxis	—	값 축
legend	PlassChartLegend	—	범례
tooltip	PlassChartTooltip	—	툴팁
height	number | string	—	plot의 높이. size 사다리로 떨어집니다
format	Intl.NumberFormatOptions	—	값을 쓰는 방식. Intl에 그대로 넘어갑니다
locale	string	—	BCP 47 태그. 숫자와 날짜의 형식을 정합니다
label	string	'Chart'	그림 전체의 접근성 이름
empty	ReactNode	—	그릴 것이 없을 때 그리는 것
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	타입 스케일, plot 높이, 선 굵기, marker 반지름
variant공통	'solid' | 'glass' | 'ghost'	'ghost'	차트가 놓인 시트. 기본은 없음 — 차트는 시트가 아니라 그림입니다

Prop	타입	기본값	설명
series *	List<PlassChartSeries>	—	데이터
categories	List<PlassChartCategory>?	—	category 축이 말하는 것. point가 직접 x를 지니지 않을 때
curve	PlChartCurve	PlChartCurve.linear	선이 다음 점으로 가는 방법. smooth는 monotone cubic이라 이웃 둘보다 낮은 값으로 내려가지 않습니다
markers	PlChartMarkers	PlChartMarkers.auto	점 위의 dot. auto는 열넷까지. 무엇이든 포인터 아래의 점에는 늘 붙습니다
connectNulls	bool	false	빈 곳에서 끊지 않고 선을 통과시킵니다. 이어 붙인 공백은 차트가 지어낸 숫자입니다
valueLabels	PlassChartValueLabels	PlassChartValueLabels.none	선 위에 어떤 값을 적을지. last가 손이 가는 것입니다 — 각 series가 어디서 끝났는지
xAxis	PlChartAxis	PlChartAxis()	category 축
yAxis	PlChartAxis	PlChartAxis()	값 축
legend	PlChartLegend	PlChartLegend()	범례. React의 `legend={false}`는 여기서 `PlChartLegend(hidden: true)`입니다 — Dart에는 union 타입이 없습니다
tooltip	PlChartTooltip	PlChartTooltip()	툴팁. 끄는 것은 `PlChartTooltip(hidden: true)`입니다
height	double?	—	plot의 높이. size 사다리로 떨어집니다
format	String Function(double)?	—	값을 쓰는 방식. 프레임워크에 Intl이 없으므로 옵션이 아니라 콜백입니다
semanticLabel	String?	'Chart'	그림 전체의 접근성 이름
empty	Widget?	—	그릴 것이 없을 때 그리는 것
size공통	PlassSize	PlassSize.md	타입 스케일, plot 높이, 선 굵기, marker 반지름

PlassChartSeries

Prop	타입	기본값	설명
data *	readonly PlassChartDatum[]	—	category 순서대로의 값들
name	string	—	범례·툴팁·표에서의 이름
color	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | (string & {})	—	팔레트 자리를 덮어씁니다. 라이브러리에서 색이 의미 역할이 아닌 유일한 곳입니다
hidden	boolean	false	꺼진 채로 시작합니다. 상호작용하는 범례가 다시 켭니다

Prop	타입	기본값	설명
data *	List<PlassChartDatum>	—	category 순서대로의 값들
name	String?	—	범례·툴팁·표에서의 이름
color	Color?	—	팔레트 자리를 덮어씁니다. 라이브러리에서 색이 의미 역할이 아닌 유일한 곳입니다
hidden	bool	false	꺼진 채로 시작합니다. 상호작용하는 범례가 다시 켭니다
id	String?	—	무엇이 이 series인지. 기본은 리스트에서의 자리입니다
dashed	bool	false	선을 점선으로 — 예측, 목표, 작년

datum은 맨 숫자이거나, null이거나, 자기에 대해 더 설명하는 point입니다. null은 빈 곳이지 절대 0이 아닙니다. 꺼져 있던 센서, 아직 마감되지 않은 달. 없는 데이터를 0으로 그리는 차트는 장애를 붕괴로 보고하는 차트입니다.

data: [42, null, 51, { y: 49, label: 'Revised' }];

data: const <PlassChartDatum>[
  PlassChartDatum(42),
  PlassChartDatum.gap(),
  PlassChartDatum(51),
  PlassChartDatum.point(PlassChartPoint(y: 49, label: 'Revised')),
],

React의 number | null | object 대신 닫힌 union입니다. union 타입이 없는 Dart가 주는 것입니다.

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

Examples

curve

linear가 기본이고, 데이터에 없는 것을 하나도 더하지 않는 유일한 값입니다. smooth는 일반 spline이 아니라 monotone cubic입니다. 굽지만, 이웃 둘이 모두 위에 있는 값 아래로 내려가지는 않습니다. 차트는 굽어도 되지만 데이터에 없는 값을 보여 줄 수는 없습니다. step은 두 측정 사이에 요율이나 등급이나 설정이 실제로 한 일이고, 그것이 흘러갔다고 흉내 내는 대각선이 아닙니다.

React

import { useState } from 'react';
import { PlLineChart, PlSegment, PlSegmentedButton, type PlassChartCurve } from 'plass-ui';

const rate = [{ name: 'Base rate', data: [0.5, 0.5, 1.25, 1.25, 2, 3, 3, 4.25, 5, 5, 4.75, 4.5] }];

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

export default function LineChartCurve() {
  const [curve, setCurve] = useState<PlassChartCurve>('step');

  return (
    <div className="flex w-full flex-col gap-4">
      <PlSegmentedButton value={curve} onValueChange={(next) => setCurve(next as PlassChartCurve)}>
        <PlSegment value="linear">linear</PlSegment>
        <PlSegment value="smooth">smooth</PlSegment>
        <PlSegment value="step">step</PlSegment>
      </PlSegmentedButton>

      <PlLineChart
        className="w-full"
        series={rate}
        categories={months}
        curve={curve}
        format={{ style: 'unit', unit: 'percent', maximumFractionDigits: 2 }}
      />
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';
import 'package:plass_ui_example/demos/line_chart/data.dart';

final List<PlassChartSeries> _rate = <PlassChartSeries>[
  PlassChartSeries(
    name: 'Base rate',
    data: <double>[
      0.5,
      0.5,
      1.25,
      1.25,
      2,
      3,
      3,
      4.25,
      5,
      5,
      4.75,
      4.5,
    ].map(PlassChartDatum.new).toList(),
  ),
];

class LineChartCurve extends StatefulWidget {
  const LineChartCurve({super.key});

  @override
  State<LineChartCurve> createState() => _LineChartCurveState();
}

class _LineChartCurveState extends State<LineChartCurve> {
  PlChartCurve _curve = PlChartCurve.step;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        PlSegmentedButton<PlChartCurve>(
          value: _curve,
          onChanged: (PlChartCurve next) => setState(() => _curve = next),
          segments: const <PlSegment<PlChartCurve>>[
            PlSegment<PlChartCurve>(value: PlChartCurve.linear, label: Text('linear')),
            PlSegment<PlChartCurve>(value: PlChartCurve.smooth, label: Text('smooth')),
            PlSegment<PlChartCurve>(value: PlChartCurve.step, label: Text('step')),
          ],
        ),
        const SizedBox(height: 16),
        PlLineChart(
          series: _rate,
          categories: months,
          curve: _curve,
          format: (double value) => '$value%',
        ),
      ],
    );
  }
}

Gaps

null은 선을 끊습니다. connectNulls는 대신 이어 붙이는데, 그 공백이 아무 일도 없던 기간이 아니라 수집 방식의 부산물임을 아는 경우가 아니라면 꺼 두어야 합니다.

React

import { PlLineChart } from 'plass-ui';

const uptime = [
  {
    name: 'Requests',
    // The sensor was offline for two hours. That is a gap, not a collapse.
    data: [820, 910, 880, 960, null, null, 1040, 990, 1120]
  }
];

const hours = ['09', '10', '11', '12', '13', '14', '15', '16', '17'];

export default function LineChartGaps() {
  return (
    <PlLineChart
      className="w-full"
      series={uptime}
      categories={hours}
      markers="all"
      xAxis={{ label: 'Hour' }}
    />
  );
}

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

const List<PlassChartCategory> _hours = <PlassChartCategory>[
  PlassChartCategory.text('09'),
  PlassChartCategory.text('10'),
  PlassChartCategory.text('11'),
  PlassChartCategory.text('12'),
  PlassChartCategory.text('13'),
  PlassChartCategory.text('14'),
  PlassChartCategory.text('15'),
  PlassChartCategory.text('16'),
  PlassChartCategory.text('17'),
];

const List<PlassChartSeries> _uptime = <PlassChartSeries>[
  PlassChartSeries(
    name: 'Requests',
    // The sensor was offline for two hours. That is a gap, not a collapse.
    data: <PlassChartDatum>[
      PlassChartDatum(820),
      PlassChartDatum(910),
      PlassChartDatum(880),
      PlassChartDatum(960),
      PlassChartDatum.gap(),
      PlassChartDatum.gap(),
      PlassChartDatum(1040),
      PlassChartDatum(990),
      PlassChartDatum(1120),
    ],
  ),
];

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

  @override
  Widget build(BuildContext context) {
    return const PlLineChart(
      series: _uptime,
      categories: _hours,
      markers: PlChartMarkers.all,
      xAxis: PlChartAxis(label: 'Hour'),
    );
  }
}

양옆이 빈 점은 버리지 않고 dot으로 그립니다. 그것도 측정값이고, 이을 곳이 없는 측정값도 측정값입니다.

valueLabels

last는 각 series가 어디서 끝났는지를 적습니다. 선 차트가 대개 받는 질문이고, 차트가 값 축을 통째로 버릴 수 있게 하는 설정입니다.

React

import { PlLineChart } from 'plass-ui';
import { months, revenue } from './data';

export default function LineChartLabels() {
  return (
    <PlLineChart
      className="w-full"
      size="sm"
      series={revenue.slice(0, 2)}
      categories={months}
      valueLabels="last"
      markers="none"
      yAxis={{ hidden: true }}
      format={{ style: 'currency', currency: 'GBP', maximumFractionDigits: 0 }}
    />
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';
import 'package:plass_ui_example/demos/line_chart/data.dart';

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

  @override
  Widget build(BuildContext context) {
    return PlLineChart(
      size: PlassSize.sm,
      series: revenue.sublist(0, 2),
      categories: months,
      valueLabels: PlassChartValueLabels.last,
      markers: PlChartMarkers.none,
      yAxis: const PlChartAxis(hidden: true),
      format: (double value) => '£${value.toInt()}k',
    );
  }
}

extremes는 최고와 최저를, all은 전부를 적습니다. 모든 점에 숫자가 적힌 차트는 잘못 그린 표입니다.

값 축은 0을 뺍니다

선이 encode하는 것은 위치이므로, 축을 잘라도 모든 점이 같은 만큼 움직이고 모양은 살아남습니다. 막대가 encode하는 것은 길이이고, 98부터 시작하는 순간 아무 뜻도 없어집니다. 막대 차트의 축이 0을 포함하고 이 축이 포함하지 않는 이유입니다.

98과 99 사이에 사는 series는 0부터 시작하는 축에서 평평한 선입니다. 필요하면 축의 min으로 요청하세요.

<PlLineChart series={series} yAxis={{ min: 0 }} />

Colour

팔레트는 고정된 순서의 여덟 색이고, 이 라이브러리에서 색이 의미 역할이 아닌 유일한 곳입니다. series는 개체(지역, 요금제, 경쟁사)이고, 그것에 대해 성공이나 위험을 말하는 것은 아무것도 없습니다.

자리는 series가 넘겨진 배열에서의 index로 배분되고, 현재 보이는 것들 사이의 위치로는 절대 배분되지 않습니다. Europe이 파랑이라고 배운 사람에게서 필터가 그것을 도로 가져갈 수는 없습니다. 아홉 번째 series는 아홉 번째 색이 아닙니다. "기타" 행이거나 두 번째 차트입니다.

토큰은 --plass-chart-1부터 --plass-chart-8까지이고, 브랜드에 맞춰야 하는 프로젝트는 차트마다가 아니라 한 번 덮어씁니다.

Accessibility

• 그림 전체에 이름이 있고, 값으로 보이는 각 series와 그것이 끝난 자리를 답니다. 표를 칸마다 읊는 대신, 눈으로 보는 사람이 모양에서 가져가는 그 읽기입니다.
• 범례는 진짜 컨트롤의 줄입니다. 각 항목이 자기 series가 켜져 있는지 보여 주고, 누르면 바뀝니다.
• 포인터가 올라간 범례 항목은 자기를 밝히는 대신 나머지를 흐립니다. 포인터가 올라갔다고 색이 바뀌는 차트는 그동안 범례가 거짓말을 하는 차트입니다.

• 차트는 데이터의 진짜 <table>도 함께 그립니다. 눈에는 보이지 않고, 스크린 리더가 그림 대신 읽는 것입니다.

• 탭하면 툴팁이 남아 있고, 같은 열을 한 번 더 탭하면 내려갑니다. 뗄 때 지우면 포인터 없는 사람은 끝내 읽지 못하는 툴팁이 됩니다. 터치 화면에서 누름과 뗌은 0.1초 차이입니다. 드래그하면 축을 따라 훑습니다.