twcpt 0.0.3 → 0.0.5

package/dist/charts-BRqaKjiE.js

@@ -1,879 +0,0 @@
-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
-};