remove unnecessary Box component

danilo-leal · May 21, 2024 · 64acd41 · 64acd41
1 parent d8ede78
commit 64acd41
Showing 1 changed file with 103 additions and 105 deletions.
diff --git a/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.tsx b/docs/data/material/getting-started/templates/dashboard/components/PageViewsChart.tsx
@@ -50,110 +50,108 @@ export default function PageViewsChart() {
   const colorPalette = mode === 'dark' ? colorPaletteDark : colorPaletteLight;
 
   return (
-    <Box sx={{ height: 400, width: '100%' }}>
-      <Card variant="outlined">
-        <CardContent>
-          <Typography variant="subtitle2" gutterBottom>
-            Page views and downloads
-          </Typography>
-          <LineChart
-            colors={colorPalette}
-            xAxis={[
-              {
-                scaleType: 'point',
-                data,
-                tickInterval: (index, i) => (i + 1) % 5 === 0,
-              },
-            ]}
-            series={[
-              {
-                id: 'page-views',
-                label: 'Page views',
-                showMark: false,
-                curve: 'linear',
-                stack: 'total',
-                stackOrder: 'ascending',
-                data: [
-                  6234, 6087, 6421, 6312, 6190, 6400, 6357, 6029, 6173, 6482, 6215,
-                  6051, 6338, 6142, 6018, 6247, 6463, 6371, 6060, 6100, 6389, 6203,
-                  6497, 6036, 6156, 6470, 6269, 6091, 6445, 6121,
-                ],
-                area: true,
-              },
-              {
-                id: 'downloads',
-                label: 'Downloads',
-                showMark: false,
-                curve: 'linear',
-                stack: 'total',
-                area: true,
-                stackOrder: 'ascending',
-                data: [
-                  4486, 4255, 4046, 4316, 4418, 4498, 4421, 4474, 4036, 4049, 4206,
-                  4458, 4259, 4353, 4496, 4178, 4265, 4424, 4186, 4003, 4204, 4467,
-                  4120, 4410, 4292, 4143, 4403, 4373, 4079, 4291,
-                ],
-              },
-              {
-                id: 'conversions',
-                label: 'Conversions',
-                showMark: false,
-                curve: 'linear',
-                stack: 'total',
-                area: true,
-                stackOrder: 'ascending',
-                data: [
-                  2238, 2172, 2305, 2140, 2135, 2100, 2465, 2053, 2342, 2494, 2497,
-                  2277, 2356, 2012, 2309, 2301, 2029, 2028, 2129, 2324, 2152, 2235,
-                  2430, 2027, 2168, 2111, 2235, 2166, 2309, 2268,
-                ],
-              },
-            ]}
-            height={320}
-            margin={{ left: 50, right: 0, top: 60, bottom: 30 }}
-            grid={{ horizontal: true }}
-            sx={{
-              '& .MuiAreaElement-series-page-views': {
-                fill: "url('#page-views')",
-              },
-              '& .MuiAreaElement-series-downloads': {
-                fill: "url('#conversions')",
-              },
-              '& .MuiAreaElement-series-conversions': {
-                fill: "url('#conversions')",
-              },
-            }}
-            slotProps={{
-              legend: {
-                labelStyle: { fontSize: 14 },
-                itemMarkWidth: 10,
-                itemMarkHeight: 10,
-                itemGap: 24,
-                position: { vertical: 'top', horizontal: 'right' },
-              },
-            }}
-          >
-            <AreaGradient
-              color={
-                mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[600]
-              }
-              id="page-views"
-            />
-            <AreaGradient
-              color={
-                mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[600]
-              }
-              id="downloads"
-            />
-            <AreaGradient
-              color={
-                mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
-              }
-              id="conversions"
-            />
-          </LineChart>
-        </CardContent>
-      </Card>
-    </Box>
+    <Card variant="outlined" sx={{ height: 400, width: '100%' }}>
+      <CardContent>
+        <Typography variant="subtitle2" gutterBottom>
+          Page views and downloads
+        </Typography>
+        <LineChart
+          colors={colorPalette}
+          xAxis={[
+            {
+              scaleType: 'point',
+              data,
+              tickInterval: (index, i) => (i + 1) % 5 === 0,
+            },
+          ]}
+          series={[
+            {
+              id: 'page-views',
+              label: 'Page views',
+              showMark: false,
+              curve: 'linear',
+              stack: 'total',
+              stackOrder: 'ascending',
+              data: [
+                6234, 6087, 6421, 6312, 6190, 6400, 6357, 6029, 6173, 6482, 6215,
+                6051, 6338, 6142, 6018, 6247, 6463, 6371, 6060, 6100, 6389, 6203,
+                6497, 6036, 6156, 6470, 6269, 6091, 6445, 6121,
+              ],
+              area: true,
+            },
+            {
+              id: 'downloads',
+              label: 'Downloads',
+              showMark: false,
+              curve: 'linear',
+              stack: 'total',
+              area: true,
+              stackOrder: 'ascending',
+              data: [
+                4486, 4255, 4046, 4316, 4418, 4498, 4421, 4474, 4036, 4049, 4206,
+                4458, 4259, 4353, 4496, 4178, 4265, 4424, 4186, 4003, 4204, 4467,
+                4120, 4410, 4292, 4143, 4403, 4373, 4079, 4291,
+              ],
+            },
+            {
+              id: 'conversions',
+              label: 'Conversions',
+              showMark: false,
+              curve: 'linear',
+              stack: 'total',
+              area: true,
+              stackOrder: 'ascending',
+              data: [
+                2238, 2172, 2305, 2140, 2135, 2100, 2465, 2053, 2342, 2494, 2497,
+                2277, 2356, 2012, 2309, 2301, 2029, 2028, 2129, 2324, 2152, 2235,
+                2430, 2027, 2168, 2111, 2235, 2166, 2309, 2268,
+              ],
+            },
+          ]}
+          height={320}
+          margin={{ left: 50, right: 0, top: 60, bottom: 30 }}
+          grid={{ horizontal: true }}
+          sx={{
+            '& .MuiAreaElement-series-page-views': {
+              fill: "url('#page-views')",
+            },
+            '& .MuiAreaElement-series-downloads': {
+              fill: "url('#conversions')",
+            },
+            '& .MuiAreaElement-series-conversions': {
+              fill: "url('#conversions')",
+            },
+          }}
+          slotProps={{
+            legend: {
+              labelStyle: { fontSize: 14 },
+              itemMarkWidth: 10,
+              itemMarkHeight: 10,
+              itemGap: 24,
+              position: { vertical: 'top', horizontal: 'right' },
+            },
+          }}
+        >
+          <AreaGradient
+            color={
+              mode === 'light' ? theme.palette.grey[200] : theme.palette.grey[600]
+            }
+            id="page-views"
+          />
+          <AreaGradient
+            color={
+              mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[600]
+            }
+            id="downloads"
+          />
+          <AreaGradient
+            color={
+              mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]
+            }
+            id="conversions"
+          />
+        </LineChart>
+      </CardContent>
+    </Card>
   );
 }