hfn-components 0.3.6 → 0.3.8

package/es/components/htTarget/src/htTarget.vue2.mjs

@@ -34,6 +34,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       () => props.dialogShow,
       (val) => {
         dialogShow.value = val;
+        selectedTree.value = {};
+        selectedList.value = [];
         props.targetData.forEach((item) => {
           if (item.key.startsWith("basic_")) {
             const strSplit = item.key.split("_");

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

@@ -46,9 +46,16 @@ export declare const HtPieChart: import("hfn-components/es/utils").SFCWithInstal
     echartOptions: any;
     chartResize: () => void;
     noData: import("vue").Ref<boolean>;
+    allLegend: import("vue").Ref<{
+        name: string;
+        lineType: string;
+        isShow: boolean;
+        color: string;
+    }[]>;
     drawGraph: () => void;
-    setLenged: () => void;
+    lengedDeal: () => void;
     setEchartTooltip: () => void;
+    legendStatus: (item: import("./src/HtPieChart.vue").Legend, index: number) => void;
     echartInit: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     readonly chartData: {

package/es/components/pieChart/src/HtPieChart.vue.d.ts

@@ -1,3 +1,9 @@
+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[]>;
@@ -46,9 +52,16 @@ declare const _default: import("vue").DefineComponent<{
     echartOptions: any;
     chartResize: () => void;
     noData: import("vue").Ref<boolean>;
+    allLegend: import("vue").Ref<{
+        name: string;
+        lineType: string;
+        isShow: boolean;
+        color: string;
+    }[]>;
     drawGraph: () => void;
-    setLenged: () => void;
+    lengedDeal: () => void;
     setEchartTooltip: () => void;
+    legendStatus: (item: Legend, index: number) => void;
     echartInit: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     readonly chartData: {

package/es/components/pieChart/src/HtPieChart.vue.mjs

@@ -1,21 +1,59 @@
 import _sfc_main from './HtPieChart.vue2.mjs';
-import { openBlock, createElementBlock, createElementVNode, createCommentVNode } from 'vue';
+import { openBlock, createElementBlock, createElementVNode, createCommentVNode, Fragment, renderList, normalizeStyle, toDisplayString } from 'vue';
 import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
 
 const _hoisted_1 = { class: "echart-box" };
-const _hoisted_2 = ["id"];
-const _hoisted_3 = {
+const _hoisted_2 = { class: "echart-lenged" };
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = ["id"];
+const _hoisted_5 = {
   key: 0,
   class: "noData"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", _hoisted_2, [
+      createCommentVNode('  @mouseover="legendEnter(index)"\n        @mouseleave="legendLeave()" '),
+      (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)
+          }, [
+            createElementVNode(
+              "span",
+              {
+                class: "bg-span-bar",
+                style: normalizeStyle({ background: item.isShow ? item.color : "#ccc" })
+              },
+              null,
+              4
+              /* STYLE */
+            ),
+            createElementVNode(
+              "span",
+              {
+                style: normalizeStyle({ color: item.isShow ? "#000" : "#ccc" })
+              },
+              toDisplayString(item.name),
+              5
+              /* TEXT, STYLE */
+            )
+          ], 8, _hoisted_3);
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      ))
+    ]),
     createElementVNode("div", {
       class: "_100",
       id: _ctx.chartId
-    }, null, 8, _hoisted_2),
+    }, null, 8, _hoisted_4),
     createCommentVNode(" \u56FE\u4F8B\u5168\u7F6E\u7070\u76D2\u5B50 "),
-    $setup.noData ? (openBlock(), createElementBlock("div", _hoisted_3, "\u6682\u65E0\u6570\u636E")) : createCommentVNode("v-if", true)
+    $setup.noData ? (openBlock(), createElementBlock("div", _hoisted_5, "\u6682\u65E0\u6570\u636E")) : createCommentVNode("v-if", true)
   ]);
 }
 var htPieChart = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/libiluo/Desktop/company/component-library/packages/components/pieChart/src/HtPieChart.vue"]]);

package/es/components/pieChart/src/HtPieChart.vue2.mjs

@@ -42,27 +42,23 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       myChart.value.resize();
     };
     const noData = ref(false);
+    const allLegend = ref([]);
     const drawGraph = () => {
-      setLenged();
+      lengedDeal();
       setEchartTooltip();
       echartInit();
     };
