@buildcanada/charts 0.3.5 → 0.3.7

package/src/grapher/core/GrapherState.tsx

@@ -2,13 +2,13 @@ import {
     MarkdownTextWrap,
     sumTextWrapHeights,
     reactRenderToStringClientOnly,
-} from "../../components/index.ts"
+} from "../../components/index.js"
 import {
     ChartsTable,
     BlankChartsTable,
     CoreColumn,
     ColumnTypeMap,
-} from "../../core-table/index.ts"
+} from "../../core-table/index.js"
 import {
     GrapherChartType,
     GRAPHER_CHART_TYPES,
@@ -63,7 +63,7 @@ import {
     GlobeRegionName,
     GrapherWindowType,
     MapRegionName,
-} from "../../types/index.ts"
+} from "../../types/index.js"
 import {
     objectWithPersistablesToObject,
     deleteRuntimeAndUnchangedProps,
@@ -99,7 +99,7 @@ import {
     checkIsIncomeGroup,
     checkHasMembers,
     sortNumeric,
-} from "../../utils/index.ts"
+} from "../../utils/index.js"
 import Cookies from "js-cookie"
 import * as _ from "lodash-es"
 import {
@@ -113,14 +113,14 @@ import {
 import React from "react"
 import * as R from "remeda"
 import { match } from "ts-pattern"
-import { AxisConfig } from "../axis/AxisConfig.ts"
+import { AxisConfig } from "../axis/AxisConfig.js"
 import {
     GrapherRasterizeFn,
     StaticChartRasterizer,
-} from "../captionedChart/StaticChartRasterizer.tsx"
-import { Chart } from "../chart/Chart.tsx"
-import { ChartDimension } from "../chart/ChartDimension.ts"
-import { ChartState } from "../chart/ChartInterface.ts"
+} from "../captionedChart/StaticChartRasterizer.js"
+import { Chart } from "../chart/Chart.js"
+import { ChartDimension } from "../chart/ChartDimension.js"
+import { ChartState } from "../chart/ChartInterface.js"
 import {
     isChartTypeName,
     isChartTab,
@@ -129,70 +129,70 @@ import {
     isValidTabConfigOption,
     mapChartTypeNameToTabConfigOption,
     mapTabConfigOptionToChartTypeName,
-} from "../chart/ChartTabs.ts"
-import { makeChartState } from "../chart/ChartTypeMap.tsx"
+} from "../chart/ChartTabs.js"
+import { makeChartState } from "../chart/ChartTypeMap.js"
 import {
     autoDetectSeriesStrategy,
     autoDetectYColumnSlugs,
-} from "../chart/ChartUtils.tsx"
-import { DimensionSlot } from "../chart/DimensionSlot.ts"
+} from "../chart/ChartUtils.js"
+import { DimensionSlot } from "../chart/DimensionSlot.js"
 import {
     GRAPHER_LIGHT_TEXT,
     GRAPHER_BACKGROUND_BEIGE,
     GRAPHER_BACKGROUND_DEFAULT,
-} from "../color/ColorConstants.ts"
-import { ColorScaleConfig } from "../color/ColorScaleConfig.ts"
-import { isValidDataTableFilter } from "../dataTable/DataTable.tsx"
-import { DataTableConfig } from "../dataTable/DataTableConstants.ts"
+} from "../color/ColorConstants.js"
+import { ColorScaleConfig } from "../color/ColorScaleConfig.js"
+import { isValidDataTableFilter } from "../dataTable/DataTable.js"
+import { DataTableConfig } from "../dataTable/DataTableConstants.js"
 import {
     type EntitySelectorState,
     EntitySelector,
-} from "../entitySelector/EntitySelector.tsx"
-import { FacetChart } from "../facet/FacetChart.tsx"
-import { FocusArray } from "../focus/FocusArray.ts"
-import { GlobeController } from "../mapCharts/GlobeController.ts"
+} from "../entitySelector/EntitySelector.js"
+import { FacetChart } from "../facet/FacetChart.js"
+import { FocusArray } from "../focus/FocusArray.js"
+import { GlobeController } from "../mapCharts/GlobeController.js"
 import {
     MAP_REGION_LABELS,
     MAP_REGION_NAMES,
-} from "../mapCharts/MapChartConstants.ts"
-import { MapConfig } from "../mapCharts/MapConfig.ts"
+} from "../mapCharts/MapChartConstants.js"
+import { MapConfig } from "../mapCharts/MapConfig.js"
 import {
     isValidMapRegionName,
     isOnTheMap,
     getCountriesByRegion,
-} from "../mapCharts/MapHelpers.ts"
-import { DownloadModalTabName } from "../modal/DownloadModal.tsx"
-import { SelectionArray } from "../selection/SelectionArray.ts"
-import { SlideShowController } from "../slideshowController/SlideShowController.tsx"
+} from "../mapCharts/MapHelpers.js"
+import { DownloadModalTabName } from "../modal/DownloadModal.js"
+import { SelectionArray } from "../selection/SelectionArray.js"
+import { SlideShowController } from "../slideshowController/SlideShowController.js"
 import {
     TimelineDragTarget,
     TimelineController,
-} from "../timeline/TimelineController.ts"
-import { TooltipManager } from "../tooltip/TooltipProps.ts"
+} from "../timeline/TimelineController.js"
+import { TooltipManager } from "../tooltip/TooltipProps.js"
 import {
     EntityRegionTypeGroup,
     groupEntityNamesByRegionType,
     EntityNamesByRegionType,
     isEntityRegionType,
-} from "./EntitiesByRegionType.ts"
+} from "./EntitiesByRegionType.js"
 import {
     getEntityNamesParam,
     getSelectedEntityNamesParam,
     getFocusedSeriesNamesParam,
-} from "./EntityUrlBuilder.ts"
+} from "./EntityUrlBuilder.js"
 import {
     MinimalNarrativeChartInfo,
     GrapherProgrammaticInterface,
     GrapherManager,
     DEFAULT_MS_PER_TICK,
-} from "./Grapher.tsx"
-import { GrapherAnalytics } from "./GrapherAnalytics.ts"
+} from "./Grapher.js"
+import { GrapherAnalytics } from "./GrapherAnalytics.js"
 import {
     type GrapherAnalyticsContext,
     type EntitySelectorEvent,
     type GrapherImageDownloadEvent,
     type GrapherInteractionEvent,
-} from "../../types/index.ts"
+} from "../../types/index.js"
 import {
     latestGrapherConfigSchema,
     DEFAULT_GRAPHER_ENTITY_TYPE,
@@ -211,10 +211,10 @@ import {
     STATIC_EXPORT_DETAIL_SPACING,
     DEFAULT_GRAPHER_BOUNDS_SQUARE,
     CHART_TYPES_THAT_SHOW_ALL_ENTITIES,
-} from "./GrapherConstants.ts"
-import { parseGlobeRotation, grapherObjectToQueryParams } from "./GrapherUrl.ts"
-import { legacyToCurrentGrapherQueryParams } from "./GrapherUrlMigrations.ts"
-import { getErrorMessageRelatedQuestionUrl } from "./relatedQuestion.ts"
+} from "./GrapherConstants.js"
+import { parseGlobeRotation, grapherObjectToQueryParams } from "./GrapherUrl.js"
+import { legacyToCurrentGrapherQueryParams } from "./GrapherUrlMigrations.js"
+import { getErrorMessageRelatedQuestionUrl } from "./relatedQuestion.js"
 
 export class GrapherState {
     $schema = latestGrapherConfigSchema

package/src/grapher/core/GrapherUrl.ts

@@ -3,18 +3,18 @@ import {
     GrapherInterface,
     GrapherQueryParams,
     TimeBoundValueStr,
-} from "../../types/index.ts"
+} from "../../types/index.js"
 import {
     generateFocusedSeriesNamesParam,
     generateSelectedEntityNamesParam,
-} from "./EntityUrlBuilder.ts"
+} from "./EntityUrlBuilder.js"
 import { match } from "ts-pattern"
