kyd-shared-badge 0.3.56 → 0.3.59

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -76,7 +76,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
   const isHeadless = !!headless;
 
   // Overall and genre scores
-  const overallFinalPercent = assessmentResult?.final_percent || 0;
+  const overallFinalPercent = Math.round(assessmentResult?.final_percent || 0);
 
   // Build category display grouped by genres from scoring_summary.config.genre_mapping
   const genreMapping = (scoringSummary?.config?.genre_mapping) || {};

package/src/components/BusinessRuleLink.tsx

@@ -18,9 +18,8 @@ const BusinessRuleLink = ({ uid, label, className }: { uid?: string; label: stri
       {tooltip && (
         <div className="hidden group-hover:block absolute z-30 left-1/2 -translate-x-1/2 top-full mt-2 w-72">
           <div style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)', padding: 10, borderRadius: 6, fontSize: 12 }}>
-            <div style={{ fontWeight: 600, color: 'var(--text-secondary)' }}>
-              <span className='font-semibold'>{meta?.category || ''} | </span> <span>{meta?.likert_label || ''}</span>
-            </div>
+            <div style={{ fontWeight: 600, color: 'var(--text-main)' }}>{meta?.category || ''}</div>
+            <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 4 }}>{meta?.likert_label || ''}</div>
           </div>
         </div>
       )}

package/src/components/GraphInsights.tsx

