실행 미리 보기

실시간

막대 차트

범주별 계획량과 실적을 비교합니다.

NxBarChart

선 차트

순서가 있는 구간의 변화를 표시합니다.

NxLineChart

도넛 차트

전체 대비 구성 비율을 요약합니다.

NxDonutChart

Running4255%
Idle2127%
Setup1418%

게이지

임계 구간을 기준으로 단일 KPI를 추적합니다.

NxGauge

히트맵

두 범주 차원을 강도로 비교합니다.

NxHeatmap

생키

방향성 흐름을 따라 물량을 추적합니다.

NxSankey

복사 가능한 소스

코드 예시

TSX

import {
    NxBarChart,
    NxDonutChart,
    NxGauge,
    NxHeatmap,
    NxLineChart,
    NxSankey,
} from "@nexia/sdk/host";

const data = [
    { day: "Mon", planned: 112, actual: 104 },
    { day: "Tue", planned: 118, actual: 121 },
    { day: "Wed", planned: 124, actual: 116 },
];
const series = [
    { key: "planned", label: "Planned", color: "#3987e5" },
    { key: "actual", label: "Actual", color: "#199e70" },
];

export function AnalyticsChartsExample() {
    return (
        <div className="grid gap-5 lg:grid-cols-2">
            <NxBarChart
                data={data}
                xKey="day"
                series={series}
                showLegend
                height={260}
                ariaLabel="Production comparison"
            />
            <NxLineChart
                data={data}
                xKey="day"
                series={series}
                showDots
                showLegend
                height={260}
                ariaLabel="Production trend"
            />
            <NxDonutChart
                segments={[
                    {
                        key: "running",
                        label: "Running",
                        value: 42,
                        color: "#3987e5",
                    },
                    { key: "idle", label: "Idle", value: 21, color: "#199e70" },
                ]}
                centerLabel="machines"
                height={260}
                ariaLabel="Machine states"
            />
            <NxGauge
                value={87}
                label="OEE"
                unit="%"
                height={260}
                ariaLabel="Overall equipment effectiveness"
            />
            <NxHeatmap
                data={[
                    { x: "Mon", y: "Line A", value: 86 },
                    { x: "Tue", y: "Line A", value: 92 },
                ]}
                xCategories={["Mon", "Tue"]}
                yCategories={["Line A"]}
                min={60}
                max={100}
                showValues
                height={260}
                ariaLabel="Line utilization"
            />
            <NxSankey
                nodes={[
                    { id: "raw", label: "Raw" },
                    { id: "finished", label: "Finished" },
                ]}
                links={[{ source: "raw", target: "finished", value: 119 }]}
                height={260}
                ariaLabel="Material flow"
            />
        </div>
    );
}12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485