@eeacms/volto-tableau 4.0.0 → 4.1.0

package/src/Widgets/VisualizationWidget.jsx

@@ -8,10 +8,29 @@ import getSchema 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 [schema] = React.useState(getSchema(config));
   const [value, setValue] = React.useState(props.value);
 
+  const schema = React.useMemo(() => getSchema(config, viz.current, vizState), [
+    vizState,
+  ]);
+
+  const extraOptions = React.useMemo(() => {
+    const options = {};
+    (value.staticParameters || []).forEach((parameter) => {
+      if (parameter.field) {
+        options[parameter.field] = parameter.value;
+      }
+    });
+    return options;
+  }, [value]);
+
   const handleApplyChanges = () => {
     props.onChange(props.id, value);
     setOpen(false);
@@ -52,12 +71,18 @@ const VisualizationWidget = (props) => {
               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);
                 }}
-                mode="edit"
-                noSizeUpdate
               />
             </Grid.Column>
           </Grid>
@@ -87,7 +112,16 @@ const VisualizationWidget = (props) => {
           Open Tableau Editor
         </Button>
       </div>
-      <Tableau data={props.value} noSizeUpdate />
+      <Tableau
+        data={{
+          ...props.value,
+          autoScale: true,
+        }}
+        breakpoints={
+          config.blocks.blocksConfig.embed_tableau_visualization.breakpoints
+        }
+        extraOptions={extraOptions}
+      />
     </FormFieldWrapper>
   );
 };

package/src/Widgets/schema.js

