Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ICT spending Dashboard graphs

ICT spending Dashboard graphs

Queensland Government dashboard detailing ICT spending within the governments departments. It utilises API hooks within CKAN (open source data portal software - http://ckan.org) and the Qld open data site specifically: http://data.qld.gov.au

Scale the window down to see the mobile view - has to reload highcharts to achieve the smaller view - hence the Kah-lunk-eee-ness.

The pen links to a second pen (http://codepen.io/boars/pen/KpQqVm/) that digs deeper into spending and information about said spending.

This pen has been slapped together pretty quickly... apologies for the mess :)

A Pen by William Savage on CodePen.

License.

<div id="ictdb">
<div id="ictb-intro">
<p>Qld Gov ICT expenditure
</p>
</div>
<h2>Overview</h2>
<div id="overview-status">
<h3>Status of projects (<a href="http://s.codepen.io/boars/debug/KpQqVm?" class="gtotal"></a>)</h3>
<ul class="graph">
<li class="g1"><a href="http://s.codepen.io/boars/debug/KpQqVm?ProjectStatusG=G"><span></span></a></li>
<li class="g2"><a href="http://s.codepen.io/boars/debug/KpQqVm?ProjectStatusA=A"><span></span></a></li>
<li class="g3"><a href="http://s.codepen.io/boars/debug/KpQqVm?ProjectStatusR=R"><span></span></a></li>
</ul>
<ul class="gkey">
<li class="g1">
<a href="http://s.codepen.io/boars/debug/KpQqVm?ProjectStatusG=G"><img src="http://www.qld.gov.au/ictdashboard/assets/images/flag-G.png" alt="">On track</a>
</li>
<li class="g2">
<a href="http://s.codepen.io/boars/debug/KpQqVm?ProjectStatusA=A"><img src="http://www.qld.gov.au/ictdashboard/assets/images/flag-A.png" alt="">Closely monitored</a>
</li>
<li class="g3">
<a href="http://s.codepen.io/boars/debug/KpQqVm?ProjectStatusR=R"><img src="http://www.qld.gov.au/ictdashboard/assets/images/flag-R.png" alt="">Action required</a>
</li>
</ul>
</div>
<div id="overview-expenditure" style="text-align:center">
<h3>Expenditure of projects</h3>
<a href="http://s.codepen.io/boars/debug/KpQqVm?direction=desc&sort=Revised+total+estimated+expenditure">
<ul class="graph">
<li class="g1"><span>0M</span></li>
<li class="g2"><span>100M</span></li>
</ul>
</a>
<ul class="gkey">
<li class="g1"><span></span>Cost to date</li>
<li class="g2"><span></span>Planned expenditure</li>
</ul>
</div>
<div id="projects" style="margin-top: 2em">
<div id="feature-search-db">
<form method="get" action="http://s.codepen.io/boars/debug/KpQqVm">
<div class="search-wrapper" style="float:left; text-align: left; width: 100%">
<label for="search-query-primary" class="visuallyhidden">Search for ICT projects</label>
<input accesskey="6" type="text" name="query" id="search-query-primary" size="30" value="" autocomplete="off" placeholder="Search for ICT projects" style="width: 60%; float: left; padding: 0.5em 3%; font-size: 1em">
<div class="submit" style="float: left; width: 28%">
<button class="button" style="background: #585e62; width: 100%; font-size: 1em">Search</button>
</div>
</div>
</form>
</div>
<h2>Projects by department</h2>
<p><a href="http://s.codepen.io/boars/debug/KpQqVm">View all projects</a></p>
</div>
<div id="project-status">
<div id="containerProjectStatus"></div>
</div>
<div id="project-expenditure">
<div id="containerProjectExpenditure"></div>
</div>
</div>
function getDataFromCKAN( domain, sql, options ) {
var errorCallback;
if ( $.isFunction( options )) {
options = {
successCallback: options,
cache: false
};
} else {
options = $.extend({ cache: false }, options );
}
errorCallback = function() {
$( document ).status( 'show', {
status: 'fail',
lightbox: true,
title: 'Error loading data',
body: '<p>We were unable to retrieve data.</p><p>Please try again later.</p>'
});
};
$.ajax({
type: 'GET',
url: 'https://' + domain + '/api/action/datastore_search_sql',
data: { sql: sql },
callbackParameter: 'callback',
success: options.successCallback,
error: errorCallback,
pageCache: options.cache,
dataType: 'jsonp'
}).done(function(json){
//console.log(json);
//callback(json);
}).fail(function(f){
//console.log("f");
//console.log(f.status);
}).always(function(){
// console.log('complete');
});
};
// set up container relative to device size
var win = $(window);
if (win.width() < 640) {
$('#ictdb').addClass('small');
$('#ictdb .aside a').removeClass('button');
$('#ictdb .aside div').removeClass('actions');
} else if (win.width() >= 640 && win.width() <= 980) {
$('#ictdb').addClass('medium');
}
var crossGovFunc = function () {
var crossGov = $( 'div.highcharts-xaxis-labels abbr' ).filter(function(index) { return $(this).text() === "Cross-Gov"; });
// if (crossGov.closest('span').css('top').match('^-')) {
// setTimeout(function (){
// $('#containerProjectStatus').empty();
// }, 100);
// }
crossGov.css('margin-left', '3px');
crossGov.text('Cross Gov');
}
var CleanupNaN = function () {
setTimeout(function (){
$( 'g.highcharts-data-labels.highcharts-tracker g text' ).filter(function(index) { return $(this).text() === "NaN"; }).text('');
}, 300);
setTimeout(function (){
$( 'g.highcharts-data-labels.highcharts-tracker g text' ).filter(function(index) { return $(this).text() === "NaN"; }).text('');
}, 100);
setTimeout(function (){
crossGovFunc();
}, 300);
setTimeout(function (){
crossGovFunc();
}, 100);
}
// watch page for width changed - to clean up graph errors and to reload if crossing device specific dimensions
$(window).on('resize', function(){
var win = $(this); //this = window
if (win.width() < 640 && !$('#ictdb').hasClass('small')) {
$('#ictdb').addClass('small');
$('#ictdb').removeClass('medium');
$('#ictdb .aside a').removeClass('button');
$('#ictdb .aside div').removeClass('actions');
getProjectListByDepartment();
} else if (win.width() >= 640 && win.width() <= 980 && $('#ictdb').hasClass('small')) {
$('#ictdb').removeClass('small');
$('#ictdb').addClass('medium');
$('#ictdb .aside a').addClass('button');
$('#ictdb .aside div').addClass('actions');
getProjectListByDepartment();
} else if (win.width() >= 640 && win.width() <= 980 && !$('#ictdb').hasClass('medium') && !$('#ictdb').hasClass('small') ) {
$('#ictdb').addClass('medium');
CleanupNaN(); // run NaN cleanup
} else if (win.width() > 980 && $('#ictdb').hasClass('small')) {
$('#ictdb').removeClass('small');
$('#ictdb').removeClass('medium');
$('#ictdb .aside a').addClass('button');
$('#ictdb .aside div').addClass('actions');
getProjectListByDepartment();
} else if (win.width() > 980 && $('#ictdb').hasClass('medium')) {
$('#ictdb').removeClass('medium');
CleanupNaN(); // run NaN cleanup
}
else {
CleanupNaN(); // run NaN cleanup
}
});
var domain = (window.location.href.indexOf("qld-uat.ssq.qld.gov.au") > -1 ? 'staging.data.qld.gov.au' : 'data.qld.gov.au' );
$( 'body' ).addClass( domain == 'data.qld.gov.au' ? 'prod' : 'test env-uat' );
if (domain != 'data.qld.gov.au' ) {
$('#ictb-intro').prepend('<p style="color:#f00; font-size: 1.5em"><strong>DATA FOR TEST USE ONLY</strong></p>');
}
var table = 'ictdashboards_tables()';
var overviewTitle = '',
getFilters,
getProjectOverview,
displayProjectOverview,
displayProjectDashboards,
displayStatusDashboard,
displayExpendituresDashboard,
getProjectListByDepartment,
displayStatusOverview,
displayExpendituresOverview
;
function SortByExpenditure(x,y) {
return y.totalprojects - x.totalprojects;
}
displayStatusOverview = function ( seriesData ) {
var minDisplay = 2,
redVals = [],
amberVals = [],
greenVals = []
;
$.each(seriesData, function ( item, value ) {
amberVals.push( parseFloat( value.amber ));
greenVals.push( parseFloat( value.green ));
redVals.push( parseFloat( value.red ));
});
var red = redVals[0];
var amber = amberVals[0];
var green = greenVals[0];
var totalProj = red + green + amber;
var redPercent = red / totalProj * 100;
var amberPercent = amber / totalProj * 100;
var greenPercent = green / totalProj * 100;
if (amber < 10 && amber > 0 && red < 10 && red > 0 && green > 10) { // IF red & amber 0.1-9.9
redPercent = 10;
amberPercent = 10;
greenPercent = 80;
} else if (amber < 10 && amber > 0 && red > 10 && green > 10) { // IF amber 0.1-9.9
var totalProjA = totalProj - amber;
redPercent = red / totalProjA * 90;
amberPercent = 10;
greenPercent = green / totalProjA * 90;
} else if (red < 10 && red > 0 && amber > 10 && green > 10) { // IF red 0.1-9.9
var totalProjR = totalProj - red;
redPercent = 10;
amberPercent = amber / totalProjR * 90;
greenPercent = green / totalProjR * 90;
}
$('#overview-status .graph li.g3').css('width', redPercent + '%');
$('#overview-status .graph li.g2').css('width', amberPercent + '%');
$('#overview-status .graph li.g1').css('width', greenPercent + '%');
$('#overview-status .graph li.g3 span').text( red );
$('#overview-status .graph li.g2 span').text( amber );
$('#overview-status .graph li.g1 span').text( green );
$('#overview-status a.gtotal').text( totalProj );
};
displayExpendituresOverview = function ( seriesData ) {
var minDisplay = 2,
actualCostVals = [],
revisedExpenditureVals = []
;
$.each(seriesData, function ( item, value ) {
actualCostVals.push( parseFloat( value.totalactualcost ));
revisedExpenditureVals.push( parseFloat( value.totalrevisedexpenditure ));
});
$('#overview-expenditure .graph .g1 span').text('$' + Math.round( ( actualCostVals[0] / 1000000) *10) / 10 + 'M' );
$('#overview-expenditure .graph .g2 span').text('$' + Math.round( ( revisedExpenditureVals[0] / 1000000) *10) / 10 + 'M' );
var percentage = actualCostVals / revisedExpenditureVals * 100;
$('#overview-expenditure .graph li.g1').css('width', percentage + '%');
};
displayStatusDashboard = function ( seriesData ) {
var minDisplay = 1,
xAxisTitle = "Total number of projects",
yLabels = [],
yLabelsFull = [],
yLabelsTotalProjects = [],
redVals = [],
amberVals = [],
greenVals = []
;
$.each(seriesData, function ( item, value ) {
redVals.push( parseFloat( value.red ));
amberVals.push( parseFloat( value.amber ));
greenVals.push( parseFloat( value.green ));
yLabels.push( value.Agency );
yLabelsFull.push( value.AgencyName );
yLabelsTotalProjects.push( value.totalprojects );
});
$('#containerProjectStatus').highcharts({
chart: {
type: 'bar',
backgroundColor:'rgba(0,0,0,0.0)',
marginLeft: 120
},
credits: {
enabled: false
},
title: {
text: (($('#ictdb.small')[0]) ? 'Status of projects' : ''),
style: {
fontSize: '16px',
font: 'Trebuchet MS, Verdana, sans-serif',
fontWeight: 'bold'
}
},
tooltip: {
enabled: false
},
xAxis: {
categories: yLabels,
lineColor: 'rgba(0,0,0,0.2)',
gridLineWidth: 1,
tickLength: 150,
tickColor: 'rgba(0,0,0,0.2)',
gridLineColor: 'rgba(0,0,0,0.2)',
labels: {
style: {
color: '#525151',
fontSize: (($('#ictdb.small')[0]) ? '14px' : '12px'),
font: 'Trebuchet MS, Verdana, sans-serif',
fontWeight: 'bold'
},
formatter: function() {
return '<a href="http://s.codepen.io/boars/debug/KpQqVm?Agency=' + this.value + '"><abbr title="' + yLabelsFull[jQuery.inArray(this.value, yLabels)] + '">' + this.value + '</abbr></a>' + ( yLabelsTotalProjects[jQuery.inArray(this.value, yLabels)] > 0 ? ' ('+ yLabelsTotalProjects[jQuery.inArray(this.value, yLabels)] + ')' : '')
},
useHTML: true,
cursor: 'pointer'
}
},
yAxis: {
gridLineWidth: 0.5,
gridLineColor: '#eee',
minPointLength: 20,
tickLength: 5,
tickColor:'rgba(0,0,0,0.0)',
tickWidth: 1,
minTickInterval: 5,
allowDecimals: false,
labels: {
style: {
color: '#525151',
fontSize: '10px',
font: 'Trebuchet MS, Verdana, sans-serif',
fontWeight: 'bold'
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray',
fontSize: '14px',
font: 'Trebuchet MS, Verdana, sans-serif'
},
formatter: function(){ // if a label has less than 1 value - do not output label onto graph
var valStack;
if (this.total === 0) {
valStack = 'Nil projects';
} else {
valStack = '';
}
return valStack;
}
},
title: {
text: 'Projects by department',
align: 'left',
style: {
fontWeight: 'bold',
color: 'black'
}
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.2)',
dataLabels: {
style: {
color: '#525151',
fontSize: '12px',
font: 'Trebuchet MS, Verdana, sans-serif',
marginLeft: 0,
paddingLeft: 0,
fontWeight: 'bold'
},
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
formatter: function(){ // if a label has less than 1 value - do not output label onto graph
var val = this.y;
if (val < minDisplay || val === 'NaN') {
val = '';
}
if (this.point.stackTotal === '0') {
val = 'Nil projects';
}
return val;
}
},
cursor: 'pointer',
point: {
events: {
click: function() {
var gar = '';
if ( this.series.name === 'Green' ) {
gar = '&ProjectStatusG=G'
}
if ( this.series.name === 'Amber' ) {
gar = '&ProjectStatusA=A'
}
if ( this.series.name === 'Red' ) {
gar = '&ProjectStatusR=R'
}
location.href = 'http://s.codepen.io/boars/debug/KpQqVm?Agency=' + yLabels[this.x] + gar;
}
}
} // end point
}
},
series: [{
name: 'Red',
data: redVals,
color: 'red',
pointWidth: (($('#ictdb.small')[0]) ? 26 : 16)
}, {
name: 'Amber',
data: amberVals,
color: 'rgba(255,165,0,1)',
pointWidth: (($('#ictdb.small')[0]) ? 26 : 16)
}, {
name: 'Green',
data: greenVals,
color: 'rgba(120,186,0,1)',
pointWidth: (($('#ictdb.small')[0]) ? 26 : 16)
}]
});
$( '.highcharts-container' ).filter(function(index) { return $(this).text() === "0"; }).text('Nil projects');
};
displayExpendituresDashboard = function ( seriesData ) {
var minDisplay = 2,
xAxisTitle = "Total number of projects",
yLabels = [],
yLabelsFull = [],
actualCostVals = [],
revisedExpenditureVals = [],
maxRevisedExpenditureVals = 0
;
$.each(seriesData, function ( item, value ) {
yLabels.push( value.Agency );
yLabelsFull.push( value.AgencyName );
actualCostVals.push( parseFloat( value.totalactualcost ));
revisedExpenditureVals.push( parseFloat( value.totalrevisedexpenditure ));
});
// set max width of bar graph for expenditure - different value for small devides and med/large due to text size
(($('#ictdb.small')[0]) ? maxRevisedExpenditureVals = Math.max.apply(Math,revisedExpenditureVals) * 2 : maxRevisedExpenditureVals = Math.max.apply(Math,revisedExpenditureVals) * 1.2);
$('#containerProjectExpenditure').highcharts({
chart: {
type: 'bar',
backgroundColor:'rgba(0,0,0,0.0)',
marginLeft: 0
},
credits: {
enabled: false
},
title: {
text: (($('#ictdb.small')[0]) ? 'Expenditure of projects' : ''),
style: {
fontSize: (($('#ictdb.small')[0]) ? '16px' : '12px'),
font: 'Trebuchet MS, Verdana, sans-serif',
fontWeight: 'bold'
}
},
xAxis: {
categories: yLabels,
lineColor: 'rgba(0,0,0,0.2)',
gridLineWidth: 1,
tickLength: 100,
tickColor: 'rgba(0,0,0,0.2)',
gridLineColor: 'rgba(0,0,0,0.2)',
labels: {
enabled: (($('#ictdb.small')[0]) ? true : false),
style: {
color: '#525151',
fontSize: (($('#ictdb.small')[0]) ? '14px' : '12px'),
font: 'Trebuchet MS, Verdana, sans-serif',
fontWeight: 'bold'
},
formatter: function() {
return '<a href="http://s.codepen.io/boars/debug/KpQqVm?Agency=' + this.value + '"><abbr title="' + yLabelsFull[jQuery.inArray(this.value, yLabels)] + '">' + this.value + '</abbr></a>'
},
useHTML: true,
cursor: 'pointer'
}
},
yAxis: {
min: 0,
max: maxRevisedExpenditureVals,
title: {
text: 'Expenditure by department',
align: 'left',
style: {
fontWeight: 'bold',
color: 'black'
}
},
gridLineWidth: 0.5,
gridLineColor: '#eee',
minTickInterval: 25000000,
labels: {
style: {
color: '#525151',
fontSize: '10px',
font: 'Trebuchet MS, Verdana, sans-serif',
fontWeight: 'bold'
}
}
},
legend: {
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
column: {
grouping: true,
shadow: false,
borderWidth: 0
},
series: {
dataLabels: {
enabled: true,
color: 'black',
style: {
fontSize: (($('#ictdb.small')[0]) ? '14px' : '11px'),
font: 'Trebuchet MS, Verdana, sans-serif',
},
formatter: function() {
var out = '<span class="col-chart-label">',
series = this.point.series.chart.series,
p1 = series[0].yData[this.point.x],
p2 = series[1].yData[this.point.x];
p1 = '$' + Math.round((p1 / 1000000) *10) / 10 + 'M';
p2 = '$' + Math.round((p2 / 1000000) *10) / 10 + 'M';
if (p1 === '$0M' && p2 === '$0M' && !($('#ictdb.small')[0])) {
return '';
} else {
out += p2 + ' / ' + p1;
out += '</span>'
return out;
}
},
useHTML: true
},
cursor: 'pointer',
point: {
events: {
click: function() {
location.href ='http://s.codepen.io/boars/debug/KpQqVm?Agency=' + yLabels[this.x]+ '&offset=0&direction=desc&sort=Revised+total+estimated+expenditure';
}
}
} // end point
}
},
series: [{
name: 'Budget',
color: 'rgba(140,140,140,0.8)',
borderColor: 'rgba(40,40,40,0.4)',
data: revisedExpenditureVals,
pointPadding: 0,
pointPlacement: .2,
pointWidth: (($('#ictdb.small')[0]) ? '20' : '14'),
dataLabels: {
enabled: true
}
}, {
name: 'Spent',
color: 'rgba(0,126,177,1)',
borderColor: 'rgba(0,106,157,1)',
data: actualCostVals,
pointPadding: 0,
pointPlacement: -.10,
pointWidth: (($('#ictdb.small')[0]) ? '14' : '10'),
dataLabels: {
enabled: false
}
}]
});
}
displayProjectDashboards = function( jsonData ) {
if ( jsonData.result.records.length > 0 ) {
var seriesData = jsonData.result.records;
seriesData.sort(SortByExpenditure);
displayStatusDashboard( seriesData );
displayExpendituresDashboard( seriesData );
}
};
getProjectListByDepartment = function( ) {
// load json data
var sql = 'SELECT DISTINCT da.\"Agency\", da.\"Agency name\" as \"AgencyName\", ' +
' (select (CASE WHEN COUNT(*)>0 THEN COUNT(*) ELSE NULL END) from ' + table + ' d where da.\"Agency\" = d.\"Agency\") AS Total,' +
' (select (CASE WHEN COUNT(*)>0 THEN COUNT(*) ELSE NULL END) from ' + table + ' d where \"Overall status\" = \'R\' and da.\"Agency\" = d.\"Agency\") AS RED,' +
' (select (CASE WHEN COUNT(*)>0 THEN COUNT(*) ELSE NULL END) from ' + table + ' d where \"Overall status\" = \'A\' and da.\"Agency\" = d.\"Agency\") AS AMBER,' +
' (select (CASE WHEN COUNT(*)>0 THEN COUNT(*) ELSE NULL END) from ' + table + ' d where \"Overall status\" = \'G\' and da.\"Agency\" = d.\"Agency\") AS GREEN,' +
' (select SUM(\"Actual cost to date\") from ' + table + ' d where da.\"Agency\" = d.\"Agency\") AS TotalActualCost, ' +
' (select SUM(\"Revised total estimated expenditure\") from ' + table + ' d where da.\"Agency\" = d.\"Agency\") AS TotalRevisedExpenditure, ' +
' (select COUNT(*) from ' + table + ' d where da.\"Initiative name\"!=\'\' and da.\"Agency\" = d.\"Agency\") AS TotalProjects' +
' FROM ' + table +' da ' +
' ORDER BY da.\"Agency\"'
;
getDataFromCKAN( domain, sql, displayProjectDashboards );
};
displayProjectOverview = function( jsonData ) {
if ( jsonData.result.records.length > 0 ) {
var seriesData = jsonData.result.records;
displayStatusOverview( seriesData );
displayExpendituresOverview( seriesData );
}
};
getProjectOverview = function( ) {
// load json data
var sql = 'SELECT DISTINCT' +
' (select (CASE WHEN COUNT(*)>0 THEN COUNT(*) ELSE NULL END) from ' + table + ' d where \"Overall status\" = \'R\') AS RED,' +
' (select (CASE WHEN COUNT(*)>0 THEN COUNT(*) ELSE NULL END) from ' + table + ' d where \"Overall status\" = \'A\') AS AMBER,' +
' (select (CASE WHEN COUNT(*)>0 THEN COUNT(*) ELSE NULL END) from ' + table + ' d where \"Overall status\" = \'G\') AS GREEN,' +
' (select SUM(\"Actual cost to date\") from ' + table + ' d) AS TotalActualCost, ' +
' (select SUM(\"Revised total estimated expenditure\") from ' + table + ' d) AS TotalRevisedExpenditure, ' +
' (select COUNT(*) from ' + table + ' d where da.\"Initiative name\"!=\'\') AS TotalProjects' +
' FROM ' + table +' da WHERE da.\"Overall status\" != \'\''
;
getDataFromCKAN( domain, sql, displayProjectOverview );
};
getProjectOverview();
getProjectListByDepartment();
setTimeout(function (){
CleanupNaN();
}, 1500);
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//code.highcharts.com/4.0.1/highcharts.js"></script>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,400,300);
::-moz-selection { background: rgba(0,0,0,0.2); }
::selection { background: rgba(0,0,0,0.2); }
body {
background: white;
background-size: 100%;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #053150;
}
.button {
padding: 0.5em;
color: #fff;
border: 1px solid rgba(0,0,0,0.2);
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/* dev/uat env */
body.env-dev {
background: url('../images/env-dev.jpg') repeat-x;
background-attachment: fixed;
}
body.env-uat {
background: url('../images/env-uat.jpg') repeat-x;
background-attachment: fixed;
}
#header-wrapper .box-sizing, #qg-coa {
background: none;
}
#header-wrapper .box-sizing .max-width {
background: rgba(0,0,0,.04);
}
/* ------------------ */
/* ICTDB front page */
/* ------------------ */
#content-container .article .box-sizing .border {
margin-left: 1em !important;
margin-right: 1em !important;
}
#ictdb .actions {
margin: 1em 0;
clear: left;
float: left; width: 100%;
}
#ictdb .actions ul {
margin: 1em 0;
padding: 0;
}
#ictdb h2 {
margin: 0.2em 0 0 0;
}
#overview-status {
width: 48%; float: left; padding-right: 2%;
}
#overview-expenditure {
width: 48%; float: left; padding-left: 2%;
}
#ictdb.mobile #overview-status, #ictdb.mobile #overview-expenditure {
padding: 0;
}
#overview-status h3, #overview-expenditure h3 {
margin: 0 0 0.9em 0;
}
#overview-expenditure .graph li span, #overview-status .graph li span {
text-shadow: 1px 1px 3px rgba(70, 70, 90, 1);
}
#overview-status, #overview-expenditure {
text-align: center;
}
#ictdb.small #overview-expenditure{ padding-left: 0; }
#overview-status .graph {
margin: 0;
padding: 0;
}
#overview-status .graph li, #overview-expenditure .graph li {
float: left;
list-style-type: none;
display: block;
text-align: center;
margin: 0;
height: 2em;
font-weight: 900;
font-size: 1.3em
}
#overview-status .graph span {
outline: rgba(0,0,0,0.5)solid 1px;
padding: 0.4em 0;
}
#overview-status .graph li span {
padding: .4em 0;
display: block;
color: #fff;
}
#overview-status .graph .g3 {
width: 0%;
background: #f00;
box-shadow: inset 0 0 0 1000px #f00;
transition: all 1s ease;
}
#overview-status .graph .g2 {
width: 0%;
background: #FFA500;
box-shadow: inset 0 0 0 1000px #FFA500;
transition: all 1s ease;
}
#overview-status .graph .g1 {
width: 100%;
background: #78BA00;
box-shadow: inset 0 0 0 1000px #78BA00;
transition: all 1s ease;
}
#overview-status img {
position: absolute;
left: 0;
}
#overview-status .gkey .g1, #overview-status .gkey .g2, #overview-status .gkey .g3 {
position: relative;
padding-left: 30px;
}
#overview-status .gkey {
width: 100%;
}
#overview-status .gkey .gtotal {
font-weight: 900;
float: right;
}
#overview-status .gkey .gtotal a {
font-weight: normal;
}
#overview-status .graph a {
text-decoration: none;
}
#overview-status .graph .g1 span:hover, #overview-status .graph .g2 span:focus {
outline: #9be90e solid 3px;
}
#overview-status .graph .g2 span:hover, #overview-status .graph .g2 span:focus {
outline: #ffd249 solid 3px;
}
#overview-status .graph .g3 span:hover, #overview-status .graph .g3 span:focus {
outline: #ff8181 solid 3px;
}
#overview-expenditure .graph {
position: relative;
float: left;
background: #959595;
box-shadow: inset 0 0 0 1000px #959595;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
outline: rgba(0,0,0,0.5)solid 1px;
}
#overview-expenditure .graph li span {
position: absolute;
top: 0;
margin: .25em .5em;
color: #fff;
}
#overview-expenditure .graph .g1 span {
left: 0;
}
#overview-expenditure .graph .g2 span {
right: 0;
color: #fff;
}
#overview-expenditure .graph .g1 {
transition: all 1s ease;
float: left;
width: 0%;
background: #007EB1;
box-shadow: inset 0 0 0 1000px #007EB1;
margin: .4em 0;
height: 1.2em;
outline: rgba(0,0,0,0.2)solid 1px;
}
#overview-expenditure a:hover, #overview-expenditure a:focus {
outline: #00b6ff solid 3px;
display: block;
height: 2.6em;
}
#overview-status .gkey, #overview-expenditure .gkey {
float: left;
margin: 0;
padding: 0;
}
#overview-status .gkey li, #overview-expenditure .gkey li {
float: left;
margin-top: 0.5em;
list-style-type: none;
padding: 0;
margin-right: 1em;
}
#overview-status .gkey li span, #overview-expenditure .gkey li span {
float: left;
padding: 0;
margin: 0.25em 0.4em 0 0;
width: 1em;
height: 1em;
outline: rgba(0,0,0,0.5)solid 1px;
}
#overview-status .gkey .g3 span {
background: #f00;
box-shadow: inset 0 0 0 1000px #f00;
}
#overview-status .gkey .g2 span {
background: #FFA500;
box-shadow: inset 0 0 0 1000px #FFA500;
}
#overview-status .gkey .g1 span {
background:#78BA00 ;
box-shadow: inset 0 0 0 1000px #78BA00;
}
#overview-expenditure .gkey .g1 span {
background: #007EB1;
box-shadow: inset 0 0 0 1000px #007EB1;
}
#overview-expenditure .gkey .g2 span {
background: #959595;
box-shadow: inset 0 0 0 1000px #959595;
}
.col-chart-label {
background-color: #fff;
background-color: rgba(255,255,255,0.5);
padding: 0;
z-index: 0;
}
#projects {
width: 100%;
float: left;
}
#projects h2 {
float: left;
top: 0.35em;
position: relative;
margin-bottom: 0;
}
#projects p {
float: left;
padding: 0 .5em;
margin-left: .5em;
border-left: 1px solid #000;
margin-bottom: 0;
}
#project-status {
width: 50%;
float: left;
padding-right: 0%;
clear: left;
}
#containerProjectStatus {
width: 100%;
min-width: 310px;
height: 550px;
float: left
}
#project-expenditure {
width: 50%;
float: left
}
#containerProjectExpenditure {
width: 100%;
min-width: 310px;
height: 550px;
float: left
}
/* graph tooltip */
.highcharts-tooltip span {
margin-top: 50px;
}
#highcharts-0 a { /*fix for Cross Gov */
white-space: nowrap;
}
.ictdbTooltip {
z-index: 50;
padding: 0;
margin: 0;
height: auto !important;
min-width:200px;
}
.ictdbTooltip .group, .ictdbTooltip .grouptitle {
clear: right;
display: block;
margin: 0;
padding: 0;
float: left;
width: 100%;
}
.ictdbTooltip .grouptitle {
font-weight: 800;
}
.ictdbTooltip .group {
color: #000;
}
.ictdbTooltip .group.g0 strong{
color: #78BA00;
}
.ictdbTooltip .group.g1 strong{
color: #FFA500;
}
.ictdbTooltip .group.g2 strong{
color: #f00;
}
/* search */
#feature-search-db {
width: 48%; min-width: 400px; float: right; margin-top: 0.5em; text-align: right;
}
#ictdb.small #feature-search-db {
width: 100%; min-width: 200px;
}
#ictdb.small .search-wrapper {
width: 100% !important;
min-width: 200px !important;
border: 1px solid #ccc;
text-align: right;
background: white;
}
#ictdb.small .search-wrapper {
width: 100%;
border: 1px solid #ccc;
text-align: right;
}
#ictdb.small .search-wrapper input {
border: none;
}
#ictdb.small .search-wrapper .submit {
float: right !important;
}
/* --------------- */
/* Mobile overides */
/* --------------- */
#ictdb.small #overview-status {
width: 100%;
padding-right: 0
}
#ictdb.small #overview-expenditure {
width: 100%;
padding-right: 0
}
#ictdb.small #project-status {
width: 100%;
}
#ictdb.small #containerProjectStatus {
width: 100%;
height: 800px;
}
#ictdb.small #project-expenditure {
width: 100%;
}
#ictdb.small #containerProjectExpenditure {
height: 800px;
}
#ictdb.small .desktop-view, #ictdb .mobile-view {
display: none;
}
#ictdb.small .mobile-view {
display: list-item;
}
#ictdb ul {
margin-left: 4%;
}
#ictdb.small ul {
margin-left: inherit;
}
#ictdb-search {
clear: both;
width: 60%;
margin: auto;
min-width: 500px;
text-align: center;
}
/* ----------------- */
/* ICTDB data page */
/* ----------------- */
div.highcharts-axis-labels.highcharts-xaxis-labels span span {
text-decoration: underline;
color: #007EB1;
}
div.highcharts-axis-labels.highcharts-xaxis-labels span span:hover, div.highcharts-axis-labels.highcharts-xaxis-labels span span.active {
text-decoration: underline;
color: #007EB1;
cursor: pointer;
font-weight: 900;
}
div.highcharts-axis-labels.highcharts-xaxis-labels span span:focus {
text-decoration: underline;
color: #00f;
cursor: pointer;
font-weight: 900;
}
.highcharts-axis-labels.highcharts-xaxis-labels span {
z-index: 1 !important;
}
.highcharts-tooltip span {
z-index:9999 !important;
background: #ffffff;
background: rgba(255,255,255,1);
padding: 10px !important;
-webkit-box-shadow: inset 0px 0px 4px 2px rgba(142,150,158,1);
-moz-box-shadow: inset 0px 0px 4px 2px rgba(142,150,158,1);
box-shadow: inset 0px 0px 4px 2px rgba(142,150,158,1);
}
/* -- table -- */
table#example tr th a {
display: inline-block;
width: 96%;
padding-right: 2em;
}
.thminwid {
width: 6em;
}
table#example td.details-control { background: url('../images/details_open.png') no-repeat left 17px; padding-left: 35px;}
#ictdb.small table#example td.details-control { padding-left: 25px; background-position: left 9px;}
table#example tr.shown td.details-control{ background: url('../images/details_close.png') no-repeat left 17px; }
table#example tr.shown td.details-title { font-weight: 900;}
table#example tr.shown { border-top: 1px solid;}
table#example tr.detailedInfoRow.open { border-bottom: 1px solid;}
table#example .even td.details-control,tr.shown.even td.details-control { background-color: white; }
table#example tr.summary { cursor: pointer; cursor: hand; }
table#example .detailedInfoRow td {
padding: 0 1em 0 1em;
}
table#example .detailedInfoRow td p {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
table#example p .button {
padding-bottom: 0.5em !important;
padding-top: 0.5em !important;
}
table#example p.actions {
text-align: right !important;
}
table#example tr.even td.sorting_1 {
background-color: #cfdde7;
}
table#example tr.odd td.sorting_1 {
background-color: #c6d3de;
}
table#example tr.odd.shown td {
background-color: #F3F3F3;
}
table#example tr.even.shown td {
background-color: #fff;
}
.toggle-sort {
position: relative;
width: 100%;
}
#toggleInformation{
position: absolute;
right: 0;
top: .5em;
}
#example th {
background: url("//static.qgov.net.au/assets/v2/images/datatable/sort_both.png") no-repeat center right #13578b !important;
padding-right: 0 !important;
vertical-align: middle !important;
}
#example th.asc {
background: url("//static.qgov.net.au/assets/v2/images/datatable/sort_asc.png") no-repeat center right #13578b !important;
}
#example th.desc {
background: url("//static.qgov.net.au/assets/v2/images/datatable/sort_desc.png") no-repeat center right #13578b !important;
}
#example ul {
margin-left: 0;
}
#example ul ul, #ictdb.small #example .detailedInfoRow td ul ul {
padding-left: 1.7em;
}
#ictdb.small #example .detailedInfoRow td ul {
padding-left: 1em;
}
#ictdb.small .desktop-view, #ictdb .small-view {
display: none;
}
#ictdb.small .small-view {
display: list-item;
}
#ictdb.small td, #ictdb.small th {
padding: 0.5em;
}
#example td {
white-space: nowrap;
}
#example td.details-title, #example .detailedInfoRow td {
white-space: normal;
}
.actions li {
margin: 0 0.5em 0.5em 0 !important;
}
/* -- aside overides -- */
#asides li.hide {
display: none !important;
}
#asides .advancedsearch {
text-decoration: underline;
color: #13578b;
cursor: pointer;
}
#ictdb .aside {
padding: 1px;
margin: 0;
}
#ictdb .actions {
padding: 0;
margin: 0;
}
#ictdb .aside h2 {
position: absolute;
left: -9999em;
}
#ictdb.small .aside h2 {
position: relative;
left: 0;
}
#ictdb .aside .actions a {
color: #fff;
}
#ictdb .aside .actions a:hover {
color: #000;
}
#asides .status.warn h2 {
position: absolute;
left: -9999em;
}
#asides .status.warn ol {
margin: 0;
padding: 0;
}
#asides .status.warn li {
margin: 0;
display: block;
min-height: 3em;
}
#asides form fieldset {
border: none;
padding: .35em 0;
}
.aside.search {
background: #f2f7f9;
}
#asides form.hide {
display: none;
}
#asides form .choices label {
position: relative;
top: -4px;
}
#status-list label{
display: inline-block;
}
#status-list label img{
pointer-events: none;
}
#asides form .choices img {
position: relative;
top: 5px;
padding-right: 0.5em;
}
/* -- sliders -- */
.extra-controls.unminimised {
position: relative;
border-top: 1px solid #eee;
border-bottom: 3px solid #ccc;
padding: 1em 0 0;
height: 4em;
margin: 1em 0 2.5em 0;
}
.extra-controls {
position: relative;
border-top: 1px solid #eee;
border-bottom: 3px solid #eee;
padding:0;
height: 0px;
overflow: hidden;
margin: 1em 0 0 0;
clear: both;
}
body #asides form .questions input.inp {
width: 45%;
text-align: center;
padding: 5px;
}
.lbls {
width: 100%;
}
.lbl {
float: left;
}
.inp + .inp, .lbl + .lbl {
float: right;
}
.lbl {
font-size: 80%;
padding: .5em 5px;
}
.irs-slider.to:before {
position: absolute;
display: block;
content: "";
top: -120%;
left: -20%;
width: 150%;
height: 256%;
background: rgba(0,0,0,0.0);
}
.range-slider {
margin: 0 1em 0 0 !important;
}
.lbl.js-from, .lbl.js-to {
text-decoration: underline;
color: #13578B;
}
#asides select {
overflow: auto;
}
#ictdb.dataTable {
width: 75%;
float: left;
}
#ictdb.dataTable.small, #ictdb.dataTable.medium {
width: 100%;
}
#asides.medium {
width: 100%
}
#content-container .article .box-sizing #asides.small div.border, #content-container .article .box-sizing #asides.medium div.border {
margin: 0;
}
.search-widget .widget-header .action a.up:before, .search-widget .widget-header .action a:before {
position: absolute;
top: 0;
left: 0;
}
.search-widget .widget-header .action a:hover:before, .search-widget .widget-header .action a.up:hover:before {
color: #0066cc;
}
#content-container .article .box-sizing .border {
margin-left: 2.9em;
}
#ictdb.dataTable.small .desktop-view, #ictdb.dataTable .mobile-view {
display: none;
}
#ictdb.dataTable.small .mobile-view {
display: list-item;
}
#ictdb.dataTable .projectStatusCol {
text-align: center;
}
#ictdb.dataTable .projectStatusCol span {
position: absolute;
left: -9999em;
}
/* temp pagination */
#pagination ul {
padding: 0;
text-align: center;
}
#pagination li {
display: inline-block;
list-style: none;
margin: 1em;
}
/* Print overrides -webkit-print-color-adjust: exact; */
@media print {
#overview-status .print-link-url, #overview-expenditure .print-link-url, #ui-controls, #nav-site, #tools, #feature-search-db, .aside.search, .toggle-sort {
display: none !important;
}
.franchise-index-with-asides h1, #results-table th, #results-table td, #content-container .article .box-sizing .box-sizing, #content-container .article .box-sizing .border {
left-padding: 0 !important;
margin-left: 0 !important;
}
#ictdb.dataTable {
width: 100%;
}
#overview-expenditure .graph li span, #overview-status .graph li span {
color: #000 !important;
}
#overview-expenditure .graph li span, #overview-status .graph li span {
text-shadow: 1px 1px 3px rgba(255, 255, 255, 1);
}
body #example thead tr th a {
color: #000000 !important;
}
table#example td.details-control{
padding-left: 0;
}
#ictdb.dataTable .projectStatusCol span {
position: relative;
left: 0;
top: -0.2em;
margin: 0 0 0 .6em;
}
#asides {
clear: left;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.