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

fix(ui): fix data for funnels

Browse source
This commit is contained in:
sylenien 2022-07-01 10:42:23 +02:00
parent 09a546bffb
commit c9f66a16cb
6 changed files with 26 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -48,4 +48,4 @@ function DashboardWidgetGrid(props: Props) {
));
}
export default DashboardWidgetGrid;
export default DashboardWidgetGrid;

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

@ -4,7 +4,7 @@ import CustomMetricPercentage from 'App/components/Dashboard/Widgets/CustomMetri
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, useObserver } from 'mobx-react-lite';
import { observer } from 'mobx-react-lite';
import { Loader } from 'UI';
import { useStore } from 'App/mstore';
import WidgetPredefinedChart from '../WidgetPredefinedChart';
@ -27,10 +27,10 @@ interface Props {
function WidgetChart(props: Props) {
const { isWidget = false, metric, isTemplate } = props;
const { dashboardStore, metricStore } = useStore();
const _metric: any = useObserver(() => metricStore.instance);
const period = useObserver(() => dashboardStore.period);
const drillDownPeriod = useObserver(() => dashboardStore.drillDownPeriod);
const drillDownFilter = useObserver(() => dashboardStore.drillDownFilter);
const _metric: any = metricStore.instance;
const period = dashboardStore.period;
const drillDownPeriod = dashboardStore.drillDownPeriod;
const drillDownFilter = dashboardStore.drillDownFilter;
const colors = Styles.customMetricColors;
const [loading, setLoading] = useState(true)
const isOverviewWidget = metric.metricType === 'predefined' && metric.viewType === 'overview';
@ -92,16 +92,17 @@ function WidgetChart(props: Props) {
const renderChart = () => {
const { metricType, viewType, metricOf } = metric;
const metricWithData = { ...metric, data };
if (metricType === 'sessions') {
return <SessionWidget metric={metric} />
return <SessionWidget metric={metricWithData} />
}
if (metricType === 'errors') {
return <ErrorsWidget metric={metric} />
return <ErrorsWidget metric={metricWithData} />
}
if (metricType === 'funnel') {
return <FunnelWidget metric={metric} isWidget={isWidget || isTemplate} />
return <FunnelWidget metric={metricWithData} isWidget={isWidget || isTemplate} />
}
if (metricType === 'predefined') {
@ -136,7 +137,7 @@ function WidgetChart(props: Props) {
if (metricOf === FilterKey.SESSIONS) {
return (
<CustomMetricTableSessions
metric={metric}
metric={metricWithData}
isTemplate={isTemplate}
isEdit={!isWidget && !isTemplate}
/>
@ -145,7 +146,7 @@ function WidgetChart(props: Props) {
if (metricOf === FilterKey.ERRORS) {
return (
<CustomMetricTableErrors
metric={metric}
metric={metricWithData}
// isTemplate={isTemplate}
isEdit={!isWidget && !isTemplate}
/>
@ -174,11 +175,11 @@ function WidgetChart(props: Props) {
return <div>Unknown</div>;
}
return useObserver(() => (
return (
<Loader loading={loading} style={{ height: `${isOverviewWidget ? 100 : 240}px` }}>
{renderChart()}
</Loader>
));
);
}
export default observer(WidgetChart);

12
frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
View file

@ -3,7 +3,7 @@ import cn from 'classnames';
import { ItemMenu, Popup } from 'UI';
import { useDrag, useDrop } from 'react-dnd';
import WidgetChart from '../WidgetChart';
import { useObserver } from 'mobx-react-lite';
import { observer } from 'mobx-react-lite';
import { useStore } from 'App/mstore';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import { withSiteId, dashboardMetricDetails } from 'App/routes';
@ -29,10 +29,10 @@ interface Props {
function WidgetWrapper(props: Props & RouteComponentProps) {
const { dashboardStore } = useStore();
const { isWidget = false, active = false, index = 0, moveListItem = null, isPreview = false, isTemplate = false, dashboardId, siteId } = props;
const widget: any = useObserver(() => props.widget);
const widget: any = props.widget;
const isTimeSeries = widget.metricType === 'timeseries';
const isPredefined = widget.metricType === 'predefined';
const dashboard = useObserver(() => dashboardStore.selectedDashboard);
const dashboard = dashboardStore.selectedDashboard;
const [{ isDragging }, dragRef] = useDrag({
type: 'item',
@ -69,7 +69,7 @@ function WidgetWrapper(props: Props & RouteComponentProps) {
const dragDropRef: any = dragRef(dropRef(ref))
const addOverlay = isTemplate || (!isPredefined && isWidget && widget.metricOf !== FilterKey.ERRORS && widget.metricOf !== FilterKey.SESSIONS)
return useObserver(() => (
return (
<div
className={
cn(
@ -149,8 +149,8 @@ function WidgetWrapper(props: Props & RouteComponentProps) {
</Popup>
</div>
));
);
}
export default withRouter(WidgetWrapper);
export default withRouter(observer(WidgetWrapper));

36
frontend/app/mstore/dashboardStore.ts
View file

@ -114,39 +114,7 @@ export default class DashboardStore implements IDashboardSotre {
showAlertModal: boolean = false;
constructor() {
makeAutoObservable(this, {
dashboards: observable.ref,
drillDownFilter: observable.ref,
widgetCategories: observable.ref,
selectedDashboard: observable.ref,
drillDownPeriod: observable,
resetCurrentWidget: action,
addDashboard: action,
removeDashboard: action,
updateDashboard: action,
getDashboard: action,
getDashboardByIndex: action,
getDashboardCount: action,
selectDashboardById: action,
selectDefaultDashboard: action,
toJson: action,
fromJson: action,
setSiteId: action,
editWidget: action,
updateKey: action,
save: action,
selectWidgetsByCategory: action,
toggleAllSelectedWidgets: action,
removeSelectedWidgetByCategory: action,
toggleWidgetSelection: action,
fetchTemplates: action,
updatePinned: action,
setPeriod: action,
setDrillDownPeriod: action,
fetchMetricChartData: action,
});
makeAutoObservable(this);
this.drillDownPeriod = Period({ rangeName: LAST_7_DAYS });
const timeStamps = this.drillDownPeriod.toTimestamps();
@ -248,7 +216,6 @@ export default class DashboardStore implements IDashboardSotre {
return dashboardService
.getDashboard(dashboardId)
.then((response) => {
// const widgets = new Dashboard().fromJson(response).widgets
this.selectedDashboard?.update({
widgets: new Dashboard().fromJson(response).widgets,
});
@ -600,7 +567,6 @@ export default class DashboardStore implements IDashboardSotre {
: [];
}
}
metric.setData(_data);
resolve(_data);
}

27
frontend/app/mstore/types/dashboard.ts
View file

@ -23,7 +23,7 @@ export interface IDashboard {
removeWidget(widgetId: string): void
updateWidget(widget: IWidget): void
getWidget(widgetId: string): void
getWidgetIndex(widgetId: string)
getWidgetIndex(widgetId: string): IWidget
getWidgetByIndex(index: number): void
getWidgetCount(): void
getWidgetIndexByWidgetId(widgetId: string): void
@ -46,30 +46,7 @@ export default class Dashboard implements IDashboard {
config: any = {}
constructor() {
makeAutoObservable(this, {
name: observable,
description: observable,
isPublic: observable,
widgets: observable,
isValid: observable,
metrics: observable,
toJson: action,
fromJson: action,
addWidget: action,
removeWidget: action,
updateWidget: action,
getWidget: action,
getWidgetIndex: action,
getWidgetByIndex: action,
getWidgetCount: action,
getWidgetIndexByWidgetId: action,
validate: action,
sortWidgets: action,
swapWidgetPosition: action,
update: action,
toggleMetrics: action
})
makeAutoObservable(this)
this.validate();
}

32
frontend/app/mstore/types/widget.ts
View file

@ -100,31 +100,7 @@ export default class Widget implements IWidget {
predefinedKey: string = ''
constructor() {
makeAutoObservable(this, {
sessionsLoading: observable,
data: observable,
metricId: observable,
widgetId: observable,
name: observable,
metricType: observable,
metricOf: observable,
position: observable,
isLoading: observable,
isValid: observable,
dashboardId: observable,
colSpan: observable,
series: observable,
page: observable,
addSeries: action,
removeSeries: action,
fromJson: action,
toJson: action,
validate: action,
update: action,
updateKey: action,
setPeriod: action,
})
makeAutoObservable(this)
const filterSeries = new FilterSeries()
this.series.push(filterSeries)
@ -221,9 +197,7 @@ export default class Widget implements IWidget {
}
setData(data: any) {
runInAction(() => {
this.data = data;
})
this.data = data;
}
fetchSessions(metricId: any, filter: any): Promise<any> {
@ -273,4 +247,4 @@ export default class Widget implements IWidget {
if (!Array.isArray(metricValue)) return metricValue;
return metricValue.map((i: any) => i.value)
}
}
}