@openc3/vue-common 6.2.0 → 6.3.0

package/dist/Graph-Bgo0cjl3.js

@@ -0,0 +1,1988 @@
+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 = {
+  props: {
+    modelValue: Boolean,
+    // modelValue is the default prop when using v-model
+    title: {
+      type: String,
+      required: !0
+    },
+    legendPosition: {
+      type: String,
+      required: !0
+    },
+    items: {
+      type: Array,
+      required: !0
+    },
+    graphMinY: {
+      type: Number
+    },
+    graphMaxY: {
+      type: Number
+    },
+    lines: {
+      type: Array,
+      required: !0
+    },
+    colors: {
+      type: Array,
+      required: !0
+    },
+    startDateTime: {
+      type: Number
+    },
+    endDateTime: {
+      type: Number
+    },
+    timeZone: {
+      type: String,
+      required: !0
+    }
+  },
+  mixins: [X],
+  data: function() {
+    return {
+      tab: 0,
+      graph: {},
+      legendPositions: ["top", "bottom", "left", "right"],
+      startDate: null,
+      startTime: null,
+      endDate: null,
+      endTime: null,
+      lineHeaders: [
+        { title: "Y Value", value: "yValue" },
+        { title: "Color", value: "color" },
+        { title: "Actions", value: "actions", sortable: !1 }
+      ],
+      itemHeaders: [
+        { title: "Target Name", value: "targetName" },
+        { title: "Packet Name", value: "packetName" },
+        { title: "Item Name", value: "itemName" },
+        { title: "Actions", value: "actions", sortable: !1 }
+      ],
+      rules: {
+        date: (t) => {
+          if (!t) return !0;
+          try {
+            return B(K(t, "yyyy-MM-dd", /* @__PURE__ */ new Date())) || "Invalid date (YYYY-MM-DD)";
+          } catch {
+            return "Invalid date (YYYY-MM-DD)";
+          }
+        },
+        time: (t) => {
+          if (!t) return !0;
+          try {
+            return B(K(t, "HH:mm:ss", /* @__PURE__ */ new Date())) || "Invalid time (HH:MM:SS)";
+          } catch {
+            return "Invalid time (HH:MM:SS)";
+          }
+        }
+      }
+    };
+  },
+  computed: {
+    show: {
+      get() {
+        return this.modelValue;
+      },
+      set(t) {
+        this.$emit("update:modelValue", t);
+      }
+    },
+    editItems: function() {
+      if (!this.items) return [];
+      let t = 0;
+      return this.items.map((e) => (t += 1, { ...e, itemId: t }));
+    }
+  },
+  created() {
+    if (this.graph = {
+      title: this.title,
+      legendPosition: this.legendPosition,
+      items: this.items,
+      graphMinY: this.graphMinY,
+      graphMaxY: this.graphMaxY,
+      lines: [...this.lines]
+    }, this.startDateTime) {
+      let t = Z(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);
+      this.endDate = this.formatDate(t, this.timeZone), this.endTime = this.formatTimeHMS(t, this.timeZone);
+    }
+  },
+  methods: {
+    closeOk() {
+      this.startDate && this.startTime ? this.graph.startDateTime = this.startDate + " " + this.startTime : this.graph.startDateTime = null, this.endDate && this.endTime ? this.graph.endDateTime = this.endDate + " " + this.endTime : this.graph.endDateTime = null, this.$emit("ok", this.graph);
+    },
+    addLine() {
+      this.graph.lines.push({ yValue: 0, color: "white" });
+    },
+    removeLine(t) {
+      let e = this.graph.lines.indexOf(t);
+      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"
+  }, {
+    default: l(() => [
+      i(o, { height: "24" }, {
+        default: l(() => [
+          i(r),
+          e[14] || (e[14] = b("span", null, " Edit Graph ", -1)),
+          i(r)
+        ]),
+        _: 1
+      }),
+      i(d, { class: "pa-3" }, {
+        default: l(() => [
+          i(f, {
+            modelValue: t.tab,
+            "onUpdate:modelValue": e[0] || (e[0] = (c) => t.tab = c),
+            class: "ml-3"
+          }, {
+            default: l(() => [
+              i(p, { value: "0" }, {
+                default: l(() => e[15] || (e[15] = [
+                  m(" Settings ")
+                ])),
+                _: 1
+              }),
+              i(p, { value: "1" }, {
+                default: l(() => e[16] || (e[16] = [
+                  m(" Scale / Lines ")
+                ])),
+                _: 1
+              }),
+              i(p, { value: "2" }, {
+                default: l(() => e[17] || (e[17] = [
+                  m(" Items ")
+                ])),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["modelValue"]),
+          i(R, {
+            modelValue: t.tab,
+            "onUpdate:modelValue": e[10] || (e[10] = (c) => t.tab = c)
+          }, {
+            default: l(() => [
+              i(Y, {
+                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, {
+                                  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"])
+                              ]),
+                              _: 1
+                            })
+                          ]),
+                          _: 1
+                        }),
+                        i(w, null, {
+                          default: l(() => [
+                            i(_, {
+                              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"])
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 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. ")
+                      ])),
+                      _: 1
+                    }),
+                    i(v, null, {
+                      default: l(() => [
+                        i(w, null, {
+                          default: l(() => [
+                            i(g, {
+                              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"])
+                          ]),
+                          _: 1
+                        }),
+                        i(w, null, {
+                          default: l(() => [
+                            i(g, {
+                              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"])
+                          ]),
+                          _: 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. ")
+                      ])),
+                      _: 1
+                    }),
+                    i(v, null, {
+                      default: l(() => [
+                        i(w, null, {
+                          default: l(() => [
+                            i(g, {
+                              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"])
+                          ]),
+                          _: 1
+                        }),
+                        i(w, null, {
+                          default: l(() => [
+                            i(g, {
+                              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"])
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ]),
+                _: 1
+              }),
+              i(Y, {
+                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 ")
+                      ])),
+                      _: 1
+                    }),
+                    i(v, { dense: "" }, {
+                      default: l(() => [
+                        i(w, { class: "px-2" }, {
+                          default: l(() => [
+                            i(g, {
+                              "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, {
+                              "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"])
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  b("div", re, [
+                    i(G, {
+                      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: l(() => e[21] || (e[21] = [
+                                m(" New Line ")
+                              ])),
+                              _: 1
+                            })
+                          ]),
+                          _: 1
+                        }),
+                        (y(!0), P(F, null, J(t.graph.lines, (c, A) => (y(), T(z, {
+                          key: A,
+                          value: c,
+                          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
+                                    }, null, 8, ["modelValue", "onUpdate:modelValue"])
+                                  ]),
+                                  _: 2
+                                }, 1024),
+                                i(w, null, {
+                                  default: l(() => [
+                                    i(_, {
+                                      label: "Color",
+                                      "hide-details": "",
+                                      items: s.colors,
+                                      modelValue: c.color,
+                                      "onUpdate:modelValue": (N) => c.color = N
+                                    }, null, 8, ["items", "modelValue", "onUpdate:modelValue"])
+                                  ]),
+                                  _: 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)
+                                  ]),
+                                  _: 2
+                                }, 1024)
+                              ]),
+                              _: 2
+                            }, 1024)
+                          ]),
+                          _: 2
+                        }, 1032, ["value"]))), 128))
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ]),
+                _: 1
+              }),
+              i(Y, {
+                value: "2",
+                eager: ""
+              }, {
+                default: l(() => [
+                  i(L, {
+                    "item-key": "itemId",
+                    class: "elevation-1 my-2",
+                    "data-test": "edit-graph-items",
+                    headers: t.itemHeaders,
+                    items: n.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)
+                    ]),
+                    "no-data": l(() => e[25] || (e[25] = [
+                      b("span", null, " Currently no items on this graph ", -1)
+                    ])),
+                    _: 1
+                  }, 8, ["headers", "items"])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["modelValue"]),
+          i(H, { class: "px-2" }, {
+            default: l(() => [
+              i(r),
+              i(O, {
+                variant: "outlined",
+                onClick: e[11] || (e[11] = (c) => t.$emit("cancel"))
+              }, {
+                default: l(() => e[26] || (e[26] = [
+                  m(" Cancel ")
+                ])),
+                _: 1
+              }),
+              i(O, {
+                variant: "flat",
+                onClick: n.closeOk
+              }, {
+                default: l(() => e[27] || (e[27] = [
+                  m(" Ok ")
+                ])),
+                _: 1
+              }, 8, ["onClick"])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  }, 8, ["modelValue"]);
+}
+const ue = /* @__PURE__ */ W(le, [["render", de]]), he = {
+  props: {
+    modelValue: Boolean,
+    item: {
+      type: Object,
+      required: !0
+    },
+    colors: {
+      type: Array,
+      required: !0
+    }
+  },
+  data: function() {
+    return {
+      editItem: null,
+      limitsName: "NONE",
+      // NONE: [] matches the default limits assigned in Graph addItems
+      limits: { NONE: [] },
+      valueTypes: ["CONVERTED", "RAW"],
+      reduction: [
+        // Map NONE to DECOM for clarity
+        { title: "NONE", value: "DECOM" },
+        { title: "REDUCED_MINUTE", value: "REDUCED_MINUTE" },
+        { title: "REDUCED_HOUR", value: "REDUCED_HOUR" },
+        { title: "REDUCED_DAY", value: "REDUCED_DAY" }
+      ],
+      reducedTypes: ["MIN", "MAX", "AVG", "STDDEV"]
+    };
+  },
+  computed: {
+    show: {
+      get() {
+        return this.modelValue;
+      },
+      set(t) {
+        this.$emit("update:modelValue", t);
+      }
+    },
+    limitsNames() {
+      return Object.keys(this.limits);
+    }
+  },
+  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.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),
+    width: "400",
+    onKeydown: e[10] || (e[10] = j((v) => t.success(), ["enter"]))
+  }, {
+    default: l(() => [
+      i(w, null, {
+        default: l(() => [
+          i(r, { class: "mb-2" }, {
+            default: l(() => e[11] || (e[11] = [
+              m("Edit Item")
+            ])),
+            _: 1
+          }),
+          i(p, null, {
+            default: l(() => [
+              i(o, {
+                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),
+                class: "mb-2"
+              }, null, 8, ["items", "modelValue"]),
+              i(o, {
+                variant: "outlined",
+                "hide-details": "",
+                label: "Reduction",
+                items: t.reduction,
+                modelValue: t.editItem.reduced,
+                "onUpdate:modelValue": e[1] || (e[1] = (v) => t.editItem.reduced = v),
+                class: "mb-2"
+              }, null, 8, ["items", "modelValue"]),
+              i(o, {
+                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),
+                class: "mb-2"
+              }, null, 8, ["items", "disabled", "modelValue"]),
+              i(o, {
+                variant: "outlined",
+                "hide-details": "",
+                label: "Color",
+                items: s.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))
+                ],
+                class: "mb-2"
+              }, null, 8, ["items", "modelValue"]),
+              n.limitsNames.length > 1 ? (y(), P("div", me, [
+                i(o, {
+                  variant: "outlined",
+                  "hide-details": "",
+                  label: "Display Limits",
+                  items: n.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]))
+                  ]
+                }, null, 8, ["items", "modelValue"]),
+                b("div", pe, E(t.limitsName) + ": " + E(t.limits[t.limitsName]), 1)
+              ])) : S("", !0)
+            ]),
+            _: 1
+          }),
+          i(D, { class: "px-2" }, {
+            default: l(() => [
+              i(f),
+              i(g, {
+                variant: "outlined",
+                onClick: e[7] || (e[7] = (v) => t.$emit("cancel"))
+              }, {
+                default: l(() => e[12] || (e[12] = [
+                  m(" Cancel ")
+                ])),
+                _: 1
+              }),
+              i(g, {
+                variant: "flat",
+                onClick: e[8] || (e[8] = (v) => t.$emit("close", t.editItem))
+              }, {
+                default: l(() => e[13] || (e[13] = [
+                  m(" Ok ")
+                ])),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  }, 8, ["modelValue"]);
+}
+const ce = /* @__PURE__ */ W(he, [["render", fe]]), ve = {
+  components: {
+    GraphEditDialog: ue,
+    GraphEditItemDialog: ce
+  },
+  props: {
+    id: {
+      type: Number,
+      required: !0
+    },
+    selectedGraphId: {
+      type: Number
+      // Not required because we pass null
+    },
+    state: {
+      type: String,
+      required: !0
+    },
+    // start time in nanoseconds to start the graph
+    // this allows multiple graphs to be synchronized
+    startTime: {
+      type: Number
+    },
+    secondsGraphed: {
+      type: Number,
+      required: !0
+    },
+    pointsSaved: {
+      type: Number,
+      required: !0
+    },
+    pointsGraphed: {
+      type: Number,
+      required: !0
+    },
+    refreshIntervalMs: {
+      type: Number,
+      default: 200
+    },
+    hideToolbar: {
+      type: Boolean,
+      default: !1
+    },
+    hideOverview: {
+      type: Boolean,
+      default: !1
+    },
+    sparkline: {
+      type: Boolean,
+      default: !1
+    },
+    initialItems: {
+      type: Array
+    },
+    // These allow the parent to force a specific height and/or width
+    height: {
+      type: Number
+    },
+    width: {
+      type: Number
+    },
+    timeZone: {
+      type: String,
+      default: "local"
+    }
+  },
+  mixins: [X],
+  data() {
+    return {
+      lines: [],
+      active: !0,
+      expand: !0,
+      fullWidth: !0,
+      fullHeight: !0,
+      graph: null,
+      editGraph: !1,
+      editGraphMenu: !1,
+      editGraphMenuX: 0,
+      editGraphMenuY: 0,
+      editItem: !1,
+      itemMenu: !1,
+      itemMenuX: 0,
+      itemMenuY: 0,
+      legendMenu: !1,
+      legendMenuX: 0,
+      legendMenuY: 0,
+      legendPosition: "bottom",
+      selectedItem: null,
+      hideToolbarData: this.hideToolbar,
+      showOverview: !this.hideOverview,
+      hideOverviewData: this.hideOverview,
+      title: "",
+      overview: null,
+      data: [[]],
+      dataChanged: !1,
+      timeout: null,
+      graphMinY: null,
+      graphMaxY: null,
+      graphStartDateTime: null,
+      graphEndDateTime: null,
+      indexes: {},
+      items: this.initialItems || [],
+      limitsValues: [],
+      drawInterval: null,
+      zoomChart: !1,
+      zoomOverview: !1,
+      cable: new se(),
+      subscription: null,
+      needToUpdate: !1,
+      errorDialog: !1,
+      errors: [],
+      colorIndex: 0,
+      colors: [
+        // The first 3 are taken from the Astro css definitions for
+        // --color-data-visualization-1 through 3
+        "#00c7cb",
+        "#938bdb",
+        "#4dacff",
+        "lime",
+        "darkorange",
+        "red",
+        "gold",
+        "hotpink",
+        "tan",
+        "cyan",
+        "maroon",
+        "blue",
+        "teal",
+        "purple",
+        "green",
+        "brown",
+        "lightblue",
+        "white",
+        "black"
+      ]
+    };
+  },
+  computed: {
+    calcFullSize: function() {
+      return this.fullWidth || this.fullHeight;
+    },
+    error: function() {
+      return this.errorDialog && this.errors.length > 0 ? JSON.stringify(this.errors, null, 4) : null;
+    }
+  },
+  created() {
+    this.title = `Graph ${this.id}`;
+    for (const [t, e] of this.items.entries())
+      this.data.push([]), this.indexes[this.subscriptionKey(e)] = t + 1, e.color === void 0 && (e.color = this.colors[this.colorIndex]), this.colorIndex++, this.colorIndex === this.colors.length && (this.colorIndex = 0);
+  },
+  mounted() {
+    const { chartSeries: t, overviewSeries: e } = this.items.reduce(
+      (h, a) => {
+        const n = {
+          spanGaps: !0
+        };
+        return h.chartSeries.push({
+          ...n,
+          item: a,
+          label: this.formatLabel(a),
+          stroke: (r, o) => this.items[o - 1].color,
+          width: 2,
+          value: (r, o) => typeof o == "string" || isNaN(o) ? "NaN" : o == null ? "--" : o.toFixed(3)
+        }), h.overviewSeries.push({
+          ...n
+        }), h;
+      },
+      { chartSeries: [], overviewSeries: [] }
+    );
+    let s = {};
+    if (this.sparkline)
+      this.hideToolbarData = !0, this.hideOverviewData = !0, this.showOverview = !1, s = {
+        width: this.width,
+        height: this.height,
+        pxAlign: !1,
+        cursor: {
+          show: !1
+        },
+        select: {
+          show: !1
+        },
+        legend: {
+          show: !1
+        },
+        scales: {
+          x: {
+            time: !1
+          }
+        },
+        axes: [
+          {
+            show: !1
+          },
+          {
+            show: !1
+          }
+        ],
+        series: [
+          {},
+          {
+            stroke: "white"
+            // TODO: Light / dark theme
+          }
+        ]
+      }, this.graph = new I(
+        s,
+        this.data,
+        document.getElementById(`chart${this.id}`)
+      );
+    else {
+      let h = Intl.DateTimeFormat().resolvedOptions().timeZone;
+      this.timeZone && this.timeZone !== "local" && (h = this.timeZone), s = {
+        ...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),
+        series: [
+          {
+            label: "Time",
+            value: (n, r) => (
+              // Convert the unix timestamp into a formatted date / time
+              r == null ? "--" : this.formatSeconds(r, this.timeZone)
+            )
+          },
+          ...t
+        ],
+        cursor: {
+          drag: {
+            x: !0,
+            y: !1
+          },
+          // Sync the cursor across graphs so mouseovers are synced
+          sync: {
+            key: "openc3"
+            // setSeries links graphs so clicking an item to hide it also hides the other graph item
+            // setSeries: true,
+          },
+          bind: {
+            mouseup: (n, r, o) => (p) => {
+              this.state === "pause" && n.select.width === 0 && this.$emit("start"), o(p);
+            }
+          }
+        },
+        hooks: {
+          setScale: [
+            (n, 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")
+                );
+                this.overview.setSelect({ left: o, width: p - o }), this.zoomChart = !1;
+              }
+            }
+          ],
+          setSelect: [
+            (n) => {
+              this.state === "start" && n.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;
+              });
+              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);
+            }
+          ]
+        }
+      }, this.graph = new I(
+        s,
+        this.data,
+        document.getElementById(`chart${this.id}`)
+      );
+      const a = {
+        ...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),
+        series: [...e],
+        cursor: {
+          y: !1,
+          drag: {
+            setScale: !1,
+            x: !0,
+            y: !1
+          }
+        },
+        legend: {
+          show: !1
+        },
+        hooks: {
+          setSelect: [
+            (n) => {
+              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,
+                  "x"
+                );
+                this.graph.setScale("x", { min: r, max: o }), this.zoomOverview = !1;
+              }
+            }
+          ]
+        }
+      };
+      this.hideOverview || (this.overview = new I(
+        a,
+        this.data,
+        document.getElementById(`overview${this.id}`)
+      )), this.moveLegend(this.legendPosition), window.addEventListener("resize", this.resize);
+    }
+    this.state !== "stop" && this.startGraph();
+  },
+  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(() => {
+        this.updateTimeout();
+      }, this.refreshIntervalMs);
+    },
+    stopGraph: function() {
+      this.subscription && (this.subscription.unsubscribe(), this.subscription = null), this.timeout && (clearTimeout(this.timeout), this.timeout = null);
+    },
+    updateTimeout: function() {
+      this.updateGraphData(), this.timeout = setTimeout(() => {
+        this.updateTimeout();
+      }, this.refreshIntervalMs);
+    },
+    updateGraphData: function() {
+      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;
+    },
+    formatLabel(t) {
+      if (t.valueType === "CONVERTED" && t.reduced === "DECOM")
+        return t.itemName;
+      {
+        let e = "";
+        return t.valueType !== "CONVERTED" && (e += t.valueType), t.reduced !== "DECOM" && (e !== "" && (e += " "), e += `${t.reduced.split("_")[1]} ${t.reducedType}`), `${t.itemName} (${e})`;
+      }
+    },
+    moveLegend: function(t) {
+      switch (t) {
+        case "bottom":
+          this.graph.root.classList.remove("side-legend"), this.graph.root.classList.remove("left-legend"), this.graph.root.classList.remove("top-legend");
+          break;
+        case "top":
+          this.graph.root.classList.remove("side-legend"), this.graph.root.classList.remove("left-legend"), this.graph.root.classList.add("top-legend");
+          break;
+        case "left":
+          this.graph.root.classList.remove("top-legend"), this.graph.root.classList.add("side-legend"), this.graph.root.classList.add("left-legend");
+          break;
+        case "right":
+          this.graph.root.classList.remove("top-legend"), this.graph.root.classList.remove("left-legend"), this.graph.root.classList.add("side-legend");
+          break;
+      }
+      this.legendPosition = t, this.resize();
+    },
+    clearErrors: function() {
+      this.errors = [];
+    },
+    editGraphClose: function(t) {
+      this.editGraph = !1, this.title = t.title, this.legendPosition = t.legendPosition, this.graphMinY = t.graphMinY, this.graphMaxY = t.graphMaxY, this.lines = [...t.lines], this.graphStartDateTime = t.startDateTime, this.graphEndDateTime = t.endDateTime, this.$nextTick(() => {
+        if (this.needToUpdate) {
+          if (this.subscription == null)
+            this.startGraph();
+          else {
+            let e = JSON.parse(JSON.stringify(this.items));
+            this.removeItems(e), setTimeout(() => {
+              this.addItems(e);
+            }, 0);
+          }
+          this.needToUpdate = !1;
+        }
+      }), this.moveLegend(this.legendPosition), this.$emit("edit");
+    },
+    resize: function() {
+      this.graph.setSize(this.getSize("chart")), this.overview && this.overview.setSize(this.getSize("overview")), this.$emit("resize", this.id);
+    },
+    expandAll: function() {
+      this.fullWidth = !0, this.fullHeight = !0, this.resize();
+    },
+    collapseAll: function() {
+      this.fullWidth = !1, this.fullHeight = !1, this.resize();
+    },
+    expandWidth: function() {
+      this.fullWidth = !0, this.resize();
+    },
+    collapseWidth: function() {
+      this.fullWidth = !1, this.resize();
+    },
+    expandHeight: function() {
+      this.fullHeight = !0, this.resize();
+    },
+    collapseHeight: function() {
+      this.fullHeight = !1, this.resize();
+    },
+    minMaxTransition: function() {
+      this.expand = !this.expand, this.$emit("min-max-graph", this.id);
+    },
+    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);
+      };
+    },
+    subscribe: function() {
+      this.cable.createSubscription("StreamingChannel", window.openc3Scope, {
+        received: (t) => this.received(t),
+        connected: () => {
+          this.addItemsToSubscription(this.items);
+        },
+        disconnected: (t) => {
+          t.allowReconnect && this.errors.push({
+            type: "disconnected",
+            message: "OpenC3 backend connection disconnected",
+            time: (/* @__PURE__ */ new Date()).getTime()
+          });
+        },
+        rejected: () => {
+          this.errors.push({
+            type: "rejected",
+            message: "OpenC3 backend connection rejected",
+            time: (/* @__PURE__ */ new Date()).getTime()
+          });
+        }
+      }).then((t) => {
+        this.subscription = t;
+      });
+    },
+    // throttle(cb, limit) {
+    //   let wait = false
+    //   return () => {
+    //     if (!wait) {
+    //       requestAnimationFrame(cb)
+    //       wait = true
+    //       setTimeout(() => {
+    //         wait = false
+    //       }, limit)
+    //     }
+    //   }
+    // },
+    getSize: function(t) {
+      let e = 0;
+      const s = document.getElementById("openc3-nav-drawer");
+      s && (e = s.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(
+        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
+      };
+    },
+    getScales: function() {
+      return {
+        scales: {
+          x: {
+            range(t, e, s) {
+              return e == null ? [1566453600, 1566497660] : [e, s];
+            }
+          },
+          y: {
+            range(t, e, s) {
+              return e == null ? [-100, 100] : I.rangeNum(e, s, 0.1, !0);
+            }
+          }
+        }
+      };
+    },
+    getAxes: function(t) {
+      let e = "rgba(255, 255, 255, .1)", s = "white";
+      return {
+        axes: [
+          {
+            stroke: s,
+            grid: {
+              show: !0,
+              stroke: e,
+              width: 2
+            }
+          },
+          {
+            size: 80,
+            // This size supports values up to 8 digits plus sign
+            stroke: s,
+            grid: {
+              show: t !== "overview",
+              stroke: e,
+              width: 2
+            },
+            // 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;
+            }
+          }
+        ]
+      };
+    },
+    closeEditItem: function(t) {
+      this.editItem = !1, // If we have an end time and anything was changed we basically regraph
+      (this.graphEndDateTime !== null && this.selectedItem !== t || // If we're live graphing we just regraph if the types change
+      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;
+    },
+    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;
+    },
+    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)
+              ), 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);
+            }
+            if (t.scales.y.max > this.limitsValues[3]) {
+              let f = h < p ? h : p;
+              e.fillRect(s.left, a, s.width, f - a);
+            }
+            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);
+            }
+            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);
+            }
+            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);
+              }
+            } else {
+              const f = t.valToPos(this.limitsValues[4], "y", !0), g = 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 - _);
+              }
+              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 - _);
+              }
+              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);
+            }
+            e.stroke(), e.restore();
+          }
+        }
+      };
+    },
+    changeItem: function(t) {
+      this.removeItems([this.selectedItem]), this.selectedItem.valueType = t.valueType, this.selectedItem.reduced = t.reduced, this.selectedItem.reducedType = t.reducedType, setTimeout(() => {
+        this.addItems([this.selectedItem]);
+      }, 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;
+      }), this.updateColorIndex(t), this.addItemsToSubscription(t), this.$emit("resize"), this.$emit("edit");
+    },
+    createSeriesConfig: function(t) {
+      return {
+        spanGaps: !0,
+        item: t,
+        label: this.formatLabel(t),
+        stroke: (e, s) => this.items[s - 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)
+      };
+    },
+    createOverviewSeriesConfig: function() {
+      return {
+        spanGaps: !0,
+        stroke: (t, e) => this.items[e - 1].color
+      };
+    },
+    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);
+      }
+    },
+    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", {
+            scope: window.openc3Scope,
+            token: localStorage.openc3Token,
+            items: t.map(this.subscriptionKey),
+            start_time: e,
+            end_time: this.graphEndDateTime
+          });
+        }
+      );
+    },
+    clearAllData: function() {
+      this.data[0] = [], this.clearData(this.items);
+    },
+    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);
+      }
+      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));
+      }
+      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");
+    },
+    removeItemsFromSubscription: function(t = this.items) {
+      this.subscription && this.subscription.perform("remove", {
+        scope: window.openc3Scope,
+        token: localStorage.openc3Token,
+        items: t.map(this.subscriptionKey)
+      });
+    },
+    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);
+      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]);
+        } 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;
+            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]);
+          } else {
+            let n = -a - 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]);
+          }
+        }
+      }
+      if (this.startTime == null && this.data[0][0]) {
+        let e = this.data[0][0] * 1e9;
+        this.$emit("started", e);
+      }
+      this.dataChanged = !0;
+    },
+    bs_comparator: function(t, e) {
+      return t - e;
+    },
+    set_data_at_index: function(t, e, s) {
+      this.data[0][t] = e;
+      for (const [h, a] of Object.entries(s)) {
+        if (h === "time")
+          continue;
+        let n = this.indexes[h];
+        if (n) {
+          let r = this.data[n];
+          if (a != null && a.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;
+                  break;
+                }
+              this.changeItem({
+                valueType: "RAW",
+                reduced: this.selectedItem.reduced,
+                reducedType: this.selectedItem.reducedType
+              });
+            }
+          } else
+            r[t] = a;
+        }
+      }
+    },
+    subscriptionKey: function(t) {
+      let e = `${t.reduced}__TLM__${t.targetName}__${t.packetName}__${t.itemName}__${t.valueType}`;
+      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",
+  id: "chart",
+  ref: "chart"
+}, be = ["id"], we = ["id"], Te = {
+  key: 5,
+  class: "u-series",
+  ref: "info"
+};
+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"]))
+  }, [
+    i(D, null, {
+      default: l(() => [
+        C(i(f, {
+          height: "24",
+          class: $(["pl-2 pr-2", s.selectedGraphId === s.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
+              })
+            ], 512), [
+              [M, a.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
+            }),
+            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, {
+                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, {
+                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, {
+              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
+            })
+          ]),
+          _: 1
+        }, 8, ["class"]), [
+          [M, !a.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]
+              ])
+            ], 512), [
+              [M, a.expand]
+            ])
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }),
+    a.editGraph ? (y(), T(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),
+      "max-width": "600"
+    }, {
+      default: l(() => [
+        i(f, { height: "24" }, {
+          default: l(() => [
+            i(p),
+            e[34] || (e[34] = b("span", null, " Errors ", -1)),
+            i(p)
+          ]),
+          _: 1
+        }),
+        i(D, { class: "pa-3" }, {
+          default: l(() => [
+            i(v, { dense: "" }, {
+              default: l(() => [
+                i(_, {
+                  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, {
+                  readonly: "",
+                  rows: "8",
+                  value: n.error
+                }, null, 8, ["value"])
+              ]),
+              _: 1
+            }),
+            i(v, null, {
+              default: l(() => [
+                i(O, {
+                  block: "",
+                  onClick: n.clearErrors
+                }, {
+                  default: l(() => e[35] || (e[35] = [
+                    m(" Clear ")
+                  ])),
+                  _: 1
+                }, 8, ["onClick"])
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["modelValue"]),
+    a.editGraphMenu ? (y(), T(L, {
+      key: 1,
+      modelValue: a.editGraphMenu,
+      "onUpdate:modelValue": e[9] || (e[9] = (d) => a.editGraphMenu = d),
+      target: [a.editGraphMenuX, a.editGraphMenuY],
+      absolute: "",
+      "offset-y": ""
+    }, {
+      default: l(() => [
+        i(G, null, {
+          default: l(() => [
+            i(V, {
+              onClick: e[8] || (e[8] = (d) => a.editGraph = !0)
+            }, {
+              default: l(() => [
+                i(k, { style: { cursor: "pointer" } }, {
+                  default: l(() => [
+                    m(" Edit " + E(a.title), 1)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["modelValue", "target"])) : S("", !0),
+    a.editItem ? (y(), T(R, {
+      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, {
+      key: 3,
+      modelValue: a.itemMenu,
+      "onUpdate:modelValue": e[15] || (e[15] = (d) => a.itemMenu = d),
+      target: [a.itemMenuX, a.itemMenuY],
+      absolute: "",
+      "offset-y": ""
+    }, {
+      default: l(() => [
+        i(G, {
+          nav: "",
+          density: "compact"
+        }, {
+          default: l(() => [
+            i(H, null, {
+              default: l(() => [
+                m(E(a.selectedItem.targetName) + " " + E(a.selectedItem.packetName) + " " + E(a.selectedItem.itemName), 1)
+              ]),
+              _: 1
+            }),
+            i(V, {
+              onClick: e[12] || (e[12] = (d) => a.editItem = !0)
+            }, {
+              prepend: l(() => [
+                i(r, { icon: "mdi-pencil" })
+              ]),
+              default: l(() => [
+                i(k, null, {
+                  default: l(() => e[36] || (e[36] = [
+                    m(" Edit ")
+                  ])),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            i(V, {
+              onClick: e[13] || (e[13] = (d) => n.clearData([a.selectedItem]))
+            }, {
+              prepend: l(() => [
+                i(r, { icon: "mdi-eraser" })
+              ]),
+              default: l(() => [
+                i(k, null, {
+                  default: l(() => e[37] || (e[37] = [
+                    m(" Clear ")
+                  ])),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            i(V, {
+              onClick: e[14] || (e[14] = (d) => n.removeItems([a.selectedItem]))
+            }, {
+              prepend: l(() => [
+                i(r, { icon: "mdi-delete" })
+              ]),
+              default: l(() => [
+                i(k, null, {
+                  default: l(() => e[38] || (e[38] = [
+                    m(" Delete ")
+                  ])),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["modelValue", "target"])) : S("", !0),
+    a.legendMenu ? (y(), T(L, {
+      key: 4,
+      modelValue: a.legendMenu,
+      "onUpdate:modelValue": e[20] || (e[20] = (d) => a.legendMenu = d),
+      target: [a.legendMenuX, a.legendMenuY],
+      absolute: "",
+      "offset-y": ""
+    }, {
+      default: l(() => [
+        i(G, null, {
+          default: l(() => [
+            i(V, {
+              onClick: e[16] || (e[16] = (d) => n.moveLegend("top"))
+            }, {
+              default: l(() => [
+                i(k, { style: { cursor: "pointer" } }, {
+                  default: l(() => e[39] || (e[39] = [
+                    m(" Legend Top ")
+                  ])),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            i(V, {
+              onClick: e[17] || (e[17] = (d) => n.moveLegend("bottom"))
+            }, {
+              default: l(() => [
+                i(k, { style: { cursor: "pointer" } }, {
+                  default: l(() => e[40] || (e[40] = [
+                    m(" Legend Bottom ")
+                  ])),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            i(V, {
+              onClick: e[18] || (e[18] = (d) => n.moveLegend("left"))
+            }, {
+              default: l(() => [
+                i(k, { style: { cursor: "pointer" } }, {
+                  default: l(() => e[41] || (e[41] = [
+                    m(" Legend Left ")
+                  ])),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            i(V, {
+              onClick: e[19] || (e[19] = (d) => n.moveLegend("right"))
+            }, {
+              default: l(() => [
+                i(k, { style: { cursor: "pointer" } }, {
+                  default: l(() => e[42] || (e[42] = [
+                    m(" Legend RIght ")
+                  ])),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["modelValue", "target"])) : S("", !0),
+    s.sparkline ? S("", !0) : (y(), P("div", Te, [
+      i(o, {
+        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 ")
+            ])),
+            _: 2
+          }, 1040)
+        ]),
+        _: 1
+      })
+    ], 512))
+  ]);
+}
+const Se = /* @__PURE__ */ W(ve, [["render", De], ["__scopeId", "data-v-51bcc3ba"]]);
+export {
+  Se as G,
+  ue as a,
+  ce as b
+};
+//# sourceMappingURL=Graph-Bgo0cjl3.js.map