@mui/x-charts 9.0.4 → 9.2.0

package/ChartsAxisHighlightValue/ChartsAxisHighlightValueItem.mjs

@@ -0,0 +1,80 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { shouldForwardProp } from '@mui/system/createStyled';
+import { useUtilityClasses } from "./chartsAxisHighlightValueClasses.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ChartsAxisHighlightValueText = styled('div', {
+  name: 'MuiChartsAxisHighlightValue',
+  slot: 'Root',
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'position'
+})(({
+  theme
+}) => _extends({}, theme.typography.caption, {
+  padding: theme.spacing(0.5, 1),
+  border: `solid ${theme.palette.divider} 1px`,
+  backgroundColor: theme.palette.background.paper,
+  '--clamped-offset': 'calc(-1*min(var(--min),max(calc(100% - var(--max)),50%)))',
+  variants: [{
+    props: {
+      position: 'top'
+    },
+    style: {
+      translate: 'var(--clamped-offset) -100%'
+    }
+  }, {
+    props: {
+      position: 'bottom'
+    },
+    style: {
+      translate: 'var(--clamped-offset) 0'
+    }
+  }, {
+    props: {
+      position: 'left'
+    },
+    style: {
+      translate: '-100% var(--clamped-offset)'
+    }
+  }, {
+    props: {
+      position: 'right'
+    },
+    style: {
+      translate: '0 var(--clamped-offset)'
+    }
+  }]
+}));
+function ChartsAxisHighlightValueItem(props) {
+  const {
+    x,
+    y,
+    position,
+    formattedValue,
+    minCoord,
+    maxCoord,
+    space,
+    sx
+  } = props;
+  const classes = useUtilityClasses({
+    position
+  });
+  const isXAxis = position === 'top' || position === 'bottom';
+  return /*#__PURE__*/_jsx(ChartsAxisHighlightValueText, {
+    className: classes.root,
+    position: position,
+    style: {
+      position: 'absolute',
+      top: y,
+      left: x,
+      '--min': `${isXAxis ? x - minCoord : y - minCoord}px`,
+      '--max': `${isXAxis ? maxCoord - x : maxCoord - y}px`,
+      '--space': `${space}px`
+    },
+    sx: sx,
+    children: formattedValue
+  });
+}
+export { ChartsAxisHighlightValueItem };

package/ChartsAxisHighlightValue/chartsAxisHighlightValueClasses.d.mts

@@ -0,0 +1,18 @@
+export interface ChartsAxisHighlightValueClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the top axis highlight. */
+  top: string;
+  /** Styles applied to the bottom axis highlight. */
+  bottom: string;
+  /** Styles applied to the left axis highlight. */
+  left: string;
+  /** Styles applied to the right axis highlight. */
+  right: string;
+}
+export type ChartsAxisHighlightValueClassKey = keyof ChartsAxisHighlightValueClasses;
+export declare function getChartsAxisHighlightValueUtilityClass(slot: string): string;
+export declare const useUtilityClasses: (ownerState: {
+  position: "top" | "right" | "bottom" | "left";
+}) => Record<"root", string>;
+export declare const chartsAxisHighlightValueClasses: ChartsAxisHighlightValueClasses;

package/ChartsAxisHighlightValue/chartsAxisHighlightValueClasses.d.ts

@@ -0,0 +1,18 @@
+export interface ChartsAxisHighlightValueClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the top axis highlight. */
+  top: string;
+  /** Styles applied to the bottom axis highlight. */
+  bottom: string;
+  /** Styles applied to the left axis highlight. */
+  left: string;
+  /** Styles applied to the right axis highlight. */
+  right: string;
+}
+export type ChartsAxisHighlightValueClassKey = keyof ChartsAxisHighlightValueClasses;
+export declare function getChartsAxisHighlightValueUtilityClass(slot: string): string;
+export declare const useUtilityClasses: (ownerState: {
+  position: "top" | "right" | "bottom" | "left";
+}) => Record<"root", string>;
+export declare const chartsAxisHighlightValueClasses: ChartsAxisHighlightValueClasses;

