@eeacms/volto-tableau 3.0.8 → 4.0.0

package/src/Widgets/schema.js

@@ -1,27 +1,53 @@
-const generalSchema = {
-  title: 'General',
-
+const urlParametersSchema = {
+  title: 'Parameter',
   fieldsets: [
-    {
-      id: 'general',
-      title: 'General',
-      fields: ['url'],
-    },
+    { id: 'default', title: 'Default', fields: ['field', 'urlParam'] },
   ],
-
   properties: {
-    url: {
-      title: 'Url',
-      type: 'textarea',
+    field: {
+      title: 'Tableau fieldname',
+      type: 'text',
+    },
+    urlParam: {
+      title: 'URL param',
+      type: 'text',
     },
   },
-  required: ['url'],
+  required: [],
 };
 
-const optionsSchema = {
-  title: 'Options',
+const breakpointUrlSchema = (config) => {
+  const breakpoints = config.blocks.blocksConfig.tableau_block.breakpoints;
+
+  return {
+    title: 'URL',
+    fieldsets: [{ id: 'default', title: 'Default', fields: ['device', 'url'] }],
+    properties: {
+      device: {
+        title: 'Device',
+        type: 'array',
+        choices: Object.keys(breakpoints).map((breakpoint) => [
+          breakpoint,
+          breakpoint,
+        ]),
+      },
+      url: {
+        title: 'Url',
+        widget: 'textarea',
+      },
+    },
+    required: [],
+  };
+};
 
+export default (config) => ({
+  title: 'Tableau',
   fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['url'],
+    },
     {
       id: 'options',
       title: 'Options',
@@ -33,9 +59,17 @@ const optionsSchema = {
         'toolbarPosition',
       ],
     },
+    {
+      id: 'extra_options',
+      title: 'Extra options',
+      fields: ['urlParameters', 'breakpointUrls'],
+    },
   ],
-
   properties: {
+    url: {
+      title: 'Url',
+      widget: 'textarea',
+    },
     sheetname: {
       title: 'Sheetname',
       type: 'text',
@@ -58,127 +92,24 @@ const optionsSchema = {
     },
     toolbarPosition: {
       title: 'Toolbar position',
-      type: 'array',
       choices: [
         ['Top', 'Top'],
         ['Bottom', 'Bottom'],
       ],
       default: 'Top',
     },
-  },
-  required: [],
-};
-
-const urlParametersSchema = {
-  title: 'Parameter',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: ['field', 'urlParam'],
-    },
-  ],
-  properties: {
-    field: {
-      title: 'Tableau fieldname',
-      type: 'text',
+    urlParameters: {
+      title: 'URL parameters',
+      widget: 'object_list',
+      schema: urlParametersSchema,
+      description: 'Set a list of url parameters to filter the tableau',
     },
-    urlParam: {
-      title: 'URL param',
-      type: 'text',
+    breakpointUrls: {
+      title: 'Breakpoint urls',
+      widget: 'object_list',
+      schema: breakpointUrlSchema(config),
+      description: 'Set different vizualization for specific breakpoint',
     },
   },
-  required: [],
-};
-
-const breakpointUrlSchema = (config) => {
-  const breakpoints = config.blocks.blocksConfig.tableau_block.breakpoints;
-
-  return {
-    title: 'URL',
-    fieldsets: [{ id: 'default', title: 'Default', fields: ['device', 'url'] }],
-    properties: {
-      device: {
-        title: 'Device',
-        type: 'array',
-        choices: Object.keys(breakpoints).map((breakpoint) => [
-          breakpoint,
-          breakpoint,
-        ]),
-      },
-      url: {
-        title: 'Url',
-        widget: 'textarea',
-      },
-    },
-    required: [],
-  };
-};
-
-const extraOptionsSchema = (config) => {
-  return {
-    title: 'Extra Options',
-
-    fieldsets: [
-      {
-        id: 'default',
-        title: 'Extra Options Data',
-        fields: ['urlParameters', 'availableFields', 'breakpointUrls'],
-      },
-    ],
-
-    properties: {
-      urlParameters: {
-        title: 'URL parameters',
-        widget: 'object_list',
-        schema: urlParametersSchema,
-        description: 'Set a list of url parameters to filter the tableau',
-      },
-      availableFields: {
-        title: 'Available Fields:',
-        widget: 'url_params_widget',
-      },
-      breakpointUrls: {
-        title: 'Breakpoint urls',
-        widget: 'object_list',
-        schema: breakpointUrlSchema(config),
-        description: 'Set different vizualization for specific breakpoint',
-      },
-    },
-    required: [],
-  };
-};
-
-export default (config) => {
-  return {
-    title: 'Tableau Editor',
-    fieldsets: [
-      {
-        id: 'default',
-        title: 'Tableau Editor Sections',
-        fields: ['tableau_data'],
-      },
-    ],
-    properties: {
-      tableau_data: {
-        title: 'Panels',
-        widget: 'object_types_widget',
-        schemas: [
-          {
-            id: 'general',
-            schema: generalSchema,
-          },
-          {
-            id: 'options',
-            schema: optionsSchema,
-          },
-          {
-            id: 'extraOptions',
-            schema: extraOptionsSchema(config),
-          },
-        ],
-      },
-    },
-    required: [],
-  };
-};
+  required: ['url'],
+});

package/src/helpers.js

@@ -1,47 +1,28 @@
-const loadTableauScript = (callback, version) => {
-  const existingScript = __CLIENT__ && document.getElementById(`tableauJS`);
-  //replace script loaded on each version change
-  if (existingScript) {
-    existingScript.setAttribute(
-      'src',
-      `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`,
-    );
+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 && __CLIENT__) {
+  if (!existingScript) {
     const script = document.createElement('script');
-    script.src = `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`;
-    script.id = `tableauJS`;
+    script.src = source;
+    script.id = `tableauJS-${version}`;
     document.body.appendChild(script);
     script.onload = () => {
+      window[`tableau_${version}`] = window.tableau;
       if (callback) callback();
     };
   }
-  //callback, if needed
+  // Trigger callback
   if (existingScript && callback) callback();
-
-  const tableau = isMyScriptLoaded(version) && __CLIENT__ ? window.tableau : '';
-  return tableau;
 };
 
-const isMyScriptLoaded = (version) => {
-  //check for loaded Tableau script in dom scripts
-  var scripts = __CLIENT__ && document.getElementsByTagName('script');
-  if (scripts) {
-    for (var i = scripts.length; i--; ) {
-      // eslint-disable-next-line eqeqeq
-      if (
-        scripts[i].src ===
-        `https://public.tableau.com/javascripts/api/tableau-${version}.min.js`
-      )
-        return true;
-    }
-  }
-  return false;
-};
-
-export { loadTableauScript, isMyScriptLoaded };
-
-//script url for each version. In case you might need to add them in the load balancer
+// 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
 // https://public.tableau.com/javascripts/api/tableau-2.7.0.min.js
 // https://public.tableau.com/javascripts/api/tableau-2.6.0.min.js

package/src/hooks.js

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+import { loadTableauScript } from './helpers';
+
+export const useTableau = (version) => {
+  const [tableau, setTableau] = useState();
+
+  useEffect(() => {
+    loadTableauScript(() => {
+      if (window[`tableau_${version}`]) {
+        setTableau(window[`tableau_${version}`]);
+      } else {
+        setTableau(undefined);
+      }
+    }, version);
+  }, [version]);
+
+  return tableau;
+};

package/src/icons/download.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M4 19H20V12H22V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V12H4V19ZM14 9H19L12 16L5 9H10V3H14V9Z">
+  </path>
+</svg>

package/src/index.js

@@ -1,81 +1,19 @@
-import sliderSVG from '@plone/volto/icons/slider.svg';
-import TableauEdit from './TableauBlock/Edit';
-import TableauView from './TableauBlock/View';
-import EmbedTableauView from './Blocks/EmbedEEATableauBlock/View';
-import EmbedTableauEdit from './Blocks/EmbedEEATableauBlock/Edit';
+import installBlocks from './Blocks';
 import { VisualizationView } from './Views';
 import { VisualizationWidget } from './Widgets';
-import UrlParamsWidget from './CustomWidgets/UrlParamsWidget';
-
-import tableauStore from './store';
-
-import tableauMiddleware from './middleware';
 
 const applyConfig = (config) => {
-  config.addonReducers = {
-    ...config.addonReducers,
-    tableau: tableauStore,
-  };
-
   config.settings.allowed_cors_destinations = [
     ...(config.settings.allowed_cors_destinations || []),
     'public.tableau.com',
   ];
 
-  config.settings.storeExtenders = [
-    ...(config.settings.storeExtenders || []),
-    tableauMiddleware,
-  ];
-
-  config.blocks.blocksConfig.tableau_block = {
-    id: 'tableau_block',
-    title: 'Tableau',
-    icon: sliderSVG,
-    group: 'common',
-    edit: TableauEdit,
-    view: TableauView,
-    restricted: false,
-    mostUsed: false,
-    sidebarTab: 1,
-    blocks: {},
-    security: {
-      addPermission: [],
-      view: [],
-    },
-    breakpoints: {
-      desktop: [Infinity, 982],
-      tablet: [981, 768],
-      mobile: [767, 0],
-    },
-  };
-
-  config.blocks.blocksConfig.embed_eea_tableau_block = {
-    id: 'embed_eea_tableau_block',
-    title: 'Embed EEA Tableau',
-    icon: sliderSVG,
-    group: 'common',
-    edit: EmbedTableauEdit,
-    view: EmbedTableauView,
-    restricted: false,
-    mostUsed: false,
-    sidebarTab: 1,
-    blocks: {},
-    security: {
-      addPermission: [],
-      view: [],
-    },
-    breakpoints: {
-      desktop: [Infinity, 982],
-      tablet: [981, 768],
-      mobile: [767, 0],
-    },
-  };
+  config.settings.storeExtenders = [...(config.settings.storeExtenders || [])];
 
   config.views.contentTypesViews.tableau_visualization = VisualizationView;
-  config.widgets.id.tableau_visualization_data = VisualizationWidget;
-  config.widgets.widget.url_params_widget = UrlParamsWidget;
+  config.widgets.id.tableau_visualization = VisualizationWidget;
 
-  return config;
+  return [installBlocks].reduce((acc, apply) => apply(acc), config);
 };
 
 export default applyConfig;

package/src/less/tableau.less

@@ -6,43 +6,34 @@
 
 .loadAddonVariables();
 
-.tableau-block {
-  .tableau-info {
-    h3.tableau-version {
-      display: flex;
-      height: 75px;
-      align-items: center;
-      justify-content: center;
-      background-color: #f4f4f1;
-      color: @tableauTitleColor;
-    }
-
-    p.tableau-error {
-      color: @tableauErrorColor;
-      font-weight: bold;
-    }
+@keyframes spin {
+  0% {
+    background-position: 0 0;
   }
 
-  h3.tableau-title {
-    margin: @tableauTitleMargin;
-    color: @tableauTitleColor;
+  100% {
+    background-position: 50px 50px;
   }
+}
 
-  p.tableau-description {
-    margin: @tableauDescriptionMargin;
-    color: @tableauDescriptionColor;
-  }
+.tableau-wrapper {
+  overflow: auto;
+  padding: @tableauWrapperPadding;
+  background-color: @tableauWrapperBackground;
 
-  .tableau {
-    width: 100%;
+  .tableau-debug {
+    margin: 0 auto 1rem auto;
 
-    &:not(.tableau-scale) {
-      iframe {
-        width: @tableauIframeWidth;
-        min-width: @tableauMinWidth;
-      }
+    .tableau-version .version {
+      color: @secondaryColor;
     }
+  }
+
+  .tableau-info {
+    margin: 0 auto 1rem auto;
+  }
 
+  .tableau {
     iframe {
       padding: @tableauIframePadding;
       border: @tableauIframeBorder;
@@ -51,22 +42,6 @@
       transform-origin: top left;
     }
   }
-}
-
-.not_displayed_tableau {
-  width: 100%;
-  min-width: 633px;
-  height: 100%;
-  min-height: 200px;
-  background-color: #ebebeb;
-}
-
-.tableau-block {
-  .tableau-info {
-    p.tableau-error {
-      padding: 10px;
-    }
-  }
 
   .tableau-loader {
     display: flex;
@@ -75,53 +50,137 @@
     height: 100%;
     align-items: center;
     justify-content: center;
-    margin: auto;
-    animation: anim 1s linear infinite;
+    margin: 0 auto 1rem auto;
+    animation: spin 1s linear infinite;
     background-image: linear-gradient(
       -45deg,
-      #5ac5f1 25%,
-      #96bbde 25%,
-      #96bbde 50%,
-      #5ac5f1 50%,
-      #5ac5f1 75%,
-      #96bbde 75%
+      @primaryColor 25%,
+      @secondaryColor 25%,
+      @secondaryColor 50%,
+      @primaryColor 50%,
+      @primaryColor 75%,
+      @secondaryColor 75%
     );
     background-size: 100px 100px;
     border-radius: 5px;
+
+    span {
+      margin: 6px auto;
+      color: white;
+      font-weight: bold;
+      text-align: center;
+    }
   }
 }
 
-.tableau-loader span {
-  margin: 6px auto;
-  color: white;
+// ========= Sources ==========
+
+.tableau-wrapper .tableau-info {
+  display: flex;
+  align-items: center;
+
+  > * {
+    padding: 0 0.5rem;
+    border-collapse: collapse;
+  }
+
+  > *:first-child {
+    padding-left: 0;
+  }
+
+  > *:last-child {
+    padding-right: 0;
+  }
+
+  > *:not(:last-child) {
+    border-right: 2px solid @textColor;
+  }
+}
+
+.embed-sources-header {
+  cursor: pointer;
+}
+
+.tableau-download-button,
+.tableau-share-button,
+.tableau-sources-button {
+  display: inline-flex;
+  align-items: center;
+  padding-bottom: 3px;
+  border: none;
+  background-color: transparent;
+  color: @textColor;
+  cursor: pointer;
   font-weight: bold;
-  text-align: center;
+
+  .icon {
+    margin-left: 0.5rem;
+  }
+
+  &:hover {
+    color: @secondaryColor;
+  }
+
+  &.expanded {
+    padding-bottom: 0;
+    border-bottom: 3px solid @secondaryColor;
+    color: @secondaryColor;
+  }
 }
 
-@keyframes anim {
-  0% {
-    background-position: 0 0;
+#tableau-sources-popup,
+#tableau-download-popup {
+  .ui.popup {
+    min-width: 600px;
+    background-color: #f9f9f9;
+    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+
+    &::before {
+      background-color: #f9f9f9;
+    }
+
+    .sources-list > li,
+    .sources-list > li > * {
+      color: @textColor;
+    }
+
+    a:hover {
+      color: @secondaryColor;
+    }
   }
 
-  100% {
-    background-position: 50px 50px;
+  .sources-list {
+    margin: 0;
+    list-style: decimal inside;
+    padding-inline-start: 0;
+  }
+
+  @media screen and (max-width: @largestMobileScreen) {
+    .ui.popup {
+      min-width: 300px;
+    }
   }
 }
 
-.availableFieldsContainer {
-  padding: 0 5px 5px 0;
-  border-bottom: 1px solid #d9d9d9;
+#tableau-download-popup {
+  .ui.popup {
+    min-width: 460px;
+    text-align: center;
+  }
 }
 
-.availableFieldsTitle {
-  color: darkgray;
-  font-size: 13px;
-  font-weight: bold;
+@media print {
+  .tableau-download-container,
+  .tableau-sources-container,
+  .tableau-share-container,
+  #tableau-sources-popup {
+    display: none;
+  }
 }
 
-.availableFields {
-  padding: 0 5px;
-  font-size: 12px;
+#tableau-editor-modal {
+  width: 90vw !important;
+  height: calc(80vh - 10em) !important;
 }
 
 .loadAddonVariables();

package/src/less/tableau.variables

@@ -1,14 +1,7 @@
-@tableauTitleColor: #4296b2;
-@tableauTitleMargin: 0 0 1rem 0;
+@tableauWrapperBackground : #f5f5f5;
+@tableauWrapperPadding    : 1rem 1rem 0 1rem;
 
-@tableauDescriptionColor: #000;
-@tableauDescriptionMargin: 0 0 1rem 0;
-
-@tableauErrorColor: #E9776D;
-
-@tableauIframeWidth: 100% !important;
-@tableauMinWidth: auto;
-@tableauIframePadding: 0;
-@tableauIframeMargin: 0 0 1rem 0;
-@tableauIframeBorder: none;
-@tableauIframeBorderRadius: 0;
+@tableauIframePadding       : 0;
+@tableauIframeMargin        : 0 auto 1rem auto;
+@tableauIframeBorder        : none;
+@tableauIframeBorderRadius  : 0;