<div class="card my-commercials">
    <div class="card-section card-left">
        <h3 class="card-heading card-title">
            <div class="text">2017 Research Funding</div>
        </h3>
        <div class="overview">
            <div class="overview-section overview-left">
                <div id="dash-chart" class="chart" data-chart="" data-format="" data-array="1200, 800, 400, 200, 200, 1639" data-total="4439" data-display="total" data-label="students">
                </div>
            </div>

            <div class="overview-section overview-right">

                <!-- PROJECTS KEY -->
                <div class="projects-key">
                    <h4 class="card-subheading">Projects Key</h4>

                    <ul class="projects-list">
                        <li class="list-item">Other Projects</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="students-overview stats-overview">
            <div class="stats-row">
                <div class="row-left">
                    <div class="row-item">
                        <h4 class="card-subheading">Total students</h4>
                        <div class="amount -highlight">4,439</div>
                    </div>

                    <div class="row-item">
                        <p><strong>Lorem ipsum:</strong> dolor sit amet, consectetur adipiscing elit. Phasellus sagittis sodales nisi id facilisis. Cras iaculis massa ullamcorper, mattis arcu et, euismod sem.</p>
                    </div>
                </div>

                <div class="row-right">
                    <div class="row-item">
                        <h4 class="card-subheading">Applied</h4>
                        <div class="amount -students">2,539</div>
                    </div>
                    <div class="row-item">
                        <h4 class="card-subheading">Declined</h4>
                        <div class="amount -students">1,154</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="line-chart">
            <h4 class="card-subheading">
                <span class="text">Student status</span>
            </h4>

            <div class="chart" data-chart="line" data-array="[ [ 1000, 1000, 3000, 4000 ], [ 1000, 1000, 4250, 4500 ], [ 3000, 3500, 4500, 5000 ] ]" data-interval="10">
                <div class="axis-y">
                    <ul class="axis-list"></ul>
                </div>

                <div class="graph">
                    <svg class="grid" x="0px" y="0px" viewBox="0 0 100 110" preserveAspectRatio="none">
					</svg>

                    <div class="plot">
                        <svg x="0px" y="0px" viewBox="0 0 198 110" preserveAspectRatio="none" data-view="[ 198, 110 ]"></svg>
                    </div>
                </div>

                <div class="axis-x">
                    <ul class="axis-list">
                        <li class="axis-item">
                            <span class="text">1st Quarter</span>
                        </li>
                        <li class="axis-item">
                            <span class="text">2nd Quarter</span>
                        </li>
                        <li class="axis-item">
                            <span class="text">3rd Quarter</span>
                        </li>
                        <li class="axis-item">
                            <span class="text">4th Quarter</span>
                        </li>
                    </ul>
                </div>

                <div class="legend">
                    <h4 class="card-subheading">Legend</h4>

                    <ul class="legend-list">
                        <li class="legend-item">
                            <span class="text">Currently Enrolled</span>
                        </li>

                        <li class="legend-item">
                            <span class="text">Under Examination</span>
                        </li>

                        <li class="legend-item">
                            <span class="text">Completed</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="card-section card-right">
        <div class="project-budgets">
            <div class="card-heading">
                <h4 class="card-subheading">
                    <span class="text">Student Status information</span>

                    <button type="button" class="btn btn-help js-tooltip-help">
						<i class="fa fa-question-circle" aria-hidden="true"></i>

						<div class="help-text">A small amount of info about facult funding information.</div>
					</button>
                </h4>
            </div>

            <ul class="project-stats">
            </ul>

            <div class="see-all">
                <a class="link link-strong" href="projects" title="See all faculties">See all faculties</a>
            </div>
        </div>
    </div>