@@ -6,7 +6,6 @@ import { GraphInsightsPayload, ScoringSummary } from '../types';
 import { green1, green2, green3, green4, green5 } from '../colors';
 import {
   ResponsiveContainer,
-  Tooltip,
   PieChart,
   Pie,
   Cell,
@@ -22,6 +21,7 @@ import {
   // CartesianGrid,
   // Legend,
 } from 'recharts';
+import { ChartTooltip, ChartLegend } from './ui/chart';
 
 // avoid platform based charts.
 // target over arching insights that can 
@@ -272,7 +272,7 @@ const GraphInsights = ({
                     <Radar name="Category Score" dataKey="score" stroke={'var(--text-main)'} fill={'var(--text-main)'} fillOpacity={0.22} isAnimationActive={!disableAnimations} />
                     {/* Subtle average ring (arbitrary benchmark for comparison) */}
                     <Radar name="Avg" dataKey="avg" stroke="rgba(128,128,128,0.6)" fill="rgba(128,128,128,0.08)" strokeDasharray="4 4" fillOpacity={1} isAnimationActive={!disableAnimations} />
-                    <Tooltip content={<RadarCategoryTooltip />} />
+                    <ChartTooltip content={<RadarCategoryTooltip />} />
                   </RadarChart>
                 </ResponsiveContainer>
                 {!headless && labelHover && (
@@ -357,35 +357,28 @@ const GraphInsights = ({
                         </Pie>
                       );
                     })()}
-                    <Tooltip content={<CategoryPieTooltip />} />
+                    <ChartTooltip content={<CategoryPieTooltip />} />
                   </PieChart>
                 </ResponsiveContainer>
                 
                 </div>
                 {/* Legend below the pie chart: includes 0% categories */}
                 <div className="mt-3">
-                {(() => {
-                  const palette = [green1, green2, green3, green4, green5];
-                  const pieNames = categoryData.map((d) => d.category);
-                  const getColor = (name: string) => {
-                    const idx = pieNames.indexOf(name);
-                    return idx >= 0 ? palette[idx % palette.length] : 'rgba(128,128,128,0.5)';
-                  };
-                  return (
-                    <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2" style={{ color: 'var(--text-secondary)', fontSize: 12 }}>
-                      {legendData.map((item, idx) => {
-                        const pct = Math.round(((item?.share ?? 0) * 100));
-                        return (
-                          <div key={`legend-${item.name}-${idx}`} className="flex items-center gap-2">
-                            <span style={{ display: 'inline-block', width: 10, height: 10, background: getColor(item.name), border: '1px solid var(--icon-button-secondary)' }} />
-                            <span>{item.name} {pct}%</span>
-                          </div>
-                        );
-                      })}
-                    </div>
-                  );
-                })()}
-              </div>
+                  {(() => {
+                    const palette = [green1, green2, green3, green4, green5];
+                    const pieNames = categoryData.map((d) => d.category);
+                    const getColor = (name: string) => {
+                      const idx = pieNames.indexOf(name);
+                      return idx >= 0 ? palette[idx % palette.length] : 'rgba(128,128,128,0.5)';
+                    };
+                    const items = legendData.map((item) => ({
+                      color: getColor(item.name),
+                      label: item.name,
+                      value: `${Math.round(((item?.share ?? 0) * 100))}%`,
+                    }));
+                    return <ChartLegend items={items} />;
+                  })()}
+                </div>
             </div>
           </div>
         </div>

package/src/components/Skills.tsx

@@ -10,8 +10,8 @@ import {
   XAxis,
   YAxis,
   CartesianGrid,
-  Tooltip,
 } from 'recharts';
+import { ChartTooltip } from './ui/chart';
 
 
 type SkillsRadarPoint = {
@@ -389,7 +389,7 @@ const Skills = ({ skillsCategoryRadar, headless }: { skillsMatrix?: SkillsMatrix
                       <CartesianGrid strokeDasharray="3 3" stroke={'var(--icon-button-secondary)'} />
                       <XAxis dataKey="axis" tick={{ fill: 'var(--text-secondary)', fontSize: 12 }} interval={0} angle={-20} textAnchor="end" height={50} />
                       <YAxis domain={[0, 100]} tick={{ fill: 'var(--text-secondary)' }} />
-                      <Tooltip contentStyle={{ background: 'var(--content-card-background)', border: `1px solid var(--icon-button-secondary)`, color: 'var(--text-main)' }} />
+                      <ChartTooltip />
                       <Bar dataKey="observed" name="Observed" fill={'var(--bar-observed)'} isAnimationActive={!disableAnimations} />
                       <Bar dataKey="self_reported" name="Self-reported" fill={'var(--bar-self-reported)'} isAnimationActive={!disableAnimations} />
                       <Bar dataKey="certified" name="Certified" fill={'var(--bar-certified)'} isAnimationActive={!disableAnimations} />

package/src/components/ui/chart.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import React from 'react';
+import { Tooltip as RechartsTooltip } from 'recharts';
+
+type ChartContainerProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+};
+
+/**
+ * Lightweight shadcn-like chart container.
+ * Provides a consistent surface, border, and color variables for charts.
+ */
+export function ChartContainer({ className, style, children }: ChartContainerProps) {
+  return (
+    <div
+      className={`rounded-lg border ${className || ''}`}
+      style={{
+        backgroundColor: 'var(--content-card-background)',
+        borderColor: 'var(--icon-button-secondary)',
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+type ChartTooltipProps = {
+  // passthrough props accepted by Recharts Tooltip
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  content?: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  cursor?: any;
+};
+
+/**
+ * shadcn-style tooltip wrapper for Recharts Tooltip.
+ * Ensures consistent content styling (background, border, text, radius).
+ */
+export function ChartTooltip({ content, cursor }: ChartTooltipProps) {
+  return (
+    <RechartsTooltip
+      cursor={cursor}
+      content={content}
+      wrapperStyle={{ outline: 'none' }}
+      contentStyle={{
+        background: 'var(--content-card-background)',
+        border: '1px solid var(--icon-button-secondary)',
+        color: 'var(--text-main)',
+        borderRadius: 6,
+        padding: 10,
+      }}
+      itemStyle={{ color: 'var(--text-secondary)' }}
+      labelStyle={{ color: 'var(--text-main)', fontWeight: 600 }}
+    />
+  );
+}
+
+type ChartTooltipContentProps = {
+  title?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  children?: any;
+  // Optional compact body text for simpler tooltips
+  body?: string;
+};
+
+/**
+ * Generic content frame for tooltips used by charts.
+ */
+export function ChartTooltipContent({ title, body, children }: ChartTooltipContentProps) {
+  return (
+    <div style={{ maxWidth: 320 }}>
+      {title ? <div style={{ fontWeight: 600, color: 'var(--text-main)' }}>{title}</div> : null}
+      {body ? (
+        <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: title ? 6 : 0 }}>{body}</div>
+      ) : null}
+      {children}
+    </div>
+  );
+}
+
+type LegendItem = { color: string; label: string; value?: string };
+
+export function ChartLegend({ items }: { items: LegendItem[] }) {
+  return (
+    <div className="mt-3 flex flex-wrap items-center justify-center gap-x-4 gap-y-2" style={{ color: 'var(--text-secondary)', fontSize: 12 }}>
+      {items.map((it, idx) => (
+        <div key={idx} className="flex items-center gap-2">
+          <span
+            style={{
+              display: 'inline-block',
+              width: 10,
+              height: 10,
+              background: it.color,
+              border: '1px solid var(--icon-button-secondary)',
+            }}
+          />
+          <span>
+            {it.label} {it.value}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+

package/src/types.ts

@@ -476,4 +476,12 @@ export type Role = {
 	createdAt?: string; 
 	userId?: string;
 }
+
+// Timeseries for dashboard trends
+export type TimeseriesPoint = { date: string; value: number };
+export interface AssessmentTimeseries {
+  final_percent: TimeseriesPoint[];
+  genres: Record<string, TimeseriesPoint[]>;
+  categories: Record<string, TimeseriesPoint[]>;
+}