Current state

2026-02-07 08:23:18 +01:00
commit 0a4372c40d
22479 changed files with 1553543 additions and 0 deletions
--- a/public/legacy/assets/plugins/charts-rickshaw/examples/hover.html
+++ b/public/legacy/assets/plugins/charts-rickshaw/examples/hover.html
@@ -0,0 +1,130 @@
+<!doctype>
+<head>
+	<link type="text/css" rel="stylesheet" href="../src/css/graph.css">
+	<link type="text/css" rel="stylesheet" href="../src/css/detail.css">
+	<link type="text/css" rel="stylesheet" href="../src/css/legend.css">
+
+	<script src="../vendor/d3.v3.js"></script>
+
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+
+	<script src="../rickshaw.js"></script>
+
+	<style>
+		body { 
+			font-family: Arial, sans-serif 
+		}
+		#chart_container {
+			width: 960px;
+		}
+		.swatch {
+			display: inline-block;
+			width: 10px;
+			height: 10px;
+			margin: 0 8px 0 0;
+		}
+		.label {
+			display: inline-block;
+		}
+		.line {
+			display: inline-block;
+			margin: 0 0 0 30px;
+		}
+		#legend {
+			text-align: center;
+		}
+		.rickshaw_graph .detail {
+			background: none;
+		}
+	</style>
+</head>
+<body>
+
+<div id="chart_container">
+	<div id="chart"></div><br>
+	<div id="legend"></div>
+</div>
+
+<script>
+
+// set up our data series with 50 random data points
+
+var seriesData = [ [], [], [] ];
+var random = new Rickshaw.Fixtures.RandomData(150);
+
+for (var i = 0; i < 150; i++) {
+	random.addData(seriesData);
+}
+
+// instantiate our graph!
+
+var graph = new Rickshaw.Graph( {
+	element: document.getElementById("chart"),
+	width: 960,
+	height: 500,
+	renderer: 'line',
+	series: [
+		{
+			color: "#c05020",
+			data: seriesData[0],
+			name: 'New York'
+		}, {
+			color: "#30c020",
+			data: seriesData[1],
+			name: 'London'
+		}, {
+			color: "#6060c0",
+			data: seriesData[2],
+			name: 'Tokyo'
+		}
+	]
+} );
+
+graph.render();
+
+var legend = document.querySelector('#legend');
+
+var Hover = Rickshaw.Class.create(Rickshaw.Graph.HoverDetail, {
+
+	render: function(args) {
+
+		legend.innerHTML = args.formattedXValue;
+
+		args.detail.sort(function(a, b) { return a.order - b.order }).forEach( function(d) {
+
+			var line = document.createElement('div');
+			line.className = 'line';
+
+			var swatch = document.createElement('div');
+			swatch.className = 'swatch';
+			swatch.style.backgroundColor = d.series.color;
+
+			var label = document.createElement('div');
+			label.className = 'label';
+			label.innerHTML = d.name + ": " + d.formattedYValue;
+
+			line.appendChild(swatch);
+			line.appendChild(label);
+
+			legend.appendChild(line);
+
+			var dot = document.createElement('div');
+			dot.className = 'dot';
+			dot.style.top = graph.y(d.value.y0 + d.value.y) + 'px';
+			dot.style.borderColor = d.series.color;
+
+			this.element.appendChild(dot);
+
+			dot.className = 'dot active';
+
+			this.show();
+
+		}, this );
+        }
+});
+
+var hover = new Hover( { graph: graph } ); 
+
+</script>
+
+</body>