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

feat(ui): card by fetch requets

Browse source
This commit is contained in:
Shekar Siri 2024-08-13 14:02:46 +05:30
parent bcb7881100
commit 6cfecb53a3
3 changed files with 60 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
View file

@ -35,6 +35,7 @@ import SpeedIndexByLocationExample
from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SpeedIndexByLocationExample';
import HeatmapsExample from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/HeatmapsExample';
import ByReferrer from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByRferrer';
import ByFetch from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByFecth';
export const CARD_CATEGORY = {
PRODUCT_ANALYTICS: 'product-analytics',
@ -427,6 +428,15 @@ export const CARD_LIST: CardType[] = [
example: ByReferrer
},
{
title: 'Sessions by Fetch',
key: FilterKey.FETCH,
cardType: TABLE,
metricOf: FilterKey.FETCH,
category: CARD_CATEGORIES[2].key,
example: ByFetch
},
// Errors Tracking
{
title: 'Sessions Impacted by JS Errors',

48
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByFecth.tsx Normal file
View file

@ -0,0 +1,48 @@
import React from 'react';
import ByComponent from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/Component';
import { Icon } from 'UI';
function ByFetch(props: any) {
const rows = [
{
label: 'https://www.google.com',
ptitle: 'Dresses',
value: '500',
progress: 75,
icon: <Icon name='link-45deg' size={24} />
},
{
label: 'https://www.reddit.com',
ptitle: 'Search: summer dresses',
value: '306',
progress: 60,
icon: <Icon name='link-45deg' size={24} />
},
{
label: 'https://www.company.com/account/orders',
ptitle: 'Account: Orders',
value: '198',
progress: 30,
icon: <Icon name='link-45deg' size={24} />
},
{
label: 'android-app://com.slack/',
ptitle: 'Checkout: Confirmation',
value: '47',
progress: 15,
icon: <Icon name='link-45deg' size={24} />
}
];
const lineWidth = 240;
return (
<ByComponent
{...props}
rows={rows}
lineWidth={lineWidth}
/>
);
}
export default ByFetch;

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

@ -310,8 +310,9 @@ x .map(
} else if (this.metricType === FUNNEL) {
_data.funnel = new Funnel().fromJSON(_data);
} else if (this.metricType === TABLE) {
const total = data[0]['total'];
const count = data[0]['count'];
_data[0]['values'] = data[0]['values'].map((s: any) => new SessionsByRow().fromJson(s, count, this.metricOf));
_data[0]['values'] = data[0]['values'].map((s: any) => new SessionsByRow().fromJson(s, total, this.metricOf));
} else {
if (data.hasOwnProperty('chart')) {
_data['value'] = data.value;