@eeacms/volto-tableau 3.0.8 → 4.1.0

package/src/Blocks/TableauBlock/schema.js

@@ -0,0 +1,224 @@
+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',
+    },
+    urlParam: {
+      title: 'URL param',
+      type: 'text',
+    },
+  },
+  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;
+
+  return {
+    title: 'URL',
+    fieldsets: [{ id: 'default', title: 'Default', fields: ['device', 'url'] }],
+    properties: {
+      device: {
+        title: 'Device',
+        choices: Object.keys(breakpoints).map((breakpoint) => [
+          breakpoint,
+          breakpoint,
+        ]),
+      },
+      url: {
+        title: 'Url',
+        widget: 'textarea',
+      },
+    },
+    required: [],
+  };
+};
+
+const sourceSchema = {
+  title: 'Source',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['title', 'organisation', 'link'],
+    },
+  ],
+  properties: {
+    title: {
+      title: 'Title',
+    },
+    organisation: {
+      title: 'Organization',
+    },
+    link: {
+      title: 'Link',
+      widget: 'url',
+    },
+  },
+  required: [],
+};
+
+export default (config, viz, vizState) => {
+  const isDisabled = !canChangeVizData(viz, vizState);
+
+  return {
+    title: 'Tableau',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [
+          'url',
+          'title',
+          'description',
+          'with_sources',
+          'with_download',
+          'with_share',
+        ],
+      },
+      {
+        id: 'options',
+        title: 'Options',
+        fields: [
+          'sheetname',
+          'hideTabs',
+          'hideToolbar',
+          'autoScale',
+          'toolbarPosition',
+        ],
+      },
+      {
+        id: 'extra_options',
+        title: 'Extra options',
+        fields: ['urlParameters', 'staticParameters', 'breakpointUrls'],
+      },
+      {
+        id: 'sources',
+        title: 'Sources',
+        fields: ['sources'],
+      },
+    ],
+    properties: {
+      url: {
+        title: 'Url',
+        widget: 'textarea',
+        isDisabled,
+      },
+      title: {
+        title: 'Title',
+        widget: 'textarea',
+      },
+      description: {
+        title: 'Description',
+        widget: 'textarea',
+      },
+      with_download: {
+        title: 'Show download button',
+        type: 'boolean',
+        defaultValue: true,
+      },
+      with_share: {
+        title: 'Show share button',
+        type: 'boolean',
+        defaultValue: true,
+      },
+      with_sources: {
+        title: 'Show sources',
+        type: 'boolean',
+        defaultValue: true,
+      },
+      sources: {
+        title: 'Sources',
+        widget: 'object_list',
+        schema: sourceSchema,
+      },
+      sheetname: {
+        title: 'Sheetname',
+        choices: getSheetnamesChoices(viz),
+        isDisabled,
+      },
+      hideTabs: {
+        title: 'Hide tabs',
+        type: 'boolean',
+        default: false,
+        isDisabled,
+      },
+      hideToolbar: {
+        title: 'Hide toolbar',
+        type: 'boolean',
+        default: false,
+        isDisabled,
+      },
+      autoScale: {
+        title: 'Auto scale',
+        type: 'boolean',
+        default: false,
+        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'],
+  };
+};

package/src/Blocks/index.js

@@ -0,0 +1,9 @@
+import installEmbedTableauVisualization from './EmbedTableauVisualization';
+import installTableauBlock from './TableauBlock';
+
+export default (config) => {
+  return [installEmbedTableauVisualization, installTableauBlock].reduce(
+    (acc, apply) => apply(acc),
+    config,
+  );
+};

package/src/Tableau/Tableau.jsx

