@eeacms/volto-n2k 0.1.1

package/src/components/manage/Blocks/BubbleChart/BubbleChart.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import _uniqueId from 'lodash/uniqueId';
+import { pack, hierarchy } from 'd3';
+import * as d3 from 'd3';
+import { adjustBrightness, getContrastColor } from '@eeacms/volto-n2k/helpers';
+import { FormattedValue } from '@eeacms/volto-datablocks/Utils';
+import ChartContext from './ChartContext';
+
+function BubbleChart(props) {
+  const { chartData, interpolation } = props;
+  const { element, height, width, popup, setPopup } = React.useContext(
+    ChartContext,
+  );
+  const root = pack().size([width, height]).padding(10)(
+    hierarchy({ children: chartData })
+      .sum((d) => d.value)
+      .sort((a, b) => b.value - a.value),
+  );
+  const backgroundColor = React.useCallback(
+    (value) => {
+      if (chartData?.[0]?.maxValue && chartData?.[0]?.minValue) {
+        return d3
+          .scaleSequential()
+          .domain([chartData[0].minValue, chartData[0].maxValue])
+          .interpolator(d3[interpolation])(value);
+      }
+      return '#000';
+    },
+    /* eslint-disable-next-line */
+    [chartData, interpolation],
+  );
+
+  return (
+    <React.Fragment>
+      {root.leaves().map((leaf, index) => {
+        const data = leaf.data;
+        if (!leaf.r) return '';
+        const id = _uniqueId('leaf-');
+
+        return (
+          <g
+            key={`leaf-${data.name}`}
+            style={{
+              transform: `translate(${leaf.x}px, ${leaf.y}px)`,
+            }}
+          >
+            <circle
+              id={id}
+              r={leaf.r}
+              fill={
+                popup?.id === `${index}_leaf_${data.name}`
+                  ? adjustBrightness(backgroundColor(leaf.value), -20)
+                  : backgroundColor(leaf.value)
+              }
+              onFocus={() => {}}
+              onBlur={() => {}}
+              onMouseMoveCapture={(event) => {
+                const elementPosition = element.parentNode.getBoundingClientRect();
+                setPopup({
+                  id: `${index}_leaf_${data.name}`,
+                  clientX: event.clientX - elementPosition.x,
+                  clientY: event.clientY - elementPosition.y - 16,
+                  content: (
+                    <>
+                      <p>{data.name}</p>
+                    </>
+                  ),
+                });
+              }}
+              onMouseOut={() => {
+                setPopup(null);
+              }}
+            />
+            <text
+              className="bubble-text"
+              fill={getContrastColor(backgroundColor(leaf.value))}
+            >
+              <tspan x={0} y={0}>
+                <FormattedValue
+                  value={data.name}
+                  textTemplate={props.data.yTextTemplate}
+                  specifier={props.data.ySpecifier}
+                  wrapped={false}
+                />
+              </tspan>
+              <tspan x={0} y={'28px'}>
+                <FormattedValue
+                  value={data.value}
+                  textTemplate={props.data.xTextTemplate}
+                  specifier={props.data.xSpecifier}
+                  wrapped={false}
+                />
+              </tspan>
+            </text>
+          </g>
+        );
+      })}
+    </React.Fragment>
+  );
+}
+export default BubbleChart;

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

