mirror of
https://github.com/prometheus/prometheus.git
synced 2025-03-05 20:59:13 -08:00
373f09796d
* feat: scaffold new ui native histogram Signed-off-by: Manik Rana <[email protected]> * feat: add native histogram rendering Signed-off-by: Manik Rana <[email protected]> * feat: add tooltip Signed-off-by: Manik Rana <[email protected]> * fix:revert package-lock changes Signed-off-by: Manik Rana <[email protected]> * chore: fix tab spacing Signed-off-by: Manik Rana <[email protected]> * fix: apply suggestions and fixes Signed-off-by: Manik Rana <[email protected]> * chore: lint Signed-off-by: Manik Rana <[email protected]> --------- Signed-off-by: Manik Rana <[email protected]>
107 lines
1.7 KiB
CSS
107 lines
1.7 KiB
CSS
.histogramYWrapper {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
align-items: flex-start;
|
|
box-sizing: border-box;
|
|
margin: 15px 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.histogramYLabels {
|
|
height: 200px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.histogramYLabel {
|
|
margin-right: 8px;
|
|
height: 25%;
|
|
text-align: right;
|
|
}
|
|
|
|
.histogramXWrapper {
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.histogramXLabels {
|
|
display: flex;
|
|
}
|
|
|
|
.histogramXLabel {
|
|
position: relative;
|
|
margin-top: 5px;
|
|
width: 100%;
|
|
text-align: right;
|
|
}
|
|
|
|
.histogramContainer {
|
|
margin-top: 9px;
|
|
position: relative;
|
|
height: 200px;
|
|
}
|
|
|
|
.histogramAxes {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-bottom: 1px solid var(--mantine-color-gray-7);
|
|
border-left: 1px solid var(--mantine-color-gray-7);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.histogramYGrid {
|
|
position: absolute;
|
|
border-bottom: 1px dashed var(--mantine-color-gray-6);
|
|
width: 100%;
|
|
}
|
|
|
|
.histogramYTick {
|
|
position: absolute;
|
|
border-bottom: 1px solid var(--mantine-color-gray-7);
|
|
left: -5px;
|
|
height: 0px;
|
|
width: 5px;
|
|
}
|
|
|
|
.histogramXGrid {
|
|
position: absolute;
|
|
border-left: 1px dashed var(--mantine-color-gray-6);
|
|
height: 100%;
|
|
width: 0;
|
|
}
|
|
|
|
.histogramXTick {
|
|
position: absolute;
|
|
border-left: 1px solid var(--mantine-color-gray-7);
|
|
height: 5px;
|
|
width: 0;
|
|
bottom: -5px;
|
|
}
|
|
|
|
.histogramBucketSlot {
|
|
position: absolute;
|
|
bottom: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.histogramBucket {
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom: 0;
|
|
background-color: #2db453;
|
|
border: 1px solid #77de94;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.histogramBucketSlot:hover {
|
|
background-color: var(--mantine-color-gray-4);
|
|
}
|
|
|
|
.histogramBucketSlot:hover .histogramBucket {
|
|
background-color: #88e1a1;
|
|
border: 1px solid #77de94;
|
|
}
|