npm - onesight-charts - Versions diffs - 2.0.4 → 2.0.8 - Mend

onesight-charts 2.0.4 → 2.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md +0 -1
package/dist/onesight-charts.min.css +1 -1
package/dist/onesight-charts.min.js +1 -1
package/es/components/gauge/demo/base.js +25 -5
package/es/components/gauge/index.js +37 -35
package/es/components/gauge/style.scss +2 -2
package/lib/components/gauge/demo/base.js +17 -1
package/lib/components/gauge/index.js +20 -31
package/lib/components/gauge/style.scss +2 -2
package/package.json +1 -1

package/es/components/gauge/demo/base.js CHANGED Viewed

@@ -13,29 +13,49 @@ function App() {
       height: 322
     }
   }, /*#__PURE__*/React.createElement(Gauge, {
-    value: 12
+    value: 12,
+    tip: "积极-(12)"
   })), /*#__PURE__*/React.createElement("div", {
     style: {
       width: 360,
       height: 322
     }
   }, /*#__PURE__*/React.createElement(Gauge, {
-    value: -68
+    value: -68,
+    tip: "\u6D88\u6781-(-68)"
   })), /*#__PURE__*/React.createElement("div", {
     style: {
       width: 360,
       height: 322
     }
   }, /*#__PURE__*/React.createElement(Gauge, {
-    value: 85
+    value: 0,
+    showInfo: false
   })), /*#__PURE__*/React.createElement("div", {
     style: {
       width: 360,
       height: 322
     }
   }, /*#__PURE__*/React.createElement(Gauge, {
-    value: 0,
-    showInfo: false
+    value: 6 // -100 ~ 100
+    ,
+    min: -10,
+    max: 10,
+    label: "\u79EF\u6781" // 可选,不传时按阈值自动判定
+    ,
+    positiveThreshold: 0 // > 阈值 = 积极
+    ,
+    negativeThreshold: 0 // < 阈值 = 消极
+    ,
+    tip: "\u6D88\u6781-(6)",
+    showTag: true,
+    showInfo: true,
+    colors: {
+      negative: '#EF7B7B',
+      positive: '#4CBFA6',
+      neutral: '#9CA3AF'
+    },
+    onInfoClick: function onInfoClick() {}
   })));
 }
 export default App;

package/es/components/gauge/index.js CHANGED Viewed

@@ -14,6 +14,8 @@ import "./style.scss";
  * 用半环形仪表盘 + 指针 + 底部标签展示情绪/得分。
  */
 function Gauge(props) {
+  // 渐变定义需要在每个实例中唯一，避免同页多个仪表盘互相覆盖。
+  var gradientId = "onesight-gauge-arc-".concat(React.useId().replace(/:/g, ''));
   var _props$width = props.width,
     width = _props$width === void 0 ? '100%' : _props$width,
     _props$height = props.height,
@@ -41,11 +43,10 @@ function Gauge(props) {
     negative: '#EF7B7B',
     positive: '#4CBFA6',
     neutral: '#9CA3AF',
-    arcMiddle: '#ECECEC',
+    arcMiddle: '#E1E1E1',
     tick: '#D4D4D4',
     pointer: '#D2D3D7'
   }, colorProp || {});
   // 数值处理
   var clamped = Math.max(min, Math.min(max, Number(value) || 0));
   // 指针角度：min -> -90°，max -> +90°
