@buildcanada/charts 0.3.5 → 0.3.7

package/src/grapher/scatterCharts/ScatterSizeLegend.tsx

@@ -2,32 +2,32 @@ import * as React from "react"
 import * as R from "remeda"
 import { computed, makeObservable } from "mobx"
 import { scaleLinear, ScaleLinear } from "d3-scale"
-import { TextWrap, Halo } from "../../components/index.ts"
+import { TextWrap, Halo } from "../../components/index.js"
 import {
     Color,
     makeIdForHumanConsumption,
     VariableRoundingMode,
-} from "../../utils/index.ts"
+} from "../../utils/index.js"
 import {
     BASE_FONT_SIZE,
     GRAPHER_FONT_SCALE_10,
     GRAPHER_FONT_SCALE_11,
     GRAPHER_TEXT_OUTLINE_FACTOR,
-} from "../core/GrapherConstants"
-import { CoreColumn } from "../../core-table/index.ts"
+} from "../core/GrapherConstants.js"
+import { CoreColumn } from "../../core-table/index.js"
 import {
     ScatterSeries,
     SCATTER_POINT_MAX_RADIUS,
     SCATTER_POINT_OPACITY,
     SCATTER_POINT_STROKE_WIDTH,
     SCATTER_POINT_DEFAULT_RADIUS,
-} from "./ScatterPlotChartConstants"
-import { darkenColorForText } from "../color/ColorUtils"
+} from "./ScatterPlotChartConstants.js"
+import { darkenColorForText } from "../color/ColorUtils.js"
 import {
     GRAPHER_BACKGROUND_DEFAULT,
     GRAPHER_DARK_TEXT,
     GRAPHER_LIGHT_TEXT,
-} from "../color/ColorConstants"
+} from "../color/ColorConstants.js"
 
 export interface ScatterSizeLegendManager {
     sidebarWidth: number

package/src/grapher/scatterCharts/ScatterUtils.ts

@@ -5,7 +5,7 @@ import {
     ColumnSlug,
     PointVector,
     ValueRange,
-} from "../../utils/index.ts"
+} from "../../utils/index.js"
 import {
     SCATTER_LABEL_FONT_SIZE_FACTOR_WHEN_HIDDEN_LINES,
     SCATTER_LINE_DEFAULT_WIDTH,
@@ -15,10 +15,10 @@ import {
     ScatterLabel,
     ScatterRenderPoint,
     ScatterRenderSeries,
-} from "./ScatterPlotChartConstants"
-import { BASE_FONT_SIZE } from "../core/GrapherConstants.ts"
-import { ScatterPlotChartState } from "./ScatterPlotChartState"
-import { ChartsTable } from "../../core-table/index.ts"
+} from "./ScatterPlotChartConstants.js"
+import { BASE_FONT_SIZE } from "../core/GrapherConstants.js"
+import { ScatterPlotChartState } from "./ScatterPlotChartState.js"
+import { ChartsTable } from "../../core-table/index.js"
 
 export const labelPriority = (label: ScatterLabel): number => {
     let priority = label.fontSize

package/src/grapher/schema/defaultGrapherConfig.ts

@@ -2,7 +2,7 @@
 
 // GENERATED BY devTools/schema/generate-default-object-from-schema.ts
 
-import { GrapherInterface } from "../../types/index.ts"
+import { GrapherInterface } from "../../types/index.js"
 
 export const latestSchemaVersion = "009" as const
 export const outdatedSchemaVersions = [

package/src/grapher/schema/migrations/helpers.ts

@@ -1,7 +1,7 @@
 import {
     latestSchemaVersion,
     outdatedSchemaVersions,
-} from "../defaultGrapherConfig"
+} from "../defaultGrapherConfig.js"
 
 const allSchemaVersions = [...outdatedSchemaVersions, latestSchemaVersion]
 

package/src/grapher/schema/migrations/migrate.ts

@@ -1,7 +1,7 @@
 import * as _ from "lodash-es"
-import { GrapherInterface } from "../../../types/index.ts"
+import { GrapherInterface } from "../../../types/index.js"
 
-import { defaultGrapherConfig } from "../defaultGrapherConfig"
+import { defaultGrapherConfig } from "../defaultGrapherConfig.js"
 import {
     getSchemaVersion,
     hasValidSchema,
@@ -9,8 +9,8 @@ import {
     hasOutdatedSchema,
     type AnyConfig,
     type AnyConfigWithValidSchema,
-} from "./helpers"
-import { runMigration } from "./migrations"
+} from "./helpers.js"
+import { runMigration } from "./migrations.js"
 
 const recursivelyApplyMigrations = (
     config: AnyConfigWithValidSchema

package/src/grapher/schema/migrations/migrations.ts

@@ -14,8 +14,8 @@ import {
     createSchemaForVersion,
     getSchemaVersion,
     isLatestVersion,
-} from "./helpers"
-import { GRAPHER_CHART_TYPES } from "../../../types/index.ts"
+} from "./helpers.js"
+import { GRAPHER_CHART_TYPES } from "../../../types/index.js"
 
 // see # legacy commit 26f2a0d1790c71bdda7e12f284ca552945d2f6ef
 const migrateFrom001To002 = (

package/src/grapher/selection/MapSelectionArray.ts

@@ -1,5 +1,5 @@
 import { computed, makeObservable } from "mobx"
-import { SelectionArray } from "./SelectionArray"
+import { SelectionArray } from "./SelectionArray.js"
 import {
     Aggregate,
     checkHasMembers,
@@ -12,7 +12,7 @@ import {
     getRegionByName,
     IncomeGroup,
     Region,
-} from "../../utils/index.ts"
+} from "../../utils/index.js"
 import * as R from "remeda"
 
 export class MapSelectionArray extends SelectionArray {

package/src/grapher/selection/SelectionArray.ts

@@ -1,4 +1,4 @@
-import { EntityName } from "../../types/index.ts"
+import { EntityName } from "../../types/index.js"
 import { action, computed, observable, makeObservable } from "mobx"
 
 export class SelectionArray {

package/src/grapher/sidePanel/SidePanel.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
-import { Bounds } from "../../utils/index.ts"
-import { GRAPHER_SIDE_PANEL_CLASS } from "../core/GrapherConstants.ts"
+import { Bounds } from "../../utils/index.js"
+import { GRAPHER_SIDE_PANEL_CLASS } from "../core/GrapherConstants.js"
 
 export const SidePanel = ({
     bounds,

package/src/grapher/slideInDrawer/SlideInDrawer.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import cx from "classnames"
 import { computed, action, observable, makeObservable } from "mobx"
 import { observer } from "mobx-react"
-import { isTargetOutsideElement } from "../chart/ChartUtils"
+import { isTargetOutsideElement } from "../chart/ChartUtils.js"
 
 export const DrawerContext = React.createContext<{
     toggleDrawerVisibility?: () => void

package/src/grapher/slopeCharts/MarkX.tsx

@@ -2,8 +2,8 @@ import {
     dyFromAlign,
     makeIdForHumanConsumption,
     VerticalAlign,
-} from "../../utils/index.ts"
-import { GRAPHER_DARK_TEXT } from "../color/ColorConstants"
+} from "../../utils/index.js"
+import { GRAPHER_DARK_TEXT } from "../color/ColorConstants.js"
 
 export function MarkX({
     label,

package/src/grapher/slopeCharts/Slope.tsx

@@ -1,6 +1,6 @@
-import { makeIdForHumanConsumption, PointVector } from "../../utils/index.ts"
-import { GRAPHER_OPACITY_MUTE } from "../core/GrapherConstants"
-import { RenderSlopeChartSeries } from "./SlopeChartConstants"
+import { makeIdForHumanConsumption, PointVector } from "../../utils/index.js"
+import { GRAPHER_OPACITY_MUTE } from "../core/GrapherConstants.js"
+import { RenderSlopeChartSeries } from "./SlopeChartConstants.js"
 
 interface SlopeProps {
     series: RenderSlopeChartSeries

package/src/grapher/slopeCharts/SlopeChart.tsx

@@ -13,17 +13,17 @@ import {
     isTouchDevice,
     domainExtent,
     calculateTrendDirection,
-} from "../../utils/index.ts"
+} from "../../utils/index.js"
 import { observable, computed, action, makeObservable } from "mobx"
 import { observer } from "mobx-react"
-import { NoDataModal } from "../noDataModal/NoDataModal"
+import { NoDataModal } from "../noDataModal/NoDataModal.js"
 import {
     BASE_FONT_SIZE,
     DEFAULT_GRAPHER_BOUNDS,
     GRAPHER_FONT_SCALE_11,
     GRAPHER_FONT_SCALE_12,
     GRAPHER_TEXT_OUTLINE_FACTOR,
-} from "../core/GrapherConstants"
+} from "../core/GrapherConstants.js"
 import {
     SeriesName,
     MissingDataStrategy,
@@ -31,8 +31,8 @@ import {
     SeriesStrategy,
     VerticalAlign,
     HorizontalAlign,
-} from "../../types/index.ts"
-import { ChartInterface } from "../chart/ChartInterface"
+} from "../../types/index.js"
+import { ChartInterface } from "../chart/ChartInterface.js"
 import { scaleLinear, ScaleLinear } from "d3-scale"
 import { select, type BaseType, type Selection } from "d3-selection"
 import {
@@ -41,14 +41,14 @@ import {
     RenderSlopeChartSeries,
     SlopeChartSeries,
     SlopeChartManager,
-} from "./SlopeChartConstants"
-import { CoreColumn } from "../../core-table/index.ts"
-import { getHoverStateForSeries } from "../chart/ChartUtils"
-import { VerticalAxis } from "../axis/Axis"
-import { VerticalAxisZeroLine } from "../axis/AxisViews"
-import { NoDataSection } from "../scatterCharts/NoDataSection"
-
-import { LineLegend, LineLegendProps } from "../lineLegend/LineLegend"
+} from "./SlopeChartConstants.js"
+import { CoreColumn } from "../../core-table/index.js"
+import { getHoverStateForSeries } from "../chart/ChartUtils.js"
+import { VerticalAxis } from "../axis/Axis.js"
+import { VerticalAxisZeroLine } from "../axis/AxisViews.js"
+import { NoDataSection } from "../scatterCharts/NoDataSection.js"
+
+import { LineLegend, LineLegendProps } from "../lineLegend/LineLegend.js"
 import {
     formatTooltipRangeValues,
     makeTooltipRoundingNotice,
@@ -56,30 +56,30 @@ import {
     Tooltip,
     TooltipState,
     TooltipValueRange,
-} from "../tooltip/Tooltip"
-import { TooltipFooterIcon } from "../tooltip/TooltipProps"
+} from "../tooltip/Tooltip.js"
+import { TooltipFooterIcon } from "../tooltip/TooltipProps.js"
 
-import { Halo } from "../../components/index.ts"
-import { HorizontalColorLegendManager } from "../legend/HorizontalColorLegends"
-import { CategoricalBin } from "../color/ColorScaleBin"
+import { Halo } from "../../components/index.js"
+import { HorizontalColorLegendManager } from "../legend/HorizontalColorLegends.js"
+import { CategoricalBin } from "../color/ColorScaleBin.js"
 import {
     GRAPHER_BACKGROUND_DEFAULT,
     GRAPHER_DARK_TEXT,
-} from "../color/ColorConstants"
-import { FocusArray } from "../focus/FocusArray"
-import { LineLabelSeries } from "../lineLegend/LineLegendTypes"
-import { SlopeChartState } from "./SlopeChartState"
-import { AxisConfig, AxisManager } from "../axis/AxisConfig"
-import { ChartComponentProps } from "../chart/ChartTypeMap.tsx"
-import { InteractionState } from "../interaction/InteractionState"
+} from "../color/ColorConstants.js"
+import { FocusArray } from "../focus/FocusArray.js"
+import { LineLabelSeries } from "../lineLegend/LineLegendTypes.js"
+import { SlopeChartState } from "./SlopeChartState.js"
+import { AxisConfig, AxisManager } from "../axis/AxisConfig.js"
+import { ChartComponentProps } from "../chart/ChartTypeMap.js"
+import { InteractionState } from "../interaction/InteractionState.js"
 import {
     getYAxisConfigDefaults,
     toPlacedSlopeChartSeries,
     toRenderSlopeChartSeries,
-} from "./SlopeChartHelpers"
-import { Slope } from "./Slope"
-import { MarkX } from "./MarkX"
-import { CATEGORICAL_LEGEND_STYLE } from "../lineCharts/LineChartConstants"
+} from "./SlopeChartHelpers.js"
+import { Slope } from "./Slope.js"
+import { MarkX } from "./MarkX.js"
+import { CATEGORICAL_LEGEND_STYLE } from "../lineCharts/LineChartConstants.js"
 
 type SVGMouseOrTouchEvent =
     | React.MouseEvent<SVGGElement>

package/src/grapher/slopeCharts/SlopeChartConstants.ts

@@ -1,9 +1,9 @@
-import { PartialBy, PointVector } from "../../utils/index.ts"
-import { EntityName, VariableRow } from "../../types/index.ts"
-import { ChartSeries } from "../chart/ChartInterface"
-import { CoreColumn } from "../../core-table/index.ts"
-import { ChartManager } from "../chart/ChartManager"
-import { InteractionState } from "../interaction/InteractionState"
+import { PartialBy, PointVector } from "../../utils/index.js"
+import { EntityName, VariableRow } from "../../types/index.js"
+import { ChartSeries } from "../chart/ChartInterface.js"
+import { CoreColumn } from "../../core-table/index.js"
+import { ChartManager } from "../chart/ChartManager.js"
+import { InteractionState } from "../interaction/InteractionState.js"
 
 export interface SlopeChartManager extends ChartManager {
     canSelectMultipleEntities?: boolean // used to pick an appropriate series name

package/src/grapher/slopeCharts/SlopeChartHelpers.ts

@@ -4,17 +4,17 @@ import {
     PointVector,
     ScaleType,
     SeriesName,
-} from "../../utils/index.ts"
-import { VerticalAxis } from "../axis/Axis"
+} from "../../utils/index.js"
+import { VerticalAxis } from "../axis/Axis.js"
 import {
     PlacedSlopeChartSeries,
     RenderSlopeChartSeries,
     SlopeChartSeries,
-} from "./SlopeChartConstants"
+} from "./SlopeChartConstants.js"
 import {
     byHoverThenFocusState,
     getHoverStateForSeries,
-} from "../chart/ChartUtils"
+} from "../chart/ChartUtils.js"
 
 export function getYAxisConfigDefaults(
     config?: AxisConfigInterface

package/src/grapher/slopeCharts/SlopeChartState.ts

@@ -1,13 +1,13 @@
 import { computed, makeObservable } from "mobx"
-import { ChartState } from "../chart/ChartInterface"
+import { ChartState } from "../chart/ChartInterface.js"
 import {
     SlopeChartManager,
     RawSlopeChartSeries,
     SlopeChartSeries,
-} from "./SlopeChartConstants"
-import { ChartsTable, CoreColumn } from "../../core-table/index.ts"
-import { SelectionArray } from "../selection/SelectionArray"
-import { FocusArray } from "../focus/FocusArray"
+} from "./SlopeChartConstants.js"
+import { ChartsTable, CoreColumn } from "../../core-table/index.js"
+import { SelectionArray } from "../selection/SelectionArray.js"
+import { FocusArray } from "../focus/FocusArray.js"
 import {
     ColumnSlug,
     ScaleType,
@@ -18,17 +18,17 @@ import {
     EntityName,
     ColorSchemeName,
     ChartErrorInfo,
-} from "../../types/index.ts"
+} from "../../types/index.js"
 import {
     autoDetectSeriesStrategy,
     autoDetectYColumnSlugs,
     getDefaultFailMessage,
     getShortNameForEntity,
     makeSelectionArray,
-} from "../chart/ChartUtils"
-import { ColorScheme } from "../color/ColorScheme"
-import { ColorSchemes } from "../color/ColorSchemes"
-import { CategoricalColorAssigner } from "../color/CategoricalColorAssigner"
+} from "../chart/ChartUtils.js"
+import { ColorScheme } from "../color/ColorScheme.js"
+import { ColorSchemes } from "../color/ColorSchemes.js"
+import { CategoricalColorAssigner } from "../color/CategoricalColorAssigner.js"
 import {
     AnnotationsMap,
     getAnnotationsForSeries,
@@ -36,10 +36,10 @@ import {
     getColorKey,
     getDisplayName,
     getSeriesName,
-} from "../lineCharts/LineChartHelpers"
-import { domainExtent } from "../../utils/index.ts"
-import { AxisConfig } from "../axis/AxisConfig"
-import { VerticalAxis } from "../axis/Axis"
+} from "../lineCharts/LineChartHelpers.js"
+import { domainExtent } from "../../utils/index.js"
+import { AxisConfig } from "../axis/AxisConfig.js"
+import { VerticalAxis } from "../axis/Axis.js"
 
 export class SlopeChartState implements ChartState {
     manager: SlopeChartManager

package/src/grapher/slopeCharts/SlopeChartThumbnail.tsx

@@ -3,36 +3,36 @@ import * as _ from "remeda"
 import { computed, makeObservable } from "mobx"
 import { observer } from "mobx-react"
 import { scaleLinear, ScaleLinear } from "d3-scale"
-import { ChartInterface } from "../chart/ChartInterface"
-import { SlopeChartState } from "./SlopeChartState.ts"
-import { type SlopeChartProps } from "./SlopeChart.tsx"
+import { ChartInterface } from "../chart/ChartInterface.js"
+import { SlopeChartState } from "./SlopeChartState.js"
+import { type SlopeChartProps } from "./SlopeChart.js"
 import {
     PlacedSlopeChartSeries,
     RenderSlopeChartSeries,
     SlopeChartManager,
     SlopeChartSeries,
-} from "./SlopeChartConstants"
+} from "./SlopeChartConstants.js"
 import {
     getYAxisConfigDefaults,
     toPlacedSlopeChartSeries,
     toRenderSlopeChartSeries,
-} from "./SlopeChartHelpers"
-import { AxisConfig, AxisManager } from "../axis/AxisConfig"
+} from "./SlopeChartHelpers.js"
+import { AxisConfig, AxisManager } from "../axis/AxisConfig.js"
 import {
     BASE_FONT_SIZE,
     DEFAULT_GRAPHER_BOUNDS,
     GRAPHER_FONT_SCALE_12,
-} from "../core/GrapherConstants"
-import { Bounds, SeriesName } from "../../utils/index.ts"
-import { VerticalAxis } from "../axis/Axis"
-import { Slope } from "./Slope"
+} from "../core/GrapherConstants.js"
+import { Bounds, SeriesName } from "../../utils/index.js"
+import { VerticalAxis } from "../axis/Axis.js"
+import { Slope } from "./Slope.js"
 import {
     InitialVerticalLabelsSeries,
     VerticalLabelsState,
-} from "../verticalLabels/VerticalLabelsState"
-import { VerticalLabels } from "../verticalLabels/VerticalLabels"
-import { MarkX } from "./MarkX"
-import { NoDataModal } from "../noDataModal/NoDataModal"
+} from "../verticalLabels/VerticalLabelsState.js"
+import { VerticalLabels } from "../verticalLabels/VerticalLabels.js"
+import { MarkX } from "./MarkX.js"
+import { NoDataModal } from "../noDataModal/NoDataModal.js"
 
 const DOT_RADIUS = 3.5
 const SPACE_BETWEEN_DOT_AND_LABEL = 4

