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

change(ui): random data

Browse source
This commit is contained in:
Shekar Siri 2024-06-27 12:30:44 +02:00
parent 3fb41b63d3
commit 9be31d80db
4 changed files with 129 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,6 +2,7 @@ import ExampleFunnel from "./Examples/Funnel";
import ExamplePath from "./Examples/Path";
import ExampleTrend from "./Examples/Trend";
import PerfBreakdown from "./Examples/PerfBreakdown";
import BarChartCard from "./Examples/BarChart";
import SlowestDomain from "./Examples/SlowestDomain";
import ByBrowser from "./Examples/SessionsBy/ByBrowser";
import BySystem from "./Examples/SessionsBy/BySystem";
@ -315,21 +316,8 @@ export const CARD_LIST: CardType[] = [
metricOf: FilterKey.ERRORS_PER_DOMAINS,
category: CARD_CATEGORIES[3].key,
example: Bars,
data: {
total: 90,
values: [
{
"label": "company.domain.com",
"value": 89
},
{
"label": "openreplay.com",
"value": 15
}
]
}
data: generateRandomBarsData(),
},
{
title: 'Errors by Type',
key: FilterKey.ERRORS_PER_TYPE,
@ -375,6 +363,7 @@ export const CARD_LIST: CardType[] = [
category: CARD_CATEGORIES[4].key,
width: 1,
height: 148,
data: generateWebVitalData(),
example: WebVital,
},
{
@ -385,6 +374,7 @@ export const CARD_LIST: CardType[] = [
category: CARD_CATEGORIES[4].key,
width: 1,
height: 148,
data: generateWebVitalData(),
example: WebVital,
},
@ -396,6 +386,7 @@ export const CARD_LIST: CardType[] = [
category: CARD_CATEGORIES[4].key,
width: 1,
height: 148,
data: generateWebVitalData(),
example: WebVital,
},
@ -407,6 +398,7 @@ export const CARD_LIST: CardType[] = [
category: CARD_CATEGORIES[4].key,
width: 1,
height: 148,
data: generateWebVitalData(),
example: WebVital,
},
@ -418,6 +410,7 @@ export const CARD_LIST: CardType[] = [
category: CARD_CATEGORIES[4].key,
width: 1,
height: 148,
data: generateWebVitalData(),
example: WebVital,
},
@ -429,6 +422,7 @@ export const CARD_LIST: CardType[] = [
category: CARD_CATEGORIES[4].key,
width: 1,
height: 148,
data: generateWebVitalData(),
example: WebVital,
},
@ -440,6 +434,7 @@ export const CARD_LIST: CardType[] = [
category: CARD_CATEGORIES[4].key,
width: 1,
height: 148,
data: generateWebVitalData(),
example: WebVital,
},
@ -451,6 +446,7 @@ export const CARD_LIST: CardType[] = [
category: CARD_CATEGORIES[4].key,
width: 1,
height: 148,
data: generateWebVitalData(),
example: WebVital,
},
@ -462,6 +458,7 @@ export const CARD_LIST: CardType[] = [
category: CARD_CATEGORIES[4].key,
width: 1,
height: 148,
data: generateWebVitalData(),
example: WebVital,
},
@ -473,6 +470,7 @@ export const CARD_LIST: CardType[] = [
category: CARD_CATEGORIES[4].key,
width: 1,
height: 148,
data: generateWebVitalData(),
example: WebVital,
},
@ -484,6 +482,7 @@ export const CARD_LIST: CardType[] = [
category: CARD_CATEGORIES[4].key,
width: 1,
height: 148,
data: generateWebVitalData(),
example: WebVital,
},
{
@ -494,6 +493,7 @@ export const CARD_LIST: CardType[] = [
category: CARD_CATEGORIES[4].key,
width: 1,
height: 148,
data: generateWebVitalData(),
example: WebVital,
},
@ -505,6 +505,7 @@ export const CARD_LIST: CardType[] = [
category: CARD_CATEGORIES[4].key,
width: 1,
height: 148,
data: generateWebVitalData(),
example: WebVital,
},
@ -516,6 +517,7 @@ export const CARD_LIST: CardType[] = [
category: CARD_CATEGORIES[4].key,
width: 1,
height: 148,
data: generateWebVitalData(),
example: WebVital,
},
@ -527,6 +529,7 @@ export const CARD_LIST: CardType[] = [
category: CARD_CATEGORIES[4].key,
width: 1,
height: 148,
data: generateWebVitalData(),
example: WebVital,
},
@ -538,6 +541,7 @@ export const CARD_LIST: CardType[] = [
category: CARD_CATEGORIES[4].key,
width: 1,
height: 148,
data: generateWebVitalData(),
example: WebVital,
},
@ -549,6 +553,38 @@ export const CARD_LIST: CardType[] = [
category: CARD_CATEGORIES[4].key,
width: 1,
height: 148,
data: generateWebVitalData(),
example: WebVital,
},
]
function generateRandomBarsData(): { total: number, values: { label: string, value: number }[] } {
const labels = ["company.domain.com", "openreplay.com"];
const values = labels.map(label => ({
label,
value: Math.floor(Math.random() * 100)
}));
const total = values.reduce((acc, curr) => acc + curr.value, 0);
return {
total,
values: values.sort((a, b) => b.value - a.value)
};
}
function generateWebVitalData(): { value: number, chart: { timestamp: number, value: number }[], unit: string } {
const chart = Array.from({length: 7}, (_, i) => ({
timestamp: Date.now() + i * 86400000,
value: parseFloat((Math.random() * 10).toFixed(15))
}));
const value = chart.reduce((acc, curr) => acc + curr.value, 0) / chart.length;
return {
value,
chart,
unit: "%"
};
}

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

@ -0,0 +1,74 @@
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 {Styles} from "Components/Dashboard/Widgets/common";
const _data = [
{
name: 'Jan',
uv: 4000,
pv: 2400,
},
{
name: 'Feb',
uv: 3000,
pv: 1398,
},
{
name: 'Mar',
uv: 2000,
pv: 9800,
},
{
name: 'Apr',
uv: 2780,
pv: 3908,
},
{
name: 'May',
uv: 1890,
pv: 4800,
},
{
name: 'Jun',
uv: 2390,
pv: 3800,
},
{
name: 'Jul',
uv: 3490,
pv: 4300,
},
];
function BarChartCard(props: any) {
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 {...Styles.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>
</ExCard>
);
}
export default BarChartCard;

4
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx
View file

@ -19,7 +19,9 @@ function ExCard({
style={{width: '100%', height: height || 286}}
>
<div className={'font-medium text-lg'}>{title}</div>
<div className={'flex flex-col gap-2 mt-2 cursor-pointer'} onClick={() => onCard(type)}>{children}</div>
<div className={'flex flex-col gap-2 mt-2 cursor-pointer'} style={{
height: height ? height - 50 : 236,
}} onClick={() => onCard(type)}>{children}</div>
</div>
);
}

3
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/WebVital.tsx
View file

@ -6,10 +6,11 @@ interface Props {
title: string;
type: string;
onCard: (card: string) => void;
data?: any,
}
function WebVital(props: Props) {
const data = {
const data = props.data || {
"value": 8.33316146432396,
"chart": [
{