Tree View and Charts refinements

danilo-leal · May 21, 2024 · d8ede78 · d8ede78
1 parent 3b48be0
commit d8ede78
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 24 deletions.
diff --git a/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.tsx b/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.tsx
@@ -182,24 +182,26 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
 
 export default function CustomizedTreeView() {
   return (
-    <Card variant="outlined">
-      <CardContent>
-        <Typography variant="subtitle2">Product tree</Typography>
-        <RichTreeView
-          items={ITEMS}
-          aria-label="pages"
-          multiSelect
-          defaultExpandedItems={['1', '1.1']}
-          defaultSelectedItems={['1.1', '1.1.1']}
-          sx={{
-            height: 'fit-content',
-            width: '100%',
-            flexGrow: 1,
-            overflowY: 'auto',
-          }}
-          slots={{ item: CustomTreeItem }}
-        />
-      </CardContent>
+    <Card
+      variant="outlined"
+      sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
+    >
+      <Typography variant="subtitle2">Product tree</Typography>
+      <RichTreeView
+        items={ITEMS}
+        aria-label="pages"
+        multiSelect
+        defaultExpandedItems={['1', '1.1']}
+        defaultSelectedItems={['1.1', '1.1.1']}
+        sx={{
+          m: '0 -8px',
+          pb: '8px',
+          height: 'fit-content',
+          flexGrow: 1,
+          overflowY: 'auto',
+        }}
+        slots={{ item: CustomTreeItem }}
+      />
     </Card>
   );
 }
diff --git a/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.tsx b/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.tsx
@@ -76,8 +76,8 @@ export default function PageViewsBarChart() {
           slotProps={{
             legend: {
               position: { vertical: 'top', horizontal: 'right' },
-              itemMarkWidth: 12,
-              itemMarkHeight: 12,
+              itemMarkWidth: 10,
+              itemMarkHeight: 10,
               itemGap: 24,
               labelStyle: { fontSize: 14 },
             },

diff --git a/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.tsx b/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.tsx
@@ -126,8 +126,8 @@ export default function PageViewsChart() {
             slotProps={{
               legend: {
                 labelStyle: { fontSize: 14 },
-                itemMarkWidth: 12,
-                itemMarkHeight: 12,
+                itemMarkWidth: 10,
+                itemMarkHeight: 10,
                 itemGap: 24,
                 position: { vertical: 'top', horizontal: 'right' },
               },

diff --git a/docs/data/material/getting-started/templates/dashboard/getDashboardTheme.tsx b/docs/data/material/getting-started/templates/dashboard/getDashboardTheme.tsx
@@ -912,7 +912,6 @@ export default function getDashboardTheme(mode: PaletteMode): ThemeOptions {
           },
         },
       },
-      MuiRichTreeView: { styleOverrides: { root: { paddingBottom: 5 } } },
       MuiTreeItem2: {
         styleOverrides: {
           root: ({ theme }) => ({
@@ -929,7 +928,7 @@ export default function getDashboardTheme(mode: PaletteMode): ThemeOptions {
           content: ({ theme }) => ({
             marginTop: theme.spacing(1),
             padding: theme.spacing(0.5, 1),
-            overflow: 'hidden',
+            overflow: 'clip',
             '&:hover': {
               backgroundColor: alpha(gray[300], 0.2),
             },