Activity Widget - Just a little somethin' somethin' made using HAML, CSS, and JavaScript. It looks kinda nice, actually.

index.haml

#container
  #header
    %span ACTIVITY WIDGET
  #display
    #upper
      %select
        %option Disk space usage
        %option Something else 1
        %option Something else 2
        %option Something else 3
    #lower
      %select
        %option YEARLY ACTIVITY
        %option MONTHLY ACTIVITY
        %option WEEKLY ACTIVITY
        %option DAILY ACTIVITY
      %span - or -
      %input(type="date")
      %span -
      %input(type="date")
    #chart
  #details
    #t-head
      %span DRIVE NAME
      %span SELECTED
      %span CURRENT
    #t-body
      %div
        #icon1
        %span Drive A
        %span
          176
          %sup GB
        %span
          153
          %sup GB
      %div
        #icon2
        %span Drive B
        %span
          94
          %sup GB
        %span
          149
          %sup GB
      %div
        #icon3
        %span Drive C
        %span 
        %span
          68
          %sup GB
      %div
        #icon4
        %span Drive D
        %span
          46
          %sup GB
        %span
          137
          %sup GB

script.js

var s1 = polyjs.data({
  date: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  count: [6, 7, 4, 3, 7, 8, 6, 8, 7, 6, 7, 5]
});
var s2 = polyjs.data({
  date: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  count1: [4, 5, 4, 3, 2, 2, 3, 4, 5, 4, 5, 6]
});
var s3 = polyjs.data({
  date: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  count2: [3, 4, 3, 2, 5, 7, 9, 6, 5, 2, 3, 4]
});

var options = {
  layers: [{
    data: s1,
    type: "line",
    x: "date",
    y: "count",
    color: { const: "#e74c3c"},
    size: { const: 3 }
  },{
    data: s2,
    type: "line",
    x: "date",
    y: "count1",
    color: { const: "#2980b9"},
    size: { const: 3 }
  },{
    data: s3,
    type: "line",
    x: "date",
    y: "count2",
    color: { const: "#27ae60"},
    size: { const: 3 }
  }],
    guide: {
      x: { min: 0, max: 0, numticks : 12, title: ""},
      y: { min: 0, max: 10, numticks : 1, title: ""}
    },
  dom: "chart",
  width: 580,
  height: 300
};


polyjs.chart(options);

style.css

* {
  font-family: 'Ubuntu', sans-serif !important;
}
body {
  background: #7f8c8d;
}
#container {
  width: 600px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -300px;
  margin-left: -300px;
}
#header {
  color: #ecf0f1;
  height: 24px;
}
#header span {
  position: inherit;
  margin-left: 12px;
  bottom: -10px;
  font-size: 12px;
}
#display {
  height: 400px;
  background: #2C2F3B;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
#details {
  height: 200px;
  background: #FFF;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}
#t-head * {
  margin-top: 20px;
  font-size: 12px;
  color: #7f8c8d;
  display: inline-block;
}
#t-head :nth-child(1) {
  width: 320px;
  margin-left: 45px;
}
#t-head :nth-child(2), #t-head :nth-child(3) {
  width: 110px;
}
#t-body div :nth-child(1) {
  display: inline-block;
  margin: 15px;
  vertical-align: middle;
}
#icon1 {
  width: 10px;
  height: 10px;
  background: #F1736A;
}
#icon2 {
  width: 10px;
  height: 10px;
  background: #00BDCC;
}
#icon3 {
  width: 10px;
  height: 10px;
  background: #D4D5D7;
}
#icon4 {
  width: 10px;
  height: 10px;
  background: #5FB571;
}
#t-body div span {
  display: inline-block;
}
#t-body div span:nth-child(2) {
  width: 320px;
}
#t-body div span:nth-child(3) {
  font-weight: 700;
  width: 90px;
  text-align: right;
}
#t-body div span:nth-child(4) {
  font-weight: 700;
  width: 110px;
  text-align: right;
}
sup {
  font-size: 10px;
  left: -19px;
  top: -5px;
  position: relative;
}
#upper select {
  border: none;
  height: 40px;
  width: 580px;
  padding-left: 10px;
  font-weight: bold;
  font-size: 16px;
  margin-top: 10px;
  margin-left: 10px;
  border-radius: 5px;
  -webkit-appearance: none;
  outline: none;
}

#lower select {
  border: 1px solid #7f8c8d;
  background: #2C2F3B;
  color: #FFF;
  height: 30px;
  width: 220px;
  padding-left: 10px;

  margin-top: 10px;
  margin-left: 10px;
  border-radius: 5px;
  -webkit-appearance: none;
  outline: none;
}
#lower input {
  border: 1px solid #7f8c8d;
  background: #2C2F3B;
  color: #FFF;
  height: 30px;
  width: 130px;
  padding-left: 10px;

  margin-top: 10px;
  margin-left: 10px;
  border-radius: 5px;
  -webkit-appearance: none;
  outline: none;
}

#lower span {
  color: #7f8c8d;
  font-style:italic
}