@@ -0,0 +1,67 @@
+import React, { useState, useRef } from 'react';
+import cx from 'classnames';
+import ChartContext from './ChartContext';
+
+/**
+ * example:
+ * <Chart width="100%" height="400px">
+ *   <Bars />
+ *   <Legend />
+ * </Chart>
+ */
+
+function Chart(props) {
+  const [popup, setPopup] = useState();
+  const chartWrapper = useRef();
+  const svgRef = useRef();
+  const popupRef = useRef();
+  const { margin = { top: 20, right: 30, bottom: 70, left: 40 } } = props;
+
+  // const dispose = () => {
+  //   const svg = select(svgRef.current);
+  //   svg.selectAll('*').remove();
+  // };
+
+  return (
+    <ChartContext.Provider
+      value={{
+        element: svgRef.current,
+        popupElement: popupRef.current,
+        height: props.height,
+        width: props.width,
+        margin,
+        popup,
+        setPopup,
+      }}
+    >
+      <div ref={chartWrapper} className="chart-wrapper">
+        <svg
+          viewBox={`0 0 ${props.width} ${props.height}`}
+          preserveAspectRatio="xMinYMin meet"
+          ref={svgRef}
+        >
+          {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/BubbleChart/ChartContext.jsx

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

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import Chart from './Chart';
+import BubbleChart from './BubbleChart';
+
+import './style.less';
+
+const View = (props) => {
+  const [chartData, setChartData] = React.useState([]);
+  const { x, y, interpolation = 'interpolateBlues' } = props.data;
+  const data = props.provider_data || {};
+
+  React.useEffect(() => {
+    if (!x || !y || !data[x]?.length || !data[y]?.length) return;
+    let total = 0;
+    let maxValue = -Infinity;
+    let minValue = Infinity;
+    data[x].forEach((value) => {
+      total += value;
+      if (value > maxValue) {
+        maxValue = value;
+      }
+      if (value < minValue) {
+        minValue = value;
+      }
+    });
+    setChartData([
+      ...data[x].map((_, index) => ({
+        name: data[y][index],
+        value: data[x][index],
+        percentage: data[x][index] / total,
+        maxValue,
+        minValue,
+      })),
+    ]);
+    /* eslint-disable-next-line */
+  }, [x, y, data]);
+
+  if (__SERVER__) return '';
+  return (
+    <React.Fragment>
+      <div className="bubble-chart">
+        {data?.[x]?.length ? (
+          <p style={{ textAlign: 'center' }}>
+            The <span className="highlight">{data[x].length}</span> Member
+            States with the highest number of sites
+          </p>
+        ) : (
+          ''
+        )}
+        <Chart width={800} height={800}>
+          <BubbleChart
+            data={props.data}
+            x={x}
+            y={y}
+            chartData={chartData}
+            interpolation={interpolation}
+          />
+        </Chart>
+      </div>
+    </React.Fragment>
+  );
+};
+export default View;

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

@@ -0,0 +1,17 @@
+import BubbleChart 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,
+      bubble_chart: {
+        view: BubbleChart,
+        getSchema: getSchema,
+        title: 'Bubble chart',
+      },
+    },
+  };
+  return config;
+};

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

@@ -0,0 +1,124 @@
+import React from 'react';
+
+const getSchema = (props) => {
+  const data = props.provider_data || {};
+  const choices = Object.keys(data).map((key) => [key, key]);
+
+  return {
+    title: 'Bubble chart',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['x', 'y', 'interpolation'],
+      },
+      {
+        id: 'size_column',
+        title: 'Size column',
+        fields: ['xSpecifier', 'xTextTemplate'],
+      },
+      {
+        id: 'label_column',
+        title: 'Label column',
+        fields: ['ySpecifier', 'yTextTemplate'],
+      },
+    ],
+
+    properties: {
+      x: {
+        title: 'Size column',
+        choices,
+      },
+      y: {
+        title: 'Label column',
+        choices,
+      },
+      interpolation: {
+        title: 'Color schema',
+        choices: [
+          'interpolateBlues',
+          'interpolateBrBG',
+          'interpolateBuGn',
+          'interpolateBuPu',
+          'interpolateCividis',
+          'interpolateCool',
+          'interpolateCubehelixDefault',
+          'interpolateGnBu',
+          'interpolateGreens',
+          'interpolateGreys',
+          'interpolateInferno',
+          'interpolateMagma',
+          'interpolateOrRd',
+          'interpolateOranges',
+          'interpolatePRGn',
+          'interpolatePiYG',
+          'interpolatePlasma',
+          'interpolatePuBu',
+          'interpolatePuBuGn',
+          'interpolatePuOr',
+          'interpolatePuRd',
+          'interpolatePurples',
+          'interpolateRainbow',
+          'interpolateRdBu',
+          'interpolateRdGy',
+          'interpolateRdPu',
+          'interpolateRdYlBu',
+          'interpolateRdYlGn',
+          'interpolateReds',
+          'interpolateSinebow',
+          'interpolateSpectral',
+          'interpolateTurbo',
+          'interpolateViridis',
+          'interpolateWarm',
+          'interpolateYlGn',
+          'interpolateYlGnBu',
+          'interpolateYlOrBr',
+          'interpolateYlOrRd',
+        ].map((item) => [item, item]),
+      },
+      xSpecifier: {
+        title: 'Format specifier',
+        description: (
+          <>
+            See{' '}
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://github.com/d3/d3-format"
+            >
+              D3 format documentation
+            </a>
+          </>
+        ),
+      },
+      xTextTemplate: {
+        title: 'Text template',
+        description: 'Add suffix/prefix to text. Use {} for value placeholder',
+      },
+      ySpecifier: {
+        title: 'Format specifier',
+        description: (
+          <>
+            See{' '}
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://github.com/d3/d3-format"
+            >
+              D3 format documentation
+            </a>
+          </>
+        ),
+      },
+      yTextTemplate: {
+        title: 'Text template',
+        description: 'Add suffix/prefix to text. Use {} for value placeholder',
+      },
+    },
+
+    required: [],
+  };
+};
+
+export default getSchema;

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