</div>
<div class="card my-commercials">
	<div class="card-section card-left">
		<h3 class="card-heading card-title">
			<div class="text">2017 Research Funding</div>
		</h3>
		<div class="overview">
			<div class="overview-section overview-left">
				{{> '@chart--pie-expanded-total' }}
			</div>

			<div class="overview-section overview-right">

				<!-- PROJECTS KEY -->
				<div class="projects-key">
					<h4 class="card-subheading">Projects Key</h4>

					<ul class="projects-list">
						{{#each projects }}
							<li class="list-item">{{ title }}</li>
						{{/each}}
						<li class="list-item">Other Projects</li>
					</ul>
				</div>
			</div>
		</div>

		<div class="students-overview stats-overview">
			<div class="stats-row">
				<div class="row-left">
					<div class="row-item">
						<h4 class="card-subheading">Total students</h4>
						<div class="amount -highlight">4,439</div>
					</div>

					<div class="row-item">
						<p><strong>Lorem ipsum:</strong> dolor sit amet, consectetur adipiscing elit. Phasellus sagittis sodales nisi id facilisis. Cras iaculis massa ullamcorper, mattis arcu et, euismod sem.</p>
					</div>
				</div>

				<div class="row-right">
					<div class="row-item">
						<h4 class="card-subheading">Applied</h4>
						<div class="amount -students">2,539</div>
					</div>
					<div class="row-item">
						<h4 class="card-subheading">Declined</h4>
						<div class="amount -students">1,154</div>
					</div>
				</div>
			</div>
		</div>

		<div class="line-chart">
			<h4 class="card-subheading">
				<span class="text">Student status</span>
			</h4>

			<div class="chart" data-chart="line" data-array="[ [ 1000, 1000, 3000, 4000 ], [ 1000, 1000, 4250, 4500 ], [ 3000, 3500, 4500, 5000 ] ]" data-interval="10">
				<div class="axis-y">
					<ul class="axis-list"></ul>
				</div>

				<div class="graph">
					<svg class="grid" x="0px" y="0px" viewBox="0 0 100 110" preserveAspectRatio="none">
					</svg>

					<div class="plot">
						<svg x="0px" y="0px" viewBox="0 0 198 110" preserveAspectRatio="none" data-view="[ 198, 110 ]"></svg>
					</div>
				</div>

				<div class="axis-x">
					<ul class="axis-list">
						<li class="axis-item">
							<span class="text">1st Quarter</span>
						</li>
						<li class="axis-item">
							<span class="text">2nd Quarter</span>
						</li>
						<li class="axis-item">
							<span class="text">3rd Quarter</span>
						</li>
						<li class="axis-item">
							<span class="text">4th Quarter</span>
						</li>
					</ul>
				</div>

				<div class="legend">
					<h4 class="card-subheading">Legend</h4>

					<ul class="legend-list">
						<li class="legend-item">
							<span class="text">Currently Enrolled</span>
						</li>

						<li class="legend-item">
							<span class="text">Under Examination</span>
						</li>

						<li class="legend-item">
							<span class="text">Completed</span>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<div class="card-section card-right">
		<div class="project-budgets">
			<div class="card-heading">
				<h4 class="card-subheading">
					<span class="text">Student Status information</span>

					<button type="button" class="btn btn-help js-tooltip-help">
						<i class="fa fa-question-circle" aria-hidden="true"></i>

						<div class="help-text">A small amount of info about facult funding information.</div>
					</button>
				</h4>
			</div>

			<ul class="project-stats">
				{{#each projects }}
					<li class="project-item">
						<div class="project-title">
							<div class="text">{{ title }}</div>

							<h4 class="card-subheading">Submissions title</h4>
						</div>

						<div class="stats-container">
							<div class="stats-section stats-left">
								<!-- Line chart is generated from the data attributes on this div -->
								<div class="chart" data-chart="bar" data-amount="{{ total }}" data-total="{{ total }}" data-label="Completed 2016"></div>

								<div class="chart" data-chart="bar" data-amount="{{ awarded }}" data-total="{{ total }}" data-label="Completed 2017"></div>

								<div class="chart" data-chart="bar" data-amount="{{ remaining }}" data-total="{{ total }}" data-label="Active"></div>
							</div>

							<div class="stats-section stats-right">
								<div class="applications-stats stat-boxes">
									<div class="stat-box">
										<div class="text">8</div>
										<div class="sub-text">Drafted</div>
									</div>
									<div class="stat-box">
										<div class="text">3</div>
										<div class="sub-text">Submitted</div>
									</div>
									<div class="stat-box">
										<div class="text">5</div>
										<div class="sub-text">Approved</div>
									</div>
								</div>
							</div>
						</div>
					</li>
				{{/each}}
			</ul>

			<div class="see-all">
				<a class="link link-strong" href="{{ basePath }}projects" title="See all faculties">See all faculties</a>
			</div>
		</div>
	</div>
</div>
/* No context defined for this component. */

There are no notes for this item.