@mui/x-charts-premium 9.7.0 → 9.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/BarChartPremium/BarChartPremium.d.mts +1 -1
- package/BarChartPremium/BarChartPremium.d.ts +1 -1
- package/BarChartPremium/BarChartPremium.js +14 -3
- package/BarChartPremium/BarChartPremium.mjs +14 -3
- package/BarChartPremium/RangeBar/AnimatedRangeBarElement.d.mts +2 -1
- package/BarChartPremium/RangeBar/AnimatedRangeBarElement.d.ts +2 -1
- package/BarChartPremium/RangeBar/FocusedRangeBar.d.mts +1 -1
- package/BarChartPremium/RangeBar/FocusedRangeBar.d.ts +1 -1
- package/BarChartPremium/RangeBar/seriesConfig/index.js +2 -2
- package/BarChartPremium/RangeBar/seriesConfig/index.mjs +2 -2
- package/BarChartPremium/RangeBar/seriesConfig/tooltipPosition.d.mts +2 -3
- package/BarChartPremium/RangeBar/seriesConfig/tooltipPosition.d.ts +2 -3
- package/BarChartPremium/RangeBar/seriesConfig/tooltipPosition.js +12 -15
- package/BarChartPremium/RangeBar/seriesConfig/tooltipPosition.mjs +11 -14
- package/BarChartPremium/webgl/BarWebGLProgram.d.mts +4 -5
- package/BarChartPremium/webgl/BarWebGLProgram.d.ts +4 -5
- package/BarChartPremium/webgl/BarWebGLProgram.js +24 -65
- package/BarChartPremium/webgl/BarWebGLProgram.mjs +24 -65
- package/BarChartPremium/webgl/shaders.d.mts +1 -1
- package/BarChartPremium/webgl/shaders.d.ts +1 -1
- package/BarChartPremium/webgl/shaders.js +2 -15
- package/BarChartPremium/webgl/shaders.mjs +3 -15
- package/CHANGELOG.md +249 -1
- package/CandlestickChart/CandlestickPlot.d.mts +2 -1
- package/CandlestickChart/CandlestickPlot.d.ts +2 -1
- package/CandlestickChart/seriesConfig/OHLCTooltipContent.d.mts +2 -1
- package/CandlestickChart/seriesConfig/OHLCTooltipContent.d.ts +2 -1
- package/CandlestickChart/seriesConfig/index.js +2 -2
- package/CandlestickChart/seriesConfig/index.mjs +2 -2
- package/CandlestickChart/seriesConfig/tooltipPosition.d.mts +2 -3
- package/CandlestickChart/seriesConfig/tooltipPosition.d.ts +2 -3
- package/CandlestickChart/seriesConfig/tooltipPosition.js +10 -14
- package/CandlestickChart/seriesConfig/tooltipPosition.mjs +10 -14
- package/ChartsDataProviderPremium/ChartsDataProviderPremium.d.mts +1 -1
- package/ChartsDataProviderPremium/ChartsDataProviderPremium.d.ts +1 -1
- package/ChartsDataProviderPremium/ChartsDataProviderPremium.js +2 -2
- package/ChartsDataProviderPremium/ChartsDataProviderPremium.mjs +2 -2
- package/ChartsGeoDataProviderPremium/ChartsGeoDataProviderPremium.d.mts +1 -1
- package/ChartsGeoDataProviderPremium/ChartsGeoDataProviderPremium.d.ts +1 -1
- package/ChartsGeoDataProviderPremium/ChartsGeoDataProviderPremium.js +2 -2
- package/ChartsGeoDataProviderPremium/ChartsGeoDataProviderPremium.mjs +2 -2
- package/ChartsGeoDataProviderPremium/ChartsGeoDataProviderPremium.plugins.d.mts +4 -3
- package/ChartsGeoDataProviderPremium/ChartsGeoDataProviderPremium.plugins.d.ts +4 -3
- package/ChartsGeoDataProviderPremium/ChartsGeoDataProviderPremium.plugins.js +2 -1
- package/ChartsGeoDataProviderPremium/ChartsGeoDataProviderPremium.plugins.mjs +2 -1
- package/ChartsGeoDataProviderPremium/index.d.mts +2 -1
- package/ChartsGeoDataProviderPremium/index.d.ts +2 -1
- package/ChartsRadialDataProviderPremium/ChartsRadialDataProviderPremium.d.mts +2 -1
- package/ChartsRadialDataProviderPremium/ChartsRadialDataProviderPremium.d.ts +2 -1
- package/ChartsRadialDataProviderPremium/ChartsRadialDataProviderPremium.js +2 -2
- package/ChartsRadialDataProviderPremium/ChartsRadialDataProviderPremium.mjs +2 -2
- package/ChartsRenderer/components/PaletteOption.d.mts +1 -1
- package/ChartsRenderer/components/PaletteOption.d.ts +1 -1
- package/ChartsZoomSlider/internals/previews/CandlestickPreviewPlot.d.mts +2 -1
- package/ChartsZoomSlider/internals/previews/CandlestickPreviewPlot.d.ts +2 -1
- package/ChartsZoomSlider/internals/previews/RangeBarPreviewPlot.d.mts +1 -1
- package/ChartsZoomSlider/internals/previews/RangeBarPreviewPlot.d.ts +1 -1
- package/HeatmapPremium/HeatmapPlotPremium.d.mts +1 -1
- package/HeatmapPremium/HeatmapPlotPremium.d.ts +1 -1
- package/HeatmapPremium/webgl/HeatmapWebGLProgram.js +12 -37
- package/HeatmapPremium/webgl/HeatmapWebGLProgram.mjs +12 -37
- package/HeatmapPremium/webgl/shaders.d.mts +3 -3
- package/HeatmapPremium/webgl/shaders.d.ts +3 -3
- package/HeatmapPremium/webgl/shaders.js +12 -15
- package/HeatmapPremium/webgl/shaders.mjs +13 -15
- package/HeatmapPremium/webgl/useHeatmapPlotData.js +3 -8
- package/HeatmapPremium/webgl/useHeatmapPlotData.mjs +3 -8
- package/Map/FocusedMapShape.d.mts +2 -1
- package/Map/FocusedMapShape.d.ts +2 -1
- package/Map/FocusedMapShape.js +5 -1
- package/Map/FocusedMapShape.mjs +5 -1
- package/Map/GeoDataPlot.d.mts +1 -1
- package/Map/GeoDataPlot.d.ts +1 -1
- package/Map/Graticule.d.mts +1 -1
- package/Map/Graticule.d.ts +1 -1
- package/Map/MapImagePlot.d.mts +39 -0
- package/Map/MapImagePlot.d.ts +39 -0
- package/Map/MapImagePlot.js +138 -0
- package/Map/MapImagePlot.mjs +132 -0
- package/Map/MapShape.d.mts +2 -2
- package/Map/MapShape.d.ts +2 -2
- package/Map/MapShape.js +6 -6
- package/Map/MapShape.mjs +6 -6
- package/Map/MapShapePlot.d.mts +9 -1
- package/Map/MapShapePlot.d.ts +9 -1
- package/Map/MapShapePlot.js +17 -5
- package/Map/MapShapePlot.mjs +17 -5
- package/Map/index.d.mts +2 -3
- package/Map/index.d.ts +2 -3
- package/Map/index.js +11 -0
- package/Map/index.mjs +1 -0
- package/Map/reprojectEquirectangularImage.d.mts +60 -0
- package/Map/reprojectEquirectangularImage.d.ts +60 -0
- package/Map/reprojectEquirectangularImage.js +116 -0
- package/Map/reprojectEquirectangularImage.mjs +110 -0
- package/Map/seriesConfig/descriptionGetter.js +5 -1
- package/Map/seriesConfig/descriptionGetter.mjs +5 -1
- package/Map/seriesConfig/getColor.js +18 -6
- package/Map/seriesConfig/getColor.mjs +18 -6
- package/Map/seriesConfig/highlight.d.mts +10 -0
- package/Map/seriesConfig/highlight.d.ts +10 -0
- package/Map/seriesConfig/highlight.js +52 -0
- package/Map/seriesConfig/highlight.mjs +45 -0
- package/Map/seriesConfig/identifierCleaner.d.mts +3 -0
- package/Map/seriesConfig/identifierCleaner.d.ts +3 -0
- package/Map/seriesConfig/identifierCleaner.js +14 -0
- package/Map/seriesConfig/identifierCleaner.mjs +8 -0
- package/Map/seriesConfig/identifierSerializer.d.mts +3 -0
- package/Map/seriesConfig/identifierSerializer.d.ts +3 -0
- package/Map/seriesConfig/identifierSerializer.js +12 -0
- package/Map/seriesConfig/identifierSerializer.mjs +6 -0
- package/Map/seriesConfig/index.js +8 -6
- package/Map/seriesConfig/index.mjs +7 -5
- package/Map/seriesConfig/keyboardFocusHandler.d.mts +0 -6
- package/Map/seriesConfig/keyboardFocusHandler.d.ts +0 -6
- package/Map/seriesConfig/keyboardFocusHandler.js +40 -7
- package/Map/seriesConfig/keyboardFocusHandler.mjs +41 -8
- package/Map/seriesConfig/seriesProcessor.js +11 -2
- package/Map/seriesConfig/seriesProcessor.mjs +11 -2
- package/Map/seriesConfig/tooltip.js +8 -4
- package/Map/seriesConfig/tooltip.mjs +8 -4
- package/Map/seriesConfig/tooltipPosition.d.mts +8 -3
- package/Map/seriesConfig/tooltipPosition.d.ts +8 -3
- package/Map/seriesConfig/tooltipPosition.js +15 -27
- package/Map/seriesConfig/tooltipPosition.mjs +16 -27
- package/RadialBarChart/RadialBarElement.d.mts +1 -1
- package/RadialBarChart/RadialBarElement.d.ts +1 -1
- package/RadialBarChart/seriesConfig/index.js +2 -2
- package/RadialBarChart/seriesConfig/index.mjs +2 -2
- package/RadialBarChart/seriesConfig/tooltipPosition.d.mts +2 -3
- package/RadialBarChart/seriesConfig/tooltipPosition.d.ts +2 -3
- package/RadialBarChart/seriesConfig/tooltipPosition.js +4 -6
- package/RadialBarChart/seriesConfig/tooltipPosition.mjs +2 -5
- package/RadialLineChart/RadialArea.d.mts +2 -1
- package/RadialLineChart/RadialArea.d.ts +2 -1
- package/RadialLineChart/RadialAreaPlot.d.mts +1 -1
- package/RadialLineChart/RadialAreaPlot.d.ts +1 -1
- package/RadialLineChart/RadialLine.d.mts +1 -1
- package/RadialLineChart/RadialLine.d.ts +1 -1
- package/RadialLineChart/RadialLineHighlightElement.d.mts +1 -1
- package/RadialLineChart/RadialLineHighlightElement.d.ts +1 -1
- package/RadialLineChart/RadialLineHighlightPlot.d.mts +1 -1
- package/RadialLineChart/RadialLineHighlightPlot.d.ts +1 -1
- package/RadialLineChart/RadialLinePlot.d.mts +1 -1
- package/RadialLineChart/RadialLinePlot.d.ts +1 -1
- package/RadialLineChart/RadialMarkPlot.d.mts +1 -1
- package/RadialLineChart/RadialMarkPlot.d.ts +1 -1
- package/RadialLineChart/seriesConfig/index.js +2 -2
- package/RadialLineChart/seriesConfig/index.mjs +2 -2
- package/RadialLineChart/seriesConfig/tooltipPosition.d.mts +2 -3
- package/RadialLineChart/seriesConfig/tooltipPosition.d.ts +2 -3
- package/RadialLineChart/seriesConfig/tooltipPosition.js +4 -6
- package/RadialLineChart/seriesConfig/tooltipPosition.mjs +2 -5
- package/ScatterChartPremium/ScatterPlotPremium.d.mts +2 -1
- package/ScatterChartPremium/ScatterPlotPremium.d.ts +2 -1
- package/ScatterChartPremium/webgl/ScatterWebGLPlot.d.mts +2 -1
- package/ScatterChartPremium/webgl/ScatterWebGLPlot.d.ts +2 -1
- package/ScatterChartPremium/webgl/ScatterWebGLProgram.d.mts +0 -2
- package/ScatterChartPremium/webgl/ScatterWebGLProgram.d.ts +0 -2
- package/ScatterChartPremium/webgl/ScatterWebGLProgram.js +23 -81
- package/ScatterChartPremium/webgl/ScatterWebGLProgram.mjs +23 -81
- package/index.js +1 -1
- package/index.mjs +1 -1
- package/internals/createGetVisibleCoordinate.d.mts +14 -0
- package/internals/createGetVisibleCoordinate.d.ts +14 -0
- package/internals/createGetVisibleCoordinate.js +66 -0
- package/internals/createGetVisibleCoordinate.mjs +60 -0
- package/internals/plugins/useGeoProjection/factories.d.mts +3 -0
- package/internals/plugins/useGeoProjection/factories.d.ts +3 -0
- package/internals/plugins/useGeoProjection/factories.js +29 -0
- package/internals/plugins/useGeoProjection/factories.mjs +23 -0
- package/internals/plugins/useGeoProjection/projection.utils.d.mts +17 -0
- package/internals/plugins/useGeoProjection/projection.utils.d.ts +17 -0
- package/internals/plugins/useGeoProjection/projection.utils.js +67 -0
- package/internals/plugins/useGeoProjection/projection.utils.mjs +59 -0
- package/internals/plugins/useGeoProjection/useGeoProjection.js +7 -40
- package/internals/plugins/useGeoProjection/useGeoProjection.mjs +7 -40
- package/internals/plugins/useGeoProjection/useGeoProjection.selectors.d.mts +47 -11
- package/internals/plugins/useGeoProjection/useGeoProjection.selectors.d.ts +47 -11
- package/internals/plugins/useGeoProjection/useGeoProjection.selectors.js +118 -8
- package/internals/plugins/useGeoProjection/useGeoProjection.selectors.mjs +117 -8
- package/internals/plugins/useGeoProjection/useGeoProjection.types.d.mts +63 -2
- package/internals/plugins/useGeoProjection/useGeoProjection.types.d.ts +63 -2
- package/internals/plugins/useGeoProjectionZoom/gestureHooks/usePanOnDrag.d.mts +11 -0
- package/internals/plugins/useGeoProjectionZoom/gestureHooks/usePanOnDrag.d.ts +11 -0
- package/internals/plugins/useGeoProjectionZoom/gestureHooks/usePanOnDrag.js +65 -0
- package/internals/plugins/useGeoProjectionZoom/gestureHooks/usePanOnDrag.mjs +58 -0
- package/internals/plugins/useGeoProjectionZoom/gestureHooks/useZoomOnPinch.d.mts +13 -0
- package/internals/plugins/useGeoProjectionZoom/gestureHooks/useZoomOnPinch.d.ts +13 -0
- package/internals/plugins/useGeoProjectionZoom/gestureHooks/useZoomOnPinch.js +62 -0
- package/internals/plugins/useGeoProjectionZoom/gestureHooks/useZoomOnPinch.mjs +56 -0
- package/internals/plugins/useGeoProjectionZoom/gestureHooks/useZoomOnWheel.d.mts +13 -0
- package/internals/plugins/useGeoProjectionZoom/gestureHooks/useZoomOnWheel.d.ts +13 -0
- package/internals/plugins/useGeoProjectionZoom/gestureHooks/useZoomOnWheel.js +64 -0
- package/internals/plugins/useGeoProjectionZoom/gestureHooks/useZoomOnWheel.mjs +58 -0
- package/internals/plugins/useGeoProjectionZoom/index.d.mts +2 -0
- package/internals/plugins/useGeoProjectionZoom/index.d.ts +2 -0
- package/internals/plugins/useGeoProjectionZoom/index.js +12 -0
- package/internals/plugins/useGeoProjectionZoom/index.mjs +1 -0
- package/internals/plugins/useGeoProjectionZoom/mapZoom.utils.d.mts +31 -0
- package/internals/plugins/useGeoProjectionZoom/mapZoom.utils.d.ts +31 -0
- package/internals/plugins/useGeoProjectionZoom/mapZoom.utils.js +187 -0
- package/internals/plugins/useGeoProjectionZoom/mapZoom.utils.mjs +177 -0
- package/internals/plugins/useGeoProjectionZoom/rotationMath.d.mts +23 -0
- package/internals/plugins/useGeoProjectionZoom/rotationMath.d.ts +23 -0
- package/internals/plugins/useGeoProjectionZoom/rotationMath.js +190 -0
- package/internals/plugins/useGeoProjectionZoom/rotationMath.mjs +182 -0
- package/internals/plugins/useGeoProjectionZoom/useGeoProjectionZoom.d.mts +3 -0
- package/internals/plugins/useGeoProjectionZoom/useGeoProjectionZoom.d.ts +3 -0
- package/internals/plugins/useGeoProjectionZoom/useGeoProjectionZoom.js +174 -0
- package/internals/plugins/useGeoProjectionZoom/useGeoProjectionZoom.mjs +166 -0
- package/internals/plugins/useGeoProjectionZoom/useGeoProjectionZoom.types.d.mts +152 -0
- package/internals/plugins/useGeoProjectionZoom/useGeoProjectionZoom.types.d.ts +152 -0
- package/internals/plugins/useGeoProjectionZoom/useGeoProjectionZoom.types.js +5 -0
- package/internals/plugins/useGeoProjectionZoom/useGeoProjectionZoom.types.mjs +1 -0
- package/models/seriesType/mapShape.d.mts +2 -1
- package/models/seriesType/mapShape.d.ts +2 -1
- package/package.json +6 -6
- package/utils/webgl/glsl.d.mts +15 -0
- package/utils/webgl/glsl.d.ts +15 -0
- package/utils/webgl/glsl.js +34 -0
- package/utils/webgl/glsl.mjs +28 -0
- package/utils/webgl/instancedAttribute.d.mts +28 -0
- package/utils/webgl/instancedAttribute.d.ts +28 -0
- package/utils/webgl/instancedAttribute.js +57 -0
- package/utils/webgl/instancedAttribute.mjs +50 -0
- package/utils/webgl/utils.d.mts +21 -2
- package/utils/webgl/utils.d.ts +21 -2
- package/utils/webgl/utils.js +44 -8
- package/utils/webgl/utils.mjs +41 -7
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export interface MapImagePlotProps extends React.SVGProps<SVGImageElement> {
|
|
3
|
+
/**
|
|
4
|
+
* URL of the image to render as the base map.
|
|
5
|
+
* Must be same-origin (or CORS-enabled) so it can be reprojected on a canvas.
|
|
6
|
+
*/
|
|
7
|
+
href?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Geographic extent the source image covers, as `[[west, south], [east, north]]`.
|
|
10
|
+
* The image is assumed to be in the equirectangular (plate carrée) projection.
|
|
11
|
+
* If `west` is greater than `east`, the range wraps across the antimeridian.
|
|
12
|
+
* @default [[-180, -90], [180, 90]]
|
|
13
|
+
*/
|
|
14
|
+
imageBounds?: [[number, number], [number, number]];
|
|
15
|
+
/**
|
|
16
|
+
* Called after each reprojection.
|
|
17
|
+
* @param {string | null} dataUrl The reprojected raster as a data URL, or `null` when it could not be produced.
|
|
18
|
+
*/
|
|
19
|
+
onReady?: (dataUrl: string | null) => void;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Renders a raster base map (for example a satellite mosaic) under the series,
|
|
23
|
+
* reprojected to match the chart's `projection` so it follows the geography
|
|
24
|
+
* instead of being a flat rectangle. Pixels outside the projection's visible
|
|
25
|
+
* footprint are left transparent.
|
|
26
|
+
*
|
|
27
|
+
* The source image is loaded only when `href` changes; changing the projection or
|
|
28
|
+
* resizing reuses the decoded image and only re-runs the (synchronous) canvas
|
|
29
|
+
* reprojection.
|
|
30
|
+
*
|
|
31
|
+
* The source image is assumed to be equirectangular; use `imageBounds` when it
|
|
32
|
+
* does not cover the whole globe. Any other SVG image attribute is forwarded to
|
|
33
|
+
* the underlying element.
|
|
34
|
+
*/
|
|
35
|
+
declare function MapImagePlot(props: MapImagePlotProps): React.JSX.Element | null;
|
|
36
|
+
declare namespace MapImagePlot {
|
|
37
|
+
var propTypes: any;
|
|
38
|
+
}
|
|
39
|
+
export { MapImagePlot };
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
6
|
+
Object.defineProperty(exports, "__esModule", {
|
|
7
|
+
value: true
|
|
8
|
+
});
|
|
9
|
+
exports.MapImagePlot = MapImagePlot;
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
12
|
+
var React = _interopRequireWildcard(require("react"));
|
|
13
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
14
|
+
var _hooks = require("@mui/x-charts/hooks");
|
|
15
|
+
var _useGeoPath = require("../hooks/useGeoPath");
|
|
16
|
+
var _reprojectEquirectangularImage = require("./reprojectEquirectangularImage");
|
|
17
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
|
+
const _excluded = ["href", "imageBounds", "onReady"];
|
|
19
|
+
const FULL_GLOBE = [[-180, -90], [180, 90]];
|
|
20
|
+
/**
|
|
21
|
+
* Renders a raster base map (for example a satellite mosaic) under the series,
|
|
22
|
+
* reprojected to match the chart's `projection` so it follows the geography
|
|
23
|
+
* instead of being a flat rectangle. Pixels outside the projection's visible
|
|
24
|
+
* footprint are left transparent.
|
|
25
|
+
*
|
|
26
|
+
* The source image is loaded only when `href` changes; changing the projection or
|
|
27
|
+
* resizing reuses the decoded image and only re-runs the (synchronous) canvas
|
|
28
|
+
* reprojection.
|
|
29
|
+
*
|
|
30
|
+
* The source image is assumed to be equirectangular; use `imageBounds` when it
|
|
31
|
+
* does not cover the whole globe. Any other SVG image attribute is forwarded to
|
|
32
|
+
* the underlying element.
|
|
33
|
+
*/
|
|
34
|
+
function MapImagePlot(props) {
|
|
35
|
+
const {
|
|
36
|
+
href,
|
|
37
|
+
imageBounds,
|
|
38
|
+
onReady
|
|
39
|
+
} = props,
|
|
40
|
+
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
|
|
41
|
+
const path = (0, _useGeoPath.useGeoPath)();
|
|
42
|
+
const {
|
|
43
|
+
left,
|
|
44
|
+
top,
|
|
45
|
+
width,
|
|
46
|
+
height
|
|
47
|
+
} = (0, _hooks.useDrawingArea)();
|
|
48
|
+
const [image, setImage] = React.useState(null);
|
|
49
|
+
const [dataUrl, setDataUrl] = React.useState(null);
|
|
50
|
+
const projection = path?.projection?.();
|
|
51
|
+
const [[west, south], [east, north]] = imageBounds ?? FULL_GLOBE;
|
|
52
|
+
|
|
53
|
+
// Keep the latest `onReady` without making it a reprojection dependency.
|
|
54
|
+
const onReadyRef = React.useRef(onReady);
|
|
55
|
+
React.useEffect(() => {
|
|
56
|
+
onReadyRef.current = onReady;
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
// Load (decode) the source image only when `href` changes. Clearing the image
|
|
60
|
+
// first hides the now-stale raster until the new one is ready.
|
|
61
|
+
React.useEffect(() => {
|
|
62
|
+
setImage(null);
|
|
63
|
+
if (!href) {
|
|
64
|
+
return undefined;
|
|
65
|
+
}
|
|
66
|
+
let cancelled = false;
|
|
67
|
+
const nextImage = new Image();
|
|
68
|
+
nextImage.crossOrigin = 'anonymous';
|
|
69
|
+
nextImage.onload = () => {
|
|
70
|
+
if (!cancelled) {
|
|
71
|
+
setImage(nextImage);
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
nextImage.src = href;
|
|
75
|
+
return () => {
|
|
76
|
+
cancelled = true;
|
|
77
|
+
};
|
|
78
|
+
}, [href]);
|
|
79
|
+
|
|
80
|
+
// Reproject whenever the decoded image, projection, drawing area, or bounds
|
|
81
|
+
// change. This is synchronous, so switching projection does not reload `href`.
|
|
82
|
+
React.useEffect(() => {
|
|
83
|
+
if (!image || !projection || typeof projection.invert !== 'function' || width <= 0 || height <= 0) {
|
|
84
|
+
setDataUrl(null);
|
|
85
|
+
onReadyRef.current?.(null);
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
88
|
+
const url = (0, _reprojectEquirectangularImage.reprojectEquirectangularImage)({
|
|
89
|
+
image,
|
|
90
|
+
projection,
|
|
91
|
+
area: {
|
|
92
|
+
left,
|
|
93
|
+
top,
|
|
94
|
+
width,
|
|
95
|
+
height
|
|
96
|
+
},
|
|
97
|
+
imageBounds: [[west, south], [east, north]]
|
|
98
|
+
});
|
|
99
|
+
setDataUrl(url);
|
|
100
|
+
onReadyRef.current?.(url);
|
|
101
|
+
}, [image, projection, left, top, width, height, west, south, east, north]);
|
|
102
|
+
if (!dataUrl) {
|
|
103
|
+
return null;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
// Spread first so forwarded attributes can't override the computed geometry/href
|
|
107
|
+
// and break the alignment with the projection.
|
|
108
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("image", (0, _extends2.default)({}, other, {
|
|
109
|
+
href: dataUrl,
|
|
110
|
+
x: left,
|
|
111
|
+
y: top,
|
|
112
|
+
width: width,
|
|
113
|
+
height: height
|
|
114
|
+
}));
|
|
115
|
+
}
|
|
116
|
+
process.env.NODE_ENV !== "production" ? MapImagePlot.propTypes /* remove-proptypes */ = {
|
|
117
|
+
// ----------------------------- Warning --------------------------------
|
|
118
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
119
|
+
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
120
|
+
// ----------------------------------------------------------------------
|
|
121
|
+
/**
|
|
122
|
+
* URL of the image to render as the base map.
|
|
123
|
+
* Must be same-origin (or CORS-enabled) so it can be reprojected on a canvas.
|
|
124
|
+
*/
|
|
125
|
+
href: _propTypes.default.string,
|
|
126
|
+
/**
|
|
127
|
+
* Geographic extent the source image covers, as `[[west, south], [east, north]]`.
|
|
128
|
+
* The image is assumed to be in the equirectangular (plate carrée) projection.
|
|
129
|
+
* If `west` is greater than `east`, the range wraps across the antimeridian.
|
|
130
|
+
* @default [[-180, -90], [180, 90]]
|
|
131
|
+
*/
|
|
132
|
+
imageBounds: _propTypes.default.arrayOf(_propTypes.default.arrayOf(_propTypes.default.number.isRequired).isRequired),
|
|
133
|
+
/**
|
|
134
|
+
* Called after each reprojection.
|
|
135
|
+
* @param {string | null} dataUrl The reprojected raster as a data URL, or `null` when it could not be produced.
|
|
136
|
+
*/
|
|
137
|
+
onReady: _propTypes.default.func
|
|
138
|
+
} : void 0;
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
5
|
+
const _excluded = ["href", "imageBounds", "onReady"];
|
|
6
|
+
import * as React from 'react';
|
|
7
|
+
import PropTypes from 'prop-types';
|
|
8
|
+
import { useDrawingArea } from '@mui/x-charts/hooks';
|
|
9
|
+
import { useGeoPath } from "../hooks/useGeoPath.mjs";
|
|
10
|
+
import { reprojectEquirectangularImage } from "./reprojectEquirectangularImage.mjs";
|
|
11
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
+
const FULL_GLOBE = [[-180, -90], [180, 90]];
|
|
13
|
+
/**
|
|
14
|
+
* Renders a raster base map (for example a satellite mosaic) under the series,
|
|
15
|
+
* reprojected to match the chart's `projection` so it follows the geography
|
|
16
|
+
* instead of being a flat rectangle. Pixels outside the projection's visible
|
|
17
|
+
* footprint are left transparent.
|
|
18
|
+
*
|
|
19
|
+
* The source image is loaded only when `href` changes; changing the projection or
|
|
20
|
+
* resizing reuses the decoded image and only re-runs the (synchronous) canvas
|
|
21
|
+
* reprojection.
|
|
22
|
+
*
|
|
23
|
+
* The source image is assumed to be equirectangular; use `imageBounds` when it
|
|
24
|
+
* does not cover the whole globe. Any other SVG image attribute is forwarded to
|
|
25
|
+
* the underlying element.
|
|
26
|
+
*/
|
|
27
|
+
function MapImagePlot(props) {
|
|
28
|
+
const {
|
|
29
|
+
href,
|
|
30
|
+
imageBounds,
|
|
31
|
+
onReady
|
|
32
|
+
} = props,
|
|
33
|
+
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
34
|
+
const path = useGeoPath();
|
|
35
|
+
const {
|
|
36
|
+
left,
|
|
37
|
+
top,
|
|
38
|
+
width,
|
|
39
|
+
height
|
|
40
|
+
} = useDrawingArea();
|
|
41
|
+
const [image, setImage] = React.useState(null);
|
|
42
|
+
const [dataUrl, setDataUrl] = React.useState(null);
|
|
43
|
+
const projection = path?.projection?.();
|
|
44
|
+
const [[west, south], [east, north]] = imageBounds ?? FULL_GLOBE;
|
|
45
|
+
|
|
46
|
+
// Keep the latest `onReady` without making it a reprojection dependency.
|
|
47
|
+
const onReadyRef = React.useRef(onReady);
|
|
48
|
+
React.useEffect(() => {
|
|
49
|
+
onReadyRef.current = onReady;
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
// Load (decode) the source image only when `href` changes. Clearing the image
|
|
53
|
+
// first hides the now-stale raster until the new one is ready.
|
|
54
|
+
React.useEffect(() => {
|
|
55
|
+
setImage(null);
|
|
56
|
+
if (!href) {
|
|
57
|
+
return undefined;
|
|
58
|
+
}
|
|
59
|
+
let cancelled = false;
|
|
60
|
+
const nextImage = new Image();
|
|
61
|
+
nextImage.crossOrigin = 'anonymous';
|
|
62
|
+
nextImage.onload = () => {
|
|
63
|
+
if (!cancelled) {
|
|
64
|
+
setImage(nextImage);
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
nextImage.src = href;
|
|
68
|
+
return () => {
|
|
69
|
+
cancelled = true;
|
|
70
|
+
};
|
|
71
|
+
}, [href]);
|
|
72
|
+
|
|
73
|
+
// Reproject whenever the decoded image, projection, drawing area, or bounds
|
|
74
|
+
// change. This is synchronous, so switching projection does not reload `href`.
|
|
75
|
+
React.useEffect(() => {
|
|
76
|
+
if (!image || !projection || typeof projection.invert !== 'function' || width <= 0 || height <= 0) {
|
|
77
|
+
setDataUrl(null);
|
|
78
|
+
onReadyRef.current?.(null);
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
const url = reprojectEquirectangularImage({
|
|
82
|
+
image,
|
|
83
|
+
projection,
|
|
84
|
+
area: {
|
|
85
|
+
left,
|
|
86
|
+
top,
|
|
87
|
+
width,
|
|
88
|
+
height
|
|
89
|
+
},
|
|
90
|
+
imageBounds: [[west, south], [east, north]]
|
|
91
|
+
});
|
|
92
|
+
setDataUrl(url);
|
|
93
|
+
onReadyRef.current?.(url);
|
|
94
|
+
}, [image, projection, left, top, width, height, west, south, east, north]);
|
|
95
|
+
if (!dataUrl) {
|
|
96
|
+
return null;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
// Spread first so forwarded attributes can't override the computed geometry/href
|
|
100
|
+
// and break the alignment with the projection.
|
|
101
|
+
return /*#__PURE__*/_jsx("image", _extends({}, other, {
|
|
102
|
+
href: dataUrl,
|
|
103
|
+
x: left,
|
|
104
|
+
y: top,
|
|
105
|
+
width: width,
|
|
106
|
+
height: height
|
|
107
|
+
}));
|
|
108
|
+
}
|
|
109
|
+
process.env.NODE_ENV !== "production" ? MapImagePlot.propTypes /* remove-proptypes */ = {
|
|
110
|
+
// ----------------------------- Warning --------------------------------
|
|
111
|
+
// | These PropTypes are generated from the TypeScript type definitions |
|
|
112
|
+
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
113
|
+
// ----------------------------------------------------------------------
|
|
114
|
+
/**
|
|
115
|
+
* URL of the image to render as the base map.
|
|
116
|
+
* Must be same-origin (or CORS-enabled) so it can be reprojected on a canvas.
|
|
117
|
+
*/
|
|
118
|
+
href: PropTypes.string,
|
|
119
|
+
/**
|
|
120
|
+
* Geographic extent the source image covers, as `[[west, south], [east, north]]`.
|
|
121
|
+
* The image is assumed to be in the equirectangular (plate carrée) projection.
|
|
122
|
+
* If `west` is greater than `east`, the range wraps across the antimeridian.
|
|
123
|
+
* @default [[-180, -90], [180, 90]]
|
|
124
|
+
*/
|
|
125
|
+
imageBounds: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number.isRequired).isRequired),
|
|
126
|
+
/**
|
|
127
|
+
* Called after each reprojection.
|
|
128
|
+
* @param {string | null} dataUrl The reprojected raster as a data URL, or `null` when it could not be produced.
|
|
129
|
+
*/
|
|
130
|
+
onReady: PropTypes.func
|
|
131
|
+
} : void 0;
|
|
132
|
+
export { MapImagePlot };
|
package/Map/MapShape.d.mts
CHANGED
|
@@ -2,11 +2,11 @@ import * as React from 'react';
|
|
|
2
2
|
import type { SeriesId } from '@mui/x-charts/internals';
|
|
3
3
|
export type MapShapeProps = Omit<React.SVGProps<SVGPathElement>, 'ref'> & {
|
|
4
4
|
seriesId: SeriesId;
|
|
5
|
-
|
|
5
|
+
featureName: string;
|
|
6
6
|
d: string;
|
|
7
7
|
color: string;
|
|
8
8
|
};
|
|
9
|
-
declare function MapShape(props: MapShapeProps):
|
|
9
|
+
declare function MapShape(props: MapShapeProps): React.JSX.Element;
|
|
10
10
|
declare namespace MapShape {
|
|
11
11
|
var propTypes: any;
|
|
12
12
|
}
|
package/Map/MapShape.d.ts
CHANGED
|
@@ -2,11 +2,11 @@ import * as React from 'react';
|
|
|
2
2
|
import type { SeriesId } from '@mui/x-charts/internals';
|
|
3
3
|
export type MapShapeProps = Omit<React.SVGProps<SVGPathElement>, 'ref'> & {
|
|
4
4
|
seriesId: SeriesId;
|
|
5
|
-
|
|
5
|
+
featureName: string;
|
|
6
6
|
d: string;
|
|
7
7
|
color: string;
|
|
8
8
|
};
|
|
9
|
-
declare function MapShape(props: MapShapeProps):
|
|
9
|
+
declare function MapShape(props: MapShapeProps): React.JSX.Element;
|
|
10
10
|
declare namespace MapShape {
|
|
11
11
|
var propTypes: any;
|
|
12
12
|
}
|
package/Map/MapShape.js
CHANGED
|
@@ -15,7 +15,7 @@ var _styles = require("@mui/material/styles");
|
|
|
15
15
|
var _internals = require("@mui/x-charts/internals");
|
|
16
16
|
var _hooks = require("../hooks");
|
|
17
17
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
|
-
const _excluded = ["seriesId", "
|
|
18
|
+
const _excluded = ["seriesId", "featureName", "d", "color", "onClick"];
|
|
19
19
|
const MapShapeRoot = (0, _styles.styled)('path', {
|
|
20
20
|
name: 'MuiMapShape',
|
|
21
21
|
slot: 'Root'
|
|
@@ -27,7 +27,7 @@ const MapShapeRoot = (0, _styles.styled)('path', {
|
|
|
27
27
|
function MapShape(props) {
|
|
28
28
|
const {
|
|
29
29
|
seriesId,
|
|
30
|
-
|
|
30
|
+
featureName,
|
|
31
31
|
d,
|
|
32
32
|
color,
|
|
33
33
|
onClick
|
|
@@ -36,8 +36,8 @@ function MapShape(props) {
|
|
|
36
36
|
const identifier = React.useMemo(() => ({
|
|
37
37
|
type: 'mapShape',
|
|
38
38
|
seriesId,
|
|
39
|
-
|
|
40
|
-
}), [seriesId,
|
|
39
|
+
name: featureName
|
|
40
|
+
}), [seriesId, featureName]);
|
|
41
41
|
const interactionProps = (0, _internals.useInteractionItemProps)(identifier);
|
|
42
42
|
const highlightState = (0, _hooks.useItemHighlightState)(identifier);
|
|
43
43
|
const isHighlighted = highlightState === 'highlighted';
|
|
@@ -47,7 +47,7 @@ function MapShape(props) {
|
|
|
47
47
|
fill: color,
|
|
48
48
|
onClick: onClick,
|
|
49
49
|
cursor: onClick ? 'pointer' : 'unset',
|
|
50
|
-
"data-
|
|
50
|
+
"data-name": featureName,
|
|
51
51
|
"data-highlighted": isHighlighted || undefined,
|
|
52
52
|
"data-faded": isFaded || undefined,
|
|
53
53
|
filter: isHighlighted ? 'brightness(120%)' : undefined,
|
|
@@ -59,6 +59,6 @@ process.env.NODE_ENV !== "production" ? MapShape.propTypes /* remove-proptypes *
|
|
|
59
59
|
// | These PropTypes are generated from the TypeScript type definitions |
|
|
60
60
|
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
61
61
|
// ----------------------------------------------------------------------
|
|
62
|
-
|
|
62
|
+
featureName: _propTypes.default.string.isRequired,
|
|
63
63
|
seriesId: _propTypes.default.string.isRequired
|
|
64
64
|
} : void 0;
|
package/Map/MapShape.mjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
4
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
5
|
-
const _excluded = ["seriesId", "
|
|
5
|
+
const _excluded = ["seriesId", "featureName", "d", "color", "onClick"];
|
|
6
6
|
import * as React from 'react';
|
|
7
7
|
import PropTypes from 'prop-types';
|
|
8
8
|
import { styled } from '@mui/material/styles';
|
|
@@ -20,7 +20,7 @@ const MapShapeRoot = styled('path', {
|
|
|
20
20
|
function MapShape(props) {
|
|
21
21
|
const {
|
|
22
22
|
seriesId,
|
|
23
|
-
|
|
23
|
+
featureName,
|
|
24
24
|
d,
|
|
25
25
|
color,
|
|
26
26
|
onClick
|
|
@@ -29,8 +29,8 @@ function MapShape(props) {
|
|
|
29
29
|
const identifier = React.useMemo(() => ({
|
|
30
30
|
type: 'mapShape',
|
|
31
31
|
seriesId,
|
|
32
|
-
|
|
33
|
-
}), [seriesId,
|
|
32
|
+
name: featureName
|
|
33
|
+
}), [seriesId, featureName]);
|
|
34
34
|
const interactionProps = useInteractionItemProps(identifier);
|
|
35
35
|
const highlightState = useItemHighlightState(identifier);
|
|
36
36
|
const isHighlighted = highlightState === 'highlighted';
|
|
@@ -40,7 +40,7 @@ function MapShape(props) {
|
|
|
40
40
|
fill: color,
|
|
41
41
|
onClick: onClick,
|
|
42
42
|
cursor: onClick ? 'pointer' : 'unset',
|
|
43
|
-
"data-
|
|
43
|
+
"data-name": featureName,
|
|
44
44
|
"data-highlighted": isHighlighted || undefined,
|
|
45
45
|
"data-faded": isFaded || undefined,
|
|
46
46
|
filter: isHighlighted ? 'brightness(120%)' : undefined,
|
|
@@ -52,7 +52,7 @@ process.env.NODE_ENV !== "production" ? MapShape.propTypes /* remove-proptypes *
|
|
|
52
52
|
// | These PropTypes are generated from the TypeScript type definitions |
|
|
53
53
|
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
54
54
|
// ----------------------------------------------------------------------
|
|
55
|
-
|
|
55
|
+
featureName: PropTypes.string.isRequired,
|
|
56
56
|
seriesId: PropTypes.string.isRequired
|
|
57
57
|
} : void 0;
|
|
58
58
|
export { MapShape };
|
package/Map/MapShapePlot.d.mts
CHANGED
|
@@ -1,4 +1,12 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { MapShapeItemIdentifier } from "../models/seriesType/mapShape.mjs";
|
|
1
3
|
export interface MapShapePlotProps {
|
|
4
|
+
/**
|
|
5
|
+
* Callback fired when clicking on a map shape.
|
|
6
|
+
* @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
|
|
7
|
+
* @param {MapShapeItemIdentifier} mapShapeItemIdentifier The identifier of the clicked map shape.
|
|
8
|
+
*/
|
|
9
|
+
onItemClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>, mapShapeItemIdentifier: MapShapeItemIdentifier) => void;
|
|
2
10
|
className?: string;
|
|
3
11
|
/**
|
|
4
12
|
* Fill color applied to every feature path. Overrides item and series colors.
|
|
@@ -18,7 +26,7 @@ export interface MapShapePlotProps {
|
|
|
18
26
|
/**
|
|
19
27
|
* Renders series mapShape items.
|
|
20
28
|
*/
|
|
21
|
-
declare function MapShapePlot(props: MapShapePlotProps):
|
|
29
|
+
declare function MapShapePlot(props: MapShapePlotProps): React.JSX.Element | null;
|
|
22
30
|
declare namespace MapShapePlot {
|
|
23
31
|
var propTypes: any;
|
|
24
32
|
}
|
package/Map/MapShapePlot.d.ts
CHANGED
|
@@ -1,4 +1,12 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { MapShapeItemIdentifier } from "../models/seriesType/mapShape.js";
|
|
1
3
|
export interface MapShapePlotProps {
|
|
4
|
+
/**
|
|
5
|
+
* Callback fired when clicking on a map shape.
|
|
6
|
+
* @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
|
|
7
|
+
* @param {MapShapeItemIdentifier} mapShapeItemIdentifier The identifier of the clicked map shape.
|
|
8
|
+
*/
|
|
9
|
+
onItemClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>, mapShapeItemIdentifier: MapShapeItemIdentifier) => void;
|
|
2
10
|
className?: string;
|
|
3
11
|
/**
|
|
4
12
|
* Fill color applied to every feature path. Overrides item and series colors.
|
|
@@ -18,7 +26,7 @@ export interface MapShapePlotProps {
|
|
|
18
26
|
/**
|
|
19
27
|
* Renders series mapShape items.
|
|
20
28
|
*/
|
|
21
|
-
declare function MapShapePlot(props: MapShapePlotProps):
|
|
29
|
+
declare function MapShapePlot(props: MapShapePlotProps): React.JSX.Element | null;
|
|
22
30
|
declare namespace MapShapePlot {
|
|
23
31
|
var propTypes: any;
|
|
24
32
|
}
|
package/Map/MapShapePlot.js
CHANGED
|
@@ -26,7 +26,8 @@ function MapShapePlot(props) {
|
|
|
26
26
|
className,
|
|
27
27
|
fill,
|
|
28
28
|
stroke = 'none',
|
|
29
|
-
strokeWidth = 1
|
|
29
|
+
strokeWidth = 1,
|
|
30
|
+
onItemClick
|
|
30
31
|
} = props;
|
|
31
32
|
const geoData = (0, _useGeoData.useGeoData)();
|
|
32
33
|
const path = (0, _useGeoPath.useGeoPath)();
|
|
@@ -56,7 +57,7 @@ function MapShapePlot(props) {
|
|
|
56
57
|
const colorGetter = _seriesConfig.mapShapeSeriesConfig.colorProcessor(seriesItem, undefined, undefined, colorAxis);
|
|
57
58
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
|
|
58
59
|
"data-series": id,
|
|
59
|
-
children: data.map(
|
|
60
|
+
children: data.map(item => {
|
|
60
61
|
if (item.hidden) {
|
|
61
62
|
return null;
|
|
62
63
|
}
|
|
@@ -68,17 +69,22 @@ function MapShapePlot(props) {
|
|
|
68
69
|
children: featureIndexes.map(featureIndex => {
|
|
69
70
|
const feature = geoData.features[featureIndex];
|
|
70
71
|
const d = path(feature);
|
|
71
|
-
const color = fill ?? colorGetter(
|
|
72
|
+
const color = fill ?? colorGetter(item.name);
|
|
72
73
|
if (!d || color === null) {
|
|
73
74
|
return null;
|
|
74
75
|
}
|
|
75
76
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MapShape.MapShape, {
|
|
76
77
|
seriesId: id,
|
|
77
|
-
|
|
78
|
+
featureName: item.name,
|
|
78
79
|
d: d,
|
|
79
80
|
color: color,
|
|
80
81
|
stroke: stroke,
|
|
81
|
-
strokeWidth: strokeWidth
|
|
82
|
+
strokeWidth: strokeWidth,
|
|
83
|
+
onClick: onItemClick && (event => onItemClick(event, {
|
|
84
|
+
type: 'mapShape',
|
|
85
|
+
seriesId: id,
|
|
86
|
+
name: item.name
|
|
87
|
+
}))
|
|
82
88
|
}, featureIndex);
|
|
83
89
|
})
|
|
84
90
|
}, item.name);
|
|
@@ -97,6 +103,12 @@ process.env.NODE_ENV !== "production" ? MapShapePlot.propTypes /* remove-proptyp
|
|
|
97
103
|
* Fill color applied to every feature path. Overrides item and series colors.
|
|
98
104
|
*/
|
|
99
105
|
fill: _propTypes.default.string,
|
|
106
|
+
/**
|
|
107
|
+
* Callback fired when clicking on a map shape.
|
|
108
|
+
* @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
|
|
109
|
+
* @param {MapShapeItemIdentifier} mapShapeItemIdentifier The identifier of the clicked map shape.
|
|
110
|
+
*/
|
|
111
|
+
onItemClick: _propTypes.default.func,
|
|
100
112
|
/**
|
|
101
113
|
* Stroke color applied to every feature path.
|
|
102
114
|
* @default 'none'
|
package/Map/MapShapePlot.mjs
CHANGED
|
@@ -19,7 +19,8 @@ function MapShapePlot(props) {
|
|
|
19
19
|
className,
|
|
20
20
|
fill,
|
|
21
21
|
stroke = 'none',
|
|
22
|
-
strokeWidth = 1
|
|
22
|
+
strokeWidth = 1,
|
|
23
|
+
onItemClick
|
|
23
24
|
} = props;
|
|
24
25
|
const geoData = useGeoData();
|
|
25
26
|
const path = useGeoPath();
|
|
@@ -49,7 +50,7 @@ function MapShapePlot(props) {
|
|
|
49
50
|
const colorGetter = mapShapeSeriesConfig.colorProcessor(seriesItem, undefined, undefined, colorAxis);
|
|
50
51
|
return /*#__PURE__*/_jsx("g", {
|
|
51
52
|
"data-series": id,
|
|
52
|
-
children: data.map(
|
|
53
|
+
children: data.map(item => {
|
|
53
54
|
if (item.hidden) {
|
|
54
55
|
return null;
|
|
55
56
|
}
|
|
@@ -61,17 +62,22 @@ function MapShapePlot(props) {
|
|
|
61
62
|
children: featureIndexes.map(featureIndex => {
|
|
62
63
|
const feature = geoData.features[featureIndex];
|
|
63
64
|
const d = path(feature);
|
|
64
|
-
const color = fill ?? colorGetter(
|
|
65
|
+
const color = fill ?? colorGetter(item.name);
|
|
65
66
|
if (!d || color === null) {
|
|
66
67
|
return null;
|
|
67
68
|
}
|
|
68
69
|
return /*#__PURE__*/_jsx(MapShape, {
|
|
69
70
|
seriesId: id,
|
|
70
|
-
|
|
71
|
+
featureName: item.name,
|
|
71
72
|
d: d,
|
|
72
73
|
color: color,
|
|
73
74
|
stroke: stroke,
|
|
74
|
-
strokeWidth: strokeWidth
|
|
75
|
+
strokeWidth: strokeWidth,
|
|
76
|
+
onClick: onItemClick && (event => onItemClick(event, {
|
|
77
|
+
type: 'mapShape',
|
|
78
|
+
seriesId: id,
|
|
79
|
+
name: item.name
|
|
80
|
+
}))
|
|
75
81
|
}, featureIndex);
|
|
76
82
|
})
|
|
77
83
|
}, item.name);
|
|
@@ -90,6 +96,12 @@ process.env.NODE_ENV !== "production" ? MapShapePlot.propTypes /* remove-proptyp
|
|
|
90
96
|
* Fill color applied to every feature path. Overrides item and series colors.
|
|
91
97
|
*/
|
|
92
98
|
fill: PropTypes.string,
|
|
99
|
+
/**
|
|
100
|
+
* Callback fired when clicking on a map shape.
|
|
101
|
+
* @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
|
|
102
|
+
* @param {MapShapeItemIdentifier} mapShapeItemIdentifier The identifier of the clicked map shape.
|
|
103
|
+
*/
|
|
104
|
+
onItemClick: PropTypes.func,
|
|
93
105
|
/**
|
|
94
106
|
* Stroke color applied to every feature path.
|
|
95
107
|
* @default 'none'
|
package/Map/index.d.mts
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
export type { GeoProjectionInput, D3NamedProjection } from "../internals/plugins/useGeoProjection/useGeoProjection.types.mjs";
|
|
2
2
|
export * from "./GeoDataPlot.mjs";
|
|
3
|
+
export * from "./MapImagePlot.mjs";
|
|
3
4
|
export * from "./MapShapePlot.mjs";
|
|
4
5
|
export * from "./MapShape.mjs";
|
|
5
6
|
export * from "./FocusedMapShape.mjs";
|
|
6
7
|
export * from "./Graticule.mjs";
|
|
7
|
-
export type D3NamedProjection = useGeoProjectionTypes.D3NamedProjection;
|
|
8
|
-
export type GeoProjectionInput = useGeoProjectionTypes.GeoProjectionInput;
|
|
9
8
|
export type { GeoProjection, ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo';
|
package/Map/index.d.ts
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
export type { GeoProjectionInput, D3NamedProjection } from "../internals/plugins/useGeoProjection/useGeoProjection.types.js";
|
|
2
2
|
export * from "./GeoDataPlot.js";
|
|
3
|
+
export * from "./MapImagePlot.js";
|
|
3
4
|
export * from "./MapShapePlot.js";
|
|
4
5
|
export * from "./MapShape.js";
|
|
5
6
|
export * from "./FocusedMapShape.js";
|
|
6
7
|
export * from "./Graticule.js";
|
|
7
|
-
export type D3NamedProjection = useGeoProjectionTypes.D3NamedProjection;
|
|
8
|
-
export type GeoProjectionInput = useGeoProjectionTypes.GeoProjectionInput;
|
|
9
8
|
export type { GeoProjection, ExtendedFeatureCollection } from '@mui/x-charts-vendor/d3-geo';
|
package/Map/index.js
CHANGED
|
@@ -14,6 +14,17 @@ Object.keys(_GeoDataPlot).forEach(function (key) {
|
|
|
14
14
|
}
|
|
15
15
|
});
|
|
16
16
|
});
|
|
17
|
+
var _MapImagePlot = require("./MapImagePlot");
|
|
18
|
+
Object.keys(_MapImagePlot).forEach(function (key) {
|
|
19
|
+
if (key === "default" || key === "__esModule") return;
|
|
20
|
+
if (key in exports && exports[key] === _MapImagePlot[key]) return;
|
|
21
|
+
Object.defineProperty(exports, key, {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function () {
|
|
24
|
+
return _MapImagePlot[key];
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
});
|
|
17
28
|
var _MapShapePlot = require("./MapShapePlot");
|
|
18
29
|
Object.keys(_MapShapePlot).forEach(function (key) {
|
|
19
30
|
if (key === "default" || key === "__esModule") return;
|