twcpt 0.0.2

package/dist/charts-CKv8I1ye.js

@@ -0,0 +1,879 @@
+import { defineComponent as g, ref as f, onMounted as m, watch as C, openBlock as x, createElementBlock as v, createElementVNode as y, normalizeStyle as k } from "vue";
+import { Chart as $ } from "chart.js/auto";
+function T(e) {
+  return Object.prototype.toString.call(e) === "[object Object]";
+}
+function h(e, i) {
+  if (!i)
+    return { ...e };
+  const a = { ...e };
+  for (const l of Object.keys(i)) {
+    const o = i[l], c = e[l];
+    if (o !== void 0) {
+      if (o === null) {
+        a[l] = null;
+        continue;
+      }
+      T(c) && T(o) ? a[l] = h(c, o) : a[l] = o;
+    }
+  }
+  return a;
+}
+const q = g({
+  name: "JChBar",
+  props: {
+    labels: {
+      type: Array,
+      default: () => [],
+      required: !0
+    },
+    datasets: {
+      type: Array,
+      required: !0
+    },
+    options: {
+      type: Object,
+      default: () => ({}),
+      required: !1
+    },
+    height: {
+      type: Number,
+      default: 300
+    }
+  },
+  setup(e) {
+    const i = f(null), a = f(null);
+    let l = null;
+    const o = (s) => {
+      let t = s.querySelector("div.chartjs-tooltip");
+      return t || (t = document.createElement("div"), t.className = "chartjs-tooltip", t.style.background = "#ffffff", t.style.borderRadius = "8px", t.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.15)", t.style.color = "#323232", t.style.opacity = "0", t.style.pointerEvents = "none", t.style.position = "absolute", t.style.transform = "translate(-50%, 0)", t.style.transition = "all .1s ease", t.style.padding = "8px 10px", t.style.font = "12px Open Sans, sans-serif", s.appendChild(t)), t;
+    }, c = (s) => {
+      const { chart: t, tooltip: r } = s, d = a.value;
+      if (!d) return;
+      const n = o(d);
+      if (r.opacity === 0) {
+        n.style.opacity = "0";
+        return;
+      }
+      if (r.body) {
+        const _ = r.title || [], A = r.body.map((u) => u.lines);
+        if (n.innerHTML = "", _.length) {
+          const u = document.createElement("div");
+          u.style.fontWeight = "600", u.style.marginBottom = "4px", u.textContent = _.join(" "), n.appendChild(u);
+        }
+        A.forEach((u) => {
+          const S = document.createElement("div");
+          S.textContent = u.join(" "), n.appendChild(S);
+        });
+      }
+      const { offsetLeft: b, offsetTop: w } = t.canvas;
+      n.style.opacity = "1", n.style.left = `${b + r.caretX}px`, n.style.top = `${w + r.caretY}px`;
+    }, p = () => {
+      var d;
+      l && l.destroy();
+      const s = (d = i.value) == null ? void 0 : d.getContext("2d");
+      if (!s) return;
+      const t = {
+        labels: e.labels,
+        datasets: e.datasets.map((n) => ({
+          ...n,
+          type: "bar",
+          borderWidth: n.borderWidth ?? 0,
+          borderRadius: n.borderRadius ?? 4,
+          maxBarThickness: n.maxBarThickness ?? 34,
+          // 确保填充色使用传入的颜色，而不是渐变色
+          backgroundColor: n.backgroundColor || "#3A416F"
+        }))
+      }, r = {
+        responsive: !0,
+        maintainAspectRatio: !1,
+        plugins: {
+          legend: {
+            display: !0,
+            // 关键修改：显示 Legend
+            position: "bottom",
+            labels: {
+              color: "#969799",
+              pointStyle: "rect",
+              padding: 20,
+              usePointStyle: !0,
+              font: {
+                size: 11,
+                family: "Open Sans",
+                style: "normal",
+                lineHeight: 1
+              }
+            }
+          },
+          tooltip: {
+            enabled: !1,
+            external: c
+          }
+        },
+        scales: {
+          y: {
+            border: { display: !1 },
+            grid: {
+              display: !0,
+              drawOnChartArea: !0,
+              drawTicks: !1,
+              color: "#f5f6fa"
+              // 使用实色细线
+            },
+            ticks: {
+              display: !0,
+              padding: 10,
+              color: "#969799"
+            }
+          },
+          x: {
+            // 关键修改：移除 dash: [5, 5]，实现实线分割线
+            border: { display: !1 },
+            grid: {
+              display: !1,
+              drawOnChartArea: !0,
+              drawTicks: !0
+            },
+            ticks: {
+              display: !0,
+              color: "#969799",
+              padding: 10
+            }
+          }
+        }
+      };
+      l = new $(s, {
+        type: "bar",
+        data: t,
+        options: h(r, e.options)
+      });
+    };
+    return m(() => {
+      p();
+    }), C(
+      [() => e.labels, () => e.datasets, () => e.height],
+      () => {
+        p();
+      },
+      { deep: !0 }
+    ), {
+      barChartCanvas: i,
+      chartContainer: a
+    };
+  }
+}), O = (e, i) => {
+  const a = e.__vccOpts || e;
+  for (const [l, o] of i)
+    a[l] = o;
+  return a;
+}, H = {
+  ref: "chartContainer",
+  style: { position: "relative" }
+};
+function j(e, i, a, l, o, c) {
+  return x(), v("div", H, [
+    y("div", null, [
+      y("canvas", {
+        ref: "barChartCanvas",
+        style: k([{ width: "100%" }, { height: e.height + "px", maxHeight: e.height + "px" }])
+      }, null, 4)
+    ])
+  ], 512);
+}
+const Z = /* @__PURE__ */ O(q, [["render", j], ["__scopeId", "data-v-e2691574"]]), E = g({
+  name: "JChBarLine",
+  props: {
+    labels: {
+      type: Array,
+      default: () => [],
+      required: !0
+    },
+    datasets: {
+      type: Array,
+      required: !0
+    },
+    options: {
+      type: Object,
+      default: () => ({}),
+      required: !1
+    },
+    height: {
+      type: Number,
+      default: 300
+      // 默认高度 300px
+    }
+  },
+  setup(e) {
+    const i = f(null);
+    let a = null;
+    const l = () => {
+      var t;
+      a && a.destroy();
+      const o = (t = i.value) == null ? void 0 : t.getContext("2d");
+      if (!o) return;
+      const c = e.datasets.map((r) => {
+        let d = {};
+        const n = r.type === "line" ? "line" : "bar";
+        return r.type === "line" ? d = {
+          type: "line",
+          tension: 0.4,
+          pointRadius: 0,
+          borderWidth: 3,
+          fill: !1,
+          // 关键：取消填充
+          backgroundColor: "transparent",
+          maxBarThickness: void 0
+        } : r.type === "bar" && (d = {
+          type: "bar",
+          borderWidth: 0,
+          borderRadius: 4,
+          borderSkipped: !1,
+          fill: void 0,
+          maxBarThickness: 34,
+          backgroundColor: r.backgroundColor
+        }), {
+          type: n,
+          ...r,
+          ...d
+        };
+      }), p = {
+        labels: e.labels,
+        datasets: c
+      }, s = {
+        responsive: !0,
+        maintainAspectRatio: !1,
+        plugins: {
+          legend: {
+            display: !0,
+            // 关键：显示 Legend
+            position: "bottom",
+            labels: {
+              color: "#969799",
+              pointStyle: "rect",
+              padding: 20,
+              usePointStyle: !0,
+              font: {
+                size: 11,
+                family: "Open Sans",
+                style: "normal",
+                lineHeight: 1
+              }
+            }
+          },
+          tooltip: {
+            borderWidth: 1,
+            backgroundColor: "white",
+            titleColor: "black",
+            bodyColor: "black",
+            borderColor: "#eeeeee",
+            padding: 12,
+            callbacks: {
+              label: (r) => `${r.dataset.label || ""}: ${r.formattedValue}`
+            }
+          }
+        },
+        interaction: {
+          intersect: !1,
+          mode: "index"
+        },
+        scales: {
+          y: {
+            beginAtZero: !0,
+            border: { display: !1 },
+            grid: {
+              display: !0,
+              drawOnChartArea: !0,
+              drawTicks: !1,
+              color: "#f5f6fa"
+            },
+            ticks: {
+              display: !0,
+              padding: 10,
+              color: "#969799",
+              font: { size: 11, family: "Open Sans", style: "normal", lineHeight: 2 }
+            }
+          },
+          x: {
+            border: { display: !1 },
+            grid: { display: !1, drawOnChartArea: !0, drawTicks: !0 },
+            ticks: {
+              display: !0,
+              color: "#969799",
+              padding: 10,
+              font: { size: 11, family: "Open Sans", style: "normal", lineHeight: 2 },
+              callback: (r, d) => {
+                const n = e.labels[d];
+                return n && n.length > 13 ? `${n.slice(0, 13)}...` : n;
+              }
+            }
+          }
+        }
+      };
+      a = new $(o, {
+        data: p,
+        options: h(s, e.options)
+      });
+    };
+    return m(() => {
+      l();
+    }), C(
+      [() => e.labels, () => e.datasets, () => e.height],
+      () => {
+        l();
+      },
+      { deep: !0 }
+    ), {
+      mixedChartCanvas: i
+    };
+  }
+});
+function W(e, i, a, l, o, c) {
+  return x(), v("div", null, [
+    y("canvas", {
+      ref: "mixedChartCanvas",
+      style: k([{ width: "100%" }, { height: e.height + "px", maxHeight: e.height + "px" }])
+    }, null, 4)
+  ]);
+}
+const M = /* @__PURE__ */ O(E, [["render", W]]), z = g({
+  name: "JChBubble",
+  props: {
+    labels: {
+      type: Array,
+      default: () => [],
+      required: !1
+    },
+    datasets: {
+      type: Array,
+      required: !0
+    },
+    options: {
+      type: Object,
+      default: () => ({}),
+      required: !1
+    },
+    height: {
+      type: Number,
+      default: 300
+    }
+  },
+  setup(e) {
+    const i = f(null);
+    let a = null;
+    const l = () => {
+      var s;
+      a && a.destroy();
+      const o = (s = i.value) == null ? void 0 : s.getContext("2d");
+      if (!o) return;
+      const c = {
+        labels: e.labels,
+        datasets: e.datasets.map((t) => ({
+          ...t,
+          // 确保类型正确，并设置透明度
+          backgroundColor: t.backgroundColor || "rgba(54, 162, 235, 0.6)"
+        }))
+      }, p = {
+        responsive: !0,
+        maintainAspectRatio: !1,
+        plugins: {
+          legend: {
+            display: !0,
+            position: "bottom",
+            labels: {
+              color: "#969799",
+              pointStyle: "rect",
+              padding: 20,
+              usePointStyle: !0,
+              font: { size: 11, family: "Open Sans", style: "normal", lineHeight: 1 }
+            }
+          },
+          tooltip: {
+            borderWidth: 1,
+            backgroundColor: "white",
+            titleColor: "black",
+            bodyColor: "black",
+            borderColor: "#eeeeee",
+            padding: 12,
+            callbacks: {
+              label: (t) => `${t.dataset.label || ""}: ${t.formattedValue}`
+            }
+          }
+        },
+        interaction: { intersect: !1, mode: "index" },
+        scales: {
+          y: {
+            beginAtZero: !0,
+            border: { display: !1 },
+            grid: { display: !0, drawOnChartArea: !0, drawTicks: !1, color: "#f5f6fa" },
+            ticks: {
+              display: !0,
+              padding: 10,
+              color: "#969799",
+              font: { size: 11, family: "Open Sans", style: "normal", lineHeight: 2 }
+            }
+          },
+          x: {
+            border: { display: !1 },
+            grid: { display: !0, drawOnChartArea: !0, drawTicks: !0, color: "#f5f6fa" },
+            ticks: {
+              display: !0,
+              color: "#969799",
+              padding: 10,
+              font: { size: 11, family: "Open Sans", style: "normal", lineHeight: 2 },
+              callback: (t, r) => {
+                const d = e.labels[r];
+                return d ? typeof d == "string" && d.length > 13 ? `${d.slice(0, 13)}...` : d : t;
+              }
+            }
+          }
+        }
+      };
+      a = new $(o, {
+        type: "bubble",
+        data: c,
+        options: h(p, e.options)
+      });
+    };
+    return m(() => {
+      l();
+    }), C(
+      [() => e.labels, () => e.datasets, () => e.height],
+      () => {
+        l();
+      },
+      { deep: !0 }
+    ), {
+      bubbleChartCanvas: i
+    };
+  }
+});
+function R(e, i, a, l, o, c) {
+  return x(), v("div", null, [
+    y("canvas", {
+      ref: "bubbleChartCanvas",
+      style: k([{ width: "100%" }, { height: e.height + "px", maxHeight: e.height + "px" }])
+    }, null, 4)
+  ]);
+}
+const F = /* @__PURE__ */ O(z, [["render", R]]), L = g({
+  name: "JChLine",
+  props: {
+    labels: {
+      type: Array,
+      default: () => [],
+      required: !0
+    },
+    datasets: {
+      type: Array,
+      required: !0
+    },
+    options: {
+      type: Object,
+      default: () => ({}),
+      required: !1
+    },
+    height: {
+      type: Number,
+      default: 300
+    },
+    unitName: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(e) {
+    const i = f(null);
+    let a = null;
+    const l = () => {
+      var s;
+      a && a.destroy();
+      const o = (s = i.value) == null ? void 0 : s.getContext("2d");
+      if (!o) return;
+      const c = {
+        labels: e.labels,
+        // 使用 props.labels
+        datasets: e.datasets.map((t) => ({
+          ...t,
+          tension: 0.4,
+          pointRadius: 2,
+          borderWidth: 3,
+          fill: !1,
+          backgroundColor: "transparent",
+          type: "line"
+        }))
+      }, p = {
+        responsive: !0,
+        maintainAspectRatio: !1,
+        plugins: {
+          legend: {
+            display: !0,
+            position: "bottom",
+            labels: {
+              color: "#969799",
+              pointStyle: "line",
+              padding: 20,
+              usePointStyle: !0,
+              font: {
+                size: 11,
+                family: "Open Sans",
+                style: "normal",
+                lineHeight: 1
+              }
+            }
+          },
+          tooltip: {
+            borderWidth: 1,
+            backgroundColor: "white",
+            // Set the background color to white
+            titleColor: "black",
+            // Set the title color to black
+            bodyColor: "black",
+            // Set the body color to black
+            borderColor: "#eeeeee",
+            // Optional: Add a border color
+            padding: 12,
+            callbacks: {
+              label: (t) => `${t.dataset.label || ""}: ${t.formattedValue} ${e.unitName}`
+            }
+          }
+        },
+        interaction: { intersect: !1, mode: "index" },
+        scales: {
+          y: {
+            beginAtZero: !0,
+            border: {
+              display: !1
+            },
+            grid: {
+              display: !0,
+              drawOnChartArea: !0,
+              drawTicks: !1,
+              color: "#f5f6fa"
+            },
+            ticks: {
+              display: !0,
+              padding: 10,
+              color: "#969799",
+              font: {
+                size: 11,
+                family: "Open Sans",
+                style: "normal",
+                lineHeight: 2
+              }
+            }
+          },
+          x: {
+            border: {
+              display: !1,
+              dash: [5, 5]
+            },
+            grid: {
+              display: !1,
+              drawOnChartArea: !1,
+              drawTicks: !1
+            },
+            ticks: {
+              display: !0,
+              color: "#969799",
+              padding: 20,
+              font: {
+                size: 10,
+                family: "Open Sans",
+                style: "normal"
+              },
+              callback: (t, r, d) => {
+                const n = e.labels[r];
+                return n.length > 13 ? `${n.slice(0, 13)}...` : n;
+              }
+            }
+          }
+        }
+      };
+      a = new $(o, {
+        type: "line",
+        data: c,
+        options: h(p, e.options)
+      });
+    };
+    return m(() => {
+      l();
+    }), C(
+      [() => e.labels, () => e.datasets],
+      () => {
+        l();
+      },
+      { deep: !0 }
+    ), {
+      lineChartCanvas: i
+    };
+  }
+}), B = { ref: "chartContainer" };
+function N(e, i, a, l, o, c) {
+  return x(), v("div", B, [
+    y("canvas", {
+      ref: "lineChartCanvas",
+      style: k([{ width: "100%" }, { height: e.height + "px", maxHeight: e.height + "px" }])
+    }, null, 4)
+  ], 512);
+}
+const G = /* @__PURE__ */ O(L, [["render", N], ["__scopeId", "data-v-1a079ae0"]]), P = g({
+  name: "JChPieDoughnut",
+  props: {
+    type: {
+      type: String,
+      required: !0,
+      validator: (e) => ["pie", "doughnut"].includes(e)
+    },
+    labels: {
+      type: Array,
+      default: () => [],
+      required: !0
+    },
+    // 数据集类型统一为 ChartType
+    datasets: {
+      type: Array,
+      required: !0
+    },
+    options: {
+      type: Object,
+      default: () => ({}),
+      required: !1
+    },
+    height: {
+      type: Number,
+      default: 300
+    }
+  },
+  setup(e) {
+    const i = f(null), a = f(null);
+    let l = null;
+    const o = (s) => {
+      let t = s.querySelector("div.chartjs-tooltip");
+      return t || (t = document.createElement("div"), t.className = "chartjs-tooltip", t.style.background = "#ffffff", t.style.borderRadius = "8px", t.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.15)", t.style.color = "#323232", t.style.opacity = "0", t.style.pointerEvents = "none", t.style.position = "absolute", t.style.transform = "translate(-50%, 0)", t.style.transition = "all .1s ease", t.style.padding = "8px 10px", t.style.font = "12px Open Sans, sans-serif", s.appendChild(t)), t;
+    }, c = (s) => {
+      const { chart: t, tooltip: r } = s, d = a.value;
+      if (!d) return;
+      const n = o(d);
+      if (r.opacity === 0) {
+        n.style.opacity = "0";
+        return;
+      }
+      if (r.body) {
+        const _ = r.title || [], A = r.body.map((u) => u.lines);
+        if (n.innerHTML = "", _.length) {
+          const u = document.createElement("div");
+          u.style.fontWeight = "600", u.style.marginBottom = "4px", u.textContent = _.join(" "), n.appendChild(u);
+        }
+        A.forEach((u) => {
+          const S = document.createElement("div");
+          S.textContent = u.join(" "), n.appendChild(S);
+        });
+      }
+      const { offsetLeft: b, offsetTop: w } = t.canvas;
+      n.style.opacity = "1", n.style.left = `${b + r.caretX}px`, n.style.top = `${w + r.caretY}px`;
+    }, p = () => {
+      var n;
+      l && l.destroy();
+      const s = (n = i.value) == null ? void 0 : n.getContext("2d");
+      if (!s) return;
+      const t = e.type, r = {
+        labels: e.labels,
+        datasets: e.datasets.map((b) => ({
+          ...b,
+          type: t,
+          // 关键：动态设置 ChartDataSet 的类型
+          borderWidth: b.borderWidth ?? 2
+        }))
+      }, d = {
+        responsive: !0,
+        maintainAspectRatio: !1,
+        plugins: {
+          legend: {
+            display: !0,
+            position: "bottom",
+            labels: {
+              color: "#969799",
+              pointStyle: "rect",
+              padding: 20,
+              usePointStyle: !0,
+              font: {
+                size: 11,
+                family: "Open Sans",
+                style: "normal",
+                lineHeight: 1
+              }
+            }
+          },
+          tooltip: {
+            enabled: !1,
+            external: c
+          }
+        },
+        interaction: { intersect: !0, mode: "index" }
+      };
+      l = new $(s, {
+        type: t,
+        data: r,
+        // 需要使用 'as any' 来避免 TypeScript 对不同 ChartOptions 类型的严格检查
+        options: h(d, e.options)
+      });
+    };
+    return m(() => {
+      p();
+    }), C(
+      [() => e.labels, () => e.datasets, () => e.type],
+      () => {
+        p();
+      },
+      { deep: !0 }
+    ), {
+      chartCanvas: i,
+      chartContainer: a
+    };
+  }
+}), D = {
+  ref: "chartContainer",
+  style: { position: "relative" }
+};
+function I(e, i, a, l, o, c) {
+  return x(), v("div", D, [
+    y("canvas", {
+      ref: "chartCanvas",
+      style: k([{ width: "100%" }, { height: e.height + "px", maxHeight: e.height + "px" }])
+    }, null, 4)
+  ], 512);
+}
+const K = /* @__PURE__ */ O(P, [["render", I]]), V = g({
+  name: "JChRadar",
+  props: {
+    labels: {
+      type: Array,
+      default: () => [],
+      required: !0
+    },
+    datasets: {
+      type: Array,
+      required: !0
+    },
+    options: {
+      type: Object,
+      default: () => ({}),
+      required: !1
+    },
+    height: {
+      type: Number,
+      default: 300
+    }
+  },
+  setup(e) {
+    const i = f(null);
+    let a = null;
+    const l = () => {
+      var s;
+      a && a.destroy();
+      const o = (s = i.value) == null ? void 0 : s.getContext("2d");
+      if (!o) return;
+      const c = {
+        labels: e.labels,
+        datasets: e.datasets.map((t) => ({
+          ...t,
+          type: "radar",
+          fill: t.fill ?? !0,
+          backgroundColor: t.backgroundColor || "rgba(58,65,111,0.2)",
+          borderColor: t.borderColor || "rgba(58,65,111,1)",
+          borderWidth: t.borderWidth ?? 2
+        }))
+      }, p = {
+        responsive: !0,
+        maintainAspectRatio: !1,
+        plugins: {
+          legend: {
+            display: !0,
+            // 关键修改：显示 Legend，这对于雷达图非常重要
+            position: "bottom",
+            labels: {
+              color: "#969799",
+              pointStyle: "rect",
+              padding: 20,
+              usePointStyle: !0,
+              font: {
+                size: 11,
+                family: "Open Sans",
+                style: "normal",
+                lineHeight: 1
+              }
+            }
+          },
+          tooltip: {
+            borderWidth: 1,
+            backgroundColor: "white",
+            titleColor: "black",
+            bodyColor: "black",
+            borderColor: "#eeeeee",
+            padding: 12,
+            callbacks: {
+              label: (t) => `${t.dataset.label || ""}: ${t.formattedValue}`
+            }
+          }
+        },
+        interaction: { intersect: !1, mode: "index" },
+        scales: {
+          r: {
+            beginAtZero: !0,
+            angleLines: {
+              color: "#f5f6fa"
+              // 蜘蛛网线的颜色
+            },
+            grid: {
+              color: "#f5f6fa"
+              // 圆圈线的颜色
+            },
+            pointLabels: {
+              color: "#969799",
+              // 轴标签的颜色
+              font: { size: 11, family: "Open Sans" }
+            },
+            ticks: {
+              display: !1
+              // 隐藏刻度值
+            }
+          }
+        }
+      };
+      a = new $(o, {
+        type: "radar",
+        data: c,
+        options: h(p, e.options)
+      });
+    };
+    return m(() => {
+      l();
+    }), C(
+      [() => e.labels, () => e.datasets, () => e.height],
+      () => {
+        l();
+      },
+      { deep: !0 }
+    ), {
+      radarChartCanvas: i
+    };
+  }
+});
+function J(e, i, a, l, o, c) {
+  return x(), v("div", null, [
+    y("canvas", {
+      ref: "radarChartCanvas",
+      style: k([{ width: "100%" }, { height: e.height + "px", maxHeight: e.height + "px" }])
+    }, null, 4)
+  ]);
+}
+const Q = /* @__PURE__ */ O(V, [["render", J]]);
+export {
+  O as _,
+  M as a,
+  F as b,
+  G as c,
+  K as d,
+  Q as e,
+  Z as i
+};