From dca1605fbfbc79ddc365301f3a1ddc90f5c8821c Mon Sep 17 00:00:00 2001
From: nowisfuture <lnzhangsong@live.com>
Date: Sun, 26 Sep 2021 16:01:16 +0800
Subject: [PATCH 1/2] =?UTF-8?q?refactor(quadrant-diagram):=20canvas=20?=
 =?UTF-8?q?=E5=AE=BD=E9=AB=98=E5=B1=9E=E6=80=A7=E7=BB=91=E5=AE=9A=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/axis/index.tsx              | 12 ++++--------
 .../quadrant-diagram/src/quadrant-diagram.tsx  | 18 +++++++-----------
 2 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/devui/quadrant-diagram/src/components/axis/index.tsx b/devui/quadrant-diagram/src/components/axis/index.tsx
index 0e0d7d39..8929a298 100644
--- a/devui/quadrant-diagram/src/components/axis/index.tsx
+++ b/devui/quadrant-diagram/src/components/axis/index.tsx
@@ -33,14 +33,12 @@ export default defineComponent({
     })
 
     const axisConfigsVal: IAxisConfigs = axisConfigs.value
-    const viewVal: IViewConfigs = view.value
-
-
+    
     onMounted(() => {
       resetAxis()
     })
     
-    watch(viewVal, () => {
+    watch(view.value, () => {
       resetAxis()
     })
 
@@ -56,8 +54,6 @@ export default defineComponent({
      */
     const initAxisData = () => {
       quadrantAxis.value = document.querySelector('#devui-quadrant-axis-' + diagramId.value)
-      quadrantAxis.value.width = viewVal.width
-      quadrantAxis.value.height = viewVal.height
     }
 
     const setAxisData = () => {
@@ -218,10 +214,10 @@ export default defineComponent({
 
   },
   render() {
-    const { diagramId } = this
+    const { diagramId, view } = this
     return (
       <div>
-        <canvas id={'devui-quadrant-axis-' + diagramId}></canvas>
+        <canvas id={'devui-quadrant-axis-' + diagramId} height={view.height} width={view.width}></canvas>
       </div>
     )
   }
diff --git a/devui/quadrant-diagram/src/quadrant-diagram.tsx b/devui/quadrant-diagram/src/quadrant-diagram.tsx
index 27b01404..8c15874e 100644
--- a/devui/quadrant-diagram/src/quadrant-diagram.tsx
+++ b/devui/quadrant-diagram/src/quadrant-diagram.tsx
@@ -6,13 +6,9 @@ import { DEFAULT_AXIS_CONFIGS } from '../config'
 export default defineComponent({
   name: 'DQuadrantDiagram',
   props: quadrantDiagramProps,
-  emits: [],
   setup(props: QuadrantDiagramProps) {
     const { diagramId, axisConfigs, view } = toRefs(props)
 
-    const axisConfigsVal = axisConfigs.value
-    const viewVal = view.value
-
     const calAxisConfig = reactive({
       axisOrigin: { x: null, y: null },
       axisTop: null,
@@ -33,22 +29,22 @@ export default defineComponent({
         }
       }
       calAxisConfig.axisOrigin = {
-        x: axisConfigsVal.originPosition.left,
-        y: viewVal.height - axisConfigsVal.originPosition.bottom
+        x: axisConfigs.value.originPosition.left,
+        y: view.value.height - axisConfigs.value.originPosition.bottom
       }
-      calAxisConfig.axisTop = axisConfigsVal.axisMargin
-      calAxisConfig.axisRight = viewVal.width - axisConfigsVal.axisMargin
+      calAxisConfig.axisTop = axisConfigs.value.axisMargin
+      calAxisConfig.axisRight = view.value.width - axisConfigs.value.axisMargin
       calAxisConfig.axisWidth = calAxisConfig.axisRight - calAxisConfig.axisOrigin.x
       calAxisConfig.axisHeight = calAxisConfig.axisOrigin.y - calAxisConfig.axisTop
-      calAxisConfig.yAxisTicksNum = axisConfigsVal.yAxisRange.max - axisConfigsVal.yAxisRange.min
-      calAxisConfig.xAxisTicksNum = axisConfigsVal.xAxisRange.max - axisConfigsVal.xAxisRange.min
+      calAxisConfig.yAxisTicksNum = axisConfigs.value.yAxisRange.max - axisConfigs.value.yAxisRange.min
+      calAxisConfig.xAxisTicksNum = axisConfigs.value.xAxisRange.max - axisConfigs.value.xAxisRange.min
       calAxisConfig.xTickSpacing = calAxisConfig.axisWidth / calAxisConfig.xAxisTicksNum
       calAxisConfig.yTickSpacing = calAxisConfig.axisHeight / calAxisConfig.yAxisTicksNum
     }
 
     initAxisData()
 
-    watch(viewVal, () => {
+    watch(view.value, () => {
       initAxisData()
     })
 
-- 
Gitee


From e6df839cfa3698d1150412890c32087a6bc8bc06 Mon Sep 17 00:00:00 2001
From: nowisfuture <lnzhangsong@live.com>
Date: Sun, 26 Sep 2021 16:03:21 +0800
Subject: [PATCH 2/2] =?UTF-8?q?test(quadrant-diagram):=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=AE=BD=E9=AB=98=E6=94=B9=E5=8F=98=E5=93=8D=E5=BA=94?=
 =?UTF-8?q?=E6=80=A7=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../__tests__/quadrant-diagram.spec.ts        | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 devui/quadrant-diagram/__tests__/quadrant-diagram.spec.ts

diff --git a/devui/quadrant-diagram/__tests__/quadrant-diagram.spec.ts b/devui/quadrant-diagram/__tests__/quadrant-diagram.spec.ts
new file mode 100644
index 00000000..bb4f8a56
--- /dev/null
+++ b/devui/quadrant-diagram/__tests__/quadrant-diagram.spec.ts
@@ -0,0 +1,32 @@
+import { mount } from '@vue/test-utils';
+import { reactive, nextTick } from 'vue';
+
+import DQuadrantDiagram from '../src/quadrant-diagram';
+
+describe('d-quadrant-diagram', () => {
+  it('quadrantDiagramResponse', async () => {
+    const view = reactive({
+      height: 200,
+      width: 200,
+    });
+
+    const wrapper = mount({
+      components: { DQuadrantDiagram },
+      template: `<d-quadrant-diagram :view='view'/>`,
+      propsData: {
+        view,
+      },
+      setup() {
+        return {
+          view
+        };
+      }
+    });
+    console.log(wrapper.html())
+
+    expect(wrapper.find('#devui-quadrant-axis-1').element['height']).toEqual(200);
+    view.height = 400;
+    await nextTick();
+    expect(wrapper.find('#devui-quadrant-axis-1').element['height']).toEqual(400);
+  })
+});
\ No newline at end of file
-- 
Gitee