fix ui: heatmap session refresher
This commit is contained in:
nick-delirium
parent
9e1bce8207
commit
4dacaf1674
6 changed files with 137 additions and 136 deletions
|
|
@ -46,9 +46,6 @@ function ClickMapCard({
|
|||
<div className="flex items-center relative text-lg">
|
||||
<Icon name="info-circle" className="mr-2" size="18" />
|
||||
No data available for the selected period.
|
||||
<div style={{ position: 'absolute', right: -240, top: -110 }}>
|
||||
<Icon name="pointer-sessions-search" size={250} width={240} />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
show={true}
|
||||
|
|
@ -56,7 +53,7 @@ function ClickMapCard({
|
|||
)
|
||||
}
|
||||
|
||||
if (!metricStore.instance.data || !customSession) {
|
||||
if (!metricStore.instance.data?.sessionId || !customSession) {
|
||||
return <div className="py-2">Loading session</div>
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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<HTMLInputElement>) => {
|
||||
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 (
|
||||
<div className="mr-4 flex items-center cursor-pointer">
|
||||
<div className="mr-4 flex items-center gap-2 cursor-pointer">
|
||||
<Checkbox
|
||||
onChange={onToggle}
|
||||
label="Include rage clicks"
|
||||
/>
|
||||
|
||||
<Button size={'small'} onClick={refreshHeatmapSession}>Get new session</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<ClickMapCard/>
|
||||
<ClickMapCard />
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<>
|
||||
<div className={cn(className, 'bg-white rounded-xl border shadow-sm mt-0')}>
|
||||
<div className="flex items-center justify-between px-4 pt-2">
|
||||
<h2 className="text-xl">
|
||||
{props.name}
|
||||
</h2>
|
||||
<div className="flex items-center">
|
||||
{metric.metricType === USER_PATH && (
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
metric.update({hideExcess: !metric.hideExcess});
|
||||
}}
|
||||
>
|
||||
<Space>
|
||||
<Switch
|
||||
checked={metric.hideExcess}
|
||||
size="small"
|
||||
/>
|
||||
<span className="mr-4 color-gray-medium">Hide Minor Paths</span>
|
||||
</Space>
|
||||
</a>
|
||||
)}
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={cn(className, 'bg-white rounded-xl border shadow-sm mt-0')}
|
||||
>
|
||||
<div className="flex items-center justify-between px-4 pt-2">
|
||||
<h2 className="text-xl">{props.name}</h2>
|
||||
<div className="flex items-center">
|
||||
{metric.metricType === USER_PATH && (
|
||||
<a
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
metric.update({ hideExcess: !metric.hideExcess });
|
||||
}}
|
||||
>
|
||||
<Space>
|
||||
<Switch checked={metric.hideExcess} size="small" />
|
||||
<span className="mr-4 color-gray-medium">
|
||||
Hide Minor Paths
|
||||
</span>
|
||||
</Space>
|
||||
</a>
|
||||
)}
|
||||
|
||||
{/*{isTimeSeries && (*/}
|
||||
{/* <>*/}
|
||||
{/* <span className="mr-4 color-gray-medium">Visualization</span>*/}
|
||||
{/* <SegmentSelection*/}
|
||||
{/* name="viewType"*/}
|
||||
{/* className="my-3"*/}
|
||||
{/* primary*/}
|
||||
{/* size="small"*/}
|
||||
{/* onSelect={ changeViewType }*/}
|
||||
{/* value={{ value: metric.viewType }}*/}
|
||||
{/* list={ [*/}
|
||||
{/* { value: 'lineChart', name: 'Chart', icon: 'graph-up-arrow' },*/}
|
||||
{/* { value: 'progress', name: 'Progress', icon: 'hash' },*/}
|
||||
{/* ]}*/}
|
||||
{/* />*/}
|
||||
{/* </>*/}
|
||||
{/*)}*/}
|
||||
{/*{isTimeSeries && (*/}
|
||||
{/* <>*/}
|
||||
{/* <span className="mr-4 color-gray-medium">Visualization</span>*/}
|
||||
{/* <SegmentSelection*/}
|
||||
{/* name="viewType"*/}
|
||||
{/* className="my-3"*/}
|
||||
{/* primary*/}
|
||||
{/* size="small"*/}
|
||||
{/* onSelect={ changeViewType }*/}
|
||||
{/* value={{ value: metric.viewType }}*/}
|
||||
{/* list={ [*/}
|
||||
{/* { value: 'lineChart', name: 'Chart', icon: 'graph-up-arrow' },*/}
|
||||
{/* { value: 'progress', name: 'Progress', icon: 'hash' },*/}
|
||||
{/* ]}*/}
|
||||
{/* />*/}
|
||||
{/* </>*/}
|
||||
{/*)}*/}
|
||||
|
||||
{/*{!disableVisualization && isTable && (*/}
|
||||
{/* <>*/}
|
||||
{/* <span className="mr-4 color-gray-medium">Visualization</span>*/}
|
||||
{/* <SegmentSelection*/}
|
||||
{/* name="viewType"*/}
|
||||
{/* className="my-3"*/}
|
||||
{/* primary={true}*/}
|
||||
{/* size="small"*/}
|
||||
{/* onSelect={ changeViewType }*/}
|
||||
{/* value={{ value: metric.viewType }}*/}
|
||||
{/* list={[*/}
|
||||
{/* { value: 'table', name: 'Table', icon: 'table' },*/}
|
||||
{/* { value: 'pieChart', name: 'Chart', icon: 'pie-chart-fill' },*/}
|
||||
{/* ]}*/}
|
||||
{/* disabledMessage="Chart view is not supported"*/}
|
||||
{/* />*/}
|
||||
{/* </>*/}
|
||||
{/*)}*/}
|
||||
{/*{!disableVisualization && isTable && (*/}
|
||||
{/* <>*/}
|
||||
{/* <span className="mr-4 color-gray-medium">Visualization</span>*/}
|
||||
{/* <SegmentSelection*/}
|
||||
{/* name="viewType"*/}
|
||||
{/* className="my-3"*/}
|
||||
{/* primary={true}*/}
|
||||
{/* size="small"*/}
|
||||
{/* onSelect={ changeViewType }*/}
|
||||
{/* value={{ value: metric.viewType }}*/}
|
||||
{/* list={[*/}
|
||||
{/* { value: 'table', name: 'Table', icon: 'table' },*/}
|
||||
{/* { value: 'pieChart', name: 'Chart', icon: 'pie-chart-fill' },*/}
|
||||
{/* ]}*/}
|
||||
{/* disabledMessage="Chart view is not supported"*/}
|
||||
{/* />*/}
|
||||
{/* </>*/}
|
||||
{/*)}*/}
|
||||
|
||||
{/*{isRetention && (*/}
|
||||
{/* <>*/}
|
||||
{/* <span className="mr-4 color-gray-medium">Visualization</span>*/}
|
||||
{/* <SegmentSelection*/}
|
||||
{/* name="viewType"*/}
|
||||
{/* className="my-3"*/}
|
||||
{/* primary={true}*/}
|
||||
{/* size="small"*/}
|
||||
{/* onSelect={ changeViewType }*/}
|
||||
{/* value={{ value: metric.viewType }}*/}
|
||||
{/* list={[*/}
|
||||
{/* { value: 'trend', name: 'Trend', icon: 'graph-up-arrow' },*/}
|
||||
{/* { value: 'cohort', name: 'Cohort', icon: 'dice-3' },*/}
|
||||
{/* ]}*/}
|
||||
{/* disabledMessage="Chart view is not supported"*/}
|
||||
{/* />*/}
|
||||
{/*</>*/}
|
||||
{/*)}*/}
|
||||
{/*{isRetention && (*/}
|
||||
{/* <>*/}
|
||||
{/* <span className="mr-4 color-gray-medium">Visualization</span>*/}
|
||||
{/* <SegmentSelection*/}
|
||||
{/* name="viewType"*/}
|
||||
{/* className="my-3"*/}
|
||||
{/* primary={true}*/}
|
||||
{/* size="small"*/}
|
||||
{/* onSelect={ changeViewType }*/}
|
||||
{/* value={{ value: metric.viewType }}*/}
|
||||
{/* list={[*/}
|
||||
{/* { value: 'trend', name: 'Trend', icon: 'graph-up-arrow' },*/}
|
||||
{/* { value: 'cohort', name: 'Cohort', icon: 'dice-3' },*/}
|
||||
{/* ]}*/}
|
||||
{/* disabledMessage="Chart view is not supported"*/}
|
||||
{/* />*/}
|
||||
{/*</>*/}
|
||||
{/*)}*/}
|
||||
|
||||
<div className="mx-4"/>
|
||||
{metric.metricType === HEATMAP ? (
|
||||
<ClickMapRagePicker/>
|
||||
) : null}
|
||||
<div className="mx-4" />
|
||||
{metric.metricType === HEATMAP ? (
|
||||
<ClickMapRagePicker />
|
||||
) : null}
|
||||
|
||||
|
||||
{/* add to dashboard */}
|
||||
{/*{metric.exists() && (*/}
|
||||
{/* <AddToDashboardButton metricId={metric.metricId}/>*/}
|
||||
{/*)}*/}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-0">
|
||||
<WidgetWrapper widget={metric} isPreview={true} isWidget={false} hideName/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
{/* add to dashboard */}
|
||||
{/*{metric.exists() && (*/}
|
||||
{/* <AddToDashboardButton metricId={metric.metricId}/>*/}
|
||||
{/*)}*/}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-0">
|
||||
<WidgetWrapper
|
||||
widget={metric}
|
||||
isPreview={true}
|
||||
isWidget={false}
|
||||
hideName
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default observer(WidgetPreview);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue