Skip to content

Commit

Permalink
xMerge branch 'master' into enhance-archive-dataset-ui
Browse files Browse the repository at this point in the history
  • Loading branch information
lucasrodes committed Jan 6, 2025
2 parents 3a50cfc + 1ecc220 commit e19b84b
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 45 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { MigrationInterface, QueryRunner } from "typeorm"

export class RemoveRelativeModeFromDiscreteBarCharts1735896576517
implements MigrationInterface
{
public async up(queryRunner: QueryRunner): Promise<void> {
await queryRunner.query(`
-- sql
update chart_configs
set
patch = json_remove(patch, '$.stackMode'),
full = json_remove(full, '$.stackMode')
where
chartType = 'DiscreteBar'
and full ->> '$.stackMode' = 'relative';
`)
}

// eslint-disable-next-line @typescript-eslint/no-empty-function
public async down(): Promise<void> {}
}
70 changes: 33 additions & 37 deletions packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,7 @@ import {
GRAPHER_AREA_OPACITY_DEFAULT,
GRAPHER_FONT_SCALE_12,
} from "../core/GrapherConstants"
import {
HorizontalAxisComponent,
HorizontalAxisGridLines,
HorizontalAxisZeroLine,
} from "../axis/AxisViews"
import { HorizontalAxisZeroLine } from "../axis/AxisViews"
import { NoDataModal } from "../noDataModal/NoDataModal"
import { AxisConfig, AxisManager } from "../axis/AxisConfig"
import { ColorSchemes } from "../color/ColorSchemes"
Expand Down Expand Up @@ -90,6 +86,8 @@ const DEFAULT_PROJECTED_DATA_COLOR_IN_LEGEND = "#787878"
// if an entity name exceeds this width, we use the short name instead (if available)
const SOFT_MAX_LABEL_WIDTH = 90

const BAR_SPACING_FACTOR = 0.35

export interface Label {
valueString: string
timeString: string
Expand Down Expand Up @@ -305,7 +303,6 @@ export class DiscreteBarChart
@computed private get innerBounds(): Bounds {
return this.boundsWithoutColorLegend
.padLeft(Math.max(this.seriesLegendWidth, this.leftValueLabelWidth))
.padBottom(this.showHorizontalAxis ? this.yAxis.height : 0)
.padRight(this.rightValueLabelWidth)
}

Expand All @@ -317,18 +314,29 @@ export class DiscreteBarChart
return this.series.length
}

