@opentiny/vue-docs 2.2.19 → 2.2.21

package/demos/pc/app/chart/histogram/histogram.spec.ts

@@ -0,0 +1,49 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-histogram#histogram-base')
+  const chart = page.locator('#histogram-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-histogram#histogram-demo2')
+  const chart = page.locator('#histogram-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-histogram#histogram-demo3')
+  const chart = page.locator('#histogram-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
+
+test('demo4', async ({ page }) => {
+  await page.goto('chart-histogram#histogram-demo4')
+  const chart = page.locator('#histogram-demo4 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo4.png')
+})
+
+test('demo5', async ({ page }) => {
+  await page.goto('chart-histogram#histogram-demo5')
+  const chart = page.locator('#histogram-demo5 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo5.png')
+})
+
+test('demo6', async ({ page }) => {
+  await page.goto('chart-histogram#histogram-demo6')
+  const chart = page.locator('#histogram-demo6 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo6.png')
+})
+
+test('demo7', async ({ page }) => {
+  await page.goto('chart-histogram#histogram-demo7')
+  const chart = page.locator('#histogram-demo7 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo7.png')
+})
+
+test('demo8', async ({ page }) => {
+  await page.goto('chart-histogram#histogram-demo8')
+  const chart = page.locator('#histogram-demo8 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo8.png')
+})

package/demos/pc/app/chart/line/line.spec.ts

@@ -0,0 +1,55 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-line#line-base')
+  const chart = page.locator('#line-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-line#line-demo2')
+  const chart = page.locator('#line-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-line#line-demo3')
+  const chart = page.locator('#line-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
+
+test('demo4', async ({ page }) => {
+  await page.goto('chart-line#line-demo4')
+  const chart = page.locator('#line-demo4 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo4.png')
+})
+
+test('demo5', async ({ page }) => {
+  await page.goto('chart-line#line-demo5')
+  const chart = page.locator('#line-demo5 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo5.png')
+})
+
+test('demo6', async ({ page }) => {
+  await page.goto('chart-line#line-demo6')
+  const chart = page.locator('#line-demo6 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo6.png')
+})
+
+test('demo7', async ({ page }) => {
+  await page.goto('chart-line#line-demo7')
+  const chart = page.locator('#line-demo7 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo7.png')
+})
+
+test('demo8', async ({ page }) => {
+  await page.goto('chart-line#line-demo8')
+  const chart = page.locator('#line-demo8 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo8.png')
+})
+
+test('demo9', async ({ page }) => {
+  await page.goto('chart-line#line-demo9')
+  const chart = page.locator('#line-demo9 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo9.png')
+})

package/demos/pc/app/chart/liquidfill/liquidfill.spec.ts

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test'
+
+test('demo5', async ({ page }) => {
+  await page.goto('chart-liquidfill#liquidfill-demo5')
+  const chart = page.locator('#liquidfill-demo5 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo5.png')
+})

package/demos/pc/app/chart/map/base-composition-api.vue

@@ -12,6 +12,7 @@
 <script setup lang="jsx">
 import { ref, getCurrentInstance } from 'vue'
 import { ChartMap as TinyChartMap } from '@opentiny/vue'
+import chinaData from './china.js'
 
 const chartData = ref({
   columns: ['位置', 'GDP'],
@@ -30,11 +31,15 @@ const chartSettings = ref({
   }
 })
 
+const proxy = getCurrentInstance().appContext.config.globalProperties
+
 if (window._map_china) {
   chartSettings.value.mapOrigin = window._map_china
-} else {
-  getCurrentInstance().appContext.config.globalProperties.$service.network.get('services/mapChina').then(({ data }) => {
+} else if (proxy.$service?.network) {
+  proxy.$service.network.get('services/mapChina').then(({ data }) => {
     chartSettings.value.mapOrigin = data
   })
+} else if (chinaData) {
+  chartSettings.value.mapOrigin = chinaData
 }
 </script>

package/demos/pc/app/chart/map/base.vue

@@ -11,6 +11,7 @@
 
 <script lang="jsx">
 import { ChartMap } from '@opentiny/vue'
+import chinaData from './china.js'
 
 export default {
   components: {
@@ -43,8 +44,8 @@ export default {
       this.$service.network.get('services/mapChina').then(({ data }) => {
         this.chartSettings.mapOrigin = data
       })
-    } else {
-      // 没有this.$service.network则空操作，防止js报错
+    } else if (chinaData) {
+      this.chartSettings.mapOrigin = chinaData
     }
   }
 }

package/demos/pc/app/chart/map/map.spec.ts

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-map#map-base')
+  const chart = page.locator('#map-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})

package/demos/pc/app/chart/pie/pie.spec.ts

@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test'
+
+test('base', async ({ page }) => {
+  await page.goto('chart-pie#pie-base')
+  const chart = page.locator('#pie-base .hui-chart')
+  await expect(chart).toHaveScreenshot('base.png')
+})
+
+test('demo2', async ({ page }) => {
+  await page.goto('chart-pie#pie-demo2')
+  const chart = page.locator('#pie-demo2 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo2.png')
+})
+
+test('demo3', async ({ page }) => {
+  await page.goto('chart-pie#pie-demo3')
+  const chart = page.locator('#pie-demo3 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo3.png')
+})
+
+test('demo4', async ({ page }) => {
+  await page.goto('chart-pie#pie-demo4')
+  const chart = page.locator('#pie-demo4 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo4.png')
+})
+
+test('demo5', async ({ page }) => {
+  await page.goto('chart-pie#pie-demo5')
+  const chart = page.locator('#pie-demo5 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo5.png')
+})
+
+test('demo6', async ({ page }) => {
+  await page.goto('chart-pie#pie-demo6')
+  const chart = page.locator('#pie-demo6 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo6.png')
+})
+
+test('demo7', async ({ page }) => {
+  await page.goto('chart-pie#pie-demo7')
+  const chart = page.locator('#pie-demo7 .hui-chart')
+  await expect(chart).toHaveScreenshot('demo7.png')
+})

package/demos/pc/app/chart/process/base-composition-api.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <tiny-chart-process :options="options"></tiny-chart-process>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ChartProcess as TinyChartProcess } from '@opentiny/vue'
+
+const options = ref({
+  // 图表名称
+  name: 'ProcessBarChart',
+  // 主题,默认值'light'
+  theme: 'light',
+  // Padding控制图表距离容器的上、右、下、左padding值
+  padding: [32, 32, 0, 32],
+  // 颜色组，循环使用
+  color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'],
+  // 数据
+  data: [
+    { name: 'UniEPMgr', value: 80 },
+    { name: 'SMLoglic', value: 65 },
+    { name: 'SSO', value: 45 },
+    { name: 'APIMgr', value: 20 },
+    { name: 'Logtransfer', value: 12 }
+  ]
+})
+</script>

package/demos/pc/app/chart/process/base.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <tiny-process :options="options"></tiny-process>
+  </div>
+</template>
+
+<script lang="jsx">
+import { ChartProcess } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyProcess: ChartProcess
+  },
+  data() {
+    return {
+      options: {
+        // 图表名称
+        name: 'ProcessBarChart',
+        // 主题,默认值'light'
+        theme: 'light',
+        // Padding控制图表距离容器的上、右、下、左padding值
+        padding: [32, 32, 0, 32],
+        // 颜色组，循环使用
+        color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'],
+        // 数据
+        data: [
+          { name: 'UniEPMgr', value: 80 },
+          { name: 'SMLoglic', value: 65 },
+          { name: 'SSO', value: 45 },
+          { name: 'APIMgr', value: 20 },
+          { name: 'Logtransfer', value: 12 }
+        ]
+      }
+    }
+  }
+}
+</script>

package/demos/pc/app/chart/process/demo2-composition-api.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <tiny-chart-process :options="options"></tiny-chart-process>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ChartProcess as TinyChartProcess } from '@opentiny/vue'
+
+const options = ref({
+  // 图表名称
+  name: 'ProcessBarChart',
+  // 主题,默认值'light'
+  theme: 'light',
+  // Padding控制图表距离容器的上、右、下、左padding值
+  padding: [32, 32, 0, 32],
+  // 颜色组，循环使用
+  color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'],
+  barWidth: 25,
+  unit: '',
+  calibrationValue: 200,
+  // 数据
+  data: [
+    { name: 'UniEPMgr', value: 80 },
+    { name: 'SMLoglic', value: 65 },
+    { name: 'SSO', value: 45 },
+    { name: 'APIMgr', value: 20 },
+    { name: 'Logtransfer', value: 12 }
+  ]
+})
+</script>

package/demos/pc/app/chart/process/demo2.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <tiny-process :options="options"></tiny-process>
+  </div>
+</template>
+
+<script lang="jsx">
+import { ChartProcess } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyProcess: ChartProcess
+  },
+  data() {
+    return {
+      options: {
+        // 图表名称
+        name: 'ProcessBarChart',
+        // 主题,默认值'light'
+        theme: 'light',
+        // Padding控制图表距离容器的上、右、下、左padding值
+        padding: [32, 32, 0, 32],
+        // 颜色组，循环使用
+        color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'],
+        barWidth: 25,
+        unit: '',
+        calibrationValue: 200,
+        // 数据
+        data: [
+          { name: 'UniEPMgr', value: 80 },
+          { name: 'SMLoglic', value: 65 },
+          { name: 'SSO', value: 45 },
+          { name: 'APIMgr', value: 20 },
+          { name: 'Logtransfer', value: 12 }
+        ]
+      }
+    }
+  }
+}
+</script>

