cynx-ui 1.3.13 → 1.3.15

package/components/ActivityCard.jsx

@@ -1,184 +1,184 @@
-import { useMemo, useState, useRef } from 'react';
-
-const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
-
-function LegendDot({ color, label }) {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-      <span style={{ width: 7, height: 7, borderRadius: 2, background: color, flexShrink: 0 }} />
-      <span style={{ fontSize: '.55rem', color: 'var(--muted)', fontWeight: 500 }}>{label}</span>
-    </div>
-  );
-}
-
-/**
- * ActivityCard — day-block bar with hover tooltip
- */
-export default function ActivityCard({
-  title = 'Activity',
-  subtitle,
-  primary = [],
-  additional = [],
-  totalSlots = 90,
-  greenColor = 'var(--success)',
-  redColor = 'var(--danger)',
-  emptyColor = 'var(--grey-1)',
-  barHeight = 28,
-  barRadius = 3,
-  leftLabel,
-  rightLabel,
-  showDot = true,
-  dotColor,
-  style,
-}) {
-  const [hovered, setHovered] = useState(null);
-  const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
-  const containerRef = useRef(null);
-
-  const bars = useMemo(() => {
-    const len = Math.max(primary.length, additional.length, totalSlots);
-    const result = [];
-    const stepS = primary.length / len;
-    const stepF = additional.length / len;
-    for (let i = 0; i < len; i++) {
-      const si = Math.min(Math.floor(i * stepS), primary.length - 1);
-      const fi = Math.min(Math.floor(i * stepF), additional.length - 1);
-      result.push({ success: primary[si] || 0, failed: additional[fi] || 0 });
-    }
-    return result;
-  }, [primary, additional, totalSlots]);
-
-  const dates = useMemo(() => {
-    const result = [];
-    const now = new Date();
-    for (let i = 0; i < bars.length; i++) {
-      const d = new Date(now);
-      d.setDate(d.getDate() - (bars.length - 1 - i));
-      result.push(d);
-    }
-    return result;
-  }, [bars.length]);
-
-  const totalSuccess = bars.reduce((a, b) => a + b.success, 0);
-  const totalFailed = bars.reduce((a, b) => a + b.failed, 0);
-  const totalAll = totalSuccess + totalFailed;
-  const uptimePercent = totalAll > 0 ? Math.round((totalSuccess / totalAll) * 100) : 100;
-
-  function handleMouseEnter(e, idx) {
-    const rect = e.currentTarget.getBoundingClientRect();
-    const containerRect = containerRef.current.getBoundingClientRect();
-    setTooltipPos({
-      x: rect.left - containerRect.left + rect.width / 2,
-      y: rect.top - containerRect.top - 8,
-    });
-    setHovered(idx);
-  }
-
-  const h = hovered !== null ? bars[hovered] : null;
-  const hTotal = h ? h.success + h.failed : 0;
-
-  return (
-    <div ref={containerRef} style={{
-      background: 'var(--surface,#fff)', border: '1px solid var(--border)', borderRadius: 'var(--rad)',
-      boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04))',
-      padding: '14px 18px', position: 'relative', ...style,
-    }}>
-      {/* Header */}
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          {showDot && (
-            <span style={{ width: 8, height: 8, borderRadius: '50%', background: dotColor || greenColor, flexShrink: 0 }} />
-          )}
-          <span style={{ fontSize: '.78rem', fontWeight: 700, color: 'var(--primary-text)', letterSpacing: '-.01em' }}>{title}</span>
-          {subtitle && <span style={{ fontSize: '.65rem', color: 'var(--muted)', fontWeight: 500 }}>{subtitle}</span>}
-        </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-          <LegendDot color={greenColor} label="Success" />
-          <LegendDot color={redColor} label="Failed" />
-          <LegendDot color={emptyColor} label="None" />
-        </div>
-      </div>
-
-      {/* Bars */}
-      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 2, height: barHeight, marginBottom: 6 }}>
-        {bars.map((b, i) => {
-          const total = b.success + b.failed;
-          const hasData = total > 0;
-          const successPct = hasData ? (b.success / total) * 100 : 0;
-          const failedPct = hasData ? (b.failed / total) * 100 : 0;
-
-          return (
-            <div
-              key={i}
-              onMouseEnter={(e) => handleMouseEnter(e, i)}
-              onMouseLeave={() => setHovered(null)}
-              style={{
-                flex: 1, height: '100%', borderRadius: barRadius, overflow: 'hidden',
-                display: 'flex', flexDirection: 'column',
-                background: hasData ? 'transparent' : emptyColor,
-                cursor: hasData ? 'pointer' : 'default',
-              }}
-            >
-              {hasData && (
-                <>
-                  {b.failed > 0 && <div style={{ height: `${failedPct}%`, background: redColor, marginTop: 'auto' }} />}
-                  {b.success > 0 && <div style={{ height: `${successPct}%`, background: greenColor }} />}
-                </>
-              )}
-            </div>
-          );
-        })}
-      </div>
-
-      {/* Tooltip */}
-      {hovered !== null && (
-        <div style={{
-          position: 'absolute', left: tooltipPos.x, top: tooltipPos.y,
-          transform: 'translate(-50%, -100%)', background: 'var(--surface,#fff)',
-          border: '1px solid var(--border)', borderRadius: 'var(--rads, 8px)',
-          boxShadow: 'var(--smd, 0 4px 12px rgba(0,0,0,.12))', padding: '10px 14px',
-          pointerEvents: 'none', zIndex: 100, whiteSpace: 'nowrap',
-          animation: 'hoverCardIn .15s ease',
-        }}>
-          <div style={{ fontSize: '.65rem', color: 'var(--muted)', fontWeight: 500, marginBottom: 4 }}>
-            {dates[hovered]?.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
-          </div>
-          {h.success > 0 && (
-            <div style={{ fontSize: '.7rem', fontWeight: 700, color: greenColor }}>
-              {h.success} success{h.success !== 1 ? 'es' : ''}
-              {h.failed > 0 && <span style={{ fontWeight: 500, color: 'var(--muted)' }}> ({Math.round((h.success / hTotal) * 100)}%)</span>}
-            </div>
-          )}
-          {h.failed > 0 && (
-            <div style={{ fontSize: '.7rem', fontWeight: 700, color: redColor }}>
-              {h.failed} failed{h.failed !== 1 ? 's' : ''}
-              {h.success > 0 && <span style={{ fontWeight: 500, color: 'var(--muted)' }}> ({Math.round((h.failed / hTotal) * 100)}%)</span>}
-            </div>
-          )}
-          {!h.success && !h.failed && (
-            <div style={{ fontSize: '.7rem', fontWeight: 500, color: 'var(--muted)' }}>No activity</div>
-          )}
-          <div style={{
-            position: 'absolute', left: '50%', bottom: -5,
-            transform: 'translateX(-50%) rotate(45deg)',
-            width: 8, height: 8, background: 'var(--surface,#fff)',
-            borderRight: '1px solid var(--border)', borderBottom: '1px solid var(--border)',
-          }} />
-        </div>
-      )}
-
-      {/* Footer */}
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <span style={{ fontSize: '.58rem', color: 'var(--muted)', fontWeight: 500 }}>{leftLabel || ''}</span>
-        <span style={{ fontSize: '.78rem', fontWeight: 700, color: greenColor, fontFamily: 'var(--mono)' }}>{uptimePercent}%</span>
-        <span style={{ fontSize: '.58rem', color: 'var(--muted)', fontWeight: 500 }}>{rightLabel || ''}</span>
-      </div>
-      <style>{`
-        @keyframes hoverCardIn {
-          from { opacity: 0; transform: translate(-50%, -100%) translateY(4px); }
-          to { opacity: 1; transform: translate(-50%, -100%) translateY(0); }
-        }
-      `}</style>
-    </div>
-  );
-}
+import { useMemo, useState, useRef } from 'react';
+
+const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+
+function LegendDot({ color, label }) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+      <span style={{ width: 7, height: 7, borderRadius: 2, background: color, flexShrink: 0 }} />
+      <span style={{ fontSize: '.55rem', color: 'var(--muted)', fontWeight: 500 }}>{label}</span>
+    </div>
+  );
+}
+
+/**
+ * ActivityCard — day-block bar with hover tooltip
+ */
+export default function ActivityCard({
+  title = 'Activity',
+  subtitle,
+  primary = [],
+  additional = [],
+  totalSlots = 90,
+  greenColor = 'var(--success)',
+  redColor = 'var(--danger)',
+  emptyColor = 'var(--grey-1)',
+  barHeight = 28,
+  barRadius = 3,
+  leftLabel,
+  rightLabel,
+  showDot = true,
+  dotColor,
+  style,
+}) {
+  const [hovered, setHovered] = useState(null);
+  const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
+  const containerRef = useRef(null);
+
+  const bars = useMemo(() => {
+    const len = Math.max(primary.length, additional.length, totalSlots);
+    const result = [];
+    const stepS = primary.length / len;
+    const stepF = additional.length / len;
+    for (let i = 0; i < len; i++) {
+      const si = Math.min(Math.floor(i * stepS), primary.length - 1);
+      const fi = Math.min(Math.floor(i * stepF), additional.length - 1);
+      result.push({ success: primary[si] || 0, failed: additional[fi] || 0 });
+    }
+    return result;
+  }, [primary, additional, totalSlots]);
+
+  const dates = useMemo(() => {
+    const result = [];
+    const now = new Date();
+    for (let i = 0; i < bars.length; i++) {
+      const d = new Date(now);
+      d.setDate(d.getDate() - (bars.length - 1 - i));
+      result.push(d);
+    }
+    return result;
+  }, [bars.length]);
+
+  const totalSuccess = bars.reduce((a, b) => a + b.success, 0);
+  const totalFailed = bars.reduce((a, b) => a + b.failed, 0);
+  const totalAll = totalSuccess + totalFailed;
+  const uptimePercent = totalAll > 0 ? Math.round((totalSuccess / totalAll) * 100) : 100;
+
+  function handleMouseEnter(e, idx) {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const containerRect = containerRef.current.getBoundingClientRect();
+    setTooltipPos({
+      x: rect.left - containerRect.left + rect.width / 2,
+      y: rect.top - containerRect.top - 8,
+    });
+    setHovered(idx);
+  }
+
+  const h = hovered !== null ? bars[hovered] : null;
+  const hTotal = h ? h.success + h.failed : 0;
+
+  return (
+    <div ref={containerRef} style={{
+      background: 'var(--surface,#fff)', border: '1px solid var(--border)', borderRadius: 'var(--rad)',
+      boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04))',
+      padding: '14px 18px', position: 'relative', ...style,
+    }}>
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          {showDot && (
+            <span style={{ width: 8, height: 8, borderRadius: '50%', background: dotColor || greenColor, flexShrink: 0 }} />
+          )}
+          <span style={{ fontSize: '.78rem', fontWeight: 700, color: 'var(--primary-text)', letterSpacing: '-.01em' }}>{title}</span>
+          {subtitle && <span style={{ fontSize: '.65rem', color: 'var(--muted)', fontWeight: 500 }}>{subtitle}</span>}
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <LegendDot color={greenColor} label="Success" />
+          <LegendDot color={redColor} label="Failed" />
+          <LegendDot color={emptyColor} label="None" />
+        </div>
+      </div>
+
+      {/* Bars */}
+      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 2, height: barHeight, marginBottom: 6 }}>
+        {bars.map((b, i) => {
+          const total = b.success + b.failed;
+          const hasData = total > 0;
+          const successPct = hasData ? (b.success / total) * 100 : 0;
+          const failedPct = hasData ? (b.failed / total) * 100 : 0;
+
+          return (
+            <div
+              key={i}
+              onMouseEnter={(e) => handleMouseEnter(e, i)}
+              onMouseLeave={() => setHovered(null)}
+              style={{
+                flex: 1, height: '100%', borderRadius: barRadius, overflow: 'hidden',
+                display: 'flex', flexDirection: 'column',
+                background: hasData ? 'transparent' : emptyColor,
+                cursor: hasData ? 'pointer' : 'default',
+              }}
+            >
+              {hasData && (
+                <>
+                  {b.failed > 0 && <div style={{ height: `${failedPct}%`, background: redColor, marginTop: 'auto' }} />}
+                  {b.success > 0 && <div style={{ height: `${successPct}%`, background: greenColor }} />}
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Tooltip */}
+      {hovered !== null && (
+        <div style={{
+          position: 'absolute', left: tooltipPos.x, top: tooltipPos.y,
+          transform: 'translate(-50%, -100%)', background: 'var(--surface,#fff)',
+          border: '1px solid var(--border)', borderRadius: 'var(--rads, 8px)',
+          boxShadow: 'var(--smd, 0 4px 12px rgba(0,0,0,.12))', padding: '10px 14px',
+          pointerEvents: 'none', zIndex: 100, whiteSpace: 'nowrap',
+          animation: 'hoverCardIn .15s ease',
+        }}>
+          <div style={{ fontSize: '.65rem', color: 'var(--muted)', fontWeight: 500, marginBottom: 4 }}>
+            {dates[hovered]?.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+          </div>
+          {h.success > 0 && (
+            <div style={{ fontSize: '.7rem', fontWeight: 700, color: greenColor }}>
+              {h.success} success{h.success !== 1 ? 'es' : ''}
+              {h.failed > 0 && <span style={{ fontWeight: 500, color: 'var(--muted)' }}> ({Math.round((h.success / hTotal) * 100)}%)</span>}
+            </div>
+          )}
+          {h.failed > 0 && (
+            <div style={{ fontSize: '.7rem', fontWeight: 700, color: redColor }}>
+              {h.failed} failed{h.failed !== 1 ? 's' : ''}
+              {h.success > 0 && <span style={{ fontWeight: 500, color: 'var(--muted)' }}> ({Math.round((h.failed / hTotal) * 100)}%)</span>}
+            </div>
+          )}
+          {!h.success && !h.failed && (
+            <div style={{ fontSize: '.7rem', fontWeight: 500, color: 'var(--muted)' }}>No activity</div>
+          )}
+          <div style={{
+            position: 'absolute', left: '50%', bottom: -5,
+            transform: 'translateX(-50%) rotate(45deg)',
+            width: 8, height: 8, background: 'var(--surface,#fff)',
+            borderRight: '1px solid var(--border)', borderBottom: '1px solid var(--border)',
+          }} />
+        </div>
+      )}
+
+      {/* Footer */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <span style={{ fontSize: '.58rem', color: 'var(--muted)', fontWeight: 500 }}>{leftLabel || ''}</span>
+        <span style={{ fontSize: '.78rem', fontWeight: 700, color: greenColor, fontFamily: 'var(--mono)' }}>{uptimePercent}%</span>
+        <span style={{ fontSize: '.58rem', color: 'var(--muted)', fontWeight: 500 }}>{rightLabel || ''}</span>
+      </div>
+      <style>{`
+        @keyframes hoverCardIn {
+          from { opacity: 0; transform: translate(-50%, -100%) translateY(4px); }
+          to { opacity: 1; transform: translate(-50%, -100%) translateY(0); }
+        }
+      `}</style>
+    </div>
+  );
+}