<div id="dash-chart" class="chart" data-chart="pie" data-format="expanded" data-array="435000, 90000, 130000, 60000, 90000, 425000" data-total="2000000" style="font-size: 47.6px; width: 238px">
</div>
<div id="dash-chart" class="chart"
data-chart="{{ dataChart }}"
data-format="{{ dataFormat }}"
data-array="{{#with projects }}{{#each this }}{{ remaining }}, {{/each}}{{/with}}{{ other }}"
data-total="{{ dataTotal }}"
style="font-size: {{ fontSize }}px; width: {{ width }}px">
</div>
{
"dataFormat": "expanded",
"dataChart": "pie",
"width": 238,
"fontSize": 47.6,
"projects": [
{
"title": "Breeding wheat strains to reduce the incidence macular degeneration",
"remaining": 435000,
"total": 580000,
"status": "on hold",
"notes": "<a href='' title='View Meeting'>Assigned to Meeting</a>"
},
{
"title": "Assisted vision technologies",
"remaining": 90000,
"total": 430000,
"status": "active",
"notes": "no roadblocks"
},
{
"title": "Minimizing Carbon Emissions and Maximizing Carbon Sequestration and Storage by Seagrasses, Tidal Marshes, Mangroves",
"remaining": 130000,
"total": 285000,
"status": "active",
"notes": "no roadblocks"
},
{
"title": "Mitochondrial Turnover",
"remaining": 60000,
"total": 125000,
"status": "pending",
"notes": "<a href='' title='View Meeting'>Assigned to Meeting</a>"
},
{
"title": "Crop resilience from complex genomes",
"remaining": 90000,
"total": 125000,
"status": "on hold",
"notes": "<a href='' title='View Meeting'>Assigned to Meeting</a>"
}
],
"other": 425000,
"dataTotal": 2000000
}
.chart {
position: relative;
&[data-chart='pie'] {
$projects: $color-project-1, $color-project-2, $color-project-3, $color-project-4, $color-project-5, $color-project-6;
$stroke-length: (100 * 3.14159);
text-align: center;
&[data-display='percent'] {
.pie-text {
.text {
&::after {
content: '%';
font-size: 0.75em;
@include font-primary-regular;
vertical-align: middle;
}
}
}
}
&[data-display='dollars'] {
.pie-text {
.text {
&::before {
content: '$';
font-size: 0.75em;
@include font-primary-regular;
vertical-align: middle;
}
}
}
}
.chart-container {
position: relative;
padding-bottom: 100%;
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0 auto;
filter: drop-shadow(0 3px 3px rgba(black, 0.1));
}
path {
fill:none;
stroke-width:30.0546;
stroke-miterlimit:10;
}
.pie-bg {
stroke: $color-irma-silver;
}
.pie-meter {
// stroke-dasharray: $stroke-length;
// stroke-dashoffset: #{-$stroke-length};
transition: stroke-dashoffset 0.5s;
@for $i from 1 through 6 {
&:nth-last-child(6n + #{$i}) {
stroke: nth($projects, $i);
}
}
@for $i from 1 through 12 {
&:nth-child(#{$i}) {
transition-delay: #{$i * 0.2}s;
}
}
}
.pie-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: $color-irma-slate;
font-size: 11rem;
@include font-primary-bold;
text-align: center;
letter-spacing: -0.04em;
&::after {
content: attr(data-label);
display: block;
margin-top: -0.5em;
opacity: 0.7;
text-transform: uppercase;
@include font-size;
@include font-primary-regular;
letter-spacing: 0;
}
}
&[data-format='simple'] {
path {
stroke-width: 28;
}
.pie-text {
top: 50%;
transform: translate(-50%, -50%);
font-size: 9rem;
}
.pie-stats {
position: absolute;
right: 0;
top: 50%;
transform: translate(calc(100% + 0.5em), -0.25em);
line-height: 0.75em;
text-align: left;
}
.pie-total, .pie-remaining {
font-size: 6rem;
@include font-primary-bold;
.text {
top: 50%;
&::before {
content: '$';
}
}
}
.pie-total {
&::before {
content: 'Remaining of';
display: block;
color: $color-irma-slate;
opacity: 0.7;
@include font-primary-regular;
font-size: (7em / 12);
}
.text {
color: $color-irma-navy;
opacity: 0.5;
}
}
}
&[data-format='expanded'] {
.pie-total {
color: $color-irma-slate;
@include font-primary-bold;
text-align: center;
&::after {
content: 'Total funding awarded';
display: block;
margin-top: 0;
}
.text {
@include font-size;
&::before {
content: '$';
vertical-align: middle;
}
}
}
.pie-stats {
margin-top: 1em;
}
.pie-remaining {
position: relative;
height: 4em;
margin-top: 1.5em;
color: $color-irma-slate;
@include font-primary-bold;
text-align: center;
&::before {
content: '';
position: absolute;
top: 50%;
left: 0;
display: block;
height: 1px;
width: 100%;
background: $color-irma-silver;
}
.text {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
height: 100%;
span {
display: inline-block;
margin: 0 auto;
padding: 0 6rem;
height: 100%;
background: white;
border: 1px solid $color-irma-silver;
font-size: 6rem;
line-height: 12rem;
@include font-primary-bold;
&::before{
content: '$';
vertical-align: middle;
}
&::after{
content: ' remaining';
opacity: 0.7;
vertical-align: middle;
font-size: (2em / 3);
@include font-primary-regular;
}
}
}
}
}
}
&[data-chart='bar'] {
display: flex;
width: 100%;
height: 3rem;
margin-top: 1.5rem;
color: $color-irma-slate;
@for $i from 1 through 6 {
&:nth-child(#{$i}) {
.meter {
transition-delay: #{$i * 0.2}s;
}
}
}
&[data-unit="dollar"] {
.meter-container {
.amount {
&::before {
content: '$';
}
}
}
}
.label {
width: 12.5rem;
flex: 0 0 auto;
opacity: 0.7;
@include font-size-small;
span {
white-space: nowrap;
}
}
.meter-container {
width: calc(100% - 25rem);
.meter {
position: relative;
height: 100%;
width: 0;
transition: width 0.5s $ease-out-quad;
&::before {
content: '';
display: block;
width: 100%;
height: 100%;
border-radius: 1.5rem;
}
}
.amount {
position: absolute;
right: 0;
top: 0;
transform: translateX(100%) translateX(2rem);
color: $color-irma-slate;
@include font-size-small;
@include font-primary-bold;
}
}
.chart-caption {
position: relative;
margin-top: (2em / 3);
@include font-primary-bold;
&::after {
content: attr(data-percent) "%";
position: absolute;
right: 0;
top: 0;
}
.total {
@include font-primary-regular;
}
}
}
&[data-chart='line'] {
$line-colors: $color-irma-tangerine, $color-irma-red-orange, $color-irma-sky, $color-irma-grass, $color-irma-plum;
display: flex;
flex-wrap: wrap;
width: 100%;
&[data-unit='dollar'] {
.axis-y {
.axis-item {
&::before {
content: '$';
}
}
}
}
.axis-y {
width: 15rem;
padding-right: 4rem;
padding-top: 0;
flex: 0 0 auto;
@include font-size-small;
.axis-list {
}
.axis-item {
display: flex;
align-items: center;
justify-content: flex-end;
&:nth-child(2n) {
opacity: 0.7;
font-size: 1.5rem;
}
&:last-child {
opacity: 0.7;
}
}
}
.graph {
position: relative;
flex: 1 1 auto;
height: 50rem;
padding: 0 4rem;
background: rgba($color-irma-fog, 0.33);
box-shadow: 0 0 0 1rem white,
0 0 0 calc(1px + 1rem) rgba($color-irma-fog, 0.33);
}
.grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
line {
stroke-width: 1px;
stroke: white;
}
}
.plot {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 90rem;
max-width: 100%;
height: 50rem;
svg {
width: 100%;
height: 100%;
}
polyline {
stroke-width: 0.5rem;
stroke: $color-irma-green;
stroke-dashoffset: 0;
stroke-dasharray: 0;
fill: transparent;
transition: stroke-dashoffset $transition;
transition-duration: 0.75s;
}
line {
stroke-width: 1.5rem;
stroke-linecap: round;
transition: stroke-width 0.5s cubic-bezier(0.540, 1.650, 0.925, 1.650);
@for $i from 1 through 5 {
&:nth-child(#{$i}) {
transition-delay: #{$i * 0.2}s;
}
}
}
.line-group {
@for $i from 1 through 5 {
&:nth-child(#{$i}) {
* {
stroke: nth($line-colors, $i);
}
polyline {
transition-delay: #{$i * 0.2}s;
}
}
}
}
}
.axis-x {
width: 100%;
height: 8rem;
flex: 0 0 auto;
padding: 2rem 0 0 15rem;
@include font-size-small;
.axis-list {
position: relative;
height: 100%;
width: 90rem;
max-width: 100%;
margin: 0 auto;
}
.axis-item {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
@for $i from 1 through 4 {
&:nth-child(#{$i}) {
left: #{($i - 1) * 94% / 3 + 3};
}
}
}
}
.legend {
display: flex;
justify-content: center;
width: 100%;
margin-top: 2rem;
padding-top: 4rem;
border-top: 1px solid $color-irma-silver;
.legend-list {
margin-top: -2rem;
}
.legend-item {
display: inline-block;
margin-left: 4rem;
margin-top: 2rem;
@include font-size-small;
&::before {
content: '';
display: inline-block;
width: 3rem;
height: 3rem;
margin-right: 1rem;
vertical-align: middle;
border-radius: 50%;
}
@for $i from 1 through 5 {
&:nth-child(#{$i}) {
&::before {
background: nth($line-colors, $i);
}
}
}
.span {
vertical-align: middle;
}
}
}
}
}
/*
* _chart.js
*/
irma.chart = (function () {
'use strict';
var pieData = function ($pie, values) {
var total = parseInt($pie.attr('data-total')),
length = [],
$meters = $pie.find('.pie-meter'),
maxLength = 100 * Math.PI,
id = $pie.attr('id');
for(var i = 0; i < values.length; i++) {
values[i] = parseInt(values[i]);
}
_.forEach(values, function(value, i) {
if (i === 0) {
length[i] = maxLength * (value / total - 1);
}
else {
length[i] = maxLength * ((value + _.sum(values.slice(0, i))) / total - 1);
}
// $meters.eq(values.length - i - 1).css('stroke-dashoffset', '-' + maxLength).css('stroke-dashoffset', length[i]);
var index = values.length - i - 1;
var svg = new Snap("#" + id);
var path = svg.select('#' + id + '-meter-' + index);
path.animate({'stroke-dashoffset': length[i]}, 500);
$meters.eq(values.length - i - 1).attr('stroke-dashoffset', length[i]);
});
var pieData = $pie.data(),
display;
if (pieData.display == 'percent') {
display = Math.round(1000 * _.sum(values) / total) / 10;
}
else if (pieData.display == 'total' || pieData.display == 'dollars') {
display = numeral(total).format('0,0');
}
$pie.append($('<div/>').addClass('pie-text').attr('data-label', pieData.label).append($('<span/>').addClass('text')));
$pie.find('.pie-text .text').text(display);
};
var init = function () {
$(".chart[data-chart='pie']").each(function () {
var $pie = $(this),
$svg = $('<svg/>', {
'version': '1.1',
'xmlns': 'http://www.w3.org/2000/svg',
'xmlns:xlink': 'http://www.w3.org/1999/xlink',
'viewBox': '0 0 131 131',
'x': '0px',
'y': '0px',
'style': 'enable-background:new 0 0 131 131;',
'xml:space': 'preserve'
}),
$wrapper = $('<div/>').addClass('chart-container'),
dashArray = 100 * Math.PI,
$path = $('<path/>',
{
'd': 'M65.5,15.5c27.6,0,50,22.3,50,50c0,27.6-22.3,50-50,50c-27.6,0-50-22.3-50-50S37.8,15.5,65.5,15.5',
'stroke-dasharray': dashArray,
'stroke-dashoffset': -dashArray
});
$pie.append($wrapper.append($svg.append($path.clone().addClass('pie-bg').removeAttr('stroke-dasharray').removeAttr('stroke-dashoffset'))));
$pie.find('svg').append($('<g/>').addClass('pie-meters'));
var $container = $pie.find('.pie-meters');
var values = $pie.attr('data-array').split(',');
for(var i = 0; i < values.length; i++) {
$container.append($path.clone().addClass('pie-meter').attr('id', $pie.attr('id') + '-meter-' + i));
}
$pie.html($pie.html());
pieData($pie, values);
});
$(".chart[data-chart='bar']").each(function () {
var $chart = $(this),
data = $chart.data(),
amount = numeral(data.amount).format('0,0'),
$labelText = $('<span/>').text(data.label),
$label = $('<div/>').addClass('label').html($labelText),
$amount = $('<div/>').addClass('amount').text(amount),
$container = $('<div/>').addClass('meter-container'),
$meter = $('<div/>').addClass('meter');
$meter.append($amount);
$container.append($meter);
$chart.append([$label, $container]);
$chart.append($container);
setTimeout(function () {
$chart.find('.meter').css('width', (100 * data.amount / data.total).toString() + '%');
}, 500);
});
$(".stats-container .stats-left").each(function () {
var $labels = $(this).find('.label'),
labelWidth = 0;
$labels.each(function () {
var width = $(this).find('span').width();
labelWidth = width > labelWidth ? width : labelWidth;
});
var rems = labelWidth / 4 + 1;
$labels.css('width', (rems).toString() + 'rem');
$(this).find('.meter-container').css('width', 'calc(100% - ' + (rems + 12.5).toString() + 'rem)');
});
$(".chart[data-chart='line']").each(function () {
var $chart = $(this),
$plot = $chart.find('.plot svg'),
$grid = $chart.find('.grid'),
data = $chart.data(),
max = _.max(_.flatten(data.array)),
length = data.array[1].length,
view = {
x: $plot.data().view[0],
y: $plot.data().view[1]
},
$gridLine = $('<line x1="0" x2="100" vector-effect="non-scaling-stroke"/>'),
intervalX = (view.x - 6) / (length - 1),
intervalY = view.y / (data.interval + 1);
var incrementY = parseInt(max / (50 * data.interval)) * 50;
if (max / (50 * data.interval) - parseInt(max / (50 * data.interval)) > 0) {
incrementY += 50;
}
var strokeArray = Math.pow(Math.pow($plot.width() / 3, 2) + Math.pow($plot.height(), 2), 0.5) * 3;
_.forEach(data.array, function (points, i) {
var linePoints = "",
$points = [];
_.forEach(points, function (point, j) {
var y = (intervalY * (data.interval)) * (1 - point / (data.interval * incrementY)) + intervalY,
x = j * intervalX + 3;
$points[j] = $('<line />', {
'x1': x,
'x2': x,
'y1': y,
'y2': y,
'vector-effect': 'non-scaling-stroke'
}).css('stroke-width', 0);
if (linePoints.length > 0) {
linePoints += " ";
}
linePoints += x + "," + y;
});
var $group = $("<g />").addClass('line-group'),
$polyline = $("<polyline/>", {
points: linePoints,
'vector-effect': 'non-scaling-stroke'
}).css({
'stroke-dasharray': '' + strokeArray + 'px',
'stroke-dashoffset': '' + strokeArray + 'px'
});
$group.append($polyline, $points);
$plot.append($group);
});
for (i = 0; i <= data.interval; i++) {
$grid.append($gridLine.clone().attr({
y1: (i + 1) * 110 / (data.interval + 1),
y2: (i + 1) * 110 / (data.interval + 1)
}));
}
$chart.html($chart.html());
setTimeout(function () {
$chart.find('.line-group polyline').css('stroke-dashoffset', 0);
$chart.find('.line-group line').removeAttr('style');
}, 500);
var yAxis = [],
$axisY = $chart.find('.axis-y');
for (var i = 0; i <= data.interval; i++) {
var amount = numeral(i * incrementY).format('0,0');
yAxis.push($('<li />').addClass('axis-item').text(amount));
}
var yHeight = $axisY.height() / (data.interval + 1);
$axisY.css('margin-top', (yHeight / 2).toString() + 'px');
$axisY.find('.axis-list').append(_.reverse(yAxis));
$axisY.find('.axis-item').height(yHeight);
});
};
return {
init: init
};
}());
There are no notes for this item.