<div id="dash-chart" class="chart" data-chart="pie" data-format="simple" 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": "simple",
  "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
}
  • Content:
    .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;
    				}
    			}
    		}
    	}
    }
  • URL: /components/raw/chart/_chart.scss
  • Filesystem Path: components/01-components/chart/_chart.scss
  • Size: 8.6 KB
  • Content:
    /* 
     *	_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
    	};
    
    }());
  • URL: /components/raw/chart/chart.js
  • Filesystem Path: components/01-components/chart/chart.js
  • Size: 6.3 KB

There are no notes for this item.