@eeacms/volto-tableau 3.0.8 → 4.1.0

package/src/DownloadExtras/TableauShare.jsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import { Popup, Tab, Button, Menu, Input } from 'semantic-ui-react';
-import { Icon } from '@plone/volto/components';
-import useCopyToClipboard from '../downloadHelpers/downloadHelpers';
-
-import shareSVG from '@plone/volto/icons/share.svg';
-import linkSVG from '@plone/volto/icons/link.svg';
-
-import cx from 'classnames';
-
-const TableauShare = (props) => {
-  const tableau_url = props.data.url;
-
-  const CopyUrlButton = ({ url, buttonText }) => {
-    const [copyUrlStatus, copyUrl] = useCopyToClipboard(url);
-
-    if (copyUrlStatus === 'copied') {
-      buttonText = 'Copied!';
-    } else if (copyUrlStatus === 'failed') {
-      buttonText = 'Copy failed. Please try again.';
-    }
-
-    return (
-      <Button
-        primary
-        onClick={copyUrl}
-        className={cx('copy-button', {
-          'green-button': copyUrlStatus === 'copied',
-        })}
-      >
-        {buttonText}
-      </Button>
-    );
-  };
-
-  const panes = [
-    {
-      menuItem: (
-        <Menu.Item key="location">
-          <span className="nav-dot">
-            <Icon name={linkSVG} size="24px" />
-          </span>
-          <span className="nav-dot-title">URL</span>
-        </Menu.Item>
-      ),
-      render: () => (
-        <Tab.Pane>
-          <Input defaultValue={tableau_url} />
-          <CopyUrlButton url={tableau_url} buttonText="Copy sharing URL" />
-        </Tab.Pane>
-      ),
-    },
-  ];
-
-  return (
-    <Popup
-      basic
-      className="tableau-share-dialog"
-      position="top center"
-      on="click"
-      trigger={
-        <div className="toolbar-button-wrapper">
-          <Button className="toolbar-button" title="Share">
-            <Icon name={shareSVG} size="26px" />
-          </Button>
-          <span className="btn-text">Share</span>
-        </div>
-      }
-    >
-      <Popup.Header>Share Visualization</Popup.Header>
-      <Popup.Content>
-        <Tab
-          menu={{ secondary: true, pointing: true, fluid: true }}
-          panes={panes}
-        />
-      </Popup.Content>
-    </Popup>
-  );
-};
-
-export default TableauShare;

package/src/DownloadExtras/style.less

@@ -1,152 +0,0 @@
-.dashboard-wrapper {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  background-color: #f5f5f5;
-
-  .tableau-block {
-    position: relative;
-    display: flex;
-    flex: 1 1;
-    flex-direction: column;
-    padding: 1em 0.5em;
-  }
-
-  .toolbar-button {
-    position: relative;
-    width: 32px;
-    height: 32px;
-    padding: 2px !important;
-    background-color: #ff421b !important;
-    border-radius: 3px !important;
-    color: white !important;
-
-    &:hover {
-      opacity: 0.6;
-    }
-
-    svg {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      margin: 0 !important;
-      fill: #fff !important;
-      -webkit-transform: translate(-50%, -50%);
-      transform: translate(-50%, -50%);
-    }
-  }
-}
-
-.tableau-download-dialog {
-  max-width: 282px !important;
-
-  .header {
-    padding: 0.5em 0 !important;
-  }
-
-  button {
-    display: block;
-    width: 100%;
-    margin: 5px 0 !important;
-  }
-}
-
-.tableau-share-dialog {
-  min-width: 400px !important;
-
-  .ui.secondary.pointing.menu .item {
-    display: flex;
-    flex-direction: column;
-    padding: 10px 25px;
-  }
-
-  .nav-dot-title {
-    margin-top: 5px;
-    font-size: 14px;
-  }
-
-  .ui.secondary.pointing.menu .active.item {
-    border-color: #09b;
-
-    .nav-dot-title {
-      font-weight: 500;
-    }
-
-    .nav-dot {
-      opacity: 1;
-    }
-  }
-
-  .nav-dot {
-    display: flex;
-    width: 37px;
-    height: 37px;
-    align-items: center;
-    justify-content: center;
-    margin: 8px auto;
-    background-color: #09b;
-    border-radius: 50%;
-    opacity: 0.6;
-
-    svg {
-      fill: #fff !important;
-    }
-  }
-
-  .ui.secondary.pointing.menu .active.item:hover {
-    border-color: #09b;
-  }
-
-  .ui.tab {
-    .ui.input {
-      display: block;
-      margin-bottom: 1em;
-
-      input {
-        width: 100%;
-      }
-    }
-
-    textarea {
-      display: block;
-      width: 100%;
-      height: 100px;
-      padding: 6px 12px;
-      border: 1px solid grey;
-      margin-bottom: 1.5em;
-      color: #696969;
-      font-family: 'Lucida Console', Monaco, monospace;
-      font-size: 13px;
-    }
-  }
-}
-
-.copy-button {
-  margin-top: 1rem !important;
-}
-
-.copy-button.green-button {
-  background-color: #269b65 !important;
-}
-
-.toolbar-button-wrapper {
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-
-  .btn-text {
-    font-family: Roboto, Helvetica Neue, Arial, Helvetica, sans-serif;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 20px;
-  }
-
-  .ui.button.toolbar-button {
-    margin: 0 7px !important;
-  }
-}
-
-.tableau-icons {
-  display: flex;
-  flex-direction: row;
-}

