hfn-components 0.2.7 → 0.2.8

package/es/utils/chart.mjs

@@ -0,0 +1,172 @@
+const legendEnterOperate = (options, name) => {
+  options.series.forEach((series) => {
+    if (series.name === name) {
+      if (series.type === "line") {
+        if (series.lineStyle) {
+          series.lineStyle.opacity = 1;
+        } else {
+          series.lineStyle = {
+            opacity: 1
+          };
+        }
+      } else if (series.type === "bar") {
+        if (series.itemStyle) {
+          series.itemStyle.opacity = 1;
+        } else {
+          series.itemStyle = {
+            opacity: 1
+          };
+        }
+      }
+    } else {
+      if (series.type === "line") {
+        if (series.lineStyle) {
+          series.lineStyle.opacity = 0.1;
+        } else {
+          series.lineStyle = {
+            opacity: 0.1
+          };
+        }
+      } else if (series.type === "bar") {
+        if (series.itemStyle) {
+          series.itemStyle.opacity = 0.1;
+        } else {
+          series.itemStyle = {
+            opacity: 0.1
+          };
+        }
+      }
+    }
+  });
+};
+const legendLeaveOperate = (options) => {
+  options.series.forEach((series) => {
+    if (series.type === "line") {
+      if (series.lineStyle) {
+        series.lineStyle.opacity = 1;
+      } else {
+        series.lineStyle = {
+          opacity: 1
+        };
+      }
+    } else if (series.type === "bar") {
+      if (series.itemStyle) {
+        series.itemStyle.opacity = 1;
+      } else {
+        series.itemStyle = {
+          opacity: 1
+        };
+      }
+    }
+  });
+};
+const setEchartXAxis = (options, type, xAxisData) => {
+  if (type === "category") {
+    const xAxis = [...xAxisData];
+    options.xAxis = {
+      type,
+      data: xAxis,
+      axisTick: {
+        alignWithLabel: true
+      }
+    };
+  } else if (type === "time") {
+    options.xAxis = {
+      type,
+      minInterval: 24 * 60 * 60 * 1e3,
+      axisLine: {
+        onZero: false
+      }
+    };
+  }
+};
+const setEchartYAxis = (options, props) => {
+  options.yAxis = {
+    type: "value",
+    axisLabel: {
+      show: true,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      formatter: function(val) {
+        return (props.yAxisUnit === "%" ? val > 0 ? "+" : "" : "") + parseFloat(val.toFixed(props.floatNumber)) + props.yAxisUnit;
+      }
+    }
+  };
+};
+const setEchartTooltip = (options, props) => {
+  options.tooltip = {
+    trigger: "axis",
+    // tooltip提示框格式自定义
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    formatter: function(paramItems) {
+      let html = "";
+      if (Array.isArray(paramItems)) {
+        const params = paramItems.filter((item) => item.data !== void 0 && item.data !== null);
+        if (params.length === 0) return "";
+        if (props.chartType === "category") {
+          params.sort((a, b) => b.value - a.value);
+        } else {
+          params.sort((a, b) => {
+            if (Array.isArray(a.value) && Array.isArray(b.value)) {
+              return props.collation === "des" ? b.value[1] - a.value[1] : a.value[1] - b.value[1];
+            } else {
+              return 0;
+            }
+          });
+        }
+        html += `<div>${props.chartType === "category" ? params[0].name : Array.isArray(params[0].value) ? params[0].value[0] : ""}</div>`;
+        if (params.length > 30) html += '<div style="display: flex;">';
+        const len = Math.ceil(params.length / 3);
+        for (let i = 0; i < params.length; i++) {
+          if ((i + 1) % len === 1 && params.length > 30) {
+            html += '<div style="display: flex; flex-direction: column;">';
+          }
+          if (params[i].value === void 0 || params[i].value === null) ; else {
+            html += '<div style="display: flex;align-items:center">';
+            html += `<span 
+                        style="display:inline-block;
+                              margin-right:5px;
+                              border-radius:10px;
+                              width:10px;height:10px;
+                              background-color:${params[i].color};
+                              ">
+                      </span>`;
+            if (props.isReturn) {
+              if (
+                // params[i].seriesId === 'excess' ||
+                params[i].seriesName === "\u7D2F\u8BA1\u8D85\u989D"
+              ) {
+                html += `<span style='color:${params[i].color}'>
+                        ${params[i].seriesName}</span>\uFF1A${params[i].value[1].toFixed(2)}%
+                      `;
+              } else {
+                html += `<span style='color:${params[i].color}'>${params[i].seriesName}</span>\uFF1A${params[i].value[2]?.toFixed(props.floatNumber)}\uFF08${params[i].value[1] > 0 ? "+" : ""}${params[i].value[1]}%\uFF09`;
+              }
+            } else {
+              if (props.chartType === "category") {
+                html += `<span style='color:${params[i].color}'>
+                      ${params[i].seriesName.includes("series") ? params[i].name : params[i].seriesName}
+                      </span>\uFF1A
+                      ${params[i].value.toFixed(props.floatNumber)}${props.tooltipUnit}
+                      `;
+              } else {
+                html += `<span style='color:${params[i].color}'>${params[i].seriesName}</span>\uFF1A${params[i].value[1]?.toFixed(props.floatNumber)}${props.tooltipUnit}`;
+              }
+            }
+            html += "</div>";
+          }
+          if ((i + 1) % len === 0 && params.length > 30) {
+            html += "</div>";
+          }
+        }
+        if (params.length > 30) html += "</div>";
+      }
+      return html;
+    },
+    textStyle: {
+      color: "rgba(0,0,0,0.7)"
+      // 设置文字颜色
+    }
+  };
+};
+
+export { legendEnterOperate, legendLeaveOperate, setEchartTooltip, setEchartXAxis, setEchartYAxis };

