Merge branch 'michaelnaegele' into 'main'

Chart Anpassungen

See merge request digitalmediawebdesigngruppe_katzencafe/mypetcafe!52

src/app/_components/CustomizedDot.js

@@ -0,0 +1,14 @@
+const CustomizedDot = (props) => {
+    const { cx, cy, payload, radius } = props;
+    return (
+        <image
+            href="../assets/img/wolle.png"
+            x={cx - 20}
+            y={cy - 20} 
+            width={radius}
+            height={radius}
+        />
+    );
+};
+
+export default CustomizedDot;

src/app/_components/MapComponent.js

@@ -34,18 +34,15 @@ const MapComponent = () => {
     return index >= 0 ? catPopulations[index] : null;
   };
 
-  // Summe Katzen
-  const totalPopulation = catPopulations.reduce((total, pop) => total + pop, 0);
-
-  // Anteile für das Kreisdiagramm berechnen
+  // .map() gibt Array zurück, pieData wird an Pie-Komponente übergeben
   const pieData = countries.map((country, index) => ({
     name: country,
     value: catPopulations[index],
     fill: country === activeCountry ? getColorForPopulation(population) : "#ddd",
   }));
 
   return (
-    <div>
+    <>
       {/* Infobox für aktives Land */}
       {activeCountry && population !== null && (
         <div
@@ -66,11 +63,11 @@ const MapComponent = () => {
               <Pie
                 data={pieData}
                 dataKey="value"
-                innerRadius={40} // Innenradius für das Donut-Design
+                innerRadius={40} // Innenradius Donut-Design
                 outerRadius={60} // Außenradius
                 startAngle={90}
                 endAngle={450}
-                animationDuration={0} // Animation sofort beenden
+                animationDuration={0}
               >
                 {pieData.map((entry, index) => (
                   <Cell key={`cell-${index}`} fill={entry.fill} />
@@ -120,7 +117,7 @@ const MapComponent = () => {
           }
         </Geographies>
       </ComposableMap>
-    </div>
+    </>
   );
 };
 

src/app/_sections/stat/StatCatGermany.js

@@ -1,7 +1,8 @@
 import React, {useEffect, useState} from 'react';
-import {CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
+import {CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
 import '../../globals.css';
 import Image from "next/image";
+import CustomizedDot from "../../_components/CustomizedDot";
 
 function StatCatGermany() {
     const years = [
@@ -17,58 +18,48 @@ function StatCatGermany() {
 
     useEffect(() => {
         const primaryColor = getComputedStyle(document.documentElement)
-            .getPropertyValue('--primary-color')
+            .getPropertyValue("--primary-color")
             .trim();
-        setPrimaryColor(primaryColor);
+        setPrimaryColor(primaryColor || "#8884d8"); // Default color if --primary-color is not set
     }, []);
 
-    // Combine data for Recharts
     const chartData = years.map((year, index) => ({
         year,
         cats: cats[index],
     }));
 
     return (
-        <div>
+        <>
             <div>
                 <div className="full-container-headline">
                     <Image src='assets/svg/berlin-brandenburg-gate-svgrepo-com.svg' alt="Icon" width={50} height={50} />
                     <h2>Hauskatzen in Deutschland</h2>
-                    <h2 className="author"> Michael </h2>
+                    <p className="author"> Michael </p>
                 </div>
-                <p>
-                    Die Zahl der Katzen in deutschen Haushalten ist von <b>7 Millionen</b> im Jahr 2000 auf über <b>15
-                    Millionen</b> im Jahr 2023 gestiegen. Katzen sind über Jahrhunderte aufgrund ihres unabhängigen
-                    Charakters und geringen Pflegeaufwands zu einem treuen Begleiter des Menschen geworden. Die
-                    Vierbeiner beeinflussen auch zunehmend das Ökosystem, indem sie Nagetiere regulieren, aber auch eine
-                    Gefahr für Vögel darstellen. Besonders Streunerkatzen, die in Städten leben, stellen eine
-                    Herausforderung für die <b>Biodiversität</b> dar.
-                </p>
+                <p> Die Zahl der Katzen in deutschen Haushalten stieg von <b>7 Millionen</b> im Jahr 2000 auf über <b>15 Millionen</b> im Jahr 2023. Dank ihres unabhängigen Charakters und geringen Pflegeaufwands sind sie beliebte Haustiere. Katzen regulieren Nagetiere, stellen jedoch eine Gefahr für Vögel und andere Tiere dar, insbesondere Streunerkatzen, die eine Gefahr für die <b>Biodiversität</b> bedeuten.</p>
                 <br />
                 <h2>Entwicklung 2000 - 2023</h2>
 
-                {/* Recharts Line Chart */}
                 <ResponsiveContainer width="100%" height={400}>
                     <LineChart data={chartData}>
                         <CartesianGrid strokeDasharray="2 2" />
                         <XAxis
                             dataKey="year"
-                            tick={{ fontSize: 11 }} // Smaller font for ticks
+                            tick={{ fontSize: 10 }}
                         />
                         <YAxis
-                            label={{ value: 'Anzahl der Katzen', angle: -90, position: 'insideLeft', style: { fontSize: 12 } }}
-                            tick={{ fontSize: 11 }} // Smaller font for ticks
-                            domain={[0, 'dataMax']} // Start from 0
+                            label={{ value: 'Anzahl der Katzen', angle: -90, position: 'insideLeft', style: { fontSize: 10 } }}
+                            tick={{ fontSize: 10 }}
+                            domain={[0, 'dataMax']}
                         />
                         <Tooltip />
-                        <Legend verticalAlign="top" height={36} />
                         <Line
                             type="monotone"
                             dataKey="cats"
                             stroke={primaryColor}
-                            strokeWidth={2}
-                            dot={{ r: 6, fill: "rgba(129, 104, 142, 1)", stroke: primaryColor, strokeWidth: 2 }}
-                            activeDot={{ r: 8 }}
+                            strokeWidth={3}
+                            dot={{ r: 8, fill: "rgba(129, 104, 142, 1)", stroke: primaryColor, strokeWidth: 2 }}
+                            activeDot={<CustomizedDot radius={45}/>}
                         />
 
                     </LineChart>
@@ -79,7 +70,7 @@ function StatCatGermany() {
                 </p>
                 <br />
             </div>
-        </div>
+        </>
     );
 }
 

src/app/_sections/stat/StatCatGlobal.js

@@ -30,12 +30,12 @@ function StatCatGlobal() {
     }));
 
     return (
-        <div>
+        <>
             <div>
                 <div className="full-container-headline">
                     <Image src="assets/svg/world-svgrepo-com.svg" alt="Icon" width={50} height={50} />
                     <h2>Katzenpopulation in Europa</h2>
-                    <h2 className="author">Michael</h2>
+                    <p className="author">Michael</p>
                 </div>
                 <p>
                     Die größte Katzenpopulation Europas wurde im Jahr 2022 in <b>Russland</b> gezählt, wo etwa <b>23,3 Millionen</b> Katzen lebten.{" "}
@@ -70,10 +70,9 @@ function StatCatGlobal() {
                             boxShadow: "0 3px 3px rgba(0, 0, 0, 0.1)",
                             zIndex: 1000,
                             display: "flex",
-                            justifyContent: "flex-end", // Beide Elemente (Icon und Text) nach rechts verschieben
-                            alignItems: "center", // Vertikale Ausrichtung des Inhalts
+                            justifyContent: "flex-end",
+                            alignItems: "center",
                             right: 0,
-
                         }}
                     >
                         <FaMousePointer style={{ marginRight: "10px", fontSize: "18px" }} />
@@ -110,7 +109,7 @@ function StatCatGlobal() {
                 </p>
                 <br />
             </div>
-        </div>
+        </>
     );
 }