Skip to content

Commit 1986fbd

Browse files
adamdoeadamdoe
committed
Revert "Also add minimum bar height to stacked bars (#2272)"
This reverts commit 8f39675.
1 parent 8ea35e7 commit 1986fbd

File tree

2 files changed

+72
-104
lines changed

2 files changed

+72
-104
lines changed

‎packages/chart/src/components/BarChart/components/BarChart.StackedVertical.tsx‎

Lines changed: 72 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import React, { useContext, useState } from 'react'
22
import ConfigContext from '../../../ConfigContext'
33
import { BarStack } from '@visx/shape'
44
import { Group } from '@visx/group'
5+
import { Text } from '@visx/text'
56
import BarChartContext from './context'
67
import Regions from '../../Regions'
7-
import { addMinimumBarHeights } from '../helpers'
8+
import { isDateScale } from '@cdc/core/helpers/cove/date'
89

910
import createBarElement from '@cdc/core/components/createBarElement'
1011

@@ -42,87 +43,85 @@ const BarChartStackedVertical = () => {
4243
yScale={yScale}
4344
color={colorScale}
4445
>
45-
{barStacks => {
46-
return addMinimumBarHeights(barStacks)
47-
.reverse()
48-
.map(barStack => {
49-
return barStack.bars.map(bar => {
50-
let transparentBar =
51-
config.legend.behavior === 'highlight' &&
52-
seriesHighlight.length > 0 &&
53-
seriesHighlight.indexOf(bar.key) === -1
54-
let displayBar =
55-
config.legend.behavior === 'highlight' ||
56-
seriesHighlight.length === 0 ||
57-
seriesHighlight.indexOf(bar.key) !== -1
58-
let barThickness = isDateAxisType
59-
? seriesScale.range()[1] - seriesScale.range()[0]
60-
: xMax / barStack.bars.length
61-
if (config.runtime.xAxis.type !== 'date') barThickness = config.barThickness * barThickness
62-
// tooltips
63-
const rawXValue = bar.bar.data[config.runtime.xAxis.dataKey]
64-
const xAxisValue = isDateAxisType ? formatDate(parseDate(rawXValue)) : rawXValue
65-
const yAxisValue = formatNumber(bar.bar ? bar.bar.data[bar.key] : 0, 'left')
66-
if (!yAxisValue) return
67-
const barX =
68-
xScale(isDateAxisType ? parseDate(rawXValue) : rawXValue) -
69-
(isDateTimeScaleAxisType ? barThickness / 2 : 0)
70-
const xAxisTooltip = config.runtime.xAxis.label
71-
? `${config.runtime.xAxis.label}: ${xAxisValue}`
72-
: xAxisValue
73-
const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
74-
const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
75-
const tooltip = `<ul>
46+
{barStacks =>
47+
barStacks.reverse().map(barStack =>
48+
barStack.bars.map(bar => {
49+
let transparentBar =
50+
config.legend.behavior === 'highlight' &&
51+
seriesHighlight.length > 0 &&
52+
seriesHighlight.indexOf(bar.key) === -1
53+
let displayBar =
54+
config.legend.behavior === 'highlight' ||
55+
seriesHighlight.length === 0 ||
56+
seriesHighlight.indexOf(bar.key) !== -1
57+
let barThickness = isDateAxisType
58+
? seriesScale.range()[1] - seriesScale.range()[0]
59+
: xMax / barStack.bars.length
60+
if (config.runtime.xAxis.type !== 'date') barThickness = config.barThickness * barThickness
61+
// tooltips
62+
const rawXValue = bar.bar.data[config.runtime.xAxis.dataKey]
63+
const xAxisValue = isDateAxisType ? formatDate(parseDate(rawXValue)) : rawXValue
64+
const yAxisValue = formatNumber(bar.bar ? bar.bar.data[bar.key] : 0, 'left')
65+
if (!yAxisValue) return
66+
const barX =
67+
xScale(isDateAxisType ? parseDate(rawXValue) : rawXValue) -
68+
(isDateTimeScaleAxisType ? barThickness / 2 : 0)
69+
const xAxisTooltip = config.runtime.xAxis.label
70+
? `${config.runtime.xAxis.label}: ${xAxisValue}`
71+
: xAxisValue
72+
const additionalColTooltip = getAdditionalColumn(bar.key, hoveredBar)
73+
const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
74+
const tooltip = `<ul>
7675
<li class="tooltip-heading"">${xAxisTooltip}</li>
7776
<li class="tooltip-body ">${tooltipBody}</li>
7877
<li class="tooltip-body ">${additionalColTooltip}</li>
7978
</li></ul>`
8079

81-
setBarWidth(barThickness)
80+
setBarWidth(barThickness)
8281

83-
return (
84-
<Group key={`${barStack.index}--${bar.index}--${orientation}`}>
85-
<Group
86-
key={`bar-stack-${barStack.index}-${bar.index}`}
87-
id={`barStack${barStack.index}-${bar.index}`}
88-
className='stack vertical'
89-
>
90-
{createBarElement({
91-
config: config,
92-
seriesHighlight,
93-
index: barStack.index,
94-
background: colorScale(config.runtime.seriesLabels[bar.key]),
95-
borderColor: '#333',
96-
borderStyle: 'solid',
97-
borderWidth: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px`,
98-
width: barThickness,
99-
height: bar.height,
100-
x: barX,
101-
y: bar.y,
102-
onMouseOver: e => onMouseOverBar(xAxisValue, bar.key, e, data),
103-
onMouseLeave: onMouseLeaveBar,
104-
tooltipHtml: tooltip,
105-
tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`,
106-
onClick: e => {
107-
e.preventDefault()
108-
if (setSharedFilter) {
109-
bar[config.xAxis.dataKey] = xAxisValue
110-
setSharedFilter(config.uid, bar)
111-
}
112-
},
113-
styleOverrides: {
114-
animationDelay: `${barStack.index * 0.5}s`,
115-
transformOrigin: `${barThickness / 2}px ${bar.y + bar.height}px`,
116-
opacity: transparentBar ? 0.2 : 1,
117-
display: displayBar ? 'block' : 'none'
82+
return (
83+
<Group key={`${barStack.index}--${bar.index}--${orientation}`}>
84+
<Group
85+
key={`bar-stack-${barStack.index}-${bar.index}`}
86+
id={`barStack${barStack.index}-${bar.index}`}
87+
className='stack vertical'
88+
>
89+
{createBarElement({
90+
config: config,
91+
seriesHighlight,
92+
index: barStack.index,
93+
background: colorScale(config.runtime.seriesLabels[bar.key]),
94+
borderColor: '#333',
95+
borderStyle: 'solid',
96+
borderWidth: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px`,
97+
width: barThickness,
98+
height: bar.height,
99+
x: barX,
100+
y: bar.y,
101+
onMouseOver: e => onMouseOverBar(xAxisValue, bar.key, e, data),
102+
onMouseLeave: onMouseLeaveBar,
103+
tooltipHtml: tooltip,
104+
tooltipId: `cdc-open-viz-tooltip-${config.runtime.uniqueId}`,
105+
onClick: e => {
106+
e.preventDefault()
107+
if (setSharedFilter) {
108+
bar[config.xAxis.dataKey] = xAxisValue
109+
setSharedFilter(config.uid, bar)
118110
}
119-
})}
120-
</Group>
111+
},
112+
styleOverrides: {
113+
animationDelay: `${barStack.index * 0.5}s`,
114+
transformOrigin: `${barThickness / 2}px ${bar.y + bar.height}px`,
115+
opacity: transparentBar ? 0.2 : 1,
116+
display: displayBar ? 'block' : 'none'
117+
}
118+
})}
121119
</Group>
122-
)
123-
})
120+
</Group>
121+
)
124122
})
125-
}}
123+
)
124+
}
126125
</BarStack>
127126
<Regions xScale={xScale} yMax={yMax} barWidth={barWidth} totalBarsInGroup={1} />
128127
</>

