@mui/x-charts-premium 9.2.0 → 9.4.0

package/Map/FocusedMapShape.js

@@ -0,0 +1,66 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FocusedMapShape = FocusedMapShape;
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _hooks = require("../hooks");
+var _useGeoData = require("../hooks/useGeoData");
+var _useGeoPath = require("../hooks/useGeoPath");
+var _useGeoFeatureIndexesByName = require("../hooks/useGeoFeatureIndexesByName");
+var _useMapShapeSeries = require("../hooks/useMapShapeSeries");
+var _jsxRuntime = require("react/jsx-runtime");
+const FocusedMapShapeRoot = (0, _styles.styled)('path', {
+  name: 'MuiMapShape',
+  slot: 'Focused'
+})(({
+  theme
+}) => ({
+  fill: 'none',
+  stroke: (theme.vars ?? theme).palette.text.primary,
+  strokeWidth: 2,
+  pointerEvents: 'none'
+}));
+
+/**
+ * Renders an outline around the map shape currently focused through keyboard navigation.
+ */
+function FocusedMapShape() {
+  const focusedItem = (0, _hooks.useFocusedItem)();
+  const geoData = (0, _useGeoData.useGeoData)();
+  const path = (0, _useGeoPath.useGeoPath)();
+  const featureIndexesByName = (0, _useGeoFeatureIndexesByName.useGeoFeatureIndexesByName)();
+  const series = (0, _useMapShapeSeries.useMapShapeSeries)();
+  if (focusedItem?.type !== 'mapShape' || !geoData || !path) {
+    return null;
+  }
+  const seriesItem = series.find(item => item.id === focusedItem.seriesId);
+  if (!seriesItem || seriesItem.hidden) {
+    return null;
+  }
+  const dataItem = seriesItem.data[focusedItem.dataIndex];
+  if (!dataItem || dataItem.hidden) {
+    return null;
+  }
+  const featureIndexes = featureIndexesByName.get(dataItem.name);
+  if (featureIndexes === undefined || featureIndexes.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+    "aria-hidden": true,
+    children: featureIndexes.map(featureIndex => {
+      const feature = geoData.features[featureIndex];
+      const d = path(feature);
+      if (!d) {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(FocusedMapShapeRoot, {
+        d: d
+      }, featureIndex);
+    })
+  });
+}

package/Map/FocusedMapShape.mjs

