From ef634bf8b3060a22220de488d955523ef9c2cb63 Mon Sep 17 00:00:00 2001 From: sophiamersmann Date: Wed, 27 Sep 2023 12:35:47 +0000 Subject: [PATCH 01/20] fix(grapher): dismiss share menu when entering full-screen mode --- packages/@ourworldindata/grapher/src/core/Grapher.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx index 8ed4c1f1207..1662a2521ec 100644 --- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx +++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx @@ -2182,6 +2182,9 @@ export class Grapher document.documentElement.classList.remove("no-scroll") } + // dismiss the share menu + this.isShareMenuActive = false + this._isInFullScreenMode = newValue } From 36a85a104b4e502b2287146d3044cf25021bbd46 Mon Sep 17 00:00:00 2001 From: sophiamersmann Date: Wed, 27 Sep 2023 12:54:21 +0000 Subject: [PATCH 02/20] fix(grapher): prevent style leak on topic pages --- packages/@ourworldindata/grapher/src/controls/ShareMenu.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/@ourworldindata/grapher/src/controls/ShareMenu.scss b/packages/@ourworldindata/grapher/src/controls/ShareMenu.scss index faac5ea42c4..f5df97e5d07 100644 --- a/packages/@ourworldindata/grapher/src/controls/ShareMenu.scss +++ b/packages/@ourworldindata/grapher/src/controls/ShareMenu.scss @@ -20,6 +20,7 @@ $zindex-ControlsFooter: 2; border-radius: 4px; h2 { + font-family: $sans-serif-font-stack; margin: 0; font-size: 12px; font-weight: 700; From 3d9c09691d235f7f210bf10ba0d6c367c842c8f1 Mon Sep 17 00:00:00 2001 From: sophiamersmann Date: Wed, 27 Sep 2023 13:07:10 +0000 Subject: [PATCH 03/20] fix(grapher): reomve comma if title ends with a question mark --- .../grapher/src/core/Grapher.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx index 1662a2521ec..f90b0a1fd60 100644 --- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx +++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx @@ -1231,7 +1231,7 @@ export class Grapher } @computed get currentTitle(): string { - let text = this.displayTitle + let text = this.displayTitle.trim() const selectedEntityNames = this.selection.selectedEntityNames const showEntityAnnotation = !this.hideAnnotationFieldsInTitle?.entity const showTimeAnnotation = !this.hideAnnotationFieldsInTitle?.time @@ -1242,6 +1242,16 @@ export class Grapher this.chartInstance.seriesStrategy || autoDetectSeriesStrategy(this, true) + // helper function to add an annotation fragment to the title + // only adds a comma if the text does not end with a question mark + const appendAnnotationField = ( + text: string, + annotation: string + ): string => { + const separator = text.endsWith("?") ? "" : "," + return `${text}${separator} ${annotation}` + } + if ( !this.forceHideAnnotationFieldsInTitle?.entity && this.tab === GrapherTabOption.chart && @@ -1252,7 +1262,7 @@ export class Grapher this.canSelectMultipleEntities) ) { const entityStr = selectedEntityNames[0] - if (entityStr?.length) text = `${text}, ${entityStr}` + if (entityStr?.length) text = appendAnnotationField(text, entityStr) } if ( @@ -1275,7 +1285,7 @@ export class Grapher this.isMarimekko || this.isOnMapTab))) ) - text += this.timeTitleSuffix + text = appendAnnotationField(text, this.timeTitleSuffix) return text.trim() } @@ -1385,7 +1395,7 @@ export class Grapher " to " + timeColumn.formatValue(endTime) - return ", " + time + return time } @computed get sourcesLine(): string { From 2a37c9800a6f133d4b7a0b16b0d4f852888c0b06 Mon Sep 17 00:00:00 2001 From: sophiamersmann Date: Wed, 27 Sep 2023 13:36:14 +0000 Subject: [PATCH 04/20] enhance(grapher): make clickable header area smaller on larger screens --- .../grapher/src/header/Header.tsx | 53 +++++++++++++------ 1 file changed, 37 insertions(+), 16 deletions(-) diff --git a/packages/@ourworldindata/grapher/src/header/Header.tsx b/packages/@ourworldindata/grapher/src/header/Header.tsx index 44eb70c3481..fa0bbd6772a 100644 --- a/packages/@ourworldindata/grapher/src/header/Header.tsx +++ b/packages/@ourworldindata/grapher/src/header/Header.tsx @@ -137,34 +137,55 @@ export class Header extends React.Component<{ ) } - render(): JSX.Element { + private renderTitle(): JSX.Element { const { manager } = this - const subtitleStyle = { + // on smaller screens, make the whole width of the header clickable + if (manager.isMedium) { + return ( + +