package/src/grapher/stackedCharts/AbstractStackedChartState.ts

@@ -1,7 +1,7 @@
 import * as _ from "lodash-es"
 import * as R from "remeda"
-import { ChartState } from "../chart/ChartInterface.ts"
-import { ChartManager } from "../chart/ChartManager.ts"
+import { ChartState } from "../chart/ChartInterface.js"
+import { ChartManager } from "../chart/ChartManager.js"
 import {
     ChartErrorInfo,
     ColorSchemeName,
@@ -9,35 +9,35 @@ import {
     MissingDataStrategy,
     SeriesName,
     SeriesStrategy,
-} from "../../types/index.ts"
+} from "../../types/index.js"
 import { computed, makeObservable } from "mobx"
 import {
     StackedPoint,
     StackedRawSeries,
     StackedSeries,
-} from "./StackedConstants.ts"
+} from "./StackedConstants.js"
 import {
     ChartsTable,
     CoreColumn,
     isNotErrorValueOrEmptyCell,
-} from "../../core-table/index.ts"
+} from "../../core-table/index.js"
 import {
     autoDetectSeriesStrategy,
     autoDetectYColumnSlugs,
     getDefaultFailMessage,
     getShortNameForEntity,
     makeSelectionArray,
-} from "../chart/ChartUtils.tsx"
-import { ColorSchemes } from "../color/ColorSchemes.ts"
-import { SelectionArray } from "../selection/SelectionArray.ts"
+} from "../chart/ChartUtils.js"
+import { ColorSchemes } from "../color/ColorSchemes.js"
+import { SelectionArray } from "../selection/SelectionArray.js"
 import {
     CategoricalColorAssigner,
     CategoricalColorMap,
-} from "../color/CategoricalColorAssigner.ts"
-import { BinaryMapPaletteE } from "../color/CustomSchemes.ts"
-import { FocusArray } from "../focus/FocusArray.ts"
-import { AxisConfig } from "../axis/AxisConfig.ts"
-import { HorizontalAxis, VerticalAxis } from "../axis/Axis.ts"
+} from "../color/CategoricalColorAssigner.js"
+import { BinaryMapPaletteE } from "../color/CustomSchemes.js"
+import { FocusArray } from "../focus/FocusArray.js"
+import { AxisConfig } from "../axis/AxisConfig.js"
+import { HorizontalAxis, VerticalAxis } from "../axis/Axis.js"
 
 // used in StackedBar charts to color negative and positive bars
 const POSITIVE_COLOR = BinaryMapPaletteE.colorSets[0][0] // orange

