update callback names

Author: pan-kot

pages/01-cartesian-chart/controlled-visibility.page.tsx

@@ -108,7 +108,7 @@ function ExampleMixedChart() {
         valueFormatter: numberFormatter,
       }}
       visibleSeries={visibleSeries}
-      onChangeVisibleSeries={({ detail: { visibleSeries } }) => setSettings({ visibleItems: visibleSeries.join(",") })}
+      onVisibleSeriesChange={({ detail: { visibleSeries } }) => setSettings({ visibleItems: visibleSeries.join(",") })}
       emphasizeBaseline={settings.emphasizeBaseline}
     />
   );

pages/02-pie-chart/controlled-visibility.page.tsx

@@ -76,7 +76,7 @@ function ExamplePieChart() {
         `${segmentValue} units, ${((segmentValue / totalValue) * 100).toFixed(0)}%`
       }
       visibleSegments={visibleSegments}
-      onChangeVisibleSegments={({ detail: { visibleSegments } }) =>
+      onVisibleSegmentsChange={({ detail: { visibleSegments } }) =>
         setSettings({ visibleItems: visibleSegments.join(",") })
       }
     />

pages/04-migration/examples/line-chart.tsx

@@ -136,7 +136,7 @@ export function ComponentNew({ headerFilter, legendFilter }: { headerFilter?: bo
       }
       tooltip={{ placement: "middle" }}
       visibleSeries={visibleSeries}
-      onChangeVisibleSeries={({ detail }) => setVisibleSeries(detail.visibleSeries)}
+      onVisibleSeriesChange={({ detail }) => setVisibleSeries(detail.visibleSeries)}
     />
   );
 }

pages/04-migration/examples/pie-chart.tsx

@@ -93,7 +93,7 @@ export function ComponentNew({
         ) : undefined,
       }}
       visibleSegments={visibleSegments}
-      onChangeVisibleSegments={({ detail }) => setVisibleSegments(detail.visibleSegments)}
+      onVisibleSegmentsChange={({ detail }) => setVisibleSegments(detail.visibleSegments)}
       innerAreaTitle="60"
       innerAreaDescription="total instances"
     />

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -19,7 +19,7 @@ exports[`definition for cartesian-chart matches the snapshot > cartesian-chart 1
         "type": "object",
       },
       "detailType": "{ visibleSeries: Array<string>; }",
-      "name": "onChangeVisibleSeries",
+      "name": "onVisibleSeriesChange",
     },
   ],
   "functions": [
@@ -383,7 +383,7 @@ When set to "side", displays the title along the axis line.",
     },
     {
       "description": "Specifies which series to show using their IDs. By default, all series are visible and managed by the component.
-If a series doesn't have an ID, its name is used. When using this property, manage state updates with \`onChangeVisibleSeries\`.",
+If a series doesn't have an ID, its name is used. When using this property, manage state updates with \`onVisibleSeriesChange\`.",
       "name": "visibleSeries",
       "optional": true,
       "type": "ReadonlyArray<string>",
@@ -551,7 +551,7 @@ exports[`definition for pie-chart matches the snapshot > pie-chart 1`] = `
         "type": "object",
       },
       "detailType": "{ visibleSegments: Array<string>; }",
-      "name": "onChangeVisibleSegments",
+      "name": "onVisibleSegmentsChange",
     },
   ],
   "functions": [
@@ -914,7 +914,7 @@ Supported series types:
     },
     {
       "description": "Specifies which segments to show using their IDs. By default, all segments are visible and managed by the component.
-If a segment doesn't have an ID, its name is used. When using this property, manage state updates with \`onChangeVisibleSegments\`.",
+If a segment doesn't have an ID, its name is used. When using this property, manage state updates with \`onVisibleSegmentsChange\`.",
       "name": "visibleSegments",
       "optional": true,
       "type": "ReadonlyArray<string>",

src/cartesian-chart/__tests__/cartesian-chart-visibility.test.tsx

@@ -23,13 +23,13 @@ function getVisibilityState() {
   };
 }
 
-const onChangeVisibleSeries = vi.fn();
+const onVisibleSeriesChange = vi.fn();
 
 afterEach(() => {
-  onChangeVisibleSeries.mockReset();
+  onVisibleSeriesChange.mockReset();
 });
 