@@ -1,3 +1,8 @@
+import {
+  getSheetnamesChoices,
+  canChangeVizData,
+} from '@eeacms/volto-tableau/Tableau/helpers';
+
 const urlParametersSchema = {
   title: 'Parameter',
   fieldsets: [
@@ -16,6 +21,22 @@ const urlParametersSchema = {
   required: [],
 };
 
+const staticParameters = {
+  title: 'Parameter',
+  fieldsets: [{ id: 'default', title: 'Default', fields: ['field', 'value'] }],
+  properties: {
+    field: {
+      title: 'Tableau fieldname',
+      type: 'text',
+    },
+    value: {
+      title: 'Value',
+      type: 'text',
+    },
+  },
+  required: [],
+};
+
 const breakpointUrlSchema = (config) => {
   const breakpoints = config.blocks.blocksConfig.tableau_block.breakpoints;
 
@@ -25,7 +46,6 @@ const breakpointUrlSchema = (config) => {
     properties: {
       device: {
         title: 'Device',
-        type: 'array',
         choices: Object.keys(breakpoints).map((breakpoint) => [
           breakpoint,
           breakpoint,
@@ -40,76 +60,98 @@ const breakpointUrlSchema = (config) => {
   };
 };
 
-export default (config) => ({
-  title: 'Tableau',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: ['url'],
-    },
-    {
-      id: 'options',
-      title: 'Options',
-      fields: [
-        'sheetname',
-        'hideTabs',
-        'hideToolbar',
-        'autoScale',
-        'toolbarPosition',
-      ],
-    },
-    {
-      id: 'extra_options',
-      title: 'Extra options',
-      fields: ['urlParameters', 'breakpointUrls'],
-    },
-  ],
-  properties: {
-    url: {
-      title: 'Url',
-      widget: 'textarea',
-    },
-    sheetname: {
-      title: 'Sheetname',
-      type: 'text',
-    },
-    hideTabs: {
-      title: 'Hide tabs',
-      type: 'boolean',
-      default: false,
-    },
-    hideToolbar: {
-      title: 'Hide toolbar',
-      type: 'boolean',
-      default: false,
-    },
-    autoScale: {
-      title: 'Auto scale',
-      type: 'boolean',
-      default: false,
-      description: 'Scale down tableau according to width',
-    },
-    toolbarPosition: {
-      title: 'Toolbar position',
-      choices: [
-        ['Top', 'Top'],
-        ['Bottom', 'Bottom'],
-      ],
-      default: 'Top',
-    },
-    urlParameters: {
-      title: 'URL parameters',
-      widget: 'object_list',
-      schema: urlParametersSchema,
-      description: 'Set a list of url parameters to filter the tableau',
-    },
-    breakpointUrls: {
-      title: 'Breakpoint urls',
-      widget: 'object_list',
-      schema: breakpointUrlSchema(config),
-      description: 'Set different vizualization for specific breakpoint',
+export default (config, viz, vizState) => {
+  const isDisabled = !canChangeVizData(viz, vizState);
+
+  return {
+    title: 'Tableau',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['url'],
+      },
+      {
+        id: 'options',
+        title: 'Options',
+        fields: [
+          'sheetname',
+          'hideTabs',
+          'hideToolbar',
+          'autoScale',
+          'toolbarPosition',
+        ],
+      },
+      {
+        id: 'extra_options',
+        title: 'Extra options',
+        fields: ['urlParameters', 'staticParameters', 'breakpointUrls'],
+      },
+    ],
+    properties: {
+      url: {
+        title: 'Url',
+        widget: 'textarea',
+        isDisabled,
+      },
+      sheetname: {
+        title: 'Sheetname',
+        choices: getSheetnamesChoices(viz),
+        isDisabled,
+      },
+      hideTabs: {
+        title: 'Hide tabs',
+        type: 'boolean',
+        isDisabled,
+      },
+      hideToolbar: {
+        title: 'Hide toolbar',
+        type: 'boolean',
+        isDisabled,
+      },
+      autoScale: {
+        title: 'Auto scale',
+        type: 'boolean',
+        description: 'Scale down tableau according to width',
+        isDisabled,
+      },
+      toolbarPosition: {
+        title: 'Toolbar position',
+        choices: [
+          ['Top', 'Top'],
+          ['Bottom', 'Bottom'],
+        ],
+        default: 'Top',
+        isDisabled,
+      },
+      urlParameters: {
+        title: 'URL parameters',
+        widget: 'object_list',
+        schema: urlParametersSchema,
+        description: 'Set a list of url parameters to filter the tableau',
+        isDisabled,
+      },
+      staticParameters: {
+        title: 'Static parameters',
+        widget: 'object_list',
+        schema: staticParameters,
+        description: (
+          <>
+            Set a list of static parameters.
+            <br />
+            <b>NOTE: You need to trigger a refresh for this to take effect</b>
+          </>
+        ),
+        isDisabled,
+      },
+      breakpointUrls: {
+        title: 'Breakpoint urls',
+        widget: 'object_list',
+        schema: breakpointUrlSchema(config),
+        description: 'Set different vizualization for specific breakpoint',
+        isDisabled,
+      },
     },
-  },
-  required: ['url'],
-});
+    required: ['url'],
+  };
+};

package/src/less/tableau.less

@@ -17,8 +17,8 @@
 }
 
 .tableau-wrapper {
-  overflow: auto;
   padding: @tableauWrapperPadding;
+  margin: @tableauWrapperMargin;
   background-color: @tableauWrapperBackground;
 
   .tableau-debug {
@@ -30,10 +30,20 @@
   }
 
   .tableau-info {
-    margin: 0 auto 1rem auto;
+    margin: 0 auto;
   }
 
   .tableau {
+    margin-bottom: 1rem;
+
+    &:not(.tableau-autoscale) {
+      overflow: auto;
+    }
+
+    &.tableau-autoscale {
+      overflow: hidden;
+    }
+
     iframe {
       padding: @tableauIframePadding;
       border: @tableauIframeBorder;
@@ -47,7 +57,7 @@
     display: flex;
     overflow: hidden;
     width: 100%;
-    height: 100%;
+    height: auto;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1rem auto;
@@ -71,6 +81,39 @@
       text-align: center;
     }
   }
+
+  .tableau-error {
+    color: @errorTextColor;
+  }
+
+  .reload-tableau {
+    position: absolute;
+    right: 1rem;
+  }
+
+  .json-snippet {
+    .key {
+      color: @secondaryColor;
+    }
+  }
+
+  .important-note {
+    color: @secondaryColor;
+
+    .clear-filter-button {
+      padding: 0;
+      border: none;
+      margin: 0;
+      background-color: transparent;
+      color: inherit;
+      cursor: pointer;
+      text-decoration: underline;
+
+      &:hover {
+        color: @primaryColor;
+      }
+    }
+  }
 }
 
 // ========= Sources ==========

package/src/less/tableau.variables

@@ -1,5 +1,6 @@
 @tableauWrapperBackground : #f5f5f5;
-@tableauWrapperPadding    : 1rem 1rem 0 1rem;
+@tableauWrapperPadding    : 1rem;
+@tableauWrapperMargin     : 0 0 1rem 0;
 
 @tableauIframePadding       : 0;
 @tableauIframeMargin        : 0 auto 1rem auto;