From 212ed4d36413df500f376683938036b05e8d172c Mon Sep 17 00:00:00 2001
From: Cole Gentry <peapod2007@gmail.com>
Date: Sun, 19 Dec 2021 11:21:07 -0500
Subject: [PATCH] Reworks the needle page with session saving and new look and
 feel

Signed-off-by: Cole Gentry <peapod2007@gmail.com>
---
 components/NeedleConfigurator.vue | 250 ++++++++++++++++++------------
 package-lock.json                 |  91 ++++++-----
 package.json                      |  10 +-
 plugins/highcharts-vue.js         |  37 +++++
 static/data/needles.json          |  36 ++---
 store/index.js                    |  13 ++
 6 files changed, 278 insertions(+), 159 deletions(-)
 create mode 100644 store/index.js

diff --git a/components/NeedleConfigurator.vue b/components/NeedleConfigurator.vue
index 79a68a88..7ad59579 100644
--- a/components/NeedleConfigurator.vue
+++ b/components/NeedleConfigurator.vue
@@ -1,122 +1,126 @@
 <template>
   <div class="columns is-multiline configurator-component">
-    <div class="column is-3">
-      <nav class="panel">
-        <p class="panel-heading">Choose your Needles</p>
-        <a
-          v-for="(value, name) in selectValues"
-          :key="name"
-          class="panel-block is-fullwidth"
-        >
-          <b-button
-            class="remove-button"
-            :aria-label="
-              'Click here to remove the ' + selectValues[name] + ' needle'
-            "
-            type="is-light"
-            icon-pack="fas"
-            icon-right="minus"
-            :disabled="selectValues.length === 1"
-            @click="removeArrayItem(selectValues[name])"
-          />
-          <b-field class="is-fullwidth" expanded>
-            <b-select
-              v-model="selectValues[name]"
-              expanded
-              placeholder="Select a Needle"
-              @input="updateArrayItem(value, selectValues[name])"
-            >
-              {{ selectValues[name] }}
-              <option
-                v-for="needle in allNeedles"
-                :key="needle.name"
-                :value="needle"
-              >
-                {{ needle.name }}
-              </option>
-            </b-select>
-          </b-field>
-        </a>
-        <div class="panel-block">
+    <div class="column is-8 is-offset-2 card">
+      <div class="card-content">
+        <h3 class="fancy-font-bold is-size-4 pb-3">Add a Needle To Compare</h3>
+        <p class="pb-3">
+          Adding a needle is as simple as starting to type the name of the
+          needle in the box below. You can also use the dropdown menu to scroll
+          through the list of availble options. Unsure of what the graph values
+          mean? Check out
+          <a
+            class="has-text-weight-bold"
+            href="#"
+            @click="isComponentModalActive = true"
+            >this helpful diagram</a
+          >
+          to learn more.
+        </p>
+        <b-field class="is-fullwidth" expanded>
+          <b-autocomplete
+            v-model="addNeedleValue"
+            expanded
+            :data="filteredDataObj"
+            :open-on-focus="true"
+            placeholder="Needle Name"
+            field="name"
+            @select="(option) => (addNeedleSelection = option)"
+          >
+          </b-autocomplete>
           <b-button
             type="is-primary"
             icon-pack="fas"
             icon-left="plus"
-            expanded
             aria-label="Click here to add another needle with a generic value"
-            :disabled="selectValues.length === 10"
+            :disabled="selectValues.length === 10 || !addNeedleSelection"
             @click="addArrayItem()"
+          ></b-button>
+          <b-message v-if="existsError" type="is-warning" class="my-3">
+            This needle already exists on the chart.
+          </b-message>
+        </b-field>
+        <b-field grouped group-multiline>
+          <div
+            v-for="(value, needle) in selectValues"
+            :key="needle"
+            class="control"
           >
-            Add Needle
-          </b-button>
-        </div>
-        <div class="panel-block">
-          <b-button
-            type="is-secondary"
-            icon-pack="fas"
-            icon-left="info"
-            expanded
-            @click="isComponentModalActive = true"
-          >
-            What do these values mean?
-          </b-button>
-
-          <b-modal
-            v-model="isComponentModalActive"
-            has-modal-card
-            trap-focus
-            :destroy-on-hide="true"
-            aria-role="dialog"
-            aria-label="Example Modal"
-            aria-modal
-          >
-            <div class="modal-card">
-              <header class="modal-card-head">
-                <h1 class="modal-card-title">Diagram of Needle Measurements</h1>
-                <button
-                  type="button"
-                  class="delete"
-                  @click="isComponentModalActive = false"
-                />
-              </header>
-              <section class="modal-card-body">
-                <img
-                  class="diagram"
-                  src="/diagram.jpg"
-                  alt="Diagram of Needle Measurements"
-                />
-              </section>
-              <footer class="modal-card-foot">
-                <b-button
-                  label="Close"
-                  @click="isComponentModalActive = false"
-                />
-              </footer>
-            </div>
-          </b-modal>
-        </div>
-      </nav>
+            <b-tag
+              type="is-primary is-light"
+              size="is-medium"
+              attached
+              closable
+              :disabled="selectValues.length === 1"
+              :aria-close-label="
+                'Click here to remove the ' + selectValues[needle] + ' needle'
+              "
+              @close="removeArrayItem(selectValues[needle])"
+            >
+              {{ selectValues[needle].name }}
+            </b-tag>
+          </div>
+        </b-field>
+      </div>
     </div>
-    <div class="column is-9">
+    <div class="column is-12">
       <div class="card">
         <highcharts ref="needlesChart" :options="mapOptions"></highcharts>
       </div>
     </div>
+    <b-modal
+      v-model="isComponentModalActive"
+      has-modal-card
+      trap-focus
+      :destroy-on-hide="true"
+      aria-role="dialog"
+      aria-label="Example Modal"
+      aria-modal
+    >
+      <div class="modal-card">
+        <header class="modal-card-head">
+          <h1 class="modal-card-title">Diagram of Needle Measurements</h1>
+          <button
+            type="button"
+            class="delete"
+            @click="isComponentModalActive = false"
+          />
+        </header>
+        <section class="modal-card-body">
+          <img
+            class="diagram"
+            src="/diagram.jpg"
+            alt="Diagram of Needle Measurements"
+          />
+        </section>
+        <footer class="modal-card-foot">
+          <b-button label="Close" @click="isComponentModalActive = false" />
+        </footer>
+      </div>
+    </b-modal>
   </div>
 </template>
 <script>
   import Needles from '~/static/data/needles.json';
   import StarterNeedles from '~/static/data/default-needles.json';
-
   export default {
     data() {
       return {
+        Needles,
+        existsError: false,
+        addNeedleValue: '',
+        addNeedleSelection: null,
         isComponentModalActive: false,
-        allNeedles: Needles,
-        selectValues: [...StarterNeedles],
+        selectValues: undefined,
         mapOptions: {
           chart: { zoomType: 'x' },
           title: { text: 'Needle Comparison Chart' },
+          exporting: {
+            buttons: {
+              contextButton: {
+                symbol: 'download',
+              },
+            },
+          },
           subtitle: {
             text: 'Source: <a target="_blank" href="http://www.mintylamb.co.uk/suneedle/">http://www.mintylamb.co.uk/suneedle/</a>',
           },
@@ -158,18 +162,50 @@
         },
       };
     },
+    computed: {
+      filteredDataObj() {
+        return this.Needles.filter((needle) => {
+          return (
+            needle.name
+              .toString()
+              .toLowerCase()
+              .includes(this.addNeedleValue.toLowerCase()) >= 0
+          );
+        });
+      },
+    },
+    created() {
+      this.initializeNeedles();
+    },
     methods: {
+      initializeNeedles() {
+        // Check to see if there are any pre-selected needles in the store
+        const cachedNeedles = this.$store.getters.needles;
+        if (cachedNeedles) {
+          this.selectValues = [...cachedNeedles];
+        } else {
+          this.selectValues = [...StarterNeedles];
+          this.$store.commit('updateNeedles', this.selectValues);
+        }
+      },
       updateArrayItem() {
         // When someone changes a needle value, update the chart
         this.mapOptions.series = this.selectValues;
+        this.$store.commit('updateNeedles', this.selectValues);
       },
       addArrayItem() {
-        // Pick out a random needle from all the needles
-        const rand =
-          this.allNeedles[Math.floor(Math.random() * this.allNeedles.length)];
-        // Update the needle values which automatically triggers a redraw
-        StarterNeedles.push(rand);
-        this.selectValues.push(rand);
+        this.existsError = this.selectValues.some(
+          (obj) => obj.name === this.addNeedleSelection.name
+        );
+        if (this.existsError) {
+          setTimeout(() => {
+            this.existsError = false;
+          }, 5000);
+        } else {
+          StarterNeedles.push(this.addNeedleSelection);
+          this.selectValues.push(this.addNeedleSelection);
+          this.$store.commit('updateNeedles', this.selectValues);
+        }
       },
       removeArrayItem(currentItem) {
         // Find the index of the item you wanna remove
@@ -177,6 +213,22 @@
         // Remove the specific needle value which automatically triggers a redraw
         StarterNeedles.splice(itemIndex, 1);
         this.selectValues.splice(itemIndex, 1);
+        this.$store.commit('updateNeedles', this.selectValues);
+      },
+      warning() {
+        this.$buefy.snackbar.open({
+          message: 'This',
+          type: 'is-warning',
+          position: 'is-top',
+          actionText: 'Retry',
+          indefinite: true,
+          onAction: () => {
+            this.$buefy.toast.open({
+              message: 'Action pressed',
+              queue: false,
+            });
+          },
+        });
       },
     },
   };
diff --git a/package-lock.json b/package-lock.json
index 5e0ec1e3..b0065144 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,11 +16,11 @@
         "@nuxtjs/sitemap": "^2.4.0",
         "@octokit/request": "^5.6.2",
         "buefy": "^0.9.13",
-        "core-js": "^3.19.3",
+        "core-js": "^3.20.0",
         "fuse.js": "^6.4.6",
         "highcharts": "^9.3.2",
         "highcharts-vue": "^1.4.0",
-        "luxon": "^2.1.1",
+        "luxon": "^2.2.0",
         "nuxt": "^2.15.8",
         "redirect-ssl": "^3.0.0",
         "vue-cookie-law": "^1.13.3",
@@ -30,11 +30,11 @@
         "vue-window-size": "0.6.2"
       },
       "devDependencies": {
-        "@babel/eslint-parser": "^7.16.3",
+        "@babel/eslint-parser": "^7.16.5",
         "@nuxtjs/eslint-config": "8.0.0",
         "@nuxtjs/eslint-module": "3.0.2",
         "decompress": "^4.2.1",
-        "eslint": "8.4.1",
+        "eslint": "8.5.0",
         "eslint-config-prettier": "8.3.0",
         "eslint-plugin-nuxt": "3.1.0",
         "eslint-plugin-prettier": "4.0.0",
@@ -42,7 +42,7 @@
         "nodemon": "^2.0.15",
         "nuxt-compress": "^5.0.0",
         "prettier": "2.5.1",
-        "sass": "^1.44.0",
+        "sass": "^1.45.0",
         "sass-loader": "^10.1.1",
         "webp-loader": "^0.6.0"
       },
@@ -99,9 +99,9 @@
       }
     },
     "node_modules/@babel/eslint-parser": {
-      "version": "7.16.3",
-      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.16.3.tgz",
-      "integrity": "sha512-iB4ElZT0jAt7PKVaeVulOECdGe6UnmA/O0P9jlF5g5GBOwDVbna8AXhHRu4s27xQf6OkveyA8iTDv1jHdDejgQ==",
+      "version": "7.16.5",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.16.5.tgz",
+      "integrity": "sha512-mUqYa46lgWqHKQ33Q6LNCGp/wPR3eqOYTUixHFsfrSQqRxH0+WOzca75iEjFr5RDGH1dDz622LaHhLOzOuQRUA==",
       "dev": true,
       "dependencies": {
         "eslint-scope": "^5.1.1",
@@ -6268,9 +6268,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.19.3",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.19.3.tgz",
-      "integrity": "sha512-LeLBMgEGSsG7giquSzvgBrTS7V5UL6ks3eQlUSbN8dJStlLFiRzUm5iqsRyzUB8carhfKjkJ2vzKqE6z1Vga9g==",
+      "version": "3.20.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.0.tgz",
+      "integrity": "sha512-KjbKU7UEfg4YPpskMtMXPhUKn7m/1OdTHTVjy09ScR2LVaoUXe8Jh0UdvN2EKUR6iKTJph52SJP95mAB0MnVLQ==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -7591,9 +7591,9 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.4.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.4.1.tgz",
-      "integrity": "sha512-TxU/p7LB1KxQ6+7aztTnO7K0i+h0tDi81YRY9VzB6Id71kNz+fFYnf5HD5UOQmxkzcoa0TlVZf9dpMtUv0GpWg==",
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.5.0.tgz",
+      "integrity": "sha512-tVGSkgNbOfiHyVte8bCM8OmX+xG9PzVG/B4UCF60zx7j61WIVY/AqJECDgpLD4DbbESD0e174gOg3ZlrX15GDg==",
       "dev": true,
       "dependencies": {
         "@eslint/eslintrc": "^1.0.5",
@@ -11704,9 +11704,9 @@
       }
     },
     "node_modules/luxon": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.1.1.tgz",
-      "integrity": "sha512-6VQVNw7+kQu3hL1ZH5GyOhnk8uZm21xS7XJ/6vDZaFNcb62dpFDKcH8TI5NkoZOdMRxr7af7aYGrJlE/Wv0i1w==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.2.0.tgz",
+      "integrity": "sha512-LwmknessH4jVIseCsizUgveIHwlLv/RQZWC2uDSMfGJs7w8faPUi2JFxfyfMcTPrpNbChTem3Uz6IKRtn+LcIA==",
       "engines": {
         "node": ">=12"
       }
@@ -15517,13 +15517,14 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sass": {
-      "version": "1.44.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.44.0.tgz",
-      "integrity": "sha512-0hLREbHFXGQqls/K8X+koeP+ogFRPF4ZqetVB19b7Cst9Er8cOR0rc6RU7MaI4W1JmUShd1BPgPoeqmmgMMYFw==",
+      "version": "1.45.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.45.0.tgz",
+      "integrity": "sha512-ONy5bjppoohtNkFJRqdz1gscXamMzN3wQy1YH9qO2FiNpgjLhpz/IPRGg0PpCjyz/pWfCOaNEaiEGCcjOFAjqw==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
-        "immutable": "^4.0.0"
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
       },
       "bin": {
         "sass": "sass.js"
@@ -16132,6 +16133,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz",
+      "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-resolve": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
@@ -19840,9 +19850,9 @@
       }
     },
     "@babel/eslint-parser": {
-      "version": "7.16.3",
-      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.16.3.tgz",
-      "integrity": "sha512-iB4ElZT0jAt7PKVaeVulOECdGe6UnmA/O0P9jlF5g5GBOwDVbna8AXhHRu4s27xQf6OkveyA8iTDv1jHdDejgQ==",
+      "version": "7.16.5",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.16.5.tgz",
+      "integrity": "sha512-mUqYa46lgWqHKQ33Q6LNCGp/wPR3eqOYTUixHFsfrSQqRxH0+WOzca75iEjFr5RDGH1dDz622LaHhLOzOuQRUA==",
       "dev": true,
       "requires": {
         "eslint-scope": "^5.1.1",
@@ -24561,9 +24571,9 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
     },
     "core-js": {
-      "version": "3.19.3",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.19.3.tgz",
-      "integrity": "sha512-LeLBMgEGSsG7giquSzvgBrTS7V5UL6ks3eQlUSbN8dJStlLFiRzUm5iqsRyzUB8carhfKjkJ2vzKqE6z1Vga9g=="
+      "version": "3.20.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.0.tgz",
+      "integrity": "sha512-KjbKU7UEfg4YPpskMtMXPhUKn7m/1OdTHTVjy09ScR2LVaoUXe8Jh0UdvN2EKUR6iKTJph52SJP95mAB0MnVLQ=="
     },
     "core-js-compat": {
       "version": "3.19.0",
@@ -25602,9 +25612,9 @@
       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "eslint": {
-      "version": "8.4.1",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.4.1.tgz",
-      "integrity": "sha512-TxU/p7LB1KxQ6+7aztTnO7K0i+h0tDi81YRY9VzB6Id71kNz+fFYnf5HD5UOQmxkzcoa0TlVZf9dpMtUv0GpWg==",
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.5.0.tgz",
+      "integrity": "sha512-tVGSkgNbOfiHyVte8bCM8OmX+xG9PzVG/B4UCF60zx7j61WIVY/AqJECDgpLD4DbbESD0e174gOg3ZlrX15GDg==",
       "dev": true,
       "requires": {
         "@eslint/eslintrc": "^1.0.5",
@@ -28686,9 +28696,9 @@
       }
     },
     "luxon": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.1.1.tgz",
-      "integrity": "sha512-6VQVNw7+kQu3hL1ZH5GyOhnk8uZm21xS7XJ/6vDZaFNcb62dpFDKcH8TI5NkoZOdMRxr7af7aYGrJlE/Wv0i1w=="
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-2.2.0.tgz",
+      "integrity": "sha512-LwmknessH4jVIseCsizUgveIHwlLv/RQZWC2uDSMfGJs7w8faPUi2JFxfyfMcTPrpNbChTem3Uz6IKRtn+LcIA=="
     },
     "make-dir": {
       "version": "1.3.0",
@@ -31723,13 +31733,14 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "sass": {
-      "version": "1.44.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.44.0.tgz",
-      "integrity": "sha512-0hLREbHFXGQqls/K8X+koeP+ogFRPF4ZqetVB19b7Cst9Er8cOR0rc6RU7MaI4W1JmUShd1BPgPoeqmmgMMYFw==",
+      "version": "1.45.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.45.0.tgz",
+      "integrity": "sha512-ONy5bjppoohtNkFJRqdz1gscXamMzN3wQy1YH9qO2FiNpgjLhpz/IPRGg0PpCjyz/pWfCOaNEaiEGCcjOFAjqw==",
       "dev": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",
-        "immutable": "^4.0.0"
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
       }
     },
     "sass-loader": {
@@ -32203,6 +32214,12 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
     },
+    "source-map-js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz",
+      "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==",
+      "dev": true
+    },
     "source-map-resolve": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
diff --git a/package.json b/package.json
index 7730db6c..c976a21f 100644
--- a/package.json
+++ b/package.json
@@ -39,11 +39,11 @@
     "@nuxtjs/sitemap": "^2.4.0",
     "@octokit/request": "^5.6.2",
     "buefy": "^0.9.13",
-    "core-js": "^3.19.3",
+    "core-js": "^3.20.0",
     "fuse.js": "^6.4.6",
     "highcharts": "^9.3.2",
     "highcharts-vue": "^1.4.0",
-    "luxon": "^2.1.1",
+    "luxon": "^2.2.0",
     "nuxt": "^2.15.8",
     "redirect-ssl": "^3.0.0",
     "vue-cookie-law": "^1.13.3",
@@ -53,11 +53,11 @@
     "vue-window-size": "0.6.2"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.16.3",
+    "@babel/eslint-parser": "^7.16.5",
     "@nuxtjs/eslint-config": "8.0.0",
     "@nuxtjs/eslint-module": "3.0.2",
     "decompress": "^4.2.1",
-    "eslint": "8.4.1",
+    "eslint": "8.5.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-nuxt": "3.1.0",
     "eslint-plugin-prettier": "4.0.0",
@@ -65,7 +65,7 @@
     "nodemon": "^2.0.15",
     "nuxt-compress": "^5.0.0",
     "prettier": "2.5.1",
-    "sass": "^1.44.0",
+    "sass": "^1.45.0",
     "sass-loader": "^10.1.1",
     "webp-loader": "^0.6.0"
   }
diff --git a/plugins/highcharts-vue.js b/plugins/highcharts-vue.js
index 427608b6..0a3b5c2c 100644
--- a/plugins/highcharts-vue.js
+++ b/plugins/highcharts-vue.js
@@ -1,6 +1,43 @@
 import Vue from 'vue';
 import Highcharts from 'highcharts';
+import exportingInit from 'highcharts/modules/exporting';
 import HighchartsVue, { Chart } from 'highcharts-vue';
 
+exportingInit(Highcharts);
+
+// Create the download button for highcharts
+Highcharts.SVGRenderer.prototype.symbols.download = (x, y, w, h) => [
+  // Arrow stem
+  'M',
+  x + w * 0.5,
+  y,
+  'L',
+  x + w * 0.5,
+  y + h * 0.7,
+  // Arrow head
+  'M',
+  x + w * 0.3,
+  y + h * 0.5,
+  'L',
+  x + w * 0.5,
+  y + h * 0.7,
+  'L',
+  x + w * 0.7,
+  y + h * 0.5,
+  // Box
+  'M',
+  x,
+  y + h * 0.9,
+  'L',
+  x,
+  y + h,
+  'L',
+  x + w,
+  y + h,
+  'L',
+  x + w,
+  y + h * 0.9,
+];
+
 Vue.use(HighchartsVue, { highcharts: Highcharts });
 Vue.component(Chart);
diff --git a/static/data/needles.json b/static/data/needles.json
index 454fa075..5f346203 100644
--- a/static/data/needles.json
+++ b/static/data/needles.json
@@ -1,6 +1,6 @@
 [
   {
-    "name": 1,
+    "name": "1",
     "size": 0.09,
     "data": [
       2.261, 2.159, 2.068, 1.994, 1.956, 1.918, 1.88, 1.842, 1.803, 1.765,
@@ -8,7 +8,7 @@
     ]
   },
   {
-    "name": 2,
+    "name": "2",
     "size": 0.09,
     "data": [
       2.261, 2.159, 2.068, 1.994, 1.948, 1.902, 1.859, 1.814, 1.768, 1.722,
@@ -16,7 +16,7 @@
     ]
   },
   {
-    "name": 3,
+    "name": "3",
     "size": 0.09,
     "data": [
       2.261, 2.159, 2.068, 1.994, 1.943, 1.89, 1.836, 1.786, 1.735, 1.679,
@@ -24,7 +24,7 @@
     ]
   },
   {
-    "name": 4,
+    "name": "4",
     "size": 0.09,
     "data": [
       2.261, 2.159, 2.068, 1.994, 1.933, 1.872, 1.814, 1.758, 1.697, 1.638,
@@ -32,7 +32,7 @@
     ]
   },
   {
-    "name": 5,
+    "name": "5",
     "size": 0.09,
     "data": [
       2.261, 2.159, 2.068, 1.994, 1.925, 1.862, 1.791, 1.727, 1.659, 1.593,
@@ -40,7 +40,7 @@
     ]
   },
   {
-    "name": 6,
+    "name": "6",
     "size": 0.09,
     "data": [
       2.261, 2.159, 2.068, 1.994, 1.918, 1.842, 1.768, 1.692, 1.615, 1.539,
@@ -48,7 +48,7 @@
     ]
   },
   {
-    "name": 7,
+    "name": "7",
     "size": 0.09,
     "data": [
       2.261, 2.159, 2.068, 1.994, 1.918, 1.829, 1.742, 1.651, 1.575, 1.491,
@@ -56,7 +56,7 @@
     ]
   },
   {
-    "name": 20,
+    "name": "20",
     "size": 0.09,
     "data": [
       2.261, 2.172, 2.088, 2.012, 1.93, 1.854, 1.786, 1.72, 1.643, 1.585, 1.524,
@@ -64,7 +64,7 @@
     ]
   },
   {
-    "name": 21,
+    "name": "21",
     "size": 0.09,
     "data": [
       2.261, 2.172, 2.101, 2.032, 1.969, 1.905, 1.836, 1.77, 1.704, 1.641,
@@ -72,7 +72,7 @@
     ]
   },
   {
-    "name": 24,
+    "name": "24",
     "size": 0.09,
     "data": [
       2.235, 2.146, 2.07, 1.994, 1.918, 1.842, 1.783, 1.732, 1.694, 1.651,
@@ -80,7 +80,7 @@
     ]
   },
   {
-    "name": 53,
+    "name": "53",
     "size": 0.1,
     "data": [
       2.54, 2.413, 2.286, 2.179, 2.07, 1.974, 1.875, 1.778, 1.697, 1.615, 1.539,
@@ -88,7 +88,7 @@
     ]
   },
   {
-    "name": 55,
+    "name": "55",
     "size": 0.1,
     "data": [
       2.54, 2.413, 2.286, 2.179, 2.07, 1.981, 1.88, 1.778, 1.702, 1.626, 1.575,
@@ -96,7 +96,7 @@
     ]
   },
   {
-    "name": 58,
+    "name": "58",
     "size": 0.1,
     "data": [
       2.54, 2.413, 2.286, 2.179, 2.07, 1.981, 1.89, 1.808, 1.74, 1.676, 1.626,
@@ -104,7 +104,7 @@
     ]
   },
   {
-    "name": 61,
+    "name": "61",
     "size": 0.09,
     "data": [
       2.261, 2.159, 2.045, 1.969, 1.897, 1.842, 1.801, 1.753, 1.702, 1.659,
@@ -112,7 +112,7 @@
     ]
   },
   {
-    "name": 62,
+    "name": "62",
     "size": 0.09,
     "data": [
       2.261, 2.159, 2.057, 1.981, 1.905, 1.864, 1.826, 1.778, 1.74, 1.702,
@@ -120,7 +120,7 @@
     ]
   },
   {
-    "name": 69,
+    "name": "69",
     "size": 0.09,
     "data": [
       2.261, 2.159, 2.045, 1.994, 1.943, 1.905, 1.88, 1.854, 1.829, 1.803,
@@ -128,7 +128,7 @@
     ]
   },
   {
-    "name": 80,
+    "name": "80",
     "size": 0.09,
     "data": [
       2.261, 2.159, 2.032, 1.981, 1.925, 1.862, 1.791, 1.727, 1.659, 1.593,
@@ -136,7 +136,7 @@
     ]
   },
   {
-    "name": 81,
+    "name": "81",
     "size": 0.09,
     "data": [
       2.261, 2.159, 2.032, 1.956, 1.885, 1.826, 1.775, 1.727, 1.659, 1.593,
diff --git a/store/index.js b/store/index.js
new file mode 100644
index 00000000..ad948e52
--- /dev/null
+++ b/store/index.js
@@ -0,0 +1,13 @@
+export const state = () => ({
+  savedNeedles: undefined,
+});
+
+export const getters = {
+  needles: (state) => state.savedNeedles,
+};
+
+export const mutations = {
+  updateNeedles(state, newNeedles) {
+    state.savedNeedles = [...newNeedles];
+  },
+};