@eeacms/volto-n2k 0.1.1

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

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import { Message, Container } from 'semantic-ui-react';
+import Map from '@eeacms/volto-openlayers-map/Map';
+import { Interactions } from '@eeacms/volto-openlayers-map/Interactions';
+import { Controls } from '@eeacms/volto-openlayers-map/Controls';
+import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
+import { openlayers } from '@eeacms/volto-openlayers-map';
+import { getCddaShapeURL } from './index';
+import './style.less';
+
+const View = (props) => {
+  const [options, setOptions] = React.useState({});
+  const [vectorSource, setVectorSource] = useState(null);
+  const { extent, format, proj, style, source } = openlayers;
+  const provider_data = props.provider_data || {};
+  const { site_code = [] } = provider_data;
+
+  useEffect(() => {
+    if (__SERVER__) return;
+    setVectorSource(new source.Vector());
+    /* eslint-disable-next-line */
+  }, []);
+
+  useEffect(() => {
+    if (__SERVER__ || !vectorSource || !site_code[0]) return;
+    const esrijsonFormat = new format.EsriJSON();
+    // Get site shape
+    fetch(getCddaShapeURL(site_code[0])).then(function (response) {
+      if (response.status !== 200) return;
+      response.json().then(function (data) {
+        if (data.features && data.features.length > 0) {
+          const features = esrijsonFormat.readFeatures(data);
+          if (features.length > 0) {
+            vectorSource.addFeatures(features);
+            const vectorExtent = vectorSource.getExtent();
+            let size = extent.getSize(vectorExtent);
+            setOptions({
+              ...options,
+              extent: new extent.buffer(vectorExtent, size[0] * 0.1),
+            });
+          }
+        }
+      });
+    });
+    /* eslint-disable-next-line */
+  }, [site_code?.[0]]);
+
+  if (__SERVER__ || !vectorSource) return '';
+  return (
+    <div className="site-shape-wrapper full-width">
+      <div className="site-shape">
+        <Map
+          view={{
+            center: proj.fromLonLat([20, 50]),
+            showFullExtent: true,
+            maxZoom: 10,
+            minZoom: 10,
+            zoom: 10,
+          }}
+          {...options}
+        >
+          <Layers>
+            <Layer.Tile zIndex={0} />
+            <Layer.Vector
+              source={vectorSource}
+              style={
+                new style.Style({
+                  fill: new style.Fill({
+                    color: 'rgba(255,255,255,0.4)',
+                  }),
+                  stroke: new style.Stroke({
+                    color: '#04A77D',
+                    width: 3,
+                    lineDash: [5, 7],
+                  }),
+                })
+              }
+              zIndex={1}
+            />
+          </Layers>
+          <Controls attribution={true} zoom={false} />
+          <Interactions
+            doubleClickZoom={false}
+            dragAndDrop={false}
+            dragPan={false}
+            keyboardPan={false}
+            keyboardZoom={false}
+            mouseWheelZoom={false}
+            pointer={false}
+            select={false}
+          />
+        </Map>
+      </div>
+      <Container className="map-info-notice">
+        <Message>
+          <p>
+            The designations employed and the presentation of material on this
+            map do not imply the expression of any opinion whatsoever on the
+            part of the European Union concerning the legal status of any
+            country, territory, city or area or of its authorities, or
+            concerning the delimitation of its frontiers or boundaries.
+          </p>
+        </Message>
+      </Container>
+    </div>
+  );
+};
+
+export default View;

package/src/components/manage/Blocks/CddaShape/index.js

@@ -0,0 +1,23 @@
+import CddaShapeView from './View';
+import getSchema from './schema';
+
+export function getCddaShapeURL(site_code) {
+  return encodeURI(
+    `https://bio.discomap.eea.europa.eu/arcgis/rest/services/ProtectedSites/CDDA_Dyna_WM/MapServer/4/query?f=json&where=cddaId = ${site_code}&returnGeometry=true&spatialRel=esriSpatialRelIntersects&outFields=*&outSR=102100`,
+  );
+}
+
+export default (config) => {
+  config.blocks.blocksConfig.custom_connected_block = {
+    ...config.blocks.blocksConfig.custom_connected_block,
+    blocks: {
+      ...config.blocks.blocksConfig.custom_connected_block.blocks,
+      cdda_shape: {
+        view: CddaShapeView,
+        getSchema: getSchema,
+        title: 'CDDA shape',
+      },
+    },
+  };
+  return config;
+};

package/src/components/manage/Blocks/CddaShape/schema.js

