Jan 16, 2024 · Jan 16, 2024 · Jan 16, 2024
diff --git a/client/packages/lowcoder-cli-template-typescript/package.json b/client/packages/lowcoder-cli-template-typescript/package.json
 {
  "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=6144vite",
    "build": "lowcoder-cli build",
    "build_publish": "lowcoder-cli build --publish"
  },
      "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",
diff --git a/client/packages/lowcoder-cli-template-typescript/src/HillchartsComp.tsx b/client/packages/lowcoder-cli-template-typescript/src/HillchartsComp.tsx
  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 = [
  }
 ] as const;


 interface Point {
  id: number,
  color?: string,
  description?: string,
  x: number,
  size?: number,
 }

 // const HillchartsCompBase = new UICompBuilder(childrenMap, (props: any) => {
 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) => {
  }
 };

 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")),
 ]);
diff --git a/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-cli-template-typescript/src/i18n/comps/locales/en.ts
  "component": {
    "data": "Hillchart Data",
  },
  "methods": {
    "setPoint": "Set Point",
    "invalidInput": "Invalid Input",
    "requiredField": "{field} is required",
  }
 };
diff --git a/client/packages/lowcoder-cli-template-typescript/src/styles.module.css b/client/packages/lowcoder-cli-template-typescript/src/styles.module.css
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
 /*height: 100%; */
  border: 1px solid #dddddd;
  background-color: white;
 }
diff --git a/client/packages/lowcoder-cli-template-typescript/src/vendors/Chart.jsx b/client/packages/lowcoder-cli-template-typescript/src/vendors/Chart.jsx
      // 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%" }}
    />
  );
 }
Original file line number	Diff line number	Diff line change
		@@ -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=6144vite",
		"build": "lowcoder-cli build",
		"build_publish": "lowcoder-cli build --publish"
		},
Expand All		@@ -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",
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 = [
Expand DownExpand Up		@@ -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 () {
Expand All		@@ -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) => {
Expand DownExpand Up		@@ -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")),
		]);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -27,4 +27,9 @@ export const en = {
		"component": {
		"data": "Hillchart Data",
		},
		"methods": {
		"setPoint": "Set Point",
		"invalidInput": "Invalid Input",
		"requiredField": "{field} is required",
		}
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,7 +3,7 @@
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		/height: 100%; /
		border: 1px solid #dddddd;
		background-color: white;
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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%" }}
		/>
		);
		}


Expand Down