wa0x6e · December 23, 2015 01:59
diff --git a/README.md b/README.md
diff --git a/redis.rb b/redis.rb
 require "redis"

 dashing_env = ENV['DASHING_ENV'] || 'development'
 redis_config = YAML.load_file(File.dirname(__FILE__) + '/../config/redis.yml')

 if redis_config[dashing_env].include? ":"
 	t = redis_config[dashing_env].split(":")
 	redis = Redis.new({:host => t[0], :port => t[1].to_i})
 elsif redis_config[dashing_env][-5, 5] == ".sock"
 	redis = Redis.new({ :path => redis_config[dashing_env] })
 end

 SCHEDULER.every('2s', first_in: '1s') {
 	info = redis.info

 	send_event('redis_connected_clients', {
 		current: info["connected_clients"],
 		moreinfo: "Number of connected clients"
 	})

 	# Send memory usage stats in bytes
 	send_event('redis_used_memory', {
 		# Use peak memory as maximum in case no hard limit was defined in redis.conf
 		max: [info["used_memory_peak"].to_i, redis.config("GET", "maxmemory")[1].to_i].max,
 		value: info["used_memory"].to_i
 	})
 }
diff --git a/redis.yml b/redis.yml
 development: localhost:6379
 production: localhost:6379
diff --git a/usage-gauge-background.png b/usage-gauge-background.png
diff --git a/usage_gauge.coffee b/usage_gauge.coffee
 class Dashing.UsageGauge extends Dashing.Widget
 	@accessor 'value', Dashing.AnimatedValue

 	ready: ->
 		$(@node).find(".value").before("<div class='gauge'></div>")
 		$(@node).find(".gauge").append("<div class='gauge-meter'></div>")
 		@meter = $(@node).find(".gauge-meter");

 	onData: (data) ->
 		@meter.animate({height: Batman.mixin Batman.Filters.percentage(data.value, @get("max")) + "%"})

 	@accessor "total", ->
 		@get("max")

 	@accessor "suffix", ->
 		" %"

 Batman.mixin Batman.Filters,
 	percentage: (n, total) ->
 		Math.round(n * 100 / total)
diff --git a/usage_gauge.html b/usage_gauge.html
 <h1 class="title" data-bind="title"></h1>

 <h2 class="value" data-bind="value | percentage total | append suffix"></h2>

 <p class="updated-at" data-bind="updatedAtMessage"></p>
diff --git a/usage_gauge.scss b/usage_gauge.scss
 // ----------------------------------------------------------------------------
 // Sass declarations
 // ----------------------------------------------------------------------------
 $background-color:  #ec223f;

 $title-color:       rgba(255, 255, 255, 0.7);
 $updated-at-color:  rgba(255, 255, 255, 0.5);

 $meter-background:  darken($background-color, 15%);

 // ----------------------------------------------------------------------------
 // Widget-meter styles
 // ----------------------------------------------------------------------------
 .widget-usage-gauge {

  background-color: $background-color;

 	.title {
 		color: $title-color;
 	}

 	.value {
 		font-weight: 600;
 		font-size: 30px
 	}

 	.gauge {
 		width: 100px;
 		height: 180px;
 		display: block;
 		margin: 0 auto 10px;
 		position: relative;
 	}

 	.gauge-meter, .gauge::after {
 		display: block;
 		background: url("/assets/usage-gauge-background.png") repeat-y center bottom;
 	}

 	.gauge::after {
 		content: "";
 		height: 100%;
 		opacity: 0.15;
 	}

 	.gauge-meter {
 		width: 100px;
 		position: absolute;
 		bottom: 0;
 		opacity: 0.6;
 	}

 	.updated-at {
 		color: $updated-at-color
 	}
 }
	require "redis"

	dashing_env = ENV['DASHING_ENV'] \|\| 'development'
	redis_config = YAML.load_file(File.dirname(__FILE__) + '/../config/redis.yml')

	if redis_config[dashing_env].include? ":"
	t = redis_config[dashing_env].split(":")
	redis = Redis.new({:host => t[0], :port => t[1].to_i})
	elsif redis_config[dashing_env][-5, 5] == ".sock"
	redis = Redis.new({ :path => redis_config[dashing_env] })
	end

	SCHEDULER.every('2s', first_in: '1s') {
	info = redis.info

	send_event('redis_connected_clients', {
	current: info["connected_clients"],
	moreinfo: "Number of connected clients"
	})

	# Send memory usage stats in bytes
	send_event('redis_used_memory', {
	# Use peak memory as maximum in case no hard limit was defined in redis.conf
	max: [info["used_memory_peak"].to_i, redis.config("GET", "maxmemory")[1].to_i].max,
	value: info["used_memory"].to_i
	})
	}
	class Dashing.UsageGauge extends Dashing.Widget
	@accessor 'value', Dashing.AnimatedValue

	ready: ->
	$(@node).find(".value").before("<div class='gauge'></div>")
	$(@node).find(".gauge").append("<div class='gauge-meter'></div>")
	@meter = $(@node).find(".gauge-meter");

	onData: (data) ->
	@meter.animate({height: Batman.mixin Batman.Filters.percentage(data.value, @get("max")) + "%"})

	@accessor "total", ->
	@get("max")

	@accessor "suffix", ->
	" %"

	Batman.mixin Batman.Filters,
	percentage: (n, total) ->
	Math.round(n * 100 / total)
	<h1 class="title" data-bind="title"></h1>

	<h2 class="value" data-bind="value \| percentage total \| append suffix"></h2>

	<p class="updated-at" data-bind="updatedAtMessage"></p>
	// ----------------------------------------------------------------------------
	// Sass declarations
	// ----------------------------------------------------------------------------
	$background-color: #ec223f;

	$title-color: rgba(255, 255, 255, 0.7);
	$updated-at-color: rgba(255, 255, 255, 0.5);

	$meter-background: darken($background-color, 15%);

	// ----------------------------------------------------------------------------
	// Widget-meter styles
	// ----------------------------------------------------------------------------
	.widget-usage-gauge {

	background-color: $background-color;

	.title {
	color: $title-color;
	}

	.value {
	font-weight: 600;
	font-size: 30px
	}

	.gauge {
	width: 100px;
	height: 180px;
	display: block;
	margin: 0 auto 10px;
	position: relative;
	}

	.gauge-meter, .gauge::after {
	display: block;
	background: url("/assets/usage-gauge-background.png") repeat-y center bottom;
	}

	.gauge::after {
	content: "";
	height: 100%;
	opacity: 0.15;
	}

	.gauge-meter {
	width: 100px;
	position: absolute;
	bottom: 0;
	opacity: 0.6;
	}

	.updated-at {
	color: $updated-at-color
	}
	}