+ {this.title.renderHTML()} +

+ + ) + } + + // on larger screens, only make the title text itself clickable + return ( +

+ + {this.title.renderHTML()} + +

+ ) + } + + private renderSubtitle(): JSX.Element { + const style = { ...this.subtitle.style, marginTop: this.subtitleMarginTop, // make sure there are no scrollbars on subtitle overflowY: "hidden", } + return

{this.subtitle.renderHTML()}

+ } + render(): JSX.Element { return (
{this.logo && this.logo.renderHTML()}
- -

- {this.title.renderHTML()} -

- - {this.subtitleText && ( -

- {this.subtitle.renderHTML()} -

- )} + {this.renderTitle()} + {this.subtitleText && this.renderSubtitle()}
) From de60ee372811bcd4131575f6376590ac05174adb Mon Sep 17 00:00:00 2001 From: sophiamersmann Date: Thu, 28 Sep 2023 09:21:47 +0000 Subject: [PATCH 05/20] style(grapher): bump up title font size --- packages/@ourworldindata/grapher/src/header/Header.tsx | 4 ++-- packages/@ourworldindata/grapher/src/header/HeaderManager.ts | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/@ourworldindata/grapher/src/header/Header.tsx b/packages/@ourworldindata/grapher/src/header/Header.tsx index fa0bbd6772a..f1d02911c5d 100644 --- a/packages/@ourworldindata/grapher/src/header/Header.tsx +++ b/packages/@ourworldindata/grapher/src/header/Header.tsx @@ -52,14 +52,14 @@ export class Header extends React.Component<{ @computed get title(): TextWrap { const { logoWidth } = this - const fontSize = this.manager.isSmall + const fontSize = this.manager.isNarrow ? 18 : this.manager.isMedium ? 20 : 24 return new TextWrap({ maxWidth: this.maxWidth - logoWidth - 24, - fontWeight: 500, + fontWeight: 600, lineHeight: this.manager.isSmall ? 1.1 : 1.2, fontSize, text: this.titleText, diff --git a/packages/@ourworldindata/grapher/src/header/HeaderManager.ts b/packages/@ourworldindata/grapher/src/header/HeaderManager.ts index 16b09fada1c..d38cee38a0d 100644 --- a/packages/@ourworldindata/grapher/src/header/HeaderManager.ts +++ b/packages/@ourworldindata/grapher/src/header/HeaderManager.ts @@ -11,6 +11,7 @@ export interface HeaderManager { detailsOrderedByReference?: Set shouldIncludeDetailsInStaticExport?: boolean isExportingtoSvgOrPng?: boolean + isNarrow?: boolean isSmall?: boolean isMedium?: boolean } From 65dcebe09b7c357da5a56ea3156d143540c2f764 Mon Sep 17 00:00:00 2001 From: sophiamersmann Date: Thu, 28 Sep 2023 09:25:38 +0000 Subject: [PATCH 06/20] style(grapher): make region selector more narrow --- packages/@ourworldindata/grapher/src/controls/Controls.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@ourworldindata/grapher/src/controls/Controls.scss b/packages/@ourworldindata/grapher/src/controls/Controls.scss index d668f9f107d..4dc7397f7e8 100644 --- a/packages/@ourworldindata/grapher/src/controls/Controls.scss +++ b/packages/@ourworldindata/grapher/src/controls/Controls.scss @@ -90,7 +90,7 @@ nav.controlsRow .controls { .control { min-height: auto; - min-width: 180px; + min-width: 150px; font: $medium 13px/16px $lato; letter-spacing: 0.01em; display: flex; From aef436efad66ba521aca5b9a98748b5d7d1891bc Mon Sep 17 00:00:00 2001 From: sophiamersmann Date: Thu, 28 Sep 2023 09:34:06 +0000 Subject: [PATCH 07/20] style(grapher): make timeline start/end year look like action buttons --- .../grapher/src/timeline/TimelineComponent.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.scss b/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.scss index 3348d921ec1..ed10e50616b 100644 --- a/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.scss +++ b/packages/@ourworldindata/grapher/src/timeline/TimelineComponent.scss @@ -10,6 +10,7 @@ $timelineHeight: 32px; $active-knob: #6e87a2; // start/end year label + $light-fill: #f2f2f2; $hover-fill: #e7e7e7; $active-fill: #dbe5f0; @@ -38,7 +39,7 @@ $timelineHeight: 32px; display: grid; place-content: center; margin-right: 0; - border: 1px solid $hover-fill; + background-color: $light-fill; &:hover { background: $hover-fill; From 327c615fa8a01ad1740b0b96e8bf2550af41f150 Mon Sep 17 00:00:00 2001 From: sophiamersmann Date: Thu, 28 Sep 2023 10:25:34 +0000 Subject: [PATCH 08/20] refactor(grapher): add constant variable for the default entity type --- explorer/Explorer.tsx | 3 ++- packages/@ourworldindata/grapher/src/controls/Controls.tsx | 7 +++++-- packages/@ourworldindata/grapher/src/core/Grapher.tsx | 6 ++++-- .../@ourworldindata/grapher/src/core/GrapherConstants.ts | 3 +++ .../@ourworldindata/grapher/src/dataTable/DataTable.tsx | 5 +++-- packages/@ourworldindata/grapher/src/index.ts | 1 + .../grapher/src/modal/EntitySelectorModal.tsx | 4 ++-- 7 files changed, 20 insertions(+), 9 deletions(-) diff --git a/explorer/Explorer.tsx b/explorer/Explorer.tsx index adf27c43b14..6ecbd40fd09 100644 --- a/explorer/Explorer.tsx +++ b/explorer/Explorer.tsx @@ -24,6 +24,7 @@ import { setSelectedEntityNamesParam, SlideShowController, SlideShowManager, + DEFAULT_GRAPHER_ENTITY_TYPE, } from "@ourworldindata/grapher" import { Bounds, @@ -186,7 +187,7 @@ export class Explorer this.props.selection ?? new SelectionArray(this.explorerProgram.selection) - entityType = this.explorerProgram.entityType ?? "country or region" + entityType = this.explorerProgram.entityType ?? DEFAULT_GRAPHER_ENTITY_TYPE @observable.ref grapher?: Grapher diff --git a/packages/@ourworldindata/grapher/src/controls/Controls.tsx b/packages/@ourworldindata/grapher/src/controls/Controls.tsx index 7a379cc9cc0..7def89bc5a0 100644 --- a/packages/@ourworldindata/grapher/src/controls/Controls.tsx +++ b/packages/@ourworldindata/grapher/src/controls/Controls.tsx @@ -22,6 +22,8 @@ import { FacetStrategy, StackMode, ScaleType, + DEFAULT_GRAPHER_ENTITY_TYPE, + DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL, } from "../core/GrapherConstants" import { MapConfig } from "../mapCharts/MapConfig" import { @@ -725,7 +727,8 @@ export class TableFilterToggle extends React.Component<{ render(): JSX.Element { const tooltip = `Only display table rows for ${ - this.props.manager.entityTypePlural ?? "countries or regions" + this.props.manager.entityTypePlural ?? + DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL } selected within the chart` return ( @@ -759,7 +762,7 @@ export class FacetStrategySelector extends React.Component<{ } @computed get entityName(): string { - return this.props.manager.entityType ?? "country or region" + return this.props.manager.entityType ?? DEFAULT_GRAPHER_ENTITY_TYPE } @computed get metricName(): string { diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx index f90b0a1fd60..7c09a452616 100644 --- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx +++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx @@ -90,6 +90,8 @@ import { getVariableDataRoute, getVariableMetadataRoute, GRAPHER_FRAME_PADDING, + DEFAULT_GRAPHER_ENTITY_TYPE, + DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL, } from "../core/GrapherConstants" import Cookies from "js-cookie" import { @@ -334,8 +336,8 @@ export class Grapher @observable.ref logo?: LogoOption = undefined @observable.ref hideLogo?: boolean = undefined @observable.ref hideRelativeToggle? = true - @observable.ref entityType = "country or region" - @observable.ref entityTypePlural = "countries or regions" + @observable.ref entityType = DEFAULT_GRAPHER_ENTITY_TYPE + @observable.ref entityTypePlural = DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL @observable.ref facettingLabelByYVariables = "metric" @observable.ref hideTimeline?: boolean = undefined @observable.ref hideScatterLabels?: boolean = undefined diff --git a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts index efc96fdec2b..898a6378d30 100644 --- a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts +++ b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts @@ -25,6 +25,9 @@ export const GRAPHER_IS_IN_IFRAME_CLASS = "IsInIframe" export const DEFAULT_GRAPHER_CONFIG_SCHEMA = "https://files.ourworldindata.org/schemas/grapher-schema.003.json" +export const DEFAULT_GRAPHER_ENTITY_TYPE = "country or region" +export const DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL = "countries and regions" + export const DEFAULT_GRAPHER_WIDTH = 850 export const DEFAULT_GRAPHER_HEIGHT = 600 diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx b/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx index 58107e36546..c488034fa9e 100644 --- a/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx +++ b/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx @@ -43,6 +43,7 @@ import { } from "@ourworldindata/utils" import { makeSelectionArray } from "../chart/ChartUtils" import { SelectionArray } from "../selection/SelectionArray" +import { DEFAULT_GRAPHER_ENTITY_TYPE } from "../core/GrapherConstants" interface DataTableState { sort: DataTableSortState @@ -153,13 +154,13 @@ export class DataTable extends React.Component<{ return ( this.props.manager ?? { table: BlankOwidTable(), - entityType: "country or region", + entityType: DEFAULT_GRAPHER_ENTITY_TYPE, } ) } @computed private get entityType(): string { - return this.manager.entityType ?? "country or region" + return this.manager.entityType ?? DEFAULT_GRAPHER_ENTITY_TYPE } @computed private get entitiesAreCountryLike(): boolean { diff --git a/packages/@ourworldindata/grapher/src/index.ts b/packages/@ourworldindata/grapher/src/index.ts index 29834b93ce3..9bb22f7376c 100644 --- a/packages/@ourworldindata/grapher/src/index.ts +++ b/packages/@ourworldindata/grapher/src/index.ts @@ -18,6 +18,7 @@ export { DEFAULT_GRAPHER_WIDTH, DEFAULT_GRAPHER_HEIGHT, STATIC_EXPORT_DETAIL_SPACING, + DEFAULT_GRAPHER_ENTITY_TYPE, CookieKey, EntitySelectionMode, StackMode, diff --git a/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx b/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx index 10ed6eb2a15..2157190377e 100644 --- a/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx +++ b/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx @@ -175,8 +175,8 @@ export class EntitySelectorModal extends React.Component<{ this const title = isMulti - ? `Add/remove ${manager.entityTypePlural || "countries or regions"}` - : `Choose ${manager.entityType || "country or region"}` + ? `Add/remove ${manager.entityTypePlural}` + : `Choose ${manager.entityType}` return ( Date: Thu, 28 Sep 2023 10:28:42 +0000 Subject: [PATCH 09/20] enhance(grapher): use Country/area as default header for tables --- packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx b/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx index c488034fa9e..e8b580dbaaa 100644 --- a/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx +++ b/packages/@ourworldindata/grapher/src/dataTable/DataTable.tsx @@ -159,8 +159,9 @@ export class DataTable extends React.Component<{ ) } + // in data tables only, we prefer "Country/area" over "Country or region" as default entity type @computed private get entityType(): string { - return this.manager.entityType ?? DEFAULT_GRAPHER_ENTITY_TYPE + return this.manager.entityType ?? "Country/area" } @computed private get entitiesAreCountryLike(): boolean { From 56b7cd122c0bf90a0c0fd9e0ceddc3bbb7a72a99 Mon Sep 17 00:00:00 2001 From: sophiamersmann Date: Thu, 28 Sep 2023 13:07:14 +0000 Subject: [PATCH 10/20] chore(grapher): rename Twitter to X --- packages/@ourworldindata/grapher/src/controls/ShareMenu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@ourworldindata/grapher/src/controls/ShareMenu.tsx b/packages/@ourworldindata/grapher/src/controls/ShareMenu.tsx index b81de2a481e..57000deaa1a 100644 --- a/packages/@ourworldindata/grapher/src/controls/ShareMenu.tsx +++ b/packages/@ourworldindata/grapher/src/controls/ShareMenu.tsx @@ -2,7 +2,7 @@ import { observer } from "mobx-react" import React from "react" import { computed, action } from "mobx" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js" -import { faTwitter, faFacebook } from "@fortawesome/free-brands-svg-icons" +import { faXTwitter, faFacebook } from "@fortawesome/free-brands-svg-icons" import { faCode, faShareAlt, @@ -157,7 +157,7 @@ export class ShareMenu extends React.Component { href={twitterHref} rel="noopener" > - Twitter + X Date: Thu, 28 Sep 2023 13:20:52 +0000 Subject: [PATCH 11/20] enhance(grapher): use indefinite article in entity selector heading --- package.json | 2 ++ .../grapher/src/modal/EntitySelectorModal.tsx | 8 +++++++- yarn.lock | 16 ++++++++++++++++ 3 files changed, 25 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 78d32254b32..053c7fd04dc 100644 --- a/package.json +++ b/package.json @@ -144,6 +144,7 @@ "googleapis": "^108.0.0", "handsontable": "^12.3.3", "html-to-text": "^8.2.0", + "indefinite": "^2.4.3", "instantsearch.js": "^4.56.9", "js-base64": "^3.7.2", "js-cookie": "^3.0.1", @@ -224,6 +225,7 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^12", "@types/geojson": "^7946.0.10", + "@types/indefinite": "^2.3.2", "@types/jest": "^29.0.3", "@types/js-yaml": "^4.0.5", "@types/opener": "^1.4.0", diff --git a/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx b/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx index 2157190377e..671c3e6ee05 100644 --- a/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx +++ b/packages/@ourworldindata/grapher/src/modal/EntitySelectorModal.tsx @@ -2,6 +2,7 @@ import React from "react" import { observer } from "mobx-react" import { computed, action, observable } from "mobx" import classnames from "classnames" +import a from "indefinite" import { Bounds, DEFAULT_BOUNDS, @@ -14,6 +15,7 @@ import { faMagnifyingGlass, faCheck } from "@fortawesome/free-solid-svg-icons" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js" import { SelectionArray } from "../selection/SelectionArray" import { Modal } from "./Modal" +import { DEFAULT_GRAPHER_ENTITY_TYPE } from "../core/GrapherConstants" export interface EntitySelectorModalManager { selection: SelectionArray @@ -96,6 +98,10 @@ export class EntitySelectorModal extends React.Component<{ return !this.manager.canChangeEntity } + @computed private get entityType(): string { + return this.manager.entityType ?? DEFAULT_GRAPHER_ENTITY_TYPE + } + @computed get fuzzy(): FuzzySearch { return new FuzzySearch(this.searchableEntities, "name") } @@ -176,7 +182,7 @@ export class EntitySelectorModal extends React.Component<{ const title = isMulti ? `Add/remove ${manager.entityTypePlural}` - : `Choose ${manager.entityType}` + : `Choose ${a(this.entityType)}` return ( Date: Thu, 28 Sep 2023 14:06:00 +0000 Subject: [PATCH 12/20] enhance(grapher): hide map projection menu in narrative charts --- .../grapher/src/captionedChart/CaptionedChart.tsx | 8 +++++--- .../@ourworldindata/grapher/src/controls/Controls.tsx | 7 ++++--- packages/@ourworldindata/grapher/src/core/Grapher.tsx | 2 ++ .../@ourworldindata/grapher/src/core/GrapherConstants.ts | 1 + packages/@ourworldindata/utils/src/owidTypes.ts | 1 + site/gdocs/Chart.tsx | 3 +++ 6 files changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx index eaf173c279f..bf6711782f2 100644 --- a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx +++ b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx @@ -243,9 +243,11 @@ export class CaptionedChart extends React.Component { const { showContentSwitchers } = this return (