report fu (a4bd48ca) · Commits · github_fork / Clip

web/fnordquery.css

+13 −2

Original line number	Diff line number	Diff line
		@@ -2,7 +2,6 @@ body, html{ height:100%; padding:0px;}
		body{ background:url('img/head.png') 0 -21px repeat-x fixed #2E3133; color:#333; margin:0; padding:0; overflow-y:scroll; font: 12px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; padding-bottom:30px; overflow-x:hidden; }

		body.inner{ background:#fff; }

		h1{
		font-size:24px;
		color:#333;
		@@ -348,3 +347,15 @@ ul.ui_tabs li.active a{
		}

		.gauge_viewport{ margin-top:30px; }


		.rickshaw_graph .y_ticks path { stroke:#fff; }
		.rickshaw_graph .y_grid .tick { stroke:#ddd; }

		.rickshaw_graph .x_tick {
		border-left: none;
		}

		.rickshaw_graph .x_tick.glow .title, .rickshaw_graph .y_ticks.glow text{
		font-size:14px;
		}
		No newline at end of file

web/src/fnordquery.timeseries_widget.js

+22 −69

Original line number	Diff line number	Diff line
		@@ -8,64 +8,19 @@ fnordquery.widgets.timeseries_widget = function(){

		draw_layout();

		width = opts.elem.width();
		height = opts.height \|\| 350;

		canvas = d3.select('#container-'+widget_uid)
		.append("svg:svg")
		.attr("width", width)
		.attr("height", height);
		width = opts.elem.width() - 65;
		height = opts.height \|\| 400;

		//for (ind in opts.series){


		var seriesData = [ [], [], [], [], [], [], [], [], [] ];
		var random = new Rickshaw.Fixtures.RandomData(150);

		for (var i = 0; i < 150; i++) {
		random.addData(seriesData);
		}


		var palette = new Rickshaw.Color.Palette( { scheme: 'classic9' } );

		var graph = new Rickshaw.Graph( {
		element: document.getElementById("chart"),
		width: 1630,
		height: 500,
		renderer: 'area',
		element: $('.container', opts.elem)[0],
		width: width,
		height: height,
		renderer: 'line',
		stroke: true,
		series: [
		{
		color: palette.color(),
		data: seriesData[0],
		name: 'Moscow'
		}, {
		color: palette.color(),
		data: seriesData[1],
		name: 'Shanghai'
		}, {
		color: palette.color(),
		data: seriesData[2],
		name: 'Amsterdam'
		}, {
		color: palette.color(),
		data: seriesData[3],
		name: 'Paris'
		}, {
		color: palette.color(),
		data: seriesData[4],
		name: 'Tokyo'
		}, {
		color: palette.color(),
		data: seriesData[5],
		name: 'London'
		}, {
		color: palette.color(),
		data: seriesData[6],
		name: 'New York'
		}
		]
		series: opts.series,
		} );

		graph.render();
		@@ -99,11 +54,9 @@ fnordquery.widgets.timeseries_widget = function(){
		element: $('#smoother')
		});

		var ticksTreatment = 'glow';

		var xAxis = new Rickshaw.Graph.Axis.Time( {
		graph: graph,
		ticksTreatment: ticksTreatment
		ticksTreatment: 'glow'
		});

		xAxis.render();
		@@ -111,12 +64,11 @@ fnordquery.widgets.timeseries_widget = function(){
		var yAxis = new Rickshaw.Graph.Axis.Y( {
		graph: graph,
		tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
		ticksTreatment: ticksTreatment
		ticksTreatment: 'glow'
		} );

		yAxis.render();


		}

		function draw_layout(){
		@@ -128,13 +80,14 @@ fnordquery.widgets.timeseries_widget = function(){
		)
		.append(
		$('<div></div>')
		.attr('id', 'container-'+widget_uid).css({
		height: opts.height + 6,
		marginBottom: 20,
		overflow: 'hidden'
		.addClass('container')
		.css({
		height: opts.height,
		margin: '50px 30px 40px 30px',
		})
		);


		// if(opts.ticks){
		// $('.headbar', opts.elem).append('<div class="tick_btns btn_group"></div>');
		// for(__tick in opts.ticks){

web/test.html

+15 −1

Original line number	Diff line number	Diff line
		@@ -90,10 +90,24 @@

		</div>

		<div class="widget NumbersWidget" style="margin-bottom: 20px; overflow-x: hidden; overflow-y: hidden; width:1700px;"><div class="headbar small">Realtime Queries</div><div class="numbers_container" rel="Queries" style="width: 380px; "><div class="title">Queries</div><div class="number" rel="3" data="2.6666666666666665"><span class="desc">3sec avg.</span><span class="value">2.67</span></div><div class="number" rel="5" data="3.2"><span class="desc">5sec avg.</span><span class="value">3.20</span></div><div class="number" rel="15" data="3.4000000000000004"><span class="desc">15sec avg.</span><span class="value">3.40</span></div><div class="number" rel="30" data="3.3666666666666667"><span class="desc">30sec avg.</span><span class="value">3.37</span></div></div></div>

		<script>
		fnordquery.widgets.timeseries_widget().render({
		title: "Fnord!!!!",
		elem: $('.mywidget')
		elem: $('.mywidget'),
		series:[
		{
		color: '#0066CC',
		name: "fnord",
		data: [
		{ x: 1336873946, y: 40 },
		{ x: 1336874946, y: 49 },
		{ x: 1336875946, y: 38 },
		{ x: 1336876946, y: 30 },
		{ x: 1336877946, y: 32 } ]
		}
		]
		})
		</script>

Admin message