adding semantic ui

.gitignore

@@ -0,0 +1,116 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

bubblechart.js

@@ -0,0 +1,179 @@
+import {getData} from "./readData.js"
+am4core.ready(async function() {
+
+      $('.avatar.image')
+      .popup({
+
+        hoverable  : true,
+      })
+    ;
+
+    $('.ui.dropdown')
+      .dropdown({
+        values: false
+      })
+    ;
+
+    const locations_path="https://raw.githubusercontent.com/zepatrik/munich-corona-occupancies/location-index/data/locations.json"
+    fetch(locations_path)
+      .then(res => res.json())
+      .then(data=> {
+
+        console.log(data)
+        const dropdown_elts=Object.keys(data).map(elt => {
+          return {name: data[elt].name , value: elt}
+          });
+          console.log(dropdown_elts)
+          $('.ui.dropdown')
+          .dropdown({
+            values: dropdown_elts,
+            onChange: async function(val) {
+              console.log("Value Secected:", val)
+              if (val != "")
+              {data = await getformatedData(val);
+              chart.data = data}
+            }
+          })
+        ;
+      })
+
+
+   // $('.ui.dropdown').dropdown('setting', 'onChange', function(){
+      //console.log("Selected")
+      //data = await getformatedData();
+      //chart.data = data
+    //});
+
+
+
+
+
+
+
+
+
+    // Themes begin
+    am4core.useTheme(am4themes_animated);
+    // Themes end
+    const hours = ["12pm","1am","2am","3am","4am","5am","6am","7am","8am","9am","10am","11am","12am","1pm","2pm","3pm","4pm","5pm","6pm","7pm","8pm","9pm","10pm","11pm"]
+
+
+    // Data import get correctly formated Data
+    async function getformatedData(location){
+        const weekdays= ["Son","Mon","The","Wed","Thu","Fr","Sa"];
+        const start = new Date(new Date("10-24-2020 10:00").toLocaleString("en-us", {timeZone: "Europe/Berlin"}))
+        const end =new Date(new Date("11-01-2020 10:00").toLocaleString("en-us", {timeZone: "Europe/Berlin"}))
+        const loc=location
+
+
+        const datapoints=await getData(loc,start,end)
+        //console.log(datapoints)
+        //format Data to correct object
+        const data_percent=datapoints.map(elt=>{
+            return {x: new Date(elt.timestamp), y: elt.percent}
+        })
+
+        const data_queue=datapoints.map(elt=>{
+            return {x: new Date(elt.timestamp), y: elt.queue==0 ? 0 : elt.queue }
+        })
+
+
+        const data_bubble=data_percent.map(elt=>{
+            return {hour: hours[elt.x.getHours()] , weekday: weekdays[elt.x.getDay()], value: elt.y }
+        });
+
+        const data= []
+
+        weekdays.push(weekdays.shift())
+
+        weekdays.forEach(w => {
+
+            const data_day_filered = data_bubble.filter( elt=> elt.weekday == w )
+            hours.forEach( h=>{
+
+                const result =data_day_filered.filter(elt=> elt.hour == h)
+                //console.log(result)
+                if (result.length > 0)
+                {
+                    data.push({hour: h, weekday: w, value: result.reduce( (i,a) => i + a.value , 0)/result.length })
+                }
+
+            } )
+        } )
+
+
+        console.log(data)
+
+        return data
+        };
+
+
+
+
+    var chart = am4core.create("bubblechart", am4charts.XYChart);
+    chart.maskBullets = false;
+
+    var xAxis = chart.xAxes.push(new am4charts.CategoryAxis());
+    var yAxis = chart.yAxes.push(new am4charts.CategoryAxis());
+
+    yAxis.dataFields.category = "weekday";
+    xAxis.renderer.minGridDistance = 40;
+    xAxis.dataFields.category = "hour";
+
+    xAxis.renderer.grid.template.disabled = true;
+    yAxis.renderer.grid.template.disabled = true;
+    xAxis.renderer.axisFills.template.disabled = true;
+    yAxis.renderer.axisFills.template.disabled = true;
+    yAxis.renderer.ticks.template.disabled = true;
+    xAxis.renderer.ticks.template.disabled = true;
+
+    yAxis.renderer.inversed = true;
+
+    var series = chart.series.push(new am4charts.ColumnSeries());
+    series.dataFields.categoryY = "weekday";
+
+    series.dataFields.categoryX = "hour";
+    series.dataFields.value = "value";
+    series.columns.template.disabled = true;
+    series.sequencedInterpolation = true;
+    //series.defaultState.transitionDuration = 3000;
+
+    var bullet = series.bullets.push(new am4core.Circle());
+    bullet.tooltipText = "{weekday}, {hour}: {value.workingValue.formatNumber('#.')}%";
+    bullet.strokeWidth = 3;
+    bullet.stroke = am4core.color("#ffffff");
+    bullet.strokeOpacity = 0;
+
+    bullet.adapter.add("tooltipY", function(tooltipY, target) {
+      return -target.radius + 1;
+    })
+
+    series.heatRules.push({
+      property: "radius",
+      target: bullet,
+      min: 2,
+      max: 40
+    });
+
+    series.heatRules.push({
+        property: "fill",
+        target: bullet,
+        max: am4core.color("#D2222D"),
+        maxValue: 99,
+        minValue:80,
+        min: am4core.color("#238823"),
+
+    })
+
+    bullet.hiddenState.properties.scale = 0.01;
+    bullet.hiddenState.properties.opacity = 1;
+
+    var hoverState = bullet.states.create("hover");
+    hoverState.properties.strokeOpacity = 1;
+
+
+
+
+    //console.log(data_percent)
+    //console.log(data_queue)
+    });

