jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): widget options

Browse source
This commit is contained in:
Shekar Siri 2024-08-26 13:21:13 +05:30
parent 2704691852
commit 29360c719e
3 changed files with 81 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
View file

@ -117,7 +117,7 @@ function WidgetChart(props: Props) {
useEffect(() => {
_metric.updateKey('page', 1);
loadPage();
}, [drillDownPeriod, period, depsString, metric.metricType, metric.metricOf, metric.viewType, metric.metricValue, metric.startType]);
}, [drillDownPeriod, period, depsString, metric.metricType, metric.metricOf, metric.viewType, metric.metricValue, metric.startType, metric.metricFormat]);
useEffect(loadPage, [_metric.page]);

60
frontend/app/components/Dashboard/components/WidgetOptions.tsx Normal file
View file

@ -0,0 +1,60 @@
import React from 'react';
import { HEATMAP, TABLE, USER_PATH } from 'App/constants/card';
import { Select, Space, Switch } from 'antd';
import { useStore } from 'App/mstore';
import ClickMapRagePicker from 'Components/Dashboard/components/ClickMapRagePicker/ClickMapRagePicker';
import { FilterKey } from 'Types/filter/filterType';
interface Props {
}
function WidgetOptions(props: Props) {
const { metricStore, dashboardStore } = useStore();
const metric: any = metricStore.instance;
const handleChange = (value: any) => {
console.log(`selected ${value}`);
metric.update({ metricFormat: value });
};
return (
<div>
{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>
)}
{metric.metricType === TABLE && metric.metricOf != FilterKey.USERID && (
<Select
defaultValue={metric.metricFormat}
style={{ width: 120 }}
onChange={handleChange}
options={[
{ value: 'sessionCount', label: 'Sessions' },
{ value: 'userCount', label: 'Users' }
]}
/>
)}
{metric.metricType === HEATMAP ? (
<ClickMapRagePicker />
) : null}
</div>
);
}
export default WidgetOptions;

40
frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
View file

@ -8,6 +8,7 @@ import { useStore } from 'App/mstore';
import ClickMapRagePicker from 'Components/Dashboard/components/ClickMapRagePicker';
import WidgetWrapper from '../WidgetWrapper';
import WidgetOptions from 'Components/Dashboard/components/WidgetOptions';
interface Props {
className?: string;
@ -28,22 +29,24 @@ function WidgetPreview(props: Props) {
<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>
)}
<WidgetOptions />
{/*{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 && (*/}
{/* <>*/}
@ -101,10 +104,7 @@ function WidgetPreview(props: Props) {
{/*</>*/}
{/*)}*/}
<div className="mx-4" />
{metric.metricType === HEATMAP ? (
<ClickMapRagePicker />
) : null}
{/* add to dashboard */}
{/*{metric.exists() && (*/}