Skip to content

Instantly share code, notes, and snippets.

@Haeyzed

Haeyzed/dashboard-ui-1-project-management-with-charts.markdown

Created December 22, 2021 04:59
Show Gist options
  • Save Haeyzed/a402d4b3ca8c15adee13dd26b3c44cd7 to your computer and use it in GitHub Desktop.
Save Haeyzed/a402d4b3ca8c15adee13dd26b3c44cd7 to your computer and use it in GitHub Desktop.
Download ZIP
Dashboard UI #1 : Project management with Charts
Raw
dashboard-ui-1-project-management-with-charts.markdown

Dashboard UI #1 : Project management with Charts

Basic project management dashboard. This particular view shows the list of all the projects and some basic info, like who's the PM, has the project been started yet, is there any items that require urgent action to be taken, etc. On the right side there's also an Actions dropdown, which gives the admins (like the Product Owner) a quick set of actions, like "Start project", "Send an invoice", etc.

A Pen by Olsi Odobashi on CodePen.

License.

Raw
index.html
<nav class="navbar navbar-dark sticky-top flex-md-nowrap p-0">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<i class="zmdi zmdi-widgets"></i>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-file-text"></i>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-shopping-cart"></i>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-accounts"></i>
Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-chart"></i>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-layers"></i>
Integrations
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center pl-3 mt-4 mb-1 text-muted">
<span>Saved reports</span>
<a class="d-flex align-items-center text-muted" href="#">
<i class="zmdi zmdi-plus-circle-o"></i>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-file-text"></i>
Current month
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-file-text"></i>
Last quarter
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-file-text"></i>
Social engagement
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-file-text"></i>
Year-end sale
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 my-3">
<div class="card-list">
<div class="row">
<div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-4">
<div class="card blue">
<div class="title">all projects</div>
<i class="zmdi zmdi-upload"></i>
<div class="value">89</div>
<div class="stat"><b>13</b>% increase</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-4">
<div class="card green">
<div class="title">team members</div>
<i class="zmdi zmdi-upload"></i>
<div class="value">5,990</div>
<div class="stat"><b>4</b>% increase</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-4">
<div class="card orange">
<div class="title">total budget</div>
<i class="zmdi zmdi-download"></i>
<div class="value">$80,990</div>
<div class="stat"><b>13</b>% decrease</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-4">
<div class="card red">
<div class="title">new customers</div>
<i class="zmdi zmdi-download"></i>
<div class="value">3</div>
<div class="stat"><b>13</b>% decrease</div>
</div>
</div>
</div>
</div>
<div class="projects mb-4">
<div class="projects-inner">
<header class="projects-header">
<div class="title">Ongoing Projects</div>
<div class="count">| 32 Projects</div>
<i class="zmdi zmdi-download"></i>
</header>
<table class="projects-table">
<thead>
<tr>
<th>Project</th>
<th>Deadline</th>
<th>Leader + Team</th>
<th>Budget</th>
<th>Status</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tr>
<td>
<p>New Dashboard</p>
<p>Google</p>
</td>
<td>
<p>17th Oct, 15</p>
<p class="text-danger">Overdue</p>
</td>
<td class="member">
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/people_8.png" /></figure>
<div class="member-info">
<p>Myrtle Erickson</p>
<p>UK Design Team</p>
</div>
</td>
<td>
<p>$4,670</p>
<p>Paid</p>
</td>
<td class="status">
<span class="status-text status-orange">In progress</span>
</td>
<td>
<form class="form" action="#" method="POST">
<select class="action-box">
<option>Actions</option>
<option>Start project</option>
<option>Send for QA</option>
<option>Send invoice</option>
</select>
</form>
</td>
</tr>
<tr class="danger-item">
<td>
<p>New Dashboard</p>
<p>Google</p>
</td>
<td>
<p>17th Oct, 15</p>
<p class="text-danger">Overdue</p>
</td>
<td class="member">
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/people_8.png" /></figure>
<div class="member-info">
<p>Myrtle Erickson</p>
<p>UK Design Team</p>
</div>
</td>
<td>
<p>$4,670</p>
<p>Paid</p>
</td>
<td class="status">
<span class="status-text status-red">Blocked</span>
</td>
<td>
<form class="form" action="#" method="POST">
<select class="action-box">
<option>Actions</option>
<option>Start project</option>
<option>Send for QA</option>
<option>Send invoice</option>
</select>
</form>
</td>
</tr>
<tr>
<td>
<p>New Dashboard</p>
<p>Google</p>
</td>
<td>
<p>17th Oct, 15</p>
<p class="text-danger">Overdue</p>
</td>
<td class="member">
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/people_8.png" /></figure>
<div class="member-info">
<p>Myrtle Erickson</p>
<p>UK Design Team</p>
</div>
</td>
<td>
<p>$4,670</p>
<p>Paid</p>
</td>
<td class="status">
<span class="status-text status-orange">In progress</span>
</td>
<td>
<form class="form" action="#" method="POST">
<select class="action-box">
<option>Actions</option>
<option>Start project</option>
<option>Send for QA</option>
<option>Send invoice</option>
</select>
</form>
</td>
</tr>
<tr>
<td>
<p>New Dashboard</p>
<p>Google</p>
</td>
<td>
<p>17th Oct, 15</p>
<p class="text-danger">Overdue</p>
</td>
<td class="member">
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/people_8.png" /></figure>
<div class="member-info">
<p>Myrtle Erickson</p>
<p>UK Design Team</p>
</div>
</td>
<td>
<p>$4,670</p>
<p>Paid</p>
</td>
<td class="status">
<span class="status-text status-blue">Early stages</span>
</td>
<td>
<form class="form" action="#" method="POST">
<select class="action-box">
<option>Actions</option>
<option>Start project</option>
<option>Send for QA</option>
<option>Send invoice</option>
</select>
</form>
</td>
</tr>
<tr>
<td>
<p>New Dashboard</p>
<p>Google</p>
</td>
<td>
<p>17th Oct, 15</p>
<p class="text-danger">Overdue</p>
</td>
<td class="member">
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/people_8.png" /></figure>
<div class="member-info">
<p>Myrtle Erickson</p>
<p>UK Design Team</p>
</div>
</td>
<td>
<p>$4,670</p>
<p>Paid</p>
</td>
<td class="status">
<span class="status-text status-orange">In progress</span>
</td>
<td>
<form class="form" action="#" method="POST">
<select class="action-box">
<option>Actions</option>
<option>Start project</option>
<option>Send for QA</option>
<option>Send invoice</option>
</select>
</form>
</td>
</tr>
</table>
</div>
</div>
<div class="chart-data">
<div class="row">
<div class="col-12 col-md-4">
<div class="chart radar-chart dark">
<div class="actions">
<button type="button" class="btn btn-link"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="zmdi zmdi-more-vert"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<h3 class="title">Household Expenditure</h3>
<p class="tagline">Yearly</p>
<canvas height="400" id="radarChartDark"></canvas>
</div>
</div>
<div class="col-12 col-md-4">
<div class="chart bar-chart light">
<div class="actions">
<button type="button" class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="zmdi zmdi-more-vert"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<h3 class="title">Monthly revenue</h3>
<p class="tagline">2015 (in thousands US$)</p>
<canvas height="400" id="barChartHDark"></canvas>
</div>
</div>
<div class="col-12 col-md-4">
<div class="chart doughnut-chart dark">
<div class="actions">
<button type="button" class="btn btn-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="zmdi zmdi-more-vert"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
<h3 class="title">Exports of Goods</h3>
<p class="tagline">2015 (in billion US$)</p>
<canvas height="400" id="doughnutChartDark"></canvas>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
Raw
script.typescript
class Selectize {
constructor() {
this.init();
}
init() {
var initValue: string;
$('.action-box').selectric({
onInit: function(element) {
initValue = $(this).val();
},
onChange: function(element) {
if ($(this).val() !== initValue)
$(element).parents('form').submit();
}
});
}
}
class Charts {
colors;
tickColor: string;
constructor() {
this.colors = ["#DB66AE", "#8185D6", "#89D9DF", "#E08886"];
this.tickColor = "#757681";
this.initRadar();
this.initBarHorizontal();
this.initDoughnut();
}
initRadar(): void {
var ctxD = $('#radarChartDark'),
chartData = {
type: 'radar',
data: {
labels: ["Education", "Food", "Transport", "Drinks", "Other"],
datasets: [
{
label: "2014",
backgroundColor: this.convertHex(this.colors[0], 20),
borderColor: this.colors[0],
borderWidth: 1,
pointRadius: 2,
data: [51, 67, 90, 31, 16],
},
{
label: "2015",
backgroundColor: this.convertHex(this.colors[1], 20),
borderColor: this.colors[1],
borderWidth: 1,
pointRadius: 2,
data: [75, 44, 19, 22, 43],
},
{
label: "2015",
backgroundColor: this.convertHex(this.colors[2], 20),
borderColor: this.colors[2],
borderWidth: 1,
pointRadius: 2,
data: [7, 14, 29, 82, 33]
}
]},
options: {
scale: {
pointLabels: {
fontColor: this.tickColor
},
ticks: {
display: false,
stepSize: 25
}
},
legend: {
position: "bottom",
labels: {
boxWidth: 11,
fontColor: this.tickColor,
fontSize: 11
}
}
}
},
myDarkRadarChart = new Chart(ctxD, chartData);
}
initBarHorizontal(): void {
var ctxD = $("#barChartHDark"),
chartData = {
type: 'horizontalBar',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
data: [27, 59, 68, 26, 79, 55, 36, 43, 44, 30, 55, 64],
backgroundColor: this.colors[0],
hoverBackgroundColor: this.convertHex(this.colors[0], 70)
},
{
data: [136, 23, 44, 30, 79, 55, 61, 94, 27, 59, 98, 91],
backgroundColor: this.colors[1],
hoverBackgroundColor: this.convertHex(this.colors[1], 70)
},
{
data: [88, 31, 87, 61, 77, 27, 59, 58, 136, 26, 79, 85],
backgroundColor: this.colors[2],
hoverBackgroundColor: this.convertHex(this.colors[2], 70)
}]
},
options: {
barThickness: 10,
scales: {
xAxes: [{
stacked: true,
ticks: {
fontColor: this.tickColor,
},
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
stacked: true,
ticks: {
fontColor: this.tickColor,
min: 0,
max: 175,
stepSize: 25
}
}]
},
legend: {
display: false
}
}
},
myDarkRadarChart = new Chart(ctxD, chartData);
}
initDoughnut(): void {
var ctxD = $('#doughnutChartDark'),
chartData = {
type: 'doughnut',
data: {
labels: ["Brasil", "India", "China"],
datasets: [{
data: [300, 50, 100],
borderWidth: 0,
backgroundColor: [
this.convertHex(this.colors[0], 60),
this.convertHex(this.colors[1], 60),
this.convertHex(this.colors[2], 60),
],
hoverBackgroundColor: [
this.colors[0],
this.colors[1],
this.colors[2],
]
}]
},
options: {
responsive: true,
legend: {
position: "bottom",
labels: {
boxWidth: 11,
fontColor: this.tickColor,
fontSize: 11
}
}
}
},
myDarkRadarChart = new Chart(ctxD, chartData);
}
convertHex(hex, opacity) {
hex = hex.replace('#','');
var r = parseInt(hex.substring(0,2), 16);
var g = parseInt(hex.substring(2,4), 16);
var b = parseInt(hex.substring(4,6), 16);
var result = 'rgba('+r+','+g+','+b+','+opacity/100+')';
return result;
}
}
new Selectize();
new Charts();
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.selectric/1.10.1/jquery.selectric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
Raw
style.scss
@import "https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/dashboard.scss";
$bg: #1b2431;
$light-text: #738297;
$dark-text: #273142;
$light-bg: #313D4F;
// global stuff
body {
background-color: $bg;
color: #202020;
font-family: "Montserrat", "Helvetica", "Open Sans", "Arial";
font-size: 13px;
}
a:hover {
text-decoration: none;
}
p,
figure {
margin: 0;
padding: 0;
}
@mixin clear() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
.navbar {
background-color: $bg;
}
.sidebar {
background-color: $bg;
box-shadow: none;
.nav-link {
border-left: 5px solid transparent;
color: $light-text;
padding: .5rem .75rem;
&:hover {
color: white;
}
&.active {
border-left: 5px solid $light-text;
color: white;
}
}
.zmdi {
display: inline-block;
font-size: 1.35rem;
margin-right: 5px;
min-width: 25px;
}
}
.card-list {
@include clear();
width: 100%;
}
.card {
border-radius: 8px;
color: white;
padding: 10px;
position: relative;
.zmdi {
color: white;
font-size: 28px;
opacity: 0.3;
position: absolute;
right: 13px;
top: 13px;
}
.stat {
border-top: 1px solid rgba(255, 255, 255, 0.3);
font-size: 8px;
margin-top: 25px;
padding: 10px 10px 0;
text-transform: uppercase;
}
.title {
display: inline-block;
font-size: 8px;
padding: 10px 10px 0;
text-transform: uppercase;
}
.value {
font-size: 28px;
padding: 0 10px;
}
&.blue {
background-color: #2298F1;
}
&.green {
background-color: #66B92E;
}
&.orange {
background-color: #DA932C;
}
&.red {
background-color: #D65B4A;
}
}
.projects {
background-color: $dark-text;
border: 1px solid $light-bg;
overflow-x: auto;
width: 100%;
&-inner {
border-radius: 4px;
}
}
.projects-header {
color: white;
padding: 22px;
.count,
.title {
display: inline-block;
}
.count {
color: #738297;
}
.zmdi {
cursor: pointer;
float: right;
font-size: 16px;
margin: 5px 0;
}
.title {
font-size: 21px;
+ .count {
margin-left: 5px;
}
}
}
.projects-table {
background: #273142;
width: 100%;
td,
th {
color: white;
padding: 10px 22px;
vertical-align: middle;
}
td p {
font-size: 12px;
&:last-of-type {
color: $light-text;
font-size: 11px;
}
}
th {
background-color: $light-bg;
}
tr {
&:hover {
background-color: lighten($dark-text, 5%);
}
&:not(:last-of-type) {
border-bottom: 1px solid $light-bg;
}
}
.member {
figure,
.member-info {
display: inline-block;
vertical-align: top;
}
figure + .member-info {
margin-left: 7px;
}
img {
border-radius: 50%;
height: 32px;
width: 32px;
}
}
.status > form {
float: right;
}
.status-text {
display: inline-block;
font-size: 12px;
margin: 11px 0;
padding-left: 20px;
position: relative;
&:before {
border: 3px solid;
border-radius: 50%;
content: "";
height: 14px;
left: 0;
position: absolute;
top: 1px;
width: 14px;
}
&.status-blue:before {
border-color: #1C93ED;
}
&.status-green:before {
border-color: #66B92E;
}
&.status-orange:before {
border-color: #DA932C;
}
&.status-red:before {
border-color: #D65B4A;
}
}
}
// selectric plugin styling
.selectric {
background-color: transparent;
border-color: $light-bg;
border-radius: 4px;
.label {
color: $light-text;
line-height: 34px;
margin-right: 10px;
text-align: left;
}
&-wrapper {
float: right;
width: 150px;
}
}
// charts
.chart {
border-radius: 3px;
// box-shadow: 0 0 10px -3px black;
border: 1px solid $light-bg;
color: white;
padding: 10px;
position: relative;
text-align: center;
canvas {
height: 400px;
margin: 20px 0;
width: 100%;
}
.actions {
margin: 15px;
position: absolute;
right: 0;
top: 0;
span {
cursor: pointer;
display: inline-block;
font-size: 20px;
margin: 5px;
padding: 4px;
}
.btn-link {
color: white;
i {
font-size: 1.75rem;
}
}
}
.title {
font-size: 18px;
margin: 0;
padding: 15px 0 5px;
+ .tagline {
margin-top: 10px;
}
}
.tagline {
font-size: 12px;
}
}
.danger-item {
border-left: 4px solid #A84D43;
}
.zmdi {
line-height: 1;
vertical-align: middle;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/jquery.selectric/1.10.1/selectric.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment