Update

eea · Feb 3, 2022 · ee98eaa · ee98eaa
1 parent 3590aa4
commit ee98eaa
Show file tree

Hide file tree

Showing 7 changed files with 204 additions and 91 deletions.
diff --git a/src/Blocks/EmbedVisualization/Edit.jsx b/src/Blocks/EmbedVisualization/Edit.jsx
@@ -1,27 +1,84 @@
 import React from 'react';
+import { v4 as uuid } from 'uuid';
+import { Segment, Form } from 'semantic-ui-react';
 import { SidebarPortal } from '@plone/volto/components';
+import Editor from '@plone/volto/components/manage/Blocks/Text/Edit';
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import ConnectedChart from '@eeacms/volto-plotlycharts/ConnectedChart';
 import schema from './schema';
-import View from './View';
 
-const Edit = (props) => (
-  <>
-    <View {...props} mode="edit" />
+import '@eeacms/volto-plotlycharts/less/visualization.less';
 
-    <SidebarPortal selected={props.selected}>
-      <InlineForm
-        schema={schema}
-        title={schema.title}
-        onChangeField={(id, value) => {
-          props.onChangeBlock(props.block, {
-            ...props.data,
-            [id]: value,
-          });
-        }}
-        formData={props.data}
-      />
-    </SidebarPortal>
-  </>
-);
+const nope = () => {};
+
+const toolbarId = uuid();
+
+const Edit = (props) => {
+  const { data, block, selected } = props;
+  return (
+    <>
+      <Form>
+        <Segment.Group horizontal>
+          <Segment style={{ maxWidth: '40%' }}>
+            <div style={{ minWidth: '73px' }}>
+              <Editor
+                index={props.index}
+                detached={true}
+                selected={selected}
+                block={props.block}
+                onAddBlock={nope}
+                onChangeBlock={(id, { text }) => {
+                  props.onChangeBlock(block, {
+                    ...props.data,
+                    text,
+                  });
+                }}
+                onDeleteBlock={nope}
+                onFocusPreviousBlock={nope}
+                onFocusNextBlock={nope}
+                onSelectBlock={nope}
+                onMutateBlock={nope}
+                data={props.data}
+                toolbarId={toolbarId}
+              />
+            </div>
+          </Segment>
+          <Segment secondary={!selected}>
+            <ConnectedChart
+              data={{
+                chartSources: data.chartSources,
+                data_query: data.data_query,
+                download_button: data.download_button,
+                has_data_query_by_context: data.has_data_query_by_context,
+                has_data_query_by_provider: data.has_data_query_by_provider,
+                use_live_data: data.use_live_data,
+                vis_url: data.vis_url,
+                with_sources: data.with_sources,
+              }}
+              hoverFormatXY={data.hover_format_xy}
+              withSources={true}
+              width={data.width}
+              height={data.height}
+            />
+          </Segment>
+        </Segment.Group>
+      </Form>
+
+      <SidebarPortal selected={props.selected}>
+        <InlineForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          formData={props.data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
 
 export default Edit;
diff --git a/src/Blocks/EmbedVisualization/View.jsx b/src/Blocks/EmbedVisualization/View.jsx
@@ -1,29 +1,72 @@
 import React from 'react';
+import { Grid } from 'semantic-ui-react';
+import ViewText from '@plone/volto/components/manage/Blocks/Text/View';
 import ConnectedChart from '@eeacms/volto-plotlycharts/ConnectedChart';
 
 import '@eeacms/volto-plotlycharts/less/visualization.less';
 
 const View = (props) => {
   const { data = {} } = props;
 
+  const hasText =
+    (data.text?.blocks?.length > 1 && data.text?.blocks) ||
+    (data.text?.blocks?.length === 1 && data.text?.blocks?.[0].text);
+
+  const grid = {
+    text_column: {
+      mobile: 12,
+      tablet: 12,
+      computer: 4,
+    },
+    chart_column: {
+      mobile: 12,
+      tablet: 12,
+      computer: hasText ? 8 : 12,
+    },
+  };
+
   return (
     <div className="embed-visualization">
-      <ConnectedChart
-        data={{
-          chartSources: data.chartSources,
-          data_query: data.data_query,
-          download_button: data.download_button,
-          has_data_query_by_context: data.has_data_query_by_context,
-          has_data_query_by_provider: data.has_data_query_by_provider,
-          use_live_data: data.use_live_data,
-          vis_url: data.vis_url,
-          with_sources: data.with_sources,
-        }}
-        hoverFormatXY={data.hover_format_xy}
-        withSources={true}
-        width={data.width}
-        height={data.height}
-      />
+      {data.block_title ? <h5>{data.block_title}</h5> : ''}
+      <Grid container>
+        <Grid.Row>
+          {hasText ? (
+            <Grid.Column
+              mobile={grid.text_column.mobile}
+              tablet={grid.text_column.tablet}
+              computer={grid.text_column.computer}
+            >
+              <div className="text-content">
+                <ViewText data={data} {...props} />
+              </div>
+            </Grid.Column>
+          ) : (
+            ''
+          )}
+          <Grid.Column
+            mobile={grid.chart_column.mobile}
+            tablet={grid.chart_column.tablet}
+            computer={grid.chart_column.computer}
+          >
+            <ConnectedChart
+              data={{
+                chartSources: data.chartSources,
+                data_query: data.data_query,
+                download_button: data.download_button,
+                has_data_query_by_context: data.has_data_query_by_context,
+                has_data_query_by_provider: data.has_data_query_by_provider,
+                use_live_data: data.use_live_data,
+                vis_url: data.vis_url,
+                with_sources: data.with_sources,
+              }}
+              hoverFormatXY={data.hover_format_xy}
+              withSources={true}
+              width={data.width}
+              height={data.height}
+            />
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
     </div>
   );
 };

diff --git a/src/Blocks/PlotlyChart/Edit.jsx b/src/Blocks/PlotlyChart/Edit.jsx
@@ -5,11 +5,10 @@ import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 import { PickObjectWidget } from '@eeacms/volto-datablocks/components';
 import ChartEditor from '@eeacms/volto-plotlycharts/ChartEditor';
 
-// import ConnectedChart from '@eeacms/volto-plotlycharts/ConnectedChart';
-
 import schema from './schema';
 import View from './View';
 
+import '@eeacms/volto-plotlycharts/less/plotly.less';
 class PlotlyEditorModal extends Component {
   constructor(props) {
     super(props);

diff --git a/src/Blocks/PlotlyChart/View.jsx b/src/Blocks/PlotlyChart/View.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ConnectedChart from '@eeacms/volto-plotlycharts/ConnectedChart';
 
-import '@eeacms/volto-plotlycharts/less/visualization.less';
+import '@eeacms/volto-plotlycharts/less/plotly.less';
 
 const View = (props) => {
   const { data = {} } = props;

diff --git a/src/ConnectedChart/ConnectedChart.jsx b/src/ConnectedChart/ConnectedChart.jsx
@@ -20,8 +20,10 @@ const LoadablePlotly = loadable(() => import('react-plotly.js'));
 function ConnectedChart(props) {
   const {
     hoverFormatXY,
+    loadingProviderData,
     loadingVisualizationData,
     provider_data,
+    provider_metadata,
     visualization,
     visualization_data,
     width,
@@ -107,11 +109,9 @@ function ConnectedChart(props) {
         <Sources
           data={{ data_query: props.data.data_query }}
           sources={props.data.chartSources}
-          provider_url={
-            props.visualization?.provider_url ||
-            props.visualization_data?.provider_url ||
-            props.data.provider_url
-          }
+          title={props.data?.vis_url}
+          provider_data={provider_data}
+          provider_metadata={provider_metadata}
           download_button={props.data.download_button}
         />
       ) : (
@@ -122,7 +122,10 @@ function ConnectedChart(props) {
 }
 
 export default compose(
-  connectBlockToVisualization,
+  connectBlockToVisualization((props) => ({
+    vis_url: props.data?.vis_url || null,
+    use_live_data: props.data?.use_live_data ?? true,
+  })),
   connectToProviderData((props) => {
     const use_live_data = props.data?.use_live_data ?? true;
     if (!use_live_data) return {};

diff --git a/src/hocs/connectBlockToVisualization.js b/src/hocs/connectBlockToVisualization.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { withRouter } from 'react-router';
 import { connect, useDispatch } from 'react-redux';
 import {
@@ -11,52 +11,58 @@ import {
  *
  * @param {} WrappedComponent
  */
-export function connectBlockToVisualization(WrappedComponent) {
-  return connect((state) => ({
-    data_visualizations: state.data_visualizations,
-  }))(
-    withRouter((props) => {
-      const dispatch = useDispatch();
-
-      const { vis_url = null, use_live_data = true } = props.data || {};
-
-      const isPending = vis_url
-        ? props.data_visualizations?.pendingVisualizations?.[vis_url]
-        : false;
-
-      const isFailed = vis_url
-        ? props.data_visualizations?.failedVisualizations?.[vis_url]
-        : false;
-
-      const visualization_data = vis_url
-        ? props.data_visualizations?.data?.[vis_url]
-        : null;
-
-      const readyToDispatch =
-        vis_url && !visualization_data && !isPending && !isFailed;
-
-      useEffect(() => {
-        if (visualization_data) {
-          dispatch(removeVisualization(vis_url));
-        }
-        /* eslint-disable-next-line */
-      }, [use_live_data]);
-
-      useEffect(() => {
-        if (readyToDispatch) {
-          dispatch(getVisualization(vis_url, use_live_data));
-        }
-      });
-
-      return (
-        <WrappedComponent
-          {...props}
-          visualization_data={visualization_data}
-          loadingVisualizationData={isPending}
-        />
-      );
-    }),
-  );
+function connectBlockToVisualization(getConfig = () => ({})) {
+  return (WrappedComponent) => {
+    return connect((state) => ({
+      data_visualizations: state.data_visualizations,
+    }))(
+      withRouter((props) => {
+        const dispatch = useDispatch();
+        const config = useMemo(() => getConfig(props), [props]);
+
+        const vis_url = useMemo(() => config.vis_url, [config.vis_url]);
+        const use_live_data = useMemo(() => config.use_live_data ?? true, [
+          config.use_live_data,
+        ]);
+
+        const isPending = vis_url
+          ? props.data_visualizations?.pendingVisualizations?.[vis_url]
+          : false;
+
+        const isFailed = vis_url
+          ? props.data_visualizations?.failedVisualizations?.[vis_url]
+          : false;
+
+        const visualization_data = vis_url
+          ? props.data_visualizations?.data?.[vis_url]
+          : null;
+
+        const readyToDispatch =
+          vis_url && !visualization_data && !isPending && !isFailed;
+
+        useEffect(() => {
+          if (visualization_data) {
+            dispatch(removeVisualization(vis_url));
+          }
+          /* eslint-disable-next-line */
+        }, [use_live_data]);
+
+        useEffect(() => {
+          if (readyToDispatch) {
+            dispatch(getVisualization(vis_url, use_live_data));
+          }
+        });
+
+        return (
+          <WrappedComponent
+            {...props}
+            visualization_data={visualization_data}
+            loadingVisualizationData={isPending}
+          />
+        );
+      }),
+    );
+  };
 }
 
 export default connectBlockToVisualization;
diff --git a/src/less/visualization.less b/src/less/visualization.less
@@ -0,0 +1,5 @@
+.embed-visualization {
+  .text-content {
+    margin-top: 1rem;
+  }
+}