cnhis-design-vue 3.4.0-beta.55 → 3.4.0-beta.58

package/README.md

@@ -1,87 +1,87 @@
-# 安装
-
-```shell
-npm i cnhis-design-vue@[版本号]
-# or
-yarn add cnhis-design-vue@[版本号] #推荐
-```
-
-## 1.全局引入
-
-```typescript
-// main.ts
-import { createApp } from 'vue';
-import App from './App.vue';
-import 'cnhis-design-vue/es/packages/index.css';
-import cui from 'cnhis-design-vue';
-
-const app = createApp(App);
-app.use(cui).mount('#app');
-```
-
-## 2. 按需引入
-
-组件现在支持了自动按需引入, 但是样式文件需要额外的处理
-
-### 2.1 样式处理方式1 (按需引入样式)
-
-```shell
-# 安装自动导入样式的插件
-npm i -d vite-plugin-style-import
-```
-
-```typescript
-// vite.config.ts
-import { defineConfig } from 'vite';
-import { createStyleImportPlugin } from 'vite-plugin-style-import';
-
-export default defineConfig({
-  plugins: [
-    // ...otherPlugins
-    createStyleImportPlugin({
-      libs: [
-        {
-          libraryName: 'cnhis-design-vue',
-          esModule: true,
-          ensureStyleFile: true,
-          resolveStyle: name => {
-            return `cnhis-design-vue/es/components/${ name.slice(2) }/style/index.css`;
-          }
-        }
-      ]
-    })
-  ]
-});
-```
-
-### 2.2 样式处理方式2 (全局引入样式)
-
-```typescript
-// main.ts
-import 'cnhis-design-vue/es/components/index.css';
-```
-
-## 3.FAQ
-
-### 3.1 项目打包后样式丢失
-
-处理方法, 将 cnhis-design-vue 从 vendor 包中移除 (没有出现此问题则不需要)
-
-```typescript
-// vite.config.ts
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-  build: {
-    rollupOptions: {
-      // ..otherOptions
-      output: {
-        dir: './dist',
-        manualChunks: {
-          'cnhis-vendor': ['cnhis-design-vue']
-        }
-      }
-    }
-  }
-});
-```
+# 安装
+
+```shell
+npm i cnhis-design-vue@[版本号]
+# or
+yarn add cnhis-design-vue@[版本号] #推荐
+```
+
+## 1.全局引入
+
+```typescript
+// main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import 'cnhis-design-vue/es/packages/index.css';
+import cui from 'cnhis-design-vue';
+
+const app = createApp(App);
+app.use(cui).mount('#app');
+```
+
+## 2. 按需引入
+
+组件现在支持了自动按需引入, 但是样式文件需要额外的处理
+
+### 2.1 样式处理方式1 (按需引入样式)
+
+```shell
+# 安装自动导入样式的插件
+npm i -d vite-plugin-style-import
+```
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import { createStyleImportPlugin } from 'vite-plugin-style-import';
+
+export default defineConfig({
+  plugins: [
+    // ...otherPlugins
+    createStyleImportPlugin({
+      libs: [
+        {
+          libraryName: 'cnhis-design-vue',
+          esModule: true,
+          ensureStyleFile: true,
+          resolveStyle: name => {
+            return `cnhis-design-vue/es/components/${ name.slice(2) }/style/index.css`;
+          }
+        }
+      ]
+    })
+  ]
+});
+```
+
+### 2.2 样式处理方式2 (全局引入样式)
+
+```typescript
+// main.ts
+import 'cnhis-design-vue/es/components/index.css';
+```
+
+## 3.FAQ
+
+### 3.1 项目打包后样式丢失
+
+处理方法, 将 cnhis-design-vue 从 vendor 包中移除 (没有出现此问题则不需要)
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      // ..otherOptions
+      output: {
+        dir: './dist',
+        manualChunks: {
+          'cnhis-vendor': ['cnhis-design-vue']
+        }
+      }
+    }
+  }
+});
+```

