diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx index cf80137dd..442ee46e6 100644 --- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx +++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx @@ -48,4 +48,4 @@ function DashboardWidgetGrid(props: Props) { )); } -export default DashboardWidgetGrid; \ No newline at end of file +export default DashboardWidgetGrid; diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx index 0cccc7a58..ad98b9b84 100644 --- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx +++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx @@ -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 + return } if (metricType === 'errors') { - return + return } if (metricType === 'funnel') { - return + return } if (metricType === 'predefined') { @@ -136,7 +137,7 @@ function WidgetChart(props: Props) { if (metricOf === FilterKey.SESSIONS) { return ( @@ -145,7 +146,7 @@ function WidgetChart(props: Props) { if (metricOf === FilterKey.ERRORS) { return ( @@ -174,11 +175,11 @@ function WidgetChart(props: Props) { return
Unknown
; } - return useObserver(() => ( + return ( {renderChart()} - )); + ); } export default observer(WidgetChart); diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx index 789c87b78..f08fafd61 100644 --- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx +++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx @@ -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 (
- )); + ); } -export default withRouter(WidgetWrapper); +export default withRouter(observer(WidgetWrapper)); diff --git a/frontend/app/mstore/dashboardStore.ts b/frontend/app/mstore/dashboardStore.ts index c0b458e09..0a1aca2b3 100644 --- a/frontend/app/mstore/dashboardStore.ts +++ b/frontend/app/mstore/dashboardStore.ts @@ -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); } diff --git a/frontend/app/mstore/types/dashboard.ts b/frontend/app/mstore/types/dashboard.ts index 948cb916a..4c7ea801e 100644 --- a/frontend/app/mstore/types/dashboard.ts +++ b/frontend/app/mstore/types/dashboard.ts @@ -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(); } diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts index 24356c4be..10e1e68f4 100644 --- a/frontend/app/mstore/types/widget.ts +++ b/frontend/app/mstore/types/widget.ts @@ -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 { @@ -273,4 +247,4 @@ export default class Widget implements IWidget { if (!Array.isArray(metricValue)) return metricValue; return metricValue.map((i: any) => i.value) } -} \ No newline at end of file +}