From eeb1f4b2001a61b8bb677d6b88d512823f220abf Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 4 Feb 2024 18:20:49 +0800
Subject: [PATCH] [Core] [DataSet] [Chart] Support word cloud diagram (close
 #614)

---
 .../datacap-web/src/components/visual/Type.ts |  1 +
 .../src/components/visual/VisualEditor.vue    |  7 +-
 .../src/components/visual/VisualView.vue      |  9 ++-
 .../visual/components/VisualWordCloud.vue     | 81 +++++++++++++++++++
 core/datacap-web/src/fontawesome.ts           |  2 +
 core/datacap-web/src/i18n/langs/en/dataset.ts |  1 +
 .../src/i18n/langs/zhCn/dataset.ts            |  1 +
 .../src/views/admin/dataset/DatasetAdhoc.vue  | 14 ++++
 .../adhoc/DatasetVisualConfigureWordCloud.vue | 71 ++++++++++++++++
 9 files changed, 185 insertions(+), 2 deletions(-)
 create mode 100644 core/datacap-web/src/components/visual/components/VisualWordCloud.vue
 create mode 100644 core/datacap-web/src/views/admin/dataset/components/adhoc/DatasetVisualConfigureWordCloud.vue

diff --git a/core/datacap-web/src/components/visual/Type.ts b/core/datacap-web/src/components/visual/Type.ts
index 50ef021534..81d075eef4 100644
--- a/core/datacap-web/src/components/visual/Type.ts
+++ b/core/datacap-web/src/components/visual/Type.ts
@@ -6,4 +6,5 @@ export enum Type
   AREA = ('AREA'),
   PIE = ('PIE'),
   HISTOGRAM = ('HISTOGRAM'),
+  WORDCLOUD= ('WORDCLOUD'),
 }
diff --git a/core/datacap-web/src/components/visual/VisualEditor.vue b/core/datacap-web/src/components/visual/VisualEditor.vue
index 8998d07307..bd8b8909c3 100644
--- a/core/datacap-web/src/components/visual/VisualEditor.vue
+++ b/core/datacap-web/src/components/visual/VisualEditor.vue
@@ -37,6 +37,10 @@
                        :configuration="configuration"
                        @commitOptions="handlerCommit">
       </VisualHistogram>
+      <VisualWordCloud v-else-if="configuration.type === Type.WORDCLOUD"
+                       :configuration="configuration"
+                       @commitOptions="handlerCommit">
+      </VisualWordCloud>
     </div>
   </div>
 </template>
@@ -49,6 +53,7 @@ import VisualBar from "@/components/visual/components/VisualBar.vue";
 import VisualArea from "@/components/visual/components/VisualArea.vue";
 import VisualPie from "@/components/visual/components/VisualPie.vue";
 import VisualHistogram from "@/components/visual/components/VisualHistogram.vue";
+import VisualWordCloud from "@/components/visual/components/VisualWordCloud.vue";
 
 export default {
   name: 'VisualEditor',
@@ -58,7 +63,7 @@ export default {
       return Type
     }
   },
