@redsift/dashboard 11.5.0 → 11.6.0-alpha.0

package/_internal/WithFilters2.js

@@ -0,0 +1,701 @@
+import { _ as _objectSpread2, D as DashboardContext, b as _extends } from './context.js';
+import React, { useRef, useMemo, useContext, useState, useEffect, isValidElement } from 'react';
+import { useId, isComponent } from '@redsift/design-system';
+import { C as CrossfilterRegistry } from './CrossfilterRegistry2.js';
+import { D as DashboardReducerActionType } from './types.js';
+import { C as ChartEmptyState } from './ChartEmptyState2.js';
+
+/**
+ * Hook to give to a chart the roles, events and attributes of a listbox.
+ */
+const useCategoricalChartAsListbox = _ref => {
+  let {
+    id,
+    ref,
+    type,
+    ndxGroup,
+    orientation = 'horizontal'
+  } = _ref;
+  const currentIndexRef = useRef(0);
+  const props = useMemo(() => {
+    const numberOfGroups = ndxGroup === null || ndxGroup === void 0 ? void 0 : ndxGroup.all().filter(datum => datum.value).length;
+    if (ref && numberOfGroups) {
+      const getCurrentOption = () => ref.current.querySelector(`._${currentIndexRef.current}`);
+      const next = () => {
+        getCurrentOption().classList.remove('focused');
+        const index = currentIndexRef.current === numberOfGroups - 1 ? 0 : currentIndexRef.current + 1;
+        currentIndexRef.current = index;
+        ref.current.setAttribute('aria-activedescendant', `id${id}__${type}-${currentIndexRef.current}`);
+        getCurrentOption().classList.add('focused');
+      };
+      const previous = () => {
+        getCurrentOption().classList.remove('focused');
+        const index = currentIndexRef.current === 0 ? numberOfGroups - 1 : currentIndexRef.current - 1;
+        currentIndexRef.current = index;
+        ref.current.setAttribute('aria-activedescendant', `id${id}__${type}-${currentIndexRef.current}`);
+        getCurrentOption().classList.add('focused');
+      };
+      const focus = () => {
+        ref.current.setAttribute('aria-activedescendant', `id${id}__${type}-0`);
+        getCurrentOption().classList.add('focused');
+      };
+      const blur = () => {
+        getCurrentOption().classList.remove('focused');
+        currentIndexRef.current = 0;
+        ref.current.setAttribute('aria-activedescendant', '');
+      };
+      const keydown = e => {
+        e.stopPropagation();
+        switch (e.code) {
+          case 'ArrowRight':
+            if (orientation === 'horizontal') {
+              e.preventDefault();
+              next();
+            }
+            break;
+          case 'ArrowLeft':
+            if (orientation === 'horizontal') {
+              e.preventDefault();
+              previous();
+            }
+            break;
+          case 'ArrowDown':
+            if (orientation === 'vertical') {
+              e.preventDefault();
+              next();
+            }
+            break;
+          case 'ArrowUp':
+            if (orientation === 'vertical') {
+              e.preventDefault();
+              previous();
+            }
+            break;
+          case 'Enter':
+          case 'Space':
+            e.preventDefault();
+            getCurrentOption().dispatchEvent(new Event('click'));
+            break;
+        }
+      };
+      return {
+        'aria-activedescendant': '',
+        'aria-multiselectable': 'true',
+        'aria-orientation': orientation,
+        role: 'listbox',
+        tabIndex: 0,
+        onFocus: focus,
+        onBlur: blur,
+        onMouseDown: event => event.preventDefault(),
+        onMouseLeave: blur,
+        onKeyDown: keydown
+      };
+    }
+  }, [ref, ref.current, ndxGroup, JSON.parse(JSON.stringify((ndxGroup === null || ndxGroup === void 0 ? void 0 : ndxGroup.all()) || ''))]);
+  return props;
+};
+
+const FilterableBarChart = props => {
+  const {
+    children,
+    datagridCategoryDimFilter,
+    dimension,
+    group,
+    id: propsId,
+    isDimensionArray,
+    isResetable,
+    localeText,
+    onFilter
+  } = props;
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  const ref = useRef();
+  const {
+    emptyChartTitle,
+    emptyChartSubtitle,
+    emptyChartResetLabel
+  } = _objectSpread2({}, localeText);
+  const {
+    data,
+    dispatch,
+    toggleUpdateContext,
+    state: {
+      tableFilters
+    }
+  } = useContext(DashboardContext);
+  const [ndxDimension, setNdxDimension] = useState();
+  const [ndxGroup, setNdxGroup] = useState();
+  useEffect(() => {
+    const computedNdxDimension = CrossfilterRegistry.get(data).dimension(dimension, isDimensionArray);
+    const computedNdxGroup = group ? group(computedNdxDimension) : computedNdxDimension.group();
+    setNdxDimension(computedNdxDimension);
+    setNdxGroup(computedNdxGroup);
+    return function cleanup() {
+      computedNdxDimension.filterAll();
+    };
+  }, [dimension, data, group]);
+  const [filters, setFilters] = useState([]);
+  const handleFilter = category => {
+    let newFilters;
+    if (filters.includes(category)) {
+      newFilters = filters.filter(f => f !== category);
+    } else {
+      newFilters = [...filters, category];
+    }
+    setFilters(newFilters);
+    if (newFilters.length) {
+      ndxDimension.filter(d => newFilters.includes(d));
+    } else {
+      ndxDimension.filterAll();
+    }
+    toggleUpdateContext === null || toggleUpdateContext === void 0 ? void 0 : toggleUpdateContext();
+    if (datagridCategoryDimFilter) {
+      dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+        type: DashboardReducerActionType.FilterTable,
+        filter: {
+          id: id,
+          field: datagridCategoryDimFilter.field,
+          operator: datagridCategoryDimFilter.operator,
+          value: newFilters
+        }
+      });
+    }
+    if (onFilter) {
+      onFilter(newFilters);
+    }
+  };
+  const resetFilters = () => {
+    setFilters([]);
+    ndxDimension.filterAll();
+    toggleUpdateContext === null || toggleUpdateContext === void 0 ? void 0 : toggleUpdateContext();
+    if (datagridCategoryDimFilter) {
+      dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+        type: DashboardReducerActionType.ResetFilter,
+        filter: {
+          id: id,
+          field: datagridCategoryDimFilter.field,
+          operator: datagridCategoryDimFilter.operator
+        }
+      });
+    }
+    if (onFilter) {
+      onFilter();
+    }
+  };
+  useEffect(() => {
+    var _tableFilters$find;
+    if (!datagridCategoryDimFilter) {
+      return;
+    }
+    const updatedFilters = (_tableFilters$find = tableFilters.find(filter => filter.field === datagridCategoryDimFilter.field && filter.operator === datagridCategoryDimFilter.operator)) === null || _tableFilters$find === void 0 ? void 0 : _tableFilters$find.value;
+    if (updatedFilters && updatedFilters !== filters && ndxDimension) {
+      setFilters(updatedFilters);
+      if (updatedFilters.length) {
+        ndxDimension.filter(d => updatedFilters.includes(d));
+      } else {
+        ndxDimension.filterAll();
+      }
+      toggleUpdateContext === null || toggleUpdateContext === void 0 ? void 0 : toggleUpdateContext();
+    }
+  }, [tableFilters]);
+  const emptyComponent = /*#__PURE__*/React.createElement(ChartEmptyState, {
+    title: emptyChartTitle,
+    subtitle: emptyChartSubtitle,
+    resetLabel: emptyChartResetLabel,
+    onReset: resetFilters
+  });
+  const chartProps = useCategoricalChartAsListbox({
+    id,
+    ref: ref,
+    type: 'bar',
+    ndxGroup,
+    orientation: 'vertical'
+  });
+  const filterProps = {
+    barProps: {
+      tabIndex: -1
+    },
+    barRole: 'option',
+    role: 'listbox',
+    chartProps: chartProps,
+    chartRef: ref,
+    data: ndxGroup ? JSON.parse(JSON.stringify(ndxGroup.all())) : undefined,
+    emptyComponent,
+    id,
+    isBarSelected: datum => {
+      return filters.length === 0 || filters.includes(Array.isArray(datum.data.key) ? datum.data.key[1] : datum.data.key);
+    },
+    onBarClick: datum => {
+      handleFilter(Array.isArray(datum.data.key) ? datum.data.key[1] : datum.data.key);
+    },
+    onReset: isResetable ? resetFilters : undefined
+  };
+  if ( /*#__PURE__*/isValidElement(children)) {
+    return /*#__PURE__*/React.cloneElement(children, _objectSpread2({}, filterProps));
+  }
+  return null;
+};
+
+const FilterableDataGrid = props => {
+  const {
+    children,
+    onFilter
+  } = props;
+  const {
+    state,
+    data,
+    dispatch,
+    dataGridApiRef
+  } = useContext(DashboardContext);
+  const {
+    tableFilters
+  } = state;
+  const [filterModel, setFilterModel] = useState();
+  useEffect(() => {
+    setFilterModel(_objectSpread2(_objectSpread2({}, filterModel), {}, {
+      items: tableFilters
+    }));
+  }, [tableFilters]);
+  const updateChartFilters = filterModel => {
+    dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+      type: DashboardReducerActionType.FilterTableBatch,
+      filter: filterModel.items
+    });
+  };
+  if ( /*#__PURE__*/isValidElement(children)) {
+    var _children$props$apiRe;
+    const filterProps = {
+      apiRef: (_children$props$apiRe = children.props.apiRef) !== null && _children$props$apiRe !== void 0 ? _children$props$apiRe : dataGridApiRef,
+      rows: data || [],
+      filterModel,
+      onFilterModelChange: filterModel => {
+        if (onFilter) {
+          onFilter(filterModel);
+        }
+        updateChartFilters(filterModel);
+      }
+    };
+    return /*#__PURE__*/React.cloneElement(children, _objectSpread2({}, filterProps));
+  }
+  return null;
+};
+
+const FilterablePieChart = props => {
+  var _tableFilters$find;
+  const {
+    children,
+    datagridCategoryDimFilter,
+    dimension,
+    group,
+    id: propsId,
+    isDimensionArray,
+    isResetable,
+    localeText,
+    onFilter
+  } = props;
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  const ref = useRef();
+  const {
+    emptyChartTitle,
+    emptyChartSubtitle,
+    emptyChartResetLabel
+  } = _objectSpread2({}, localeText);
+  const {
+    data,
+    dispatch,
+    toggleUpdateContext,
+    state: {
+      tableFilters
+    }
+  } = useContext(DashboardContext);
+  const [ndxDimension, setNdxDimension] = useState();
+  const [ndxGroup, setNdxGroup] = useState();
+  useEffect(() => {
+    const computedNdxDimension = CrossfilterRegistry.get(data).dimension(dimension, isDimensionArray);
+    const computedNdxGroup = group ? group(computedNdxDimension) : computedNdxDimension.group();
+    setNdxDimension(computedNdxDimension);
+    setNdxGroup(computedNdxGroup);
+    return function cleanup() {
+      computedNdxDimension.filterAll();
+    };
+  }, [dimension, data, group]);
+  const [filters, setFilters] = useState([]);
+  const handleFilter = category => {
+    let newFilters;
+    if (filters.includes(category)) {
+      newFilters = filters.filter(f => f !== category);
+    } else {
+      newFilters = [...filters, category];
+    }
+    setFilters(newFilters);
+    if (newFilters.length) {
+      ndxDimension.filter(d => newFilters.includes(d));
+    } else {
+      ndxDimension.filterAll();
+    }
+    toggleUpdateContext === null || toggleUpdateContext === void 0 ? void 0 : toggleUpdateContext();
+    if (datagridCategoryDimFilter) {
+      dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+        type: DashboardReducerActionType.FilterTable,
+        filter: {
+          id: id,
+          field: datagridCategoryDimFilter.field,
+          operator: datagridCategoryDimFilter.operator,
+          value: newFilters
+        }
+      });
+    }
+    if (onFilter) {
+      onFilter(newFilters);
+    }
+  };
+  const resetFilters = () => {
+    setFilters([]);
+    ndxDimension.filterAll();
+    toggleUpdateContext === null || toggleUpdateContext === void 0 ? void 0 : toggleUpdateContext();
+    if (datagridCategoryDimFilter) {
+      dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+        type: DashboardReducerActionType.ResetFilter,
+        filter: {
+          id: id,
+          field: datagridCategoryDimFilter.field,
+          operator: datagridCategoryDimFilter.operator
+        }
+      });
+    }
+    if (onFilter) {
+      onFilter();
+    }
+  };
+  const updatedFilters = datagridCategoryDimFilter ? (_tableFilters$find = tableFilters.find(filter => filter.field === datagridCategoryDimFilter.field && filter.operator === datagridCategoryDimFilter.operator)) === null || _tableFilters$find === void 0 ? void 0 : _tableFilters$find.value : null;
+  useEffect(() => {
+    if (updatedFilters && updatedFilters !== filters && ndxDimension) {
+      setFilters(updatedFilters);
+      if (updatedFilters.length) {
+        ndxDimension.filter(d => updatedFilters.includes(d));
+      } else {
+        ndxDimension.filterAll();
+      }
+      toggleUpdateContext === null || toggleUpdateContext === void 0 ? void 0 : toggleUpdateContext();
+    }
+  }, [updatedFilters]);
+  const emptyComponent = /*#__PURE__*/React.createElement(ChartEmptyState, {
+    title: emptyChartTitle,
+    subtitle: emptyChartSubtitle,
+    resetLabel: emptyChartResetLabel,
+    onReset: resetFilters
+  });
+  const chartProps = useCategoricalChartAsListbox({
+    id,
+    ref: ref,
+    type: 'bar',
+    ndxGroup,
+    orientation: 'horizontal'
+  });
+  const legendProps = {
+    onLegendItemClick: datum => {
+      handleFilter(datum.data.key);
+    },
+    isLegendItemSelected: datum => {
+      return filters.length === 0 || filters.includes(datum.data.key);
+    },
+    legendItemRole: 'option',
+    role: 'group'
+  };
+  const filterProps = {
+    sliceProps: {
+      tabIndex: -1
+    },
+    sliceRole: 'option',
+    role: 'listbox',
+    chartProps,
+    legendProps,
+    chartRef: ref,
+    data: ndxGroup ? JSON.parse(JSON.stringify(ndxGroup.all())) : undefined,
+    emptyComponent,
+    id,
+    isSliceSelected: datum => {
+      return filters.length === 0 || filters.includes(datum.data.key);
+    },
+    onSliceClick: datum => {
+      handleFilter(datum.data.key);
+    },
+    onReset: isResetable ? resetFilters : undefined
+  };
+  if ( /*#__PURE__*/isValidElement(children)) {
+    return /*#__PURE__*/React.cloneElement(children, _objectSpread2({}, filterProps));
+  }
+  return null;
+};
+
+const filter = (legendFilters, brushFilters) => d => {
+  if (legendFilters && legendFilters.length && brushFilters) {
+    return d[0] >= brushFilters.minX && d[0] <= brushFilters.maxX && d[1] >= brushFilters.minY && d[1] <= brushFilters.maxY && legendFilters.includes(d[2]);
+  } else if (legendFilters && legendFilters.length) {
+    return legendFilters.includes(d[2]);
+  } else if (brushFilters) {
+    return d[0] >= brushFilters.minX && d[0] <= brushFilters.maxX && d[1] >= brushFilters.minY && d[1] <= brushFilters.maxY;
+  } else {
+    return true;
+  }
+};
+const isFiltered = (legendFilters, brushFilters) => datum => {
+  if (legendFilters && legendFilters.length && brushFilters) {
+    return datum.data.key[0] >= brushFilters.minX && datum.data.key[0] <= brushFilters.maxX && datum.data.key[1] >= brushFilters.minY && datum.data.key[1] <= brushFilters.maxY && legendFilters.includes(datum.data.key[2]);
+  } else if (legendFilters && legendFilters.length) {
+    return legendFilters.includes(datum.data.key[2]);
+  } else if (brushFilters) {
+    return datum.data.key[0] >= brushFilters.minX && datum.data.key[0] <= brushFilters.maxX && datum.data.key[1] >= brushFilters.minY && datum.data.key[1] <= brushFilters.maxY;
+  } else {
+    return true;
+  }
+};
+const FilterableScatterPlot = props => {
+  const {
+    children,
+    datagridCoordinatesCategoryDimFilter,
+    dimension,
+    group,
+    id: propsId,
+    isDimensionArray,
+    isResetable,
+    localeText,
+    onFilter
+  } = props;
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  const {
+    emptyChartTitle,
+    emptyChartSubtitle,
+    emptyChartResetLabel
+  } = _objectSpread2({}, localeText);
+  const {
+    data,
+    dispatch,
+    toggleUpdateContext
+    // state: { tableFilters },
+  } = useContext(DashboardContext);
+  const [ndxDimension, setNdxDimension] = useState();
+  const [ndxGroup, setNdxGroup] = useState();
+  useEffect(() => {
+    const computedNdxDimension = CrossfilterRegistry.get(data).dimension(dimension, isDimensionArray);
+    const computedNdxGroup = group ? group(computedNdxDimension) : computedNdxDimension.group();
+    setNdxDimension(computedNdxDimension);
+    setNdxGroup(computedNdxGroup);
+    return function cleanup() {
+      computedNdxDimension.filterAll();
+    };
+  }, [dimension, data, group]);
+  const [brushFilters, setBrushFilters] = useState();
+  const [legendFilters, setLegendFilters] = useState([]);
+  const handleBrushFilter = newFilters => {
+    setBrushFilters(newFilters);
+    ndxDimension.filter(d => filter(legendFilters, newFilters)(d));
+    toggleUpdateContext === null || toggleUpdateContext === void 0 ? void 0 : toggleUpdateContext();
+    if (datagridCoordinatesCategoryDimFilter) {
+      dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+        type: DashboardReducerActionType.FilterTable,
+        filter: {
+          id: `${id}-x`,
+          field: datagridCoordinatesCategoryDimFilter[0].field,
+          operator: datagridCoordinatesCategoryDimFilter[0].operator,
+          value: [newFilters.minX, newFilters.maxX]
+        }
+      });
+      dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+        type: DashboardReducerActionType.FilterTable,
+        filter: {
+          id: `${id}-y`,
+          field: datagridCoordinatesCategoryDimFilter[1].field,
+          operator: datagridCoordinatesCategoryDimFilter[1].operator,
+          value: [newFilters.minY, newFilters.maxY]
+        }
+      });
+    }
+    if (onFilter) {
+      onFilter(newFilters);
+    }
+  };
+  const handleLegendFilter = category => {
+    let newFilters;
+    if (legendFilters.includes(category)) {
+      newFilters = legendFilters.filter(f => f !== category);
+    } else {
+      newFilters = [...legendFilters, category];
+    }
+    setLegendFilters(newFilters);
+    ndxDimension.filter(d => filter(newFilters, brushFilters)(d));
+    toggleUpdateContext === null || toggleUpdateContext === void 0 ? void 0 : toggleUpdateContext();
+    if ((datagridCoordinatesCategoryDimFilter === null || datagridCoordinatesCategoryDimFilter === void 0 ? void 0 : datagridCoordinatesCategoryDimFilter.length) === 3) {
+      dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+        type: DashboardReducerActionType.FilterTable,
+        filter: {
+          id: `${id}-category`,
+          field: datagridCoordinatesCategoryDimFilter[2].field,
+          operator: datagridCoordinatesCategoryDimFilter[2].operator,
+          value: newFilters
+        }
+      });
+    }
+    if (onFilter) {
+      onFilter(newFilters);
+    }
+  };
+  const resetFilters = function () {
+    let brush = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    let legend = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    if (brush) {
+      setBrushFilters(undefined);
+    }
+    if (legend) {
+      setLegendFilters([]);
+    }
+    ndxDimension.filter(d => filter(legend ? [] : legendFilters, brush ? undefined : brushFilters)(d));
+    toggleUpdateContext === null || toggleUpdateContext === void 0 ? void 0 : toggleUpdateContext();
+    if (datagridCoordinatesCategoryDimFilter) {
+      if (brush) {
+        dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+          type: DashboardReducerActionType.ResetFilter,
+          filter: {
+            id: `${id}-x`,
+            field: datagridCoordinatesCategoryDimFilter[0].field,
+            operator: datagridCoordinatesCategoryDimFilter[0].operator
+          }
+        });
+        dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+          type: DashboardReducerActionType.ResetFilter,
+          filter: {
+            id: `${id}-y`,
+            field: datagridCoordinatesCategoryDimFilter[1].field,
+            operator: datagridCoordinatesCategoryDimFilter[1].operator
+          }
+        });
+      }
+      if (legend && datagridCoordinatesCategoryDimFilter.length === 3) {
+        dispatch === null || dispatch === void 0 ? void 0 : dispatch({
+          type: DashboardReducerActionType.ResetFilter,
+          filter: {
+            id: `${id}-category`,
+            field: datagridCoordinatesCategoryDimFilter[2].field,
+            operator: datagridCoordinatesCategoryDimFilter[2].operator
+          }
+        });
+      }
+    }
+    if (onFilter) {
+      onFilter();
+    }
+  };
+
+  // useEffect(() => {
+  //   if (!datagridCoordinatesCategoryDimFilter) {
+  //     return;
+  //   }
+
+  //   const updatedXFilters = tableFilters.find(
+  //     (filter) =>
+  //       filter.field === datagridCoordinatesCategoryDimFilter[0].field &&
+  //       filter.operator ===
+  //         datagridCoordinatesCategoryDimFilter[0].operator
+  //   )?.value;
+  //   const updatedYFilters = tableFilters.find(
+  //     (filter) =>
+  //       filter.field === datagridCoordinatesCategoryDimFilter[1].field &&
+  //       filter.operator ===
+  //         datagridCoordinatesCategoryDimFilter[1].operator
+  //   )?.value;
+  //   console.log(updatedXFilters, updatedYFilters, brushFilters);
+  //   const updatedFilters = {
+  //     minX: Number(updatedXFilters[0]),
+  //     maxX: Number(updatedXFilters[0]),
+  //     minY: Number(updatedYFilters[1]),
+  //     maxY: Number(updatedYFilters[1]),
+  //   }
+  //   if (updatedFilters && JSON.stringify(updatedFilters) !== JSON.stringify(brushFilters)) {
+  //   }
+  // }, [tableFilters]);
+
+  const emptyComponent = /*#__PURE__*/React.createElement(ChartEmptyState, {
+    title: emptyChartTitle,
+    subtitle: emptyChartSubtitle,
+    resetLabel: emptyChartResetLabel,
+    onReset: resetFilters
+  });
+  const legendProps = {
+    onLegendItemClick: datum => {
+      handleLegendFilter(datum.data.key);
+    },
+    isLegendItemSelected: datum => {
+      return legendFilters.length === 0 || legendFilters.includes(datum.data.key);
+    },
+    legendItemRole: 'option',
+    role: 'group'
+  };
+  const filterProps = {
+    isBrushable: true,
+    data: ndxGroup ? JSON.parse(JSON.stringify(ndxGroup.all())) : undefined,
+    dotRole: 'option',
+    role: 'listbox',
+    emptyComponent,
+    id,
+    legendProps,
+    onBrush: (selection, scaleX, scaleY) => {
+      if (selection) {
+        setBrushFilters({
+          minX: scaleX.invert(selection[0][0]),
+          minY: scaleY.invert(selection[1][1]),
+          maxX: scaleX.invert(selection[1][0]),
+          maxY: scaleY.invert(selection[0][1])
+        });
+      }
+    },
+    onBrushEnd: (selection, scaleX, scaleY) => {
+      if (selection && scaleX && scaleY) {
+        handleBrushFilter({
+          minX: scaleX.invert(selection[0][0]),
+          minY: scaleY.invert(selection[1][1]),
+          maxX: scaleX.invert(selection[1][0]),
+          maxY: scaleY.invert(selection[0][1])
+        });
+      } else {
+        resetFilters(true, false);
+      }
+    },
+    onReset: isResetable ? resetFilters : undefined,
+    isDotSelected: datum => isFiltered(legendFilters, brushFilters)(datum)
+  };
+  if ( /*#__PURE__*/isValidElement(children)) {
+    return /*#__PURE__*/React.cloneElement(children, _objectSpread2({}, filterProps));
+  }
+  return null;
+};
+
+const WithFilters = props => {
+  if (isComponent('DataGrid')(props.children)) {
+    return /*#__PURE__*/React.createElement(FilterableDataGrid, props);
+  }
+  const {
+    dimension
+  } = props;
+  if (!dimension) {
+    return null;
+  }
+  if (isComponent('BarChart')(props.children)) {
+    return /*#__PURE__*/React.createElement(FilterableBarChart, _extends({}, props, {
+      dimension: dimension
+    }));
+  } else if (isComponent('PieChart')(props.children)) {
+    return /*#__PURE__*/React.createElement(FilterablePieChart, _extends({}, props, {
+      dimension: dimension
+    }));
+  } else if (isComponent('ScatterPlot')(props.children)) {
+    return /*#__PURE__*/React.createElement(FilterableScatterPlot, _extends({}, props, {
+      dimension: dimension
+    }));
+  }
+  return /*#__PURE__*/React.isValidElement(props.children) ? props.children : null;
+};
+
+export { WithFilters as W };
+//# sourceMappingURL=WithFilters2.js.map