diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx index 4ade052f2..51b4ef53f 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx @@ -46,9 +46,6 @@ function ClickMapCard({
No data available for the selected period. -
- -
} show={true} @@ -56,7 +53,7 @@ function ClickMapCard({ ) } - if (!metricStore.instance.data || !customSession) { + if (!metricStore.instance.data?.sessionId || !customSession) { return
Loading session
} diff --git a/frontend/app/components/Dashboard/components/ClickMapRagePicker/ClickMapRagePicker.tsx b/frontend/app/components/Dashboard/components/ClickMapRagePicker/ClickMapRagePicker.tsx index f13a21682..580bd1ed7 100644 --- a/frontend/app/components/Dashboard/components/ClickMapRagePicker/ClickMapRagePicker.tsx +++ b/frontend/app/components/Dashboard/components/ClickMapRagePicker/ClickMapRagePicker.tsx @@ -1,27 +1,40 @@ import React from 'react'; -import { Checkbox} from "UI"; +import { Checkbox } from "UI"; +import { Button } from 'antd' import { useStore } from 'App/mstore'; import { observer } from 'mobx-react-lite'; function ClickMapRagePicker() { - const { metricStore } = useStore(); + const { metricStore, dashboardStore } = useStore(); const onToggle = (e: React.ChangeEvent) => { - metricStore.setClickMaps(e.target.checked) + metricStore.setClickMapsRage(e.target.checked) + } + + const refreshHeatmapSession = async () => { + metricStore.instance.updateKey('data', { sessionId: null, domURL: [] }) + await dashboardStore.fetchMetricChartData( + metricStore.instance, + {...metricStore.instance.toJson() }, + false, + dashboardStore.period) + metricStore.instance.updateKey('hasChanged', true) } React.useEffect(() => { return () => { - metricStore.setClickMaps(false) + metricStore.setClickMapsRage(false) } }, []) return ( -
+
+ +
); } diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx index 733982788..d4e622a1f 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx @@ -1,8 +1,6 @@ import ExampleFunnel from './Examples/Funnel'; import ExamplePath from './Examples/Path'; import ExampleTrend from './Examples/Trend'; -import Trend from './Examples/Trend'; -import PerfBreakdown from './Examples/PerfBreakdown'; import ByBrowser from './Examples/SessionsBy/ByBrowser'; import BySystem from './Examples/SessionsBy/BySystem'; import ByCountry from './Examples/SessionsBy/ByCountry'; @@ -21,7 +19,6 @@ import { import { FilterKey } from 'Types/filter/filterType'; import { Activity, BarChart, TableCellsMerge, TrendingUp } from 'lucide-react'; import WebVital from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/WebVital'; -import Bars from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/Bars'; import ByIssues from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByIssues'; import InsightsExample from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/InsightsExample'; import ByUser from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUser'; diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx index 1a156615b..267807ec3 100644 --- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx +++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx @@ -1,7 +1,6 @@ import React, {useState, useRef, useEffect} from 'react'; import CustomMetricLineChart from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricLineChart'; import CustomMetricPercentage from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPercentage'; -import CustomMetricTable from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable'; import CustomMetricPieChart from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart'; import {Styles} from 'App/components/Dashboard/Widgets/common'; import {observer} from 'mobx-react-lite'; @@ -215,7 +214,7 @@ function WidgetChart(props: Props) { ); } return ( - + ); } diff --git a/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx b/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx index cb548f40a..9bcc199b6 100644 --- a/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx +++ b/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx @@ -1,137 +1,128 @@ -import React from 'react'; +import { Button, Space, Switch } from 'antd'; import cn from 'classnames'; +import { observer } from 'mobx-react-lite'; +import React from 'react'; + +import { HEATMAP, USER_PATH } from 'App/constants/card'; +import { useStore } from 'App/mstore'; +import ClickMapRagePicker from 'Components/Dashboard/components/ClickMapRagePicker'; + import WidgetWrapper from '../WidgetWrapper'; -import {useStore} from 'App/mstore'; -// import {SegmentSelection, Button, Icon} from 'UI'; -import {observer} from 'mobx-react-lite'; -// import {FilterKey} from 'Types/filter/filterType'; -// import WidgetDateRange from '../WidgetDateRange/WidgetDateRange'; -import ClickMapRagePicker from "Components/Dashboard/components/ClickMapRagePicker"; -// import DashboardSelectionModal from '../DashboardSelectionModal/DashboardSelectionModal'; -import {HEATMAP, TABLE, TIMESERIES, RETENTION, USER_PATH} from 'App/constants/card'; -import {Space, Switch} from 'antd'; -// import AddToDashboardButton from "Components/Dashboard/components/AddToDashboardButton"; interface Props { - className?: string; - name: string; - isEditing?: boolean; + className?: string; + name: string; + isEditing?: boolean; } function WidgetPreview(props: Props) { - const {className = ''} = props; - const {metricStore, dashboardStore} = useStore(); - // const dashboards = dashboardStore.dashboards; - const metric: any = metricStore.instance; - // const isTimeSeries = metric.metricType === TIMESERIES; - // const isTable = metric.metricType === TABLE; - // const isRetention = metric.metricType === RETENTION; - // const disableVisualization = metric.metricOf === FilterKey.SESSIONS || metric.metricOf === FilterKey.ERRORS; - // - // const changeViewType = (_, {name, value}: any) => { - // metric.update({[name]: value}); - // } + const { className = '' } = props; + const { metricStore, dashboardStore } = useStore(); + const metric: any = metricStore.instance; - return ( - <> -
-
-

- {props.name} -

-
- {metric.metricType === USER_PATH && ( - { - e.preventDefault(); - metric.update({hideExcess: !metric.hideExcess}); - }} - > - - - Hide Minor Paths - - - )} + return ( + <> +
+
+

{props.name}

+
+ {metric.metricType === USER_PATH && ( + { + e.preventDefault(); + metric.update({ hideExcess: !metric.hideExcess }); + }} + > + + + + Hide Minor Paths + + + + )} - {/*{isTimeSeries && (*/} - {/* <>*/} - {/* Visualization*/} - {/* */} - {/* */} - {/*)}*/} + {/*{isTimeSeries && (*/} + {/* <>*/} + {/* Visualization*/} + {/* */} + {/* */} + {/*)}*/} - {/*{!disableVisualization && isTable && (*/} - {/* <>*/} - {/* Visualization*/} - {/* */} - {/* */} - {/*)}*/} + {/*{!disableVisualization && isTable && (*/} + {/* <>*/} + {/* Visualization*/} + {/* */} + {/* */} + {/*)}*/} - {/*{isRetention && (*/} - {/* <>*/} - {/* Visualization*/} - {/* */} - {/**/} - {/*)}*/} + {/*{isRetention && (*/} + {/* <>*/} + {/* Visualization*/} + {/* */} + {/**/} + {/*)}*/} -
- {metric.metricType === HEATMAP ? ( - - ) : null} +
+ {metric.metricType === HEATMAP ? ( + + ) : null} - - {/* add to dashboard */} - {/*{metric.exists() && (*/} - {/* */} - {/*)}*/} -
-
-
- -
-
- - ); + {/* add to dashboard */} + {/*{metric.exists() && (*/} + {/* */} + {/*)}*/} +
+
+
+ +
+
+ + ); } export default observer(WidgetPreview); diff --git a/frontend/app/mstore/metricStore.ts b/frontend/app/mstore/metricStore.ts index e9fc224d7..6119ddff5 100644 --- a/frontend/app/mstore/metricStore.ts +++ b/frontend/app/mstore/metricStore.ts @@ -91,7 +91,7 @@ export default class MetricStore { } } - setClickMaps(val: boolean) { + setClickMapsRage(val: boolean) { this.clickMapFilter = val; } @@ -209,6 +209,10 @@ export default class MetricStore { } } + setInstance(metric: Widget) { + this.instance = metric; + } + addToList(metric: Widget) { this.metrics.push(metric); }