Polish a few things in margins revert recharts upgrade broke responsive

mohamedmansour · Aug 15, 2021 · 5a37ec1 · 5a37ec1
1 parent d5983f3
commit 5a37ec1
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 37 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -17,9 +17,8 @@
     "react-icons": "^4.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
-    "recharts": "^2.1.0",
-    "string.prototype.matchall": "^4.0.5",
-    "typescript": "^4.3.5"
+    "recharts": "2.0.10",
+    "string.prototype.matchall": "^4.0.5"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -50,11 +49,12 @@
     "@types/d3-scale-chromatic": "^3.0.0",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.6.1",
-    "@types/react": "^17.0.17",
+    "@types/react": "^17.0.18",
     "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.1.8",
     "@types/string.prototype.matchall": "^4.0.0",
     "node-cron": "^3.0.0",
-    "node-fetch": "^2.6.1"
+    "node-fetch": "^2.6.1",
+    "typescript": "^4.3.5"
   }
 }
diff --git a/frontend/src/atoms/Card.tsx b/frontend/src/atoms/Card.tsx
@@ -24,4 +24,4 @@ export const Card = forwardRef<CardProps, 'div'>((props: CardProps, ref: React.F
       </Box>
     </Box>
   )
-})
+})
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback } from 'react';
- import { useHistory, useLocation } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 import {
-  PieChart, Pie, Cell, Tooltip, 
+  PieChart, Pie, Cell, Tooltip,
   LabelList, Bar, BarChart, XAxis, YAxis
 } from 'recharts';
 
@@ -52,7 +52,7 @@ function Home() {
         console.error(e);
       }
     }
-    
+
     if (filterCount(searchFilters) === 0) {
       // Deep clone since we are mutating it.
       searchFilters = JSON.parse(JSON.stringify(knownNodesFilter));
@@ -111,13 +111,13 @@ function Home() {
       </g>
     );
   };
-  
+
   const renderTooltipContent = (props: any): any => {
     if (!props.active || !props.payload || !props.payload.length) {
       return null
     }
-    
-    const { payload: {name, count}} = props.payload[0]
+
+    const { payload: { name, count } } = props.payload[0]
     return (
       <TooltipCard>
         <Text fontWeight="bold">{name}</Text>
@@ -134,9 +134,10 @@ function Home() {
       <GridItem colSpan={LayoutTwoColSpan}>
         <Filtering filters={filters} onFiltersChange={onFiltersChanged} />
       </GridItem>
+
       <GridItem colSpan={LayoutTwoColSpan}>
-        <Card title={barChartTitle} w="99%" contentHeight={barChartData.length * 40}>
-          <CustomResponsiveContainer height={barChartData.length * 40}>
+        <Card title={barChartTitle} contentHeight={barChartData.length * 40}>
+          <CustomResponsiveContainer>
             <BarChart
               data={barChartData}
               layout="vertical"
@@ -145,7 +146,7 @@ function Home() {
             >
               <XAxis type="number" hide stroke={color} />
               <YAxis dataKey="name" type="category" interval={0} stroke={color} />
-              <Tooltip cursor={false} content={renderTooltipContent}/>
+              <Tooltip cursor={false} content={renderTooltipContent} />
               <Bar dataKey="count">
                 {barChartData.map((entry, index) => (
                   <Cell key={`cell-${index}`} fill={colors[index % 10]} />
@@ -157,8 +158,8 @@ function Home() {
         </Card>
       </GridItem>
 
-      <Card title="Popular Operating Systems" w="99%" contentHeight={300}>
-        <CustomResponsiveContainer height={300}>
+      <Card title="Popular Operating Systems" contentHeight={300}>
+        <CustomResponsiveContainer>
           <PieChart>
             <Pie
               data={data.operatingSystems}
@@ -172,6 +173,7 @@ function Home() {
               label={renderLabelContent}
               isAnimationActive={false}
               onClick={onOperatingSystemClicked}
+              stroke="none"
             >
               {
                 data.operatingSystems.map((entry, index) => (
@@ -186,8 +188,8 @@ function Home() {
         </CustomResponsiveContainer>
       </Card>
 
-      <Card title="Popular Client Runtimes" w="99%" contentHeight={300}>
-        <CustomResponsiveContainer height={300}>
+      <Card title="Popular Client Runtimes" contentHeight={300}>
+        <CustomResponsiveContainer>
           <PieChart>
             <Pie
               data={data.languages}
@@ -200,6 +202,7 @@ function Home() {
               minAngle={data.languages.length === 1 ? 0 : 20}
               label={renderLabelContent}
               isAnimationActive={false}
+              stroke="none"
             >
               {
                 data.languages.map((entry, index) => (

diff --git a/frontend/src/theme.ts b/frontend/src/theme.ts
@@ -22,6 +22,7 @@ export const theme = extendTheme({
         px: "2",
         py: "3",
         rounded: "md",
+        h: "100%",
       })
     },
     TablePlus: {
@@ -60,4 +61,4 @@ export const theme = extendTheme({
       },
     }
   }
-})
+})
-Original file line number
+Diff line change
@@ Expand Up @@
           </Box>
         </Box>
       )
-    })
+    })