Merge pull request #34 from NGO-Algorithm-Audit/feature/update-violin-chart

Feature/update violin chart

Author: devhelpr

src/components/DistributionReport.tsx

@@ -129,7 +129,7 @@ export const DistributionReport = (
                         const charts = columnNames.map((column, index) => {
                             const dataType = dataTypes[column];
                             return columnNames.map((column2, index2) => {
-                                if (column === column2 || index >= index2) {
+                                if (column === column2 || index <= index2) {
                                     return null;
                                 }
                                 const dataType2 = dataTypes[column2];
@@ -195,11 +195,26 @@ export const DistributionReport = (
                                     return (
                                         <div key={column + column2}>
                                             <GroupBarChart
+                                                yAxisLabel={column}
                                                 data={histogramData}
                                                 title={`${column} vs ${column2}`}
                                             />
                                         </div>
                                     );
+                                } else if (
+                                    dataType === 'float' &&
+                                    dataType2 === 'category'
+                                ) {
+                                    return (
+                                        <ViolinChart
+                                            key={column + column2}
+                                            categoricalColumn={column2}
+                                            numericColumn={column}
+                                            realData={realData}
+                                            syntheticData={syntheticData}
+                                            comparison={false}
+                                        />
+                                    );
                                 }
                             });
                         });
@@ -237,6 +252,7 @@ export const DistributionReport = (
                                             numericColumn={column}
                                             realData={realData}
                                             syntheticData={syntheticData}
+                                            comparison={true}
                                         />
                                     );
                                 }

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