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

change(ui): sessions per browser example

Browse source
This commit is contained in:
Shekar Siri 2024-07-01 14:56:38 +02:00
parent 281a2f5a1d
commit 6fcef5dff5
5 changed files with 76 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx
View file

@ -2,43 +2,43 @@ import React from 'react';
import { NoContent } from 'UI';
import { Styles } from '../../common';
import Bar from './Bar';
import { NO_METRIC_DATA } from 'App/constants/messages'
import { NO_METRIC_DATA } from 'App/constants/messages';
interface Props {
data: any
metric?: any
data: any;
}
function SessionsPerBrowser(props: Props) {
const { data, metric } = props;
const firstAvg = metric.data.chart[0] && metric.data.chart[0].count;
const getVersions = item => {
return Object.keys(item)
.filter(i => i !== 'browser' && i !== 'count' && i !== 'time' && i !== 'timestamp')
.map(i => ({ key: 'v' +i, value: item[i]}))
}
return (
<NoContent
size="small"
title={NO_METRIC_DATA}
show={ metric.data.chart.length === 0 }
style={{ minHeight: 220 }}
>
<div className="w-full" style={{ height: '240px' }}>
{metric.data.chart.map((item, i) =>
<Bar
key={i}
className="mb-4"
avg={Math.round(item.count)}
versions={getVersions(item)}
width={Math.round((item.count * 100) / firstAvg) - 10}
domain={item.browser}
colors={Styles.colors}
/>
)}
</div>
</NoContent>
);
function SessionsPerBrowser(props: Props) {
const { data } = props;
const firstAvg = data.chart[0] && data.chart[0].count;
const getVersions = item => {
return Object.keys(item)
.filter(i => i !== 'browser' && i !== 'count' && i !== 'time' && i !== 'timestamp')
.map(i => ({ key: 'v' + i, value: item[i] }));
};
return (
<NoContent
size="small"
title={NO_METRIC_DATA}
show={data.chart.length === 0}
style={{ minHeight: 220 }}
>
<div className="w-full" style={{ height: '240px' }}>
{data.chart.map((item, i) =>
<Bar
key={i}
className="mb-4"
avg={Math.round(item.count)}
versions={getVersions(item)}
width={Math.round((item.count * 100) / firstAvg) - 10}
domain={item.browser}
colors={Styles.colors}
/>
)}
</div>
</NoContent>
);
}
export default SessionsPerBrowser;

2
frontend/app/components/Dashboard/Widgets/common/Styles.js
View file

@ -6,7 +6,7 @@ const colors = ['#6774E2', '#929ACD', '#3EAAAF', '#565D97', '#8F9F9F', '#376F72'
const colorsx = ['#256669', '#38999e', '#3eaaaf', '#51b3b7', '#78c4c7', '#9fd5d7', '#c5e6e7'].reverse();
const compareColors = ['#394EFF', '#4D5FFF', '#808DFF', '#B3BBFF', '#E5E8FF'];
const compareColorsx = ["#222F99", "#2E3ECC", "#394EFF", "#6171FF", "#8895FF", "#B0B8FF", "#D7DCFF"].reverse();
const customMetricColors = ['#3EAAAF', '#394EFF', '#565D97'];
const customMetricColors = ['#394EFF', '#3EAAAF', '#565D97'];
const colorsPie = colors.concat(["#DDDDDD"]);
const countView = count => {

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

@ -19,6 +19,8 @@ import BarChartCard from "Components/Dashboard/components/DashboardList/NewDashM
import AreaChartCard from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/AreaChartCard";
import CallsWithErrorsExample
from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/CallsWithErrorsExample";
import SessionsPerBrowserExample
from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsPerBrowserExample';
export const CARD_CATEGORY = {
PRODUCT_ANALYTICS: 'product-analytics',
@ -260,7 +262,7 @@ export const CARD_LIST: CardType[] = [
metricOf: FilterKey.SESSIONS_PER_BROWSER,
category: CARD_CATEGORIES[1].key,
data: generateRandomBarsData(),
example: Bars,
example: SessionsPerBrowserExample,
},
{

38
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsPerBrowserExample.tsx Normal file
View file

@ -0,0 +1,38 @@
import React from 'react';
import ExCard from 'Components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard';
import InsightsCard from 'Components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard';
import { InsightIssue } from 'App/mstore/types/widget';
import SessionsPerBrowser from 'Components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser';
interface Props {
title: string;
type: string;
onCard: (card: string) => void;
}
function SessionsPerBrowserExample(props: Props) {
const data = {
chart: [
{
'browser': 'Chrome',
'count': 1524,
'126.0.0': 1157,
'125.0.0': 224
},
{
'browser': 'Edge',
'count': 159,
'126.0.0': 145
}
]
};
return (
<ExCard
{...props}
>
<SessionsPerBrowser data={data} />
</ExCard>
);
}
export default SessionsPerBrowserExample;

2
frontend/app/components/Dashboard/components/WidgetPredefinedChart/WidgetPredefinedChart.tsx
View file

@ -76,7 +76,7 @@ function WidgetPredefinedChart(props: Props) {
case FilterKey.RESOURCES_VS_VISUALLY_COMPLETE:
return <ResourceLoadedVsVisuallyComplete data={data} metric={metric} />
case FilterKey.SESSIONS_PER_BROWSER:
return <SessionsPerBrowser data={data} metric={metric} />
return <SessionsPerBrowser data={data} />
case FilterKey.SLOWEST_DOMAINS:
return <SlowestDomains data={data} metric={metric} />
case FilterKey.TIME_TO_RENDER: