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

Fixed issues and uI details in charts.

Browse source
This commit is contained in:
Sudheer Salavadi 2024-07-09 22:48:22 +05:30
parent f05055f9b7
commit 906d64e514
8 changed files with 29 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -42,9 +42,9 @@ function BreakdownOfLoadedResources(props: Props) {
/>
<Legend />
<Tooltip {...Styles.tooltip} />
<Bar minPointSize={1} name="CSS" dataKey="stylesheet" stackId="a" fill={Styles.colors[0]} />
<Bar name="Images" dataKey="img" stackId="a" fill={Styles.colors[2]} />
<Bar name="Scripts" dataKey="script" stackId="a" fill={Styles.colors[3]} />
<Bar minPointSize={1} name="CSS" dataKey="stylesheet" stackId="a" fill={Styles.compareColors[0]} />
<Bar name="Images" dataKey="img" stackId="a" fill={Styles.compareColors[1]} />
<Bar name="Scripts" dataKey="script" stackId="a" fill={Styles.compareColors[2]} />
</BarChart>
</ResponsiveContainer>
</NoContent>

11
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx
View file

@ -55,16 +55,17 @@ function ResourceLoadedVsVisuallyComplete(props: Props) {
tickFormatter={val => Styles.tickFormatter(val)}
/>
<Tooltip {...Styles.tooltip} />
<Legend />
<Bar minPointSize={1} yAxisId="right" name="Images" type="monotone" dataKey="types.img" stackId="a" fill={Styles.colors[2]} />
<Bar yAxisId="right" name="Scripts" type="monotone" dataKey="types.script" stackId="a" fill={Styles.colors[3]} />
<Bar yAxisId="right" name="CSS" type="monotone" dataKey="types.stylesheet" stackId="a" fill={Styles.colors[4]} />
<Legend />
<Bar minPointSize={1} yAxisId="right" name="Images" type="monotone" dataKey="types.img" stackId="a" fill={Styles.compareColors[0]} />
<Bar yAxisId="right" name="Scripts" type="monotone" dataKey="types.script" stackId="a" fill={Styles.compareColors[1]} />
<Bar yAxisId="right" name="CSS" type="monotone" dataKey="types.stylesheet" stackId="a" fill={Styles.compareColors[2]} />
<Line
yAxisId="left"
name="Visually Complete"
type="monotone"
dataKey="avgTimeToRender"
stroke={Styles.lineColor }
stroke={Styles.strokeColor }
dot={false}
unit=" ms"
strokeWidth={2}

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

@ -26,7 +26,7 @@ function ExampleTrend(props: Props) {
{/*<AreaChartCard data={props.data} label={props.data?.label}/>*/}
<CustomMetricLineChart
data={props.data}
colors={Styles.customMetricColors}
colors={Styles.compareColors}
params={{
density: 21,
}}

1
frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
View file

@ -177,6 +177,7 @@ function WidgetChart(props: Props) {
data={data}
// isTemplate={isTemplate}
isEdit={!isSaved && !isTemplate}
/>
);
}

12
frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
View file

@ -22,10 +22,10 @@ function FunnelBar(props: Props) {
<div
style={{
height: '25px',
width: '100%',
width: '99.8%',
backgroundColor: '#f5f5f5',
position: 'relative',
borderRadius: '3px',
borderRadius: '.5rem',
overflow: 'hidden'
}}
>
@ -37,7 +37,7 @@ function FunnelBar(props: Props) {
top: 0,
left: 0,
bottom: 0,
backgroundColor: Styles.colors[0]
backgroundColor: Styles.compareColors[1]
}}
>
<div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">
@ -88,10 +88,10 @@ export function UxTFunnelBar(props: Props) {
<div
style={{
height: '25px',
width: '100%',
width: '99.8%',
backgroundColor: '#f5f5f5',
position: 'relative',
borderRadius: '3px',
borderRadius: '.5rem',
overflow: 'hidden'
}}
>
@ -103,7 +103,7 @@ export function UxTFunnelBar(props: Props) {
top: 0,
left: 0,
bottom: 0,
backgroundColor: '#00b5ad'
backgroundColor: '#6272FF'
}}
>
<div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">

2
frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
View file

@ -102,7 +102,7 @@ function FunnelWidget(props: Props) {
<div className="flex items-center">
<span className="text-base font-medium mr-2">Total conversion</span>
<Tooltip title={`${funnel.totalConversions} Sessions ${funnel.totalConversionsPercentage}%`}>
<Tag bordered={false} color="cyan" className='text-lg font-medium rounded-lg'>
<Tag bordered={false} color="green" className='text-lg font-medium rounded-lg'>
{funnel.totalConversions}
</Tag>
</Tooltip>

6
frontend/app/styles/general.css
View file

@ -356,6 +356,8 @@ p {
white-space: nowrap !important;
}
.stripes {
background: repeating-linear-gradient(
135deg,
@ -425,3 +427,7 @@ p {
.eg-card input[name="search"] {
visibility: hidden !important;
}
.ant-segmented-group{
gap:0.25rem;
}

5
frontend/app/styles/recharts.css
View file

@ -1,7 +1,12 @@
.recharts-legend-item {
padding: 0 10px;
margin-right: 0;
}
.recharts-legend-item-text {
user-select: none;
}
.recharts-legend-wrapper{
width: 388px !important;
}