mirror of
https://we.phorge.it/source/phorge.git
synced 2024-09-20 09:18:48 +02:00
f529abf900
Summary: Ref T13279. We currently draw a point on the chart for each datapoint, but this leads to many overlapping circles. Instead, aggregate the raw points into display points ("events") at the end. Test Plan: Viewed a stacked area chart with many points, saw a more palatable number of drawn dots. Subscribers: yelirekim Maniphest Tasks: T13279 Differential Revision: https://secure.phabricator.com/D20814
96 lines
1.4 KiB
CSS
96 lines
1.4 KiB
CSS
/**
|
|
* @provides phui-chart-css
|
|
*/
|
|
|
|
.chart .axis line,
|
|
.chart .axis path {
|
|
fill: none;
|
|
stroke: {$blueborder};
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
.chart .axis text {
|
|
font: {$basefont};
|
|
fill: {$darkgreytext};
|
|
}
|
|
|
|
.chart .outer,
|
|
.chart .inner {
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
.chart .outer {
|
|
fill: none;
|
|
stroke: none;
|
|
}
|
|
|
|
.chart .inner {
|
|
fill: {$lightbluebackground};
|
|
stroke: {$lightblueborder};
|
|
}
|
|
|
|
.chart .line {
|
|
fill: none;
|
|
stroke: {$blue};
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
.chart .point {
|
|
fill: #ffffff;
|
|
stroke: {$blue};
|
|
stroke-width: 2px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chart-tooltip {
|
|
position: absolute;
|
|
text-align: center;
|
|
width: 120px;
|
|
overflow: hidden;
|
|
padding: 2px;
|
|
background: {$lightbluebackground};
|
|
border: 1px solid {$blueborder};
|
|
border-radius: 8px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.chart-hardpoint {
|
|
min-height: 480px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.device-desktop .chart-container {
|
|
position: absolute;
|
|
bottom: 0;
|
|
top: 0;
|
|
left: 0;
|
|
right: 300px;
|
|
}
|
|
|
|
.device .chart-container {
|
|
min-height: 480px;
|
|
}
|
|
|
|
.device-desktop .chart-curtain {
|
|
width: 300px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.chart-function-label-list {
|
|
background: {$lightbluebackground};
|
|
border: 1px solid {$lightblueborder};
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.device-desktop .chart-function-label-list {
|
|
margin-top: 23px;
|
|
}
|
|
|
|
.chart-function-label-list-item .phui-icon-view {
|
|
margin-right: 8px;
|
|
}
|