onesight-charts 0.0.1

package/lib/components/line/tooltipConfig.js

@@ -0,0 +1,144 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/line/tooltipConfig.js
+var tooltipConfig_exports = {};
+__export(tooltipConfig_exports, {
+  createCustomTooltip: () => createCustomTooltip
+});
+module.exports = __toCommonJS(tooltipConfig_exports);
+var import_chartUtils = require("../../utils/chartUtils");
+var createCustomTooltip = ({
+  id,
+  tooltipClassName,
+  myChart,
+  seriesData,
+  tooltipTotalName,
+  showRate,
+  tooltipPosition
+}) => ({
+  className: `onesight-line-tooltip ${tooltipClassName} ${id}`,
+  trigger: "axis",
+  enterable: true,
+  axisPointer: {
+    z: 1,
+    show: true,
+    type: "line",
+    lineStyle: {
+      color: "rgba(0, 0, 0, 0.24)",
+      type: "solid",
+      width: 2
+    }
+  },
+  padding: 0,
+  // showContent: true,
+  // alwaysShowContent: true,
+  // hideDelay: 1000000000,
+  position: tooltipPosition ? (point, params) => {
+    const pixelPoint = myChart.convertToPixel(
+      { seriesIndex: params[0].seriesIndex },
+      [params[0].dataIndex, params[0].value]
+    );
+    const element = document.querySelector(`.${id}`);
+    let yValue = 0;
+    let currentWidth = 0;
+    if (element) {
+      if (element.offsetHeight) {
+        yValue = -element.offsetHeight + 14;
+      }
+      if (element.offsetWidth) {
+        currentWidth = element.offsetWidth;
+      }
+    }
+    const x = (0, import_chartUtils.computePos)(pixelPoint[0], currentWidth);
+    return [x, yValue];
+  } : void 0,
+  formatter: (res) => {
+    if (!res.some((i) => i.value !== void 0 && i.value !== null)) {
+      return "";
+    }
+    let total = 0;
+    let dataArr = [...res];
+    res.forEach((v) => {
+      total += v.value || 0;
+    });
+    const resNameArr = res.map((item) => item.seriesName);
+    const resColorArr = res.map((item) => item.color);
+    const allName = Object.keys(seriesData);
+    const currentName = allName.filter((item) => resNameArr.includes(item));
+    dataArr = currentName.map((item, index) => {
+      let dataIndex = res[0].dataIndex;
+      let num = seriesData[item][dataIndex];
+      return {
+        color: resColorArr[index],
+        seriesName: item,
+        value: num,
+        proportion: num / total,
+        date: res[0].axisValue
+      };
+    });
+    let marginRight = 7;
+    if (dataArr.length > 4) {
+      marginRight = 3;
+    }
+    return `
+              <div class='tooltip-wrap'>
+                <div class='tooltip-head'>
+                    ${res[0].axisValue}
+                </div>
+                <div class='tooltip-body' style="margin-right:${marginRight}px">
+                    ${dataArr.length > 1 ? `
+                        <div class='total'>
+                        <div class='l'>
+                            ${tooltipTotalName}
+                        </div>
+                        <div class='r'>
+                            ${(0, import_chartUtils.changeDataTypeEn)(total)}
+                        </div>
+                        </div>
+                    ` : ""}
+                    ${dataArr.map(
+      (item) => `
+                    <div class='item' key='${item.seriesName}'>
+                        <div class='l'>
+                        <span class='l-color' style="background-color:${item.color}"></span>
+                        <span>
+                            ${item.seriesName}
+                        </span>
+                        </div>
+                        <div class='r'>
+                        ${dataArr.length > 1 && showRate ? `<span class='rate'>(${(0, import_chartUtils.computeFloatNull)(
+        item.proportion
+      )})</span>` : ""}
+                        <span class='num'>
+                            ${(0, import_chartUtils.changeDataTypeEn)(item.value)}
+                        </span>
+                        </div>
+                    </div>
+                    `
+    ).join("")}
+                </div>
+                ${tooltipPosition ? '<div class="triangle-down"></div>' : ""}
+              </div>
+            `;
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createCustomTooltip
+});