@eeacms/volto-tableau 3.0.8 → 4.0.0

package/src/Tableau/Tableau.jsx

@@ -0,0 +1,263 @@
+import React, { useState, useRef } from 'react';
+import { connect } from 'react-redux';
+import { toast } from 'react-toastify';
+import isEqual from 'lodash/isEqual';
+import { Toast } from '@plone/volto/components';
+import cx from 'classnames';
+import { useTableau } from '@eeacms/volto-tableau/hooks';
+import Sources from '@eeacms/volto-tableau/Utils/Sources/Sources';
+import Download from '@eeacms/volto-tableau/Utils/Download/Download';
+import Share from '@eeacms/volto-tableau/Utils/Share/Share';
+
+const TableauDebug = ({ mode, vizState, url, version, sheetSize }) => {
+  const { loaded, error } = vizState;
+
+  const showTableauInfo = mode === 'edit' && (!url || (loaded && url) || error);
+
+  return showTableauInfo ? (
+    <div
+      className="tableau-debug"
+      style={{ ...(sheetSize.width ? { width: sheetSize.width } : {}) }}
+    >
+      {!url ? <p className="tableau-error">URL required</p> : ''}
+      {vizState.loaded && url ? (
+        <h3 className="tableau-version">
+          Tableau <span className="version">{version}</span>
+        </h3>
+      ) : null}
+      {vizState.error ? <p className="tableau-error">{vizState.error}</p> : ''}
+    </div>
+  ) : null;
+};
+
+const Tableau = (props) => {
+  const filters = useRef(props.data.filters || {});
+  const vizEl = useRef(null);
+  const viz = useRef();
+  const vizState = useRef({});
+  const [loaded, setLoaded] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [sheetSize, setSheetSize] = useState({});
+  const {
+    canUpdateUrl = true,
+    data = {},
+    extraFilters = {},
+    extraOptions = {},
+    mode = 'view',
+    screen = {},
+    version = '2.9.1',
+    with_sources,
+    with_download,
+    with_share,
+    sources,
+    // noSizeUpdate = false,
+  } = 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 = useTableau(version);
+
+  const onFilterChange = (filter) => {
+    const newFilters = { ...filters.current };
+    const fieldName = filter.getFieldName();
+    const values = filter
+      .getAppliedValues()
+      .map((appliedValue) => appliedValue.value);
+    newFilters[fieldName] = values;
+    if (!isEqual(newFilters, filters)) {
+      props.onChangeBlock(props.block, {
+        ...data,
+        filters: {
+          ...newFilters,
+        },
+      });
+      filters.current = { ...newFilters };
+    }
+  };
+
+  const onVizStateUpdate = (loaded, loading, error) => {
+    vizState.current = { ...vizState.current, loaded, loading, error };
+    setLoaded(loaded);
+    setLoading(loading);
+    setError(error);
+    if (props.setVizState) {
+      props.setVizState({ loaded, loading, error });
+    }
+  };
+
+  const disposeViz = () => {
+    if (viz.current) {
+      viz.current.dispose();
+      viz.current = null;
+    }
+    onVizStateUpdate(false, false, null);
+  };
+
+  const initViz = () => {
+    disposeViz();
+    try {
+      onVizStateUpdate(false, true, vizState.current.error);
+      setSheetSize({});
+      viz.current = new tableau.Viz(vizEl.current, url || defaultUrl, {
+        hideTabs,
+        hideToolbar,
+        sheetname,
+        toolbarPosition,
+        ...data.filters,
+        ...extraFilters,
+        ...extraOptions,
+        onFirstInteractive: () => {
+          onVizStateUpdate(true, false, null);
+          if (viz.current && mode === 'edit') {
+            const workbook = viz.current.getWorkbook();
+            const newData = {
+              url: canUpdateUrl ? viz.current.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'} content={null} />,
+              );
+            }
+            // Filter change event
+            viz.current.addEventListener(
+              tableau.TableauEventName.FILTER_CHANGE,
+              (event) => {
+                event.getFilterAsync().then((filter) => {
+                  onFilterChange(filter);
+                });
+              },
+            );
+          }
+        },
+        // onFirstVizSizeKnown: (e) => {
+        //   if (!noSizeUpdate) {
+        //     setSheetSize(e.$2.sheetSize.maxSize);
+        //   }
+        // },
+      });
+    } catch (e) {
+      onVizStateUpdate(false, false, e._message);
+      setSheetSize({});
+    }
+  };
+
+  const addExtraFilters = (extraFilters) => {
+    const worksheets =
+      viz.current.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 tableauEl = vizEl.current;
+    const tableau = tableauEl.querySelector('iframe');
+    const { sheetSize = {} } = viz.current.getVizSize() || {};
+    const vizWidth = sheetSize?.minSize?.width || 1;
+    const vizHeight = sheetSize?.minSize?.height || 0;
+    const scale = Math.min(tableauEl.clientWidth / vizWidth, 1);
+    tableau.style.transform = `scale(${scale})`;
+    tableau.style.width = `${100 / scale}%`;
+    tableauEl.style.height = `${scale * vizHeight}px`;
+  };
+
+  React.useEffect(() => {
+    if (tableau && url) {
+      initViz();
+    } else {
+      disposeViz();
+    }
+
+    return () => {
+      disposeViz();
+    };
+    /* eslint-disable-next-line */
+  }, [
+    hideTabs,
+    hideToolbar,
+    autoScale,
+    sheetname,
+    tableau,
+    toolbarPosition,
+    url,
+  ]);
+
+  React.useEffect(() => {
+    if (vizState.current.loaded && viz.current) {
+      addExtraFilters(extraFilters);
+    }
+    /* eslint-disable-next-line */
+  }, [JSON.stringify(extraFilters)]);
+
+  React.useEffect(() => {
+    if (vizState.current.loaded && viz.current && autoScale) {
+      updateScale();
+    }
+    /* eslint-disable-next-line */
+  }, [loaded, screen?.page?.width]);
+
+  return (
+    <div className="tableau-wrapper">
+      {loading && (
+        <div
+          className="tableau-loader"
+          style={{ ...(sheetSize.width ? { width: sheetSize.width } : {}) }}
+        >
+          <span>Loading...</span>
+        </div>
+      )}
+      <TableauDebug
+        mode={props.mode}
+        vizState={{ loaded, loading, error }}
+        url={url}
+        version={version}
+        sheetSize={sheetSize}
+      />
+      <div
+        className={cx('tableau', `tableau-${version}`, {
+          'tableau-scale': autoScale,
+        })}
+        ref={vizEl}
+      />
+      <div
+        className="tableau-info"
+        style={{ ...(sheetSize.width ? { width: sheetSize.width } : {}) }}
+      >
+        {with_sources && loaded && <Sources sources={sources} />}
+        {with_download && loaded && <Download viz={viz.current} />}
+        {with_share && loaded && <Share viz={viz.current} />}
+      </div>
+    </div>
+  );
+};
+
+export default connect((state) => ({
+  screen: state.screen,
+}))(Tableau);

package/src/Utils/Download/Download.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Button, Popup } from 'semantic-ui-react';
+import cx from 'classnames';
+import { Icon } from '@plone/volto/components';
+import downloadSVG from '@eeacms/volto-tableau/icons/download.svg';
+
+const Download = ({ viz }) => {
+  const [expanded, setExpanded] = React.useState(false);
+  const popupRef = React.useRef();
+
+  return (
+    <Popup
+      popper={{ id: 'tableau-download-popup' }}
+      trigger={
+        <div className="tableau-download-container">
+          <button className={cx('tableau-download-button', { expanded })}>
+            <span>Download data</span>
+            <Icon name={downloadSVG} size="24px" />
+          </button>
+        </div>
+      }
+      position="bottom left"
+      on="click"
+      onClose={() => {
+        setExpanded(false);
+      }}
+      onOpen={() => {
+        setExpanded(true);
+      }}
+      ref={popupRef}
+    >
+      <Button
+        color="primary"
+        onClick={() => {
+          viz.showExportImageDialog();
+          popupRef.current.triggerRef.current.click();
+        }}
+      >
+        Image
+      </Button>
+      <Button
+        color="primary"
+        onClick={() => {
+          viz.showExportPDFDialog();
+          popupRef.current.triggerRef.current.click();
+        }}
+      >
+        PDF
+      </Button>
+      <Button
+        color="primary"
+        onClick={() => {
+          viz.showExportCrossTabDialog();
+          popupRef.current.triggerRef.current.click();
+        }}
+      >
+        CSV
+      </Button>
+      <Button
+        color="primary"
+        onClick={() => {
+          viz.exportCrossTabToExcel();
+          popupRef.current.triggerRef.current.click();
+        }}
+      >
+        Excel
+      </Button>
+    </Popup>
+  );
+};
+
+export default Download;

package/src/Utils/Share/Share.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Icon } from '@plone/volto/components';
+import shareSVG from '@plone/volto/icons/share.svg';
+
+const Share = ({ viz }) => {
+  return (
+    <div className="tableau-share-container">
+      <button
+        className="tableau-share-button"
+        onClick={() => {
+          viz.showShareDialog();
+        }}
+      >
+        <span>Share</span>
+        <Icon name={shareSVG} size="24px" />
+      </button>
+    </div>
+  );
+};
+
+export default Share;

