New EEA block

src/Blocks/EmbedEEAVisualization/Edit.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { SidebarPortal } from '@plone/volto/components';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import ConnectedChart from '@eeacms/volto-plotlycharts/ConnectedChart';
+import schema from './schema';
+
+import '@eeacms/volto-plotlycharts/less/visualization.less';
+
+const Edit = (props) => {
+  const { data } = props;
+  return (
+    <>
+      <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}
+      />
+
+      <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;

src/Blocks/EmbedEEAVisualization/README.md

@@ -0,0 +1,2 @@
+This component allows "embedding" an existing visualization: it reads its chart
+data and just takes saves it locally as tile data.

src/Blocks/EmbedEEAVisualization/View.jsx

@@ -0,0 +1,73 @@
+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">
+      <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>
+  );
+};
+
+export default View;

src/Blocks/EmbedEEAVisualization/index.js

@@ -0,0 +1,31 @@
+import View from './View';
+import Edit from './Edit';
+
+import presentationSVG from '@plone/volto/icons/presentation.svg';
+
+export default (config) => {
+  const visualizationBlockConfig = {
+    id: 'embed_eea_visualization',
+    title: 'Embed EEA visualization',
+    icon: presentationSVG,
+    group: 'plotly',
+    view: View,
+    edit: Edit,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+
+  config.blocks.blocksConfig.embed_eea_visualization = visualizationBlockConfig;
+  // This is required for compatibility with previous version
+  // TODO: script for migration
+  // config.blocks.blocksConfig.embed_chart = {
+  //   ...visualizationBlockConfig,
+  //   id: 'embed_chart',
+  // };
+  return config;
+};

src/Blocks/EmbedEEAVisualization/schema.js

@@ -0,0 +1,116 @@
+import React from 'react';
+
+const sourceSchema = {
+  title: 'Source',
+
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['chart_source', 'chart_source_link'],
+    },
+  ],
+
+  properties: {
+    chart_source: {
+      title: 'Source',
+      widget: 'textarea',
+    },
+    chart_source_link: {
+      title: 'Link',
+      type: 'string',
+    },
+  },
+
+  required: ['source'],
+};
+
+export default {
+  title: 'Embed EEA visualization',
+
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [
+        'vis_url',
+        'height',
+        'hover_format_xy',
+        'show_sources',
+        'download_button',
+      ],
+    },
+
+    {
+      id: 'data_query',
+      title: 'Dynamic Chart',
+      fields: [
+        // 'has_data_query_by_context',
+        // 'has_data_query_by_provider',
+        // 'data_query',
+      ],
+    },
+  ],
+
+  properties: {
+    vis_url: {
+      widget: 'object_by_path',
+      title: 'Visualization',
+    },
+    // use_live_data: {
+    //   type: 'boolean',
+    //   title: 'Use live data',
+    //   defaultValue: true,
+    // },
+    hover_format_xy: {
+      type: 'string',
+      title: 'Hover format',
+      placeholder: '',
+      description: (
+        <>
+          See{' '}
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#d3_format"
+          >
+            D3 format documentation
+          </a>
+        </>
+      ),
+    },
+    height: {
+      title: 'Height',
+      type: 'number',
+      default: 450,
+    },
+    download_button: {
+      title: 'Toggle download',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    show_sources: {
+      title: 'Toggle sources',
+      type: 'boolean',
+      defaultValue: true,
+    },
+
+    //do this as in volto-eea-map
+    // has_data_query_by_context: {
+    //   title: 'Has data_query by context',
+    //   type: 'boolean',
+    //   defaultValue: true,
+    // },
+    // has_data_query_by_provider: {
+    //   title: 'Has data_query by provider',
+    //   type: 'boolean',
+    //   defaultValue: true,
+    // },
+    // data_query: {
+    //   title: 'Query',
+    //   widget: 'data_query',
+    // },
+  },
+
+  required: ['vis_url'],
+};

src/index.js

@@ -1,6 +1,10 @@
 import { VisualizationView } from './Views';
 import { VisualizationWidget } from './Widgets';
 import installEmbedVisualization from './Blocks/EmbedVisualization';
+
+//TODO: this will replace the current embed viz
+import installEmbedEEAVisualization from './Blocks/EmbedEEAVisualization';
+
 import installPlotlyChart from './Blocks/PlotlyChart';
 import installTreemap from './Blocks/Treemap';
 import { data_visualizations } from './middlewares';
@@ -30,10 +34,13 @@ const applyConfig = (config) => {
     ...addonReducers,
   };
 
-  return [installEmbedVisualization, installPlotlyChart, installTreemap].reduce(
-    (acc, apply) => apply(acc),
-    config,
-  );
+  return [
+    installEmbedVisualization,
+    //first one here ^^ will get old and be removed in time TODO:
+    installEmbedEEAVisualization,
+    installPlotlyChart,
+    installTreemap,
+  ].reduce((acc, apply) => apply(acc), config);
 };
 
 export default applyConfig;