IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactoring: changing how graph height and legend height is calculated, using flex box seems to actually work, #10079

Browse Source
This commit is contained in:
Torkel Ödegaard
2017-12-07 19:53:32 +01:00
parent c629a58b6d
commit 8415ea6c71
5 changed files with 62 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
public/sass/components/_panel_graph.scss
View File

@@ -1,10 +1,39 @@
.graph-canvas-wrapper {
position: relative;
cursor: crosshair;
.graph-panel {
display: flex;
flex-direction: column;
height: 100%;
&--legend-right {
flex-direction: row;
// .graph-panel__chart {
// display: table-cell;
// width: 100%;
// position: relative;
// }
.graph-legend {
max-height: 100%;
position: relative;
left: 4px;
margin: 0 0 0 1rem;
}
.graph-legend-series {
display: block;
padding-left: 0px;
}
.graph-legend-table .graph-legend-series {
display: table-row;
}
}
}
.histogram-chart {
.graph-panel__chart {
position: relative;
cursor: crosshair;
flex-grow: 1;
}
.datapoints-warning {
@@ -23,6 +52,8 @@
.graph-legend {
@include clearfix();
flex: 0 1 auto;
max-height: 30%;
margin: 0 $spacer;
text-align: center;
width: calc(100% - $spacer);
@@ -161,39 +192,6 @@
}
}
.graph-legend-rightside {
&.graph-wrapper {
display: table;
width: 100%;
}
.graph-canvas-wrapper {
display: table-cell;
width: 100%;
position: relative;
}
.graph-legend-wrapper {
display: table-cell;
vertical-align: top;
position: relative;
left: 4px;
}
.graph-legend {
margin: 0 0 0 1rem;
}
.graph-legend-series {
display: block;
padding-left: 0px;
}
.graph-legend-table .graph-legend-series {
display: table-row;
}
}
.graph-legend-series-hidden {
.graph-legend-value,