package/src/Utils/Sources/Sources.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import cx from 'classnames';
+import { Popup } from 'semantic-ui-react';
+import { UniversalLink } from '@plone/volto/components';
+
+const Link = ({ children, ...props }) => {
+  if (props.href) {
+    return <UniversalLink {...props}>{children}</UniversalLink>;
+  }
+  return <span {...props}>{children}</span>;
+};
+
+const Source = ({ source }) => {
+  return (
+    <>
+      <Link className="embed-sources-param-title" href={source.link}>
+        {source.title},{' '}
+        <span className="embed-sources-param-description">
+          {source.organisation}
+        </span>
+      </Link>
+    </>
+  );
+};
+
+const SourcesWidget = ({ sources }) => {
+  const [expanded, setExpanded] = React.useState(false);
+
+  return (
+    <div className="tableau-sources-container">
+      <Popup
+        content={
+          sources?.length ? (
+            <ol className="sources-list">
+              {sources?.map((source, index) => {
+                return (
+                  <li key={index}>
+                    <Source source={source} />
+                  </li>
+                );
+              })}
+            </ol>
+          ) : (
+            <p>Data provenance is not set for this visualization.</p>
+          )
+        }
+        position="bottom left"
+        popper={{ id: 'tableau-sources-popup' }}
+        trigger={
+          <button className={cx('tableau-sources-button', { expanded })}>
+            Sources
+          </button>
+        }
+        on="click"
+        onClose={() => {
+          setExpanded(false);
+        }}
+        onOpen={() => {
+          setExpanded(true);
+        }}
+      />
+    </div>
+  );
+};
+
+export default SourcesWidget;

package/src/Views/VisualizationView.jsx

@@ -1,41 +1,21 @@
 import React from 'react';
-import TableauView from '../TableauBlock/View';
+import { Container } from 'semantic-ui-react';
+import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';
 
 const VisualizationView = (props) => {
-  const [tableauError, setTableauError] = React.useState('');
   const { content = {} } = props;
-  const { tableau_visualization_data = {} } = content;
+  const { tableau_visualization = {}, data_provenance = {} } = content;
 
-  const TableauNotDisplayed = () => {
-    return (
-      <div className="tableau-block not_displayed_tableau">
-        <div className="tableau-info">
-          {!tableau_visualization_data.general?.url ? (
-            <p className="tableau-error">URL required</p>
-          ) : tableauError ? (
-            <p className="tableau-error">{tableauError}</p>
-          ) : (
-            ''
-          )}
-        </div>
-      </div>
-    );
-  };
   return (
-    <div>
-      {!tableau_visualization_data?.general?.url || tableauError ? (
-        <TableauNotDisplayed />
-      ) : (
-        <TableauView
-          setTableauError={setTableauError}
-          data={{
-            ...tableau_visualization_data.general,
-            ...tableau_visualization_data.options,
-            ...tableau_visualization_data.extraOptions,
-          }}
-        />
-      )}
-    </div>
+    <Container id="page-document">
+      <Tableau
+        data={tableau_visualization}
+        with_sources={true}
+        with_download={true}
+        with_share={true}
+        sources={data_provenance.data || []}
+      />
+    </Container>
   );
 };
 

package/src/Widgets/VisualizationWidget.jsx

@@ -1,77 +1,82 @@
 import React from 'react';
 import { Modal, Button, Grid } from 'semantic-ui-react';
-import '@eeacms/volto-tableau/less/tableau.less';
 import config from '@plone/volto/registry';
-
 import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
+import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';
+import getSchema from './schema';
 
