@mui/x-charts 8.8.0 → 8.9.2

package/esm/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js

@@ -4,7 +4,7 @@ import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowComp
 export const useChartInteraction = ({
   store
 }) => {
-  const cleanInteraction = useEventCallback(() => {
+  const cleanInteraction = useEventCallback(function cleanInteraction() {
     store.update(prev => {
       return _extends({}, prev, {
         interaction: {
@@ -14,7 +14,7 @@ export const useChartInteraction = ({
       });
     });
   });
-  const removeItemInteraction = useEventCallback(itemToRemove => {
+  const removeItemInteraction = useEventCallback(function removeItemInteraction(itemToRemove) {
     store.update(prev => {
       const prevItem = prev.interaction.item;
       if (!itemToRemove) {
@@ -36,7 +36,7 @@ export const useChartInteraction = ({
       });
     });
   });
-  const setItemInteraction = useEventCallback(newItem => {
+  const setItemInteraction = useEventCallback(function setItemInteraction(newItem) {
     store.update(prev => {
       if (fastObjectShallowCompare(prev.interaction.item, newItem)) {
         return prev;
@@ -48,7 +48,7 @@ export const useChartInteraction = ({
       });
     });
   });
-  const setPointerCoordinate = useEventCallback(coordinate => {
+  const setPointerCoordinate = useEventCallback(function setPointerCoordinate(coordinate) {
     store.update(prev => _extends({}, prev, {
       interaction: _extends({}, prev.interaction, {
         pointer: coordinate

package/esm/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.js

@@ -10,6 +10,8 @@ import { selectorChartsInteractionIsInitialized } from "../useChartInteraction/i
 import { selectorChartPolarCenter, selectorChartRadiusAxis, selectorChartRotationAxis } from "./useChartPolarAxis.selectors.js";
 import { getSVGPoint } from "../../../getSVGPoint.js";
 import { generatePolar2svg, generateSvg2polar, generateSvg2rotation } from "./coordinateTransformation.js";
+import { getAxisIndex } from "./getAxisIndex.js";
+import { selectorChartSeriesProcessed } from "../../corePlugins/useChartSeries/index.js";
 export const useChartPolarAxis = ({
   params,
   store,
@@ -30,6 +32,7 @@ export const useChartPolarAxis = ({
     }
   }
   const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const processedSeries = useSelector(store, selectorChartSeriesProcessed);
   const center = useSelector(store, selectorChartPolarCenter);
   const isInteractionEnabled = useSelector(store, selectorChartsInteractionIsInitialized);
   const {
@@ -156,6 +159,45 @@ export const useChartPolarAxis = ({
       pressEndHandler.cleanup();
     };
   }, [svgRef, store, center, radiusAxisWithScale, usedRadiusAxisId, rotationAxisWithScale, usedRotationAxisId, instance, params.disableAxisListener, isInteractionEnabled, svg2rotation]);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    const onAxisClick = params.onAxisClick;
+    if (element === null || !onAxisClick) {
+      return () => {};
+    }
+    const axisClickHandler = instance.addInteractionListener('tap', event => {
+      let dataIndex = null;
+      let isRotationAxis = false;
+      const svgPoint = getSVGPoint(element, event.detail.srcEvent);
+      const rotation = generateSvg2rotation(center)(svgPoint.x, svgPoint.y);
+      const rotationIndex = getAxisIndex(rotationAxisWithScale[usedRotationAxisId], rotation);
+      isRotationAxis = rotationIndex !== -1;
+      dataIndex = isRotationAxis ? rotationIndex : null; // radius index is not yet implemented.
+
+      const USED_AXIS_ID = isRotationAxis ? usedRotationAxisId : usedRadiusAxisId;
+      if (dataIndex == null || dataIndex === -1) {
+        return;
+      }
+
+      // The .data exist because otherwise the dataIndex would be null or -1.
+      const axisValue = (isRotationAxis ? rotationAxisWithScale : radiusAxisWithScale)[USED_AXIS_ID].data[dataIndex];
+      const seriesValues = {};
+      Object.keys(processedSeries).filter(seriesType => seriesType === 'radar').forEach(seriesType => {
+        processedSeries[seriesType]?.seriesOrder.forEach(seriesId => {
+          const seriesItem = processedSeries[seriesType].series[seriesId];
+          seriesValues[seriesId] = seriesItem.data[dataIndex];
+        });
+      });
+      onAxisClick(event.detail.srcEvent, {
+        dataIndex,
+        axisValue,
+        seriesValues
+      });
+    });
+    return () => {
+      axisClickHandler.cleanup();
+    };
+  }, [center, instance, params.onAxisClick, processedSeries, radiusAxisWithScale, rotationAxisWithScale, svgRef, usedRadiusAxisId, usedRotationAxisId]);
   return {
     instance: {
       svg2polar,
@@ -168,7 +210,8 @@ useChartPolarAxis.params = {
   rotationAxis: true,
   radiusAxis: true,
   dataset: true,
-  disableAxisListener: true
+  disableAxisListener: true,
+  onAxisClick: true
 };
 useChartPolarAxis.getInitialState = params => ({
   polarAxis: {

package/esm/internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarAxis.types.d.ts

@@ -1,6 +1,6 @@
 import { ChartPluginSignature } from "../../models/index.js";
 import { ChartSeriesType, DatasetType } from "../../../../models/seriesType/config.js";
-import { ScaleName, AxisConfig, ChartsRotationAxisProps, ChartsRadiusAxisProps, RadiusAxis, RotationAxis } from "../../../../models/axis.js";
+import { ScaleName, AxisConfig, ChartsRotationAxisProps, ChartsRadiusAxisProps, RadiusAxis, RotationAxis, ChartsAxisData } from "../../../../models/axis.js";
 import { UseChartSeriesSignature } from "../../corePlugins/useChartSeries/index.js";
 import { UseChartInteractionSignature } from "../useChartInteraction/index.js";
 export interface UseChartPolarAxisInstance {
@@ -49,6 +49,13 @@ export interface UseChartPolarAxisParameters {
    * @default false
    */
   disableAxisListener?: boolean;
+  /**
+   * The function called for onClick events.
+   * The second argument contains information about all line/bar elements at the current mouse position.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
+   */
+  onAxisClick?: (event: MouseEvent, data: null | ChartsAxisData) => void;
 }
 export type UseChartPolarAxisDefaultizedParameters = UseChartPolarAxisParameters & {};
 export interface UseChartPolarAxisState {

package/esm/internals/plugins/featurePlugins/useChartVoronoi/useChartVoronoi.js

@@ -67,22 +67,24 @@ export const useChartVoronoi = ({
       const yScale = yAxis[yAxisId ?? defaultYAxisId].scale;
       const getXPosition = getValueToPositionMapper(xScale);
       const getYPosition = getValueToPositionMapper(yScale);
-      const seriesPoints = data.flatMap(({
-        x,
-        y
-      }) => {
+      const seriesPoints = [];
+      const seriesIndexes = [];
+      for (let dataIndex = 0; dataIndex < data.length; dataIndex += 1) {
+        const {
+          x,
+          y
+        } = data[dataIndex];
         const pointX = getXPosition(x);
         const pointY = getYPosition(y);
-        if (!instance.isPointInside(pointX, pointY)) {
-          // If the point is not displayed we move them to a trash coordinate.
-          // This avoids managing index mapping before/after filtering.
-          // The trash point is far enough such that any point in the drawing area will be closer to the mouse than the trash coordinate.
-          return [-drawingArea.width, -drawingArea.height];
+        if (instance.isPointInside(pointX, pointY)) {
+          seriesPoints.push(pointX);
+          seriesPoints.push(pointY);
+          seriesIndexes.push(dataIndex);
         }
-        return [pointX, pointY];
-      });
+      }
       voronoiRef.current[seriesId] = {
         seriesId,
+        seriesIndexes,
         startIndex: points.length,
         endIndex: points.length + seriesPoints.length
       };
@@ -117,7 +119,10 @@ export const useChartVoronoi = ({
       if (closestSeries === undefined) {
         return 'no-point-found';
       }
-      const dataIndex = (2 * closestPointIndex - voronoiRef.current[closestSeries.seriesId].startIndex) / 2;
+
+      // The point index in the series with id=closestSeries.seriesId.
+      const seriesPointIndex = (2 * closestPointIndex - voronoiRef.current[closestSeries.seriesId].startIndex) / 2;
+      const dataIndex = voronoiRef.current[closestSeries.seriesId].seriesIndexes[seriesPointIndex];
       if (voronoiMaxRadius !== undefined) {
         const pointX = delauneyRef.current.points[2 * closestPointIndex];
         const pointY = delauneyRef.current.points[2 * closestPointIndex + 1];

package/esm/internals/symlogScale.d.ts

@@ -0,0 +1,2 @@
+import { NumberValue, ScaleSymLog } from '@mui/x-charts-vendor/d3-scale';
+export declare function scaleSymlog<Range, Output = Range, Unknown = never>(_domain: Iterable<NumberValue>, _range: Iterable<Range>): ScaleSymLog<Range, Output, Unknown>;

package/esm/internals/symlogScale.js

@@ -0,0 +1,94 @@
+import { scaleSymlog as originalScaleSymlog, scaleLog, scaleLinear } from '@mui/x-charts-vendor/d3-scale';
+export function scaleSymlog(_domain, _range) {
+  const scale = originalScaleSymlog(_domain, _range);
+  const originalTicks = scale.ticks;
+  const {
+    negativeScale,
+    linearScale,
+    positiveScale
+  } = generateScales(scale);
+
+  // Workaround for https://github.com/d3/d3-scale/issues/162
+  scale.ticks = count => {
+    const ticks = originalTicks(count);
+    const constant = scale.constant();
+    let negativeLogTickCount = 0;
+    let linearTickCount = 0;
+    let positiveLogTickCount = 0;
+    ticks.forEach(tick => {
+      if (tick > -constant && tick < constant) {
+        linearTickCount += 1;
+      }
+      if (tick <= -constant) {
+        negativeLogTickCount += 1;
+      }
+      if (tick >= constant) {
+        positiveLogTickCount += 1;
+      }
+    });
+    const finalTicks = [];
+    if (negativeLogTickCount > 0) {
+      finalTicks.push(...negativeScale.ticks(negativeLogTickCount));
+    }
+    if (linearTickCount > 0) {
+      const linearTicks = linearScale.ticks(linearTickCount);
+      if (finalTicks.at(-1) === linearTicks[0]) {
+        finalTicks.push(...linearTicks.slice(1));
+      } else {
+        finalTicks.push(...linearTicks);
+      }
+    }
+    if (positiveLogTickCount > 0) {
+      const positiveTicks = positiveScale.ticks(positiveLogTickCount);
+      if (finalTicks.at(-1) === positiveTicks[0]) {
+        finalTicks.push(...positiveTicks.slice(1));
+      } else {
+        finalTicks.push(...positiveTicks);
+      }
+    }
+    return finalTicks;
+  };
+  scale.tickFormat = (count = 10, specifier) => {
+    // Calculates the proportion of the domain that each scale occupies, and use that ratio to determine the number of ticks for each scale.
+    const constant = scale.constant();
+    const [start, end] = scale.domain();
+    const extent = end - start;
+    const negativeScaleDomain = negativeScale.domain();
+    const negativeScaleExtent = negativeScaleDomain[1] - negativeScaleDomain[0];
+    const negativeScaleRatio = extent === 0 ? 0 : negativeScaleExtent / extent;
+    const negativeScaleTickCount = negativeScaleRatio * count;
+    const linearScaleDomain = linearScale.domain();
+    const linearScaleExtent = linearScaleDomain[1] - linearScaleDomain[0];
+    const linearScaleRatio = extent === 0 ? 0 : linearScaleExtent / extent;
+    const linearScaleTickCount = linearScaleRatio * count;
+    const positiveScaleDomain = positiveScale.domain();
+    const positiveScaleExtent = positiveScaleDomain[1] - positiveScaleDomain[0];
+    const positiveScaleRatio = extent === 0 ? 0 : positiveScaleExtent / extent;
+    const positiveScaleTickCount = positiveScaleRatio * count;
+    const negativeTickFormat = negativeScale.tickFormat(negativeScaleTickCount, specifier);
+    const linearTickFormat = linearScale.tickFormat(linearScaleTickCount, specifier);
+    const positiveTickFormat = positiveScale.tickFormat(positiveScaleTickCount, specifier);
+    return tick => {
+      const tickFormat =
+      // eslint-disable-next-line no-nested-ternary
+      tick.valueOf() <= -constant ? negativeTickFormat : tick.valueOf() >= constant ? positiveTickFormat : linearTickFormat;
+      return tickFormat(tick);
+    };
+  };
+  return scale;
+}
+function generateScales(scale) {
+  const constant = scale.constant();
+  const domain = scale.domain();
+  const negativeDomain = [domain[0], Math.min(domain[1], -constant)];
+  const negativeLogScale = scaleLog(negativeDomain, scale.range());
+  const linearDomain = [Math.max(domain[0], -constant), Math.min(domain[1], constant)];
+  const linearScale = scaleLinear(linearDomain, scale.range());
+  const positiveDomain = [Math.max(domain[0], constant), domain[1]];
+  const positiveLogScale = scaleLog(positiveDomain, scale.range());
+  return {
+    negativeScale: negativeLogScale,
+    linearScale,
+    positiveScale: positiveLogScale
+  };
+}

package/esm/models/axis.d.ts

@@ -1,4 +1,4 @@
-import type { ScaleBand, ScaleLinear, ScaleLogarithmic, ScaleOrdinal, ScalePoint, ScalePower, ScaleSequential, ScaleThreshold, ScaleTime } from '@mui/x-charts-vendor/d3-scale';
+import type { ScaleBand, ScaleLinear, ScaleLogarithmic, ScaleOrdinal, ScalePoint, ScalePower, ScaleSequential, ScaleThreshold, ScaleTime, ScaleSymLog } from '@mui/x-charts-vendor/d3-scale';
 import { SxProps } from '@mui/system/styleFunctionSx';
 import { type MakeOptional, MakeRequired } from '@mui/x-internals/types';
 import type { DefaultizedZoomOptions } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
@@ -9,8 +9,8 @@ import { ContinuousColorConfig, OrdinalColorConfig, PiecewiseColorConfig } from
 export type AxisId = string | number;
 export type D3Scale<Domain extends {
   toString(): string;
-} = number | Date | string, Range = number, Output = number> = ScaleBand<Domain> | ScaleLogarithmic<Range, Output> | ScalePoint<Domain> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
-export type D3ContinuousScale<Range = number, Output = number> = ScaleLogarithmic<Range, Output> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
+} = number | Date | string, Range = number, Output = number> = ScaleBand<Domain> | ScaleSymLog<Range, Output> | ScaleLogarithmic<Range, Output> | ScalePoint<Domain> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
+export type D3ContinuousScale<Range = number, Output = number> = ScaleSymLog<Range, Output> | ScaleLogarithmic<Range, Output> | ScalePower<Range, Output> | ScaleTime<Range, Output> | ScaleLinear<Range, Output>;
 export interface ChartsAxisSlots {
   /**
    * Custom component for the axis main line.
@@ -179,7 +179,7 @@ export interface ChartsRadiusAxisProps extends ChartsAxisProps {
   maxRadius?: number;
 }
 export type ScaleName = keyof AxisScaleConfig;
-export type ContinuousScaleName = 'linear' | 'log' | 'pow' | 'sqrt' | 'time' | 'utc';
+export type ContinuousScaleName = 'linear' | 'log' | 'symlog' | 'pow' | 'sqrt' | 'time' | 'utc';
 export interface AxisScaleConfig {
   band: {
     scaleType: 'band';
@@ -208,6 +208,16 @@ export interface AxisScaleConfig {
     scale: ScaleLogarithmic<number, number>;
     colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
   };
+  symlog: {
+    scaleType: 'symlog';
+    scale: ScaleSymLog<number, number>;
+    colorMap?: ContinuousColorConfig | PiecewiseColorConfig;
+    /**
+     * The constant used to define the zero point of the symlog scale.
+     * @default 1
+     */
+    constant?: number;
+  };
   pow: {
     scaleType: 'pow';
     scale: ScalePower<number, number>;
@@ -248,6 +258,9 @@ export interface AxisScaleComputedConfig {
   log: {
     colorScale?: ScaleSequential<string, string | null> | ScaleThreshold<number, string | null>;
   };
+  symlog: {
+    colorScale?: ScaleSequential<string, string | null> | ScaleThreshold<number, string | null>;
+  };
   pow: {
     colorScale?: ScaleSequential<string, string | null> | ScaleThreshold<number, string | null>;
   };
@@ -281,11 +294,37 @@ export type AxisValueFormatterContext<S extends ScaleName = ScaleName> = {
    * - `'legend'` The value is displayed in the legend when using color legend.
    * - `'zoom-slider-tooltip'` The value is displayed in the zoom slider tooltip.
    */
-  location: 'tick' | 'tooltip' | 'zoom-slider-tooltip';
+  location: 'tooltip' | 'zoom-slider-tooltip';
   /**
    * The d3-scale instance associated to the axis.
    */
   scale: AxisScaleConfig[S]['scale'];
+} | {
+  /**
+   * Location indicates where the value will be displayed.
+   * - `'tick'` The value is displayed on the axis ticks.
+   * - `'tooltip'` The value is displayed in the tooltip when hovering the chart.
+   * - `'legend'` The value is displayed in the legend when using color legend.
+   * - `'zoom-slider-tooltip'` The value is displayed in the zoom slider tooltip.
+   */
+  location: 'tick';
+  /**
+   * The d3-scale instance associated to the axis.
+   */
+  scale: AxisScaleConfig[S]['scale'];
+  /**
+   * The tick label shown by default if the value isn't formatted.
+   * This value might be an empty string if no tick label should be displayed, which is particularly useful in log
+   * scales where we want to show ticks to demonstrate it's a log scale, but not labels to avoid them overlapping.
+   * @see See {@link https://d3js.org/d3-scale/log#log_tickFormat D3 log scale docs} for more details.
+   */
+  defaultTickLabel: string;
+  /**
+   * A suggestion of the number of ticks to show.
+   * Can be provided to the scale's `ticks` method to compute the ticks, or to `tickFormat` to format the ticks.
+   * Can be `undefined` if the scale doesn't support it, e.g., band, point scales.
+   */
+  tickNumber?: number;
 };
 /**
  * Config that is shared between cartesian and polar axes.
@@ -391,6 +430,9 @@ export declare function isBandScaleConfig(scaleConfig: AxisConfig<ScaleName>): s
 export declare function isPointScaleConfig(scaleConfig: AxisConfig<ScaleName>): scaleConfig is AxisConfig<'point'> & {
   scaleType: 'point';
 };
+export declare function isSymlogScaleConfig(scaleConfig: AxisConfig<ScaleName>): scaleConfig is AxisConfig<'symlog'> & {
+  scaleType: 'symlog';
+};
 /**
  * The data format returned by onAxisClick.
  */

package/esm/models/axis.js

@@ -17,6 +17,9 @@ export function isBandScaleConfig(scaleConfig) {
 export function isPointScaleConfig(scaleConfig) {
   return scaleConfig.scaleType === 'point';
 }
+export function isSymlogScaleConfig(scaleConfig) {
+  return scaleConfig.scaleType === 'symlog';
+}
 
 /**
  * The data format returned by onAxisClick.

package/esm/models/seriesType/bar.d.ts

@@ -25,6 +25,16 @@ export interface BarSeriesType extends CommonSeriesType<number | null>, Cartesia
    * @default 'diverging'
    */
   stackOffset?: StackOffsetType;
+  /**
+   * If provided, the value will be used as the minimum size of the bar in pixels.
+   * This is useful to avoid bars with a size of 0.
+   *
+   * The property is ignored if the series value is `null` or `0`.
+   * It also doesn't work with stacked series.
+   *
+   * @default 0px
+   */
+  minBarSize?: number;
 }
 /**
  * An object that allows to identify a single bar.
@@ -35,4 +45,4 @@ export type BarItemIdentifier = {
   seriesId: SeriesId;
   dataIndex: number;
 };
-export interface DefaultizedBarSeriesType extends DefaultizedProps<BarSeriesType, CommonDefaultizedProps | 'color' | 'layout'> {}
+export interface DefaultizedBarSeriesType extends DefaultizedProps<BarSeriesType, CommonDefaultizedProps | 'color' | 'layout' | 'minBarSize'> {}

package/esm/models/seriesType/common.d.ts

@@ -1,6 +1,6 @@
-import type { ChartsLabelMarkProps } from "../../ChartsLabel/index.js";
 import { HighlightScope } from "../../internals/plugins/featurePlugins/useChartHighlight/highlightConfig.types.js";
 import type { StackOffsetType, StackOrderType } from "../stacking.js";
+import type { ChartsLabelMarkType } from "../../ChartsLabel/ChartsLabelMark.js";
 export type SeriesId = number | string;
 export type SeriesValueFormatterContext = {
   /**
@@ -10,7 +10,13 @@ export type SeriesValueFormatterContext = {
 };
 export type SeriesValueFormatter<TValue> = (value: TValue, context: SeriesValueFormatterContext) => string | null;
 export type CommonSeriesType<TValue> = {
+  /**
+   * The id of this series.
+   */
   id?: SeriesId;
+  /**
+   * Color to use when displaying the series.
+   */
   color?: string;
   /**
    * Formatter used to render values in tooltip or other data display.
@@ -22,13 +28,13 @@ export type CommonSeriesType<TValue> = {
   /**
    * The scope to apply when the series is highlighted.
    */
-  highlightScope?: Partial<HighlightScope>;
+  highlightScope?: HighlightScope;
   /**
    * Defines the mark type for the series.
    *
    * There is a default mark type for each series type.
    */
-  labelMarkType?: ChartsLabelMarkProps['type'];
+  labelMarkType?: ChartsLabelMarkType;
 };
 export type CommonDefaultizedProps = 'id' | 'valueFormatter' | 'data';
 export type CartesianSeriesType = {

package/esm/models/seriesType/line.d.ts

@@ -34,7 +34,9 @@ export interface LineSeriesType extends CommonSeriesType<number | null>, Cartesi
    * The key used to retrieve data from the dataset.
    */
   dataKey?: string;
-  stack?: string;
+  /**
+   * If `true`, the series is rendered as an area instead of a line.
+   */
   area?: boolean;
   /**
    * The label to display on the tooltip or the legend. It can be a string or a function.

package/esm/models/seriesType/scatter.d.ts

@@ -12,6 +12,9 @@ export type ScatterValueType = {
 export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType | null>, CartesianSeriesType {
   type: 'scatter';
   data?: readonly ScatterValueType[];
+  /**
+   * Size of the markers in the scatter plot, in pixels.
+   */
   markerSize?: number;
   /**
    * The label to display on the tooltip or the legend. It can be a string or a function.
@@ -52,7 +55,7 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType | n
   };
   preview?: {
     /**
-     * The size of the preview marker.
+     * The size of the preview marker in pixels.
      * @default 1
      */
     markerSize?: number;

package/esm/tests/web-components.js

@@ -0,0 +1,49 @@
+const renderSymbol = Symbol.for('render');
+const connectedSymbol = Symbol.for('connected');
+const contextSymbol = Symbol.for('context');
+const propsSymbol = Symbol.for('props');
+
+// This function creates a custom web component that wraps a React component.
+// Adapted from https://github.com/bitovi/react-to-web-component/blob/b1372bfd7bc67fe49920db840f1ed9cf736b2724/packages/core/src/core.ts
+export function reactToWebComponent(ReactComponent, options, renderer) {
+  class ReactWebComponent extends HTMLElement {
+    static get observedAttributes() {
+      return [];
+    }
+    constructor() {
+      super();
+      this[connectedSymbol] = true;
+      this[contextSymbol] = void 0;
+      this[propsSymbol] = {};
+      this.container = void 0;
+      if (options.shadow) {
+        this.container = this.attachShadow({
+          mode: options.shadow
+        });
+      } else {
+        this.container = this;
+      }
+      this[propsSymbol].container = this.container;
+    }
+    connectedCallback() {
+      this[connectedSymbol] = true;
+      this[renderSymbol]();
+    }
+    disconnectedCallback() {
+      this[connectedSymbol] = false;
+      if (this[contextSymbol]) {
+        renderer.unmount(this[contextSymbol]);
+      }
+      delete this[contextSymbol];
+    }
+    [renderSymbol]() {
+      if (!this[connectedSymbol]) {
+        return;
+      }
+      if (!this[contextSymbol]) {
+        this[contextSymbol] = renderer.mount(this.container, ReactComponent, this[propsSymbol]);
+      }
+    }
+  }
+  return ReactWebComponent;
+}

package/hooks/useTicks.d.ts

@@ -49,8 +49,13 @@ export type TickItemType = {
   offset: number;
   labelOffset: number;
 };
+export declare function getTicks(options: {
+  scale: D3Scale;
+  valueFormatter?: AxisConfig['valueFormatter'];
+  isInside: (offset: number) => boolean;
+} & Pick<TickParams, 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement'> & Required<Pick<TickParams, 'tickNumber'>>): TickItemType[];
 export declare function useTicks(options: {
   scale: D3Scale;
   valueFormatter?: AxisConfig['valueFormatter'];
   direction: 'x' | 'y';
-} & Pick<TickParams, 'tickNumber' | 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement'>): TickItemType[];
+} & Pick<TickParams, 'tickInterval' | 'tickPlacement' | 'tickLabelPlacement'> & Required<Pick<TickParams, 'tickNumber'>>): TickItemType[];