@eeacms/volto-tableau 3.0.8 → 4.0.0

package/src/Tableau/View.jsx

@@ -1,254 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { toast } from 'react-toastify';
-import { Toast } from '@plone/volto/components';
-import { setTableauApi } from '@eeacms/volto-tableau/actions';
-import cx from 'classnames';
-import { loadTableauScript } from '../helpers';
-import TableauDownload from '../DownloadExtras/TableauDownload';
-import TableauShare from '../DownloadExtras/TableauShare';
-import '../DownloadExtras/style.less';
-
-const Tableau = (props) => {
-  const ref = React.useRef(null);
-  const filters = React.useRef(props.data.filters || {});
-  const mounted = React.useRef(false);
-  const [viz, setViz] = React.useState(null);
-  const {
-    canUpdateUrl = true,
-    data = {},
-    error = null,
-    extraFilters = {},
-    extraOptions = {},
-    loaded = false,
-    mode = 'view',
-    screen = {},
-    setError = () => {},
-    setLoaded = () => {},
-    version = '2.8.0',
-  } = props;
-  const {
-    autoScale = false,
-    hideTabs = false,
-    hideToolbar = false,
-    sheetname = '',
-    toolbarPosition = 'Top',
-  } = data;
-  const defaultUrl = data.url;
-  const url = props.url || defaultUrl;
-
-  //load tableau from script tag
-  const tableau = loadTableauScript(() => {}, version);
-
-  const onFilterChange = (filter) => {
-    const newFilters = { ...filters.current };
-    const fieldName = filter.getFieldName();
-    const values = filter
-      .getAppliedValues()
-      .map((appliedValue) => appliedValue.value);
-    newFilters[fieldName] = values;
-    if (JSON.stringify(newFilters) !== JSON.stringify(filters)) {
-      props.onChangeBlock(props.block, {
-        ...data,
-        filters: {
-          ...newFilters,
-        },
-      });
-      filters.current = { ...newFilters };
-    }
-  };
-
-  const disposeViz = () => {
-    if (viz) {
-      viz.dispose();
-    }
-    if (loaded) {
-      setLoaded(false);
-    }
-    if (error) {
-      setError(null);
-    }
-  };
-
-  const initViz = () => {
-    disposeViz();
-    try {
-      const newViz = new tableau.Viz(ref.current, url || defaultUrl, {
-        hideTabs,
-        hideToolbar,
-        sheetname,
-        toolbarPosition,
-        ...data.filters,
-        ...extraFilters,
-        ...extraOptions,
-        onFirstInteractive: () => {
-          setLoaded(true);
-          if (newViz && mode === 'edit') {
-            const workbook = newViz.getWorkbook();
-            const newData = {
-              url: canUpdateUrl ? newViz.getUrl() : defaultUrl,
-              sheetname: workbook.getActiveSheet().getName(),
-            };
-            if (newData.url !== url || newData.sheetname !== sheetname) {
-              props.onChangeBlock(props.block, {
-                ...data,
-                ...newData,
-              });
-              toast.success(<Toast success title={'Tableau data updated'} />);
-            }
-            // Filter change event
-            newViz.addEventListener(
-              tableau.TableauEventName.FILTER_CHANGE,
-              (event) => {
-                event.getFilterAsync().then((filter) => {
-                  onFilterChange(filter);
-                });
-              },
-            );
-          }
-        },
-      });
-
-      return setViz(newViz);
-    } catch (e) {
-      setError(e._message);
-    }
-  };
-
-  const addExtraFilters = (extraFilters) => {
-    const worksheets = viz.getWorkbook().getActiveSheet().getWorksheets() || [];
-
-    worksheets.forEach((worksheet) => {
-      if (worksheet.getSheetType() === tableau.DashboardObjectType.WORKSHEET) {
-        Object.keys(extraFilters).forEach((filter) => {
-          if (!extraFilters[filter]) {
-            worksheet.clearFilterAsync(filter);
-          } else {
-            worksheet.applyFilterAsync(
-              filter,
-              extraFilters[filter],
-              tableau.FilterUpdateType.REPLACE,
-            );
-          }
-        });
-      }
-    });
-  };
-
-  const updateScale = () => {
-    const tableauWrapper = ref.current;
-    const tableau = tableauWrapper?.querySelector('iframe');
-    if (mounted.current && viz && tableauWrapper && tableau) {
-      const { sheetSize = {} } = viz.getVizSize() || {};
-      const vizWidth = sheetSize?.minSize?.width || 1;
-      const vizHeight = sheetSize?.minSize?.height || 0;
-      const scale = Math.min(tableauWrapper.clientWidth / vizWidth, 1);
-      tableau.style.transform = `scale(${scale})`;
-      tableau.style.width = `${100 / scale}%`;
-      tableauWrapper.style.height = `${scale * vizHeight}px`;
-    }
-  };
-
-  React.useEffect(() => {
-    if (!mounted.current) {
-      mounted.current = true;
-    }
-    return () => {
-      mounted.current = false;
-    };
-  }, []);
-
-  React.useEffect(() => {
-    // Load new tableau api
-    if (__CLIENT__ && !props.tableau[version]) {
-      props.setTableauApi(version, props.mode);
-    }
-    if (__CLIENT__) {
-      loadTableauScript(() => {}, version);
-    }
-    /* eslint-disable-next-line */
-  }, [version]);
-
-  React.useEffect(() => {
-    if (__CLIENT__ && tableau && url) {
-      initViz();
-    } else {
-      disposeViz();
-    }
-
-    return () => {
-      disposeViz();
-    };
-    /* eslint-disable-next-line */
-  }, [
-    hideTabs,
-    hideToolbar,
-    autoScale,
-    sheetname,
-    tableau,
-    toolbarPosition,
-    url,
-    version,
-  ]);
-
-  React.useEffect(() => {
-    if (mounted.current && loaded && viz) {
-      addExtraFilters(extraFilters);
-    }
-    /* eslint-disable-next-line */
-  }, [JSON.stringify(extraFilters)]);
-
-  React.useEffect(() => {
-    if (autoScale) {
-      updateScale();
-    }
-    /* eslint-disable-next-line */
-  }, [loaded, screen?.page?.width]);
-
-  return (
-    <div id="tableau-wrap">
-      <div id="tableau-outer">
-        {data && Object.keys(data).length > 0 ? (
-          <>
-            {loaded ? (
-              ''
-            ) : (
-              <div className="tableau-loader">
-                <span>Loading...</span>
-              </div>
-            )}
-          </>
-        ) : (
-          <div>No data present in that visualization.</div>
-        )}
-        <div className="dashboard-wrapper">
-          <div className="tableau-block">
-            {viz ? (
-              <div className="tableau-icons">
-                <TableauDownload {...props} viz={viz} />
-                <TableauShare {...props} viz={viz} data={{ url: url }} />
-              </div>
-            ) : null}
-            <div
-              className={cx('tableau', version, {
-                'tableau-scale': autoScale,
-              })}
-              ref={ref}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default compose(
-  connect(
-    (state, props) => ({
-      tableau: state.tableau,
-      screen: state.screen,
-    }),
-    { setTableauApi },
-  ),
-)(Tableau);

package/src/Widgets/style.less

@@ -1,8 +0,0 @@
-.sidebar-container-enter-done {
-  z-index: 1001 !important;
-}
-
-.field-provider-data-action-button {
-  border: 1px solid #c7d5d8;
-  cursor: pointer;
-}

package/src/actions.js

@@ -1,9 +0,0 @@
-import { SET_TABLEAU_API } from '@eeacms/volto-tableau/constants';
-
-export const setTableauApi = (version, mode = 'view') => {
-  return {
-    type: `${SET_TABLEAU_API}_PENDING`,
-    version,
-    mode,
-  };
-};

package/src/constants.js

@@ -1 +0,0 @@
-export const SET_TABLEAU_API = 'SET_TABLEAU_API';

package/src/downloadHelpers/downloadHelpers.js

@@ -1,25 +0,0 @@
-import React from 'react';
-
-const useCopyToClipboard = (text) => {
-  const [copyStatus, setCopyStatus] = React.useState('inactive');
-  const copy = React.useCallback(() => {
-    navigator.clipboard.writeText(text).then(
-      () => setCopyStatus('copied'),
-      () => setCopyStatus('failed'),
-    );
-  }, [text]);
-
-  React.useEffect(() => {
-    if (copyStatus === 'inactive') {
-      return;
-    }
-
-    const timeout = setTimeout(() => setCopyStatus('inactive'), 3000);
-
-    return () => clearTimeout(timeout);
-  }, [copyStatus]);
-
-  return [copyStatus, copy];
-};
-
-export default useCopyToClipboard;

package/src/middleware.js

@@ -1,39 +0,0 @@
-import { SET_TABLEAU_API } from '@eeacms/volto-tableau/constants';
-
-//need to see if we need redux anymore for this
-export default (middlewares) => [
-  (store) => (next) => (action) => {
-    const state = store.getState();
-    const { version = '' } = action || {};
-
-    if (
-      action.type === `${SET_TABLEAU_API}_PENDING` &&
-      !state.tableau.loading[version]
-    ) {
-      // loadTableauScript(() => {}, version);
-      // fetchTableau(version)
-      //   .then((response) => {
-      //     if (mode === 'edit') {
-      //       toast.success(<Toast success title={response.message} />);
-      //     }
-      //     store.dispatch({
-      //       type: `${SET_TABLEAU_API}_SUCCESS`,
-      //       version,
-      //       api: response,
-      //     });
-      //   })
-      //   .catch((error) => {
-      //     if (mode === 'edit') {
-      //       toast.error(<Toast error title={error.message} />);
-      //     }
-      //     store.dispatch({
-      //       type: `${SET_TABLEAU_API}_FAILED`,
-      //       version,
-      //     });
-      //   });
-    }
-
-    return next(action);
-  },
-  ...middlewares,
-];

package/src/store.js

@@ -1,72 +0,0 @@
-import { SET_TABLEAU_API } from '@eeacms/volto-tableau/constants';
-
-const initialState = {
-  loading: {},
-  loaded: {},
-  errors: {},
-};
-
-export default function tableau(state = initialState, action = {}) {
-  const loading = { ...state.loading };
-  const loaded = { ...state.loaded };
-  const errors = { ...state.errors };
-
-  switch (action.type) {
-    case `${SET_TABLEAU_API}_PENDING`:
-      loading[action.version] = true;
-      loaded[action.version] = false;
-      errors[action.version] = false;
-
-      return {
-        ...state,
-        loading: {
-          ...loading,
-        },
-        loaded: {
-          ...loaded,
-        },
-        errors: {
-          ...errors,
-        },
-      };
-
-    case `${SET_TABLEAU_API}_SUCCESS`:
-      loading[action.version] = false;
-      loaded[action.version] = true;
-      errors[action.version] = false;
-      return {
-        ...state,
-        [action.version]: action.api,
-        loading: {
-          ...loading,
-        },
-        loaded: {
-          ...loaded,
-        },
-        errors: {
-          ...errors,
-        },
-      };
-
-    case `${SET_TABLEAU_API}_FAILED`:
-      loading[action.version] = false;
-      loaded[action.version] = false;
-      errors[action.version] = true;
-
-      return {
-        ...state,
-        loading: {
-          ...loading,
-        },
-        loaded: {
-          ...loaded,
-        },
-        errors: {
-          ...errors,
-        },
-      };
-
-    default:
-      return state;
-  }
-}