@eeacms/volto-n2k 0.1.1

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

@@ -0,0 +1,23 @@
+import SpeciesProtectedSitesView from './View';
+import getSchema from './schema';
+
+export function getSpeciesProtectedSitesURL(code_2000) {
+  return encodeURI(
+    `https://bio.discomap.eea.europa.eu/arcgis/rest/services/ProtectedSites/EUNIS_Website_Dyna_WM/MapServer/5/query?f=json&where=SPECIESCODE LIKE '%${code_2000.toUpperCase()}%'&returnGeometry=true&spatialRel=esriSpatialRelIntersects&outFields=SPECIESCODE,SITECODE,HABITATCODE,OBJECTID&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,
+      species_protected_sites: {
+        view: SpeciesProtectedSitesView,
+        getSchema: getSchema,
+        title: 'Species protected sites map',
+      },
+    },
+  };
+  return config;
+};

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

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

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

@@ -0,0 +1,5 @@
+.species-protected-sites {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0;
+}

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

@@ -0,0 +1,127 @@
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  axisBottom,
+  axisLeft,
+  format,
+  select,
+  scaleBand,
+  scaleLinear,
+} from 'd3';
+import cx from 'classnames';
+import ChartContext from './ChartContext';
+
+/**
+ * example:
+ * <Chart width="100%" height="400px">
+ *   <Bars />
+ *   <Legend />
+ * </Chart>
+ */
+
+function Chart(props) {
+  const [scales, setScales] = useState();
+  const [popup, setPopup] = useState();
+  const chartWrapper = useRef();
+  const svgRef = useRef();
+  const popupRef = useRef();
+  const {
+    margin = { top: 20, right: 30, bottom: 70, left: 40 },
+    xDomain = [],
+    yDomain = [],
+  } = props;
+
+  useEffect(() => {
+    // dispose();
+    if (xDomain.length && yDomain.length) {
+      makeAxis();
+    }
+    /* eslint-disable-next-line */
+  }, [JSON.stringify(xDomain), JSON.stringify(yDomain)]);
+
+  // const dispose = () => {
+  //   const svg = select(svgRef.current);
+  //   svg.selectAll('*').remove();
+  // };
+
+  const makeAxis = () => {
+    const svg = select(svgRef.current);
+    //  Scales
+    const xScale = scaleBand()
+      .domain([...xDomain])
+      .range([margin.left, props.width - margin.right])
+      .padding(0.25);
+    const yScale = scaleLinear()
+      .domain(yDomain)
+      .rangeRound([props.height - margin.bottom, margin.top]);
+
+    // Axes
+    svg
+      .select('.x-axis')
+      .attr('transform', `translate(0, ${props.height - margin.bottom})`)
+      .call(axisBottom(xScale).tickPadding(6).tickSize(0))
+      .call((g) => g.selectAll('.domain').remove());
+    svg
+      .select('.y-axis')
+      .attr('transform', `translate(${margin.left}, 0)`)
+      .call(
+        axisLeft(yScale).tickSize(0).tickPadding(3).tickFormat(format('.0%')),
+      )
+      .call((g) => g.selectAll('.domain').remove())
+      .call((g) =>
+        g
+          .selectAll('.tick line')
+          .attr('x2', props.width - margin.left - margin.right)
+          .attr('stroke-opacity', 0.1),
+      );
+    setScales({
+      xScale,
+      yScale,
+    });
+  };
+
+  return (
+    <ChartContext.Provider
+      value={{
+        element: svgRef.current,
+        popupElement: popupRef.current,
+        height: props.height,
+        width: props.width,
+        margin,
+        scales,
+        popup,
+        setPopup,
+      }}
+    >
+      <div ref={chartWrapper} className="chart-wrapper">
+        <svg
+          viewBox={`0 0 ${props.width} ${props.height}`}
+          preserveAspectRatio="xMinYMin meet"
+          ref={svgRef}
+        >
+          <g className="x-axis" />
+          <g className="y-axis" />
+          {props.children}
+        </svg>
+        <div
+          style={
+            popup
+              ? {
+                  top: popup.clientY - 20,
+                  left: popup.clientX,
+                }
+              : {}
+          }
+          className={cx(
+            'chart-popup ui top center popup',
+            popup?.content ? 'visible' : {},
+          )}
+          ref={popupRef}
+        >
+          <div className="content">{popup ? popup.content : ''}</div>
+        </div>
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+export default Chart;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+const ChartContext = new React.createContext();
+export default ChartContext;

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

@@ -0,0 +1,116 @@
+import React from 'react';
+import { scaleOrdinal, schemeSpectral, stack } from 'd3';
+import cx from 'classnames';
+import { adjustBrightness } from '@eeacms/volto-n2k/helpers';
+import ChartContext from './ChartContext';
+
+const getSerieData = (serie) => {
+  return Object.keys(serie)
+    .filter((key) => !['index', 'key'].includes(key))
+    .map((key) => serie[key]);
+};
+
+function StackedBars(props) {
+  const {
+    element,
+    height,
+    width,
+    margin,
+    scales,
+    popup,
+    setPopup,
+  } = React.useContext(ChartContext);
+  const { data = {}, keys = [], hoverText = '{}' } = props;
+
+  if (!keys?.length || !scales?.xScale || !scales?.yScale) {
+    return <></>;
+  }
+
+  const series = stack()
+    .keys(keys)(data)
+    .map((d) => {
+      d.forEach((v) => (v.key = d.key));
+      return d;
+    });
+  const color = scaleOrdinal()
+    .domain(series.map((d) => d.key))
+    .range(
+      ['#70AD47', '#ED7D31', '#FF3F3F', '#AFABAB'] ||
+        schemeSpectral[series.length],
+    )
+    .unknown('#ccc');
+
+  return (
+    <React.Fragment>
+      {series?.map((serie, serieIndex) => {
+        return (
+          <g key={serie.key} className={cx('serie', serie.key)}>
+            {getSerieData(serie).map((rect, rectIndex) => {
+              return (
+                <rect
+                  key={`${serie.key}_${serieIndex}_${rectIndex}`}
+                  className={cx(rect.key)}
+                  fill={
+                    popup?.id === `${serieIndex}_${rectIndex}_${rect.key}`
+                      ? adjustBrightness(color(serie.key), -20)
+                      : color(serie.key)
+                  }
+                  x={scales.xScale(rect.data.x)}
+                  y={scales.yScale(rect[1])}
+                  height={scales.yScale(rect[0]) - scales.yScale(rect[1]) || 0}
+                  width={scales.xScale.bandwidth()}
+                  onFocus={() => {}}
+                  onBlur={() => {}}
+                  onMouseMoveCapture={(event) => {
+                    const elementPosition = element.parentNode.getBoundingClientRect();
+                    setPopup({
+                      id: `${serieIndex}_${rectIndex}_${rect.key}`,
+                      clientX: event.clientX - elementPosition.x,
+                      clientY: event.clientY - elementPosition.y,
+                      content: (
+                        <>
+                          <p>
+                            {hoverText.replace(
+                              '{}',
+                              rect.data[rect.key] * rect.data.total,
+                            )}
+                          </p>
+                        </>
+                      ),
+                    });
+                  }}
+                  onMouseOut={() => {
+                    setPopup(null);
+                  }}
+                />
+              );
+            })}
+          </g>
+        );
+      })}
+      <foreignObject
+        width={width - margin.left - margin.right}
+        height="12px"
+        position="relative"
+        x={margin.left}
+        y={height - 40}
+      >
+        <div className="legend-wrapper" xmlns="http://www.w3.org/1999/xhtml">
+          {series?.map((serie, serieIndex) => (
+            <div
+              key={`legend_${serie.key}`}
+              className={cx('legend', serie.key)}
+            >
+              <span
+                className={'square'}
+                style={{ background: color(serie.key) }}
+              />
+              <p>{serie.key}</p>
+            </div>
+          ))}
+        </div>
+      </foreignObject>
+    </React.Fragment>
+  );
+}
+export default StackedBars;

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import Chart from './Chart';
+import StackedBars from './StackedBars';
+
+import './style.less';
+
+const View = (props) => {
+  const [xValues, setXValues] = React.useState([]);
+  const [yValues, setYValues] = React.useState({});
+  const [yLabels, setYLabels] = React.useState([]);
+  const {
+    x_label_key = 'country_code',
+    y_label_key = 'assessment',
+    y_value_key = 'quantity',
+  } = props;
+  const data = props.provider_data || {};
+
+  React.useEffect(() => {
+    if (!(data[x_label_key]?.length && data[y_label_key]?.length)) return;
+    const yValues = {};
+    const total = {};
+
+    data[x_label_key].forEach((x, index) => {
+      if (!total[x]) total[x] = 0;
+      total[x] += data[y_value_key][index];
+    });
+
+    data[x_label_key].forEach((x, index) => {
+      const y = data[y_label_key][index];
+      if (!yValues[x]) {
+        yValues[x] = {
+          x,
+          total: total[x],
+        };
+      }
+      yValues[x][y] = data[y_value_key][index] / total[x];
+    });
+
+    setXValues([...new Set(data[x_label_key])]);
+    setYValues(yValues);
+    setYLabels([...new Set(data[y_label_key])]);
+    /* eslint-disable-next-line */
+  }, [x_label_key, y_label_key, y_value_key, data]);
+
+  return (
+    <React.Fragment>
+      <div className="stacked-bar-chart">
+        <Chart
+          width={800}
+          height={400}
+          xDomain={xValues.sort()}
+          yDomain={[0, 1]}
+        >
+          <StackedBars
+            data={Object.keys(yValues).map((label) => yValues[label])}
+            hoverText={props.data.hoverText}
+            keys={yLabels}
+          />
+        </Chart>
+      </div>
+    </React.Fragment>
+  );
+};
+export default View;

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

@@ -0,0 +1,17 @@
+import StackedBarChart 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,
+      stacked_bar_chart: {
+        view: StackedBarChart,
+        getSchema: getSchema,
+        title: 'Stacked bar chart',
+      },
+    },
+  };
+  return config;
+};

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

@@ -0,0 +1,25 @@
+const getSchema = (props) => {
+  return {
+    title: 'Stacked bars chart',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['hoverText'],
+      },
+    ],
+
+    properties: {
+      hoverText: {
+        title: 'Hover text',
+        description: "Add '{}' for bar quantity value, ex: '{} Forests'",
+        widget: 'textarea',
+      },
+    },
+
+    required: [],
+  };
+};
+
+export default getSchema;

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

@@ -0,0 +1,37 @@
+.chart-wrapper {
+  position: relative;
+  display: flex;
+  padding: 0;
+  margin: 0;
+
+  .chart-popup {
+    position: absolute;
+    width: fit-content;
+    transform: translate(-50%, calc(-50% - 1rem)) !important;
+  }
+
+  svg {
+    // width: 100%;
+
+    .legend-wrapper {
+      display: flex;
+      justify-content: center;
+
+      .legend {
+        display: flex;
+
+        p {
+          margin-right: 1rem;
+          font-size: 12px;
+          line-height: 12px;
+        }
+
+        .square {
+          width: 12px;
+          height: 12px;
+          margin-right: 0.5rem;
+        }
+      }
+    }
+  }
+}

package/src/components/manage/Blocks/TilesImages/Edit.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { SidebarPortal } from '@plone/volto/components';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import TilesImagesView from './View';
+import getSchema from './schema';
+import './styles.less';
+
+const Edit = (props) => {
+  const { selected = false } = props;
+  const schema = getSchema();
+
+  return (
+    <>
+      <TilesImagesView {...props} mode="edit" />
+      <SidebarPortal selected={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;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { UniversalLink } from '@plone/volto/components';
+import cx from 'classnames';
+import './styles.less';
+
+const View = (props) => {
+  const { data = {}, mode = 'view' } = props;
+  const images = data.images || [];
+
+  return (
+    <div className={cx('tiles-images', mode, data.theme || 'light')}>
+      {mode === 'edit' && !images.length ? <p>Tiles images block</p> : ''}
+      {images.map((image) => (
+        <p
+          className={cx('p-image', {
+            'with-border': data.hasBorder ?? true,
+            'rounded-border': data.rounded ?? true,
+          })}
+        >
+          <UniversalLink href={image.link || '#'} title={image.title}>
+            <img
+              src={`${image.image}/@@images/image/mini`}
+              alt={image.title}
+              style={
+                data.size
+                  ? { width: `${data.size}px`, height: `${data.size}px` }
+                  : {}
+              }
+            />
+          </UniversalLink>
+        </p>
+      ))}
+    </div>
+  );
+};
+
+export default View;

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

@@ -0,0 +1,23 @@
+import TilesImagesEdit from './Edit';
+import TilesImagesView from './View';
+import worldSVG from '@plone/volto/icons/world.svg';
+
+export default (config) => {
+  config.blocks.blocksConfig.tiles_images = {
+    id: 'tiles_images',
+    title: 'Tiles images',
+    icon: worldSVG,
+    group: 'natura_2000',
+    edit: TilesImagesEdit,
+    view: TilesImagesView,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    blocks: {},
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+  return config;
+};

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

@@ -0,0 +1,72 @@
+const imageSchema = {
+  title: 'Image',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['image', 'link', 'title'],
+    },
+  ],
+  properties: {
+    image: {
+      title: 'image',
+      widget: 'object_by_path',
+    },
+    link: {
+      title: 'link',
+      widget: 'object_by_path',
+    },
+    title: {
+      title: 'Title',
+    },
+  },
+  required: ['url', 'title'],
+};
+
+export default () => ({
+  title: 'Tiles images',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['theme', 'images'],
+    },
+    {
+      id: 'advanced',
+      title: 'Advanced',
+      fields: ['size', 'hasBorder', 'rounded'],
+    },
+  ],
+  properties: {
+    size: {
+      title: 'Tiles size',
+      type: 'number',
+    },
+    hasBorder: {
+      title: 'With border',
+      type: 'boolean',
+      default: true,
+    },
+    rounded: {
+      title: 'Rounded',
+      type: 'boolean',
+      default: true,
+    },
+    theme: {
+      title: 'Theme',
+      type: 'array',
+      choices: [
+        ['light', 'Light'],
+        ['grey', 'Grey'],
+        ['dark', 'Dark'],
+      ],
+      default: 'light',
+    },
+    images: {
+      title: 'Images',
+      widget: 'object_list_inline',
+      schema: imageSchema,
+    },
+  },
+  required: [],
+});

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

@@ -0,0 +1,57 @@
+.tiles-images {
+  display: flex;
+  flex-flow: row;
+  margin-bottom: 1rem;
+
+  &:not(.edit) {
+    margin-left: -0.5rem;
+  }
+
+  &.light {
+    .p-image.with-border img {
+      border: 1px solid #fff;
+    }
+  }
+
+  &.grey {
+    .p-image.with-border img {
+      border: 1px solid #c9c9c9;
+    }
+  }
+
+  &.dark {
+    .p-image.with-border img {
+      border: 1px solid #000;
+    }
+  }
+
+  .p-image {
+    margin-bottom: 0 !important;
+
+    a {
+      display: block;
+    }
+
+    img {
+      width: 130px;
+      height: 130px;
+      padding: 6px;
+
+      &:hover {
+        opacity: 0.9;
+      }
+    }
+  }
+
+  .p-image.rounded-border {
+    border-radius: 50%;
+
+    img {
+      border-radius: 50%;
+    }
+  }
+
+  .p-image.with-border {
+    margin: 0 0.5rem;
+  }
+}