-import TableauView from '../TableauBlock/View';
-import Schema from './schema';
+import '@eeacms/volto-tableau/less/tableau.less';
 
 const VisualizationWidget = (props) => {
   const [open, setOpen] = React.useState(false);
-  const { onChange = {}, id } = props;
-
-  const block = React.useMemo(() => props.block, [props.block]);
-  const value = React.useMemo(() => props.value, [props.value]);
-
-  const [intValue, setIntValue] = React.useState(value);
-  const [tableauError, setTableauError] = React.useState('');
-
-  const dataForm = { tableau_data: intValue };
+  const [schema] = React.useState(getSchema(config));
+  const [value, setValue] = React.useState(props.value);
 
   const handleApplyChanges = () => {
-    onChange(id, intValue);
+    props.onChange(props.id, value);
     setOpen(false);
   };
 
   const handleClose = () => {
-    setIntValue(value);
+    setValue(props.value);
     setOpen(false);
   };
 
-  const handleChangeField = (val) => {
-    setIntValue(val);
-  };
-
-  const TableauNotDisplayed = () => {
-    return (
-      <div className="tableau-block not_displayed_tableau">
-        <div className="tableau-info">
-          {intValue && intValue.general && !intValue.general.url ? (
-            <p className="tableau-error">URL required</p>
-          ) : tableauError ? (
-            <p className="tableau-error">{tableauError}</p>
-          ) : (
-            ''
-          )}
-        </div>
-      </div>
-    );
-  };
-
-  let schema = Schema(config);
-
-  React.useEffect(() => {
-    if (!intValue?.options) {
-      setIntValue({
-        ...intValue,
-        options: {
-          autoScale: false,
-          hideTabs: false,
-          hideToolbar: false,
-          toolbarPosition: 'Top',
-        },
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   return (
     <FormFieldWrapper {...props}>
-      <div className="wrapper">
+      <Modal id="tableau-editor-modal" open={open}>
+        <Modal.Content scrolling>
+          <Grid>
+            <Grid.Column
+              mobile={4}
+              tablet={4}
+              computer={4}
+              className="tableau-editor-column"
+            >
+              <InlineForm
+                block={props.block}
+                schema={schema}
+                onChangeField={(id, fieldValue) => {
+                  setValue((value) => ({
+                    ...value,
+                    [id]: fieldValue,
+                  }));
+                }}
+                formData={value}
+              />
+            </Grid.Column>
+            <Grid.Column
+              mobile={8}
+              tablet={8}
+              computer={8}
+              className="tableau-visualization-column"
+            >
+              <Tableau
+                data={value}
+                onChangeBlock={(_, newValue) => {
+                  setValue(newValue);
+                }}
+                mode="edit"
+                noSizeUpdate
+              />
+            </Grid.Column>
+          </Grid>
+        </Modal.Content>
+        <Modal.Actions>
+          <Grid>
+            <Grid.Row>
+              <div className="map-edit-actions-container">
+                <Button onClick={handleClose}>Close</Button>
+                <Button color="green" onClick={handleApplyChanges}>
+                  Apply changes
+                </Button>
+              </div>
+            </Grid.Row>
+          </Grid>
+        </Modal.Actions>
+      </Modal>
+      <div>
         <Button
-          floated="right"
           size="tiny"
           onClick={(e) => {
             e.preventDefault();
@@ -82,76 +87,7 @@ const VisualizationWidget = (props) => {
           Open Tableau Editor
         </Button>
       </div>
-
-      {open && (
-        <Modal
-          id="tableau-editor-modal"
-          style={{ width: '95% !important' }}
-          open={true}
-        >
-          <Modal.Content scrolling>
-            <Grid stackable reversed="mobile vertically tablet vertically">
-              <Grid.Column
-                mobile={12}
-                tablet={12}
-                computer={5}
-                className="tableau-editor-column"
-              >
-                <InlineForm
-                  block={block}
-                  schema={schema}
-                  onChangeField={(id, value) => {
-                    handleChangeField(value);
-                  }}
-                  formData={dataForm}
-                />
-              </Grid.Column>
-              <Grid.Column mobile={12} tablet={12} computer={7}>
-                {(intValue && intValue.general && !intValue.general.url) ||
-                tableauError ? (
-                  <TableauNotDisplayed />
-                ) : (
-                  <div className="tableau-container">
-                    <TableauView
-                      setTableauError={setTableauError}
-                      data={{
-                        ...intValue?.general,
-                        ...intValue?.options,
-                        ...intValue?.extraOptions,
-                      }}
-                    />
-                  </div>
-                )}
-              </Grid.Column>
-            </Grid>
-          </Modal.Content>
-          <Modal.Actions>
-            <Grid>
-              <Grid.Row>
-                <div className="map-edit-actions-container">
-                  <Button onClick={handleClose}>Close</Button>
-                  <Button color="green" onClick={handleApplyChanges}>
-                    Apply changes
-                  </Button>
-                </div>
-              </Grid.Row>
-            </Grid>
-          </Modal.Actions>
-        </Modal>
-      )}
-      {(intValue && intValue.general && !intValue.general.url) ||
-      tableauError ? (
-        <TableauNotDisplayed />
-      ) : (
-        <TableauView
-          setTableauError={setTableauError}
-          data={{
-            ...value?.general,
-            ...value?.options,
-            ...value?.extraOptions,
-          }}
-        />
-      )}
+      <Tableau data={props.value} noSizeUpdate />
     </FormFieldWrapper>
   );
 };