client.js

@@ -1,14 +1,15 @@
 import {getData} from "./readData.js"
+import LineChart from 'metrics-graphics'
 
 const canvas = document.getElementById('Occ').getContext("2d");
 
 
 chartIt()
 
 async function getformatedData(){
-    const start = new Date(new Date("10-27-2020 10:00").toLocaleString("en-us", {timeZone: "Europe/Berlin"}))
-    const end = new Date()
-    const loc="s_dante"
+    const start = new Date(new Date("10-30-2020 10:00").toLocaleString("en-us", {timeZone: "Europe/Berlin"}))
+    const end =new Date(new Date("11-01-2020 10:00").toLocaleString("en-us", {timeZone: "Europe/Berlin"}))
+    const loc="b_ei"
     const datapoints=await getData(loc,start,end)
 
     //format Data to correct object
@@ -29,7 +30,7 @@ async function chartIt() {
     const [data_percent,data_queue] = await getformatedData();
     console.log(data_percent)
     console.log(data_queue)
-
+    
     const data = {
         //labels: [new Date("2015-3-15 13:3").toLocaleString(), new Date("2015-3-25 13:2").toLocaleString(), new Date("2015-4-25 14:12").toLocaleString()],
         datasets: [
@@ -106,4 +107,16 @@ async function chartIt() {
         }
     });
     return chart  
-}
+}
+
+
+
+new LineChart({
+  data, // some array of data objects
+  width: 600,
+  height: 200,
+  target: '#chart',
+  area: true,
+  xAccessor: 'date',
+  yAccessor: 'value'
+})

d3_script.js

@@ -0,0 +1,33 @@
+import {getData} from "./readData.js"
+
+async function loadPlot(){ 
+
+    const start = new Date(new Date("10-27-2020 10:00").toLocaleString("en-us", {timeZone: "Europe/Berlin"}))
+    const end = new Date()
+    const loc="bwo"
+    const datapoints=await getData(loc,start,end)
+
+
+    var margin = { top: 30, right: 10, bottom: 30, left: 300 },
+        width = 700 - margin.left - margin.right,
+        height = 600 - margin.top - margin.bottom;
+
+    // Percent two area charts can overlap
+    var overlap = 0.6;
+
+    var formatTime = d3.timeFormat('%I %p');
+
+    var svg = d3.select('body').append('svg')
+            .attr('width', width + margin.left + margin.right)
+            .attr('height', height + margin.top + margin.bottom)
+        .append('g')
+            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+
+    const area = d3.area()
+        .curve(d3.curveLinear)
+        .x(d => x(d.date))
+        .y0(y(0))
+        .y1(d => y(d.value))
+
+}