-  components: {VisualHistogram, VisualPie, VisualArea, VisualBar, VisualLine, VisualTable},
+  components: {VisualWordCloud, VisualHistogram, VisualPie, VisualArea, VisualBar, VisualLine, VisualTable},
   props: {
     configuration: {
       type: Configuration
diff --git a/core/datacap-web/src/components/visual/VisualView.vue b/core/datacap-web/src/components/visual/VisualView.vue
index cd7a666eb0..73232f061a 100644
--- a/core/datacap-web/src/components/visual/VisualView.vue
+++ b/core/datacap-web/src/components/visual/VisualView.vue
@@ -40,6 +40,12 @@
                        :width="width"
                        :height="height">
       </VisualHistogram>
+      <VisualWordCloud v-else-if="configuration.type === Type.WORDCLOUD"
+                       :configuration="localConfiguration"
+                       :submitted="false"
+                       :width="width"
+                       :height="height">
+      </VisualWordCloud>
     </div>
   </div>
 </template>
@@ -55,6 +61,7 @@ import CircularLoading from "@/components/loading/CircularLoading.vue";
 import VisualArea from "@/components/visual/components/VisualArea.vue";
 import VisualPie from "@/components/visual/components/VisualPie.vue";
 import VisualHistogram from "@/components/visual/components/VisualHistogram.vue";
+import VisualWordCloud from "@/components/visual/components/VisualWordCloud.vue";
 
 export default {
   name: 'VisualView',
@@ -64,7 +71,7 @@ export default {
       return Type
     }
   },
-  components: {VisualHistogram, VisualPie, VisualArea, CircularLoading, VisualBar, VisualLine, VisualTable},
+  components: {VisualWordCloud, VisualHistogram, VisualPie, VisualArea, CircularLoading, VisualBar, VisualLine, VisualTable},
   props: {
     configuration: {
       type: Configuration
diff --git a/core/datacap-web/src/components/visual/components/VisualWordCloud.vue b/core/datacap-web/src/components/visual/components/VisualWordCloud.vue
new file mode 100644
index 0000000000..d0dded137f
--- /dev/null
+++ b/core/datacap-web/src/components/visual/components/VisualWordCloud.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: 'VisualWordCloud',
+  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: 'wordCloud',
+            data: {values: this.configuration.columns},
+            nameField: this.configuration.chartConfigure.xAxis,
+            valueField: this.configuration.chartConfigure.yAxis,
+            seriesField: this.configuration.chartConfigure.series
+          }
+          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>
diff --git a/core/datacap-web/src/fontawesome.ts b/core/datacap-web/src/fontawesome.ts
index 40b9373c2d..d0051ba96f 100644
--- a/core/datacap-web/src/fontawesome.ts
+++ b/core/datacap-web/src/fontawesome.ts
@@ -56,6 +56,7 @@ import {
   faUpload
 } from '@fortawesome/free-solid-svg-icons'
 import {faChartSimple} from "@fortawesome/free-solid-svg-icons/faChartSimple";
+import {faCloud} from "@fortawesome/free-solid-svg-icons/faCloud";
 
 /**
  * Creates icons for the given app.
@@ -65,6 +66,7 @@ import {faChartSimple} from "@fortawesome/free-solid-svg-icons/faChartSimple";
 const createIcons = (app: any) => {
   library.add(faArrowRight,
     faPen,
+    faCloud,
     faChartSimple,
     faCirclePlus,
     faCirclePlay,
diff --git a/core/datacap-web/src/i18n/langs/en/dataset.ts b/core/datacap-web/src/i18n/langs/en/dataset.ts
index 725619c89e..41d30db0b2 100644
--- a/core/datacap-web/src/i18n/langs/en/dataset.ts
+++ b/core/datacap-web/src/i18n/langs/en/dataset.ts
@@ -48,6 +48,7 @@ export default {
   visualTypeArea: 'Area',
   visualTypePie: 'Pie',
   visualTypeHistogram: 'Histogram',
+  visualTypeWordCloud: 'Word Cloud',
   visualConfigure: 'Visual Configure',
   visualConfigureNotSpecified: 'No configuration items are available',
   visualConfigureXAxis: 'X Axis',
diff --git a/core/datacap-web/src/i18n/langs/zhCn/dataset.ts b/core/datacap-web/src/i18n/langs/zhCn/dataset.ts
index ad5f603ac9..e7aba8fb5f 100644
--- a/core/datacap-web/src/i18n/langs/zhCn/dataset.ts
+++ b/core/datacap-web/src/i18n/langs/zhCn/dataset.ts
@@ -48,6 +48,7 @@ export default {
   visualTypeArea: '面积图',
   visualTypePie: '饼图',
   visualTypeHistogram: '直方图',
+  visualTypeWordCloud: '词云图',
   visualConfigure: '可视化配置',
   visualConfigureNotSpecified: '暂无可用配置项',
   visualConfigureXAxis: 'X轴',
diff --git a/core/datacap-web/src/views/admin/dataset/DatasetAdhoc.vue b/core/datacap-web/src/views/admin/dataset/DatasetAdhoc.vue
index 32688bd7ae..6566a26f4d 100644
--- a/core/datacap-web/src/views/admin/dataset/DatasetAdhoc.vue
+++ b/core/datacap-web/src/views/admin/dataset/DatasetAdhoc.vue
@@ -222,6 +222,14 @@
                     </FontAwesomeIcon>
                   </Tooltip>
                 </Radio>
+                <Radio :label="Type.WORDCLOUD">
+                  <Tooltip transfer
+                           :content="$t('dataset.visualTypeWordCloud')">
+                    <FontAwesomeIcon icon="cloud"
+                                     size="2x">
+                    </FontAwesomeIcon>
+                  </Tooltip>
+                </Radio>
               </Row>
             </RadioGroup>
             <Divider orientation="left"
@@ -248,6 +256,10 @@
                                              :columns="configuration.headers"
                                              @commit="handlerCommit">
             </DatasetVisualConfigureHistogram>
+            <DatasetVisualConfigureWordCloud v-else-if="configuration.type === Type.WORDCLOUD"
+                                             :columns="configuration.headers"
+                                             @commit="handlerCommit">
+            </DatasetVisualConfigureWordCloud>
             <Result v-else>
               <template #desc>
                 {{ $t('dataset.visualConfigureNotSpecified') }}
@@ -311,6 +323,7 @@ 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";
 import DatasetVisualConfigureHistogram from "@/views/admin/dataset/components/adhoc/DatasetVisualConfigureHistogram.vue";
+import DatasetVisualConfigureWordCloud from "@/views/admin/dataset/components/adhoc/DatasetVisualConfigureWordCloud.vue";
 
 export default {
   name: 'DatasetAdhoc',
@@ -325,6 +338,7 @@ export default {
     }
   },
   components: {
+    DatasetVisualConfigureWordCloud,
     DatasetVisualConfigureHistogram,
     DatasetVisualConfigurePie,
     DatasetVisualConfigureArea,
diff --git a/core/datacap-web/src/views/admin/dataset/components/adhoc/DatasetVisualConfigureWordCloud.vue b/core/datacap-web/src/views/admin/dataset/components/adhoc/DatasetVisualConfigureWordCloud.vue
new file mode 100644
index 0000000000..62393929c0
--- /dev/null
+++ b/core/datacap-web/src/views/admin/dataset/components/adhoc/DatasetVisualConfigureWordCloud.vue
@@ -0,0 +1,71 @@
+<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="series"
+                :label="$t('dataset.visualConfigureSeriesField')">
+        <Select v-model="formState.series">
+          <Option v-for="item in columns"
+                  :key="item"
+                  :value="item">
+            {{ item }}
+          </Option>
+        </Select>
+      </FormItem>
+    </Form>
+  </div>
+</template>
+<script lang="ts">
+
+export default {
+  name: 'DatasetVisualConfigureWordCloud',
+  props: {
+    columns: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    formState: {
+      handler: 'handlerCommit',
+      deep: true
+    }
+  },
+  data()
+  {
+    return {
+      formState: {
+        xAxis: null,
+        yAxis: null,
+        series: null
+      }
+    }
+  },
+  methods: {
+    handlerCommit()
+    {
+      this.$emit('commit', this.formState)
+    }
+  }
+};
+</script>