ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-03-04 08:25:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Calendar Graph - final approach

Browse source
This commit is contained in:
akhilesh.sooji 2024-01-24 15:51:19 +05:30 • committed by DasWizardTales
parent e7bcb2bb07
commit 7832983eb3
1 changed files with 57 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/components/HeartbeatBar.vue
View file

@ -9,7 +9,7 @@
:style="beatStyle"
:title="getBeatTitle(beat)"
/> -->
<CalendarHeatmap :style="{ fill: '#fff' }" class="heatmap" :values="values" :end-date="endDate" no-data-text="Down" tooltip-unit="counts" />
<CalendarHeatmap :style="{ fill: '#fff' }" class="heat-map" :values="values" :end-date="endDate" no-data-text="Down" tooltip-unit="counts" />
</div>
<!-- <div
v-if="!$root.isMobile && size !== 'small' && beatList.length > 4 && $root.styleElapsedTime !== 'none'"
@ -310,7 +310,7 @@ export default {
<style lang="scss">
@import "../assets/vars.scss";
.heatmap {
.heat-map {
font-size: x-small;
}
@ -367,4 +367,59 @@ export default {
background-color: #333;
}
}
.hp-bar-big {
.beat {
display: inline-block;
background-color: $primary;
border-radius: $border-radius;
&.empty {
background-color: aliceblue;
}
&.down {
background-color: $danger;
}
&.pending {
background-color: $warning;
}
&.maintenance {
background-color: $maintenance;
}
&:not(.empty):hover {
transition: all ease-in-out 0.15s;
opacity: 0.8;
transform: scale(var(--hover-scale));
}
}
}
.dark {
.hp-bar-big .beat.empty {
background-color: #848484;
}
}
.word {
color: #aaa;
font-size: 12px;
}
.connecting-line {
flex-grow: 1;
height: 1px;
background-color: #ededed;
margin-left: 10px;
margin-right: 10px;
margin-top: 2px;
.dark & {
background-color: #333;
}
}
</style>