From 09360d92bfaff096dadfd63b10976cd1d50ebfc7 Mon Sep 17 00:00:00 2001
From: Yulan Lin <yulan.lin.2014@gmail.com>
Date: Mon, 10 Feb 2020 09:05:15 -0800
Subject: [PATCH] added files for selector

---
 filter-codelab/index.css     |  3 ++
 filter-codelab/index.js      | 80 ++++++++++++++++++++++++++++++++++++
 filter-codelab/index.json    | 26 ++++++++++++
 filter-codelab/manifest.json | 24 +++++++++++
 4 files changed, 133 insertions(+)
 create mode 100644 filter-codelab/index.css
 create mode 100644 filter-codelab/index.js
 create mode 100644 filter-codelab/index.json
 create mode 100644 filter-codelab/manifest.json

diff --git a/filter-codelab/index.css b/filter-codelab/index.css
new file mode 100644
index 0000000..af2ef88
--- /dev/null
+++ b/filter-codelab/index.css
@@ -0,0 +1,3 @@
+select {
+    width: 100%;
+}
\ No newline at end of file
diff --git a/filter-codelab/index.js b/filter-codelab/index.js
new file mode 100644
index 0000000..848b2a4
--- /dev/null
+++ b/filter-codelab/index.js
@@ -0,0 +1,80 @@
+const dscc = require("@google/dscc");
+
+// a global to keep track of state 
+const state = {
+  data: undefined,
+  height: undefined,
+  width: undefined,
+  selected: undefined
+};
+
+// removes the selector if it already exists
+const removeSelect = () => {
+  let selector = document.getElementsByTagName("select");
+  if (selector.length > 0) {
+    document.body.removeChild(selector[0]);
+  }
+};
+
+// what to do when user makes a selection
+const click = (d, data) => {
+  const FILTER = dscc.InteractionType.FILTER;
+  const actionId = "onClick";
+  const dimId = data.fields.dimensions[0].id;
+
+  const filterData = {
+    concepts: [dimId],
+    values: [[d]]
+  };
+  dscc.sendInteraction(actionId, FILTER, filterData);
+};
+
+// check what is difference in the message
+const whatChanged = data => {
+  const changed = {
+    data: false,
+    size: false
+  };
+  const vals = data.tables.DEFAULT.rows.map(d => d[0]);
+  if (JSON.stringify(vals) !== JSON.stringify(state.data)) {
+    changed.data = true;
+  }
+  if (dscc.getHeight() !== state.height || dscc.getWidth() !== state.width) {
+    changed.size = true;
+  }
+  return changed;
+};
+
+// make the selector
+const makeSelect = data => {
+  var vals = data.tables.DEFAULT.rows.map(d => d[0]);
+  let selector = document.createElement("select");
+  for (let dimVal of vals) {
+    const option = document.createElement("option");
+    option.setAttribute("value", dimVal);
+    const optionText = document.createTextNode(dimVal);
+    option.appendChild(optionText);
+    selector.appendChild(option);
+  }
+  selector.addEventListener("change", function() {
+    click(this.value, data);
+  });
+
+  document.body.appendChild(selector);
+  state.data = vals;
+  state.width = dscc.getWidth();
+  state.height = dscc.getHeight();
+};
+
+// run every time a new message is sent
+const drawViz = data => {
+  let changed = whatChanged(data);
+
+  // if data or height changed, redraw the selector
+  if (changed.data || changed.size) {
+    removeSelect();
+    makeSelect(data);
+  }
+};
+
+dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
diff --git a/filter-codelab/index.json b/filter-codelab/index.json
new file mode 100644
index 0000000..3a7b618
--- /dev/null
+++ b/filter-codelab/index.json
@@ -0,0 +1,26 @@
+{
+  "data": [
+    {
+      "id": "concepts",
+      "label": "Concepts",
+      "elements": [
+        {
+          "id": "dimensions",
+          "label": "Dimensions",
+          "type": "DIMENSION",
+          "options": {
+            "min": 1,
+            "max": 1
+          }
+        }  
+      ]
+    }
+  ],
+  "style": [ ],
+  "interactions": [
+    {
+      "id": "onClick",
+      "supportedActions": ["FILTER"]
+    }
+  ]  
+}
\ No newline at end of file
diff --git a/filter-codelab/manifest.json b/filter-codelab/manifest.json
new file mode 100644
index 0000000..deee4de
--- /dev/null
+++ b/filter-codelab/manifest.json
@@ -0,0 +1,24 @@
+{
+  "name": "My Visualizations",
+  "organization": "MyOrg",
+  "description": "My first visualization package.",
+  "logoUrl": "https://logo",
+  "organizationUrl": "https://url",
+  "supportUrl": "https://url",
+  "privacyPolicyUrl": "https://url",
+  "termsOfServiceUrl": "https://url",
+  "packageUrl": "https://url",
+  "devMode": "DEVMODE_BOOL",
+  "components": [
+    {
+      "name": "table",
+      "description": "Simple JavaScript Table",
+      "iconUrl": "https://url",
+      "resource": {
+        "js": "YOUR_GCS_BUCKET/index.js",
+        "config": "YOUR_GCS_BUCKET/index.json",
+        "css": "YOUR_GCS_BUCKET/index.css"
+      }
+    }
+  ]
+}