update applying current ai insight from dashboard-cpsp

components/shared/InsightTrendChart.tsx

@@ -0,0 +1,230 @@
+import React from 'react';
+import {
+  Area,
+  CartesianGrid,
+  ComposedChart,
+  Legend,
+  Line,
+  ReferenceArea,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+/** One plotted line: which field in the row, how to name it, what colour. */
+export interface InsightSeries {
+  field: string;
+  label: string;
+  color: string;
+  /** Draw as a dashed reference line — for a target or standard, not a measurement. */
+  dashed?: boolean;
+}
+
+/**
+ * Shade the distance between a measurement and the standard it is judged against.
+ *
+ * Recharts has no between-two-series area, so the band is two stacked areas: a
+ * transparent base up to the lower of the pair, then the gap itself.
+ */
+export interface InsightGapSpec {
+  actualField: string;
+  targetField: string;
+}
+
+export interface InsightTrendChartProps {
+  /** FULL history — the analysed window is highlighted, not isolated. */
+  rows: Array<Record<string, unknown>>;
+  series: InsightSeries[];
+  /** Inclusive day range the insight text actually covers. */
+  highlight?: { firstDay: number; lastDay: number } | null;
+  unit?: string;
+  title?: string;
+  emptyLabel?: string;
+  gap?: InsightGapSpec | null;
+}
+
+const dayOf = (row: Record<string, unknown>): number | null => {
+  for (const key of ['hari', 'day']) {
+    const value = row[key];
+    if (typeof value === 'number' && Number.isFinite(value)) return value;
+  }
+  return null;
+};
+
+const numOrNull = (value: unknown) =>
+  typeof value === 'number' && Number.isFinite(value) ? value : null;
+
+/**
+ * Trend behind an insight, with the analysed period marked.
+ */
+const InsightTrendChart: React.FC<InsightTrendChartProps> = ({
+  rows,
+  series,
+  highlight,
+  unit,
+  title,
+  emptyLabel = 'Belum ada data untuk digambarkan.',
+  gap = null,
+}) => {
+  const data = (Array.isArray(rows) ? rows : [])
+    .map((row) => {
+      const day = dayOf(row);
+      if (day === null) return null;
+      const point: Record<string, number | null> = { hari: day };
+      for (const s of series) point[s.field] = numOrNull(row[s.field]);
+      if (gap) {
+        const actual = numOrNull(row[gap.actualField]);
+        const target = numOrNull(row[gap.targetField]);
+        point.bandBase = actual !== null && target !== null ? Math.min(actual, target) : null;
+        point.bandSize = actual !== null && target !== null ? Math.abs(actual - target) : null;
+      }
+      return point;
+    })
+    .filter((point): point is Record<string, number | null> & { hari: number } => point !== null)
+    .sort((a, b) => a.hari - b.hari);
+
+  const drawn = series.filter((s) => data.some((point) => point[s.field] !== null));
+
+  if (data.length === 0 || drawn.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>
+    );
+  }
+
+  const days = data.map((point) => point.hari);
+  const step = Math.max(1, Math.ceil(days.length / 10));
+  const ticks = days.filter((_, i) => i % step === 0 || i === days.length - 1);
+
+  const band =
+    highlight && Number.isFinite(highlight.firstDay) && Number.isFinite(highlight.lastDay)
+      ? highlight
+      : null;
+  const bandFrom = band
+    ? band.firstDay === band.lastDay
+      ? band.firstDay - 0.4
+      : band.firstDay
+    : 0;
+  const bandTo = band ? (band.firstDay === band.lastDay ? band.lastDay + 0.4 : band.lastDay) : 0;
+
+  const gapFill = (() => {
+    if (!gap) return null;
+    const last = [...data]
+      .reverse()
+      .find((point) => point[gap.actualField] !== null && point[gap.targetField] !== null);
+    const actual = last?.[gap.actualField];
+    const target = last?.[gap.targetField];
+    if (typeof actual !== 'number' || typeof target !== 'number' || target === 0) {
+      return 'rgba(107, 114, 128, 0.12)';
+    }
+    const deviation = ((actual - target) / target) * 100;
+    if (deviation >= -5) return 'rgba(12, 163, 12, 0.12)';
+    if (deviation >= -15) return 'rgba(250, 178, 25, 0.18)';
+    return 'rgba(208, 59, 59, 0.14)';
+  })();
+
+  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>}
+      {band && (
+        <p className="mb-3 text-xs text-gray-500">
+          Area berbayang = periode yang dibahas insight
+          {band.firstDay === band.lastDay
+            ? ` (hari ke-${band.lastDay})`
+            : ` (hari ke-${band.firstDay} s/d ke-${band.lastDay})`}
+        </p>
+      )}
+      <ResponsiveContainer width="100%" height={230}>
+        <ComposedChart data={data} margin={{ top: 8, right: 12, bottom: 4, left: 0 }}>
+          <CartesianGrid stroke="#e5e7eb" vertical={false} />
+          {band && (
+            <ReferenceArea
+              x1={bandFrom}
+              x2={bandTo}
+              fill="#6b7280"
+              fillOpacity={0.12}
+              stroke="#6b7280"
+              strokeOpacity={0.25}
+            />
+          )}
+          <XAxis
+            dataKey="hari"
+            type="number"
+            domain={[(days[0] ?? 0) - 0.5, (days[days.length - 1] ?? 0) + 0.5]}
+            ticks={ticks}
+            allowDecimals={false}
+            tick={{ fontSize: 11, fill: '#6b7280' }}
+            tickLine={false}
+            axisLine={{ stroke: '#e5e7eb' }}
+            tickFormatter={(value) => `H${value}`}
+          />
+          <YAxis
+            tick={{ fontSize: 11, fill: '#6b7280' }}
+            tickLine={false}
+            axisLine={false}
+            width={52}
+            tickFormatter={(value) => Number(value).toLocaleString('id-ID')}
+          />
+          <Tooltip
+            contentStyle={{
+              fontSize: 12,
+              borderRadius: 8,
+              border: '1px solid #d1d5db',
+              backgroundColor: 'rgba(255, 255, 255, 0.95)',
+            }}
+            labelFormatter={(value) => `Hari ke-${value}`}
+            formatter={(value, name) => {
+              const label = String(name ?? '');
+              if (label === 'bandBase' || label === 'bandSize') return null;
+              if (value == null || Array.isArray(value)) return null;
+              return [`${Number(value).toLocaleString('id-ID')}${unit ? ` ${unit}` : ''}`, label];
+            }}
+          />
+          {drawn.length > 1 && <Legend wrapperStyle={{ fontSize: 12 }} iconType="plainline" />}
+          {gap && gapFill && (
+            <>
+              <Area
+                dataKey="bandBase"
+                stackId="gap"
+                stroke="none"
+                fill="none"
+                legendType="none"
+                isAnimationActive={false}
+                connectNulls
+              />
+              <Area
+                dataKey="bandSize"
+                stackId="gap"
+                stroke="none"
+                fill={gapFill}
+                fillOpacity={1}
+                legendType="none"
+                isAnimationActive={false}
+                connectNulls
+              />
+            </>
+          )}
+          {drawn.map((s) => (
+            <Line
+              key={s.field}
+              type="monotone"
+              dataKey={s.field}
+              name={s.label}
+              stroke={s.color}
+              strokeWidth={2}
+              strokeDasharray={s.dashed ? '5 4' : undefined}
+              dot={!s.dashed && data.length <= 20 ? { r: 3, strokeWidth: 0, fill: s.color } : false}
+              activeDot={{ r: 5, strokeWidth: 2, stroke: '#ffffff' }}
+              connectNulls
+              isAnimationActive={false}
+            />
+          ))}
+        </ComposedChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default InsightTrendChart;