Grapher redesign: Incorporate feedback

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
 

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",

packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx

@@ -243,9 +243,11 @@ export class CaptionedChart extends React.Component<CaptionedChartProps> {
         const { showContentSwitchers } = this
         return (
             <nav className="controlsRow">
-                {showContentSwitchers && (
-                    <ContentSwitchers manager={this.manager} />
-                )}
+                <div>
+                    {showContentSwitchers && (
+                        <ContentSwitchers manager={this.manager} />
+                    )}
+                </div>
                 <div className="controls">
                     <EntitySelectorToggle manager={this.manager} />
                     <SettingsMenu

packages/@ourworldindata/grapher/src/controls/ChartIcons.tsx

@@ -0,0 +1,114 @@
+import React from "react"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
+import {
+    faChartLine,
+    faChartColumn,
+    faEarthAmericas,
+} from "@fortawesome/free-solid-svg-icons"
+import { ChartTypeName } from "../core/GrapherConstants"
+
+export const chartIcons: Record<ChartTypeName, JSX.Element> = {
+    // line chart
+    [ChartTypeName.LineChart]: <FontAwesomeIcon icon={faChartLine} />,
+
+    // bar charts
+    [ChartTypeName.DiscreteBar]: <FontAwesomeIcon icon={faChartColumn} />,
+    [ChartTypeName.StackedBar]: <FontAwesomeIcon icon={faChartColumn} />,
+    [ChartTypeName.StackedDiscreteBar]: (
+        <FontAwesomeIcon icon={faChartColumn} />
+    ),
+
+    // world map
+    [ChartTypeName.WorldMap]: <FontAwesomeIcon icon={faEarthAmericas} />,
+
+    // scatter
+    [ChartTypeName.ScatterPlot]: (
+        <svg
+            className="custom-icon scatter"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+        >
+            <g clipPath="url(#a)">
+                <path
+                    fill="currentColor"
+                    fillRule="evenodd"
+                    d="M13.2 14h-10A1.2 1.2 0 0 1 2 12.8v-10a.8.8 0 1 1 1.6 0V12c0 .22.18.4.4.4h9.2a.8.8 0 0 1 0 1.6Zm-.16-10a1.04 1.04 0 1 1-2.08 0 1.04 1.04 0 0 1 2.08 0Zm-.24 0Zm-1.36 3.6a1.04 1.04 0 1 1-2.08 0 1.04 1.04 0 0 1 2.08 0Zm-.24 0Zm-3.76 2a1.04 1.04 0 1 1-2.08 0 1.04 1.04 0 0 1 2.08 0Zm-.24 0Zm1.04-4.8a1.04 1.04 0 1 1-2.08 0 1.04 1.04 0 0 1 2.08 0Z"
+                    clipRule="evenodd"
+                />
+            </g>
+            <defs>
+                <clipPath id="a">
+                    <path fill="#fff" d="M0 0h16v16H0z" />
+                </clipPath>
+            </defs>
+        </svg>
+    ),
+
+    // marimekko
+    [ChartTypeName.Marimekko]: (
+        <svg
+            className="custom-icon marimekko"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+        >
+            <g clipPath="url(#a)">
+                <path
+                    fill="currentColor"
+                    stroke="currentColor"
+                    strokeWidth=".1"
+                    d="M13.5 1.45h-11A1.051 1.051 0 0 0 1.45 2.5v11a1.051 1.051 0 0 0 1.05 1.05h11a1.051 1.051 0 0 0 1.05-1.05v-11a1.051 1.051 0 0 0-1.05-1.05Zm-.05 3.5h-2.9v-2.4h2.9v2.4Zm-4-1h-2.9v-1.4h2.9v1.4Zm0 1.1v3.9h-2.9v-3.9h2.9Zm-4 5.9h-2.9v-4.9h2.9v4.9Zm1.1-.9h2.9v3.4h-2.9v-3.4Zm4-4h2.9v1.9h-2.9v-1.9Zm-5.1-3.5v2.4h-2.9v-2.4h2.9Zm-2.9 9.5h2.9v1.4h-2.9v-1.4Zm8 1.4v-4.4h2.9v4.4h-2.9Z"
+                />
+            </g>
+            <defs>
+                <clipPath id="a">
+                    <path fill="#fff" d="M0 0h16v16H0z" />
+                </clipPath>
+            </defs>
+        </svg>
+    ),
+
+    // stacked area
+    [ChartTypeName.StackedArea]: (
+        <svg
+            className="custom-icon stacked-area"
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+        >
+            <g
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="1.6"
+            >
+                <path d="M1 12.458V1.542L5.764 4.06l7.145-2.52v10.917H1Z" />
+                <path d="m1 9.481 4.764-1.985 7.145 1.191" />
+            </g>
+        </svg>
+    ),
+
+    // slope chart
+    [ChartTypeName.SlopeChart]: (
+        <svg
+            className="custom-icon slope"
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+        >
+            <g
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="1.6"
+            >
+                <path d="M1 1v11.267h12M3.6 7.933 12.267 3.6" />
+            </g>
+        </svg>
+    ),
+}

packages/@ourworldindata/grapher/src/controls/ContentSwitchers.scss

@@ -7,15 +7,16 @@
     $info-icon: #a1a1a1;
     $active-icon: #6e87a2;
 
-    $border-width: 1px;
     $border-radius: 4px;
-    $visual-gap: 1.5px;
+    $visual-gap: 2px;
 
     list-style: none;
     height: $controlRowHeight;
     margin: 0;
     padding: $visual-gap;
-    border: $border-width solid $light-stroke;
+    // using a box-shadow instead of a border fixes a bug
+    // where the tab items weren't centered when zoomed in or out
+    box-shadow: inset 0 0 0 1px $light-stroke;
     border-radius: $border-radius;
 
     li {
@@ -25,7 +26,7 @@
     }
 
     li > a {
-        $height: $controlRowHeight - 2 * ($border-width + $visual-gap);
+        $height: $controlRowHeight - 2 * $visual-gap;
 
         display: block;
         text-transform: capitalize;
@@ -50,6 +51,20 @@
 
         svg {
             color: $info-icon;
+
+            &.custom-icon {
+                --size: 13px;
+
+                display: inline-block;
+                height: var(--size);
+                width: var(--size);
+                vertical-align: -1.625px;
+
+                &.scatter,
+                &.marimekko {
+                    --size: 14px;
+                }
+            }
         }
     }
 

packages/@ourworldindata/grapher/src/controls/ContentSwitchers.tsx

@@ -3,23 +3,15 @@ import { computed } from "mobx"
 import { observer } from "mobx-react"
 import classnames from "classnames"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-import {
-    faTable,
-    faEarthAmericas,
-    faChartLine,
-} from "@fortawesome/free-solid-svg-icons"
-import { GrapherTabOption } from "../core/GrapherConstants"
-
-const icons = {
-    [GrapherTabOption.table]: faTable,
-    [GrapherTabOption.chart]: faChartLine,
-    [GrapherTabOption.map]: faEarthAmericas,
-} as const
+import { faTable, faEarthAmericas } from "@fortawesome/free-solid-svg-icons"
+import { ChartTypeName, GrapherTabOption } from "../core/GrapherConstants"
+import { chartIcons } from "./ChartIcons"
 
 export interface ContentSwitchersManager {
     availableTabs?: GrapherTabOption[]
     tab?: GrapherTabOption
     isNarrow?: boolean
+    type?: ChartTypeName
 }
 
 @observer
@@ -38,6 +30,21 @@ export class ContentSwitchers extends React.Component<{
         return !this.manager.isNarrow
     }
 
+    @computed private get chartType(): ChartTypeName {
+        return this.manager.type ?? ChartTypeName.LineChart
+    }
+
+    private tabIcon(tab: GrapherTabOption): JSX.Element {
+        switch (tab) {
+            case GrapherTabOption.table:
+                return <FontAwesomeIcon icon={faTable} />
+            case GrapherTabOption.map:
+                return <FontAwesomeIcon icon={faEarthAmericas} />
+            case GrapherTabOption.chart:
+                return chartIcons[this.chartType]
+        }
+    }
+
     render(): JSX.Element {
         const { manager } = this
         return (
@@ -51,6 +58,7 @@ export class ContentSwitchers extends React.Component<{
                     <Tab
                         key={tab}
                         tab={tab}
+                        icon={this.tabIcon(tab)}
                         isActive={tab === manager.tab}
                         onClick={(): void => {
                             manager.tab = tab
@@ -65,6 +73,7 @@ export class ContentSwitchers extends React.Component<{
 
 function Tab(props: {
     tab: GrapherTabOption
+    icon: JSX.Element
     isActive?: boolean
     onClick?: React.MouseEventHandler<HTMLAnchorElement>
     showLabel?: boolean
@@ -76,7 +85,7 @@ function Tab(props: {
                 onClick={props.onClick}
                 data-track-note={"chart_click_" + props.tab}
             >
-                <FontAwesomeIcon icon={icons[props.tab]} />
+                {props.icon}
                 {props.showLabel && <span className="label">{props.tab}</span>}
             </a>
         </li>

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;

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 {
@@ -138,6 +140,7 @@ export interface SettingsMenuManager {
     hideFacetYDomainToggle?: boolean
     hideXScaleToggle?: boolean
     hideYScaleToggle?: boolean
+    hideTableFilterToggle?: boolean
 
     // chart state
     type: ChartTypeName
@@ -288,9 +291,13 @@ export class SettingsMenu extends React.Component<{
         )
     }
 
+    @computed get showTableFilterToggle(): boolean {
+        return !this.manager.hideTableFilterToggle
+    }
+
     @computed get showSettingsMenuToggle(): boolean {
         if (this.manager.isOnMapTab) return false
-        if (this.manager.isOnTableTab) return true
+        if (this.manager.isOnTableTab) return this.showTableFilterToggle
 
         return !!(
             this.showYScaleToggle ||
@@ -365,6 +372,7 @@ export class SettingsMenu extends React.Component<{
             showFacetControl,
             showFacetYDomainToggle,
             showAbsRelToggle,
+            showTableFilterToggle,
         } = this
 
         const {
@@ -435,7 +443,9 @@ export class SettingsMenu extends React.Component<{
                     </Setting>
 
                     <Setting title="Data rows" active={isOnTableTab}>
-                        <TableFilterToggle manager={manager} />
+                        {showTableFilterToggle && (
+                            <TableFilterToggle manager={manager} />
+                        )}
                     </Setting>
 
                     <Setting
@@ -725,7 +735,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 +770,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 {
@@ -839,6 +850,7 @@ export class FacetStrategySelector extends React.Component<{
 export interface MapProjectionMenuManager {
     mapConfig?: MapConfig
     isOnMapTab?: boolean
+    hideMapProjectionMenu?: boolean
 }
 
 interface MapProjectionMenuItem {
@@ -856,10 +868,10 @@ export class MapProjectionMenu extends React.Component<{
     }
 
     @computed get showMenu(): boolean {
-        // TODO: make hiding the menu configurable from gdocs
-        const { isOnMapTab, mapConfig } = this.props.manager,
+        const { hideMapProjectionMenu, isOnMapTab, mapConfig } =
+                this.props.manager,
             { projection } = mapConfig ?? {}
-        return !!(isOnMapTab && projection)
+        return !hideMapProjectionMenu && !!(isOnMapTab && projection)
     }
 
     @action.bound onChange(selected: MapProjectionMenuItem | null): void {

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;