@eeacms/volto-tableau 3.0.3 → 3.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/package.json +1 -1
  3. package/src/Blocks/EmbedEEATableauBlock/View.jsx +33 -26
  4. package/src/CustomWidgets/UrlParamsWidget.jsx +29 -0
  5. package/src/Tableau/View.jsx +1 -1
  6. package/src/TableauBlock/View.jsx +29 -22
  7. package/src/TableauBlock/schema.js +1 -1
  8. package/src/Views/VisualizationView.jsx +13 -10
  9. package/src/Widgets/VisualizationWidget.jsx +11 -4
  10. package/src/Widgets/schema.js +11 -3
  11. package/src/index.js +2 -0
  12. package/src/less/tableau.less +17 -1
package/CHANGELOG.md CHANGED
@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file. Dates are d
4
4
 
5
5
  Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
6
6
 
7
+ ### [3.0.4](https://github.com/eea/volto-tableau/compare/3.0.3...3.0.4) - 18 January 2023
8
+
9
+ #### :hammer_and_wrench: Others
10
+
11
+ - Fix lint issues [dana-cfc4 - [`9bbf908`](https://github.com/eea/volto-tableau/commit/9bbf908195a9e90c606ebc87042ae3c7a44e7973)]
12
+ - Add available fields, remove default version, manage no version selected [dana-cfc4 - [`66e510e`](https://github.com/eea/volto-tableau/commit/66e510e5f2e47e049e157ab046d0499f14b8f700)]
7
13
  ### [3.0.3](https://github.com/eea/volto-tableau/compare/3.0.2...3.0.3) - 17 January 2023
8
14
 
9
15
  #### :hammer_and_wrench: Others
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eeacms/volto-tableau",
3
- "version": "3.0.3",
3
+ "version": "3.0.4",
4
4
  "description": "@eeacms/volto-tableau: Volto add-on",
5
5
  "main": "src/index.js",
6
6
  "author": "European Environment Agency: IDM2 A-Team",
package/src/Blocks/EmbedEEATableauBlock/View.jsx CHANGED
@@ -36,34 +36,41 @@ const View = (props) => {
36
36
  <PrivacyProtection data={data} {...props}>
37
37
  {data?.vis_url ? (
38
38
  <>
39
- <div className="tableau-block">
40
- {props.mode === 'edit' ? (
41
- <div className="tableau-info">
42
- <h3 className="tableau-version">
43
- == Tableau{' '}
44
- {tableau_visualization?.general?.version || '2.8.0'} loaded
45
- ==
46
- </h3>
39
+ {tableau_visualization?.general?.url &&
40
+ tableau_visualization?.general?.version ? (
41
+ <>
42
+ <div className="tableau-block">
43
+ {props.mode === 'edit' ? (
44
+ <div className="tableau-info">
45
+ <h3 className="tableau-version">
46
+ == Tableau {tableau_visualization?.general?.version}{' '}
47
+ loaded ==
48
+ </h3>
49
+ </div>
50
+ ) : (
51
+ ''
52
+ )}
53
+ <ConnectedTableau
54
+ {...props.tableau_visualization}
55
+ id={props.id}
56
+ {...props}
57
+ />
47
58
  </div>
48
- ) : (
49
- ''
50
- )}
51
- <ConnectedTableau
52
- {...props.tableau_visualization}
53
- id={props.id}
54
- {...props}
55
- />
56
- </div>
57
-
58
- {show_sources &&
59
- data_provenance &&
60
- data_provenance?.data?.data_provenance &&
61
- tableau_visualization ? (
62
- <Sources sources={data_provenance.data.data_provenance} />
63
- ) : show_sources ? (
64
- <div>Data provenance is not set in the visualization</div>
59
+ {show_sources &&
60
+ data_provenance &&
61
+ data_provenance?.data?.data_provenance &&
62
+ tableau_visualization ? (
63
+ <Sources sources={data_provenance.data.data_provenance} />
64
+ ) : show_sources ? (
65
+ <div>Data provenance is not set in the visualization</div>
66
+ ) : (
67
+ ''
68
+ )}
69
+ </>
70
+ ) : !tableau_visualization?.general?.url ? (
71
+ <div>Url is not set in the visualization</div>
65
72
  ) : (
66
- ''
73
+ <div>Version is not set in the visualization</div>
67
74
  )}
68
75
  </>
69
76
  ) : (
package/src/CustomWidgets/UrlParamsWidget.jsx ADDED
@@ -0,0 +1,29 @@
1
+ import React from 'react';
2
+ import '@eeacms/volto-tableau/less/tableau.less';
3
+
4
+ const UrlParamsWidget = () => {
5
+ const fields = [
6
+ 'embed',
7
+ 'isGuestRedirectFromVizportal',
8
+ 'showShareOptions',
9
+ 'jsdebug',
10
+ 'sheetname',
11
+ 'display_count',
12
+ 'showVizHome',
13
+ 'origin',
14
+ 'device',
15
+ ];
16
+
17
+ return (
18
+ <div className="availableFieldsContainer">
19
+ <p className="availableFieldsTitle">Available Fields:</p>
20
+ {fields.map((field) => (
21
+ <p className="availableFields">
22
+ <strong>{field}</strong>
23
+ </p>
24
+ ))}
25
+ </div>
26
+ );
27
+ };
28
+
29
+ export default UrlParamsWidget;
package/src/Tableau/View.jsx CHANGED
@@ -23,7 +23,7 @@ const Tableau = (props) => {
23
23
  screen = {},
24
24
  setError = () => {},
25
25
  setLoaded = () => {},
26
- version = '2.8.0',
26
+ version = '',
27
27
  } = props;
28
28
  const {
29
29
  autoScale = false,
package/src/TableauBlock/View.jsx CHANGED
@@ -34,14 +34,15 @@ const View = (props) => {
34
34
  description = null,
35
35
  autoScale = false,
36
36
  } = data;
37
- const version =
38
- props.data.version || config.settings.tableauVersion || '2.8.0';
37
+ const version = props.data.version || config.settings.tableauVersion;
39
38
  const device = getDevice(config, screen.page?.width || Infinity);
40
39
  const breakpointUrl = breakpointUrls.filter(
41
40
  (breakpoint) => breakpoint.device === device,
42
41
  )[0]?.url;
43
42
  const url = breakpointUrl || data.url;
44
43
 
44
+ const displayCondition = url && version;
45
+
45
46
  React.useEffect(() => {
46
47
  setMounted(true);
47
48
  /* eslint-disable-next-line */
@@ -67,33 +68,39 @@ const View = (props) => {
67
68
 
68
69
  return mounted ? (
69
70
  <div className="tableau-block">
70
- {props.mode === 'edit' ? (
71
- <div className="tableau-info">
71
+ <div className="tableau-info">
72
+ {displayCondition && props.mode === 'edit' ? (
72
73
  <h3 className="tableau-version">== Tableau {version} loaded ==</h3>
73
- {!props.data.url ? <p className="tableau-error">URL required</p> : ''}
74
- {error ? <p className="tableau-error">{error}</p> : ''}
75
- </div>
76
- ) : (
77
- ''
78
- )}
74
+ ) : null}
75
+ {!url ? <p className="tableau-error">URL required</p> : ''}
76
+ {url && !version ? (
77
+ <p className="tableau-error">Version required</p>
78
+ ) : (
79
+ ''
80
+ )}
81
+ {error ? <p className="tableau-error">{error}</p> : ''}
82
+ </div>
83
+
79
84
  {loaded && title ? <h3 className="tableau-title">{title}</h3> : ''}
80
85
  {loaded && description ? (
81
86
  <p className="tableau-description">{description}</p>
82
87
  ) : (
83
88
  ''
84
89
  )}
85
- <Tableau
86
- {...props}
87
- canUpdateUrl={!breakpointUrl}
88
- extraFilters={extraFilters}
89
- extraOptions={{ device: autoScale ? 'desktop' : device }}
90
- error={error}
91
- loaded={loaded}
92
- setError={setError}
93
- setLoaded={setLoaded}
94
- version={version}
95
- url={url}
96
- />
90
+ {displayCondition ? (
91
+ <Tableau
92
+ {...props}
93
+ canUpdateUrl={!breakpointUrl}
94
+ extraFilters={extraFilters}
95
+ extraOptions={{ device: autoScale ? 'desktop' : device }}
96
+ error={error}
97
+ loaded={loaded}
98
+ setError={setError}
99
+ setLoaded={setLoaded}
100
+ version={version}
101
+ url={url}
102
+ />
103
+ ) : null}
97
104
  </div>
98
105
  ) : (
99
106
  ''
package/src/TableauBlock/schema.js CHANGED
@@ -82,7 +82,7 @@ export default (config) => ({
82
82
  '2.0.3',
83
83
  ].map((version) => [version, `tableau-${version}`]),
84
84
  ],
85
- default: config.settings.tableauVersion || '2.8.0',
85
+ default: config.settings.tableauVersion,
86
86
  },
87
87
  url: {
88
88
  title: 'Url',
package/src/Views/VisualizationView.jsx CHANGED
@@ -12,6 +12,8 @@ const VisualizationView = (props) => {
12
12
  <div className="tableau-info">
13
13
  {!tableau_visualization_data.general?.url ? (
14
14
  <p className="tableau-error">URL required</p>
15
+ ) : !tableau_visualization_data.general?.version ? (
16
+ <p className="tableau-error">Version required</p>
15
17
  ) : tableauError ? (
16
18
  <p className="tableau-error">{tableauError}</p>
17
19
  ) : (
@@ -23,19 +25,20 @@ const VisualizationView = (props) => {
23
25
  };
24
26
  return (
25
27
  <div>
26
- {!tableau_visualization_data.general?.url || tableauError ? (
28
+ {!tableau_visualization_data?.general?.url ||
29
+ !tableau_visualization_data?.general?.version ||
30
+ tableauError ? (
27
31
  <TableauNotDisplayed />
28
32
  ) : (
29
- ''
33
+ <TableauView
34
+ setTableauError={setTableauError}
35
+ data={{
36
+ ...tableau_visualization_data.general,
37
+ ...tableau_visualization_data.options,
38
+ ...tableau_visualization_data.extraOptions,
39
+ }}
40
+ />
30
41
  )}
31
- <TableauView
32
- setTableauError={setTableauError}
33
- data={{
34
- ...tableau_visualization_data.general,
35
- ...tableau_visualization_data.options,
36
- ...tableau_visualization_data.extraOptions,
37
- }}
38
- />
39
42
  </div>
40
43
  );
41
44
  };
package/src/Widgets/VisualizationWidget.jsx CHANGED
@@ -40,6 +40,8 @@ const VisualizationWidget = (props) => {
40
40
  <div className="tableau-info">
41
41
  {intValue && intValue.general && !intValue.general.url ? (
42
42
  <p className="tableau-error">URL required</p>
43
+ ) : intValue && intValue.general && !intValue.general.version ? (
44
+ <p className="tableau-error">Version required</p>
43
45
  ) : tableauError ? (
44
46
  <p className="tableau-error">{tableauError}</p>
45
47
  ) : (
@@ -57,7 +59,8 @@ const VisualizationWidget = (props) => {
57
59
  setIntValue({
58
60
  ...intValue,
59
61
  general: {
60
- version: '2.8.0',
62
+ url: intValue?.general?.url,
63
+ version: '',
61
64
  },
62
65
  });
63
66
  }
@@ -73,7 +76,7 @@ const VisualizationWidget = (props) => {
73
76
  });
74
77
  }
75
78
  // eslint-disable-next-line react-hooks/exhaustive-deps
76
- }, [intValue]);
79
+ }, []);
77
80
 
78
81
  return (
79
82
  <FormFieldWrapper {...props}>
@@ -115,7 +118,9 @@ const VisualizationWidget = (props) => {
115
118
  />
116
119
  </Grid.Column>
117
120
  <Grid.Column mobile={12} tablet={12} computer={7}>
118
- {(intValue && intValue.general && !intValue.general.url) ||
121
+ {(intValue &&
122
+ intValue.general &&
123
+ (!intValue.general.url || !intValue.general.version)) ||
119
124
  tableauError ? (
120
125
  <TableauNotDisplayed />
121
126
  ) : (
@@ -147,7 +152,9 @@ const VisualizationWidget = (props) => {
147
152
  </Modal.Actions>
148
153
  </Modal>
149
154
  )}
150
- {(intValue && intValue.general && !intValue.general.url) ||
155
+ {(intValue &&
156
+ intValue.general &&
157
+ (!intValue.general.url || !intValue.general.version)) ||
151
158
  tableauError ? (
152
159
  <TableauNotDisplayed />
153
160
  ) : (
package/src/Widgets/schema.js CHANGED
@@ -27,7 +27,7 @@ const generalSchema = (config) => {
27
27
  '2.0.3',
28
28
  ].map((version) => [version, `tableau-${version}`]),
29
29
  ],
30
- default: config.settings.tableauVersion || '2.8.0',
30
+ default: config.settings.tableauVersion,
31
31
  },
32
32
  url: {
33
33
  title: 'Url',
@@ -92,7 +92,11 @@ const optionsSchema = {
92
92
  const urlParametersSchema = {
93
93
  title: 'Parameter',
94
94
  fieldsets: [
95
- { id: 'default', title: 'Default', fields: ['field', 'urlParam'] },
95
+ {
96
+ id: 'default',
97
+ title: 'Default',
98
+ fields: ['field', 'urlParam'],
99
+ },
96
100
  ],
97
101
  properties: {
98
102
  field: {
@@ -139,7 +143,7 @@ const extraOptionsSchema = (config) => {
139
143
  {
140
144
  id: 'default',
141
145
  title: 'Extra Options Data',
142
- fields: ['urlParameters', 'breakpointUrls'],
146
+ fields: ['urlParameters', 'availableFields', 'breakpointUrls'],
143
147
  },
144
148
  ],
145
149
 
@@ -150,6 +154,10 @@ const extraOptionsSchema = (config) => {
150
154
  schema: urlParametersSchema,
151
155
  description: 'Set a list of url parameters to filter the tableau',
152
156
  },
157
+ availableFields: {
158
+ title: 'Available Fields:',
159
+ widget: 'url_params_widget',
160
+ },
153
161
  breakpointUrls: {
154
162
  title: 'Breakpoint urls',
155
163
  widget: 'object_list',
package/src/index.js CHANGED
@@ -5,6 +5,7 @@ import EmbedTableauView from './Blocks/EmbedEEATableauBlock/View';
5
5
  import EmbedTableauEdit from './Blocks/EmbedEEATableauBlock/Edit';
6
6
  import { VisualizationView } from './Views';
7
7
  import { VisualizationWidget } from './Widgets';
8
+ import UrlParamsWidget from './CustomWidgets/UrlParamsWidget';
8
9
 
9
10
  import tableauStore from './store';
10
11
 
@@ -72,6 +73,7 @@ const applyConfig = (config) => {
72
73
 
73
74
  config.views.contentTypesViews.tableau_visualization = VisualizationView;
74
75
  config.widgets.id.tableau_visualization_data = VisualizationWidget;
76
+ config.widgets.widget.url_params_widget = UrlParamsWidget;
75
77
 
76
78
  return config;
77
79
  };
package/src/less/tableau.less CHANGED
@@ -108,4 +108,20 @@
108
108
  }
109
109
  }
110
110
 
111
- .loadAddonOverrides();
111
+ .availableFieldsContainer {
112
+ padding: 0 5px 5px 0;
113
+ border-bottom: 1px solid #d9d9d9;
114
+ }
115
+
116
+ .availableFieldsTitle {
117
+ color: darkgray;
118
+ font-size: 13px;
119
+ font-weight: bold;
120
+ }
121
+
122
+ .availableFields {
123
+ padding: 0 5px;
124
+ font-size: 12px;
125
+ }
126
+
127
+ .loadAddonVariables();