From 4a5efbd3b5909545475df0ddb7a8fba71befe2a4 Mon Sep 17 00:00:00 2001
From: vidvidvid <weetopol@gmail.com>
Date: Thu, 28 Nov 2024 11:31:41 +0100
Subject: [PATCH] fix

---
 .../app/_components/points_comp/FlatMap.tsx   | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 packages/ui/app/_components/points_comp/FlatMap.tsx

diff --git a/packages/ui/app/_components/points_comp/FlatMap.tsx b/packages/ui/app/_components/points_comp/FlatMap.tsx
new file mode 100644
index 000000000..b1759fb81
--- /dev/null
+++ b/packages/ui/app/_components/points_comp/FlatMap.tsx
@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+
+interface IFlatMap {
+  colorData?: string[];
+  rewardsData?: number[];
+}
+const FlatMap = ({
+  rewardsData = [10, 30, 30, 15, 5],
+  colorData = ['#3bff89ff', '#f3fa96', '#F19A3E', '#FF3864', '#C567F1']
+}: IFlatMap) => {
+  const totalSum: number = rewardsData.reduce((acc, curr) => acc + curr, 0);
+  function calculatePercentages(numbers: number[], total: number): number[] {
+    return numbers.map(
+      (number: number) => +((number / total) * 100).toFixed(1) || 0
+    );
+  }
+  const percentVals = useMemo(() => {
+    return calculatePercentages(rewardsData, totalSum);
+  }, [rewardsData, totalSum]);
+
+  return (
+    <div
+      className={`w-full bg-grayUnselect rounded-xl overflow-hidden flex h-3`}
+    >
+      {percentVals.map((vals: number, idx: number) => (
+        <span
+          className={` h-3`}
+          key={idx}
+          style={{ backgroundColor: `${colorData[idx]}`, width: `${vals}%` }}
+        >
+          {' '}
+        </span>
+      ))}
+    </div>
+  );
+};
+
+export default FlatMap;