<!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 LAB</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-015 {
            height: 50vh;
            /* overflow-x: scroll; */
            width: "100%";
        }

        #mcu-016 {
            height: 40vh;
            /* overflow-x: scroll; */
            width: "100%";
        }

        #mcu-017 {
            height: 40vh;
            /* overflow-x: scroll; */
            width: "100%";
        }

        #mcu-018 {
            height: 40vh;
            /* overflow-x: scroll; */
            width: "100%";
        }

        #mcu-019 {
            height: 40vh;
            /* overflow-x: scroll; */
            width: "100%";
        }

        #mcu-014 {
            height: 40vh;
            /* 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 mb-3">
            <h3>Data Persentase Kelainan Lab</h3>
        </div>

        <div id="mcu-015">
        </div>
        <div class="text-center">
            <div class=" row">
                <div class="col-12 col-xxl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div id="mcu-016">
                    </div>
                </div>
                <div class="col-12 col-xxl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div id="mcu-017">
                    </div>
                </div>
                <div class="col-12 col-xxl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div id="mcu-018">
                    </div>
                </div>
                <div class="col-12 col-xxl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div id="mcu-019">
                    </div>
                </div>

            </div>
        </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 chartMCU015 = echarts.init(document.getElementById('mcu-015'));
        var optMCU015 = option = {
            title: {
                text: 'Kelainan Fisik',
                //   subtext: 'Living Expenses in Shenzhen'
            },
            dataset: {
                source: [
                    ['score', 'amount', 'product'],
                    [200, 447, 'Retriksi sedang'],
                    [175, 314, 'Takikardia'],
                    [150, 314, 'ST-T Changes'],
                    [125, 254, 'IRBBB'],
                    [100, 200, 'Obstruksi ringan'],
                    [90, 180, 'CRBBB'],
                    [80, 160, 'Bradikardia'],
                    [70, 125, 'Obstruksi sedang'],
                    [60, 118, 'Gangguan konduksi ringan'],
                    [50, 87, 'Retriksi ringan']
                ]
            },
            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: [{
                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() {
            chartMCU015.resize();
        });

        // Display the chart using the configuration items and data just specified.
        chartMCU015.setOption(optMCU015);

        //MCU010
        // Initialize the echarts instance based on the prepared dom
        var chartMCU016 = echarts.init(document.getElementById('mcu-016'));
        var optMCU016 = {
            title: {
                text: 'Gangguan Jantung',
                //   subtext: 'Living Expenses in Shenzhen'
            },
            dataset: {
                source: [
                    ['score', 'amount', 'product'],
                    [89.3, 11, 'IRBBB'],
                    [57.1, 13, 'CRBBB'],
                    [74.4, 14, 'Bradikardia'],
                    [50.1, 5, 'Takikardia'],
                    [89.7, 7, 'ST-T Changes'],
                    [66.7, 4, 'LAFB']
                ]
            },
            grid: {
                containLabel: true
            },
            yAxis: {
                name: ''
            },
            xAxis: {
                type: 'category'
            },
            visualMap: {
                orient: 'horizontal',
                show: false,
                left: 'center',
                min: 10,
                max: 100,
                //  text: ['High Score', 'Low Score'],
                // Map the score column to color
                dimension: 0,
                inRange: {
                    color: ['#42aaf5', '#00eaf2', '#035bff']
                }
            },
            series: [{
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    encode: {
                        // Map the "amount" column to X axis.
                        y: 'amount',
                        // Map the "product" column to Y axis
                        x: 'product'
                    }
                }

            ]
        };

        window.addEventListener('resize', function() {
            chartMCU016.resize();
        });

        // Display the chart using the configuration items and data just specified.
        chartMCU016.setOption(optMCU016);

        //MCU017
        // Initialize the echarts instance based on the prepared dom
        var chartMCU017 = echarts.init(document.getElementById('mcu-017'));
        var optMCU017 = {
            title: {
                text: 'Thorax PA',
                //   subtext: 'Living Expenses in Shenzhen'
            },
            dataset: {
                source: [
                    ['score', 'amount', 'product'],
                    [89.3, 7, 'TB paru'],
                    [57.1, 5, 'Scoliosis'],
                    [74.4, 6, 'Fibrosis'],
                    [50.1, 4, 'Cardiomegali']
                ]
            },
            grid: {
                containLabel: true
            },
            yAxis: {
                name: ''
            },
            xAxis: {
                type: 'category'
            },
            visualMap: {
                orient: 'horizontal',
                show: false,
                left: 'center',
                min: 10,
                max: 100,
                //  text: ['High Score', 'Low Score'],
                // Map the score column to color
                dimension: 0,
                inRange: {
                    color: ['#42aaf5', '#00eaf2', '#035bff']
                }
            },
            series: [{
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    encode: {
                        // Map the "amount" column to X axis.
                        y: 'amount',
                        // Map the "product" column to Y axis
                        x: 'product'
                    }
                }

            ]
        };

        window.addEventListener('resize', function() {
            chartMCU017.resize();
        });

        // Display the chart using the configuration items and data just specified.
        chartMCU017.setOption(optMCU017);

        //MCU018
        // Initialize the echarts instance based on the prepared dom
        var chartMCU018 = echarts.init(document.getElementById('mcu-018'));
        var optMCU018 = {
            title: {
                text: 'Kelainan Autospirometri',
                //   subtext: 'Living Expenses in Shenzhen'
            },
            dataset: {
                source: [
                    ['score', 'amount', 'product'],
                    [89.3, 22, 'Retriksi ringan'],
                    [57.1, 4, 'Retriksi sedang'],
                    [74.4, 4, 'Retriksi berat'],
                    [50.1, 11, 'Obstruksi ringan'],
                    [67.1, 13, 'Obstruksi sedang']
                ]
            },
            grid: {
                containLabel: true
            },
            yAxis: {
                name: ''
            },
            xAxis: {
                type: 'category'
            },
            visualMap: {
                orient: 'horizontal',
                show: false,
                left: 'center',
                min: 10,
                max: 100,
                //  text: ['High Score', 'Low Score'],
                // Map the score column to color
                dimension: 0,
                inRange: {
                    color: ['#42aaf5', '#00eaf2', '#035bff']
                }
            },
            series: [{
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    encode: {
                        // Map the "amount" column to X axis.
                        y: 'amount',
                        // Map the "product" column to Y axis
                        x: 'product'
                    }
                }

            ]
        };

        window.addEventListener('resize', function() {
            chartMCU018.resize();
        });

        // Display the chart using the configuration items and data just specified.
        chartMCU018.setOption(optMCU018);


        //MCU019
        // Initialize the echarts instance based on the prepared dom
        var chartMCU019 = echarts.init(document.getElementById('mcu-019'));
        var optMCU019 = {
            title: {
                text: 'Gangguan Pendengaran',
                //   subtext: 'Living Expenses in Shenzhen'
            },
            dataset: {
                source: [
                    ['score', 'amount', 'product'],
                    [89.3, 15, 'Gangguan konduksi ringan'],
                    [57.1, 1, 'SNHL'],
                    [74.4, 3, 'Gangguan dengar ringan ']
                ]
            },
            grid: {
                containLabel: true
            },
            yAxis: {
                name: ''
            },
            xAxis: {
                type: 'category'
            },
            visualMap: {
                orient: 'horizontal',
                show: false,
                left: 'center',
                min: 10,
                max: 100,
                //  text: ['High Score', 'Low Score'],
                // Map the score column to color
                dimension: 0,
                inRange: {
                    color: ['#42aaf5', '#00eaf2', '#035bff']
                }
            },
            series: [{
                    type: 'bar',
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    encode: {
                        // Map the "amount" column to X axis.
                        y: 'amount',
                        // Map the "product" column to Y axis
                        x: 'product'
                    }
                }

            ]
        };

        window.addEventListener('resize', function() {
            chartMCU019.resize();
        });

        // Display the chart using the configuration items and data just specified.
        chartMCU019.setOption(optMCU019);
    </script>
    <!-- SCRIPT -->
</body>
<!--end::Body-->

</html>