@mui/x-charts-premium 9.3.0 → 9.5.0

package/HeatmapPremium/HeatmapPremium.mjs

@@ -147,12 +147,21 @@ process.env.NODE_ENV !== "production" ? HeatmapPremium.propTypes = {
   /**
    * The list of zoom data related to each axis.
    * Used to initialize the zoom in a specific configuration without controlling it.
+   *
+   * Each entry is either explicit zoom percentages (`{ axisId, start, end }`) or a
+   * range value (`{ axisId, value }`) resolved against the axis domain.
    */
-  initialZoom: PropTypes.arrayOf(PropTypes.shape({
+  initialZoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     end: PropTypes.number.isRequired,
     start: PropTypes.number.isRequired
-  })),
+  }), PropTypes.shape({
+    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(Date).isRequired), PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func, PropTypes.shape({
+      step: PropTypes.number,
+      unit: PropTypes.oneOf(['day', 'hour', 'microsecond', 'millisecond', 'minute', 'month', 'second', 'week', 'year']).isRequired
+    })])
+  })]).isRequired),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -308,6 +317,27 @@ process.env.NODE_ENV !== "production" ? HeatmapPremium.propTypes = {
     id: PropTypes.string,
     max: PropTypes.number,
     min: PropTypes.number,
+    sizeMap: PropTypes.oneOfType([PropTypes.shape({
+      interpolator: PropTypes.oneOf(['linear', 'log', 'sqrt']),
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      size: PropTypes.arrayOf(PropTypes.number.isRequired).isRequired,
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      min: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+      size: PropTypes.func.isRequired,
+      type: PropTypes.oneOf(['continuous']).isRequired
+    }), PropTypes.shape({
+      sizes: PropTypes.arrayOf(PropTypes.number).isRequired,
+      thresholds: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]).isRequired).isRequired,
+      type: PropTypes.oneOf(['piecewise']).isRequired
+    }), PropTypes.shape({
+      sizes: PropTypes.arrayOf(PropTypes.number).isRequired,
+      type: PropTypes.oneOf(['ordinal']).isRequired,
+      unknownSize: PropTypes.number,
+      values: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.string]).isRequired)
+    })]),
     valueGetter: PropTypes.func
   })),
   /**

package/Map/FocusedMapShape.d.mts

@@ -0,0 +1,4 @@
+/**
+ * Renders an outline around the map shape currently focused through keyboard navigation.
+ */
+export declare function FocusedMapShape(): import("react/jsx-runtime").JSX.Element | null;

package/Map/FocusedMapShape.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Renders an outline around the map shape currently focused through keyboard navigation.
+ */
+export declare function FocusedMapShape(): import("react/jsx-runtime").JSX.Element | null;

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;