package/ChartsAxisHighlightValue/chartsAxisHighlightValueClasses.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.chartsAxisHighlightValueClasses = void 0;
+exports.getChartsAxisHighlightValueUtilityClass = getChartsAxisHighlightValueUtilityClass;
+exports.useUtilityClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+function getChartsAxisHighlightValueUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartsAxisHighlightValue', slot);
+}
+const useUtilityClasses = ownerState => {
+  const {
+    position
+  } = ownerState;
+  const slots = {
+    root: ['root', position]
+  };
+  return (0, _composeClasses.default)(slots, getChartsAxisHighlightValueUtilityClass);
+};
+exports.useUtilityClasses = useUtilityClasses;
+const chartsAxisHighlightValueClasses = exports.chartsAxisHighlightValueClasses = (0, _generateUtilityClasses.default)('MuiChartsAxisHighlightValue', ['root', 'top', 'bottom', 'left', 'right']);

package/ChartsAxisHighlightValue/chartsAxisHighlightValueClasses.mjs

@@ -0,0 +1,16 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import composeClasses from '@mui/utils/composeClasses';
+export function getChartsAxisHighlightValueUtilityClass(slot) {
+  return generateUtilityClass('MuiChartsAxisHighlightValue', slot);
+}
+export const useUtilityClasses = ownerState => {
+  const {
+    position
+  } = ownerState;
+  const slots = {
+    root: ['root', position]
+  };
+  return composeClasses(slots, getChartsAxisHighlightValueUtilityClass);
+};
+export const chartsAxisHighlightValueClasses = generateUtilityClasses('MuiChartsAxisHighlightValue', ['root', 'top', 'bottom', 'left', 'right']);

package/ChartsAxisHighlightValue/index.d.mts

@@ -0,0 +1 @@
+export * from "./ChartsAxisHighlightValue.mjs";

package/ChartsAxisHighlightValue/index.d.ts

@@ -0,0 +1 @@
+export * from "./ChartsAxisHighlightValue.js";

package/ChartsAxisHighlightValue/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsAxisHighlightValue = require("./ChartsAxisHighlightValue");
+Object.keys(_ChartsAxisHighlightValue).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsAxisHighlightValue[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsAxisHighlightValue[key];
+    }
+  });
+});

package/ChartsAxisHighlightValue/index.mjs

@@ -0,0 +1 @@
+export * from "./ChartsAxisHighlightValue.mjs";

package/ChartsAxisHighlightValue/useAxisHighlightValue.d.mts

@@ -0,0 +1,14 @@
+import type { AxisId } from "../models/axis.mjs";
+import type { ChartsAxisHighlightValuePosition } from "./ChartsAxisHighlightValue.mjs";
+import type { ChartsAxisHighlightValueItemProps } from "./ChartsAxisHighlightValueItem.mjs";
+export interface AxisHighlightValueItem extends ChartsAxisHighlightValueItemProps {
+  key: string;
+}
+export interface UseAxisHighlightValueParams {
+  axisDirection: 'x' | 'y';
+  axisId?: AxisId;
+  labelPosition?: ChartsAxisHighlightValuePosition;
+  value?: number | Date | string | null;
+  valueFormatter?: (value: number | Date | string) => string;
+}
+export declare function useAxisHighlightValue(params: UseAxisHighlightValueParams): AxisHighlightValueItem[];

package/ChartsAxisHighlightValue/useAxisHighlightValue.d.ts

@@ -0,0 +1,14 @@
+import type { AxisId } from "../models/axis.js";
+import type { ChartsAxisHighlightValuePosition } from "./ChartsAxisHighlightValue.js";
+import type { ChartsAxisHighlightValueItemProps } from "./ChartsAxisHighlightValueItem.js";
+export interface AxisHighlightValueItem extends ChartsAxisHighlightValueItemProps {
+  key: string;
+}
+export interface UseAxisHighlightValueParams {
+  axisDirection: 'x' | 'y';
+  axisId?: AxisId;
+  labelPosition?: ChartsAxisHighlightValuePosition;
+  value?: number | Date | string | null;
+  valueFormatter?: (value: number | Date | string) => string;
+}
+export declare function useAxisHighlightValue(params: UseAxisHighlightValueParams): AxisHighlightValueItem[];

