Narrative views based on this chart
+Narrative charts based on this chart
-
{props.references.chartViews.map((chartView) => (
-
diff --git a/adminSiteClient/SaveButtons.tsx b/adminSiteClient/SaveButtons.tsx
index dbb9ed7171..bca6555c51 100644
--- a/adminSiteClient/SaveButtons.tsx
+++ b/adminSiteClient/SaveButtons.tsx
@@ -63,8 +63,8 @@ class SaveButtonsForChart extends React.Component<{
void this.props.editor.saveAsNewGrapher()
}
- @action.bound onSaveAsNarrativeView() {
- void this.props.editor.saveAsNarrativeView()
+ @action.bound onSaveAsChartView() {
+ void this.props.editor.saveAsChartView()
}
@action.bound onPublishToggle() {
@@ -122,10 +122,10 @@ class SaveButtonsForChart extends React.Component<{
)} diff --git a/baker/SiteBaker.tsx b/baker/SiteBaker.tsx index 29dc2c2c93..52f9b4cb51 100644 --- a/baker/SiteBaker.tsx +++ b/baker/SiteBaker.tsx @@ -56,7 +56,7 @@ import { grabMetadataForGdocLinkedIndicator, TombstonePageData, gdocUrlRegex, - NarrativeViewInfo, + ChartViewInfo, } from "@ourworldindata/utils" import { execWrapper } from "../db/execWrapper.js" import { countryProfileSpecs } from "../site/countryProfileProjects.js" @@ -110,7 +110,7 @@ import { getTombstones } from "../db/model/GdocTombstone.js" import { bakeAllMultiDimDataPages } from "./MultiDimBaker.js" import { getAllLinkedPublishedMultiDimDataPages } from "../db/model/MultiDimDataPage.js" import { getPublicDonorNames } from "../db/model/Donor.js" -import { getNarrativeViewsInfo } from "../db/model/ChartView.js" +import { getChartViewsInfo } from "../db/model/ChartView.js" type PrefetchedAttachments = { donors: string[] @@ -122,7 +122,7 @@ type PrefetchedAttachments = { explorers: Record
diff --git a/db/migration/1734454799588-PostsGdocsLinksAddNarrativeCharts.ts b/db/migration/1734454799588-PostsGdocsLinksAddChartViews.ts similarity index 85% rename from db/migration/1734454799588-PostsGdocsLinksAddNarrativeCharts.ts rename to db/migration/1734454799588-PostsGdocsLinksAddChartViews.ts index cb1d710cf9..06596eea89 100644 --- a/db/migration/1734454799588-PostsGdocsLinksAddNarrativeCharts.ts +++ b/db/migration/1734454799588-PostsGdocsLinksAddChartViews.ts @@ -1,12 +1,12 @@ import { MigrationInterface, QueryRunner } from "typeorm" -export class PostsGdocsLinksAddNarrativeCharts1734454799588 +export class PostsGdocsLinksAddChartViews1734454799588 implements MigrationInterface { public async up(queryRunner: QueryRunner): Promise { await queryRunner.query(` ALTER TABLE posts_gdocs_links - MODIFY linkType ENUM ('gdoc', 'url', 'grapher', 'explorer', 'narrative-chart') NULL`) + MODIFY linkType ENUM ('gdoc', 'url', 'grapher', 'explorer', 'chart-view') NULL`) } public async down(queryRunner: QueryRunner): Promise { diff --git a/db/model/ChartView.ts b/db/model/ChartView.ts index 5a7e609694..2bfd5ad8ed 100644 --- a/db/model/ChartView.ts +++ b/db/model/ChartView.ts @@ -1,11 +1,11 @@ -import { NarrativeViewInfo, JsonString } from "@ourworldindata/types" +import { ChartViewInfo, JsonString } from "@ourworldindata/types" import * as db from "../db.js" -export const getNarrativeViewsInfo = async ( +export const getChartViewsInfo = async ( knex: db.KnexReadonlyTransaction, names?: string[] -): Promise { - const result = await getNarrativeViewsInfo( - knex, - this.linkedNarrativeChartNames - ) - this.narrativeViewsInfo = keyBy(result, "name") + async loadChartViewsInfo(knex: db.KnexReadonlyTransaction): Promise { + const result = await getChartViewsInfo(knex, this.linkedChartViewNames) + this.linkedChartViews = keyBy(result, "name") } async fetchAndEnrichGdoc(): Promise { @@ -873,7 +868,7 @@ export class GdocBase implements OwidGdocBaseInterface { await this.loadImageMetadataFromDB(knex) await this.loadLinkedCharts(knex) await this.loadLinkedIndicators() // depends on linked charts - await this.loadNarrativeViewsInfo(knex) + await this.loadChartViewsInfo(knex) await this._loadSubclassAttachments(knex) await this.validate(knex) } diff --git a/db/model/Link.ts b/db/model/Link.ts index c2a62a16cc..bb0d2941cf 100644 --- a/db/model/Link.ts +++ b/db/model/Link.ts @@ -63,7 +63,7 @@ export function createLinkFromUrl({ } satisfies DbInsertPostGdocLink } -export function createLinkForNarrativeChart({ +export function createLinkForChartView({ name, source, componentType, @@ -74,7 +74,7 @@ export function createLinkForNarrativeChart({ }): DbInsertPostGdocLink { return { target: name, - linkType: OwidGdocLinkType.NarrativeChart, + linkType: OwidGdocLinkType.ChartView, queryString: "", hash: "", text: "", diff --git a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts index a4f8a89682..dc7143bc79 100644 --- a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts +++ b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts @@ -5,8 +5,8 @@ import type { GrapherProgrammaticInterface } from "./Grapher" export const GRAPHER_EMBEDDED_FIGURE_ATTR = "data-grapher-src" export const GRAPHER_EMBEDDED_FIGURE_CONFIG_ATTR = "data-grapher-config" -export const GRAPHER_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR = - "data-grapher-view-config" +export const GRAPHER_CHART_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR = + "data-grapher-chart-view-config" export const GRAPHER_PAGE_BODY_CLASS = "StandaloneGrapherOrExplorerPage" export const GRAPHER_IS_IN_IFRAME_CLASS = "IsInIframe" diff --git a/packages/@ourworldindata/grapher/src/index.ts b/packages/@ourworldindata/grapher/src/index.ts index 8815ad4a84..554f3f38f9 100644 --- a/packages/@ourworldindata/grapher/src/index.ts +++ b/packages/@ourworldindata/grapher/src/index.ts @@ -10,7 +10,7 @@ export { ChartDimension } from "./chart/ChartDimension" export { GRAPHER_EMBEDDED_FIGURE_ATTR, GRAPHER_EMBEDDED_FIGURE_CONFIG_ATTR, - GRAPHER_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR, + GRAPHER_CHART_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR, GRAPHER_PAGE_BODY_CLASS, GRAPHER_IS_IN_IFRAME_CLASS, DEFAULT_GRAPHER_WIDTH, diff --git a/packages/@ourworldindata/types/src/gdocTypes/Gdoc.ts b/packages/@ourworldindata/types/src/gdocTypes/Gdoc.ts index 9f75af5e70..318c5d1e5b 100644 --- a/packages/@ourworldindata/types/src/gdocTypes/Gdoc.ts +++ b/packages/@ourworldindata/types/src/gdocTypes/Gdoc.ts @@ -55,7 +55,7 @@ export interface LinkedChart { } // An object containing metadata needed for embedded narrative charts -export interface NarrativeViewInfo { +export interface ChartViewInfo { name: string title: string chartConfigId: string @@ -281,7 +281,7 @@ export enum OwidGdocLinkType { Url = "url", Grapher = "grapher", Explorer = "explorer", - NarrativeChart = "narrative-chart", + ChartView = "chart-view", } export interface OwidGdocLinkJSON { diff --git a/packages/@ourworldindata/types/src/index.ts b/packages/@ourworldindata/types/src/index.ts index 9e94a05ee0..a8a3f80db5 100644 --- a/packages/@ourworldindata/types/src/index.ts +++ b/packages/@ourworldindata/types/src/index.ts @@ -332,7 +332,7 @@ export { type OwidGdocContent, type OwidGdocIndexItem, extractGdocIndexItem, - type NarrativeViewInfo, + type ChartViewInfo, } from "./gdocTypes/Gdoc.js" export { diff --git a/site/gdocs/OwidGdoc.tsx b/site/gdocs/OwidGdoc.tsx index f12ac4a038..f86302c674 100644 --- a/site/gdocs/OwidGdoc.tsx +++ b/site/gdocs/OwidGdoc.tsx @@ -13,7 +13,7 @@ import { OwidGdocMinimalPostInterface, OwidGdocHomepageMetadata, DbEnrichedLatestWork, - NarrativeViewInfo, + ChartViewInfo, } from "@ourworldindata/types" import { get, getOwidGdocFromJSON } from "@ourworldindata/utils" import { DebugProvider } from "./DebugContext.js" @@ -36,7 +36,7 @@ export type Attachments = { latestDataInsights?: LatestDataInsight[] homepageMetadata?: OwidGdocHomepageMetadata latestWorkLinks?: DbEnrichedLatestWork[] - narrativeViewsInfo?: Record ({ @@ -49,7 +49,7 @@ export const AttachmentsContext = createContext ({ latestDataInsights: [], homepageMetadata: {}, latestWorkLinks: [], - narrativeViewsInfo: {}, + linkedChartViews: {}, }) export const DocumentContext = createContext<{ isPreviewing: boolean }>({ @@ -134,7 +134,7 @@ export function OwidGdoc({ latestDataInsights: get(props, "latestDataInsights", []), homepageMetadata: get(props, "homepageMetadata", {}), latestWorkLinks: get(props, "latestWorkLinks", []), - narrativeViewsInfo: get(props, "narrativeViewsInfo", {}), + linkedChartViews: get(props, "linkedChartViews", {}), }} > diff --git a/site/gdocs/components/NarrativeChart.tsx b/site/gdocs/components/NarrativeChart.tsx index 7cb3311515..68d14e7be8 100644 --- a/site/gdocs/components/NarrativeChart.tsx +++ b/site/gdocs/components/NarrativeChart.tsx @@ -1,11 +1,12 @@ import React, { useContext, useRef } from "react" import { useEmbedChart } from "../../hooks.js" import { EnrichedBlockNarrativeChart } from "@ourworldindata/types" -import { renderSpans, useNarrativeViewsInfo } from "../utils.js" +import { renderSpans, useLinkedChartView } from "../utils.js" import cx from "classnames" import { GRAPHER_PREVIEW_CLASS } from "../../SiteConstants.js" import { BlockErrorFallback } from "./BlockErrorBoundary.js" import { DocumentContext } from "../OwidGdoc.js" +import { GRAPHER_CHART_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR } from "@ourworldindata/grapher" export default function NarrativeChart({ d, @@ -19,7 +20,7 @@ export default function NarrativeChart({ const refChartContainer = useRef (null) useEmbedChart(0, refChartContainer) - const viewMetadata = useNarrativeViewsInfo(d.name) + const viewMetadata = useLinkedChartView(d.name) const { isPreviewing } = useContext(DocumentContext) @@ -29,8 +30,8 @@ export default function NarrativeChart({ ) @@ -50,12 +51,15 @@ export default function NarrativeChart({ {/* diff --git a/site/gdocs/utils.tsx b/site/gdocs/utils.tsx index afb6af5813..550e26ac96 100644 --- a/site/gdocs/utils.tsx +++ b/site/gdocs/utils.tsx @@ -147,9 +147,9 @@ export function useDonors(): string[] | undefined { return donors } -export const useNarrativeViewsInfo = (name: string) => { - const { narrativeViewsInfo } = useContext(AttachmentsContext) - return narrativeViewsInfo?.[name] +export const useLinkedChartView = (name: string) => { + const { linkedChartViews } = useContext(AttachmentsContext) + return linkedChartViews?.[name] } const LinkedA = ({ span }: { span: SpanLink }): React.ReactElement => { diff --git a/site/multiembedder/MultiEmbedder.tsx b/site/multiembedder/MultiEmbedder.tsx index bf7bf2e7cc..675121e7bc 100644 --- a/site/multiembedder/MultiEmbedder.tsx +++ b/site/multiembedder/MultiEmbedder.tsx @@ -10,7 +10,7 @@ import { migrateSelectedEntityNamesParam, SelectionArray, migrateGrapherConfigToLatestVersion, - GRAPHER_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR, + GRAPHER_CHART_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR, } from "@ourworldindata/grapher" import { fetchText, @@ -22,7 +22,7 @@ import { MultiDimDataPageConfig, extractMultiDimChoicesFromQueryStr, fetchWithRetry, - NarrativeViewInfo, + ChartViewInfo, queryParamsToStr, } from "@ourworldindata/utils" import { action } from "mobx" @@ -47,7 +47,7 @@ import Bugsnag from "@bugsnag/js" import { embedDynamicCollectionGrapher } from "../collections/DynamicCollection.js" import { match } from "ts-pattern" -type EmbedType = "grapher" | "explorer" | "multiDim" | "grapherView" +type EmbedType = "grapher" | "explorer" | "multiDim" | "chartView" const figuresFromDOM = ( container: HTMLElement | Document = document, @@ -123,7 +123,7 @@ class MultiEmbedder { .concat( figuresFromDOM( container, - GRAPHER_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR + GRAPHER_CHART_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR ) ) @@ -272,12 +272,12 @@ class MultiEmbedder { embedUrl, }) } - async renderGrapherViewIntoFigure(figure: Element) { + async renderChartViewIntoFigure(figure: Element) { const viewConfigRaw = figure.getAttribute( - GRAPHER_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR + GRAPHER_CHART_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR ) if (!viewConfigRaw) return - const viewConfig: NarrativeViewInfo = JSON.parse(viewConfigRaw) + const viewConfig: ChartViewInfo = JSON.parse(viewConfigRaw) if (!viewConfig) return const configUrl = `${GRAPHER_DYNAMIC_CONFIG_URL}/by-uuid/${viewConfig.chartConfigId}.config.json` @@ -303,16 +303,16 @@ class MultiEmbedder { EXPLORER_EMBEDDED_FIGURE_SELECTOR ) const isMultiDim = figure.hasAttribute("data-is-multi-dim") - const isGrapherView = figure.hasAttribute( - GRAPHER_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR + const isChartView = figure.hasAttribute( + GRAPHER_CHART_VIEW_EMBEDDED_FIGURE_CONFIG_ATTR ) const embedType: EmbedType = isExplorer ? "explorer" : isMultiDim ? "multiDim" - : isGrapherView - ? "grapherView" + : isChartView + ? "chartView" : "grapher" const hasPreview = isExplorer ? false : !!figure.querySelector("img") @@ -328,7 +328,7 @@ class MultiEmbedder { await match(embedType) .with("explorer", () => this.renderExplorerIntoFigure(figure)) .with("multiDim", () => this.renderMultiDimIntoFigure(figure)) - .with("grapherView", () => this.renderGrapherViewIntoFigure(figure)) + .with("chartView", () => this.renderChartViewIntoFigure(figure)) .with("grapher", () => this.renderGrapherIntoFigure(figure)) .exhaustive() }