@eeacms/volto-cca-policy 1.0.7 → 1.0.8

package/CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.0.8](https://github.com/eea/volto-cca-policy/compare/1.0.7...1.0.8) - 17 August 2026
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`c06e6eb`](https://github.com/eea/volto-cca-policy/commit/c06e6ebc41cbe2bb80a9c8472d57fd361fe09dab)]
+
+#### :hammer_and_wrench: Others
+
+- Refs #307245 - Add test for visualizations. [GhitaB - [`15d7a0b`](https://github.com/eea/volto-cca-policy/commit/15d7a0bc514e6ac09bbec19303e42ceb120647dc)]
+- Refs #307245 - Allow indicators to support multiple visualizations. [GhitaB - [`b7a0b7f`](https://github.com/eea/volto-cca-policy/commit/b7a0b7fe9db40a9d9a1847eb71a95a8f2245dd5e)]
 ### [1.0.7](https://github.com/eea/volto-cca-policy/compare/1.0.6...1.0.7) - 14 August 2026
 
 #### :rocket: Dependency updates
@@ -233,8 +243,39 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - test: pin Chromium version 149 to work with Cypress [valentinab25 - [`659ec82`](https://github.com/eea/volto-cca-policy/commit/659ec823dd71fe592a3a7accda22effbe1fb07bc)]
-## [1.0.0](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.17...1.0.0) - 12 June 2026
+## [1.0.0](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.18...1.0.0) - 12 June 2026
+
+### [1.0.0-alpha.18](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.17...1.0.0-alpha.18) - 13 August 2026
+
+#### :rocket: Dependency updates
+
+- Release @eeacms/volto-globalsearch@4.1.1 [EEA Jenkins - [`f34f23c`](https://github.com/eea/volto-cca-policy/commit/f34f23c587f32930acd4316d43f2f64fd9338764)]
+- Release @eeacms/volto-globalsearch@4.1.0 [EEA Jenkins - [`5d7ddd2`](https://github.com/eea/volto-cca-policy/commit/5d7ddd2cf7a371007a569d185690d655c2c4b2d2)]
+
+#### :bug: Bug Fixes
+
+- fix: update import [kreafox - [`5e98924`](https://github.com/eea/volto-cca-policy/commit/5e9892488dd84e2e280d29905f4471af4f5403be)]
+- fix: imports in GovernanceTab [kreafox - [`c1eb09f`](https://github.com/eea/volto-cca-policy/commit/c1eb09fd59e730fa15c71fd73f625f9811fd98fa)]
+- fix: improve geochars parsing, and enhance capitalizeFirstLetter function [kreafox - [`370deb6`](https://github.com/eea/volto-cca-policy/commit/370deb6395872c4229c0747077f845f8d8375336)]
 
+#### :nail_care: Enhancements
+
+- refactor: remove unused export of euCountryNamesEnergy from helpers [kreafox - [`5c40276`](https://github.com/eea/volto-cca-policy/commit/5c40276f491e4b3a24de8ebe29e8fdc0d0d2fe57)]
+- refactor: change exported components to default exports in ImageWidget, countryMap, and queryUtils [kreafox - [`43ce27c`](https://github.com/eea/volto-cca-policy/commit/43ce27c9af8f036e34d5ccefe185fa138fa6f823)]
+- refactor: replace clientOnly HOC with withClientOnly and reorganize helper imports [kreafox - [`5e326f3`](https://github.com/eea/volto-cca-policy/commit/5e326f378af2ba784e7f8b4499a28500a04031b5)]
+- refactor: reorganize content sections, views, and widgets [kreafox - [`4ff70ec`](https://github.com/eea/volto-cca-policy/commit/4ff70ec1a763071ace8292eeac6d2f0d692580cb)]
+- refactor:  shared content view components into reusable theme modules [kreafox - [`e0f1906`](https://github.com/eea/volto-cca-policy/commit/e0f190606acc8ab74dfad147f751451d1e8f38eb)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`c06e6eb`](https://github.com/eea/volto-cca-policy/commit/c06e6ebc41cbe2bb80a9c8472d57fd361fe09dab)]
+
+#### :hammer_and_wrench: Others
+
+- Refs #307245 - Allow indicators to support multiple visualizations. [GhitaB - [`b7a0b7f`](https://github.com/eea/volto-cca-policy/commit/b7a0b7fe9db40a9d9a1847eb71a95a8f2245dd5e)]
+- test: increase coverage for ImageWidget [kreafox - [`5fd74bf`](https://github.com/eea/volto-cca-policy/commit/5fd74bfe00db49e4977a64871de3144a7247415d)]
+- core: update locales [kreafox - [`f1ba2dd`](https://github.com/eea/volto-cca-policy/commit/f1ba2dd01269d42da4cdeb948951b65857a05e3d)]
+- core: update locales [kreafox - [`122817e`](https://github.com/eea/volto-cca-policy/commit/122817ea9f6f0084fe8cb697ccfaffb8a9fe833d)]
 ### [1.0.0-alpha.17](https://github.com/eea/volto-cca-policy/compare/1.0.0-alpha.16...1.0.0-alpha.17) - 4 August 2026
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/manage/Widgets/VisualizationsWidget.jsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Checkbox, Form, Input, TextArea } from 'semantic-ui-react';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+
+import './visualizations.less';
+
+const emptyVisualization = {
+  title: '',
+  embed_code: '',
+  height: '',
+  full_width: false,
+};
+
+const normalizeVisualizations = (value) =>
+  Array.isArray(value)
+    ? value.map((item) => ({ ...emptyVisualization, ...(item || {}) }))
+    : [];
+
+const VisualizationsWidget = (props) => {
+  const { id, value, onChange, isDisabled } = props;
+  const visualizations = normalizeVisualizations(value);
+
+  const updateVisualizations = (nextValue) => {
+    onChange(id, nextValue);
+  };
+
+  const updateItem = (index, field, fieldValue) => {
+    updateVisualizations(
+      visualizations.map((item, itemIndex) =>
+        itemIndex === index ? { ...item, [field]: fieldValue } : item,
+      ),
+    );
+  };
+
+  const addItem = () => {
+    updateVisualizations([...visualizations, { ...emptyVisualization }]);
+  };
+
+  const deleteItem = (index) => {
+    updateVisualizations(
+      visualizations.filter((_, itemIndex) => itemIndex !== index),
+    );
+  };
+
+  return (
+    <FormFieldWrapper {...props}>
+      <div className="visualizations-widget">
+        {visualizations.map((item, index) => (
+          <div
+            className="visualizations-widget-item"
+            key={`visualization-${index}`}
+          >
+            <div className="visualizations-widget-item-header">
+              <h4>Visualization {index + 1}</h4>
+              <Button
+                type="button"
+                basic
+                compact
+                negative
+                disabled={isDisabled}
+                onClick={() => deleteItem(index)}
+              >
+                Delete
+              </Button>
+            </div>
+
+            <Form.Field>
+              <label htmlFor={`${id}-${index}-title`}>Title</label>
+              <Input
+                id={`${id}-${index}-title`}
+                value={item.title || ''}
+                disabled={isDisabled}
+                onChange={(event) =>
+                  updateItem(index, 'title', event.target.value)
+                }
+              />
+            </Form.Field>
+
+            <Form.Field>
+              <label htmlFor={`${id}-${index}-embed-code`}>
+                Embed code or URL
+              </label>
+              <TextArea
+                id={`${id}-${index}-embed-code`}
+                value={item.embed_code || ''}
+                disabled={isDisabled}
+                rows={5}
+                onChange={(event) =>
+                  updateItem(index, 'embed_code', event.target.value)
+                }
+              />
+            </Form.Field>
+
+            <Form.Group widths="equal">
+              <Form.Field className="visualizations-widget-height">
+                <label htmlFor={`${id}-${index}-height`}>Height</label>
+                <Input
+                  id={`${id}-${index}-height`}
+                  value={item.height || ''}
+                  disabled={isDisabled}
+                  placeholder="800"
+                  onChange={(event) =>
+                    updateItem(index, 'height', event.target.value)
+                  }
+                />
+              </Form.Field>
+
+              <Form.Field className="visualizations-widget-layout">
+                <label>Layout</label>
+                <Checkbox
+                  label="Full width"
+                  checked={!!item.full_width}
+                  disabled={isDisabled}
+                  onChange={(_, data) =>
+                    updateItem(index, 'full_width', data.checked)
+                  }
+                />
+              </Form.Field>
+            </Form.Group>
+          </div>
+        ))}
+
+        <Button
+          type="button"
+          basic
+          compact
+          primary
+          disabled={isDisabled}
+          onClick={addItem}
+        >
+          Add visualization
+        </Button>
+      </div>
+    </FormFieldWrapper>
+  );
+};
+
+VisualizationsWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  value: PropTypes.arrayOf(PropTypes.object),
+  onChange: PropTypes.func.isRequired,
+  isDisabled: PropTypes.bool,
+};
+
+VisualizationsWidget.defaultProps = {
+  value: [],
+  isDisabled: false,
+};
+
+export default VisualizationsWidget;

package/src/components/manage/Widgets/visualizations.less

@@ -0,0 +1,60 @@
+.visualizations-widget {
+  max-width: 760px;
+
+  .visualizations-widget-item {
+    padding: 1.25rem;
+    border: 1px solid #d8d8d8;
+    margin-bottom: 1rem;
+    background: #fff;
+  }
+
+  .visualizations-widget-item-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid #e6e6e6;
+    margin-bottom: 1rem;
+    gap: 1rem;
+
+    h4 {
+      margin: 0;
+      color: #1f405c;
+      font-size: 1rem;
+    }
+  }
+
+  .field {
+    margin-bottom: 1rem;
+
+    > label {
+      display: block;
+      margin-bottom: 0.35rem;
+      color: #1f405c;
+      font-weight: 700;
+    }
+  }
+
+  .ui.input,
+  textarea {
+    width: 100%;
+  }
+
+  textarea {
+    min-height: 8rem;
+    resize: vertical;
+  }
+
+  .fields {
+    align-items: flex-end;
+    margin-bottom: 0;
+  }
+
+  .visualizations-widget-height {
+    max-width: 180px;
+  }
+
+  .visualizations-widget-layout {
+    padding-bottom: 0.55rem;
+  }
+}

package/src/components/theme/Views/DatabaseItemView.jsx

@@ -32,12 +32,16 @@ import {
 
 const SHARE_EEA = ['https://cmshare.eea.eu', 'shareit.eea.europa.eu'];
 
-const MaybeFlourishVisualization = ({ content }) => {
-  const { map_graphs } = content;
+const getVisualizationEmbedCode = (visualization) =>
+  visualization?.embed_code || visualization?.map_graphs || '';
 
+const MaybeFlourishVisualization = ({ visualization }) => {
+  const embedCode = getVisualizationEmbedCode(visualization);
   // https://helpcenter.flourish.studio/hc/en-us/articles/8761537208463-How-to-embed-Flourish-charts-in-your-CMS
-  const flourishPath = getDataSrcFromEmbedCode(map_graphs);
+  const flourishPath = getDataSrcFromEmbedCode(embedCode);
   const flourishUrl = buildFlourishUrl(flourishPath);
+  const height = visualization?.height || '980';
+  const title = visualization?.title || 'Interactive or visual content';
 
   return !!flourishPath ? (
     <PrivacyProtection
@@ -47,10 +51,10 @@ const MaybeFlourishVisualization = ({ content }) => {
       }}
     >
       <iframe
-        height="980"
+        height={height}
         width="100%"
         src={flourishUrl}
-        title="Interactive or visual content"
+        title={title}
         className="flourish-embed-iframe"
         sandbox="allow-same-origin allow-forms allow-scripts allow-downloads allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"
       ></iframe>
@@ -73,10 +77,11 @@ function getFirstIframeSrc(htmlString) {
   }
 }
 
-const MaybeIframeVisualization = ({ content }) => {
-  const { map_graphs, map_graphs_height } = content;
-  const url = getFirstIframeSrc(map_graphs || '');
-  const height = map_graphs_height || 800;
+const MaybeIframeVisualization = ({ visualization }) => {
+  const embedCode = getVisualizationEmbedCode(visualization);
+  const url = getFirstIframeSrc(embedCode);
+  const height = visualization?.height || 800;
+  const title = visualization?.title || 'Interactive or visual content';
   const [isClient, setIsClient] = React.useState();
 
   React.useEffect(() => setIsClient(true), []);
@@ -94,7 +99,7 @@ const MaybeIframeVisualization = ({ content }) => {
         height={height}
         width="100%"
         src={url}
-        title="Interactive or visual content"
+        title={title}
         className="flourish-embed-iframe"
         sandbox="allow-same-origin allow-forms allow-scripts allow-downloads allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"
       ></iframe>
@@ -102,6 +107,43 @@ const MaybeIframeVisualization = ({ content }) => {
   );
 };
 
+const Visualization = ({ visualization }) => (
+  <>
+    {visualization?.title && <h2>{visualization.title}</h2>}
+    <MaybeFlourishVisualization visualization={visualization} />
+    <MaybeIframeVisualization visualization={visualization} />
+  </>
+);
+
+const Visualizations = ({ visualizations }) => (
+  <>
+    {visualizations.map((visualization, index) => (
+      <Visualization
+        key={`visualization-${index}`}
+        visualization={visualization}
+      />
+    ))}
+  </>
+);
+
+const getVisualizations = (content) => {
+  const visualizations = Array.isArray(content?.visualizations)
+    ? content.visualizations.filter((item) => item?.embed_code)
+    : [];
+
+  return content?.map_graphs
+    ? [
+        ...visualizations,
+        {
+          title: '',
+          embed_code: content.map_graphs,
+          height: content.map_graphs_height,
+          full_width: content.map_graphs_full_width,
+        },
+      ]
+    : visualizations;
+};
+
 const BottomInfo = (props) => {
   const { content } = props;
   const { organisational_websites, organisational_contact_information } =
@@ -157,9 +199,14 @@ const DatabaseItemView = (props) => {
   } = content;
   const item_title = acronym ? title + ' (' + acronym + ')' : title;
   const subtitle = CONTENT_TYPE_LABELS[type] ?? '';
-  const hasVisualization = !!content?.map_graphs?.length;
-  const isFullWidthVisualization =
-    hasVisualization && content?.map_graphs_full_width;
+  const visualizations = getVisualizations(content);
+  const columnVisualizations = visualizations.filter(
+    (visualization) => !visualization.full_width,
+  );
+  const fullWidthVisualizations = visualizations.filter(
+    (visualization) => visualization.full_width,
+  );
+  const hasFullWidthVisualizations = !!fullWidthVisualizations.length;
 
   const is_cmshare_video = SHARE_EEA.some((domain) =>
     content?.embed_url?.includes(domain),
@@ -252,14 +299,11 @@ const DatabaseItemView = (props) => {
                 </>
               )}
 
-              {hasVisualization && !isFullWidthVisualization && (
-                <>
-                  <MaybeFlourishVisualization {...props} />
-                  <MaybeIframeVisualization {...props} />
-                </>
+              {!!columnVisualizations.length && (
+                <Visualizations visualizations={columnVisualizations} />
               )}
 
-              {!isFullWidthVisualization && <BottomInfo {...props} />}
+              {!hasFullWidthVisualizations && <BottomInfo {...props} />}
             </Grid.Column>
 
             <Grid.Column
@@ -273,12 +317,11 @@ const DatabaseItemView = (props) => {
             </Grid.Column>
           </Grid.Row>
 
-          {isFullWidthVisualization && (
+          {hasFullWidthVisualizations && (
             <>
               <Grid.Row>
                 <Grid.Column mobile={12} tablet={12} computer={12}>
-                  <MaybeFlourishVisualization {...props} />
-                  <MaybeIframeVisualization {...props} />
+                  <Visualizations visualizations={fullWidthVisualizations} />
                 </Grid.Column>
               </Grid.Row>
               <Grid.Row>

package/src/components/theme/Views/DatabaseItemView.test.jsx

@@ -17,6 +17,58 @@ config.blocks = {
 
 const mockStore = configureStore();
 
+const baseContent = {
+  title: 'My DatabaseItemView',
+  long_description: {
+    'content-type': null,
+    data: '<p>Nam commodo suscipit quam. Praesent egestas neque eu enim. Quisque rutrum.</p>',
+    encoding: 'utf-8',
+  },
+  publication_date: '2022-06-24',
+  geochars:
+    '{\r\n "geoElements":{"element":"GLOBAL",\r\n "macrotrans":null,"biotrans":null,"countries":[],\r\n "subnational":[],"city":""}}',
+  keywords: ['keyword 1', 'keyword 2'],
+  websites: ['https://example.org/'],
+  contributions: [
+    {
+      title: 'Contributor 1',
+      url: '/contributor-1',
+    },
+    {
+      title: 'Contributor 2',
+      url: '/contributor-2',
+    },
+  ],
+};
+
+const visualizationEmbedCode =
+  '<div class="flourish-embed" data-src="visualisation/12345"></div>';
+
+const renderDatabaseItemView = (content = baseContent) => {
+  const store = mockStore({
+    userSession: { token: '1234' },
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  return renderer.create(
+    <Provider store={store}>
+      <MemoryRouter>
+        <DatabaseItemView content={content} />
+      </MemoryRouter>
+    </Provider>,
+  );
+};
+
+const findColumnByClassName = (component, className) =>
+  component.root.findAll(
+    (node) =>
+      typeof node.props.className === 'string' &&
+      node.props.className.includes(className),
+  )[0];
+
 jest.mock('semantic-ui-react', () => ({
   ...jest.requireActual('semantic-ui-react'),
 }));
@@ -29,46 +81,54 @@ jest.mock('@eeacms/volto-embed', () => {
 
 describe('DatabaseItemView', () => {
   it('should render the component', () => {
-    const content = {
-      title: 'My DatabaseItemView',
-      long_description: {
-        'content-type': null,
-        data: '<p>Nam commodo suscipit quam. Praesent egestas neque eu enim. Quisque rutrum.</p>',
-        encoding: 'utf-8',
-      },
-      publication_date: '2022-06-24',
-      geochars:
-        '{\r\n "geoElements":{"element":"GLOBAL",\r\n "macrotrans":null,"biotrans":null,"countries":[],\r\n "subnational":[],"city":""}}',
-      keywords: ['keyword 1', 'keyword 2'],
-      websites: ['https://example.org/'],
-      contributions: [
-        {
-          title: 'Contributor 1',
-          url: '/contributor-1',
-        },
-        {
-          title: 'Contributor 2',
-          url: '/contributor-2',
-        },
-      ],
-    };
-
-    const store = mockStore({
-      userSession: { token: '1234' },
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
+    const component = renderDatabaseItemView();
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders the visualizations field in the left column by default', () => {
+    const component = renderDatabaseItemView({
+      ...baseContent,
+      map_graphs: visualizationEmbedCode,
     });
+    const colLeft = findColumnByClassName(component, 'col-left');
+    const fullWidthColumns = component.root.findAll(
+      (node) => node.props.computer === 12,
+    );
 
-    const component = renderer.create(
-      <Provider store={store}>
-        <MemoryRouter>
-          <DatabaseItemView content={content} />
-        </MemoryRouter>
-      </Provider>,
+    expect(colLeft.findAllByType('iframe')).toHaveLength(1);
+    expect(component.root.findByType('iframe').props.src).toBe(
+      'https://flo.uri.sh/visualisation/12345/embed',
     );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
+    expect(fullWidthColumns).toHaveLength(0);
+  });
+
+  it('renders the visualizations field full width when enabled', () => {
+    const component = renderDatabaseItemView({
+      ...baseContent,
+      map_graphs: visualizationEmbedCode,
+      map_graphs_full_width: true,
+    });
+    const colLeft = findColumnByClassName(component, 'col-left');
+    const fullWidthColumn = component.root.findAll(
+      (node) => node.props.computer === 12,
+    )[0];
+
+    expect(colLeft.findAllByType('iframe')).toHaveLength(0);
+    expect(fullWidthColumn.findAllByType('iframe')).toHaveLength(1);
+  });
+
+  it('does not render a visualization when the visualizations field is empty', () => {
+    const component = renderDatabaseItemView({
+      ...baseContent,
+      map_graphs: '',
+      map_graphs_full_width: true,
+    });
+
+    expect(component.root.findAllByType('iframe')).toHaveLength(0);
+    const fullWidthColumns = component.root.findAll(
+      (node) => node.props.computer === 12,
+    );
+    expect(fullWidthColumns).toHaveLength(0);
   });
 });

package/src/index.js

@@ -48,6 +48,7 @@ import {
 
 import GeocharsWidget from './components/manage/Widgets/GeocharsWidget';
 import PromotionalImageWidget from './components/manage/Widgets/PromotionalImageWidget';
+import VisualizationsWidget from './components/manage/Widgets/VisualizationsWidget';
 import HealthHorizontalCardItem from './components/Search/Result/HealthHorizontalCardItem';
 import ClusterHorizontalCardItem from './components/Search/Result/ClusterHorizontalCardItem';
 import NavigatorCatalogueCardItem from './components/Search/NavigatorCatalogue/NavigatorCatalogueCardItem';
@@ -443,6 +444,7 @@ const applyConfig = (config) => {
   config.widgets.id.geochars = GeocharsWidget;
   config.widgets.id.geolocation = GeolocationWidget;
   config.widgets.id.promotional_image = PromotionalImageWidget;
+  config.widgets.id.visualizations = VisualizationsWidget;
   config.widgets.id.image = ImageWidget;
 
   if (config.widgets.views?.widget) {