diff --git a/docs/data/charts/map/ExportMap.js b/docs/data/charts/map/ExportMap.js new file mode 100644 index 0000000000000..0097c03829de5 --- /dev/null +++ b/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
{children}
; +} + +export default function ExportMap() { + const apiRef = useChartPremiumApiRef(); + + return ( + + + + + + + + + + + + + + + ); +} diff --git a/docs/data/charts/map/ExportMap.tsx b/docs/data/charts/map/ExportMap.tsx new file mode 100644 index 0000000000000..77e7f1e5ff894 --- /dev/null +++ b/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
{children}
; +} + +export default function ExportMap() { + const apiRef = useChartPremiumApiRef<'mapShape'>(); + + return ( + + + + + + + + + + + + + + + ); +} diff --git a/docs/data/charts/map/map.md b/docs/data/charts/map/map.md index 9fc0972e7ddf4..9484b1e8cf86a 100644 --- a/docs/data/charts/map/map.md +++ b/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"}} diff --git a/packages/x-charts-premium/src/context/ChartPremiumApi.ts b/packages/x-charts-premium/src/context/ChartPremiumApi.ts index 558c24b82d460..035b9fb3e4536 100644 --- a/packages/x-charts-premium/src/context/ChartPremiumApi.ts +++ b/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 & { bar: BarChartPremiumPluginSignatures; + rangeBar: BarChartPremiumPluginSignatures; + mapShape: GeoPremiumPluginSignatures; }; /** @@ -15,9 +18,9 @@ export type PremiumPluginsPerSeriesType = Omit & * @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;