From da3e6cb101b7c50b8fe239711dd3c5251a733dcc Mon Sep 17 00:00:00 2001
From: Francisco Pessano <franpessano1@gmail.com>
Date: Mon, 3 Jul 2023 22:14:17 -0300
Subject: [PATCH] feat: legend

---
 .eslintrc.cjs                             | 10 +++
 packages/client/components/PieCircle.tsx  | 90 ++++++++++++++---------
 packages/client/lib/theme.ts              |  2 +-
 packages/client/lib/utils.ts              |  1 +
 packages/client/screens/Header/Header.tsx |  2 +-
 5 files changed, 70 insertions(+), 35 deletions(-)
 create mode 100644 packages/client/lib/utils.ts

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index feecb7e..40c53d2 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -40,6 +40,16 @@ module.exports = {
       },
     ],
     'prettier/prettier': 'error',
+    'react/jsx-sort-props': [
+      'error',
+      {
+        callbacksLast: true,
+        ignoreCase: true,
+        noSortAlphabetically: false,
+        reservedFirst: true,
+        shorthandFirst: true,
+      },
+    ],
     'sort-keys-fix/sort-keys-fix': 'error',
   },
 };
diff --git a/packages/client/components/PieCircle.tsx b/packages/client/components/PieCircle.tsx
index dd069c3..61c8dd7 100644
--- a/packages/client/components/PieCircle.tsx
+++ b/packages/client/components/PieCircle.tsx
@@ -3,54 +3,78 @@ import Chart from 'react-google-charts';
 import styled, { useTheme } from 'styled-components';
 import { type Theme } from '@/lib/theme';
 import { type PieCircleData } from '@/lib/types';
+import { capitalize } from '@/lib/utils';
 
 export const PieCircle = (props: { pieCircleData: PieCircleData }): JSX.Element => {
   const { pieCircleData } = props;
   const theme = useTheme() as Theme;
   const { colors } = theme;
+  const height = '400px';
   const [data, legendData, chartColors] = [
-    pieCircleData.map(([[label, value]]) => [label, parseFloat(value.toFixed(2))]),
-    pieCircleData.map(([, item]) => item),
+    pieCircleData.map(([[label, value]]) => [capitalize(label), parseFloat(value.toFixed(2))]),
+    pieCircleData.sort(([[, a]], [[, b]]) => b - a).map(([, item]) => item),
     pieCircleData.map(([, { backgroundColor }]) => backgroundColor),
   ];
+  console.log({ data, legendData });
   return (
     <PieCircleContainer>
-      <StyledChart
-        chartType="PieChart"
-        data={[['X', 'Y'], ...data]}
-        options={{
-          backgroundColor: colors.primary,
-          colors: chartColors,
-          legend: 'none',
-        }}
-        width={'100%'}
-        height={'400px'}
-      />
-      <div>
-        {legendData.map(({ backgroundColor, label }) => (
-          <>
-            <div
-              style={{
-                backgroundColor,
-                borderRadius: '100%',
-                height: '20px',
-                width: '20px',
-              }}
-            ></div>
-            <span
-              style={{
-                color: '#fff',
-              }}
-            >
-              {label}
-            </span>
-          </>
+      <ChartContainer height={height}>
+        <StyledChart
+          chartType="PieChart"
+          data={[['X', 'Y'], ...data]}
+          height={height}
+          options={{
+            backgroundColor: colors.primary,
+            colors: chartColors,
+            legend: 'none',
+            pieHole: 0.4,
+          }}
+          width={'100%'}
+        />
+      </ChartContainer>
+      <LegendContainer>
+        {legendData.map(({ backgroundColor, label }, index) => (
+          <LegendItem key={`${index as number}-label`}>
+            <LegendColor color={backgroundColor} />
+            <LegendLabel>{label}</LegendLabel>
+          </LegendItem>
         ))}
-      </div>
+      </LegendContainer>
     </PieCircleContainer>
   );
 };
 
+const ChartContainer = styled.div<{ height: string }>`
+  height: ${({ height }) => height};
+`;
+
+const LegendContainer = styled.div`
+  display: flex;
+  justify-content: space-around;
+`;
+
+const LegendColor = styled.div<{ color: string }>`
+  background-color: ${({ color }) => color};
+  border: 1px solid #fff;
+  border-radius: 6px;
+  height: 25px;
+  max-width: 200px;
+  min-width: 50px;
+`;
+
+const LegendItem = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+`;
+
+const LegendLabel = styled.span<{ theme: Theme }>`
+  color: ${({ theme }) => theme.colors.textColor.primary};
+  font-weight: 500;
+  margin-top: 3px;
+  text-transform: capitalize;
+`;
+
 const PieCircleContainer = styled.div`
   height: 100%;
   width: 100%;
diff --git a/packages/client/lib/theme.ts b/packages/client/lib/theme.ts
index 9a3f753..d4d1426 100644
--- a/packages/client/lib/theme.ts
+++ b/packages/client/lib/theme.ts
@@ -16,7 +16,7 @@ const theme: Theme = {
     secondary: '#443C68',
     complementary: '#393053',
     textColor: {
-      primary: '#ddd',
+      primary: '#fff',
     },
   },
 };
diff --git a/packages/client/lib/utils.ts b/packages/client/lib/utils.ts
new file mode 100644
index 0000000..b6b734b
--- /dev/null
+++ b/packages/client/lib/utils.ts
@@ -0,0 +1 @@
+export const capitalize = (str: string): string => str.charAt(0).toUpperCase() + str.slice(1);
diff --git a/packages/client/screens/Header/Header.tsx b/packages/client/screens/Header/Header.tsx
index c977179..b6bb066 100644
--- a/packages/client/screens/Header/Header.tsx
+++ b/packages/client/screens/Header/Header.tsx
@@ -12,8 +12,8 @@ export const Header = (): JSX.Element => {
     <TabsContainer>
       {tabs.map((tabData) => (
         <StyledTab
-          active={tab.id === tabData.id}
           key={tabData.id}
+          active={tab.id === tabData.id}
           onClick={() => {
             setTab(tabData);
           }}