package/es/utils/common.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from 'vue';
+export type SFCWithInstall<T> = T & Plugin;
+export declare const withInstall: <T, E extends Record<string, any>>(main: T, extra?: E) => SFCWithInstall<T> & E;

package/es/utils/common.mjs

@@ -0,0 +1,15 @@
+const withInstall = (main, extra) => {
+  main.install = (app) => {
+    for (const comp of [main, ...Object.values(extra ?? {})]) {
+      app.component(comp.name, comp);
+    }
+  };
+  if (extra) {
+    for (const [key, comp] of Object.entries(extra)) {
+      main[key] = comp;
+    }
+  }
+  return main;
+};
+
+export { withInstall };

package/es/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './common';
+export * from './table';
+export * from './tool';
+export * from './chart';

package/es/utils/index.mjs

@@ -0,0 +1,4 @@
+export { withInstall } from './common.mjs';
+export { handleData, handleText } from './table.mjs';
+export { dataHandle, splitK } from './tool.mjs';
+export { legendEnterOperate, legendLeaveOperate, setEchartTooltip, setEchartXAxis, setEchartYAxis } from './chart.mjs';

package/es/utils/table.d.ts

@@ -0,0 +1,2 @@
+export declare const handleData: (value: any, type: string) => string | number;
+export declare const handleText: (value: any, type: string) => any;

package/es/utils/table.mjs

@@ -0,0 +1,31 @@
+import { splitK } from './tool.mjs';
+
+const handleData = (value, type) => {
+  if (isNaN(parseFloat(value))) return "-";
+  let val = parseFloat(value);
+  if (type.includes("percent")) {
+    val = val * 100;
+  }
+  const floatMatch = type.match(/float(\d+)/);
+  if (floatMatch) {
+    const precision = Number(floatMatch[1]);
+    val = val.toFixed(precision);
+  }
+  if (type.includes("splitK")) {
+    val = splitK(val);
+  }
+  if (type.includes("sign")) {
+    val = Number(val) > 0 ? "+" + val : val;
+  }
+  if (type.includes("percent")) {
+    val = val + "%";
+  }
+  return val;
+};
+const handleText = (value, type) => {
+  if (type === "name") {
+    return value;
+  }
+};
+
+export { handleData, handleText };

package/es/utils/tool.d.ts

@@ -0,0 +1,2 @@
+export declare function dataHandle(val: any, isPer: boolean, floatNum: number): any;
+export declare function splitK(num: string | number): string;

package/es/utils/tool.mjs

@@ -0,0 +1,42 @@
+function dataHandle(val, isPer, floatNum) {
+  val = parseFloat(val);
+  if (isNaN(val)) {
+    return "-";
+  } else {
+    if (isPer) {
+      val = val * 100;
+    }
+    if (Number(val.toFixed(floatNum)) === 0) {
+      const a = 0;
+      return a.toFixed(floatNum);
+    } else {
+      return val.toFixed(floatNum);
+    }
+  }
+}
+function splitK(num) {
+  let decimal = String(num).split(".")[1] || "";
+  if (decimal === "") {
+    decimal = "00";
+  }
+  const tempArr = [];
+  const revNumArr = String(num).split(".")[0].split("").reverse();
+  const mark = revNumArr[revNumArr.length - 1];
+  if (mark === "-") {
+    revNumArr.splice(-1, 1);
+  }
+  for (const i in revNumArr) {
+    tempArr.push(revNumArr[i]);
+    const index = parseFloat(i);
+    if ((index + 1) % 3 === 0 && Number(i) !== revNumArr.length - 1) {
+      tempArr.push(",");
+    }
+  }
+  if (mark === "-") {
+    tempArr.push(mark);
+  }
+  const zs = tempArr.reverse().join("");
+  return decimal ? zs + "." + decimal : zs;
+}
+
+export { dataHandle, splitK };

