hfn-components 0.0.9 → 0.1.1

package/es/css/index.css

@@ -0,0 +1,59 @@
+.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;
+}

package/es/index.mjs

@@ -1,7 +1,9 @@
 import installer from './defaults.mjs';
 export { makeInstaller } from './make-installer.mjs';
 export { HtElTable } from './components/elTable/index.mjs';
-export { elTableProps } from './components/elTable/src/elTable.mjs';
+export { HtChart } from './components/chart/index.mjs';
+export { columnDealProps, elTableProps } from './components/elTable/src/elTable.mjs';
+export { chartProps } from './components/chart/src/HtChart.mjs';
 
 const install = installer.install;
 

package/es/utils/chart.d.ts

@@ -0,0 +1,7 @@
+import type { chartProp } from 'hfn-components/es/components/chart';
+export type chartType = 'category' | 'time';
+export declare const legendEnterOperate: (options: any, name: string) => void;
+export declare const legendLeaveOperate: (options: any) => void;
+export declare const setEchartXAxis: (options: any, type: chartType, xAxisData: string[]) => void;
+export declare const setEchartYAxis: (options: any) => void;
+export declare const setEchartTooltip: (options: any, props: chartProp) => void;

package/es/utils/chart.mjs

@@ -0,0 +1,163 @@
+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) => {
+  options.yAxis = {
+    type: "value",
+    axisLabel: {
+      show: true,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      formatter: function(val) {
+        return "" + val;
+      }
+    }
+  };
+};
+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) {
+              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].toFixed(2)}%\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

@@ -1,3 +1,3 @@
-import type { Plugin } from "vue";
+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/index.d.ts

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

package/es/utils/index.mjs

@@ -1,3 +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/tool.mjs

@@ -27,7 +27,7 @@ function splitK(num) {
   }
   for (const i in revNumArr) {
     tempArr.push(revNumArr[i]);
-    let index = parseFloat(i);
+    const index = parseFloat(i);
     if ((index + 1) % 3 === 0 && Number(i) !== revNumArr.length - 1) {
       tempArr.push(",");
     }

package/global.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hfn-components",
-  "version": "0.0.9",
+  "version": "0.1.1",
   "description": "",
   "main": "index.ts",
   "module": "es/index.mjs",
@@ -17,6 +17,8 @@
     "element-plus": "^2.7.7"
   },
   "peerDependencies": {
-    "vue": "^3.2.0"
+    "vue": "^3.2.0",
+    "echarts": "^5.5.1",
+    "lodash.clonedeep": "^4.5.0"
   }
 }

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;height:100%;justify-content:center;position:absolute;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;height:100%;justify-content:center;position:absolute;width:100%}

package/theme-chalk/src/chart.scss

@@ -0,0 +1,53 @@
+.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;
+}

package/theme-chalk/src/index.scss

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

package/es/components/button/HtButton.vue.d.ts

@@ -1,19 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    columns: ({
-        name: string;
-        dataIndex: string;
-        key: string;
-        title?: undefined;
-    } | {
-        title: string;
-        dataIndex: string;
-        key: string;
-        name?: undefined;
-    } | {
-        title: string;
-        key: string;
-        name?: undefined;
-        dataIndex?: undefined;
-    })[];
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-export default _default;

package/es/components/button/HtButton.vue.mjs

@@ -1,16 +0,0 @@
-import _sfc_main from './HtButton.vue2.mjs';
-import { openBlock, createElementBlock, toDisplayString } from 'vue';
-import _export_sfc from '../../_virtual/_plugin-vue_export-helper.mjs';
-
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock(
-    "button",
-    null,
-    "\u6D4B\u8BD5\u6309\u94AElibiluo" + toDisplayString($setup.columns[1].name),
-    1
-    /* TEXT */
-  );
-}
-var button = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/libiluo/Desktop/company/component-library/packages/components/button/HtButton.vue"]]);
-
-export { button as default };

package/es/components/button/HtButton.vue2.mjs

@@ -1,42 +0,0 @@
-import { defineComponent } from 'vue';
-
-var _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "HtButton"
-  },
-  __name: "HtButton",
-  setup(__props, { expose: __expose }) {
-    __expose();
-    const columns = [
-      {
-        name: "Name",
-        dataIndex: "name",
-        key: "name"
-      },
-      {
-        title: "Age",
-        dataIndex: "age",
-        key: "age"
-      },
-      {
-        title: "Address",
-        dataIndex: "address",
-        key: "address"
-      },
-      {
-        title: "Tags",
-        key: "tags",
-        dataIndex: "tags"
-      },
-      {
-        title: "Action",
-        key: "action"
-      }
-    ];
-    const __returned__ = { columns };
-    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
-    return __returned__;
-  }
-});
-
-export { _sfc_main as default };

package/es/components/button/index.d.ts

@@ -1,20 +0,0 @@
-export declare const HtButton: import("hfn-components/es/utils").SFCWithInstall<import("vue").DefineComponent<{}, {
-    columns: ({
-        name: string;
-        dataIndex: string;
-        key: string;
-        title?: undefined;
-    } | {
-        title: string;
-        dataIndex: string;
-        key: string;
-        name?: undefined;
-    } | {
-        title: string;
-        key: string;
-        name?: undefined;
-        dataIndex?: undefined;
-    })[];
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>> & Record<string, any>;
-export default HtButton;
-export type { ButtonInstance } from './instance';

package/es/components/button/index.mjs

@@ -1,6 +0,0 @@
-import button from './HtButton.vue.mjs';
-import { withInstall } from '../../utils/common.mjs';
-
-const HtButton = withInstall(button);
-
-export { HtButton, HtButton as default };

package/es/components/button/instance.d.ts

@@ -1,2 +0,0 @@
-import type HtButton from './HtButton.vue';
-export type ButtonInstance = InstanceType<typeof HtButton>;

package/es/components/button/instance.mjs

@@ -1 +0,0 @@
-

package/es/components/eleTable/src/eleTable.mjs

@@ -1 +0,0 @@
-

package/es/components/eleTable/src/eleTable.vue.mjs

@@ -1,10 +0,0 @@
-import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
-
-const _sfc_main = {};
-
-function _sfc_render(_ctx, _cache) {
-  return null
-}
-var eleTable = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',"/Users/libiluo/Desktop/company/component-library/packages/components/eleTable/src/eleTable.vue"]]);
-
-export { eleTable as default };