andy/corporate_portal_westerindo
1
0
Fork 0
Code Issues 13 Pull Requests Packages Projects Releases Wiki Activity

edit query and graph component

Browse Source
This commit is contained in:
adibwp
2024-08-22 16:08:05 +07:00
parent d1b04676a7
commit 74d564e303
28 changed files with 1183 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
component/chart/chart.templ
View File

@@ -36,9 +36,9 @@ templ ShowChartFixed(idDiv string, udata string, width string, height string) {
script GenerateChartFixed(idDiv string, udata string, width string, height string) {
htmx.onLoad(function(elt) {
console.log("elt ",elt)
// console.log("elt ",elt)
var element = document.getElementById(idDiv);
console.log("element ",element)
// console.log("element ",element)
if (element) {
element.style.height = height;
element.style.width = width;
@@ -52,8 +52,49 @@ script GenerateChartFixed(idDiv string, udata string, width string, height strin
// var option_001 = JSON.parse(udata);
option[idDiv] = JSON.parse(udata);
console.log("option ", option)
// console.log("option ", option)
// myChart_001.setOption(option_001);
myChart[idDiv].setOption(option[idDiv]);
});
}
templ ShowChartResponsiveWidth(idDiv string, udata string, height string) {
<div id={ idDiv } class="mx-auto" style="width: 100%;"></div>
@GenerateChartResponsive(idDiv, udata, height)
}
script GenerateChartResponsive(idDiv string, udata string, height string) {
htmx.onLoad(function(elt) {
// console.log("elt ",elt)
var element = document.getElementById(idDiv);
// console.log("element ",element)
if (element) {
element.style.height = height;
}
var myChart = {};
var option = {};
// var myChart_001 = echarts.init(document.getElementById(idDiv));
myChart[idDiv] = echarts.init(element);
// var option_001 = JSON.parse(udata);
option[idDiv] = JSON.parse(udata);
// console.log("option ", option)
// myChart_001.setOption(option_001);
if (option[idDiv]['series']['radius']) {
option[idDiv]['series']['radius'] = ['30%', '55%'];
} else {
option[idDiv]['series'][0]['radius'] = ['30%', '55%'];
}
console.log(option[idDiv]);
myChart[idDiv].setOption(option[idDiv]);
var resizeObserver = new ResizeObserver(function() {
myChart[idDiv].resize();
});
resizeObserver.observe(element);
});
}

97
component/chart/chart_templ.go
View File

@@ -124,11 +124,11 @@ func ShowChartFixed(idDiv string, udata string, width string, height string) tem
func GenerateChartFixed(idDiv string, udata string, width string, height string) templ.ComponentScript {
return templ.ComponentScript{
Name: `__templ_GenerateChartFixed_a276`,
Function: `function __templ_GenerateChartFixed_a276(idDiv, udata, width, height){htmx.onLoad(function(elt) {
console.log("elt ",elt)
Name: `__templ_GenerateChartFixed_c5bf`,
Function: `function __templ_GenerateChartFixed_c5bf(idDiv, udata, width, height){htmx.onLoad(function(elt) {
// console.log("elt ",elt)
var element = document.getElementById(idDiv);
console.log("element ",element)
// console.log("element ",element)
if (element) {
element.style.height = height;
element.style.width = width;
@@ -142,12 +142,95 @@ func GenerateChartFixed(idDiv string, udata string, width string, height string)
// var option_001 = JSON.parse(udata);
option[idDiv] = JSON.parse(udata);
console.log("option ", option)
// console.log("option ", option)
// myChart_001.setOption(option_001);
myChart[idDiv].setOption(option[idDiv]);
});
}`,
Call: templ.SafeScript(`__templ_GenerateChartFixed_a276`, idDiv, udata, width, height),
CallInline: templ.SafeScriptInline(`__templ_GenerateChartFixed_a276`, idDiv, udata, width, height),
Call: templ.SafeScript(`__templ_GenerateChartFixed_c5bf`, idDiv, udata, width, height),
CallInline: templ.SafeScriptInline(`__templ_GenerateChartFixed_c5bf`, idDiv, udata, width, height),
}
}
func ShowChartResponsiveWidth(idDiv string, udata string, height string) templ.Component {
return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
if !templ_7745c5c3_IsBuffer {
templ_7745c5c3_Buffer = templ.GetBuffer()
defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var5 := templ.GetChildren(ctx)
if templ_7745c5c3_Var5 == nil {
templ_7745c5c3_Var5 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(idDiv)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\chart\chart.templ`, Line: 62, Col: 19}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"mx-auto\" style=\"width: 100%;\"></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = GenerateChartResponsive(idDiv, udata, height).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
}
return templ_7745c5c3_Err
})
}
func GenerateChartResponsive(idDiv string, udata string, height string) templ.ComponentScript {
return templ.ComponentScript{
Name: `__templ_GenerateChartResponsive_ddb7`,
Function: `function __templ_GenerateChartResponsive_ddb7(idDiv, udata, height){htmx.onLoad(function(elt) {
// console.log("elt ",elt)
var element = document.getElementById(idDiv);
// console.log("element ",element)
if (element) {
element.style.height = height;
}
var myChart = {};
var option = {};
// var myChart_001 = echarts.init(document.getElementById(idDiv));
myChart[idDiv] = echarts.init(element);
// var option_001 = JSON.parse(udata);
option[idDiv] = JSON.parse(udata);
// console.log("option ", option)
// myChart_001.setOption(option_001);
if (option[idDiv]['series']['radius']) {
option[idDiv]['series']['radius'] = ['30%', '55%'];
} else {
option[idDiv]['series'][0]['radius'] = ['30%', '55%'];
}
console.log(option[idDiv]);
myChart[idDiv].setOption(option[idDiv]);
var resizeObserver = new ResizeObserver(function() {
myChart[idDiv].resize();
});
resizeObserver.observe(element);
});
}`,
Call: templ.SafeScript(`__templ_GenerateChartResponsive_ddb7`, idDiv, udata, height),
CallInline: templ.SafeScriptInline(`__templ_GenerateChartResponsive_ddb7`, idDiv, udata, height),
}
}