micord/ervu-business-metrics
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

graph-donut

Browse source
This commit is contained in:
m.epshtein 2024-11-08 11:17:45 +03:00
parent 39c9937304
commit 5150549a57
1 changed files with 16 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

125
frontend/src/resources/css/components-dashboard.css
View file

@ -219,103 +219,25 @@
overflow: visible; overflow: visible;
} }
.webbpm.ervu_dashboard .graph-chart .chart-content {
width: min(10vw, 12.5rem);
height: min(7vw, 9rem);
}
.webbpm.ervu_dashboard :is(.graph-donut, .graph-donut-large) { .webbpm.ervu_dashboard :is(.graph-donut, .graph-donut-large) {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.webbpm.ervu_dashboard .graph-chart .chart-content {
width: min(10vw, 12.5rem);
height: min(7vw, 9rem);
}
.webbpm.ervu_dashboard .graph-donut .chart-content { .webbpm.ervu_dashboard .graph-donut .chart-content {
width: min(8vw, 11rem); width: 196px;
height: min(8vw, 11rem); height: 196px;
} }
.webbpm.ervu_dashboard .graph-donut-medium .chart-content { .webbpm.ervu_dashboard .graph-donut-medium .chart-content {
width: min(10vw, 13.5rem);
height: min(10vw, 13.5rem);
} }
.webbpm.ervu_dashboard .graph-donut-large .chart-content { .webbpm.ervu_dashboard .graph-donut-large .chart-content {
width: min(14vw, 18.5rem);
height: min(14vw, 18.5rem);
} }
.webbpm.ervu_dashboard .graph-legend .horizontal-container {
align-items: center;
}
.webbpm.ervu_dashboard .graph-legend .horizontal-container > text {
flex: 1;
}
.webbpm.ervu_dashboard .graph-legend .horizontal-container > text.text-invert:not(.mute) > div > div:last-of-type {
font-size: var(--size-num-primary);
}
.webbpm.ervu_dashboard .graph-legend .mute {
margin-top: var(--indent-small);
}
.webbpm.ervu_dashboard .graph-legend .lined {
padding-top: var(--indent-small);
margin-top: var(--indent-small);
}
.webbpm.ervu_dashboard .graph-legend-column > .vertical-container > * + * {
padding-top: var(--indent-small);
margin-top: var(--indent-small);
}
.webbpm.ervu_dashboard .graph-legend-column > .vertical-container > hbox [class*="legend-col"] {
margin-top: var(--indent-xmini);
}
.webbpm.ervu_dashboard .graph-legend-column > .vertical-container .text-invert:not(.mute) {
font-size: var(--size-num-primary);
margin-top: var(--indent-xmini);
}
.webbpm.ervu_dashboard .graph-legend-column > .vertical-container .text-invert:not(.mute) label {
font-size: var(--size-text-primary);
color: var(--color-text-secondary);
}
.webbpm.ervu_dashboard .graph-legend-column > .vertical-container .text-invert > div {
justify-content: flex-end;
}
.webbpm.ervu_dashboard .graph-legend-row > .horizontal-container > vbox {
padding-right: 0;
}
.webbpm.ervu_dashboard .graph-legend-row > .horizontal-container > vbox + vbox {
padding-left: var(--indent-base);
margin-left: var(--indent-base);
}
.webbpm.ervu_dashboard .graph-legend-row > .horizontal-container > vbox > .vertical-container {
height: 100%;
}
.webbpm.ervu_dashboard .graph-legend-row > .horizontal-container > vbox > .vertical-container [class*="legend-col"] {
padding-bottom: var(--indent-base);
margin-bottom: auto;
}
.webbpm.ervu_dashboard .graph-legend-row > .horizontal-container > vbox > .vertical-container .text-invert:not(.mute) {
font-size: var(--size-num-primary);
}
.webbpm.ervu_dashboard .graph-legend-row > .horizontal-container > vbox > .vertical-container .text-invert:not(.mute) label {
font-size: var(--size-text-primary);
color: var(--color-text-secondary);
}
.webbpm.ervu_dashboard .graph-legend-right {
color: var(--color-text-secondary);
}
.webbpm.ervu_dashboard .graph-legend-right .text-invert > div {
justify-content: flex-end;
}
.webbpm.ervu_dashboard .graph-legend-right .text-invert > div > div:last-of-type {
color: var(--color-text-primary);
font-size: var(--size-num-primary);
}
.webbpm.ervu_dashboard [class*="graph-legend"] ervu-chart-v2 ~ hbox,
.webbpm.ervu_dashboard [class*="graph-legend"] > div > hbox {
margin-top: var(--indent-mini);
}
.webbpm.ervu_dashboard [class*="graph-legend"] .form-group {
align-items: baseline;
line-height: normal;
margin-bottom: 0;
}
.webbpm.ervu_dashboard [class*="graph-legend"] .mute {
white-space: nowrap;
}
.webbpm.ervu_dashboard [class*="graph-legend"] [class*="legend-col"] { .webbpm.ervu_dashboard [class*="graph-legend"] [class*="legend-col"] {
position: relative; position: relative;
padding-left: var(--indent-large); padding-left: var(--indent-large);
@ -328,39 +250,24 @@
top: var(--indent-xmini); top: var(--indent-xmini);
left: 0; left: 0;
border-radius: var(--indent-base); border-radius: var(--indent-base);
} }
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-green::before { .webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-green::before {
background-color: var(--color-success); background-color: #a3bd9c;
} }
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-red::before { .webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-red::before {
background-color: var(--color-error); background-color: #e4aaac;
} }
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-yellow::before { .webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-yellow::before {
background-color: #ffc737; background-color: #d4c892;
}
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-blue-lt::before {
background-color: #00f0ff;
} }
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-blue::before { .webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-blue::before {
background-color: #17a8fa; background-color: #a0c3f0;
} }
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-lila::before { .webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-lila::before {
background-color: #e24fd4; background-color: #9193b7;
}
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-coral::before {
background-color: #ff4f5e;
} }
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-orange::before { .webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-orange::before {
background-color: #d98200; background-color: #e9decd;
}
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-orange-dk::before {
background-color: #db5c00;
}
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-olive::before {
background-color: #808000;
}
.webbpm.ervu_dashboard [class*="graph-legend"] .legend-col-dark-blue::before {
background-color: #4d66cc;
} }
.webbpm.ervu_dashboard grid-v2 { .webbpm.ervu_dashboard grid-v2 {