update applying current ai insight from dashboard-cpsp

2026-10-05 14:25:22 +07:00
1 parent 31272035e9
commit b87f20e3b3
@@ -0,0 +1,105 @@
+import React from 'react';
+
+export interface ConditionBar {
+  label: string;
+  actual: number | null;
+  standard: number | null;
+  unit: string;
+  /** Optional note shown under the bar, e.g. why a standard is absent. */
+  note?: string;
+}
+
+export interface InsightConditionChartProps {
+  bars: ConditionBar[];
+  title?: string;
+  emptyLabel?: string;
+}
+
+const AKTUAL = '#dc2626';
+const STANDAR = '#3b82f6';
+
+const fmt = (value: number, unit: string) =>
+  `${Number(value).toLocaleString('id-ID', { maximumFractionDigits: 1 })}${unit ? ` ${unit}` : ''}`;
+
+/**
+ * Current readings against their CP 707 standard, one row per metric.
+ * Used when there is no per-day history (e.g. live IoT snapshot).
+ */
+const InsightConditionChart: React.FC<InsightConditionChartProps> = ({
+  bars,
+  title,
+  emptyLabel = 'Belum ada pembacaan sensor untuk digambarkan.',
+}) => {
+  const usable = bars.filter((bar) => bar.actual !== null || bar.standard !== null);
+
+  if (usable.length === 0) {
+    return (
+      <div className="rounded-xl border border-gray-100 bg-gray-50/60 p-4 text-center text-sm text-gray-500">
+        {emptyLabel}
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-xl border border-gray-100 bg-white p-4 shadow-sm">
+      {title && <h4 className="mb-1 text-sm font-bold text-gray-800">{title}</h4>}
+      <div className="mb-3 flex items-center gap-4 text-xs text-gray-500">
+        <span className="flex items-center gap-1.5">
+          <span className="inline-block h-2.5 w-2.5 rounded-sm" style={{ background: AKTUAL }} />
+          Aktual
+        </span>
+        <span className="flex items-center gap-1.5">
+          <span className="inline-block h-2.5 w-2.5 rounded-sm" style={{ background: STANDAR }} />
+          Standar CP 707
+        </span>
+      </div>
+
+      <div className="space-y-3">
+        {usable.map((bar) => {
+          const max = Math.max(bar.actual ?? 0, bar.standard ?? 0, 1);
+          const pct = (value: number | null) =>
+            value === null ? 0 : Math.max(2, Math.round((value / max) * 100));
+
+          return (
+            <div key={bar.label}>
+              <div className="mb-1 flex items-baseline justify-between">
+                <span className="text-xs font-medium text-gray-600">{bar.label}</span>
+                <span className="text-xs text-gray-500">
+                  {bar.actual === null ? 'data tidak tersedia' : fmt(bar.actual, bar.unit)}
+                  {bar.standard !== null && (
+                    <span className="text-gray-400"> · standar {fmt(bar.standard, bar.unit)}</span>
+                  )}
+                </span>
+              </div>
+
+              <div className="space-y-1">
+                <div className="h-2.5 w-full rounded-sm bg-gray-100">
+                  {bar.actual !== null && (
+                    <div
+                      className="h-full rounded-sm"
+                      style={{ width: `${pct(bar.actual)}%`, background: AKTUAL }}
+                      title={`Aktual ${fmt(bar.actual, bar.unit)}`}
+                    />
+                  )}
+                </div>
+                <div className="h-2.5 w-full rounded-sm bg-gray-100">
+                  {bar.standard !== null && (
+                    <div
+                      className="h-full rounded-sm"
+                      style={{ width: `${pct(bar.standard)}%`, background: STANDAR }}
+                      title={`Standar ${fmt(bar.standard, bar.unit)}`}
+                    />
+                  )}
+                </div>
+              </div>
+
+              {bar.note && <p className="mt-1 text-[11px] text-gray-400">{bar.note}</p>}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default InsightConditionChart;