watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-05 13:17:19 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

checkpoint

Browse source
This commit is contained in:
Brian Cao 2023-05-18 11:17:35 -07:00
parent cb038a51f3
commit de509e7ccc
23 changed files with 335 additions and 236 deletions
Download patch file Download diff file Expand all files Collapse all files

148
styles/funnelChart.css
View file

@ -1,148 +0,0 @@
.svg-funnel-js {
display: inline-block;
position: relative;
}
.svg-funnel-js svg {
display: block;
}
.svg-funnel-js .svg-funnel-js__labels {
position: absolute;
display: flex;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.svg-funnel-js.svg-funnel-js--vertical .svg-funnel-js__labels {
flex-direction: column;
}
.svg-funnel-js body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.svg-funnel-js {
font-family: 'Open Sans', sans-serif;
}
.svg-funnel-js .svg-funnel-js__container {
width: 100%;
height: 100%;
}
.svg-funnel-js .svg-funnel-js__labels {
width: 100%;
box-sizing: border-box;
}
.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label {
flex: 1 1 0;
position: relative;
}
.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__value {
font-size: 24px;
color: #fff;
line-height: 18px;
margin-bottom: 6px;
}
.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__title {
font-size: 12px;
font-weight: bold;
color: #21ffa2;
}
.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__percentage {
font-size: 16px;
font-weight: bold;
color: #9896dc;
}
.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__segment-percentages {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
left: 0;
padding: 8px 24px;
box-sizing: border-box;
background-color: rgba(8, 7, 48, 0.8);
margin-top: 24px;
opacity: 0;
transition: opacity 0.1s ease;
cursor: default;
}
.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__segment-percentages ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label .label__segment-percentages ul li {
font-size: 13px;
line-height: 16px;
color: #fff;
margin: 18px 0;
}
.svg-funnel-js
.svg-funnel-js__labels
.svg-funnel-js__label
.label__segment-percentages
ul
li
.percentage__list-label {
font-weight: bold;
color: #05df9d;
}
.svg-funnel-js .svg-funnel-js__labels .svg-funnel-js__label:hover .label__segment-percentages {
opacity: 1;
}
.svg-funnel-js:not(.svg-funnel-js--vertical) {
padding-top: 64px;
padding-bottom: 16px;
}
.svg-funnel-js:not(.svg-funnel-js--vertical) .svg-funnel-js__label {
padding-left: 24px;
}
.svg-funnel-js:not(.svg-funnel-js--vertical) .svg-funnel-js__label:not(:first-child) {
border-left: 1px solid #9896dc;
}
.svg-funnel-js.svg-funnel-js--vertical {
padding-left: 120px;
padding-right: 16px;
}
.svg-funnel-js.svg-funnel-js--vertical .svg-funnel-js__label {
padding-top: 24px;
}
.svg-funnel-js.svg-funnel-js--vertical .svg-funnel-js__label:not(:first-child) {
border-top: 1px solid #9896dc;
}
.svg-funnel-js.svg-funnel-js--vertical .svg-funnel-js__label .label__segment-percentages {
margin-top: 0;
margin-left: 106px;
width: calc(100% - 106px);
}
.svg-funnel-js.svg-funnel-js--vertical
.svg-funnel-js__label
.label__segment-percentages
.segment-percentage__list {
display: flex;
justify-content: space-around;
}
.svg-funnel-js .svg-funnel-js__subLabels {
display: flex;
justify-content: center;
margin-top: 24px;
position: absolute;
width: 100%;
left: 0;
}
.svg-funnel-js .svg-funnel-js__subLabels .svg-funnel-js__subLabel {
display: flex;
font-size: 12px;
color: #fff;
line-height: 16px;
}
.svg-funnel-js .svg-funnel-js__subLabels .svg-funnel-js__subLabel:not(:first-child) {
margin-left: 16px;
}
.svg-funnel-js .svg-funnel-js__subLabels .svg-funnel-js__subLabel .svg-funnel-js__subLabel--color {
width: 12px;
height: 12px;
border-radius: 50%;
margin: 2px 8px 2px 0;
}