-import { GrapherState } from "./GrapherState.tsx"
+import { GrapherState } from "./GrapherState.js"
 import * as R from "remeda"
 import {
     DEFAULT_GLOBE_ROTATION,
     DEFAULT_GLOBE_ZOOM,
-} from "../mapCharts/MapChartConstants.ts"
+} from "../mapCharts/MapChartConstants.js"
 
 // This function converts a (potentially partial) GrapherInterface to the query params this translates to.
 // This is helpful for when we have a patch config to a parent chart, and we want to know which query params we need to get the parent chart as close as possible to the patched child chart.

package/src/grapher/core/GrapherUrlMigrations.ts

@@ -3,8 +3,8 @@ import {
     Url,
     UrlMigration,
     performUrlMigrations,
-} from "../../utils/index.ts"
-import { migrateSelectedEntityNamesParam } from "./EntityUrlBuilder"
+} from "../../utils/index.js"
+import { migrateSelectedEntityNamesParam } from "./EntityUrlBuilder.js"
 
 export const grapherUrlMigrations: UrlMigration[] = [
     (url: Url): Url => {

package/src/grapher/core/GrapherUseHelpers.tsx

@@ -1,15 +1,15 @@
 import * as React from "react"
 
-import { Bounds } from "../../utils/index.ts"
+import { Bounds } from "../../utils/index.js"
 import { debounce } from "lodash-es"
-import { GrapherProgrammaticInterface } from "../index.ts"
-import { FetchingGrapher } from "./FetchingGrapher.tsx"
+import { GrapherProgrammaticInterface } from "../index.js"
+import { FetchingGrapher } from "./FetchingGrapher.js"
 import {
     ArchiveContext,
     VariableDataMetadataDimensions,
     VariableId,
-} from "../../types/index.ts"
-import { loadVariableDataAndMetadata } from "./loadVariable.ts"
+} from "../../types/index.js"
+import { loadVariableDataAndMetadata } from "./loadVariable.js"
 import { createRoot } from "react-dom/client"
 
 /**

package/src/grapher/core/LegacyToChartsTable.ts

@@ -13,12 +13,12 @@ import {
     ChartDimensionInterfaceWithMandatorySlug,
     ChartDimensionInterface,
     EntityName,
-} from "../../types/index.ts"
+} from "../../types/index.js"
 import {
     ChartsTable,
     ErrorValueTypes,
     makeKeyFn,
-} from "../../core-table/index.ts"
+} from "../../core-table/index.js"
 import {
     diffDateISOStringInDays,
     getYearFromISOStringAndDayOffset,
@@ -33,10 +33,10 @@ import {
     ColumnSlug,
     EPOCH_DATE,
     VariableType,
-} from "../../utils/index.ts"
-import { isContinentsVariableId } from "./GrapherConstants"
+} from "../../utils/index.js"
+import { isContinentsVariableId } from "./GrapherConstants.js"
 import * as R from "remeda"
-import { getDimensionColumnSlug } from "../chart/ChartDimension.ts"
+import { getDimensionColumnSlug } from "../chart/ChartDimension.js"
 
 export const legacyToChartsTableAndDimensionsWithMandatorySlug = (
     json: MultipleVariableDataDimensionsMap,

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

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

package/src/grapher/core/loadGrapherTableHelpers.ts

@@ -1,15 +1,15 @@
 import * as _ from "lodash-es"
-import { ChartsTable } from "../../core-table/index.ts"
+import { ChartsTable } from "../../core-table/index.js"
 import {
     ArchiveContext,
     ChartDimensionInterface,
     VariableDataMetadataDimensions,
-} from "../../utils/index.ts"
-import { legacyToChartsTableAndDimensionsWithMandatorySlug } from "./LegacyToChartsTable.ts"
+} from "../../utils/index.js"
+import { legacyToChartsTableAndDimensionsWithMandatorySlug } from "./LegacyToChartsTable.js"
 import {
     loadVariablesDataSite,
     loadVariableDataAndMetadata,
-} from "./loadVariable.ts"
+} from "./loadVariable.js"
 import { toJS } from "mobx"
 
 export type FetchInputTableForConfigFn = (args: {

package/src/grapher/core/loadVariable.ts

@@ -3,8 +3,8 @@ import {
     AssetMap,
     MultipleVariableDataDimensionsMap,
     VariableDataMetadataDimensions,
-} from "../../types/index.ts"
-import { fetchWithRetry, readFromAssetMap } from "../../utils/index.ts"
+} from "../../types/index.js"
+import { fetchWithRetry, readFromAssetMap } from "../../utils/index.js"
 import urljoin from "url-join"
 
 export const getVariableDataRoute = (

package/src/grapher/core/relatedQuestion.ts

@@ -1,4 +1,4 @@
-import { RelatedQuestionsConfig } from "../../types/index.ts"
+import { RelatedQuestionsConfig } from "../../types/index.js"
 
 export const getErrorMessageRelatedQuestionUrl = (
     question: RelatedQuestionsConfig

package/src/grapher/dataTable/DataTable.sample.ts

@@ -1,15 +1,15 @@
-import { DimensionProperty } from "../../utils/index.ts"
-import { GrapherState } from "../core/GrapherState"
+import { DimensionProperty } from "../../utils/index.js"
+import { GrapherState } from "../core/GrapherState.js"
 import {
     GRAPHER_TAB_CONFIG_OPTIONS,
     GrapherInterface,
-} from "../../types/index.ts"
+} from "../../types/index.js"
 import {
     TestMetadata,
     createTestDataset,
     fakeEntities,
-} from "../testData/TestData"
-import { legacyToChartsTableAndDimensionsWithMandatorySlug } from "../core/LegacyToChartsTable.ts"
+} from "../testData/TestData.js"
+import { legacyToChartsTableAndDimensionsWithMandatorySlug } from "../core/LegacyToChartsTable.js"
 
 export const childMortalityGrapher = (
     props: Partial<GrapherInterface> = {}

package/src/grapher/dataTable/DataTable.tsx

@@ -19,8 +19,8 @@ import {
     ChartsTableSlugs,
     VariableRoundingMode,
     VariableRow,
-} from "../../types/index.ts"
-import { ChartsTable, CoreColumn } from "../../core-table/index.ts"
+} from "../../types/index.js"
+import { ChartsTable, CoreColumn } from "../../core-table/index.js"
 import {
     valuesByEntityAtTimes,
     es6mapValues,
@@ -32,17 +32,17 @@ import {
     excludeUndefined,
     joinTitleFragments,
     FuzzySearch,
-} from "../../utils/index.ts"
-import { SelectionArray } from "../selection/SelectionArray"
+} from "../../utils/index.js"
+import { SelectionArray } from "../selection/SelectionArray.js"
 import {
     DEFAULT_GRAPHER_BOUNDS,
     DEFAULT_GRAPHER_ENTITY_TYPE,
     SVG_STYLE_PROPS,
-} from "../core/GrapherConstants"
+} from "../core/GrapherConstants.js"
 import * as R from "remeda"
-import { makeSelectionArray } from "../chart/ChartUtils"
-import { isEntityRegionType } from "../core/EntitiesByRegionType"
-import { NoDataModal } from "../noDataModal/NoDataModal"
+import { makeSelectionArray } from "../chart/ChartUtils.js"
+import { isEntityRegionType } from "../core/EntitiesByRegionType.js"
+import { NoDataModal } from "../noDataModal/NoDataModal.js"
 import {
     DataTableColumnKey,
     DisplayDataTableDimension,
@@ -66,8 +66,8 @@ import {
     COMMON_DATA_TABLE_FILTERS,
     DataTableFilter,
     SparklineKey,
-} from "./DataTableConstants"
-import { GRAY_30 } from "../color/ColorConstants"
+} from "./DataTableConstants.js"
+import { GRAY_30 } from "../color/ColorConstants.js"
 
 const ENTITY_SORT_INDEX = -1
 

package/src/grapher/dataTable/DataTableConstants.ts

@@ -1,4 +1,4 @@
-import { CoreColumn, ChartsTable } from "../../core-table/index.ts"
+import { CoreColumn, ChartsTable } from "../../core-table/index.js"
 import {
     ColumnSlug,
     EntityName,
@@ -6,13 +6,13 @@ import {
     VariableRow,
     SortOrder,
     Time,
-} from "../../types/index.ts"
+} from "../../types/index.js"
 import {
     EntityNamesByRegionType,
     EntityRegionType,
-} from "../core/EntitiesByRegionType"
-import { SelectionArray } from "../selection/SelectionArray"
-import { TimelineDragTarget } from "../timeline/TimelineController"
+} from "../core/EntitiesByRegionType.js"
+import { SelectionArray } from "../selection/SelectionArray.js"
+import { TimelineDragTarget } from "../timeline/TimelineController.js"
 
 // Grapher's rendered data table is organized into groups, where
 // each group corresponds to an indicator from the core table.

package/src/grapher/entitySelector/EntitySelector.tsx

@@ -29,24 +29,24 @@ import {
     Region,
     getRegionByName,
     makeSafeForCSS,
-} from "../../utils/index.ts"
+} from "../../utils/index.js"
 import {
     Checkbox,
     RadioButton,
     OverlayHeader,
-} from "../../components/index.ts"
+} from "../../components/index.js"
 import {
     faLocationArrow,
     faArrowRightArrowLeft,
     faFilter,
 } from "@fortawesome/free-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { SelectionArray } from "../selection/SelectionArray"
+import { SelectionArray } from "../selection/SelectionArray.js"
 import { Flipper, Flipped } from "react-flip-toolkit"
 import {
     combineHistoricalAndProjectionColumns,
     makeSelectionArray,
-} from "../chart/ChartUtils.tsx"
+} from "../chart/ChartUtils.js"
 import {
     DEFAULT_GRAPHER_ENTITY_TYPE,
     DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL,
@@ -54,10 +54,10 @@ import {
     GDP_PER_CAPITA_INDICATOR_ID_USED_IN_ENTITY_SELECTOR,
     isPopulationVariableETLPath,
     isWorldEntityName,
-} from "../core/GrapherConstants"
-import { CoreColumn, ChartsTable } from "../../core-table/index.ts"
-import { SortIcon } from "../controls/SortIcon"
-import { Dropdown } from "../controls/Dropdown"
+} from "../core/GrapherConstants.js"
+import { CoreColumn, ChartsTable } from "../../core-table/index.js"
+import { SortIcon } from "../controls/SortIcon.js"
+import { Dropdown } from "../controls/Dropdown.js"
 import { scaleLinear, type ScaleLinear } from "d3-scale"
 import {
     AdditionalGrapherDataFetchFn,
@@ -68,11 +68,11 @@ import {
     Time,
     ToleranceStrategy,
     type EntitySelectorEvent,
-} from "../../types/index.ts"
-import { buildVariableTable } from "../core/LegacyToChartsTable"
-import { DrawerContext } from "../slideInDrawer/SlideInDrawer.tsx"
+} from "../../types/index.js"
+import { buildVariableTable } from "../core/LegacyToChartsTable.js"
+import { DrawerContext } from "../slideInDrawer/SlideInDrawer.js"
 import * as R from "remeda"
-import { MapConfig } from "../mapCharts/MapConfig"
+import { MapConfig } from "../mapCharts/MapConfig.js"
 import { match } from "ts-pattern"
 import {
     entityRegionTypeLabels,
@@ -80,9 +80,9 @@ import {
     EntityRegionType,
     EntityRegionTypeGroup,
     isAggregateSource,
-} from "../core/EntitiesByRegionType"
-import { SearchField } from "../controls/SearchField"
-import { MAP_REGION_LABELS } from "../mapCharts/MapChartConstants.ts"
+} from "../core/EntitiesByRegionType.js"
+import { SearchField } from "../controls/SearchField.js"
+import { MAP_REGION_LABELS } from "../mapCharts/MapChartConstants.js"
 
 export type CoreColumnBySlug = Record<ColumnSlug, CoreColumn>
 

package/src/grapher/facet/FacetChart.tsx

@@ -15,13 +15,13 @@ import {
     makeIdForHumanConsumption,
     exposeInstanceOnWindow,
     SplitBoundsPadding,
-} from "../../utils/index.ts"
-import { shortenWithEllipsis } from "../../components/index.ts"
+} from "../../utils/index.js"
+import { shortenWithEllipsis } from "../../components/index.js"
 import { action, computed, makeObservable, observable } from "mobx"
 import {
     BASE_FONT_SIZE,
     DEFAULT_GRAPHER_BOUNDS,
-} from "../core/GrapherConstants"
+} from "../core/GrapherConstants.js"
 import {
     GRAPHER_CHART_TYPES,
     GrapherChartType,
@@ -31,44 +31,44 @@ import {
     SeriesStrategy,
     AxisConfigInterface,
     ChartErrorInfo,
-} from "../../types/index.ts"
-import { ChartComponent, makeChartInstance } from "../chart/ChartTypeMap"
-import { ChartManager } from "../chart/ChartManager"
-import { ChartInterface, ChartState } from "../chart/ChartInterface"
+} from "../../types/index.js"
+import { ChartComponent, makeChartInstance } from "../chart/ChartTypeMap.js"
+import { ChartManager } from "../chart/ChartManager.js"
+import { ChartInterface, ChartState } from "../chart/ChartInterface.js"
 import {
     calculateAspectRatio,
     getFacetGridPadding,
     getFontSize,
     getLabelPadding,
-} from "./FacetChartUtils"
+} from "./FacetChartUtils.js"
 import {
     FacetSeries,
     FacetChartProps,
     PlacedFacetSeries,
     FacetChartManager,
-} from "./FacetChartConstants"
-import { ChartsTable, CoreColumn } from "../../core-table/index.ts"
-import { autoDetectYColumnSlugs, makeSelectionArray } from "../chart/ChartUtils"
-import { SelectionArray } from "../selection/SelectionArray"
-import { AxisConfig } from "../axis/AxisConfig"
-import { HorizontalAxis, VerticalAxis } from "../axis/Axis"
+} from "./FacetChartConstants.js"
+import { ChartsTable, CoreColumn } from "../../core-table/index.js"
+import { autoDetectYColumnSlugs, makeSelectionArray } from "../chart/ChartUtils.js"
+import { SelectionArray } from "../selection/SelectionArray.js"
+import { AxisConfig } from "../axis/AxisConfig.js"
+import { HorizontalAxis, VerticalAxis } from "../axis/Axis.js"
 import {
     HorizontalCategoricalColorLegend,
     HorizontalColorLegend,
     HorizontalColorLegendManager,
     HorizontalNumericColorLegend,
-} from "../legend/HorizontalColorLegends"
+} from "../legend/HorizontalColorLegends.js"
 import {
     CategoricalBin,
     ColorScaleBin,
     NumericBin,
-} from "../color/ColorScaleBin"
-import { GRAPHER_DARK_TEXT } from "../color/ColorConstants"
-import { FocusArray } from "../focus/FocusArray"
+} from "../color/ColorScaleBin.js"
+import { GRAPHER_DARK_TEXT } from "../color/ColorConstants.js"
+import { FocusArray } from "../focus/FocusArray.js"
 import {
     LegendInteractionState,
     LegendStyleConfig,
-} from "../legend/LegendInteractionState"
+} from "../legend/LegendInteractionState.js"
 
 const SHARED_X_AXIS_MIN_FACET_COUNT = 12
 

package/src/grapher/facet/FacetChartConstants.ts

@@ -1,7 +1,7 @@
-import { ChartSeries } from "../chart/ChartInterface"
-import { ChartManager } from "../chart/ChartManager"
-import { GrapherChartType } from "../../types/index.ts"
-import { Bounds } from "../../utils/index.ts"
+import { ChartSeries } from "../chart/ChartInterface.js"
+import { ChartManager } from "../chart/ChartManager.js"
+import { GrapherChartType } from "../../types/index.js"
+import { Bounds } from "../../utils/index.js"
 
 export interface FacetChartManager extends ChartManager {
     canSelectMultipleEntities?: boolean

package/src/grapher/facet/FacetChartUtils.ts

@@ -1,4 +1,4 @@
-import { BASE_FONT_SIZE, GRAPHER_FONT_SCALE_10 } from "../core/GrapherConstants"
+import { BASE_FONT_SIZE, GRAPHER_FONT_SCALE_10 } from "../core/GrapherConstants.js"
 
 // not sure if we want to do something more sophisticated
 export const getFontSize = (

package/src/grapher/facet/FacetMap.tsx

@@ -8,59 +8,59 @@ import {
     makeIdForHumanConsumption,
     exposeInstanceOnWindow,
     SplitBoundsPadding,
-} from "../../utils/index.ts"
+} from "../../utils/index.js"
 import { action, computed, makeObservable, observable } from "mobx"
 import {
     BASE_FONT_SIZE,
     DEFAULT_GRAPHER_BOUNDS,
     GRAPHER_FONT_SCALE_18,
-} from "../core/GrapherConstants"
+} from "../core/GrapherConstants.js"
 import {
     ChartErrorInfo,
     GRAPHER_MAP_TYPE,
     GrapherInteractionEvent,
     MapRegionName,
     Time,
-} from "../../types/index.ts"
+} from "../../types/index.js"
 import {
     calculateAspectRatio,
     getFacetGridPadding,
     getLabelPadding as getFacetLabelPadding,
-} from "./FacetChartUtils"
+} from "./FacetChartUtils.js"
 import {
     FacetMapManager,
     MapFacetSeries,
     FacetMapProps,
     PlacedMapFacetSeries,
-} from "./FacetMapConstants"
-import { ChartsTable } from "../../core-table/index.ts"
+} from "./FacetMapConstants.js"
+import { ChartsTable } from "../../core-table/index.js"
 import {
     HorizontalCategoricalColorLegend,
     HorizontalColorLegendManager,
     HorizontalNumericColorLegend,
-} from "../legend/HorizontalColorLegends"
-import { CategoricalBin, ColorScaleBin } from "../color/ColorScaleBin"
-import { GRAPHER_DARK_TEXT, GRAY_30 } from "../color/ColorConstants"
+} from "../legend/HorizontalColorLegends.js"
+import { CategoricalBin, ColorScaleBin } from "../color/ColorScaleBin.js"
+import { GRAPHER_DARK_TEXT, GRAY_30 } from "../color/ColorConstants.js"
 import {
     LegendInteractionState,
     LegendStyleConfig,
-} from "../legend/LegendInteractionState"
+} from "../legend/LegendInteractionState.js"
 import {
     MAP_LEGEND_MAX_WIDTH_RATIO,
     MapChart,
     PADDING_BELOW_MAP_LEGEND,
     PADDING_BETWEEN_MAP_AND_LEGEND,
     PADDING_BETWEEN_MAP_LEGENDS,
-} from "../mapCharts/MapChart"
-import { ChartComponent, makeChartInstance } from "../chart/ChartTypeMap"
+} from "../mapCharts/MapChart.js"
+import { ChartComponent, makeChartInstance } from "../chart/ChartTypeMap.js"
 import {
     MAP_VIEWPORT_FACETED_WORLD,
     MAP_VIEWPORTS,
     MapChartManager,
     MapViewport,
-} from "../mapCharts/MapChartConstants"
-import { ChartState } from "../chart/ChartInterface.ts"
-import { MapConfig } from "../mapCharts/MapConfig"
+} from "../mapCharts/MapChartConstants.js"
+import { ChartState } from "../chart/ChartInterface.js"
+import { MapConfig } from "../mapCharts/MapConfig.js"
 
 @observer
 export class FacetMap

package/src/grapher/facet/FacetMapConstants.ts

@@ -1,7 +1,7 @@
-import { ChartSeries } from "../chart/ChartInterface"
-import { Bounds, GrapherAnalyticsContext } from "../../utils/index.ts"
-import { MapChartManager } from "../mapCharts/MapChartConstants"
-import { GrapherAnalytics } from "../core/GrapherAnalytics"
+import { ChartSeries } from "../chart/ChartInterface.js"
+import { Bounds, GrapherAnalyticsContext } from "../../utils/index.js"
+import { MapChartManager } from "../mapCharts/MapChartConstants.js"
+import { GrapherAnalytics } from "../core/GrapherAnalytics.js"
 
 export interface FacetMapManager extends MapChartManager {
     analytics?: GrapherAnalytics