[WEB-3808] fix: replaced the profile charts with propel components #6892

packages/propel/src/charts/bar-chart/root.tsx

@@ -56,7 +56,6 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
           dataKey={bar.key}
           stackId={bar.stackId}
           opacity={!!activeLegend && activeLegend !== bar.key ? 0.1 : 1}
-          fill={bar.fill}
           shape={(shapeProps: any) => {
             const showTopBorderRadius = bar.showTopBorderRadius?.(shapeProps.dataKey, shapeProps.payload);
             const showBottomBorderRadius = bar.showBottomBorderRadius?.(shapeProps.dataKey, shapeProps.payload);
@@ -64,6 +63,7 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
             return (
               <CustomBar
                 {...shapeProps}
+                fill={typeof bar.fill === "function" ? bar.fill(shapeProps.payload) : bar.fill}
                 stackKeys={stackKeys}
                 textClassName={bar.textClassName}
                 showPercentage={bar.showPercentage}

packages/types/src/charts.d.ts

@@ -43,7 +43,7 @@ type TChartProps<K extends string, T extends string> = {
 export type TBarItem<T extends string> = {
   key: T;
   label: string;
-  fill: string;
+  fill: string | ((payload: any) => string);
   textClassName: string;
   showPercentage?: boolean;
   stackId: string;
@@ -116,6 +116,7 @@ export type TPieChartProps<K extends string, T extends string> = Pick<
     text?: string | number;
   };
   tooltipLabel?: string | ((payload: any) => string);
+  customLegend?: (props: any) => React.ReactNode;
 };
 
 export type TreeMapItem = {

web/core/components/profile/overview/priority-distribution.tsx

@@ -2,9 +2,10 @@
 
 // ui
 import { useTranslation } from "@plane/i18n";
+import { BarChart } from "@plane/propel/charts/bar-chart";
 import { IUserProfileData } from "@plane/types";
 import { Loader, Card } from "@plane/ui";
-import { BarGraph, ProfileEmptyState } from "@/components/ui";
+import { ProfileEmptyState } from "@/components/ui";
 // image
 import { capitalizeFirstLetter } from "@/helpers/string.helper";
 import emptyBarGraph from "@/public/empty-state/empty_bar_graph.svg";
@@ -15,6 +16,14 @@ type Props = {
   userProfile: IUserProfileData | undefined;
 };
 
+const priorityColors = {
+  urgent: "#991b1b",
+  high: "#ef4444",
+  medium: "#f59e0b",
+  low: "#16a34a",
+  none: "#e5e5e5",
+};
+
 export const ProfilePriorityDistribution: React.FC<Props> = ({ userProfile }) => {
   const { t } = useTranslation();
   return (
@@ -23,50 +32,35 @@ export const ProfilePriorityDistribution: React.FC<Props> = ({ userProfile }) =>
       {userProfile ? (
         <Card>
           {userProfile.priority_distribution.length > 0 ? (
-            <BarGraph
+            <BarChart
+              className="w-full h-[300px]"
+              margin={{ top: 20, right: 30, bottom: 5, left: 0 }}
               data={userProfile.priority_distribution.map((priority) => ({
-                priority: capitalizeFirstLetter(priority.priority ?? "None"),
-                value: priority.priority_count,
+                key: priority.priority ?? "None",
+                name: capitalizeFirstLetter(priority.priority ?? "None"),
+                count: priority.priority_count,
               }))}
-              height="300px"
-              indexBy="priority"
-              keys={["value"]}
-              borderRadius={4}
-              padding={0.7}
-              customYAxisTickValues={userProfile.priority_distribution.map((p) => p.priority_count)}
-              tooltip={(datum) => (
-                <div className="flex items-center gap-2 rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
-                  <span
-                    className="h-3 w-3 rounded"
-                    style={{
-                      backgroundColor: datum?.color ?? "rgb(var(--color-primary-100))",
-                    }}
-                  />
-                  <span className="font-medium text-custom-text-200">{datum.data.priority}:</span>
-                  <span>{datum.value}</span>
-                </div>
-              )}
-              colors={(datum) => {
-                if (datum.data.priority === "Urgent") return "#991b1b";
-                else if (datum.data.priority === "High") return "#ef4444";
-                else if (datum.data.priority === "Medium") return "#f59e0b";
-                else if (datum.data.priority === "Low") return "#16a34a";
-                else return "#e5e5e5";
-              }}
-              theme={{
-                axis: {
-                  domain: {
-                    line: {
-                      stroke: "transparent",
-                    },
-                  },
-                },
-                grid: {
-                  line: {
-                    stroke: "transparent",
-                  },
+              bars={[
+                {
+                  key: "count",
+                  label: "Count",
+                  stackId: "bar-one",
+                  fill: (payload) => priorityColors[payload.key as keyof typeof priorityColors],
+                  textClassName: "",
+                  showPercentage: false,
+                  showTopBorderRadius: () => true,
+                  showBottomBorderRadius: () => true,
                 },
+              ]}
+              xAxis={{
+                key: "name",
+                label: t("profile.stats.priority_distribution.priority"),
               }}
+              yAxis={{
+                key: "count",
+                label: "",
+              }}
+              barSize={20}
             />
           ) : (
             <div className="flex-grow p-7">

web/core/components/profile/overview/state-distribution.tsx

@@ -1,10 +1,13 @@
 // plane imports
 import { STATE_GROUPS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { PieChart } from "@plane/propel/charts/pie-chart";
 import { IUserProfileData, IUserStateDistribution } from "@plane/types";
 // ui
 import { Card } from "@plane/ui";
-import { ProfileEmptyState, PieGraph } from "@/components/ui";
+import { ProfileEmptyState } from "@/components/ui";
+// helpers
+import { capitalizeFirstLetter } from "@/helpers/string.helper";
 // image
 import stateGraph from "@/public/empty-state/state_graph.svg";
 
@@ -22,40 +25,36 @@ export const ProfileStateDistribution: React.FC<Props> = ({ stateDistribution, u
       <h3 className="text-lg font-medium">{t("profile.stats.state_distribution.title")}</h3>
       <Card className="h-full">
         {userProfile.state_distribution.length > 0 ? (
-          <div className="grid grid-cols-1 gap-x-6 md:grid-cols-2">
-            <div>
-              <PieGraph
-                data={
-                  userProfile.state_distribution.map((group) => ({
-                    id: group.state_group,
-                    label: group.state_group,
-                    value: group.state_count,
-                    color: STATE_GROUPS[group.state_group]?.color ?? "rgb(var(--color-primary-100))",
-                  })) ?? []
-                }
-                height="250px"
-                innerRadius={0.6}
-                cornerRadius={5}
-                padAngle={2}
-                enableArcLabels
-                arcLabelsTextColor="#000000"
-                enableArcLinkLabels={false}
-                activeInnerRadiusOffset={5}
-                colors={(datum) => datum?.data?.color}
-                tooltip={(datum) => (
-                  <div className="flex items-center gap-2 rounded-md border border-custom-border-200 bg-custom-background-90 p-2 text-xs">
-                    <span className="capitalize text-custom-text-200">{datum.datum.label} work items:</span>{" "}
-                    {datum.datum.value}
-                  </div>
-                )}
-                margin={{
-                  top: 32,
-                  right: 0,
-                  bottom: 32,
-                  left: 0,
-                }}
-              />
-            </div>
+          <div className="grid grid-cols-1 gap-x-6 md:grid-cols-2 w-full  h-[300px]">
+            <PieChart
+              className="size-full"
+              dataKey="value"
+              margin={{
+                top: 0,
+                right: -10,
+                bottom: 12,
+                left: -10,
+              }}
+              data={
+                userProfile.state_distribution.map((group) => ({
+                  id: group.state_group,
+                  key: group.state_group,
+                  value: group.state_count,
+                  name: capitalizeFirstLetter(group.state_group),
+                  color: STATE_GROUPS[group.state_group]?.color,
+                })) ?? []
+              }
+              cells={userProfile.state_distribution.map((group) => ({
+                key: group.state_group,
+                fill: STATE_GROUPS[group.state_group]?.color,
+              }))}
+              showTooltip
+              tooltipLabel="Count"
+              paddingAngle={5}
+              cornerRadius={4}
+              innerRadius="50%"
+              showLabel={false}
+            />
             <div className="flex items-center">
               <div className="w-full space-y-4">
                 {stateDistribution.map((group) => (