Adding eCharts Wordcloud and Mermaid

lowcoder-org · FalkWolsky · Oct 20, 2023 · Oct 20, 2023 · Oct 20, 2023 · Oct 20, 2023
commit d2bf3f78eacfda26f8d7acf1f3b70dc3f0d5a57b
diff --git a/.DS_Store b/.DS_Store
diff --git a/client/packages/lowcoder-comps/icons/mermaidchart.svg b/client/packages/lowcoder-comps/icons/mermaidchart.svg
diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json
@@ -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
+        }
       }
     }
   },

diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/reactEcharts/index.ts b/client/packages/lowcoder-comps/src/comps/chartComp/reactEcharts/index.ts
@@ -1,4 +1,5 @@
 import * as echarts from "echarts";
+import "echarts-wordcloud";
 import { EChartsReactProps, EChartsInstance, EChartsOptionWithMap } from "./types";
 import EChartsReactCore from "./core";
 

diff --git a/client/packages/lowcoder-comps/src/index.ts b/client/packages/lowcoder-comps/src/index.ts
@@ -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,
 };
diff --git a/client/packages/lowcoder-design/src/icons/icon-mermaid.svg b/client/packages/lowcoder-design/src/icons/icon-mermaid.svg
diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/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";

diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx
@@ -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",

diff --git a/client/packages/lowcoder/src/comps/uiCompRegistry.ts b/client/packages/lowcoder/src/comps/uiCompRegistry.ts
@@ -89,6 +89,7 @@ export type UICompType =
   | "progress"
   | "progressCircle"
   | "chart"
+  | "mermaid" //Added By Falk Wolsky
   | "fileViewer"
   | "divider"
   | "qrCode"

diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -870,6 +870,9 @@ export const en = {
     imageEditorCompName: "Image Editor",
     imageEditorCompDesc: "Image Editor component",
     imageEditorCompKeywords: "",
+    mermaidCompName: "Mermaid Charts",
+    mermaidCompDesc: "Render Mermaid Charts based on text",
+    mermaidCompKeywords: "",
     calendarCompName: "Calendar",
     calendarCompDesc: "Calendar component",
     calendarCompKeywords: "",

diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -820,6 +820,9 @@ uiComp: {
     imageEditorCompName: "图片编辑器",
     imageEditorCompDesc: "图片编辑器组件",
     imageEditorCompKeywords: "",
+    mermaidCompName: "美人鱼图表",
+    mermaidCompDesc: "根据文本渲染美人鱼图表",
+    mermaidCompKeywords: "",
     calendarCompName: "日历",
     calendarCompDesc: "日历组件",
     calendarCompKeywords: "",

diff --git a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx
@@ -85,8 +85,9 @@ export const CompStateIcon: {
   jsonSchemaForm: <LeftJsonEditor />,
   container: <LeftContainer />,
   meeting: <LeftMeeting />,
+  mermaid: <LeftChart />,
   videocomponent: <LeftMeeting />,
-  controlButton: <LeftMeeting />,
+  controlButton: <LeftButton />,
   tabbedContainer: <LeftContainer />,
   modal: <LeftModal />,
   listView: <LeftListView />,

diff --git a/client/yarn.lock b/client/yarn.lock
@@ -11827,6 +11827,7 @@ __metadata:
     "@types/react-dom": 17
     big.js: ^6.2.1
     echarts-extension-gmap: ^1.6.0
+    echarts-wordcloud: ^2.1.0
     jest: 29.3.0
     lowcoder-cli: "workspace:^"
     lowcoder-sdk: "workspace:^"