Skip to content

Commit 092d54a

Browse files
committed
only show mean-lines where it has meaning
1 parent 7088798 commit 092d54a

File tree

4 files changed

+34
-67
lines changed

4 files changed

+34
-67
lines changed

src/components/DistributionReport.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -307,6 +307,7 @@ export const DistributionReport = (
307307
return (
308308
<div key={column + column2}>
309309
<GroupBarChart
310+
showMeanLine={false}
310311
yAxisLabel={t(
311312
'distribution.frequency'
312313
)}
@@ -426,6 +427,9 @@ export const DistributionReport = (
426427
className="flex flex-col"
427428
>
428429
<GroupBarChart
430+
showMeanLine={
431+
false
432+
}
429433
colorRange={[
430434
'steelblue',
431435
'orange',

src/components/componentMapper.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,7 @@ export default function ComponentMapper({
152152
return (
153153
<ErrorBoundary key={index}>
154154
<GroupBarChart
155+
showMeanLine={true}
155156
data={histogramData}
156157
yAxisLabel={t('distribution.frequency')}
157158
title={resultItem.title ?? ''}

src/components/graphs/DistributionBarChart.tsx

Lines changed: 0 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -148,49 +148,6 @@ const DistributionBarChart = ({
148148
.attr('height', d => plotHeight - yScale(d.value))
149149
.style('fill', 'orange');
150150

151-
// Calculate means for both datasets
152-
const realMean = d3.mean(processedRealData, d => d.value) || 0;
153-
const syntheticMean =
154-
d3.mean(processedSyntheticData, d => d.value) || 0;
155-
156-
// Add horizontal mean lines
157-
// Real data mean line
158-
svg.append('line')
159-
.attr('x1', 0)
160-
.attr('x2', plotWidth)
161-
.attr('y1', yScale(realMean))
162-
.attr('y2', yScale(realMean))
163-
.style('stroke', 'steelblue')
164-
.style('stroke-width', 1.5)
165-
.style('stroke-dasharray', '5,5');
166-
167-
// Synthetic data mean line
168-
svg.append('line')
169-
.attr('x1', 0)
170-
.attr('x2', plotWidth)
171-
.attr('y1', yScale(syntheticMean))
172-
.attr('y2', yScale(syntheticMean))
173-
.style('stroke', 'orange')
174-
.style('stroke-width', 1.5)
175-
.style('stroke-dasharray', '5,5');
176-
177-
// Add mean labels on the right side
178-
svg.append('text')
179-
.attr('x', plotWidth + 5)
180-
.attr('y', yScale(realMean))
181-
.attr('dy', '0.35em')
182-
.style('font-size', '10px')
183-
.style('fill', 'steelblue')
184-
.text(`Mean: ${(realMean * 100).toFixed(1)}%`);
185-
186-
svg.append('text')
187-
.attr('x', plotWidth + 5)
188-
.attr('y', yScale(syntheticMean))
189-
.attr('dy', '0.35em')
190-
.style('font-size', '10px')
191-
.style('fill', 'orange')
192-
.text(`Mean: ${(syntheticMean * 100).toFixed(1)}%`);
193-
194151
// Add axes
195152
svg.append('g')
196153
.attr('transform', `translate(0,${plotHeight})`)

src/components/graphs/GroupBarChart.tsx

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ interface GroupBarChartProps {
1111
title: string;
1212
data: Data[];
1313
colorRange?: string[];
14+
showMeanLine: boolean;
1415
}
1516

1617
const margin = { top: 30, right: 50, bottom: 40, left: 80 };
@@ -23,6 +24,7 @@ const GroupBarChart = ({
2324
data,
2425
yAxisLabel,
2526
colorRange,
27+
showMeanLine,
2628
}: GroupBarChartProps) => {
2729
const svgRef = useRef<SVGSVGElement>(null);
2830
const containerRef = useRef<HTMLDivElement>(null);
@@ -126,33 +128,36 @@ const GroupBarChart = ({
126128
.attr('height', d => y(0) - y(d.value))
127129
.attr('fill', d => color(d.name)?.toString() ?? '#ccc');
128130

129-
// Calculate the mean of all bar values
130-
const meanValue = d3.mean(flattenData, d => d.value) ?? 0;
131+
if (showMeanLine) {
132+
// Calculate the mean of all bar values
131133

132-
// Draw a dotted line representing the mean value
133-
svg.append('line')
134-
.attr('x1', 0)
135-
.attr(
136-
'x2',
137-
Math.max(containerWidth, data.length * barWidth) - margin.right
138-
)
139-
.attr('y1', y(meanValue))
140-
.attr('y2', y(meanValue))
141-
.attr('stroke', 'black')
142-
.attr('stroke-width', 2)
143-
.attr('stroke-dasharray', '4 4')
144-
.attr('opacity', 0.8)
145-
.attr('class', 'mean-line');
134+
const meanValue = d3.mean(flattenData, d => d.value) ?? 0;
146135

147-
// Add a label for the mean line
148-
svg.append('text')
149-
.attr('x', margin.left + 30 + 50)
150-
.attr('y', y(meanValue) - 5)
151-
.attr('text-anchor', 'end')
152-
.attr('fill', 'black')
153-
.style('font-size', '12px')
154-
.text(`Mean: ${y.tickFormat(100, 's')(meanValue)}`);
136+
// Draw a dotted line representing the mean value
137+
svg.append('line')
138+
.attr('x1', 0)
139+
.attr(
140+
'x2',
141+
Math.max(containerWidth, data.length * barWidth) -
142+
margin.right
143+
)
144+
.attr('y1', y(meanValue))
145+
.attr('y2', y(meanValue))
146+
.attr('stroke', 'black')
147+
.attr('stroke-width', 2)
148+
.attr('stroke-dasharray', '4 4')
149+
.attr('opacity', 0.8)
150+
.attr('class', 'mean-line');
155151

152+
// Add a label for the mean line
153+
svg.append('text')
154+
.attr('x', margin.left + 30 + 50)
155+
.attr('y', y(meanValue) - 5)
156+
.attr('text-anchor', 'end')
157+
.attr('fill', 'black')
158+
.style('font-size', '12px')
159+
.text(`Mean: ${y.tickFormat(100, 's')(meanValue)}`);
160+
}
156161
// Append legend
157162
const legend = svg
158163
.append('g')

0 commit comments

Comments
 (0)