onesight-charts 2.0.2 → 2.0.4

package/lib/components/gauge/index.js

@@ -0,0 +1,264 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/gauge/index.jsx
+var gauge_exports = {};
+__export(gauge_exports, {
+  default: () => gauge_default
+});
+module.exports = __toCommonJS(gauge_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_style = require("./style.scss");
+function Gauge(props) {
+  const {
+    width = "100%",
+    height = "100%",
+    /** 当前数值 */
+    value = 0,
+    /** 数值范围 */
+    min = -100,
+    max = 100,
+    /** 判定阈值：value > positiveThreshold -> 积极，< negativeThreshold -> 消极 */
+    positiveThreshold = 0,
+    negativeThreshold = 0,
+    /** 底部标签文案；不传时按情绪自动判定 */
+    label,
+    /** 是否展示底部标签 */
+    showTag = true,
+    /** 是否展示底部标签的信息图标 */
+    showInfo = true,
+    /** 自定义颜色 */
+    colors: colorProp,
+    /** 信息图标点击回调 */
+    onInfoClick,
+    /** tooltip 消息 和 showInfo 结合使用 */
+    tip = ""
+  } = props;
+  const colors = {
+    negative: "#EF7B7B",
+    positive: "#4CBFA6",
+    neutral: "#9CA3AF",
+    arcMiddle: "#ECECEC",
+    tick: "#D4D4D4",
+    pointer: "#D2D3D7",
+    ...colorProp || {}
+  };
+  const clamped = Math.max(min, Math.min(max, Number(value) || 0));
+  const pointerAngle = (clamped - min) / (max - min) * 180 - 90;
+  const mood = getMood(clamped, positiveThreshold, negativeThreshold, colors);
+  const displayLabel = label ?? mood.label;
+  const valueColor = clamped > 0 ? colors.positive : clamped < 0 ? colors.negative : colors.neutral;
+  const VB_W = 400;
+  const VB_H = 230;
+  const CX = 200;
+  const CY = 210;
+  const OUTER_R = 180;
+  const INNER_R = 152;
+  const EMOJI_R = (OUTER_R + INNER_R) / 2;
+  const pt = (r, deg) => {
+    const rad = deg * Math.PI / 180;
+    return { x: CX + r * Math.sin(rad), y: CY - r * Math.cos(rad) };
+  };
+  const so = pt(OUTER_R, -90);
+  const eo = pt(OUTER_R, 90);
+  const si = pt(INNER_R, -90);
+  const ei = pt(INNER_R, 90);
+  const arcPath = `M ${so.x} ${so.y} A ${OUTER_R} ${OUTER_R} 0 0 1 ${eo.x} ${eo.y} L ${ei.x} ${ei.y} A ${INNER_R} ${INNER_R} 0 0 0 ${si.x} ${si.y} Z`;
+  const TICK_COUNT = 31;
+  const EMOJI_ANGLES = [-60, 0, 60];
+  const ticks = [];
+  for (let i = 0; i < TICK_COUNT; i++) {
+    const angle = -90 + i * 180 / (TICK_COUNT - 1);
+    if (EMOJI_ANGLES.some((a) => Math.abs(angle - a) < 7))
+      continue;
+    const p1 = pt(INNER_R - 4, angle);
+    const p2 = pt(INNER_R - 14, angle);
+    ticks.push({ p1, p2, key: i });
+  }
+  const emojis = [
+    { angle: -60, mood: "sad" },
+    { angle: 0, mood: "neutral" },
+    { angle: 60, mood: "happy" }
+  ];
+  const label0Pos = pt(EMOJI_R - 28, 0);
+  const labelMinPos = pt(OUTER_R, -90);
+  const labelMaxPos = pt(OUTER_R, 90);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "onesight-gauge", style: { width, height } }, /* @__PURE__ */ import_react.default.createElement("div", { className: "onesight-gauge__inner" }, /* @__PURE__ */ import_react.default.createElement(
+    "svg",
+    {
+      viewBox: `0 0 ${VB_W} ${VB_H}`,
+      preserveAspectRatio: "xMidYMid meet",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "onesight-gauge__svg"
+    },
+    /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: "onesight-gauge-arc", x1: "0", y1: "0", x2: "1", y2: "0" }, /* @__PURE__ */ import_react.default.createElement("stop", { offset: "0%", stopColor: colors.negative }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "18%", stopColor: colors.negative }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "38%", stopColor: "#F5C7C7" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "50%", stopColor: colors.arcMiddle }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "62%", stopColor: "#BFE3D8" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "82%", stopColor: colors.positive }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "100%", stopColor: colors.positive }))),
+    /* @__PURE__ */ import_react.default.createElement("path", { d: arcPath, fill: "url(#onesight-gauge-arc)" }),
+    ticks.map((t) => /* @__PURE__ */ import_react.default.createElement(
+      "line",
+      {
+        key: t.key,
+        x1: t.p1.x,
+        y1: t.p1.y,
+        x2: t.p2.x,
+        y2: t.p2.y,
+        stroke: colors.tick,
+        strokeWidth: 1.5,
+        strokeLinecap: "round"
+      }
+    )),
+    emojis.map((e) => {
+      const c = pt(EMOJI_R, e.angle);
+      return /* @__PURE__ */ import_react.default.createElement(
+        MoodFace,
+        {
+          key: e.mood,
+          mood: e.mood,
+          size: 18,
+          color: "#ffffff",
+          x: c.x - 10,
+          y: c.y - 10
+        }
+      );
+    }),
+    /* @__PURE__ */ import_react.default.createElement(
+      "text",
+      {
+        x: 72,
+        y: 214,
+        fill: colors.negative,
+        fontSize: "14",
+        fontWeight: "500",
+        textAnchor: "middle"
+      },
+      min
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      "text",
+      {
+        x: CX,
+        y: label0Pos.y,
+        fill: "#666",
+        fontSize: "14",
+        textAnchor: "middle"
+      },
+      "0"
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      "text",
+      {
+        x: 322,
+        y: 214,
+        fill: colors.positive,
+        fontSize: "14",
+        fontWeight: "500",
+        textAnchor: "middle"
+      },
+      max
+    ),
+    /* @__PURE__ */ import_react.default.createElement("g", { transform: `rotate(${pointerAngle} ${CX} ${CY})` }, /* @__PURE__ */ import_react.default.createElement(
+      "path",
+      {
+        d: `M ${CX - 4} ${CY - 79} A 4 4 0 0 1 ${CX + 4} ${CY - 79} L ${CX + 11} ${CY} L ${CX - 11} ${CY} Z`,
+        fill: colors.pointer
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("circle", { cx: 200, cy: 208, r: 11, fill: colors.pointer }), /* @__PURE__ */ import_react.default.createElement("circle", { cx: CX, cy: 208, r: 5.5, fill: "#ffffff" }))
+  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "onesight-gauge__value", style: { color: valueColor } }, clamped), showTag && /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "onesight-gauge__tag",
+      style: {
+        borderColor: mood.color,
+        color: mood.color,
+        backgroundColor: withAlpha(mood.color, 0.08)
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("span", { className: "onesight-gauge__tag-icon" }, /* @__PURE__ */ import_react.default.createElement(MoodFace, { mood: mood.face, size: 16 })),
+    /* @__PURE__ */ import_react.default.createElement("span", { className: "onesight-gauge__tag-label" }, displayLabel),
+    showInfo && /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: tip }, /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: "onesight-gauge__tag-info",
+        onClick: onInfoClick,
+        role: onInfoClick ? "button" : void 0
+      },
+      /* @__PURE__ */ import_react.default.createElement(InfoIcon, { color: mood.color })
+    ))
+  )));
+}
+var MOOD_FACE_CONFIG = {
+  happy: {
+    fill: "#1DA9A0",
+    d: "M7,0 C10.8654,0 14,3.1339 14,7 C14,10.8661 10.8654,14 7,14 C3.1346,14 0,10.8661 0,7 C0,3.1339 3.1346,0 7,0 Z M9.8875,8.52684 L4.1125,8.52684 C3.8094,8.52684 3.577,8.81594 3.6603,9.10714 C4.0453,10.44414 5.3928,11.43254 7,11.43254 C8.6072,11.43254 9.9547,10.44414 10.3397,9.10714 C10.423,8.81594 10.1906,8.52684 9.8875,8.52684 Z M4.59606,4.67124 C4.11866,4.67124 3.73086,5.05764 3.73086,5.53574 C3.73086,6.01314 4.11866,6.40024 4.59606,6.40024 C5.07346,6.40024 5.46056,6.01314 5.46056,5.53574 C5.46056,5.05764 5.07346,4.67124 4.59606,4.67124 Z M9.40443,4.67124 C8.92633,4.67124 8.53923,5.05764 8.53923,5.53574 C8.53923,6.01314 8.92633,6.40024 9.40443,6.40024 C9.88113,6.40024 10.26893,6.01314 10.26893,5.53574 C10.26893,5.05764 9.88113,4.67124 9.40443,4.67124 Z"
+  },
+  sad: {
+    fill: "#EE6666",
+    d: "M7,0 C10.8661,0 14,3.1339 14,7 C14,10.8661 10.8661,14 7,14 C3.1346,14 0,10.8661 0,7 C0,3.1339 3.1346,0 7,0 Z M7.82369,8.19399 C6.32919,7.88249 4.76749,8.45789 3.83439,9.65839 C3.66849,9.87189 3.70699,10.17989 3.92049,10.34649 C4.13469,10.51169 4.44199,10.47459 4.60789,10.25969 C5.31349,9.35249 6.49789,8.91779 7.62279,9.15299 C8.32279,9.29929 8.95069,9.69199 9.39169,10.25969 C9.48829,10.38429 9.63319,10.4494007 9.77949,10.4494007 C9.88379,10.4494007 9.99019,10.41579 10.07979,10.34649 C10.29259,10.17989 10.33179,9.87259 10.16589,9.65839 C9.58209,8.90729 8.74979,8.38719 7.82369,8.19399 Z M4.59669,4.67124 C4.11859,4.67124 3.73149,5.05764 3.73149,5.53574 C3.73149,6.01314 4.11859,6.40024 4.59669,6.40024 C5.07339,6.40024 5.46119,6.01314 5.46119,5.53574 C5.46119,5.05764 5.07339,4.67124 4.59669,4.67124 Z M9.40443,4.67124 C8.92633,4.67124 8.53923,5.05764 8.53923,5.53574 C8.53923,6.01314 8.92633,6.40024 9.40443,6.40024 C9.88113,6.40024 10.26893,6.01314 10.26893,5.53574 C10.26893,5.05764 9.88113,4.67124 9.40443,4.67124 Z"
+  },
+  neutral: {
+    fill: "#CCCCCC",
+    d: "M7,0 C10.8661,0 14,3.1339 14,7 C14,10.8661 10.8661,14 7,14 C3.1346,14 0,10.8661 0,7 C0,3.1339 3.1346,0 7,0 Z M9.17728,9.41962 L4.82328,9.41962 C4.51458,9.41962 4.26328,9.67022 4.26328,9.97962 C4.26328,10.28902 4.51458,10.53962 4.82328,10.53962 L9.17728,10.53962 C9.48598,10.53962 9.73728,10.28902 9.73728,9.97962 C9.73728,9.67022 9.48598,9.41962 9.17728,9.41962 Z M4.59676,4.67124 C4.11866,4.67124 3.73156,5.05764 3.73156,5.53574 C3.73156,6.01314 4.11866,6.40024 4.59676,6.40024 C5.07416,6.40024 5.46126,6.01314 5.46126,5.53574 C5.46126,5.05764 5.07416,4.67124 4.59676,4.67124 Z M9.40443,4.67124 C8.92633,4.67124 8.53923,5.05764 8.53923,5.53574 C8.53923,6.01314 8.92633,6.40024 9.40443,6.40024 C9.88183,6.40024 10.26893,6.01314 10.26893,5.53574 C10.26893,5.05764 9.88183,4.67124 9.40443,4.67124 Z"
+  }
+};
+function MoodFace({ mood, size = 16, color, x, y }) {
+  const cfg = MOOD_FACE_CONFIG[mood] || MOOD_FACE_CONFIG.neutral;
+  const fill = color || cfg.fill;
+  const svgProps = {
+    width: size,
+    height: size,
+    viewBox: "0 0 14 14",
+    "aria-hidden": true
+  };
+  if (x !== void 0)
+    svgProps.x = x;
+  if (y !== void 0)
+    svgProps.y = y;
+  return /* @__PURE__ */ import_react.default.createElement("svg", { ...svgProps }, /* @__PURE__ */ import_react.default.createElement("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ import_react.default.createElement("g", { fill }, /* @__PURE__ */ import_react.default.createElement("path", { d: cfg.d }))));
+}
+function InfoIcon({ color }) {
+  return /* @__PURE__ */ import_react.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", "aria-hidden": "true" }, /* @__PURE__ */ import_react.default.createElement("circle", { cx: "7", cy: "7", r: "6", stroke: color, strokeWidth: "1.1", fill: "none" }), /* @__PURE__ */ import_react.default.createElement("circle", { cx: "7", cy: "4.3", r: "0.9", fill: color }), /* @__PURE__ */ import_react.default.createElement("line", { x1: "7", y1: "6.4", x2: "7", y2: "10.2", stroke: color, strokeWidth: "1.2", strokeLinecap: "round" }));
+}
+function getMood(v, posT, negT, colors) {
+  if (v > posT)
+    return { label: "积极", color: colors.positive, face: "happy" };
+  if (v < negT)
+    return { label: "消极", color: colors.negative, face: "sad" };
+  return { label: "中性", color: colors.neutral, face: "neutral" };
+}
+function withAlpha(hex, alpha) {
+  let h = String(hex || "").replace("#", "");
+  if (h.length === 3)
+    h = h.split("").map((c) => c + c).join("");
+  if (h.length !== 6)
+    return hex;
+  const r = parseInt(h.substring(0, 2), 16);
+  const g = parseInt(h.substring(2, 4), 16);
+  const b = parseInt(h.substring(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+var gauge_default = Gauge;

package/lib/components/gauge/style.scss

@@ -0,0 +1,67 @@
+.onesight-gauge {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &__inner {
+    width: 100%;
+    max-width: 640px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__svg {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  &__value {
+    margin-top: 4px;
+    font-size: 28px;
+    font-weight: 700;
+    line-height: 1;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  }
+
+  &__tag {
+    margin-top: 12px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 10px 3px 4px;
+    border: 1px solid;
+    border-radius: 999px;
+    font-size: 13px;
+    line-height: 1;
+
+    &-icon {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    &-label {
+      font-weight: 500;
+    }
+
+    &-info {
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+      opacity: 0.85;
+      transition: opacity 0.2s;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}

package/lib/components/vertical-stacked-bar/index.js

@@ -865,6 +865,31 @@ function VerticalStackedBar(props) {
         dataIndex: event.dataIndex
       });
       currentIndex = event.dataIndex;
+      setTimeout(() => {
+        const chartDom = myChart.getDom();
+        const parentElement = (chartDom == null ? void 0 : chartDom.parentElement) || chartDom;
+        const tooltipEl = parentElement == null ? void 0 : parentElement.querySelector(
+          `.${tooltipClassNameRef.current}`
+        );
+        if (tooltipEl && !tooltipEl.dataset.axisPointerBound) {
+          tooltipEl.addEventListener("mouseenter", () => {
+            toggleAxisPointer(myChart, false);
+          });
+          tooltipEl.addEventListener("mouseleave", () => {
+            toggleAxisPointer(myChart, false);
+            myChart.dispatchAction({ type: "hideTip" });
+            myChart.dispatchAction({
+              type: "downplay",
+              dataIndex: currentIndex
+            });
+          });
+          tooltipEl.dataset.axisPointerBound = "true";
+        }
+      }, 0);
+    });
+    myChart.off("hideTip");
+    myChart.on("hideTip", function() {
+      toggleAxisPointer(myChart, false);
     });
     myChart.setOption(option, true);
     if (showTotal) {

package/lib/index.js

@@ -32,6 +32,7 @@ __export(src_exports, {
   BrushLine: () => import_brush_line.default,
   CommonBar: () => import_common_bar.default,
   CustomLine: () => import_custom_line.default,
+  Gauge: () => import_gauge.default,
   Line: () => import_line.default,
   MapChart: () => import_map_chart.default,
   Pie: () => import_pie.default,
@@ -52,6 +53,7 @@ var import_pie = __toESM(require("./components/pie"));
 var import_radio_tabs = __toESM(require("./components/radio-tabs"));
 var import_stacked_bar = __toESM(require("./components/stacked-bar"));
 var import_standard_custom_line = __toESM(require("./components/standard-custom-line"));
+var import_gauge = __toESM(require("./components/gauge"));
 var import_standard_line = __toESM(require("./components/standard-line"));
 var import_vertical_stacked_bar = __toESM(require("./components/vertical-stacked-bar"));
 var import_word_cloud = __toESM(require("./components/word-cloud"));
@@ -60,6 +62,7 @@ var import_word_cloud = __toESM(require("./components/word-cloud"));
   BrushLine,
   CommonBar,
   CustomLine,
+  Gauge,
   Line,
   MapChart,
   Pie,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onesight-charts",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "private": false,
   "description": "OneSight前端图表公共组件库",
   "license": "MIT",