mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 15:52:10 +01:00
Kaj Kowalski
93fbb44eec
Major code quality overhaul addressing 58% of all linting issues: • Type Safety Improvements: - Replace all any types with proper TypeScript interfaces - Fix Map component shadowing (renamed to CountryMap) - Add comprehensive custom error classes system - Enhance API route type safety • Accessibility Enhancements: - Add explicit button types to all interactive elements - Implement useId() hooks for form element accessibility - Add SVG title attributes for screen readers - Fix static element interactions with keyboard handlers • React Best Practices: - Resolve exhaustive dependencies warnings with useCallback - Extract nested component definitions to top level - Fix array index keys with proper unique identifiers - Improve component organization and prop typing • Code Organization: - Automatic import organization and type import optimization - Fix unused function parameters and variables - Enhanced error handling with structured error responses - Improve component reusability and maintainability Results: 248 → 104 total issues (58% reduction) - Fixed all critical type safety and security issues - Enhanced accessibility compliance significantly - Improved code maintainability and performance
88 lines
2.7 KiB
TypeScript
88 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Separator } from "@/components/ui/separator";
|
|
import type { TopQuestion } from "../lib/types";
|
|
|
|
interface TopQuestionsChartProps {
|
|
data: TopQuestion[];
|
|
title?: string;
|
|
}
|
|
|
|
export default function TopQuestionsChart({
|
|
data,
|
|
title = "Top 5 Asked Questions",
|
|
}: TopQuestionsChartProps) {
|
|
if (!data || data.length === 0) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg font-semibold">{title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
No questions data available
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Find the maximum count to calculate relative bar widths
|
|
const maxCount = Math.max(...data.map((q) => q.count));
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-lg font-semibold">{title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{data.map((question) => {
|
|
const percentage =
|
|
maxCount > 0 ? (question.count / maxCount) * 100 : 0;
|
|
|
|
return (
|
|
<div key={question.question} className="relative pl-8">
|
|
{/* Question text */}
|
|
<div className="flex justify-between items-start mb-2">
|
|
<p className="text-sm font-medium leading-tight pr-4 flex-1 text-foreground">
|
|
{question.question}
|
|
</p>
|
|
<Badge variant="secondary" className="whitespace-nowrap">
|
|
{question.count}
|
|
</Badge>
|
|
</div>
|
|
|
|
{/* Progress bar */}
|
|
<div className="w-full bg-muted rounded-full h-2">
|
|
<div
|
|
className="bg-primary h-2 rounded-full transition-all duration-300 ease-in-out"
|
|
style={{ width: `${percentage}%` }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Rank indicator */}
|
|
<div className="absolute -left-1 top-0 w-6 h-6 bg-primary text-primary-foreground text-xs font-bold rounded-full flex items-center justify-center">
|
|
{index + 1}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<Separator className="my-6" />
|
|
|
|
{/* Summary */}
|
|
<div className="flex justify-between text-sm text-muted-foreground">
|
|
<span>Total questions analyzed</span>
|
|
<span className="font-medium text-foreground">
|
|
{data.reduce((sum, q) => sum + q.count, 0)}
|
|
</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|