Commit 634d8755 authored by Romain Loth's avatar Romain Loth

piecharts layout: two per row (with label tweaking to keep it readable)

parent 030b3588
......@@ -86,4 +86,26 @@ function split_join_keywords_for_html($str_value) {
return join(', ', $mod_arr);
}
function shorter_html_label($label) {
$calibre = 17;
// shorter label via acro extraction
// if POSSible: use orgs.toarray to avoid matching
$matches = array();
preg_match_all('/^([^(]+\()([^)]+)(\).*)$/U', $label, $matches);
if (count($matches)) {
$label = $matches[2][0];
$lhs = substr($matches[1][0], 0, -1) ; // rm opening paren
$rhs = substr($matches[3][0], 1); // rm closing paren
$remainder = $lhs.' '.$rhs;
if (strlen($remainder) > $calibre) {
$remainder = substr($lhs.' '.$rhs, 0,$calibre-3).'...';
}
$label .= ' <span style="font-size:8px">'.$remainder.'</span>';
}
else {
$label = '<span style="font-size:8px">'.substr($label, 0, $calibre.'...').'</span>';
}
return $label;
}
?>
......@@ -226,14 +226,17 @@ $n_shown_labs = 0 ;
$tot_shown_labs = 0;
$labs_total_responses = 0;
foreach ($lab_counts as $key => $value) {
// $key is the orgid, but we need the name
$label = $org_id_to_label[$key];
$thresh = min(9, $n_labs / 15);
if (!$label || $label == "_NULL") {
$missing_labs += $value;
}
elseif ($value > $thresh) {
$label = shorter_html_label($label);
$labs_data.='["' . addslashes($label) . '",' . $value . '],';
$n_shown_labs += 1;
$tot_shown_labs += $value;
......@@ -328,7 +331,7 @@ $(document).ready(function() {
pie: {
allowPointSelect: true,
cursor: "pointer",
size: "75%",
size: "45%",
dataLabels: {
enabled: true,
color: "#000000",
......@@ -367,7 +370,7 @@ $(document).ready(function() {
pie: {
allowPointSelect: true,
cursor: "pointer",
size: "75%",
size: "45%",
dataLabels: {
enabled: true,
color: "#000000",
......@@ -405,7 +408,7 @@ $(document).ready(function() {
pie: {
allowPointSelect: true,
cursor: "pointer",
size: "75%",
size: "45%",
dataLabels: {
enabled: true,
color: "#000000",
......@@ -440,7 +443,7 @@ $(document).ready(function() {
colors: '.$COLOR_SCHEME.'
},
title: {
text: "Laboratories affiliations"
text: "Labs"
},
tooltip: {
formatter: function() {
......@@ -451,7 +454,7 @@ $(document).ready(function() {
pie: {
allowPointSelect: true,
cursor: "pointer",
size: "75%",
size: "45%",
dataLabels: {
enabled: true,
color: "#000000",
......@@ -499,7 +502,7 @@ $(document).ready(function() {
pie: {
allowPointSelect: true,
cursor: "pointer",
size: "75%",
size: "45%",
dataLabels: {
enabled: true,
color: "#000000",
......
......@@ -445,15 +445,32 @@ Contributions and ideas are welcome to improve this directory.
</div>
<br/>
<h2 class="oldstyle">Global statistics</h2>
<div id="country" style="width: 800px; height: 300px; margin: 0 auto"></div>
<div id="title" style="width: 800px; height: 300px; margin: 0 auto"></div>
<div id="position" style="width: 800px; height: 300px; margin: 0 auto"></div>
<!-- these two are displayed only if the distribution has
at least 3 big groups (cf. n_shown in stats-prep) -->
<div id="labs_div" style="width: 800px; height: 300px; margin: 0 auto"></div>
<div id="insts_div" style="width: 800px; height: 300px; margin: 0 auto"></div>
<div class="container-fluid">
<div class="row chart-row">
<div class="col-lg-5 col-md-5 col-sm-12">
<div id="country" class="directory-piechart"></div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div id="title" class="directory-piechart"></div>
</div>
</div>
<div class="row chart-row">
<div class="col-lg-5 col-md-5 col-sm-12">
<div id="position" class="directory-piechart"></div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<!-- conditional display (cf. n_shown in stats-prep) -->
<div id="labs_div" class="directory-piechart"></div>
</div>
</div>
<div class="row chart-row">
<div class="col-lg-12 col-md-12 col-sm-12">
<!-- conditional display (idem) -->
<div id="insts_div" class="directory-piechart"></div>
</div>
</div>
</div>
<br/>
<br/> <A NAME="scholars"> </A>
......
......@@ -272,15 +272,33 @@ Contributions and ideas are welcome to improve this directory.
</div>
<br/>
<h2 class="oldstyle">Global statistics</h2>
<div id="country" style="width: 800px; height: 300px; margin: 0 auto"></div>
<div id="title" style="width: 800px; height: 300px; margin: 0 auto"></div>
<div id="position" style="width: 800px; height: 300px; margin: 0 auto"></div>
<!-- these two are displayed only if the distribution has
at least 3 big groups (cf. n_shown in stats-prep) -->
<div id="labs_div" style="width: 800px; height: 300px; margin: 0 auto"></div>
<div id="insts_div" style="width: 800px; height: 300px; margin: 0 auto"></div>
<div class="container-fluid">
<div class="row chart-row">
<div class="col-lg-5 col-md-5 col-sm-12">
<div id="country" class="directory-piechart"></div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div id="title" class="directory-piechart"></div>
</div>
</div>
<div class="row chart-row">
<div class="col-lg-5 col-md-5 col-sm-12">
<div id="position" class="directory-piechart"></div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<!-- conditional display (cf. n_shown in stats-prep) -->
<div id="labs_div" class="directory-piechart"></div>
</div>
</div>
<div class="row chart-row">
<div class="col-lg-12 col-md-12 col-sm-12">
<!-- conditional display (idem) -->
<div id="insts_div" class="directory-piechart"></div>
</div>
</div>
</div>
<br/>
<br/> <A NAME="scholars"> </A>
......
......@@ -424,6 +424,15 @@ div.ccsection-footer {
}
.chart-row {
margin: 0 0 35px 0;
}
.directory-piechart {
/*width: 70%;*/
height: 300px;
margin: 0 auto;
}
/**/
.bigger {
font-size: 150%;
......
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