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

change(ui): auto update metric subtype with metric type change

Browse source
This commit is contained in:
sylenien 2022-12-12 17:38:56 +01:00 • committed by Shekar Siri
parent 0df89cee17
commit e8a9db986e
5 changed files with 33 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/ClickMapCard.tsx Normal file
View file

@ -0,0 +1,15 @@
import React from 'react'
import { useStore } from 'App/mstore'
import { observer } from 'mobx-react-lite'
import { toJS } from 'mobx'
function ClickMapCard() {
const { metricStore } = useStore()
console.log(toJS(metricStore.instance))
return (
<div>this is a card</div>
)
}
export default observer(ClickMapCard)

1
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard/index.ts Normal file
View file

@ -0,0 +1 @@
export { default } from './ClickMapCard'

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

@ -19,6 +19,7 @@ import ErrorsWidget from '../Errors/ErrorsWidget';
import SessionWidget from '../Sessions/SessionWidget';
import CustomMetricTableSessions from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions';
import CustomMetricTableErrors from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors';
import ClickMapCard from 'App/components/Dashboard/Widgets/CustomMetricsWidgets/ClickMapCard'
interface Props {
metric: any;
@ -179,11 +180,11 @@ function WidgetChart(props: Props) {
}
if (metricType === CLICKMAP) {
return (
<div>rendering clickmap</div>
<ClickMapCard />
)
}
return <div>Unknown</div>;
return <div>Unknown metric type</div>;
}
return (
<Loader loading={loading} style={{ height: `${isOverviewWidget ? 100 : 240}px` }}>

5
frontend/app/components/Dashboard/components/WidgetForm/components/MetricSubtypeDropdown/MetricSubtypeDropdown.tsx
View file

@ -28,6 +28,11 @@ function MetricSubtypeDropdown(props: Props) {
return false;
}, [metric.metricType]);
React.useEffect(() => {
// @ts-ignore
setTimeout(() => props.onSelect({ name: 'metricOf', value: { value: options[0].value }}), 0)
}, [metric.metricType])
return options ? (
<>
<div className="mx-3">of</div>

12
frontend/app/components/Dashboard/components/WidgetForm/components/MetricTypeDropdown/MetricTypeDropdown.tsx
View file

@ -8,13 +8,20 @@ import { observer } from 'mobx-react-lite';
import { useStore } from 'App/mstore';
import withLocationHandlers from 'HOCs/withLocationHandlers';
interface Options {
label: string;
icon: string;
value: string;
description: string;
}
interface Props {
query: Record<string, (key: string) => any>;
}
function MetricTypeDropdown(props: Props) {
const { metricStore } = useStore();
const metric: any = metricStore.instance;
const options: any = useMemo(() => {
const options: Options[] = useMemo(() => {
// TYPES.shift(); // remove "Add from library" item
return TYPES.filter((i: MetricType) => i.slug !== LIBRARY).map((i: MetricType) => ({
label: i.title,
@ -27,9 +34,8 @@ function MetricTypeDropdown(props: Props) {
React.useEffect(() => {
const queryCardType = props.query.get('type')
if (queryCardType && options.length > 0 && metric.metricType) {
const type = options.find(i => i.value === queryCardType)
const type = options.find((i) => i.value === queryCardType)
setTimeout(() => onChange(type.value), 0)
console.log('trying to change to ', type, metric.metricType)
}
}, [])