Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commita7f20af

Browse files
authored
Merge pull requestlowcoder-org#642 from raheeliftikhar5/update-hillchart
updated hillchart comp
2 parentse60d2d0 +689cc21 commita7f20af

File tree

6 files changed

+160
-91
lines changed

6 files changed

+160
-91
lines changed

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"name":"lowcoder-cli-template-typescript",
3-
"version":"0.0.16",
3+
"version":"0.0.20",
44
"type":"module",
55
"scripts": {
6-
"start":"vite",
6+
"start":"NODE_OPTIONS=--max_old_space_size=6144vite",
77
"build":"lowcoder-cli build",
88
"build_publish":"lowcoder-cli build --publish"
99
},
@@ -13,11 +13,15 @@
1313
"hillcharts": {
1414
"name":"Hillcharts Demo",
1515
"icon":"./icons/hills.svg",
16-
"description":"Hillchart Plugin Demo Component"
16+
"description":"Hillchart Plugin Demo Component",
17+
"layoutInfo": {
18+
"w":10,
19+
"h":40
20+
}
1721
}
1822
}
1923
},
20-
"devDependencies": {
24+
"dependencies": {
2125
"@observablehq/runtime":"^4.8.2",
2226
"@types/react":"^18.2.45",
2327
"@types/react-dom":"^18.2.18",

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

Lines changed: 82 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,22 @@ import {
55
Section,
66
withDefault,
77
withExposingConfigs,
8+
withMethodExposing,
89
eventHandlerControl,
910
styleControl,
1011
toJSONObjectArray,
1112
jsonControl,
1213
AutoHeightControl,
1314
EditorContext,
1415
}from"lowcoder-sdk";
16+
import{useResizeDetector}from"react-resize-detector";
1517

1618
importstylesfrom"./styles.module.css";
1719

1820
import{i18nObjs,trans}from"./i18n/comps";
1921

2022
import{Chart}from'./vendors'
21-
import{useContext,useEffect,useRef,useState}from"react";
23+
import{useState}from"react";
2224

2325

2426
exportconstCompStyles=[
@@ -59,7 +61,13 @@ export const CompStyles = [
5961
}
6062
]asconst;
6163

62-
64+
interfacePoint{
65+
id:number,
66+
color?:string,
67+
description?:string,
68+
x:number,
69+
size?:number,
70+
}
6371

6472
// const HillchartsCompBase = new UICompBuilder(childrenMap, (props: any) => {
6573
letHillchartsCompBase=(function(){
@@ -74,42 +82,57 @@ let HillchartsCompBase = (function () {
7482
value:"change",
7583
description:"Triggers when Chart data changes",
7684
},
77-
]),
85+
]asconst),
7886
};
7987

