diff --git a/frontend/app/components/Dashboard/components/MetricTypeSelector.tsx b/frontend/app/components/Dashboard/components/MetricTypeSelector.tsx
new file mode 100644
index 000000000..5cd8b556a
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/MetricTypeSelector.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Segmented } from 'antd';
+import { LineChart, AlignStartVertical } from 'lucide-react';
+import { Icon } from 'UI'; //dashboards/user-journey , dashboards/heatmap-2, signpost-split
+import {
+ TIMESERIES,
+ FUNNEL,
+ USER_PATH,
+ HEATMAP,
+ RETENTION,
+} from 'App/constants/card';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
+
+const types = [
+ {
+ icon: ,
+ value: TIMESERIES,
+ },
+ {
+ icon: ,
+ value: FUNNEL,
+ },
+ {
+ icon: ,
+ value: USER_PATH,
+ },
+ {
+ icon: ,
+ value: HEATMAP,
+ },
+ {
+ icon: ,
+ value: RETENTION,
+ },
+];
+
+function MetricTypeSelector() {
+ const { metricStore } = useStore();
+ const metric = metricStore.instance;
+
+ const onChange = (type: string) => {
+ metricStore.changeType(type);
+ };
+
+ const selected = types.find((i) => i.value === metric.metricType) || types[0];
+ return (
+
+ );
+}
+
+export default observer(MetricTypeSelector);
diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index a5b962bec..931de3089 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -501,6 +501,7 @@ function WidgetChart(props: Props) {
}
}
+ console.log('Unknown metric type', metricType, viewType);
return
Unknown metric type
;
};
@@ -509,7 +510,7 @@ function WidgetChart(props: Props) {
{
return DROPDOWN_OPTIONS.map((option: any) => {
@@ -26,18 +26,6 @@ function MetricTypeDropdown(props: Props) {
});
}, []);
- React.useEffect(() => {
- const queryCardType = props.query.get('type');
- if (queryCardType && options.length > 0 && metric.metricType) {
- const type: Option = options.find((i) => i.value === queryCardType) as Option;
- if (type.disabled) {
- return;
- }
- setTimeout(() => onChange(type.value), 0);
- }
- // setTimeout(() => onChange(USER_PATH), 0);
- }, []);
-
const onChange = (type: string) => {
metricStore.changeType(type);
};
@@ -51,7 +39,7 @@ function MetricTypeDropdown(props: Props) {
value={
DROPDOWN_OPTIONS.find((i: any) => i.value === metric.metricType) || DROPDOWN_OPTIONS[0]
}
- onChange={props.onSelect}
+ onChange={({ value }) => onChange(value.value)}
components={{
SingleValue: ({ children, ...props }: any) => {
const {
diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx
index 7bab4e8c7..2ec4edeca 100644
--- a/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx
@@ -2,10 +2,13 @@ import React from 'react';
import cn from 'classnames';
import WidgetName from 'Components/Dashboard/components/WidgetName';
import { useStore } from 'App/mstore';
-import { useObserver } from 'mobx-react-lite';
+import { observer } from 'mobx-react-lite';
import AddToDashboardButton from 'Components/Dashboard/components/AddToDashboardButton';
import { Button, Space } from 'antd';
import CardViewMenu from 'Components/Dashboard/components/WidgetView/CardViewMenu';
+import { Link } from 'lucide-react'
+import copy from 'copy-to-clipboard';
+import MetricTypeSelector from "../MetricTypeSelector";
interface Props {
onClick?: () => void;
@@ -14,8 +17,12 @@ interface Props {
function WidgetViewHeader({ onClick, onSave }: Props) {
const { metricStore } = useStore();
- const widget = useObserver(() => metricStore.instance);
+ const widget = metricStore.instance;
+ const copyUrl = () => {
+ const url = window.location.href;
+ copy(url)
+ }
return (
+
+ }>