[Core] [DataSet] [Visual] Add pie chart (close #613)

2024-12-03 20:48:44 +08:00 · 2024-02-01 16:20:02 +08:00 · 2024-02-01 16:20:02 +08:00 · fcba0cbba4
commit fcba0cbba4
parent 9da677a3fd
10 changed files with 191 additions and 3 deletions
--- a/core/datacap-web/src/components/visual/Configuration.ts
+++ b/core/datacap-web/src/components/visual/Configuration.ts
@ -8,6 +8,7 @@ export class Configuration
  message: null;
  chartConfigure? = {
    xAxis: null,
-    yAxis: null
+    yAxis: null,
+    outerRadius: null
  }
 }
--- a/core/datacap-web/src/components/visual/Type.ts
+++ b/core/datacap-web/src/components/visual/Type.ts
@ -4,4 +4,5 @@ export enum Type
  LINE = ('LINE'),
  BAR = ('BAR'),
  AREA = ('AREA'),
+  PIE = ('PIE'),
 }
--- a/core/datacap-web/src/components/visual/VisualEditor.vue
+++ b/core/datacap-web/src/components/visual/VisualEditor.vue
@ -29,6 +29,10 @@
                  :configuration="configuration"
                  @commitOptions="handlerCommit">
      </VisualArea>
+      <VisualPie v-else-if="configuration.type === Type.PIE"
+                 :configuration="configuration"
+                 @commitOptions="handlerCommit">
+      </VisualPie>
    </div>
  </div>
 </template>
@ -39,6 +43,7 @@ import VisualLine from "@/components/visual/components/VisualLine.vue";
 import {Type} from "@/components/visual/Type";
 import VisualBar from "@/components/visual/components/VisualBar.vue";
 import VisualArea from "@/components/visual/components/VisualArea.vue";
+import VisualPie from "@/components/visual/components/VisualPie.vue";

 export default {
  name: 'VisualEditor',
@ -48,7 +53,7 @@ export default {
      return Type
    }
  },
