From f156907acb02a370f1ec3497bd01f713536d8e19 Mon Sep 17 00:00:00 2001 From: sophiamersmann Date: Tue, 18 Jul 2023 05:52:32 +0000 Subject: [PATCH 001/365] enhance(table): display header and footer --- .../src/captionedChart/CaptionedChart.tsx | 66 ++++++++++++------- .../grapher/src/core/Grapher.tsx | 32 +++------ .../grapher/src/dataTable/DataTable.tsx | 10 +-- 3 files changed, 56 insertions(+), 52 deletions(-) diff --git a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx index 2645a410602..14979e73aa1 100644 --- a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx +++ b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx @@ -46,6 +46,7 @@ import { HeaderManager } from "../header/HeaderManager" import { SelectionArray } from "../selection/SelectionArray" import { EntityName } from "@ourworldindata/core-table" import { AxisConfig } from "../axis/AxisConfig" +import { DataTable, DataTableManager } from "../dataTable/DataTable" export interface CaptionedChartManager extends ChartManager, @@ -54,7 +55,8 @@ export interface CaptionedChartManager FooterManager, HeaderManager, FacetYDomainToggleManager, - FacetStrategyDropdownManager { + FacetStrategyDropdownManager, + DataTableManager { containerElement?: HTMLDivElement tabBounds?: Bounds fontSize?: number @@ -78,6 +80,8 @@ export interface CaptionedChartManager showSelectEntitiesButton?: boolean shouldIncludeDetailsInStaticExport?: boolean detailRenderers: MarkdownTextWrap[] + isOnMapTab?: boolean + isOnTableTab?: boolean } interface CaptionedChartProps { @@ -147,18 +151,13 @@ export class CaptionedChart extends React.Component { ) } - // todo: should we remove this and not make a distinction between map and chart tabs? - @computed protected get isMapTab(): boolean { - return this.manager.tab === GrapherTabOption.map - } - @computed protected get bounds(): Bounds { return this.props.bounds ?? this.manager.tabBounds ?? DEFAULT_BOUNDS } // The bounds for the middle chart part @computed protected get boundsForChart(): Bounds { - const topPadding = this.isMapTab + const topPadding = this.manager.isOnMapTab ? 0 : this.manager.type === ChartTypeName.Marimekko ? PADDING_BELOW_HEADER / 2 @@ -173,14 +172,14 @@ export class CaptionedChart extends React.Component { const hasStrategy = !!this.manager.facetStrategy && this.manager.facetStrategy !== FacetStrategy.none - return !this.isMapTab && hasStrategy + return !this.manager.isOnMapTab && hasStrategy } renderChart(): JSX.Element { const { manager } = this const bounds = this.boundsForChart - const chartTypeName = this.isMapTab + const chartTypeName = this.manager.isOnMapTab ? ChartTypeName.WorldMap : manager.typeExceptWhenLineChartAndSingleTimeThenWillBeBarChart ?? manager.type ?? @@ -218,7 +217,12 @@ export class CaptionedChart extends React.Component { @computed get controls(): JSX.Element[] { const manager = this.manager // Todo: we don't yet show any controls on Maps, but seems like we would want to. - if (!manager.isReady || this.isMapTab) return [] + if ( + !manager.isReady || + this.manager.isOnMapTab || + this.manager.isOnTableTab + ) + return [] const { showYScaleToggle, showXScaleToggle } = manager @@ -365,6 +369,16 @@ export class CaptionedChart extends React.Component { ) } + renderDataTable(): JSX.Element { + const { boundsForChart } = this + // todo(redesign): spacing is temporary + return ( +
+ +
+ ) + } + render(): JSX.Element { const { bounds, chartHeight, maxWidth } = this const { width } = bounds @@ -378,19 +392,23 @@ export class CaptionedChart extends React.Component { <>
{this.renderControlsRow()} -
- - {this.patterns} - {this.manager.isReady - ? this.renderChart() - : this.renderLoadingIndicator()} - -
+ {this.manager.isOnTableTab ? ( + this.renderDataTable() + ) : ( +
+ + {this.patterns} + {this.manager.isReady + ? this.renderChart() + : this.renderLoadingIndicator()} + +
+ )}