@eeacms/volto-tableau 7.0.5 → 7.2.0

package/src/Widgets/VisualizationWidget.jsx

@@ -1,14 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { withRouter } from 'react-router';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { isEqual } from 'lodash';
 import { Modal, Button, Grid } from 'semantic-ui-react';
 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 {
+  getQuery,
+  getTableauVisualization,
+  getParameters,
+  getFilters,
+} from '@eeacms/volto-tableau/Tableau/helpers';
 
 import '@eeacms/volto-tableau/less/tableau.less';
 
 const VisualizationWidget = (props) => {
+  const { location, content } = props;
   const viz = React.useRef();
+  const [schema, setSchema] = React.useState(null);
   const [vizState, setVizState] = React.useState({
     loaded: false,
     loading: false,
@@ -17,19 +29,27 @@ const VisualizationWidget = (props) => {
   const [open, setOpen] = React.useState(false);
   const [value, setValue] = React.useState(props.value);
 
-  const schema = React.useMemo(() => getSchema(config, viz.current, vizState), [
-    vizState,
-  ]);
+  const [tableauVisualization, setTableauVisualization] = useState(() =>
+    getTableauVisualization({
+      isBlock: false,
+      content: {
+        ...content,
+        tableau_visualization: value,
+      },
+    }),
+  );
+
+  const [query, setQuery] = useState(() => {
+    return getQuery({ location });
+  });
 
-  const extraOptions = React.useMemo(() => {
-    const options = {};
-    (value.staticParameters || []).forEach((parameter) => {
-      if (parameter.field && parameter.value) {
-        options[parameter.field] = parameter.value;
-      }
-    });
-    return options;
-  }, [value]);
+  const [extraParameters, setExtraParameters] = useState(() =>
+    getParameters({ tableauVisualization, query }),
+  );
+
+  const [extraFilters, setExtraFilters] = useState(() =>
+    getFilters({ tableauVisualization, query }),
+  );
 
   const handleApplyChanges = () => {
     props.onChange(props.id, value);
@@ -41,6 +61,63 @@ const VisualizationWidget = (props) => {
     setOpen(false);
   };
 
+  React.useEffect(() => {
+    if (!open && !isEqual(props.value, value)) {
+      setValue(props.value);
+    }
+  }, [props.value, value, open]);
+
+  /**
+   * Update tableau visualization
+   */
+  React.useEffect(() => {
+    setTableauVisualization(
+      getTableauVisualization({
+        isBlock: false,
+        content: {
+          ...content,
+          tableau_visualization: value,
+        },
+      }),
+    );
+  }, [content, value]);
+
+  /**
+   * Update query
+   */
+  React.useEffect(() => {
+    setQuery(
+      getQuery({
+        location,
+      }),
+    );
+  }, [location]);
+
+  /**
+   * Update extra parameters
+   */
+  React.useEffect(() => {
+    setExtraParameters(getParameters({ tableauVisualization, query }));
+  }, [tableauVisualization, query]);
+
+  /**
+   * Update extra filters
+   */
+  React.useEffect(() => {
+    setExtraFilters(getFilters({ tableauVisualization, query }));
+  }, [tableauVisualization, query]);
+
+  /**
+   * Get schema
+   */
+  React.useEffect(() => {
+    getSchema({ config, viz: viz.current, vizState, data: value }).then(
+      (schema) => {
+        setSchema(schema);
+      },
+    );
+  }, [vizState, value]);
+
   return (
     <FormFieldWrapper {...props}>
       <Modal id="tableau-editor-modal" open={open}>
@@ -52,17 +129,19 @@ const VisualizationWidget = (props) => {
               computer={4}
               className="tableau-editor-column"
             >
-              <InlineForm
-                block={props.block}
-                schema={schema}
-                onChangeField={(id, fieldValue) => {
-                  setValue((value) => ({
-                    ...value,
-                    [id]: fieldValue,
-                  }));
-                }}
-                formData={value}
-              />
+              {schema && (
+                <InlineForm
+                  block={props.block}
+                  schema={schema}
+                  onChangeField={(id, fieldValue) => {
+                    setValue((value) => ({
+                      ...value,
+                      [id]: fieldValue,
+                    }));
+                  }}
+                  formData={value}
+                />
+              )}
             </Grid.Column>
             <Grid.Column
               mobile={8}
@@ -73,7 +152,7 @@ const VisualizationWidget = (props) => {
               <Tableau
                 ref={viz}
                 data={{
-                  ...(value || {}),
+                  ...tableauVisualization,
                   with_notes: false,
                   with_sources: false,
                   with_more_info: false,
@@ -86,7 +165,8 @@ const VisualizationWidget = (props) => {
                   config.blocks.blocksConfig?.embed_tableau_visualization
                     ?.breakpoints
                 }
-                extraOptions={extraOptions}
+                extraParameters={extraParameters}
+                extraFilters={extraFilters}
                 setVizState={setVizState}
                 onChangeBlock={(_, newValue) => {
                   setValue(newValue);
@@ -122,7 +202,7 @@ const VisualizationWidget = (props) => {
       </div>
       <Tableau
         data={{
-          ...props.value,
+          ...tableauVisualization,
           autoScale: true,
           with_notes: false,
           with_sources: false,
@@ -134,10 +214,14 @@ const VisualizationWidget = (props) => {
         breakpoints={
           config.blocks.blocksConfig?.embed_tableau_visualization?.breakpoints
         }
-        extraOptions={extraOptions}
+        extraParameters={extraParameters}
+        extraFilters={extraFilters}
       />
     </FormFieldWrapper>
   );
 };
 
-export default React.memo(VisualizationWidget);
+export default compose(
+  withRouter,
+  connect((state) => ({ content: state?.content?.data })),
+)(VisualizationWidget);

package/src/Widgets/VisualizationWidget.test.jsx

@@ -26,7 +26,7 @@ describe('VisualizationWidget', () => {
 
     const { container } = render(
       <Provider store={global.store}>
-        <VisualizationWidget {...data} />
+        <VisualizationWidget {...data} id={'1234'} title="Title" />
       </Provider>,
     );
     expect(container.querySelector('.tableau-wrapper')).toBeInTheDocument();

package/src/Widgets/index.js

@@ -1,4 +1,5 @@
 import VisualizationWidget from './VisualizationWidget';
 import VisualizationViewWidget from './VisualizationViewWidget';
+import CreatableSelectWidget from './CreatableSelectWidget';
 
-export { VisualizationWidget, VisualizationViewWidget };
+export { VisualizationWidget, VisualizationViewWidget, CreatableSelectWidget };

package/src/Widgets/schema.js

@@ -1,41 +1,148 @@
+import { find, includes } from 'lodash';
 import {
   getSheetnamesChoices,
   canChangeVizData,
 } from '@eeacms/volto-tableau/Tableau/helpers';
 
-const urlParametersSchema = {
-  title: 'Parameter',
-  fieldsets: [
-    { id: 'default', title: 'Default', fields: ['field', 'urlParam'] },
-  ],
-  properties: {
-    field: {
-      title: 'Tableau fieldname',
-      type: 'text',
+async function getUrlParametersSchema({ viz, vizState, data }) {
+  const tableauParameters =
+    vizState.loaded && viz ? await viz.getWorkbook().getParametersAsync() : [];
+
+  const currentFields = (data.urlParameters || [])
+    .map((p) => p.field)
+    .filter((f) => f);
+
+  return {
+    title: 'Parameter',
+    fieldsets: [
+      { id: 'default', title: 'Default', fields: ['field', 'urlParam'] },
+    ],
+    properties: {
+      field: {
+        title: 'Tableau parameter',
+        widget: 'creatable_select',
+        isMulti: false,
+        creatable: true,
+        choices: tableauParameters
+          .filter((p) => {
+            return !includes(currentFields, p.getName());
+          })
+          .map((p) => [p.getName(), p.getName()]),
+      },
+      urlParam: {
+        title: 'Field name',
+        type: 'text',
+      },
     },
-    urlParam: {
-      title: 'URL param',
-      type: 'text',
+    required: [],
+    tableauParameters,
+  };
+}
+
+async function getStaticParametersSchema({ viz, vizState, data }) {
+  const tableauParameters =
+    vizState.loaded && viz ? await viz.getWorkbook().getParametersAsync() : [];
+
+  const currentFields = (data.staticParameters || [])
+    .map((p) => p.field)
+    .filter((f) => f);
+
+  return {
+    title: 'Parameter',
+    fieldsets: [{ id: 'default', title: 'Default', fields: ['field'] }],
+    properties: {
+      field: {
+        title: 'Tableau parameter',
+        widget: 'creatable_select',
+        isMulti: false,
+        creatable: true,
+        choices: tableauParameters
+          .filter((p) => {
+            return !includes(currentFields, p.getName());
+          })
+          .map((p) => [p.getName(), p.getName()]),
+      },
+      value: {
+        title: 'Value',
+        type: 'text',
+      },
     },
-  },
-  required: [],
-};
+    required: [],
+    tableauParameters,
+  };
+}
 
-const staticParameters = {
-  title: 'Parameter',
-  fieldsets: [{ id: 'default', title: 'Default', fields: ['field', 'value'] }],
-  properties: {
-    field: {
-      title: 'Tableau fieldname',
-      type: 'text',
+async function getDynamicFiltersSchema({ viz, vizState, data }) {
+  const tableauFilters =
+    vizState.loaded && viz
+      ? await viz.getWorkbook().getActiveSheet().getFiltersAsync()
+      : [];
+
+  const currentFields = (data.staticFilters || [])
+    .map((p) => p.field)
+    .filter((f) => f);
+
+  return {
+    title: 'Filter',
+    fieldsets: [
+      { id: 'default', title: 'Default', fields: ['field', 'urlParam'] },
+    ],
+    properties: {
+      field: {
+        title: 'Tableau filter',
+        widget: 'creatable_select',
+        isMulti: false,
+        creatable: true,
+        choices: tableauFilters
+          .filter((p) => {
+            return !includes(currentFields, p.getFieldName());
+          })
+          .map((p) => [p.getFieldName(), p.getFieldName()]),
+      },
+      urlParam: {
+        title: 'Field name',
+        type: 'text',
+      },
     },
-    value: {
-      title: 'Value',
-      type: 'text',
+    required: [],
+    tableauFilters,
+  };
+}
+
+async function getStaticFiltersSchema({ viz, vizState, data }) {
+  const tableauFilters =
+    vizState.loaded && viz
+      ? await viz.getWorkbook().getActiveSheet().getFiltersAsync()
+      : [];
+
+  const currentFields = (data.staticFilters || [])
+    .map((p) => p.field)
+    .filter((f) => f);
+
+  return {
+    title: 'Filter',
+    fieldsets: [{ id: 'default', title: 'Default', fields: ['field'] }],
+    properties: {
+      field: {
+        title: 'Tableau filter',
+        widget: 'creatable_select',
+        isMulti: false,
+        creatable: true,
+        choices: tableauFilters
+          .filter((p) => {
+            return !includes(currentFields, p.getFieldName());
+          })
+          .map((p) => [p.getFieldName(), p.getFieldName()]),
+      },
+      value: {
+        title: 'Value',
+        type: 'text',
+      },
     },
-  },
-  required: [],
-};
+    required: [],
+    tableauFilters,
+  };
+}
 
 const breakpointUrlSchema = (config) => {
   const breakpoints =
@@ -61,7 +168,7 @@ const breakpointUrlSchema = (config) => {
   };
 };
 
-export default (config, viz, vizState) => {
+export default async ({ config, viz, vizState, data }) => {
   const isDisabled = !canChangeVizData(viz, vizState);
 
   return {
@@ -81,12 +188,18 @@ export default (config, viz, vizState) => {
           'hideToolbar',
           'autoScale',
           'toolbarPosition',
+          'breakpointUrls',
         ],
       },
       {
-        id: 'extra_options',
-        title: 'Extra options',
-        fields: ['urlParameters', 'staticParameters', 'breakpointUrls'],
+        id: 'parameters',
+        title: 'Parameters',
+        fields: ['urlParameters', 'staticParameters'],
+      },
+      {
+        id: 'filters',
+        title: 'Filters',
+        fields: ['staticFilters'],
       },
     ],
     properties: {
@@ -125,22 +238,182 @@ export default (config, viz, vizState) => {
         isDisabled,
       },
       urlParameters: {
-        title: 'URL parameters',
+        title: 'Dynamic parameters',
         widget: 'object_list',
-        schema: urlParametersSchema,
-        description: 'Set a list of url parameters to filter the tableau',
+        schema: await getUrlParametersSchema({ viz, vizState, data }),
+        description: (
+          <div style={{ color: 'rgb(15, 130, 204)', fontWeight: '400' }}>
+            <p>Set a list of dynamic parameters that can be used as:</p>
+            <ul>
+              <li style={{ marginBottom: '0.5rem' }}>
+                <p style={{ marginBottom: '0' }}>
+                  URL parameters - when you embed this tableau dashboard you can
+                  also add query parameters defined bellow.
+                </p>
+                <p style={{ marginBottom: '0.25rem' }}>
+                  E.g: When you embed this tableau dashboard you can define the
+                  url as:
+                </p>
+                <p>
+                  <span>
+                    /path/to/embeded/tableau/visualization?
+                    <span
+                      style={{ color: 'rgb(218, 1, 45)' }}
+                    >{`{field_name}`}</span>
+                    =Romania
+                  </span>
+                </p>
+              </li>
+              <li>
+                <p style={{ marginBottom: '0' }}>
+                  Context data query - when you create a content where the
+                  tableau dashboard will be embeded you can add data query to
+                  that content.
+                </p>
+                <p>
+                  NOTE: the content type should have the{' '}
+                  <span style={{ color: 'rgb(218, 1, 45)' }}>
+                    'Parameters for data connection'
+                  </span>{' '}
+                  behavior enabled
+                </p>
+              </li>
+            </ul>
+          </div>
+        ),
         isDisabled,
       },
       staticParameters: {
         title: 'Static parameters',
         widget: 'object_list',
-        schema: staticParameters,
+        schema: await getStaticParametersSchema({ viz, vizState, data }),
+        schemaExtender: (schema, data) => {
+          const tableauParameter = find(
+            schema.tableauParameters,
+            (p) => p.getName() === data.field,
+          );
+
+          schema.fieldsets[0].fields = ['field', 'value'];
+
+          if (!data.field || !tableauParameter) {
+            return schema;
+          }
+
+          const allowableValuesType = tableauParameter.getAllowableValuesType();
+          const dataType = tableauParameter.getDataType();
+
+          if (includes(['all', 'list'], allowableValuesType)) {
+            schema.properties.value.choices =
+              tableauParameter
+                .getAllowableValues()
+                ?.map((v) => [v.value, v.formattedValue]) || [];
+            schema.properties.value.description = 'Select a value';
+          }
+          if (allowableValuesType === 'all') {
+            schema.properties.value.isMulti = true;
+            schema.properties.value.description = 'Select multiple values';
+          }
+          if (allowableValuesType === 'range' && dataType === 'date') {
+            schema.properties.value.widget = 'date';
+          } else if (allowableValuesType === 'range') {
+            schema.properties.value.type = 'number';
+            schema.properties.value.step = tableauParameter.getStepSize();
+          }
+          return schema;
+        },
+        description: (
+          <div style={{ color: 'rgb(15, 130, 204)', fontWeight: '400' }}>
+            <p style={{ marginBottom: '0' }}>
+              Set a list of static parameters.
+            </p>
+          </div>
+        ),
+        isDisabled,
+      },
+      dynamicFilters: {
+        title: 'Dynamic filters',
+        widget: 'object_list',
+        schema: await getDynamicFiltersSchema({ viz, vizState, data }),
+        description: (
+          <div style={{ color: 'rgb(15, 130, 204)', fontWeight: '400' }}>
+            <p>Set a list of dynamic filters that can be used as:</p>
+            <ul>
+              <li style={{ marginBottom: '0.5rem' }}>
+                <p style={{ marginBottom: '0' }}>
+                  URL parameters - when you embed this tableau dashboard you can
+                  also add filters defined bellow as query parameters.
+                </p>
+                <p style={{ marginBottom: '0.25rem' }}>
+                  E.g: When you embed this tableau dashboard you can define the
+                  url as:
+                </p>
+                <p>
+                  <span>
+                    /path/to/embeded/tableau/visualization?
+                    <span
+                      style={{ color: 'rgb(218, 1, 45)' }}
+                    >{`{field_name}`}</span>
+                    =Agriculture,Forestry and Fishing
+                  </span>
+                </p>
+              </li>
+              <li>
+                <p style={{ marginBottom: '0' }}>
+                  Context data query - when you create a content where the
+                  tableau dashboard will be embeded you can add data query to
+                  that content.
+                </p>
+                <p>
+                  NOTE: the content type should have the{' '}
+                  <span style={{ color: 'rgb(218, 1, 45)' }}>
+                    'Parameters for data connection'
+                  </span>{' '}
+                  behavior enabled
+                </p>
+              </li>
+            </ul>
+          </div>
+        ),
+        isDisabled,
+      },
+      staticFilters: {
+        title: 'Static filters',
+        widget: 'object_list',
+        schema: await getStaticFiltersSchema({ viz, vizState, data }),
+        schemaExtender: (schema, data) => {
+          const tableauFilters = find(
+            schema.tableauFilters,
+            (p) => p.getFieldName() === data.field,
+          );
+
+          schema.fieldsets[0].fields = ['field', 'value'];
+
+          if (!data.field || !tableauFilters) {
+            return schema;
+          }
+
+          const filterType = tableauFilters.getFilterType();
+
+          if (includes(['categorical'], filterType)) {
+            schema.properties.value.choices =
+              tableauFilters
+                .getAppliedValues()
+                ?.map((v) => [v.value, v.formattedValue]) || [];
+            schema.properties.value.isMulti = true;
+            schema.fieldsets[0].fields = ['field', 'value'];
+          } else {
+            schema.properties.field.description = (
+              <span style={{ color: 'rgb(218, 1, 45)' }}>
+                Filter type ({filterType}) not supported
+              </span>
+            );
+          }
+          return schema;
+        },
         description: (
-          <>
-            Set a list of static parameters.
-            <br />
-            <b>NOTE: You need to trigger a refresh for this to take effect</b>
-          </>
+          <div style={{ color: 'rgb(15, 130, 204)', fontWeight: '400' }}>
+            <p style={{ marginBottom: '0' }}>Set a list of static filters.</p>
+          </div>
         ),
         isDisabled,
       },

package/src/index.js

@@ -1,6 +1,10 @@
 import installBlocks from './Blocks';
 import { VisualizationView } from './Views';
-import { VisualizationWidget, VisualizationViewWidget } from './Widgets';
+import {
+  VisualizationWidget,
+  VisualizationViewWidget,
+  CreatableSelectWidget,
+} from './Widgets';
 
 const applyConfig = (config) => {
   config.settings.allowed_cors_destinations = [
@@ -13,6 +17,7 @@ const applyConfig = (config) => {
   config.views.contentTypesViews.tableau_visualization = VisualizationView;
   config.widgets.id.tableau_visualization = VisualizationWidget;
   config.widgets.views.id.tableau_visualization = VisualizationViewWidget;
+  config.widgets.widget.creatable_select = CreatableSelectWidget;
 
   return [installBlocks].reduce((acc, apply) => apply(acc), config);
 };