Merge pull request #642 from raheeliftikhar5/update-hillchart

updated hillchart comp

Author: FalkWolsky

client/packages/lowcoder-cli-template-typescript/package.json

@@ -1,9 +1,9 @@
 {
   "name": "lowcoder-cli-template-typescript",
-  "version": "0.0.16",
+  "version": "0.0.20",
   "type": "module",
   "scripts": {
-    "start": "vite",
+    "start": "NODE_OPTIONS=--max_old_space_size=6144 vite",
     "build": "lowcoder-cli build",
     "build_publish": "lowcoder-cli build --publish"
   },
@@ -13,11 +13,15 @@
       "hillcharts": {
         "name": "Hillcharts Demo",
         "icon": "./icons/hills.svg",
-        "description": "Hillchart Plugin Demo Component"
+        "description": "Hillchart Plugin Demo Component",
+        "layoutInfo": {
+          "w": 10,
+          "h": 40
+        }
       }
     }
   },
-  "devDependencies": {
+  "dependencies": {
     "@observablehq/runtime": "^4.8.2",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",

client/packages/lowcoder-cli-template-typescript/src/HillchartsComp.tsx

@@ -5,20 +5,22 @@ import {
   Section,
   withDefault,
   withExposingConfigs,
+  withMethodExposing,
   eventHandlerControl,
   styleControl,
   toJSONObjectArray,
   jsonControl,
   AutoHeightControl,
   EditorContext,
 } from "lowcoder-sdk";
+import { useResizeDetector } from "react-resize-detector";
 
 import styles from "./styles.module.css";
 
 import { i18nObjs, trans } from "./i18n/comps";
 
 import { Chart } from './vendors'
-import { useContext, useEffect, useRef, useState } from "react";
+import { useState } from "react";
 
 
 export const CompStyles = [
@@ -59,7 +61,13 @@ export const CompStyles = [
   }
 ] as const;
 
-
+interface Point {
+  id: number,
+  color?: string,
+  description?: string,
+  x: number,
+  size?: number,
+}
 
 // const HillchartsCompBase = new UICompBuilder(childrenMap, (props: any) => {
 let HillchartsCompBase = (function () {
@@ -74,42 +82,57 @@ let HillchartsCompBase = (function () {
         value: "change",
         description: "Triggers when Chart data changes",
       },
-    ]),
+    ] as const),
   };
 
-  return new UICompBuilder(childrenMap, (props: { onEvent: (arg0: string) => void; styles: { backgroundColor: any; border: any; radius: any; borderWidth: any; margin: any; padding: any; textSize: any; }; data: any[] | null | undefined; }) => {
+  return new UICompBuilder(childrenMap, (props: {
+    onEvent: any;
+    styles: { backgroundColor: any; border: any; radius: any; borderWidth: any; margin: any; padding: any; textSize: any; };
+    data: any[] | null | undefined;
+    autoHeight: boolean;
+  }) => {
   const handleDataChange = () => {
     props.onEvent("change");
   };
 
-  const conRef = useRef<HTMLDivElement>(null);
-  const [dimensions, setDimensions] = useState({ width: 400, height: 250 });
+  const [dimensions, setDimensions] = useState({ width: 480, height: 280 });
+  const { width, height, ref: conRef } = useResizeDetector({onResize: () =>{
+    const container = conRef.current;
+    if(!container || !width || !height) return;
 
-  useEffect(() => {
-    if (conRef.current) {
+    if(props.autoHeight) {
       setDimensions({
-        width: conRef.current.clientWidth,
-        height: conRef.current.clientHeight
-      });
+        width,
+        height: dimensions.height,
+      })
+      return;
     }
-  }, []);
+
+    setDimensions({
+      width,
+      height,
+    })
+  }});
 
   return (
-      <div ref={conRef} className={styles.wrapper} style={{
-          display: "flex",
-          justifyContent: "center",
-          height: `100%`,
-          width: `100%`,
-          backgroundColor: `${props.styles.backgroundColor}`,
-          borderColor: `${props.styles.border}`,
-          borderRadius: `${props.styles.radius}`,
-          borderWidth: `${props.styles.borderWidth}`,
-          margin: `${props.styles.margin}`,
-          padding: `${props.styles.padding}`,
-          fontSize: `${props.styles.textSize}`,
-        }}>
-        <Chart data={props.data} height={dimensions.height} width={dimensions.width} onDataChange={handleDataChange}/>
-      </div>
+    <div ref={conRef} className={styles.wrapper} style={{
+      height: `100%`,
+      width: `100%`,
+      backgroundColor: `${props.styles.backgroundColor}`,
+      borderColor: `${props.styles.border}`,
+      borderRadius: `${props.styles.radius}`,
+      borderWidth: `${props.styles.borderWidth}`,
+      margin: `${props.styles.margin}`,
+      padding: `${props.styles.padding}`,
+      fontSize: `${props.styles.textSize}`,
+    }}>
+      <Chart
+        data={props.data}
+        height={dimensions.height}
+        width={dimensions.width}
+        onDataChange={handleDataChange}
+      />
+    </div>
   );
 })
 .setPropertyViewFn((children: any) => {
@@ -137,6 +160,38 @@ HillchartsCompBase = class extends HillchartsCompBase {
   }
 };
 
+HillchartsCompBase = withMethodExposing(HillchartsCompBase, [
+  {
+    method: {
+      name: "setPoint",
+      description: trans("methods.setPoint"),
+      params: [{
+        name: "data",
+        type: "JSON",
+        description: "JSON value"
+      }],
+    },
+    execute: (comp: any, values: any[]) => {
+      const point = values[0] as Point;
+      if(typeof point !== 'object') {
+        return Promise.reject(trans("methods.invalidInput"))
+      }
+      if(!point.id) {
+        return Promise.reject(trans("methods.requiredField", { field: 'ID' }));
+      }
+      if(!point.x) {
+        return Promise.reject(trans("methods.requiredField", { field: 'X position' }));
+      }
+      const data = comp.children.data.getView(); 
+      const newData = [
+        ...data,
+        point,
+      ];
+      comp.children.data.dispatchChangeValueAction(JSON.stringify(newData, null, 2));
+    }
+  },
+]);
+
 export default withExposingConfigs(HillchartsCompBase, [
   new NameConfig("data", trans("component.data")),
 ]);

client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/en.ts

@@ -27,4 +27,9 @@ export const en = {
   "component": {
     "data": "Hillchart Data",
   },
+  "methods": {
+    "setPoint": "Set Point",
+    "invalidInput": "Invalid Input",
+    "requiredField": "{field} is required",
+  }
 };

client/packages/lowcoder-cli-template-typescript/src/styles.module.css

@@ -3,7 +3,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100%;
+  /* height: 100%; */
   border: 1px solid #dddddd;
   background-color: white;
 }

client/packages/lowcoder-cli-template-typescript/src/vendors/Chart.jsx

@@ -194,9 +194,14 @@ function Chart(props) {
       // Render an updated chart
       runtime.module(define, Inspector.into(chartRef), 'chart');
     }
-  }, [chartRef, props.data]);
-
-  return <div ref={useChartRef} style={{ height: "100%" }} />;
+  }, [chartRef, props.data, props.width, props.height]);
+
+  return (
+    <div
+      ref={useChartRef}
+      style={{ height: "100%" }}
+    />
+  );
 }