J-graph/html/demoDispProcToVal.html at main · NMReDATAInitiative/J-graph · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>

<head>
	<script src="https://d3js.org/d3.v7.min.js"></script>
</head>

<body>

	<h3>DispProxToVal </h3>

	<!-- the tooltip is used to display information when rolling over the DispProxToVal-->
	<div id="tooltip"
		style="position: absolute; visibility: hidden; padding: 1px; background-color: white; border: 1px solid #ccc; border-radius: 5px; pointer-events: none; z-index: 10;">
	</div>

	<div>
		<svg id="drawingSVG"></svg>
	</div>

	<div id="slider-container2">
	</div>
	<script type="module">
		import { DisplayProxToVal } from "../src/displayProxToVal.js";
		import { ControlSliders } from "../src/controlSliders.js";

		const relevantNumberDigits = 3;
		const dispQuality = new DisplayProxToVal("#drawingSVG");
		const dataDispVal = [
			{
				"lab": "(0)",
				"val": 1.0000000,
			},
			{
				"lab": "(1)",
				"val": 1.0,
			},
			{
				"lab": "(2)",
				"val": 1.0,
			}
		];
		dispQuality.initJson(dataDispVal, {
			types: ["toCen"],
			keys: ["lab", "val"],
			extract: "",
		});

		const sliders = new ControlSliders('#slider-container2', {
			min: -(relevantNumberDigits + 1),
			max: (relevantNumberDigits + 1),
			step: 0.01,
			initialValue: 0,
			width: '200 pt',
			margin: '20px 0',
			logScale: true,
			precision: relevantNumberDigits + 1,
			constantShift: 1, // ref. value
			shiftLog: relevantNumberDigits, // for logScale
			number: dataDispVal.length,
		});


		// Register each class as a receiver for every other class based on data type compatibility
		const classes = [dispQuality, sliders];
		classes.forEach((sender) => {
			classes.forEach((receiver) => {
				if (sender !== receiver) {
					sender.getExportTypes().forEach((sendType) => {
						if (receiver.getImportTypes().includes(sendType)) {
							sender.registerReceiver(receiver, sendType);
						}
					});
				}
			});
		});
     	sliders.updateDispQuality();

	</script>

</body>

</html>