Added filterable prop to TimeSeriesWidget (#808)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Not released
 
+- Added filterable prop to TimeSeriesWidget [#808](https://github.com/CartoDB/carto-react/pull/808)
 - Fix dataSources store type [#807](https://github.com/CartoDB/carto-react/pull/807)
 
 ## 2.3

packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js

@@ -31,6 +31,7 @@ function TimeSeriesWidgetUI({
   fitHeight,
   showControls,
   animation,
+  filterable,
   onTimelineUpdate,
   timeWindow,
   timelinePosition,
@@ -98,6 +99,7 @@ function TimeSeriesWidgetUI({
       fitHeight={fitHeight}
       showControls={showControls}
       animation={animation}
+      filterable={filterable}
       palette={palette}
       showLegend={showLegend}
       selectedCategories={selectedCategories}
@@ -141,6 +143,7 @@ TimeSeriesWidgetUI.propTypes = {
   height: PropTypes.string,
   fitHeight: PropTypes.bool,
   animation: PropTypes.bool,
+  filterable: PropTypes.bool,
   isPlaying: PropTypes.bool,
   onPlay: PropTypes.func,
   isPaused: PropTypes.bool,
@@ -164,6 +167,7 @@ TimeSeriesWidgetUI.defaultProps = {
   tooltipFormatter: defaultTooltipFormatter,
   formatter: (value) => value,
   animation: true,
+  filterable: true,
   isPlaying: false,
   isPaused: false,
   showControls: true,
@@ -189,6 +193,7 @@ function TimeSeriesWidgetUIContent({
   fitHeight,
   showControls,
   animation,
+  filterable,
   palette,
   selectedCategories,
   onSelectedCategoriesChange,
@@ -325,7 +330,7 @@ function TimeSeriesWidgetUIContent({
         </Typography>
       </Box>
 
-      {showClearButton && (
+      {filterable && showClearButton && (
         <Link
           variant='caption'
           style={{ cursor: 'pointer' }}
@@ -338,7 +343,9 @@ function TimeSeriesWidgetUIContent({
     </>
   );
 
-  const controls = showControls && <TimeSeriesControls data={data} stepSize={stepSize} />;
+  const controls = filterable && showControls && (
+    <TimeSeriesControls data={data} stepSize={stepSize} />
+  );
 
   const chart = (
     <TimeSeriesChart
@@ -355,6 +362,7 @@ function TimeSeriesWidgetUIContent({
       height={height}
       fitHeight={fitHeight}
       animation={animation}
+      filterable={filterable}
       selectedCategories={selectedCategories}
       onCategoryClick={onSelectedCategoriesChange && handleCategoryClick}
     />

packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js

@@ -23,6 +23,7 @@ export default function TimeSeriesChart({
   height: heightProp,
   fitHeight,
   animation,
+  filterable,
   selectedCategories,
   onCategoryClick
 }) {
@@ -165,7 +166,8 @@ export default function TimeSeriesChart({
     useTimeSeriesInteractivity({
       echartsInstance,
       data,
-      canSelectLines: Boolean(onCategoryClick)
+      canSelectLines: Boolean(onCategoryClick),
+      filterable
     });
 
   const seriesOptions = useMemo(

packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js

@@ -9,7 +9,8 @@ let initialTimeWindow = null;
 export default function useTimeSeriesInteractivity({
   echartsInstance,
   data,
-  canSelectLines
+  canSelectLines,
+  filterable
 }) {
   const theme = useTheme();
   const { isPlaying, isPaused, setIsPaused, timeWindow, setTimeWindow, stop } =
@@ -41,6 +42,7 @@ export default function useTimeSeriesInteractivity({
   // Echarts events
   useEffect(() => {
     function clickEvent(params) {
+      if (!filterable) return;
       // params target is specified if we hit data-line or point, not time selection is only for background hits
       if (canSelectLines && params.target) return;
 
@@ -69,11 +71,14 @@ export default function useTimeSeriesInteractivity({
     stop,
     timeWindow.length,
     updateTimelineByCoordinate,
-    canSelectLines
+    canSelectLines,
+    filterable
   ]);
 
   useEffect(() => {
     function mouseDownEvent(params) {
+      if (!filterable) return;
+
       if (params.target?.type === 'ec-line') {
         setIsMarkLineSelected(true);
         updateCursor('grabbing');
@@ -106,7 +111,7 @@ export default function useTimeSeriesInteractivity({
     }
 
     return addEventWithCleanUp(zr, 'mousedown', mouseDownEvent);
-  }, [zr, echartsInstance, timeWindow, updateCursor]);
+  }, [zr, echartsInstance, timeWindow, updateCursor, filterable]);
 
   useEffect(() => {
     function mouseMoveEvent(params) {
@@ -185,6 +190,12 @@ export default function useTimeSeriesInteractivity({
     updateCursor
   ]);
 
+  useEffect(() => {
+    if (!filterable && timeWindow.length) {
+      setTimeWindow([]);
+    }
+  }, [filterable, setTimeWindow, timeWindow.length]);
+
   // markLine in echarts
   const timelineOptions = useMemo(() => {
     if (timeWindow.length !== 1) return undefined;

packages/react-widgets/src/widgets/TimeSeriesWidget.d.ts

@@ -24,6 +24,8 @@ export type TimeSeriesWidgetProps = {
   tooltipFormatter?: Function;
   formatter?: Function;
 
+  filterable?: boolean;
+
   height?: string;
   fitHeihgt?: boolean;
   stableHeight?: boolean;

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

@@ -75,6 +75,7 @@ const EMPTY_ARRAY = [];
  * @param  {boolean=} [props.stableHeight] -  If specified, error and no-data state will maintain same height as normal widget in loading/loaded state.
  * @param  {boolean} [props.showControls] - Enable/disable animation controls (play, pause, stop, speed). True by default.
  * @param  {boolean} [props.animation] - Enable/disable widget animations on data updates. Enabled by default.
+ * * @param  {boolean} [props.filterable] - Enable/disable widget filtering capabilities. Enabled by default.
  * @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
@@ -122,6 +123,7 @@ function TimeSeriesWidget({
   stableHeight,
   showControls,
   animation,
+  filterable,
   isPlaying,
   onPlay,
   isPaused,
@@ -411,6 +413,7 @@ function TimeSeriesWidget({
               fitHeight={fitHeight}
               showControls={showControls}
               animation={animation}
+              filterable={filterable}
               isPlaying={isPlaying}
               onPlay={onPlay}
               isPaused={isPaused}
@@ -484,6 +487,7 @@ TimeSeriesWidget.propTypes = {
   fitHeight: PropTypes.bool,
   stableHeight: PropTypes.bool,
   animation: PropTypes.bool,
+  filterable: PropTypes.bool,
   isPlaying: PropTypes.bool,
   onPlay: PropTypes.func,
   isPaused: PropTypes.bool,
@@ -508,6 +512,7 @@ TimeSeriesWidget.defaultProps = {
   tooltip: true,
   formatter: (value) => value,
   animation: true,
+  filterable: true,
   isPlaying: false,
   isPaused: false,
   timeWindow: [],