rtcpts 0.0.1

package/dist/charts-DFQ978tO.js

@@ -0,0 +1,826 @@
+import { defineComponent as b, ref as f, onMounted as g, watch as m, createElementBlock as C, openBlock as v, createElementVNode as y, normalizeStyle as x } from "vue";
+import { Chart as k } from "chart.js/auto";
+const $ = (t, o) => {
+  const n = t.__vccOpts || t;
+  for (const [l, d] of o)
+    n[l] = d;
+  return n;
+}, A = b({
+  name: "JChBar",
+  props: {
+    labels: {
+      type: Array,
+      default: () => [],
+      required: !0
+    },
+    datasets: {
+      type: Array,
+      required: !0
+    },
+    height: {
+      type: Number,
+      default: 300
+    }
+  },
+  setup(t) {
+    const o = f(null), n = f(null);
+    let l = null;
+    const d = (s) => {
+      let e = s.querySelector("div.chartjs-tooltip");
+      return e || (e = document.createElement("div"), e.className = "chartjs-tooltip", e.style.background = "#ffffff", e.style.borderRadius = "8px", e.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.15)", e.style.color = "#323232", e.style.opacity = "0", e.style.pointerEvents = "none", e.style.position = "absolute", e.style.transform = "translate(-50%, 0)", e.style.transition = "all .1s ease", e.style.padding = "8px 10px", e.style.font = "12px Open Sans, sans-serif", s.appendChild(e)), e;
+    }, c = (s) => {
+      const { chart: e, tooltip: r } = s, i = n.value;
+      if (!i) return;
+      const a = d(i);
+      if (r.opacity === 0) {
+        a.style.opacity = "0";
+        return;
+      }
+      if (r.body) {
+        const _ = r.title || [], O = r.body.map((p) => p.lines);
+        if (a.innerHTML = "", _.length) {
+          const p = document.createElement("div");
+          p.style.fontWeight = "600", p.style.marginBottom = "4px", p.textContent = _.join(" "), a.appendChild(p);
+        }
+        O.forEach((p) => {
+          const w = document.createElement("div");
+          w.textContent = p.join(" "), a.appendChild(w);
+        });
+      }
+      const { offsetLeft: h, offsetTop: S } = e.canvas;
+      a.style.opacity = "1", a.style.left = `${h + r.caretX}px`, a.style.top = `${S + r.caretY}px`;
+    }, u = () => {
+      var i;
+      l && l.destroy();
+      const s = (i = o.value) == null ? void 0 : i.getContext("2d");
+      if (!s) return;
+      const e = {
+        labels: t.labels,
+        datasets: t.datasets.map((a) => ({
+          ...a,
+          type: "bar",
+          borderWidth: a.borderWidth ?? 0,
+          borderRadius: a.borderRadius ?? 4,
+          maxBarThickness: a.maxBarThickness ?? 34,
+          // 确保填充色使用传入的颜色，而不是渐变色
+          backgroundColor: a.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 k(s, {
+        type: "bar",
+        data: e,
+        options: r
+      });
+    };
+    return g(() => {
+      u();
+    }), m(
+      [() => t.labels, () => t.datasets, () => t.height],
+      () => {
+        u();
+      },
+      { deep: !0 }
+    ), {
+      barChartCanvas: o,
+      chartContainer: n
+    };
+  }
+}), T = {
+  ref: "chartContainer",
+  style: { position: "relative" }
+};
+function E(t, o, n, l, d, c) {
+  return v(), C("div", T, [
+    y("div", null, [
+      y("canvas", {
+        ref: "barChartCanvas",
+        style: x([{ width: "100%" }, { height: t.height + "px" }])
+      }, null, 4)
+    ])
+  ], 512);
+}
+const X = /* @__PURE__ */ $(A, [["render", E], ["__scopeId", "data-v-6215e032"]]), q = b({
+  name: "JChBarLine",
+  props: {
+    labels: {
+      type: Array,
+      default: () => [],
+      required: !0
+    },
+    datasets: {
+      type: Array,
+      required: !0
+    },
+    height: {
+      type: Number,
+      default: 300
+      // 默认高度 300px
+    }
+  },
+  setup(t) {
+    const o = f(null);
+    let n = null;
+    const l = () => {
+      var e;
+      n && n.destroy();
+      const d = (e = o.value) == null ? void 0 : e.getContext("2d");
+      if (!d) return;
+      const c = t.datasets.map((r) => {
+        let i = {};
+        const a = r.type === "line" ? "line" : "bar";
+        return r.type === "line" ? i = {
+          type: "line",
+          tension: 0.4,
+          pointRadius: 0,
+          borderWidth: 3,
+          fill: !1,
+          // 关键：取消填充
+          backgroundColor: "transparent",
+          maxBarThickness: void 0
+        } : r.type === "bar" && (i = {
+          type: "bar",
+          borderWidth: 0,
+          borderRadius: 4,
+          borderSkipped: !1,
+          fill: void 0,
+          maxBarThickness: 34,
+          backgroundColor: r.backgroundColor
+        }), {
+          type: a,
+          ...r,
+          ...i
+        };
+      }), u = {
+        labels: t.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, i) => {
+                const a = t.labels[i];
+                return a && a.length > 13 ? `${a.slice(0, 13)}...` : a;
+              }
+            }
+          }
+        }
+      };
+      n = new k(d, {
+        data: u,
+        options: s
+      });
+    };
+    return g(() => {
+      l();
+    }), m(
+      [() => t.labels, () => t.datasets, () => t.height],
+      () => {
+        l();
+      },
+      { deep: !0 }
+    ), {
+      mixedChartCanvas: o
+    };
+  }
+});
+function H(t, o, n, l, d, c) {
+  return v(), C("div", null, [
+    y("canvas", {
+      ref: "mixedChartCanvas",
+      style: x([{ width: "100%" }, { height: t.height + "px" }])
+    }, null, 4)
+  ]);
+}
+const Y = /* @__PURE__ */ $(q, [["render", H]]), W = b({
+  name: "JChBubble",
+  props: {
+    labels: {
+      type: Array,
+      default: () => [],
+      required: !1
+    },
+    datasets: {
+      type: Array,
+      required: !0
+    },
+    height: {
+      type: Number,
+      default: 300
+    }
+  },
+  setup(t) {
+    const o = f(null);
+    let n = null;
+    const l = () => {
+      var s;
+      n && n.destroy();
+      const d = (s = o.value) == null ? void 0 : s.getContext("2d");
+      if (!d) return;
+      const c = {
+        labels: t.labels,
+        datasets: t.datasets.map((e) => ({
+          ...e,
+          // 确保类型正确，并设置透明度
+          backgroundColor: e.backgroundColor || "rgba(54, 162, 235, 0.6)"
+        }))
+      }, u = {
+        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: (e) => `${e.dataset.label || ""}: ${e.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: (e, r) => {
+                const i = t.labels[r];
+                return i ? typeof i == "string" && i.length > 13 ? `${i.slice(0, 13)}...` : i : e;
+              }
+            }
+          }
+        }
+      };
+      n = new k(d, {
+        type: "bubble",
+        data: c,
+        options: u
+      });
+    };
+    return g(() => {
+      l();
+    }), m(
+      [() => t.labels, () => t.datasets, () => t.height],
+      () => {
+        l();
+      },
+      { deep: !0 }
+    ), {
+      bubbleChartCanvas: o
+    };
+  }
+});
+function z(t, o, n, l, d, c) {
+  return v(), C("div", null, [
+    y("canvas", {
+      ref: "bubbleChartCanvas",
+      style: x([{ width: "100%" }, { height: t.height + "px" }])
+    }, null, 4)
+  ]);
+}
+const Z = /* @__PURE__ */ $(W, [["render", z]]), R = b({
+  name: "JChLine",
+  props: {
+    labels: {
+      type: Array,
+      default: () => [],
+      required: !0
+    },
+    datasets: {
+      type: Array,
+      required: !0
+    },
+    height: {
+      type: Number,
+      default: 300
+    }
+  },
+  setup(t) {
+    const o = f(null);
+    let n = null;
+    const l = () => {
+      var s;
+      n && n.destroy();
+      const d = (s = o.value) == null ? void 0 : s.getContext("2d");
+      if (!d) return;
+      const c = {
+        labels: t.labels,
+        // 使用 props.labels
+        datasets: t.datasets.map((e) => ({
+          ...e,
+          tension: 0.4,
+          pointRadius: 2,
+          borderWidth: 3,
+          fill: !1,
+          backgroundColor: "transparent",
+          type: "line"
+        }))
+      }, u = {
+        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: (e) => `${e.dataset.label || ""}: ${e.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,
+              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: (e, r, i) => {
+                const a = t.labels[r];
+                return a.length > 13 ? `${a.slice(0, 13)}...` : a;
+              }
+            }
+          }
+        }
+      };
+      n = new k(d, {
+        type: "line",
+        data: c,
+        options: u
+      });
+    };
+    return g(() => {
+      l();
+    }), m(
+      [() => t.labels, () => t.datasets],
+      () => {
+        l();
+      },
+      { deep: !0 }
+    ), {
+      lineChartCanvas: o
+    };
+  }
+}), L = { ref: "chartContainer" };
+function B(t, o, n, l, d, c) {
+  return v(), C("div", L, [
+    y("canvas", {
+      ref: "lineChartCanvas",
+      style: x([{ width: "100%" }, { height: t.height + "px" }])
+    }, null, 4)
+  ], 512);
+}
+const M = /* @__PURE__ */ $(R, [["render", B], ["__scopeId", "data-v-00b6cb2b"]]), N = b({
+  name: "JChPieDoughnut",
+  props: {
+    type: {
+      type: String,
+      required: !0,
+      validator: (t) => ["pie", "doughnut"].includes(t)
+    },
+    labels: {
+      type: Array,
+      default: () => [],
+      required: !0
+    },
+    // 数据集类型统一为 ChartType
+    datasets: {
+      type: Array,
+      required: !0
+    },
+    height: {
+      type: Number,
+      default: 300
+    }
+  },
+  setup(t) {
+    const o = f(null), n = f(null);
+    let l = null;
+    const d = (s) => {
+      let e = s.querySelector("div.chartjs-tooltip");
+      return e || (e = document.createElement("div"), e.className = "chartjs-tooltip", e.style.background = "#ffffff", e.style.borderRadius = "8px", e.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.15)", e.style.color = "#323232", e.style.opacity = "0", e.style.pointerEvents = "none", e.style.position = "absolute", e.style.transform = "translate(-50%, 0)", e.style.transition = "all .1s ease", e.style.padding = "8px 10px", e.style.font = "12px Open Sans, sans-serif", s.appendChild(e)), e;
+    }, c = (s) => {
+      const { chart: e, tooltip: r } = s, i = n.value;
+      if (!i) return;
+      const a = d(i);
+      if (r.opacity === 0) {
+        a.style.opacity = "0";
+        return;
+      }
+      if (r.body) {
+        const _ = r.title || [], O = r.body.map((p) => p.lines);
+        if (a.innerHTML = "", _.length) {
+          const p = document.createElement("div");
+          p.style.fontWeight = "600", p.style.marginBottom = "4px", p.textContent = _.join(" "), a.appendChild(p);
+        }
+        O.forEach((p) => {
+          const w = document.createElement("div");
+          w.textContent = p.join(" "), a.appendChild(w);
+        });
+      }
+      const { offsetLeft: h, offsetTop: S } = e.canvas;
+      a.style.opacity = "1", a.style.left = `${h + r.caretX}px`, a.style.top = `${S + r.caretY}px`;
+    }, u = () => {
+      var a;
+      l && l.destroy();
+      const s = (a = o.value) == null ? void 0 : a.getContext("2d");
+      if (!s) return;
+      const e = t.type, r = {
+        labels: t.labels,
+        datasets: t.datasets.map((h) => ({
+          ...h,
+          type: e,
+          // 关键：动态设置 ChartDataSet 的类型
+          borderWidth: h.borderWidth ?? 2
+        }))
+      }, i = {
+        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: !1, mode: "index" }
+      };
+      l = new k(s, {
+        type: e,
+        data: r,
+        // 需要使用 'as any' 来避免 TypeScript 对不同 ChartOptions 类型的严格检查
+        options: i
+      });
+    };
+    return g(() => {
+      u();
+    }), m(
+      [() => t.labels, () => t.datasets, () => t.type],
+      () => {
+        u();
+      },
+      { deep: !0 }
+    ), {
+      chartCanvas: o,
+      chartContainer: n
+    };
+  }
+}), j = {
+  ref: "chartContainer",
+  style: { position: "relative" }
+};
+function D(t, o, n, l, d, c) {
+  return v(), C("div", j, [
+    y("canvas", {
+      ref: "chartCanvas",
+      style: x([{ width: "100%" }, { height: t.height + "px" }])
+    }, null, 4)
+  ], 512);
+}
+const F = /* @__PURE__ */ $(N, [["render", D]]), I = b({
+  name: "JChRadar",
+  props: {
+    labels: {
+      type: Array,
+      default: () => [],
+      required: !0
+    },
+    datasets: {
+      type: Array,
+      required: !0
+    },
+    height: {
+      type: Number,
+      default: 300
+    }
+  },
+  setup(t) {
+    const o = f(null);
+    let n = null;
+    const l = () => {
+      var s;
+      n && n.destroy();
+      const d = (s = o.value) == null ? void 0 : s.getContext("2d");
+      if (!d) return;
+      const c = {
+        labels: t.labels,
+        datasets: t.datasets.map((e) => ({
+          ...e,
+          type: "radar",
+          fill: e.fill ?? !0,
+          backgroundColor: e.backgroundColor || "rgba(58,65,111,0.2)",
+          borderColor: e.borderColor || "rgba(58,65,111,1)",
+          borderWidth: e.borderWidth ?? 2
+        }))
+      }, u = {
+        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: (e) => `${e.dataset.label || ""}: ${e.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
+              // 隐藏刻度值
+            }
+          }
+        }
+      };
+      n = new k(d, {
+        type: "radar",
+        data: c,
+        options: u
+      });
+    };
+    return g(() => {
+      l();
+    }), m(
+      [() => t.labels, () => t.datasets, () => t.height],
+      () => {
+        l();
+      },
+      { deep: !0 }
+    ), {
+      radarChartCanvas: o
+    };
+  }
+});
+function P(t, o, n, l, d, c) {
+  return v(), C("div", null, [
+    y("canvas", {
+      ref: "radarChartCanvas",
+      style: x([{ width: "100%" }, { height: t.height + "px" }])
+    }, null, 4)
+  ]);
+}
+const G = /* @__PURE__ */ $(I, [["render", P]]);
+export {
+  $ as _,
+  Y as a,
+  Z as b,
+  M as c,
+  F as d,
+  G as e,
+  X as i
+};