@buildcanada/charts 0.1.0

package/src/grapher/core/grapher.entry.ts

@@ -0,0 +1,5 @@
+import "./grapher.scss"
+
+import { Grapher } from "./Grapher"
+declare let window: any
+window.Grapher = Grapher

package/src/grapher/core/grapher.scss

@@ -0,0 +1,257 @@
+@use "sass:color";
+
+@import "../../components/styles/colors.scss";
+@import "../../components/styles/variables.scss";
+@import "../../components/styles/typography.scss";
+@import "../../components/styles/util.scss";
+@import "../../components/styles/mixins.scss";
+
+// Note: These component styles are not included yet as they may need adaptation
+// @import "../../components/CodeSnippet/code-snippet.scss";
+@import "../../components/ExpandableToggle/ExpandableToggle.scss";
+
+@import "../../components/LabeledSwitch/LabeledSwitch.scss";
+// @import "../../components/IndicatorSources/IndicatorSources.scss";
+// @import "../../components/IndicatorProcessing/IndicatorProcessing.scss";
+
+@import "./typography.scss";
+
+// grapher frame
+$frame-color: $gray-10;
+
+// text
+$dark-text: $gray-80;
+$light-text: $gray-70;
+$active-text: $blue-90;
+
+// These should be between 0–100 in order to avoid conflicting with
+// site dropdowns, search overlays, etc.
+$zindex-chart: 1;
+$zindex-table: 1;
+$zindex-global-entity-select: 11;
+$zindex-Tooltip: 20;
+$zindex-modal: 30;
+
+$zindex-full-screen: 120;
+$zindex-controls-backdrop: 130;
+$zindex-controls-popup: 140;
+$zindex-controls-drawer: 150;
+
+// needed for .global-entity-control-container
+@mixin xxlg-down {
+    @media only screen and (max-width: $xxlg) {
+        @content;
+    }
+}
+
+// All styles are scoped to GrapherComponent only, to prevent rule leaking
+// and low-specificity rules from the site CSS trumping these ones.
+// You can use sass's "&" syntax at the top level of one of these files
+// if you want to write a rule that requires .GrapherComponent to have a second class.
+// e.g. &.narrow is equivalent to .GrapherComponent.narrow
+.GrapherComponent {
+    @import "../controls/CommandPalette.scss";
+    @import "../controls/Controls.scss";
+    @import "../controls/SettingsMenu.scss";
+    @import "../controls/MapRegionDropdown.scss";
+    @import "../captionedChart/CaptionedChart.scss";
+    @import "../timeline/TimelineComponent.scss";
+    @import "../controls/ContentSwitchers.scss";
+    @import "../controls/ActionButtons.scss";
+    @import "../controls/ShareMenu.scss";
+    @import "../modal/Modal.scss";
+    @import "../modal/EmbedModal.scss";
+    @import "../modal/DownloadModal.scss";
+    @import "../entitySelector/EntitySelector.scss";
+    @import "../dataTable/DataTable.scss";
+    @import "../modal/SourcesModal.scss";
+    @import "../tooltip/Tooltip.scss";
+    @import "../mapCharts/MapTooltip.scss";
+    @import "../footer/Footer.scss";
+    @import "../header/Header.scss";
+    @import "../modal/SourcesKeyDataTable.scss";
+    @import "../modal/SourcesDescriptions.scss";
+    @import "../tabs/Tabs.scss";
+    @import "../tabs/TabsWithDropdown.scss";
+    @import "../slideInDrawer/SlideInDrawer.scss";
+    @import "../sidePanel/SidePanel.scss";
+    @import "../scatterCharts/NoDataSection.scss";
+    @import "../mapCharts/MapChart.scss";
+    @import "../controls/SearchField.scss";
+    @import "../controls/DataTableSearchField.scss";
+}
+
+// These rules are currently used elsewhere in the site. e.g. Explorers
+// so we can't scope them to be grapher-only
+@import "../controls/entityPicker/EntityPicker.scss";
+@import "../controls/globalEntitySelector/GlobalEntitySelector.scss";
+@import "../fullScreen/FullScreen.scss";
+@import "../../components/Checkbox.scss";
+@import "../../components/RadioButton.scss";
+@import "../../components/loadingIndicator/LoadingIndicator.scss";
+
+@import "../../components/closeButton/CloseButton.scss";
+@import "../../components/OverlayHeader.scss";
+
+@import "../controls/Dropdown.scss";
+@import "../controls/MapZoomDropdown.scss";
+@import "../controls/DataTableFilterDropdown.scss";
+
+.grapher_dark {
+    color: $dark-text;
+}
+
+.grapher_light {
+    color: $light-text;
+}
+
+.GrapherComponent,
+.GrapherComponent h2,
+.GrapherComponent p,
+.GrapherComponent ul,
+.GrapherComponent ol {
+    font-family: $sans-serif-font-stack;
+}
+
+.GrapherComponent {
+    display: inline-block;
+    text-align: left;
+
+    line-height: 1em;
+
+    background: white;
+    color: $gray-80;
+
+    position: relative;
+    container-type: size;
+    container-name: grapher;
+
+    border: 1px solid $frame-color;
+    z-index: $zindex-chart;
+
+    * {
+        box-sizing: border-box;
+    }
+
+    button {
+        background: none;
+    }
+
+    .clickable {
+        cursor: pointer;
+
+        a {
+            text-decoration: none;
+            &:visited {
+                color: initial;
+            }
+        }
+    }
+
+    input[type="checkbox"] {
+        cursor: pointer;
+    }
+
+    .DataTableContainer {
+        z-index: $zindex-table;
+    }
+
+    .CaptionedChartAndSidePanel {
+        display: flex;
+        height: 100%;
+    }
+
+    // customize css of the <CodeSnippet> component
+    .wp-code-snippet {
+        --code-snippet-border: #{$gray-20};
+        --code-snippet-background-light: #{$gray-5};
+        --code-snippet-text: #{$gray-70};
+        --code-snippet-button: #{$gray-80};
+        --code-snippet-button-hover: #{$gray-70};
+        --code-snippet-button-active: #{$gray-70};
+
+        margin-bottom: 0 !important;
+    }
+
+    &.GrapherComponentNarrow {
+        .wp-code-snippet {
+            padding: 16px;
+        }
+    }
+}
+
+.GrapherComponent.isStatic {
+    border: none;
+}
+
+.GrapherComponent.isExportingToSvgOrPng {
+    padding: 0 !important;
+}
+
+.Tooltip {
+    z-index: $zindex-Tooltip;
+}
+
+// white background tooltip for longer explanations
+// (the `--short` version has a little less padding)
+.tippy-box[data-theme="grapher-explanation"],
+.tippy-box[data-theme="grapher-explanation--short"] {
+    background: white;
+    color: $gray-80;
+    font: 400 14px/1.5 $sans-serif-font-stack;
+    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.15);
+
+    .tippy-arrow {
+        color: white;
+    }
+}
+.tippy-box[data-theme="grapher-explanation"] {
+    .tippy-content {
+        padding: 15px;
+    }
+}
+
+.tippy-box[data-theme="grapher-dark"] {
+    background-color: $gray-90;
+    color: white;
+    border-radius: 4px;
+    font-size: 12px;
+    line-height: 16px;
+    padding: 8px;
+
+    .tippy-content {
+        padding: 0;
+    }
+
+    .tippy-arrow {
+        color: $gray-90;
+    }
+}
+
+.markdown-text-wrap__line {
+    display: block;
+}
+
+.markdown-text-wrap {
+    a,
+    a:visited {
+        color: #666;
+        text-decoration: underline;
+    }
+    a:hover {
+        color: color.adjust(#666, $lightness: -10%);
+    }
+
+    // needed so DoD border-bottom doesn't clip
+    .markdown-text-wrap__line:last-child {
+        margin-bottom: 2px;
+    }
+
+    .dod-span {
+        @include dod-span;
+    }
+}
+
+.dod-container {
+    @include dod-container;
+}

package/src/grapher/core/loadGrapherTableHelpers.ts

@@ -0,0 +1,116 @@
+import * as _ from "lodash-es"
+import { OwidTable } from "../../core-table/index.js"
+import {
+    ArchiveContext,
+    OwidChartDimensionInterface,
+    OwidVariableDataMetadataDimensions,
+} from "../../utils/index.js"
+import { legacyToOwidTableAndDimensionsWithMandatorySlug } from "./LegacyToOwidTable.js"
+import {
+    loadVariablesDataSite,
+    loadVariableDataAndMetadata,
+} from "./loadVariable.js"
+import { toJS } from "mobx"
+
+export type FetchInputTableForConfigFn = (args: {
+    dimensions?: OwidChartDimensionInterface[]
+    selectedEntityColors?: { [entityName: string]: string | undefined }
+    dataApiUrl: string
+    archiveContext?: ArchiveContext
+    noCache?: boolean
+    loadMetadataOnly?: boolean
+}) => Promise<OwidTable | undefined>
+
+export const fetchInputTableForConfig: FetchInputTableForConfigFn = async (
+    args
+) => {
+    if (!args.dimensions || args.dimensions.length === 0) return undefined
+    const variables = args.dimensions.map((d) => d.variableId)
+    const variablesDataMap = await loadVariablesDataSite(
+        variables,
+        args.dataApiUrl,
+        args.archiveContext,
+        args.noCache,
+        args.loadMetadataOnly
+    )
+    const inputTable = legacyToOwidTableAndDimensionsWithMandatorySlug(
+        variablesDataMap,
+        args.dimensions,
+        args.selectedEntityColors
+    )
+
+    return inputTable
+}
+
+export function getCachingInputTableFetcher(
+    dataApiUrl: string,
+    archiveContext: ArchiveContext | undefined,
+    noCache?: boolean,
+    loadMetadataOnly?: boolean
+): (
+    dimensions: OwidChartDimensionInterface[],
+    selectedEntityColors:
+        | { [entityName: string]: string | undefined }
+        | undefined
+) => Promise<OwidTable | undefined> {
+    const cache: Map<number, OwidVariableDataMetadataDimensions> = new Map()
+    let previousDimensions: OwidChartDimensionInterface[] = []
+    let previousSelectedEntityColors:
+        | {
+              [entityName: string]: string | undefined
+          }
+        | undefined = undefined
+
+    return async (
+        dimensionsMobx: OwidChartDimensionInterface[],
+        selectedEntityColorsMobx:
+            | { [entityName: string]: string | undefined }
+            | undefined
+    ) => {
+        // Check if dimensions have changed
+        const dimensions = dimensionsMobx.map((x) => toJS(x)) // Convert MobX observable to plain object
+        const selectedEntityColors = toJS(selectedEntityColorsMobx)
+
+        if (
+            _.isEqual(previousDimensions, dimensions) &&
+            _.isEqual(previousSelectedEntityColors, selectedEntityColors)
+        ) {
+            return undefined // No changes in dimensions
+        }
+        previousDimensions = dimensions
+        previousSelectedEntityColors = selectedEntityColors
+
+        if (dimensions.length === 0) return undefined
+
+        const variables = dimensions.map((d) => d.variableId)
+        const variablesToFetch = variables.filter((v) => !cache.has(v))
+
+        if (variablesToFetch.length > 0) {
+            const fetchedData = await Promise.all(
+                variablesToFetch.map((variableId) =>
+                    loadVariableDataAndMetadata(variableId, dataApiUrl, {
+                        assetMap:
+                            archiveContext?.type === "archive-page"
+                                ? archiveContext.assets.runtime
+                                : undefined,
+                        noCache,
+                        loadMetadataOnly,
+                    })
+                )
+            )
+            fetchedData.forEach((data) => cache.set(data.metadata.id, data))
+        }
+
+        const variablesDataMap = new Map(
+            variables.map((v) => [v, cache.get(v)!])
+        )
+
+        const inputTable = legacyToOwidTableAndDimensionsWithMandatorySlug(
+            variablesDataMap,
+            dimensions,
+            selectedEntityColors
+        )
+
+        return inputTable
+    }
+}

package/src/grapher/core/loadVariable.ts

@@ -0,0 +1,104 @@
+import {
+    ArchiveContext,
+    AssetMap,
+    MultipleOwidVariableDataDimensionsMap,
+    OwidVariableDataMetadataDimensions,
+} from "../../types/index.js"
+import { fetchWithRetry, readFromAssetMap } from "../../utils/index.js"
+import urljoin from "url-join"
+
+export const getVariableDataRoute = (
+    dataApiUrl: string,
+    variableId: number,
+    { assetMap, noCache }: { assetMap?: AssetMap; noCache?: boolean } = {}
+): string => {
+    if (dataApiUrl.includes("v1/indicators")) {
+        const filename = `${variableId}.data.json`
+        const url = readFromAssetMap(assetMap, {
+            path: filename,
+            // fetching from Data API, e.g. https://api.ourworldindata.org/v1/indicators/123.data.json
+            fallback: urljoin(dataApiUrl, filename),
+        })
+        return noCache ? `${url}?nocache` : url
+    } else {
+        throw new Error(`dataApiUrl format not supported: ${dataApiUrl}`)
+    }
+}
+
+export const getVariableMetadataRoute = (
+    dataApiUrl: string,
+    variableId: number,
+    { assetMap, noCache }: { assetMap?: AssetMap; noCache?: boolean } = {}
+): string => {
+    if (dataApiUrl.includes("v1/indicators")) {
+        const filename = `${variableId}.metadata.json`
+        const url = readFromAssetMap(assetMap, {
+            path: filename,
+            // fetching from Data API, e.g. https://api.ourworldindata.org/v1/indicators/123.metadata.json
+            fallback: urljoin(dataApiUrl, filename),
+        })
+        return noCache ? `${url}?nocache` : url
+    } else {
+        throw new Error(`dataApiUrl format not supported: ${dataApiUrl}`)
+    }
+}
+
+export async function loadVariableDataAndMetadata(
+    variableId: number,
+    dataApiUrl: string,
+    options?: {
+        assetMap?: AssetMap
+        noCache?: boolean
+        loadMetadataOnly?: boolean
+    }
+): Promise<OwidVariableDataMetadataDimensions> {
+    const metadataPromise = fetchWithRetry(
+        getVariableMetadataRoute(dataApiUrl, variableId, options)
+    )
+
+    if (options?.loadMetadataOnly) {
+        const metadataResponse = await metadataPromise
+        if (!metadataResponse.ok) throw new Error(metadataResponse.statusText)
+        const metadata = await metadataResponse.json()
+        // Return empty data when only metadata is requested
+        return { data: { values: [], entities: [], years: [] }, metadata }
+    }
+
+    const dataPromise = fetchWithRetry(
+        getVariableDataRoute(dataApiUrl, variableId, options)
+    )
+    const [dataResponse, metadataResponse] = await Promise.all([
+        dataPromise,
+        metadataPromise,
+    ])
+    if (!dataResponse.ok) throw new Error(dataResponse.statusText)
+    if (!metadataResponse.ok) throw new Error(metadataResponse.statusText)
+    const data = await dataResponse.json()
+    const metadata = await metadataResponse.json()
+    return { data, metadata }
+}
+
+export async function loadVariablesDataSite(
+    variableIds: number[],
+    dataApiUrl: string,
+    archiveContext: ArchiveContext | undefined,
+    noCache?: boolean,
+    loadMetadataOnly?: boolean
+): Promise<MultipleOwidVariableDataDimensionsMap> {
+    const loadVariableDataPromises = variableIds.map((variableId) =>
+        loadVariableDataAndMetadata(variableId, dataApiUrl, {
+            assetMap:
+                archiveContext?.type === "archive-page"
+                    ? archiveContext.assets.runtime
+                    : undefined,
+            noCache,
+            loadMetadataOnly,
+        })
+    )
+    const variablesData: OwidVariableDataMetadataDimensions[] =
+        await Promise.all(loadVariableDataPromises)
+    const variablesDataMap = new Map(
+        variablesData.map((data) => [data.metadata.id, data])
+    )
+    return variablesDataMap
+}

package/src/grapher/core/relatedQuestion.ts

@@ -0,0 +1,12 @@
+import { RelatedQuestionsConfig } from "../../types/index.js"
+
+export const getErrorMessageRelatedQuestionUrl = (
+    question: RelatedQuestionsConfig
+): string | undefined => {
+    return question.text
+        ? (!question.url && "Missing URL") ||
+              (!question.url.match(/^https?:\/\//) &&
+                  "URL should start with http(s)://") ||
+              undefined
+        : undefined
+}

package/src/grapher/core/typography.scss

@@ -0,0 +1,206 @@
+//
+// headings
+//
+
+@mixin grapher_h1-semibold {
+    display: block;
+    margin: 0;
+
+    font-family: $serif-font-stack;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 1.1667;
+    letter-spacing: 0;
+}
+
+@mixin grapher_h2-semibold {
+    display: block;
+    margin: 0;
+
+    font-family: $serif-font-stack;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 1.2;
+    letter-spacing: 0;
+}
+
+@mixin grapher_h3-semibold {
+    display: block;
+    margin: 0;
+
+    font-family: $serif-font-stack;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 1.1111;
+    letter-spacing: 0;
+}
+
+.grapher_h3-semibold {
+    @include grapher_h3-semibold;
+}
+
+@mixin grapher_h4-semibold {
+    display: block;
+    margin: 0;
+
+    font-family: $serif-font-stack;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.5;
+    letter-spacing: 0;
+}
+
+.grapher_h4-semibold {
+    @include grapher_h4-semibold;
+}
+
+@mixin grapher_h5-black-caps {
+    display: block;
+    margin: 0;
+
+    font-family: $sans-serif-font-stack;
+    font-size: 12px;
+    font-weight: 900;
+    line-height: 1.3333;
+    letter-spacing: 0.1em;
+
+    text-transform: uppercase;
+}
+
+.grapher_h5-black-caps {
+    @include grapher_h5-black-caps;
+}
+
+//
+// body
+//
+
+@mixin grapher_body-2-semibold {
+    display: block;
+    margin: 0;
+
+    font-family: $sans-serif-font-stack;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 1.5;
+    letter-spacing: 0;
+}
+
+.grapher_body-2-semibold {
+    @include grapher_body-2-semibold;
+}
+
+@mixin grapher_body-2-medium {
+    display: block;
+    margin: 0;
+
+    font-family: $sans-serif-font-stack;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.5;
+    letter-spacing: 0;
+}
+
+.grapher_body-2-medium {
+    @include grapher_body-2-medium;
+}
+
+@mixin grapher_body-3-medium {
+    display: block;
+    margin: 0;
+
+    font-family: $sans-serif-font-stack;
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 1.3846;
+    letter-spacing: 0;
+}
+
+.grapher_body-3-medium {
+    @include grapher_body-3-medium;
+}
+
+@mixin grapher_body-3-regular {
+    @include grapher_body-3-medium;
+    font-weight: 400;
+}
+
+.grapher_body-3-regular {
+    @include grapher_body-3-regular;
+}
+
+@mixin grapher_body-3-regular-italic {
+    @include grapher_body-3-regular;
+    font-style: italic;
+}
+
+.grapher_body-3-regular-italic {
+    @include grapher_body-3-regular-italic;
+}
+
+@mixin grapher_body-3-medium-italic {
+    @include grapher_body-3-medium;
+    font-style: italic;
+}
+
+.grapher_body-3-medium-italic {
+    @include grapher_body-3-medium-italic;
+}
+
+//
+// labels
+//
+
+@mixin grapher_label-1-medium {
+    display: block;
+    margin: 0;
+
+    font-family: $sans-serif-font-stack;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.2;
+    letter-spacing: 0;
+}
+
+.grapher_label-1-medium {
+    @include grapher_label-1-medium;
+}
+
+@mixin grapher_label-1-regular {
+    display: block;
+    margin: 0;
+
+    font-family: $sans-serif-font-stack;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.2;
+    letter-spacing: 0;
+}
+
+.grapher_label-1-regular {
+    @include grapher_label-1-regular;
+}
+
+@mixin grapher_label-2-regular {
+    display: block;
+    margin: 0;
+
+    font-family: $sans-serif-font-stack;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1.2;
+    letter-spacing: 0.01em;
+}
+
+.grapher_label-2-regular {
+    @include grapher_label-2-regular;
+}
+
+@mixin grapher_label-2-medium {
+    @include grapher_label-2-regular;
+    font-weight: 500;
+}
+
+.grapher_label-2-medium {
+    @include grapher_label-2-medium;
+}