package/demos/pc/app/chart/process/demo3-composition-api.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <tiny-chart-process :options="options"></tiny-chart-process>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ChartProcess as TinyChartProcess } from '@opentiny/vue'
+
+const options = ref({
+  // 图表名称
+  name: 'StackProcessBarChart',
+  // 主题,默认值'light'
+  theme: 'light',
+  // Padding控制图表距离容器的上、右、下、左padding值
+  padding: [32, 32, 0, 32],
+  // 颜色组，循环使用
+  color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'],
+  barWidth: 25,
+  calibrationValue: 250,
+  // 数据
+  data: [
+    {
+      name: 'China',
+      children: [
+        { type: 'Game', value: 30 },
+        { type: 'Move', value: 20 },
+        { type: 'Animation', value: 45 },
+        { type: 'Fiction', value: 60 }
+      ]
+    },
+    {
+      name: 'Mexico',
+      children: [
+        { type: 'Game', value: 12 },
+        { type: 'Move', value: 14 },
+        { type: 'Animation', value: 33 },
+        { type: 'Fiction', value: 44 }
+      ]
+    },
+    {
+      name: 'Canada',
+      children: [
+        { type: 'Game', value: 35 },
+        { type: 'Move', value: 45 },
+        { type: 'Animation', value: 19 },
+        { type: 'Fiction', value: 33 }
+      ]
+    },
+    {
+      name: 'Sweden',
+      children: [
+        { type: 'Game', value: 34 },
+        { type: 'Move', value: 10 },
+        { type: 'Animation', value: 8 },
+        { type: 'Fiction', value: 66 }
+      ]
+    },
+    {
+      name: 'Russia',
+      children: [
+        { type: 'Game', value: 77 },
+        { type: 'Move', value: 44 },
+        { type: 'Animation', value: 55 },
+        { type: 'Fiction', value: 66 }
+      ]
+    }
+  ]
+})
+</script>

