Integration of interactive charts into dashboard for code coverage insights visualization

[Swapnendu003]

Integrated interactive and visually appealing charts into the metrics dashboard to provide better insights into repository data. This includes components for test coverage trends, mostly. The charts improve overall UX by making key metrics easier to understand at a glance, aligning the dashboard with the updated light theme and Keploy’s design system.

[Copilot]

Pull Request Overview

This PR integrates interactive charts and visualizations into the metrics dashboard to provide better insights into code coverage data. The changes introduce a comprehensive set of components for displaying coverage analytics, file heatmaps, and trend charts while maintaining consistency with Keploy's light theme design system.

• Adds comprehensive coverage visualization components including heatmaps, charts, and analytics
• Implements interactive dashboard components with filtering, sorting, and search capabilities
• Establishes TypeScript configuration and utility functions for the frontend application

Reviewed Changes

Copilot reviewed 78 out of 88 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
poc-frontend/tsconfig.json	TypeScript configuration for Next.js application
poc-frontend/tailwind.config.js	Tailwind CSS configuration with grid extensions
poc-frontend/src/utils/*.ts	Utility modules for error analysis and cookie management
poc-frontend/src/types/*.ts	TypeScript type definitions for data structures
poc-frontend/src/services/*.ts	API service layer and authentication logic
poc-frontend/src/components/*.tsx	UI components including visualizations and dashboard elements
poc-frontend/src/app/settings/*	Settings page implementation

Comments suppressed due to low confidence (1)

poc-frontend/src/components/CoverageVisualizations/FileHeatmap.tsx:361

• Use let or const instead of var for variable declarations to follow modern JavaScript best practices and avoid potential hoisting issues.

        text: 'File Coverage Distribution',

[Copilot]

The userData parameter uses any type which reduces type safety. Consider defining a proper interface for user data to provide better type checking and IDE support.

Suggested change

	export const setUserData = (userData: any): void => {
	setCookie(USER_DATA_KEY, JSON.stringify(userData));
	};
	export const getUserData = (): any | undefined => {
	const data = getCookie(USER_DATA_KEY);
	if (data) {
	try {
	return JSON.parse(data);
	export const setUserData = (userData: UserData): void => {
	setCookie(USER_DATA_KEY, JSON.stringify(userData));
	};
	export const getUserData = (): UserData | undefined => {
	const data = getCookie(USER_DATA_KEY);
	if (data) {
	try {
	return JSON.parse(data) as UserData;

[Copilot]

The return type uses any which reduces type safety. Consider defining a proper interface for user data and using that type instead of any.

Suggested change

	export const setUserData = (userData: any): void => {
	setCookie(USER_DATA_KEY, JSON.stringify(userData));
	};
	export const getUserData = (): any | undefined => {
	const data = getCookie(USER_DATA_KEY);
	if (data) {
	try {
	return JSON.parse(data);
	export const setUserData = (userData: UserData): void => {
	setCookie(USER_DATA_KEY, JSON.stringify(userData));
	};
	export const getUserData = (): UserData | undefined => {
	const data = getCookie(USER_DATA_KEY);
	if (data) {
	try {
	return JSON.parse(data) as UserData;

[Copilot]

The Promise type uses any which reduces type safety. Consider using generic types or more specific return types for cached promises.

[Copilot]

The userProfile state uses any type. Consider defining a proper interface for user profile data to improve type safety.

[Copilot]

Global Window interface augmentation should be placed in a separate type declaration file (e.g., types/global.d.ts) rather than in a component file to improve maintainability and reusability.

Suggested change

	declare global {
	interface Window {
	echarts?: any;
	}
	}

[Copilot]

The magic number 1247 for mock files generation should be extracted as a named constant to improve code readability and maintainability.

Suggested change

	const files = propFiles && propFiles.length > 0 ? propFiles : generateMockFiles(1247);
	const files = propFiles && propFiles.length > 0 ? propFiles : generateMockFiles(MOCK_FILE_COUNT);

[Copilot]

The user state uses any type. Consider defining a proper interface for user data to improve type safety and provide better IntelliSense support.

Suggested change

	const SettingsPage = () => {
	const [user, setUser] = useState<any>(null);
	interface User {
	name?: string;
	email?: string;
	// Add other user properties as needed
	}
	const SettingsPage = () => {
	const [user, setUser] = useState<User | null>(null);