JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: update color and add y-axis on bandwidth graph

Browse Source 
change color of bandwidth graph to match figma designs, remove text explaining limits, and add y axis to display on usage/bandwidth graphs

fixes https://github.com/storj/storj/issues/5200

Change-Id: I3c8d08a70bb5e99b7a91ca12678be8ca8ff0e6bf
This commit is contained in:
Lizzy Thomson 2022-10-04 14:00:34 -06:00 committed by Storj Robot
parent 35f74b78e0
commit 419fb9cf20
3 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/satellite/src/components/common/VChart.vue
View File

@ -110,9 +110,21 @@ export default class VChart extends Vue {
},
scales: {
yAxes: [{
display: false,
display: true,
ticks: {
beginAtZero: true,
callback: function(value, _, ticks) {
const numDigits = ticks[ticks.length - 2].toString().length;
const power = Math.floor((numDigits - 1) / 3);
const result = value / Math.pow(1000, power);
return result;
},
suggestedMin: 0,
suggestedMax: 150,
maxTicksLimit: 7,
},
gridLines: {
display: false,
},
}],
xAxes: [{

20
web/satellite/src/components/project/newProjectDashboard/BandwidthChart.vue
View File

@ -46,13 +46,13 @@ export default class BandwidthChart extends BaseChart {
return new ChartData(
xAxisDateLabels,
'#FFE0E7',
'#EE86AD',
'#FF458B',
'rgba(226, 220, 255, .3)',
'#c5baff',
'#c5baff',
mainData,
'#FFF6F8',
'#FFC0CF',
'#FFC0CF',
'rgba(226, 220, 255, .7)',
'#a18eff',
'#a18eff',
secondaryData,
);
}
@ -162,26 +162,26 @@ export default class BandwidthChart extends BaseChart {
}
.settled-tooltip {
background-color: #ff458b;
background-color: #a18eff;
padding: 4px 10px 8px;
&__arrow {
margin: -12px 0 4px;
border-radius: 0 0 0 8px;
transform: scale(1, 0.85) translate(0, 20%) rotate(-45deg);
background-color: #ff458b;
background-color: #a18eff;
}
}
.allocated-tooltip {
background-color: #ee86ad;
background-color: #c5baff;
padding: 8px 10px 0;
&__arrow {
margin-bottom: -4px;
border-radius: 8px 0 0;
transform: scale(1, 0.85) translate(0, 20%) rotate(45deg);
background-color: #ee86ad;
background-color: #c5baff;
}
}
</style>

10
web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue
View File

@ -74,9 +74,6 @@
<div class="project-dashboard__charts__container__header">
<h3 class="project-dashboard__charts__container__header__title">Storage</h3>
</div>
<p class="project-dashboard__charts__container__info">
This is your total storage used per day
</p>
<VLoader v-if="isDataFetching" class="project-dashboard__charts__container__loader" height="40px" width="40px" />
<template v-else>
<StorageChart
@ -118,9 +115,6 @@
</div>
<VLoader v-if="isDataFetching" class="project-dashboard__charts__container__loader" height="40px" width="40px" />
<template v-else>
<p class="project-dashboard__charts__container__info">
This is your bandwidth usage per day
</p>
<BandwidthChart
:width="chartWidth"
:height="170"
@ -558,11 +552,11 @@ export default class NewProjectDashboard extends Vue {
}
&__allocated-color {
background: #ffc0cf;
background: #c5baff;
}
&__settled-color {
background: #ff458b;
background: #a18eff;
}
&__allocated-label,