[docs] Show how to export maps

docs/data/charts/map/ExportMap.js

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import { interpolateBlues } from 'd3-scale-chromatic';
+import { feature as topojsonFeature } from 'topojson-client';
+import countriesTopology from 'visionscarto-world-atlas/world/110m.json';
+import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium';
+import { GeoDataPlot } from '@mui/x-charts-premium/Map';
+import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { useChartRootRef } from '@mui/x-charts/hooks';
+import { useChartPremiumApiRef } from '@mui/x-charts-premium/hooks';
+import { PiecewiseColorLegend } from '@mui/x-charts-premium/ChartsLegend';
+
+import { countryData } from '../dataset/countryData';
+import { internetUsageByCountry } from '../dataset/internetUsageByCountry';
+
+const countries = topojsonFeature(countriesTopology, 'countries');
+
+const data = Object.keys(countryData).map((code) => ({
+  name: code,
+  label: countryData[code].country,
+  colorValue: internetUsageByCountry[code],
+}));
+
+function CustomChartWrapper({ children }) {
+  const chartRootRef = useChartRootRef();
+
+  return <div ref={chartRootRef}>{children}</div>;
+}
+
+export default function ExportMap() {
+  const apiRef = useChartPremiumApiRef();
+
+  return (
+    <Box sx={{ width: '100%', maxWidth: 800 }}>
+      <Stack direction="row" spacing={1} sx={{ mb: 1 }}>
+        <Button
+          variant="contained"
+          onClick={() => apiRef.current?.exportAsImage({ type: 'image/png' })}
+        >
+          Export as PNG
+        </Button>
+        <Button variant="outlined" onClick={() => apiRef.current?.exportAsPrint()}>
+          Print / Export as PDF
+        </Button>
+      </Stack>
+      <ChartsGeoDataProviderPremium
+        apiRef={apiRef}
+        geoData={countries}
+        projection="naturalEarth1"
+        height={420}
+        series={[
+          {
+            type: 'mapShape',
+            label: 'World',
+            color: 'lightgray',
+            data,
+          },
+        ]}
+        zAxis={[
+          {
+            id: 'internet-usage',
+            colorMap: {
+              type: 'piecewise',
+              thresholds: [25, 50, 75],
+              colors: [0.25, 0.5, 0.75, 1].map(interpolateBlues),
+            },
+          },
+        ]}
+      >
+        <CustomChartWrapper>
+          <ChartsSurface>
+            <GeoDataPlot fill="#e3f2fd" stroke="#0d47a1" />
+          </ChartsSurface>
+        </CustomChartWrapper>
+        <PiecewiseColorLegend axisDirection="z" direction="horizontal" />
+      </ChartsGeoDataProviderPremium>
+    </Box>
+  );
+}

