Updates

dwjohnston · Oct 17, 2021 · d23a212 · d23a212
1 parent 80a2bda
commit d23a212
Show file tree

Hide file tree

Showing 9 changed files with 3,180 additions and 115 deletions.
diff --git a/README b/README
diff --git a/README.md b/README.md
@@ -22,3 +22,25 @@ yarn lint
 
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
+
+
+
+
+## Difficulty using APIS
+
+The https://www.developer.vic.gov.au/ website is incredibly frustrating to use. It takes 20 seconds to load each page. 
+
+
+https://www.developer.vic.gov.au/index.php?option=com_apiportal&view=apitester&usage=api&tab=tests&apiName=Popular+Baby+Names+Victoria+API&apiId=9eebc13b-f4fa-40ab-a9e7-8429da6f4e90&managerId=1&type=rest&apiVersion=1.0.0&menuId=153&renderTool=1#!/v1.0
+
+Note this page takes about 20 seconds to load. 
+
+
+While the API gives me the URI - it doesn't me the URL and that ends up being hard to find. 
+
+
+For the popular baby names API - I couldn't see a mechanism for allowing requests from origin - requests from my browser responded with 403. (Requests from postman were fine). 
+
+So the only way to use this would be to set up a proxy to make the requests on the browsers behalf. 
+
+
diff --git a/package.json b/package.json
@@ -9,9 +9,14 @@
   },
   "dependencies": {
     "@dpc-sdp/ripple-button": "^1.25.0-alpha.0",
+    "@dpc-sdp/ripple-layout": "^1.24.4",
+    "@dpc-sdp/ripple-markup": "^1.24.4",
+    "@dpc-sdp/ripple-site-footer": "^1.24.4",
+    "@dpc-sdp/ripple-site-header": "^1.24.4",
     "core-js": "^3.6.5",
     "sass": "^1.43.2",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vue-plotly": "^1.1.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -36,7 +41,9 @@
     "parserOptions": {
       "parser": "babel-eslint"
     },
-    "rules": {}
+    "rules": {
+      "no-unused-vars": "warn"
+    }
   },
   "browserslist": [
     "> 1%",

diff --git a/public/index.html b/public/index.html
@@ -5,6 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <script src="https://cdn.plot.ly/plotly-2.4.2.min.js"></script>
+
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>

diff --git a/src/App.vue b/src/App.vue
@@ -1,23 +1,25 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-
-
-    <rpl-button theme="primary">foo bar</rpl-button>
+    <rpl-header/>
+    <my-chart />
+    <rpl-footer/>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-import RplButton from '@dpc-sdp/ripple-button';
+
+import MyChart from './components/MyChart.vue';
+import RplHeader from "@dpc-sdp/ripple-site-header"; 
+import RplFooter from "@dpc-sdp/ripple-site-footer"; 
+
 
 
 export default {
   name: 'App',
   components: {
-    HelloWorld, 
-    RplButton,
+    MyChart,
+    RplHeader, 
+    RplFooter,
   }
 }
 </script>

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/components/MyChart.vue b/src/components/MyChart.vue
@@ -0,0 +1,63 @@
+<template>
+  <div>
+
+
+    <h3>{{title}}</h3>
+    <p>{{subtitle}}</p>
+
+    <Plotly :data="data" :layout="layout" :display-mode-bar="false"></Plotly>
+  </div>
+</template>
+
+<script>
+import { Plotly } from "vue-plotly";
+
+export default {
+  name: "MyChart",
+  components: { Plotly },
+
+  
+
+  data() {
+
+
+    const rawData = this.$root.$data.chartData; 
+    rawData.sort((a,b) => {
+      return a.year - b.year; 
+    }); 
+
+    const x = rawData.map((v) => v.year);
+
+    const y = rawData.map((v) =>v.count);
+
+
+    return {
+
+      title: "Number of babies given the name 'David' in Victoria" , 
+      subtitle: "(When the name David was in the 100 most popular names)",
+
+      data: [
+        {
+          x,y,
+          type: "bar",
+        },
+      ],
+
+
+      layout: {
+        title: "", // Leave the title blank because we'll provide our own
+         xaxis: {
+           title: "Year"
+         }, 
+         yaxis: {
+           title: "Count"
+         },
+      },
+    };
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>
diff --git a/src/main.js b/src/main.js
@@ -2,6 +2,73 @@ import Vue from 'vue'
 import App from './App.vue'
 
 import RplGlobal from '@dpc-sdp/ripple-global'
+import {Plotly} from "vue-plotly";
+
+
+const state = {
+  data: [], 
+  setData: function(data) {
+    console.log(this);
+    this.data = data; 
+  }
+}
+
+async function fetchState() {
+
+
+  // Unfortunately, this doesn't work. 
+  // The APIs appear to not support direct requests from browsers :(
+
+  // const headers = new Headers(); 
+  // headers.append('apikey', '6c4f89bf-120a-466e-aaf7-77adeeaba9e8'); 
+  // headers.append('Content-Type', 'application/json'); 
+  // headers.append('Accept', 'application/json'); 
+
+  // const result = await fetch('https://wovg-community.gateway.prod.api.vic.gov.au/bdm/names/v1.0/popular-baby-names?name=david', {
+  //   headers
+  // }); 
+
+
+  // Instead I'll just pretend I'm returning data here: 
+
+    const data = [
+      {
+          "position": 91,
+          "name": "David",
+          "count": 76,
+          "sex": "MALE",
+          "year": 2013
+      },
+      {
+          "position": 91,
+          "name": "David",
+          "count": 83,
+          "sex": "MALE",
+          "year": 2008
+      },
+      {
+          "position": 94,
+          "name": "David",
+          "count": 74,
+          "sex": "MALE",
+          "year": 2011
+      },
+      {
+          "position": 100,
+          "name": "David",
+          "count": 70,
+          "sex": "MALE",
+          "year": 2009
+      }
+  ]; 
+
+  state.setData(data);
+}
+
+
+fetchState();
+
+
 
 // Install Ripple Global plugin
 const rplOptions = {
@@ -11,10 +78,15 @@ const rplOptions = {
 }
 Vue.use(RplGlobal, rplOptions); 
 
+Vue.use(Plotly);
+
 Vue.config.productionTip = false
 
 new Vue({
   render: h => h(App),
+  data: {
+    chartData: state.data,
+  }
 }).$mount('#app')