@eeacms/volto-bise-policy 1.0.0

package/src/components/manage/Blocks/MaesViewer/style.css

@@ -0,0 +1,64 @@
+.maes-viewer-grid {
+  display: grid;
+  margin: 3em 0;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+}
+
+.maes-viewer-grid .js-plotly-plot {
+  /* this would have been overriden by inline CSS inside the react-plotly.js
+  component if it was not marked !important */
+  /* this rule is needed to make the small charts inside the MAES Viewer
+  responsive */
+  display: block !important;
+}
+
+.maes-select-label {
+  display: inline-block;
+  margin-bottom: 1rem;
+  font-size: 19px;
+  font-weight: bold;
+}
+
+@media only screen and (min-width: 1440px) {
+  .maes-viewer-grid {
+    column-gap: 2rem;
+  }
+
+  .maes-viewer-select {
+    grid-column: 9/13;
+    grid-row: 1/2;
+  }
+
+  .maes-viewer-charts {
+    grid-column: 1/9;
+    grid-row: 1/2;
+    overflow-x: hidden;
+  }
+}
+
+@media only screen and (max-width: 1440px) {
+  .maes-viewer-grid {
+    grid-template-rows: auto auto;
+    /* grid-template-columns: 1fr; */
+  }
+
+  .maes-viewer-select {
+    margin-bottom: 3em;
+    grid-column: 1/5;
+    grid-row: 1/2;
+  }
+
+  .maes-viewer-charts {
+    grid-column: 1/13;
+    grid-row: 2/3;
+    overflow-x: hidden;
+  }
+}
+
+@media only screen and (max-width: 1282px) {
+  .maes-viewer-select {
+    width: 100%;
+    max-width: 320px;
+    grid-column: 1/13;
+  }
+}

package/src/components/manage/Blocks/MaesViewer/utils.js

@@ -0,0 +1,473 @@
+import _ from 'lodash';
+import { defaultHoverTemplate } from './constants';
+
+export const colorscale = [
+  'rgb(166,206,227)',
+  'rgb(31,120,180)',
+  'rgb(178,223,138)',
+  'rgb(51,160,44)',
+  'rgb(251,154,153)',
+  'rgb(227,26,28)',
+  'rgb(160,26,51)',
+  'rgb(227,178,223)',
+  'rgb(31,227,28)',
+  'rgb(227,120,180)',
+];
+
+const mapLongLevelNameToShort = (x) => {
+  const obj = {
+    'A - Marine habitats': 'Marine habitats',
+    'B - Coastal habitats': 'Coastal habitats',
+    'C - Inland surface waters': 'Inland waters',
+    'D - Mires, bogs and fens': 'Mires, bogs and fens',
+    'E - Grasslands and land dominated by forbs, mosses or lichens':
+      'Grassland',
+    'F - Heathland, scrub and tundra': 'Heathland',
+    'G - Woodland, forest and other wooded land': 'Woodlands',
+    'H - Inland unvegetated or sparsely vegetated habitats':
+      'Inland unvegetated or sparsely vegetated habitats',
+    'I - Arable land and market gardens': 'Cropland',
+    'J - constructed, industrial and other artificial habitats': 'Urban',
+  };
+  return obj[x] || x;
+};
+
+const filterGettingOriginalIndices = (a, fn) => {
+  return a
+    .map((c, i) => [c, i])
+    .filter(([c, i]) => fn(c, i))
+    .map(([, i]) => i);
+};
+
+class ProviderData {
+  static ecosystemColumnName = 'Ecosystem_level2';
+  static countryColumnName = 'Country_name';
+
+  /**
+   * Takes an object like:
+   *
+   * { Area: [...], Source: [...] }
+   *
+   * where each item in the lists represents a table column value.
+   */
+  constructor(data) {
+    this.data = data;
+  }
+
+  getColumnData(name) {
+    return this.data[name];
+  }
+
+  getUniqueColumnData(name) {
+    return _.uniq(this.data[name]);
+  }
+
+  getEcosystems() {
+    return this.getUniqueColumnData(ProviderData.ecosystemColumnName);
+  }
+
+  getCountries() {
+    return this.getUniqueColumnData(ProviderData.countryColumnName).concat(
+      'EU',
+    );
+  }
+
+  getCountriesColumn() {
+    return this.getColumnData(ProviderData.countryColumnName);
+  }
+
+  forEachCountryAndLevel(fn) {
+    const c = this.getCountries();
+    const e = this.getEcosystems();
+    c.forEach((country) => {
+      e.forEach((level) => {
+        fn(country, level);
+      });
+    });
+  }
+
+  getEcosystemForRowIndex(i) {
+    return this.data[ProviderData.ecosystemColumnName][i];
+  }
+
+  hasEcosystemAtRowIndex(i, ecosystem) {
+    return this.getEcosystemForRowIndex(i) === ecosystem;
+  }
+
+  getColumnNames() {
+    return _.keys(this.data);
+  }
+
+  getCellValue(columnName, rowIndex) {
+    return this.getColumnData(columnName)[rowIndex];
+  }
+
+  createRowObject(rowIndex) {
+    const obj = {};
+    this.getColumnNames().forEach((cn) => {
+      obj[cn] = this.getCellValue(cn, rowIndex);
+    });
+    return obj;
+  }
+
+  rowSatisfiesFilters(index, filters) {
+    const filtersResults = filters.map((f) => f(this.data, index));
+    return filtersResults.every((t) => t);
+  }
+
+  /**
+   * Filters the data. Given a country name and an array of filter functions
+   * which receive two parameters, provider_data and rowIndex, returns an array
+   * of objects containing the data for each matching row in the DataProvider.
+   */
+  query(country, filters) {
+    const countriesColumn = this.getCountriesColumn();
+    const filteredIndices = filterGettingOriginalIndices(
+      countriesColumn,
+      (c, i) => {
+        return c === country && this.rowSatisfiesFilters(i, filters);
+      },
+    );
+    const rowObjects = filteredIndices.map((i) => this.createRowObject(i));
+    return rowObjects;
+  }
+}
+
+export function mapByLevel(provider_data) {
+  const pd = new ProviderData(provider_data);
+
+  const byLevel = _.fromPairs(pd.getEcosystems().map((l) => [l, {}]));
+
+  pd.forEachCountryAndLevel((country, level) => {
+    const filters = [
+      (provider_data, index) => pd.hasEcosystemAtRowIndex(index, level),
+    ];
+    const country_data = pd.query(country, filters);
+    byLevel[level][country] = country_data;
+  });
+
+  return byLevel;
+}
+
+export function mapToAllEU(provider_data, byLevel) {
+  const level2 = new Set(provider_data['Ecosystem_level2']);
+  const countries = new Set(provider_data['Country_name']);
+  const EUByLevel = Object.fromEntries(Array.from(level2).map((l) => [l, {}]));
+
+  let totalArea = 0;
+
+  level2.forEach((level) => {
+    EUByLevel[level] = 0;
+
+    countries.forEach((country) => {
+      byLevel[level][country].forEach((x) => {
+        EUByLevel[level] += parseFloat(x['Area (m2)']);
+      });
+    });
+
+    totalArea += EUByLevel[level];
+  });
+
+  const EUByLevelPercents = _.fromPairs(
+    _.map(Array.from(level2), (l) => {
+      return [l, (EUByLevel[l] / totalArea) * 100];
+    }),
+  );
+
+  return { EUByLevel, EUByLevelPercents };
+}
+
+export function makeTrace(
+  level,
+  levelData,
+  index,
+  focusOn,
+  { hoverTemplate = defaultHoverTemplate },
+) {
+  const data = [
+    ...Object.entries(levelData).filter(([k, v]) => k !== focusOn),
+    [focusOn, levelData[focusOn]],
+  ];
+
+  const x = [...data.map(([k, v]) => v)];
+  const y = [];
+  y.length = x.length;
+  y.fill(0);
+  y[y.length - 1] = 0.25; // we "lift" this value to "highlight" it
+
+  // first element: country name
+  // second element: square kilometers (km2)
+  // third element: square megameters (Mm2)
+  const hovertext = _.map(data, (x) => [x[0], x[1] / 100, x[1] / 10000]);
+
+  const text = [
+    ...data.slice(0, data.length - 1).map((_) => null),
+    `<b>${focusOn}</b>`,
+  ];
+
+  const marker = {
+    symbol: [
+      ...data.slice(0, data.length - 1).map((_) => null),
+      'big-dot',
+      // 'triangle-down',
+    ],
+    // See https://plotly.com/javascript/reference/scatter/#scatter-marker
+    size: [...data.slice(0, data.length - 1).map((_) => 10), 10],
+    opacity: [...data.slice(0, data.length - 1).map((_) => 0.8), 1],
+    color: [
+      ...data.slice(0, data.length - 1).map((_) => colorscale[index]),
+      '#182844',
+    ],
+  };
+  const ht = hoverTemplate
+    .replace(/\{(.*?)country(.*?)\}/, '{$1customdata[0]$2}')
+    .replace(/\{(.*?)km2(.*?)\}/, '{$1customdata[1]$2}')
+    .replace(/\{(.*?)mm2(.*?)\}/, '{$1customdata[2]$2}');
+  const res = {
+    x,
+    y,
+    // hovertext,
+    // See
+    // https://plotly.com/javascript/reference/scatter/#scatter-hovertemplate
+    hovertemplate: ht,
+    hoverinfo: 'y',
+    customdata: hovertext,
+    name: level,
+    type: 'scatter',
+    // needed for subplots!!
+    // xaxis: `x${index > 0 ? index + 1 : ''}`,
+    // yaxis: `y${index > 0 ? index + 1 : ''}`,
+    mode: 'markers+text',
+    text,
+    marker,
+    textposition: 'top center',
+  };
+  return res;
+}
+
+export function axesFromTemplate(prefix, count, tpl, getTitle) {
+  const res = {};
+  for (let x = 0; x < count; x++) {
+    const rec = `${prefix}${x > 0 ? x + 1 : x}`;
+    res[rec] = JSON.parse(JSON.stringify(tpl));
+    // res[rec].title = { text: getTitle(x) };
+  }
+  res[prefix] = JSON.parse(JSON.stringify(tpl));
+  return res;
+}
+
+/**
+ * @param {number} index
+ * @param {number} finalPercent
+ */
+export function chartTileLayout(index, finalPercent) {
+  return {
+    height: 60,
+    showlegend: false,
+    margin: {
+      l: 0,
+      r: 0,
+      t: 0,
+      b: 0,
+    },
+    pad: 0,
+    xaxis: {
+      visible: true,
+      showline: false,
+      showgrid: false,
+      zeroline: false,
+      autorange: true,
+
+      // showticklabels: true,
+      // automargin: true,
+      // tickvals: [10000000000],
+      // tickmode: 'array',
+      // ticktext: ['0%'],
+      // ticks: 'outside',
+    },
+    yaxis: {
+      type: 'linear',
+      range: [-0.3, 1], // needed to show the current country as a dot above the line
+      visible: true,
+      ticks: '',
+      showgrid: false,
+      gridwidth: 2,
+      gridcolor: '#000',
+      showline: true,
+      zeroline: true,
+      zerolinewidth: 2,
+      zerolinecolor: '#000',
+      showticklabels: false,
+      // showdividers: true,
+    },
+    annotations: [
+      {
+        xref: 'x',
+        yref: 'paper',
+        x: 0,
+        y: 0.3,
+        xanchor: 'right',
+        yanchor: 'bottom',
+        text: '0%',
+        showarrow: false,
+      },
+      {
+        xref: 'paper',
+        yref: 'paper',
+        x: 1,
+        y: 0.3,
+        xanchor: 'right',
+        yanchor: 'bottom',
+        text: `${Math.round(finalPercent).toFixed(0)}%`,
+        showarrow: false,
+      },
+    ],
+  };
+}
+
+export function makeChartTiles(
+  provider_data,
+  focusOn,
+  focusEcosystem,
+  { hoverTemplate },
+) {
+  if (!provider_data) return;
+  const byLevel = mapByLevel(provider_data);
+  const { EUByLevel, EUByLevelPercents } = mapToAllEU(provider_data, byLevel);
+
+  const ecosystems = _.uniq(provider_data['Ecosystem_level2']);
+  const countries = _.uniq(provider_data['Country_name']);
+
+  const byArea = Object.fromEntries(ecosystems.map((l) => [l, {}]));
+  ecosystems.forEach((level) => {
+    countries.forEach((country) => {
+      const recs = byLevel[level][country];
+      const total = recs.reduce(
+        (acc, rec) => acc + parseInt(rec['Area (m2)']),
+        0,
+      );
+      byArea[level][country] = total;
+    });
+    byArea[level]['EU'] = EUByLevel[level];
+  });
+
+  const tiles = ecosystems
+    .map((level, index) => {
+      if (focusEcosystem && level !== focusEcosystem) return null;
+      return {
+        layout: chartTileLayout(index, EUByLevelPercents[level]),
+        data: [
+          makeTrace(level, byArea[level], index, focusOn, { hoverTemplate }),
+        ],
+        title: mapLongLevelNameToShort(level),
+      };
+    })
+    .filter((c) => !!c);
+
+  return tiles;
+}
+
+// unused, old version
+// export function makeSubplotsChart(provider_data) {
+//   if (!provider_data) return;
+//   const byLevel = mapByLevel(provider_data);
+//
+//   const level2 = new Set(provider_data['Ecosystem_level2']);
+//   const countries = new Set(provider_data['Country_name']);
+//
+//   const byArea = Object.fromEntries(Array.from(level2).map((l) => [l, {}]));
+//   level2.forEach((level) => {
+//     countries.forEach((country) => {
+//       const recs = byLevel[level][country];
+//       const total = recs.reduce(
+//         (acc, rec) => acc + parseInt(rec['Area (m2)']),
+//         0,
+//       );
+//       byArea[level][country] = total;
+//     });
+//   });
+//
+//   let layout = {
+//     height: 560,
+//     showlegend: false,
+//     margin: {
+//       l: 400,
+//       r: 0,
+//       t: 0,
+//       b: 0,
+//     },
+//     pad: 10,
+//     grid: {
+//       xside: 'bottom',
+//       yside: 'left',
+//       rows: Object.keys(byLevel).length,
+//       columns: 1,
+//       ygap: 0.2,
+//       roworder: 'bottom to top',
+//       yaxes: Object.keys(byLevel).map(
+//         (l, index) => `y${index > 0 ? index + 1 : ''}`,
+//       ),
+//       xaxes: Object.keys(byLevel).map(
+//         (l, index) => `x${index > 0 ? index + 1 : ''}`,
+//       ),
+//       pattern: 'independent',
+//     },
+//     ...axesFromTemplate(
+//       'xaxis',
+//       Object.keys(byLevel).length,
+//       {
+//         // this axis is shared
+//         visible: true,
+//         ticks: '',
+//         showline: false,
+//         showgrid: false,
+//         zeroline: false,
+//         autorange: true,
+//         // fixedrange: true,
+//         showticklabels: false,
+//       },
+//       (index) => '',
+//     ),
+//     ...axesFromTemplate(
+//       'yaxis',
+//       Object.keys(byLevel).length,
+//       {
+//         type: 'category',
+//         visible: true,
+//         ticks: '',
+//         showline: false,
+//         showgrid: true,
+//         gridwidth: 2,
+//         zeroline: false,
+//         gridcolor: '#000',
+//         showticklabels: false,
+//       },
+//       (index) => Object.keys(byLevel)[index],
+//     ),
+//     annotations: [...makeAnnotations(byLevel)],
+//   };
+//
+//   const traces = Array.from(level2).map((level, index) =>
+//     makeTrace(level, byArea[level], index),
+//   );
+//
+//   return { layout, data: traces };
+// }
+// export function makeAnnotations(byLabel) {
+//   const len = Object.keys(byLabel).length;
+//   return Object.keys(byLabel).map((label, index) => {
+//     return {
+//       xref: 'paper',
+//       yref: 'paper',
+//       x: -0.06,
+//       // y: 0,
+//       y: (1 / (len - 1)) * index,
+//       xanchor: 'right',
+//       // yanchor: 'bottom',
+//       text: label,
+//       showarrow: false,
+//       // ay: (10 * index) / 2,
+//     };
+//   });
+// }
+//

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

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

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