@@ -0,0 +1,12 @@
+.bubble-chart {
+  .bubble-text {
+    font-size: 22px;
+    font-weight: 600;
+    text-anchor: middle;
+  }
+
+  .highlight {
+    color: #ed1834;
+    font-weight: bold;
+  }
+}

package/src/components/manage/Blocks/CarouselHorizontal/HorizontalView.jsx

@@ -0,0 +1,221 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { withRouter } from 'react-router';
+import loadable from '@loadable/component';
+import { Icon, RenderBlocks } from '@plone/volto/components';
+import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
+import rightArrowSVG from '@eeacms/volto-tabs-block/icons/right-arrow.svg';
+import leftArrowSVG from '@eeacms/volto-tabs-block/icons/left-arrow.svg';
+import cx from 'classnames';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import '@eeacms/volto-tabs-block/less/carousel.less';
+
+const Slider = loadable(() => import('react-slick'));
+
+const Dots = (props) => {
+  const { activeTab = null, tabsList = [], slider = {} } = props;
+  return slider.current && tabsList.length > 1 ? (
+    <div className="slick-dots-wrapper">
+      <div className="slick-line" />
+      <ul className={cx('slick-dots ui container', props.uiContainer)}>
+        {tabsList.map((tab, index) => (
+          <li
+            key={`dot-${tab}`}
+            className={cx({ 'slick-active': activeTab === tab })}
+          >
+            <button
+              aria-label={`Select slide ${index + 1}`}
+              onClick={() => {
+                slider.current.slickGoTo(index);
+              }}
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+  ) : (
+    ''
+  );
+};
+
+const ArrowsGroup = (props) => {
+  const { activeTab = null, tabsList = [], slider = {} } = props;
+  const currentSlide = tabsList.indexOf(activeTab);
+  const slideCount = tabsList.length;
+
+  return slider.current ? (
+    <div
+      className={cx({
+        'slick-arrows': true,
+        'one-arrow': currentSlide === 0 || currentSlide === slideCount - 1,
+      })}
+    >
+      {currentSlide > 0 ? (
+        <button
+          aria-label="Previous slide"
+          className="slick-arrow slick-prev"
+          onClick={slider.current.slickPrev}
+        >
+          <Icon name={leftArrowSVG} size="50px" />
+        </button>
+      ) : (
+        ''
+      )}
+      {currentSlide < slideCount - 1 ? (
+        <button
+          aria-label="Next slide"
+          className="slick-arrow slick-next"
+          onClick={slider.current.slickNext}
+        >
+          {currentSlide === 0 && props.learnMore ? (
+            <p className="learn-more">{props.learnMore}</p>
+          ) : (
+            ''
+          )}
+          <Icon name={rightArrowSVG} size="50px" />
+        </button>
+      ) : (
+        ''
+      )}
+    </div>
+  ) : (
+    ''
+  );
+};
+
+const View = (props) => {
+  const slider = React.useRef(null);
+  const img = React.useRef(null);
+  const [imgHeight, setImgHeight] = React.useState(0);
+  const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
+  const {
+    activeTab = null,
+    data = {},
+    hashlink = {},
+    metadata = {},
+    tabsList = [],
+    tabs = {},
+    setActiveTab = () => {},
+  } = props;
+  const activeTabIndex = tabsList.indexOf(activeTab);
+  // const tabData = tabs[activeTab] || {};
+  const uiContainer = data.align === 'full' ? 'ui container' : false;
+  const image = data.image || null;
+
+  const settings = {
+    autoplay: false,
+    arrows: false,
+    dots: false,
+    speed: 500,
+    initialSlide: 0,
+    lazyLoad: 'ondemand',
+    swipe: true,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    touchMove: true,
+    beforeChange: (oldIndex, index) => {
+      setActiveTab(tabsList[index]);
+    },
+  };
+
+  const panes = tabsList.map((tab, index) => {
+    return {
+      id: tab,
+      renderItem: (
+        <React.Fragment key={`slide-${tab}`}>
+          <RenderBlocks {...props} metadata={metadata} content={tabs[tab]} />
+          {index === 0 ? (
+            <div
+              className="divider"
+              style={{ height: `${imgHeight - 80}px` }}
+            />
+          ) : (
+            ''
+          )}
+        </React.Fragment>
+      ),
+    };
+  });
+
+  const updateImageHeight = () => {
+    setImgHeight(img.current?.height || 0);
+  };
+
+  React.useEffect(() => {
+    const urlHash = props.location.hash.substring(1) || '';
+    if (
+      hashlink.counter > 0 ||
+      (hashlink.counter === 0 && urlHash && !hashlinkOnMount)
+    ) {
+      const id = hashlink.hash || urlHash || '';
+      const index = tabsList.indexOf(id);
+      const parentId = data.id || props.id;
+      const parent = document.getElementById(parentId);
+      // TODO: Find the best way to add offset relative to header
+      //       The header can be static on mobile and relative on > mobile
+      const headerWrapper = document.querySelector('.header-wrapper');
+      const offsetHeight = headerWrapper?.offsetHeight || 0;
+      if (
+        id !== parentId &&
+        parentId === hashlink.data.parentId &&
+        index > -1 &&
+        parent
+      ) {
+        if (activeTabIndex !== index) {
+          slider.current.slickGoTo(index);
+        }
+        props.scrollToTarget(parent, offsetHeight);
+      } else if (id === parentId && parent) {
+        props.scrollToTarget(parent, offsetHeight);
+      }
+    }
+    if (!hashlinkOnMount) {
+      setHashlinkOnMount(true);
+    }
+    /* eslint-disable-next-line */
+  }, [hashlink.counter]);
+
+  React.useEffect(() => {
+    updateImageHeight();
+    img.current.onload = () => {
+      updateImageHeight();
+    };
+    window.addEventListener('resize', updateImageHeight);
+    return () => {
+      window.removeEventListener('resize', updateImageHeight);
+    };
+    /* eslint-disable-next-line */
+  }, []);
+
+  return (
+    <>
+      <Slider {...settings} ref={slider} className={cx(uiContainer)}>
+        {panes.length ? panes.map((pane) => pane.renderItem) : ''}
+      </Slider>
+      <img
+        ref={img}
+        className={cx('slick-image', { hidden: activeTabIndex !== 0 })}
+        src={`${image}/@@images/image/preview`}
+        alt="Logo"
+      />
+      <ArrowsGroup
+        activeTab={activeTab}
+        tabsList={tabsList}
+        slider={slider}
+        learnMore={data.learnMore}
+      />
+      <Dots activeTab={activeTab} tabsList={tabsList} slider={slider} />
+    </>
+  );
+};
+
+export default compose(
+  connect((state) => {
+    return {
+      hashlink: state.hashlink,
+    };
+  }),
+  withScrollToTarget,
+)(withRouter(View));

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

@@ -0,0 +1,19 @@
+import HorizontalCarouselView from './HorizontalView';
+import carouselSchema from './schema';
+
+export { HorizontalCarouselView, carouselSchema };
+
+export default (config) => {
+  config.blocks.blocksConfig.tabs_block = {
+    ...(config.blocks.blocksConfig.tabs_block || {}),
+    templates: {
+      ...(config.blocks.blocksConfig.tabs_block?.templates || {}),
+      carousel_n2k: {
+        title: 'Carousel Natura 2000',
+        view: HorizontalCarouselView,
+        schema: carouselSchema,
+      },
+    },
+  };
+  return config;
+};

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

@@ -0,0 +1,32 @@
+export default () => ({
+  title: 'Carousel block',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['theme', 'image', 'learnMore'],
+    },
+  ],
+  properties: {
+    theme: {
+      title: 'Theme',
+      type: 'array',
+      choices: [
+        ['light', 'Light'],
+        ['dark', 'Dark'],
+        ['grey', 'Grey'],
+      ],
+      default: 'light',
+    },
+    image: {
+      title: 'Image',
+      widget: 'object_by_path',
+    },
+    learnMore: {
+      title: 'Learn more',
+      widget: 'textarea',
+      description: 'Learn more placeholder apearing only on first slide',
+    },
+  },
+  required: [],
+});