hfn-components 0.2.6 → 0.2.8

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

@@ -0,0 +1,84 @@
+import { defineComponent, shallowRef, reactive, watch, ref } from 'vue';
+import { pieProps } from './HtPieChart.mjs';
+import cloneDeep from 'lodash.clonedeep';
+import { BASIC_PIE_CONFIG } from '../../../constants/chartConfig.mjs';
+import * as echarts from 'echarts/core';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "HtPieChart",
+  props: pieProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const myChart = shallowRef();
+    const echartOptions = reactive(cloneDeep(BASIC_PIE_CONFIG));
+    watch(
+      () => props.chartData,
+      (val) => {
+        echartOptions.series[0].data = cloneDeep(val);
+        drawGraph();
+      },
+      { deep: true }
+    );
+    watch(
+      () => props.watchResize,
+      () => {
+        chartResize();
+      }
+    );
+    const chartResize = () => {
+      myChart.value.resize();
+    };
+    const noData = ref(false);
+    const drawGraph = () => {
+      setLenged();
+      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 setEchartTooltip = () => {
+      echartOptions.tooltip = {
+        trigger: "item",
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        formatter: function(params) {
+          let html;
+          html = `<div>${params.seriesName}</div>`;
+          html += `<span> ${params.name}: 
+            ${props.customizePercentage ? params.data.value : params.percent.toFixed(props.floatNumber)}%<span>`;
+          return html;
+        }
+      };
+    };
+    const echartInit = () => {
+      setTimeout(() => {
+        if (!myChart.value) {
+          const ele = document.getElementById(props.chartId);
+          myChart.value = echarts.init(ele, null, { devicePixelRatio: 2, locale: "ZH" });
+        }
+        myChart.value.setOption(echartOptions, true);
+      }, 200);
+    };
+    console.log(echarts);
+    const __returned__ = { props, myChart, echartOptions, chartResize, noData, drawGraph, setLenged, setEchartTooltip, echartInit };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+export { _sfc_main as default };

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

@@ -0,0 +1 @@
+import 'hfn-components/theme-chalk/src/chart.scss';

package/es/components/pieChart/style/index.mjs

@@ -0,0 +1 @@
+import 'hfn-components/theme-chalk/src/chart.scss';

package/es/components/table/HtTable.vue.mjs

@@ -444,6 +444,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     /* STABLE_FRAGMENT */
   );
 }
-var Table = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/zhanghang/Documents/project/component-library/packages/components/table/HtTable.vue"]]);
+var Table = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/libiluo/Desktop/company/component-library/packages/components/table/HtTable.vue"]]);
 
 export { Table as default };

package/es/constants/chartConfig.d.ts

@@ -0,0 +1,8 @@
+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;
+export declare const BASIC_PIE_CONFIG: any;

package/es/constants/chartConfig.mjs

@@ -0,0 +1,110 @@
+import * as echarts from 'echarts/core';
+export { echarts as default };
+import { BarChart, LineChart, PieChart } from 'echarts/charts';
+import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, DatasetComponent, TransformComponent } from 'echarts/components';
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  DatasetComponent,
+  TransformComponent,
+  BarChart,
+  LineChart,
+  PieChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer
+]);
+const BASIC_CHART_CONFIG = {
+  title: {
+    text: "",
+    // top: '5%',
+    left: "0%",
+    textStyle: {
+      fontSize: 12,
+      color: "rgba(0,0,0,0.7)",
+      fontWeight: "normal"
+    }
+  },
+  // 图例
+  legend: {
+    left: "0%",
+    show: false
+  },
+  xAxis: {},
+  yAxis: {},
+  grid: {
+    // top: '12%',
+    top: "8%",
+    left: "3%",
+    right: "3%",
+    bottom: "1%",
+    containLabel: true
+  },
+  // 线条颜色
+  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: []
+};
+const BASIC_PIE_CONFIG = {
+  series: [
+    {
+      name: "",
+      type: "pie",
+      radius: ["40%", "70%"],
+      avoidLabelOverlap: false,
+      label: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        formatter: function(params) {
+          console.log(params);
+          const val = params.percent.toFixed(2);
+          return ` ${params.name}: ${val}%`;
+        },
+        fontWeight: "bolder",
+        color: "#000"
+      },
+      data: []
+    }
+  ]
+};
+
+export { BASIC_CHART_CONFIG, BASIC_PIE_CONFIG };

