@eeacms/volto-tableau 6.0.1 → 6.0.2

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [6.0.2](https://github.com/eea/volto-tableau/compare/6.0.1...6.0.2) - 10 November 2023
+
+#### :rocket: New Features
+
+- feat: fix tableau not loading on hard reload [Miu Razvan - [`f37867f`](https://github.com/eea/volto-tableau/commit/f37867f3d07c5dd05b91ea0b758eced631afd458)]
+- feat: mobile toolbar [Miu Razvan - [`d4f0812`](https://github.com/eea/volto-tableau/commit/d4f08122a743f4787177d6d2bc3aabeebf6bf311)]
+
 ### [6.0.1](https://github.com/eea/volto-tableau/compare/6.0.0...6.0.1) - 10 November 2023
 
 #### :house: Internal changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tableau",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "description": "@eeacms/volto-tableau: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/Blocks/EmbedTableauVisualization/View.jsx

@@ -9,7 +9,7 @@ import Tableau from '@eeacms/volto-tableau/Tableau/Tableau';
 const View = (props) => {
   const data = props.data;
   const {
-    with_note = true,
+    with_notes = true,
     with_sources = true,
     with_more_info = true,
     with_download = true,
@@ -46,7 +46,7 @@ const View = (props) => {
               <Tableau
                 data={{
                   ...tableau_visualization,
-                  with_note,
+                  with_notes,
                   with_sources,
                   with_more_info,
                   with_download,

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,
   };
 

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

@@ -70,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({});
@@ -78,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 = {},
@@ -100,7 +102,7 @@ const Tableau = forwardRef((props, ref) => {
     toolbarPosition = 'Top',
     breakpointUrls = [],
     tableau_vis_url,
-    with_note = true,
+    with_notes = true,
     with_sources = true,
     with_more_info = true,
     with_download = true,
@@ -331,6 +333,7 @@ const Tableau = forwardRef((props, ref) => {
   }, [data]);
 
   useEffect(() => {
+    // console.log('HERE trigger initiateViz', tableau, url);
     if (!tableau) return;
     if (url) {
       disposeViz();
@@ -370,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,
     () => {
@@ -385,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>
@@ -423,9 +438,9 @@ const Tableau = forwardRef((props, ref) => {
         ref={vizEl}
       />
       {loaded && (
-        <div className="visualization-toolbar">
+        <div className={cx('visualization-toolbar', { mobile })}>
           <div className="left-col">
-            {with_note && <FigureNote note={figure_note || []} />}
+            {with_notes && <FigureNote note={figure_note || []} />}
             {with_sources && <Sources sources={sources} />}
             {with_more_info && <MoreInfo href={tableau_vis_url || data.url} />}
           </div>

package/src/Views/VisualizationView.jsx

@@ -17,7 +17,7 @@ const VisualizationView = (props) => {
         <Tableau
           data={{
             ...tableau_visualization,
-            with_note: false,
+            with_notes: false,
             with_sources: false,
             with_more_info: false,
             with_share: false,

package/src/Widgets/VisualizationViewWidget.jsx

@@ -8,7 +8,7 @@ export default function VisualizationViewWidget(props) {
     <Tableau
       data={{
         ...value,
-        with_note: false,
+        with_notes: false,
         with_sources: false,
         with_more_info: true,
         with_share: true,

package/src/Widgets/VisualizationWidget.jsx

@@ -74,7 +74,7 @@ const VisualizationWidget = (props) => {
                 ref={viz}
                 data={{
                   ...(value || {}),
-                  with_note: false,
+                  with_notes: false,
                   with_sources: false,
                   with_more_info: false,
                   with_share: false,
@@ -123,7 +123,7 @@ const VisualizationWidget = (props) => {
         data={{
           ...props.value,
           autoScale: true,
-          with_note: false,
+          with_notes: false,
           with_sources: false,
           with_more_info: false,
           with_share: false,

package/src/helpers.js

@@ -1,26 +1,31 @@
-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

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;

package/src/less/tableau.less

@@ -1,4 +1,5 @@
 @import './globals.less';
+@import './tableau.variables';
 
 @addon: 'volto-tableau';
 @addontype: 'tableauBlock';
@@ -59,19 +60,19 @@
     animation: spin 1s linear infinite;
     background-image: linear-gradient(
       -45deg,
-      @primaryColor 25%,
-      @secondaryColor 25%,
-      @secondaryColor 50%,
-      @primaryColor 50%,
-      @primaryColor 75%,
-      @secondaryColor 75%
+      @grey-1 25%,
+      @grey-2 25%,
+      @grey-2 50%,
+      @grey-1 50%,
+      @grey-1 75%,
+      @grey-2 75%
     );
     background-size: 100px 100px;
     border-radius: 5px;
 
     span {
       margin: 6px auto;
-      color: white;
+      color: @textColor;
       font-weight: bold;
       text-align: center;
     }
@@ -111,227 +112,7 @@
   }
 }
 
-// ========= Sources ==========
-
-.tableau-wrapper .visualization-info-container {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1.2rem;
-
-  > *:first-child {
-    margin-left: auto;
-
-    > *:not(:last-child) {
-      border-right: 1px solid @textColor;
-    }
-  }
-
-  > *:last-child {
-    justify-content: flex-end;
-  }
-
-  .visualization-info {
-    display: flex;
-    flex-grow: 0.5;
-    align-items: center;
-
-    > * {
-      padding: 0 0.5rem;
-      border-collapse: collapse;
-    }
-
-    > *:first-child {
-      padding-left: 0;
-    }
-
-    > *:last-child {
-      padding-right: 0;
-      margin-right: 0;
-
-      &.tableau-download-container {
-        margin-left: auto;
-      }
-    }
-  }
-}
-
-.embed-sources-header {
-  cursor: pointer;
-}
-
-#tableau-share-popup {
-  .ui.popup {
-    padding-right: 15px;
-    padding-left: 0;
-  }
-
-  .tableau-share-popup-text {
-    margin-left: 7px;
-  }
-}
-
-.tableau-share-popup-container {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-
-  .tableau-share-link {
-    input {
-      padding-left: 7px !important;
-      border-left: 0 !important;
-
-      &:focus {
-        outline: 1px solid var(--focus-visible, #0083e0);
-      }
-    }
-  }
-
-  .tableau-copy-button {
-    max-width: 80px;
-    padding: 10px 17px !important;
-    border: 1px solid black !important;
-    margin: 0 !important;
-    background-color: #4472c4 !important;
-    border-radius: 7px !important;
-  }
-
-  @media screen and (max-width: @largestMobileScreen) {
-    flex-direction: column;
-  }
-}
-
-.tableau-note-button,
-.tableau-more-info-button,
-.tableau-download-button,
-.tableau-sources-button,
-.tableau-share-button {
-  display: inline-flex;
-  align-items: center;
-  padding-bottom: 3px;
-  border: none;
-  background-color: transparent;
-  color: @textColor;
-  cursor: pointer;
-
-  .icon {
-    margin-left: 0.5rem;
-  }
-
-  &:hover {
-    color: @secondaryColor;
-  }
-
-  &.expanded {
-    padding-bottom: 0;
-    border-bottom: 3px solid @secondaryColor;
-    color: @secondaryColor;
-  }
-}
-
-.tableau-more-info-button,
-.tableau-download-button,
-.tableau-share-button {
-  gap: 0.25rem;
-
-  i {
-    margin-bottom: 1px;
-  }
-}
-
-#tableau-note-popup,
-#tableau-sources-popup,
-#tableau-download-popup {
-  .ui.popup {
-    background-color: @grey-1;
-    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
-
-    &::before {
-      background-color: @grey-1;
-    }
-  }
-
-  .sources-list {
-    margin: 0;
-    list-style: decimal inside;
-    padding-inline-start: 0;
-  }
-
-  .embed-sources-param-description {
-    margin-left: 5px;
-  }
-
-  @media screen and (min-width: @largestMobileScreen) {
-    .ui.popup {
-      max-width: 600px;
-    }
-  }
-}
-
-#tableau-download-popup {
-  ul.no-bullets {
-    padding: 0;
-    margin: 0;
-    list-style-type: none;
-  }
-
-  .visualization-wrapper {
-    position: relative;
-
-    .visualization-info {
-      display: flex;
-      align-items: center;
-
-      > * {
-        padding: 0 0.5rem;
-        border-collapse: collapse;
-      }
-
-      > *:first-child {
-        padding-left: 0;
-      }
-
-      > *:last-child {
-        padding-right: 0;
-        margin-right: 0;
-
-        &.tableau-download-container {
-          margin-left: auto;
-        }
-      }
-
-      > *:not(:last-child) {
-        border-right: 2px solid @textColor;
-      }
-    }
-  }
-
-  .tableau-download-button.tableau-format-download {
-    padding: 0;
-    color: #679ad6;
-    font-weight: normal;
-
-    &:hover {
-      color: #164b7f;
-    }
-  }
-}
-
-@media print {
-  .tableau-download-container,
-  .tableau-note-container,
-  .tableau-sources-container,
-  .tableau-share-container,
-  #tableau-note-popup,
-  #tableau-sources-popup {
-    display: none;
-  }
-}
-
 #tableau-editor-modal {
   width: 90vw !important;
   height: calc(80vh - 10em) !important;
 }
-
-.loadAddonVariables();

package/src/less/tableau.variables

@@ -1,4 +1,7 @@
-@tableauWrapperBackground : #f5f5f5;
+@grey-1: #f9f9f9;
+@grey-2: #E6E7E8;
+
+@tableauWrapperBackground : @grey-1;
 @tableauWrapperPadding    : 1rem;
 @tableauWrapperMargin     : 0 0 1rem 0;
 
@@ -6,5 +9,3 @@
 @tableauIframeMargin        : 0 auto 1rem auto;
 @tableauIframeBorder        : none;
 @tableauIframeBorderRadius  : 0;
-
-@grey-1                     : #f9f9f9;