kyd-shared-badge 0.3.64 → 0.3.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.64",
+  "version": "0.3.65",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/components/charts/ChartEmptyState.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import React from 'react'
+
+export default function ChartEmptyState({ message }: { message: string }) {
+  // const width = 640
+  // const height = 180
+  // const padding = 28
+  // const gridColor = 'var(--icon-button-secondary)'
+  // const lineColor = 'var(--icon-button-secondary)'
+  // const areaColor = '#9CA3AF' // neutral-400-ish
+
+  // // A simple placeholder path
+  // const path = `M ${padding} ${height - padding - 20}
+  //              C ${padding + 80} ${height - padding - 60},
+  //                ${padding + 160} ${height - padding - 10},
+  //                ${padding + 240} ${height - padding - 50}
+  //              S ${padding + 400} ${height - padding - 30},
+  //                ${width - padding} ${height - padding - 70}
+  //              L ${width - padding} ${height - padding}
+  //              L ${padding} ${height - padding} Z`
+
+  return (
+    <div className="h-44 relative">
+      <div className="absolute inset-0 flex items-center justify-center">
+        <div className="px-3 py-1.5 rounded-md border sm:text-sm text-xs" style={{ background: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', color: 'var(--text-secondary)'}}>
+          {message}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+

package/src/components/charts/ChartLegend.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import React from 'react'
+
+export default function ChartLegend({ items }: { items: Array<{ label: string; color: string }> }) {
+  if (!items?.length) return null
+  return (
+    <div className="flex flex-wrap gap-x-3 gap-y-1 text-xs mb-2" style={{ color: 'var(--text-secondary)'}}>
+      {items.map((it) => (
+        <div key={it.label} className="flex items-center gap-1.5">
+          <span className="inline-block w-2.5 h-2.5 rounded-sm" style={{ backgroundColor: it.color }} />
+          <span>{it.label}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+

package/src/components/charts/ChartTooltip.tsx

@@ -0,0 +1,80 @@
+"use client"
+
+import React from 'react'
+
+// type PayloadItem = {
+//   color?: string
+//   name?: string | number
+//   value?: number | string
+//   dataKey?: string
+// }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function ChartTooltip(props: any) {
+  const {
+    active,
+    label,
+    payload,
+    title,
+    valueLabel,
+    valueSuffix,
+    valueFormatter,
+    labelFormatter,
+  } = props || {}
+  if (!active || !payload || !payload.length) return null
+
+  const fmtLabel = () => {
+    try {
+      if (labelFormatter) return labelFormatter(label)
+      return new Date(String(label)).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+    } catch {
+      return String(label)
+    }
+  }
+
+  const fmtValue = (v: number | string) => {
+    const base = valueFormatter ? valueFormatter(v) : String(v)
+    return valueSuffix ? `${base}${valueSuffix}` : base
+  }
+
+  return (
+    <div
+      className="rounded-md border shadow-sm px-3 py-2 text-xs"
+      style={{
+        background: 'var(--content-card-background)',
+        borderColor: 'var(--icon-button-secondary)',
+        color: 'var(--text-main)'
+      }}
+    >
+      <div className="mb-1">
+        {title ? (
+          <div className="font-medium" style={{ color: 'var(--text-main)'}}>{title}</div>
+        ) : null}
+        <div style={{ color: 'var(--text-secondary)' }}>{fmtLabel()}</div>
+      </div>
+      <div className="space-y-1">
+        {payload.map((item: { color?: string, name?: string | number, value?: number | string, dataKey?: string }, idx: number) => (
+          <div key={idx} className="flex items-center justify-between gap-3">
+            <div className="flex items-center gap-2">
+              <span className="inline-block w-2.5 h-2.5 rounded-sm" style={{ backgroundColor: item.color || 'var(--icon-accent)' }} />
+              <span style={{ color: 'var(--text-secondary)'}}>{String(item.name || item.dataKey)}</span>
+            </div>
+            <div className="font-medium" style={{ color: 'var(--text-main)'}}>
+              {fmtValue(item.value ?? '')}
+            </div>
+          </div>
+        ))}
+        {valueLabel && payload.length === 1 ? (
+          <div className="flex items-center justify-between gap-3">
+            <span style={{ color: 'var(--text-secondary)'}}>{valueLabel}</span>
+            <span className="font-medium" style={{ color: 'var(--text-main)'}}>
+              {fmtValue(payload[0].value ?? '')}
+            </span>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+

package/src/index.ts

@@ -4,4 +4,8 @@ export { default as PrintableBadgeDisplay } from './PrintableBadgeDisplay';
 export { default as ChatWindowStreaming } from './chat/ChatWindowStreaming';
 export { default as ChatWidget } from './chat/ChatWidget';
 export * from './utils/date';
-export { getBadgeImageUrl } from './components/ReportHeader';
+export { getBadgeImageUrl } from './components/ReportHeader';
+
+export * from './components/charts/ChartTooltip';
+export * from './components/charts/ChartEmptyState';
+export * from './components/charts/ChartLegend';