Merge pull request #27 from NGO-Algorithm-Audit/feature/show-labels-next-to-y-scale-axis

Feature/show labels next to y scale axis

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);
@@ -108,18 +108,27 @@ const CountBarChart = ({ column, realData }: CountBarChartProps) => {
         svg.append('g').call(
             d3
                 .axisLeft(yScale)
-                .ticks(5) // Reduce number of ticks
+                .ticks(5)
                 .tickFormat(d => formatTick(d as number))
         );
 
+        // Add y-axis label
+        svg.append('text')
+            .attr('transform', 'rotate(-90)')
+            .attr('y', -40) // Adjust position from left edge
+            .attr('x', -plotHeight / 2) // Center vertically
+            .attr('text-anchor', 'middle')
+            .attr('font-size', '12px')
+            .text(t('distribution.frequency'));
+
         // Add title
         svg.append('text')
             .attr('x', plotWidth / 2)
             .attr('y', -10)
             .attr('text-anchor', 'middle')
             .style('font-size', '12px')
             .style('font-weight', 'bold')
-            .text(`${t('distribution.distributionFor')} ${column}`);
+            .text(`${t('distribution.countFor')} ${column}`);
     }, [containerWidth, column, realData]);
 
     useEffect(() => {

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

@@ -144,7 +144,10 @@
     },
     "distribution": {
         "distributionFor": "Distribution for",
+        "countFor": "Distribution for",
+        "frequency": "Frequency",
         "syntheticData": "Synthetic data",
-        "realData": "Real data"
+        "realData": "Real data",
+        "percentage": "Percentage of dataset"
     }
 }

src/locales/nl.json

@@ -143,7 +143,10 @@
     },
     "distribution": {
         "distributionFor": "Distributie voor",
+        "countFor": "Distributie voor",
+        "frequency": "Frequentie",
         "syntheticData": "Synthetische data",
-        "realData": "Echte data"
+        "realData": "Echte data",
+        "percentage": "Percentage van dataset"
     }
 }