‎packages/chart/src/components/BarChart/helpers/index.ts‎

Lines changed: 0 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -110,34 +110,3 @@ export const testZeroValue = value => {
110110
const regex = /^0(\.0)?$/
111111
return regex.test(value.toString())
112112
}
113-
114-
export const addMinimumBarHeights = barStacks => {
115-
const MIN_BAR_HEIGHT = 3
116-
117-
barStacks[0].bars.forEach((_, i) => {
118-
let segments = barStacks.map(bs => bs.bars[i]).reverse()
119-
120-
const segmentsNeedingAdjustment = segments.filter(segment => segment.height > 0 && segment.height < MIN_BAR_HEIGHT)
121-
const segmentsToShrink = segments.filter(segment => segment.height > MIN_BAR_HEIGHT)
122-
123-
if (segmentsNeedingAdjustment.length > 0 && segmentsToShrink.length > 0) {
124-
segmentsNeedingAdjustment.forEach(smallSegment => {
125-
const heightToAdd = MIN_BAR_HEIGHT - smallSegment.height
126-
const heightToTakePerSegment = heightToAdd / segmentsToShrink.length
127-
128-
segmentsToShrink.forEach(largeSegment => {
129-
largeSegment.height -= heightToTakePerSegment
130-
})
131-
132-
smallSegment.height = MIN_BAR_HEIGHT
133-
})
134-
135-
let cumulativeY = segments[0].y
136-
segments.forEach(segment => {
137-
segment.y = cumulativeY
138-
cumulativeY += segment.height
139-
})
140-
}
141-
})
142-
return barStacks
143-
}

0 commit comments

Comments
 (0)