kyd-shared-badge 0.2.30 → 0.2.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -159,71 +159,67 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
|
|
|
159
159
|
<div className={'space-y-12 divide-y'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
|
|
160
160
|
<div className="pt-8 first:pt-0">
|
|
161
161
|
<Reveal as={'h4'} offsetY={8} durationMs={500} className={'text-2xl font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Report Summary</Reveal>
|
|
162
|
-
<div className=
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
)
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
</Reveal>
|
|
224
|
-
);
|
|
225
|
-
})()}
|
|
226
|
-
</div>
|
|
162
|
+
<Reveal as={'div'} offsetY={8} durationMs={500} className={'space-y-12 divide-y'} style={{ borderColor: 'var(--icon-button-secondary)' }}>
|
|
163
|
+
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 *:min-h-full">
|
|
164
|
+
{/* Technical semicircle gauge (refactored) */}
|
|
165
|
+
{(() => {
|
|
166
|
+
const ui = graphInsights?.uiSummary?.technical || {};
|
|
167
|
+
const pct = Math.round(Number(ui?.percent ?? 0));
|
|
168
|
+
const label = ui?.label || 'EVIDENCE';
|
|
169
|
+
const top = ui?.top_movers && ui.top_movers.length > 0 ? ui.top_movers : topBusinessForGenre('Technical');
|
|
170
|
+
return (
|
|
171
|
+
<GaugeCard
|
|
172
|
+
key={'technical-card'}
|
|
173
|
+
title={'KYD Technical'}
|
|
174
|
+
description={'The gauge visualization shows a weighted composite of technical evidence, with rightward movement indicating stronger indications of developer capability'}
|
|
175
|
+
percent={pct}
|
|
176
|
+
label={label}
|
|
177
|
+
topMovers={top?.map(t => ({ label: t?.label, uid: t?.uid }))}
|
|
178
|
+
topMoversTitle={'Top Score Movers'}
|
|
179
|
+
/>
|
|
180
|
+
);
|
|
181
|
+
})()}
|
|
182
|
+
|
|
183
|
+
{/* Risk descending bars card (abstracted) */}
|
|
184
|
+
{(() => {
|
|
185
|
+
const ui = graphInsights?.uiSummary?.risk || {};
|
|
186
|
+
const pctGood = Math.round(Number(ui?.percent_good ?? 0));
|
|
187
|
+
const label = ui?.label || 'RISK';
|
|
188
|
+
const top = ui?.top_movers && ui.top_movers.length > 0 ? ui.top_movers : topBusinessForGenre('Risk');
|
|
189
|
+
const tooltip = 'Higher bar filled indicates lower overall risk; movement to the right reflects improved risk posture.';
|
|
190
|
+
return (
|
|
191
|
+
<RiskCard
|
|
192
|
+
title={'KYD Risk'}
|
|
193
|
+
description={'The bar chart visualizes relative risk levels, where shorter bars denote lower risk and taller bars indicate greater exposure.'}
|
|
194
|
+
percentGood={pctGood}
|
|
195
|
+
label={label}
|
|
196
|
+
topMovers={top?.map(t => ({ label: t?.label, uid: t?.uid }))}
|
|
197
|
+
topMoversTitle={'Top Score Movers'}
|
|
198
|
+
tooltipText={tooltip}
|
|
199
|
+
/>
|
|
200
|
+
);
|
|
201
|
+
})()}
|
|
202
|
+
|
|
203
|
+
{/* AI transparency semicircle gauge */}
|
|
204
|
+
{(() => {
|
|
205
|
+
const ai_usage_summary = assessmentResult?.ai_usage_summary;
|
|
206
|
+
const label = 'AI Transparency'// TODO: calculate label frontend
|
|
207
|
+
const topMovers = ai_usage_summary?.key_findings || []
|
|
208
|
+
return (
|
|
209
|
+
<GaugeCard
|
|
210
|
+
key={'ai-card'}
|
|
211
|
+
title={'KYD AI'}
|
|
212
|
+
description={'Indicates the degree to which AI-assisted code is explicitly disclosed across analyzed files.'}
|
|
213
|
+
percent={ai_usage_summary?.transparency_score}
|
|
214
|
+
label={label}
|
|
215
|
+
// id non-functional
|
|
216
|
+
topMovers={topMovers.map(t => ({ label: t, uid: 'ai-usage' }))}
|
|
217
|
+
topMoversTitle={'Key Findings'}
|
|
218
|
+
/>
|
|
219
|
+
);
|
|
220
|
+
})()}
|
|
221
|
+
</div>
|
|
222
|
+
</Reveal>
|
|
227
223
|
</div>
|
|
228
224
|
|
|
229
225
|
{/* Technical Scores */}
|
|
@@ -34,7 +34,7 @@ export default function GaugeCard({
|
|
|
34
34
|
|
|
35
35
|
return (
|
|
36
36
|
<div
|
|
37
|
-
className={'rounded-md p-5 border flex flex-col'}
|
|
37
|
+
className={'rounded-md p-5 border flex flex-col min-h-full'}
|
|
38
38
|
style={{
|
|
39
39
|
backgroundColor: 'var(--content-card-background)',
|
|
40
40
|
borderColor: 'var(--icon-button-secondary)',
|
|
@@ -4,7 +4,7 @@ import React, { CSSProperties, PropsWithChildren } from 'react';
|
|
|
4
4
|
import { useInViewOnce } from './useInViewOnce';
|
|
5
5
|
|
|
6
6
|
type RevealProps = PropsWithChildren<{
|
|
7
|
-
as?:
|
|
7
|
+
as?: React.ElementType;
|
|
8
8
|
/** px to translate on Y axis initially */
|
|
9
9
|
offsetY?: number;
|
|
10
10
|
/** px to translate on X axis initially (rarely needed) */
|