From 19e6fed49cd334e5d840b5ac8b951b5bd9932ec0 Mon Sep 17 00:00:00 2001
From: Vishwam Talnikar <131583570+visz11@users.noreply.github.com>
Date: Mon, 10 Nov 2025 11:23:07 +0530
Subject: [PATCH] Add HrBarChart component for displaying bar chart
---
HrBarChart.tsx | 340 +++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 340 insertions(+)
create mode 100644 HrBarChart.tsx
diff --git a/HrBarChart.tsx b/HrBarChart.tsx
new file mode 100644
index 0000000..1ed8468
--- /dev/null
+++ b/HrBarChart.tsx
@@ -0,0 +1,340 @@
+import { Box, Flex, Text } from '@chakra-ui/react';
+import {
+ BarChart,
+ Bar,
+ XAxis,
+ YAxis,
+ ResponsiveContainer,
+ Tooltip,
+ CartesianGrid,
+} from 'recharts';
+import { useTheme } from '@chakra-ui/react';
+
+interface HrBarChartProps {
+ data: any;
+ keys: any;
+ chartMetadata: any;
+}
+
+const CustomTooltip = ({ active, payload, label }: any) => {
+ if (active && payload && payload.length) {
+ return (
+
+
+ {label}
+
+ Acceptance rate:{' '}
+
+ {payload[0]?.value}%
+
+
+
+ Acceptance Count:{' '}
+
+ {payload[0]?.payload.acceptanceCount}
+
+
+
+ Avg Active Users:{' '}
+
+ {payload[0]?.payload.avgActiveUsers}
+
+
+
+ Line Accepted:{' '}
+
+ {payload[0]?.payload.lineAccepted}
+
+
+
+ Line Suggested:{' '}
+
+ {payload[0]?.payload.lineSuggested}
+
+
+
+ Max Active Users:{' '}
+
+ {payload[0]?.payload.maxActiveUsers}
+
+
+
+ Suggestion Count:{' '}
+
+ {payload[0]?.payload.suggestionCount}
+
+
+
+
+ );
+ }
+ return null;
+};
+
+export const HrBarChart = ({ data, chartMetadata }: HrBarChartProps) => {
+ const { colors } = useTheme();
+ const transformedData = Object.entries(data?.data)?.map(
+ ([language, stats]: [string, any]) => ({
+ language: language.charAt(0).toUpperCase() + language.slice(1),
+ acceptanceRate: parseFloat(stats.acceptanceRate),
+ acceptanceCount: parseInt(stats.acceptanceCount),
+ avgActiveUsers: parseFloat(stats.avgActiveUsers).toFixed(2),
+ lineAccepted: parseInt(stats.lineAccepted),
+ lineSuggested: parseInt(stats.lineSuggested),
+ maxActiveUsers: parseInt(stats.maxActiveUsers),
+ suggestionCount: parseInt(stats.suggestionCount),
+ })
+ );
+ transformedData?.sort((a, b) => b.acceptanceRate - a.acceptanceRate);
+
+ const CustomBarLabel = (props: any) => {
+ const { x, y, width, value } = props;
+ return (
+
+ {`${value}%`}
+
+ );
+ };
+
+ return (
+
+
+
+
+
+ }
+ wrapperStyle={{ outline: 'none' }}
+ />
+ }
+ animationDuration={1000}
+ animationBegin={0}
+ />
+
+
+
+ );
+};import { Box, Flex, Text } from '@chakra-ui/react';
+import {
+ BarChart,
+ Bar,
+ XAxis,
+ YAxis,
+ ResponsiveContainer,
+ Tooltip,
+ CartesianGrid,
+} from 'recharts';
+import { useTheme } from '@chakra-ui/react';
+
+interface HrBarChartProps {
+ data: any;
+ keys: any;
+ chartMetadata: any;
+}
+
+const CustomTooltip = ({ active, payload, label }: any) => {
+ if (active && payload && payload.length) {
+ return (
+
+
+ {label}
+
+ Acceptance rate:{' '}
+
+ {payload[0]?.value &&
+ !isNaN(payload[0]?.value) &&
+ payload[0]?.value > 0
+ ? `${payload[0]?.value}%`
+ : '0'}
+
+
+
+ Acceptance Count:{' '}
+
+ {payload[0]?.payload.acceptanceCount}
+
+
+
+ Avg Active Users:{' '}
+
+ {payload[0]?.payload.avgActiveUsers}
+
+
+
+ Line Accepted:{' '}
+
+ {payload[0]?.payload.lineAccepted}
+
+
+
+ Line Suggested:{' '}
+
+ {payload[0]?.payload.lineSuggested}
+
+
+
+ Max Active Users:{' '}
+
+ {payload[0]?.payload.maxActiveUsers}
+
+
+
+ Suggestion Count:{' '}
+
+ {payload[0]?.payload.suggestionCount}
+
+
+
+
+ );
+ }
+ return null;
+};
+
+export const HrBarChart = ({ data, chartMetadata }: HrBarChartProps) => {
+ const { colors } = useTheme();
+ const transformedData = Object.entries(data?.data)?.map(
+ ([language, stats]: [string, any]) => ({
+ language: language.charAt(0).toUpperCase() + language.slice(1),
+ acceptanceRate: parseFloat(stats.acceptanceRate),
+ acceptanceCount: parseInt(stats.acceptanceCount),
+ avgActiveUsers: parseFloat(stats.avgActiveUsers).toFixed(2),
+ lineAccepted: parseInt(stats.lineAccepted),
+ lineSuggested: parseInt(stats.lineSuggested),
+ maxActiveUsers: parseInt(stats.maxActiveUsers),
+ suggestionCount: parseInt(stats.suggestionCount),
+ })
+ );
+ transformedData?.sort((a, b) => b.acceptanceRate - a.acceptanceRate);
+
+ const CustomBarLabel = (props: any) => {
+ const { x, y, width, value } = props;
+ if (isNaN(value) || value == null || value <= 0) {
+ return null;
+ }
+ return (
+
+ {`${value}%`}
+
+ );
+ };
+
+ return (
+
+
+
+
+
+ }
+ wrapperStyle={{ outline: 'none' }}
+ />
+ }
+ animationDuration={1000}
+ animationBegin={0}
+ />
+
+
+
+ );
+};