-  components: {VisualArea, VisualBar, VisualLine, VisualTable},
+  components: {VisualPie, VisualArea, VisualBar, VisualLine, VisualTable},
  props: {
    configuration: {
      type: Configuration
--- a/core/datacap-web/src/components/visual/VisualView.vue
+++ b/core/datacap-web/src/components/visual/VisualView.vue
@ -28,6 +28,12 @@
                  :width="width"
                  :height="height">
      </VisualArea>
+      <VisualPie v-else-if="configuration.type === Type.PIE"
+                 :configuration="localConfiguration"
+                 :submitted="false"
+                 :width="width"
+                 :height="height">
+      </VisualPie>
    </div>
  </div>
 </template>
@ -41,6 +47,7 @@ import DatasetService from "@/services/admin/DatasetService";
 import {cloneDeep} from "lodash";
 import CircularLoading from "@/components/loading/CircularLoading.vue";
 import VisualArea from "@/components/visual/components/VisualArea.vue";
+import VisualPie from "@/components/visual/components/VisualPie.vue";

 export default {
  name: 'VisualView',
@ -50,7 +57,7 @@ export default {
      return Type
    }
  },
-  components: {VisualArea, CircularLoading, VisualBar, VisualLine, VisualTable},
+  components: {VisualPie, VisualArea, CircularLoading, VisualBar, VisualLine, VisualTable},
  props: {
    configuration: {
      type: Configuration
--- a/core/datacap-web/src/components/visual/components/VisualPie.vue
+++ b/core/datacap-web/src/components/visual/components/VisualPie.vue
@ -0,0 +1,81 @@
+<template>
+  <div>
+    <div ref="content"
+         :style="{width: width, height: height}">
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import {Configuration} from "@/components/visual/Configuration"
+import VChart from '@visactor/vchart'
+import {cloneDeep} from "lodash";
+
+let instance: VChart
+
+export default {
+  name: 'VisualPie',
+  props: {
+    configuration: {
+      type: Configuration
+    },
+    submitted: {
+      type: Boolean,
+      default: true
+    },
+    width: {
+      type: String,
+      default: () => '100%'
+    },
+    height: {
+      type: String,
+      default: () => '400px'
+    }
+  },
+  watch: {
+    configuration: {
+      handler: 'handlerReset',
+      deep: true
+    }
+  },
+  created()
+  {
+    this.handlerInitialize(false)
+  },
+  methods: {
+    handlerInitialize(reset: boolean)
+    {
+      setTimeout(() => {
+        try {
+          const options = {
+            type: 'pie',
+            data: [{values: this.configuration.columns}],
+            categoryField: this.configuration.chartConfigure.xAxis,
+            valueField: this.configuration.chartConfigure.yAxis,
+            outerRadius: this.configuration.chartConfigure.outerRadius
+          }
+          if (!reset) {
+            instance = new VChart(options, {dom: this.$refs.content})
+            instance.renderAsync()
+          }
+          else {
+            instance.updateSpec(options, true)
+          }
+          if (this.submitted) {
+            const cloneOptions = cloneDeep(this.configuration)
+            cloneOptions.headers = []
+            cloneOptions.columns = []
+            this.$emit('commitOptions', cloneOptions)
+          }
+        }
+        catch (e) {
+          console.warn(e)
+        }
+      })
+    },
+    handlerReset()
+    {
+      this.handlerInitialize(true)
+    }
+  }
+}
+</script>
--- a/core/datacap-web/src/fontawesome.ts
+++ b/core/datacap-web/src/fontawesome.ts
@ -12,6 +12,7 @@ import {
  faChartArea,
  faChartBar,
  faChartLine,
+  faChartPie,
  faCircle,
  faCircleInfo,
  faCircleMinus,
@ -71,6 +72,7 @@ const createIcons = (app: any) => {
    faChartLine,
    faChartBar,
    faChartArea,
+    faChartPie,
    faLeaf,
    faPenToSquare,
    faSquarePen,
--- a/core/datacap-web/src/i18n/langs/en/dataset.ts
+++ b/core/datacap-web/src/i18n/langs/en/dataset.ts
@ -45,10 +45,14 @@ export default {
  visualTypeLine: 'Line',
  visualTypeBar: 'Bar',
  visualTypeArea: 'Area',
+  visualTypePie: 'Pie',
  visualConfigure: 'Visual Configure',
  visualConfigureNotSpecified: 'No configuration items are available',
  visualConfigureXAxis: 'X Axis',
  visualConfigureYAxis: 'Y Axis',
+  visualConfigureCategoryField: 'Category',
+  visualConfigureValueField: 'Value',
+  visualConfigureOuterRadius: 'Outer Radius',
  columnExpressionMax: 'Maximum',
  columnExpressionMin: 'Minimum',
  columnExpressionSum: 'Sum',
--- a/core/datacap-web/src/i18n/langs/zhCn/dataset.ts
+++ b/core/datacap-web/src/i18n/langs/zhCn/dataset.ts
@ -45,10 +45,14 @@ export default {
  visualTypeLine: '折线图',
  visualTypeBar: '柱状图',
  visualTypeArea: '面积图',
+  visualTypePie: '饼图',
  visualConfigure: '可视化配置',
  visualConfigureNotSpecified: '暂无可用配置项',
  visualConfigureXAxis: 'X轴',
  visualConfigureYAxis: 'Y轴',
+  visualConfigureCategoryField: '类别',
+  visualConfigureValueField: '值',
+  visualConfigureOuterRadius: '外半径',
  columnExpressionMax: '最大值',
  columnExpressionMin: '最小值',
  columnExpressionSum: '总和',
--- a/core/datacap-web/src/views/admin/dataset/DatasetAdhoc.vue
+++ b/core/datacap-web/src/views/admin/dataset/DatasetAdhoc.vue
@ -206,6 +206,14 @@
                    </FontAwesomeIcon>
                  </Tooltip>
                </Radio>
+                <Radio :label="Type.PIE">
+                  <Tooltip transfer
+                           :content="$t('dataset.visualTypePie')">
+                    <FontAwesomeIcon icon="pie-chart"
+                                     size="2x">
+                    </FontAwesomeIcon>
+                  </Tooltip>
+                </Radio>
              </Row>
            </RadioGroup>
            <Divider orientation="left"
@ -224,6 +232,10 @@
                                        :columns="configuration.headers"
                                        @commit="handlerCommit">
            </DatasetVisualConfigureArea>
+            <DatasetVisualConfigurePie v-else-if="configuration.type === Type.PIE"
+                                       :columns="configuration.headers"
+                                       @commit="handlerCommit">
+            </DatasetVisualConfigurePie>
            <Result v-else>
              <template #desc>
                {{ $t('dataset.visualConfigureNotSpecified') }}
@ -285,6 +297,7 @@ import DatasetColumnConfigure from "@/views/admin/dataset/components/adhoc/Datas
 import DatasetColumnMetric from "@/views/admin/dataset/components/adhoc/DatasetColumnMetric.vue";
 import ReportService from "@/services/admin/ReportService";
 import DatasetVisualConfigureArea from "@/views/admin/dataset/components/adhoc/DatasetVisualConfigureArea.vue";
+import DatasetVisualConfigurePie from "@/views/admin/dataset/components/adhoc/DatasetVisualConfigurePie.vue";

 export default {
  name: 'DatasetAdhoc',
@ -299,6 +312,7 @@ export default {
    }
  },
  components: {
+    DatasetVisualConfigurePie,
    DatasetVisualConfigureArea,
    DatasetColumnMetric,
    DatasetColumnConfigure, SqlDetail, DatasetVisualConfigureBar, DatasetVisualConfigureLine, CircularLoading, VisualEditor, FontAwesomeIcon, Draggable
--- a/core/datacap-web/src/views/admin/dataset/components/adhoc/DatasetVisualConfigurePie.vue
+++ b/core/datacap-web/src/views/admin/dataset/components/adhoc/DatasetVisualConfigurePie.vue
@ -0,0 +1,69 @@
+<template>
+  <div>
+    <Form :model="formState"
+          :label-width="60">
+      <FormItem prop="xAxis"
+                :label="$t('dataset.visualConfigureCategoryField')">
+        <Select v-model="formState.xAxis">
+          <Option v-for="item in columns"
+                  :key="item"
+                  :value="item">
+            {{ item }}
+          </Option>
+        </Select>
+      </FormItem>
+      <FormItem prop="yAxis"
+                :label="$t('dataset.visualConfigureValueField')">
+        <Select v-model="formState.yAxis">
+          <Option v-for="item in columns"
+                  :key="item"
+                  :value="item">
+            {{ item }}
+          </Option>
+        </Select>
+      </FormItem>
+      <FormItem prop="outerRadius"
+                :label="$t('dataset.visualConfigureOuterRadius')">
+        <Slider v-model="formState.outerRadius"
+                :min="0.01"
+                :max="10"
+                step="0.1">
+        </Slider>
+      </FormItem>
+    </Form>
+  </div>
+</template>
+<script lang="ts">
+
+export default {
+  name: 'DatasetVisualConfigurePie',
+  props: {
+    columns: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    formState: {
+      handler: 'handlerCommit',
+      deep: true
+    }
+  },
+  data()
+  {
+    return {
+      formState: {
+        xAxis: null,
+        yAxis: null,
+        outerRadius: 0.8
+      }
+    }
+  },
+  methods: {
+    handlerCommit()
+    {
+      this.$emit('commit', this.formState)
+    }
+  }
+};
+</script>