visavis/plot/heatmap/heatmap.view.ts at 3045a96667f94d0d14fb42d492e8f38314549fd9 · mpds-io/visavis · 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
namespace $.$$ {

	// export const $mpds_visavis_plot_heatmap_json =

	export class $mpds_visavis_plot_heatmap extends $.$mpds_visavis_plot_heatmap {

		json() {
			return this.plot_raw().jsons()[0]
			// return $mpds_visavis_plot_heatmap_json( this.plot_raw().json() as any )
		}

		@ $mol_mem
		layout() {
			return {
				font: {
					family: 'inherit'
				},
				showlegend: false,
				hovermode: "closest",
				xaxis: {
					autorange: true,
					showgrid: false,
					showline: true, //false,
					zeroline: false, //true,
					showticklabels: false
				},
				xaxis2: {
					autorange: true,
					showgrid: false,
					showline: true, //false,
					zeroline: false, //true,
					showticklabels: false,
					side: "top",
					overlaying: 'x'
				},
				yaxis: {
					autorange: true,
					showgrid: false,
					showline: true, //false,
					zeroline: false, //true,
					showticklabels: false
				},
				yaxis2: {
					autorange: true,
					showgrid: false,
					showline: true, //false,
					zeroline: false, //true,
					showticklabels: false,
					side: "right",
					overlaying: 'y'
				}
			}
		}

		@ $mol_mem
		data() {

			const json = this.json()

			let data_x = json.payload.x
			let data_y = json.payload.y
			let data_z = json.payload.z

			if (!json.odet) {
				const dice = Math.floor(Math.random() * 100) % 3;
				if (dice === 0){
					data_x = json.payload.x
					data_y = json.payload.y
					data_z = json.payload.z
				} else if (dice === 1){
					data_x = json.payload.x
					data_y = json.payload.z
					data_z = json.payload.y
				} else {
					data_x = json.payload.y
					data_y = json.payload.z
					data_z = json.payload.x
				}
			}

			return [
				{
					type: "scatter",
					mode: "markers",
					hoverinfo: "text",
					x: data_x,
					y: data_y,
					text: json.payload.labels || Array(data_x.length).fill('Point'),
					marker: {color: data_z, colorscale: 'Rainbow', size: 4, opacity: 0.9}
				},
				{x: [], y: [], type: 'scatter', xaxis: 'x', yaxis: 'y'},
				{x: [], y: [], type: 'scatter', xaxis: 'x2', yaxis: 'y2'}
			]
		}

	}

}