added tags, basic charts and import/export

Signed-off-by: Pascal Syma <pascal@syma.dev>

package-lock.json

@@ -6075,9 +6075,9 @@
       }
     },
     "handle-thing": {
-      "version": "2.0.1",
+      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz",
-      "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
+      "integrity": "sha1-/Xqtcmvxpf0W38KbL3pmAdJxOcQ=",
       "dev": true
     },
     "handlebars": {
@@ -6500,238 +6500,17 @@
       }
     },
     "http-proxy-middleware": {
-      "version": "0.19.2",
+      "version": "0.17.4",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.2.tgz",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.17.4.tgz",
-      "integrity": "sha512-aYk1rTKqLTus23X3L96LGNCGNgWpG4cG0XoZIT1GUPhhulEHX/QalnO6Vbo+WmKWi4AL2IidjuC0wZtbpg0yhQ==",
+      "integrity": "sha1-ZC6ISIUdZvCdTxJJEoRtuutBuDM=",
       "dev": true,
       "requires": {
-        "http-proxy": "^1.18.1",
+        "http-proxy": "^1.16.2",
-        "is-glob": "^4.0.0",
+        "is-glob": "^3.1.0",
-        "lodash": "^4.17.11",
+        "lodash": "^4.17.2",
-        "micromatch": "^3.1.10"
+        "micromatch": "^2.3.11"
       },
       "dependencies": {
-        "arr-diff": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
-          "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
-          "dev": true
-        },
-        "array-unique": {
-          "version": "0.3.2",
-          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
-          "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
-          "dev": true
-        },
-        "braces": {
-          "version": "2.3.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
-          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
-          "dev": true,
-          "requires": {
-            "arr-flatten": "^1.1.0",
-            "array-unique": "^0.3.2",
-            "extend-shallow": "^2.0.1",
-            "fill-range": "^4.0.0",
-            "isobject": "^3.0.1",
-            "repeat-element": "^1.1.2",
-            "snapdragon": "^0.8.1",
-            "snapdragon-node": "^2.0.1",
-            "split-string": "^3.0.2",
-            "to-regex": "^3.0.1"
-          },
-          "dependencies": {
-            "extend-shallow": {
-              "version": "2.0.1",
-              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
-              "requires": {
-                "is-extendable": "^0.1.0"
-              }
-            }
-          }
-        },
-        "expand-brackets": {
-          "version": "2.1.4",
-          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
-          "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
-          "dev": true,
-          "requires": {
-            "debug": "^2.3.3",
-            "define-property": "^0.2.5",
-            "extend-shallow": "^2.0.1",
-            "posix-character-classes": "^0.1.0",
-            "regex-not": "^1.0.0",
-            "snapdragon": "^0.8.1",
-            "to-regex": "^3.0.1"
-          },
-          "dependencies": {
-            "define-property": {
-              "version": "0.2.5",
-              "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-              "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-              "dev": true,
-              "requires": {
-                "is-descriptor": "^0.1.0"
-              }
-            },
-            "extend-shallow": {
-              "version": "2.0.1",
-              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
-              "requires": {
-                "is-extendable": "^0.1.0"
-              }
-            },
-            "is-accessor-descriptor": {
-              "version": "0.1.6",
-              "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
-              "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
-              "dev": true,
-              "requires": {
-                "kind-of": "^3.0.2"
-              },
-              "dependencies": {
-                "kind-of": {
-                  "version": "3.2.2",
-                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-                  "dev": true,
-                  "requires": {
-                    "is-buffer": "^1.1.5"
-                  }
-                }
-              }
-            },
-            "is-data-descriptor": {
-              "version": "0.1.4",
-              "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
-              "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
-              "dev": true,
-              "requires": {
-                "kind-of": "^3.0.2"
-              },
-              "dependencies": {
-                "kind-of": {
-                  "version": "3.2.2",
-                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-                  "dev": true,
-                  "requires": {
-                    "is-buffer": "^1.1.5"
-                  }
-                }
-              }
-            },
-            "is-descriptor": {
-              "version": "0.1.6",
-              "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
-              "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
-              "dev": true,
-              "requires": {
-                "is-accessor-descriptor": "^0.1.6",
-                "is-data-descriptor": "^0.1.4",
-                "kind-of": "^5.0.0"
-              }
-            },
-            "kind-of": {
-              "version": "5.1.0",
-              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-              "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
-              "dev": true
-            }
-          }
-        },
-        "extglob": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
-          "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
-          "dev": true,
-          "requires": {
-            "array-unique": "^0.3.2",
-            "define-property": "^1.0.0",
-            "expand-brackets": "^2.1.4",
-            "extend-shallow": "^2.0.1",
-            "fragment-cache": "^0.2.1",
-            "regex-not": "^1.0.0",
-            "snapdragon": "^0.8.1",
-            "to-regex": "^3.0.1"
-          },
-          "dependencies": {
-            "define-property": {
-              "version": "1.0.0",
-              "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-              "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-              "dev": true,
-              "requires": {
-                "is-descriptor": "^1.0.0"
-              }
-            },
-            "extend-shallow": {
-              "version": "2.0.1",
-              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
-              "requires": {
-                "is-extendable": "^0.1.0"
-              }
-            }
-          }
-        },
-        "fill-range": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
-          "dev": true,
-          "requires": {
-            "extend-shallow": "^2.0.1",
-            "is-number": "^3.0.0",
-            "repeat-string": "^1.6.1",
-            "to-regex-range": "^2.1.0"
-          },
-          "dependencies": {
-            "extend-shallow": {
-              "version": "2.0.1",
-              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "dev": true,
-              "requires": {
-                "is-extendable": "^0.1.0"
-              }
-            }
-          }
-        },
-        "is-accessor-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-          "dev": true,
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-data-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-          "dev": true,
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-descriptor": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-          "dev": true,
-          "requires": {
-            "is-accessor-descriptor": "^1.0.0",
-            "is-data-descriptor": "^1.0.0",
-            "kind-of": "^6.0.2"
-          }
-        },
         "is-extglob": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -6739,65 +6518,12 @@
           "dev": true
         },
         "is-glob": {
-          "version": "4.0.1",
+          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
-          "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+          "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
           "dev": true,
           "requires": {
-            "is-extglob": "^2.1.1"
+            "is-extglob": "^2.1.0"
-          }
-        },
-        "is-number": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-          "dev": true,
-          "requires": {
-            "kind-of": "^3.0.2"
-          },
-          "dependencies": {
-            "kind-of": {
-              "version": "3.2.2",
-              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-              "dev": true,
-              "requires": {
-                "is-buffer": "^1.1.5"
-              }
-            }
-          }
-        },
-        "isobject": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-          "dev": true
-        },
-        "kind-of": {
-          "version": "6.0.3",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-          "dev": true
-        },
-        "micromatch": {
-          "version": "3.1.10",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
-          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-          "dev": true,
-          "requires": {
-            "arr-diff": "^4.0.0",
-            "array-unique": "^0.3.2",
-            "braces": "^2.3.1",
-            "define-property": "^2.0.2",
-            "extend-shallow": "^3.0.2",
-            "extglob": "^2.0.4",
-            "fragment-cache": "^0.2.1",
-            "kind-of": "^6.0.2",
-            "nanomatch": "^1.2.9",
-            "object.pick": "^1.3.0",
-            "regex-not": "^1.0.0",
-            "snapdragon": "^0.8.1",
-            "to-regex": "^3.0.2"
           }
         }
       }
@@ -8132,11 +7858,18 @@
         "verror": "1.10.0"
       }
     },
-    "killable": {
+    "juijs-chart": {
-      "version": "1.0.1",
+      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/juijs-chart/-/juijs-chart-2.6.9.tgz",
-      "integrity": "sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==",
+      "integrity": "sha512-l62qiuz/kPELx10zNC8gzV8DWSGdTkUhOCkmvDDlQzoW0a59vDP7sk8ahbzb0lUuCVGVjOL94YuKKriwcEcQtA==",
-      "dev": true
+      "requires": {
+        "juijs-graph": "1.1.4"
+      }
+    },
+    "juijs-graph": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/juijs-graph/-/juijs-graph-1.1.4.tgz",
+      "integrity": "sha512-97LnBbwTrqbKBi2nS4nfvsHXKAArwcVxmGHkoXx9X7GT1uGXdRONmdLhjYc87UkWWQr5p91sSWlwA0qXvQg7/Q=="
     },
     "kind-of": {
       "version": "3.2.2",
@@ -9394,7 +9127,8 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
       "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "path-exists": {
       "version": "3.0.0",
@@ -13288,19 +13022,27 @@
       }
     },
     "sockjs": {
-      "version": "0.3.19",
+      "version": "0.3.18",
-      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.19.tgz",
+      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.18.tgz",
-      "integrity": "sha512-V48klKZl8T6MzatbLlzzRNhMepEys9Y4oGFpypBFFn1gLI/QQ9HtLLyWJNbPlwGLelOVOEijUbTTJeLLI59jLw==",
+      "integrity": "sha1-2bKJMWyn33dZXvKZ4HXw+TfrQgc=",
       "dev": true,
       "requires": {
         "faye-websocket": "^0.10.0",
-        "uuid": "^3.0.1"
+        "uuid": "^2.0.2"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.3.tgz",
+          "integrity": "sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho=",
+          "dev": true
+        }
       }
     },
     "sockjs-client": {
-      "version": "1.1.5",
+      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.1.4.tgz",
-      "integrity": "sha1-G7fA9yIsQPQq3xT0RCy9Eml3GoM=",
+      "integrity": "sha1-W6vjhrd15M8U51IJEUUmVAFsixI=",
       "dev": true,
       "requires": {
         "debug": "^2.6.6",
@@ -13412,75 +13154,32 @@
       "dev": true
     },
     "spdy": {
-      "version": "4.0.2",
+      "version": "3.4.7",
-      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/spdy/-/spdy-3.4.7.tgz",
-      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
+      "integrity": "sha1-Qv9B7OXMD5mjpsKKq7c/XDsDrLw=",
       "dev": true,
       "requires": {
-        "debug": "^4.1.0",
+        "debug": "^2.6.8",
-        "handle-thing": "^2.0.0",
+        "handle-thing": "^1.2.5",
         "http-deceiver": "^1.2.7",
+        "safe-buffer": "^5.0.1",
         "select-hose": "^2.0.0",
-        "spdy-transport": "^3.0.0"
+        "spdy-transport": "^2.0.18"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "4.3.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
-          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
-          "dev": true,
-          "requires": {
-            "ms": "2.1.2"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        }
       }
     },
     "spdy-transport": {
-      "version": "3.0.0",
+      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-2.1.1.tgz",
-      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
+      "integrity": "sha512-q7D8c148escoB3Z7ySCASadkegMmUZW8Wb/Q1u0/XBgDKMO880rLQDj8Twiew/tYi7ghemKUi/whSYOwE17f5Q==",
       "dev": true,
       "requires": {
-        "debug": "^4.1.0",
+        "debug": "^2.6.8",
-        "detect-node": "^2.0.4",
+        "detect-node": "^2.0.3",
         "hpack.js": "^2.1.6",
-        "obuf": "^1.1.2",
+        "obuf": "^1.1.1",
-        "readable-stream": "^3.0.6",
+        "readable-stream": "^2.2.9",
-        "wbuf": "^1.7.3"
+        "safe-buffer": "^5.0.1",
-      },
+        "wbuf": "^1.7.2"
-      "dependencies": {
-        "debug": {
-          "version": "4.3.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
-          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
-          "dev": true,
-          "requires": {
-            "ms": "2.1.2"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        }
       }
     },
     "split-string": {
@@ -14368,7 +14067,8 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
       "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "upper-case": {
       "version": "1.1.3",
@@ -14582,6 +14282,15 @@
       "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
       "integrity": "sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA=="
     },
+    "vue-graph": {
+      "version": "0.8.7",
+      "resolved": "https://registry.npmjs.org/vue-graph/-/vue-graph-0.8.7.tgz",
+      "integrity": "sha512-VLnYZ6AzVGGykIH4HothlJ9J39G2ute7crBeD4bvzvNCFq3+GhivUygrY/UUD3uN0e+BiYPCYq4v58vTIU7DiA==",
+      "requires": {
+        "juijs-chart": "2.6.9",
+        "vue": "^2.6.7"
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -15159,15 +14868,15 @@
       "dev": true
     },
     "webpack": {
-      "version": "3.12.0",
+      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-3.12.0.tgz",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-3.6.0.tgz",
-      "integrity": "sha512-Sw7MdIIOv/nkzPzee4o0EdvCuPmxT98+vVpIvwtcwcF1Q4SDSNp92vwcKc4REe7NItH9f1S4ra9FuQ7yuYZ8bQ==",
+      "integrity": "sha512-OsHT3D0W0KmPPh60tC7asNnOmST6bKTiR90UyEdT9QYoaJ4OYN4Gg7WK1k3VxHK07ZoiYWPsKvlS/gAjwL/vRA==",
       "dev": true,
       "requires": {
         "acorn": "^5.0.0",
         "acorn-dynamic-import": "^2.0.0",
-        "ajv": "^6.1.0",
+        "ajv": "^5.1.5",
-        "ajv-keywords": "^3.1.0",
+        "ajv-keywords": "^2.0.0",
         "async": "^2.1.2",
         "enhanced-resolve": "^3.4.0",
         "escope": "^3.6.0",
@@ -15188,24 +14897,6 @@
         "yargs": "^8.0.2"
       },
       "dependencies": {
-        "ajv": {
-          "version": "6.12.6",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "ajv-keywords": {
-          "version": "3.5.2",
-          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-          "dev": true
-        },
         "camelcase": {
           "version": "1.2.1",
           "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
@@ -15223,12 +14914,6 @@
             "wordwrap": "0.0.2"
           }
         },
-        "fast-deep-equal": {
-          "version": "3.1.3",
-          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-          "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-          "dev": true
-        },
         "has-flag": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
@@ -15244,12 +14929,6 @@
             "number-is-nan": "^1.0.0"
           }
         },
-        "json-schema-traverse": {
-          "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-          "dev": true
-        },
         "load-json-file": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
@@ -15479,40 +15158,47 @@
       }
     },
     "webpack-dev-server": {
-      "version": "2.11.5",
+      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-2.11.5.tgz",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-2.9.1.tgz",
-      "integrity": "sha512-7TdOKKt7G3sWEhPKV0zP+nD0c4V9YKUJ3wDdBwQsZNo58oZIRoVIu66pg7PYkBW8A74msP9C2kLwmxGHndz/pw==",
+      "integrity": "sha512-qFKs4Wg6JI6FkAQ6WFqeDCCxXEBLsDHkqJB3f9tmlqx8C68Y9vQWwcaMT4Q9H8WF32Q6QUNmgK4qQkdHfXvj/g==",
       "dev": true,
       "requires": {
         "ansi-html": "0.0.7",
         "array-includes": "^3.0.3",
         "bonjour": "^3.5.0",
-        "chokidar": "^2.1.2",
+        "chokidar": "^1.6.0",
-        "compression": "^1.7.3",
+        "compression": "^1.5.2",
         "connect-history-api-fallback": "^1.3.0",
-        "debug": "^3.1.0",
         "del": "^3.0.0",
-        "express": "^4.16.2",
+        "express": "^4.13.3",
         "html-entities": "^1.2.0",
-        "http-proxy-middleware": "^0.19.1",
+        "http-proxy-middleware": "~0.17.4",
-        "import-local": "^1.0.0",
         "internal-ip": "1.2.0",
         "ip": "^1.1.5",
-        "killable": "^1.0.0",
         "loglevel": "^1.4.1",
         "opn": "^5.1.0",
         "portfinder": "^1.0.9",
         "selfsigned": "^1.9.1",
-        "serve-index": "^1.9.1",
+        "serve-index": "^1.7.2",
-        "sockjs": "0.3.19",
+        "sockjs": "0.3.18",
-        "sockjs-client": "1.1.5",
+        "sockjs-client": "1.1.4",
-        "spdy": "^4.0.0",
+        "spdy": "^3.4.1",
-        "strip-ansi": "^3.0.0",
+        "strip-ansi": "^3.0.1",
-        "supports-color": "^5.1.0",
+        "supports-color": "^4.2.1",
-        "webpack-dev-middleware": "1.12.2",
+        "webpack-dev-middleware": "^1.11.0",
-        "yargs": "6.6.0"
+        "yargs": "^6.6.0"
       },
       "dependencies": {
+        "anymatch": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-1.3.2.tgz",
+          "integrity": "sha512-0XNayC8lTHQ2OI8aljNCN3sSx6hsr/1+rlcDAotXJR7C1oZZHCNsfpbKwMjRA3Uqb5tF1Rae2oloTr4xpq+WjA==",
+          "dev": true,
+          "requires": {
+            "micromatch": "^2.1.5",
+            "normalize-path": "^2.0.0"
+          }
+        },
         "arr-diff": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -15547,6 +15233,17 @@
             "snapdragon-node": "^2.0.1",
             "split-string": "^3.0.2",
             "to-regex": "^3.0.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            }
           }
         },
         "camelcase": {
@@ -15556,23 +15253,20 @@
           "dev": true
         },
         "chokidar": {
-          "version": "2.1.8",
+          "version": "1.7.0",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz",
-          "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
+          "integrity": "sha1-eY5ol3gVHIB2tLNg5e3SjNortGg=",
           "dev": true,
           "requires": {
-            "anymatch": "^2.0.0",
+            "anymatch": "^1.3.0",
-            "async-each": "^1.0.1",
+            "async-each": "^1.0.0",
-            "braces": "^2.3.2",
+            "fsevents": "^1.0.0",
-            "fsevents": "^1.2.7",
+            "glob-parent": "^2.0.0",
-            "glob-parent": "^3.1.0",
+            "inherits": "^2.0.1",
-            "inherits": "^2.0.3",
             "is-binary-path": "^1.0.0",
-            "is-glob": "^4.0.0",
+            "is-glob": "^2.0.0",
-            "normalize-path": "^3.0.0",
             "path-is-absolute": "^1.0.0",
-            "readdirp": "^2.2.1",
+            "readdirp": "^2.0.0"
-            "upath": "^1.1.1"
           }
         },
         "cliui": {
@@ -15586,23 +15280,6 @@
             "wrap-ansi": "^2.0.0"
           }
         },
-        "debug": {
-          "version": "3.2.7",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          },
-          "dependencies": {
-            "ms": {
-              "version": "2.1.3",
-              "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-              "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-              "dev": true
-            }
-          }
-        },
         "expand-brackets": {
           "version": "2.1.4",
           "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
@@ -15618,15 +15295,6 @@
             "to-regex": "^3.0.1"
           },
           "dependencies": {
-            "debug": {
-              "version": "2.6.9",
-              "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-              "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-              "dev": true,
-              "requires": {
-                "ms": "2.0.0"
-              }
-            },
             "define-property": {
               "version": "0.2.5",
               "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
@@ -15636,6 +15304,15 @@
                 "is-descriptor": "^0.1.0"
               }
             },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
+            },
             "is-accessor-descriptor": {
               "version": "0.1.6",
               "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
@@ -15695,15 +15372,6 @@
             }
           }
         },
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        },
         "extglob": {
           "version": "2.0.4",
           "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
@@ -15728,6 +15396,15 @@
               "requires": {
                 "is-descriptor": "^1.0.0"
               }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "^0.1.0"
+              }
             }
           }
         },
@@ -15741,29 +15418,25 @@
             "is-number": "^3.0.0",
             "repeat-string": "^1.6.1",
             "to-regex-range": "^2.1.0"
-          }
-        },
-        "glob-parent": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
-          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
-          "dev": true,
-          "requires": {
-            "is-glob": "^3.1.0",
-            "path-dirname": "^1.0.0"
           },
           "dependencies": {
-            "is-glob": {
+            "extend-shallow": {
-              "version": "3.1.0",
+              "version": "2.0.1",
-              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-              "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
               "dev": true,
               "requires": {
-                "is-extglob": "^2.1.0"
+                "is-extendable": "^0.1.0"
               }
             }
           }
         },
+        "has-flag": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
+          "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=",
+          "dev": true
+        },
         "is-accessor-descriptor": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
@@ -15771,14 +15444,6 @@
           "dev": true,
           "requires": {
             "kind-of": "^6.0.0"
-          },
-          "dependencies": {
-            "kind-of": {
-              "version": "6.0.3",
-              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-              "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-              "dev": true
-            }
           }
         },
         "is-binary-path": {
@@ -15797,14 +15462,6 @@
           "dev": true,
           "requires": {
             "kind-of": "^6.0.0"
-          },
-          "dependencies": {
-            "kind-of": {
-              "version": "6.0.3",
-              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-              "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-              "dev": true
-            }
           }
         },
         "is-descriptor": {
@@ -15816,21 +15473,7 @@
             "is-accessor-descriptor": "^1.0.0",
             "is-data-descriptor": "^1.0.0",
             "kind-of": "^6.0.2"
-          },
-          "dependencies": {
-            "kind-of": {
-              "version": "6.0.3",
-              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-              "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-              "dev": true
           }
-          }
-        },
-        "is-extglob": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-          "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
-          "dev": true
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
@@ -15841,15 +15484,6 @@
             "number-is-nan": "^1.0.0"
           }
         },
-        "is-glob": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
-          "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
-          "dev": true,
-          "requires": {
-            "is-extglob": "^2.1.1"
-          }
-        },
         "is-number": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@@ -15857,6 +15491,17 @@
           "dev": true,
           "requires": {
             "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "dev": true,
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
           }
         },
         "isobject": {
@@ -15865,59 +15510,11 @@
           "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
           "dev": true
         },
-        "micromatch": {
-          "version": "3.1.10",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
-          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-          "dev": true,
-          "requires": {
-            "arr-diff": "^4.0.0",
-            "array-unique": "^0.3.2",
-            "braces": "^2.3.1",
-            "define-property": "^2.0.2",
-            "extend-shallow": "^3.0.2",
-            "extglob": "^2.0.4",
-            "fragment-cache": "^0.2.1",
-            "kind-of": "^6.0.2",
-            "nanomatch": "^1.2.9",
-            "object.pick": "^1.3.0",
-            "regex-not": "^1.0.0",
-            "snapdragon": "^0.8.1",
-            "to-regex": "^3.0.2"
-          },
-          "dependencies": {
-            "extend-shallow": {
-              "version": "3.0.2",
-              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-              "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
-              "dev": true,
-              "requires": {
-                "assign-symbols": "^1.0.0",
-                "is-extendable": "^1.0.1"
-              }
-            },
-            "is-extendable": {
-              "version": "1.0.1",
-              "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-              "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-              "dev": true,
-              "requires": {
-                "is-plain-object": "^2.0.4"
-              }
-            },
         "kind-of": {
           "version": "6.0.3",
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
           "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
           "dev": true
-            }
-          }
-        },
-        "normalize-path": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-          "dev": true
         },
         "os-locale": {
           "version": "1.4.0",
@@ -15937,6 +15534,29 @@
             "graceful-fs": "^4.1.11",
             "micromatch": "^3.1.10",
             "readable-stream": "^2.0.2"
+          },
+          "dependencies": {
+            "micromatch": {
+              "version": "3.1.10",
+              "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+              "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+              "dev": true,
+              "requires": {
+                "arr-diff": "^4.0.0",
+                "array-unique": "^0.3.2",
+                "braces": "^2.3.1",
+                "define-property": "^2.0.2",
+                "extend-shallow": "^3.0.2",
+                "extglob": "^2.0.4",
+                "fragment-cache": "^0.2.1",
+                "kind-of": "^6.0.2",
+                "nanomatch": "^1.2.9",
+                "object.pick": "^1.3.0",
+                "regex-not": "^1.0.0",
+                "snapdragon": "^0.8.1",
+                "to-regex": "^3.0.2"
+              }
+            }
           }
         },
         "string-width": {
@@ -15950,6 +15570,15 @@
             "strip-ansi": "^3.0.0"
           }
         },
+        "supports-color": {
+          "version": "4.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
+          "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+          "dev": true,
+          "requires": {
+            "has-flag": "^2.0.0"
+          }
+        },
         "which-module": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",

package.json

@@ -20,7 +20,8 @@
     "jquery": "^3.6.0",
     "popper.js": "^1.16.1",
     "vue": "^2.5.2",
-    "vue-enums": "^1.0.0"
+    "vue-enums": "^1.0.0",
+    "vue-graph": "^0.8.7"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/App.vue

@@ -1,8 +1,73 @@
 <template>
   <div id="app" class="container">
     <b-row class="results">
-      <b-col sm="12" offset-md="1" md="10">
+      <b-col>
-        <b-card header="Result" title="Analysis">
+        <b-card title="Analysis" no-body>
+          <b-card-header header-text-variant="white" class="container-fluid">
+            <b-row style="display: table">
+              <b-col md="8" lg="10" style="display: table-cell; vertical-align: middle">Result</b-col>
+              <b-col md="2" class="float-right align-self-center" style="display: inline-table">
+                <b-button-group size="sm">
+                  <b-button v-b-modal.modalImport variant="info"><b-icon-upload /> Import</b-button>
+                  <b-button id="exportButton" @click="exportData" variant="success"><b-icon-download /> Export</b-button>
+                  <b-tooltip ref="exportTooltip" target="exportButton" disabled>Copied to clipboard!</b-tooltip>
+                  <b-button @click="askReset" variant="danger"><b-icon-trash /> Reset</b-button>
+                </b-button-group>
+              </b-col>
+            </b-row>
+          </b-card-header>
+          <b-card-body>
+            <b-row v-if="calculated.in.data.length + calculated.out.data.length > 1">
+              <b-col md="6"
+                     v-for="key in ['in', 'out']"
+                     :key="key">
+                <b-card
+                  :header="calculated[key].title"
+                  bg-variant="secondary">
+                  <graph-pie
+                    :width="NaN"
+                    :height="400"
+                    :padding-top="100"
+                    :padding-bottom="100"
+                    :padding-left="100"
+                    :padding-right="100"
+                    :names="calculated[key].labels"
+                    :values="calculated[key].data"
+                    :show-text-type="'outside'"
+                    :active-event="'click'"
+                    :data-format="dataFormat"
+                    :styles="pieStyle">
+                    <legends :names="calculated[key].labels"></legends>
+                    <tooltip :names="calculated[key].labels"></tooltip></graph-pie>
+                </b-card>
+              </b-col>
+            </b-row>
+            <b-row v-if="calculated.inTag.data.length + calculated.outTag.data.length > 1">
+              <b-col md="6"
+                     v-for="key in ['inTag', 'outTag']"
+                     :key="key">
+
+                <b-card
+                  :header="calculated[key].title"
+                  bg-variant="secondary">
+                  <graph-pie
+                    :width="NaN"
+                    :height="400"
+                    :padding-top="100"
+                    :padding-bottom="100"
+                    :padding-left="100"
+                    :padding-right="100"
+                    :names="calculated[key].labels"
+                    :values="calculated[key].data"
+                    :show-text-type="'outside'"
+                    :active-event="'click'"
+                    :data-format="dataFormat"
+                    :styles="pieStyle">
+                    <legends :names="calculated[key].labels"></legends>
+                    <tooltip :names="calculated[key].labels"></tooltip></graph-pie>
+                </b-card>
+              </b-col>
+            </b-row>
             <b-card-group class="text-center">
               <b-card header="Yearly">
                 <p>Income: {{ calculated.yearly.in | currency }}</p>
@@ -20,6 +85,7 @@
                 <p>Profit: <span :class="calculated.yearly.sum/365 < 0 ? 'text-danger' : 'text-success'">{{ calculated.yearly.sum/365 | currency }}</span></p>
               </b-card>
             </b-card-group>
+            </b-card-body>
         </b-card>
       </b-col>
     </b-row>
@@ -27,6 +93,25 @@
       <Input title="Income" color="success" :entries="income" />
       <Input title="Expenses" color="danger" :entries="expenses" />
     </b-row>
+    <b-modal id="modalImport" title="Import" @ok="importData" @show="resetImport" @hidden="resetImport">
+      <form ref="import" @submit.stop.prevent="importData">
+        <b-form-group
+          label="Data: "
+          label-for="data-input"
+          invalid-feedback="Correct data is required"
+          :state="importDataState"
+        >
+          <b-form-textarea
+            id="data-input"
+            v-model="importdata"
+            :state="importDataState"
+            rows="5"
+            no-resize
+            required
+          ></b-form-textarea>
+        </b-form-group>
+      </form>
+    </b-modal>
   </div>
 </template>
 
