big-data/hadoop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

YARN-7075. Better styling for donut charts in new YARN UI. Contributed by Da Ding.

Browse Source
This commit is contained in:
Sunil G 2017-09-02 08:08:59 +05:30
parent 7996eca7dc
commit 275980bb1e
2 changed files with 26 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/components/donut-chart.js
View File

@ -53,7 +53,10 @@ export default BaseChartComponent.extend({
// 50 is for title
var outerRadius = (h - 50 - 2 * layout.margin) / 2;
var innerRadius = outerRadius * 0.618;
// Ratio of inner radius to outer radius
var radiusRatio = 0.75;
var innerRadius = outerRadius * radiusRatio;
var arc = d3.svg.arc()
.innerRadius(innerRadius)

24
hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.css
View File

@ -20,6 +20,8 @@ body, html, body > .ember-view {
height: 100%;
overflow: visible;
color: @text-color;
background: #f6f6f8;
font-family: "Open Sans","Helvetica Neue", sans-serif!important;
}
body, html {
min-width: 1024px;
@ -29,11 +31,11 @@ body, html {
Over all style
*/
text {
font: 16px sans-serif;
font-size: 14px;
}
text.small {
font: 8px sans-serif;
font-size: 8px;
}
html, body
@ -184,6 +186,7 @@ table.dataTable thead .sorting_desc_disabled {
.breadcrumb {
padding-bottom: 3px;
background-color: #f6f6f8;
}
.navbar-default .navbar-nav > li > a {
@ -268,12 +271,29 @@ td {
margin: 0 auto -40px; // Must be same as footer & footer-frame
}
.panel {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 15px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.panel-default .container-fluid {
margin-top: -45px !important;
margin-bottom: -10px !important;
}
.panel-default > .panel-heading {
background-image: none;
background-color: #f5f5f5 !important;
border-radius: 15px 15px 0px 0px;
}
.panel-heading {
background-color: rgba(0, 0, 0, 0) !important;
font-weight: bold;
}