package/src/Sources/Sources.jsx

@@ -1,50 +0,0 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/anchor-is-valid */
-
-import React from 'react';
-import { UniversalLink, Icon } from '@plone/volto/components';
-
-import rightKeySVG from '@plone/volto/icons/right-key.svg';
-import downKeySVG from '@plone/volto/icons/down-key.svg';
-
-import './style.css';
-
-const SourcesWidget = ({ sources }) => {
-  const [expand, setExpand] = React.useState(true);
-  return (
-    <div>
-      <a className="embed-sources-header" onClick={() => setExpand(!expand)}>
-        <h3>
-          <Icon
-            name={expand ? downKeySVG : rightKeySVG}
-            title={expand ? 'Collapse' : 'Expand'}
-            size="17px"
-          />
-          Sources:
-        </h3>
-      </a>
-      {expand && (
-        <ul>
-          {sources &&
-            sources.data &&
-            sources.data.map((param, i) =>
-              param.link ? (
-                <li key={i} className="embed-source-param">
-                  <UniversalLink
-                    className="embed-sources-param-title"
-                    href={param.link}
-                  >
-                    {param.title}
-                  </UniversalLink>
-                  , {param.organisation}
-                </li>
-              ) : null,
-            )}
-        </ul>
-      )}
-    </div>
-  );
-};
-
-export default SourcesWidget;

package/src/Sources/index.js

@@ -1,3 +0,0 @@
-import Sources from './Sources';
-
-export { Sources };

package/src/Sources/style.css

@@ -1,7 +0,0 @@
-.embed-sources-header {
-  cursor: pointer;
-}
-
-.embed-sources-param-description {
-  margin-left: 5px;
-}

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/TableauBlock/View.jsx

@@ -1,109 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { withRouter } from 'react-router';
-import Tableau from '@eeacms/volto-tableau/Tableau/View';
-import config from '@plone/volto/registry';
-import qs from 'querystring';
-import '@eeacms/volto-tableau/less/tableau.less';
-
-const getDevice = (config, width) => {
-  const breakpoints = config.blocks.blocksConfig.tableau_block.breakpoints;
-  let device = 'default';
-  Object.keys(breakpoints).forEach((breakpoint) => {
-    if (
-      width <= breakpoints[breakpoint][0] &&
-      width >= breakpoints[breakpoint][1]
-    ) {
-      device = breakpoint;
-    }
-  });
-  return device;
-};
-
-const View = (props) => {
-  const [error, setError] = React.useState(null);
-  const [loaded, setLoaded] = React.useState(null);
-  const [mounted, setMounted] = React.useState(false);
-  const [extraFilters, setExtraFilters] = React.useState({});
-  const { data = {}, query = {}, screen = {} } = props;
-  const {
-    breakpointUrls = [],
-    urlParameters = [],
-    title = null,
-    description = null,
-    autoScale = false,
-  } = data;
-  const device = getDevice(config, screen.page?.width || Infinity);
-  const breakpointUrl = breakpointUrls.filter(
-    (breakpoint) => breakpoint.device === device,
-  )[0]?.url;
-  const url = breakpointUrl || data.url;
-
-  React.useEffect(() => {
-    setMounted(true);
-    /* eslint-disable-next-line */
-  }, []);
-
-  React.useEffect(() => {
-    if (props.setTableauError) props.setTableauError(error);
-    /* eslint-disable-next-line */
-  }, [error]);
-
-  React.useEffect(() => {
-    const newExtraFilters = { ...extraFilters };
-    urlParameters.forEach((element) => {
-      if (element.field && typeof query[element.urlParam] !== 'undefined') {
-        newExtraFilters[element.field] = query[element.urlParam];
-      } else if (newExtraFilters[element.field]) {
-        delete newExtraFilters[element.field];
-      }
-    });
-    setExtraFilters(newExtraFilters);
-    /* eslint-disable-next-line */
-  }, [JSON.stringify(query), JSON.stringify(urlParameters)]);
-
-  return mounted ? (
-    <div className="tableau-block">
-      <div className="tableau-info">
-        {loaded && url && props.mode === 'edit' ? (
-          <h3 className="tableau-version">== Tableau ==</h3>
-        ) : null}
-        {!url ? <p className="tableau-error">URL required</p> : ''}
-        {error ? <p className="tableau-error">{error}</p> : ''}
-      </div>
-
-      {loaded && title ? <h3 className="tableau-title">{title}</h3> : ''}
-      {loaded && description ? (
-        <p className="tableau-description">{description}</p>
-      ) : (
-        ''
-      )}
-      {url ? (
-        <Tableau
-          {...props}
-          canUpdateUrl={!breakpointUrl}
-          extraFilters={extraFilters}
-          extraOptions={{ device: autoScale ? 'desktop' : device }}
-          error={error}
-          loaded={loaded}
-          setError={setError}
-          setLoaded={setLoaded}
-          url={url}
-        />
-      ) : null}
-    </div>
-  ) : (
-    ''
-  );
-};
-
-export default compose(
-  connect((state, props) => ({
-    query: {
-      ...(qs.parse(state.router.location?.search?.replace('?', '')) || {}),
-      ...(state.discodata_query?.search || {}),
-    },
-    screen: state.screen,
-  })),
-)(withRouter(View));