package/demos/pc/app/chart/process/demo3.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <tiny-process :options="options"></tiny-process>
+  </div>
+</template>
+
+<script lang="jsx">
+import { ChartProcess } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyProcess: ChartProcess
+  },
+  data() {
+    return {
+      options: {
+        // 图表名称
+        name: 'StackProcessBarChart',
+        // 主题,默认值'light'
+        theme: 'light',
+        // Padding控制图表距离容器的上、右、下、左padding值
+        padding: [32, 32, 0, 32],
+        // 颜色组，循环使用
+        color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'],
+        barWidth: 25,
+        calibrationValue: 250,
+        // 数据
+        data: [
+          {
+            name: 'China',
+            children: [
+              { type: 'Game', value: 30 },
+              { type: 'Move', value: 20 },
+              { type: 'Animation', value: 45 },
+              { type: 'Fiction', value: 60 }
+            ]
+          },
+          {
+            name: 'Mexico',
+            children: [
+              { type: 'Game', value: 12 },
+              { type: 'Move', value: 14 },
+              { type: 'Animation', value: 33 },
+              { type: 'Fiction', value: 44 }
+            ]
+          },
+          {
+            name: 'Canada',
+            children: [
+              { type: 'Game', value: 35 },
+              { type: 'Move', value: 45 },
+              { type: 'Animation', value: 19 },
+              { type: 'Fiction', value: 33 }
+            ]
+          },
+          {
+            name: 'Sweden',
+            children: [
+              { type: 'Game', value: 34 },
+              { type: 'Move', value: 10 },
+              { type: 'Animation', value: 8 },
+              { type: 'Fiction', value: 66 }
+            ]
+          },
+          {
+            name: 'Russia',
+            children: [
+              { type: 'Game', value: 77 },
+              { type: 'Move', value: 44 },
+              { type: 'Animation', value: 55 },
+              { type: 'Fiction', value: 66 }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}
+</script>

package/demos/pc/app/chart/process/demo4-composition-api.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <tiny-chart-process :options="options"></tiny-chart-process>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ChartProcess as TinyChartProcess } from '@opentiny/vue'
+
+const options = ref({
+  name: 'ProcessBarChart',
+  theme: 'hwCloud-light',
+  padding: [32, 32, 0, 32],
+  state: {
+    error: 75,
+    warning: 60,
+    subwarning: 50,
+    success: 20
+  },
+  data: [
+    { name: 'UniEPMgr', value: 80 },
+    { name: 'SMLoglic', value: 65 },
+    { name: 'SSO', value: 55 },
+    { name: 'APIMgr', value: 35 },
+    { name: 'Logtransfer', value: 12 }
+  ]
+})
+</script>

package/demos/pc/app/chart/process/demo4.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <tiny-process :options="options"></tiny-process>
+  </div>
+</template>
+
+<script lang="jsx">
+import { ChartProcess } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyProcess: ChartProcess
+  },
+  data() {
+    return {
+      options: {
+        name: 'ProcessBarChart',
+        theme: 'hwCloud-light',
+        padding: [32, 32, 0, 32],
+        state: {
+          error: 75,
+          warning: 60,
+          subwarning: 50,
+          success: 20
+        },
+        data: [
+          { name: 'UniEPMgr', value: 80 },
+          { name: 'SMLoglic', value: 65 },
+          { name: 'SSO', value: 55 },
+          { name: 'APIMgr', value: 35 },
+          { name: 'Logtransfer', value: 12 }
+        ]
+      }
+    }
+  }
+}
+</script>

package/demos/pc/app/chart/process/demo5-composition-api.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <tiny-chart-process :options="options"></tiny-chart-process>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ChartProcess as TinyChartProcess } from '@opentiny/vue'
+
+const options = ref({
+  name: 'ProcessBarChart',
+  theme: 'hwCloud-light',
+  padding: [32, 32, 0, 32],
+  state: {
+    error: 75,
+    warning: 60,
+    subwarning: 40
+  },
+  data: [
+    { name: 'UniEPMgr', value: 80 },
+    { name: 'SMLoglic', value: 65 },
+    { name: 'SSO', value: 55 },
+    { name: 'APIMgr', value: 35 },
+    { name: null, value: null }
+  ]
+})
+</script>