package/ChartsAxisHighlightValue/useAxisHighlightValue.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAxisHighlightValue = useAxisHighlightValue;
+var _getValueToPositionMapper = require("../hooks/getValueToPositionMapper");
+var _hooks = require("../hooks");
+var _useStore = require("../internals/store/useStore");
+var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
+function getAxisValueFormatter(axis, valueFormatter) {
+  if (valueFormatter) {
+    return valueFormatter;
+  }
+  if (axis.valueFormatter) {
+    return v => axis.valueFormatter(v, {
+      location: 'tooltip',
+      scale: axis.scale
+    });
+  }
+  return v => `${v}`;
+}
+const EMPTY_ARRAY = [];
+function useAxisHighlightValue(params) {
+  const {
+    axisDirection,
+    axisId,
+    labelPosition = 'end',
+    value,
+    valueFormatter
+  } = params;
+  const {
+    top,
+    left,
+    width,
+    height,
+    right,
+    bottom
+  } = (0, _hooks.useDrawingArea)();
+  const store = (0, _useStore.useStore)();
+  const highlightSelector = axisDirection === 'x' ? _useChartCartesianAxis.selectorChartsHighlightXAxisValue : _useChartCartesianAxis.selectorChartsHighlightYAxisValue;
+  const axisSelector = axisDirection === 'x' ? _useChartCartesianAxis.selectorChartXAxis : _useChartCartesianAxis.selectorChartYAxis;
+  const axisHighlightValues = store.use(highlightSelector);
+  const axes = store.use(axisSelector);
+  if (labelPosition === 'none') {
+    return EMPTY_ARRAY;
+  }
+  let items;
+  if (value !== undefined && value !== null) {
+    const targetAxisId = axisId ?? axes.axisIds[0];
+    items = [{
+      axisId: targetAxisId,
+      value
+    }];
+  } else {
+    items = axisHighlightValues.filter(item => (axisId === undefined || item.axisId === axisId) && item.value !== undefined).map(item => ({
+      axisId: item.axisId,
+      value: item.value
+    }));
+  }
+  const result = [];
+  for (const {
+    axisId: itemAxisId,
+    value: itemValue
+  } of items) {
+    const axis = axes.axis[itemAxisId];
+    if (!axis) {
+      continue;
+    }
+    const scale = axis.scale;
+    const position = (0, _getValueToPositionMapper.getValueToPositionMapper)(scale)(itemValue);
+    if (!Number.isFinite(position)) {
+      continue;
+    }
+    const format = getAxisValueFormatter(axis, valueFormatter);
+    const formattedValue = format(itemValue);
+    if (axisDirection === 'x') {
+      if (labelPosition === 'start' || labelPosition === 'both') {
+        result.push({
+          key: `${itemAxisId}-${String(itemValue)}-start`,
+          x: position,
+          y: top,
+          formattedValue,
+          position: 'top',
+          minCoord: left,
+          maxCoord: left + width,
+          space: top
+        });
+      }
+      if (labelPosition === 'end' || labelPosition === 'both') {
+        result.push({
+          key: `${itemAxisId}-${String(itemValue)}-end`,
+          x: position,
+          y: top + height,
+          formattedValue,
+          position: 'bottom',
+          minCoord: left,
+          maxCoord: left + width,
+          space: bottom
+        });
+      }
+    } else {
+      if (labelPosition === 'start' || labelPosition === 'both') {
+        result.push({
+          key: `${itemAxisId}-${String(itemValue)}-start`,
+          x: left,
+          y: position,
+          formattedValue,
+          position: 'left',
+          minCoord: top,
+          maxCoord: top + height,
+          space: left
+        });
+      }
+      if (labelPosition === 'end' || labelPosition === 'both') {
+        result.push({
+          key: `${itemAxisId}-${String(itemValue)}-end`,
+          x: left + width,
+          y: position,
+          formattedValue,
+          position: 'right',
+          minCoord: top,
+          maxCoord: top + height,
+          space: right
+        });
+      }
+    }
+  }
+  return result;
+}

