Merge pull request #420 from lowcoder-org/echarts-wordcloud

Adding eCharts Wordcloud Support (as our Lead Dev is currently not available, I surpassed the review. But tested everything...)

Author: FalkWolsky

.DS_Store

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "type": "module",
   "license": "MIT",
   "dependencies": {
@@ -15,6 +15,7 @@
     "@types/react-dom": "17",
     "big.js": "^6.2.1",
     "echarts-extension-gmap": "^1.6.0",
+    "echarts-wordcloud": "^2.1.0",
     "lowcoder-cli": "workspace:^",
     "lowcoder-sdk": "workspace:^",
     "mermaid": "^10.2.4",
@@ -29,16 +30,16 @@
         "name": "Chart",
         "icon": "./icons/icon-chart.svg",
         "layoutInfo": {
-          "w": 11,
-          "h": 35
+          "w": 15,
+          "h": 40
         }
       },
       "imageEditor": {
         "name": "Image Editor",
         "icon": "./icons/icon-chart.svg",
         "layoutInfo": {
           "w": 15,
-          "h": 60
+          "h": 40
         }
       },
       "calendar": {
@@ -48,6 +49,14 @@
           "w": 15,
           "h": 60
         }
+      },
+      "mermaid": {
+        "name": "Mermaid",
+        "icon": "./icons/mermaidchart.svg",
+        "layoutInfo": {
+          "w": 15,
+          "h": 40
+        }
       }
     }
   },

client/packages/lowcoder-comps/icons/mermaidchart.svg

@@ -1,4 +1,5 @@
 import * as echarts from "echarts";
+import "echarts-wordcloud";
 import { EChartsReactProps, EChartsInstance, EChartsOptionWithMap } from "./types";
 import EChartsReactCore from "./core";
 

client/packages/lowcoder-comps/package.json

@@ -1,9 +1,11 @@
 import { ChartCompWithDefault } from "./comps/chartComp/chartComp";
 import { ImageEditorComp } from "./comps/imageEditorComp/index";
 import { CalendarComp } from "./comps/calendarComp/calendarComp";
+import { MermaidComp } from "comps/mermaidComp"; 
 
 export default {
   chart: ChartCompWithDefault,
   imageEditor: ImageEditorComp,
   calendar: CalendarComp,
+  mermaid: MermaidComp,
 };

client/packages/lowcoder-comps/src/comps/chartComp/reactEcharts/index.ts

@@ -224,6 +224,7 @@ export { ReactComponent as GraphqlIcon } from "./icon-query-Graphql.svg";
 export { ReactComponent as SnowflakeIcon } from "./icon-query-snowflake.svg";
 export { ReactComponent as MariaDBIcon } from "./icon-query-MariaDB.svg";
 export { ReactComponent as imageEditorIcon } from "./icon-insert-imageEditor.svg";
+export { ReactComponent as MermaidIcon } from "./icon-mermaid.svg";
 export { ReactComponent as HomeSettingsIcon } from "./icon-home-settings.svg";
 export { ReactComponent as HomeSettingsActiveIcon } from "./icon-home-settings-active.svg";
 export { ReactComponent as HelpGithubIcon } from "./icon-help-github.svg";

client/packages/lowcoder-comps/src/index.ts

@@ -49,6 +49,7 @@
     "copy-to-clipboard": "^3.3.3",
     "core-js": "^3.25.2",
     "echarts": "^5.4.2",
+    "echarts-wordcloud": "^2.1.0",
     "eslint4b-prebuilt-2": "^7.32.0",
     "file-saver": "^2.0.5",
     "github-markdown-css": "^5.1.0",

client/packages/lowcoder-design/src/icons/icon-mermaid.svg

@@ -100,6 +100,7 @@ import {
   MentionIcon,
   AutoCompleteCompIcon,
   ResponsiveLayoutCompIcon,
+  MermaidIcon,
 } from "lowcoder-design";
 
 import { defaultFormData, FormComp } from "./comps/formComp/formComp";
@@ -841,6 +842,19 @@ const uiCompMap: Registry = {
       h: 60,
     },
   },
+  mermaid: {
+    name: trans("uiComp.mermaidCompName"),
+    enName: "Mermaid Charts",
+    comp: remoteComp({ ...builtInRemoteComps, compName: "mermaid" }),
+    description: trans("uiComp.mermaidCompDesc"),
+    categories: ["dataDisplay"],
+    icon: MermaidIcon,
+    keywords: trans("uiComp.mermaidCompKeywords"),
+    layoutInfo: {
+      w: 15,
+      h: 60,
+    },
+  },
   scanner: {
     name: trans("uiComp.scannerCompName"),
     enName: "Scanner",

client/packages/lowcoder-design/src/icons/index.ts

@@ -89,6 +89,7 @@ export type UICompType =
   | "progress"
   | "progressCircle"
   | "chart"
+  | "mermaid" //Added By Falk Wolsky
   | "fileViewer"
   | "divider"
   | "qrCode"