@@ -0,0 +1,60 @@
+'use client';
+
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { useFocusedItem } from "../hooks/index.mjs";
+import { useGeoData } from "../hooks/useGeoData.mjs";
+import { useGeoPath } from "../hooks/useGeoPath.mjs";
+import { useGeoFeatureIndexesByName } from "../hooks/useGeoFeatureIndexesByName.mjs";
+import { useMapShapeSeries } from "../hooks/useMapShapeSeries.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FocusedMapShapeRoot = styled('path', {
+  name: 'MuiMapShape',
+  slot: 'Focused'
+})(({
+  theme
+}) => ({
+  fill: 'none',
+  stroke: (theme.vars ?? theme).palette.text.primary,
+  strokeWidth: 2,
+  pointerEvents: 'none'
+}));
+
+/**
+ * Renders an outline around the map shape currently focused through keyboard navigation.
+ */
+export function FocusedMapShape() {
+  const focusedItem = useFocusedItem();
+  const geoData = useGeoData();
+  const path = useGeoPath();
+  const featureIndexesByName = useGeoFeatureIndexesByName();
+  const series = useMapShapeSeries();
+  if (focusedItem?.type !== 'mapShape' || !geoData || !path) {
+    return null;
+  }
+  const seriesItem = series.find(item => item.id === focusedItem.seriesId);
+  if (!seriesItem || seriesItem.hidden) {
+    return null;
+  }
+  const dataItem = seriesItem.data[focusedItem.dataIndex];
+  if (!dataItem || dataItem.hidden) {
+    return null;
+  }
+  const featureIndexes = featureIndexesByName.get(dataItem.name);
+  if (featureIndexes === undefined || featureIndexes.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("g", {
+    "aria-hidden": true,
+    children: featureIndexes.map(featureIndex => {
+      const feature = geoData.features[featureIndex];
+      const d = path(feature);
+      if (!d) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx(FocusedMapShapeRoot, {
+        d: d
+      }, featureIndex);
+    })
+  });
+}

package/Map/GeoDataPlot.d.mts

@@ -0,0 +1,26 @@
+export interface GeoDataPlotProps {
+  className?: string;
+  /**
+   * Fill color applied to every feature path.
+   * @default 'currentColor'
+   */
+  fill?: string;
+  /**
+   * Stroke color applied to every feature path.
+   * @default 'none'
+   */
+  stroke?: string;
+  /**
+   * Stroke width applied to every feature path.
+   * @default 1
+   */
+  strokeWidth?: number;
+}
+/**
+ * Renders the registered `geoData` as SVG paths, using the registered `projection`
+ */
+declare function GeoDataPlot(props: GeoDataPlotProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace GeoDataPlot {
+  var propTypes: any;
+}
+export { GeoDataPlot };

package/Map/GeoDataPlot.d.ts

@@ -0,0 +1,26 @@
+export interface GeoDataPlotProps {
+  className?: string;
+  /**
+   * Fill color applied to every feature path.
+   * @default 'currentColor'
+   */
+  fill?: string;
+  /**
+   * Stroke color applied to every feature path.
+   * @default 'none'
+   */
+  stroke?: string;
+  /**
+   * Stroke width applied to every feature path.
+   * @default 1
+   */
+  strokeWidth?: number;
+}
+/**
+ * Renders the registered `geoData` as SVG paths, using the registered `projection`
+ */
+declare function GeoDataPlot(props: GeoDataPlotProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace GeoDataPlot {
+  var propTypes: any;
+}
+export { GeoDataPlot };

package/Map/GeoDataPlot.js

@@ -0,0 +1,65 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GeoDataPlot = GeoDataPlot;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useGeoData = require("../hooks/useGeoData");
+var _useGeoPath = require("../hooks/useGeoPath");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Renders the registered `geoData` as SVG paths, using the registered `projection`
+ */
+function GeoDataPlot(props) {
+  const {
+    className,
+    fill = 'currentColor',
+    stroke = 'none',
+    strokeWidth = 1
+  } = props;
+  const geoData = (0, _useGeoData.useGeoData)();
+  const path = (0, _useGeoPath.useGeoPath)();
+  if (!geoData || !path) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+    className: className,
+    children: geoData.features.map((feature, index) => {
+      const d = path(feature);
+      if (!d) {
+        return null;
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        d: d,
+        fill: fill,
+        stroke: stroke,
+        strokeWidth: strokeWidth
+      }, feature.id ?? index);
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? GeoDataPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  className: _propTypes.default.string,
+  /**
+   * Fill color applied to every feature path.
+   * @default 'currentColor'
+   */
+  fill: _propTypes.default.string,
+  /**
+   * Stroke color applied to every feature path.
+   * @default 'none'
+   */
+  stroke: _propTypes.default.string,
+  /**
+   * Stroke width applied to every feature path.
+   * @default 1
+   */
+  strokeWidth: _propTypes.default.number
+} : void 0;

package/Map/GeoDataPlot.mjs

@@ -0,0 +1,60 @@
+'use client';
+
+import PropTypes from 'prop-types';
+import { useGeoData } from "../hooks/useGeoData.mjs";
+import { useGeoPath } from "../hooks/useGeoPath.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Renders the registered `geoData` as SVG paths, using the registered `projection`
+ */
+function GeoDataPlot(props) {
+  const {
+    className,
+    fill = 'currentColor',
+    stroke = 'none',
+    strokeWidth = 1
+  } = props;
+  const geoData = useGeoData();
+  const path = useGeoPath();
+  if (!geoData || !path) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("g", {
+    className: className,
+    children: geoData.features.map((feature, index) => {
+      const d = path(feature);
+      if (!d) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx("path", {
+        d: d,
+        fill: fill,
+        stroke: stroke,
+        strokeWidth: strokeWidth
+      }, feature.id ?? index);
+    })
+  });
+}
+process.env.NODE_ENV !== "production" ? GeoDataPlot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  className: PropTypes.string,
+  /**
+   * Fill color applied to every feature path.
+   * @default 'currentColor'
+   */
+  fill: PropTypes.string,
+  /**
+   * Stroke color applied to every feature path.
+   * @default 'none'
+   */
+  stroke: PropTypes.string,
+  /**
+   * Stroke width applied to every feature path.
+   * @default 1
+   */
+  strokeWidth: PropTypes.number
+} : void 0;
+export { GeoDataPlot };

package/Map/Graticule.d.mts

@@ -0,0 +1 @@
+export declare function Graticule(props: Omit<React.SVGProps<SVGPathElement>, 'd'>): import("react/jsx-runtime").JSX.Element | null;

package/Map/Graticule.d.ts

@@ -0,0 +1 @@
+export declare function Graticule(props: Omit<React.SVGProps<SVGPathElement>, 'd'>): import("react/jsx-runtime").JSX.Element | null;

package/Map/Graticule.js

@@ -0,0 +1,30 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Graticule = Graticule;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _d3Geo = require("@mui/x-charts-vendor/d3-geo");
+var _useGeoData = require("../hooks/useGeoData");
+var _useGeoPath = require("../hooks/useGeoPath");
+var _jsxRuntime = require("react/jsx-runtime");
+function Graticule(props) {
+  const geoData = (0, _useGeoData.useGeoData)();
+  const path = (0, _useGeoPath.useGeoPath)();
+  if (!geoData || !path) {
+    return null;
+  }
+  const d = path((0, _d3Geo.geoGraticule10)());
+  if (!d) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("path", (0, _extends2.default)({
+    d: d,
+    fill: "none",
+    stroke: "black",
+    strokeWidth: 0.5
+  }, props));
+}

package/Map/Graticule.mjs

@@ -0,0 +1,24 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { geoGraticule10 } from '@mui/x-charts-vendor/d3-geo';
+import { useGeoData } from "../hooks/useGeoData.mjs";
+import { useGeoPath } from "../hooks/useGeoPath.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Graticule(props) {
+  const geoData = useGeoData();
+  const path = useGeoPath();
+  if (!geoData || !path) {
+    return null;
+  }
+  const d = path(geoGraticule10());
+  if (!d) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("path", _extends({
+    d: d,
+    fill: "none",
+    stroke: "black",
+    strokeWidth: 0.5
+  }, props));
+}

package/Map/MapShape.d.mts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { type SeriesId } from '@mui/x-charts/internals';
+export type MapShapeProps = Omit<React.SVGProps<SVGPathElement>, 'ref'> & {
+  seriesId: SeriesId;
+  dataIndex: number;
+  d: string;
+  color: string;
+};
+declare function MapShape(props: MapShapeProps): import("react/jsx-runtime").JSX.Element;
+export { MapShape };

package/Map/MapShape.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { type SeriesId } from '@mui/x-charts/internals';
+export type MapShapeProps = Omit<React.SVGProps<SVGPathElement>, 'ref'> & {
+  seriesId: SeriesId;
+  dataIndex: number;
+  d: string;
+  color: string;
+};
+declare function MapShape(props: MapShapeProps): import("react/jsx-runtime").JSX.Element;
+export { MapShape };

package/Map/MapShape.js

@@ -0,0 +1,55 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MapShape = MapShape;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _internals = require("@mui/x-charts/internals");
+var _hooks = require("../hooks");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["seriesId", "dataIndex", "d", "color", "onClick"];
+const MapShapeRoot = (0, _styles.styled)('path', {
+  name: 'MuiMapShape',
+  slot: 'Root'
+})({
+  transitionProperty: 'opacity, fill, filter',
+  transitionDuration: '50ms',
+  transitionTimingFunction: 'ease-in'
+});
+function MapShape(props) {
+  const {
+      seriesId,
+      dataIndex,
+      d,
+      color,
+      onClick
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const identifier = React.useMemo(() => ({
+    type: 'mapShape',
+    seriesId,
+    dataIndex
+  }), [seriesId, dataIndex]);
+  const interactionProps = (0, _internals.useInteractionItemProps)(identifier);
+  const highlightState = (0, _hooks.useItemHighlightState)(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MapShapeRoot, (0, _extends2.default)({
+    d: d,
+    fill: color,
+    onClick: onClick,
+    cursor: onClick ? 'pointer' : 'unset',
+    "data-index": dataIndex,
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined,
+    filter: isHighlighted ? 'brightness(120%)' : undefined,
+    opacity: isFaded ? 0.3 : 1
+  }, other, interactionProps));
+}

package/Map/MapShape.mjs

@@ -0,0 +1,49 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["seriesId", "dataIndex", "d", "color", "onClick"];
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { useInteractionItemProps } from '@mui/x-charts/internals';
+import { useItemHighlightState } from "../hooks/index.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const MapShapeRoot = styled('path', {
+  name: 'MuiMapShape',
+  slot: 'Root'
+})({
+  transitionProperty: 'opacity, fill, filter',
+  transitionDuration: '50ms',
+  transitionTimingFunction: 'ease-in'
+});
+function MapShape(props) {
+  const {
+      seriesId,
+      dataIndex,
+      d,
+      color,
+      onClick
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const identifier = React.useMemo(() => ({
+    type: 'mapShape',
+    seriesId,
+    dataIndex
+  }), [seriesId, dataIndex]);
+  const interactionProps = useInteractionItemProps(identifier);
+  const highlightState = useItemHighlightState(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
+  return /*#__PURE__*/_jsx(MapShapeRoot, _extends({
+    d: d,
+    fill: color,
+    onClick: onClick,
+    cursor: onClick ? 'pointer' : 'unset',
+    "data-index": dataIndex,
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined,
+    filter: isHighlighted ? 'brightness(120%)' : undefined,
+    opacity: isFaded ? 0.3 : 1
+  }, other, interactionProps));
+}
+export { MapShape };

package/Map/MapShapePlot.d.mts

@@ -0,0 +1,21 @@
+export interface MapShapePlotProps {
+  className?: string;
+  /**
+   * Fill color applied to every feature path. Overrides item and series colors.
+   */
+  fill?: string;
+  /**
+   * Stroke color applied to every feature path.
+   * @default 'none'
+   */
+  stroke?: string;
+  /**
+   * Stroke width applied to every feature path.
+   * @default 1
+   */
+  strokeWidth?: number;
+}
+/**
+ * Renders series mapShape items.
+ */
+export declare function MapShapePlot(props: MapShapePlotProps): import("react/jsx-runtime").JSX.Element | null;

package/Map/MapShapePlot.d.ts

@@ -0,0 +1,21 @@
+export interface MapShapePlotProps {
+  className?: string;
+  /**
+   * Fill color applied to every feature path. Overrides item and series colors.
+   */
+  fill?: string;
+  /**
+   * Stroke color applied to every feature path.
+   * @default 'none'
+   */
+  stroke?: string;
+  /**
+   * Stroke width applied to every feature path.
+   * @default 1
+   */
+  strokeWidth?: number;
+}
+/**
+ * Renders series mapShape items.
+ */
+export declare function MapShapePlot(props: MapShapePlotProps): import("react/jsx-runtime").JSX.Element | null;

package/Map/MapShapePlot.js

@@ -0,0 +1,86 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MapShapePlot = MapShapePlot;
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("@mui/x-charts/hooks");
+var _useGeoData = require("../hooks/useGeoData");
+var _useGeoPath = require("../hooks/useGeoPath");
+var _useMapShapeSeries = require("../hooks/useMapShapeSeries");
+var _useGeoFeatureIndexesByName = require("../hooks/useGeoFeatureIndexesByName");
+var _MapShape = require("./MapShape");
+var _FocusedMapShape = require("./FocusedMapShape");
+var _seriesConfig = require("./seriesConfig");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Renders series mapShape items.
+ */
+function MapShapePlot(props) {
+  const {
+    className,
+    fill,
+    stroke = 'none',
+    strokeWidth = 1
+  } = props;
+  const geoData = (0, _useGeoData.useGeoData)();
+  const path = (0, _useGeoPath.useGeoPath)();
+  const series = (0, _useMapShapeSeries.useMapShapeSeries)();
+  const featureIndexesByName = (0, _useGeoFeatureIndexesByName.useGeoFeatureIndexesByName)();
+  const {
+    zAxis,
+    zAxisIds
+  } = (0, _hooks.useZAxes)();
+  if (!geoData || !path || series.length === 0) {
+    return null;
+  }
+  const defaultZAxisId = zAxisIds[0];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+    className: className,
+    children: [series.map(seriesItem => {
+      const {
+        data,
+        id,
+        hidden,
+        colorAxisId
+      } = seriesItem;
+      if (hidden) {
+        return null;
+      }
+      const colorAxis = zAxis[colorAxisId ?? defaultZAxisId];
+      const colorGetter = _seriesConfig.mapShapeSeriesConfig.colorProcessor(seriesItem, undefined, undefined, colorAxis);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+        "data-series": id,
+        children: data.map((item, dataIndex) => {
+          if (item.hidden) {
+            return null;
+          }
+          const featureIndexes = featureIndexesByName.get(item.name);
+          if (featureIndexes === undefined || featureIndexes.length === 0) {
+            return null;
+          }
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+            children: featureIndexes.map(featureIndex => {
+              const feature = geoData.features[featureIndex];
+              const d = path(feature);
+              if (!d) {
+                return null;
+              }
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MapShape.MapShape, {
+                seriesId: id,
+                dataIndex: dataIndex,
+                d: d,
+                color: fill ?? colorGetter(dataIndex),
+                stroke: stroke,
+                strokeWidth: strokeWidth
+              }, featureIndex);
+            })
+          }, item.name);
+        })
+      }, id);
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedMapShape.FocusedMapShape, {})]
+  });
+}