@@ -64,7 +65,7 @@ function Gauge(props) {
   var CX = 200;
   var CY = 210;
   var OUTER_R = 180;
-  var INNER_R = 152;
+  var INNER_R = 148;
   var EMOJI_R = (OUTER_R + INNER_R) / 2;
   // 极坐标 -> 直角坐标（0° 指向正上，顺时针为正）
@@ -84,25 +85,29 @@ function Gauge(props) {
   var arcPath = "M ".concat(so.x, " ").concat(so.y, " ") + "A ".concat(OUTER_R, " ").concat(OUTER_R, " 0 0 1 ").concat(eo.x, " ").concat(eo.y, " ") + "L ".concat(ei.x, " ").concat(ei.y, " ") + "A ".concat(INNER_R, " ").concat(INNER_R, " 0 0 0 ").concat(si.x, " ").concat(si.y, " Z");
   // 刻度
-  var TICK_COUNT = 31;
-  var EMOJI_ANGLES = [-60, 0, 60];
+  var TICK_COUNT = 23;
+  var EMOJI_ANGLES = [-2, 0, 2];
   var ticks = [];
   var _loop = function _loop() {
-    var angle = -90 + i * 180 / (TICK_COUNT - 1);
-    // 表情附近让出空间
-    if (EMOJI_ANGLES.some(function (a) {
-      return Math.abs(angle - a) < 7;
-    })) return 1; // continue
-    var p1 = pt(INNER_R - 4, angle);
-    var p2 = pt(INNER_R - 14, angle);
-    ticks.push({
-      p1: p1,
-      p2: p2,
-      key: i
-    });
-  };
+      // 最大值和最小值位置不显示刻度线
+      if (i === 0 || i === TICK_COUNT - 1) return 0; // continue
+      var angle = -90 + i * 180 / (TICK_COUNT - 1);
+      // 表情附近让出空间
+      if (EMOJI_ANGLES.some(function (a) {
+        return Math.abs(angle - a) < 3;
+      })) return 0; // continue
+      var p1 = pt(INNER_R - 4, angle);
+      var p2 = pt(INNER_R - 10, angle);
+      ticks.push({
+        p1: p1,
+        p2: p2,
+        key: i
+      });
+    },
+    _ret;
   for (var i = 0; i < TICK_COUNT; i++) {
-    if (_loop()) continue;
+    _ret = _loop();
+    if (_ret === 0) continue;
   }
   // 三个表情位置
@@ -117,8 +122,6 @@ function Gauge(props) {
     mood: 'happy'
   }];
   var label0Pos = pt(EMOJI_R - 28, 0);
