From 397ca95c0ea940214cba3f1593227e0115c07faf Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Fri, 16 May 2025 17:51:14 +0200 Subject: [PATCH] test fix for charts --- .../CustomMetricsWidgets/SessionsBy.tsx | 3 +- .../components/WidgetChart/WidgetChart.tsx | 52 +++++++++++-------- frontend/app/mstore/dashboardStore.ts | 4 +- frontend/app/mstore/types/widget.ts | 3 +- 4 files changed, 36 insertions(+), 26 deletions(-) diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx index 1b9f91d30..08db63eea 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/SessionsBy.tsx @@ -7,6 +7,7 @@ import { useModal } from 'Components/ModalContext'; import Widget from '@/mstore/types/widget'; import { useTranslation } from 'react-i18next'; import { FilterKey } from 'Types/filter/filterType'; +import { observer } from 'mobx-react-lite'; interface Props { metric?: any; @@ -128,4 +129,4 @@ function SessionsBy(props: Props) { ); } -export default SessionsBy; +export default observer(SessionsBy); diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx index abdbc9066..49235d131 100644 --- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx +++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx @@ -55,7 +55,7 @@ function WidgetChart(props: Props) { const { isSaved = false, metric, isTemplate } = props; const { dashboardStore, metricStore } = useStore(); const _metric: any = props.isPreview ? metricStore.instance : props.metric; - const { data } = _metric; + const data = _metric.data; const { period } = dashboardStore; const { drillDownPeriod } = dashboardStore; const { drillDownFilter } = dashboardStore; @@ -66,6 +66,7 @@ function WidgetChart(props: Props) { const metricParams = _metric.params; const prevMetricRef = useRef(); const isMounted = useIsMounted(); + const [metricData, setMetricData] = useState(data); const [compData, setCompData] = useState(null); const [enabledRows, setEnabledRows] = useState( _metric.series.map((s) => s.name), @@ -157,9 +158,16 @@ function WidgetChart(props: Props) { setStale(true); }, 4000); dashboardStore - .fetchMetricChartData(metric, payload, isSaved, period, isComparison) - .then((res: any) => { + .fetchMetricChartData( + metric, + payload, + isSaved, + period, + isComparison + ) + .then((res) => { if (isComparison) setCompData(res); + else setMetricData(res); clearTimeout(tm); setStale(false); }) @@ -252,7 +260,7 @@ function WidgetChart(props: Props) { const renderChart = React.useCallback(() => { const { metricType, metricOf } = _metric; const { viewType } = _metric; - const metricWithData = { ..._metric, data }; + const metricWithData = { ..._metric, data: metricData }; if (metricType === FUNNEL) { if (viewType === 'table') { @@ -266,7 +274,7 @@ function WidgetChart(props: Props) { valueLabel?: string; }[] = [ { - value: data.funnel.totalConversionsPercentage, + value: metricData.funnel.totalConversionsPercentage, compData: compData ? compData.funnel.totalConversionsPercentage : undefined, @@ -290,7 +298,7 @@ function WidgetChart(props: Props) { return ( @@ -306,14 +314,14 @@ function WidgetChart(props: Props) { ); } if (metricType === TIMESERIES) { - const chartData = { ...data }; + const chartData = { ...metricData }; chartData.namesMap = Array.isArray(chartData.namesMap) ? chartData.namesMap.map((n) => (enabledRows.includes(n) ? n : null)) : chartData.namesMap; @@ -411,7 +419,7 @@ function WidgetChart(props: Props) { return ( acc + curr[data.namesMap[i]], + value: metricData.chart.reduce( + (acc, curr) => acc + curr[metricData.namesMap[i]], 0, ), compData: compData @@ -444,7 +452,7 @@ function WidgetChart(props: Props) { 0, ) : undefined, - series: data.namesMap[i], + series: metricData.namesMap[i], }); } @@ -469,7 +477,7 @@ function WidgetChart(props: Props) { return ( @@ -479,7 +487,7 @@ function WidgetChart(props: Props) { return ( @@ -489,7 +497,7 @@ function WidgetChart(props: Props) { return ( @@ -522,10 +530,10 @@ function WidgetChart(props: Props) { } if (metricType === INSIGHTS) { - return ; + return ; } - if (metricType === USER_PATH && data && data.links) { + if (metricType === USER_PATH && metricData && metricData.links) { const isUngrouped = props.isPreview ? !(_metric.hideExcess ?? true) : false; @@ -533,7 +541,7 @@ function WidgetChart(props: Props) { return ( { dashboardStore.drillDownFilter.merge({ filters, page: 1 }); @@ -548,7 +556,7 @@ function WidgetChart(props: Props) { if (viewType === 'trend') { return ( {t('Unknown metric type')}; - }, [data, compData, enabledRows, _metric]); + }, [data, compData, enabledRows, _metric, metricData]); const showTable = _metric.metricType === TIMESERIES && diff --git a/frontend/app/mstore/dashboardStore.ts b/frontend/app/mstore/dashboardStore.ts index ebf8b118b..f5e3bbce7 100644 --- a/frontend/app/mstore/dashboardStore.ts +++ b/frontend/app/mstore/dashboardStore.ts @@ -522,7 +522,6 @@ export default class DashboardStore { isComparison?: boolean, ): Promise { period = period.toTimestamps(); - const { density } = data; const params = { ...period, ...data, key: metric.predefinedKey }; if (!isComparison && metric.page && metric.limit) { @@ -547,7 +546,8 @@ export default class DashboardStore { params, isSaved ); - resolve(metric.setData(data, period, isComparison, density)); + const res = metric.setData(data, period, isComparison, data.density) + resolve(res); } catch (error) { reject(error); } finally { diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts index 2f0ae0842..04975e425 100644 --- a/frontend/app/mstore/types/widget.ts +++ b/frontend/app/mstore/types/widget.ts @@ -396,9 +396,10 @@ export default class Widget { _data.funnel = new Funnel().fromJSON(data); } else if (this.metricType === TABLE) { const count = data[0]['count']; - _data['values'] = data[0]['values'].map((s: any) => + const vals = data[0]['values'].map((s: any) => new SessionsByRow().fromJson(s, count, this.metricOf), ); + _data['values'] = vals _data['total'] = data[0]['total']; } else { if (data.hasOwnProperty('chart')) {