Commit f4a7ef79 authored by Alex Pyrgiotis's avatar Alex Pyrgiotis
Browse files

admin: Migrate from Highcharts to C3

For every chart that uses Highcharts, add its C3 counterpart below it.
The change from Highcharts to C3 is for license reasons.
parent 0d1b405d
/*-- Chart --*/
.c3 svg {
font: 10px sans-serif;
}
.c3 path, .c3 line {
fill: none;
stroke: #000;
}
.c3 text {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid,
.c3-event-rect,
.c3-bars path {
shape-rendering: crispEdges;
}
.c3-chart-arc path {
stroke: #fff;
}
.c3-chart-arc text {
fill: #fff;
font-size: 13px;
}
/*-- Axis --*/
.c3-axis-x .tick {
}
.c3-axis-x-label {
}
.c3-axis-y .tick {
}
.c3-axis-y-label {
}
.c3-axis-y2 .tick {
}
.c3-axis-y2-label {
}
/*-- Grid --*/
.c3-grid line {
stroke: #aaa;
}
.c3-grid text {
fill: #aaa;
}
.c3-xgrid, .c3-ygrid {
stroke-dasharray: 3 3;
}
.c3-xgrid-focus {
}
/*-- Text on Chart --*/
.c3-text {
}
.c3-text.c3-empty {
fill: #808080;
font-size: 2em;
}
/*-- Line --*/
.c3-line {
stroke-width: 1px;
}
/*-- Point --*/
.c3-circle._expanded_ {
stroke-width: 1px;
stroke: white;
}
.c3-selected-circle {
fill: white;
stroke-width: 2px;
}
/*-- Bar --*/
.c3-bar {
stroke-width: 0;
}
.c3-bar._expanded_ {
fill-opacity: 0.75;
}
/*-- Arc --*/
.c3-chart-arcs-title {
font-size: 1.3em;
}
/*-- Focus --*/
.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
stroke-width: 2px;
}
/*-- Region --*/
.c3-region {
fill: steelblue;
fill-opacity: .1;
}
/*-- Brush --*/
.c3-brush .extent {
fill-opacity: .1;
}
/*-- Select - Drag --*/
.c3-dragarea {
}
/*-- Legend --*/
.c3-legend-item {
font-size: 12px;
}
.c3-legend-background {
opacity: 0.75;
fill: white;
stroke: lightgray;
stroke-width: 1
}
/*-- Tooltip --*/
.c3-tooltip {
border-collapse:collapse;
border-spacing:0;
background-color:#fff;
empty-cells:show;
-webkit-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
-moz-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
box-shadow: 7px 7px 12px -9px rgb(119,119,119);
opacity: 0.9;
}
.c3-tooltip tr {
border:1px solid #CCC;
}
.c3-tooltip th {
background-color: #aaa;
font-size:14px;
padding:2px 5px;
text-align:left;
color:#FFF;
}
.c3-tooltip td {
font-size:13px;
padding: 3px 6px;
background-color:#fff;
border-left:1px dotted #999;
}
.c3-tooltip td > span {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 6px;
}
.c3-tooltip td.value{
text-align: right;
}
.c3-area {
stroke-width: 0;
opacity: 0.2;
}
.c3-chart-arcs .c3-chart-arcs-background {
fill: #e0e0e0;
stroke: none;
}
.c3-chart-arcs .c3-chart-arcs-gauge-unit {
fill: #000;
font-size: 16px;
}
.c3-chart-arcs .c3-chart-arcs-gauge-max {
fill: #777;
}
.c3-chart-arcs .c3-chart-arcs-gauge-min {
fill: #777;
}
.c3-chart-arc .c3-gauge-value {
fill: #000;
font-size: 28px;
}
......@@ -2,7 +2,7 @@
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* line 17, ../../../../../../../var/lib/gems/1.9.1/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
/* line 5, ../../../../../../../usr/local/rvm/gems/ruby-2.1.2/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
......@@ -23,37 +23,37 @@ time, mark, audio, video {
font-size: 100%;
vertical-align: baseline; }
/* line 22, ../../../../../../../var/lib/gems/1.9.1/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
/* line 22, ../../../../../../../usr/local/rvm/gems/ruby-2.1.2/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
html {
line-height: 1; }
/* line 24, ../../../../../../../var/lib/gems/1.9.1/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
/* line 24, ../../../../../../../usr/local/rvm/gems/ruby-2.1.2/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
ol, ul {
list-style: none; }
/* line 26, ../../../../../../../var/lib/gems/1.9.1/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
/* line 26, ../../../../../../../usr/local/rvm/gems/ruby-2.1.2/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
table {
border-collapse: collapse;
border-spacing: 0; }
/* line 28, ../../../../../../../var/lib/gems/1.9.1/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
/* line 28, ../../../../../../../usr/local/rvm/gems/ruby-2.1.2/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle; }
/* line 30, ../../../../../../../var/lib/gems/1.9.1/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
/* line 30, ../../../../../../../usr/local/rvm/gems/ruby-2.1.2/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
quotes: none; }
/* line 103, ../../../../../../../var/lib/gems/1.9.1/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
/* line 103, ../../../../../../../usr/local/rvm/gems/ruby-2.1.2/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none; }
/* line 32, ../../../../../../../var/lib/gems/1.9.1/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
/* line 32, ../../../../../../../usr/local/rvm/gems/ruby-2.1.2/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
a img {
border: none; }
/* line 116, ../../../../../../../var/lib/gems/1.9.1/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
/* line 116, ../../../../../../../usr/local/rvm/gems/ruby-2.1.2/gems/compass-core-1.0.1/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block; }
This diff is collapsed.
......@@ -11,15 +11,15 @@ $(document).ready(function() {
success: function(response, statusText, jqXHR) {
astakos_stats = response;
infraUsage(astakos_stats);
for (var key in astakos_stats.resources.all) {
resourceUsage(astakos_stats, key);
}
statusPerProvider(astakos_stats);
statusPerProviderReversed(astakos_stats);
exclusiveProviders(astakos_stats);
for (var key in astakos_stats.resources.all) {
resourceUsage(astakos_stats, key);
};
},
error: function(jqXHR, statusText) {
console.log('error', statusText)
console.log('error', statusText);
}
});
......@@ -28,25 +28,24 @@ $(document).ready(function() {
type: 'GET',
contentType: 'application/json',
success: function(response, statusText, jqXHR) {
cyclades_stats = response
cyclades_stats = response;
serverStatus(cyclades_stats);
ipPoolStatus(cyclades_stats);
diskTemplates(cyclades_stats);
imagesStats(cyclades_stats);
},
error: function(jqXHR, statusText) {
console.log('error', statusText)
console.log('error', statusText);
}
});
// when page is loaded show charts whose sidebar a is active
function display_charts_init(){
$('.charts .sidebar a.active').each(function(){
var el = $(this).attr('data-chart');
$('.well').find('div[data-chart='+el+']').show();
});
};
}
display_charts_init();
......@@ -54,6 +53,6 @@ $(document).ready(function() {
e.preventDefault();
$(this).toggleClass('active');
var el = $(this).attr('data-chart');
$('.well').find('div[data-chart='+el+']').stop(true, false).slideToggle('slow')
$('.well').find('div[data-chart='+el+']').stop(true, false).slideToggle('slow');
});
});
This diff is collapsed.
......@@ -357,3 +357,25 @@ svg>text:last-child {
left: 10px;
bottom: 10px;
}
.charts {
.info {
overflow: hidden;
}
h3 {
text-align: center;
margin-bottom: 1em;
}
.c3-axis {
fill: $text-color;
}
.c3 path, .c3 line {
stroke: $text-color;
}
.c3-legend-item text {
fill: $text-color;
}
.c3-tooltip {
color: #222;
}
}
......@@ -17,6 +17,10 @@
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,700,300,600' rel='stylesheet' type='text/css'>
</head>
{% block custom-css %}
{% endblock %}
<body>
<div class="wrapper">
{% block nav-bar %}
......
{% extends "admin/base.html" %}
{% block custom-css %}
<link href="{{ ADMIN_MEDIA_URL }}css/c3.css" rel="stylesheet" type="text/css">
{% endblock %}
{% block nav-reports %}
class="has-dropdown active"
{% endblock %}
......@@ -24,27 +28,57 @@ class="active"
&nbsp;
</div>
<div class="info well">
<div id="infra-usage" class="chart" data-chart="resource-usage"></div>
<div id="infra-usage-wrap" class="chart" data-chart="resource-usage">
<h3>Infra usage</h3>
<div id="infra-usage"></div>
</div>
<div id="resource-usage" class="chart" data-chart="resource-usage"></div>
<div id="provider-status" class="chart" data-chart="temp"></div>
<div id="provider-status-reversed" class="chart" data-chart="temp"></div>
<div id="provider-exclusiveness" class="chart" data-chart="temp"></div>
<div id="server-status" class="chart" data-chart="vm-status"></div>
<div id="ip-pool-status" class="chart" data-chart="ip-status"></div>
<div id="disk-templates" class="chart" data-chart="disk-templates"></div>
<div id="images" class="chart" data-chart="images"></div>
<div id="provider-status-wrap" class="chart" data-chart="temp">
<h3>Providers per user status<h3>
<div id="provider-status"></div>
</div>
<div id="provider-status-reversed-wrap" class="chart" data-chart="temp">
<h3>Status per user provider</h3>
<div id="provider-status-reversed"></div>
</div>
<div id="provider-exclusiveness-wrap" class="chart" data-chart="temp">
<h3>Provider exclusiveness</h3>
<div id="provider-exclusiveness"></div>
</div>
<div id="server-status-wrap" class="chart" data-chart="vm-status">
<h3>Server status</h3>
<div id="server-status"></div>
</div>
<div id="ip-pool-status-wrap" class="chart" data-chart="ip-status">
<h3>IP pool status</h3>
<div id="ip-pool-status"></div>
</div>
<div id="disk-templates-wrap" class="chart" data-chart="disk-templates">
<h3>Disk templates</h3>
<div id="disk-templates"></div>
</div>
<div id="images-wrap" class="chart" data-chart="images">
<h3>Images</h3>
<div id="images"></div>
</div>
</div>
</div>
{% endblock %}
{% block custom-javascript %}
<script src="{{ MEDIA_URL }}admin/js/highstock.src.js"></script>
<script src="{{ MEDIA_URL }}admin/js/Highcharts_drilldown.src.js"></script>
<!-- Load d3.js and c3.js -->
<script src="{{ ADMIN_MEDIA_URL }}js/d3.v3.min.js"></script>
<!--Switch to c3.min at some point-->
<script src="{{ ADMIN_MEDIA_URL }}js/c3.js"></script>
<script src="{{ ADMIN_MEDIA_URL }}js/highstock.src.js"></script>
<script src="{{ ADMIN_MEDIA_URL }}js/Highcharts_drilldown.src.js"></script>
{% if request.COOKIES.theme == 'dark' %}
<script src="{{ MEDIA_URL }}admin/js/charts_theme.js"></script>
<script src="{{ ADMIN_MEDIA_URL }}js/charts_theme.js"></script>
{% endif %}
<script src="{{ MEDIA_URL }}admin/js/charts.js"></script>
<script src="{{ MEDIA_URL }}admin/js/charts_common.js"></script>
<script src="{{ ADMIN_MEDIA_URL }}js/charts.js"></script>
<script src="{{ ADMIN_MEDIA_URL }}js/charts_common.js"></script>
{% endblock %}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment