hfn-components 0.1.0 → 0.1.2

package/dist/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/es/component.mjs

@@ -1,7 +1,9 @@
 import { HtElTable } from './components/elTable/index.mjs';
+import { HtChart } from './components/chart/index.mjs';
 
 var Components = [
   // HtTable,
+  HtChart,
   HtElTable
 ];
 

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

@@ -0,0 +1,151 @@
+export declare const HtChart: import("hfn-components/es/utils").SFCWithInstall<import("vue").DefineComponent<{
+    readonly chartData: {
+        readonly type: import("vue").PropType<any[]>;
+        readonly default: () => never[];
+    };
+    readonly chartId: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly chartType: {
+        readonly type: import("vue").PropType<import("hfn-components/es/utils").chartType>;
+        readonly default: "";
+    };
+    readonly xAxisData: {
+        readonly type: import("vue").PropType<string[]>;
+        readonly default: readonly [];
+    };
+    readonly collation: {
+        readonly type: StringConstructor;
+        readonly default: "des";
+    };
+    readonly isReturn: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly isPercent: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly floatNumber: {
+        readonly type: NumberConstructor;
+        readonly default: 4;
+    };
+    readonly titleText: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly tooltipUnit: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly watchResize: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly showLegend: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly downLoadAutn: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}, {
+    props: import("@vue/shared").LooseRequired<{
+        readonly chartData: any[];
+        readonly chartId: string;
+        readonly chartType: import("hfn-components/es/utils").chartType;
+        readonly xAxisData: string[];
+        readonly collation: string;
+        readonly isReturn: boolean;
+        readonly isPercent: boolean;
+        readonly floatNumber: number;
+        readonly titleText: string;
+        readonly tooltipUnit: string;
+        readonly watchResize: boolean;
+        readonly showLegend: boolean;
+        readonly downLoadAutn: boolean;
+    } & {}>;
+    myChart: import("vue").ShallowRef<any>;
+    isEmpty: import("vue").Ref<boolean>;
+    echartOptions: any;
+    drawGraph: () => void;
+    lengedDeal: () => void;
+    echartInit: () => void;
+    chartResize: () => void;
+    allLegend: import("vue").Ref<import("./src/HtChart.vue").Legend[]>;
+    noData: import("vue").Ref<boolean>;
+    legendStatus: (item: import("./src/HtChart.vue").Legend, index: number) => void;
+    legendEnter: (index: number) => void;
+    legendLeave: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly chartData: {
+        readonly type: import("vue").PropType<any[]>;
+        readonly default: () => never[];
+    };
+    readonly chartId: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly chartType: {
+        readonly type: import("vue").PropType<import("hfn-components/es/utils").chartType>;
+        readonly default: "";
+    };
+    readonly xAxisData: {
+        readonly type: import("vue").PropType<string[]>;
+        readonly default: readonly [];
+    };
+    readonly collation: {
+        readonly type: StringConstructor;
+        readonly default: "des";
+    };
+    readonly isReturn: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly isPercent: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly floatNumber: {
+        readonly type: NumberConstructor;
+        readonly default: 4;
+    };
+    readonly titleText: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly tooltipUnit: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly watchResize: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly showLegend: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly downLoadAutn: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>>, {
+    readonly chartData: any[];
+    readonly chartId: string;
+    readonly chartType: import("hfn-components/es/utils").chartType;
+    readonly xAxisData: string[];
+    readonly collation: string;
+    readonly isReturn: boolean;
+    readonly isPercent: boolean;
+    readonly floatNumber: number;
+    readonly titleText: string;
+    readonly tooltipUnit: string;
+    readonly watchResize: boolean;
+    readonly showLegend: boolean;
+    readonly downLoadAutn: boolean;
+}, {}>> & Record<string, any>;
+export default HtChart;
+export * from './src/HtChart';

package/es/components/chart/index.mjs

@@ -0,0 +1,7 @@
+import chart from './src/HtChart.vue.mjs';
+import { withInstall } from '../../utils/common.mjs';
+export { chartProps } from './src/HtChart.mjs';
+
+const HtChart = withInstall(chart);
+
+export { HtChart, HtChart as default };

package/es/components/chart/src/HtChart.d.ts

@@ -0,0 +1,57 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import type { chartType } from 'hfn-components/es/utils';
+export declare const chartProps: {
+    readonly chartData: {
+        readonly type: PropType<any[]>;
+        readonly default: () => never[];
+    };
+    readonly chartId: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly chartType: {
+        readonly type: PropType<chartType>;
+        readonly default: "";
+    };
+    readonly xAxisData: {
+        readonly type: PropType<string[]>;
+        readonly default: readonly [];
+    };
+    readonly collation: {
+        readonly type: StringConstructor;
+        readonly default: "des";
+    };
+    readonly isReturn: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly isPercent: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly floatNumber: {
+        readonly type: NumberConstructor;
+        readonly default: 4;
+    };
+    readonly titleText: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly tooltipUnit: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly watchResize: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly showLegend: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly downLoadAutn: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+};
+export type chartProp = ExtractPropTypes<typeof chartProps>;

package/es/components/chart/src/HtChart.mjs

@@ -0,0 +1,77 @@
+const chartProps = {
+  //图表数据
+  chartData: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    type: Array,
+    default: () => []
+  },
+  //图表id
+  chartId: {
+    type: String,
+    default: ""
+  },
+  //图表高度
+  // chartHeight: {
+  //   type: String,
+  //   default: ''
+  // },
+  chartType: {
+    type: String,
+    default: ""
+  },
+  //是否为类目轴
+  // isCategory: {
+  //   type: Boolean,
+  //   default: false
+  // },
+  //是类目轴时x轴数据
+  xAxisData: {
+    type: Array,
+    default: []
+  },
+  collation: {
+    type: String,
+    default: "des"
+  },
+  //是否为收益率
+  isReturn: {
+    type: Boolean,
+    default: false
+  },
+  //是否有百分比
+  isPercent: {
+    type: Boolean,
+    default: false
+  },
+  //保留几位小数
+  floatNumber: {
+    type: Number,
+    default: 4
+  },
+  //y轴文本
+  titleText: {
+    type: String,
+    default: ""
+  },
+  //tooltip单位
+  tooltipUnit: {
+    type: String,
+    default: ""
+  },
+  //图表重新加载
+  watchResize: {
+    type: Boolean,
+    default: false
+  },
+  showLegend: {
+    type: Boolean,
+    default: true
+  },
+  //数据下载
+  downLoadAutn: {
+    type: Boolean,
+    default: false
+  }
+};
+
+export { chartProps };

package/es/components/chart/src/HtChart.vue.d.ts

@@ -0,0 +1,157 @@
+import type { Ref } from 'vue';
+export interface Legend {
+    name: string;
+    lineType: string;
+    isShow: boolean;
+    color: string;
+}
+declare const _default: import("vue").DefineComponent<{
+    readonly chartData: {
+        readonly type: import("vue").PropType<any[]>;
+        readonly default: () => never[];
+    };
+    readonly chartId: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly chartType: {
+        readonly type: import("vue").PropType<import("hfn-components/es/utils").chartType>;
+        readonly default: "";
+    };
+    readonly xAxisData: {
+        readonly type: import("vue").PropType<string[]>;
+        readonly default: readonly [];
+    };
+    readonly collation: {
+        readonly type: StringConstructor;
+        readonly default: "des";
+    };
+    readonly isReturn: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly isPercent: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly floatNumber: {
+        readonly type: NumberConstructor;
+        readonly default: 4;
+    };
+    readonly titleText: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly tooltipUnit: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly watchResize: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly showLegend: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly downLoadAutn: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}, {
+    props: import("@vue/shared").LooseRequired<{
+        readonly chartData: any[];
+        readonly chartId: string;
+        readonly chartType: import("hfn-components/es/utils").chartType;
+        readonly xAxisData: string[];
+        readonly collation: string;
+        readonly isReturn: boolean;
+        readonly isPercent: boolean;
+        readonly floatNumber: number;
+        readonly titleText: string;
+        readonly tooltipUnit: string;
+        readonly watchResize: boolean;
+        readonly showLegend: boolean;
+        readonly downLoadAutn: boolean;
+    } & {}>;
+    myChart: import("vue").ShallowRef<any>;
+    isEmpty: Ref<boolean>;
+    echartOptions: any;
+    drawGraph: () => void;
+    lengedDeal: () => void;
+    echartInit: () => void;
+    chartResize: () => void;
+    allLegend: Ref<Legend[]>;
+    noData: Ref<boolean>;
+    legendStatus: (item: Legend, index: number) => void;
+    legendEnter: (index: number) => void;
+    legendLeave: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly chartData: {
+        readonly type: import("vue").PropType<any[]>;
+        readonly default: () => never[];
+    };
+    readonly chartId: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly chartType: {
+        readonly type: import("vue").PropType<import("hfn-components/es/utils").chartType>;
+        readonly default: "";
+    };
+    readonly xAxisData: {
+        readonly type: import("vue").PropType<string[]>;
+        readonly default: readonly [];
+    };
+    readonly collation: {
+        readonly type: StringConstructor;
+        readonly default: "des";
+    };
+    readonly isReturn: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly isPercent: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly floatNumber: {
+        readonly type: NumberConstructor;
+        readonly default: 4;
+    };
+    readonly titleText: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly tooltipUnit: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly watchResize: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly showLegend: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly downLoadAutn: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>>, {
+    readonly chartData: any[];
+    readonly chartId: string;
+    readonly chartType: import("hfn-components/es/utils").chartType;
+    readonly xAxisData: string[];
+    readonly collation: string;
+    readonly isReturn: boolean;
+    readonly isPercent: boolean;
+    readonly floatNumber: number;
+    readonly titleText: string;
+    readonly tooltipUnit: string;
+    readonly watchResize: boolean;
+    readonly showLegend: boolean;
+    readonly downLoadAutn: boolean;
+}, {}>;
+export default _default;

package/es/components/chart/src/HtChart.vue.mjs

@@ -0,0 +1,91 @@
+import _sfc_main from './HtChart.vue2.mjs';
+import { openBlock, createElementBlock, Fragment, renderList, normalizeStyle, createCommentVNode, createElementVNode, toDisplayString } from 'vue';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
+
+const _hoisted_1 = { class: "echart-box" };
+const _hoisted_2 = {
+  key: 0,
+  class: "echart-lenged"
+};
+const _hoisted_3 = ["onClick", "onMouseover"];
+const _hoisted_4 = ["id"];
+const _hoisted_5 = {
+  key: 1,
+  class: "noData"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    _ctx.showLegend && !$setup.isEmpty ? (openBlock(), createElementBlock("div", _hoisted_2, [
+      (openBlock(true), createElementBlock(
+        Fragment,
+        null,
+        renderList($setup.allLegend, (item, index) => {
+          return openBlock(), createElementBlock("div", {
+            class: "span-box mb10",
+            key: index,
+            onClick: ($event) => $setup.legendStatus(item, index),
+            onMouseover: ($event) => $setup.legendEnter(index),
+            onMouseleave: _cache[0] || (_cache[0] = ($event) => $setup.legendLeave())
+          }, [
+            item.lineType === "line" ? (openBlock(), createElementBlock(
+              "span",
+              {
+                key: 0,
+                class: "bg-span",
+                style: normalizeStyle({ background: item.isShow ? item.color : "#ccc" })
+              },
+              null,
+              4
+              /* STYLE */
+            )) : createCommentVNode("v-if", true),
+            item.lineType === "bar" ? (openBlock(), createElementBlock(
+              "span",
+              {
+                key: 1,
+                class: "bg-span-bar",
+                style: normalizeStyle({ background: item.isShow ? item.color : "#ccc" })
+              },
+              null,
+              4
+              /* STYLE */
+            )) : createCommentVNode("v-if", true),
+            createElementVNode(
+              "span",
+              {
+                style: normalizeStyle({ color: item.isShow ? "#000" : "#ccc" })
+              },
+              toDisplayString(item.name),
+              5
+              /* TEXT, STYLE */
+            ),
+            createCommentVNode(` <span
+          v-if="isLegend"
+          class="returnRatio"
+          :style="{ color: item.isShow ? (item.returnRatio > 0 ? 'red' : item.returnRatio < 0 ? 'green' : '#000') : '#ccc' }"
+        >
+          {{
+            item.name !== '\u57FA\u91D1\u89C4\u6A21' && item.name !== '\u603B\u5E02\u503C' && item.name !== '\u6D41\u901A\u5E02\u503C'
+              ? item.returnRatio === ''
+                ? ''
+                : item.returnRatio.toFixed(2) + (isPercent || specialPercent ? '%' : '')
+              : \`\${item.returnRatio}\${props.tooltipUnit}\`
+          }}
+        </span> `)
+          ], 40, _hoisted_3);
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      ))
+    ])) : createCommentVNode("v-if", true),
+    createElementVNode("div", {
+      class: "echart-content",
+      id: _ctx.chartId,
+      ref: "chartDom"
+    }, null, 8, _hoisted_4),
+    createCommentVNode(" \u56FE\u4F8B\u5168\u7F6E\u7070\u76D2\u5B50 "),
+    $setup.noData ? (openBlock(), createElementBlock("div", _hoisted_5, "\u6682\u65E0\u6570\u636E")) : createCommentVNode("v-if", true)
+  ]);
+}
+var chart = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/libiluo/Desktop/company/component-library/packages/components/chart/src/HtChart.vue"]]);
+
+export { chart as default };

package/es/components/chart/src/HtChart.vue2.mjs

@@ -0,0 +1,94 @@
+import { defineComponent, shallowRef, ref, reactive, watch } from 'vue';
+import { BASIC_CHART_CONFIG } from './chartConfig.mjs';
+import { chartProps } from './HtChart.mjs';
+import cloneDeep from 'lodash.clonedeep';
+import { setEchartXAxis, setEchartYAxis, setEchartTooltip, legendEnterOperate, legendLeaveOperate } from '../../../utils/chart.mjs';
+import * as echarts from 'echarts/core';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "HtChart",
+  props: chartProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const myChart = shallowRef();
+    const isEmpty = ref(false);
+    const echartOptions = reactive(cloneDeep(BASIC_CHART_CONFIG));
+    watch(
+      () => props.chartData,
+      (val) => {
+        echartOptions.series = cloneDeep(val);
+        drawGraph();
+      },
+      {
+        deep: true
+      }
+    );
+    watch(
+      () => props.watchResize,
+      () => {
+        chartResize();
+      }
+    );
+    const drawGraph = () => {
+      setEchartXAxis(echartOptions, props.chartType, props.xAxisData);
+      setEchartYAxis(echartOptions);
+      setEchartTooltip(echartOptions, props);
+      lengedDeal();
+      echartInit();
+    };
+    const lengedDeal = () => {
+      allLegend.value = [];
+      props.chartData.forEach((item, index) => {
+        const data = {
+          name: item.name,
+          isShow: true,
+          lineType: item.type,
+          color: echartOptions.color[index % echartOptions.color.length]
+        };
+        allLegend.value.push(data);
+      });
+    };
+    const echartInit = () => {
+      setTimeout(() => {
+        if (!myChart.value) {
+          const ele = document.getElementById(props.chartId);
+          myChart.value = echarts.init(ele, null, { devicePixelRatio: 2 });
+        }
+        console.log(myChart.value);
+        myChart.value.setOption(echartOptions, true);
+      }, 200);
+    };
+    const chartResize = () => {
+      myChart.value.resize();
+    };
+    const allLegend = ref([]);
+    const noData = ref(false);
+    const legendStatus = (item, index) => {
+      const status = !item.isShow;
+      allLegend.value[index].isShow = status;
+      if (allLegend.value.every((item2) => item2.isShow === false)) {
+        noData.value = true;
+      } else {
+        noData.value = false;
+      }
+      myChart.value.dispatchAction({
+        type: "legendToggleSelect",
+        name: item.name
+      });
+    };
+    const legendEnter = (index) => {
+      legendEnterOperate(echartOptions, allLegend.value[index].name);
+      myChart.value.setOption(echartOptions);
+    };
+    const legendLeave = () => {
+      legendLeaveOperate(echartOptions);
+      myChart.value.setOption(echartOptions);
+    };
+    const __returned__ = { props, myChart, isEmpty, echartOptions, drawGraph, lengedDeal, echartInit, chartResize, allLegend, noData, legendStatus, legendEnter, legendLeave };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+export { _sfc_main as default };

package/es/components/chart/src/chartConfig.d.ts

@@ -0,0 +1,7 @@
+import * as echarts from 'echarts/core';
+import type { BarSeriesOption, LineSeriesOption } from 'echarts/charts';
+import type { TitleComponentOption, TooltipComponentOption, GridComponentOption, DatasetComponentOption } from 'echarts/components';
+import type { ComposeOption } from 'echarts/core';
+export type ECOption = ComposeOption<BarSeriesOption | LineSeriesOption | TitleComponentOption | TooltipComponentOption | GridComponentOption | DatasetComponentOption>;
+export default echarts;
+export declare const BASIC_CHART_CONFIG: any;