@@ -0,0 +1,43 @@
+import React, { useMemo } from 'react';
+import { connect } from 'react-redux';
+import { Menu } from 'semantic-ui-react';
+import { UniversalLink } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+import './styles.less';
+
+const View = ({ history, data, navigation, ...props }) => {
+  const search = history?.location?.search || '';
+  const pathname = props.path || props.pathname;
+  const pages = data.pages || [];
+  const items = useMemo(() => {
+    return [
+      ...(navigation.filter(
+        (item) => flattenToAppURL(item.url) === flattenToAppURL(data.parent),
+      )[0]?.items || []),
+      ...pages,
+    ];
+  }, [navigation, pages, data.parent]);
+
+  return (
+    <Menu className="navigation-block">
+      {items.map((item) => (
+        <Menu.Item
+          key={item.url}
+          active={
+            item.url &&
+            pathname?.replace('/edit', '') === flattenToAppURL(item.url)
+          }
+        >
+          <UniversalLink href={`${item.url}${search}`}>
+            {item.title}
+          </UniversalLink>
+        </Menu.Item>
+      ))}
+    </Menu>
+  );
+};
+
+export default connect((state) => ({
+  navigation: state.navigation.items,
+}))(View);

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

@@ -0,0 +1,22 @@
+import imageSVG from '@plone/volto/icons/image.svg';
+import NavigationBlockView from './View';
+import NavigationBlockEdit from './Edit';
+
+export default (config) => {
+  config.blocks.blocksConfig.navigationBlock = {
+    id: 'navigationBlock',
+    title: 'Navigation Block',
+    icon: imageSVG,
+    group: 'common',
+    view: NavigationBlockView,
+    edit: NavigationBlockEdit,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+  return config;
+};

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

@@ -0,0 +1,43 @@
+const pagesSchema = {
+  title: 'Page',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['title', 'url'],
+    },
+  ],
+  properties: {
+    title: {
+      title: 'Title',
+    },
+    url: {
+      title: 'Url',
+      widget: 'url',
+    },
+  },
+  required: [],
+};
+
+export default {
+  title: 'Navigation block',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['parent', 'pages'],
+    },
+  ],
+  properties: {
+    parent: {
+      title: 'Parent',
+      widget: 'url',
+    },
+    pages: {
+      title: 'Pages',
+      schema: pagesSchema,
+      widget: 'object_list',
+    },
+  },
+  required: [],
+};

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

@@ -0,0 +1,42 @@
+@import (multiple, reference, optional) '../../theme.config';
+
+@type: extra;
+@element: custom;
+
+.ui.menu.navigation-block {
+  flex-wrap: wrap;
+  border: none;
+  box-shadow: unset;
+
+  .item {
+    padding: 0;
+    border: none;
+
+    &.active {
+      a {
+        color: @primaryColor;
+        // text-decoration: none;
+        // border-bottom: 1px solid @secondaryColor;
+      }
+    }
+
+    &:hover,
+    &.active:hover {
+      background-color: unset;
+    }
+
+    &::before {
+      content: none;
+    }
+
+    &:not(:last-child)::after {
+      top: 0%;
+      right: 0px;
+      width: 1px;
+      height: 80%;
+      margin: 0 0.3rem;
+      background: @secondaryColor;
+      content: '';
+    }
+  }
+}