Uni/dps-webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make Statistics Info Site good (fix Speicher coding ™️)

Browse Source
This commit is contained in:
Tim
2025-06-12 11:46:38 +02:00
parent cccbfb0de6
commit a04adbc0b0
3 changed files with 364 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
01-frontend/src/helper/adminpanel/StatisticsInfo.tsx
View File

@@ -12,6 +12,10 @@ import {
PointElement,
} from "chart.js";
import { Bar, Pie, Line } from "react-chartjs-2";
import { BarChart } from '@mui/x-charts/BarChart';
import { RadarChart } from '@mui/x-charts/RadarChart';
import { PieChart } from '@mui/x-charts/PieChart';
import { useTranslation } from "react-i18next";
// Chart.js registrieren
ChartJS.register(
@@ -28,6 +32,7 @@ ChartJS.register(
export default function StatisticsInfo() {
const theme = useTheme();
const {t} = useTranslation();
const weeklySalesData = {
labels: ["Week 1", "Week 2", "Week 3", "Week 4"],
@@ -119,30 +124,54 @@ export default function StatisticsInfo() {
<Box sx={{ mb: 4 }}>
<Typography variant="h6" align="center" gutterBottom>
Weekly Sales
Monthly Sales in n
</Typography>
<Bar data={weeklySalesData} options={baseOptions} />
<BarChart
series={[
{ data: [35, 44, 24, 34], label: t('seeds') },
{ data: [51, 6, 49, 30], label: t('technicalComponents') },
{ data: [60, 50, 15, 25], label: t('gardenSupplies') },
{ data: [15, 25, 30, 50], label: t('other')},
]}
height={290}
xAxis={[{ data: ['2025-01', '2025-02', '2025-03', '2025-04'] }]}
/>
</Box>
<Box sx={{ mb: 4 }}>
<Typography variant="h6" align="center" gutterBottom>
Monthly Revenue in €
</Typography>
<BarChart
series={[
{ data: [200, 244, 224, 234], label: t('seeds') },
{ data: [888, 300, 600, 1200], label: t('technicalComponents') },
{ data: [260, 150, 50, 0], label: t('gardenSupplies') },
{ data: [10, 20, 30, 50], label: t('other')},
]}
height={290}
xAxis={[{ data: ['2025-01', '2025-02', '2025-03', '2025-04'] }]}
/>
</Box>
<Box sx={{ mb: 4 }}>
<Typography variant="h6" align="center" gutterBottom>
Item Sales Distribution
</Typography>
<Pie
data={itemSalesData}
options={{
...baseOptions,
scales: undefined, // Pie braucht keine Achsen
}}
<PieChart
series={[
{
data: [
{ id: 0, value: 10, label: t('seeds') },
{ id: 1, value: 15, label: t('technicalComponents') },
{ id: 2, value: 10, label: t('gardenSupplies') },
{ id: 2, value: 3, label: t('other') },
],
},
]}
width={200}
height={200}
/>
</Box>
<Box>
<Typography variant="h6" align="center" gutterBottom>
Sales by User
</Typography>
<Line data={userSalesData} options={baseOptions} />
</Box>
</Box>
);
}