パレート図ParetoChartExperimental
大きい要因から並べた棒と累積率の線で、少数の主要因が全体に与える影響を示します。
プレビュー
142分
96分
64分
38分
22分
11分
チョコ停段取替え故障材料待ち品質調整その他
停止時間累計主要因 80%
状態とバリエーション
80%基準線
既定の Pareto 表示です。基準線と累積線で主要因を読み取ります。
142分
96分
64分
38分
22分
11分
チョコ停段取替え故障材料待ち品質調整その他
停止時間累計主要因 80%
基準線なし
累積の傾向だけを見たい場合は threshold={null} で基準線を隠します。
チョコ停段取替え故障材料待ち品質調整その他
停止時間累計
入力順を保持
時系列や工程順で見せたい場合は sort={false} を使います。
その他品質調整材料待ち故障段取替えチョコ停
停止時間累計主要因 80%
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| data | { label?: ReactNode; value: number; color?: ChartColor }[] | - | 要因ごとの値です。既定では value の降順に並び替えます。 |
| threshold | number | null | 80 | 累積率の基準線です。null で非表示にします。 |
| thresholdLabel | ReactNode | - | 基準線のラベルです。省略時は割合を表示します。 |
| sort | boolean | true | 値の降順に並べるかどうかです。false で渡した順を保ちます。 |
| formatValue | (value: number) => ReactNode | - | 棒の値と tooltip の値を整形します。 |
| formatPercent | (percent: number) => ReactNode | "<n>%" | 累積率の表示を整形します。 |
| showGrid | boolean | true | 25/50/75/100% の横グリッドを表示します。 |
| showValues | boolean | false | 各棒の上に値を表示します。 |
| showLegend | boolean | true | 棒、累積線、基準線の凡例を表示します。 |
| label | ReactNode | - | チャートのアクセシブル名と棒の凡例ラベルです。 |
| cumulativeLabel | ReactNode | "Cumulative" | 累積線の凡例と tooltip ラベルです。 |
使い方
import { ParetoChart } from "@gunjo/ui";
const downtimeCauses = [
{ label: "チョコ停", value: 142 },
{ label: "段取替え", value: 96 },
{ label: "故障", value: 64, color: "destructive" },
{ label: "材料待ち", value: 38 },
{ label: "品質調整", value: 22 },
{ label: "その他", value: 11, color: "muted" },
];
export function DowntimePareto() {
return (
<div className="flex w-full max-w-3xl flex-col rounded-lg border bg-card p-4">
<ParetoChart
data={downtimeCauses}
label="停止時間"
cumulativeLabel="累計"
threshold={80}
thresholdLabel="主要因 80%"
formatValue={(value) => value + "分"}
showValues
/>
</div>
);
}