@@ -0,0 +1,19 @@
+const getSchema = (props) => {
+  return {
+    title: 'CDDA shape',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [],
+      },
+    ],
+
+    properties: {},
+
+    required: [],
+  };
+};
+
+export default getSchema;

package/src/components/manage/Blocks/CddaShape/style.less

@@ -0,0 +1,14 @@
+div#view .ui.container > .site-shape-wrapper,
+div#view .ui.container > .site-shape {
+  margin-bottom: 0;
+}
+
+.site-shape {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0;
+
+  &.visible.transition {
+    display: flex !important;
+  }
+}

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Icon } from '@plone/volto/components';
+import cx from 'classnames';
+import domainSVG from './icons/domain.svg';
+import locationSVG from './icons/location.svg';
+import emailSVG from './icons/email.svg';
+
+import './styles.less';
+
+const icons = {
+  domain: domainSVG,
+  location: locationSVG,
+  email: emailSVG,
+};
+
+const View = (props) => {
+  const {
+    mode = 'view',
+    data = {},
+    placeholder = 'No contact information',
+  } = props;
+  const { contactFields = [] } = data;
+  const provider_data = props.provider_data || {};
+
+  const contacts = contactFields.length
+    ? [
+        ...Array(
+          provider_data[Object.keys(provider_data)[0]]?.length || 0,
+        ).keys(),
+      ]
+    : [];
+
+  return contacts.length ? (
+    <div className="contact-block">
+      {contacts.map((index) => (
+        <div key={`contact-${index}`} className="contact">
+          {contactFields.map((field) => (
+            <div
+              key={`contact-field-${index}-${field.dataEntity}`}
+              className="contact-field"
+            >
+              <Icon name={icons[field.icon]} size="24px" />
+              <p>{provider_data[field.dataEntity]?.[index] || '-'}</p>
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  ) : (
+    <div className={cx('contact-block no-data', mode)}>
+      <p>{placeholder}</p>
+    </div>
+  );
+};
+
+export default View;

package/src/components/manage/Blocks/ContactBlock/icons/domain.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a{fill:none;}.b{fill:#04a87d;}</style></defs><path class="a" d="M0,0H24V24H0Z"/><path class="b" d="M12,7V3H2V21H22V7ZM6,19H4V17H6Zm0-4H4V13H6Zm0-4H4V9H6ZM6,7H4V5H6Zm4,12H8V17h2Zm0-4H8V13h2Zm0-4H8V9h2Zm0-4H8V5h2ZM20,19H12V17h2V15H12V13h2V11H12V9h8Zm-2-8H16v2h2Zm0,4H16v2h2Z"/></svg>

package/src/components/manage/Blocks/ContactBlock/icons/email.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a{fill:#04a87d;}.b{fill:none;}</style></defs><path class="a" d="M20,4H4A2,2,0,0,0,2.01,6L2,18a2.006,2.006,0,0,0,2,2H20a2.006,2.006,0,0,0,2-2V6A2.006,2.006,0,0,0,20,4Zm0,4-8,5L4,8V6l8,5,8-5Z"/><path class="b" d="M0,0H24V24H0Z"/></svg>

package/src/components/manage/Blocks/ContactBlock/icons/location.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><defs><style>.a{fill:#04a87d;}.b{fill:none;}</style></defs><path class="a" d="M12,2A7,7,0,0,0,5,9c0,5.25,7,13,7,13s7-7.75,7-13A7,7,0,0,0,12,2Zm0,9.5A2.5,2.5,0,1,1,14.5,9,2.5,2.5,0,0,1,12,11.5Z"/><path class="b" d="M0,0H24V24H0Z"/></svg>

package/src/components/manage/Blocks/ContactBlock/index.js

@@ -0,0 +1,17 @@
+import ContactBlockView from './View';
+import getSchema from './schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.custom_connected_block = {
+    ...config.blocks.blocksConfig.custom_connected_block,
+    blocks: {
+      ...config.blocks.blocksConfig.custom_connected_block.blocks,
+      contact_block: {
+        view: ContactBlockView,
+        getSchema: getSchema,
+        title: 'Contact block',
+      },
+    },
+  };
+  return config;
+};

package/src/components/manage/Blocks/ContactBlock/schema.js

@@ -0,0 +1,57 @@
+const getContactFields = (props) => {
+  const data = props.provider_data || {};
+  const choices = Object.keys(data).map((key) => [key, key]) || [];
+
+  return {
+    title: 'Contact field',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['icon', 'dataEntity'],
+      },
+    ],
+    properties: {
+      icon: {
+        title: 'Icon',
+        type: 'array',
+        choices: [
+          ['domain', 'Domain'],
+          ['location', 'Location'],
+          ['email', 'Email'],
+        ],
+      },
+      dataEntity: {
+        title: 'Data entity',
+        type: 'array',
+        choices,
+      },
+    },
+    required: ['icon', 'dataEntity'],
+  };
+};
+const getSchema = (props) => {
+  return {
+    title: 'Contact block',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['contactFields'],
+      },
+    ],
+
+    properties: {
+      contactFields: {
+        title: 'Contact fields',
+        widget: 'objectlist',
+        schema: getContactFields(props),
+      },
+    },
+
+    required: [],
+  };
+};
+
+export default getSchema;

package/src/components/manage/Blocks/ContactBlock/styles.less

@@ -0,0 +1,31 @@
+.contact-block {
+  margin-left: 1rem;
+
+  &.no-data:not(.edit) {
+    margin-top: -1.5rem;
+    margin-left: 0;
+  }
+
+  .contact {
+    &:not(:last-child) {
+      border-bottom: 1px solid #dadada;
+      margin-bottom: 1rem;
+    }
+
+    .contact-field {
+      display: flex;
+      flex-flow: row;
+      align-items: center;
+      margin-bottom: 1rem;
+
+      .icon {
+        margin-right: 0.5rem;
+      }
+
+      p {
+        color: #636363;
+        font-weight: 600;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,125 @@
+import React from 'react';
+import * as d3 from 'd3';
+import { Popup } from 'semantic-ui-react';
+import { adjustBrightness } from '@eeacms/volto-n2k/helpers';
+
+const Arc = ({ data, index, createArc, format, size }) => {
+  const [mouseOver, setMouseOver] = React.useState(false);
+  const arcData = data.data;
+
+  return (
+    <g key={index} className="arc">
+      {arcData.showValue && arcData.label ? (
+        <g>
+          <foreignObject
+            transform={`translate(-${size.realOuterRadius}, -${size.realOuterRadius})`}
+            width="100%"
+            height={size.height}
+            position="relative"
+            x={size.realOuterRadius + size.outerRadius}
+          >
+            <div
+              className="text"
+              xmlns="http://www.w3.org/1999/xhtml"
+              style={{
+                width: `calc(100% - ${
+                  size.realOuterRadius + size.outerRadius
+                }px)`,
+                height: 2 * size.outerRadius,
+              }}
+            >
+              <p className="value">{format(arcData.value * 100)}%</p>
+              <span className="line" />
+              <p className="label">{arcData.label}</p>
+            </div>
+          </foreignObject>
+        </g>
+      ) : (
+        ''
+      )}
+      <Popup
+        content={
+          <>
+            <p style={{ marginBottom: 0 }}>{format(arcData.value * 100)}%</p>
+            <p>{arcData.label}</p>
+          </>
+        }
+        disabled={!arcData.showMouseOver}
+        trigger={
+          <path
+            className="arc"
+            d={createArc(data)}
+            fill={
+              mouseOver ? adjustBrightness(arcData.color, -10) : arcData.color
+            }
+            filter={arcData.filter ? `url(${arcData.filter})` : ''}
+            onFocus={() => {}}
+            onBlur={() => {}}
+            onMouseOver={(event) => {
+              if (arcData.showMouseOver) {
+                setMouseOver(true);
+              }
+            }}
+            onMouseOut={() => {
+              if (mouseOver) {
+                setMouseOver(false);
+              }
+            }}
+          />
+        }
+      />
+    </g>
+  );
+};
+
+const Pie = (props) => {
+  const createPie = d3
+    .pie()
+    .value((d) => d.value)
+    .sort(null);
+  const createArc = d3
+    .arc()
+    .innerRadius((d) => d.data.innerRadius || props.innerRadius)
+    .outerRadius((d) => d.data.outerRadius || props.outerRadius)
+    .startAngle(0)
+    .endAngle((d) => d.value * 2 * Math.PI);
+  const data = createPie(props.data);
+  const format = d3.format(`.${props.precision || 2}f`);
+
+  return (
+    <svg width={'100%'} height={props.height}>
+      <defs>
+        <filter id="drop-shadow" x="0" y="0" width="200%" height="200%">
+          <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
+          <feOffset dx="1" dy="4" result="offsetblur" />
+          <feFlood floodColor="rgba(0, 0, 0, 0.2)" />
+          <feComposite in2="offsetblur" operator="in" />
+          <feMerge>
+            <feMergeNode />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+      <g transform={`translate(${props.center[0]} ${props.center[1]})`}>
+        {data.map((d, i) => (
+          <Arc
+            key={i}
+            data={d}
+            index={i}
+            createArc={createArc}
+            format={format}
+            size={{
+              width: props.width,
+              height: props.height,
+              innerRadius: props.innerRadius,
+              outerRadius: props.outerRadius,
+              realOuterRadius: props.center[0],
+            }}
+          />
+        ))}
+      </g>
+    </svg>
+  );
+};
+
+export default Pie;

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Grid } from 'semantic-ui-react';
+import * as d3 from 'd3';
+import './style.less';
+
+import Pie from './Pie';
+
+const View = (props) => {
+  const { 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] || [];
+  const y_values = data?.[y] || [];
+  const format = d3.format('.2f');
+
+  const xColorsObj = {};
+
+  x_colors.forEach((item) => {
+    xColorsObj[item.label] = item.color;
+  });
+
+  const dataReady =
+    data && Object.keys(data).length && x_values.length && y_values.length;
+
+  const total = dataReady
+    ? format(y_values.reduce((a1, a2) => a1 + a2, 0))
+    : null;
+
+  return (
+    <>
+      {dataReady ? (
+        <Grid className="exploded-pies-chart">
+          {y_values?.length > 0
+            ? y_values.map((value, index) => (
+                <Grid.Column
+                  key={`x_${index}`}
+                  mobile="12"
+                  tablet="6"
+                  computer="4"
+                  largeScreen="4"
+                  widescreen="4"
+                  className="pie-column"
+                >
+                  <Grid>
+                    <Grid.Column>
+                      <Pie
+                        width={320}
+                        height={120}
+                        innerRadius={0}
+                        outerRadius={44}
+                        center={[60, 60]}
+                        data={[
+                          { value: 1, color: '#EAEAEA' },
+                          {
+                            value: value / total,
+                            label: x_values[index],
+                            outerRadius: 55,
+                            shadow: 5,
+                            showValue: true,
+                            showMouseOver: true,
+                            color: xColorsObj[x_values[index]] || '#7BB7F4',
+                            filter: '#drop-shadow',
+                          },
+                        ]}
+                        precision={precision}
+                      />
+                    </Grid.Column>
+                  </Grid>
+                </Grid.Column>
+              ))
+            : ''}
+        </Grid>
+      ) : (
+        <p>{placeholder}</p>
+      )}
+    </>
+  );
+};
+
+export default View;

package/src/components/manage/Blocks/ExplodedPiesChart/index.js

@@ -0,0 +1,17 @@
+import ExplodedPiesChart from './View';
+import getSchema from './schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.custom_connected_block = {
+    ...config.blocks.blocksConfig.custom_connected_block,
+    blocks: {
+      ...config.blocks.blocksConfig.custom_connected_block.blocks,
+      exploded_pies_chart: {
+        view: ExplodedPiesChart,
+        getSchema: getSchema,
+        title: 'Exploded pies chart',
+      },
+    },
+  };
+  return config;
+};

package/src/components/manage/Blocks/ExplodedPiesChart/schema.js

@@ -0,0 +1,75 @@
+const xColorSchema = (props) => {
+  const data = props.provider_data || {};
+  const x = props.data.x || '';
+  const choices = data[x]?.map((key) => [key, key]) || [];
+
+  return {
+    title: 'Color',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['label', 'color'],
+      },
+    ],
+
+    properties: {
+      label: {
+        title: 'Label',
+        type: 'array',
+        choices,
+      },
+      color: {
+        title: 'Color',
+        type: 'string',
+      },
+    },
+
+    required: ['label', 'color'],
+  };
+};
+
+const getSchema = (props) => {
+  const data = props.provider_data || {};
+  const choices = Object.keys(data).map((key) => [key, key]);
+
+  return {
+    title: 'Exploded pies chart',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['x', 'y', 'x_colors', 'precision'],
+      },
+    ],
+
+    properties: {
+      x: {
+        title: 'Value',
+        type: 'array',
+        choices,
+      },
+      y: {
+        title: 'Label',
+        type: 'array',
+        choices,
+      },
+      x_colors: {
+        title: 'Labels color',
+        widget: 'objectlist',
+        schema: xColorSchema(props),
+      },
+      precision: {
+        title: 'Precision',
+        type: 'number',
+        minimum: -1,
+      },
+    },
+
+    required: [],
+  };
+};
+
+export default getSchema;