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

change(ui): dashboard inputs - charts

Browse source
This commit is contained in:
Shekar Siri 2024-07-04 15:05:52 +02:00
parent 9822e0e77c
commit 04e8b199f5
11 changed files with 85 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/app/components/Dashboard/Widgets/CardSessionsByList.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { List, Progress, Typography } from 'antd';
import { Avatar, List, Progress, Typography } from 'antd';
import cn from 'classnames';
interface Props {
@ -26,7 +26,7 @@ function CardSessionsByList({ list, selected, onClickHandler = () => null }: Pro
>
<List.Item.Meta
className="m-0"
avatar={row.icon ? row.icon : null}
avatar={<Avatar src={row.icon} />}
title={(
<div className="m-0">
<div className="flex justify-between m-0 p-0">

6
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricLineChart/CustomMetricLineChart.tsx
View file

@ -11,6 +11,7 @@ interface Props {
onClick?: (event, index) => void;
yaxis?: any;
label?: string;
hideLegend?: boolean;
}
function CustomMetricLineChart(props: Props) {
@ -20,7 +21,8 @@ function CustomMetricLineChart(props: Props) {
colors,
onClick = () => null,
yaxis = {...Styles.yaxis},
label = 'Number of Sessions'
label = 'Number of Sessions',
hideLegend = false,
} = props;
return (
@ -47,7 +49,7 @@ function CustomMetricLineChart(props: Props) {
value: label || "Number of Sessions"
}}
/>
<Legend/>
{!hideLegend && <Legend/>}
<Tooltip {...Styles.tooltip} />
{Array.isArray(data.namesMap) && data.namesMap.map((key, index) => (
<Line

14
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/MethodType.js
View file

@ -1,10 +1,12 @@
import React from 'react'
import { Label } from 'UI';
import React from 'react';
import { Tag } from 'antd';
const MethodType = ({ data }) => {
return (
<Label className="ml-1">{data.method}</Label>
)
}
<Tag bordered={false} className="rounded-lg">
{data.method}
</Tag>
);
};
export default MethodType
export default MethodType;

8
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx
View file

@ -1,9 +1,9 @@
import React from 'react';
import { NoContent } from 'UI';
import { Styles } from '../../common';
import {
import {
CartesianGrid, Tooltip,
LineChart, Line, Legend, ResponsiveContainer,
LineChart, Line, Legend, ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
import { NO_METRIC_DATA } from 'App/constants/messages'
@ -13,7 +13,7 @@ interface Props {
metric?: any
}
function CallsErrors4xx(props: Props) {
const { data, metric } = props;
const { data, metric } = props;
return (
<NoContent
size="small"
@ -37,7 +37,7 @@ function CallsErrors4xx(props: Props) {
label={{ ...Styles.axisLabelLeft, value: "Number of Errors" }}
allowDecimals={false}
/>
<Legend />
{/*<Legend />*/}
<Tooltip {...Styles.tooltip} />
{ Array.isArray(metric.data.namesMap) && metric.data.namesMap.map((key, index) => (
<Line key={key} name={key} type="monotone" dataKey={key} stroke={Styles.colors[index]} fillOpacity={ 1 } strokeWidth={ 2 } strokeOpacity={ 0.8 } fill="url(#colorCount)" dot={false} />

6
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx
View file

@ -1,9 +1,9 @@
import React from 'react';
import { NoContent, Icon } from 'UI';
import { Styles } from '../../common';
import {
import {
CartesianGrid, Tooltip,
LineChart, Line, Legend, ResponsiveContainer,
LineChart, Line, Legend, ResponsiveContainer,
XAxis, YAxis
} from 'recharts';
@ -41,7 +41,7 @@ function CallsErrors5xx(props: Props) {
label={{ ...Styles.axisLabelLeft, value: "Number of Errors" }}
allowDecimals={false}
/>
<Legend />
{/*<Legend />*/}
<Tooltip {...Styles.tooltip} />
{ Array.isArray(metric.data.namesMap) && metric.data.namesMap.map((key, index) => (
<Line key={key} name={key} type="monotone" dataKey={key} stroke={Styles.colors[index]} fillOpacity={ 1 } strokeWidth={ 2 } strokeOpacity={ 0.8 } fill="url(#colorCount)" dot={false} />

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

@ -254,7 +254,7 @@ export const CARD_LIST: CardType[] = [
metricOf: FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION,
category: CARD_CATEGORIES[1].key,
data: {
chart: generateBarChartData(),
chart: generateStackedBarChartData(['Page Response Time (ms)']),
label: 'Number of Calls',
unit: 'ms',
namesMap: [
@ -271,7 +271,8 @@ export const CARD_LIST: CardType[] = [
metricOf: FilterKey.RESOURCES_VS_VISUALLY_COMPLETE,
category: CARD_CATEGORIES[1].key,
data: {
chart: generateBarChartData(),
chart: generateStackedBarChartData(['Images', 'Scripts', 'CSS']),
label: 'Visually Completed (ms)',
namesMap: [
'Series 1'
]
@ -408,7 +409,9 @@ export const CARD_LIST: CardType[] = [
metricOf: FilterKey.IMPACTED_SESSIONS_BY_JS_ERRORS,
category: CARD_CATEGORIES[3].key,
data: {
chart: generateBarChartData()
chart: generateBarChartData(),
hideLegend: true,
label: 'Number of Sessions'
},
example: BarChartCard
},
@ -419,7 +422,7 @@ export const CARD_LIST: CardType[] = [
metricOf: FilterKey.RESOURCES_BY_PARTY,
category: CARD_CATEGORIES[3].key,
data: {
chart: generateBarChartData()
chart: generateStackedBarChartData(['1st Party', '3rd Party'])
},
example: BarChartCard
},
@ -439,7 +442,7 @@ export const CARD_LIST: CardType[] = [
metricOf: FilterKey.ERRORS_PER_TYPE,
category: CARD_CATEGORIES[3].key,
data: {
chart: generateBarChartData()
chart: generateStackedBarChartData(['Integrations', '4xx', '5xx'])
},
example: BarChartCard
},
@ -487,6 +490,7 @@ export const CARD_LIST: CardType[] = [
data: {
chart: generateTimeSeriesData(),
label: 'Number of Errors',
hideLegend: true,
namesMap: [
'Series 1'
]
@ -503,6 +507,7 @@ export const CARD_LIST: CardType[] = [
data: {
chart: generateTimeSeriesData(),
label: 'Number of Errors',
hideLegend: true,
namesMap: [
'Series 1'
]
@ -754,3 +759,14 @@ function generateBarChartData(): any[] {
value: generateRandomValue(1000, 5000)
}));
}
function generateStackedBarChartData(keys: any): any[] {
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
return months.map(month => ({
time: month,
...keys.reduce((acc: any, key: any) => {
acc[key] = generateRandomValue(1000, 5000);
return acc;
}, {})
}));
}

68
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/BarChart.tsx
View file

@ -1,9 +1,6 @@
import { GitCommitHorizontal } from 'lucide-react';
import React from 'react';
import ExCard from './ExCard';
import { PERFORMANCE } from 'App/constants/card';
import { Bar, BarChart, CartesianGrid, Legend, Rectangle, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { Styles } from 'Components/Dashboard/Widgets/common';
interface Props {
@ -12,59 +9,50 @@ interface Props {
onCard: (card: string) => void;
onClick?: any;
data?: any,
hideLegend?: boolean,
}
function BarChartCard(props: Props) {
return (
<ExCard
{...props}
>
{/*<ResponsiveContainer width="100%" height="100%">*/}
{/* <BarChart*/}
{/* width={400}*/}
{/* height={280}*/}
{/* data={_data}*/}
{/* margin={Styles.chartMargins}*/}
{/* >*/}
{/* /!*<CartesianGrid strokeDasharray="3 3"/>*!/*/}
{/* <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#EEEEEE"/>*/}
{/* <XAxis {...Styles.xaxis} dataKey="name"/>*/}
{/* <YAxis {...Styles.yaxis} />*/}
{/* <Tooltip/>*/}
{/* <Legend/>*/}
{/* <Bar dataKey="pv" fill="#8884d8" activeBar={<Rectangle fill="pink" stroke="blue"/>}/>*/}
{/* /!*<Bar dataKey="uv" fill="#82ca9d" activeBar={<Rectangle fill="gold" stroke="purple"/>}/>*!/*/}
{/* </BarChart>*/}
{/*</ResponsiveContainer>*/}
const keys = props.data ? Object.keys(props.data.chart[0]).filter(key => key !== 'time') : [];
return (
<ExCard {...props}>
<ResponsiveContainer height={240} width="100%">
<BarChart
data={props.data?.chart}
margin={Styles.chartMargins}
>
<BarChart data={props.data?.chart} margin={Styles.chartMargins}>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#EEEEEE" />
<XAxis
{...Styles.xaxis}
dataKey="time"
// interval={21}
/>
<XAxis {...Styles.xaxis} dataKey="time" />
<YAxis
{...Styles.yaxis}
tickFormatter={val => Styles.tickFormatter(val)}
label={{ ...Styles.axisLabelLeft, value: props.data?.label || 'Number of Errors' }}
allowDecimals={false}
/>
<Legend />
{!props.hideLegend && <Legend />}
<Tooltip {...Styles.tooltip} />
<Bar minPointSize={1} name={<span className="float">One</span>}
dataKey="value" stackId="a" fill={Styles.colors[0]} />
{/*<Bar name={<span className="float">3<sup>rd</sup> Party</span>} dataKey="thirdParty" stackId="a"*/}
{/* fill={Styles.colors[2]}/>*/}
{keys.map((key, index) => (
<Bar
key={key}
dataKey={key}
stackId="a"
fill={Styles.colors[index % Styles.colors.length]}
name={key}
/>
))}
</BarChart>
</ResponsiveContainer>
</ExCard>
);
}
export default BarChartCard;
// Sample data function
// function generateBarChartData(): any[] {
// const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
// return months.map(month => ({
// time: month,
// key1: generateRandomValue(1000, 5000),
// key2: generateRandomValue(1000, 5000),
// key3: generateRandomValue(1000, 5000)
// }));
// }

64
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUrl.tsx
View file

@ -5,6 +5,7 @@ import React from 'react';
import { Circle } from '../Count';
import ExCard from '../ExCard';
import ByComponent from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/Component';
import { Icon } from 'UI';
function ByUrl(props: any) {
const [mode, setMode] = React.useState(0);
@ -14,36 +15,36 @@ function ByUrl(props: any) {
ptitle: 'Dresses',
value: '500',
progress: 75,
icon: <LinkOutlined size={12} />,
icon: <Icon name="link-45deg" size={24} />
},
{
label: '/search?q=summer+dresses',
ptitle: 'Search: summer dresses',
value: '306',
progress: 60,
icon: <LinkOutlined size={12} />,
icon: <Icon name="link-45deg" size={24} />
},
{
label: '/account/orders',
ptitle: 'Account: Orders',
value: '198',
progress: 30,
icon: <LinkOutlined size={12} />,
icon: <Icon name="link-45deg" size={24} />
},
{
label: '/checkout/confirmation',
ptitle: 'Checkout: Confirmation',
value: '47',
progress: 15,
icon: <LinkOutlined size={12} />,
icon: <Icon name="link-45deg" size={24} />
},
{
label: '/checkout/payment',
ptitle: 'Checkout: Payment',
value: '5',
progress: 5,
icon: <LinkOutlined size={12} />,
},
icon: <Icon name="link-45deg" size={24} />
}
];
const lineWidth = 240;
@ -53,57 +54,6 @@ function ByUrl(props: any) {
rows={rows}
lineWidth={lineWidth}
/>
// <ExCard
// {...props}
// title={
// <div className={'flex gap-2 items-center'}>
// <div>{props.title}</div>
// <div className={'font-normal'}><Segmented
// options={[
// { label: 'URL', value: '0' },
// { label: 'Page Title', value: '1' },
// ]}
// onChange={(v) => setMode(Number(v))}
// size='small'
// />
// </div>
// </div>
// }
// >
// <div className={'flex gap-1 flex-col'}>
// {rows.map((r) => (
// <div
// className={
// 'flex items-center gap-2 border-b border-dotted last:border-0 py-2 first:pt-0 last:pb-0'
// }
// >
// <Circle badgeType={1}>{r.icon}</Circle>
// <div className={'ml-2 flex flex-col gap-0'}>
// <div>{mode === 0 ? r.label : r.ptitle}</div>
// <div style={{ display: 'flex' }}>
// <div
// style={{
// height: 2,
// width: lineWidth * (0.01 * r.progress),
// background: '#394EFF',
// }}
// className={'rounded-l'}
// />
// <div
// style={{
// height: 2,
// width: lineWidth - lineWidth * (0.01 * r.progress),
// background: '#E2E4F6',
// }}
// className={'rounded-r'}
// />
// </div>
// </div>
// <div className={'min-w-8 ml-auto'}>{r.value}</div>
// </div>
// ))}
// </div>
// </ExCard>
);
}

11
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/SlowestDomains.tsx
View file

@ -1,6 +1,7 @@
import React from 'react';
import ByComponent from './Component';
import { LinkOutlined } from '@ant-design/icons';
import { Icon } from 'UI';
function SlowestDomains(props: any) {
const rows = [
@ -8,31 +9,31 @@ function SlowestDomains(props: any) {
label: 'res.cloudinary.com',
value: '500',
progress: 75,
icon: <LinkOutlined size={12} />
icon: <Icon name="link-45deg" size={24} />
},
{
label: 'mintbase.vercel.app',
value: '306',
progress: 60,
icon: <LinkOutlined size={12} />
icon: <Icon name="link-45deg" size={24} />
},
{
label: 'downloads.intercomcdn.com',
value: '198',
progress: 30,
icon: <LinkOutlined size={12} />
icon: <Icon name="link-45deg" size={24} />
},
{
label: 'static.intercomassets.com',
value: '47',
progress: 15,
icon: <LinkOutlined size={12} />
icon: <Icon name="link-45deg" size={24} />
},
{
label: 'mozbar.moz.com',
value: '5',
progress: 5,
icon: <LinkOutlined size={12} />
icon: <Icon name="link-45deg" size={24} />
}
];

1
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Trend.tsx
View file

@ -35,6 +35,7 @@ function ExampleTrend(props: Props) {
}
label={props.data?.label}
onClick={props.onClick}
hideLegend={props.data?.hideLegend}
/>
</ExCard>
);

1
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/SelectCard.tsx
View file

@ -62,6 +62,7 @@ const SelectCard: React.FC<SelectCardProps> = (props: SelectCardProps) => {
title={card.title}
data={card.data}
height={card.height}
hideLegend={card.data?.hideLegend}
/>
</div>
));