✨ (grapher) choose static portrait dimensions

owid · Dec 1, 2023 · 16f75c8 · 16f75c8
1 parent 4f69f90
commit 16f75c8
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 7 deletions.
diff --git a/adminSiteClient/ChartEditorPage.tsx b/adminSiteClient/ChartEditorPage.tsx
@@ -20,7 +20,15 @@ import {
     groupBy,
     extractDetailsFromSyntax,
 } from "@ourworldindata/utils"
-import { Grapher, Topic, GrapherInterface } from "@ourworldindata/grapher"
+import {
+    Grapher,
+    Topic,
+    GrapherInterface,
+    DEFAULT_GRAPHER_WIDTH,
+    DEFAULT_GRAPHER_HEIGHT,
+    DEFAULT_GRAPHER_PORTRAIT_WIDTH,
+    DEFAULT_GRAPHER_PORTRAIT_HEIGHT,
+} from "@ourworldindata/grapher"
 import { Admin } from "./Admin.js"
 import {
     ChartEditor,
@@ -251,9 +259,24 @@ export class ChartEditorPage
     }
 
     @computed private get bounds(): Bounds {
-        return this.editor?.previewMode === "mobile"
-            ? new Bounds(0, 0, 360, 500)
-            : new Bounds(0, 0, 800, 600)
+        const { showStaticPreview, previewMode } = this.editor ?? {}
+        const isMobile = previewMode === "mobile"
+
+        const landscapeWidth = 0.8 * DEFAULT_GRAPHER_WIDTH
+        const landscapeHeight = 0.8 * DEFAULT_GRAPHER_HEIGHT
+
+        const portraitWidth = 0.8 * DEFAULT_GRAPHER_PORTRAIT_WIDTH
+        const portraitHeight = 0.8 * DEFAULT_GRAPHER_PORTRAIT_HEIGHT
+
+        if (showStaticPreview) {
+            return isMobile
+                ? new Bounds(0, 0, portraitWidth, portraitHeight)
+                : new Bounds(0, 0, landscapeWidth, landscapeHeight)
+        }
+
+        return isMobile
+            ? new Bounds(0, 0, 380, 525)
+            : new Bounds(0, 0, landscapeWidth, landscapeHeight)
     }
 
     // unvalidated terms extracted from the subtitle and note fields
@@ -334,6 +357,7 @@ export class ChartEditorPage
                 () => {
                     this.grapher.renderToStatic =
                         !!this.editor?.showStaticPreview
+                    this.updateGrapher()
                 }
             )
         )

diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -87,6 +87,8 @@ import {
     DEFAULT_GRAPHER_CONFIG_SCHEMA,
     DEFAULT_GRAPHER_WIDTH,
     DEFAULT_GRAPHER_HEIGHT,
+    DEFAULT_GRAPHER_PORTRAIT_WIDTH,
+    DEFAULT_GRAPHER_PORTRAIT_HEIGHT,
     SeriesStrategy,
     getVariableDataRoute,
     getVariableMetadataRoute,
@@ -1699,7 +1701,12 @@ export class Grapher
     }
 
     @computed get portraitBounds(): Bounds {
-        return new Bounds(0, 0, DEFAULT_GRAPHER_HEIGHT, DEFAULT_GRAPHER_WIDTH)
+        return new Bounds(
+            0,
+            0,
+            DEFAULT_GRAPHER_PORTRAIT_WIDTH,
+            DEFAULT_GRAPHER_PORTRAIT_HEIGHT
+        )
     }
 
     @computed get hasYDimension(): boolean {
@@ -1960,8 +1967,9 @@ export class Grapher
         // If the user is using interactive version and then goes to export chart, use current bounds to maintain WYSIWYG
         if (isExportingToSvgOrPng) return false
 
-        // todo: can remove this if we drop old adminSite editor
-        if (isEditor) return true
+        // In the editor, we usually want ideal bounds, except when we're rendering a static preview;
+        // in that case, we want to use the bounds used for export
+        if (isEditor) return !this.renderToStatic
 
         // If the available space is very small, we use all of the space given to us
         if (

diff --git a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
@@ -31,6 +31,9 @@ export const DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL = "countries and regions"
 export const DEFAULT_GRAPHER_WIDTH = 850
 export const DEFAULT_GRAPHER_HEIGHT = 600
 
+export const DEFAULT_GRAPHER_PORTRAIT_WIDTH = 600
+export const DEFAULT_GRAPHER_PORTRAIT_HEIGHT = 600
+
 export const DEFAULT_GRAPHER_FRAME_PADDING = 16
 export const STATIC_EXPORT_DETAIL_SPACING = 8
 

diff --git a/packages/@ourworldindata/grapher/src/index.ts b/packages/@ourworldindata/grapher/src/index.ts
@@ -17,6 +17,8 @@ export {
     GRAPHER_IS_IN_IFRAME_CLASS,
     DEFAULT_GRAPHER_WIDTH,
     DEFAULT_GRAPHER_HEIGHT,
+    DEFAULT_GRAPHER_PORTRAIT_WIDTH,
+    DEFAULT_GRAPHER_PORTRAIT_HEIGHT,
     STATIC_EXPORT_DETAIL_SPACING,
     DEFAULT_GRAPHER_ENTITY_TYPE,
     CookieKey,