@@ -0,0 +1,430 @@
+import React, {
+  useEffect,
+  useImperativeHandle,
+  useState,
+  useRef,
+  useMemo,
+  useCallback,
+  forwardRef,
+} from 'react';
+import { connect } from 'react-redux';
+import { toast } from 'react-toastify';
+import isEqual from 'lodash/isEqual';
+import isUndefined from 'lodash/isUndefined';
+import cx from 'classnames';
+import { Button } from 'semantic-ui-react';
+import { Toast, Icon } from '@plone/volto/components';
+import { useTableau } from '@eeacms/volto-tableau/hooks';
+import JsonCodeSnippet from '@eeacms/volto-tableau/Utils/JsonCodeSnippet/JsonCodeSnippet';
+import Sources from '@eeacms/volto-tableau/Utils/Sources/Sources';
+import Download from '@eeacms/volto-tableau/Utils/Download/Download';
+import Share from '@eeacms/volto-tableau/Utils/Share/Share';
+import { getSheetnames, getActiveSheetname, getDevice } from './helpers';
+
+import resetSVG from '@plone/volto/icons/reset.svg';
+
+const TableauDebug = ({ mode, data, vizState, url, version, clearData }) => {
+  const { loaded, error } = vizState;
+  const { filters = {}, parameters = {} } = data;
+
+  const showTableauInfo = mode === 'edit' && (!url || (loaded && url) || error);
+
+  if (!showTableauInfo) return null;
+
+  return (
+    <div className="tableau-debug">
+      {!url && !vizState.error && <p className="tableau-error">URL required</p>}
+      {vizState.error && <p className="tableau-error">{vizState.error}</p>}
+      {vizState.loaded && url && (
+        <h3 className="tableau-version">
+          Tableau <span className="version">{version}</span>
+        </h3>
+      )}
+
+      {vizState.loaded && url && (
+        <>
+          <p>
+            Apply filters / parameters inside of tableau to set default static
+            filters / parameters.
+          </p>
+          <p className="important-note">
+            Click{' '}
+            <button className="clear-filter-button" onClick={clearData}>
+              here
+            </button>{' '}
+            to reset applied filters / parameters.
+          </p>
+          <code className="json-snippet">
+            <JsonCodeSnippet obj={{ filters, parameters }} />
+          </code>
+        </>
+      )}
+    </div>
+  );
+};
+
+const Tableau = forwardRef((props, ref) => {
+  const vizEl = useRef(null);
+  const viz = useRef();
+  const vizState = useRef({});
+  const dataRef = useRef(props.data || {});
+  const [initiateViz, setInitiateViz] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const {
+    block,
+    data = {},
+    breakpoints = {},
+    extraFilters = {},
+    extraOptions = {},
+    mode = 'view',
+    screen = {},
+    version = '2.8.0',
+    sources,
+    setVizState,
+    onChangeBlock,
+  } = props;
+  const {
+    autoScale = false,
+    hideTabs = false,
+    hideToolbar = false,
+    sheetname = '',
+    toolbarPosition = 'Top',
+    breakpointUrls = [],
+    with_sources,
+    with_download,
+    with_share,
+  } = data;
+
+  const device = useMemo(
+    () => getDevice(breakpoints, screen.page?.width || Infinity),
+    [breakpoints, screen],
+  );
+
+  const breakpointUrl = useMemo(
+    () =>
+      breakpointUrls.filter((breakpoint) => breakpoint.device === device)[0]
+        ?.url,
+    [breakpointUrls, device],
+  );
+
+  const url = breakpointUrl || data.url;
+
+  // Load tableau from script tag
+  const tableau = useTableau(version);
+
+  const onFilterChange = (filter) => {
+    let value;
+    const filters = dataRef.current.filters;
+    const newFilters = { ...filters };
+    const fieldName = filter.getFieldName();
+    const filterType = filter.getFilterType();
+    switch (filterType) {
+      // https://community.tableau.com/s/idea/0874T000000HA8hQAG/detail
+      // Only categorical filters are allowed
+      case tableau.FilterType.CATEGORICAL:
+        const isAllSelected = filter.getIsAllSelected();
+        if (!isAllSelected) {
+          value = filter
+            .getAppliedValues()
+            .map((appliedValue) => appliedValue.value);
+        }
+        break;
+      case tableau.FilterType.QUANTITATIVE:
+        break;
+      case tableau.FilterType.HIERARCHICAL:
+        break;
+      case tableau.FilterType.RELATIVE_DATE:
+        break;
+      default:
+        break;
+    }
+    if (isUndefined(value) && !isUndefined(newFilters[fieldName])) {
+      delete newFilters[fieldName];
+    } else if (!isUndefined(value)) {
+      newFilters[fieldName] = value;
+    }
+    if (!isEqual(newFilters, filters)) {
+      onChangeBlock(block, {
+        ...dataRef.current,
+        filters: {
+          ...newFilters,
+        },
+      });
+    }
+  };
+
+  const onParameterChange = (parameter) => {
+    const parameters = dataRef.current.parameters;
+    const newParameters = { ...parameters };
+    const fieldName = parameter.getName();
+    const value = parameter.getCurrentValue()?.value;
+    if (isUndefined(value) && !isUndefined(newParameters[fieldName])) {
+      delete newParameters[fieldName];
+    } else {
+      newParameters[fieldName] = [value];
+    }
+    if (!isEqual(newParameters, parameters)) {
+      onChangeBlock(block, {
+        ...dataRef.current,
+        parameters: {
+          ...newParameters,
+        },
+      });
+    }
+  };
+
+  const onVizStateUpdate = useCallback((loaded, loading, error) => {
+    vizState.current = { ...vizState.current, loaded, loading, error };
+    setLoaded(loaded);
+    setLoading(loading);
+    setError(error);
+    if (setVizState) {
+      setVizState({ loaded, loading, error });
+    }
+    /* eslint-disable-next-line */
+  }, []);
+
+  const activateDefaultSheet = useCallback(() => {
+    if (!vizState.current.loaded || !viz.current) return;
+    const workbook = viz.current.getWorkbook();
+    const sheetnames = getSheetnames(viz.current);
+    const activeSheetName = getActiveSheetname(viz.current);
+    if (sheetnames.includes(sheetname) && sheetname !== activeSheetName) {
+      workbook.activateSheetAsync(sheetname).then(() => {
+        onVizStateUpdate(true, false, null);
+      });
+    } else {
+      onVizStateUpdate(true, false, null);
+    }
+  }, [onVizStateUpdate, sheetname]);
+
+  const clearData = () => {
+    onChangeBlock(block, {
+      ...data,
+      filters: {},
+      parameters: {},
+    });
+  };
+
+  const disposeViz = () => {
+    if (viz.current) {
+      viz.current.dispose();
+      viz.current = null;
+    }
+    onVizStateUpdate(false, false, null);
+  };
+
+  const initViz = () => {
+    try {
+      onVizStateUpdate(false, true, vizState.current.error);
+      viz.current = new tableau.Viz(vizEl.current, url, {
+        hideTabs,
+        hideToolbar,
+        toolbarPosition,
+        device: !!breakpointUrl ? device : 'desktop',
+        ...data.filters,
+        ...data.parameters,
+        ...extraFilters,
+        ...extraOptions,
+        onFirstInteractive: () => {
+          onVizStateUpdate(true, true, null);
+          setInitiateViz(false);
+          activateDefaultSheet();
+          if (viz.current && mode === 'edit' && !breakpointUrl) {
+            const sheetnames = getSheetnames(viz.current);
+            const activeSheetname = getActiveSheetname(viz.current);
+            const vizUrl = viz.current.getUrl();
+            const newData = {
+              ...data,
+            };
+            newData.url = vizUrl;
+            if (!sheetname || !sheetnames.includes(sheetname)) {
+              newData.sheetname = activeSheetname;
+            }
+            if (newData.url !== url || newData.sheetname !== sheetname) {
+              onChangeBlock(block, {
+                ...data,
+                ...newData,
+              });
+              toast.success(
+                <Toast success title={'Tableau data updated'} content={null} />,
+              );
+            }
+          }
+          if (viz.current && mode === 'edit') {
+            // Filter change event
+            viz.current.addEventListener(
+              tableau.TableauEventName.FILTER_CHANGE,
+              (event) => {
+                event.getFilterAsync().then((filter) => {
+                  onFilterChange(filter);
+                });
+              },
+            );
+            // Parameter change event
+            viz.current.addEventListener(
+              tableau.TableauEventName.PARAMETER_VALUE_CHANGE,
+              (event) => {
+                event.getParameterAsync().then((parameter) => {
+                  onParameterChange(parameter);
+                });
+              },
+            );
+          }
+        },
+      });
+    } catch (e) {
+      onVizStateUpdate(false, false, e.get_message());
+      setInitiateViz(false);
+    }
+  };
+
+  const addExtraFilters = (extraFilters) => {
+    const worksheets =
+      viz.current.getWorkbook().getActiveSheet().getWorksheets() || [];
+
+    worksheets.forEach((worksheet) => {
+      if (worksheet.getSheetType() === tableau.DashboardObjectType.WORKSHEET) {
+        Object.keys(extraFilters).forEach((filter) => {
+          if (!extraFilters[filter]) {
+            worksheet.clearFilterAsync(filter);
+          } else {
+            worksheet.applyFilterAsync(
+              filter,
+              extraFilters[filter],
+              tableau.FilterUpdateType.REPLACE,
+            );
+          }
+        });
+      }
+    });
+  };
+
+  const updateScale = () => {
+    const tableauEl = vizEl.current.querySelector('iframe');
+    const { sheetSize = {} } = viz.current.getVizSize() || {};
+    const vizWidth = sheetSize?.minSize?.width || 1;
+    const scale = Math.min(vizEl.current.clientWidth / vizWidth, 1);
+    tableauEl.style.transform = `scale(${scale})`;
+    window.requestAnimationFrame(() => {
+      if (vizEl.current) {
+        vizEl.current.style.height = `${scale * tableauEl.clientHeight}px`;
+      }
+    });
+  };
+
+  // Update refs
+  useEffect(() => {
+    dataRef.current = data;
+  }, [data]);
+
+  useEffect(() => {
+    if (!tableau) return;
+    if (url) {
+      disposeViz();
+      setInitiateViz(true);
+    } else {
+      disposeViz();
+    }
+    /* eslint-disable-next-line */
+  }, [tableau, url, hideTabs, hideToolbar, toolbarPosition]);
+
+  useEffect(() => {
+    if (initiateViz && !loaded && !loading) {
+      initViz();
+    }
+    /* eslint-disable-next-line */
+  }, [loaded, loading, initiateViz]);
+
+  useEffect(() => {
+    if (vizState.current.loaded && viz.current) {
+      addExtraFilters(extraFilters);
+    }
+    /* eslint-disable-next-line */
+  }, [JSON.stringify(extraFilters)]);
+
+  useEffect(() => {
+    if (vizState.current.loaded && viz.current && autoScale) {
+      updateScale();
+    }
+    /* eslint-disable-next-line */
+  }, [loaded, screen?.page?.width]);
+
+  useEffect(() => {
+    if (vizState.current.loaded && viz.current) {
+      onVizStateUpdate(true, true, null);
+      activateDefaultSheet();
+    }
+    /* eslint-disable-next-line */
+  }, [sheetname]);
+
+  useImperativeHandle(
+    ref,
+    () => {
+      if (loaded) {
+        return viz.current;
+      }
+      if (loading) {
+        return null;
+      }
+      return;
+    },
+    [loaded, loading],
+  );
+
+  return (
+    <div className="tableau-wrapper">
+      {loading && (
+        <div className="tableau-loader">
+          <span>Loading...</span>
+        </div>
+      )}
+      {!loading && mode === 'edit' && (
+        <Button
+          className="reload-tableau"
+          icon
+          secondary
+          compact
+          onClick={() => {
+            if (tableau && url) {
+              disposeViz();
+              setInitiateViz(true);
+            }
+          }}
+        >
+          <Icon name={resetSVG} size="24px" />
+        </Button>
+      )}
+      <TableauDebug
+        mode={props.mode}
+        data={data}
+        vizState={{ loaded, loading, error }}
+        url={url}
+        version={version}
+        clearData={clearData}
+      />
+      <div
+        className={cx('tableau', `tableau-${version}`, {
+          'tableau-autoscale': autoScale,
+        })}
+        ref={vizEl}
+      />
+      <div className="tableau-info">
+        {with_sources && loaded && <Sources sources={sources} />}
+        {with_download && loaded && <Download viz={viz.current} />}
+        {with_share && loaded && <Share viz={viz.current} />}
+      </div>
+    </div>
+  );
+});
+
+export default connect(
+  (state) => ({
+    screen: state.screen,
+  }),
+  null,
+  null,
+  { forwardRef: true },
+)(Tableau);