-  var labelMinPos = pt(OUTER_R, -90);
-  var labelMaxPos = pt(OUTER_R, 90);
   return /*#__PURE__*/React.createElement("div", {
     className: "onesight-gauge",
     style: {
@@ -133,7 +136,7 @@ function Gauge(props) {
     xmlns: "http://www.w3.org/2000/svg",
     className: "onesight-gauge__svg"
   }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
-    id: "onesight-gauge-arc",
+    id: gradientId,
     x1: "0",
     y1: "0",
     x2: "1",
@@ -146,13 +149,13 @@ function Gauge(props) {
     stopColor: colors.negative
   }), /*#__PURE__*/React.createElement("stop", {
     offset: "38%",
-    stopColor: "#F5C7C7"
+    stopColor: "#F5D7D7"
   }), /*#__PURE__*/React.createElement("stop", {
     offset: "50%",
     stopColor: colors.arcMiddle
   }), /*#__PURE__*/React.createElement("stop", {
     offset: "62%",
-    stopColor: "#BFE3D8"
+    stopColor: "#CAE3DB"
   }), /*#__PURE__*/React.createElement("stop", {
     offset: "82%",
     stopColor: colors.positive
@@ -161,7 +164,7 @@ function Gauge(props) {
     stopColor: colors.positive
   }))), /*#__PURE__*/React.createElement("path", {
     d: arcPath,
-    fill: "url(#onesight-gauge-arc)"
+    fill: "url(#".concat(gradientId, ")")
   }), ticks.map(function (t) {
     return /*#__PURE__*/React.createElement("line", {
       key: t.key,
@@ -185,10 +188,10 @@ function Gauge(props) {
     });
   }), /*#__PURE__*/React.createElement("text", {
     // x={labelMinPos.x + 16}
-    x: 72
+    x: 70
     // y={labelMinPos.y + 20}
     ,
-    y: 214,
+    y: 212,
     fill: colors.negative,
     fontSize: "14",
     fontWeight: "500",
@@ -200,8 +203,8 @@ function Gauge(props) {
     fontSize: "14",
     textAnchor: "middle"
   }, "0"), /*#__PURE__*/React.createElement("text", {
-    x: 322,
-    y: 214,
+    x: 334,
+    y: 212,
     fill: colors.positive,
     fontSize: "14",
     fontWeight: "500",
@@ -209,7 +212,7 @@ function Gauge(props) {
   }, max), /*#__PURE__*/React.createElement("g", {
     transform: "rotate(".concat(pointerAngle, " ").concat(CX, " ").concat(CY, ")")
   }, /*#__PURE__*/React.createElement("path", {
-    d: "M ".concat(CX - 4, " ").concat(CY - 79, " ") + "A 4 4 0 0 1 ".concat(CX + 4, " ").concat(CY - 79, " ") + "L ".concat(CX + 11, " ").concat(CY, " ") + "L ".concat(CX - 11, " ").concat(CY, " Z"),
+    d: "M ".concat(CX - 4, " ").concat(CY - 92, " ") + "A 4 4 0 0 1 ".concat(CX + 4, " ").concat(CY - 92, " ") + "L ".concat(CX + 11, " ").concat(CY, " ") + "L ".concat(CX - 11, " ").concat(CY, " Z"),
     fill: colors.pointer
   }), /*#__PURE__*/React.createElement("circle", {
     cx: 200,
@@ -219,7 +222,7 @@ function Gauge(props) {
   }), /*#__PURE__*/React.createElement("circle", {
     cx: CX,
     cy: 208,
-    r: 5.5,
+    r: 8,
     fill: "#ffffff"
   }))), /*#__PURE__*/React.createElement("div", {
     className: "onesight-gauge__value",
@@ -230,8 +233,7 @@ function Gauge(props) {
     className: "onesight-gauge__tag",
     style: {
       borderColor: mood.color,
-      color: mood.color,
-      backgroundColor: withAlpha(mood.color, 0.08)
+      color: mood.color
     }
   }, /*#__PURE__*/React.createElement("span", {
     className: "onesight-gauge__tag-icon"
@@ -241,13 +243,13 @@ function Gauge(props) {
   })), /*#__PURE__*/React.createElement("span", {
     className: "onesight-gauge__tag-label"
   }, displayLabel), showInfo && /*#__PURE__*/React.createElement(Tooltip, {
-    title: tip
+    title: tip ? tip : ''
   }, /*#__PURE__*/React.createElement("span", {
     className: "onesight-gauge__tag-info",
     onClick: onInfoClick,
     role: onInfoClick ? 'button' : undefined
   }, /*#__PURE__*/React.createElement(InfoIcon, {
-    color: mood.color
+    color: '#666666'
   }))))));
 }

package/es/components/gauge/style.scss CHANGED Viewed

@@ -20,7 +20,7 @@
   }
   &__value {
-    margin-top: 4px;
+    // margin-top: 4px;
     font-size: 28px;
     font-weight: 700;
     line-height: 1;
@@ -28,7 +28,7 @@
   }
   &__tag {
-    margin-top: 12px;
+    margin-top: 4px;
     display: inline-flex;
     align-items: center;
     gap: 6px;

package/lib/components/gauge/demo/base.js CHANGED Viewed

@@ -35,6 +35,22 @@ module.exports = __toCommonJS(base_exports);
 var import_react = __toESM(require("react"));
 var import__ = __toESM(require("../index"));
 function App() {
-  return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: 24, flexWrap: "wrap" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 360, height: 322 } }, /* @__PURE__ */ import_react.default.createElement(import__.default, { value: 12 })), /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 360, height: 322 } }, /* @__PURE__ */ import_react.default.createElement(import__.default, { value: -68 })), /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 360, height: 322 } }, /* @__PURE__ */ import_react.default.createElement(import__.default, { value: 85 })), /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 360, height: 322 } }, /* @__PURE__ */ import_react.default.createElement(import__.default, { value: 0, showInfo: false })));
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: 24, flexWrap: "wrap" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 360, height: 322 } }, /* @__PURE__ */ import_react.default.createElement(import__.default, { value: 12, tip: "积极-(12)" })), /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 360, height: 322 } }, /* @__PURE__ */ import_react.default.createElement(import__.default, { value: -68, tip: "消极-(-68)" })), /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 360, height: 322 } }, /* @__PURE__ */ import_react.default.createElement(import__.default, { value: 0, showInfo: false })), /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 360, height: 322 } }, /* @__PURE__ */ import_react.default.createElement(
+    import__.default,
+    {
+      value: 6,
+      min: -10,
+      max: 10,
+      label: "积极",
+      positiveThreshold: 0,
+      negativeThreshold: 0,
+      tip: "消极-(6)",
+      showTag: true,
+      showInfo: true,
+      colors: { negative: "#EF7B7B", positive: "#4CBFA6", neutral: "#9CA3AF" },
+      onInfoClick: () => {
+      }
+    }
+  )));
 }
 var base_default = App;

package/lib/components/gauge/index.js CHANGED Viewed

@@ -36,6 +36,7 @@ var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var import_style = require("./style.scss");
 function Gauge(props) {
+  const gradientId = `onesight-gauge-arc-${import_react.default.useId().replace(/:/g, "")}`;
   const {
     width = "100%",
     height = "100%",
@@ -64,7 +65,7 @@ function Gauge(props) {
     negative: "#EF7B7B",
     positive: "#4CBFA6",
     neutral: "#9CA3AF",
-    arcMiddle: "#ECECEC",
+    arcMiddle: "#E1E1E1",
     tick: "#D4D4D4",
     pointer: "#D2D3D7",
     ...colorProp || {}
@@ -79,7 +80,7 @@ function Gauge(props) {
   const CX = 200;
   const CY = 210;
   const OUTER_R = 180;
-  const INNER_R = 152;
+  const INNER_R = 148;
   const EMOJI_R = (OUTER_R + INNER_R) / 2;
   const pt = (r, deg) => {
     const rad = deg * Math.PI / 180;
@@ -90,15 +91,17 @@ function Gauge(props) {
   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 TICK_COUNT = 23;
+  const EMOJI_ANGLES = [-2, 0, 2];
   const ticks = [];
   for (let i = 0; i < TICK_COUNT; i++) {
+    if (i === 0 || i === TICK_COUNT - 1)
+      continue;
     const angle = -90 + i * 180 / (TICK_COUNT - 1);
-    if (EMOJI_ANGLES.some((a) => Math.abs(angle - a) < 7))
+    if (EMOJI_ANGLES.some((a) => Math.abs(angle - a) < 3))
       continue;
     const p1 = pt(INNER_R - 4, angle);
-    const p2 = pt(INNER_R - 14, angle);
+    const p2 = pt(INNER_R - 10, angle);
     ticks.push({ p1, p2, key: i });
   }
   const emojis = [
@@ -107,8 +110,6 @@ function Gauge(props) {
     { 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",
     {
@@ -117,8 +118,8 @@ function Gauge(props) {
       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)" }),
+    /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement("linearGradient", { id: gradientId, 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: "#F5D7D7" }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "50%", stopColor: colors.arcMiddle }), /* @__PURE__ */ import_react.default.createElement("stop", { offset: "62%", stopColor: "#CAE3DB" }), /* @__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(#${gradientId})` }),
     ticks.map((t) => /* @__PURE__ */ import_react.default.createElement(
       "line",
       {
@@ -149,8 +150,8 @@ function Gauge(props) {
     /* @__PURE__ */ import_react.default.createElement(
       "text",
       {
-        x: 72,
-        y: 214,
+        x: 70,
+        y: 212,
         fill: colors.negative,
         fontSize: "14",
         fontWeight: "500",
@@ -172,8 +173,8 @@ function Gauge(props) {
     /* @__PURE__ */ import_react.default.createElement(
       "text",
       {
-        x: 322,
-        y: 214,
+        x: 334,
+        y: 212,
         fill: colors.positive,
         fontSize: "14",
         fontWeight: "500",
@@ -184,30 +185,29 @@ function Gauge(props) {
     /* @__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`,
+        d: `M ${CX - 4} ${CY - 92} A 4 4 0 0 1 ${CX + 4} ${CY - 92} 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("circle", { cx: 200, cy: 208, r: 11, fill: colors.pointer }), /* @__PURE__ */ import_react.default.createElement("circle", { cx: CX, cy: 208, r: 8, 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)
+        color: mood.color
       }
     },
     /* @__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(
+    showInfo && /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: tip ? 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 })
+      /* @__PURE__ */ import_react.default.createElement(InfoIcon, { color: "#666666" })
     ))
   )));
 }
@@ -250,15 +250,4 @@ function getMood(v, posT, negT, colors) {
     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 CHANGED Viewed

@@ -20,7 +20,7 @@
   }
   &__value {
-    margin-top: 4px;
+    // margin-top: 4px;
     font-size: 28px;
     font-weight: 700;
     line-height: 1;
@@ -28,7 +28,7 @@
   }
   &__tag {
-    margin-top: 12px;
+    margin-top: 4px;
     display: inline-flex;
     align-items: center;
     gap: 6px;

package/package.json CHANGED Viewed

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