@eeacms/volto-tableau 3.0.8 → 4.1.0

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
+        className="primary"
+        onClick={() => {
+          viz.showExportImageDialog();
+          popupRef.current.triggerRef.current.click();
+        }}
+      >
+        Image
+      </Button>
+      <Button
+        className="primary"
+        onClick={() => {
+          viz.showExportPDFDialog();
+          popupRef.current.triggerRef.current.click();
+        }}
+      >
+        PDF
+      </Button>
+      <Button
+        className="primary"
+        onClick={() => {
+          viz.showExportCrossTabDialog();
+          popupRef.current.triggerRef.current.click();
+        }}
+      >
+        CSV
+      </Button>
+      <Button
+        className="primary"
+        onClick={() => {
+          viz.exportCrossTabToExcel();
+          popupRef.current.triggerRef.current.click();
+        }}
+      >
+        Excel
+      </Button>
+    </Popup>
+  );
+};
+
+export default Download;

package/src/Utils/JsonCodeSnippet/JsonCodeSnippet.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import isObject from 'lodash/isObject';
+import isArray from 'lodash/isArray';
+import isString from 'lodash/isString';
+import isBoolean from 'lodash/isBoolean';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
+
+const JsonCodeSnippet = ({ obj, depth = 1 }) => {
+  const keys = Object.keys(obj);
+  return (
+    <>
+      <span className="left-curly-brace">&#123;</span>
+      {!!keys.length && <br />}
+      {keys.map((key) => {
+        const value = obj[key];
+
+        return (
+          <React.Fragment key={`${key}-depth`}>
+            <span className="key" style={{ marginLeft: `${depth}rem` }}>
+              "{key}":
+            </span>
+            <span className="value">
+              &nbsp;
+              {isObject(value) && !isArray(value) && (
+                <JsonCodeSnippet obj={value} depth={depth + 1} />
+              )}
+              {isArray(value) && JSON.stringify(value)}
+              {isString(value) && <>"{value}"</>}
+              {isBoolean(value) && <>{value}</>}
+              {isNull(value) && <>null</>}
+              {isUndefined(value) && <>undefined</>}
+            </span>
+            <br />
+          </React.Fragment>
+        );
+      })}
+      <span
+        className="right-curly-brace"
+        style={{ marginLeft: !!keys.length ? `${depth - 1}rem` : 0 }}
+      >
+        &#125;
+      </span>
+    </>
+  );
+};
+
+export default JsonCodeSnippet;

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,27 @@
 import React from 'react';
-import TableauView from '../TableauBlock/View';
+import { Container } from 'semantic-ui-react';
+import config from '@plone/volto/registry';
+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 || []}
+        breakpoints={
+          config.blocks.blocksConfig.embed_tableau_visualization.breakpoints
+        }
+      />
+    </Container>
   );
 };
 

package/src/Widgets/VisualizationWidget.jsx

@@ -1,77 +1,107 @@
 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 viz = React.useRef();
+  const [vizState, setVizState] = React.useState({
+    loaded: false,
+    loading: false,
+    error: null,
+  });
   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 [value, setValue] = React.useState(props.value);
 
-  const [intValue, setIntValue] = React.useState(value);
-  const [tableauError, setTableauError] = React.useState('');
+  const schema = React.useMemo(() => getSchema(config, viz.current, vizState), [
+    vizState,
+  ]);
 
-  const dataForm = { tableau_data: intValue };
+  const extraOptions = React.useMemo(() => {
+    const options = {};
+    (value.staticParameters || []).forEach((parameter) => {
+      if (parameter.field) {
+        options[parameter.field] = parameter.value;
+      }
+    });
+    return options;
+  }, [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
+                ref={viz}
+                data={value}
+                mode="edit"
+                breakpoints={
+                  config.blocks.blocksConfig.embed_tableau_visualization
+                    .breakpoints
+                }
+                extraOptions={extraOptions}
+                setVizState={setVizState}
+                onChangeBlock={(_, newValue) => {
+                  setValue(newValue);
+                }}
+              />
+            </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 +112,16 @@ 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,
+          autoScale: true,
+        }}
+        breakpoints={
+          config.blocks.blocksConfig.embed_tableau_visualization.breakpoints
+        }
+        extraOptions={extraOptions}
+      />
     </FormFieldWrapper>
   );
 };