x-next 1.0.1 → 1.2.0

package/dist/es/components/trend-chart/components/trend-chart-grid.js

@@ -0,0 +1,62 @@
+import { defineComponent as b, computed as u, h as i } from "vue";
+import { getComponentPrefix as h } from "../../../_utils/config.js";
+import { trendChartGridProps as y } from "../props.js";
+import { TrendChartAxisColor as m } from "../themes.js";
+const N = b({
+  name: h("TrendChartGrid"),
+  props: y,
+  setup(n) {
+    const c = (e) => {
+      const t = n.verticalLinesNumber > 1 ? (n.boundary.maxX - n.boundary.minX) / (n.verticalLinesNumber - 1) : 0, r = n.boundary.minX + t * (e - 1), a = n.boundary.minY, o = n.boundary.maxY;
+      return {
+        x1: r,
+        x2: r,
+        y1: a,
+        y2: o,
+        style: { stroke: m }
+      };
+    }, d = (e) => {
+      const t = n.horizontalLinesNumber > 1 ? (n.boundary.maxY - n.boundary.minY) / (n.horizontalLinesNumber - 1) : 0, r = n.boundary.maxY - t * (e - 1), a = n.boundary.minX, o = n.boundary.maxX;
+      return {
+        x1: a,
+        x2: o,
+        y1: r,
+        y2: r,
+        style: { stroke: m }
+      };
+    }, l = u(() => {
+      if (n.verticalLines && n.verticalLinesNumber > 0) {
+        const e = [];
+        for (let t = 1; t <= n.verticalLinesNumber; t++)
+          e.push(
+            i("line", {
+              class: "line",
+              ...c(t)
+            })
+          );
+        return i("g", { class: "vertical" }, e);
+      }
+      return null;
+    }), s = u(() => {
+      if (n.horizontalLines && n.horizontalLinesNumber > 0) {
+        const e = [];
+        for (let t = 1; t <= n.horizontalLinesNumber; t++)
+          e.push(
+            i("line", {
+              class: "line",
+              ...d(t)
+            })
+          );
+        return i("g", { class: "horizontal" }, e);
+      }
+      return null;
+    });
+    return () => {
+      const e = [];
+      return l.value && e.push(l.value), s.value && e.push(s.value), e.length === 0 ? null : i("g", null, e);
+    };
+  }
+});
+export {
+  N as default
+};

package/dist/es/components/trend-chart/components/trend-chart-labels.js

@@ -0,0 +1,73 @@
+import { defineComponent as f, reactive as v, ref as x, onMounted as C, computed as c, h as n } from "vue";
+import { getComponentPrefix as Y } from "../../../_utils/config.js";
+import { trendChartLabelsProps as X } from "../props.js";
+import { TrendChartAxisColor as d } from "../themes.js";
+const T = f({
+  name: Y("TrendChartLabels"),
+  props: X,
+  setup(e) {
+    const l = v({
+      xLabelHeight: 0,
+      yLabelHeight: 0
+    }), u = x(null), b = x(null), L = (a) => {
+      var y;
+      const t = ((y = e.xLabels) == null ? void 0 : y.length) ?? 0, s = t > 1 ? (e.boundary.maxX - e.boundary.minX) / (t - 1) : 0, r = t > 1 ? e.boundary.minX + s * a : e.boundary.minX + (e.boundary.maxX - e.boundary.minX) / 2, i = e.boundary.maxY;
+      return { transform: `translate(${r}, ${i})` };
+    }, h = (a) => {
+      const t = e.yLabels ?? 0, s = t > 1 ? (e.boundary.maxY - e.boundary.minY) / (t - 1) : 0, r = e.boundary.minX, i = t > 1 ? e.boundary.maxY - s * a : e.boundary.minY + (e.boundary.maxY - e.boundary.minY) / 2;
+      return { transform: `translate(${r}, ${i})` };
+    }, g = (a) => {
+      const t = e.yLabels ?? 0;
+      return t <= 1 ? e.minValue : e.minValue + (e.maxValue - e.minValue) / (t - 1) * a;
+    };
+    C(() => {
+      var a, t;
+      u.value && e.xLabels && e.xLabels.length && (l.xLabelHeight = ((a = u.value.querySelector("text")) == null ? void 0 : a.getBoundingClientRect().height) || 0), b.value && e.yLabels && e.yLabels > 0 && (l.yLabelHeight = ((t = b.value.querySelector("text")) == null ? void 0 : t.getBoundingClientRect().height) || 0);
+    });
+    const m = c(() => e.xLabels && e.xLabels.length ? n(
+      "g",
+      { class: "x-labels", ref: u },
+      e.xLabels.map(
+        (a, t) => n("g", { class: "label", ...L(t) }, [
+          n(
+            "text",
+            {
+              dy: l.xLabelHeight + 5,
+              "text-anchor": "middle"
+            },
+            a
+          ),
+          n("line", { style: { stroke: d }, y2: 5 })
+        ])
+      )
+    ) : null), o = c(() => {
+      if (e.yLabels && e.yLabels > 0) {
+        const a = [];
+        for (let t = 0; t < e.yLabels; t++)
+          a.push(
+            n("g", { class: "label", ...h(t) }, [
+              n(
+                "text",
+                {
+                  dx: -10,
+                  dy: l.yLabelHeight / 4,
+                  "text-anchor": "end"
+                },
+                e.yLabelsTextFormatter(g(t))
+              ),
+              n("line", { style: { stroke: d }, x1: 0, x2: -5 })
+            ])
+          );
+        return n("g", { class: "y-labels", ref: b }, a);
+      }
+      return null;
+    });
+    return () => {
+      const a = [];
+      return m.value && a.push(m.value), o.value && a.push(o.value), n("g", a);
+    };
+  }
+});
+export {
+  T as default
+};

package/dist/es/components/trend-chart/helpers/genPath.js

@@ -0,0 +1,22 @@
+const P = (e, n, { maxY: $ }) => {
+  if (!e.length)
+    return { linePath: "", fillPath: "" };
+  if (e.length === 1) {
+    const [t] = e;
+    return { linePath: `M ${t.x},${t.y}`, fillPath: "" };
+  }
+  const l = e.shift(), a = e[e.length - 1], c = (e[0].x - l.x) / 2;
+  let h = `M ${l.x},${l.y}`;
+  e.forEach((t, x) => {
+    if (!n) h += ` L${t.x},${t.y}`;
+    else {
+      const r = e[x - 1] || l;
+      h += ` C ${c + r.x},${r.y} ${c + r.x},${t.y} ${t.x},${t.y}`;
+    }
+  });
+  let f = h;
+  return a.y !== $ && (f += ` L${a.x},${$}`), l.y !== $ && (f += ` L${l.x},${$}`), f += " Z", { linePath: h, fillPath: f };
+};
+export {
+  P as default
+};

package/dist/es/components/trend-chart/helpers/genPoints.js

@@ -0,0 +1,21 @@
+const h = (e, t, Y, m, c) => {
+  if (!e.length || c <= 0)
+    return [];
+  const i = Math.max(c, e.length), s = i > 1 ? (t.maxX - t.minX) / (i - 1) : 0, x = t.minY + (t.maxY - t.minY) / 2;
+  return e.map((X, g) => {
+    const n = i > 1 ? g * s + t.minX : t.minX + (t.maxX - t.minX) / 2;
+    if (Y === m)
+      return {
+        x: n,
+        y: x
+      };
+    const f = (t.maxY - t.minY) / (Y - m);
+    return {
+      x: n,
+      y: t.maxY - (X - m) * f
+    };
+  });
+};
+export {
+  h as default
+};

package/dist/es/components/trend-chart/helpers/getPadding.js

@@ -0,0 +1,21 @@
+const r = (a) => {
+  const t = a.split(" ").filter((o) => o !== "").map((o) => Number(o));
+  let e = {};
+  switch (t.length) {
+    case 4:
+      e = { top: t[0], right: t[1], bottom: t[2], left: t[3] };
+      break;
+    case 3:
+      e = { top: t[0], right: t[1], bottom: t[2], left: t[1] };
+      break;
+    case 2:
+      e = { top: t[0], right: t[1], bottom: t[0], left: t[1] };
+      break;
+    default:
+      e = { top: t[0], right: t[0], bottom: t[0], left: t[0] };
+  }
+  return e;
+};
+export {
+  r as default
+};

package/dist/es/components/trend-chart/helpers/validatePadding.js

@@ -0,0 +1,7 @@
+const a = (n) => {
+  const r = n.split(" ").filter((e) => e !== ""), t = r.map((e) => Number(e));
+  return t.length < 1 || t.length > 4 ? !1 : r.every((e) => /^\d+(\.\d+)?$/.test(e)) && t.every((e) => e >= 0);
+};
+export {
+  a as default
+};

package/dist/es/components/trend-chart/index.js

@@ -0,0 +1,8 @@
+import r from "./components/TrendChart.js";
+import { generateComponent as t } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as e } from "../../_utils/config.js";
+const a = t(e("TrendChart"), r);
+export {
+  a as TrendChart,
+  a as default
+};

package/dist/es/components/trend-chart/props.js

@@ -0,0 +1,160 @@
+import { definePropType as e } from "../../_utils/vue-eco.js";
+import r from "./helpers/validatePadding.js";
+const l = {
+  // 数据集
+  dataset: {
+    required: !0,
+    type: e(Array),
+    default: () => []
+  },
+  status: {
+    type: e(String),
+    default: void 0
+  },
+  // 网格属性
+  grid: {
+    default: null,
+    type: e(Object)
+  },
+  // 标签属性
+  labels: {
+    default: null,
+    type: e(Object)
+  },
+  // 最大值，默认数据集最大值
+  max: {
+    type: Number
+  },
+  // 最小值，默认数据集最小值
+  min: {
+    type: Number
+  },
+  // 绘制边距
+  padding: {
+    default: "5",
+    type: String,
+    validator(t) {
+      return r(t);
+    }
+  },
+  // 开启交互，开启后启用onmousemove事件
+  interactive: {
+    default: !1,
+    type: Boolean
+  },
+  // 主题
+  theme: {
+    type: e(Object),
+    default: () => ({})
+  }
+}, d = {
+  boundary: {
+    required: !0,
+    type: e(Object),
+    default: () => {
+    }
+  },
+  minValue: {
+    required: !0,
+    type: Number
+  },
+  maxValue: {
+    required: !0,
+    type: Number
+  },
+  maxAmount: {
+    required: !0,
+    type: Number
+  },
+  activeLineParams: {
+    type: e(Object)
+  },
+  data: {
+    required: !0,
+    type: e(Array),
+    default: () => []
+  },
+  className: {
+    type: String
+  },
+  // 平滑
+  smooth: {
+    default: !0,
+    type: Boolean
+  },
+  stroke: {
+    default: !0,
+    type: Boolean
+  },
+  // 填充
+  fill: {
+    default: !0,
+    type: Boolean
+  },
+  // 鼠标
+  showPoints: {
+    default: !0,
+    type: Boolean
+  },
+  theme: {
+    type: e(Object)
+  },
+  mainTheme: {
+    type: e(Object)
+  }
+}, o = {
+  boundary: {
+    required: !0,
+    type: e(Object),
+    default: () => {
+    }
+  },
+  verticalLines: {
+    default: !1,
+    type: Boolean
+  },
+  verticalLinesNumber: {
+    default: 0,
+    type: Number
+  },
+  horizontalLines: {
+    default: !1,
+    type: Boolean
+  },
+  horizontalLinesNumber: {
+    default: 0,
+    type: Number
+  }
+}, i = {
+  boundary: {
+    required: !0,
+    type: e(Object),
+    default: () => {
+    }
+  },
+  minValue: {
+    type: Number,
+    required: !0
+  },
+  maxValue: {
+    type: Number,
+    required: !0
+  },
+  xLabels: {
+    type: Array
+  },
+  yLabels: {
+    type: Number,
+    required: !0
+  },
+  yLabelsTextFormatter: {
+    default: (t) => t,
+    type: Function
+  }
+};
+export {
+  d as trendChartCurveProps,
+  o as trendChartGridProps,
+  i as trendChartLabelsProps,
+  l as trendChartProps
+};

package/dist/es/components/trend-chart/themes.js

@@ -0,0 +1,146 @@
+const o = "var(--x-color-danger-solid)", r = "var(--x-color-strong-solid)", i = "var(--x-color-warning-solid)", c = "var(--x-color-text-secondary)", t = "var(--x-color-success-solid)", l = "var(--x-color-primary-solid)", a = "var(--x-color-border-subtle)", s = {
+  DANGER: {
+    // 主题色
+    color: o,
+    // 点
+    point: {
+      width: 3,
+      color: o
+    },
+    // 描边
+    stroke: {
+      width: 3,
+      color: o,
+      opacity: 0.8
+    },
+    // 填充
+    fill: {
+      color: o,
+      opacity: 0.1
+    },
+    axisLine: {
+      color: o,
+      width: 2,
+      opacity: 0.9
+    }
+  },
+  STRONG: {
+    // 主题色
+    color: r,
+    // 点
+    point: {
+      width: 4,
+      color: r
+    },
+    stroke: {
+      width: 3,
+      color: r,
+      opacity: 0.8
+    },
+    fill: {
+      color: r,
+      opacity: 0.1
+    },
+    axisLine: {
+      color: r,
+      width: 2,
+      opacity: 0.9
+    }
+  },
+  WARNING: {
+    // 主题色
+    color: i,
+    // 点
+    point: {
+      width: 4,
+      color: i
+    },
+    stroke: {
+      width: 3,
+      color: i,
+      opacity: 1
+    },
+    fill: {
+      color: i,
+      opacity: 0.1
+    },
+    axisLine: {
+      color: i,
+      width: 2,
+      opacity: 0.9
+    }
+  },
+  SUCCESS: {
+    // 主题色
+    color: t,
+    // 点
+    point: {
+      width: 4,
+      color: t
+    },
+    stroke: {
+      width: 3,
+      color: t,
+      opacity: 1
+    },
+    fill: {
+      color: t,
+      opacity: 0.1
+    },
+    axisLine: {
+      color: t,
+      width: 2,
+      opacity: 0.9
+    }
+  },
+  INFO: {
+    // 主题色
+    color: c,
+    // 点
+    point: {
+      width: 4,
+      color: c
+    },
+    stroke: {
+      width: 3,
+      color: c,
+      opacity: 1
+    },
+    fill: {
+      color: c,
+      opacity: 0.1
+    },
+    axisLine: {
+      color: c,
+      width: 2,
+      opacity: 0.9
+    }
+  },
+  PRIMARY: {
+    // 主题色
+    color: l,
+    // 点
+    point: {
+      width: 4,
+      color: l
+    },
+    stroke: {
+      width: 3,
+      color: l,
+      opacity: 0.9
+    },
+    fill: {
+      color: l,
+      opacity: 0.1
+    },
+    axisLine: {
+      color: l,
+      width: 2,
+      opacity: 0.9
+    }
+  }
+};
+export {
+  a as TrendChartAxisColor,
+  s as TrendChartTheme
+};