-    const setLenged = () => {
-      echartOptions.legend = {
-        orient: "horizontal",
-        type: props.legendType,
-        icon: "circle",
-        formatter: props.legendFormatter() || ["{a|{name}}"].join("\n"),
-        center: ["50%", "70%"],
-        textStyle: {
-          height: 9,
-          rich: {
-            a: {
-              verticalAlign: "bottom"
-            }
-          }
-        }
-      };
+    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 setEchartTooltip = () => {
       echartOptions.tooltip = {
@@ -77,6 +73,18 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         }
       };
     };
+    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.setOption({
+        legend: { selected: { [item.name]: status } }
+      });
+    };
     const echartInit = () => {
       setTimeout(() => {
         if (!myChart.value) {
@@ -86,7 +94,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
         myChart.value.setOption(echartOptions, true);
       }, 200);
     };
-    const __returned__ = { props, myChart, echartOptions, chartResize, noData, drawGraph, setLenged, setEchartTooltip, echartInit };
+    const __returned__ = { props, myChart, echartOptions, chartResize, noData, allLegend, drawGraph, lengedDeal, setEchartTooltip, legendStatus, echartInit };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
     return __returned__;
   }

package/es/constants/chartConfig.mjs

@@ -86,6 +86,46 @@ const BASIC_CHART_CONFIG = {
   series: []
 };
 const useBasicPieConfig = (floatNumber = 2) => ({
+  legend: {
+    show: false
+  },
+  color: [
+    "#C13431",
+    "#1E85D2",
+    "#FD984F",
+    "#63B9BB",
+    "#BBB162",
+    "#AE76C1",
+    "#5E92F6",
+    "#F5BC32",
+    "#DA8484",
+    "#41982E",
+    "#437095",
+    "#8060A7",
+    "#7D0A0D",
+    "#572AFF",
+    "#2BE8F8",
+    "#FF1493",
+    "#E066FF",
+    "#27408B",
+    "#5191A3",
+    "#D5634C",
+    "#92d6fd",
+    "#b92e2d",
+    "#187bc9",
+    "#90bae0",
+    "#187bc9",
+    "#0070C9",
+    "#5470c6",
+    "#91cc75",
+    "#fac858",
+    "#ee6666",
+    "#73c0de",
+    "#3ba272",
+    "#fc8452",
+    "#9a60b4",
+    "#ea7ccc"
+  ],
   series: [
     {
       name: "",

package/es/constants/target.mjs

@@ -40,15 +40,16 @@ const TARGET_END_KEY = [
   { name: "\u6708\u80DC\u7387", key: "monthlyPositiveRatio", dealType: "percentage" }
 ];
 const BASIC_KEY = [
-  { name: "\u7BA1\u7406\u4EBA", key: "advisor", dealType: "" },
-  { name: "\u7B56\u7565", key: "strategyOne", dealType: "" },
-  { name: "\u5355\u4F4D\u51C0\u503C", key: "nav", dealType: "" },
-  { name: "\u5355\u4F4D\u51C0\u503C\u6DA8\u8DCC\u5E45", key: "navPriceChange", dealType: "" },
-  { name: "\u7D2F\u8BA1\u51C0\u503C", key: "cumulativeNavWithdrawal", dealType: "" },
-  { name: "\u6210\u7ACB\u65E5\u671F", key: "inceptionDate", dealType: "" },
-  { name: "\u5C01\u95ED\u671F", key: "closedPeriod", dealType: "" },
-  { name: "\u5F00\u653E\u65E5", key: "openDay", dealType: "" },
-  { name: "\u5907\u6848\u53F7/\u4EE3\u7801", key: "registerNumber", dealType: "" }
+  { name: "\u51C0\u503C\u65E5\u671F", key: "priceDate", dealType: "notProcessed" },
+  // { name: '管理人', key: 'advisor', dealType: '' },
+  // { name: '策略', key: 'strategyOne', dealType: '' },
+  { name: "\u5355\u4F4D\u51C0\u503C", key: "nav", dealType: "basicText4" },
+  // { name: '单位净值涨跌幅', key: 'navPriceChange', dealType: '' },
+  { name: "\u7D2F\u8BA1\u51C0\u503C", key: "cumulativeNavWithdrawal", dealType: "basicText4" }
+  // { name: '成立日期', key: 'inceptionDate', dealType: '' },
+  // { name: '封闭期', key: 'closedPeriod', dealType: '' },
+  // { name: '开放日', key: 'openDay', dealType: '' },
+  // { name: '备案号/代码', key: 'registerNumber', dealType: '' }
 ];
 
 export { BASIC_KEY, TARGET_END_KEY, TARGET_HEAD_KEY };

package/package.json

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