kyd-shared-badge 0.3.59 → 0.3.60

package/package.json

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

package/src/components/BusinessRuleLink.tsx

@@ -18,8 +18,9 @@ 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-main)' }}>{meta?.category || ''}</div>
-            <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 4 }}>{meta?.likert_label || ''}</div>
+            <div style={{ fontWeight: 600, color: 'var(--text-secondary)' }}>
+              <span className='font-semibold'>{meta?.category || ''} | </span> <span>{meta?.likert_label || ''}</span>
+            </div>
           </div>
         </div>
       )}

package/src/components/GraphInsights.tsx

@@ -6,6 +6,7 @@ import { GraphInsightsPayload, ScoringSummary } from '../types';
 import { green1, green2, green3, green4, green5 } from '../colors';
 import {
   ResponsiveContainer,
+  Tooltip,
   PieChart,
   Pie,
   Cell,
@@ -21,7 +22,6 @@ 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} />
-                    <ChartTooltip content={<RadarCategoryTooltip />} />
+                    <Tooltip content={<RadarCategoryTooltip />} />
                   </RadarChart>
                 </ResponsiveContainer>
                 {!headless && labelHover && (
@@ -357,28 +357,35 @@ const GraphInsights = ({
                         </Pie>
                       );
                     })()}
-                    <ChartTooltip content={<CategoryPieTooltip />} />
+                    <Tooltip 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)';
-                    };
-                    const items = legendData.map((item) => ({
-                      color: getColor(item.name),
-                      label: item.name,
-                      value: `${Math.round(((item?.share ?? 0) * 100))}%`,
-                    }));
-                    return <ChartLegend items={items} />;
-                  })()}
-                </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)';
+                  };
+                  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>
             </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)' }} />
-                      <ChartTooltip />
+                      <Tooltip contentStyle={{ background: 'var(--content-card-background)', border: `1px solid var(--icon-button-secondary)`, color: 'var(--text-main)' }} />
                       <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

@@ -1,110 +0,0 @@
-'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>
-  );
-}
-
-