@computed private get barHeight(): number {
return (0.8 * this.innerBounds.height) / this.barCount
/** The total height of the series, i.e. the height of the bar + the white space around it */
@computed private get seriesHeight(): number {
return this.innerBounds.height / this.barCount
}

// useful if `this.barHeight` can't be used due to a cyclic dependency
// keep in mind though that this is not exactly the same as `this.barHeight`
@computed private get approximateBarHeight(): number {
return (0.8 * this.boundsWithoutColorLegend.height) / this.barCount
@computed private get barSpacing(): number {
return this.seriesHeight * BAR_SPACING_FACTOR
}

@computed private get barSpacing(): number {
return this.innerBounds.height / this.barCount - this.barHeight
@computed private get barHeight(): number {
const totalWhiteSpace = this.barCount * this.barSpacing
return (this.innerBounds.height - totalWhiteSpace) / this.barCount
}

// useful if `barHeight` can't be used due to a cyclic dependency
// keep in mind though that this is not exactly the same as `barHeight`
@computed private get approximateBarHeight(): number {
const { height } = this.boundsWithoutColorLegend
const approximateMaxBarHeight = height / this.barCount
const approximateBarSpacing =
approximateMaxBarHeight * BAR_SPACING_FACTOR
const totalWhiteSpace = this.barCount * approximateBarSpacing
return (height - totalWhiteSpace) / this.barCount
}

@computed private get barPlacements(): { x: number; width: number }[] {
Expand All @@ -350,10 +358,6 @@ export class DiscreteBarChart
return this.barPlacements.map((b) => b.width)
}

@computed private get showHorizontalAxis(): boolean | undefined {
return this.manager.isRelativeMode
}

private d3Bars(): Selection<
BaseType,
unknown,
Expand Down Expand Up @@ -504,39 +508,31 @@ export class DiscreteBarChart
}

renderChartArea(): React.ReactElement {
const { manager, boundsWithoutColorLegend, yAxis, innerBounds } = this
const { manager, yAxis, innerBounds } = this

const axisLineWidth = manager.isStaticAndSmall
? GRAPHER_AXIS_LINE_WIDTH_THICK
: GRAPHER_AXIS_LINE_WIDTH_DEFAULT
? 0.5 * GRAPHER_AXIS_LINE_WIDTH_THICK
: 0.5 * GRAPHER_AXIS_LINE_WIDTH_DEFAULT

return (
<>
{this.renderDefs()}
{this.showColorLegend && (
<HorizontalNumericColorLegend manager={this} />
)}
{this.showHorizontalAxis && (
<>
<HorizontalAxisComponent
bounds={boundsWithoutColorLegend}
axis={yAxis}
preferredAxisPosition={innerBounds.bottom}
labelColor={manager.secondaryColorInStaticCharts}
tickMarkWidth={axisLineWidth}
/>
<HorizontalAxisGridLines
horizontalAxis={yAxis}
bounds={innerBounds}
strokeWidth={axisLineWidth}
/>
</>
)}
{!this.isLogScale && (
<HorizontalAxisZeroLine
horizontalAxis={yAxis}
bounds={innerBounds}
strokeWidth={axisLineWidth}
// if the chart doesn't have negative values, then we
// move the zero line a little to the left to avoid
// overlap with the bars
align={
this.hasNegative
? HorizontalAlign.center
: HorizontalAlign.right
}
/>
)}
{this.renderBars()}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,8 @@ import { TextWrap } from "@ourworldindata/components"
// if an entity name exceeds this width, we use the short name instead (if available)
const SOFT_MAX_LABEL_WIDTH = 90

const BAR_SPACING_FACTOR = 0.35

const labelToBarPadding = 5

export interface StackedDiscreteBarChartManager extends ChartManager {
Expand Down Expand Up @@ -470,18 +472,29 @@ export class StackedDiscreteBarChart
}))
}

// useful if `this.barHeight` can't be used due to a cyclic dependency
// keep in mind though that this is not exactly the same as `this.barHeight`
@computed private get approximateBarHeight(): number {
return (0.8 * this.boundsWithoutLegend.height) / this.barCount
/** The total height of the series, i.e. the height of the bar + the white space around it */
@computed private get seriesHeight(): number {
return this.innerBounds.height / this.barCount
}

@computed private get barSpacing(): number {
return this.seriesHeight * BAR_SPACING_FACTOR
}

@computed private get barHeight(): number {
return (0.8 * this.innerBounds.height) / this.barCount
const totalWhiteSpace = this.barCount * this.barSpacing
return (this.innerBounds.height - totalWhiteSpace) / this.barCount
}

@computed private get barSpacing(): number {
return this.innerBounds.height / this.barCount - this.barHeight
// useful if `barHeight` can't be used due to a cyclic dependency
// keep in mind though that this is not exactly the same as `barHeight`
@computed private get approximateBarHeight(): number {
const { height } = this.boundsWithoutLegend
const approximateMaxBarHeight = height / this.barCount
const approximateBarSpacing =
approximateMaxBarHeight * BAR_SPACING_FACTOR
const totalWhiteSpace = this.barCount * approximateBarSpacing
return (height - totalWhiteSpace) / this.barCount
}

// legend props
Expand Down Expand Up @@ -713,7 +726,7 @@ export class StackedDiscreteBarChart
<HorizontalAxisZeroLine
horizontalAxis={yAxis}
bounds={innerBounds}
strokeWidth={axisLineWidth}
strokeWidth={0.5 * axisLineWidth}
// moves the zero line a little to the left to avoid
// overlap with the bars
align={HorizontalAlign.right}
Expand Down

0 comments on commit e19b84b

Please sign in to comment.