add piechart dummy tab peserta

This commit is contained in:
2024-06-26 17:02:27 +07:00
parent 9008cac97d
commit 2a25c60cc2
9 changed files with 61 additions and 26 deletions

View File

@@ -11,7 +11,7 @@ script GenerateChart(idDiv string, udata string) {
var element = document.getElementById(idDiv);
console.log("element ",element)
if (element) {
element.style.height = "400px";
element.style.height = "450px";
element.style.width = "100%";
}

View File

@@ -53,13 +53,13 @@ func ShowChart(idDiv string, udata string) templ.Component {
func GenerateChart(idDiv string, udata string) templ.ComponentScript {
return templ.ComponentScript{
Name: `__templ_GenerateChart_4c73`,
Function: `function __templ_GenerateChart_4c73(idDiv, udata){htmx.onLoad(function(elt) {
Name: `__templ_GenerateChart_906c`,
Function: `function __templ_GenerateChart_906c(idDiv, udata){htmx.onLoad(function(elt) {
console.log("elt ",elt)
var element = document.getElementById(idDiv);
console.log("element ",element)
if (element) {
element.style.height = "400px";
element.style.height = "450px";
element.style.width = "100%";
}
@@ -76,7 +76,7 @@ func GenerateChart(idDiv string, udata string) templ.ComponentScript {
myChart[idDiv].setOption(option[idDiv]);
});
}`,
Call: templ.SafeScript(`__templ_GenerateChart_4c73`, idDiv, udata),
CallInline: templ.SafeScriptInline(`__templ_GenerateChart_4c73`, idDiv, udata),
Call: templ.SafeScript(`__templ_GenerateChart_906c`, idDiv, udata),
CallInline: templ.SafeScriptInline(`__templ_GenerateChart_906c`, idDiv, udata),
}
}

View File

@@ -38,7 +38,7 @@ func (tkh *TabKepersertaanHandler) HandleShowTabKepesertaan(c echo.Context) erro
Left string `json:"left"`
}{
Text: "Testing",
SubText: "Total Peserta 506",
SubText: "Total Peserta 560",
Left: "center",
},
Tooltip: struct {
@@ -53,7 +53,7 @@ func (tkh *TabKepersertaanHandler) HandleShowTabKepesertaan(c echo.Context) erro
}{
Top: "bottom",
Left: "center",
Orient: "vertical",
Orient: "horizontal",
},
Series: []models.Series{
{
@@ -106,7 +106,11 @@ func (tkh *TabKepersertaanHandler) HandleShowTabKepesertaan(c echo.Context) erro
return err
}
content := corporate_mcudetail.TabKepesertaan(chart.ShowChart("1", string(json)))
content := corporate_mcudetail.TabKepesertaan(
chart.ShowChart("alpha", string(json)),
chart.ShowChart("beta", string(json)),
chart.ShowChart("delta", string(json)),
)
return utils.View(c, content)
}

View File

@@ -57,7 +57,8 @@ templ CSSMcuDetail(
@CssKesimpulan
}
templ JSMcuDetail() {
templ JSMcuDetail() {
<script src="assets/js/echarts-js/echart.min.js"></script>
}
templ ShowMcuDetail(

View File

@@ -98,6 +98,10 @@ func JSMcuDetail() templ.Component {
templ_7745c5c3_Var3 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script src=\"assets/js/echarts-js/echart.min.js\"></script>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
if !templ_7745c5c3_IsBuffer {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
}

View File

@@ -1,20 +1,28 @@
package corporate_mcudetail
templ TabKepesertaan(
chart templ.Component,
chartalpha templ.Component,
chartbeta templ.Component,
chartdelta templ.Component,
) {
<div class="container-fluid">
<div class="d-flex justify-content-center py-10">
<h2 class="title text-black" style="margin-bottom: 0;">Data Kepesertaan MCU</h2>
</div>
<div id="loading-parent" class="rounded">
@chart
<div id="loading-child" class="rounded bg-transparent">
<div id="loading-spinner" class="spinner-border text-primary d-none" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="d-flex justify-content-center mb-8">
<div style="width: 600px;">
@chartalpha
</div>
</div>
<div class="d-flex justify-content-center mb-8">
<div style="width: 600px;">
@chartbeta
</div>
</div>
<div class="d-flex justify-content-center mb-8">
<div style="width: 600px;">
@chartdelta
</div>
</div>
<div id="loadingcontent"></div>
</div>
}

View File

@@ -11,7 +11,9 @@ import "io"
import "bytes"
func TabKepesertaan(
chart templ.Component,
chartalpha templ.Component,
chartbeta templ.Component,
chartdelta templ.Component,
) 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)
@@ -25,15 +27,31 @@ func TabKepesertaan(
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container-fluid\"><div class=\"d-flex justify-content-center py-10\"><h2 class=\"title text-black\" style=\"margin-bottom: 0;\">Data Kepesertaan MCU</h2></div><div id=\"loading-parent\" class=\"rounded\">")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"container-fluid\"><div class=\"d-flex justify-content-center py-10\"><h2 class=\"title text-black\" style=\"margin-bottom: 0;\">Data Kepesertaan MCU</h2></div><div class=\"d-flex justify-content-center mb-8\"><div style=\"width: 600px;\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = chart.Render(ctx, templ_7745c5c3_Buffer)
templ_7745c5c3_Err = chartalpha.Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"loading-child\" class=\"rounded bg-transparent\"><div id=\"loading-spinner\" class=\"spinner-border text-primary d-none\" style=\"width: 3rem; height: 3rem;\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div></div><div id=\"loadingcontent\"></div></div>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-flex justify-content-center mb-8\"><div style=\"width: 600px;\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = chartbeta.Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"d-flex justify-content-center mb-8\"><div style=\"width: 600px;\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = chartdelta.Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

View File

@@ -6,7 +6,7 @@ templ TabViewMcuDetail(
<div>
<ul class="nav nav-tabs nav-tabs-line">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1" hx-get={"/corp/dashboard_pic/detail/" + id +"/tabkepesertaan"} hx-target="#tabkepesertaan">Peserta</a>
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_1" hx-get={"/corp/dashboard_pic/detail/" + id +"/tabkepesertaan"} hx-target="#tabkepesertaan" hx-trigger="load">Peserta</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_2">Kelainan global</a>
@@ -35,7 +35,7 @@ templ TabViewMcuDetail(
</ul>
</div>
<div class="tab-content mt-5" id="myTabContent">
<div class="tab-pane fade show active" id="kt_tab_pane_1" role="tabpanel" aria-labelledby="kt_tab_pane_2" style="height: 800px;">
<div class="tab-pane fade show active" id="kt_tab_pane_1" role="tabpanel" aria-labelledby="kt_tab_pane_2">
// <object data={"https://devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_graph_001.rptdesign&__format=pdf&PID="+id+"&username=adhi&tm=1717726294764"} type="application/pdf" width="100%" height="100%"></object>
<div id="tabkepesertaan"></div>
</div>

View File

@@ -38,7 +38,7 @@ func TabViewMcuDetail(
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"#tabkepesertaan\">Peserta</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_2\">Kelainan global</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_3\">Kelainan Lab</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_4\">kelainan Non Lab</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_5\">kelainan Fisik</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_6\" hx-get=\"")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"#tabkepesertaan\" hx-trigger=\"load\">Peserta</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_2\">Kelainan global</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_3\">Kelainan Lab</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_4\">kelainan Non Lab</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_5\">kelainan Fisik</a></li><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_6\" hx-get=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -77,7 +77,7 @@ func TabViewMcuDetail(
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"#tabkeuangan\">Keuangan</a></li></ul></div><div class=\"tab-content mt-5\" id=\"myTabContent\"><div class=\"tab-pane fade show active\" id=\"kt_tab_pane_1\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_2\" style=\"height: 800px;\"><div id=\"tabkepesertaan\"></div></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_2\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_2\" style=\"height: 800px;\"><object data=\"")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-target=\"#tabkeuangan\">Keuangan</a></li></ul></div><div class=\"tab-content mt-5\" id=\"myTabContent\"><div class=\"tab-pane fade show active\" id=\"kt_tab_pane_1\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_2\"><div id=\"tabkepesertaan\"></div></div><div class=\"tab-pane fade\" id=\"kt_tab_pane_2\" role=\"tabpanel\" aria-labelledby=\"kt_tab_pane_2\" style=\"height: 800px;\"><object data=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}