80-
returnnewUICompBuilder(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;})=>{
88+
returnnewUICompBuilder(childrenMap,(props:{
89+
onEvent:any;
90+
styles:{backgroundColor:any;border:any;radius:any;borderWidth:any;margin:any;padding:any;textSize:any;};
91+
data:any[]|null|undefined;
92+
autoHeight:boolean;
93+
})=>{
8194
consthandleDataChange=()=>{
8295
props.onEvent("change");
8396
};
8497

85-
constconRef=useRef<HTMLDivElement>(null);
86-
const[dimensions,setDimensions]=useState({width:400,height:250});
98+
const[dimensions,setDimensions]=useState({width:480,height:280});
99+
const{ width, height,ref:conRef}=useResizeDetector({onResize:()=>{
100+
constcontainer=conRef.current;
101+
if(!container||!width||!height)return;
87102

88-
useEffect(()=>{
89-
if(conRef.current){
103+
if(props.autoHeight){
90104
setDimensions({
91-
width:conRef.current.clientWidth,
92-
height:conRef.current.clientHeight
93-
});
105+
width,
106+
height:dimensions.height,
107+
})
108+
return;
94109
}
95-
},[]);
110+
111+
setDimensions({
112+
width,
113+
height,
114+
})
115+
}});
96116

97117
return(
98-
<divref={conRef}className={styles.wrapper}style={{
99-
display:"flex",
100-
justifyContent:"center",
101-
height:`100%`,
102-
width:`100%`,
103-
backgroundColor:`${props.styles.backgroundColor}`,
104-
borderColor:`${props.styles.border}`,
105-
borderRadius:`${props.styles.radius}`,
106-
borderWidth:`${props.styles.borderWidth}`,
107-
margin:`${props.styles.margin}`,
108-
padding:`${props.styles.padding}`,
109-
fontSize:`${props.styles.textSize}`,
110-
}}>
111-
<Chartdata={props.data}height={dimensions.height}width={dimensions.width}onDataChange={handleDataChange}/>
112-
</div>
118+
<divref={conRef}className={styles.wrapper}style={{
119+
height:`100%`,
120+
width:`100%`,
121+
backgroundColor:`${props.styles.backgroundColor}`,
122+
borderColor:`${props.styles.border}`,
123+
borderRadius:`${props.styles.radius}`,
124+
borderWidth:`${props.styles.borderWidth}`,
125+
margin:`${props.styles.margin}`,
126+
padding:`${props.styles.padding}`,
127+
fontSize:`${props.styles.textSize}`,
128+
}}>
129+
<Chart
130+
data={props.data}
131+
height={dimensions.height}
132+
width={dimensions.width}
133+
onDataChange={handleDataChange}
134+
/>
135+
</div>
113136
);
114137
})
115138
.setPropertyViewFn((children:any)=>{
@@ -137,6 +160,38 @@ HillchartsCompBase = class extends HillchartsCompBase {
137160
}
138161
};
139162

163+
HillchartsCompBase=withMethodExposing(HillchartsCompBase,[
164+
{
165+
method:{
166+
name:"setPoint",
167+
description:trans("methods.setPoint"),
168+
params:[{
169+
name:"data",
170+
type:"JSON",
171+
description:"JSON value"
172+
}],
173+
},
174+
execute:(comp:any,values:any[])=>{
175+
constpoint=values[0]asPoint;
176+
if(typeofpoint!=='object'){
177+
returnPromise.reject(trans("methods.invalidInput"))
178+
}
179+
if(!point.id){
180+
returnPromise.reject(trans("methods.requiredField",{field:'ID'}));
181+
}
182+
if(!point.x){
183+
returnPromise.reject(trans("methods.requiredField",{field:'X position'}));
184+
}
185+
constdata=comp.children.data.getView();
186+
constnewData=[
187+
...data,
188+
point,
189+
];
190+
comp.children.data.dispatchChangeValueAction(JSON.stringify(newData,null,2));
191+
}
192+
},
193+
]);
194+
140195
exportdefaultwithExposingConfigs(HillchartsCompBase,[
141196
newNameConfig("data",trans("component.data")),
142197
]);

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,9 @@ export const en = {
2727
"component":{
2828
"data":"Hillchart Data",
2929
},
30+
"methods":{
31+
"setPoint":"Set Point",
32+
"invalidInput":"Invalid Input",
33+
"requiredField":"{field} is required",
34+
}
3035
};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
display: flex;
44
justify-content: center;
55
align-items: center;
6-
height:100%;
6+
/*height: 100%; */
77
border:1px solid#dddddd;
88
background-color: white;
99
}

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -194,9 +194,14 @@ function Chart(props) {
194194
// Render an updated chart
195195
runtime.module(define,Inspector.into(chartRef),'chart');
196196
}
197-
},[chartRef,props.data]);
198-
199-
return<divref={useChartRef}style={{height:"100%"}}/>;
197+
},[chartRef,props.data,props.width,props.height]);
198+
199+
return(
200+
<div
201+
ref={useChartRef}
202+
style={{height:"100%"}}
203+
/>
204+
);
200205
}
201206

202207

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp