@openc3/vue-common 6.3.0 → 6.4.0

package/dist/{Graph-Bgo0cjl3.js → Graph-M382Zo8o.js}

@@ -1,10 +1,11 @@
-import { T as X } from "./timeFilters-CRYpYDdf.js";
-import { resolveComponent as u, createBlock as T, openBlock as y, withKeys as j, withCtx as l, createVNode as i, createElementVNode as b, createTextVNode as m, createElementBlock as P, Fragment as F, renderList as J, mergeProps as x, createCommentVNode as S, toDisplayString as E, withModifiers as Q, withDirectives as C, normalizeClass as $, vShow as M, normalizeProps as ee, guardReactiveProps as te } from "vue";
-import { h as ie, c as q, u as I, l as se } from "./WidgetComponents-C1lSLZ0I.js";
-import { _ as W } from "./CustomIcon-h5X7369N.js";
-import { t as Z, i as B } from "./format-CVeawcIv.js";
-import { p as K } from "./parse-DnkEsW-3.js";
-const le = {
+import { T as B } from "./timeFilters-BKnCM4rv.js";
+import { resolveComponent as h, createBlock as b, openBlock as v, withKeys as K, withCtx as n, createVNode as s, createElementVNode as k, createTextVNode as g, createElementBlock as N, Fragment as X, renderList as j, createCommentVNode as _, toDisplayString as C, withModifiers as H, withDirectives as O, normalizeClass as F, vShow as G, normalizeProps as J, guardReactiveProps as Q } from "vue";
+import { p as $, c as A, u as V, d as ee } from "./UpgradeToEnterpriseDialog.vue_vue_type_style_index_0_scoped_2c757408_lang-CVrrWDJ_.js";
+import { _ as P } from "./CustomIcon-h5X7369N.js";
+import { t as W, i as q } from "./format-CVeawcIv.js";
+import { p as Z } from "./parse-DnkEsW-3.js";
+const te = {
+  mixins: [B],
   props: {
     modelValue: Boolean,
     // modelValue is the default prop when using v-model
@@ -45,7 +46,6 @@ const le = {
       required: !0
     }
   },
-  mixins: [X],
   data: function() {
     return {
       tab: 0,
@@ -70,7 +70,7 @@ const le = {
         date: (t) => {
           if (!t) return !0;
           try {
-            return B(K(t, "yyyy-MM-dd", /* @__PURE__ */ new Date())) || "Invalid date (YYYY-MM-DD)";
+            return q(Z(t, "yyyy-MM-dd", /* @__PURE__ */ new Date())) || "Invalid date (YYYY-MM-DD)";
           } catch {
             return "Invalid date (YYYY-MM-DD)";
           }
@@ -78,7 +78,7 @@ const le = {
         time: (t) => {
           if (!t) return !0;
           try {
-            return B(K(t, "HH:mm:ss", /* @__PURE__ */ new Date())) || "Invalid time (HH:MM:SS)";
+            return q(Z(t, "HH:mm:ss", /* @__PURE__ */ new Date())) || "Invalid time (HH:MM:SS)";
           } catch {
             return "Invalid time (HH:MM:SS)";
           }
@@ -110,14 +110,14 @@ const le = {
       graphMaxY: this.graphMaxY,
       lines: [...this.lines]
     }, this.startDateTime) {
-      let t = Z(this.startDateTime / 1e6);
+      let t = W(this.startDateTime / 1e6);
       this.startDate = this.formatDate(t, this.timeZone), this.startTime = this.formatTimeHMS(t, this.timeZone);
     } else {
       let t = /* @__PURE__ */ new Date() - 36e5;
       this.startDate = this.formatDate(t, this.timeZone), this.startTime = this.formatTimeHMS(t, this.timeZone);
     }
     if (this.endDateTime) {
-      let t = Z(this.endDateTime / 1e6);
+      let t = W(this.endDateTime / 1e6);
       this.endDate = this.formatDate(t, this.timeZone), this.endTime = this.formatTimeHMS(t, this.timeZone);
     }
   },
@@ -133,75 +133,75 @@ const le = {
       this.graph.lines.splice(e, 1);
     }
   }
-}, ae = { class: "edit-box" }, ne = { class: "edit-box" }, oe = { class: "edit-box" }, re = { class: "edit-box" };
-function de(t, e, s, h, a, n) {
-  const r = u("v-spacer"), o = u("v-toolbar"), p = u("v-tab"), f = u("v-tabs"), g = u("v-text-field"), D = u("v-card-text"), w = u("v-col"), _ = u("v-select"), v = u("v-row"), Y = u("v-tabs-window-item"), O = u("v-btn"), z = u("v-list-item"), k = u("v-icon"), V = u("v-tooltip"), G = u("v-list"), L = u("v-data-table"), R = u("v-tabs-window"), H = u("v-card-actions"), d = u("v-card"), U = u("v-dialog");
-  return y(), T(U, {
-    modelValue: n.show,
-    "onUpdate:modelValue": e[12] || (e[12] = (c) => n.show = c),
-    onKeydown: e[13] || (e[13] = j((c) => t.$emit("cancel"), ["esc"])),
-    "max-width": "700"
+}, ie = { class: "edit-box" }, se = { class: "edit-box" }, le = { class: "edit-box" }, ae = { class: "edit-box" };
+function ne(t, e, i, u, l, a) {
+  const r = h("v-spacer"), d = h("v-toolbar"), m = h("v-tab"), p = h("v-tabs"), f = h("v-text-field"), w = h("v-card-text"), y = h("v-col"), T = h("v-select"), c = h("v-row"), M = h("v-tabs-window-item"), D = h("v-btn"), x = h("v-list-item"), S = h("v-list"), E = h("v-data-table"), L = h("v-tabs-window"), U = h("v-card-actions"), I = h("v-card"), z = h("v-dialog");
+  return v(), b(z, {
+    modelValue: a.show,
+    "onUpdate:modelValue": e[12] || (e[12] = (o) => a.show = o),
+    "max-width": "700",
+    onKeydown: e[13] || (e[13] = K((o) => t.$emit("cancel"), ["esc"]))
   }, {
-    default: l(() => [
-      i(o, { height: "24" }, {
-        default: l(() => [
-          i(r),
-          e[14] || (e[14] = b("span", null, " Edit Graph ", -1)),
-          i(r)
+    default: n(() => [
+      s(d, { height: "24" }, {
+        default: n(() => [
+          s(r),
+          e[14] || (e[14] = k("span", null, " Edit Graph ", -1)),
+          s(r)
         ]),
         _: 1
       }),
-      i(d, { class: "pa-3" }, {
-        default: l(() => [
-          i(f, {
+      s(I, { class: "pa-3" }, {
+        default: n(() => [
+          s(p, {
             modelValue: t.tab,
-            "onUpdate:modelValue": e[0] || (e[0] = (c) => t.tab = c),
+            "onUpdate:modelValue": e[0] || (e[0] = (o) => t.tab = o),
             class: "ml-3"
           }, {
-            default: l(() => [
-              i(p, { value: "0" }, {
-                default: l(() => e[15] || (e[15] = [
-                  m(" Settings ")
+            default: n(() => [
+              s(m, { value: "0" }, {
+                default: n(() => e[15] || (e[15] = [
+                  g(" Settings ")
                 ])),
                 _: 1
               }),
-              i(p, { value: "1" }, {
-                default: l(() => e[16] || (e[16] = [
-                  m(" Scale / Lines ")
+              s(m, { value: "1" }, {
+                default: n(() => e[16] || (e[16] = [
+                  g(" Scale / Lines ")
                 ])),
                 _: 1
               }),
-              i(p, { value: "2" }, {
-                default: l(() => e[17] || (e[17] = [
-                  m(" Items ")
+              s(m, { value: "2" }, {
+                default: n(() => e[17] || (e[17] = [
+                  g(" Items ")
                 ])),
                 _: 1
               })
             ]),
             _: 1
           }, 8, ["modelValue"]),
-          i(R, {
+          s(L, {
             modelValue: t.tab,
-            "onUpdate:modelValue": e[10] || (e[10] = (c) => t.tab = c)
+            "onUpdate:modelValue": e[10] || (e[10] = (o) => t.tab = o)
           }, {
-            default: l(() => [
-              i(Y, {
+            default: n(() => [
+              s(M, {
                 value: "0",
                 eager: ""
               }, {
-                default: l(() => [
-                  b("div", ae, [
-                    i(v, null, {
-                      default: l(() => [
-                        i(w, null, {
-                          default: l(() => [
-                            i(D, { class: "pa-0" }, {
-                              default: l(() => [
-                                i(g, {
+                default: n(() => [
+                  k("div", ie, [
+                    s(c, null, {
+                      default: n(() => [
+                        s(y, null, {
+                          default: n(() => [
+                            s(w, { class: "pa-0" }, {
+                              default: n(() => [
+                                s(f, {
+                                  modelValue: t.graph.title,
+                                  "onUpdate:modelValue": e[1] || (e[1] = (o) => t.graph.title = o),
                                   class: "pb-2",
                                   label: "Title",
-                                  modelValue: t.graph.title,
-                                  "onUpdate:modelValue": e[1] || (e[1] = (c) => t.graph.title = c),
                                   "hide-details": ""
                                 }, null, 8, ["modelValue"])
                               ]),
@@ -210,16 +210,16 @@ function de(t, e, s, h, a, n) {
                           ]),
                           _: 1
                         }),
-                        i(w, null, {
-                          default: l(() => [
-                            i(_, {
+                        s(y, null, {
+                          default: n(() => [
+                            s(T, {
+                              modelValue: t.graph.legendPosition,
+                              "onUpdate:modelValue": e[2] || (e[2] = (o) => t.graph.legendPosition = o),
                               label: "Legend Position",
                               "hide-details": "",
                               items: t.legendPositions,
-                              modelValue: t.graph.legendPosition,
-                              "onUpdate:modelValue": e[2] || (e[2] = (c) => t.graph.legendPosition = c),
                               style: { "max-width": "280px" }
-                            }, null, 8, ["items", "modelValue"])
+                            }, null, 8, ["modelValue", "items"])
                           ]),
                           _: 1
                         })
@@ -227,77 +227,77 @@ function de(t, e, s, h, a, n) {
                       _: 1
                     })
                   ]),
-                  b("div", ne, [
-                    i(D, { class: "pa-0" }, {
-                      default: l(() => e[18] || (e[18] = [
-                        m(" Select a start date/time for the graph. Leave blank for start now. ")
+                  k("div", se, [
+                    s(w, { class: "pa-0" }, {
+                      default: n(() => e[18] || (e[18] = [
+                        g(" Select a start date/time for the graph. Leave blank for start now. ")
                       ])),
                       _: 1
                     }),
-                    i(v, null, {
-                      default: l(() => [
-                        i(w, null, {
-                          default: l(() => [
-                            i(g, {
+                    s(c, null, {
+                      default: n(() => [
+                        s(y, null, {
+                          default: n(() => [
+                            s(f, {
+                              modelValue: t.startDate,
+                              "onUpdate:modelValue": e[3] || (e[3] = (o) => t.startDate = o),
                               label: "Start Date",
                               name: `date${Date.now()}`,
                               rules: [t.rules.date],
-                              modelValue: t.startDate,
-                              "onUpdate:modelValue": e[3] || (e[3] = (c) => t.startDate = c),
                               type: "date"
-                            }, null, 8, ["name", "rules", "modelValue"])
+                            }, null, 8, ["modelValue", "name", "rules"])
                           ]),
                           _: 1
                         }),
-                        i(w, null, {
-                          default: l(() => [
-                            i(g, {
+                        s(y, null, {
+                          default: n(() => [
+                            s(f, {
+                              modelValue: t.startTime,
+                              "onUpdate:modelValue": e[4] || (e[4] = (o) => t.startTime = o),
                               label: "Start Time",
                               name: `time${Date.now()}`,
                               rules: [t.rules.time],
-                              modelValue: t.startTime,
-                              "onUpdate:modelValue": e[4] || (e[4] = (c) => t.startTime = c),
                               type: "time",
                               step: "1"
-                            }, null, 8, ["name", "rules", "modelValue"])
+                            }, null, 8, ["modelValue", "name", "rules"])
                           ]),
                           _: 1
                         })
                       ]),
                       _: 1
                     }),
-                    i(D, { class: "pa-0" }, {
-                      default: l(() => e[19] || (e[19] = [
-                        m(" Select a end date/time for the graph. Leave blank for continuous real-time graphing. ")
+                    s(w, { class: "pa-0" }, {
+                      default: n(() => e[19] || (e[19] = [
+                        g(" Select a end date/time for the graph. Leave blank for continuous real-time graphing. ")
                       ])),
                       _: 1
                     }),
-                    i(v, null, {
-                      default: l(() => [
-                        i(w, null, {
-                          default: l(() => [
-                            i(g, {
+                    s(c, null, {
+                      default: n(() => [
+                        s(y, null, {
+                          default: n(() => [
+                            s(f, {
+                              modelValue: t.endDate,
+                              "onUpdate:modelValue": e[5] || (e[5] = (o) => t.endDate = o),
                               label: "End Date",
                               name: `date${Date.now()}`,
                               rules: [t.rules.date],
-                              modelValue: t.endDate,
-                              "onUpdate:modelValue": e[5] || (e[5] = (c) => t.endDate = c),
                               type: "date"
-                            }, null, 8, ["name", "rules", "modelValue"])
+                            }, null, 8, ["modelValue", "name", "rules"])
                           ]),
                           _: 1
                         }),
-                        i(w, null, {
-                          default: l(() => [
-                            i(g, {
+                        s(y, null, {
+                          default: n(() => [
+                            s(f, {
+                              modelValue: t.endTime,
+                              "onUpdate:modelValue": e[6] || (e[6] = (o) => t.endTime = o),
                               label: "End Time",
                               name: `time${Date.now()}`,
                               rules: [t.rules.time],
-                              modelValue: t.endTime,
-                              "onUpdate:modelValue": e[6] || (e[6] = (c) => t.endTime = c),
                               type: "time",
                               step: "1"
-                            }, null, 8, ["name", "rules", "modelValue"])
+                            }, null, 8, ["modelValue", "name", "rules"])
                           ]),
                           _: 1
                         })
@@ -308,39 +308,39 @@ function de(t, e, s, h, a, n) {
                 ]),
                 _: 1
               }),
-              i(Y, {
+              s(M, {
                 value: "1",
                 eager: ""
               }, {
-                default: l(() => [
-                  b("div", oe, [
-                    i(D, { class: "pa-0" }, {
-                      default: l(() => e[20] || (e[20] = [
-                        m(" Set a min or max Y value to override automatic scaling ")
+                default: n(() => [
+                  k("div", le, [
+                    s(w, { class: "pa-0" }, {
+                      default: n(() => e[20] || (e[20] = [
+                        g(" Set a min or max Y value to override automatic scaling ")
                       ])),
                       _: 1
                     }),
-                    i(v, { dense: "" }, {
-                      default: l(() => [
-                        i(w, { class: "px-2" }, {
-                          default: l(() => [
-                            i(g, {
+                    s(c, { dense: "" }, {
+                      default: n(() => [
+                        s(y, { class: "px-2" }, {
+                          default: n(() => [
+                            s(f, {
+                              modelValue: t.graph.graphMinY,
+                              "onUpdate:modelValue": e[7] || (e[7] = (o) => t.graph.graphMinY = o),
                               "hide-details": "",
                               label: "Min Y Axis (Optional)",
-                              modelValue: t.graph.graphMinY,
-                              "onUpdate:modelValue": e[7] || (e[7] = (c) => t.graph.graphMinY = c),
                               type: "number"
                             }, null, 8, ["modelValue"])
                           ]),
                           _: 1
                         }),
-                        i(w, { class: "px-2" }, {
-                          default: l(() => [
-                            i(g, {
+                        s(y, { class: "px-2" }, {
+                          default: n(() => [
+                            s(f, {
+                              modelValue: t.graph.graphMaxY,
+                              "onUpdate:modelValue": e[8] || (e[8] = (o) => t.graph.graphMaxY = o),
                               "hide-details": "",
                               label: "Max Y Axis (Optional)",
-                              modelValue: t.graph.graphMaxY,
-                              "onUpdate:modelValue": e[8] || (e[8] = (c) => t.graph.graphMaxY = c),
                               type: "number"
                             }, null, 8, ["modelValue"])
                           ]),
@@ -350,76 +350,66 @@ function de(t, e, s, h, a, n) {
                       _: 1
                     })
                   ]),
-                  b("div", re, [
-                    i(G, {
+                  k("div", ae, [
+                    s(S, {
                       density: "compact",
                       class: "horizontal-lines"
                     }, {
-                      default: l(() => [
-                        i(z, null, {
-                          default: l(() => [
-                            e[22] || (e[22] = b("span", { style: { "padding-top": "5px" } }, " Add horizontal lines to the graph ", -1)),
-                            i(r),
-                            i(O, {
-                              onClick: e[9] || (e[9] = (c) => n.addLine())
+                      default: n(() => [
+                        s(x, null, {
+                          default: n(() => [
+                            e[22] || (e[22] = k("span", { style: { "padding-top": "5px" } }, " Add horizontal lines to the graph ", -1)),
+                            s(r),
+                            s(D, {
+                              onClick: e[9] || (e[9] = (o) => a.addLine())
                             }, {
-                              default: l(() => e[21] || (e[21] = [
-                                m(" New Line ")
+                              default: n(() => e[21] || (e[21] = [
+                                g(" New Line ")
                               ])),
                               _: 1
                             })
                           ]),
                           _: 1
                         }),
-                        (y(!0), P(F, null, J(t.graph.lines, (c, A) => (y(), T(z, {
-                          key: A,
-                          value: c,
+                        (v(!0), N(X, null, j(t.graph.lines, (o, R) => (v(), b(x, {
+                          key: R,
+                          value: o,
                           color: "primary"
                         }, {
-                          default: l(() => [
-                            i(v, null, {
-                              default: l(() => [
-                                i(w, null, {
-                                  default: l(() => [
-                                    i(g, {
-                                      label: "Y Value",
-                                      modelValue: c.yValue,
-                                      "onUpdate:modelValue": (N) => c.yValue = N
+                          default: n(() => [
+                            s(c, null, {
+                              default: n(() => [
+                                s(y, null, {
+                                  default: n(() => [
+                                    s(f, {
+                                      modelValue: o.yValue,
+                                      "onUpdate:modelValue": (Y) => o.yValue = Y,
+                                      label: "Y Value"
                                     }, null, 8, ["modelValue", "onUpdate:modelValue"])
                                   ]),
                                   _: 2
                                 }, 1024),
-                                i(w, null, {
-                                  default: l(() => [
-                                    i(_, {
+                                s(y, null, {
+                                  default: n(() => [
+                                    s(T, {
+                                      modelValue: o.color,
+                                      "onUpdate:modelValue": (Y) => o.color = Y,
                                       label: "Color",
                                       "hide-details": "",
-                                      items: s.colors,
-                                      modelValue: c.color,
-                                      "onUpdate:modelValue": (N) => c.color = N
-                                    }, null, 8, ["items", "modelValue", "onUpdate:modelValue"])
+                                      items: i.colors
+                                    }, null, 8, ["modelValue", "onUpdate:modelValue", "items"])
                                   ]),
                                   _: 2
                                 }, 1024),
-                                i(w, null, {
-                                  default: l(() => [
-                                    i(V, {
-                                      text: "Remove",
-                                      location: "top"
-                                    }, {
-                                      activator: l(({ props: N }) => [
-                                        i(k, x({ ref_for: !0 }, N, {
-                                          style: { padding: "30px" },
-                                          onClick: (xe) => n.removeLine(c)
-                                        }), {
-                                          default: l(() => e[23] || (e[23] = [
-                                            m("mdi-delete")
-                                          ])),
-                                          _: 2
-                                        }, 1040, ["onClick"])
-                                      ]),
-                                      _: 2
-                                    }, 1024)
+                                s(y, null, {
+                                  default: n(() => [
+                                    s(D, {
+                                      style: { padding: "30px" },
+                                      icon: "mdi-delete",
+                                      variant: "text",
+                                      "aria-label": "Remove Line",
+                                      onClick: (Y) => a.removeLine(o)
+                                    }, null, 8, ["onClick"])
                                   ]),
                                   _: 2
                                 }, 1024)
@@ -436,42 +426,32 @@ function de(t, e, s, h, a, n) {
                 ]),
                 _: 1
               }),
-              i(Y, {
+              s(M, {
                 value: "2",
                 eager: ""
               }, {
-                default: l(() => [
-                  i(L, {
+                default: n(() => [
+                  s(E, {
                     "item-key": "itemId",
                     class: "elevation-1 my-2",
                     "data-test": "edit-graph-items",
                     headers: t.itemHeaders,
-                    items: n.editItems,
+                    items: a.editItems,
                     "items-per-page": 5,
                     "footer-props": {
                       "items-per-page-options": [5]
                     }
                   }, {
-                    "item.actions": l(({ item: c }) => [
-                      i(V, {
-                        text: "Remove",
-                        location: "top"
-                      }, {
-                        activator: l(({ props: A }) => [
-                          i(k, x(A, {
-                            onClick: (N) => t.$emit("remove", c)
-                          }), {
-                            default: l(() => e[24] || (e[24] = [
-                              m(" mdi-delete ")
-                            ])),
-                            _: 2
-                          }, 1040, ["onClick"])
-                        ]),
-                        _: 2
-                      }, 1024)
+                    "item.actions": n(({ item: o }) => [
+                      s(D, {
+                        icon: "mdi-delete",
+                        variant: "text",
+                        "aria-label": "Remove Item",
+                        onClick: (R) => t.$emit("remove", o)
+                      }, null, 8, ["onClick"])
                     ]),
-                    "no-data": l(() => e[25] || (e[25] = [
-                      b("span", null, " Currently no items on this graph ", -1)
+                    "no-data": n(() => e[23] || (e[23] = [
+                      k("span", null, " Currently no items on this graph ", -1)
                     ])),
                     _: 1
                   }, 8, ["headers", "items"])
@@ -481,24 +461,24 @@ function de(t, e, s, h, a, n) {
             ]),
             _: 1
           }, 8, ["modelValue"]),
-          i(H, { class: "px-2" }, {
-            default: l(() => [
-              i(r),
-              i(O, {
+          s(U, { class: "px-2" }, {
+            default: n(() => [
+              s(r),
+              s(D, {
                 variant: "outlined",
-                onClick: e[11] || (e[11] = (c) => t.$emit("cancel"))
+                onClick: e[11] || (e[11] = (o) => t.$emit("cancel"))
               }, {
-                default: l(() => e[26] || (e[26] = [
-                  m(" Cancel ")
+                default: n(() => e[24] || (e[24] = [
+                  g(" Cancel ")
                 ])),
                 _: 1
               }),
-              i(O, {
+              s(D, {
                 variant: "flat",
-                onClick: n.closeOk
+                onClick: a.closeOk
               }, {
-                default: l(() => e[27] || (e[27] = [
-                  m(" Ok ")
+                default: n(() => e[25] || (e[25] = [
+                  g(" Ok ")
                 ])),
                 _: 1
               }, 8, ["onClick"])
@@ -512,7 +492,7 @@ function de(t, e, s, h, a, n) {
     _: 1
   }, 8, ["modelValue"]);
 }
-const ue = /* @__PURE__ */ W(le, [["render", de]]), he = {
+const oe = /* @__PURE__ */ P(te, [["render", ne]]), re = {
   props: {
     modelValue: Boolean,
     item: {
@@ -555,110 +535,110 @@ const ue = /* @__PURE__ */ W(le, [["render", de]]), he = {
     }
   },
   async created() {
-    this.editItem = { ...this.item }, new ie().get_item(this.item.targetName, this.item.packetName, this.item.itemName).then((t) => {
-      for (const [e, s] of Object.entries(t.limits))
-        Object.keys(s).includes("red_low") && (this.limits[e] = Object.values(s));
+    this.editItem = { ...this.item }, new $().get_item(this.item.targetName, this.item.packetName, this.item.itemName).then((t) => {
+      for (const [e, i] of Object.entries(t.limits))
+        Object.keys(i).includes("red_low") && (this.limits[e] = Object.values(i));
       this.limitsName = Object.keys(this.limits).find(
         // Little hack to compare arrays you convert them to strings
         (e) => this.limits[e] + "" == this.editItem.limits + ""
       );
     });
   }
-}, me = { key: 0 }, pe = { class: "pa-3" };
-function fe(t, e, s, h, a, n) {
-  const r = u("v-card-title"), o = u("v-select"), p = u("v-card-text"), f = u("v-spacer"), g = u("v-btn"), D = u("v-card-actions"), w = u("v-card"), _ = u("v-dialog");
-  return y(), T(_, {
-    modelValue: n.show,
-    "onUpdate:modelValue": e[9] || (e[9] = (v) => n.show = v),
+}, de = { key: 0 }, ue = { class: "pa-3" };
+function he(t, e, i, u, l, a) {
+  const r = h("v-card-title"), d = h("v-select"), m = h("v-card-text"), p = h("v-spacer"), f = h("v-btn"), w = h("v-card-actions"), y = h("v-card"), T = h("v-dialog");
+  return v(), b(T, {
+    modelValue: a.show,
+    "onUpdate:modelValue": e[9] || (e[9] = (c) => a.show = c),
     width: "400",
-    onKeydown: e[10] || (e[10] = j((v) => t.success(), ["enter"]))
+    onKeydown: e[10] || (e[10] = K((c) => t.success(), ["enter"]))
   }, {
-    default: l(() => [
-      i(w, null, {
-        default: l(() => [
-          i(r, { class: "mb-2" }, {
-            default: l(() => e[11] || (e[11] = [
-              m("Edit Item")
+    default: n(() => [
+      s(y, null, {
+        default: n(() => [
+          s(r, { class: "mb-2" }, {
+            default: n(() => e[11] || (e[11] = [
+              g("Edit Item")
             ])),
             _: 1
           }),
-          i(p, null, {
-            default: l(() => [
-              i(o, {
+          s(m, null, {
+            default: n(() => [
+              s(d, {
                 variant: "outlined",
                 "hide-details": "",
                 label: "Value Type",
                 items: t.valueTypes,
                 modelValue: t.editItem.valueType,
-                "onUpdate:modelValue": e[0] || (e[0] = (v) => t.editItem.valueType = v),
+                "onUpdate:modelValue": e[0] || (e[0] = (c) => t.editItem.valueType = c),
                 class: "mb-2"
               }, null, 8, ["items", "modelValue"]),
-              i(o, {
+              s(d, {
                 variant: "outlined",
                 "hide-details": "",
                 label: "Reduction",
                 items: t.reduction,
                 modelValue: t.editItem.reduced,
-                "onUpdate:modelValue": e[1] || (e[1] = (v) => t.editItem.reduced = v),
+                "onUpdate:modelValue": e[1] || (e[1] = (c) => t.editItem.reduced = c),
                 class: "mb-2"
               }, null, 8, ["items", "modelValue"]),
-              i(o, {
+              s(d, {
                 variant: "outlined",
                 "hide-details": "",
                 label: "Reduced Type",
                 items: t.reducedTypes,
                 disabled: t.editItem.reduced === "DECOM",
                 modelValue: t.editItem.reducedType,
-                "onUpdate:modelValue": e[2] || (e[2] = (v) => t.editItem.reducedType = v),
+                "onUpdate:modelValue": e[2] || (e[2] = (c) => t.editItem.reducedType = c),
                 class: "mb-2"
               }, null, 8, ["items", "disabled", "modelValue"]),
-              i(o, {
+              s(d, {
                 variant: "outlined",
                 "hide-details": "",
                 label: "Color",
-                items: s.colors,
+                items: i.colors,
                 modelValue: t.editItem.color,
                 "onUpdate:modelValue": [
-                  e[3] || (e[3] = (v) => t.editItem.color = v),
-                  e[4] || (e[4] = (v) => t.$emit("changeColor", v))
+                  e[3] || (e[3] = (c) => t.editItem.color = c),
+                  e[4] || (e[4] = (c) => t.$emit("changeColor", c))
                 ],
                 class: "mb-2"
               }, null, 8, ["items", "modelValue"]),
-              n.limitsNames.length > 1 ? (y(), P("div", me, [
-                i(o, {
+              a.limitsNames.length > 1 ? (v(), N("div", de, [
+                s(d, {
                   variant: "outlined",
                   "hide-details": "",
                   label: "Display Limits",
-                  items: n.limitsNames,
+                  items: a.limitsNames,
                   modelValue: t.limitsName,
                   "onUpdate:modelValue": [
-                    e[5] || (e[5] = (v) => t.limitsName = v),
-                    e[6] || (e[6] = (v) => t.$emit("changeLimits", t.limits[t.limitsName]))
+                    e[5] || (e[5] = (c) => t.limitsName = c),
+                    e[6] || (e[6] = (c) => t.$emit("changeLimits", t.limits[t.limitsName]))
                   ]
                 }, null, 8, ["items", "modelValue"]),
-                b("div", pe, E(t.limitsName) + ": " + E(t.limits[t.limitsName]), 1)
-              ])) : S("", !0)
+                k("div", ue, C(t.limitsName) + ": " + C(t.limits[t.limitsName]), 1)
+              ])) : _("", !0)
             ]),
             _: 1
           }),
-          i(D, { class: "px-2" }, {
-            default: l(() => [
-              i(f),
-              i(g, {
+          s(w, { class: "px-2" }, {
+            default: n(() => [
+              s(p),
+              s(f, {
                 variant: "outlined",
-                onClick: e[7] || (e[7] = (v) => t.$emit("cancel"))
+                onClick: e[7] || (e[7] = (c) => t.$emit("cancel"))
               }, {
-                default: l(() => e[12] || (e[12] = [
-                  m(" Cancel ")
+                default: n(() => e[12] || (e[12] = [
+                  g(" Cancel ")
                 ])),
                 _: 1
               }),
-              i(g, {
+              s(f, {
                 variant: "flat",
-                onClick: e[8] || (e[8] = (v) => t.$emit("close", t.editItem))
+                onClick: e[8] || (e[8] = (c) => t.$emit("close", t.editItem))
               }, {
-                default: l(() => e[13] || (e[13] = [
-                  m(" Ok ")
+                default: n(() => e[13] || (e[13] = [
+                  g(" Ok ")
                 ])),
                 _: 1
               })
@@ -672,11 +652,12 @@ function fe(t, e, s, h, a, n) {
     _: 1
   }, 8, ["modelValue"]);
 }
-const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
+const me = /* @__PURE__ */ P(re, [["render", he]]), pe = {
   components: {
-    GraphEditDialog: ue,
-    GraphEditItemDialog: ce
+    GraphEditDialog: oe,
+    GraphEditItemDialog: me
   },
+  mixins: [B],
   props: {
     id: {
       type: Number,
@@ -738,7 +719,6 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
       default: "local"
     }
   },
-  mixins: [X],
   data() {
     return {
       lines: [],
@@ -778,7 +758,7 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
       drawInterval: null,
       zoomChart: !1,
       zoomOverview: !1,
-      cable: new se(),
+      cable: new ee(),
       subscription: null,
       needToUpdate: !1,
       errorDialog: !1,
@@ -817,6 +797,36 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
       return this.errorDialog && this.errors.length > 0 ? JSON.stringify(this.errors, null, 4) : null;
     }
   },
+  watch: {
+    state: function(t, e) {
+      switch (t) {
+        case "start":
+          e === "stop" && this.startGraph();
+          break;
+        // case 'pause': Nothing to do ... see the data function
+        case "stop":
+          this.stopGraph();
+          break;
+      }
+    },
+    data: function(t, e) {
+      this.dataChanged = !0;
+    },
+    graphMinY: function(t, e) {
+      let i = parseFloat(t);
+      isNaN(i) || (this.graphMinY = i), this.setGraphRange();
+    },
+    graphMaxY: function(t, e) {
+      let i = parseFloat(t);
+      isNaN(i) || (this.graphMaxY = i), this.setGraphRange();
+    },
+    graphStartDateTime: function(t, e) {
+      t && typeof t == "string" ? (this.graphStartDateTime = this.parseDateTime(this.graphStartDateTime, this.timeZone) * 1e6, this.graphStartDateTime !== e && (this.needToUpdate = !0)) : t === null && e && (this.graphStartDateTime = null, this.needToUpdate = !0);
+    },
+    graphEndDateTime: function(t, e) {
+      t && typeof t == "string" ? (this.graphEndDateTime = this.parseDateTime(this.graphEndDateTime, this.timeZone) * 1e6, this.graphEndDateTime !== e && (this.needToUpdate = !0)) : t === null && e && (this.graphEndDateTime = null, this.needToUpdate = !0);
+    }
+  },
   created() {
     this.title = `Graph ${this.id}`;
     for (const [t, e] of this.items.entries())
@@ -824,26 +834,26 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
   },
   mounted() {
     const { chartSeries: t, overviewSeries: e } = this.items.reduce(
-      (h, a) => {
-        const n = {
+      (u, l) => {
+        const a = {
           spanGaps: !0
         };
-        return h.chartSeries.push({
-          ...n,
-          item: a,
-          label: this.formatLabel(a),
-          stroke: (r, o) => this.items[o - 1].color,
+        return u.chartSeries.push({
+          ...a,
+          item: l,
+          label: this.formatLabel(l),
+          stroke: (r, d) => this.items[d - 1].color,
           width: 2,
-          value: (r, o) => typeof o == "string" || isNaN(o) ? "NaN" : o == null ? "--" : o.toFixed(3)
-        }), h.overviewSeries.push({
-          ...n
-        }), h;
+          value: (r, d) => typeof d == "string" || isNaN(d) ? "NaN" : d == null ? "--" : d.toFixed(3)
+        }), u.overviewSeries.push({
+          ...a
+        }), u;
       },
       { chartSeries: [], overviewSeries: [] }
     );
-    let s = {};
+    let i = {};
     if (this.sparkline)
-      this.hideToolbarData = !0, this.hideOverviewData = !0, this.showOverview = !1, s = {
+      this.hideToolbarData = !0, this.hideOverviewData = !0, this.showOverview = !1, i = {
         width: this.width,
         height: this.height,
         pxAlign: !1,
@@ -876,24 +886,24 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
             // TODO: Light / dark theme
           }
         ]
-      }, this.graph = new I(
-        s,
+      }, this.graph = new V(
+        i,
         this.data,
         document.getElementById(`chart${this.id}`)
       );
     else {
-      let h = Intl.DateTimeFormat().resolvedOptions().timeZone;
-      this.timeZone && this.timeZone !== "local" && (h = this.timeZone), s = {
+      let u = Intl.DateTimeFormat().resolvedOptions().timeZone;
+      this.timeZone && this.timeZone !== "local" && (u = this.timeZone), i = {
         ...this.getSize("chart"),
         ...this.getScales(),
         ...this.getAxes("chart"),
         // series: series, // TODO: Uncomment with the performance code
         plugins: [this.linesPlugin()],
-        tzDate: (n) => I.tzDate(new Date(n * 1e3), h),
+        tzDate: (a) => V.tzDate(new Date(a * 1e3), u),
         series: [
           {
             label: "Time",
-            value: (n, r) => (
+            value: (a, r) => (
               // Convert the unix timestamp into a formatted date / time
               r == null ? "--" : this.formatSeconds(r, this.timeZone)
             )
@@ -912,55 +922,55 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
             // setSeries: true,
           },
           bind: {
-            mouseup: (n, r, o) => (p) => {
-              this.state === "pause" && n.select.width === 0 && this.$emit("start"), o(p);
+            mouseup: (a, r, d) => (m) => {
+              this.state === "pause" && a.select.width === 0 && this.$emit("start"), d(m);
             }
           }
         },
         hooks: {
           setScale: [
-            (n, r) => {
+            (a, r) => {
               if (r === "x" && !this.zoomOverview && this.overview) {
                 this.zoomChart = !0;
-                let o = Math.round(
-                  this.overview.valToPos(n.scales.x.min, "x")
-                ), p = Math.round(
-                  this.overview.valToPos(n.scales.x.max, "x")
+                let d = Math.round(
+                  this.overview.valToPos(a.scales.x.min, "x")
+                ), m = Math.round(
+                  this.overview.valToPos(a.scales.x.max, "x")
                 );
-                this.overview.setSelect({ left: o, width: p - o }), this.zoomChart = !1;
+                this.overview.setSelect({ left: d, width: m - d }), this.zoomChart = !1;
               }
             }
           ],
           setSelect: [
-            (n) => {
-              this.state === "start" && n.select.width > 0 && this.$emit("pause");
+            (a) => {
+              this.state === "start" && a.select.width > 0 && this.$emit("pause");
             }
           ],
           ready: [
-            (n) => {
-              n.root.querySelector(".u-over").addEventListener("contextmenu", (p) => {
-                p.preventDefault(), this.itemMenu = !1, this.legendMenu = !1, this.editGraphMenuX = p.clientX, this.editGraphMenuY = p.clientY, this.editGraphMenu = !0;
+            (a) => {
+              a.root.querySelector(".u-over").addEventListener("contextmenu", (m) => {
+                m.preventDefault(), this.itemMenu = !1, this.legendMenu = !1, this.editGraphMenuX = m.clientX, this.editGraphMenuY = m.clientY, this.editGraphMenu = !0;
               });
-              let o = n.root.querySelector(".u-legend");
-              o.addEventListener("contextmenu", (p) => {
-                p.preventDefault(), this.editGraphMenu = !1, this.legendMenu = !1, this.itemMenuX = p.clientX, this.itemMenuY = p.clientY;
-                let f = p.target.closest(".u-series"), g = Array.prototype.slice.call(o.childNodes[0].childNodes).indexOf(f), D = n.series[g];
-                D.item ? (this.selectedItem = D.item, this.itemMenu = !0) : (this.itemMenu = !1, this.legendMenuX = p.clientX, this.legendMenuY = p.clientY, this.legendMenu = !0);
-              }), o.querySelector("tbody").appendChild(this.$refs.info);
+              let d = a.root.querySelector(".u-legend");
+              d.addEventListener("contextmenu", (m) => {
+                m.preventDefault(), this.editGraphMenu = !1, this.legendMenu = !1, this.itemMenuX = m.clientX, this.itemMenuY = m.clientY;
+                let p = m.target.closest(".u-series"), f = Array.prototype.slice.call(d.childNodes[0].childNodes).indexOf(p), w = a.series[f];
+                w.item ? (this.selectedItem = w.item, this.itemMenu = !0) : (this.itemMenu = !1, this.legendMenuX = m.clientX, this.legendMenuY = m.clientY, this.legendMenu = !0);
+              }), d.querySelector("tbody").appendChild(this.$refs.info);
             }
           ]
         }
-      }, this.graph = new I(
-        s,
+      }, this.graph = new V(
+        i,
         this.data,
         document.getElementById(`chart${this.id}`)
       );
-      const a = {
+      const l = {
         ...this.getSize("overview"),
         ...this.getScales(),
         ...this.getAxes("overview"),
         // series: series, // TODO: Uncomment with the performance code
-        tzDate: (n) => I.tzDate(new Date(n * 1e3), h),
+        tzDate: (a) => V.tzDate(new Date(a * 1e3), u),
         series: [...e],
         cursor: {
           y: !1,
@@ -975,21 +985,21 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
         },
         hooks: {
           setSelect: [
-            (n) => {
+            (a) => {
               if (!this.zoomChart) {
-                this.state === "start" && n.select.width > 0 && this.$emit("pause"), this.zoomOverview = !0;
-                let r = n.posToVal(n.select.left, "x"), o = n.posToVal(
-                  n.select.left + n.select.width,
+                this.state === "start" && a.select.width > 0 && this.$emit("pause"), this.zoomOverview = !0;
+                let r = a.posToVal(a.select.left, "x"), d = a.posToVal(
+                  a.select.left + a.select.width,
                   "x"
                 );
-                this.graph.setScale("x", { min: r, max: o }), this.zoomOverview = !1;
+                this.graph.setScale("x", { min: r, max: d }), this.zoomOverview = !1;
               }
             }
           ]
         }
       };
-      this.hideOverview || (this.overview = new I(
-        a,
+      this.hideOverview || (this.overview = new V(
+        l,
         this.data,
         document.getElementById(`overview${this.id}`)
       )), this.moveLegend(this.legendPosition), window.addEventListener("resize", this.resize);
@@ -999,36 +1009,6 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
   beforeUnmount: function() {
     this.stopGraph(), this.cable.disconnect(), window.removeEventListener("resize", this.resize);
   },
-  watch: {
-    state: function(t, e) {
-      switch (t) {
-        case "start":
-          e === "stop" && this.startGraph();
-          break;
-        // case 'pause': Nothing to do ... see the data function
-        case "stop":
-          this.stopGraph();
-          break;
-      }
-    },
-    data: function(t, e) {
-      this.dataChanged = !0;
-    },
-    graphMinY: function(t, e) {
-      let s = parseFloat(t);
-      isNaN(s) || (this.graphMinY = s), this.setGraphRange();
-    },
-    graphMaxY: function(t, e) {
-      let s = parseFloat(t);
-      isNaN(s) || (this.graphMaxY = s), this.setGraphRange();
-    },
-    graphStartDateTime: function(t, e) {
-      t && typeof t == "string" ? (this.graphStartDateTime = this.parseDateTime(this.graphStartDateTime, this.timeZone) * 1e6, this.graphStartDateTime !== e && (this.needToUpdate = !0)) : t === null && e && (this.graphStartDateTime = null, this.needToUpdate = !0);
-    },
-    graphEndDateTime: function(t, e) {
-      t && typeof t == "string" ? (this.graphEndDateTime = this.parseDateTime(this.graphEndDateTime, this.timeZone) * 1e6, this.graphEndDateTime !== e && (this.needToUpdate = !0)) : t === null && e && (this.graphEndDateTime = null, this.needToUpdate = !0);
-    }
-  },
   methods: {
     startGraph: function() {
       this.subscribe(), this.timeout = setTimeout(() => {
@@ -1047,8 +1027,8 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
       if (this.state === "pause" || !this.dataChanged)
         return;
       this.graph.setData(this.data), this.overview && this.overview.setData(this.data);
-      let t = this.data[0][this.data[0].length - 1], e = this.data[0][this.data[0].length - this.pointsGraphed], s = this.data[0][0];
-      s < t - this.secondsGraphed && (s = t - this.secondsGraphed), e > s && (s = e), this.graph.setScale("x", { min: s, max: t }), this.dataChanged = !1;
+      let t = this.data[0][this.data[0].length - 1], e = this.data[0][this.data[0].length - this.pointsGraphed], i = this.data[0][0];
+      i < t - this.secondsGraphed && (i = t - this.secondsGraphed), e > i && (i = e), this.graph.setScale("x", { min: i, max: t }), this.dataChanged = !1;
     },
     formatLabel(t) {
       if (t.valueType === "CONVERTED" && t.reduced === "DECOM")
@@ -1119,11 +1099,11 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
     },
     setGraphRange: function() {
       let t = 0.1;
-      (this.graphMinY || this.graphMinY === 0 || this.graphMaxY || this.graphMaxY === 0) && (t = 0), this.graph.scales.y.range = (e, s, h) => {
-        let a = s;
-        (this.graphMinY || this.graphMinY === 0) && (a = this.graphMinY);
-        let n = h;
-        return (this.graphMaxY || this.graphMaxY === 0) && (n = this.graphMaxY), I.rangeNum(a, n, t, !0);
+      (this.graphMinY || this.graphMinY === 0 || this.graphMaxY || this.graphMaxY === 0) && (t = 0), this.graph.scales.y.range = (e, i, u) => {
+        let l = i;
+        (this.graphMinY || this.graphMinY === 0) && (l = this.graphMinY);
+        let a = u;
+        return (this.graphMaxY || this.graphMaxY === 0) && (a = this.graphMaxY), V.rangeNum(l, a, t, !0);
       };
     },
     subscribe: function() {
@@ -1164,46 +1144,46 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
     // },
     getSize: function(t) {
       let e = 0;
-      const s = document.getElementById("openc3-nav-drawer");
-      s && (e = s.classList.contains(
+      const i = document.getElementById("openc3-nav-drawer");
+      i && (e = i.classList.contains(
         "v-navigation-drawer--active"
-      ) ? s.clientWidth : 0);
-      let h = 0;
-      (this.legendPosition === "right" || this.legendPosition === "left") && (h = document.getElementsByClassName("u-legend")[0].clientWidth);
-      const a = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) - e - h, n = Math.max(
+      ) ? i.clientWidth : 0);
+      let u = 0;
+      (this.legendPosition === "right" || this.legendPosition === "left") && (u = document.getElementsByClassName("u-legend")[0].clientWidth);
+      const l = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) - e - u, a = Math.max(
         document.documentElement.clientHeight,
         window.innerHeight || 0
       ), r = document.getElementsByClassName("v-expansion-panel")[0];
-      let o = 100;
-      t === "overview" ? this.fullHeight && !this.hideOverviewData ? this.showOverview = !0 : this.showOverview = !1 : (o = n - r.clientHeight - o - 250, this.fullHeight || (o = o / 2 + 10));
-      let p = a - 70;
-      return this.fullWidth || (p = p / 2 - 12), {
-        width: this.width || p,
-        height: this.height || o
+      let d = 100;
+      t === "overview" ? this.fullHeight && !this.hideOverviewData ? this.showOverview = !0 : this.showOverview = !1 : (d = a - r.clientHeight - d - 250, this.fullHeight || (d = d / 2 + 10));
+      let m = l - 70;
+      return this.fullWidth || (m = m / 2 - 12), {
+        width: this.width || m,
+        height: this.height || d
       };
     },
     getScales: function() {
       return {
         scales: {
           x: {
-            range(t, e, s) {
-              return e == null ? [1566453600, 1566497660] : [e, s];
+            range(t, e, i) {
+              return e == null ? [1566453600, 1566497660] : [e, i];
             }
           },
           y: {
-            range(t, e, s) {
-              return e == null ? [-100, 100] : I.rangeNum(e, s, 0.1, !0);
+            range(t, e, i) {
+              return e == null ? [-100, 100] : V.rangeNum(e, i, 0.1, !0);
             }
           }
         }
       };
     },
     getAxes: function(t) {
-      let e = "rgba(255, 255, 255, .1)", s = "white";
+      let e = "rgba(255, 255, 255, .1)", i = "white";
       return {
         axes: [
           {
-            stroke: s,
+            stroke: i,
             grid: {
               show: !0,
               stroke: e,
@@ -1213,7 +1193,7 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
           {
             size: 80,
             // This size supports values up to 8 digits plus sign
-            stroke: s,
+            stroke: i,
             grid: {
               show: t !== "overview",
               stroke: e,
@@ -1221,8 +1201,8 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
             },
             // Forces the axis values to be formatted correctly
             // especially with really small or large values
-            values(h, a) {
-              return (a.some((n) => n >= 1e7) || a.every((n) => n < 0.01)) && (a = a.map((n) => n.toExponential(3))), a;
+            values(u, l) {
+              return (l.some((a) => a >= 1e7) || l.every((a) => a < 0.01)) && (l = l.map((a) => a.toExponential(3))), l;
             }
           }
         ]
@@ -1234,62 +1214,62 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
       this.selectedItem.valueType !== t.valueType || this.selectedItem.reduced !== t.reduced || this.selectedItem.reducedType !== t.reducedType) && this.changeItem(t);
     },
     changeColor: function(t) {
-      let e = this.subscriptionKey(this.selectedItem), s = this.indexes[e];
-      this.items[s - 1].color = t, this.selectedItem.color = t, this.graph.root.querySelectorAll(".u-marker")[s].style.borderColor = t;
+      let e = this.subscriptionKey(this.selectedItem), i = this.indexes[e];
+      this.items[i - 1].color = t, this.selectedItem.color = t, this.graph.root.querySelectorAll(".u-marker")[i].style.borderColor = t;
     },
     changeLimits: function(t) {
-      let e = this.subscriptionKey(this.selectedItem), s = this.indexes[e];
-      this.items[s - 1].limits = t, this.selectedItem.limits = t, this.limitsValues = t;
+      let e = this.subscriptionKey(this.selectedItem), i = this.indexes[e];
+      this.items[i - 1].limits = t, this.selectedItem.limits = t, this.limitsValues = t;
     },
     linesPlugin: function() {
       return {
         hooks: {
           draw: (t) => {
-            const { ctx: e, bbox: s } = t, h = t.valToPos(t.scales.y.min, "y", !0), a = t.valToPos(t.scales.y.max, "y", !0), n = t.valToPos(this.limitsValues[0], "y", !0), r = t.valToPos(this.limitsValues[1], "y", !0), o = t.valToPos(this.limitsValues[2], "y", !0), p = t.valToPos(this.limitsValues[3], "y", !0);
-            if (this.lines.forEach((f) => {
-              t.scales.y.min <= f.yValue && f.yValue <= t.scales.y.max && (e.save(), e.beginPath(), e.strokeStyle = f.color, e.lineWidth = 2, e.moveTo(s.left, t.valToPos(f.yValue, "y", !0)), e.lineTo(
-                s.left + s.width,
-                t.valToPos(f.yValue, "y", !0)
+            const { ctx: e, bbox: i } = t, u = t.valToPos(t.scales.y.min, "y", !0), l = t.valToPos(t.scales.y.max, "y", !0), a = t.valToPos(this.limitsValues[0], "y", !0), r = t.valToPos(this.limitsValues[1], "y", !0), d = t.valToPos(this.limitsValues[2], "y", !0), m = t.valToPos(this.limitsValues[3], "y", !0);
+            if (this.lines.forEach((p) => {
+              t.scales.y.min <= p.yValue && p.yValue <= t.scales.y.max && (e.save(), e.beginPath(), e.strokeStyle = p.color, e.lineWidth = 2, e.moveTo(i.left, t.valToPos(p.yValue, "y", !0)), e.lineTo(
+                i.left + i.width,
+                t.valToPos(p.yValue, "y", !0)
               ), e.stroke(), e.restore());
             }), e.save(), e.beginPath(), e.fillStyle = "rgba(255,0,0,0.15)", t.scales.y.min < this.limitsValues[0]) {
-              let f = n < a ? a : n;
-              e.fillRect(s.left, n, s.width, h - f);
+              let p = a < l ? l : a;
+              e.fillRect(i.left, a, i.width, u - p);
             }
             if (t.scales.y.max > this.limitsValues[3]) {
-              let f = h < p ? h : p;
-              e.fillRect(s.left, a, s.width, f - a);
+              let p = u < m ? u : m;
+              e.fillRect(i.left, l, i.width, p - l);
             }
             if (e.fillStyle = "rgba(255,255,0,0.15)", t.scales.y.min < this.limitsValues[1] && // yellowLow
             t.scales.y.max > this.limitsValues[0]) {
-              let f = r < a ? a : r;
-              e.fillRect(s.left, f, s.width, n - f);
+              let p = r < l ? l : r;
+              e.fillRect(i.left, p, i.width, a - p);
             }
             if (t.scales.y.max > this.limitsValues[2] && // yellowHigh
             t.scales.y.min < this.limitsValues[3]) {
-              let f = h < p ? h : p, g = h < o ? h : o;
-              e.fillRect(s.left, f, s.width, g - f);
+              let p = u < m ? u : m, f = u < d ? u : d;
+              e.fillRect(i.left, p, i.width, f - p);
             }
             if (e.fillStyle = "rgba(0,255,0,0.15)", this.limitsValues.length === 4) {
               if (t.scales.y.min < this.limitsValues[2] && // yellowHigh
               t.scales.y.max > this.limitsValues[1]) {
-                let f = o < a ? a : o, g = h < r ? h : r;
-                e.fillRect(s.left, f, s.width, g - f);
+                let p = d < l ? l : d, f = u < r ? u : r;
+                e.fillRect(i.left, p, i.width, f - p);
               }
             } else {
-              const f = t.valToPos(this.limitsValues[4], "y", !0), g = t.valToPos(this.limitsValues[5], "y", !0);
+              const p = t.valToPos(this.limitsValues[4], "y", !0), f = t.valToPos(this.limitsValues[5], "y", !0);
               if (t.scales.y.min < this.limitsValues[4] && // greenLow
               t.scales.y.max > this.limitsValues[1]) {
-                let _ = f < a ? a : f;
-                e.fillRect(s.left, _, s.width, r - _);
+                let T = p < l ? l : p;
+                e.fillRect(i.left, T, i.width, r - T);
               }
               if (t.scales.y.max > this.limitsValues[5] && // greenHigh
               t.scales.y.min < this.limitsValues[2]) {
-                let _ = h < o ? h : o, v = h < g ? h : g;
-                e.fillRect(s.left, _, s.width, v - _);
+                let T = u < d ? u : d, c = u < f ? u : f;
+                e.fillRect(i.left, T, i.width, c - T);
               }
               e.fillStyle = "rgba(0,0,255,0.15)";
-              let D = g < a ? a : g, w = h < f ? h : f;
-              e.fillRect(s.left, D, s.width, w - D);
+              let w = f < l ? l : f, y = u < p ? u : p;
+              e.fillRect(i.left, w, i.width, y - w);
             }
             e.stroke(), e.restore();
           }
@@ -1302,10 +1282,10 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
       }, 0);
     },
     addItems: function(t, e = "CONVERTED") {
-      t.forEach((s) => {
-        s.valueType || (s.valueType = e), s.color || (s.color = this.colors[this.colorIndex]), s.limits || (s.limits = []), s.limits.length > 0 && (this.limitsValues = s.limits), this.colorIndex = (this.colorIndex + 1) % this.colors.length, this.items.push(s);
-        const h = this.data.length;
-        this.graph.addSeries(this.createSeriesConfig(s), h), this.overview && this.overview.addSeries(this.createOverviewSeriesConfig(), h), this.data.splice(h, 0, Array(this.data[0].length)), this.indexes[this.subscriptionKey(s)] = h;
+      t.forEach((i) => {
+        i.valueType || (i.valueType = e), i.color || (i.color = this.colors[this.colorIndex]), i.limits || (i.limits = []), i.limits.length > 0 && (this.limitsValues = i.limits), this.colorIndex = (this.colorIndex + 1) % this.colors.length, this.items.push(i);
+        const u = this.data.length;
+        this.graph.addSeries(this.createSeriesConfig(i), u), this.overview && this.overview.addSeries(this.createOverviewSeriesConfig(), u), this.data.splice(u, 0, Array(this.data[0].length)), this.indexes[this.subscriptionKey(i)] = u;
       }), this.updateColorIndex(t), this.addItemsToSubscription(t), this.$emit("resize"), this.$emit("edit");
     },
     createSeriesConfig: function(t) {
@@ -1313,9 +1293,9 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
         spanGaps: !0,
         item: t,
         label: this.formatLabel(t),
-        stroke: (e, s) => this.items[s - 1].color,
+        stroke: (e, i) => this.items[i - 1].color,
         width: 2,
-        value: (e, s) => typeof s == "string" || isNaN(s) ? "NaN" : s == null ? "--" : Math.abs(s) < 0.01 && s !== 0 || Math.abs(s) >= 1e7 ? s.toExponential(6) : s.toFixed(6)
+        value: (e, i) => typeof i == "string" || isNaN(i) ? "NaN" : i == null ? "--" : Math.abs(i) < 0.01 && i !== 0 || Math.abs(i) >= 1e7 ? i.toExponential(6) : i.toFixed(6)
       };
     },
     createOverviewSeriesConfig: function() {
@@ -1327,15 +1307,15 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
     updateColorIndex: function(t) {
       const e = t[t.length - 1];
       if (e) {
-        const s = this.colors.indexOf(e.color);
-        s !== -1 && (this.colorIndex = (s + 1) % this.colors.length);
+        const i = this.colors.indexOf(e.color);
+        i !== -1 && (this.colorIndex = (i + 1) % this.colors.length);
       }
     },
     addItemsToSubscription: function(t = this.items) {
       let e = this.startTime;
       this.graphStartDateTime && (e = this.graphStartDateTime), this.subscription && OpenC3Auth.updateToken(OpenC3Auth.defaultMinValidity).then(
-        (s) => {
-          s && OpenC3Auth.setTokens(), this.subscription.perform("add", {
+        (i) => {
+          i && OpenC3Auth.setTokens(), this.subscription.perform("add", {
             scope: window.openc3Scope,
             token: localStorage.openc3Token,
             items: t.map(this.subscriptionKey),
@@ -1350,16 +1330,16 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
     },
     clearData: function(t) {
       for (const e of t.map(this.subscriptionKey)) {
-        let s = this.indexes[e];
-        this.data[s] = Array(this.data[0].length).fill(null), this.graph.setData(this.data), this.overview && this.overview.setData(this.data);
+        let i = this.indexes[e];
+        this.data[i] = Array(this.data[0].length).fill(null), this.graph.setData(this.data), this.overview && this.overview.setData(this.data);
       }
       this.data.length === 2 && (this.data[0] = [], this.graph.setData(this.data), this.overview && this.overview.setData(this.data));
     },
     removeItems: function(t) {
       this.removeItemsFromSubscription(t);
       for (const e of t.map(this.subscriptionKey)) {
-        const s = this.reorderIndexes(e);
-        this.items.splice(s - 1, 1), this.data.splice(s, 1), this.graph.delSeries(s), this.graph.setData(this.data), this.overview && (this.overview.delSeries(s), this.overview.setData(this.data));
+        const i = this.reorderIndexes(e);
+        this.items.splice(i - 1, 1), this.data.splice(i, 1), this.graph.delSeries(i), this.graph.setData(this.data), this.overview && (this.overview.delSeries(i), this.overview.setData(this.data));
       }
       this.data.length === 1 && (this.data[0] = [], this.graph.setData(this.data), this.overview && this.overview.setData(this.data)), this.$emit("resize"), this.$emit("edit");
     },
@@ -1373,32 +1353,32 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
     reorderIndexes: function(t) {
       let e = this.indexes[t];
       delete this.indexes[t];
-      for (let s in this.indexes)
-        this.indexes[s] > e && (this.indexes[s] -= 1);
+      for (let i in this.indexes)
+        this.indexes[i] > e && (this.indexes[i] -= 1);
       return e;
     },
     received: function(t) {
       this.cable.recordPing();
       for (let e = 0; e < t.length; e++) {
-        let s = t[e].__time / 1e9, h = this.data[0].length;
-        if (h === 0 || s > this.data[0][h - 1]) {
-          for (let a = 0; a < this.data.length; a++)
-            this.data[a].push(null);
-          this.set_data_at_index(this.data[0].length - 1, s, t[e]);
+        let i = t[e].__time / 1e9, u = this.data[0].length;
+        if (u === 0 || i > this.data[0][u - 1]) {
+          for (let l = 0; l < this.data.length; l++)
+            this.data[l].push(null);
+          this.set_data_at_index(this.data[0].length - 1, i, t[e]);
         } else {
-          let a = q(this.data[0], s, this.bs_comparator);
-          if (a >= 0) {
-            for (; a >= 0; )
-              s -= 1e-5, a = q(this.data[0], s, this.bs_comparator);
-            let n = -a - 1;
+          let l = A(this.data[0], i, this.bs_comparator);
+          if (l >= 0) {
+            for (; l >= 0; )
+              i -= 1e-5, l = A(this.data[0], i, this.bs_comparator);
+            let a = -l - 1;
             for (let r = 0; r < this.data.length; r++)
-              this.data[r].splice(n, 0, null);
-            this.set_data_at_index(n, s, t[e]);
+              this.data[r].splice(a, 0, null);
+            this.set_data_at_index(a, i, t[e]);
           } else {
-            let n = -a - 1;
+            let a = -l - 1;
             for (let r = 0; r < this.data.length; r++)
-              this.data[r].splice(n, 0, null);
-            this.set_data_at_index(n, s, t[e]);
+              this.data[r].splice(a, 0, null);
+            this.set_data_at_index(a, i, t[e]);
           }
         }
       }
@@ -1411,21 +1391,21 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
     bs_comparator: function(t, e) {
       return t - e;
     },
-    set_data_at_index: function(t, e, s) {
+    set_data_at_index: function(t, e, i) {
       this.data[0][t] = e;
-      for (const [h, a] of Object.entries(s)) {
-        if (h === "time")
+      for (const [u, l] of Object.entries(i)) {
+        if (u === "time")
           continue;
-        let n = this.indexes[h];
-        if (n) {
-          let r = this.data[n];
-          if (a != null && a.raw)
+        let a = this.indexes[u];
+        if (a) {
+          let r = this.data[a];
+          if (l != null && l.raw)
             r[t] = null;
-          else if (typeof a == "string") {
-            if (r[t] = null, !h.includes("__RAW")) {
-              for (let o of this.items)
-                if (this.subscriptionKey(o) === h) {
-                  this.selectedItem = o;
+          else if (typeof l == "string") {
+            if (r[t] = null, !u.includes("__RAW")) {
+              for (let d of this.items)
+                if (this.subscriptionKey(d) === u) {
+                  this.selectedItem = d;
                   break;
                 }
               this.changeItem({
@@ -1435,7 +1415,7 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
               });
             }
           } else
-            r[t] = a;
+            r[t] = l;
         }
       }
     },
@@ -1444,255 +1424,140 @@ const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
       return (t.reduced === "REDUCED_MINUTE" || t.reduced === "REDUCED_HOUR" || t.reduced === "REDUCED_DAY") && (e += `__${t.reducedType}`), e;
     }
   }
-}, ge = { class: "mx-2" }, ye = {
-  class: "pa-1",
+}, ce = {
   id: "chart",
-  ref: "chart"
-}, be = ["id"], we = ["id"], Te = {
+  ref: "chart",
+  class: "pa-1"
+}, fe = ["id"], ge = ["id"], ve = {
   key: 5,
-  class: "u-series",
-  ref: "info"
+  ref: "info",
+  class: "u-series"
 };
-function De(t, e, s, h, a, n) {
-  const r = u("v-icon"), o = u("v-tooltip"), p = u("v-spacer"), f = u("v-toolbar"), g = u("v-expand-transition"), D = u("v-card"), w = u("graph-edit-dialog"), _ = u("v-text-field"), v = u("v-row"), Y = u("v-textarea"), O = u("v-btn"), z = u("v-dialog"), k = u("v-list-item-title"), V = u("v-list-item"), G = u("v-list"), L = u("v-menu"), R = u("graph-edit-item-dialog"), H = u("v-list-subheader");
-  return y(), P("div", {
-    onClick: e[21] || (e[21] = Q((d) => t.$emit("click"), ["prevent"]))
+function ye(t, e, i, u, l, a) {
+  const r = h("v-btn"), d = h("v-spacer"), m = h("v-toolbar"), p = h("v-expand-transition"), f = h("v-card"), w = h("graph-edit-dialog"), y = h("v-text-field"), T = h("v-row"), c = h("v-textarea"), M = h("v-dialog"), D = h("v-list-item-title"), x = h("v-list-item"), S = h("v-list"), E = h("v-menu"), L = h("graph-edit-item-dialog"), U = h("v-list-subheader"), I = h("v-icon"), z = h("v-tooltip");
+  return v(), N("div", {
+    onClick: e[21] || (e[21] = H((o) => t.$emit("click"), ["prevent"]))
   }, [
-    i(D, null, {
-      default: l(() => [
-        C(i(f, {
+    s(f, null, {
+      default: n(() => [
+        O(s(m, {
           height: "24",
-          class: $(["pl-2 pr-2", s.selectedGraphId === s.id ? "active" : ""])
+          class: F(["pl-2 pr-2", i.selectedGraphId === i.id ? "active" : ""])
         }, {
-          default: l(() => [
-            C(b("div", ge, [
-              i(o, {
-                text: "Errors",
-                location: "top"
-              }, {
-                activator: l(({ props: d }) => [
-                  i(r, x(d, {
-                    onClick: e[0] || (e[0] = (U) => a.errorDialog = !0)
-                  }), {
-                    default: l(() => e[22] || (e[22] = [
-                      m(" mdi-alert ")
-                    ])),
-                    _: 2
-                  }, 1040)
-                ]),
-                _: 1
+          default: n(() => [
+            O(s(r, {
+              class: "mx-2",
+              icon: "mdi-alert",
+              density: "compact",
+              variant: "text",
+              "aria-label": "Show Errors",
+              onClick: e[0] || (e[0] = () => {
+                l.errorDialog = !0;
               })
-            ], 512), [
-              [M, a.errors.length !== 0]
+            }, null, 512), [
+              [G, l.errors.length !== 0]
             ]),
-            i(o, {
-              text: "Edit",
-              location: "top"
-            }, {
-              activator: l(({ props: d }) => [
-                i(r, x(d, {
-                  onClick: e[1] || (e[1] = (U) => a.editGraph = !0),
-                  "data-test": "edit-graph-icon"
-                }), {
-                  default: l(() => e[23] || (e[23] = [
-                    m(" mdi-pencil ")
-                  ])),
-                  _: 2
-                }, 1040)
-              ]),
-              _: 1
+            s(r, {
+              icon: "mdi-pencil",
+              variant: "text",
+              density: "compact",
+              "data-test": "edit-graph-icon",
+              "aria-label": "Edit Graph",
+              onClick: e[1] || (e[1] = () => {
+                l.editGraph = !0;
+              })
             }),
-            i(p),
-            b("span", null, E(a.title), 1),
-            i(p),
-            C(b("div", null, [
-              n.calcFullSize ? (y(), T(o, {
-                key: 0,
-                text: "Collapse",
-                location: "top"
-              }, {
-                activator: l(({ props: d }) => [
-                  i(r, x(d, {
-                    onClick: n.collapseAll,
-                    "data-test": "collapse-all"
-                  }), {
-                    default: l(() => e[24] || (e[24] = [
-                      m(" mdi-arrow-collapse ")
-                    ])),
-                    _: 2
-                  }, 1040, ["onClick"])
-                ]),
-                _: 1
-              })) : (y(), T(o, {
-                key: 1,
-                text: "Expand",
-                location: "top"
-              }, {
-                activator: l(({ props: d }) => [
-                  i(r, x(d, {
-                    onClick: n.expandAll,
-                    "data-test": "expand-all"
-                  }), {
-                    default: l(() => e[25] || (e[25] = [
-                      m(" mdi-arrow-expand ")
-                    ])),
-                    _: 2
-                  }, 1040, ["onClick"])
-                ]),
-                _: 1
-              }))
-            ], 512), [
-              [M, a.expand]
-            ]),
-            C(b("div", null, [
-              a.fullWidth ? (y(), T(o, {
-                key: 0,
-                text: "Collapse Width",
-                location: "top"
-              }, {
-                activator: l(({ props: d }) => [
-                  i(r, x(d, {
-                    onClick: n.collapseWidth,
-                    "data-test": "collapse-width"
-                  }), {
-                    default: l(() => e[26] || (e[26] = [
-                      m(" mdi-arrow-collapse-horizontal ")
-                    ])),
-                    _: 2
-                  }, 1040, ["onClick"])
-                ]),
-                _: 1
-              })) : (y(), T(o, {
-                key: 1,
-                text: "Expand Width",
-                location: "top"
-              }, {
-                activator: l(({ props: d }) => [
-                  i(r, x(d, {
-                    onClick: n.expandWidth,
-                    "data-test": "expand-width"
-                  }), {
-                    default: l(() => e[27] || (e[27] = [
-                      m(" mdi-arrow-expand-horizontal ")
-                    ])),
-                    _: 2
-                  }, 1040, ["onClick"])
-                ]),
-                _: 1
-              }))
-            ], 512), [
-              [M, a.expand]
-            ]),
-            C(b("div", null, [
-              a.fullHeight ? (y(), T(o, {
+            s(d),
+            k("span", null, C(l.title), 1),
+            s(d),
+            l.expand ? (v(), N(X, { key: 0 }, [
+              a.calcFullSize ? (v(), b(r, {
                 key: 0,
-                text: "Collapse Height",
-                location: "top"
-              }, {
-                activator: l(({ props: d }) => [
-                  i(r, x(d, {
-                    onClick: n.collapseHeight,
-                    "data-test": "collapse-height"
-                  }), {
-                    default: l(() => e[28] || (e[28] = [
-                      m(" mdi-arrow-collapse-vertical ")
-                    ])),
-                    _: 2
-                  }, 1040, ["onClick"])
-                ]),
-                _: 1
-              })) : (y(), T(o, {
+                icon: "mdi-arrow-collapse",
+                variant: "text",
+                density: "compact",
+                "data-test": "collapse-all",
+                onClick: a.collapseAll
+              }, null, 8, ["onClick"])) : (v(), b(r, {
                 key: 1,
-                text: "Expand Height",
-                location: "top"
-              }, {
-                activator: l(({ props: d }) => [
-                  i(r, x(d, {
-                    onClick: n.expandHeight,
-                    "data-test": "expand-height"
-                  }), {
-                    default: l(() => e[29] || (e[29] = [
-                      m(" mdi-arrow-expand-vertical ")
-                    ])),
-                    _: 2
-                  }, 1040, ["onClick"])
-                ]),
-                _: 1
-              }))
-            ], 512), [
-              [M, a.expand]
-            ]),
-            a.expand ? (y(), T(o, {
-              key: 0,
-              text: "Minimize",
-              location: "top"
-            }, {
-              activator: l(({ props: d }) => [
-                i(r, x(d, {
-                  onClick: n.minMaxTransition,
-                  "data-test": "minimize-screen-icon"
-                }), {
-                  default: l(() => e[30] || (e[30] = [
-                    m(" mdi-window-minimize ")
-                  ])),
-                  _: 2
-                }, 1040, ["onClick"])
-              ]),
-              _: 1
-            })) : (y(), T(o, {
+                icon: "mdi-arrow-expand",
+                variant: "text",
+                density: "compact",
+                "data-test": "expand-all",
+                onClick: a.expandAll
+              }, null, 8, ["onClick"])),
+              l.fullWidth ? (v(), b(r, {
+                key: 2,
+                icon: "mdi-arrow-collapse-horizontal",
+                variant: "text",
+                density: "compact",
+                "data-test": "collapse-width",
+                onClick: a.collapseWidth
+              }, null, 8, ["onClick"])) : (v(), b(r, {
+                key: 3,
+                icon: "mdi-arrow-expand-horizontal",
+                variant: "text",
+                density: "compact",
+                "data-test": "expand-width",
+                onClick: a.expandWidth
+              }, null, 8, ["onClick"])),
+              l.fullHeight ? (v(), b(r, {
+                key: 4,
+                icon: "mdi-arrow-collapse-vertical",
+                variant: "text",
+                density: "compact",
+                "data-test": "collapse-height",
+                onClick: a.collapseHeight
+              }, null, 8, ["onClick"])) : (v(), b(r, {
+                key: 5,
+                icon: "mdi-arrow-expand-vertical",
+                variant: "text",
+                density: "compact",
+                "data-test": "expand-height",
+                onClick: a.expandHeight
+              }, null, 8, ["onClick"]))
+            ], 64)) : _("", !0),
+            l.expand ? (v(), b(r, {
               key: 1,
-              text: "Maximize",
-              location: "top"
-            }, {
-              activator: l(({ props: d }) => [
-                i(r, x(d, {
-                  onClick: n.minMaxTransition,
-                  "data-test": "maximize-screen-icon"
-                }), {
-                  default: l(() => e[31] || (e[31] = [
-                    m(" mdi-window-maximize ")
-                  ])),
-                  _: 2
-                }, 1040, ["onClick"])
-              ]),
-              _: 1
-            })),
-            i(o, {
-              text: "Close",
-              location: "top"
-            }, {
-              activator: l(({ props: d }) => [
-                i(r, x(d, {
-                  onClick: e[2] || (e[2] = (U) => t.$emit("close-graph")),
-                  "data-test": "close-graph-icon"
-                }), {
-                  default: l(() => e[32] || (e[32] = [
-                    m(" mdi-close-box ")
-                  ])),
-                  _: 2
-                }, 1040)
-              ]),
-              _: 1
+              icon: "mdi-window-minimize",
+              variant: "text",
+              density: "compact",
+              "data-test": "minimize-screen-icon",
+              onClick: a.minMaxTransition
+            }, null, 8, ["onClick"])) : (v(), b(r, {
+              key: 2,
+              icon: "mdi-window-maximize",
+              variant: "text",
+              density: "compact",
+              "data-test": "maximize-screen-icon",
+              onClick: a.minMaxTransition
+            }, null, 8, ["onClick"])),
+            s(r, {
+              icon: "mdi-close-box",
+              variant: "text",
+              density: "compact",
+              "data-test": "close-graph-icon",
+              onClick: e[2] || (e[2] = H((o) => t.$emit("close-graph"), ["stop"]))
             })
           ]),
           _: 1
         }, 8, ["class"]), [
-          [M, !a.hideToolbarData]
+          [G, !l.hideToolbarData]
         ]),
-        i(g, null, {
-          default: l(() => [
-            C(b("div", ye, [
-              b("div", {
-                id: `chart${s.id}`
-              }, null, 8, be),
-              e[33] || (e[33] = b("div", { id: "betweenCharts" }, null, -1)),
-              C(b("div", {
-                id: `overview${s.id}`
-              }, null, 8, we), [
-                [M, a.showOverview]
+        s(p, null, {
+          default: n(() => [
+            O(k("div", ce, [
+              k("div", {
+                id: `chart${i.id}`
+              }, null, 8, fe),
+              e[22] || (e[22] = k("div", { id: "betweenCharts" }, null, -1)),
+              O(k("div", {
+                id: `overview${i.id}`
+              }, null, 8, ge), [
+                [G, l.showOverview]
               ])
             ], 512), [
-              [M, a.expand]
+              [G, l.expand]
             ])
           ]),
           _: 1
@@ -1700,71 +1565,71 @@ function De(t, e, s, h, a, n) {
       ]),
       _: 1
     }),
-    a.editGraph ? (y(), T(w, {
+    l.editGraph ? (v(), b(w, {
       key: 0,
-      modelValue: a.editGraph,
-      "onUpdate:modelValue": e[3] || (e[3] = (d) => a.editGraph = d),
-      title: a.title,
-      "legend-position": a.legendPosition,
-      items: a.items,
-      "graph-min-y": a.graphMinY,
-      "graph-max-y": a.graphMaxY,
-      lines: a.lines,
-      colors: a.colors,
-      "start-date-time": a.graphStartDateTime,
-      "end-date-time": a.graphEndDateTime,
-      "time-zone": s.timeZone,
-      onRemove: e[4] || (e[4] = (d) => n.removeItems([d])),
-      onOk: n.editGraphClose,
-      onCancel: e[5] || (e[5] = (d) => a.editGraph = !1)
-    }, null, 8, ["modelValue", "title", "legend-position", "items", "graph-min-y", "graph-max-y", "lines", "colors", "start-date-time", "end-date-time", "time-zone", "onOk"])) : S("", !0),
-    i(z, {
-      modelValue: a.errorDialog,
-      "onUpdate:modelValue": e[7] || (e[7] = (d) => a.errorDialog = d),
+      modelValue: l.editGraph,
+      "onUpdate:modelValue": e[3] || (e[3] = (o) => l.editGraph = o),
+      title: l.title,
+      "legend-position": l.legendPosition,
+      items: l.items,
+      "graph-min-y": l.graphMinY,
+      "graph-max-y": l.graphMaxY,
+      lines: l.lines,
+      colors: l.colors,
+      "start-date-time": l.graphStartDateTime,
+      "end-date-time": l.graphEndDateTime,
+      "time-zone": i.timeZone,
+      onRemove: e[4] || (e[4] = (o) => a.removeItems([o])),
+      onOk: a.editGraphClose,
+      onCancel: e[5] || (e[5] = (o) => l.editGraph = !1)
+    }, null, 8, ["modelValue", "title", "legend-position", "items", "graph-min-y", "graph-max-y", "lines", "colors", "start-date-time", "end-date-time", "time-zone", "onOk"])) : _("", !0),
+    s(M, {
+      modelValue: l.errorDialog,
+      "onUpdate:modelValue": e[7] || (e[7] = (o) => l.errorDialog = o),
       "max-width": "600"
     }, {
-      default: l(() => [
-        i(f, { height: "24" }, {
-          default: l(() => [
-            i(p),
-            e[34] || (e[34] = b("span", null, " Errors ", -1)),
-            i(p)
+      default: n(() => [
+        s(m, { height: "24" }, {
+          default: n(() => [
+            s(d),
+            e[23] || (e[23] = k("span", null, " Errors ", -1)),
+            s(d)
           ]),
           _: 1
         }),
-        i(D, { class: "pa-3" }, {
-          default: l(() => [
-            i(v, { dense: "" }, {
-              default: l(() => [
-                i(_, {
+        s(f, { class: "pa-3" }, {
+          default: n(() => [
+            s(T, { dense: "" }, {
+              default: n(() => [
+                s(y, {
+                  modelValue: l.title,
+                  "onUpdate:modelValue": e[6] || (e[6] = (o) => l.title = o),
                   readonly: "",
                   "hide-details": "",
-                  modelValue: a.title,
-                  "onUpdate:modelValue": e[6] || (e[6] = (d) => a.title = d),
                   class: "pb-2",
                   label: "Graph Title"
                 }, null, 8, ["modelValue"])
               ]),
               _: 1
             }),
-            i(v, { class: "my-3" }, {
-              default: l(() => [
-                i(Y, {
+            s(T, { class: "my-3" }, {
+              default: n(() => [
+                s(c, {
                   readonly: "",
                   rows: "8",
-                  value: n.error
+                  value: a.error
                 }, null, 8, ["value"])
               ]),
               _: 1
             }),
-            i(v, null, {
-              default: l(() => [
-                i(O, {
+            s(T, null, {
+              default: n(() => [
+                s(r, {
                   block: "",
-                  onClick: n.clearErrors
+                  onClick: a.clearErrors
                 }, {
-                  default: l(() => e[35] || (e[35] = [
-                    m(" Clear ")
+                  default: n(() => e[24] || (e[24] = [
+                    g(" Clear ")
                   ])),
                   _: 1
                 }, 8, ["onClick"])
@@ -1777,24 +1642,24 @@ function De(t, e, s, h, a, n) {
       ]),
       _: 1
     }, 8, ["modelValue"]),
-    a.editGraphMenu ? (y(), T(L, {
+    l.editGraphMenu ? (v(), b(E, {
       key: 1,
-      modelValue: a.editGraphMenu,
-      "onUpdate:modelValue": e[9] || (e[9] = (d) => a.editGraphMenu = d),
-      target: [a.editGraphMenuX, a.editGraphMenuY],
+      modelValue: l.editGraphMenu,
+      "onUpdate:modelValue": e[9] || (e[9] = (o) => l.editGraphMenu = o),
+      target: [l.editGraphMenuX, l.editGraphMenuY],
       absolute: "",
       "offset-y": ""
     }, {
-      default: l(() => [
-        i(G, null, {
-          default: l(() => [
-            i(V, {
-              onClick: e[8] || (e[8] = (d) => a.editGraph = !0)
+      default: n(() => [
+        s(S, null, {
+          default: n(() => [
+            s(x, {
+              onClick: e[8] || (e[8] = (o) => l.editGraph = !0)
             }, {
-              default: l(() => [
-                i(k, { style: { cursor: "pointer" } }, {
-                  default: l(() => [
-                    m(" Edit " + E(a.title), 1)
+              default: n(() => [
+                s(D, { style: { cursor: "pointer" } }, {
+                  default: n(() => [
+                    g(" Edit " + C(l.title), 1)
                   ]),
                   _: 1
                 })
@@ -1806,80 +1671,80 @@ function De(t, e, s, h, a, n) {
         })
       ]),
       _: 1
-    }, 8, ["modelValue", "target"])) : S("", !0),
-    a.editItem ? (y(), T(R, {
+    }, 8, ["modelValue", "target"])) : _("", !0),
+    l.editItem ? (v(), b(L, {
       key: 2,
-      modelValue: a.editItem,
-      "onUpdate:modelValue": e[10] || (e[10] = (d) => a.editItem = d),
-      colors: a.colors,
-      item: a.selectedItem,
-      onChangeColor: n.changeColor,
-      onChangeLimits: n.changeLimits,
-      onCancel: e[11] || (e[11] = (d) => a.editItem = !1),
-      onClose: n.closeEditItem
-    }, null, 8, ["modelValue", "colors", "item", "onChangeColor", "onChangeLimits", "onClose"])) : S("", !0),
-    a.itemMenu ? (y(), T(L, {
+      modelValue: l.editItem,
+      "onUpdate:modelValue": e[10] || (e[10] = (o) => l.editItem = o),
+      colors: l.colors,
+      item: l.selectedItem,
+      onChangeColor: a.changeColor,
+      onChangeLimits: a.changeLimits,
+      onCancel: e[11] || (e[11] = (o) => l.editItem = !1),
+      onClose: a.closeEditItem
+    }, null, 8, ["modelValue", "colors", "item", "onChangeColor", "onChangeLimits", "onClose"])) : _("", !0),
+    l.itemMenu ? (v(), b(E, {
       key: 3,
-      modelValue: a.itemMenu,
-      "onUpdate:modelValue": e[15] || (e[15] = (d) => a.itemMenu = d),
-      target: [a.itemMenuX, a.itemMenuY],
+      modelValue: l.itemMenu,
+      "onUpdate:modelValue": e[15] || (e[15] = (o) => l.itemMenu = o),
+      target: [l.itemMenuX, l.itemMenuY],
       absolute: "",
       "offset-y": ""
     }, {
-      default: l(() => [
-        i(G, {
+      default: n(() => [
+        s(S, {
           nav: "",
           density: "compact"
         }, {
-          default: l(() => [
-            i(H, null, {
-              default: l(() => [
-                m(E(a.selectedItem.targetName) + " " + E(a.selectedItem.packetName) + " " + E(a.selectedItem.itemName), 1)
+          default: n(() => [
+            s(U, null, {
+              default: n(() => [
+                g(C(l.selectedItem.targetName) + " " + C(l.selectedItem.packetName) + " " + C(l.selectedItem.itemName), 1)
               ]),
               _: 1
             }),
-            i(V, {
-              onClick: e[12] || (e[12] = (d) => a.editItem = !0)
+            s(x, {
+              onClick: e[12] || (e[12] = (o) => l.editItem = !0)
             }, {
-              prepend: l(() => [
-                i(r, { icon: "mdi-pencil" })
+              prepend: n(() => [
+                s(I, { icon: "mdi-pencil" })
               ]),
-              default: l(() => [
-                i(k, null, {
-                  default: l(() => e[36] || (e[36] = [
-                    m(" Edit ")
+              default: n(() => [
+                s(D, null, {
+                  default: n(() => e[25] || (e[25] = [
+                    g(" Edit ")
                   ])),
                   _: 1
                 })
               ]),
               _: 1
             }),
-            i(V, {
-              onClick: e[13] || (e[13] = (d) => n.clearData([a.selectedItem]))
+            s(x, {
+              onClick: e[13] || (e[13] = (o) => a.clearData([l.selectedItem]))
             }, {
-              prepend: l(() => [
-                i(r, { icon: "mdi-eraser" })
+              prepend: n(() => [
+                s(I, { icon: "mdi-eraser" })
               ]),
-              default: l(() => [
-                i(k, null, {
-                  default: l(() => e[37] || (e[37] = [
-                    m(" Clear ")
+              default: n(() => [
+                s(D, null, {
+                  default: n(() => e[26] || (e[26] = [
+                    g(" Clear ")
                   ])),
                   _: 1
                 })
               ]),
               _: 1
             }),
-            i(V, {
-              onClick: e[14] || (e[14] = (d) => n.removeItems([a.selectedItem]))
+            s(x, {
+              onClick: e[14] || (e[14] = (o) => a.removeItems([l.selectedItem]))
             }, {
-              prepend: l(() => [
-                i(r, { icon: "mdi-delete" })
+              prepend: n(() => [
+                s(I, { icon: "mdi-delete" })
               ]),
-              default: l(() => [
-                i(k, null, {
-                  default: l(() => e[38] || (e[38] = [
-                    m(" Delete ")
+              default: n(() => [
+                s(D, null, {
+                  default: n(() => e[27] || (e[27] = [
+                    g(" Delete ")
                   ])),
                   _: 1
                 })
@@ -1891,64 +1756,64 @@ function De(t, e, s, h, a, n) {
         })
       ]),
       _: 1
-    }, 8, ["modelValue", "target"])) : S("", !0),
-    a.legendMenu ? (y(), T(L, {
+    }, 8, ["modelValue", "target"])) : _("", !0),
+    l.legendMenu ? (v(), b(E, {
       key: 4,
-      modelValue: a.legendMenu,
-      "onUpdate:modelValue": e[20] || (e[20] = (d) => a.legendMenu = d),
-      target: [a.legendMenuX, a.legendMenuY],
+      modelValue: l.legendMenu,
+      "onUpdate:modelValue": e[20] || (e[20] = (o) => l.legendMenu = o),
+      target: [l.legendMenuX, l.legendMenuY],
       absolute: "",
       "offset-y": ""
     }, {
-      default: l(() => [
-        i(G, null, {
-          default: l(() => [
-            i(V, {
-              onClick: e[16] || (e[16] = (d) => n.moveLegend("top"))
+      default: n(() => [
+        s(S, null, {
+          default: n(() => [
+            s(x, {
+              onClick: e[16] || (e[16] = (o) => a.moveLegend("top"))
             }, {
-              default: l(() => [
-                i(k, { style: { cursor: "pointer" } }, {
-                  default: l(() => e[39] || (e[39] = [
-                    m(" Legend Top ")
+              default: n(() => [
+                s(D, { style: { cursor: "pointer" } }, {
+                  default: n(() => e[28] || (e[28] = [
+                    g(" Legend Top ")
                   ])),
                   _: 1
                 })
               ]),
               _: 1
             }),
-            i(V, {
-              onClick: e[17] || (e[17] = (d) => n.moveLegend("bottom"))
+            s(x, {
+              onClick: e[17] || (e[17] = (o) => a.moveLegend("bottom"))
             }, {
-              default: l(() => [
-                i(k, { style: { cursor: "pointer" } }, {
-                  default: l(() => e[40] || (e[40] = [
-                    m(" Legend Bottom ")
+              default: n(() => [
+                s(D, { style: { cursor: "pointer" } }, {
+                  default: n(() => e[29] || (e[29] = [
+                    g(" Legend Bottom ")
                   ])),
                   _: 1
                 })
               ]),
               _: 1
             }),
-            i(V, {
-              onClick: e[18] || (e[18] = (d) => n.moveLegend("left"))
+            s(x, {
+              onClick: e[18] || (e[18] = (o) => a.moveLegend("left"))
             }, {
-              default: l(() => [
-                i(k, { style: { cursor: "pointer" } }, {
-                  default: l(() => e[41] || (e[41] = [
-                    m(" Legend Left ")
+              default: n(() => [
+                s(D, { style: { cursor: "pointer" } }, {
+                  default: n(() => e[30] || (e[30] = [
+                    g(" Legend Left ")
                   ])),
                   _: 1
                 })
               ]),
               _: 1
             }),
-            i(V, {
-              onClick: e[19] || (e[19] = (d) => n.moveLegend("right"))
+            s(x, {
+              onClick: e[19] || (e[19] = (o) => a.moveLegend("right"))
             }, {
-              default: l(() => [
-                i(k, { style: { cursor: "pointer" } }, {
-                  default: l(() => e[42] || (e[42] = [
-                    m(" Legend RIght ")
+              default: n(() => [
+                s(D, { style: { cursor: "pointer" } }, {
+                  default: n(() => e[31] || (e[31] = [
+                    g(" Legend RIght ")
                   ])),
                   _: 1
                 })
@@ -1960,16 +1825,16 @@ function De(t, e, s, h, a, n) {
         })
       ]),
       _: 1
-    }, 8, ["modelValue", "target"])) : S("", !0),
-    s.sparkline ? S("", !0) : (y(), P("div", Te, [
-      i(o, {
+    }, 8, ["modelValue", "target"])) : _("", !0),
+    i.sparkline ? _("", !0) : (v(), N("div", ve, [
+      s(z, {
         text: "Click item to toggle, Right click to edit",
         location: "top"
       }, {
-        activator: l(({ props: d }) => [
-          i(r, ee(te(d)), {
-            default: l(() => e[43] || (e[43] = [
-              m(" mdi-information-variant-circle ")
+        activator: n(({ props: o }) => [
+          s(I, J(Q(o)), {
+            default: n(() => e[32] || (e[32] = [
+              g(" mdi-information-variant-circle ")
             ])),
             _: 2
           }, 1040)
@@ -1979,10 +1844,10 @@ function De(t, e, s, h, a, n) {
     ], 512))
   ]);
 }
-const Se = /* @__PURE__ */ W(ve, [["render", De], ["__scopeId", "data-v-51bcc3ba"]]);
+const _e = /* @__PURE__ */ P(pe, [["render", ye], ["__scopeId", "data-v-f455219c"]]);
 export {
-  Se as G,
-  ue as a,
-  ce as b
+  _e as G,
+  oe as a,
+  me as b
 };
-//# sourceMappingURL=Graph-Bgo0cjl3.js.map
+//# sourceMappingURL=Graph-M382Zo8o.js.map