package/ChartsAxisHighlightValue/useAxisHighlightValue.mjs

@@ -0,0 +1,124 @@
+import { getValueToPositionMapper } from "../hooks/getValueToPositionMapper.mjs";
+import { useDrawingArea } from "../hooks/index.mjs";
+import { useStore } from "../internals/store/useStore.mjs";
+import { selectorChartsHighlightXAxisValue, selectorChartsHighlightYAxisValue, selectorChartXAxis, selectorChartYAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
+function getAxisValueFormatter(axis, valueFormatter) {
+  if (valueFormatter) {
+    return valueFormatter;
+  }
+  if (axis.valueFormatter) {
+    return v => axis.valueFormatter(v, {
+      location: 'tooltip',
+      scale: axis.scale
+    });
+  }
+  return v => `${v}`;
+}
+const EMPTY_ARRAY = [];
+export function useAxisHighlightValue(params) {
+  const {
+    axisDirection,
+    axisId,
+    labelPosition = 'end',
+    value,
+    valueFormatter
+  } = params;
+  const {
+    top,
+    left,
+    width,
+    height,
+    right,
+    bottom
+  } = useDrawingArea();
+  const store = useStore();
+  const highlightSelector = axisDirection === 'x' ? selectorChartsHighlightXAxisValue : selectorChartsHighlightYAxisValue;
+  const axisSelector = axisDirection === 'x' ? selectorChartXAxis : selectorChartYAxis;
+  const axisHighlightValues = store.use(highlightSelector);
+  const axes = store.use(axisSelector);
+  if (labelPosition === 'none') {
+    return EMPTY_ARRAY;
+  }
+  let items;
+  if (value !== undefined && value !== null) {
+    const targetAxisId = axisId ?? axes.axisIds[0];
+    items = [{
+      axisId: targetAxisId,
+      value
+    }];
+  } else {
+    items = axisHighlightValues.filter(item => (axisId === undefined || item.axisId === axisId) && item.value !== undefined).map(item => ({
+      axisId: item.axisId,
+      value: item.value
+    }));
+  }
+  const result = [];
+  for (const {
+    axisId: itemAxisId,
+    value: itemValue
+  } of items) {
+    const axis = axes.axis[itemAxisId];
+    if (!axis) {
+      continue;
+    }
+    const scale = axis.scale;
+    const position = getValueToPositionMapper(scale)(itemValue);
+    if (!Number.isFinite(position)) {
+      continue;
+    }
+    const format = getAxisValueFormatter(axis, valueFormatter);
+    const formattedValue = format(itemValue);
+    if (axisDirection === 'x') {
+      if (labelPosition === 'start' || labelPosition === 'both') {
+        result.push({
+          key: `${itemAxisId}-${String(itemValue)}-start`,
+          x: position,
+          y: top,
+          formattedValue,
+          position: 'top',
+          minCoord: left,
+          maxCoord: left + width,
+          space: top
+        });
+      }
+      if (labelPosition === 'end' || labelPosition === 'both') {
+        result.push({
+          key: `${itemAxisId}-${String(itemValue)}-end`,
+          x: position,
+          y: top + height,
+          formattedValue,
+          position: 'bottom',
+          minCoord: left,
+          maxCoord: left + width,
+          space: bottom
+        });
+      }
+    } else {
+      if (labelPosition === 'start' || labelPosition === 'both') {
+        result.push({
+          key: `${itemAxisId}-${String(itemValue)}-start`,
+          x: left,
+          y: position,
+          formattedValue,
+          position: 'left',
+          minCoord: top,
+          maxCoord: top + height,
+          space: left
+        });
+      }
+      if (labelPosition === 'end' || labelPosition === 'both') {
+        result.push({
+          key: `${itemAxisId}-${String(itemValue)}-end`,
+          x: left + width,
+          y: position,
+          formattedValue,
+          position: 'right',
+          minCoord: top,
+          maxCoord: top + height,
+          space: right
+        });
+      }
+    }
+  }
+  return result;
+}