@eeacms/volto-n2k 0.1.3 → 0.1.4

package/CHANGELOG.md

@@ -4,9 +4,18 @@ 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).
 
+#### [0.1.4](https://github.com/eea/volto-n2k/compare/0.1.3...0.1.4)
+
+- Prettier [`43c0a09`](https://github.com/eea/volto-n2k/commit/43c0a090f481f81e7cadcfcda59b5dcc02dd8f1a)
+- Prettier [`553c35b`](https://github.com/eea/volto-n2k/commit/553c35b2c9b34adb8fb630f2ec41f2ffd2cf22b0)
+- Prettier fix [`47619cb`](https://github.com/eea/volto-n2k/commit/47619cb286ff939df397c483c18cc532c58b7547)
+- Lazy load d3 [`874e88c`](https://github.com/eea/volto-n2k/commit/874e88c48f3af2f1c01f5818971248c2f19b6789)
+
 #### [0.1.3](https://github.com/eea/volto-n2k/compare/0.1.2...0.1.3)
 
-- Make this compatible with latest changes [`d11991f`](https://github.com/eea/volto-n2k/commit/d11991f3798edebc132929e15bf120ec3d545ab9)
+> 23 June 2022
+
+- Make this compatible with latest changes [`#4`](https://github.com/eea/volto-n2k/pull/4)
 
 #### [0.1.2](https://github.com/eea/volto-n2k/compare/0.1.1...0.1.2)
 

package/Jenkinsfile

@@ -6,6 +6,7 @@ pipeline {
         NAMESPACE = "@eeacms"
         SONARQUBE_TAGS = "volto.eea.europa.eu,biodiversity.europa.eu"
         DEPENDENCIES = "volto-slate @eeacms/volto-datablocks"
+        VOLTO = "alpha"
     }
 
   stages {
@@ -124,8 +125,8 @@ pipeline {
             node(label: 'docker') {
               script {
                 try {
-                  sh '''docker pull plone; docker run -d --rm --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="profile-plone.restapi:blocks" plone fg'''
-                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" plone/volto-addon-ci cypress'''
+                  sh '''docker pull eeacms/plone-backend; docker run -d --rm --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="eea.kitkat:testing" eeacms/plone-backend'''
+                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" -e NODE_ENV=development -e VOLTO="$VOLTO" plone/volto-addon-ci cypress'''
                 } finally {
                   try {
                     sh '''rm -rf cypress-reports cypress-results cypress-coverage'''

package/cypress/support/index.js

@@ -27,7 +27,7 @@ coverage-end */
 export const setupBeforeEach = () => {
   cy.autologin();
   cy.createContent({
-    contentType: 'Folder',
+    contentType: 'Document',
     contentId: 'cypress',
     contentTitle: 'Cypress',
   });

package/cypress.json

@@ -1,12 +1,17 @@
 {
   "baseUrl": "http://localhost:3000",
   "viewportWidth": 1280,
-  "defaultCommandTimeout": 15000,
+  "defaultCommandTimeout": 8888,
   "reporter": "junit",
   "video": true,
   "reporterOptions": {
     "mochaFile": "cypress/reports/cypress-[hash].xml",
     "jenkinsMode": true,
     "toConsole": true
+  },
+  "chromeWebSecurity": false,
+  "retries": {
+    "runMode": 8,
+    "openMode": 0
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -29,8 +29,8 @@
     "@eeacms/volto-openlayers-map": "*",
     "@eeacms/volto-tabs-block": "*",
     "volto-slate": "*",
-    "d3": "^7.1.1",
-    "d3-shape": "^3.0.1",
+    "d3": "^7.6.1",
+    "d3-shape": "^3.1.0",
     "react-lazy-load-image-component": "1.5.1",
     "react-stickynode": "^4.0.0",
     "react-use-localstorage": "^3.5.3",

package/src/components/manage/Blocks/BubbleChart/BubbleChart.jsx

@@ -1,18 +1,18 @@
 import React from 'react';
 import _uniqueId from 'lodash/uniqueId';
-import { pack, hierarchy } from 'd3';
-import * as d3 from 'd3';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { adjustBrightness, getContrastColor } from '@eeacms/volto-n2k/helpers';
 import { FormattedValue } from '@eeacms/volto-datablocks/Utils';
 import ChartContext from './ChartContext';
 
 function BubbleChart(props) {
-  const { chartData, interpolation } = props;
+  const { d3, chartData, interpolation } = props;
   const { element, height, width, popup, setPopup } = React.useContext(
     ChartContext,
   );
-  const root = pack().size([width, height]).padding(10)(
-    hierarchy({ children: chartData })
+  const root = d3.pack().size([width, height]).padding(10)(
+    d3
+      .hierarchy({ children: chartData })
       .sum((d) => d.value)
       .sort((a, b) => b.value - a.value),
   );
@@ -98,4 +98,4 @@ function BubbleChart(props) {
     </React.Fragment>
   );
 }
-export default BubbleChart;
+export default injectLazyLibs(['d3'])(BubbleChart);

package/src/components/manage/Blocks/ExplodedPiesChart/Pie.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import * as d3 from 'd3';
 import { Popup } from 'semantic-ui-react';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { adjustBrightness } from '@eeacms/volto-n2k/helpers';
 
 const Arc = ({ data, index, createArc, format, size }) => {
@@ -73,6 +73,8 @@ const Arc = ({ data, index, createArc, format, size }) => {
 };
 
 const Pie = (props) => {
+  const { d3 } = props;
+
   const createPie = d3
     .pie()
     .value((d) => d.value)
@@ -122,4 +124,4 @@ const Pie = (props) => {
   );
 };
 
-export default Pie;
+export default injectLazyLibs(['d3'])(Pie);

package/src/components/manage/Blocks/ExplodedPiesChart/View.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { Grid } from 'semantic-ui-react';
-import * as d3 from 'd3';
-import './style.less';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import Pie from './Pie';
 
+import './style.less';
+
 const View = (props) => {
-  const { placeholder = 'No results' } = props;
+  const { d3, placeholder = 'No results' } = props;
   const { x = null, y = null, x_colors = [], precision = 2 } = props.data;
   const data = props.provider_data || {};
   const x_values = data?.[x] || [];
@@ -77,4 +78,4 @@ const View = (props) => {
   );
 };
 
-export default View;
+export default injectLazyLibs(['d3'])(View);

package/src/components/manage/Blocks/StackedBarChart/Chart.jsx

@@ -1,13 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
-import {
-  axisBottom,
-  axisLeft,
-  format,
-  select,
-  scaleBand,
-  scaleLinear,
-} from 'd3';
 import cx from 'classnames';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import ChartContext from './ChartContext';
 
 /**
@@ -19,6 +12,8 @@ import ChartContext from './ChartContext';
  */
 
 function Chart(props) {
+  const { d3 } = props;
+  const { axisBottom, axisLeft, format, select, scaleBand, scaleLinear } = d3;
   const [scales, setScales] = useState();
   const [popup, setPopup] = useState();
   const chartWrapper = useRef();
@@ -124,4 +119,4 @@ function Chart(props) {
   );
 }
 
-export default Chart;
+export default injectLazyLibs(['d3'])(Chart);

package/src/components/manage/Blocks/StackedBarChart/StackedBars.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { scaleOrdinal, schemeSpectral, stack } from 'd3';
 import cx from 'classnames';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { adjustBrightness } from '@eeacms/volto-n2k/helpers';
 import ChartContext from './ChartContext';
 
@@ -11,6 +11,8 @@ const getSerieData = (serie) => {
 };
 
 function StackedBars(props) {
+  const { d3 } = props;
+  const { scaleOrdinal, schemeSpectral, stack } = d3;
   const {
     element,
     height,
@@ -113,4 +115,4 @@ function StackedBars(props) {
     </React.Fragment>
   );
 }
-export default StackedBars;
+export default injectLazyLibs(['d3'])(StackedBars);

package/src/index.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-extend-native */
 import React from 'react';
+import loadable from '@loadable/component';
 
 import localStorage from './store';
 
@@ -7,12 +8,12 @@ import installAppExtras from './components/theme/AppExtras';
 
 import { LinkElement } from './components/manage/Blocks/SlateLink/render';
 import installBodyClass from './components/manage/Blocks/BodyClass';
-// import installBubbleChart from './components/manage/Blocks/BubbleChart';
+import installBubbleChart from './components/manage/Blocks/BubbleChart';
 import installCarouselHorizontal from './components/manage/Blocks/CarouselHorizontal';
 import installCddaShape from './components/manage/Blocks/CddaShape';
 import installConnectedList from './components/manage/Blocks/List';
 import installContactBlock from './components/manage/Blocks/ContactBlock';
-// import installExplodedPiesChart from './components/manage/Blocks/ExplodedPiesChart';
+import installExplodedPiesChart from './components/manage/Blocks/ExplodedPiesChart';
 import installExploreHabitats from './components/manage/Blocks/ExploreHabitats';
 import installExploreSites from './components/manage/Blocks/ExploreSites';
 import installExploreSpecies from './components/manage/Blocks/ExploreSpecies';
@@ -35,7 +36,7 @@ import installSpeciesBanner from './components/manage/Blocks/SpeciesBanner';
 import installSpeciesClassification from './components/manage/Blocks/SpeciesClassification';
 import installSpeciesDistribution from './components/manage/Blocks/SpeciesDistribution';
 import installSpeciesProtectedSites from './components/manage/Blocks/SpeciesProtectedSites';
-// import installStackedBarChart from './components/manage/Blocks/StackedBarChart';
+import installStackedBarChart from './components/manage/Blocks/StackedBarChart';
 import installTilesImages from './components/manage/Blocks/TilesImages';
 
 import { LINK } from 'volto-slate/constants';
@@ -123,16 +124,21 @@ const applyConfig = (config) => {
 
   config.settings.slate.elements[LINK] = LinkElement;
 
+  config.settings.loadables = {
+    ...config.settings.loadables,
+    d3: loadable.lib(() => import('d3')),
+  };
+
   return [
     installAppExtras,
 
     installBodyClass,
-    // installBubbleChart,
+    installBubbleChart,
     installCarouselHorizontal,
     installCddaShape,
     installConnectedList,
     installContactBlock,
-    // installExplodedPiesChart,
+    installExplodedPiesChart,
     installExploreHabitats,
     installExploreSites,
     installExploreSpecies,
@@ -155,7 +161,7 @@ const applyConfig = (config) => {
     installSpeciesClassification,
     installSpeciesDistribution,
     installSpeciesProtectedSites,
-    // installStackedBarChart,
+    installStackedBarChart,
     installTilesImages,
   ].reduce((acc, apply) => apply(acc), config);
 };

package/src/less/styles.less

@@ -127,7 +127,7 @@
       text-align: left;
       transform: translate(-100%, 0);
 
-      @media only screen and (max-width: @largestMobileScreen + 53px) {
+      @media only screen and (max-width: calc(@largestMobileScreen + 53px)) {
         display: none;
       }
     }