diff --git a/app/scripts/components/exploration/components/datasets/dataset-chart.tsx b/app/scripts/components/exploration/components/datasets/dataset-chart.tsx
index cfb89f1f2..35482afc8 100644
--- a/app/scripts/components/exploration/components/datasets/dataset-chart.tsx
+++ b/app/scripts/components/exploration/components/datasets/dataset-chart.tsx
@@ -3,12 +3,15 @@ import { useTheme } from 'styled-components';
import { extent, scaleLinear, ScaleTime, line, ScaleLinear } from 'd3';
import { useAtomValue } from 'jotai';
import { AnimatePresence, motion } from 'framer-motion';
-
+import styled from 'styled-components';
+import {
+ CollecticonCog,
+} from '@devseed-ui/collecticons';
import { isExpandedAtom } from '../../atoms/timeline';
import { RIGHT_AXIS_SPACE } from '../../constants';
import { DatasetTrackMessage } from './dataset-track-message';
import { DataMetric } from './analysis-metrics';
-
+import LayerChartAnalysisMenu from './layer-chart-analysis-menu';
import { getNumForChart } from '$components/common/chart/utils';
import {
TimelineDatasetAnalysisSuccess,
@@ -24,10 +27,19 @@ interface DatasetChartProps {
dataset: TimelineDatasetSuccess;
activeMetrics: DataMetric[];
highlightDate?: Date;
+ onUpdateSettings: (type: string, m: DataMetric[]) => void;
}
+const ChartAnalysisMenu = styled.div`
+ width: inherit;
+ position: relative;
+ display: flex;
+ justify-content: end;
+ margin-right: 2.3rem;
+`;
+
export function DatasetChart(props: DatasetChartProps) {
- const { xScaled, width, isVisible, dataset, activeMetrics, highlightDate } =
+ const { xScaled, width, isVisible, dataset, activeMetrics, highlightDate, onUpdateSettings } =
props;
const analysisData = dataset.analysis as TimelineDatasetAnalysisSuccess;
@@ -58,6 +70,8 @@ export function DatasetChart(props: DatasetChartProps) {
);
}, [yExtent, height]);
+ const chartAnalysisIconTrigger: JSX.Element = ;
+
return (
{!activeMetrics.length && (
@@ -65,6 +79,9 @@ export function DatasetChart(props: DatasetChartProps) {
There are no active metrics to visualize.
)}
+
+
+
@@ -195,12 +212,13 @@ function AxisGrid(props: AxisGridProps) {
>
{yLabel && (
{yLabel}
diff --git a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx b/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
index a324596fd..ad61a39ca 100644
--- a/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
+++ b/app/scripts/components/exploration/components/datasets/dataset-list-item.tsx
@@ -31,6 +31,7 @@ import {
import { useDatasetHover } from '$components/exploration/hooks/use-dataset-hover';
import {
useTimelineDatasetAtom,
+ useTimelineDatasetSettings,
useTimelineDatasetVisibility
} from '$components/exploration/atoms/hooks';
import {
@@ -102,6 +103,8 @@ export function DatasetListItem(props: DatasetListItemProps) {
const [isVisible, setVisible] = useTimelineDatasetVisibility(datasetAtom);
const [modalLayerInfo, setModalLayerInfo] = React.useState();
+ const [, setSetting] = useTimelineDatasetSettings(datasetAtom);
+
const queryClient = useQueryClient();
const retryDatasetMetadata = useCallback(() => {
@@ -252,6 +255,7 @@ export function DatasetListItem(props: DatasetListItemProps) {
dataset={dataset}
activeMetrics={analysisMetrics}
highlightDate={dataPoint?.date}
+ onUpdateSettings={setSetting}
/>
)}
>
diff --git a/app/scripts/components/exploration/components/datasets/layer-chart-analysis-menu.tsx b/app/scripts/components/exploration/components/datasets/layer-chart-analysis-menu.tsx
new file mode 100644
index 000000000..bf597036b
--- /dev/null
+++ b/app/scripts/components/exploration/components/datasets/layer-chart-analysis-menu.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Dropdown } from '@devseed-ui/dropdown';
+import AnalysisMetrics, { DataMetric } from './analysis-metrics';
+import { TipButton } from '$components/common/tip-button';
+
+
+interface ChartAnalysisProps {
+ triggerIcon: JSX.Element;
+ onChange: (changeType: string, item) => void;
+ activeMetrics: DataMetric[];
+}
+
+const IconButton = styled(TipButton)`
+ z-index: 1;
+`;
+
+export default function LayerChartAnalysisMenu ({activeMetrics, triggerIcon, onChange}: ChartAnalysisProps) {
+ return (
+ (
+
+ {triggerIcon}
+
+ )}
+ >
+ onChange('analysisMetrics', m)}
+ />
+
+ );
+}
\ No newline at end of file