Add Global mode to CategoryWidget & PieWidget

packages/react-widgets/__tests__/models/CategoryModel.test.js

@@ -1,52 +1,93 @@
 import { getCategories } from '../../src/models/CategoryModel';
 import { AggregationTypes } from '@carto/react-core';
 import { Methods, executeTask } from '@carto/react-workers';
+import { executeSQL } from '@carto/react-api/';
+
+const RESULT = [
+  { name: 'a', value: 2 },
+  { name: 'b', value: 1 }
+];
+
+jest.mock('@carto/react-api', () => ({
+  executeSQL: jest
+    .fn()
+    .mockImplementation(() => new Promise((resolve) => resolve(RESULT)))
+}));
 
 jest.mock('@carto/react-workers', () => ({
-  executeTask: jest.fn(),
+  executeTask: jest
+    .fn()
+    .mockImplementation(() => new Promise((resolve) => resolve(RESULT))),
   Methods: {
     FEATURES_CATEGORY: 'featuresCategory'
   }
 }));
 
 describe('getCategories', () => {
-  describe('should correctly handle viewport features', () => {
-    const categoriesParams = {
-      column: 'storetype',
-      operationColumn: 'revenue',
-      operation: AggregationTypes.COUNT,
-      filters: {},
-      dataSource: 'whatever-data-source'
-    };
-
-    test('correctly returns data', async () => {
-      executeTask.mockImplementation(() =>
-        Promise.resolve([
-          { name: 'a', value: 2 },
-          { name: 'b', value: 1 }
-        ])
+  describe('local mode', () => {
+    test('should work correctly', async () => {
+      const props = {
+        source: {
+          id: '__test__',
+          type: 'query',
+          data: 'SELECT * FROM test',
+          credentials: {
+            apiVersion: 'v2'
+          }
+        },
+        operation: AggregationTypes.SUM,
+        column: 'column_1'
+      };
+
+      const data = await getCategories(props);
+
+      expect(data).toBe(RESULT);
+
+      expect(executeTask).toHaveBeenCalledWith(
+        props.source.id,
+        Methods.FEATURES_CATEGORY,
+        {
+          filters: props.source.filters,
+          filtersLogicalOperator: props.source.filtersLogicalOperator,
+          operation: props.operation,
+          joinOperation: props.joinOperation,
+          column: props.column,
+          operationColumn: props.column
+        }
       );
-      const categories = await getCategories(categoriesParams);
-      expect(categories).toEqual([
-        { name: 'a', value: 2 },
-        { name: 'b', value: 1 }
-      ]);
     });
+  });
+
+  describe('global mode', () => {
+    test('should work correctly', async () => {
+      const props = {
+        source: {
+          id: '__test__',
+          type: 'table',
+          data: '__test__',
+          credentials: {
+            apiVersion: 'v3',
+            accessToken: '__test_token__'
+          },
+          connection: '__test_connection__'
+        },
+        operation: AggregationTypes.SUM,
+        column: 'column_1',
+        operationColumn: 'column_2',
+        global: true
+      };
+
+      const data = await getCategories(props);
+
+      expect(data).toBe(RESULT);
 
-    test('correctly called', async () => {
-      const {
-        column,
-        operationColumn,
-        operation,
-        filters,
-        dataSource
-      } = categoriesParams;
-      await getCategories(categoriesParams);
-      expect(executeTask).toHaveBeenCalledWith(dataSource, Methods.FEATURES_CATEGORY, {
-        column,
-        filters,
-        operation,
-        operationColumn
+      expect(executeSQL).toHaveBeenCalledWith({
+        credentials: props.source.credentials,
+        query: `SELECT COALESCE(column_1, 'null') as name, sum(column_2) as value FROM __test__ GROUP BY column_1`,
+        connection: props.source.connection,
+        opts: {
+          abortController: undefined
+        }
       });
     });
   });

packages/react-widgets/src/hooks/useWidgetFetch.js

@@ -10,7 +10,7 @@ export default function useWidgetFetch(
   { id, dataSource, params, global, onError }
 ) {
   // State
-  const [data, setData] = useState(null);
+  const [data, setData] = useState();
   const [isLoading, setIsLoading] = useState(false);
 
   const isSourceReady = useSelector(

packages/react-widgets/src/models/CategoryModel.js

@@ -1,22 +1,55 @@
+import { executeSQL } from '@carto/react-api/';
+import { AggregationTypes } from '@carto/react-core/';
 import { Methods, executeTask } from '@carto/react-workers';
+import {
+  formatOperationColumn,
+  formatTableNameWithFilters,
+  wrapModelCall
+} from './utils';
 
-export const getCategories = async (props) => {
-  const {
-    column,
-    operationColumn,
-    operation,
-    joinOperation,
-    filters,
-    filtersLogicalOperator,
-    dataSource
-  } = props;
-
-  return executeTask(dataSource, Methods.FEATURES_CATEGORY, {
-    filters,
-    filtersLogicalOperator,
+export function getCategories(props) {
+  return wrapModelCall(props, fromLocal, fromRemote);
+}
+
+// From local
+function fromLocal(props) {
+  const { source, column, operationColumn, operation, joinOperation } = props;
+
+  return executeTask(source.id, Methods.FEATURES_CATEGORY, {
+    filters: source.filters,
+    filtersLogicalOperator: source.filtersLogicalOperator,
     operation,
     joinOperation,
     column,
     operationColumn: operationColumn || column
   });
-};
+}
+
+// From remote
+function fromRemote(props) {
+  const { source, abortController } = props;
+  const { credentials, connection } = source;
+
+  const query = buildSqlQueryToGetCategories(props);
+
+  return executeSQL({
+    credentials,
+    query,
+    connection,
+    opts: { abortController }
+  });
+}
+
+function buildSqlQueryToGetCategories(props) {
+  const { column, operation, operationColumn, joinOperation } = props;
+
+  const selectValueClause = `${operation}(${
+    operation === AggregationTypes.COUNT
+      ? '*'
+      : formatOperationColumn(operationColumn || column, joinOperation)
+  }) as value`;
+
+  return `SELECT COALESCE(${column}, 'null') as name, ${selectValueClause} FROM ${formatTableNameWithFilters(
+    props
+  )} GROUP BY ${column}`.trim();
+}

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

@@ -1,14 +1,13 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { addFilter, removeFilter } from '@carto/react-redux';
 import { WrapperWidgetUI, CategoryWidgetUI, NoDataAlert } from '@carto/react-ui';
 import { _FilterTypes as FilterTypes, AggregationTypes } from '@carto/react-core';
 import { getCategories } from '../models';
-import useSourceFilters from '../hooks/useSourceFilters';
-import { selectAreFeaturesReadyForSource } from '@carto/react-redux/';
 import { useWidgetFilterValues } from '../hooks/useWidgetFilterValues';
 import { columnAggregationOn } from './utils/propTypesFns';
+import useWidgetFetch from '../hooks/useWidgetFetch';
 
 const EMPTY_ARRAY = [];
 
@@ -27,6 +26,7 @@ const EMPTY_ARRAY = [];
  * @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.searchable] - Enable/disable widget searching 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  {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]()
@@ -45,62 +45,29 @@ function CategoryWidget(props) {
     animation,
     filterable,
     searchable,
+    global,
     onError,
     wrapperProps,
     noDataAlertProps
   } = props;
   const dispatch = useDispatch();
 
-  const isSourceReady = useSelector((state) =>
-    selectAreFeaturesReadyForSource(state, dataSource)
-  );
-
-  const [categoryData, setCategoryData] = useState([]);
-
-  const [isLoading, setIsLoading] = useState(true);
-
-  const { filters, filtersLogicalOperator } = useSourceFilters({ dataSource, id });
   const selectedCategories =
     useWidgetFilterValues({ dataSource, id, column, type: FilterTypes.IN }) ||
     EMPTY_ARRAY;
 
-  useEffect(() => {
-    setIsLoading(true);
-
-    if (isSourceReady) {
-      getCategories({
-        column,
-        operationColumn,
-        joinOperation,
-        operation,
-        filters,
-        filtersLogicalOperator,
-        dataSource
-      })
-        .then((data) => {
-          if (data) {
-            setIsLoading(false);
-            setCategoryData(data);
-          }
-        })
-        .catch((error) => {
-          setIsLoading(false);
-          if (onError) onError(error);
-        });
-    }
-  }, [
+  const { data = [], isLoading } = useWidgetFetch(getCategories, {
     id,
-    column,
-    operationColumn,
-    joinOperation,
-    operation,
-    filters,
-    filtersLogicalOperator,
     dataSource,
-    setIsLoading,
-    onError,
-    isSourceReady
-  ]);
+    params: {
+      column,
+      operationColumn,
+      joinOperation,
+      operation
+    },
+    global,
+    onError
+  });
 
   const handleSelectedCategoriesChange = useCallback(
     (categories) => {
@@ -128,9 +95,9 @@ function CategoryWidget(props) {
 
   return (
     <WrapperWidgetUI title={title} isLoading={isLoading} {...wrapperProps}>
-      {categoryData.length || isLoading ? (
+      {data.length || isLoading ? (
         <CategoryWidgetUI
-          data={categoryData}
+          data={data}
           formatter={formatter}
           labels={labels}
           selectedCategories={selectedCategories}
@@ -162,6 +129,7 @@ CategoryWidget.propTypes = {
   animation: PropTypes.bool,
   filterable: PropTypes.bool,
   searchable: PropTypes.bool,
+  global: PropTypes.bool,
   onError: PropTypes.func,
   wrapperProps: PropTypes.object,
   noDataAlertProps: PropTypes.object
@@ -172,6 +140,7 @@ CategoryWidget.defaultProps = {
   animation: true,
   filterable: true,
   searchable: true,
+  global: false,
   wrapperProps: {},
   noDataAlertProps: {}
 };