package/es/components/fabric-chart/src/hooks/birthProcess/useBirthProcessChart.js

@@ -1,4 +1,4 @@
-import { reactive, computed, watch, toRefs } from 'vue';
+import { reactive, watch, toRefs } from 'vue';
 import { defaultBorderStyle } from '../useDraw.js';
 import '../../../../../shared/utils/fabricjs/index.js';
 import 'date-fns';
@@ -22,101 +22,83 @@ function useBirthProcessChart(canvas, props, emits, canvasRef, pointTipProps, po
     redrawPoints: null,
     clickMenu: null
   });
-  const leftScales = computed(
-    () => props.data.scaleValues.map((item) => {
-      var _a;
-      return { ...item, width: (_a = item.width) != null ? _a : 60 };
-    }).filter(({ layout = "left", show = true }) => layout === "left" && show)
-  );
-  const rightScales = computed(
-    () => props.data.scaleValues.map((item) => {
-      var _a;
-      return { ...item, width: (_a = item.width) != null ? _a : 60 };
-    }).filter(({ layout = "left", show = true }) => layout === "right" && show)
-  );
   const leftAddAreaWidth = 30;
-  const rightAddAreaWidth = computed(() => {
-    var _a;
-    return !((_a = rightScales.value) == null ? void 0 : _a.length) ? 0 : 30;
-  });
-  const originX = computed(() => {
-    var _a;
-    const leftScalesWidth = (_a = leftScales.value) == null ? void 0 : _a.reduce((width, item) => {
-      width += item.width;
-      return width;
-    }, 0);
-    return leftAddAreaWidth + leftScalesWidth;
-  });
-  const endX = computed(() => {
-    var _a;
+  function buildDerived() {
+    var _a, _b;
+    const leftScales = props.data.scaleValues.map((item) => {
+      var _a2;
+      return { ...item, width: (_a2 = item.width) != null ? _a2 : 60 };
+    }).filter(({ layout = "left", show = true }) => layout === "left" && show);
+    const rightScales = props.data.scaleValues.map((item) => {
+      var _a2;
+      return { ...item, width: (_a2 = item.width) != null ? _a2 : 60 };
+    }).filter(({ layout = "left", show = true }) => layout === "right" && show);
+    const rightAddAreaWidth = !(rightScales == null ? void 0 : rightScales.length) ? 0 : 30;
+    const leftScalesWidth = leftScales == null ? void 0 : leftScales.reduce((width2, item) => width2 + item.width, 0);
+    const originX = leftAddAreaWidth + leftScalesWidth;
     const { width } = props.data;
-    const rightScalesWidth = (_a = rightScales.value) == null ? void 0 : _a.reduce((width2, item) => {
-      width2 += item.width;
-      return width2;
-    }, 0);
-    return width - rightAddAreaWidth.value - rightScalesWidth;
-  });
-  const gridXNumber = computed(() => props.data.grid.mainXCell);
-  const gridYNumber = computed(() => {
+    const rightScalesWidth = rightScales == null ? void 0 : rightScales.reduce((w, item) => w + item.width, 0);
+    const endX = width - rightAddAreaWidth - rightScalesWidth;
+    const gridXNumber = props.data.grid.mainXCell;
     const mainYCell = props.data.grid.mainYCell || 14;
-    const fhrItem = props.data.scaleValues.find((item) => item.show && item.key === "FHR");
-    return !fhrItem && mainYCell === 14 ? 10 : mainYCell;
-  });
-  const xCellWidth = computed(() => {
-    return (endX.value - originX.value) / gridXNumber.value;
-  });
-  const padding = computed(() => {
-    const p = props.data.padding || [5, 5];
+    const fhrItemShow = props.data.scaleValues.find((item) => item.show && item.key === "FHR");
+    const gridYNumber = !fhrItemShow && mainYCell === 14 ? 10 : mainYCell;
+    const xCellWidth = (endX - originX) / gridXNumber;
+    const defaultPadding = props.data.padding || [5, 5];
     const xAxisNumberTop = getxAxisNumber("top");
     const xAxisNumberBottom = getxAxisNumber("bottom");
-    return [xAxisNumberTop ? 0 : p[0], xAxisNumberBottom ? 0 : p[1]];
-  });
-  const yCellHeight = computed(() => {
+    const padding = [xAxisNumberTop ? 0 : defaultPadding[0], xAxisNumberBottom ? 0 : defaultPadding[1]];
     const { height } = props.data;
-    const xAxisNumber = getxAxisNumber();
-    return (height - padding.value.reduce((p1, p2) => p1 + p2, 0)) / (gridYNumber.value + xAxisNumber);
-  });
-  const originY = computed(() => {
-    const xAxisNumber = getxAxisNumber("top");
-    return yCellHeight.value * xAxisNumber + padding.value[0];
-  });
-  const originYCervix = computed(() => {
-    var _a;
-    const { scaleValues } = props.data;
+    const xAxisNumberAll = getxAxisNumber();
+    const yCellHeight = (height - padding.reduce((p1, p2) => p1 + p2, 0)) / (gridYNumber + xAxisNumberAll);
+    const originY = yCellHeight * xAxisNumberTop + padding[0];
+    const endY = height - yCellHeight * xAxisNumberBottom - padding[1];
+    const scaleValues = props.data.scaleValues;
     const FHRisShow = (_a = scaleValues.find((item) => item.key === "FHR")) == null ? void 0 : _a.show;
-    if (!FHRisShow && !originY.value)
-      return originY.value;
     const cervixItem = scaleValues.find((item) => item.key === "cervix");
     const [, max] = (cervixItem == null ? void 0 : cervixItem.range) || [0, 10];
     const spaceValue = (cervixItem == null ? void 0 : cervixItem.spaceValue) || 1;
-    return endY.value - padding.value[0] - max * spaceValue * yCellHeight.value;
-  });
-  const endY = computed(() => {
-    const { height } = props.data;
-    const xAxisNumber = getxAxisNumber("bottom");
-    return height - yCellHeight.value * xAxisNumber - padding.value[1];
-  });
-  const startTime = computed(() => getTime(props.data.xAxis.time.startTime));
-  const timeXCell = computed(() => 1 * 60 * 60 * 1e3 / xCellWidth.value);
-  const cervixYCell = computed(() => {
-    const { scaleValues } = props.data;
-    const cervixItem = scaleValues.find((item) => item.key === "cervix");
-    return yCellHeight.value / ((cervixItem == null ? void 0 : cervixItem.spaceValue) || 1);
-  });
-  const FHRYCell = computed(() => {
-    const { scaleValues } = props.data;
-    const cervixItem = scaleValues.find((item) => item.key === "FHR");
-    return yCellHeight.value / ((cervixItem == null ? void 0 : cervixItem.spaceValue) || 10);
-  });
-  const fetalPresentationYCell = computed(() => {
-    const { scaleValues } = props.data;
-    const cervixItem = scaleValues.find((item) => item.key === "fetalPresentation");
-    return yCellHeight.value / ((cervixItem == null ? void 0 : cervixItem.spaceValue) || 1);
-  });
-  const event = computed(() => {
-    var _a;
-    return ((_a = props.data.grid) == null ? void 0 : _a.event) || { selectable: true, evented: true, hovered: true };
-  });
+    const originYCervix = !FHRisShow && !originY ? originY : endY - padding[0] - max * spaceValue * yCellHeight;
+    const startTime = getTime(props.data.xAxis.time.startTime);
+    const timeXCell = 1 * 60 * 60 * 1e3 / xCellWidth;
+    const cervixYCell = yCellHeight / ((cervixItem == null ? void 0 : cervixItem.spaceValue) || 1);
+    const FHRItem = scaleValues.find((item) => item.key === "FHR");
+    const FHRYCell = yCellHeight / ((FHRItem == null ? void 0 : FHRItem.spaceValue) || 10);
+    const fetalPresentationItem = scaleValues.find((item) => item.key === "fetalPresentation");
+    const fetalPresentationYCell = yCellHeight / ((fetalPresentationItem == null ? void 0 : fetalPresentationItem.spaceValue) || 1);
+    const event = ((_b = props.data.grid) == null ? void 0 : _b.event) || { selectable: true, evented: true, hovered: true };
+    return {
+      canvasWidth: props.data.width,
+      canvasHeight: props.data.height,
+      borderStyle: { ...defaultBorderStyle, ...props.data.borderStyle },
+      selectionStyle: props.data.selectionStyle || {},
+      grid: props.data.grid,
+      other: props.data.other,
+      originX,
+      endX,
+      originY,
+      endY,
+      xCellWidth,
+      yCellHeight,
+      gridXNumber,
+      gridYNumber,
+      xAxis: props.data.xAxis,
+      leftScales,
+      rightScales,
+      leftAddAreaWidth,
+      rightAddAreaWidth,
+      startTime,
+      timeXCell,
+      cervixYCell,
+      FHRYCell,
+      fetalPresentationYCell,
+      scaleValues: props.data.scaleValues,
+      event,
+      originYCervix,
+      scalebarBorder: Reflect.has(props.data, "scalebarBorder") ? props.data.scalebarBorder : true,
+      padding
+    };
+  }
   function getxAxisNumber(position) {
     const { xAxis } = props.data;
     return Object.values(xAxis).reduce((num, item) => {
@@ -125,37 +107,7 @@ function useBirthProcessChart(canvas, props, emits, canvasRef, pointTipProps, po
       return num;
     }, 0);
   }
-  const propItems = reactive({
-    canvasWidth: props.data.width,
-    canvasHeight: props.data.height,
-    borderStyle: { ...defaultBorderStyle, ...props.data.borderStyle || {} },
-    selectionStyle: props.data.selectionStyle || {},
-    grid: props.data.grid,
-    other: props.data.other,
-    originX: originX.value,
-    endX: endX.value,
-    originY: originY.value,
-    endY: endY.value,
-    xCellWidth: xCellWidth.value,
-    yCellHeight: yCellHeight.value,
-    gridXNumber: gridXNumber.value,
-    gridYNumber: gridYNumber.value,
-    xAxis: props.data.xAxis,
-    leftScales: leftScales.value,
-    rightScales: rightScales.value,
-    leftAddAreaWidth,
-    rightAddAreaWidth: rightAddAreaWidth.value,
-    startTime: startTime.value,
-    timeXCell: timeXCell.value,
-    cervixYCell: cervixYCell.value,
-    FHRYCell: FHRYCell.value,
-    fetalPresentationYCell: fetalPresentationYCell.value,
-    scaleValues: props.data.scaleValues,
-    event: event.value,
-    originYCervix: originYCervix.value,
-    scalebarBorder: Reflect.has(props.data, "scalebarBorder") ? props.data.scalebarBorder : true,
-    padding: padding.value
-  });
+  const propItems = reactive(buildDerived());
   watch(
     () => canvas.value,
     (value) => {

package/es/components/fabric-chart/src/hooks/electrocardiogram/useElectrocardiogramChart.d.ts

@@ -5,8 +5,8 @@ import { IPointTipProps, IPointMenuProps } from '../../../../../components/fabri
 import { ECG } from '../../../../../components/fabric-chart/src/constants';
 export declare function useElectrocardiogramChart(canvas: Ref<fabric.Canvas>, props: AnyObject, emits: Function, canvasRef: Ref<HTMLCanvasElement | null>, pointTipProps: IPointTipProps, pointMenuProps: IPointMenuProps): {
     getGridInfo: () => {
-        cellWidth: number;
-        cellHeight: number;
+        cellWidth: any;
+        cellHeight: any;
         smallCellNumber: ECG;
     };
     select?: Ref<import("../../../../../shared/types").AnyFn | null | undefined, import("../../../../../shared/types").AnyFn | null | undefined> | undefined;

package/es/components/fabric-chart/src/hooks/electrocardiogram/useElectrocardiogramChart.js

@@ -1,8 +1,8 @@
-import { reactive, computed, unref, watch, toRefs } from 'vue';
+import { reactive, watch, toRefs } from 'vue';
 import { defaultBorderStyle, defaultLineStyle, defaultTextStyle } from '../useDraw.js';
 import '../../../../../shared/utils/fabricjs/index.js';
 import 'date-fns';
-import { cloneDeep, isNumber, last } from 'lodash-es';
+import { cloneDeep, last, isNumber } from 'lodash-es';
 import '../useEvent.js';
 import '../useShadow.js';
 import '../useCommon.js';
@@ -25,142 +25,100 @@ function useElectrocardiogramChart(canvas, props, emits, canvasRef, pointTipProp
     useRectRuler: null
   });
   const originX = 0, originY = 0;
-  const endX = computed(() => props.data.width);
-  const endY = computed(() => props.data.height);
-  const __dataList = computed(() => {
-    const { dataList: dataList2 = [], config = {} } = props.data;
-    const __dataList2 = cloneDeep(dataList2);
-    const matchItem = __dataList2.find((item) => config.lastDataKey && item.key === config.lastDataKey);
-    if (matchItem) {
-      return [...__dataList2, matchItem];
-    }
-    return __dataList2;
-  });
-  const xCellWidth = computed(() => {
-    return (endX.value - originX) / gridXNumber.value;
-  });
-  const yCellHeight = computed(() => {
-    return (endY.value - originY) / gridYNumber.value;
-  });
-  const gridXNumber = computed(() => {
-    var _a, _b, _c;
-    const { config, grid } = props.data;
-    if (isNumber(grid.gridXNumber))
-      return grid.gridXNumber;
-    const totalLength = (_c = (_b = (_a = last(__dataList.value)) == null ? void 0 : _a.data) == null ? void 0 : _b.length) != null ? _c : 0;
+  function buildDerived() {
+    var _a, _b, _c, _d, _e, _f;
+    const endX = props.data.width;
+    const endY = props.data.height;
+    const { dataList = [], config = {} } = props.data;
+    const list = cloneDeep(dataList);
+    const matchItem = list.find((item) => config.lastDataKey && item.key === config.lastDataKey);
+    const __dataList = matchItem ? [...list, matchItem] : list;
+    const { grid } = props.data;
+    const totalLength = (_c = (_b = (_a = last(__dataList)) == null ? void 0 : _a.data) == null ? void 0 : _b.length) != null ? _c : 0;
     const totalSeconds = totalLength / config.hz;
-    return Math.ceil(totalSeconds / config.mainXCellValue);
-  });
-  const gridYNumber = computed(() => {
-    const { config, grid } = props.data;
-    if (isNumber(grid.gridYNumber))
-      return grid.gridYNumber;
-    const totalLineLength = __dataList.value.length;
-    return Math.ceil(totalValueMV.value * totalLineLength * 2 / config.mainYCellValue);
-  });
-  const totalValueMV = computed(() => {
-    var _a;
-    const { config } = props.data;
-    const totalData = (_a = last(__dataList.value)) == null ? void 0 : _a.data;
+    const gridXNumber = isNumber(grid.gridXNumber) ? grid.gridXNumber : Math.ceil(totalSeconds / config.mainXCellValue);
+    const totalData = ((_d = last(__dataList)) == null ? void 0 : _d.data) || [];
     const maxValue = Math.max(...totalData);
     const minValue = Math.min(...totalData);
     const totalValue = maxValue - minValue;
-    return config.valueUnit === "uv" ? totalValue * 1e-3 : config.valueUnit === "v" ? totalValue * 1e3 : totalValue;
-  });
-  const event = computed(() => {
-    var _a;
-    return ((_a = props.data.grid) == null ? void 0 : _a.event) || { selectable: true, evented: true };
-  });
-  const layoutInfo = computed(() => {
+    const totalValueMV = config.valueUnit === "uv" ? totalValue * 1e-3 : config.valueUnit === "v" ? totalValue * 1e3 : totalValue;
+    const totalLineLength = __dataList.length;
+    const gridYNumber = isNumber(grid.gridYNumber) ? grid.gridYNumber : Math.ceil(totalValueMV * totalLineLength * 2 / config.mainYCellValue);
+    const xCellWidth = (endX - originX) / gridXNumber;
+    const yCellHeight = (endY - originY) / gridYNumber;
+    const event = ((_e = props.data.grid) == null ? void 0 : _e.event) || { selectable: true, evented: true };
     const { mode = "2-6" } = props.data;
     const [columnNumber, rowNumber] = mode.split("-").map((n) => +n);
-    return {
-      columnNumber,
-      rowNumber
-    };
-  });
-  const rowSpace = computed(() => {
-    const { rowNumber } = layoutInfo.value;
-    const totalLineLength = __dataList.value.length;
-    return Math.round(gridYNumber.value / (rowNumber + (totalLineLength === ECG.MAXLINENUMBER ? 1 : 0)));
-  });
-  const dataList = computed(() => {
-    const { width, config, grid } = props.data;
-    const { columnNumber, rowNumber } = layoutInfo.value;
-    const columnWidth = width / columnNumber;
-    const dataListLen = __dataList.value.length;
-    const baseYCellNumber = Math.ceil(rowSpace.value / 2);
-    const firstRowLineMaxHeight = getFirstRowLineMaxHeight();
-    const _baseY = yCellHeight.value * baseYCellNumber;
-    const baseY = columnNumber === 1 || _baseY < firstRowLineMaxHeight ? yCellHeight.value * Math.ceil(firstRowLineMaxHeight / yCellHeight.value) : _baseY;
-    const baseX = xCellWidth.value;
-    return __dataList.value.map((item, idx) => {
-      const itemRowIdx = ECG.MAXLINENUMBER === dataListLen && idx === dataListLen - 1 ? rowNumber : idx % rowNumber;
-      const itemColumnIdx = ECG.MAXLINENUMBER === dataListLen && idx === dataListLen - 1 ? 0 : Math.floor(idx / rowNumber);
-      return {
-        ...item,
-        origin: {
-          x: itemColumnIdx * columnWidth + baseX,
-          y: itemRowIdx * (yCellHeight.value * rowSpace.value) + baseY,
-          rowIdx: itemRowIdx,
-          limitX: columnWidth - baseX
-        }
-      };
-    });
+    const rowSpace = Math.round(gridYNumber / (rowNumber + (totalLineLength === ECG.MAXLINENUMBER ? 1 : 0)));
+    const columnWidth = props.data.width / columnNumber;
+    const baseYCellNumber = Math.ceil(rowSpace / 2);
     function getFirstRowLineMaxHeight() {
-      const { valueUnit, mainYCellValue } = config;
-      const data1 = __dataList.value[0].data;
+      const { valueUnit, mainYCellValue: mainYCellValue2 } = config;
+      const data1 = __dataList[0].data;
       const data1Max = Math.max(...data1);
       const data1MaxHeight = computedY(data1Max);
       if (columnNumber !== 2) {
         return data1MaxHeight;
       }
-      const data7 = __dataList.value[6].data;
+      const data7 = __dataList[6].data;
       const data7Max = Math.max(...data7);
       const data7MaxHeight = computedY(data7Max);
       return Math.max(data1MaxHeight, data7MaxHeight);
       function computedY(value) {
         const currentMV = valueUnit === "uv" ? value * 1e-3 : valueUnit === "v" ? value * 1e3 : value;
-        return currentMV / mainYCellValue * yCellHeight.value;
+        return currentMV / mainYCellValue2 * yCellHeight;
       }
     }
-  });
-  const calibrationLineHeight = computed(() => {
-    var _a;
-    const { calibrationLineGridYNumber, mainYCellValue } = ((_a = props.data) == null ? void 0 : _a.config) || {};
-    if (calibrationLineGridYNumber)
-      return yCellHeight.value * calibrationLineGridYNumber;
-    return mainYCellValue ? yCellHeight.value / mainYCellValue : yCellHeight.value;
-  });
-  const propItems = reactive({
-    canvasWidth: props.data.width,
-    canvasHeight: props.data.height,
-    borderStyle: { ...defaultBorderStyle, ...props.data.borderStyle },
-    lineStyle: { ...defaultLineStyle, ...props.data.lineStyle },
-    titleStyle: { ...defaultTextStyle, ...props.data.titleStyle },
-    titleOffset: props.data.titleOffset,
-    measureLineStyle: { ...defaultLineStyle, ...props.data.measureLineStyle },
-    measureTextStyle: { ...defaultTextStyle, ...props.data.measureTextStyle },
-    grid: props.data.grid,
-    originX,
-    endX: endX.value,
-    originY,
-    endY: endY.value,
-    xCellWidth: xCellWidth.value,
-    yCellHeight: yCellHeight.value,
-    gridXNumber: gridXNumber.value,
-    gridYNumber: gridYNumber.value,
-    event: event.value,
-    dataList: dataList.value,
-    columnNumber: unref(layoutInfo).columnNumber,
-    rowNumber: unref(layoutInfo).rowNumber,
-    config: props.data.config,
-    calibrationLineHeight: unref(calibrationLineHeight)
-  });
+    const firstRowLineMaxHeight = getFirstRowLineMaxHeight();
+    const _baseY = yCellHeight * baseYCellNumber;
+    const baseY = columnNumber === 1 || _baseY < firstRowLineMaxHeight ? yCellHeight * Math.ceil(firstRowLineMaxHeight / yCellHeight) : _baseY;
+    const baseX = xCellWidth;
+    const derivedDataList = __dataList.map((item, idx) => {
+      const itemRowIdx = ECG.MAXLINENUMBER === totalLineLength && idx === totalLineLength - 1 ? rowNumber : idx % rowNumber;
+      const itemColumnIdx = ECG.MAXLINENUMBER === totalLineLength && idx === totalLineLength - 1 ? 0 : Math.floor(idx / rowNumber);
+      return {
+        ...item,
+        origin: {
+          x: itemColumnIdx * columnWidth + baseX,
+          y: itemRowIdx * (yCellHeight * rowSpace) + baseY,
+          rowIdx: itemRowIdx,
+          limitX: columnWidth - baseX
+        }
+      };
+    });
+    const { calibrationLineGridYNumber, mainYCellValue } = ((_f = props.data) == null ? void 0 : _f.config) || {};
+    const calibrationLineHeight = calibrationLineGridYNumber ? yCellHeight * calibrationLineGridYNumber : mainYCellValue ? yCellHeight / mainYCellValue : yCellHeight;
+    return {
+      canvasWidth: props.data.width,
+      canvasHeight: props.data.height,
+      borderStyle: { ...defaultBorderStyle, ...props.data.borderStyle },
+      lineStyle: { ...defaultLineStyle, ...props.data.lineStyle },
+      titleStyle: { ...defaultTextStyle, ...props.data.titleStyle },
+      titleOffset: props.data.titleOffset,
+      measureLineStyle: { ...defaultLineStyle, ...props.data.measureLineStyle },
+      measureTextStyle: { ...defaultTextStyle, ...props.data.measureTextStyle },
+      grid: props.data.grid,
+      originX,
+      endX,
+      originY,
+      endY,
+      xCellWidth,
+      yCellHeight,
+      gridXNumber,
+      gridYNumber,
+      event,
+      dataList: derivedDataList,
+      columnNumber,
+      rowNumber,
+      config: props.data.config,
+      calibrationLineHeight
+    };
+  }
+  const propItems = reactive(buildDerived());
   function getGridInfo() {
     return {
-      cellWidth: xCellWidth.value,
-      cellHeight: yCellHeight.value,
+      cellWidth: propItems.xCellWidth,
+      cellHeight: propItems.yCellHeight,
       smallCellNumber: ECG.SMALLCELLNUMBER
     };
   }