@eeacms/volto-tableau 6.0.0 → 6.0.2

package/src/Blocks/EmbedTableauVisualization/View.test.jsx

@@ -29,7 +29,7 @@ describe('View', () => {
     tableau_vis_url: 'http://localhost:3000/tableau-ct',
     with_download: true,
     with_more_info: true,
-    with_note: true,
+    with_notes: true,
     with_share: true,
   };
 
@@ -39,6 +39,6 @@ describe('View', () => {
         <View data={data} />
       </Provider>,
     );
-    expect(container.querySelector('.embed-container')).toBeInTheDocument();
+    expect(container.querySelector('.embed-tableau')).toBeInTheDocument();
   });
 });

package/src/Blocks/EmbedTableauVisualization/schema.js

@@ -47,14 +47,17 @@ export default () => {
       {
         id: 'default',
         title: 'Default',
+        fields: ['tableau_vis_url', 'tableau_height'],
+      },
+      {
+        id: 'toolbar',
+        title: 'Toolbar',
         fields: [
-          'tableau_vis_url',
-          'with_note',
+          'with_notes',
           'with_sources',
           'with_more_info',
           'with_download',
           'with_share',
-          'tableau_height',
         ],
       },
       {
@@ -68,13 +71,14 @@ export default () => {
         title: 'Tableau visualization',
         widget: 'url',
       },
-      with_note: {
+      with_notes: {
         title: 'Show note',
         type: 'boolean',
         defaultValue: true,
       },
       with_sources: {
         title: 'Show sources',
+        description: 'Will show sources set in this page Data provenance',
         type: 'boolean',
         defaultValue: true,
       },

package/src/Tableau/Tableau.jsx

@@ -14,17 +14,21 @@ import isUndefined from 'lodash/isUndefined';
 import cx from 'classnames';
 import { Button } from 'semantic-ui-react';
 import { Toast, Icon } from '@plone/volto/components';
+import {
+  FigureNote,
+  Sources,
+  MoreInfo,
+  Share,
+} from '@eeacms/volto-embed/Toolbar';
 import { useTableau } from '@eeacms/volto-tableau/hooks';
-import JsonCodeSnippet from '@eeacms/volto-tableau/Utils/JsonCodeSnippet/JsonCodeSnippet';
-import FigureNote from '@eeacms/volto-tableau/Utils/FigureNote/FigureNote';
-import Sources from '@eeacms/volto-tableau/Utils/Sources/Sources';
-import MoreInfoLink from '@eeacms/volto-tableau/Utils/MoreInfoLink/MoreInfoLink';
-import Download from '@eeacms/volto-tableau/Utils/Download/Download';
-import Share from '@eeacms/volto-tableau/Utils/Share/Share';
+import { JsonCodeSnippet, Download } from '@eeacms/volto-tableau/Utils';
+
 import { getSheetnames, getActiveSheetname, getDevice } from './helpers';
 
 import resetSVG from '@plone/volto/icons/reset.svg';
 
+import '@eeacms/volto-embed/Toolbar/styles.less';
+
 const TableauDebug = ({ mode, data, vizState, url, version, clearData }) => {
   const { loaded, error } = vizState;
   const { filters = {}, parameters = {} } = data;
@@ -66,6 +70,7 @@ const TableauDebug = ({ mode, data, vizState, url, version, clearData }) => {
 };
 
 const Tableau = forwardRef((props, ref) => {
+  const tableauEl = useRef(null);
   const vizEl = useRef(null);
   const viz = useRef();
   const vizState = useRef({});
@@ -74,6 +79,7 @@ const Tableau = forwardRef((props, ref) => {
   const [loaded, setLoaded] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
+  const [mobile, setMobile] = useState(false);
   const {
     block,
     data = {},
@@ -96,12 +102,12 @@ const Tableau = forwardRef((props, ref) => {
     toolbarPosition = 'Top',
     breakpointUrls = [],
     tableau_vis_url,
-    with_note,
-    with_sources,
-    with_more_info,
-    with_download,
-    with_share,
-    tableau_height = '700',
+    with_notes = true,
+    with_sources = true,
+    with_more_info = true,
+    with_download = true,
+    with_share = true,
+    tableau_height,
   } = data;
   const device = useMemo(
     () => getDevice(breakpoints, screen.page?.width || Infinity),
@@ -327,6 +333,7 @@ const Tableau = forwardRef((props, ref) => {
   }, [data]);
 
   useEffect(() => {
+    // console.log('HERE trigger initiateViz', tableau, url);
     if (!tableau) return;
     if (url) {
       disposeViz();
@@ -366,6 +373,18 @@ const Tableau = forwardRef((props, ref) => {
     /* eslint-disable-next-line */
   }, [sheetname]);
 
+  useEffect(() => {
+    if (!loading && tableauEl.current) {
+      const visWidth = tableauEl.current.offsetWidth;
+
+      if (visWidth < 600 && !mobile) {
+        setMobile(true);
+      } else if (visWidth >= 600 && mobile) {
+        setMobile(false);
+      }
+    }
+  }, [screen, mobile, loading]);
+
   useImperativeHandle(
     ref,
     () => {
@@ -381,7 +400,7 @@ const Tableau = forwardRef((props, ref) => {
   );
 
   return (
-    <div className="tableau-wrapper">
+    <div className="tableau-wrapper" ref={tableauEl}>
       {loading && (
         <div className="tableau-loader">
           <span>Loading...</span>
@@ -412,25 +431,27 @@ const Tableau = forwardRef((props, ref) => {
         clearData={clearData}
       />
       <div
-        style={{ height: tableau_height + 'px' }}
+        style={{ height: tableau_height ? tableau_height + 'px' : '100%' }}
         className={cx('tableau', `tableau-${version}`, {
           'tableau-autoscale': autoScale,
         })}
         ref={vizEl}
       />
-      <div className="visualization-info-container">
-        <div className="visualization-info">
-          {with_note && loaded && <FigureNote note={figure_note || []} />}
-          {with_sources && loaded && <Sources sources={sources} />}
-          {with_more_info && loaded && (
-            <MoreInfoLink contentTypeLink={tableau_vis_url} />
-          )}
+      {loaded && (
+        <div className={cx('visualization-toolbar', { mobile })}>
+          <div className="left-col">
+            {with_notes && <FigureNote note={figure_note || []} />}
+            {with_sources && <Sources sources={sources} />}
+            {with_more_info && <MoreInfo href={tableau_vis_url || data.url} />}
+          </div>
+          <div className="right-col">
+            {with_download && loaded && <Download viz={viz.current} />}
+            {with_share && loaded && (
+              <Share href={tableau_vis_url || data.url} />
+            )}
+          </div>
         </div>
-        <div className="visualization-info">
-          {with_download && loaded && <Download viz={viz.current} />}
-          {with_share && loaded && <Share contentTypeLink={tableau_vis_url} />}
-        </div>
-      </div>
+      )}
     </div>
   );
 });

package/src/Utils/{Download/Download.jsx → Download.jsx}

@@ -3,37 +3,37 @@ import { Popup } from 'semantic-ui-react';
 import cx from 'classnames';
 
 const Download = ({ viz }) => {
-  const [expanded, setExpanded] = React.useState(false);
+  const [open, setOpen] = 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 })}>
-            Download <i class="ri-download-fill"></i>
-          </button>
-        </div>
-      }
+      popper={{ id: 'vis-toolbar-popup', className: 'download-popup' }}
       position="bottom left"
       on="click"
+      open={open}
       onClose={() => {
-        setExpanded(false);
+        setOpen(false);
       }}
       onOpen={() => {
-        setExpanded(true);
+        setOpen(true);
       }}
       ref={popupRef}
-    >
-      <ul className="no-bullets">
-        <li>
-          Data formats
-          <div className="visualization-wrapper">
-            <div className="visualization-info">
-              <div>
+      trigger={
+        <div className="tableau-download-container">
+          <button className={cx('trigger-button', { open })}>
+            <i className="ri-download-fill" />
+            Download
+          </button>
+        </div>
+      }
+      content={
+        <>
+          <div className="item">
+            <span className="label">Data formats</span>
+            <div className="types">
+              <div className="type">
                 <button
-                  className="tableau-download-button tableau-format-download"
                   onClick={() => {
                     viz.showExportCrossTabDialog();
                     popupRef.current.triggerRef.current.click();
@@ -42,9 +42,8 @@ const Download = ({ viz }) => {
                   <span>CSV</span>
                 </button>
               </div>
-              <div>
+              <div className="type">
                 <button
-                  className="tableau-download-button tableau-format-download"
                   onClick={() => {
                     viz.exportCrossTabToExcel();
                     popupRef.current.triggerRef.current.click();
@@ -55,14 +54,11 @@ const Download = ({ viz }) => {
               </div>
             </div>
           </div>
-        </li>
-        <li>
-          Image formats
-          <div className="visualization-wrapper">
-            <div className="visualization-info">
-              <div>
+          <div className="item">
+            <span className="label">Image formats</span>
+            <div className="types">
+              <div className="type">
                 <button
-                  className="tableau-download-button tableau-format-download"
                   onClick={() => {
                     viz.showExportImageDialog();
                     popupRef.current.triggerRef.current.click();
@@ -73,14 +69,11 @@ const Download = ({ viz }) => {
               </div>
             </div>
           </div>
-        </li>
-        <li>
-          Other formats
-          <div className="visualization-wrapper">
-            <div className="visualization-info">
-              <div>
+          <div className="item">
+            <span className="label">Other formats</span>
+            <div className="types">
+              <div className="type">
                 <button
-                  className="tableau-download-button tableau-format-download"
                   onClick={() => {
                     viz.showExportPDFDialog();
                     popupRef.current.triggerRef.current.click();
@@ -91,9 +84,9 @@ const Download = ({ viz }) => {
               </div>
             </div>
           </div>
-        </li>
-      </ul>
-    </Popup>
+        </>
+      }
+    />
   );
 };
 

package/src/Utils/index.js

@@ -0,0 +1,2 @@
+export { default as Download } from './Download';
+export { default as JsonCodeSnippet } from './JsonCodeSnippet';

package/src/Views/VisualizationView.jsx

@@ -17,6 +17,10 @@ const VisualizationView = (props) => {
         <Tableau
           data={{
             ...tableau_visualization,
+            with_notes: false,
+            with_sources: false,
+            with_more_info: false,
+            with_share: false,
             with_download: true,
           }}
           breakpoints={

package/src/Widgets/VisualizationViewWidget.jsx

@@ -3,14 +3,19 @@ import config from '@plone/volto/registry';
 
 export default function VisualizationViewWidget(props) {
   const { value = {} } = props;
+
   return (
     <Tableau
       data={{
         ...value,
+        with_notes: false,
+        with_sources: false,
+        with_more_info: true,
+        with_share: true,
         with_download: true,
       }}
       breakpoints={
-        config.blocks.blocksConfig.embed_tableau_visualization.breakpoints
+        config.blocks.blocksConfig?.embed_tableau_visualization?.breakpoints
       }
     />
   );

package/src/Widgets/VisualizationViewWidget.test.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import VisualizationViewWidget from './VisualizationViewWidget';
+
+const mockStore = configureStore([]);
+const store = mockStore({});
+
+jest.mock('@plone/volto/components', () => ({
+  Icon: ({ children }) => <img alt="incon">{children}</img>,
+  Toast: ({ children }) => <p>{children}</p>,
+}));
+
+describe('VisualizationViewWidget', () => {
+  it('should render the component', () => {
+    const data = {
+      url: 'http://localhost:3000/tableau-ct',
+      with_download: true,
+      with_more_info: true,
+      with_note: true,
+      with_share: true,
+    };
+
+    const { container } = render(
+      <Provider store={store}>
+        <VisualizationViewWidget data={data} />
+      </Provider>,
+    );
+    expect(container.querySelector('.tableau-wrapper')).toBeInTheDocument();
+  });
+});

package/src/Widgets/VisualizationWidget.jsx

@@ -72,11 +72,18 @@ const VisualizationWidget = (props) => {
             >
               <Tableau
                 ref={viz}
-                data={value}
+                data={{
+                  ...(value || {}),
+                  with_notes: false,
+                  with_sources: false,
+                  with_more_info: false,
+                  with_share: false,
+                  with_download: false,
+                }}
                 mode="edit"
                 breakpoints={
-                  config.blocks.blocksConfig.embed_tableau_visualization
-                    .breakpoints
+                  config.blocks.blocksConfig?.embed_tableau_visualization
+                    ?.breakpoints
                 }
                 extraOptions={extraOptions}
                 setVizState={setVizState}
@@ -116,9 +123,14 @@ const VisualizationWidget = (props) => {
         data={{
           ...props.value,
           autoScale: true,
+          with_notes: false,
+          with_sources: false,
+          with_more_info: false,
+          with_share: false,
+          with_download: false,
         }}
         breakpoints={
-          config.blocks.blocksConfig.embed_tableau_visualization.breakpoints
+          config.blocks.blocksConfig?.embed_tableau_visualization?.breakpoints
         }
         extraOptions={extraOptions}
       />

package/src/Widgets/VisualizationWidget.test.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import VisualizationWidget from './VisualizationWidget';
+
+const mockStore = configureStore([]);
+const store = mockStore({});
+
+jest.mock('@plone/volto/components', () => ({
+  FormFieldWrapper: jest.fn(({ children }) => <>{children}</>),
+  InlineForm: jest.fn(() => <div>Mocked InlineForm</div>),
+  Icon: ({ children }) => <img alt="incon">{children}</img>,
+  Toast: ({ children }) => <p>{children}</p>,
+}));
+
+describe('VisualizationWidget', () => {
+  it('should render the component', () => {
+    const data = {
+      value: {
+        url: 'http://localhost:3000/tableau-ct',
+        with_download: true,
+        with_more_info: true,
+        with_note: true,
+        with_share: true,
+        hideTabs: false,
+        staticParameters: [
+          {
+            '@id': '1f050748-c020-4a48-8109-e99a25bf558d',
+            field: 'Tableau field',
+            value: 'Tableau value',
+          },
+        ],
+      },
+    };
+
+    const { container } = render(
+      <Provider store={store}>
+        <VisualizationWidget {...data} />
+      </Provider>,
+    );
+    expect(container.querySelector('.tableau-wrapper')).toBeInTheDocument();
+  });
+});

package/src/Widgets/schema.js

@@ -38,7 +38,8 @@ const staticParameters = {
 };
 
 const breakpointUrlSchema = (config) => {
-  const breakpoints = config.blocks.blocksConfig.tableau_block.breakpoints;
+  const breakpoints =
+    config.blocks.blocksConfig?.tableau_block?.breakpoints || {};
 
   return {
     title: 'URL',

package/src/helpers.js

@@ -1,28 +1,31 @@
-import React from 'react';
-
-export const loadTableauScript = (callback, version) => {
-  if (!__CLIENT__) return;
-  const source = `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`;
-  const existingScript = document.getElementById(`tableauJS-${version}`);
-  const existingScriptSource =
-    existingScript && existingScript.getAttribute('src');
-  // Replace script loaded on each version change
-  if (existingScript && existingScriptSource !== source) {
-    existingScript.setAttribute('src', source);
-  }
-  if (!existingScript) {
-    const script = document.createElement('script');
-    script.src = source;
-    script.id = `tableauJS-${version}`;
-    document.body.appendChild(script);
-    script.onload = () => {
-      window[`tableau_${version}`] = window.tableau;
-      if (callback) callback();
-    };
-  }
-  // Trigger callback
-  if (existingScript && callback) callback();
-};
+export async function loadTableauScript(version) {
+  return new Promise((resolve) => {
+    if (!__CLIENT__) {
+      resolve();
+      return;
+    }
+    const source = `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`;
+    const existingScript = document.getElementById(`tableauJS-${version}`);
+    const existingScriptSource =
+      existingScript && existingScript.getAttribute('src');
+    // Replace script loaded on each version change
+    if (existingScript && existingScriptSource !== source) {
+      existingScript.setAttribute('src', source);
+    }
+    if (!existingScript) {
+      const script = document.createElement('script');
+      script.src = source;
+      script.id = `tableauJS-${version}`;
+      document.body.appendChild(script);
+      script.addEventListener('load', () => {
+        window[`tableau_${version}`] = window.tableau;
+        resolve(window[`tableau_${version}`]);
+      });
+    } else {
+      resolve(window[`tableau_${version}`]);
+    }
+  });
+}
 
 // Script url for each version. In case you might need to add them in the load balancer
 // https://public.tableau.com/javascripts/api/tableau-2.8.0.min.js
@@ -34,25 +37,3 @@ export const loadTableauScript = (callback, version) => {
 // https://public.tableau.com/javascripts/api/tableau-2.2.2.min.js
 // https://public.tableau.com/javascripts/api/tableau-2.1.2.min.js
 // https://public.tableau.com/javascripts/api/tableau-2.0.3.min.js
-
-export 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];
-};

package/src/hooks.js

@@ -1,17 +1,33 @@
 import { useEffect, useState } from 'react';
 import { loadTableauScript } from './helpers';
 
+let clock;
+
+const TIMEOUT = 10000;
+
 export const useTableau = (version) => {
   const [tableau, setTableau] = useState();
 
   useEffect(() => {
-    loadTableauScript(() => {
-      if (window[`tableau_${version}`]) {
-        setTableau(window[`tableau_${version}`]);
-      } else {
-        setTableau(undefined);
+    loadTableauScript(version);
+
+    const startTime = new Date().getTime();
+
+    clock = setInterval(() => {
+      const tableauApi = window[`tableau_${version}`];
+      if (tableauApi) {
+        setTableau(tableauApi);
+        clearInterval(clock);
+        return;
+      }
+      if (new Date().getTime() - startTime > TIMEOUT) {
+        clearInterval(clock);
       }
-    }, version);
+    }, 100);
+
+    return () => {
+      clearInterval(clock);
+    };
   }, [version]);
 
   return tableau;