package/es/constants/index.d.ts

@@ -1,3 +1,4 @@
 export * from './key';
 export * from './table';
 export * from './target';
+export * from './chartConfig';

package/es/constants/index.mjs

@@ -1,3 +1,4 @@
 export { INSTALLED_KEY } from './key.mjs';
 export { CLOUMN_DEAL, TABLE_KEY, convertKey } from './table.mjs';
-export { TARGET_HEAD_KEY } from './target.mjs';
+export { BASIC_KEY, TARGET_END_KEY, TARGET_HEAD_KEY } from './target.mjs';
+export { BASIC_CHART_CONFIG, BASIC_PIE_CONFIG } from './chartConfig.mjs';

package/es/constants/table.d.ts

@@ -107,6 +107,7 @@ export declare const CLOUMN_DEAL: {
     colorText: (val: number | string | undefined) => string;
     colorPercentage: (val: number | string | undefined) => string;
     percentage: (val: number | string | undefined) => string;
+    percentage4: (val: number | string | undefined) => string;
     absPercentage: (val: number | string | undefined) => string;
     thoundsandText2: (val: number | string | undefined) => string;
     notProcessed: null;

package/es/constants/table.mjs

@@ -116,6 +116,9 @@ const basicText4 = (val) => {
 const percentage = (val) => {
   return val === "-" || val === void 0 ? "-" : (val * 100).toFixed(2) + "%";
 };
+const percentage4 = (val) => {
+  return val === "-" || val === void 0 ? "-" : (val * 100).toFixed(4) + "%";
+};
 const absPercentage = (val) => {
   return val === "-" || val === void 0 ? "-" : Math.abs(val * 100).toFixed(2) + "%";
 };
@@ -127,6 +130,7 @@ const CLOUMN_DEAL = {
   colorText: basicText4,
   colorPercentage: percentage,
   percentage,
+  percentage4,
   absPercentage,
   thoundsandText2,
   notProcessed: null,

package/es/constants/target.d.ts

@@ -2,3 +2,19 @@ export declare const TARGET_HEAD_KEY: {
     name: string;
     key: string;
 }[];
+export declare const TARGET_END_KEY: ({
+    name: string;
+    key: string;
+    slot: string;
+    excludeKey?: undefined;
+} | {
+    name: string;
+    key: string;
+    slot: string;
+    excludeKey: string;
+})[];
+export declare const BASIC_KEY: {
+    name: string;
+    key: string;
+    title: string;
+}[];

package/es/constants/target.mjs

@@ -12,5 +12,43 @@ const TARGET_HEAD_KEY = [
   { name: "\u4ECA\u5E74\u4EE5\u6765", key: "ytd" },
   { name: "\u6210\u7ACB\u4EE5\u6765", key: "cucmulative" }
 ];
+const TARGET_END_KEY = [
+  { name: "\u6536\u76CA", key: "Return", slot: "color_text_precent" },
+  { name: "\u5E74\u5316\u6536\u76CA", key: "YearReturn", slot: "color_text_precent" },
+  { name: "\u8D85\u989D\u6536\u76CA", key: "ExcessReturn", slot: "color_text_precent" },
+  { name: "\u8D85\u989D\u5E74\u5316\u6536\u76CA", key: "ExcessYearReturn", slot: "color_text_precent" },
+  { name: "\u5E74\u5316\u6CE2\u52A8\u7387", key: "Vol", slot: "color_text_nocolor_noprecent" },
+  { name: "\u8D85\u989D\u5E74\u5316\u6CE2\u52A8\u7387", key: "ExcessVol", slot: "color_text_nocolor_noprecent" },
+  { name: "\u590F\u666E\u6BD4\u7387", key: "SharpeRatio", slot: "color_text_no_thousandths" },
+  { name: "\u8D85\u989D\u590F\u666E\u6BD4\u7387", key: "ExcessSharpeRatio", slot: "color_text_no_thousandths" },
+  { name: "\u5361\u739B\u6BD4\u7387", key: "CalmarRatio", slot: "color_text_no_thousandths" },
+  { name: "\u8D85\u989D\u5361\u739B\u6BD4\u7387", key: "ExcessCalmarRatio", slot: "color_text_no_thousandths" },
+  { name: "\u7D22\u63D0\u8BFA\u6BD4\u7387", key: "SortinoRatio", slot: "color_text_no_thousandths" },
+  { name: "\u4E0B\u884C\u6807\u51C6\u5DEE", key: "DownsideStd", slot: "color_text_nocolor_noprecent" },
+  { name: "\u4E0B\u884C\u98CE\u9669", key: "DownsideDev", slot: "color_text_nocolor_noprecent" },
+  { name: "\u6700\u5927\u56DE\u64A4", key: "MaxDrawdown", slot: "color_text_nocolor_noprecent" },
+  { name: "\u8D85\u989D\u6700\u5927\u56DE\u64A4", key: "ExcessMaxDrawdown", slot: "color_text_nocolor_noprecent" },
+  { name: "\u6700\u5927\u56DE\u64A4\u56DE\u8865\u671F\uFF08\u5929\uFF09", key: "MaxDrawdownDays", slot: "" },
+  { name: "Alpha", key: "Alpha", slot: "color_text_precent" },
+  { name: "Beta", key: "Beta", slot: "color_text_no_thousandths" },
+  { name: "\u8DDF\u8E2A\u8BEF\u5DEE", key: "TrackingError", slot: "color_text_nocolor_noprecent" },
+  { name: "\u4FE1\u606F\u6BD4\u7387", key: "InformationRatio", slot: "color_text_no_thousandths" },
+  { name: "\u504F\u5EA6", key: "Skew", slot: "color_text_no_thousandths" },
+  { name: "\u5CF0\u5EA6", key: "Kurt", slot: "color_text_no_thousandths" },
+  { name: "VaR\uFF0895%\u7F6E\u4FE1\uFF09", key: "CVaR", slot: "color_text_no_thousandths" },
+  { name: "\u5468\u80DC\u7387", key: "PositiveRatio", slot: "color_text_nocolor_noprecent" },
+  { name: "\u6708\u80DC\u7387", key: "MonthlyPositiveRatio", slot: "color_text_nocolor_noprecent", excludeKey: "" }
+];
+const BASIC_KEY = [
+  { name: "\u7BA1\u7406\u4EBA", key: "Advisor", title: "" },
+  { name: "\u7B56\u7565", key: "strategyOne", title: "" },
+  { name: "\u5355\u4F4D\u51C0\u503C", key: "Nav", title: "" },
+  { name: "\u5355\u4F4D\u51C0\u503C\u6DA8\u8DCC\u5E45", key: "navPriceChange", title: "" },
+  { name: "\u7D2F\u8BA1\u51C0\u503C", key: "cumulativeNavWithdrawal", title: "" },
+  { name: "\u6210\u7ACB\u65E5\u671F", key: "inceptionDate", title: "" },
+  { name: "\u5C01\u95ED\u671F", key: "closedPeriod", title: "" },
+  { name: "\u5F00\u653E\u65E5", key: "openDay", title: "" },
+  { name: "\u5907\u6848\u53F7/\u4EE3\u7801", key: "registerNumber", title: "" }
+];
 
-export { TARGET_HEAD_KEY };
+export { BASIC_KEY, TARGET_END_KEY, TARGET_HEAD_KEY };

package/es/index.mjs

@@ -3,8 +3,10 @@ export { makeInstaller } from './make-installer.mjs';
 export { HtElTable } from './components/elTable/index.mjs';
 export { HtChart } from './components/chart/index.mjs';
 export { HtTarget } from './components/htTarget/index.mjs';
+export { HtPieChart } from './components/pieChart/index.mjs';
 export { columnDealProps, elTableProps } from './components/elTable/src/elTable.mjs';
 export { chartProps } from './components/chart/src/HtChart.mjs';
+export { pieProps } from './components/pieChart/src/HtPieChart.mjs';
 
 const install = installer.install;
 

package/es/make-installer.mjs

@@ -1,4 +1,5 @@
 import { INSTALLED_KEY } from './constants/key.mjs';
+import './constants/chartConfig.mjs';
 
 const makeInstaller = (components = []) => {
   const install = (app) => {

package/package.json

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

package/theme-chalk/ht-chart.css

@@ -1 +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%}
+.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

@@ -1 +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%}
+.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

@@ -50,4 +50,9 @@
   position: absolute;
   bottom: 0px;
   color: #ccc;
+}
+
+._100 {
+  width: 100%;
+  height: 100%;
 }

package/es/css/index.css

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