Add interactive plots v2 page

src/plots.php

@@ -49,6 +49,9 @@ $selected_csv = isset($_GET["csv_file"]) ? $_GET["csv_file"] : reset($cleanArrs)
             ?>
         </select>
     </form>
+    
+    <h3 style="font-size: 24px; padding-top: 20px; padding-left: 20px;">Extra plots</h3>    
+    <div id="gd_spread" style="height: max(70vh, 400px); padding-bottom: 20px;"></div>
 
 
     <script>
@@ -66,6 +69,101 @@ $selected_csv = isset($_GET["csv_file"]) ? $_GET["csv_file"] : reset($cleanArrs)
             }
             );
         }
+        
+        function makeplot_spread(){
+            Plotly.d3.csv('<?echo $url_total_info;?>', (allRows)=>{
+                const {mean_spread} = parseResultsTable(allRows, <?echo reset(explode('_', $selected_csv));?>);
+                Plotly.d3.csv('<?echo $url.$selected_csv;?>', function(data){processSpread(data, "gd_spread", mean_spread)});
+            });
+        }
+        
+        function parseResultsTable(allRows, energy_point){
+            for (var i=0; i<allRows.length; i++){
+                if (allRows[i].energy_point == energy_point ){
+                    return allRows[i];
+                }
+            }
+            return null;
+        }
+        
+        function parseRow(row){
+            row['start_time'] = Date.parse(row['compton_start']);
+            row['stop_time'] = Date.parse(row['compton_stop']);
+            row['center_time'] = new Date((row['start_time'] + row['stop_time'])/2);
+            row['timedelta'] = (row['stop_time'] - row['start_time'])/2/1000; // in seconds
+            return row;
+        }
+        
+        function processSpread(data, elementId, mean_value){
+            let x = [], y = [], std_y = []
+            for (var i=0; i<data.length; i++){
+                const {center_time, spread_mean, spread_std} = parseRow(data[i]);
+                x.push(center_time);
+                y.push(spread_mean);
+                std_y.push(spread_std);
+            }
+            makeSpreadPlot(elementId, x, y, std_y, mean_value);
+        }
+        
+        function makeSpreadPlot(elementId, x, y, std_y, mean){
+            var plotDiv = document.getElementById(elementId);
+            var trace1 = {
+                x: x,
+                y: y,
+                yaxis: 'y',
+                mode: 'markers',
+                hovermode: "x",
+                error_y: {
+                    type: 'data',
+                    array: std_y,
+                    color: '#260101',
+                },
+                showlegend: false,
+                marker: {
+                    color: '#260101',
+                },
+                type: "scatter",
+            };
+            var traces = [trace1];
+            
+            var layout = {
+                title: 'Spread, MeV',
+                font: {
+                    size: 18,
+                },
+                xaxis: {
+                    title: "Time, NSK",
+                    automargin: true,
+                },
+                yaxis: {
+                    automargin: true,
+                    title: "Measured spread, MeV",
+                    hoverformat: '.2f',
+                },
+                paper_bgcolor: 'rgba(0,0,0,0)',
+                plot_bgcolor: 'rgba(0,0,0,0)',
+                autosize: true,
+            };
+            
+            if (mean){
+                layout['shapes'] = [{
+                    type: 'line',
+                    yref: 'y',
+                    xref: 'paper',
+                    x0: 0,
+                    x1: 1,
+                    y0: mean,
+                    y1: mean,
+                    line: {
+                        color: '#590A0A',
+                    },
+                }];
+            }
+                        
+            Plotly.newPlot(elementId, traces, layout, {modeBarButtonsToRemove: ['toImage'], responsive: true,});
+        }
+        
+        
         function kde(x, y, w) {
             const ts = (t) => t.getTime()/1000;
             const toDateTime = (secs) => {
@@ -149,11 +247,11 @@ $selected_csv = isset($_GET["csv_file"]) ? $_GET["csv_file"] : reset($cleanArrs)
             dict['kdey'] = b;
             //console.log(dict['kdex'], dict['kdey']);
             //oldAverage(y, dict['lum']);
-            makePlotly( x, y, std_y, dict, mean_energy, oldAverage(y, dict['lum']));
+            makePlotly( x, y, std_y, dict, mean_energy, oldAverage(y, dict['lum']), "gd");
         }
         
-        function makePlotly( x, y, std_y, dict, mean_energy, old_mean){
-            var plotDiv = document.getElementById("gd");
+        function makePlotly( x, y, std_y, dict, mean_energy, old_mean, elementId){
+            var plotDiv = document.getElementById(elementId);
             var trace1 = {
                 x: x,
                 y: y,
@@ -278,6 +376,7 @@ $selected_csv = isset($_GET["csv_file"]) ? $_GET["csv_file"] : reset($cleanArrs)
         }
         
         makeplot();
+        makeplot_spread();
         
     </script>