@cubejs-client/react 0.35.0 → 0.35.23

package/dist/cubejs-client-react.esm.js

@@ -14,33 +14,29 @@ class QueryRenderer extends React.Component {
     loadSql: null,
     updateOnlyOnStateChange: false,
     resetResultSetOnChange: true
-  }; // @deprecated use `isQueryPresent` from `@cubejs-client/core`
+  };
 
+  // @deprecated use `isQueryPresent` from `@cubejs-client/core`
   static isQueryPresent(query) {
     return isQueryPresent(query);
   }
-
   constructor(props) {
     super(props);
     this.state = {};
     this.mutexObj = {};
   }
-
   componentDidMount() {
     const {
       query,
       queries
     } = this.props;
-
     if (query) {
       this.load(query);
     }
-
     if (queries) {
       this.loadQueries(queries);
     }
   }
-
   shouldComponentUpdate(nextProps, nextState) {
     const {
       query,
@@ -50,34 +46,27 @@ class QueryRenderer extends React.Component {
       loadSql,
       updateOnlyOnStateChange
     } = this.props;
-
     if (!updateOnlyOnStateChange) {
       return true;
     }
-
     return !equals(nextProps.query, query) || !equals(nextProps.queries, queries) || (nextProps.render == null || render == null) && nextProps.render !== render || nextProps.cubeApi !== cubeApi || nextProps.loadSql !== loadSql || !equals(nextState, this.state) || nextProps.updateOnlyOnStateChange !== updateOnlyOnStateChange;
   }
-
   componentDidUpdate(prevProps) {
     const {
       query,
       queries
     } = this.props;
-
     if (!equals(prevProps.query, query)) {
       this.load(query);
     }
-
     if (!equals(prevProps.queries, queries)) {
       this.loadQueries(queries);
     }
   }
-
   cubeApi() {
     // eslint-disable-next-line react/destructuring-assignment
     return this.props.cubeApi || this.context && this.context.cubeApi;
   }
-
   load(query) {
     const {
       resetResultSetOnChange
@@ -94,7 +83,6 @@ class QueryRenderer extends React.Component {
       loadSql
     } = this.props;
     const cubeApi = this.cubeApi();
-
     if (query && isQueryPresent(query)) {
       if (loadSql === 'only') {
         cubeApi.sql(query, {
@@ -104,7 +92,8 @@ class QueryRenderer extends React.Component {
           sqlQuery,
           error: null,
           isLoading: false
-        })).catch(error => this.setState({ ...(resetResultSetOnChange ? {
+        })).catch(error => this.setState({
+          ...(resetResultSetOnChange ? {
             resultSet: null
           } : {}),
           error,
@@ -122,7 +111,8 @@ class QueryRenderer extends React.Component {
           resultSet,
           error: null,
           isLoading: false
-        })).catch(error => this.setState({ ...(resetResultSetOnChange ? {
+        })).catch(error => this.setState({
+          ...(resetResultSetOnChange ? {
             resultSet: null
           } : {}),
           error,
@@ -136,7 +126,8 @@ class QueryRenderer extends React.Component {
           resultSet,
           error: null,
           isLoading: false
-        })).catch(error => this.setState({ ...(resetResultSetOnChange ? {
+        })).catch(error => this.setState({
+          ...(resetResultSetOnChange ? {
             resultSet: null
           } : {}),
           error,
@@ -145,7 +136,6 @@ class QueryRenderer extends React.Component {
       }
     }
   }
-
   loadQueries(queries) {
     const cubeApi = this.cubeApi();
     const {
@@ -166,14 +156,14 @@ class QueryRenderer extends React.Component {
       resultSet: fromPairs(resultSet),
       error: null,
       isLoading: false
-    })).catch(error => this.setState({ ...(resetResultSetOnChange ? {
+    })).catch(error => this.setState({
+      ...(resetResultSetOnChange ? {
         resultSet: null
       } : {}),
       error,
       isLoading: false
     }));
   }
-
   render() {
     const {
       error,
@@ -193,31 +183,25 @@ class QueryRenderer extends React.Component {
       },
       sqlQuery
     };
-
     if (render) {
       return render(loadState);
     }
-
     return null;
   }
-
 }
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -226,9 +210,11 @@ const QueryRendererWithTotals = ({
   ...restProps
 }) => /*#__PURE__*/React.createElement(QueryRenderer, _extends({
   queries: {
-    totals: { ...query,
+    totals: {
+      ...query,
       dimensions: [],
-      timeDimensions: query.timeDimensions ? query.timeDimensions.map(td => ({ ...td,
+      timeDimensions: query.timeDimensions ? query.timeDimensions.map(td => ({
+        ...td,
         granularity: null
       })) : undefined
     },
@@ -240,12 +226,10 @@ function removeEmpty(obj) {
   if (typeof obj !== 'object') {
     return obj;
   }
-
   return Object.fromEntries(Object.entries(obj).filter(([, v]) => v != null).map(([k, v]) => {
     if (Array.isArray(v)) {
       return [k, v.map(removeEmpty)];
     }
-
     return [k, typeof v === 'object' ? removeEmpty(v) : v];
   }));
 }
@@ -295,29 +279,29 @@ class QueryBuilder extends React.Component {
     setQuery: null,
     vizState: null,
     setVizState: null
-  }; // This is an anti-pattern, only kept for backward compatibility
-  // https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#anti-pattern-unconditionally-copying-props-to-state
+  };
 
+  // This is an anti-pattern, only kept for backward compatibility
+  // https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#anti-pattern-unconditionally-copying-props-to-state
   static getDerivedStateFromProps(props, state) {
     if (props.query || props.vizState) {
-      const nextState = { ...state,
+      const nextState = {
+        ...state,
         ...(props.vizState || {})
       };
-
       if (Array.isArray(props.query)) {
         throw new Error('Array of queries is not supported.');
       }
-
-      return { ...nextState,
-        query: { ...nextState.query,
+      return {
+        ...nextState,
+        query: {
+          ...nextState.query,
           ...(props.query || {})
         }
       };
     }
-
     return null;
   }
-
   static resolveMember(type, {
     meta,
     query
@@ -325,29 +309,27 @@ class QueryBuilder extends React.Component {
     if (!meta) {
       return [];
     }
-
     if (Array.isArray(query)) {
       return query.reduce((memo, currentQuery) => memo.concat(QueryBuilder.resolveMember(type, {
         meta,
         query: currentQuery
       })), []);
     }
-
     if (type === 'timeDimensions') {
-      return (query.timeDimensions || []).map((m, index) => ({ ...m,
-        dimension: { ...meta.resolveMember(m.dimension, 'dimensions'),
+      return (query.timeDimensions || []).map((m, index) => ({
+        ...m,
+        dimension: {
+          ...meta.resolveMember(m.dimension, 'dimensions'),
           granularities
         },
         index
       }));
     }
-
     return (query[type] || []).map((m, index) => ({
       index,
       ...meta.resolveMember(m, type)
     }));
   }
-
   constructor(props) {
     super(props);
     this.state = {
@@ -366,12 +348,10 @@ class QueryBuilder extends React.Component {
     this.mutexObj = {};
     this.orderMembersOrderKeys = [];
   }
-
   async componentDidMount() {
     this.prevContext = this.context;
     await this.fetchMeta();
   }
-
   async componentDidUpdate(prevProps) {
     const {
       schemaVersion,
@@ -380,16 +360,13 @@ class QueryBuilder extends React.Component {
     const {
       meta
     } = this.state;
-
     if (this.prevContext?.cubeApi !== this.context?.cubeApi) {
       this.prevContext = this.context;
       await this.fetchMeta();
     }
-
     if (prevProps.schemaVersion !== schemaVersion) {
       try {
         const newMeta = await this.cubeApi().meta();
-
         if (!equals(newMeta, meta) && typeof onSchemaChange === 'function') {
           onSchemaChange({
             schemaVersion,
@@ -406,17 +383,14 @@ class QueryBuilder extends React.Component {
       }
     }
   }
-
   fetchMeta = async () => {
     if (!this.cubeApi()) {
       return;
     }
-
     let meta;
     let metaError = null;
     let richMetaError = null;
     let metaErrorStack = null;
-
     try {
       this.setState({
         isFetchingMeta: true
@@ -427,7 +401,6 @@ class QueryBuilder extends React.Component {
       richMetaError = error;
       metaErrorStack = error.response?.stack?.replace(error.message || '', '') || '';
     }
-
     this.setState({
       meta,
       metaError: metaError ? new Error(metaError.message || metaError.toString()) : null,
@@ -440,41 +413,33 @@ class QueryBuilder extends React.Component {
       this.updateQuery({});
     });
   };
-
   cubeApi() {
     const {
       cubeApi
-    } = this.props; // eslint-disable-next-line react/destructuring-assignment
-
+    } = this.props;
+    // eslint-disable-next-line react/destructuring-assignment
     return cubeApi || this.context && this.context.cubeApi;
   }
-
   getMissingMembers(query, meta) {
     if (!meta) {
       return [];
     }
-
     return getQueryMembers(query).map(member => {
       const resolvedMember = meta.resolveMember(member, ['measures', 'dimensions', 'segments']);
-
       if (resolvedMember.error) {
         return member;
       }
-
       return false;
     }).filter(Boolean);
   }
-
   isQueryPresent() {
     const {
       query
     } = this.state;
     return QueryRenderer.isQueryPresent(query);
   }
-
   prepareRenderProps(queryRendererProps) {
     const getName = member => member.name;
-
     const toTimeDimension = member => {
       const rangeSelection = member.compareDateRange ? {
         compareDateRange: member.compareDateRange
@@ -487,7 +452,6 @@ class QueryBuilder extends React.Component {
         ...rangeSelection
       });
     };
-
     const toFilter = member => ({
       member: member.member?.name || member.dimension?.name,
       operator: member.operator,
@@ -495,7 +459,6 @@ class QueryBuilder extends React.Component {
         values: member.values
       })
     });
-
     const updateMethods = (memberType, toQuery = getName) => ({
       add: member => {
         const {
@@ -524,7 +487,6 @@ class QueryBuilder extends React.Component {
         });
       }
     });
-
     const {
       meta,
       metaError,
@@ -539,10 +501,12 @@ class QueryBuilder extends React.Component {
       dryRunResponse,
       metaErrorStack
     } = this.state;
-    const flatFilters = uniqBy(filter => `${prop('member', filter)}${prop('operator', filter)}`, flattenFilters(meta && query.filters || []).map(filter => ({ ...filter,
+    const flatFilters = uniqBy(filter => `${prop('member', filter)}${prop('operator', filter)}`, flattenFilters(meta && query.filters || []).map(filter => ({
+      ...filter,
       member: filter.member || filter.dimension
     })));
-    const filters = flatFilters.map((m, i) => ({ ...m,
+    const filters = flatFilters.map((m, i) => ({
+      ...m,
       dimension: meta.resolveMember(m.member || m.dimension, ['dimensions', 'measures']),
       operators: meta.filterOperatorsForMember(m.member || m.dimension, ['dimensions', 'measures']),
       index: i
@@ -564,7 +528,6 @@ class QueryBuilder extends React.Component {
       segments: [],
       timeDimensions: []
     };
-
     if (meta) {
       availableMeasures = meta.membersForQuery(query, 'measures');
       availableDimensions = meta.membersForQuery(query, 'dimensions');
@@ -574,17 +537,18 @@ class QueryBuilder extends React.Component {
       const cubeNames = uniq([...Object.keys(indexedMeasures), ...Object.keys(indexedDimensions)]).sort();
       availableFilterMembers = cubeNames.map(name => {
         const cube = indexedMeasures[name] || indexedDimensions[name];
-        return { ...cube,
+        return {
+          ...cube,
           members: [...indexedMeasures[name]?.members, ...indexedDimensions[name]?.members].sort((a, b) => a.shortTitle > b.shortTitle ? 1 : -1)
         };
       });
     }
-
     const activeOrder = Array.isArray(query.order) ? Object.fromEntries(query.order) : query.order;
     const members = [...measures, ...dimensions, ...timeDimensions.map(({
       dimension
     }) => dimension)];
-    let orderMembers = uniqBy(prop('id'), [// uniqBy prefers first, so these will only be added if not already in the query
+    let orderMembers = uniqBy(prop('id'), [
+    // uniqBy prefers first, so these will only be added if not already in the query
     ...members.map(({
       name,
       title
@@ -593,19 +557,16 @@ class QueryBuilder extends React.Component {
       title,
       order: activeOrder?.[name] || 'none'
     }))]);
-
     if (this.orderMembersOrderKeys.length !== orderMembers.length) {
       this.orderMembersOrderKeys = orderMembers.map(({
         id
       }) => id);
     }
-
     if (this.orderMembersOrderKeys.length) {
       // Preserve order until the members change or manually re-ordered
       // This is needed so that when an order member becomes active, it doesn't jump to the top of the list
       orderMembers = (this.orderMembersOrderKeys || []).map(id => orderMembers.find(member => member.id === id)).filter(Boolean);
     }
-
     return {
       meta,
       metaError,
@@ -641,7 +602,8 @@ class QueryBuilder extends React.Component {
       updateOrder: {
         set: (memberId, newOrder = 'asc') => {
           this.updateQuery({
-            order: orderMembers.map(orderMember => ({ ...orderMember,
+            order: orderMembers.map(orderMember => ({
+              ...orderMember,
               order: orderMember.id === memberId ? newOrder : orderMember.order
             })).reduce((acc, {
               id,
@@ -658,7 +620,6 @@ class QueryBuilder extends React.Component {
           if (sourceIndex == null || destinationIndex == null) {
             return;
           }
-
           const nextArray = moveItemInArray(orderMembers, sourceIndex, destinationIndex);
           this.orderMembersOrderKeys = nextArray.map(({
             id
@@ -688,11 +649,13 @@ class QueryBuilder extends React.Component {
             limit
           } = config;
           this.updateVizState({
-            pivotConfig: { ...pivotConfig,
+            pivotConfig: {
+              ...pivotConfig,
               ...config
             },
             ...(limit ? {
-              query: { ...query,
+              query: {
+                ...query,
                 limit
               }
             } : null)
@@ -706,18 +669,17 @@ class QueryBuilder extends React.Component {
       ...queryRendererProps
     };
   }
-
   updateQuery(queryUpdate) {
     const {
       query
     } = this.state;
     this.updateVizState({
-      query: removeEmptyQueryFields({ ...query,
+      query: removeEmptyQueryFields({
+        ...query,
         ...queryUpdate
       })
     });
   }
-
   async updateVizState(state) {
     const {
       setQuery,
@@ -730,77 +692,75 @@ class QueryBuilder extends React.Component {
       meta
     } = this.state;
     const finalState = this.applyStateChangeHeuristics(state);
-
     if (!finalState.query) {
-      finalState.query = { ...stateQuery
+      finalState.query = {
+        ...stateQuery
       };
     }
-
     let vizStateSent = null;
-
     const handleVizStateChange = currentState => {
       const {
         onVizStateChanged
       } = this.props;
-
       if (onVizStateChanged) {
-        const newVizState = pick(['chartType', 'pivotConfig', 'query'], currentState); // Don't run callbacks more than once unless the viz state has changed since last time
-
+        const newVizState = pick(['chartType', 'pivotConfig', 'query'], currentState);
+        // Don't run callbacks more than once unless the viz state has changed since last time
         if (!vizStateSent || !equals(vizStateSent, newVizState)) {
-          onVizStateChanged(newVizState); // use clone to make sure we don't save object references
-
+          onVizStateChanged(newVizState);
+          // use clone to make sure we don't save object references
           vizStateSent = clone(newVizState);
         }
       }
-    }; // deprecated, setters replaced by onVizStateChanged
-
+    };
 
+    // deprecated, setters replaced by onVizStateChanged
     const runSetters = currentState => {
       if (setVizState) {
         setVizState(pick(['chartType', 'pivotConfig', 'query'], currentState));
       }
-
       if (currentState.query && setQuery) {
         setQuery(currentState.query);
       }
     };
-
     if (finalState.shouldApplyHeuristicOrder) {
       finalState.query.order = defaultOrder(finalState.query);
     }
-
     finalState.pivotConfig = ResultSet.getNormalizedPivotConfig(finalState.query, finalState.pivotConfig !== undefined ? finalState.pivotConfig : statePivotConfig);
     finalState.missingMembers = this.getMissingMembers(finalState.query, meta);
-    finalState.chartType = finalState.chartType || state.chartType || chartType; // deprecated
+    finalState.chartType = finalState.chartType || state.chartType || chartType;
 
-    runSetters({ ...state,
+    // deprecated
+    runSetters({
+      ...state,
       query: finalState.query
-    }); // Update optimistically so that UI does not stutter
+    });
 
-    this.setState({ ...finalState,
+    // Update optimistically so that UI does not stutter
+    this.setState({
+      ...finalState,
       queryError: null
     });
     handleVizStateChange(finalState);
     const shouldFetchDryRun = !equals(pick(['measures', 'dimensions', 'timeDimensions'], stateQuery), pick(['measures', 'dimensions', 'timeDimensions'], finalState.query));
-
     if (shouldFetchDryRun && isQueryPresent(finalState.query) && finalState.missingMembers.length === 0) {
       try {
         const response = await this.cubeApi().dryRun(finalState.query, {
           mutexObj: this.mutexObj
         });
-
         if (finalState.shouldApplyHeuristicOrder) {
-          finalState.query.order = (response.queryOrder || []).reduce((memo, current) => ({ ...memo,
+          finalState.query.order = (response.queryOrder || []).reduce((memo, current) => ({
+            ...memo,
             ...current
           }), {});
         }
-
         finalState.pivotConfig = ResultSet.getNormalizedPivotConfig(response.pivotQuery, finalState.pivotConfig);
         finalState.validatedQuery = this.validatedQuery(finalState);
-        finalState.dryRunResponse = response; // deprecated
+        finalState.dryRunResponse = response;
 
+        // deprecated
         if (isQueryPresent(stateQuery)) {
-          runSetters({ ...this.state,
+          runSetters({
+            ...this.state,
             ...finalState
           });
         }
@@ -811,17 +771,14 @@ class QueryBuilder extends React.Component {
         });
       }
     }
-
     this.setState(finalState, () => handleVizStateChange(this.state));
   }
-
   validatedQuery(state) {
     const {
       query
     } = state || this.state;
     return validateQuery(query);
   }
-
   defaultHeuristics(newState) {
     const {
       query,
@@ -833,20 +790,16 @@ class QueryBuilder extends React.Component {
       sessionGranularity: sessionGranularity || 'day'
     });
   }
-
   applyStateChangeHeuristics(newState) {
     const {
       stateChangeHeuristics,
       disableHeuristics
     } = this.props;
-
     if (disableHeuristics) {
       return newState;
     }
-
     return stateChangeHeuristics && stateChangeHeuristics(this.state, newState) || this.defaultHeuristics(newState);
   }
-
   render() {
     const {
       query
@@ -856,7 +809,6 @@ class QueryBuilder extends React.Component {
       render,
       wrapWithQueryRenderer
     } = this.props;
-
     if (wrapWithQueryRenderer) {
       return /*#__PURE__*/React.createElement(QueryRenderer, {
         query: query,
@@ -866,7 +818,6 @@ class QueryBuilder extends React.Component {
           if (render) {
             return render(this.prepareRenderProps(queryRendererProps));
           }
-
           return null;
         }
       });
@@ -874,11 +825,9 @@ class QueryBuilder extends React.Component {
       if (render) {
         return render(this.prepareRenderProps());
       }
-
       return null;
     }
   }
-
 }
 
 function CubeProvider({
@@ -896,11 +845,9 @@ function CubeProvider({
 
 function useDeepCompareMemoize(value) {
   const ref = useRef([]);
-
   if (!equals(value, ref.current)) {
     ref.current = value;
   }
-
   return ref.current;
 }
 
@@ -927,12 +874,10 @@ function useCubeFetch(method, options = {}) {
   const {
     skip = false
   } = options;
-
   async function load(loadOptions = {}, ignoreSkip = false) {
     const cubeApi = options.cubeApi || context?.cubeApi;
     const query = loadOptions.query || options.query;
     const queryCondition = method === 'meta' ? true : query && isQueryPresent(query);
-
     if (cubeApi && (ignoreSkip || !skip) && queryCondition) {
       setError(null);
       setResponse({
@@ -944,10 +889,8 @@ function useCubeFetch(method, options = {}) {
         mutexKey: method
       };
       const args = method === 'meta' ? [coreOptions] : [query, coreOptions];
-
       try {
         const response = await cubeApi[method](...args);
-
         if (isMounted()) {
           setResponse({
             response,
@@ -965,24 +908,26 @@ function useCubeFetch(method, options = {}) {
       }
     }
   }
-
   useEffect(() => {
     load();
   }, useDeepCompareMemoize([Object.keys(options.query?.order || {}), options, context]));
-  return { ...response,
+  return {
+    ...response,
     error,
     refetch: options => load(options, true)
   };
 }
 
 function useCubeSql(query, options = {}) {
-  return useCubeFetch('sql', { ...options,
+  return useCubeFetch('sql', {
+    ...options,
     query
   });
 }
 
 function useDryRun(query, options = {}) {
-  return useCubeFetch('dryRun', { ...options,
+  return useCubeFetch('dryRun', {
+    ...options,
     query
   });
 }
@@ -991,7 +936,8 @@ function useLazyDryRun(query, options = {}) {
   const {
     refetch,
     ...result
-  } = useCubeFetch('dryRun', { ...options,
+  } = useCubeFetch('dryRun', {
+    ...options,
     query,
     skip: true
   });
@@ -1008,28 +954,22 @@ function useCubeQuery(query, options = {}) {
   const [error, setError] = useState(null);
   const context = useContext(CubeContext);
   let subscribeRequest = null;
-
   const progressCallback = ({
     progressResponse
   }) => setProgress(progressResponse);
-
   async function fetch() {
     const {
       resetResultSetOnChange
     } = options;
     const cubeApi = options.cubeApi || context?.cubeApi;
-
     if (!cubeApi) {
       throw new Error('Cube API client is not provided');
     }
-
     if (resetResultSetOnChange) {
       setResultSet(null);
     }
-
     setError(null);
     setLoading(true);
-
     try {
       const response = await cubeApi.load(query, {
         mutexObj: mutexRef.current,
@@ -1037,7 +977,6 @@ function useCubeQuery(query, options = {}) {
         progressCallback,
         castNumerics: Boolean(typeof options.castNumerics === 'boolean' ? options.castNumerics : context?.options?.castNumerics)
       });
-
       if (isMounted()) {
         setResultSet(response);
         setProgress(null);
@@ -1049,42 +988,34 @@ function useCubeQuery(query, options = {}) {
         setProgress(null);
       }
     }
-
     if (isMounted()) {
       setLoading(false);
     }
   }
-
   useEffect(() => {
     const {
       skip = false,
       resetResultSetOnChange
     } = options;
     const cubeApi = options.cubeApi || context?.cubeApi;
-
     if (!cubeApi) {
       throw new Error('Cube API client is not provided');
     }
-
     async function loadQuery() {
       if (!skip && isQueryPresent(query)) {
         if (!areQueriesEqual(currentQuery, query)) {
           if (resetResultSetOnChange == null || resetResultSetOnChange) {
             setResultSet(null);
           }
-
           setCurrentQuery(query);
         }
-
         setError(null);
         setLoading(true);
-
         try {
           if (subscribeRequest) {
             await subscribeRequest.unsubscribe();
             subscribeRequest = null;
           }
-
           if (options.subscribe) {
             subscribeRequest = cubeApi.subscribe(query, {
               mutexObj: mutexRef.current,
@@ -1097,7 +1028,6 @@ function useCubeQuery(query, options = {}) {
                 } else {
                   setResultSet(result);
                 }
-
                 setLoading(false);
                 setProgress(null);
               }
@@ -1115,7 +1045,6 @@ function useCubeQuery(query, options = {}) {
         }
       }
     }
-
     loadQuery();
     return () => {
       if (subscribeRequest) {