docs/data/charts/map/ExportMap.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import { interpolateBlues } from 'd3-scale-chromatic';
+import { feature as topojsonFeature } from 'topojson-client';
+import countriesTopology from 'visionscarto-world-atlas/world/110m.json';
+import { Unstable_ChartsGeoDataProviderPremium as ChartsGeoDataProviderPremium } from '@mui/x-charts-premium/ChartsGeoDataProviderPremium';
+import { GeoDataPlot } from '@mui/x-charts-premium/Map';
+import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { useChartRootRef } from '@mui/x-charts/hooks';
+import { useChartPremiumApiRef } from '@mui/x-charts-premium/hooks';
+import { PiecewiseColorLegend } from '@mui/x-charts-premium/ChartsLegend';
+import { type ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo';
+import { countryData } from '../dataset/countryData';
+import { internetUsageByCountry } from '../dataset/internetUsageByCountry';
+
+const countries = topojsonFeature(
+  countriesTopology as any,
+  'countries',
+) as unknown as ExtendedFeatureCollection;
+
+const data = Object.keys(countryData).map((code) => ({
+  name: code,
+  label: countryData[code].country,
+  colorValue: internetUsageByCountry[code],
+}));
+
+function CustomChartWrapper({ children }: React.PropsWithChildren) {
+  const chartRootRef = useChartRootRef();
+
+  return <div ref={chartRootRef}>{children}</div>;
+}
+
+export default function ExportMap() {
+  const apiRef = useChartPremiumApiRef<'mapShape'>();
+
+  return (
+    <Box sx={{ width: '100%', maxWidth: 800 }}>
+      <Stack direction="row" spacing={1} sx={{ mb: 1 }}>
+        <Button
+          variant="contained"
+          onClick={() => apiRef.current?.exportAsImage({ type: 'image/png' })}
+        >
+          Export as PNG
+        </Button>
+        <Button variant="outlined" onClick={() => apiRef.current?.exportAsPrint()}>
+          Print / Export as PDF
+        </Button>
+      </Stack>
+      <ChartsGeoDataProviderPremium
+        apiRef={apiRef}
+        geoData={countries}
+        projection="naturalEarth1"
+        height={420}
+        series={[
+          {
+            type: 'mapShape',
+            label: 'World',
+            color: 'lightgray',
+            data,
+          },
+        ]}
+        zAxis={[
+          {
+            id: 'internet-usage',
+            colorMap: {
+              type: 'piecewise',
+              thresholds: [25, 50, 75],
+              colors: [0.25, 0.5, 0.75, 1].map(interpolateBlues),
+            },
+          },
+        ]}
+      >
+        <CustomChartWrapper>
+          <ChartsSurface>
+            <GeoDataPlot fill="#e3f2fd" stroke="#0d47a1" />
+          </ChartsSurface>
+        </CustomChartWrapper>
+        <PiecewiseColorLegend axisDirection="z" direction="horizontal" />
+      </ChartsGeoDataProviderPremium>
+    </Box>
+  );
+}

docs/data/charts/map/map.md

@@ -178,3 +178,10 @@ its visibility. Hidden series are skipped by `MapShapePlot` so the underlying ba
 stays visible.
 
 {{"demo": "VisibleMapShape.js"}}
+
+## Exporting
+
+Maps can be exported as an image or as a PDF, like any other chart.
+See the [Export](/x/react-charts/export/) page for the complete documentation.
+
+{{"demo": "ExportMap.js"}}

packages/x-charts-premium/src/context/ChartPremiumApi.ts

@@ -2,9 +2,12 @@ import type { ProPluginsPerSeriesType } from '@mui/x-charts-pro/internals';
 import type { ChartAnyPluginSignature, ChartPublicAPI } from '@mui/x-charts/internals';
 import type { BarChartPremiumPluginSignatures } from '../BarChartPremium/BarChartPremium.plugins';
 import type { AllPluginSignatures } from '../internals/plugins/allPlugins';
+import type { GeoPremiumPluginSignatures } from '../ChartsGeoDataProviderPremium/ChartsGeoDataProviderPremium.plugins';
 
 export type PremiumPluginsPerSeriesType = Omit<ProPluginsPerSeriesType, 'bar'> & {
   bar: BarChartPremiumPluginSignatures;
+  rangeBar: BarChartPremiumPluginSignatures;
+  mapShape: GeoPremiumPluginSignatures;
 };
 
 /**
@@ -15,9 +18,9 @@ export type PremiumPluginsPerSeriesType = Omit<ProPluginsPerSeriesType, 'bar'> &
  * @example ChartProApi<'composition'>
  */
 export type ChartPremiumApi<
-  ChartType extends keyof ProPluginsPerSeriesType | undefined = undefined,
+  ChartType extends keyof PremiumPluginsPerSeriesType | undefined = undefined,
   Signatures extends readonly ChartAnyPluginSignature[] =
-    ChartType extends keyof ProPluginsPerSeriesType
+    ChartType extends keyof PremiumPluginsPerSeriesType
       ? PremiumPluginsPerSeriesType[ChartType]
       : AllPluginSignatures,
 > = ChartPublicAPI<Signatures>;