Merge pull request #39 from eea/develop

Improved visibility sensor + small fixes

CHANGELOG.md

@@ -4,9 +4,17 @@ 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).
 
+#### [3.0.6](https://github.com/eea/volto-plotlycharts/compare/3.0.5...3.0.6)
+
+- Add default height to Treemap [`3031ae9`](https://github.com/eea/volto-plotlycharts/commit/3031ae9658a32b8febf233e351946ce4ef8f165b)
+- Improved visibility sensor [`fcc69b4`](https://github.com/eea/volto-plotlycharts/commit/fcc69b4dbfb781dc451a14b94009e63398f9914c)
+- Update [`0a6c7ee`](https://github.com/eea/volto-plotlycharts/commit/0a6c7eec72403138fc9f06938509a051941e1758)
+
 #### [3.0.5](https://github.com/eea/volto-plotlycharts/compare/3.0.4...3.0.5)
 
-- Properly set the margin and hoverformat [`400f974`](https://github.com/eea/volto-plotlycharts/commit/400f9744b40d80010969714f401c4fb939b591e3)
+> 23 June 2022
+
+- Properly set the margin and hoverformat [`#38`](https://github.com/eea/volto-plotlycharts/pull/38)
 
 #### [3.0.4](https://github.com/eea/volto-plotlycharts/compare/3.0.3...3.0.4)
 

Jenkinsfile

@@ -6,6 +6,7 @@ pipeline {
         NAMESPACE = "@eeacms"
         SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,forest.eea.europa.eu,biodiversity.europa.eu,water.europa.eu-freshwater"
         DEPENDENCIES = "@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'''

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.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-plotlycharts",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "description": "Plotly Charts and Editor integration for Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/Blocks/PlotlyChart/schema.js

@@ -47,6 +47,11 @@ export default {
   ],
 
   properties: {
+    use_live_data: {
+      type: 'boolean',
+      title: 'Use live data',
+      defaultValue: true,
+    },
     hover_format_xy: {
       type: 'string',
       title: 'Hover format',

src/Blocks/Treemap/Edit.jsx

@@ -25,7 +25,7 @@ class Edit extends Component {
   render() {
     return (
       <>
-        <TreemapView data={this.props.data} />
+        <TreemapView {...this.props} />
 
         <SidebarPortal selected={this.props.selected}>
           <InlineForm

src/Blocks/Treemap/Treemap.jsx

@@ -7,7 +7,7 @@ import { compose } from 'redux';
 import loadable from '@loadable/component';
 import config from '@plone/volto/registry';
 import { connectToProviderData } from '@eeacms/volto-datablocks/hocs';
-import { Placeholder } from '@eeacms/volto-datablocks/components';
+import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
 
 const LoadablePlotly = loadable(() =>
   import(
@@ -53,32 +53,26 @@ function Treemap(props) {
 
   return (
     <div className="treemap-chart">
-      <Placeholder
-        className="connected-chart"
-        partialVisibility={true}
-        offset={{ top: -100, bottom: -100 }}
-        delayedCall={true}
-      >
-        {() => (
-          <div className="connected-chart-wrapper">
-            <LoadablePlotly
-              data={traces}
-              layout={layout}
-              frames={[]}
-              config={{
-                displayModeBar: false,
-                editable: false,
-                responsive: true,
-                useResizeHandler: true,
-              }}
-              style={{
-                maxWidth: '100%',
-                margin: 'auto',
-              }}
-            />
-          </div>
-        )}
-      </Placeholder>
+      <VisibilitySensor>
+        <div className="connected-chart-wrapper">
+          <LoadablePlotly
+            data={traces}
+            layout={layout}
+            frames={[]}
+            config={{
+              displayModeBar: false,
+              editable: false,
+              responsive: true,
+              useResizeHandler: true,
+            }}
+            style={{
+              width: '100%',
+              height: '450px',
+              margin: 'auto',
+            }}
+          />
+        </div>
+      </VisibilitySensor>
     </div>
   );
 }

src/Blocks/Treemap/View.jsx

@@ -4,7 +4,8 @@ import { withBlockData } from '@eeacms/volto-datablocks/hocs';
 
 const TreemapView = (props) => {
   const { data = {} } = props;
-  return <Treemap data={data} />;
+
+  return <Treemap data={data} {...props} />;
 };
 
-export default React.memo(withBlockData(TreemapView));
+export default withBlockData(TreemapView);

src/ConnectedChart/ConnectedChart.jsx

@@ -77,7 +77,7 @@ function ConnectedChart(props) {
 
   let data =
     provider_data && use_live_data
-      ? updateChartDataFromProvider(chartData.data, provider_data)
+      ? updateChartDataFromProvider(chartData.data || [], provider_data)
       : chartData.data || [];
 
   data = data.map((trace) => ({

src/ConnectedChart/ConnectedChartWrapper.jsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import ConnectedChart from './ConnectedChart';
 
-import { Placeholder } from '@eeacms/volto-datablocks/components';
+import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
 
 /*
  * @param { object } data The chart data, layout,  extra config, etc.
@@ -16,17 +16,9 @@ import { Placeholder } from '@eeacms/volto-datablocks/components';
 function ConnectedChartWrapper(props) {
   return (
     <>
-      <Placeholder
-        getDOMElement={(val) => {
-          return val?.el;
-        }}
-        className="connected-chart"
-        partialVisibility={true}
-        offset={{ top: -100, bottom: -100 }}
-        delayedCall={true}
-      >
-        {() => <ConnectedChart {...props} />}
-      </Placeholder>
+      <VisibilitySensor className="connected-chart">
+        <ConnectedChart {...props} />
+      </VisibilitySensor>
     </>
   );
 }