package/global.d.ts

@@ -0,0 +1,14 @@
+// declare module '*.vue' {
+//     import { defineComponent  } from 'vue'
+//     const componentOptions:ReturnType<typeof defineComponent>
+//     export default componentOptions
+// }
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    HtTable: (typeof import('hfn-components'))['HtTable']
+  }
+  interface ComponentCustomProperties {
+    // 你可以在这里添加自定义属性
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hfn-components",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "",
   "main": "index.ts",
   "module": "es/index.mjs",

package/theme-chalk/ht-chart.css

@@ -0,0 +1 @@
+.echart-box{display:flex;flex-direction:column;height:100%;position:relative;width:100%}.echart-content{flex:auto}.echart-lenged{box-sizing:border-box;display:flex;flex-wrap:wrap;font-size:12px;height:auto;margin-top:6px;padding-right:22px;position:relative;width:100%;z-index:999}.bg-span{height:2px;width:14px}.bg-span,.bg-span-bar{display:inline-block;margin-right:6px}.bg-span-bar{border-radius:2px;height:10px;width:16px}.span-box{cursor:pointer;margin-left:5px;margin-right:6px}.noData,.span-box{align-items:center;display:flex}.noData{bottom:0;color:#ccc;font-size:16px;justify-content:center;position:absolute}._100,.noData{height:100%;width:100%}

package/theme-chalk/index.css

@@ -0,0 +1 @@
+.echart-box{display:flex;flex-direction:column;height:100%;position:relative;width:100%}.echart-content{flex:auto}.echart-lenged{box-sizing:border-box;display:flex;flex-wrap:wrap;font-size:12px;height:auto;margin-top:6px;padding-right:22px;position:relative;width:100%;z-index:999}.bg-span{height:2px;width:14px}.bg-span,.bg-span-bar{display:inline-block;margin-right:6px}.bg-span-bar{border-radius:2px;height:10px;width:16px}.span-box{cursor:pointer;margin-left:5px;margin-right:6px}.noData,.span-box{align-items:center;display:flex}.noData{bottom:0;color:#ccc;font-size:16px;justify-content:center;position:absolute}._100,.noData{height:100%;width:100%}

package/theme-chalk/src/chart.scss

@@ -0,0 +1,58 @@
+.echart-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.echart-content {
+  flex: auto;
+}
+.echart-lenged {
+  width: 100%;
+  height: auto;
+  margin-top: 6px;
+  padding-right: 22px;
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 12px;
+  position: relative;
+  z-index: 999;
+}
+.bg-span {
+  display: inline-block;
+  width: 14px;
+  height: 2px;
+  margin-right: 6px;
+}
+.bg-span-bar {
+  display: inline-block;
+  width: 16px;
+  height: 10px;
+  border-radius: 2px;
+  margin-right: 6px;
+}
+.span-box {
+  margin-left: 5px;
+  margin-right: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+.noData {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  bottom: 0px;
+  color: #ccc;
+}
+
+._100 {
+  width: 100%;
+  height: 100%;
+}

package/theme-chalk/src/index.scss

@@ -0,0 +1 @@
+@use './chart.scss';

package/component.ts

@@ -1,13 +0,0 @@
-// import { HtTable } from '@hfn-components/components/table'
-import { HtElTable } from '@hfn-components/components/elTable'
-import { HtChart } from '@hfn-components/components/chart'
-import { HtPieChart } from '@hfn-components/components/pieChart'
-
-import type { Plugin } from 'vue'
-
-export default [
-  // HtTable,
-  HtChart,
-  HtElTable,
-  HtPieChart
-] as Plugin[]

package/defaults.ts

@@ -1,5 +0,0 @@
-import { makeInstaller } from './make-installer'
-import Components from './component'
-import Plugins from './plugin'
-
-export default makeInstaller([...Components, ...Plugins])

package/index.ts

@@ -1,6 +0,0 @@
-import installer from './defaults'
-export * from './make-installer'
-export * from '@hfn-components/components'
-
-export const install = installer.install
-export default installer

package/make-installer.ts

@@ -1,17 +0,0 @@
-import type { App, Plugin } from 'vue'
-import { INSTALLED_KEY } from '@hfn-components/constants'
-
-export const makeInstaller = (components: Plugin[] = []) => {
-  const install = (app: App) => {
-    if (app[INSTALLED_KEY]) return
-
-    app[INSTALLED_KEY] = true
-    components.forEach(c => app.use(c))
-
-    //   if (options) provideGlobalConfig(options, app, true)
-  }
-
-  return {
-    install
-  }
-}

package/plugin.ts

@@ -1 +0,0 @@
-export default []