@@ -48,8 +133,35 @@ export default {
           in: 0,
           out: 0,
           sum: 0
+        },
+        in: {
+          title: 'Income',
+          labels: [],
+          data: []
+        },
+        out: {
+          title: 'Expenses',
+          labels: [],
+          data: []
+        },
+        inTag: {
+          title: 'Income Tags',
+          labels: [],
+          data: []
+        },
+        outTag: {
+          title: 'Expenses Tags',
+          labels: [],
+          data: []
         }
-      }
+      },
+      pieStyle: {
+        backgroundColor: '#ffffff00',
+        pieOuterFontColor: '#ccc',
+        legendFontColor: '#ccc'
+      },
+      importdata: '',
+      importDataState: null
     }
   },
   mounted () {
@@ -60,6 +172,8 @@ export default {
         if (storageObj.expenses && storageObj.income) {
           this.$set(this, 'expenses', storageObj.expenses)
           this.$set(this, 'income', storageObj.income)
+          this.income.forEach(i => this.$set(i, '_showDetails', false))
+          this.expenses.forEach(i => this.$set(i, '_showDetails', false))
         }
       } catch (e) {
       }
@@ -87,13 +201,213 @@ export default {
         out: 0,
         sum: 0
       }
+      let inLabel = []
+      let inData = []
+      let outLabel = []
+      let outData = []
+      let inTagLabel = ['Without Tags']
+      let inTagData = [0]
+      let outTagLabel = ['Without Tags']
+      let outTagData = [0]
 
-      calc.in = [...this.income.map(i => Frequency.byId(i.frequency).interval * parseFloat(i.amount)), ...this.income.filter(i => i.frequency === 0).map(i => parseFloat(i.amount))].reduce((c, v) => c + v, 0)
+      const inList = [...this.income.map(i => {
-      calc.out = [...this.expenses.map(i => Frequency.byId(i.frequency).interval * parseFloat(i.amount)), ...this.expenses.filter(i => i.frequency === 0).map(i => parseFloat(i.amount))].reduce((c, v) => c + v, 0)
+        return {
+          name: i.name,
+          tags: i.tags,
+          amount: Frequency.byId(i.frequency).interval * parseFloat(i.amount)
+        }
+      }), ...this.income.filter(i => i.frequency === 0).map(i => {
+        return {
+          name: i.name,
+          tags: i.tags,
+          amount: parseFloat(i.amount)
+        }
+      })]
+      const outList = [...this.expenses.map(i => {
+        return {
+          name: i.name,
+          tags: i.tags,
+          amount: Frequency.byId(i.frequency).interval * parseFloat(i.amount)
+        }
+      }), ...this.expenses.filter(i => i.frequency === 0).map(i => {
+        return {
+          name: i.name,
+          tags: i.tags,
+          amount: parseFloat(i.amount)
+        }
+      })]
+      calc.in = inList.reduce((c, v) => c + v.amount, 0)
+      calc.out = outList.reduce((c, v) => c + v.amount, 0)
 
       calc.sum = calc.in - calc.out
 
+      if (calc.sum < 0) {
+        inList.push({
+          name: 'Loss',
+          amount: -calc.sum,
+          tags: ['Loss']
+        })
+      } else {
+        outList.push({
+          name: 'Profit',
+          amount: calc.sum,
+          tags: ['Profit']
+        })
+      }
+
+      inList.forEach(e => {
+        inLabel.push(e.name)
+        inData.push(e.amount)
+
+        if (!e.tags) {
+          inTagData[0] += e.amount
+          return
+        }
+
+        // TODO: maybe consider using only the first tag, else the total will change because elements get included multiple times
+        e.tags.forEach(t => {
+          let index = inTagLabel.indexOf(t)
+          if (index === -1) {
+            inTagLabel.push(t)
+            inTagData.push(e.amount)
+          } else {
+            inTagData[index] += e.amount
+          }
+        })
+      })
+      outList.forEach(e => {
+        outLabel.push(e.name)
+        outData.push(e.amount)
+
+        if (!e.tags) {
+          outTagData[0] += e.amount
+          return
+        }
+
+        e.tags.forEach(t => {
+          let index = outTagLabel.indexOf(t)
+          if (index === -1) {
+            outTagLabel.push(t)
+            outTagData.push(e.amount)
+          } else {
+            outTagData[index] += e.amount
+          }
+        })
+      })
+
+      if (outTagData[0] === 0) {
+        outTagData.shift()
+        outTagLabel.shift()
+      }
+      if (inTagData[0] === 0) {
+        inTagData.shift()
+        inTagLabel.shift()
+      }
+
+      // sort asc
+      const sort = (label, data) => {
+        let merge = label.map((e, i) => {
+          return {
+            label: e,
+            data: data[i]
+          }
+        }).sort((a, b) => b.data - a.data)
+
+        label = merge.map(e => e.label)
+        data = merge.map(e => e.data)
+
+        return [label, data]
+      }
+
+      [inTagLabel, inTagData] = sort(inTagLabel, inTagData);
+      [outTagLabel, outTagData] = sort(outTagLabel, outTagData);
+      [inLabel, inData] = sort(inLabel, inData);
+      [outLabel, outData] = sort(outLabel, outData)
+
       this.$set(this.calculated, 'yearly', calc)
+      this.$set(this.calculated.inTag, 'labels', inTagLabel)
+      this.$set(this.calculated.inTag, 'data', inTagData)
+      this.$set(this.calculated.outTag, 'labels', outTagLabel)
+      this.$set(this.calculated.outTag, 'data', outTagData)
+
+      this.$set(this.calculated.in, 'labels', inLabel)
+      this.$set(this.calculated.in, 'data', inData)
+      this.$set(this.calculated.out, 'labels', outLabel)
+      this.$set(this.calculated.out, 'data', outData)
+    },
+    dataFormat (a, b) {
+      if (b) return this.$options.filters.currency(b)
+      return a
+    },
+    askReset () {
+      // ask before deletion
+      this.$bvModal.msgBoxConfirm(['Please confirm that you want to reset.', 'All data will be lost forever! (A long time!)'].map(e => this.$createElement('p', [e])), {
+        title: 'Are you sure?',
+        size: 'md',
+        buttonSize: 'sm',
+        okVariant: 'danger',
+        okTitle: 'Yes',
+        cancelTitle: 'No',
+        footerClass: 'p-2',
+        hideHeaderClose: false,
+        centered: true
+      })
+        .then(confirmedDelete => {
+          if (!confirmedDelete) return
+
+          this.$set(this, 'expenses', [])
+          this.$set(this, 'income', [])
+          this.calculate()
+        })
+    },
+    resetImport () {
+      this.importdata = ''
+      this.importDataState = null
+    },
+    importData (bvModalEvt) {
+      let valid = this.$refs.import.checkValidity()
+      let obj
+      if (valid) {
+        try {
+          obj = JSON.parse(atob(this.importdata))
+          if (!obj.expenses || !obj.income) {
+            valid = false
+          }
+        } catch (e) {
+          valid = false
+        }
+      }
+
+      this.importDataState = valid
+      if (bvModalEvt) bvModalEvt.preventDefault()
+      if (!valid) return
+
+      this.$set(this, 'expenses', obj.expenses)
+      this.$set(this, 'income', obj.income)
+      this.income.forEach(i => this.$set(i, '_showDetails', false))
+      this.expenses.forEach(i => this.$set(i, '_showDetails', false))
+      this.calculate()
+
+      this.$nextTick(() => {
+        this.$bvModal.hide('modalImport')
+      })
+    },
+    exportData () {
+      const storage = localStorage.getItem('expenses')
+      if (!storage) return
+
+      const el = document.createElement('textarea')
+      el.value = btoa(storage)
+      el.setAttribute('readonly', '')
+      el.style.all = 'position: absolute; left: -9999px'
+      document.body.appendChild(el)
+      el.select()
+      document.execCommand('copy')
+      document.body.removeChild(el)
+
+      this.$refs.exportTooltip.$emit('open')
+
+      setTimeout(() => this.$refs.exportTooltip.$emit('close'), 1000)
     }
   }
 }

src/components/Input.vue

@@ -39,6 +39,10 @@
             {{ $enums.Frequency.byId(data.item.frequency).name }}
           </template>
 
+          <template #cell(tags)="data">
+            {{ (data.item.tags ? data.item.tags.length : 0) }}
+          </template>
+
           <template #row-details="row">
             <b-card>
               <b-form @submit.prevent="save(row)">
@@ -82,6 +86,17 @@
                     required></b-form-select>
                 </b-form-group>
 
+                <b-form-group
+                  id="tags-group"
+                  description="Enter new tags separated by comma or semicolon"
+                  label="Tags:"
+                  label-for="tags">
+                  <b-form-tags
+                    id="tags"
+                    separator=",;"
+                    v-model="editingCache.tags"></b-form-tags>
+                </b-form-group>
+
                 <b-button type="submit" variant="success"><b-icon-check /> Save</b-button>
               </b-form>
             </b-card>
@@ -116,6 +131,7 @@ export default {
         'name',
         'amount',
         'frequency',
+        'tags',
         {
           key: 'options',
           label: ''

src/main.js

@@ -2,6 +2,7 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import enums from 'vue-enums'
+import VueGraph from 'vue-graph'
 import App from './App'
 import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 
@@ -10,6 +11,8 @@ import 'bootswatch/dist/darkly/bootstrap.min.css'
 // import 'bootstrap/dist/css/bootstrap.min.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 
+Vue.use(VueGraph)
+
 Vue.use(enums, {namespace: '$enums'})
 
 // Make BootstrapVue available throughout your project