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

kelainan global chart

Browse Source
This commit is contained in:
Sas Andy
2024-04-30 17:16:21 +07:00
parent 3c9c63dd2a
commit d601cc0801
10 changed files with 898 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
assets/asset-corporate-portal/css/sas.bundle.css
View File

@@ -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
View 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>

301
assets/mcu/kelainan-global.php
View File

@@ -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>