bivariate charts for EAD

Author: devhelpr

src/components/DistributionReport.tsx

@@ -195,6 +195,7 @@ export const DistributionReport = (
                                     return (
                                         <div key={column + column2}>
                                             <GroupBarChart
+                                                yAxisLabel={column}
                                                 data={histogramData}
                                                 title={`${column} vs ${column2}`}
                                             />

src/components/componentMapper.tsx

@@ -152,6 +152,7 @@ export default function ComponentMapper({
                             <ErrorBoundary key={index}>
                                 <GroupBarChart
                                     data={histogramData}
+                                    yAxisLabel={t('distribution.frequency')}
                                     title={resultItem.title ?? ''}
                                 />
                             </ErrorBoundary>

src/components/graphs/GroupBarChart.tsx

@@ -7,19 +7,27 @@ interface Data extends DataLabel {
 }
 
 interface GroupBarChartProps {
+    yAxisLabel: string;
     title: string;
     data: Data[];
 }
 
-const margin = { top: 10, right: 10, bottom: 40, left: 50 };
+const margin = { top: 30, right: 50, bottom: 40, left: 80 };
 const height = 300 - margin.top - margin.bottom;
 const barWidth = 0.05 * window.innerWidth < 40 ? 40 : 0.05 * window.innerWidth;
 const barGap = 5;
 
-const GroupBarChart = ({ title, data }: GroupBarChartProps) => {
+const GroupBarChart = ({ title, data, yAxisLabel }: GroupBarChartProps) => {
     const svgRef = useRef<SVGSVGElement>(null);
     const containerRef = useRef<HTMLDivElement>(null);
     const [containerWidth, setContainerWidth] = useState(800); // Default width
+
+    //const legendWidth = 140;
+    // const plotWidth =
+    //     containerWidth -
+    //     margin.left -
+    //     margin.right ;
+
     const fx = useMemo(
         () =>
             d3
@@ -82,6 +90,7 @@ const GroupBarChart = ({ title, data }: GroupBarChartProps) => {
             .text(
                 "@import url('https://fonts.googleapis.com/css2?family=Avenir:wght@600');"
             );
+
         // Append x-axis
         const xAxis = svg
             .append('g')
@@ -143,14 +152,24 @@ const GroupBarChart = ({ title, data }: GroupBarChartProps) => {
                 `translate(${Math.max(containerWidth, data.length * barWidth) - margin.left - margin.right + 20}, 0)`
             );
 
-        // Append title to the legend
-        legend
-            .append('text')
-            .attr('x', 0)
-            .attr('y', 0)
+        // Append title to the svg
+        svg.append('text')
+            .attr('x', (containerWidth - margin.left - margin.right) / 2)
+            .attr('y', -10)
+            .attr('text-anchor', 'middle')
+            .style('font-size', '12px')
             .style('font-weight', 'bold')
             .text(title);
 
+        // Add y-axis label
+        svg.append('text')
+            .attr('transform', 'rotate(-90)')
+            .attr('y', -50)
+            .attr('x', -height / 2)
+            .attr('text-anchor', 'middle')
+            .attr('font-size', '12px')
+            .text(yAxisLabel);
+
         // Append legend color boxes and text labels
         const legendItems = legend
             .selectAll('.legend-item')

src/components/graphs/GroupedBarChart.tsx

@@ -11,7 +11,7 @@ interface GroupedBarChartProps {
     data: Data[];
 }
 
-const margin = { top: 20, right: 250, bottom: 40, left: 50 };
+const margin = { top: 20, right: 250, bottom: 40, left: 80 };
 const height = 300 - margin.top - margin.bottom;
 const maxBuckets = 10; // Maximum number of buckets per group