diff --git a/adminSiteClient/ChartEditorPage.tsx b/adminSiteClient/ChartEditorPage.tsx index 8ac6bafb2f1..f7c822b210d 100644 --- 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 index 14f1c304253..c6af2472eb3 100644 --- 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 index c9564e85d26..85dd43a860e 100644 --- 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 index 1fa39a47540..18f14e71396 100644 --- 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,