<!

--begin::Main-->
<!--begin::Root-->
<div class="d-flex flex-column flex-root">
<!--begin::Page-->
<div class="page d-flex flex-row flex-column-fluid">
<!--begin::Wrapper-->
<div class="wrapper d-flex flex-column flex-row-fluid"
id="kt_wrapper">

<!--begin::Toolbar-->
<div class="toolbar py-5 py-lg-15" id="kt_toolbar">
<!--begin::Container-->
<div id="kt_toolbar_container"
class="container-xxl d-flex flex-stack flex-wrap">
<!--begin::Page title-->
<div class="page-title d-flex flex-column
me-3">
<!--begin::Title-->
<h1 class="d-flex text-white fw-
bold my-1 fs-3">Mixed</h1>
<!--end::Title-->
</div>
<!--end::Page title-->

</div>
<!--end::Container-->
</div>
<!--end::Toolbar-->
<!--begin::Container-->
<div id="kt_content_container" class="d-flex flex-
column-fluid align-items-start container-xxl">
<!--begin::Post-->
<div class="content flex-row-fluid"
id="kt_content">
<div class="row g-5 g-xl-8">
<!--begin::Col-->
<div class="col-xl-4">
<!--begin::Mixed Widget 4-->
<div class="card card-xl-
stretch mb-xl-8">
<!--begin::Beader-->
<div class="card-header
border-0 py-5">
<h3 class="card-
title align-items-start flex-column">
<span
class="card-label fw-bold fs-3 mb-1">Statistique présence par classe</span>
<span
class="text-muted fw-semibold fs-7">CP</span>
</h3>

</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body d-
flex flex-column">
<div class="flex-
grow-1">
<div
class="mixed-widget-11-chart" id="class" value="" data-kt-chart-color1="success"
style="height: 200px; min-height:178.7px;">
</div>
<div class="row">
<div
class="col-xl-4 text-center"><span class="badge badge-light-success fs-
8">Présent:</span> 10</div>
<div
class="col-xl-4 text-center"><span class="badge badge-light-danger
fs-8">Absent:</span> 90</div>
</div>
</div>
<div class="pt-5">
<p
class="text-center fs-6 pb-2">
<br>
<a href="#"
class="btn btn-primary w-100 py-3">Acceder A la liste</a>
</div>
</div>
<!--end::Body-->
</div>
<!--end::Mixed Widget 4-->
</div>
<!--end::Col-->

<!--end::Post-->
</div>
<!--end::Container-->

</div>
<!--end::Wrapper-->
</div>
<!--end::Page-->
</div>
<!--end::Root-->

<?php require_once('script/listePresence_js.php');?>
<!-- <script src=<?=
yii::$app->request->baseUrl.'/views/presence/listePresence/script/scripList.js'?
>></script> -->
//script

"use strict";

// Class definition
var KTWidgets = function () {

var initMixedWidget= function() {

var charts = document.querySelectorAll('.mixed-widget-11-chart');

[].slice.call(charts).map(function(element) {
var height = parseInt(KTUtil.css(element, 'height'));

if ( !element ) {
return;
}

var color = element.getAttribute('data-kt-chart-color1');

var baseColor = KTUtil.getCssVariableValue('--kt-' + color);

var lightColor = KTUtil.getCssVariableValue('--kt-' + color + '-
light' );
var labelColor = KTUtil.getCssVariableValue('--kt-' + 'gray-700');
//Pourcentage de la bare
var options = {
series: [200],
chart: {
fontFamily: 'inherit',
height: height,
type: 'radialBar',
},
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: "65%"
},
dataLabels: {
showOn: "always",
name: {
show: false,
fontWeight: '700'
},
value: {
color: labelColor,
fontSize: "30px",
fontWeight: '700',
offsetY: 12,
show: true,
formatter: function (val) {
return val + '%';
}
}
 },
track: {
background: lightColor,
strokeWidth: '100%'
}
}
},
colors: [baseColor],
stroke: {
lineCap: "round",
},
labels: ["Progress"]
};

var chart = new ApexCharts(element, options);

chart.render();
});
}

// Dark mode toggler

// Public methods
return {
init: function () {

// Mixed widgets

initMixedWidget();

}
}
}();

// On document ready
KTUtil.onDOMContentLoaded(function() {
KTWidgets.init();
});