@@ -12,6 +12,16 @@ document.querySelectorAll(".tab-link").forEach(button => {
1212// Initialize selection widgets
1313const choicesInstances = { } ;
1414
15+ choicesInstances [ "region-select" ] = new Choices ( "#region-select" , {
16+ searchEnabled : false ,
17+ removeItemButton : true ,
18+ shouldSort : false ,
19+ itemSelectText : "" ,
20+ placeholder : false
21+ } ) ;
22+ document . getElementById ( "region-select" ) . addEventListener ( "change" , updateChart ) ;
23+
24+
1525choicesInstances [ "source-select" ] = new Choices ( "#source-select" , {
1626 searchEnabled : false ,
1727 removeItemButton : true ,
@@ -41,57 +51,74 @@ document.getElementById("param-select").addEventListener("change", updateChart);
4151
4252// Get the data (embedded in the HTML)
4353data = JSON . parse ( document . getElementById ( "verif-data" ) . textContent )
54+ header = document . getElementById ( "header-text" ) . textContent . trim ( )
4455
4556// Define base spec
4657var spec = {
4758 "data" : { "values" : data } ,
48- "params" : [
49- {
50- "name" : "xZoom" ,
51- "select" : {
52- "type" : "interval" ,
53- "encodings" : [ "x" ] ,
54- "zoom" : "wheel![!event.shiftKey]"
55- } ,
56- "bind" : "scales"
57- }
58- ] ,
59+ "config" : {
60+ "scale" : { "continuousPadding" : 1 }
61+ } ,
5962 "facet" : {
60- "column" : { "field" : "param" } ,
61- "row" : { "field" : "metric" }
63+ "row" : { "field" : "metric" , "type" : "nominal" , "title" : null } ,
64+ "column" : { "field" : "param" , "type" : "nominal" , "title" : null } ,
65+ } ,
66+ "resolve" : {
67+ "scale" : {
68+ "x" : "shared" ,
69+ "y" : "independent"
70+ } ,
6271 } ,
6372 "spec" : {
64- "mark" : "line" ,
73+ "params" : [
74+ {
75+ "name" : "xZoom" ,
76+ "select" : {
77+ "type" : "interval" ,
78+ "encodings" : [ "x" ] ,
79+ "zoom" : "wheel![!event.shiftKey]"
80+ } ,
81+ "bind" : "scales"
82+ }
83+ ] ,
84+ "mark" : { "type" : "line" , "point" : { "size" : 50 } } ,
6585 "width" : 300 ,
6686 "height" : 200 ,
6787 "encoding" : {
6888 "x" : {
6989 "field" : "lead_time" ,
70- "type" : "quantitative" ,
71- "axis" : { "labels" : true , "ticks" : true } ,
90+ "type" : "quantitative"
7291 } ,
7392 "y" : {
7493 "field" : "value" ,
75- "type" : "quantitative" ,
76- "scale" : { "zero" : false }
94+ "type" : "quantitative" ,
95+ "scale" : { "zero" : false }
7796 } ,
7897 "color" : {
7998 "field" : "source" ,
80- "legend" : { "orient" : "top" , "labelLimit" : 1000 , "symbolSize" : 1000 }
81- }
99+ "type" : "nominal" ,
100+ "legend" : { "orient" : "top" , "title" : "Data Source" , "offset" : 0 , "padding" : 10 }
101+ } ,
102+ "shape" : {
103+ "field" : "region" ,
104+ "type" : "nominal" ,
105+ "legend" : { "orient" : "top" , "title" : "Region" , "offset" : 0 , "padding" : 10 }
106+ } ,
107+ "strokeDash" : {
108+ "field" : "region" ,
109+ "type" : "nominal" ,
110+ "legend" : null
111+ } ,
112+ "tooltip" : [
113+ { "field" : "region" , "type" : "nominal" , "title" : "Region" } ,
114+ { "field" : "source" , "type" : "nominal" , "title" : "Source" } ,
115+ { "field" : "param" , "type" : "nominal" , "title" : "Parameter" } ,
116+ { "field" : "metric" , "type" : "nominal" , "title" : "Metric" } ,
117+ { "field" : "lead_time" , "type" : "quantitative" , "title" : "Lead Time (h)" } ,
118+ { "field" : "value" , "type" : "quantitative" , "title" : "Value" }
119+ ]
82120 } ,
83- "transform" : [
84- {
85- "filter" : { "param" : "xZoom" }
86- }
87- ]
88121 } ,
89- "resolve" : {
90- "scale" : {
91- "x" : "shared" ,
92- "y" : "independent"
93- }
94- }
95122} ;
96123
97124
@@ -102,13 +129,18 @@ function getSelectedValues(id) {
102129}
103130
104131function updateChart ( ) {
132+ const selectedRegions = getSelectedValues ( "region-select" ) ;
105133 const selectedSources = getSelectedValues ( "source-select" ) ;
106134 const selectedparams = getSelectedValues ( "param-select" ) ;
107135 const selectedMetrics = getSelectedValues ( "metric-select" ) ;
108136
109137 const newSpec = JSON . parse ( JSON . stringify ( spec ) ) ;
110138 const filters = [ ] ;
111139
140+ newSpec . title = "Verification using " + header ;
141+ if ( selectedRegions . length > 0 ) {
142+ filters . push ( { field : "region" , oneOf : selectedRegions } ) ;
143+ }
112144 if ( selectedSources . length > 0 ) {
113145 filters . push ( { field : "source" , oneOf : selectedSources } ) ;
114146 }
0 commit comments