package/src/Tableau/helpers.js

@@ -0,0 +1,41 @@
+import isUndefined from 'lodash/isUndefined';
+
+export const getSheetnames = (viz) => {
+  if (!viz) return [];
+  let sheetnames = [];
+  const workbook = viz.getWorkbook();
+  workbook.getPublishedSheetsInfo().forEach((sheet) => {
+    const sheetName = sheet.getName();
+    sheetnames.push(sheetName);
+  });
+  return sheetnames;
+};
+
+export const getSheetnamesChoices = (viz) => {
+  return getSheetnames(viz).map((sheet) => [sheet, sheet]);
+};
+
+export const getActiveSheetname = (viz) => {
+  const workbook = viz.getWorkbook();
+  return workbook.getActiveSheet().getName();
+};
+
+export const canChangeVizData = (viz, vizState) => {
+  // If viz is null it means that the viz is loading
+  // If viz is undefined it means that there is no viz nor it is loading
+  if (vizState?.loading) return false;
+  return !!viz || isUndefined(viz);
+};
+
+export const getDevice = (breakpoints, width) => {
+  let device = 'desktop';
+  Object.keys(breakpoints).forEach((breakpoint) => {
+    if (
+      width <= breakpoints[breakpoint][0] &&
+      width >= breakpoints[breakpoint][1]
+    ) {
+      device = breakpoint;
+    }
+  });
+  return device;
+};