kelainan global chart
This commit is contained in:
Sas Andy
@@ -4000,19 +4000,6 @@ a.text-white:focus {
|
||||
box-shadow: 0px 9px 16px 0px rgba(var(--dangerrgb), var(--opacity03)) !important;
|
||||
}
|
||||
|
||||
/* ### NAV*/
|
||||
.nav-tabs .nav-link.active,
|
||||
.nav-tabs .nav-item.show .nav-link {
|
||||
color: var(--primary) !important;
|
||||
background-color: #ffffff;
|
||||
border-color: #e4e6ef #e4e6ef #ffffff;
|
||||
}
|
||||
.nav-pills .nav-link.active,
|
||||
.nav-pills .show > .nav-link {
|
||||
color: #ffffff;
|
||||
background-color: var(--primary) !important;
|
||||
}
|
||||
/* ### BUTTON HOVER TEXT */
|
||||
/* ## PRIMARY */
|
||||
.btn.btn-hover-text-primary:not(:disabled):not(.disabled):active:not(.btn-text),
|
||||
.btn.btn-hover-text-primary:not(:disabled):not(.disabled).active,
|
||||
@@ -4057,7 +4044,63 @@ a.text-white:focus {
|
||||
.show .btn.btn-hover-text-danger.btn-dropdown {
|
||||
color: var(--danger) !important;
|
||||
}
|
||||
/* ### NAV & BREADCRUMB*/
|
||||
|
||||
.breadcrumb {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
padding: 0px 0px !important;
|
||||
padding-left: 0 !important;
|
||||
margin-bottom: 1rem;
|
||||
list-style: none;
|
||||
background-color: var(--white) !important;
|
||||
border-radius: 0.42rem;
|
||||
}
|
||||
|
||||
.breadcrumb-item a {
|
||||
color: var(--text-black) !important;
|
||||
font-family: Poppins !important;
|
||||
font-size: 13px !important;
|
||||
font-style: normal !important;
|
||||
font-weight: 500 !important;
|
||||
line-height: 21px !important;
|
||||
}
|
||||
|
||||
.breadcrumb-item.active {
|
||||
color: var(--text-disabled) !important;
|
||||
font-family: Poppins !important;
|
||||
font-size: 13px !important;
|
||||
font-style: normal !important;
|
||||
font-weight: 500 !important;
|
||||
line-height: 21px !important;
|
||||
}
|
||||
.nav-tabs {
|
||||
border-bottom: 0px solid #000000 !important;
|
||||
}
|
||||
.nav-link {
|
||||
color: var(--text-grey) !important;
|
||||
font-family: Public Sans !important;
|
||||
font-size: 14px !important;
|
||||
font-style: normal !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 22px !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: var(--text-black) !important; /* Warna teks untuk tab yang aktif */
|
||||
border-bottom: 2px solid var(--primary) !important; /* Garis bawah untuk tab yang aktif */
|
||||
font-family: Public Sans !important;
|
||||
font-size: 14px !important;
|
||||
font-style: normal !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 22px !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
/* ### BUTTON HOVER TEXT */
|
||||
/* ### */
|
||||
/* ## PRIMARY */
|
||||
/* ## SECONDARY */
|
||||
|
||||
338
assets/mcu/kelainan-global.html
Normal file
338
assets/mcu/kelainan-global.html
Normal file
@@ -0,0 +1,338 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme
|
||||
Author: KeenThemes
|
||||
Website: http://www.keenthemes.com/
|
||||
Contact: support@keenthemes.com
|
||||
Follow: www.twitter.com/keenthemes
|
||||
Dribbble: www.dribbble.com/keenthemes
|
||||
Like: www.facebook.com/keenthemes
|
||||
Purchase: https://1.envato.market/EA4JP
|
||||
Renew Support: https://1.envato.market/EA4JP
|
||||
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
|
||||
-->
|
||||
<html lang="en">
|
||||
<!--begin::Head-->
|
||||
|
||||
<head>
|
||||
<base href="../" />
|
||||
<meta charset="utf-8" />
|
||||
<title>KELAINAN GLOBAL | MCU004</title>
|
||||
<meta name="description" content="Login page example" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
|
||||
<!--begin::Fonts-->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"
|
||||
/>
|
||||
<!--end::Fonts-->
|
||||
|
||||
<!--begin::Page Custom Styles(used by this page)-->
|
||||
<link
|
||||
href="assets/css/pages/login/login-1.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<!--end::Page Custom Styles-->
|
||||
|
||||
<!--begin::Global Theme Styles(used by all pages)-->
|
||||
<link
|
||||
href="assets/plugins/global/plugins.bundle.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<link
|
||||
href="assets/plugins/custom/prismjs/prismjs.bundle.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
|
||||
<!--end::Global Theme Styles-->
|
||||
|
||||
<!--begin::Layout Themes(used by all pages)-->
|
||||
|
||||
<link
|
||||
href="assets/css/themes/layout/header/base/light.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<link
|
||||
href="assets/css/themes/layout/header/menu/light.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<link
|
||||
href="assets/css/themes/layout/brand/dark.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<link
|
||||
href="assets/css/themes/layout/aside/dark.css"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<!--end::Layout Themes-->
|
||||
|
||||
<link rel="shortcut icon" href="assets/media/logos/favicon.ico" />
|
||||
<style>
|
||||
#mcu-004 {
|
||||
height: 50%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#mcu-005 {
|
||||
height: 40%;
|
||||
width: "100%";
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<!--end::Head-->
|
||||
|
||||
<!--begin::Body-->
|
||||
|
||||
<body
|
||||
id="kt_body"
|
||||
class="header-fixed header-mobile-fixed subheader-enabled subheader-fixed subheader-mobile-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading"
|
||||
>
|
||||
<!--begin::Main-->
|
||||
<div class="d-flex flex-column flex-root bg-white">
|
||||
<!-- begin::Navbar -->
|
||||
<div class="d-flex justify-content-center">
|
||||
<h3 class="mb-3">Data Persentase Kelainan Global</h3>
|
||||
</div>
|
||||
|
||||
<div id="mcu-004" class="mt-5"></div>
|
||||
<div id="mcu-005"></div>
|
||||
<!-- end::Navbar -->
|
||||
</div>
|
||||
<!--end::Main-->
|
||||
<script>
|
||||
var HOST_URL =
|
||||
"https://preview.keenthemes.com/metronic/theme/html/tools/preview";
|
||||
</script>
|
||||
<!--begin::Global Config(global config for global JS scripts)-->
|
||||
<script>
|
||||
var KTAppSettings = {
|
||||
breakpoints: {
|
||||
sm: 576,
|
||||
md: 768,
|
||||
lg: 992,
|
||||
xl: 1200,
|
||||
xxl: 1400,
|
||||
},
|
||||
colors: {
|
||||
theme: {
|
||||
base: {
|
||||
white: "#ffffff",
|
||||
primary: "#3699FF",
|
||||
secondary: "#E5EAEE",
|
||||
success: "#1BC5BD",
|
||||
info: "#8950FC",
|
||||
warning: "#FFA800",
|
||||
danger: "#F64E60",
|
||||
light: "#E4E6EF",
|
||||
dark: "#181C32",
|
||||
},
|
||||
light: {
|
||||
white: "#ffffff",
|
||||
primary: "#E1F0FF",
|
||||
secondary: "#EBEDF3",
|
||||
success: "#C9F7F5",
|
||||
info: "#EEE5FF",
|
||||
warning: "#FFF4DE",
|
||||
danger: "#FFE2E5",
|
||||
light: "#F3F6F9",
|
||||
dark: "#D6D6E0",
|
||||
},
|
||||
inverse: {
|
||||
white: "#ffffff",
|
||||
primary: "#ffffff",
|
||||
secondary: "#3F4254",
|
||||
success: "#ffffff",
|
||||
info: "#ffffff",
|
||||
warning: "#ffffff",
|
||||
danger: "#ffffff",
|
||||
light: "#464E5F",
|
||||
dark: "#ffffff",
|
||||
},
|
||||
},
|
||||
gray: {
|
||||
"gray-100": "#F3F6F9",
|
||||
"gray-200": "#EBEDF3",
|
||||
"gray-300": "#E4E6EF",
|
||||
"gray-400": "#D1D3E0",
|
||||
"gray-500": "#B5B5C3",
|
||||
"gray-600": "#7E8299",
|
||||
"gray-700": "#5E6278",
|
||||
"gray-800": "#3F4254",
|
||||
"gray-900": "#181C32",
|
||||
},
|
||||
},
|
||||
"font-family": "Poppins",
|
||||
};
|
||||
</script>
|
||||
<!--end::Global Config-->
|
||||
<!--begin::Global Theme Bundle(used by all pages)-->
|
||||
<script src="assets/plugins/global/plugins.bundle.js"></script>
|
||||
<script src="assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
|
||||
<script src="assets/js/scripts.bundle.js"></script>
|
||||
<!--end::Global Theme Bundle-->
|
||||
|
||||
<!--begin::Page Vendors(used by this page)-->
|
||||
<script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
|
||||
<!--end::Page Vendors-->
|
||||
|
||||
<!--begin::Page Scripts(used by this page)-->
|
||||
<script src="assets/js/pages/widgets.js"></script>
|
||||
<!--end::Page Scripts-->
|
||||
<!-- echartjs.min.js -->
|
||||
<script src="assets/js/echarts-js/echart.min.js"></script>
|
||||
<!-- SCRIPT -->
|
||||
<script type="text/javascript">
|
||||
// Initialize the echarts instance based on the prepared dom
|
||||
var chartMCU004 = echarts.init(document.getElementById("mcu-004"));
|
||||
var optMCU004 = {
|
||||
title: {
|
||||
text: "Kelainan MCU",
|
||||
// subtext: 'Living Expenses in Shenzhen'
|
||||
},
|
||||
dataset: {
|
||||
source: [
|
||||
["score", "amount", "product", "percentage"],
|
||||
[200, 447, "Body Mass Index"],
|
||||
[150, 314, "Pemeriksaan Mata"],
|
||||
[125, 314, "Fungsi Lemak"],
|
||||
[100, 254, "Autospirometri"],
|
||||
[90, 200, "Hematologi"],
|
||||
[80, 180, "ECG"],
|
||||
[75, 160, "Hiperuricemia"],
|
||||
[70, 125, "Tekanan Darah"],
|
||||
[60, 118, "Urine Lengkap"],
|
||||
[50, 87, "Fungsi Hati"],
|
||||
],
|
||||
},
|
||||
grid: {
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
name: "amount",
|
||||
},
|
||||
yAxis: {
|
||||
type: "category",
|
||||
},
|
||||
visualMap: {
|
||||
orient: "horizontal",
|
||||
left: "center",
|
||||
min: 10,
|
||||
max: 100,
|
||||
show: false,
|
||||
|
||||
// text: ['High Score', 'Low Score'],
|
||||
// Map the score column to color
|
||||
dimension: 0,
|
||||
inRange: {
|
||||
color: ["#42aaf5", "#00eaf2", "#035bff"],
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
label: {
|
||||
position: "right",
|
||||
show: true,
|
||||
formatter: "{@[3]} %",
|
||||
},
|
||||
type: "bar",
|
||||
encode: {
|
||||
// Map the "amount" column to X axis.
|
||||
x: "amount",
|
||||
// Map the "product" column to Y axis
|
||||
y: "product",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
window.addEventListener("resize", function () {
|
||||
chartMCU004.resize();
|
||||
});
|
||||
|
||||
// Display the chart using the configuration items and data just specified.
|
||||
chartMCU004.setOption(optMCU004);
|
||||
|
||||
//MCU005
|
||||
// Initialize the echarts instance based on the prepared dom
|
||||
var chartMCU005 = echarts.init(document.getElementById("mcu-005"));
|
||||
var optMCU005 = {
|
||||
title: {
|
||||
text: "Kelainan Fisik",
|
||||
// subtext: 'Living Expenses in Shenzhen'
|
||||
},
|
||||
dataset: {
|
||||
source: [
|
||||
["score", "amount", "product", "percentage"],
|
||||
[200, 400, "Obesitas Stage 1"],
|
||||
[150, 300, "Pre Hipertensi"],
|
||||
[133, 250, "Kelainan Refraksi"],
|
||||
[125, 180, "Overweight"],
|
||||
[100, 125, "Obesitas Stage 2"],
|
||||
[80, 100, "Hipertensi grade 1"],
|
||||
[70, 80, "Kel. Refrakti terkoreksi"],
|
||||
[60, 70, "Kel. Refrakti tidak terkoreksi"],
|
||||
[55, 55, "Hipertensi grade 2"],
|
||||
],
|
||||
},
|
||||
grid: {
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
name: "amount",
|
||||
},
|
||||
yAxis: {
|
||||
type: "category",
|
||||
},
|
||||
visualMap: {
|
||||
orient: "horizontal",
|
||||
left: "center",
|
||||
min: 10,
|
||||
max: 100,
|
||||
show: false,
|
||||
// text: ['High Score', 'Low Score'],
|
||||
// Map the score column to color
|
||||
dimension: 0,
|
||||
inRange: {
|
||||
color: ["#42aaf5", "#00eaf2", "#035bff"],
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
label: {
|
||||
position: "right",
|
||||
show: true,
|
||||
formatter: "{@[3]} %",
|
||||
},
|
||||
type: "bar",
|
||||
encode: {
|
||||
// Map the "amount" column to X axis.
|
||||
x: "amount",
|
||||
// Map the "product" column to Y axis
|
||||
y: "product",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
window.addEventListener("resize", function () {
|
||||
chartMCU005.resize();
|
||||
});
|
||||
|
||||
// Display the chart using the configuration items and data just specified.
|
||||
chartMCU005.setOption(optMCU005);
|
||||
</script>
|
||||
<!-- SCRIPT -->
|
||||
</body>
|
||||
<!--end::Body-->
|
||||
</html>
|
||||
@@ -1,301 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Template Name: Metronic - Bootstrap 4 HTML, React, Angular 9 & VueJS Admin Dashboard Theme
|
||||
Author: KeenThemes
|
||||
Website: http://www.keenthemes.com/
|
||||
Contact: support@keenthemes.com
|
||||
Follow: www.twitter.com/keenthemes
|
||||
Dribbble: www.dribbble.com/keenthemes
|
||||
Like: www.facebook.com/keenthemes
|
||||
Purchase: https://1.envato.market/EA4JP
|
||||
Renew Support: https://1.envato.market/EA4JP
|
||||
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
|
||||
-->
|
||||
<html lang="en">
|
||||
<!--begin::Head-->
|
||||
|
||||
<head>
|
||||
<base href="../" />
|
||||
<meta charset="utf-8" />
|
||||
<title>KELAINAN GLOBAL | MCU004</title>
|
||||
<meta name="description" content="Login page example" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
|
||||
<!--begin::Fonts-->
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />
|
||||
<!--end::Fonts-->
|
||||
|
||||
<!--begin::Page Custom Styles(used by this page)-->
|
||||
<link href="assets/css/pages/login/login-1.css" rel="stylesheet" type="text/css" />
|
||||
<!--end::Page Custom Styles-->
|
||||
|
||||
<!--begin::Global Theme Styles(used by all pages)-->
|
||||
<link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
|
||||
<link href="assets/plugins/custom/prismjs/prismjs.bundle.css" rel="stylesheet" type="text/css" />
|
||||
<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
|
||||
<!--end::Global Theme Styles-->
|
||||
|
||||
<!--begin::Layout Themes(used by all pages)-->
|
||||
|
||||
<link href="assets/css/themes/layout/header/base/light.css" rel="stylesheet" type="text/css" />
|
||||
<link href="assets/css/themes/layout/header/menu/light.css" rel="stylesheet" type="text/css" />
|
||||
<link href="assets/css/themes/layout/brand/dark.css" rel="stylesheet" type="text/css" />
|
||||
<link href="assets/css/themes/layout/aside/dark.css" rel="stylesheet" type="text/css" />
|
||||
<!--end::Layout Themes-->
|
||||
|
||||
<link rel="shortcut icon" href="assets/media/logos/favicon.ico" />
|
||||
<style>
|
||||
#mcu-004 {
|
||||
height: 100vh;
|
||||
/* overflow-x: scroll; */
|
||||
width: "100%";
|
||||
}
|
||||
|
||||
#mcu-005 {
|
||||
height: 100vh;
|
||||
/* overflow-x: scroll; */
|
||||
width: "100%";
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<!--end::Head-->
|
||||
|
||||
<!--begin::Body-->
|
||||
|
||||
<body id="kt_body" class="header-fixed header-mobile-fixed subheader-enabled subheader-fixed subheader-mobile-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading">
|
||||
<!--begin::Main-->
|
||||
<div class="d-flex flex-column flex-root bg-white">
|
||||
<!-- begin::Navbar -->
|
||||
<div class="d-flex justify-content-center ">
|
||||
<h3 class="mb-3">Data Persentase Kelainan Global</h3>
|
||||
</div>
|
||||
|
||||
<div id="mcu-004" class="mt-5">
|
||||
</div>
|
||||
<div id="mcu-005">
|
||||
</div>
|
||||
<!-- end::Navbar -->
|
||||
</div>
|
||||
<!--end::Main-->
|
||||
<script>
|
||||
var HOST_URL = "https://preview.keenthemes.com/metronic/theme/html/tools/preview";
|
||||
</script>
|
||||
<!--begin::Global Config(global config for global JS scripts)-->
|
||||
<script>
|
||||
var KTAppSettings = {
|
||||
"breakpoints": {
|
||||
"sm": 576,
|
||||
"md": 768,
|
||||
"lg": 992,
|
||||
"xl": 1200,
|
||||
"xxl": 1400
|
||||
},
|
||||
"colors": {
|
||||
"theme": {
|
||||
"base": {
|
||||
"white": "#ffffff",
|
||||
"primary": "#3699FF",
|
||||
"secondary": "#E5EAEE",
|
||||
"success": "#1BC5BD",
|
||||
"info": "#8950FC",
|
||||
"warning": "#FFA800",
|
||||
"danger": "#F64E60",
|
||||
"light": "#E4E6EF",
|
||||
"dark": "#181C32"
|
||||
},
|
||||
"light": {
|
||||
"white": "#ffffff",
|
||||
"primary": "#E1F0FF",
|
||||
"secondary": "#EBEDF3",
|
||||
"success": "#C9F7F5",
|
||||
"info": "#EEE5FF",
|
||||
"warning": "#FFF4DE",
|
||||
"danger": "#FFE2E5",
|
||||
"light": "#F3F6F9",
|
||||
"dark": "#D6D6E0"
|
||||
},
|
||||
"inverse": {
|
||||
"white": "#ffffff",
|
||||
"primary": "#ffffff",
|
||||
"secondary": "#3F4254",
|
||||
"success": "#ffffff",
|
||||
"info": "#ffffff",
|
||||
"warning": "#ffffff",
|
||||
"danger": "#ffffff",
|
||||
"light": "#464E5F",
|
||||
"dark": "#ffffff"
|
||||
}
|
||||
},
|
||||
"gray": {
|
||||
"gray-100": "#F3F6F9",
|
||||
"gray-200": "#EBEDF3",
|
||||
"gray-300": "#E4E6EF",
|
||||
"gray-400": "#D1D3E0",
|
||||
"gray-500": "#B5B5C3",
|
||||
"gray-600": "#7E8299",
|
||||
"gray-700": "#5E6278",
|
||||
"gray-800": "#3F4254",
|
||||
"gray-900": "#181C32"
|
||||
}
|
||||
},
|
||||
"font-family": "Poppins"
|
||||
};
|
||||
</script>
|
||||
<!--end::Global Config-->
|
||||
<!--begin::Global Theme Bundle(used by all pages)-->
|
||||
<script src="assets/plugins/global/plugins.bundle.js"></script>
|
||||
<script src="assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
|
||||
<script src="assets/js/scripts.bundle.js"></script>
|
||||
<!--end::Global Theme Bundle-->
|
||||
|
||||
<!--begin::Page Vendors(used by this page)-->
|
||||
<script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
|
||||
<!--end::Page Vendors-->
|
||||
|
||||
<!--begin::Page Scripts(used by this page)-->
|
||||
<script src="assets/js/pages/widgets.js"></script>
|
||||
<!--end::Page Scripts-->
|
||||
<!-- echartjs.min.js -->
|
||||
<script src="assets/js/echarts-js/echart.min.js"></script>
|
||||
<!-- SCRIPT -->
|
||||
<script type="text/javascript">
|
||||
// Initialize the echarts instance based on the prepared dom
|
||||
var chartMCU004 = echarts.init(document.getElementById('mcu-004'));
|
||||
var optMCU004 = {
|
||||
title: {
|
||||
text: 'Kelainan MCU',
|
||||
// subtext: 'Living Expenses in Shenzhen'
|
||||
},
|
||||
dataset: {
|
||||
source: [
|
||||
['score', 'amount', 'product', 'percentage'],
|
||||
[200, 447, 'Body Mass Index'],
|
||||
[150, 314, 'Pemeriksaan Mata'],
|
||||
[125, 314, 'Fungsi Lemak'],
|
||||
[100, 254, 'Autospirometri'],
|
||||
[90, 200, 'Hematologi'],
|
||||
[80, 180, 'ECG'],
|
||||
[75, 160, 'Hiperuricemia'],
|
||||
[70, 125, 'Tekanan Darah'],
|
||||
[60, 118, 'Urine Lengkap'],
|
||||
[50, 87, 'Fungsi Hati']
|
||||
]
|
||||
},
|
||||
grid: {
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
name: 'amount'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category'
|
||||
},
|
||||
visualMap: {
|
||||
orient: 'horizontal',
|
||||
left: 'center',
|
||||
min: 10,
|
||||
max: 100,
|
||||
show: false,
|
||||
|
||||
// text: ['High Score', 'Low Score'],
|
||||
// Map the score column to color
|
||||
dimension: 0,
|
||||
inRange: {
|
||||
color: ['#42aaf5', '#00eaf2', '#035bff']
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
label: {
|
||||
position: 'right',
|
||||
show: true,
|
||||
formatter: "{@[3]} %"
|
||||
},
|
||||
type: 'bar',
|
||||
encode: {
|
||||
// Map the "amount" column to X axis.
|
||||
x: 'amount',
|
||||
// Map the "product" column to Y axis
|
||||
y: 'product'
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
window.addEventListener('resize', function() {
|
||||
chartMCU004.resize();
|
||||
});
|
||||
|
||||
// Display the chart using the configuration items and data just specified.
|
||||
chartMCU004.setOption(optMCU004);
|
||||
|
||||
//MCU005
|
||||
// Initialize the echarts instance based on the prepared dom
|
||||
var chartMCU005 = echarts.init(document.getElementById('mcu-005'));
|
||||
var optMCU005 = {
|
||||
title: {
|
||||
text: 'Kelainan Fisik',
|
||||
// subtext: 'Living Expenses in Shenzhen'
|
||||
},
|
||||
dataset: {
|
||||
source: [
|
||||
['score', 'amount', 'product', 'percentage'],
|
||||
[200, 400, 'Obesitas Stage 1'],
|
||||
[150, 300, 'Pre Hipertensi'],
|
||||
[133, 250, 'Kelainan Refraksi'],
|
||||
[125, 180, 'Overweight'],
|
||||
[100, 125, 'Obesitas Stage 2'],
|
||||
[80, 100, 'Hipertensi grade 1'],
|
||||
[70, 80, 'Kel. Refrakti terkoreksi'],
|
||||
[60, 70, 'Kel. Refrakti tidak terkoreksi'],
|
||||
[55, 55, 'Hipertensi grade 2']
|
||||
]
|
||||
},
|
||||
grid: {
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
name: 'amount'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category'
|
||||
},
|
||||
visualMap: {
|
||||
orient: 'horizontal',
|
||||
left: 'center',
|
||||
min: 10,
|
||||
max: 100,
|
||||
show: false,
|
||||
// text: ['High Score', 'Low Score'],
|
||||
// Map the score column to color
|
||||
dimension: 0,
|
||||
inRange: {
|
||||
color: ['#42aaf5', '#00eaf2', '#035bff']
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
label: {
|
||||
position: 'right',
|
||||
show: true,
|
||||
formatter: "{@[3]} %"
|
||||
},
|
||||
type: 'bar',
|
||||
encode: {
|
||||
// Map the "amount" column to X axis.
|
||||
x: 'amount',
|
||||
// Map the "product" column to Y axis
|
||||
y: 'product'
|
||||
}
|
||||
}]
|
||||
};;
|
||||
|
||||
window.addEventListener('resize', function() {
|
||||
chartMCU005.resize();
|
||||
});
|
||||
|
||||
// Display the chart using the configuration items and data just specified.
|
||||
chartMCU005.setOption(optMCU005);
|
||||
</script>
|
||||
<!-- SCRIPT -->
|
||||
</body>
|
||||
<!--end::Body-->
|
||||
|
||||
</html>
|
||||
@@ -62,8 +62,12 @@ func main() {
|
||||
if err != nil {
|
||||
app.Logger.Fatalf("failed to create store: %s", err)
|
||||
}
|
||||
bchart, err := db.NewBarChartStore(dbName)
|
||||
if err != nil {
|
||||
app.Logger.Fatalf("failed to create store: %s", err)
|
||||
}
|
||||
|
||||
lpchart := services.NewServicesPiechart(services.Piechart{}, LpchartStore)
|
||||
lpchart := services.NewServicesPiechart(services.Piechart{}, services.Barchart{}, LpchartStore, bchart)
|
||||
lphsx := handlers.NewPiechartHandler(lpchart)
|
||||
handlers.SetupRoutesPieChart(app, lphsx)
|
||||
|
||||
|
||||
@@ -9,6 +9,9 @@ import (
|
||||
type PieChartStore struct {
|
||||
Db *sql.DB
|
||||
}
|
||||
type BarChartStore struct {
|
||||
Db *sql.DB
|
||||
}
|
||||
|
||||
func NewPieChartStore(dbName string) (PieChartStore, error) {
|
||||
Db, err := getConnection(dbName)
|
||||
@@ -24,3 +27,17 @@ func NewPieChartStore(dbName string) (PieChartStore, error) {
|
||||
Db,
|
||||
}, nil
|
||||
}
|
||||
func NewBarChartStore(dbName string) (BarChartStore, error) {
|
||||
Db, err := getConnection(dbName)
|
||||
if err != nil {
|
||||
return BarChartStore{}, err
|
||||
}
|
||||
|
||||
if err := createMigrations(dbName, Db); err != nil {
|
||||
return BarChartStore{}, err
|
||||
}
|
||||
|
||||
return BarChartStore{
|
||||
Db,
|
||||
}, nil
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@ import (
|
||||
|
||||
"github.com/a-h/templ"
|
||||
"github.com/emarifer/go-templ-project-structure/services"
|
||||
kelainanglobal "github.com/emarifer/go-templ-project-structure/views/mcu/kelainan_global"
|
||||
"github.com/emarifer/go-templ-project-structure/views/piechart"
|
||||
"github.com/emarifer/go-templ-project-structure/views/xsample"
|
||||
|
||||
@@ -18,6 +19,7 @@ import (
|
||||
|
||||
type PiechartService interface {
|
||||
GetPieChart(string, int) (string, services.Piechart, error)
|
||||
GetBarChart(code string, id int) (string, services.Barchart, error)
|
||||
}
|
||||
|
||||
func NewPiechartHandler(us PiechartService) *PiechartHandler {
|
||||
@@ -60,6 +62,47 @@ func (uh *PiechartHandler) ShowPieChart(c echo.Context) error {
|
||||
helo := piechart.ShowPieChart("Chart", piechart.MainPieChart(randomID, string(jsonData)), piechart.CssPieChart(), piechart.JsPieChart())
|
||||
return uh.View(c, helo)
|
||||
}
|
||||
func (uh *PiechartHandler) ShowBarChart(c echo.Context) error {
|
||||
// helo := piechart.MainPieChart("main_001")
|
||||
var code = "mcu004"
|
||||
title, udata, err := uh.PiechartService.GetBarChart(code, 1)
|
||||
if err != nil {
|
||||
// fmt.Println(err)
|
||||
return err
|
||||
}
|
||||
var code2 = "mcu005"
|
||||
title2, udata2, err := uh.PiechartService.GetBarChart(code2, 1)
|
||||
if err != nil {
|
||||
// fmt.Println(err)
|
||||
return err
|
||||
}
|
||||
|
||||
jsonData, err := json.MarshalIndent(udata, "", " ")
|
||||
if err != nil {
|
||||
fmt.Println("Error:", err)
|
||||
return err
|
||||
}
|
||||
jsonData2, err := json.MarshalIndent(udata2, "", " ")
|
||||
if err != nil {
|
||||
fmt.Println("Error:", err)
|
||||
return err
|
||||
}
|
||||
|
||||
// randomID := md5.Sum([]byte(title + time.Now().String()))
|
||||
seed := title + time.Now().String()
|
||||
hash := md5.Sum([]byte(seed))
|
||||
randomID := hex.EncodeToString(hash[:])
|
||||
randomID = strings.ReplaceAll(randomID, "-", "")
|
||||
|
||||
seed2 := title2 + time.Now().String()
|
||||
hash2 := md5.Sum([]byte(seed2))
|
||||
randomID2 := hex.EncodeToString(hash2[:])
|
||||
randomID2 = strings.ReplaceAll(randomID2, "-", "")
|
||||
|
||||
// randomID := hex.EncodeToString(md5.Sum([]byte(title + time.Now().String())))
|
||||
helo := kelainanglobal.ShowKelainanGlobal("Kelainan global", kelainanglobal.MainKelainanGlobal(randomID, string(jsonData), randomID2, string(jsonData2)), kelainanglobal.CssKelainanGlobal(), kelainanglobal.JsKelainanGlobal())
|
||||
return uh.View(c, helo)
|
||||
}
|
||||
|
||||
func (uh *PiechartHandler) View(c echo.Context, cmp templ.Component) error {
|
||||
c.Response().Header().Set(echo.HeaderContentType, echo.MIMETextHTML)
|
||||
|
||||
@@ -22,6 +22,7 @@ func SetupRoutesLandingPage(app *echo.Echo, h *LandingPageHandler) {
|
||||
func SetupRoutesPieChart(app *echo.Echo, h *PiechartHandler) {
|
||||
Lp := app.Group("/pie_chart")
|
||||
Lp.GET("/", h.ShowPieChart)
|
||||
Lp.GET("/bar", h.ShowBarChart)
|
||||
}
|
||||
func SetupRoutesProject(app *echo.Echo) {
|
||||
|
||||
|
||||
@@ -6,10 +6,12 @@ import (
|
||||
"github.com/emarifer/go-templ-project-structure/db"
|
||||
)
|
||||
|
||||
func NewServicesPiechart(u Piechart, uStore db.PieChartStore) *ServicesPiechart {
|
||||
func NewServicesPiechart(u Piechart, b Barchart, uStore db.PieChartStore, bStore db.BarChartStore) *ServicesPiechart {
|
||||
|
||||
return &ServicesPiechart{
|
||||
Piechart: u,
|
||||
Barchart: b,
|
||||
BarChartStore: bStore,
|
||||
PieChartStore: uStore,
|
||||
}
|
||||
}
|
||||
@@ -122,6 +124,8 @@ type Piechart struct {
|
||||
|
||||
type ServicesPiechart struct {
|
||||
Piechart Piechart
|
||||
Barchart Barchart
|
||||
BarChartStore db.BarChartStore
|
||||
PieChartStore db.PieChartStore
|
||||
}
|
||||
|
||||
@@ -329,6 +333,122 @@ func GetPieChartMcu006(code string, id int) (string, Piechart, error) {
|
||||
return title, option, nil
|
||||
}
|
||||
|
||||
// Kelainan MCU - MCU004
|
||||
func GetBarChartMcu004(code string, id int) (string, Barchart, error) {
|
||||
title := "Kelainan MCU"
|
||||
option := Barchart{}
|
||||
option.Title = struct {
|
||||
Text string "json:\"text\""
|
||||
}{title}
|
||||
option.Dataset = struct {
|
||||
Source [][]interface{} "json:\"source\""
|
||||
}{[][]interface{}{
|
||||
{"score", "amount", "product", "percentage"},
|
||||
{200, 447, "Body Mass Index"},
|
||||
{150, 314, "Pemeriksaan Mata"},
|
||||
{125, 314, "Fungsi Lemak"},
|
||||
{100, 254, "Autospirometri"},
|
||||
{90, 200, "Hematologi"},
|
||||
{80, 180, "ECG"},
|
||||
{75, 160, "Hiperuricemia"},
|
||||
{70, 125, "Tekanan Darah"},
|
||||
{60, 118, "Urine Lengkap"},
|
||||
{50, 87, "Fungsi Hati"},
|
||||
}}
|
||||
option.Grid.ContainLabel = true
|
||||
option.XAxis.Name = "amount"
|
||||
option.YAxis.Type = "category"
|
||||
option.VisualMap.Orient = "horizontal"
|
||||
option.VisualMap.Left = "center"
|
||||
option.VisualMap.Min = 10
|
||||
option.VisualMap.Max = 100
|
||||
option.VisualMap.Show = false
|
||||
option.VisualMap.Dimension = 0
|
||||
option.VisualMap.InRange.Color = []string{"#42aaf5", "#00eaf2", "#035bff"}
|
||||
option.Series = []struct {
|
||||
Label struct {
|
||||
Position string "json:\"position\""
|
||||
Show bool "json:\"show\""
|
||||
Formatter string "json:\"formatter\""
|
||||
} "json:\"label\""
|
||||
Type string "json:\"type\""
|
||||
Encode struct {
|
||||
X string "json:\"x\""
|
||||
Y string "json:\"y\""
|
||||
} "json:\"encode\""
|
||||
}{
|
||||
{Label: struct {
|
||||
Position string "json:\"position\""
|
||||
Show bool "json:\"show\""
|
||||
Formatter string "json:\"formatter\""
|
||||
}{Position: "right", Show: true, Formatter: "{@[3]} %"},
|
||||
Type: "bar", Encode: struct {
|
||||
X string "json:\"x\""
|
||||
Y string "json:\"y\""
|
||||
}{X: "amount", Y: "product"}},
|
||||
}
|
||||
|
||||
return title, option, nil
|
||||
|
||||
}
|
||||
|
||||
// Kelainan MCU - MCU004
|
||||
func GetBarChartMcu005(code string, id int) (string, Barchart, error) {
|
||||
title := "Kelainan Fisik"
|
||||
option := Barchart{}
|
||||
option.Title = struct {
|
||||
Text string "json:\"text\""
|
||||
}{title}
|
||||
option.Dataset = struct {
|
||||
Source [][]interface{} "json:\"source\""
|
||||
}{[][]interface{}{
|
||||
{"score", "amount", "product", "percentage"},
|
||||
{200, 400, "Obesitas Stage 1"},
|
||||
{150, 300, "Pre Hipertensi"},
|
||||
{133, 250, "Kelainan Refraksi"},
|
||||
{125, 180, "Overweight"},
|
||||
{100, 125, "Obesitas Stage 2"},
|
||||
{80, 100, "Hipertensi grade 1"},
|
||||
{70, 80, "Kel. Refrakti terkoreksi"},
|
||||
{60, 70, "Kel. Refrakti tidak terkoreksi"},
|
||||
{55, 55, "Hipertensi grade 2"},
|
||||
}}
|
||||
option.Grid.ContainLabel = true
|
||||
option.XAxis.Name = "amount"
|
||||
option.YAxis.Type = "category"
|
||||
option.VisualMap.Orient = "horizontal"
|
||||
option.VisualMap.Left = "center"
|
||||
option.VisualMap.Min = 10
|
||||
option.VisualMap.Max = 100
|
||||
option.VisualMap.Show = false
|
||||
option.VisualMap.Dimension = 0
|
||||
option.VisualMap.InRange.Color = []string{"#42aaf5", "#00eaf2", "#035bff"}
|
||||
option.Series = []struct {
|
||||
Label struct {
|
||||
Position string "json:\"position\""
|
||||
Show bool "json:\"show\""
|
||||
Formatter string "json:\"formatter\""
|
||||
} "json:\"label\""
|
||||
Type string "json:\"type\""
|
||||
Encode struct {
|
||||
X string "json:\"x\""
|
||||
Y string "json:\"y\""
|
||||
} "json:\"encode\""
|
||||
}{
|
||||
{Label: struct {
|
||||
Position string "json:\"position\""
|
||||
Show bool "json:\"show\""
|
||||
Formatter string "json:\"formatter\""
|
||||
}{Position: "right", Show: true, Formatter: "{@[3]} %"},
|
||||
Type: "bar", Encode: struct {
|
||||
X string "json:\"x\""
|
||||
Y string "json:\"y\""
|
||||
}{X: "amount", Y: "product"}},
|
||||
}
|
||||
|
||||
return title, option, nil
|
||||
|
||||
}
|
||||
func (su *ServicesPiechart) GetPieChart(code string, id int) (string, Piechart, error) {
|
||||
if code == "mcu001" {
|
||||
return GetPieChartMcu001(code, id)
|
||||
@@ -340,3 +460,14 @@ func (su *ServicesPiechart) GetPieChart(code string, id int) (string, Piechart,
|
||||
|
||||
return "", Piechart{}, fmt.Errorf("code " + code + " not found")
|
||||
}
|
||||
func (su *ServicesPiechart) GetBarChart(code string, id int) (string, Barchart, error) {
|
||||
|
||||
if code == "mcu004" {
|
||||
return GetBarChartMcu004(code, id)
|
||||
}
|
||||
if code == "mcu005" {
|
||||
return GetBarChartMcu005(code, id)
|
||||
}
|
||||
|
||||
return "", Barchart{}, fmt.Errorf("code " + code + " not found")
|
||||
}
|
||||
|
||||
131
views/mcu/kelainan_global/kelainan_global.templ
Normal file
131
views/mcu/kelainan_global/kelainan_global.templ
Normal file
@@ -0,0 +1,131 @@
|
||||
package kelainanglobal
|
||||
|
||||
import (
|
||||
"github.com/emarifer/go-templ-project-structure/views/layout"
|
||||
chart "github.com/emarifer/go-templ-project-structure/views/component/chart"
|
||||
)
|
||||
|
||||
templ MainKelainanGlobal(divMcu string, dataMcu string, divFisik string, dataFisik string) {
|
||||
<div id="div-chart">
|
||||
@HeaderKelainanGlobal()
|
||||
<div class="d-flex flex-column flex-root bg-white mt-25">
|
||||
<!-- begin::Navbar -->
|
||||
<div class="d-flex justify-content-center ">
|
||||
<h3 class="mb-3 title">Data Persentase Kelainan Global</h3>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 text-center mb-10">
|
||||
@chart.ShowChart(divMcu, dataMcu)
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
@chart.ShowChart(divFisik, dataFisik)
|
||||
</div>
|
||||
</div>
|
||||
<!-- end::Navbar -->
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ CssKelainanGlobal() {
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css?family=Public Sans:300,400,500,600,700"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"
|
||||
/>
|
||||
<style>
|
||||
body {
|
||||
background-color: white;
|
||||
/* padding-right: 100px;
|
||||
padding-left: 100px; */
|
||||
}
|
||||
#div-chart {
|
||||
/* overflow-x: scroll; */
|
||||
margin: 40px 10vw 40px 10vw;
|
||||
}
|
||||
.title {
|
||||
font-size:20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
</style>
|
||||
}
|
||||
|
||||
templ JsKelainanGlobal() {
|
||||
// echart
|
||||
<script src="assets/js/echarts-js/echart.min.js"></script>
|
||||
}
|
||||
|
||||
templ HeaderKelainanGlobal() {
|
||||
<!-- breadcrumb & icon tanya START -->
|
||||
<div class="row">
|
||||
<div class="col-11">
|
||||
<h1 class="title text-black" style="margin-bottom: 0">
|
||||
PT. Sadhana Abiyasa Sampoerna
|
||||
</h1>
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb" style="margin-bottom: 0">
|
||||
<li class="breadcrumb-item"><a href="#">Dashboard</a></li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Employee Health Medical Analytic</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">PT. Sadhana Abiyasa Sampoerna</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active" aria-current="page">
|
||||
Mcu Karyawan
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="col-1 align-content-center">
|
||||
<!-- align-content-center -->
|
||||
<div class="d-flex justify-content-end">
|
||||
<a href="#">
|
||||
<i class="fas fa-info-circle text-primary"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- breadcrumb & icon tanya END -->
|
||||
<div class="mt-10">
|
||||
<ul class="nav nav-tabs nav-tabs-line">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#kt_tab_pane_1">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">Kesimpulan & Saran</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-toggle="tab" href="#kt_tab_pane_7">Daftar Peserta</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ ShowKelainanGlobal(title string, cmp templ.Component, css templ.Component, js templ.Component) {
|
||||
@layout.PlaygroundLayout(title, css, js) {
|
||||
@cmp
|
||||
}
|
||||
}
|
||||
175
views/mcu/kelainan_global/kelainan_global_templ.go
Normal file
175
views/mcu/kelainan_global/kelainan_global_templ.go
Normal file
@@ -0,0 +1,175 @@
|
||||
// Code generated by templ - DO NOT EDIT.
|
||||
|
||||
// templ: version: v0.2.663
|
||||
package kelainanglobal
|
||||
|
||||
//lint:file-ignore SA4006 This context is only used if a nested component is present.
|
||||
|
||||
import "github.com/a-h/templ"
|
||||
import "context"
|
||||
import "io"
|
||||
import "bytes"
|
||||
|
||||
import (
|
||||
chart "github.com/emarifer/go-templ-project-structure/views/component/chart"
|
||||
"github.com/emarifer/go-templ-project-structure/views/layout"
|
||||
)
|
||||
|
||||
func MainKelainanGlobal(divMcu string, dataMcu string, divFisik string, dataFisik 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_Var1 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var1 == nil {
|
||||
templ_7745c5c3_Var1 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"div-chart\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = HeaderKelainanGlobal().Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"d-flex flex-column flex-root bg-white mt-25\"><!-- begin::Navbar --><div class=\"d-flex justify-content-center \"><h3 class=\"mb-3 title\">Data Persentase Kelainan Global</h3></div><div class=\"row justify-content-center\"><div class=\"col-12 text-center mb-10\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = chart.ShowChart(divMcu, dataMcu).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"col-12 text-center\">")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
templ_7745c5c3_Err = chart.ShowChart(divFisik, dataFisik).Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><!-- end::Navbar --></div></div>")
|
||||
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 CssKelainanGlobal() 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_Var2 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var2 == nil {
|
||||
templ_7745c5c3_Var2 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700\"><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Public Sans:300,400,500,600,700\"><link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700\"><style>\r\n body {\r\n background-color: white;\r\n /* padding-right: 100px;\r\n padding-left: 100px; */\r\n }\r\n #div-chart {\r\n /* overflow-x: scroll; */\r\n margin: 40px 10vw 40px 10vw;\r\n }\r\n .title {\r\n font-size:20px;\r\n font-weight: bold;\r\n }\r\n #title {\r\n font-weight: 600;\r\n }\r\n \r\n</style>")
|
||||
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 JsKelainanGlobal() 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_Var3 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var3 == nil {
|
||||
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)
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
}
|
||||
|
||||
func HeaderKelainanGlobal() 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_Var4 := templ.GetChildren(ctx)
|
||||
if templ_7745c5c3_Var4 == nil {
|
||||
templ_7745c5c3_Var4 = templ.NopComponent
|
||||
}
|
||||
ctx = templ.ClearChildren(ctx)
|
||||
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- breadcrumb & icon tanya START --><div class=\"row\"><div class=\"col-11\"><h1 class=\"title text-black\" style=\"margin-bottom: 0\">PT. Sadhana Abiyasa Sampoerna\r</h1><nav aria-label=\"breadcrumb\"><ol class=\"breadcrumb\" style=\"margin-bottom: 0\"><li class=\"breadcrumb-item\"><a href=\"#\">Dashboard</a></li><li class=\"breadcrumb-item\"><a href=\"#\">Employee Health Medical Analytic</a></li><li class=\"breadcrumb-item\"><a href=\"#\">PT. Sadhana Abiyasa Sampoerna</a></li><li class=\"breadcrumb-item active\" aria-current=\"page\">Mcu Karyawan\r</li></ol></nav></div><div class=\"col-1 align-content-center\"><!-- align-content-center --><div class=\"d-flex justify-content-end\"><a href=\"#\"><i class=\"fas fa-info-circle text-primary\"></i></a></div></div></div><!-- breadcrumb & icon tanya END --><div class=\"mt-10\"><ul class=\"nav nav-tabs nav-tabs-line\"><li class=\"nav-item\"><a class=\"nav-link\" data-toggle=\"tab\" href=\"#kt_tab_pane_1\">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\">Kesimpulan & Saran</a></li><li class=\"nav-item\"><a class=\"nav-link active\" data-toggle=\"tab\" href=\"#kt_tab_pane_7\">Daftar Peserta</a></li></ul></div>")
|
||||
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 ShowKelainanGlobal(title string, cmp templ.Component, css templ.Component, js 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)
|
||||
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_Var6 := 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)
|
||||
}
|
||||
templ_7745c5c3_Err = cmp.Render(ctx, templ_7745c5c3_Buffer)
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
if !templ_7745c5c3_IsBuffer {
|
||||
_, templ_7745c5c3_Err = io.Copy(templ_7745c5c3_W, templ_7745c5c3_Buffer)
|
||||
}
|
||||
return templ_7745c5c3_Err
|
||||
})
|
||||
templ_7745c5c3_Err = layout.PlaygroundLayout(title, css, js).Render(templ.WithChildren(ctx, templ_7745c5c3_Var6), 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
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user