Merge branch 'main' into dependabot/npm_and_yarn/client/clsx-2.0.0

Author: FalkWolsky

.github/dependabot.yml

@@ -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"

client/README.md

@@ -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/packages/lowcoder-comps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "type": "module",
   "license": "MIT",
   "dependencies": {
@@ -14,6 +14,7 @@
     "@types/react": "17",
     "@types/react-dom": "17",
     "big.js": "^6.2.1",
+    "echarts-extension-gmap": "^1.6.0",
     "lowcoder-cli": "workspace:^",
     "lowcoder-sdk": "workspace:^",
     "mermaid": "^10.2.4",

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

@@ -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/src/comps/calendarComp/calendarConstants.tsx

@@ -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/chartComp/chartComp.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/chartComp/chartConfigs/chartUrls.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/chartConstants.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);

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

@@ -9,9 +9,10 @@ import {
   RedButton,
   Section,
   sectionNames,
+  controlItem,
 } from "lowcoder-sdk";
 import { trans } from "i18n/comps";
-import { examplesUrl, optionUrl } from "./chartConfigs/chartUrls";
+import { examplesUrl, mapExamplesUrl, mapOptionUrl, optionUrl } from "./chartConfigs/chartUrls";
 
 export function chartPropertyView(
   children: ChartCompChildrenType,
@@ -147,6 +148,58 @@ export function chartPropertyView(
     </>
   );
 
+  const mapModePropertyView = (
+    <>
+      <Section name={'Map Configuration'}>
+        {children.mapApiKey.propertyView({
+          label: "API Key"
+        })}
+        {children.mapZoomLevel.propertyView({
+          label: "Zoom Level"
+        })}
+        {controlItem({}, (
+          <b style={{marginTop: '8px'}}>
+            {'Center Position'}
+          </b>
+        ))}
+        {children.mapCenterLng.propertyView({
+          label: "Longitude"
+        })}
+        {children.mapCenterLat.propertyView({
+          label: "Latitude"
+        })}
+      </Section>
+      <Section name={'Map Data'}>
+        {children.mapOptions.propertyView({
+          label: trans("chart.echartsOptionLabel"),
+          styleName: "higher",
+          tooltip: (
+            <div>
+              <a href={mapOptionUrl} target="_blank" rel="noopener noreferrer">
+                {trans("chart.echartsMapOptionTooltip")}
+              </a>
+              <br />
+              <a href={mapExamplesUrl} target="_blank" rel="noopener noreferrer">
+                {trans("chart.echartsMapOptionExamples")}
+              </a>
+            </div>
+          ),
+        })}
+      </Section>
+      <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
+    </>
+  );
+  
+  const getChatConfigByMode = (mode: string) => {
+    switch(mode) {
+      case "ui":
+        return uiModePropertyView;
+      case "json":
+        return jsonModePropertyView;
+      case "map":
+        return mapModePropertyView;
+    }
+  }
   return (
     <>
       <Section name={trans("chart.mode")}>
@@ -155,7 +208,7 @@ export function chartPropertyView(
           radioButton: true,
         })}
       </Section>
-      {children.mode.getView() === "ui" ? uiModePropertyView : jsonModePropertyView}
+      {getChatConfigByMode(children.mode.getView())}
     </>
   );
 }