diff --git a/CHANGELOG.md b/CHANGELOG.md index fbd0c98ab..9109daa25 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/packages/react-widgets/src/widgets/BarWidget.js b/packages/react-widgets/src/widgets/BarWidget.js index 93688ec49..05670abb0 100644 --- a/packages/react-widgets/src/widgets/BarWidget.js +++ b/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) }); diff --git a/packages/react-widgets/src/widgets/CategoryWidget.js b/packages/react-widgets/src/widgets/CategoryWidget.js index 1e304ba7b..283068b37 100644 --- a/packages/react-widgets/src/widgets/CategoryWidget.js +++ b/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) }); diff --git a/packages/react-widgets/src/widgets/HistogramWidget.js b/packages/react-widgets/src/widgets/HistogramWidget.js index ce1419c2c..20143bc5a 100644 --- a/packages/react-widgets/src/widgets/HistogramWidget.js +++ b/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) }); diff --git a/packages/react-widgets/src/widgets/PieWidget.js b/packages/react-widgets/src/widgets/PieWidget.js index 18b55dbdd..9a54aeff7 100644 --- a/packages/react-widgets/src/widgets/PieWidget.js +++ b/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) }); diff --git a/packages/react-widgets/src/widgets/RangeWidget.js b/packages/react-widgets/src/widgets/RangeWidget.js index 659118055..510dd09e5 100644 --- a/packages/react-widgets/src/widgets/RangeWidget.js +++ b/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) }); diff --git a/packages/react-widgets/src/widgets/ScatterPlotWidget.js b/packages/react-widgets/src/widgets/ScatterPlotWidget.js index 710a89912..d7d7c17cc 100644 --- a/packages/react-widgets/src/widgets/ScatterPlotWidget.js +++ b/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) });