Merge branch 'dev' into comment_component

Author: FalkWolsky

.DS_Store

@@ -6,15 +6,19 @@ updates:
     directory: "/server/api-service"
     schedule:
       interval: "monthly"
+    target-branch: "dev"
   - package-ecosystem: "npm"
     directory: "/server/node-service"
     schedule:
       interval: "monthly"
+    target-branch: "dev"
   - package-ecosystem: "npm"
     directory: "/client"
     schedule:
       interval: "monthly"
+    target-branch: "dev"
   - package-ecosystem: "docker"
     directory: "/deploy/docker"
     schedule:
       interval: "monthly"
+    target-branch: "dev"

.github/dependabot.yml

@@ -6,18 +6,18 @@
 
 #### Use prebuilt docker image
 
-Simply run below command to start a backend server.
+Simply run the below command to start a backend server.
 
 ```bash
 docker run -d --name lowcoder -p 3000:3000 -v "$PWD/stacks:/lowcoder-stacks" lowcoderorg/lowcoder-ce
 ```
 
-For more information, view our [docs](../docs/self-hosting)
+For more information, view our [docs](https://docs.lowcoder.cloud/lowcoder-documentation/setup-and-run/self-hosting)
 
 #### Build Docker image from source
 
-1. Check out source code and change to source dir.
-2. Use the command below to build Docker image :
+1. Check out the source code and change to source dir.
+2. Use the command below to build a Docker image :
 
 ```bash
 docker build -f ./deploy/docker/Dockerfile -t lowcoder-dev .
@@ -31,11 +31,21 @@ docker run -d --name lowcoder-dev -p 3000:3000 -v "$PWD/stacks:/lowcoder-stacks"
 
 ### Start develop
 
-1. Check out source code.
+1. Check out the source code.
 2. Change to client dir in the repository root via cd client.
-3. Run yarn to install dependencies: .
-4. Start dev server: `LOWCODER_API_SERVICE_URL=http://localhost:3000 yarn start`.
-5. After dev server starts successfully, it will be automatically opened in the default browser.
+
+```bash
+cd client
+```
+   
+4. Run yarn to install dependencies: .
+
+```bash
+yarn install
+```
+
+5. Start dev server: `LOWCODER_API_SERVICE_URL=http://localhost:3000 yarn start`.
+6. After the dev server starts successfully, it will be automatically opened in the default browser.
 
 ### Before submitting a pull request
 

client/README.md

@@ -1 +1 @@
-1.1.8
+2.1.0

client/VERSION

@@ -33,7 +33,7 @@
     "@types/qrcode.react": "^1.0.2",
     "@types/react-grid-layout": "^1.3.0",
     "@types/react-helmet": "^6.1.5",
-    "@types/react-resizable": "^1.7.4",
+    "@types/react-resizable": "^3.0.5",
     "@types/react-router-dom": "^5.3.2",
     "@types/shelljs": "^0.8.11",
     "@types/styled-components": "^5.1.19",

client/package.json

@@ -34,6 +34,7 @@ declare var LOWCODER_NODE_SERVICE_URL: string;
 declare var LOWCODER_SHOW_BRAND: string;
 declare var LOWCODER_CUSTOM_LOGO: string;
 declare var LOWCODER_CUSTOM_LOGO_SQUARE: string;
+declare var LOWCODER_CUSTOM_AUTH_WELCOME_TEXT: string;
 declare var REACT_APP_ENV: string;
 declare var REACT_APP_BUILD_ID: string;
 declare var REACT_APP_LOG_LEVEL: string;

client/packages/lowcoder-cli/client.d.ts

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "0.0.12",
+  "version": "0.0.15",
   "type": "module",
   "license": "MIT",
   "dependencies": {
@@ -14,6 +14,8 @@
     "@types/react": "17",
     "@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",
@@ -28,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": {
@@ -47,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

@@ -125,6 +125,7 @@ let CalendarBasicComp = (function () {
           isList={isList}
           bg={eventInfo.backgroundColor}
           theme={theme?.theme}
+          allDay={showAllDay}
           $style={props.style}
         >
           <div className="event-time">{eventInfo.timeText}</div>

client/packages/lowcoder-comps/package.json

@@ -388,7 +388,7 @@ export const Wrapper = styled.div<{
 
   .fc-scrollgrid-liquid > tbody {
     & > tr:nth-of-type(2) {
-      display: none;
+      display: ${(props) => props.allDay && 1};
     }
   }
   .fc .fc-timegrid-slot-label-cushion {
@@ -639,6 +639,7 @@ export const Event = styled.div<{
   bg: string;
   theme: Object;
   isList: boolean;
+  allDay: boolean;
   $style: CalendarStyleType;
 }>`
   height: 100%;

client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx

@@ -26,14 +26,17 @@ import {
   withViewFn,
   ThemeContext,
   chartColorPalette,
+  loadScript,
 } from "lowcoder-sdk";
 import { getEchartsLocale, trans } from "i18n/comps";
 import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
 import {
   echartsConfigOmitChildren,
   getEchartsConfig,
   getSelectedPoints,
+  loadGoogleMapsScript,
 } from "comps/chartComp/chartUtils";
+import 'echarts-extension-gmap';
 import log from "loglevel";
 
 let ChartTmpComp = (function () {
@@ -45,6 +48,7 @@ let ChartTmpComp = (function () {
 ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
   const echartsCompRef = useRef<ReactECharts | null>();
   const [chartSize, setChartSize] = useState<ChartSize>();
+  const [mapScriptLoaded, setMapScriptLoaded] = useState(false);
   const firstResize = useRef(true);
   const theme = useContext(ThemeContext);
   const defaultChartTheme = {
@@ -87,6 +91,34 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 
+  const isMapScriptLoaded = useMemo(() => {
+    return mapScriptLoaded || window?.google;
+  }, [mapScriptLoaded])
+
+  const loadGoogleMapsData = () => {
+    const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+    if (!echartsCompInstance) {
+      return _.noop;
+    }
+    echartsCompInstance.getModel().getComponent("gmap").getGoogleMap();
+  }
+
+  const apiKey = comp.children.mapApiKey.getView();
+  const mode = comp.children.mode.getView();
+  useEffect(() => {
+    if(mode === 'map') {
+      const gMapScript = loadGoogleMapsScript('');
+      if(isMapScriptLoaded) {
+        loadGoogleMapsData();
+        return;
+      }
+      gMapScript.addEventListener('load', function () {
+        setMapScriptLoaded(true);
+        loadGoogleMapsData();
+      });
+    }
+  }, [mode, apiKey, option])
+
   return (
     <ReactResizeDetector
       onResize={(w, h) => {
@@ -101,15 +133,17 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
         }
       }}
     >
-      <ReactECharts
-        ref={(e) => (echartsCompRef.current = e)}
-        style={{ height: "100%" }}
-        notMerge
-        lazyUpdate
-        opts={{ locale: getEchartsLocale() }}
-        option={option}
-        theme={themeConfig}
-      />
+      {(mode !== 'map' || (mode === 'map' && isMapScriptLoaded)) && (
+        <ReactECharts
+          ref={(e) => (echartsCompRef.current = e)}
+          style={{ height: "100%" }}
+          notMerge
+          lazyUpdate
+          opts={{ locale: getEchartsLocale() }}
+          option={option}
+          theme={mode !== 'map' ? themeConfig : undefined}
+        />
+      )}
     </ReactResizeDetector>
   );
 });

client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx

@@ -4,3 +4,6 @@ const echartsUrlLocale = language === "zh" ? "zh" : "en";
 export const optionUrl = `https://echarts.apache.org/${echartsUrlLocale}/option.html`;
 export const examplesUrl = `https://echarts.apache.org/examples/${echartsUrlLocale}/index.html`;
 export const xAxisTypeUrl = `${optionUrl}#xAxis.type`;
+export const googleMapsApiUrl = `https://maps.googleapis.com/maps/api/js`;
+export const mapOptionUrl = `https://github.com/plainheart/echarts-extension-gmap`;
+export const mapExamplesUrl = `https://codepen.io/plainheart/pen/VweLGbR`;

client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx

@@ -1,5 +1,5 @@
 import { jsonControl, JSONObject, stateComp, toJSONObjectArray, toObject } from "lowcoder-sdk";
-import { StringControl } from "lowcoder-sdk";
+import { withDefault, BooleanControl, StringControl, NumberControl, JSONObjectControl } from "lowcoder-sdk";
 import { dropdownControl } from "lowcoder-sdk";
 import { eventHandlerControl } from "lowcoder-sdk";
 import { valueComp, withType } from "lowcoder-sdk";
@@ -15,7 +15,6 @@ import { ScatterChartConfig } from "./chartConfigs/scatterChartConfig";
 import { SeriesListComp } from "./seriesComp";
 import { EChartsOption } from "echarts";
 import { i18nObjs, trans } from "i18n/comps";
-import { JSONValue } from "lowcoder";
 
 export const ChartTypeOptions = [
   {
@@ -45,6 +44,10 @@ const chartModeOptions = [
     label: "ECharts JSON",
     value: "json",
   },
+  {
+    label: "Map",
+    value: "map",
+  },
 ] as const;
 
 export const EventOptions = [
@@ -221,6 +224,14 @@ export const chartUiModeChildren = {
   chartConfig: ChartOptionComp,
 };
 
+const chartMapModeChildren = {
+  mapApiKey: withDefault(StringControl, ''),
+  mapZoomLevel: withDefault(NumberControl, 3),
+  mapCenterLng: withDefault(NumberControl, 15.932644),
+  mapCenterLat: withDefault(NumberControl, 50.942063),
+  mapOptions: jsonControl(toObject, i18nObjs.defaultMapJsonOption),
+}
+
 export const chartChildrenMap = {
   mode: dropdownControl(chartModeOptions, "ui"),
   echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
@@ -236,6 +247,7 @@ export const chartChildrenMap = {
     }>
   >([]),
   ...chartUiModeChildren,
+  ...chartMapModeChildren,
 };
 
 const chartUiChildrenMap = uiChildren(chartChildrenMap);