Merge pull request #26 from NGO-Algorithm-Audit/feature/small-tweaks

Feature/small tweaks

Author: devhelpr

src/components/DistributionReport.tsx

@@ -227,7 +227,7 @@ export const DistributionReport = (
                                                     )}
                                                     rangeMax={2}
                                                     rangeMin={0}
-                                                    colors="RdGn"
+                                                    colors="LtRd"
                                                 />
                                             </div>
                                         </div>

src/components/graphs/CountBarChart.tsx

@@ -16,6 +16,15 @@ const CountBarChart = ({ column, realData }: CountBarChartProps) => {
     const [containerWidth, setContainerWidth] = useState(800);
     const { t } = useTranslation();
 
+    const formatTick = (value: number) => {
+        if (value >= 1000000) {
+            return `${(value / 1000000).toFixed(1)}M`;
+        } else if (value >= 1000) {
+            return `${(value / 1000).toFixed(1)}K`;
+        }
+        return value.toString();
+    };
+
     useEffect(() => {
         const plotWidth = containerWidth - margin.left - margin.right;
         const plotHeight = height - margin.top - margin.bottom;
@@ -86,7 +95,7 @@ const CountBarChart = ({ column, realData }: CountBarChartProps) => {
             .style('fill', 'steelblue')
             .style('opacity', 0.5);
 
-        // Add axes
+        // Add axes with formatted ticks
         svg.append('g')
             .attr('transform', `translate(0,${plotHeight})`)
             .call(d3.axisBottom(xScale))
@@ -96,7 +105,12 @@ const CountBarChart = ({ column, realData }: CountBarChartProps) => {
             .attr('dx', '-.8em')
             .attr('dy', '.15em');
 
-        svg.append('g').call(d3.axisLeft(yScale));
+        svg.append('g').call(
+            d3
+                .axisLeft(yScale)
+                .ticks(5) // Reduce number of ticks
+                .tickFormat(d => formatTick(d as number))
+        );
 
         // Add title
         svg.append('text')

src/components/graphs/DistributionBarChart.tsx

@@ -23,6 +23,10 @@ const DistributionBarChart = ({
     const [containerWidth, setContainerWidth] = useState(800);
     const { t } = useTranslation();
 
+    const formatTickAsPercentage = (value: number) => {
+        return `${(value * 100).toFixed(1)}%`;
+    };
+
     useEffect(() => {
         const plotWidth = containerWidth - margin.left - margin.right;
         const plotHeight = height - margin.top - margin.bottom;
@@ -146,7 +150,12 @@ const DistributionBarChart = ({
             .attr('dx', '-.8em')
             .attr('dy', '.15em');
 
-        svg.append('g').call(d3.axisLeft(yScale));
+        svg.append('g').call(
+            d3
+                .axisLeft(yScale)
+                .ticks(5) // Reduce number of ticks
+                .tickFormat(d => formatTickAsPercentage(d as number))
+        );
 
         // Add title
         svg.append('text')

src/components/graphs/HeatMap.tsx

@@ -7,7 +7,7 @@ interface HeatMapChartProps {
     columns: string[];
     rangeMin: number;
     rangeMax: number;
-    colors: 'RdYlBu' | 'RdGn';
+    colors: 'RdYlBu' | 'LtRd';
 }
 
 // Define margins for the chart