-const defaultProps = { highcharts, onChangeVisibleSeries };
+const defaultProps = { highcharts, onVisibleSeriesChange };
 
 const lineSeries: CartesianChartProps.SeriesOptions[] = [
   {
@@ -74,7 +74,7 @@ describe("CartesianChart: visibility", () => {
       hiddenSeries: ["L1"],
     });
 
-    expect(onChangeVisibleSeries).toHaveBeenCalledWith(
+    expect(onVisibleSeriesChange).toHaveBeenCalledWith(
       expect.objectContaining({
         detail: {
           visibleSeries: ["L2"],

src/cartesian-chart/__tests__/common.tsx

@@ -19,9 +19,9 @@ export const StatefulChart = forwardRef((props: CartesianChartProps, ref: React.
       ref={ref}
       {...props}
       visibleSeries={visibleSeries}
-      onChangeVisibleSeries={(event) => {
+      onVisibleSeriesChange={(event) => {
         setVisibleSeries(event.detail.visibleSeries);
-        props.onChangeVisibleSeries?.(event);
+        props.onVisibleSeriesChange?.(event);
       }}
     />
   );

src/cartesian-chart/chart-cartesian-internal.tsx

@@ -32,12 +32,12 @@ export const InternalCartesianChart = forwardRef(
   ({ tooltip, ...props }: InternalCartesianChartProps, ref: React.Ref<CartesianChartProps.Ref>) => {
     const apiRef = useRef<null | CoreChartAPI>(null);
 
-    // When visibleSeries and onChangeVisibleSeries are provided - the series visibility can be controlled from the outside.
+    // When visibleSeries and onVisibleSeriesChange are provided - the series visibility can be controlled from the outside.
     // Otherwise - the component handles series visibility using its internal state.
-    useControllableState(props.visibleSeries, props.onChangeVisibleSeries, undefined, {
+    useControllableState(props.visibleSeries, props.onVisibleSeriesChange, undefined, {
       componentName: "CartesianChart",
       propertyName: "visibleSeries",
-      changeHandlerName: "onChangeVisibleSeries",
+      changeHandlerName: "onVisibleSeriesChange",
     });
     const allSeriesIds = props.series.map((s) => getOptionsId(s));
     // We keep local visible series state to compute threshold series data, that depends on series visibility.
@@ -46,7 +46,7 @@ export const InternalCartesianChart = forwardRef(
     const onVisibleSeriesChange: CoreChartProps["onVisibleItemsChange"] = (items) => {
       const visibleSeries = items.filter((i) => i.visible).map((i) => i.id);
       if (props.visibleSeries) {
-        fireNonCancelableEvent(props.onChangeVisibleSeries, { visibleSeries });
+        fireNonCancelableEvent(props.onVisibleSeriesChange, { visibleSeries });
       } else {
         setVisibleSeriesLocal(visibleSeries);
       }

src/cartesian-chart/interfaces.ts

@@ -98,14 +98,14 @@ export interface CartesianChartProps
 
   /**
    * Specifies which series to show using their IDs. By default, all series are visible and managed by the component.
-   * If a series doesn't have an ID, its name is used. When using this property, manage state updates with `onChangeVisibleSeries`.
+   * If a series doesn't have an ID, its name is used. When using this property, manage state updates with `onVisibleSeriesChange`.
    */
   visibleSeries?: readonly string[];
 
   /**
    * A callback function, triggered when series visibility changes as a result of user interaction with the legend or filter.
    */
-  onChangeVisibleSeries?: NonCancelableEventHandler<{ visibleSeries: string[] }>;
+  onVisibleSeriesChange?: NonCancelableEventHandler<{ visibleSeries: string[] }>;
 }
 
 export namespace CartesianChartProps {

src/pie-chart/__tests__/common.tsx

@@ -19,9 +19,9 @@ export const StatefulChart = forwardRef((props: PieChartProps, ref: React.Ref<Pi
       ref={ref}
       {...props}
       visibleSegments={visibleSegments}
-      onChangeVisibleSegments={(event) => {
+      onVisibleSegmentsChange={(event) => {
         setVisibleSegments(event.detail.visibleSegments);
-        props.onChangeVisibleSegments?.(event);
+        props.onVisibleSegmentsChange?.(event);
       }}
     />
   );