package/src/grapher/stackedCharts/MarimekkoBars.tsx

@@ -1,14 +1,14 @@
 // @ts-nocheck
 import * as _ from "lodash-es"
 import * as R from "remeda"
-import { Bounds, dyFromAlign, VerticalAlign } from "../../utils/index.ts"
-import { DualAxis } from "../axis/Axis"
-import { ColorScaleBin } from "../color/ColorScaleBin"
-import { TooltipState } from "../tooltip/Tooltip"
-import { MarimekkoBarsForOneEntity } from "./MarimekkoBarsForOneEntity"
-import { Item, PlacedItem } from "./MarimekkoChartConstants"
-import { GRAPHER_FONT_SCALE_12, Patterns } from "../core/GrapherConstants"
-import { SelectionArray } from "../selection/SelectionArray"
+import { Bounds, dyFromAlign, VerticalAlign } from "../../utils/index.js"
+import { DualAxis } from "../axis/Axis.js"
+import { ColorScaleBin } from "../color/ColorScaleBin.js"
+import { TooltipState } from "../tooltip/Tooltip.js"
+import { MarimekkoBarsForOneEntity } from "./MarimekkoBarsForOneEntity.js"
+import { Item, PlacedItem } from "./MarimekkoChartConstants.js"
+import { GRAPHER_FONT_SCALE_12, Patterns } from "../core/GrapherConstants.js"
+import { SelectionArray } from "../selection/SelectionArray.js"
 
 interface MarimekkoBarsProps {
     dualAxis: DualAxis

package/src/grapher/stackedCharts/MarimekkoBarsForOneEntity.tsx

@@ -1,13 +1,13 @@
-import { makeIdForHumanConsumption } from "../../utils/index.ts"
-import { DualAxis } from "../axis/Axis"
+import { makeIdForHumanConsumption } from "../../utils/index.js"
+import { DualAxis } from "../axis/Axis.js"
 import {
     Bar,
     BarShape,
     EntityColorData,
     MarimekkoBarProps,
-} from "./MarimekkoChartConstants"
-import { InteractionState } from "../interaction/InteractionState.ts"
-import { BAR_OPACITY } from "./StackedConstants"
+} from "./MarimekkoChartConstants.js"
+import { InteractionState } from "../interaction/InteractionState.js"
+import { BAR_OPACITY } from "./StackedConstants.js"
 
 interface MarimekkoBarsProps {
     entityName: string

package/src/grapher/stackedCharts/MarimekkoChart.tsx

@@ -13,49 +13,49 @@ import {
     makeIdForHumanConsumption,
     dyFromAlign,
     exposeInstanceOnWindow,
-} from "../../utils/index.ts"
+} from "../../utils/index.js"
 import { action, computed, makeObservable, observable } from "mobx"
 import { observer } from "mobx-react"
 import {
     BASE_FONT_SIZE,
     DEFAULT_GRAPHER_BOUNDS,
     GRAPHER_FONT_SCALE_12,
-} from "../core/GrapherConstants"
-import { DualAxisComponent } from "../axis/AxisViews"
-import { NoDataModal } from "../noDataModal/NoDataModal"
-import { AxisConfig, AxisManager } from "../axis/AxisConfig"
-import { ChartInterface } from "../chart/ChartInterface"
+} from "../core/GrapherConstants.js"
+import { DualAxisComponent } from "../axis/AxisViews.js"
+import { NoDataModal } from "../noDataModal/NoDataModal.js"
+import { AxisConfig, AxisManager } from "../axis/AxisConfig.js"
+import { ChartInterface } from "../chart/ChartInterface.js"
 import {
     EntityName,
     VerticalAlign,
     ColorScaleConfigInterface,
-} from "../../types/index.ts"
-import { ChartsTable, CoreColumn } from "../../core-table/index.ts"
-import { getShortNameForEntity } from "../chart/ChartUtils"
+} from "../../types/index.js"
+import { ChartsTable, CoreColumn } from "../../core-table/index.js"
+import { getShortNameForEntity } from "../chart/ChartUtils.js"
 import {
     LEGEND_STYLE_FOR_STACKED_CHARTS,
     StackedSeries,
-} from "./StackedConstants"
-import { TooltipFooterIcon } from "../tooltip/TooltipProps.ts"
+} from "./StackedConstants.js"
+import { TooltipFooterIcon } from "../tooltip/TooltipProps.js"
 import {
     Tooltip,
     TooltipValue,
     TooltipState,
     makeTooltipRoundingNotice,
     makeTooltipToleranceNotice,
-} from "../tooltip/Tooltip"
+} from "../tooltip/Tooltip.js"
 import {
     HorizontalCategoricalColorLegend,
     HorizontalColorLegendManager,
-} from "../legend/HorizontalColorLegends"
-import { CategoricalBin, ColorScaleBin } from "../color/ColorScaleBin"
+} from "../legend/HorizontalColorLegends.js"
+import { CategoricalBin, ColorScaleBin } from "../color/ColorScaleBin.js"
 import {
     LegendInteractionState,
     LegendStyleConfig,
-} from "../legend/LegendInteractionState"
-import { DualAxis, HorizontalAxis, VerticalAxis } from "../axis/Axis"
-import { ColorScale } from "../color/ColorScale"
-import { SelectionArray } from "../selection/SelectionArray"
+} from "../legend/LegendInteractionState.js"
+import { DualAxis, HorizontalAxis, VerticalAxis } from "../axis/Axis.js"
+import { ColorScale } from "../color/ColorScale.js"
+import { SelectionArray } from "../selection/SelectionArray.js"
 import {
     MarimekkoChartManager,
     Item,
@@ -65,11 +65,11 @@ import {
     LabelWithPlacement,
     LabelCandidateWithElement,
     Bar,
-} from "./MarimekkoChartConstants"
-import { MarimekkoChartState } from "./MarimekkoChartState"
-import { ChartComponentProps } from "../chart/ChartTypeMap.tsx"
-import { MarimekkoBars } from "./MarimekkoBars"
-import { toPlacedMarimekkoItems } from "./MarimekkoChartHelpers"
+} from "./MarimekkoChartConstants.js"
+import { MarimekkoChartState } from "./MarimekkoChartState.js"
+import { ChartComponentProps } from "../chart/ChartTypeMap.js"
+import { MarimekkoBars } from "./MarimekkoBars.js"
+import { toPlacedMarimekkoItems } from "./MarimekkoChartHelpers.js"
 
 const MARKER_MARGIN: number = 4
 const MARKER_AREA_HEIGHT: number = 25