fnordmetric-ui: implemented data-gauges and data-colors for timeseries gauges (6f07c66a) · Commits · github_fork / Clip

fnordmetric-doc/fnordmetric_ui.md

+22 −6

Original line number	Diff line number	Diff line

		+ refresh
		+ resize
		+ customize style -> css (ex. dark)


		Timeseries
		----------

		data-fnordmetric
		must be "timeseries"
		must be "timeseries" (mandatory)

		data-gauges
		comma seperated list of gauges to be dispalyed
		comma seperated list of gauges to be dispalyed (mandatory)

		data-since, data-until
		these attributes specify the time range to be displayed. they may be a
		unix timestamp, a time definition like "-3hours" (3 hours ago), "-45m"
		(45m ago) or "-3600" (3600 seconds = 1 hour ago) or "now". To e.g. display
		the last two hours of data use: data-since="-2hours" data-until="now"

		data-colors
		comma seperated list of series / gauge colors (optional)

		data-height
		height of the chart (default is 240px)

		data-graph-style
		render style (either line, area or flow)
		data-chart-style
		render style (either line, area or flow), default is "line"

		data-cardinal
		use cardinal splines (values are "on" or "off")
		use cardinal splines (values are "on" or "off"), default is "off"

		data-autoupdate
		refresh this chart every N seconds
		refresh this chart every N seconds, default is no autorefresh

fnordmetric-ui/js/fnordmetric.widgets.timeseries.js

+25 −9

Original line number	Diff line number	Diff line
		@@ -5,22 +5,35 @@ if (typeof FnordMetric.widgets == 'undefined')
		FnordMetric.widgets = {};

		FnordMetric.widgets.timeseries = function(elem){
		var graph, gauges, gconfig, legend, hoverDetail, shelving,
		highlighter, refresh_timer, series, height, colors;
		var graph, gauges, colors, gconfig, legend, hoverDetail, shelving,
		highlighter, refresh_timer, series, height;

		var default_colors = ["#db843d", "#3d96ae", "#80699b", "#89a54e",
		"#aa4643", "#4572a7"]

		var widget_key = elem.attr("data-widget-key");

		function init() {
		renderLayout();

		gauges = ["useronline_total"];
		colors = ["#00ff00"]
		if (!elem.attr('data-gauges'))
		return console.log("[FnordMetric] element is missing the data-gauges attribute");

		gauges = elem.attr("data-gauges").split(",");

		if (elem.attr('data-colors'))
		colors = elem.attr("data-colors").split(",");
		else
		colors = [];

		for (n = 0; n < gauges.length; n++)
		if (!colors[n]) colors[n] = default_colors.pop();

		gconfig = {
		element: $('.fnordmetric_container', elem)[0],
		padding: { top: 0.1, bottom: 0 },
		stroke: true
		}
		};

		if (elem.attr('data-cardinal') == "on") {
		gconfig.interpolation = 'cardinal';
		@@ -28,12 +41,12 @@ FnordMetric.widgets.timeseries = function(elem){
		gconfig.interpolation = 'linear';
		}

		if (elem.attr('data-graph-style') == 'area') {
		if (elem.attr('data-chart-style') == 'area') {
		gconfig.renderer = 'area';
		gconfig.offset = 'zero';
		}

		else if (elem.attr('data-graph-style') == 'flow') {
		else if (elem.attr('data-chart-style') == 'flow') {
		gconfig.renderer = 'stack';
		gconfig.offset = 'silhouette';
		}
		@@ -43,9 +56,12 @@ FnordMetric.widgets.timeseries = function(elem){
		gconfig.offset = 'zero';
		}

		if (elem.attr('data-height'))
		height = parseInt(elem.attr('data-height'), 10);
		else
		height = 240;
		resize();

		resize();
		requestDataAsync();

		if (refresh_interval = elem.attr('data-autoupdate'))

fnordmetric-ui/test.html

+18 −12

Original line number	Diff line number	Diff line
		@@ -12,10 +12,10 @@
		<link href='./css/fnordmetric.graph.css' type='text/css' rel='stylesheet' />
		<style type="text/css">
		body{ background:#111; }
		body.dark .rickshaw_legend li.line .label{ color:#fff; }
		body.dark .rickshaw_graph .y_grid .tick { stroke:rgba(255,255,255,.15); stroke-dasharray:0; }
		body.dark .rickshaw_graph .y_ticks text { fill:#ffffff; }
		body.dark .rickshaw_graph .x_tick .title { color:#ffffff; }
		body.dark .fnordmetric_legend li.line .label{ color:#fff; }
		body.dark .fnordmetric_graph .y_grid .tick { stroke:rgba(255,255,255,.15); stroke-dasharray:0; }
		body.dark .fnordmetric_graph .y_ticks text { fill:#ffffff; }
		body.dark .fnordmetric_graph .x_tick .title { color:#ffffff; }
		</style>
		</head>
		<body class="dark">
		@@ -50,31 +50,37 @@

		<div
		data-fnordmetric="timeseries"
		data-style="line"
		data-chart-style="line"
		data-height="240"
		data-time-range="16000"
		data-autoupdate="10"
		data-gauges="order_sum"
		style="width:600px; float:left;"></div>
		style="width:600px; "></div>

		<div
		data-fnordmetric="timeseries"
		data-style="area"
		data-chart-style="area"
		data-height="240"
		data-time-range="16000"
		data-autoupdate="10"
		data-gauges="user_logins,user_logins_failed"
		data-colors="#00ff00,#ff0000"
		style="width:600px; float:left;"></div>
		style="width:600px; "></div>

		<div
		data-fnordmetric="timeseries"
		data-style="flow"
		data-chart-style="area"
		data-height="240"
		data-time-range="16000"
		data-autoupdate="10"
		data-gauges="user_logins,user_logins_failed"
		style=""></div>

		<div
		data-fnordmetric="timeseries"
		data-chart-style="flow"
		data-height="300"
		data-autoupdate="10"
		data-gauges="useronline_total"
		style="width:600px; float:left;"></div>
		style="width:600px; "></div>

		<script>
		FnordMetric.setup({

Admin message