@openc3/vue-common 6.6.0 → 6.8.0

package/dist/Graph-CWcrowaT.js

@@ -0,0 +1,2662 @@
+import { T as F } from "./timeFilters-BKnCM4rv.js";
+import { d as X, f as B, u as _, a as ee } from "./UpgradeToEnterpriseDialog.vue_vue_type_style_index_0_scoped_2c757408_lang-quWsUlLr.js";
+import { resolveComponent as d, createElementBlock as V, openBlock as f, createVNode as l, createBlock as x, createCommentVNode as k, withCtx as r, createSlots as te, createTextVNode as g, toDisplayString as A, normalizeClass as J, Fragment as W, withKeys as Q, createElementVNode as N, renderList as ie, withModifiers as K, withDirectives as L, vShow as O, normalizeProps as se, guardReactiveProps as le } from "vue";
+import { _ as R } from "./CustomIcon-h5X7369N.js";
+import { t as j, i as Z } from "./format-CVeawcIv.js";
+import { p as q } from "./parse-DnkEsW-3.js";
+const ae = {
+  props: {
+    allowAll: {
+      type: Boolean,
+      default: !1
+    },
+    allowAllTargets: {
+      type: Boolean,
+      default: !1
+    },
+    allowAllArrayIndex: {
+      type: Boolean,
+      default: !1
+    },
+    buttonText: {
+      type: String,
+      default: null
+    },
+    chooseItem: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    initialTargetName: {
+      type: String,
+      default: ""
+    },
+    initialPacketName: {
+      type: String,
+      default: ""
+    },
+    initialItemName: {
+      type: String,
+      default: ""
+    },
+    selectTypes: {
+      type: Boolean,
+      default: !1
+    },
+    showLatest: {
+      type: Boolean,
+      default: !1
+    },
+    mode: {
+      type: String,
+      default: "tlm",
+      // TODO: add validators throughout
+      validator: (t) => ["cmd", "tlm"].includes(t)
+    },
+    unknown: {
+      type: Boolean,
+      default: !1
+    },
+    vertical: {
+      type: Boolean,
+      default: !1
+    },
+    hidden: {
+      type: Boolean,
+      default: !1
+    },
+    lockTarget: {
+      type: Boolean,
+      default: !1
+    },
+    lockPacket: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["on-set", "addItem"],
+  data() {
+    var t, e, i;
+    return {
+      targetNames: [],
+      selectedTargetName: (t = this.initialTargetName) == null ? void 0 : t.toUpperCase(),
+      packetNames: [],
+      selectedPacketName: (e = this.initialPacketName) == null ? void 0 : e.toUpperCase(),
+      itemNames: [],
+      selectedItemName: (i = this.initialItemName) == null ? void 0 : i.toUpperCase(),
+      valueTypes: ["CONVERTED", "RAW"],
+      selectedValueType: "CONVERTED",
+      reductionModes: [
+        // 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" }
+      ],
+      selectedArrayIndex: null,
+      selectedReduced: "DECOM",
+      reducedTypes: ["MIN", "MAX", "AVG", "STDDEV"],
+      selectedReducedType: "AVG",
+      description: "",
+      hazardous: !1,
+      internalDisabled: !1,
+      packetsDisabled: !1,
+      itemsDisabled: !1,
+      api: null,
+      ALL: {
+        label: "[ ALL ]",
+        value: "ALL",
+        description: "ALL"
+      },
+      // Constant to indicate all packets or items
+      UNKNOWN: {
+        label: "[ UNKNOWN ]",
+        value: "UNKNOWN",
+        description: "UNKNOWN"
+      }
+    };
+  },
+  computed: {
+    actualButtonText: function() {
+      return this.selectedPacketName === "ALL" ? "Add Target" : this.selectedItemName === "ALL" ? "Add Packet" : this.buttonText;
+    },
+    autocompleteDisabled: function() {
+      return this.disabled || this.internalDisabled;
+    },
+    buttonDisabled: function() {
+      return this.disabled || this.internalDisabled || this.selectedTargetName === null || this.selectedPacketName === null || this.selectedItemNameWIndex === null;
+    },
+    colSize: function() {
+      return this.vertical ? 12 : !1;
+    },
+    selectedItemNameWIndex: function() {
+      return this.itemIsArray && this.selectedArrayIndex !== null && this.selectedArrayIndex !== this.ALL.label ? `${this.selectedItemName}[${this.selectedArrayIndex}]` : this.selectedItemName;
+    },
+    includeLatestPacketInDropdown: function() {
+      return this.showLatest && this.mode === "tlm";
+    },
+    arrayIndexes: function() {
+      let t = this.itemNames.findIndex(
+        (i) => i.value === this.selectedItemName
+      ), e = [...Array(this.itemNames[t].array).keys()];
+      return (this.allowAll || this.allowAllArrayIndex) && e.unshift(this.ALL.label), e;
+    },
+    itemIsArray: function() {
+      let t = this.itemNames.findIndex(
+        (e) => e.value === this.selectedItemName
+      );
+      return !(t === -1 || isNaN(this.itemNames[t].array));
+    }
+  },
+  watch: {
+    initialTargetName: function(t) {
+      t && (this.selectedTargetName = t.toUpperCase());
+    },
+    initialPacketName: function(t) {
+      t && (this.selectedPacketName = t.toUpperCase());
+    },
+    initialItemName: function(t) {
+      t && (this.selectedItemName = t.toUpperCase());
+    },
+    mode: function(t, e) {
+      this.selectedPacketName = null, this.selectedItemName = null, this.targetNameChanged(this.selectedTargetName);
+    },
+    chooseItem: function(t, e) {
+      t ? this.updateItems() : this.itemNames = [];
+    },
+    itemIsArray: function(t) {
+      t ? this.selectedArrayIndex || (this.selectedArrayIndex = 0) : this.selectedArrayIndex = null;
+    }
+  },
+  created() {
+    this.internalDisabled = !0, this.api = new X(), this.api.get_target_names().then((t) => {
+      this.targetNames = t.flatMap((e) => e == "UNKNOWN" ? [] : { label: e, value: e }), this.allowAllTargets && this.targetNames.unshift(this.ALL), this.selectedTargetName ? this.updatePackets() : (this.selectedTargetName = this.targetNames[0].value, this.targetNameChanged(this.selectedTargetName)), this.unknown && this.targetNames.push(this.UNKNOWN);
+    });
+  },
+  methods: {
+    updatePackets: function() {
+      if (this.selectedTargetName === "UNKNOWN") {
+        this.packetNames = [this.UNKNOWN], this.selectedPacketName = this.packetNames[0].value, this.updatePacketDetails(this.UNKNOWN.value), this.description = "UNKNOWN";
+        return;
+      }
+      if (this.selectedTargetName === "ALL") {
+        this.packetNames = [this.ALL], this.selectedPacketName = this.packetNames[0].value, this.updatePacketDetails(this.ALL.value), this.description = "ALL";
+        return;
+      }
+      this.internalDisabled = !0;
+      const t = this.mode === "tlm" ? "get_all_tlm_names" : "get_all_cmd_names";
+      this.api[t](this.selectedTargetName, this.hidden).then((e) => {
+        this.packetNames = e.map((n) => ({
+          label: n,
+          value: n
+        })), this.allowAll && this.packetNames.unshift(this.ALL), this.selectedPacketName || (this.packetNames.length === 0 ? this.selectedPacketName = null : this.selectedPacketName = this.packetNames[0].value), this.updatePacketDetails(this.selectedPacketName), this.packetNames.find((n) => n.value === this.selectedPacketName) && this.chooseItem && this.updateItems(), this.internalDisabled = !1;
+      });
+    },
+    updateItems: function() {
+      if (this.selectedPacketName !== "ALL")
+        if (this.internalDisabled = !0, this.selectedPacketName === "LATEST")
+          this.api.get_all_tlm_item_names(this.selectedTargetName).then((t) => {
+            this.itemNames = t.map((e) => ({
+              label: e,
+              value: e,
+              description: `LATEST ${e}`
+              // Don't handle array for LATEST
+            })), this.finishUpdateItems();
+          });
+        else {
+          const t = this.mode === "tlm" ? "get_tlm" : "get_cmd";
+          this.api[t](this.selectedTargetName, this.selectedPacketName).then(
+            (e) => {
+              this.itemNames = e.items.map((i) => {
+                let n = i.name;
+                return i.data_type == "DERIVED" && (n += " *"), {
+                  label: n,
+                  value: i.name,
+                  description: i.description,
+                  array: i.array_size / i.bit_size
+                };
+              }), this.itemNames.sort((i, n) => i.label > n.label ? 1 : -1), this.finishUpdateItems();
+            }
+          );
+        }
+    },
+    finishUpdateItems: function() {
+      this.allowAll && this.itemNames.unshift(this.ALL), this.selectedItemName || (this.selectedItemName = this.itemNames[0].value), this.description = this.itemNames[0].description, this.$emit("on-set", {
+        targetName: this.selectedTargetName,
+        packetName: this.selectedPacketName,
+        itemName: this.selectedItemNameWIndex,
+        valueType: this.selectedValueType,
+        reduced: this.selectedReduced,
+        reducedType: this.selectedReducedType
+      }), this.internalDisabled = !1;
+    },
+    targetNameChanged: function(t) {
+      this.selectedTargetName = t, this.selectedPacketName = "", this.selectedItemName = "", t !== null && this.updatePackets();
+    },
+    packetNameChanged: function(t) {
+      this.selectedItemName = "", t !== null && this.updatePacketDetails(t);
+    },
+    updatePacketDetails: function(t) {
+      if (t === "ALL")
+        this.itemsDisabled = !0, this.internalDisabled = !1;
+      else if (t === "LATEST")
+        this.itemsDisabled = !1, this.selectedPacketName = "LATEST";
+      else {
+        this.itemsDisabled = !1;
+        const e = this.packetNames.find((i) => t === i.value);
+        if (e) {
+          this.selectedPacketName = e.value;
+          const i = this.mode === "tlm" ? "get_tlm" : "get_cmd";
+          this.api[i](this.selectedTargetName, this.selectedPacketName).then(
+            (n) => {
+              this.description = n.description, this.hazardous = n.hazardous;
+            }
+          );
+        }
+      }
+      this.chooseItem ? this.updateItems() : this.$emit("on-set", {
+        targetName: this.selectedTargetName,
+        packetName: this.selectedPacketName,
+        itemName: this.selectedItemNameWIndex,
+        valueType: this.selectedValueType,
+        reduced: this.selectedReduced,
+        reducedType: this.selectedReducedType
+      });
+    },
+    itemNameChanged: function(t) {
+      const e = this.itemNames.find((i) => t === i.value);
+      e && (this.selectedItemName = e.value, this.description = e.description, this.$emit("on-set", {
+        targetName: this.selectedTargetName,
+        packetName: this.selectedPacketName,
+        itemName: this.selectedItemNameWIndex,
+        valueType: this.selectedValueType,
+        reduced: this.selectedReduced,
+        reducedType: this.selectedReducedType
+      }));
+    },
+    indexChanged: function(t) {
+      this.$emit("on-set", {
+        targetName: this.selectedTargetName,
+        packetName: this.selectedPacketName,
+        itemName: this.selectedItemNameWIndex,
+        valueType: this.selectedValueType,
+        reduced: this.selectedReduced,
+        reducedType: this.selectedReducedType
+      });
+    },
+    buttonPressed: function() {
+      this.selectedPacketName === "ALL" ? this.allTargetPacketItems() : this.selectedItemName === "ALL" ? this.allPacketItems() : this.chooseItem ? this.$emit("addItem", {
+        targetName: this.selectedTargetName,
+        packetName: this.selectedPacketName,
+        itemName: this.selectedItemNameWIndex,
+        valueType: this.selectedValueType,
+        reduced: this.selectedReduced,
+        reducedType: this.selectedReducedType
+      }) : this.$emit("addItem", {
+        targetName: this.selectedTargetName,
+        packetName: this.selectedPacketName,
+        valueType: this.selectedValueType,
+        reduced: this.selectedReduced,
+        reducedType: this.selectedReducedType
+      });
+    },
+    allTargetPacketItems: function() {
+      this.packetNames.forEach((t) => {
+        if (t === this.ALL) return;
+        const e = this.mode === "tlm" ? "get_tlm" : "get_cmd";
+        this.api[e](this.selectedTargetName, t.value).then(
+          (i) => {
+            i.items.forEach((n) => {
+              this.$emit("addItem", {
+                targetName: this.selectedTargetName,
+                packetName: t.value,
+                itemName: n.name,
+                valueType: this.selectedValueType,
+                reduced: this.selectedReduced,
+                reducedType: this.selectedReducedType
+              });
+            });
+          }
+        );
+      });
+    },
+    allPacketItems: function() {
+      this.itemNames.forEach((t) => {
+        t !== this.ALL && this.$emit("addItem", {
+          targetName: this.selectedTargetName,
+          packetName: this.selectedPacketName,
+          itemName: t.value,
+          valueType: this.selectedValueType,
+          reduced: this.selectedReduced,
+          reducedType: this.selectedReducedType
+        });
+      });
+    }
+  }
+}, ne = { class: "pt-4 pb-4" };
+function re(t, e, i, n, s, a) {
+  const o = d("v-autocomplete"), m = d("v-col"), b = d("v-list-item"), u = d("v-divider"), y = d("v-combobox"), T = d("v-btn"), I = d("v-row");
+  return f(), V("div", ne, [
+    l(I, {
+      "no-gutters": !i.vertical
+    }, {
+      default: r(() => [
+        l(m, {
+          cols: a.colSize,
+          class: "tpic-select pr-4",
+          "data-test": "select-target"
+        }, {
+          default: r(() => [
+            l(o, {
+              modelValue: s.selectedTargetName,
+              "onUpdate:modelValue": [
+                e[0] || (e[0] = (c) => s.selectedTargetName = c),
+                a.targetNameChanged
+              ],
+              label: "Select Target",
+              "hide-details": "",
+              density: "compact",
+              variant: "outlined",
+              disabled: a.autocompleteDisabled || i.lockTarget,
+              items: s.targetNames,
+              "item-title": "label",
+              "item-value": "value"
+            }, null, 8, ["modelValue", "disabled", "items", "onUpdate:modelValue"])
+          ]),
+          _: 1
+        }, 8, ["cols"]),
+        l(m, {
+          cols: a.colSize,
+          class: "tpic-select pr-4",
+          "data-test": "select-packet"
+        }, {
+          default: r(() => [
+            l(o, {
+              modelValue: s.selectedPacketName,
+              "onUpdate:modelValue": [
+                e[2] || (e[2] = (c) => s.selectedPacketName = c),
+                a.packetNameChanged
+              ],
+              label: "Select Packet",
+              "hide-details": "",
+              density: "compact",
+              variant: "outlined",
+              disabled: s.packetsDisabled || a.autocompleteDisabled || i.lockPacket,
+              items: s.packetNames,
+              "item-title": "label",
+              "item-value": "value"
+            }, te({ _: 2 }, [
+              a.includeLatestPacketInDropdown ? {
+                name: "prepend-item",
+                fn: r(() => [
+                  l(b, {
+                    title: "LATEST",
+                    onClick: e[1] || (e[1] = (c) => a.packetNameChanged("LATEST"))
+                  }),
+                  l(u)
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["modelValue", "disabled", "items", "onUpdate:modelValue"])
+          ]),
+          _: 1
+        }, 8, ["cols"]),
+        i.chooseItem ? (f(), x(m, {
+          key: 0,
+          cols: a.colSize,
+          class: "tpic-select pr-4",
+          "data-test": "select-item"
+        }, {
+          default: r(() => [
+            l(o, {
+              modelValue: s.selectedItemName,
+              "onUpdate:modelValue": [
+                e[3] || (e[3] = (c) => s.selectedItemName = c),
+                e[4] || (e[4] = (c) => a.itemNameChanged(c))
+              ],
+              label: "Select Item",
+              "hide-details": "",
+              density: "compact",
+              variant: "outlined",
+              disabled: s.itemsDisabled || a.autocompleteDisabled,
+              items: s.itemNames,
+              "item-title": "label",
+              "item-value": "value"
+            }, null, 8, ["modelValue", "disabled", "items"])
+          ]),
+          _: 1
+        }, 8, ["cols"])) : k("", !0),
+        i.chooseItem && a.itemIsArray ? (f(), x(m, {
+          key: 1,
+          cols: "1",
+          class: "tpic-select pr-4",
+          "data-test": "array-index",
+          style: { "min-width": "105px" }
+        }, {
+          default: r(() => [
+            l(y, {
+              modelValue: s.selectedArrayIndex,
+              "onUpdate:modelValue": [
+                e[5] || (e[5] = (c) => s.selectedArrayIndex = c),
+                e[6] || (e[6] = (c) => a.indexChanged(c))
+              ],
+              label: "Index",
+              "hide-details": "",
+              density: "compact",
+              variant: "outlined",
+              disabled: s.itemsDisabled || a.autocompleteDisabled,
+              items: a.arrayIndexes,
+              "item-title": "label",
+              "item-value": "value"
+            }, null, 8, ["modelValue", "disabled", "items"])
+          ]),
+          _: 1
+        })) : k("", !0),
+        i.buttonText ? (f(), x(m, {
+          key: 2,
+          cols: a.colSize,
+          style: { "max-width": "140px" }
+        }, {
+          default: r(() => [
+            l(T, {
+              disabled: a.buttonDisabled,
+              color: "primary",
+              "data-test": "select-send",
+              onClick: a.buttonPressed
+            }, {
+              default: r(() => [
+                g(A(a.actualButtonText), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled", "onClick"])
+          ]),
+          _: 1
+        }, 8, ["cols"])) : k("", !0)
+      ]),
+      _: 1
+    }, 8, ["no-gutters"]),
+    i.selectTypes ? (f(), x(I, {
+      key: 0,
+      class: "pt-6",
+      "no-gutters": ""
+    }, {
+      default: r(() => [
+        l(m, {
+          cols: a.colSize,
+          class: "tpic-select pr-4",
+          "data-test": "data-type"
+        }, {
+          default: r(() => [
+            l(o, {
+              modelValue: s.selectedValueType,
+              "onUpdate:modelValue": e[7] || (e[7] = (c) => s.selectedValueType = c),
+              label: "Value Type",
+              "hide-details": "",
+              density: "compact",
+              variant: "outlined",
+              items: s.valueTypes
+            }, null, 8, ["modelValue", "items"])
+          ]),
+          _: 1
+        }, 8, ["cols"]),
+        l(m, {
+          cols: a.colSize,
+          class: "tpic-select pr-4",
+          "data-test": "reduced"
+        }, {
+          default: r(() => [
+            l(o, {
+              modelValue: s.selectedReduced,
+              "onUpdate:modelValue": e[8] || (e[8] = (c) => s.selectedReduced = c),
+              label: "Reduced",
+              "hide-details": "",
+              density: "compact",
+              variant: "outlined",
+              items: s.reductionModes
+            }, null, 8, ["modelValue", "items"])
+          ]),
+          _: 1
+        }, 8, ["cols"]),
+        l(m, {
+          cols: a.colSize,
+          class: "tpic-select pr-4",
+          "data-test": "reduced-type"
+        }, {
+          default: r(() => [
+            l(o, {
+              modelValue: s.selectedReducedType,
+              "onUpdate:modelValue": e[9] || (e[9] = (c) => s.selectedReducedType = c),
+              label: "Reduced Type",
+              "hide-details": "",
+              density: "compact",
+              variant: "outlined",
+              disabled: s.selectedReduced === "DECOM",
+              items: s.reducedTypes
+            }, null, 8, ["modelValue", "disabled", "items"])
+          ]),
+          _: 1
+        }, 8, ["cols"]),
+        l(m, {
+          cols: a.colSize,
+          style: { "max-width": "140px" }
+        }, null, 8, ["cols"])
+      ]),
+      _: 1
+    })) : k("", !0),
+    l(I, {
+      "no-gutters": "",
+      class: "pa-3"
+    }, {
+      default: r(() => [
+        l(m, {
+          cols: a.colSize,
+          class: J({ "openc3-yellow": s.hazardous })
+        }, {
+          default: r(() => [
+            g(" Description: " + A(s.description) + " ", 1),
+            s.hazardous ? (f(), V(W, { key: 0 }, [
+              g(" (HAZARDOUS) ")
+            ], 64)) : k("", !0)
+          ]),
+          _: 1
+        }, 8, ["cols", "class"])
+      ]),
+      _: 1
+    })
+  ]);
+}
+const oe = /* @__PURE__ */ R(ae, [["render", re], ["__scopeId", "data-v-404c7763"]]), de = {
+  components: {
+    TargetPacketItemChooser: oe
+  },
+  mixins: [F],
+  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
+    },
+    xAxisItemPacket: {
+      type: Object,
+      default: void 0
+    },
+    xAxisItem: {
+      type: String,
+      default: "__time"
+    }
+  },
+  emits: ["cancel", "ok", "remove", "update:modelValue", "update:xAxisItem"],
+  data: function() {
+    return {
+      tab: 0,
+      graph: {},
+      customXAxisEnabled: !1,
+      selectedXAxisItem: null,
+      pendingXAxisSelection: null,
+      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 Z(q(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 Z(q(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 }));
+    },
+    initialXAxisItem: function() {
+      if (this.xAxisItem !== "__time")
+        return this.xAxisItem.split("__").at(4);
+    }
+  },
+  created() {
+    if (this.graph = {
+      title: this.title,
+      legendPosition: this.legendPosition,
+      items: this.items,
+      graphMinY: this.graphMinY,
+      graphMaxY: this.graphMaxY,
+      lines: [...this.lines]
+    }, this.customXAxisEnabled = this.xAxisItem && this.xAxisItem !== "__time", this.selectedXAxisItem = this.xAxisItem, this.startDateTime) {
+      let t = j(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 = j(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);
+    },
+    customXAxisToggled(t) {
+      t || (this.selectedXAxisItem = "__time", this.$emit("update:xAxisItem", "__time"));
+    },
+    xAxisItemChanged(t) {
+      this.pendingXAxisSelection = t;
+    },
+    xAxisItemSelected(t) {
+      if (t.targetName && t.packetName && t.itemName) {
+        const e = `DECOM__TLM__${t.targetName}__${t.packetName}__${t.itemName}__CONVERTED`;
+        this.selectedXAxisItem = e, this.$emit("update:xAxisItem", e);
+      }
+    }
+  }
+}, me = { class: "edit-box" }, ue = { class: "edit-box" }, he = { class: "edit-box" }, ce = { class: "edit-box" }, pe = { class: "edit-box" };
+function fe(t, e, i, n, s, a) {
+  const o = d("v-spacer"), m = d("v-toolbar"), b = d("v-tab"), u = d("v-tabs"), y = d("v-text-field"), T = d("v-card-text"), I = d("v-col"), c = d("v-select"), v = d("v-row"), S = d("v-tabs-window-item"), D = d("v-btn"), w = d("v-list-item"), E = d("v-list"), M = d("v-checkbox"), z = d("target-packet-item-chooser"), G = d("v-data-table"), C = d("v-tabs-window"), Y = d("v-card-actions"), p = d("v-card"), $ = d("v-dialog");
+  return f(), x($, {
+    modelValue: a.show,
+    "onUpdate:modelValue": e[13] || (e[13] = (h) => a.show = h),
+    "max-width": "700",
+    onKeydown: e[14] || (e[14] = Q((h) => t.$emit("cancel"), ["esc"]))
+  }, {
+    default: r(() => [
+      l(m, { height: "24" }, {
+        default: r(() => [
+          l(o),
+          e[15] || (e[15] = N("span", null, " Edit Graph ", -1)),
+          l(o)
+        ]),
+        _: 1
+      }),
+      l(p, { class: "pa-3" }, {
+        default: r(() => [
+          l(u, {
+            modelValue: t.tab,
+            "onUpdate:modelValue": e[0] || (e[0] = (h) => t.tab = h),
+            class: "ml-3"
+          }, {
+            default: r(() => [
+              l(b, { value: "0" }, {
+                default: r(() => [...e[16] || (e[16] = [
+                  g(" Settings ", -1)
+                ])]),
+                _: 1
+              }),
+              l(b, { value: "1" }, {
+                default: r(() => [...e[17] || (e[17] = [
+                  g(" Scale / Lines ", -1)
+                ])]),
+                _: 1
+              }),
+              l(b, { value: "2" }, {
+                default: r(() => [...e[18] || (e[18] = [
+                  g(" Items ", -1)
+                ])]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["modelValue"]),
+          l(C, {
+            modelValue: t.tab,
+            "onUpdate:modelValue": e[11] || (e[11] = (h) => t.tab = h)
+          }, {
+            default: r(() => [
+              l(S, {
+                value: "0",
+                eager: ""
+              }, {
+                default: r(() => [
+                  N("div", me, [
+                    l(v, null, {
+                      default: r(() => [
+                        l(I, null, {
+                          default: r(() => [
+                            l(T, { class: "pa-0" }, {
+                              default: r(() => [
+                                l(y, {
+                                  modelValue: t.graph.title,
+                                  "onUpdate:modelValue": e[1] || (e[1] = (h) => t.graph.title = h),
+                                  class: "pb-2",
+                                  label: "Title",
+                                  "hide-details": ""
+                                }, null, 8, ["modelValue"])
+                              ]),
+                              _: 1
+                            })
+                          ]),
+                          _: 1
+                        }),
+                        l(I, null, {
+                          default: r(() => [
+                            l(c, {
+                              modelValue: t.graph.legendPosition,
+                              "onUpdate:modelValue": e[2] || (e[2] = (h) => t.graph.legendPosition = h),
+                              label: "Legend Position",
+                              "hide-details": "",
+                              items: t.legendPositions,
+                              style: { "max-width": "280px" }
+                            }, null, 8, ["modelValue", "items"])
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  N("div", ue, [
+                    l(T, { class: "pa-0" }, {
+                      default: r(() => [...e[19] || (e[19] = [
+                        g(" Select a start date/time for the graph. Leave blank for start now. ", -1)
+                      ])]),
+                      _: 1
+                    }),
+                    l(v, null, {
+                      default: r(() => [
+                        l(I, null, {
+                          default: r(() => [
+                            l(y, {
+                              modelValue: t.startDate,
+                              "onUpdate:modelValue": e[3] || (e[3] = (h) => t.startDate = h),
+                              label: "Start Date",
+                              name: `date${Date.now()}`,
+                              rules: [t.rules.date],
+                              type: "date"
+                            }, null, 8, ["modelValue", "name", "rules"])
+                          ]),
+                          _: 1
+                        }),
+                        l(I, null, {
+                          default: r(() => [
+                            l(y, {
+                              modelValue: t.startTime,
+                              "onUpdate:modelValue": e[4] || (e[4] = (h) => t.startTime = h),
+                              label: "Start Time",
+                              name: `time${Date.now()}`,
+                              rules: [t.rules.time],
+                              type: "time",
+                              step: "1"
+                            }, null, 8, ["modelValue", "name", "rules"])
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    }),
+                    l(T, { class: "pa-0" }, {
+                      default: r(() => [...e[20] || (e[20] = [
+                        g(" Select a end date/time for the graph. Leave blank for continuous real-time graphing. ", -1)
+                      ])]),
+                      _: 1
+                    }),
+                    l(v, null, {
+                      default: r(() => [
+                        l(I, null, {
+                          default: r(() => [
+                            l(y, {
+                              modelValue: t.endDate,
+                              "onUpdate:modelValue": e[5] || (e[5] = (h) => t.endDate = h),
+                              label: "End Date",
+                              name: `date${Date.now()}`,
+                              rules: [t.rules.date],
+                              type: "date"
+                            }, null, 8, ["modelValue", "name", "rules"])
+                          ]),
+                          _: 1
+                        }),
+                        l(I, null, {
+                          default: r(() => [
+                            l(y, {
+                              modelValue: t.endTime,
+                              "onUpdate:modelValue": e[6] || (e[6] = (h) => t.endTime = h),
+                              label: "End Time",
+                              name: `time${Date.now()}`,
+                              rules: [t.rules.time],
+                              type: "time",
+                              step: "1"
+                            }, null, 8, ["modelValue", "name", "rules"])
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ]),
+                _: 1
+              }),
+              l(S, {
+                value: "1",
+                eager: ""
+              }, {
+                default: r(() => [
+                  N("div", he, [
+                    l(T, { class: "pa-0" }, {
+                      default: r(() => [...e[21] || (e[21] = [
+                        g(" Set a min or max Y value to override automatic scaling ", -1)
+                      ])]),
+                      _: 1
+                    }),
+                    l(v, { dense: "" }, {
+                      default: r(() => [
+                        l(I, { class: "px-2" }, {
+                          default: r(() => [
+                            l(y, {
+                              modelValue: t.graph.graphMinY,
+                              "onUpdate:modelValue": e[7] || (e[7] = (h) => t.graph.graphMinY = h),
+                              "hide-details": "",
+                              label: "Min Y Axis (Optional)",
+                              type: "number"
+                            }, null, 8, ["modelValue"])
+                          ]),
+                          _: 1
+                        }),
+                        l(I, { class: "px-2" }, {
+                          default: r(() => [
+                            l(y, {
+                              modelValue: t.graph.graphMaxY,
+                              "onUpdate:modelValue": e[8] || (e[8] = (h) => t.graph.graphMaxY = h),
+                              "hide-details": "",
+                              label: "Max Y Axis (Optional)",
+                              type: "number"
+                            }, null, 8, ["modelValue"])
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  N("div", ce, [
+                    l(E, {
+                      density: "compact",
+                      class: "horizontal-lines"
+                    }, {
+                      default: r(() => [
+                        l(w, null, {
+                          default: r(() => [
+                            e[23] || (e[23] = N("span", { style: { "padding-top": "5px" } }, " Add horizontal lines to the graph ", -1)),
+                            l(o),
+                            l(D, {
+                              onClick: e[9] || (e[9] = (h) => a.addLine())
+                            }, {
+                              default: r(() => [...e[22] || (e[22] = [
+                                g(" New Line ", -1)
+                              ])]),
+                              _: 1
+                            })
+                          ]),
+                          _: 1
+                        }),
+                        (f(!0), V(W, null, ie(t.graph.lines, (h, H) => (f(), x(w, {
+                          key: H,
+                          value: h,
+                          color: "primary"
+                        }, {
+                          default: r(() => [
+                            l(v, null, {
+                              default: r(() => [
+                                l(I, null, {
+                                  default: r(() => [
+                                    l(y, {
+                                      modelValue: h.yValue,
+                                      "onUpdate:modelValue": (P) => h.yValue = P,
+                                      label: "Y Value"
+                                    }, null, 8, ["modelValue", "onUpdate:modelValue"])
+                                  ]),
+                                  _: 2
+                                }, 1024),
+                                l(I, null, {
+                                  default: r(() => [
+                                    l(c, {
+                                      modelValue: h.color,
+                                      "onUpdate:modelValue": (P) => h.color = P,
+                                      label: "Color",
+                                      "hide-details": "",
+                                      items: i.colors
+                                    }, null, 8, ["modelValue", "onUpdate:modelValue", "items"])
+                                  ]),
+                                  _: 2
+                                }, 1024),
+                                l(I, null, {
+                                  default: r(() => [
+                                    l(D, {
+                                      style: { padding: "30px" },
+                                      icon: "mdi-delete",
+                                      variant: "text",
+                                      "aria-label": "Remove Line",
+                                      onClick: (P) => a.removeLine(h)
+                                    }, null, 8, ["onClick"])
+                                  ]),
+                                  _: 2
+                                }, 1024)
+                              ]),
+                              _: 2
+                            }, 1024)
+                          ]),
+                          _: 2
+                        }, 1032, ["value"]))), 128))
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  N("div", pe, [
+                    l(T, { class: "pa-0 text-medium-emphasis" }, {
+                      default: r(() => [...e[24] || (e[24] = [
+                        g(" Choose a different item to use for the graph's X axis. If unchecked, the graph will use the packet's PACKET_TIMESECONDS item if it exists, otherwise it will use RECEIVED_TIMESECONDS. ", -1),
+                        N("br", null, null, -1),
+                        N("span", { class: "font-italic" }, " Note that the graph may not work correctly if you choose an item that does not strictly increase in value. It is recommended to use a counter or timestamp. ", -1)
+                      ])]),
+                      _: 1
+                    }),
+                    l(M, {
+                      modelValue: t.customXAxisEnabled,
+                      "onUpdate:modelValue": [
+                        e[10] || (e[10] = (h) => t.customXAxisEnabled = h),
+                        a.customXAxisToggled
+                      ],
+                      disabled: !i.xAxisItemPacket,
+                      label: "Custom X axis item",
+                      density: "compact",
+                      "hide-details": ""
+                    }, null, 8, ["modelValue", "disabled", "onUpdate:modelValue"]),
+                    i.xAxisItemPacket ? k("", !0) : (f(), x(T, {
+                      key: 0,
+                      class: "pa-0 text-medium-emphasis"
+                    }, {
+                      default: r(() => [...e[25] || (e[25] = [
+                        g(" All items on the graph must be in the same packet to enable this feature. ", -1)
+                      ])]),
+                      _: 1
+                    })),
+                    t.customXAxisEnabled && i.xAxisItemPacket ? (f(), x(z, {
+                      key: 1,
+                      "initial-target-name": i.xAxisItemPacket.targetName,
+                      "initial-packet-name": i.xAxisItemPacket.packetName,
+                      "initial-item-name": a.initialXAxisItem,
+                      "choose-item": "",
+                      "lock-target": "",
+                      "lock-packet": "",
+                      "button-text": "Set",
+                      onOnSet: a.xAxisItemChanged,
+                      onAddItem: a.xAxisItemSelected
+                    }, null, 8, ["initial-target-name", "initial-packet-name", "initial-item-name", "onOnSet", "onAddItem"])) : k("", !0)
+                  ])
+                ]),
+                _: 1
+              }),
+              l(S, {
+                value: "2",
+                eager: ""
+              }, {
+                default: r(() => [
+                  l(G, {
+                    "item-key": "itemId",
+                    class: "elevation-1 my-2",
+                    "data-test": "edit-graph-items",
+                    headers: t.itemHeaders,
+                    items: a.editItems,
+                    "items-per-page": 5,
+                    "footer-props": {
+                      "items-per-page-options": [5]
+                    }
+                  }, {
+                    "item.actions": r(({ item: h }) => [
+                      l(D, {
+                        icon: "mdi-delete",
+                        variant: "text",
+                        "aria-label": "Remove Item",
+                        onClick: (H) => t.$emit("remove", h)
+                      }, null, 8, ["onClick"])
+                    ]),
+                    "no-data": r(() => [...e[26] || (e[26] = [
+                      N("span", null, " Currently no items on this graph ", -1)
+                    ])]),
+                    _: 1
+                  }, 8, ["headers", "items"])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["modelValue"]),
+          l(Y, { class: "px-2" }, {
+            default: r(() => [
+              l(o),
+              l(D, {
+                variant: "outlined",
+                onClick: e[12] || (e[12] = (h) => t.$emit("cancel"))
+              }, {
+                default: r(() => [...e[27] || (e[27] = [
+                  g(" Cancel ", -1)
+                ])]),
+                _: 1
+              }),
+              l(D, {
+                variant: "flat",
+                onClick: a.closeOk
+              }, {
+                default: r(() => [...e[28] || (e[28] = [
+                  g(" Ok ", -1)
+                ])]),
+                _: 1
+              }, 8, ["onClick"])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  }, 8, ["modelValue"]);
+}
+const ge = /* @__PURE__ */ R(de, [["render", fe]]), ve = {
+  props: {
+    modelValue: Boolean,
+    item: {
+      type: Object,
+      required: !0
+    },
+    colors: {
+      type: Array,
+      required: !0
+    }
+  },
+  emits: [
+    "cancel",
+    "changeColor",
+    "changeLimits",
+    "close",
+    "update:modelValue"
+  ],
+  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 X().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 + ""
+      );
+    });
+  }
+}, ye = { key: 0 }, xe = { class: "pa-3" };
+function be(t, e, i, n, s, a) {
+  const o = d("v-card-title"), m = d("v-select"), b = d("v-card-text"), u = d("v-spacer"), y = d("v-btn"), T = d("v-card-actions"), I = d("v-card"), c = d("v-dialog");
+  return f(), x(c, {
+    modelValue: a.show,
+    "onUpdate:modelValue": e[9] || (e[9] = (v) => a.show = v),
+    width: "400",
+    onKeydown: e[10] || (e[10] = Q((v) => t.success(), ["enter"]))
+  }, {
+    default: r(() => [
+      l(I, null, {
+        default: r(() => [
+          l(o, { class: "mb-2" }, {
+            default: r(() => [...e[11] || (e[11] = [
+              g("Edit Item", -1)
+            ])]),
+            _: 1
+          }),
+          l(b, null, {
+            default: r(() => [
+              l(m, {
+                modelValue: t.editItem.valueType,
+                "onUpdate:modelValue": e[0] || (e[0] = (v) => t.editItem.valueType = v),
+                variant: "outlined",
+                "hide-details": "",
+                label: "Value Type",
+                items: t.valueTypes,
+                class: "mb-2"
+              }, null, 8, ["modelValue", "items"]),
+              l(m, {
+                modelValue: t.editItem.reduced,
+                "onUpdate:modelValue": e[1] || (e[1] = (v) => t.editItem.reduced = v),
+                variant: "outlined",
+                "hide-details": "",
+                label: "Reduction",
+                items: t.reduction,
+                class: "mb-2"
+              }, null, 8, ["modelValue", "items"]),
+              l(m, {
+                modelValue: t.editItem.reducedType,
+                "onUpdate:modelValue": e[2] || (e[2] = (v) => t.editItem.reducedType = v),
+                variant: "outlined",
+                "hide-details": "",
+                label: "Reduced Type",
+                items: t.reducedTypes,
+                disabled: t.editItem.reduced === "DECOM",
+                class: "mb-2"
+              }, null, 8, ["modelValue", "items", "disabled"]),
+              l(m, {
+                modelValue: t.editItem.color,
+                "onUpdate:modelValue": [
+                  e[3] || (e[3] = (v) => t.editItem.color = v),
+                  e[4] || (e[4] = (v) => t.$emit("changeColor", v))
+                ],
+                variant: "outlined",
+                "hide-details": "",
+                label: "Color",
+                items: i.colors,
+                class: "mb-2"
+              }, null, 8, ["modelValue", "items"]),
+              a.limitsNames.length > 1 ? (f(), V("div", ye, [
+                l(m, {
+                  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]))
+                  ],
+                  variant: "outlined",
+                  "hide-details": "",
+                  label: "Display Limits",
+                  items: a.limitsNames
+                }, null, 8, ["modelValue", "items"]),
+                N("div", xe, A(t.limitsName) + ": " + A(t.limits[t.limitsName]), 1)
+              ])) : k("", !0)
+            ]),
+            _: 1
+          }),
+          l(T, { class: "px-2" }, {
+            default: r(() => [
+              l(u),
+              l(y, {
+                variant: "outlined",
+                onClick: e[7] || (e[7] = (v) => t.$emit("cancel"))
+              }, {
+                default: r(() => [...e[12] || (e[12] = [
+                  g(" Cancel ", -1)
+                ])]),
+                _: 1
+              }),
+              l(y, {
+                variant: "flat",
+                onClick: e[8] || (e[8] = (v) => t.$emit("close", t.editItem))
+              }, {
+                default: r(() => [...e[13] || (e[13] = [
+                  g(" Ok ", -1)
+                ])]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _: 1
+  }, 8, ["modelValue"]);
+}
+const Ie = /* @__PURE__ */ R(ve, [["render", be]]), U = "__time", Ne = {
+  components: {
+    GraphEditDialog: ge,
+    GraphEditItemDialog: Ie
+  },
+  mixins: [F],
+  props: {
+    id: {
+      type: Number,
+      required: !0
+    },
+    selectedGraphId: {
+      type: Number,
+      default: null
+    },
+    state: {
+      type: String,
+      required: !0
+    },
+    // start time in nanoseconds to start the graph
+    // this allows multiple graphs to be synchronized
+    startTime: {
+      type: Number,
+      default: null
+    },
+    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,
+      default: () => []
+    },
+    initialXAxisItem: {
+      type: String,
+      default: U
+    },
+    // These allow the parent to force a specific height and/or width
+    height: {
+      type: Number,
+      default: null
+    },
+    width: {
+      type: Number,
+      default: null
+    },
+    timeZone: {
+      type: String,
+      default: "local"
+    }
+  },
+  emits: [
+    "click",
+    "close-graph",
+    "edit",
+    "min-max-graph",
+    "pause",
+    "resize",
+    "start",
+    "started"
+  ],
+  data() {
+    return {
+      api: null,
+      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,
+      interval: null,
+      graphMinY: null,
+      graphMaxY: null,
+      graphStartDateTime: null,
+      graphEndDateTime: null,
+      xAxisItem: this.initialXAxisItem,
+      // '__time' or something like 'DECOM__TLM__INST__ADCS__RECEIVED_COUNT__CONVERTED'
+      indexes: {},
+      items: this.initialItems,
+      graphItems: [],
+      lastPlaybackDateTime: null,
+      limitsValues: [],
+      drawInterval: null,
+      zoomChart: !1,
+      zoomOverview: !1,
+      cable: new ee(),
+      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;
+    },
+    itemSubscriptionKeys: function() {
+      return this.items.map(this.subscriptionKey);
+    },
+    allowableXAxisItemPacket: function() {
+      if (!this.canUseCustomXAxisItem || this.items.length === 0)
+        return;
+      const { targetName: t, packetName: e } = this.items[0];
+      return { targetName: t, packetName: e };
+    },
+    canUseCustomXAxisItem: function() {
+      if (this.items.length === 0)
+        return !0;
+      const { targetName: t, packetName: e } = this.items[0];
+      return this.items.every(
+        (i) => i.targetName === t && i.packetName === e
+      );
+    },
+    actualXAxisItem: function() {
+      return this.canUseCustomXAxisItem && this.xAxisItem ? this.xAxisItem : U;
+    },
+    xAxisConverter: function() {
+      return this.xAxisIsDefault ? (t) => t / 1e9 : (t) => t;
+    },
+    xAxisFormatter: function() {
+      return (t) => t == null ? "--" : this.xAxisIsTime ? this.formatSeconds(t, this.timeZone) : t;
+    },
+    xAxisLabel: function() {
+      return this.xAxisIsTime ? "Time" : this.actualXAxisItem.split("__").at(-2);
+    },
+    xAxisIsDefault: function() {
+      return this.actualXAxisItem === U;
+    },
+    xAxisIsTime: function() {
+      const t = ["PACKET_TIMESECONDS", "RECEIVED_TIMESECONDS"];
+      return this.xAxisIsDefault || t.includes(this.actualXAxisItem.split("__").at(4));
+    },
+    xAxisIsAlsoGraphedItem: function() {
+      return this.itemSubscriptionKeys.includes(this.actualXAxisItem);
+    },
+    playbackMode: function() {
+      return this.$store.state.playback.playbackMode;
+    },
+    playbackDateTime: function() {
+      return this.$store.state.playback.playbackDateTime;
+    },
+    playbackStep: function() {
+      return this.$store.state.playback.playbackStep;
+    }
+  },
+  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;
+      }
+    },
+    playbackMode: function(t, e) {
+      this.playbackMode === "playback" ? this.setupPlaybackMode() : (this.lastPlaybackDateTime = null, this.clearAllData(), this.startGraph());
+    },
+    playbackDateTime: function(t, e) {
+      this.playbackMode === "playback" && (this.lastPlaybackDateTime === null || this.lastPlaybackDateTime > this.playbackDateTime ? this.clearAllData() : this.api.get_tlm_values(
+        this.graphItems,
+        30,
+        // stale timeout
+        null,
+        // no cache timeout
+        this.lastPlaybackDateTime,
+        // start time
+        this.playbackDateTime
+        // end time
+      ).then((i) => {
+        if (i.length > 0) {
+          if (Array.isArray(i[0]) && Array.isArray(i[0][0]))
+            for (let n = 0; n < i.length; n++)
+              for (let s = 0; s < i[n].length; s++)
+                if (s === 0) {
+                  let a = i[n][s][0], o = new Date(a);
+                  this.data[0].push(o.getTime() / 1e3);
+                } else
+                  this.data[s].push(i[n][s][0]);
+          else if (Array.isArray(i) && i.length >= 2)
+            for (let n = 0; n < i.length; n++)
+              if (n === 0) {
+                let s = i[n][0], a = new Date(s);
+                this.data[0].push(a.getTime() / 1e3);
+              } else
+                this.data[n].push(i[n][0]);
+        }
+        this.dataChanged = !0, this.updateGraphData();
+      }), this.lastPlaybackDateTime = this.playbackDateTime);
+    },
+    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);
+    },
+    actualXAxisItem: function(t, e) {
+      let i = JSON.parse(JSON.stringify(this.items));
+      this.removeItems(i), this.graph.destroy(), this.chartOpts.series[0].label = this.xAxisLabel, this.chartOpts.scales.x.time = this.xAxisIsTime, this.graph = new _(
+        this.chartOpts,
+        this.data,
+        document.getElementById(`chart${this.id}`)
+      ), this.hideOverview || (this.overview.destroy(), this.overviewOpts.scales.x.time = this.xAxisIsTime, this.overview = new _(
+        this.overviewOpts,
+        this.data,
+        document.getElementById(`overview${this.id}`)
+      )), this.addItems(i);
+    },
+    refreshIntervalMs: function(t) {
+      this.interval && (clearInterval(this.interval), this.interval = setInterval(() => {
+        this.updateGraphData();
+      }, t));
+    }
+  },
+  created() {
+    this.api = new X(), 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(
+      (i, n) => {
+        const s = {
+          spanGaps: !0
+        };
+        return i.chartSeries.push({
+          ...s,
+          item: n,
+          label: this.formatLabel(n),
+          stroke: (a, o) => this.items[o - 1].color,
+          width: 2,
+          value: (a, o) => typeof o == "string" || isNaN(o) ? "NaN" : o == null ? "--" : o.toFixed(3)
+        }), i.overviewSeries.push({
+          ...s
+        }), i;
+      },
+      { chartSeries: [], overviewSeries: [] }
+    );
+    if (this.chartOpts = {}, this.sparkline)
+      this.hideToolbarData = !0, this.hideOverviewData = !0, this.showOverview = !1, this.chartOpts = {
+        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 _(
+        this.chartOpts,
+        this.data,
+        document.getElementById(`chart${this.id}`)
+      );
+    else {
+      let i = Intl.DateTimeFormat().resolvedOptions().timeZone;
+      this.timeZone && this.timeZone !== "local" && (i = this.timeZone), this.chartOpts = {
+        ...this.getSize("chart"),
+        ...this.getScales(),
+        ...this.getAxes("chart"),
+        // series: series, // TODO: Uncomment with the performance code
+        plugins: [this.linesPlugin()],
+        tzDate: (n) => _.tzDate(new Date(n * 1e3), i),
+        series: [
+          {
+            label: this.xAxisLabel,
+            value: (n, s) => this.xAxisFormatter(s)
+          },
+          ...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, s, a) => (o) => {
+              this.state === "pause" && n.select.width === 0 && this.$emit("start"), a(o);
+            }
+          }
+        },
+        hooks: {
+          setScale: [
+            (n, s) => {
+              if (s === "x" && !this.zoomOverview && this.overview) {
+                this.zoomChart = !0;
+                let a = Math.round(
+                  this.overview.valToPos(n.scales.x.min, "x")
+                ), o = Math.round(
+                  this.overview.valToPos(n.scales.x.max, "x")
+                );
+                this.overview.setSelect({ left: a, width: o - a }), this.zoomChart = !1;
+              }
+            }
+          ],
+          setSelect: [
+            (n) => {
+              this.state === "start" && n.select.width > 0 && this.$emit("pause");
+            }
+          ],
+          ready: [
+            (n) => {
+              n.root.querySelector(".u-over").addEventListener("contextmenu", (o) => {
+                o.preventDefault(), this.itemMenu = !1, this.legendMenu = !1, this.editGraphMenuX = o.clientX, this.editGraphMenuY = o.clientY, this.editGraphMenu = !0;
+              });
+              let a = n.root.querySelector(".u-legend");
+              a.addEventListener("contextmenu", (o) => {
+                o.preventDefault(), this.editGraphMenu = !1, this.legendMenu = !1, this.itemMenuX = o.clientX, this.itemMenuY = o.clientY;
+                let m = o.target.closest(".u-series"), b = Array.prototype.slice.call(a.childNodes[0].childNodes).indexOf(m), u = n.series[b];
+                u.item ? (this.selectedItem = u.item, this.itemMenu = !0) : (this.itemMenu = !1, this.legendMenuX = o.clientX, this.legendMenuY = o.clientY, this.legendMenu = !0);
+              }), a.querySelector("tbody").appendChild(this.$refs.info);
+            }
+          ]
+        }
+      }, this.graph = new _(
+        this.chartOpts,
+        this.data,
+        document.getElementById(`chart${this.id}`)
+      ), this.overviewOpts = {
+        ...this.getSize("overview"),
+        ...this.getScales(),
+        ...this.getAxes("overview"),
+        // series: series, // TODO: Uncomment with the performance code
+        tzDate: (n) => _.tzDate(new Date(n * 1e3), i),
+        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 s = n.posToVal(n.select.left, "x"), a = n.posToVal(
+                  n.select.left + n.select.width,
+                  "x"
+                );
+                this.graph.setScale("x", { min: s, max: a }), this.zoomOverview = !1;
+              }
+            }
+          ]
+        }
+      }, this.hideOverview || (this.overview = new _(
+        this.overviewOpts,
+        this.data,
+        document.getElementById(`overview${this.id}`)
+      )), this.moveLegend(this.legendPosition), window.addEventListener("resize", this.resize);
+    }
+    this.playbackMode !== "playback" ? this.state !== "stop" && this.startGraph() : this.setupPlaybackMode();
+  },
+  beforeUnmount: function() {
+    this.stopGraph(), this.cable.disconnect(), window.removeEventListener("resize", this.resize);
+  },
+  methods: {
+    setupPlaybackMode: function() {
+      this.stopGraph(), this.clearAllData();
+      const t = this.itemSubscriptionKeys.map((e) => e.split("__").slice(2).join("__"));
+      if (this.actualXAxisItem === U) {
+        const e = t[0].split("__").slice(0, 2).join("__");
+        t.unshift(`${e}__PACKET_TIMESECONDS__RAW`);
+      } else this.xAxisIsAlsoGraphedItem || t.unshift(this.actualXAxisItem);
+      this.api.get_tlm_available(t).then((e) => {
+        this.graphItems = e, t.length != e.length && console.log(
+          "Error getting tlm available",
+          t,
+          this.graphItems
+        );
+      });
+    },
+    startGraph: function() {
+      this.subscribe(), this.interval = setInterval(() => {
+        this.updateGraphData();
+      }, this.refreshIntervalMs);
+    },
+    stopGraph: function() {
+      this.subscription && (this.subscription.unsubscribe(), this.subscription = null), this.interval && (clearInterval(this.interval), this.interval = null);
+    },
+    updateGraphData: function() {
+      if (this.state === "pause" || !this.dataChanged)
+        return;
+      this.graph.setData(this.data), this.overview && this.overview.setData(this.data);
+      const t = this.data[0];
+      if (t && t.length) {
+        let e = t.at(-1);
+        const i = [t.at(0)];
+        this.pointsGraphed <= t.length && i.push(t.at(-this.pointsGraphed)), this.xAxisIsTime && i.push(e - this.secondsGraphed);
+        const n = Math.max(...i);
+        n === e && (e += 1), this.graph.setScale("x", { min: n, max: e });
+      }
+      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, i, n) => {
+        let s = i;
+        (this.graphMinY || this.graphMinY === 0) && (s = this.graphMinY);
+        let a = n;
+        return (this.graphMaxY || this.graphMaxY === 0) && (a = this.graphMaxY), _.rangeNum(s, a, t, !0);
+      };
+    },
+    subscribe: function() {
+      this.cable.createSubscription("StreamingChannel", window.openc3Scope, {
+        received: (t) => this.received(t),
+        connected: () => {
+          const t = [...this.items];
+          !this.xAxisIsDefault && !this.xAxisIsAlsoGraphedItem && t.push(this.actualXAxisItem), this.addItemsToSubscription(t);
+        },
+        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 i = document.getElementById("openc3-nav-drawer");
+      i && (e = i.classList.contains(
+        "v-navigation-drawer--active"
+      ) ? i.clientWidth : 0);
+      let n = 0;
+      (this.legendPosition === "right" || this.legendPosition === "left") && (n = document.getElementsByClassName("u-legend")[0].clientWidth);
+      const s = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) - e - n, a = Math.max(
+        document.documentElement.clientHeight,
+        window.innerHeight || 0
+      ), o = document.getElementsByClassName("v-expansion-panel")[0];
+      let m = 100;
+      t === "overview" ? this.fullHeight && !this.hideOverviewData ? this.showOverview = !0 : this.showOverview = !1 : (m = a - o.clientHeight - m - 250, this.fullHeight || (m = m / 2 + 10));
+      let b = s - 70;
+      return this.fullWidth || (b = b / 2 - 12), {
+        width: this.width || b,
+        height: this.height || m
+      };
+    },
+    getScales: function() {
+      return {
+        scales: {
+          x: {
+            range(t, e, i) {
+              return e == null ? this.xAxisIsTime ? [1566453600, 1566497660] : [0, 1] : [e, i];
+            },
+            time: this.xAxisIsTime
+          },
+          y: {
+            range(t, e, i) {
+              return e == null ? [-100, 100] : _.rangeNum(e, i, 0.1, !0);
+            }
+          }
+        }
+      };
+    },
+    getAxes: function(t) {
+      let e = "rgba(255, 255, 255, .1)", i = "white";
+      return {
+        axes: [
+          {
+            stroke: i,
+            grid: {
+              show: !0,
+              stroke: e,
+              width: 2
+            }
+          },
+          {
+            size: 80,
+            // This size supports values up to 8 digits plus sign
+            stroke: i,
+            grid: {
+              show: t !== "overview",
+              stroke: e,
+              width: 2
+            },
+            // Forces the axis values to be formatted correctly
+            // especially with really small or large values
+            values(n, s) {
+              return (s.some((a) => a >= 1e7) || s.every((a) => a < 0.01)) && (s = s.map((a) => a.toExponential(3))), s;
+            }
+          }
+        ]
+      };
+    },
+    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), 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), 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: i } = t, n = t.valToPos(t.scales.y.min, "y", !0), s = t.valToPos(t.scales.y.max, "y", !0), a = t.valToPos(this.limitsValues[0], "y", !0), o = t.valToPos(this.limitsValues[1], "y", !0), m = t.valToPos(this.limitsValues[2], "y", !0), b = t.valToPos(this.limitsValues[3], "y", !0);
+            if (this.lines.forEach((u) => {
+              t.scales.y.min <= u.yValue && u.yValue <= t.scales.y.max && (e.save(), e.beginPath(), e.strokeStyle = u.color, e.lineWidth = 2, e.moveTo(i.left, t.valToPos(u.yValue, "y", !0)), e.lineTo(
+                i.left + i.width,
+                t.valToPos(u.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 u = a < s ? s : a;
+              e.fillRect(i.left, a, i.width, n - u);
+            }
+            if (t.scales.y.max > this.limitsValues[3]) {
+              let u = n < b ? n : b;
+              e.fillRect(i.left, s, i.width, u - s);
+            }
+            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 u = o < s ? s : o;
+              e.fillRect(i.left, u, i.width, a - u);
+            }
+            if (t.scales.y.max > this.limitsValues[2] && // yellowHigh
+            t.scales.y.min < this.limitsValues[3]) {
+              let u = n < b ? n : b, y = n < m ? n : m;
+              e.fillRect(i.left, u, i.width, y - u);
+            }
+            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 u = m < s ? s : m, y = n < o ? n : o;
+                e.fillRect(i.left, u, i.width, y - u);
+              }
+            } else {
+              const u = t.valToPos(this.limitsValues[4], "y", !0), y = t.valToPos(this.limitsValues[5], "y", !0);
+              if (t.scales.y.min < this.limitsValues[4] && // greenLow
+              t.scales.y.max > this.limitsValues[1]) {
+                let c = u < s ? s : u;
+                e.fillRect(i.left, c, i.width, o - c);
+              }
+              if (t.scales.y.max > this.limitsValues[5] && // greenHigh
+              t.scales.y.min < this.limitsValues[2]) {
+                let c = n < m ? n : m, v = n < y ? n : y;
+                e.fillRect(i.left, c, i.width, v - c);
+              }
+              e.fillStyle = "rgba(0,0,255,0.15)";
+              let T = y < s ? s : y, I = n < u ? n : u;
+              e.fillRect(i.left, T, i.width, I - T);
+            }
+            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((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 n = this.data.length;
+        this.graph.addSeries(this.createSeriesConfig(i), n), this.overview && this.overview.addSeries(this.createOverviewSeriesConfig(), n), this.data.splice(n, 0, Array(this.data[0].length)), this.indexes[this.subscriptionKey(i)] = n;
+      }), this.updateColorIndex(t), this.xAxisIsDefault || t.push(this.actualXAxisItem), this.addItemsToSubscription(t), this.$emit("resize"), this.$emit("edit");
+    },
+    createSeriesConfig: function(t) {
+      return {
+        spanGaps: !0,
+        item: t,
+        label: this.formatLabel(t),
+        stroke: (e, i) => this.items[i - 1].color,
+        width: 2,
+        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() {
+      return {
+        spanGaps: !0,
+        stroke: (t, e) => this.items[e - 1].color
+      };
+    },
+    updateColorIndex: function(t) {
+      const e = t[t.length - 1];
+      if (e) {
+        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);
+      const i = t.map((n) => {
+        if (typeof n == "object")
+          return this.subscriptionKey(n);
+        if (typeof n == "string")
+          return n;
+        throw new Error(
+          `Invalid subscription item type for ${n}: ${typeof n}`
+        );
+      });
+      this.subscription && OpenC3Auth.updateToken(OpenC3Auth.defaultMinValidity).then(
+        (n) => {
+          n && OpenC3Auth.setTokens(), this.subscription.perform("add", {
+            scope: window.openc3Scope,
+            token: localStorage.openc3Token,
+            items: i,
+            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 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 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");
+    },
+    removeItemsFromSubscription: function(t = this.items) {
+      if (this.subscription) {
+        const e = t.map((i) => {
+          if (typeof i == "object")
+            return this.subscriptionKey(i);
+          if (typeof i == "string")
+            return i;
+          throw new Error(
+            `Invalid subscription item type for ${i}: ${typeof i}`
+          );
+        });
+        this.subscription.perform("remove", {
+          scope: window.openc3Scope,
+          token: localStorage.openc3Token,
+          items: e
+        });
+      }
+    },
+    reorderIndexes: function(t) {
+      let e = this.indexes[t];
+      delete this.indexes[t];
+      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++) {
+        if (!t[e].hasOwnProperty(this.actualXAxisItem))
+          continue;
+        let i = this.xAxisConverter(t[e][this.actualXAxisItem]), n = this.data[0].length;
+        if (n === 0 || i > this.data[0][n - 1]) {
+          for (let s = 0; s < this.data.length; s++)
+            this.data[s].push(null);
+          this.setDataAtIndex(this.data[0].length - 1, i, t[e]);
+        } else {
+          let s = B(this.data[0], i, this.bsComparator);
+          if (s >= 0) {
+            if (!Number.isFinite(i))
+              throw new RangeError(`Invalid x-axis value: ${i}`);
+            for (; s >= 0; )
+              i -= 1e-5, s = B(this.data[0], i, this.bsComparator);
+            const a = -s - 1;
+            for (let o = 0; o < this.data.length; o++)
+              this.data[o].splice(a, 0, null);
+            this.setDataAtIndex(a, i, t[e]);
+          } else {
+            const a = -s - 1;
+            for (let o = 0; o < this.data.length; o++)
+              this.data[o].splice(a, 0, null);
+            this.setDataAtIndex(a, i, t[e]);
+          }
+        }
+      }
+      if (this.startTime == null && this.data[0][0]) {
+        let e = this.data[0][0] * 1e9;
+        this.$emit("started", e);
+      }
+      this.dataChanged = !0;
+    },
+    bsComparator: function(t, e) {
+      return t - e;
+    },
+    setDataAtIndex: function(t, e, i) {
+      this.data[0][t] = e;
+      for (const [n, s] of Object.entries(i)) {
+        if (n === this.actualXAxisItem && !this.xAxisIsAlsoGraphedItem)
+          continue;
+        const a = this.indexes[n];
+        if (a) {
+          let o = this.data[a];
+          if (s != null && s.raw)
+            o[t] = null;
+          else if (typeof s == "string") {
+            if (o[t] = null, !n.includes("__RAW")) {
+              for (let m of this.items)
+                if (this.subscriptionKey(m) === n) {
+                  this.selectedItem = m;
+                  break;
+                }
+              this.changeItem({
+                valueType: "RAW",
+                reduced: this.selectedItem.reduced,
+                reducedType: this.selectedItem.reducedType
+              });
+            }
+          } else
+            o[t] = s;
+        }
+      }
+    },
+    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;
+    }
+  }
+}, Te = {
+  id: "chart",
+  ref: "chart",
+  class: "pa-1"
+}, ke = ["id"], De = ["id"], we = {
+  key: 5,
+  ref: "info",
+  class: "u-series"
+};
+function _e(t, e, i, n, s, a) {
+  const o = d("v-btn"), m = d("v-spacer"), b = d("v-toolbar"), u = d("v-expand-transition"), y = d("v-card"), T = d("graph-edit-dialog"), I = d("v-text-field"), c = d("v-row"), v = d("v-textarea"), S = d("v-dialog"), D = d("v-list-item-title"), w = d("v-list-item"), E = d("v-list"), M = d("v-menu"), z = d("graph-edit-item-dialog"), G = d("v-list-subheader"), C = d("v-icon"), Y = d("v-tooltip");
+  return f(), V("div", {
+    onClick: e[22] || (e[22] = K((p) => t.$emit("click"), ["prevent"]))
+  }, [
+    l(y, null, {
+      default: r(() => [
+        L(l(b, {
+          height: "24",
+          class: J(["pl-2 pr-2", i.selectedGraphId === i.id ? "active" : ""])
+        }, {
+          default: r(() => [
+            L(l(o, {
+              class: "mx-2",
+              icon: "mdi-alert",
+              density: "compact",
+              variant: "text",
+              "aria-label": "Show Errors",
+              onClick: e[0] || (e[0] = () => {
+                s.errorDialog = !0;
+              })
+            }, null, 512), [
+              [O, s.errors.length !== 0]
+            ]),
+            l(o, {
+              icon: "mdi-pencil",
+              variant: "text",
+              density: "compact",
+              "data-test": "edit-graph-icon",
+              "aria-label": "Edit Graph",
+              onClick: e[1] || (e[1] = () => {
+                s.editGraph = !0;
+              })
+            }),
+            l(m),
+            N("span", null, A(s.title), 1),
+            l(m),
+            s.expand ? (f(), V(W, { key: 0 }, [
+              a.calcFullSize ? (f(), x(o, {
+                key: 0,
+                icon: "mdi-arrow-collapse",
+                variant: "text",
+                density: "compact",
+                "data-test": "collapse-all",
+                onClick: a.collapseAll
+              }, null, 8, ["onClick"])) : (f(), x(o, {
+                key: 1,
+                icon: "mdi-arrow-expand",
+                variant: "text",
+                density: "compact",
+                "data-test": "expand-all",
+                onClick: a.expandAll
+              }, null, 8, ["onClick"])),
+              s.fullWidth ? (f(), x(o, {
+                key: 2,
+                icon: "mdi-arrow-collapse-horizontal",
+                variant: "text",
+                density: "compact",
+                "data-test": "collapse-width",
+                onClick: a.collapseWidth
+              }, null, 8, ["onClick"])) : (f(), x(o, {
+                key: 3,
+                icon: "mdi-arrow-expand-horizontal",
+                variant: "text",
+                density: "compact",
+                "data-test": "expand-width",
+                onClick: a.expandWidth
+              }, null, 8, ["onClick"])),
+              s.fullHeight ? (f(), x(o, {
+                key: 4,
+                icon: "mdi-arrow-collapse-vertical",
+                variant: "text",
+                density: "compact",
+                "data-test": "collapse-height",
+                onClick: a.collapseHeight
+              }, null, 8, ["onClick"])) : (f(), x(o, {
+                key: 5,
+                icon: "mdi-arrow-expand-vertical",
+                variant: "text",
+                density: "compact",
+                "data-test": "expand-height",
+                onClick: a.expandHeight
+              }, null, 8, ["onClick"]))
+            ], 64)) : k("", !0),
+            s.expand ? (f(), x(o, {
+              key: 1,
+              icon: "mdi-window-minimize",
+              variant: "text",
+              density: "compact",
+              "data-test": "minimize-screen-icon",
+              onClick: a.minMaxTransition
+            }, null, 8, ["onClick"])) : (f(), x(o, {
+              key: 2,
+              icon: "mdi-window-maximize",
+              variant: "text",
+              density: "compact",
+              "data-test": "maximize-screen-icon",
+              onClick: a.minMaxTransition
+            }, null, 8, ["onClick"])),
+            l(o, {
+              icon: "mdi-close-box",
+              variant: "text",
+              density: "compact",
+              "data-test": "close-graph-icon",
+              onClick: e[2] || (e[2] = K((p) => t.$emit("close-graph"), ["stop"]))
+            })
+          ]),
+          _: 1
+        }, 8, ["class"]), [
+          [O, !s.hideToolbarData]
+        ]),
+        l(u, null, {
+          default: r(() => [
+            L(N("div", Te, [
+              N("div", {
+                id: `chart${i.id}`
+              }, null, 8, ke),
+              e[23] || (e[23] = N("div", { id: "betweenCharts" }, null, -1)),
+              L(N("div", {
+                id: `overview${i.id}`
+              }, null, 8, De), [
+                [O, s.showOverview]
+              ])
+            ], 512), [
+              [O, s.expand]
+            ])
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }),
+    s.editGraph ? (f(), x(T, {
+      key: 0,
+      modelValue: s.editGraph,
+      "onUpdate:modelValue": e[3] || (e[3] = (p) => s.editGraph = p),
+      "x-axis-item": s.xAxisItem,
+      "onUpdate:xAxisItem": e[4] || (e[4] = (p) => s.xAxisItem = p),
+      title: s.title,
+      "legend-position": s.legendPosition,
+      items: s.items,
+      "graph-min-y": s.graphMinY,
+      "graph-max-y": s.graphMaxY,
+      lines: s.lines,
+      colors: s.colors,
+      "start-date-time": s.graphStartDateTime,
+      "end-date-time": s.graphEndDateTime,
+      "time-zone": i.timeZone,
+      "x-axis-item-packet": a.allowableXAxisItemPacket,
+      onRemove: e[5] || (e[5] = (p) => a.removeItems([p])),
+      onOk: a.editGraphClose,
+      onCancel: e[6] || (e[6] = (p) => s.editGraph = !1)
+    }, null, 8, ["modelValue", "x-axis-item", "title", "legend-position", "items", "graph-min-y", "graph-max-y", "lines", "colors", "start-date-time", "end-date-time", "time-zone", "x-axis-item-packet", "onOk"])) : k("", !0),
+    l(S, {
+      modelValue: s.errorDialog,
+      "onUpdate:modelValue": e[8] || (e[8] = (p) => s.errorDialog = p),
+      "max-width": "600"
+    }, {
+      default: r(() => [
+        l(b, { height: "24" }, {
+          default: r(() => [
+            l(m),
+            e[24] || (e[24] = N("span", null, " Errors ", -1)),
+            l(m)
+          ]),
+          _: 1
+        }),
+        l(y, { class: "pa-3" }, {
+          default: r(() => [
+            l(c, { dense: "" }, {
+              default: r(() => [
+                l(I, {
+                  modelValue: s.title,
+                  "onUpdate:modelValue": e[7] || (e[7] = (p) => s.title = p),
+                  readonly: "",
+                  "hide-details": "",
+                  class: "pb-2",
+                  label: "Graph Title"
+                }, null, 8, ["modelValue"])
+              ]),
+              _: 1
+            }),
+            l(c, { class: "my-3" }, {
+              default: r(() => [
+                l(v, {
+                  readonly: "",
+                  rows: "8",
+                  value: a.error
+                }, null, 8, ["value"])
+              ]),
+              _: 1
+            }),
+            l(c, null, {
+              default: r(() => [
+                l(o, {
+                  block: "",
+                  onClick: a.clearErrors
+                }, {
+                  default: r(() => [...e[25] || (e[25] = [
+                    g(" Clear ", -1)
+                  ])]),
+                  _: 1
+                }, 8, ["onClick"])
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["modelValue"]),
+    s.editGraphMenu ? (f(), x(M, {
+      key: 1,
+      modelValue: s.editGraphMenu,
+      "onUpdate:modelValue": e[10] || (e[10] = (p) => s.editGraphMenu = p),
+      target: [s.editGraphMenuX, s.editGraphMenuY],
+      absolute: "",
+      "offset-y": ""
+    }, {
+      default: r(() => [
+        l(E, null, {
+          default: r(() => [
+            l(w, {
+              onClick: e[9] || (e[9] = (p) => s.editGraph = !0)
+            }, {
+              default: r(() => [
+                l(D, { style: { cursor: "pointer" } }, {
+                  default: r(() => [
+                    g(" Edit " + A(s.title), 1)
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["modelValue", "target"])) : k("", !0),
+    s.editItem ? (f(), x(z, {
+      key: 2,
+      modelValue: s.editItem,
+      "onUpdate:modelValue": e[11] || (e[11] = (p) => s.editItem = p),
+      colors: s.colors,
+      item: s.selectedItem,
+      onChangeColor: a.changeColor,
+      onChangeLimits: a.changeLimits,
+      onCancel: e[12] || (e[12] = (p) => s.editItem = !1),
+      onClose: a.closeEditItem
+    }, null, 8, ["modelValue", "colors", "item", "onChangeColor", "onChangeLimits", "onClose"])) : k("", !0),
+    s.itemMenu ? (f(), x(M, {
+      key: 3,
+      modelValue: s.itemMenu,
+      "onUpdate:modelValue": e[16] || (e[16] = (p) => s.itemMenu = p),
+      target: [s.itemMenuX, s.itemMenuY],
+      absolute: "",
+      "offset-y": ""
+    }, {
+      default: r(() => [
+        l(E, {
+          nav: "",
+          density: "compact"
+        }, {
+          default: r(() => [
+            l(G, null, {
+              default: r(() => [
+                g(A(s.selectedItem.targetName) + " " + A(s.selectedItem.packetName) + " " + A(s.selectedItem.itemName), 1)
+              ]),
+              _: 1
+            }),
+            l(w, {
+              onClick: e[13] || (e[13] = (p) => s.editItem = !0)
+            }, {
+              prepend: r(() => [
+                l(C, { icon: "mdi-pencil" })
+              ]),
+              default: r(() => [
+                l(D, null, {
+                  default: r(() => [...e[26] || (e[26] = [
+                    g(" Edit ", -1)
+                  ])]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            l(w, {
+              onClick: e[14] || (e[14] = (p) => a.clearData([s.selectedItem]))
+            }, {
+              prepend: r(() => [
+                l(C, { icon: "mdi-eraser" })
+              ]),
+              default: r(() => [
+                l(D, null, {
+                  default: r(() => [...e[27] || (e[27] = [
+                    g(" Clear ", -1)
+                  ])]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            l(w, {
+              onClick: e[15] || (e[15] = (p) => a.removeItems([s.selectedItem]))
+            }, {
+              prepend: r(() => [
+                l(C, { icon: "mdi-delete" })
+              ]),
+              default: r(() => [
+                l(D, null, {
+                  default: r(() => [...e[28] || (e[28] = [
+                    g(" Delete ", -1)
+                  ])]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["modelValue", "target"])) : k("", !0),
+    s.legendMenu ? (f(), x(M, {
+      key: 4,
+      modelValue: s.legendMenu,
+      "onUpdate:modelValue": e[21] || (e[21] = (p) => s.legendMenu = p),
+      target: [s.legendMenuX, s.legendMenuY],
+      absolute: "",
+      "offset-y": ""
+    }, {
+      default: r(() => [
+        l(E, null, {
+          default: r(() => [
+            l(w, {
+              onClick: e[17] || (e[17] = (p) => a.moveLegend("top"))
+            }, {
+              default: r(() => [
+                l(D, { style: { cursor: "pointer" } }, {
+                  default: r(() => [...e[29] || (e[29] = [
+                    g(" Legend Top ", -1)
+                  ])]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            l(w, {
+              onClick: e[18] || (e[18] = (p) => a.moveLegend("bottom"))
+            }, {
+              default: r(() => [
+                l(D, { style: { cursor: "pointer" } }, {
+                  default: r(() => [...e[30] || (e[30] = [
+                    g(" Legend Bottom ", -1)
+                  ])]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            l(w, {
+              onClick: e[19] || (e[19] = (p) => a.moveLegend("left"))
+            }, {
+              default: r(() => [
+                l(D, { style: { cursor: "pointer" } }, {
+                  default: r(() => [...e[31] || (e[31] = [
+                    g(" Legend Left ", -1)
+                  ])]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            l(w, {
+              onClick: e[20] || (e[20] = (p) => a.moveLegend("right"))
+            }, {
+              default: r(() => [
+                l(D, { style: { cursor: "pointer" } }, {
+                  default: r(() => [...e[32] || (e[32] = [
+                    g(" Legend RIght ", -1)
+                  ])]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 8, ["modelValue", "target"])) : k("", !0),
+    i.sparkline ? k("", !0) : (f(), V("div", we, [
+      l(Y, {
+        text: "Click item to toggle, Right click to edit",
+        location: "top"
+      }, {
+        activator: r(({ props: p }) => [
+          l(C, se(le(p)), {
+            default: r(() => [...e[33] || (e[33] = [
+              g(" mdi-information-variant-circle ", -1)
+            ])]),
+            _: 1
+          }, 16)
+        ]),
+        _: 1
+      })
+    ], 512))
+  ]);
+}
+const Pe = /* @__PURE__ */ R(Ne, [["render", _e], ["__scopeId", "data-v-c388ce30"]]);
+export {
+  Pe as G,
+  oe as T,
+  ge as a,
+  Ie as b
+};
+//# sourceMappingURL=Graph-CWcrowaT.js.map