onStateChange callback for all widgets

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Not released
 
+- onStateChange callback for all widgets [#886](https://github.com/CartoDB/carto-react/pull/886)
+
 ## 3.0.0
 
 ### 3.0.0-alpha.14 (2024-06-27)

packages/react-widgets/src/widgets/BarWidget.js

@@ -38,6 +38,7 @@ const EMPTY_ARRAY = [];
  * @param  {boolean} [props.global] - Enable/disable the viewport filtering in the data fetching.
  * @param  {string} [props.height] - Static widget height.
  * @param  {Function} [props.onError] - Function to handle error messages from the widget.
+ * @param  {Function=} [props.onStateChange] - Callback to handle state updates of widgets
  * @param  {object} [props.wrapperProps] - Extra props to pass to [WrapperWidgetUI](https://storybook-react.carto.com/?path=/docs/widgets-wrapperwidgetui--default).
  * @param  {object} [props.noDataAlertProps] - Extra props to pass to [NoDataAlert]().
  */
@@ -60,6 +61,7 @@ function BarWidget({
   filterable,
   global,
   onError,
+  onStateChange,
   wrapperProps,
   noDataAlertProps
 }) {
@@ -80,6 +82,7 @@ function BarWidget({
     },
     global,
     onError,
+    onStateChange,
     attemptRemoteCalculation: _hasFeatureFlag(_FeatureFlags.REMOTE_WIDGETS)
   });
 

packages/react-widgets/src/widgets/CategoryWidget.js

@@ -35,6 +35,7 @@ const EMPTY_ARRAY = [];
  * @param  {boolean} [props.global] - Enable/disable the viewport filtering in the data fetching.
  * @param  {Function} [props.onError] - Function to handle error messages from the widget.
  * @param  {object} [props.wrapperProps] - Extra props to pass to [WrapperWidgetUI](https://storybook-react.carto.com/?path=/docs/widgets-wrapperwidgetui--default).
+ * @param  {Function=} [props.onStateChange] - Callback to handle state updates of widgets
  * @param  {object} [props.noDataAlertProps] - Extra props to pass to [NoDataAlert]().
 
  */
@@ -55,6 +56,7 @@ function CategoryWidget(props) {
     global,
     onError,
     wrapperProps,
+    onStateChange,
     noDataAlertProps
   } = props;
   const dispatch = useDispatch();
@@ -78,6 +80,7 @@ function CategoryWidget(props) {
     },
     global,
     onError,
+    onStateChange,
     attemptRemoteCalculation: _hasFeatureFlag(_FeatureFlags.REMOTE_WIDGETS)
   });
 

packages/react-widgets/src/widgets/HistogramWidget.js

@@ -39,6 +39,7 @@ const EMPTY_ARRAY = [];
  * @param  {boolean} [props.global] - Enable/disable the viewport filtering in the data fetching.
  * @param  {Function} [props.onError] - Function to handle error messages from the widget.
  * @param  {object} [props.wrapperProps] - Extra props to pass to [WrapperWidgetUI](https://storybook-react.carto.com/?path=/docs/widgets-wrapperwidgetui--default).
+ * @param  {Function=} [props.onStateChange] - Callback to handle state updates of widgets
  * @param  {object} [props.noDataAlertProps] - Extra props to pass to [NoDataAlert]().
 
  */
@@ -61,6 +62,7 @@ function HistogramWidget({
   filterable,
   global,
   onError,
+  onStateChange,
   wrapperProps,
   noDataAlertProps
 }) {
@@ -104,6 +106,20 @@ function HistogramWidget({
     return [];
   }, [min, max, _ticks, bins, hasExternalMinMax]);
 
+  const customOnStateChange = ({ state, data }) => {
+    if (!onStateChange) return;
+    if (!data) return onStateChange({ state });
+    return onStateChange({
+      state,
+      data: {
+        values: data,
+        ticks,
+        min,
+        max
+      }
+    });
+  };
+
   let {
     data = EMPTY_ARRAY,
     isLoading,
@@ -118,6 +134,7 @@ function HistogramWidget({
     },
     global,
     onError,
+    onStateChange: customOnStateChange,
     enabled: !!ticks.length,
     attemptRemoteCalculation: _hasFeatureFlag(_FeatureFlags.REMOTE_WIDGETS)
   });

packages/react-widgets/src/widgets/PieWidget.js

@@ -36,6 +36,7 @@ const EMPTY_ARRAY = [];
  * @param  {boolean} [props.global] - Enable/disable the viewport filtering in the data fetching.
  * @param  {string[]} [props.colors] - Colors to be used in the pie chart.
  * @param  {Function} [props.onError] - Function to handle error messages from the widget.
+ * @param  {Function=} [props.onStateChange] - Callback to handle state updates of widgets
  * @param  {object} [props.wrapperProps] - Extra props to pass to [WrapperWidgetUI](https://storybook-react.carto.com/?path=/docs/widgets-wrapperwidgetui--default).
  * @param  {object} [props.noDataAlertProps] - Extra props to pass to [NoDataAlert]().
  */
@@ -56,6 +57,7 @@ function PieWidget({
   global,
   colors,
   onError,
+  onStateChange,
   wrapperProps,
   noDataAlertProps
 }) {
@@ -80,6 +82,7 @@ function PieWidget({
     },
     global,
     onError,
+    onStateChange,
     attemptRemoteCalculation: _hasFeatureFlag(_FeatureFlags.REMOTE_WIDGETS)
   });
 

packages/react-widgets/src/widgets/RangeWidget.js

@@ -25,6 +25,7 @@ import useStats from '../hooks/useStats';
  * @param  {number} [props.max] - Max value of the indicated column.
  * @param  {boolean} [props.global] - Enable/disable the viewport filtering in the data fetching.
  * @param  {Function} [props.onError] - Function to handle error messages from the widget.
+ * @param  {Function=} [props.onStateChange] - Callback to handle state updates of widgets
  * @param  {object} [props.wrapperProps] - Extra props to pass to [WrapperWidgetUI](https://storybook-react.carto.com/?path=/docs/widgets-wrapperwidgetui--default).
 
  */
@@ -37,6 +38,7 @@ function RangeWidget({
   max: _max,
   global,
   onError,
+  onStateChange,
   wrapperProps
 }) {
   const dispatch = useDispatch();
@@ -73,6 +75,7 @@ function RangeWidget({
     },
     global,
     onError,
+    onStateChange,
     attemptRemoteCalculation: _hasFeatureFlag(_FeatureFlags.REMOTE_WIDGETS)
   });
 

packages/react-widgets/src/widgets/ScatterPlotWidget.js

@@ -23,6 +23,7 @@ import { _FeatureFlags, _hasFeatureFlag } from '@carto/react-core';
  * @param  {Function} [props.tooltipFormatter] - Function to format Y axis values.
  * @param  {boolean} [props.global] - Enable/disable the viewport filtering in the data fetching.
  * @param  {Function} [props.onError] - Function to handle error messages from the widget.
+ * @param  {Function=} [props.onStateChange] - Callback to handle state updates of widgets
  * @param  {object} [props.wrapperProps] - Extra props to pass to [WrapperWidgetUI](https://storybook-react.carto.com/?path=/docs/widgets-wrapperwidgetui--default).
  * @param  {object} [props.noDataAlertProps] - Extra props to pass to [NoDataAlert]().
  */
@@ -40,6 +41,7 @@ function ScatterPlotWidget({
   tooltipFormatter,
   global,
   onError,
+  onStateChange,
   wrapperProps,
   noDataAlertProps
 }) {
@@ -58,6 +60,7 @@ function ScatterPlotWidget({
     },
     global,
     onError,
+    onStateChange,
     attemptRemoteCalculation: _hasFeatureFlag(_FeatureFlags.REMOTE_WIDGETS)
   });