y-axis label for distribution chart and bigger height

Author: devhelpr

src/components/graphs/CountBarChart.tsx

@@ -8,7 +8,7 @@ interface CountBarChartProps {
 }
 
 const margin = { top: 30, right: 50, bottom: 60, left: 50 }; // Increased bottom margin for rotated labels
-const height = 300 - margin.top - margin.bottom;
+const height = 380 - margin.top - margin.bottom;
 
 const CountBarChart = ({ column, realData }: CountBarChartProps) => {
     const svgRef = useRef<SVGSVGElement>(null);

src/components/graphs/DistributionBarChart.tsx

@@ -9,8 +9,8 @@ interface DistributionBarChartProps {
     syntheticData: (string | number)[];
 }
 
-const margin = { top: 30, right: 50, bottom: 60, left: 50 }; // Increased bottom margin for rotated labels
-const height = 300 - margin.top - margin.bottom;
+const margin = { top: 30, right: 50, bottom: 60, left: 80 }; // Increased bottom margin for rotated labels
+const height = 380 - margin.top - margin.bottom;
 
 const DistributionBarChart = ({
     column,
@@ -166,6 +166,15 @@ const DistributionBarChart = ({
             .style('font-weight', 'bold')
             .text(`${t('distribution.distributionFor')} ${column}`);
 
+        // Add y-axis label
+        svg.append('text')
+            .attr('transform', 'rotate(-90)')
+            .attr('y', -50) // Adjust position from left edge
+            .attr('x', -plotHeight / 2) // Center vertically
+            .attr('text-anchor', 'middle')
+            .attr('font-size', '12px')
+            .text(t('distribution.percentage'));
+
         // Add legend
         const legend = svg
             .append('g')

src/locales/en.json

@@ -147,6 +147,7 @@
         "countFor": "Distribution for",
         "frequency": "Frequency",
         "syntheticData": "Synthetic data",
-        "realData": "Real data"
+        "realData": "Real data",
+        "percentage": "Percentage of dataset"
     }
 }

src/locales/nl.json

@@ -146,6 +146,7 @@
         "countFor": "Distributie voor",
         "frequency": "Frequentie",
         "syntheticData": "Synthetische data",
-        "realData": "Echte data"
+        "realData": "Echte data",
+        "percentage": "Percentage van dataset"
     }
 }