only show mean-lines where it has meaning

Author: devhelpr

src/components/DistributionReport.tsx

@@ -307,6 +307,7 @@ export const DistributionReport = (
                                     return (
                                         <div key={column + column2}>
                                             <GroupBarChart
+                                                showMeanLine={false}
                                                 yAxisLabel={t(
                                                     'distribution.frequency'
                                                 )}
@@ -426,6 +427,9 @@ export const DistributionReport = (
                                                                     className="flex flex-col"
                                                                 >
                                                                     <GroupBarChart
+                                                                        showMeanLine={
+                                                                            false
+                                                                        }
                                                                         colorRange={[
                                                                             'steelblue',
                                                                             'orange',

src/components/componentMapper.tsx

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

src/components/graphs/DistributionBarChart.tsx

@@ -148,49 +148,6 @@ const DistributionBarChart = ({
             .attr('height', d => plotHeight - yScale(d.value))
             .style('fill', 'orange');
 
-        // Calculate means for both datasets
-        const realMean = d3.mean(processedRealData, d => d.value) || 0;
-        const syntheticMean =
-            d3.mean(processedSyntheticData, d => d.value) || 0;
-
-        // Add horizontal mean lines
-        // Real data mean line
-        svg.append('line')
-            .attr('x1', 0)
-            .attr('x2', plotWidth)
-            .attr('y1', yScale(realMean))
-            .attr('y2', yScale(realMean))
-            .style('stroke', 'steelblue')
-            .style('stroke-width', 1.5)
-            .style('stroke-dasharray', '5,5');
-
-        // Synthetic data mean line
-        svg.append('line')
-            .attr('x1', 0)
-            .attr('x2', plotWidth)
-            .attr('y1', yScale(syntheticMean))
-            .attr('y2', yScale(syntheticMean))
-            .style('stroke', 'orange')
-            .style('stroke-width', 1.5)
-            .style('stroke-dasharray', '5,5');
-
-        // Add mean labels on the right side
-        svg.append('text')
-            .attr('x', plotWidth + 5)
-            .attr('y', yScale(realMean))
-            .attr('dy', '0.35em')
-            .style('font-size', '10px')
-            .style('fill', 'steelblue')
-            .text(`Mean: ${(realMean * 100).toFixed(1)}%`);
-
-        svg.append('text')
-            .attr('x', plotWidth + 5)
-            .attr('y', yScale(syntheticMean))
-            .attr('dy', '0.35em')
-            .style('font-size', '10px')
-            .style('fill', 'orange')
-            .text(`Mean: ${(syntheticMean * 100).toFixed(1)}%`);
-
         // Add axes
         svg.append('g')
             .attr('transform', `translate(0,${plotHeight})`)

src/components/graphs/GroupBarChart.tsx

@@ -11,6 +11,7 @@ interface GroupBarChartProps {
     title: string;
     data: Data[];
     colorRange?: string[];
+    showMeanLine: boolean;
 }
 
 const margin = { top: 30, right: 50, bottom: 40, left: 80 };
@@ -23,6 +24,7 @@ const GroupBarChart = ({
     data,
     yAxisLabel,
     colorRange,
+    showMeanLine,
 }: GroupBarChartProps) => {
     const svgRef = useRef<SVGSVGElement>(null);
     const containerRef = useRef<HTMLDivElement>(null);
@@ -126,33 +128,36 @@ const GroupBarChart = ({
             .attr('height', d => y(0) - y(d.value))
             .attr('fill', d => color(d.name)?.toString() ?? '#ccc');
 
-        // Calculate the mean of all bar values
-        const meanValue = d3.mean(flattenData, d => d.value) ?? 0;
+        if (showMeanLine) {
+            // Calculate the mean of all bar values
 
-        // Draw a dotted line representing the mean value
-        svg.append('line')
-            .attr('x1', 0)
-            .attr(
-                'x2',
-                Math.max(containerWidth, data.length * barWidth) - margin.right
-            )
-            .attr('y1', y(meanValue))
-            .attr('y2', y(meanValue))
-            .attr('stroke', 'black')
-            .attr('stroke-width', 2)
-            .attr('stroke-dasharray', '4 4')
-            .attr('opacity', 0.8)
-            .attr('class', 'mean-line');
+            const meanValue = d3.mean(flattenData, d => d.value) ?? 0;
 
-        // Add a label for the mean line
-        svg.append('text')
-            .attr('x', margin.left + 30 + 50)
-            .attr('y', y(meanValue) - 5)
-            .attr('text-anchor', 'end')
-            .attr('fill', 'black')
-            .style('font-size', '12px')
-            .text(`Mean: ${y.tickFormat(100, 's')(meanValue)}`);
+            // Draw a dotted line representing the mean value
+            svg.append('line')
+                .attr('x1', 0)
+                .attr(
+                    'x2',
+                    Math.max(containerWidth, data.length * barWidth) -
+                        margin.right
+                )
+                .attr('y1', y(meanValue))
+                .attr('y2', y(meanValue))
+                .attr('stroke', 'black')
+                .attr('stroke-width', 2)
+                .attr('stroke-dasharray', '4 4')
+                .attr('opacity', 0.8)
+                .attr('class', 'mean-line');
 
+            // Add a label for the mean line
+            svg.append('text')
+                .attr('x', margin.left + 30 + 50)
+                .attr('y', y(meanValue) - 5)
+                .attr('text-anchor', 'end')
+                .attr('fill', 'black')
+                .style('font-size', '12px')
+                .text(`Mean: ${y.tickFormat(100, 's')(meanValue)}`);
+        }
         // Append legend
         const legend = svg
             .append('g')