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

change(ui) - dashboard color shades

Browse source
This commit is contained in:
Shekar Siri 2022-08-16 18:50:48 +02:00
parent 37d969489a
commit 3909e6c24e
14 changed files with 23 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx
View file

@ -42,7 +42,7 @@ function CustomMetricOverviewChart(props: Props) {
// unit={unit && ' ' + unit}
type="monotone"
dataKey="value"
stroke={Styles.colors[0]}
stroke={Styles.strokeColor}
fillOpacity={ 1 }
strokeWidth={ 2 }
strokeOpacity={ 0.8 }

2
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx
View file

@ -43,7 +43,7 @@ function CPULoad(props: Props) {
type="monotone"
unit="%"
dataKey="value"
stroke={Styles.colors[0]}
stroke={Styles.strokeColor}
fillOpacity={ 1 }
strokeWidth={ 2 }
strokeOpacity={ 0.8 }

2
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx
View file

@ -41,7 +41,7 @@ function Crashes(props: Props) {
name="Crashes"
type="monotone"
dataKey="count"
stroke={Styles.colors[0]}
stroke={Styles.strokeColor}
fillOpacity={ 1 }
strokeWidth={ 2 }
strokeOpacity={ 0.8 }

2
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx
View file

@ -67,7 +67,7 @@ function DomBuildingTime(props: Props) {
type="monotone"
// unit="%"
dataKey="value"
stroke={Styles.colors[0]}
stroke={Styles.strokeColor}
fillOpacity={ 1 }
strokeWidth={ 2 }
strokeOpacity={ 0.8 }

2
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx
View file

@ -45,7 +45,7 @@ function FPS(props: Props) {
name="Avg"
type="monotone"
dataKey="value"
stroke={Styles.colors[0]}
stroke={Styles.strokeColor}
fillOpacity={ 1 }
strokeWidth={ 2 }
strokeOpacity={ 0.8 }

2
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx
View file

@ -48,7 +48,7 @@ function MemoryConsumption(props: Props) {
unit=" mb"
type="monotone"
dataKey="value"
stroke={Styles.colors[0]}
stroke={Styles.strokeColor}
fillOpacity={ 1 }
strokeWidth={ 2 }
strokeOpacity={ 0.8 }

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

@ -51,8 +51,8 @@ function ResourceLoadedVsVisuallyComplete(props: Props) {
/>
<Tooltip {...Styles.tooltip} />
<Legend />
<Bar minPointSize={1} yAxisId="right" name="Images" type="monotone" dataKey="types.img" stackId="a" fill={Styles.colors[0]} />
<Bar yAxisId="right" name="Scripts" type="monotone" dataKey="types.script" stackId="a" fill={Styles.colors[2]} />
<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]} />
<Line
yAxisId="left"

2
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadingTime/ResourceLoadingTime.tsx
View file

@ -99,7 +99,7 @@ function ResourceLoadingTime(props: Props) {
unit=" ms"
type="monotone"
dataKey="avg"
stroke={Styles.colors[0]}
stroke={Styles.strokeColor}
fillOpacity={ 1 }
strokeWidth={ 2 }
strokeOpacity={ 0.8 }

2
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
View file

@ -68,7 +68,7 @@ function ResponseTime(props: Props) {
type="monotone"
unit=" ms"
dataKey="value"
stroke={Styles.colors[0]}
stroke={Styles.strokeColor}
fillOpacity={ 1 }
strokeWidth={ 2 }
strokeOpacity={ 0.8 }

2
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx
View file

@ -41,7 +41,7 @@ function SessionsImpactedBySlowRequests(props: Props) {
name="Sessions"
type="monotone"
dataKey="count"
stroke={Styles.colors[0]}
stroke={Styles.strokeColor}
fillOpacity={ 1 }
strokeWidth={ 2 }
strokeOpacity={ 0.8 }

5
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/Scale.js
View file

@ -4,10 +4,11 @@ import cn from 'classnames';
import stl from './scale.module.css';
function Scale({ colors }) {
const lastIndex = (Styles.colors.length - 1)
const lastIndex = (Styles.colorsTeal.length - 1)
return (
<div className={ cn(stl.bars, 'absolute bottom-0 mb-4')}>
{colors.map((c, i) => (
{Styles.colorsTeal.map((c, i) => (
<div
key={i}
style={{ backgroundColor: c, width: '6px', height: '15px', marginBottom: '1px' }}

2
frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx
View file

@ -68,7 +68,7 @@ function TimeToRender(props: Props) {
type="monotone"
unit=" ms"
dataKey="value"
stroke={Styles.colors[0]}
stroke={Styles.strokeColor}
fillOpacity={ 1 }
strokeWidth={ 2 }
strokeOpacity={ 0.8 }

2
frontend/app/components/Dashboard/Widgets/ProcessedSessions.js
View file

@ -35,7 +35,7 @@ export default class ProcessedSessions extends React.PureComponent {
</defs>
<XAxis {...Styles.xaxis} dataKey="time" />
<YAxis hide interval={ 0 } domain={ domain } />
<Area type="monotone" dataKey="count" stroke={Styles.colors[0]} fillOpacity={ 1 } strokeWidth={ 2 } strokeOpacity={ 0.8 } fill="url(#colorCount)" />
<Area type="monotone" dataKey="count" stroke={Styles.strokeColor} fillOpacity={ 1 } strokeWidth={ 2 } strokeOpacity={ 0.8 } fill="url(#colorCount)" />
</AreaChart>
</ResponsiveContainer>
</Loader>

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

@ -1,10 +1,11 @@
import React from 'react';
import { numberWithCommas } from 'App/utils';
const colors = ['#1E889A', '#239DB2', '#28B2C9', '#36C0D7', '#65CFE1'];
const colorsTeal = ['#1E889A', '#239DB2', '#28B2C9', '#36C0D7', '#65CFE1'];
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', '#666666'];
const customMetricColors = ['#3EAAAF', '#394EFF', '#565D97'];
const colorsPie = colors.concat(["#DDDDDD"]);
const countView = count => {
@ -15,12 +16,14 @@ const countView = count => {
export default {
customMetricColors,
colors,
colorsTeal,
colorsPie,
colorsx,
compareColors,
compareColorsx,
lineColor: '#2A7B7F',
lineColorCompare: '#394EFF',
strokeColor: colors[2],
xaxis: {
axisLine: { stroke: '#CCCCCC' },
interval: 0,
@ -74,8 +77,8 @@ export default {
gradientDef: () => (
<defs>
<linearGradient id="colorCount" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={colors[4]} stopOpacity={ 0.9 } />
<stop offset="95%" stopColor={colors[4]} stopOpacity={ 0.2 } />
<stop offset="5%" stopColor={colors[2]} stopOpacity={ 0.5 } />
<stop offset="95%" stopColor={colors[2]} stopOpacity={ 0.2 } />
</linearGradient>
<linearGradient id="colorCountCompare" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor={compareColors[4]} stopOpacity={ 0.9 } />