feedback

Author: alexfauquette

packages/x-charts-premium/src/internals/plugins/useGeoProjection/useGeoProjection.ts

@@ -1,8 +1,52 @@
 'use client';
 import * as React from 'react';
-import { type ChartPlugin } from '@mui/x-charts/internals';
+import type { useGeoProjectionTypes, ChartPlugin } from '@mui/x-charts/internals';
+import {
+  geoAlbers,
+  geoAlbersUsa,
+  geoAzimuthalEqualArea,
+  geoAzimuthalEquidistant,
+  geoConicConformal,
+  geoConicEqualArea,
+  geoConicEquidistant,
+  geoEqualEarth,
+  geoEquirectangular,
+  geoGnomonic,
+  geoMercator,
+  geoNaturalEarth1,
+  geoOrthographic,
+  geoStereographic,
+  geoTransverseMercator,
+  type GeoProjection,
+} from '@mui/x-charts-vendor/d3-geo';
 import { type UseGeoProjectionSignature } from './useGeoProjection.types';
 
+const PROJECTION_FACTORIES: Record<
+  useGeoProjectionTypes.D3NamedProjection,
+  (() => GeoProjection) | undefined
+> = {
+  // Azimuthal projections (https://d3js.org/d3-geo/azimuthal)
+  azimuthalEqualArea: geoAzimuthalEqualArea,
+  azimuthalEquidistant: geoAzimuthalEquidistant,
+  gnomonic: geoGnomonic,
+  orthographic: geoOrthographic,
+  stereographic: geoStereographic,
+
+  // Conic projections (https://d3js.org/d3-geo/conic)
+  conicConformal: geoConicConformal,
+  conicEqualArea: geoConicEqualArea,
+  conicEquidistant: geoConicEquidistant,
+  albers: geoAlbers,
+  albersUsa: geoAlbersUsa, // Special composition for the USA with an edge case for Alaska and Hawaii.
+
+  // Cylindrical projections (https://d3js.org/d3-geo/cylindrical)
+  equirectangular: geoEquirectangular,
+  mercator: geoMercator,
+  transverseMercator: geoTransverseMercator,
+  equalEarth: geoEqualEarth,
+  naturalEarth1: geoNaturalEarth1,
+};
+
 export const useGeoProjection: ChartPlugin<UseGeoProjectionSignature> = ({ params, store }) => {
   const { geoData, projection, translate, rotate, scale } = params;
 
@@ -19,6 +63,7 @@ export const useGeoProjection: ChartPlugin<UseGeoProjectionSignature> = ({ param
       translate: translate ?? null,
       rotate: rotate ?? null,
       scale: scale ?? null,
+      factories: PROJECTION_FACTORIES,
     });
   }, [geoData, projection, translate, rotate, scale, store]);
 
@@ -42,5 +87,6 @@ useGeoProjection.getInitialState = (params) => ({
     translate: params.translate ?? null,
     rotate: params.rotate ?? null,
     scale: params.scale ?? null,
+    factories: PROJECTION_FACTORIES,
   },
 });

packages/x-charts/src/internals/plugins/featurePlugins/useGeoProjection/useGeoProjection.selectors.ts

@@ -1,20 +1,5 @@
 import { createSelector, createSelectorMemoized } from '@mui/x-internals/store';
 import {
-  geoAlbers,
-  geoAlbersUsa,
-  geoAzimuthalEqualArea,
-  geoAzimuthalEquidistant,
-  geoConicConformal,
-  geoConicEqualArea,
-  geoConicEquidistant,
-  geoEqualEarth,
-  geoEquirectangular,
-  geoGnomonic,
-  geoMercator,
-  geoNaturalEarth1,
-  geoOrthographic,
-  geoStereographic,
-  geoTransverseMercator,
   geoPath,
   type ExtendedFeatureCollection,
   type GeoProjection,
@@ -31,29 +16,6 @@ import { selectorChartDrawingArea } from '../../corePlugins/useChartDimensions/u
 import { type ChartState } from '../../models/chart';
 import { type GeoTooltipPosition } from '../../corePlugins/useChartSeriesConfig';
 
-const PROJECTION_FACTORIES: Record<D3NamedProjection, (() => GeoProjection) | undefined> = {
-  // Azimuthal projections (https://d3js.org/d3-geo/azimuthal)
-  azimuthalEqualArea: geoAzimuthalEqualArea,
-  azimuthalEquidistant: geoAzimuthalEquidistant,
-  gnomonic: geoGnomonic,
-  orthographic: geoOrthographic,
-  stereographic: geoStereographic,
-
-  // Conic projections (https://d3js.org/d3-geo/conic)
-  conicConformal: geoConicConformal,
-  conicEqualArea: geoConicEqualArea,
-  conicEquidistant: geoConicEquidistant,
-  albers: geoAlbers,
-  albersUsa: geoAlbersUsa, // Special composition for the USA with an edge case for Alaska and Hawaii.
-
-  // Cylindrical projections (https://d3js.org/d3-geo/cylindrical)
-  equirectangular: geoEquirectangular,
-  mercator: geoMercator,
-  transverseMercator: geoTransverseMercator,
-  equalEarth: geoEqualEarth,
-  naturalEarth1: geoNaturalEarth1,
-};
-
 const isConicProjection = (projection: GeoProjection): projection is GeoConicProjection => {
   return 'parallels' in projection && typeof projection.parallels === 'function';
 };
@@ -73,6 +35,12 @@ export const selectorChartRawProjection = createSelector(
   (geoProjection): GeoProjectionInput | null => geoProjection?.projection ?? null,
 );
 
+export const selectorChartProjectionFactory = createSelector(
+  selectorChartGeoProjectionState,
+  (geoProjection): Record<D3NamedProjection, (() => GeoProjection) | undefined> | null =>
+    geoProjection?.factories ?? null,
+);
+
 export const selectorChartRawScale = createSelector(
   selectorChartGeoProjectionState,
   (geoProjection): number | null => geoProjection?.scale ?? null,
@@ -133,6 +101,7 @@ export const selectorChartGeoFeatureIndexesByName = createSelectorMemoized(
  */
 export const selectorChartProjection = createSelectorMemoized(
   selectorChartRawProjection,
+  selectorChartProjectionFactory,
   selectorChartGeoData,
   selectorChartParallels,
   selectorChartRotate,
@@ -141,24 +110,25 @@ export const selectorChartProjection = createSelectorMemoized(
   selectorChartDrawingArea,
   (
     projectionInput,
+    projectionFactory,
     geoData,
     parallels,
     rotate,
     translate,
     scale,
     drawingArea,
   ): GeoProjection | null => {
-    if (!projectionInput) {
+    if (!projectionInput || !projectionFactory) {
       return null;
     }
     let projection: GeoProjection;
     if (typeof projectionInput === 'string') {
-      const factory = PROJECTION_FACTORIES[projectionInput];
+      const factory = projectionFactory[projectionInput];
       if (!factory) {
         if (process.env.NODE_ENV !== 'production') {
           console.error(
             `MUI X Charts: Unknown projection name '${projectionInput}'. ` +
-              `Expected one of: ${Object.keys(PROJECTION_FACTORIES).join(', ')}.`,
+              `Expected one of: ${Object.keys(projectionFactory).join(', ')}.`,
           );
         }
         return null;

packages/x-charts/src/internals/plugins/featurePlugins/useGeoProjection/useGeoProjection.types.ts

@@ -61,6 +61,8 @@ export interface UseGeoProjectionState {
     translate: [number, number] | null;
     rotate: [number, number] | null;
     scale: number | null;
+    // TODO: Remove factories from the state when some maps move to MIT package.
+    factories: Record<D3NamedProjection, (() => GeoProjection) | undefined>;
     /**
      * The two standard parallels used by conic projections, if applicable.
      * Used for projection 'conicConformal', 'conicEqualArea', 'conicEquidistant'.