Merge branch 'main' into feature/map-explore

.env

@@ -1,5 +1,6 @@
 APP_TITLE=Dashboard Delta
 APP_DESCRIPTION=Earth changing dashboard
+APP_CONTACT_EMAIL=[email protected]
 
 # If the app is being served in from a subfolder, the domain url must be set.
 # For example, if the app is served from /mysite:

.parcelrc

@@ -1,8 +1,8 @@
 {
   "extends": ["@parcel/config-default"],
   "reporters": ["...", "@parcel/reporter-bundle-analyzer"],
-  "resolvers": ["parcel-resolver-evolution", "@parcel/resolver-glob", "..."],
+  "resolvers": ["parcel-resolver-thematics", "@parcel/resolver-glob", "..."],
   "transformers": {
-    "*.mdx": ["parcel-transformer-mdx-front", "@parcel/transformer-mdx", "..."]
+    "*.mdx": ["parcel-transformer-mdx-frontmatter", "parcel-transformer-mdx"]
   }
 }

app/scripts/components/about/index.js

@@ -13,7 +13,7 @@ function About() {
   const thematic = useThematicArea();
   const pageMdx = useMdxPageLoader(thematic?.content);
 
-  if (!thematic) return resourceNotFound();
+  if (!thematic) throw resourceNotFound();
 
   return (
     <PageMainContent>

app/scripts/components/datasets/hub/index.js

@@ -13,7 +13,7 @@ import { useThematicArea } from '../../../utils/thematics';
 
 function DatasetsHub() {
   const thematic = useThematicArea();
-  if (!thematic) return resourceNotFound();
+  if (!thematic) throw resourceNotFound();
 
   return (
     <PageMainContent>

app/scripts/components/datasets/s-explore/index.js

@@ -140,7 +140,7 @@ function DatasetsExplore() {
     setPanelRevealed(!isMediumDown);
   }, [isMediumDown]);
 
-  if (!thematic || !dataset) return resourceNotFound();
+  if (!thematic || !dataset) throw resourceNotFound();
 
   return (
     <>

app/scripts/components/datasets/s-overview/index.js

@@ -21,7 +21,7 @@ function DatasetsOverview() {
   const dataset = useThematicAreaDataset();
   const pageMdx = useMdxPageLoader(dataset?.content);
 
-  if (!thematic || !dataset) return resourceNotFound();
+  if (!thematic || !dataset) throw resourceNotFound();
 
   return (
     <>

app/scripts/components/datasets/s-usage/index.js

@@ -16,7 +16,7 @@ function DatasetsUsage() {
   const thematic = useThematicArea();
   const dataset = useThematicAreaDataset();
 
-  if (!thematic || !dataset) return resourceNotFound();
+  if (!thematic || !dataset) throw resourceNotFound();
 
   return (
     <>

app/scripts/components/discoveries/chart/area-layer.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import T from 'prop-types';
+import styled from 'styled-components';
+import { area } from 'd3-shape';
+import { themeVal } from '@devseed-ui/theme-provider';
+import { itemWidth } from './utils';
+
+const highlightColorThemeValue = 'color.info-300a';
+
+const HighlightLabel = styled.text`
+  font-family: sans-serif;
+  font-size: 12px;
+  dominant-baseline: hanging;
+`;
+
+const HighlightLabelMarker = styled.rect`
+  width: 12px;
+  height: 12px;
+  fill: ${themeVal(highlightColorThemeValue)};
+`;
+
+const HighlightArea = styled.path`
+  d=${(props) => props.d};
+  fill: ${themeVal(highlightColorThemeValue)};
+`;
+
+// empty layer to render when there is no highlight band
+// This is to meet nivo's custom layer proptype
+export const EmptyLayer = () => {
+  return <g />;
+};
+
+/* eslint-disable react/display-name */
+
+const AreaLayer = (customProps) => (nivoProps) => {
+  const { highlightStart, highlightEnd, highlightLabel } = customProps;
+  const { series, xScale, innerWidth, innerHeight } = nivoProps;
+
+  if (series.length > 0) {
+    const startTime = highlightStart
+      ? new Date(highlightStart)
+      : series[0].data[0].data.x;
+    const endTime = highlightEnd
+      ? new Date(highlightEnd)
+      : series[0].data[series[0].data.length - 1].data.x;
+
+    const filteredData = series[0].data.filter(
+      (e) =>
+        e.data.x.getTime() > startTime.getTime() &&
+        e.data.x.getTime() < endTime.getTime()
+    );
+    // areaGenerator is used to make 'highlight band'
+    const areaGenerator = area()
+      .x0((d) => xScale(d.data.x))
+      .y0(() => innerHeight)
+      .y1(() => 0);
+
+    return (
+      <g>
+        <HighlightArea d={areaGenerator(filteredData)} />
+        <g
+          transform={`translate(${innerWidth / 2 - itemWidth / 2},${
+            innerHeight + 30
+          }) rotate(0)`}
+        >
+          <HighlightLabelMarker />
+          <HighlightLabel transform='translate(15, 0)'>
+            {highlightLabel}
+          </HighlightLabel>
+        </g>
+      </g>
+    );
+  } else return <g />;
+};
+/* eslint-enable react/display-name */
+AreaLayer.propTypes = {
+  highlightStart: T.string,
+  highlightEnd: T.string,
+  highlightLabel: T.string
+};
+
+export default AreaLayer;

app/scripts/components/discoveries/chart/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import T from 'prop-types';
+import LineChart from './line';
+import AreaLayer, { EmptyLayer } from './area-layer';
+
+const Chart = (props) => {
+  const { highlightStart, highlightEnd, highlightLabel } = props;
+  const customLayer =
+    highlightStart || highlightEnd
+      ? AreaLayer({
+          highlightStart,
+          highlightEnd,
+          highlightLabel
+        })
+      : EmptyLayer;
+  return (
+    <LineChart
+      {...props}
+      customLayerComponent={customLayer}
+      isThereHighlight={!!(highlightStart || highlightEnd)}
+    />
+  );
+};
+
+Chart.propTypes = {
+  dataPath: T.string,
+  idKey: T.string,
+  xKey: T.string,
+  yKey: T.string,
+  dateFormat: T.string,
+  highlightStart: T.string,
+  highlightEnd: T.string,
+  highlightLabel: T.string
+};
+
+export default Chart;

app/scripts/components/discoveries/chart/line.js

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react';
+import T from 'prop-types';
+import { csv, json } from 'd3-fetch';
+import { ResponsiveLine } from '@nivo/line';
+import { useMediaQuery } from '$utils/use-media-query';
+import {
+  chartMargin,
+  chartTheme,
+  fileExtensionRegex,
+  getLegendConfig,
+  getFormattedData,
+  getBottomAxis,
+  getColors
+} from './utils';
+import TooltipComponent from './tooltip';
+
+const LineChart = ({
+  dataPath,
+  idKey,
+  xKey,
+  yKey,
+  dateFormat,
+  customLayerComponent
+}) => {
+  const [data, setData] = useState([]);
+  const extension = fileExtensionRegex.exec(dataPath)[1];
+  const { isMediumUp } = useMediaQuery();
+
+  useEffect(() => {
+    const getData = async () => {
+      let data;
+      if (extension === 'csv') data = await csv(dataPath);
+      else data = await json(dataPath);
+      const formattedData = getFormattedData({
+        data,
+        extension,
+        idKey,
+        xKey,
+        yKey
+      });
+      setData(formattedData);
+    };
+    getData();
+  }, [dataPath, idKey, xKey, yKey, extension]);
+  return (
+    <div style={{ width: '100%', height: '500px' }}>
+      <ResponsiveLine
+        data={data}
+        animate={true}
+        enableCrosshair={true}
+        crosshairType='x'
+        margin={chartMargin}
+        xScale={{
+          type: 'time',
+          format: dateFormat
+        }}
+        colors={getColors(data.length)}
+        xFormat={`time:${dateFormat}`}
+        yScale={{
+          type: 'linear',
+          stacked: true
+        }}
+        enableGridX={false}
+        enablePoints={false}
+        enableSlices='x'
+        axisBottom={getBottomAxis(dateFormat, isMediumUp)}
+        legends={getLegendConfig(data, isMediumUp)}
+        layers={[
+          'grid',
+          'markers',
+          'areas',
+          customLayerComponent,
+          'lines',
+          'crosshair',
+          'slices',
+          'axes',
+          'points',
+          'legends'
+        ]}
+        sliceTooltip={TooltipComponent}
+        theme={chartTheme}
+      />
+    </div>
+  );
+};
+LineChart.propTypes = {
+  dataPath: T.string,
+  idKey: T.string,
+  xKey: T.string,
+  yKey: T.string,
+  dateFormat: T.string,
+  customLayerComponent: T.func,
+  isThereHighlight: T.bool
+};
+
+export default LineChart;

app/scripts/components/discoveries/chart/tooltip.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+import { glsp, themeVal } from '@devseed-ui/theme-provider';
+
+const TooltipWrapper = styled.div`
+  background-color: ${themeVal('color.surface')};
+  border: 1px solid ${themeVal('color.base-300a')};
+  padding: ${glsp(0.5)};
+  border-radius: ${themeVal('shape.rounded')};
+  font-size: 0.75rem;
+  > div:not(:last-child) {
+    padding-bottom: ${glsp(0.25)};
+  }
+`;
+
+const TooltipItem = styled.div`
+  width: 12px;
+  height: 12px;
+  background-color: ${(props) => props.color};
+  display: inline-block;
+  margin-right: ${glsp(0.5)};
+`;
+
+const TooltipComponent = ({ slice }) => {
+  return (
+    <TooltipWrapper>
+      <div>
+        <strong>{slice?.points[0].data.xFormatted}</strong>
+      </div>
+      {slice.points.map((point) => (
+        <div key={point.id}>
+          <TooltipItem color={point.serieColor} />
+          <strong>{point.serieId}</strong> : {point.data.yFormatted}
+        </div>
+      ))}
+    </TooltipWrapper>
+  );
+};
+
+export default TooltipComponent;