atuy
406 lines
12 KiB
PHP
406 lines
12 KiB
PHP
<style>
|
|
#chartdiv {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
|
|
#chartdiv2 {
|
|
width: 100%;
|
|
height: 250px;
|
|
}
|
|
|
|
#chartdiv3 {
|
|
width: 100%;
|
|
height: 250px;
|
|
}
|
|
|
|
.widget-user .widget-user-image>img {
|
|
width: 90px;
|
|
height: auto;
|
|
border: none;
|
|
}
|
|
</style>
|
|
<section class="content">
|
|
<?php if ($this->session->userdata('akses') == 1) : ?>
|
|
<div class="row">
|
|
<?php foreach ($box as $info_box) : ?>
|
|
<div class="col-lg-3 col-xs-6">
|
|
<div class="small-box bg-<?= $info_box->box ?>">
|
|
<div class="inner">
|
|
<h3 class="count"><?= $info_box->total; ?></h3>
|
|
<p><?= $info_box->title; ?></p>
|
|
</div>
|
|
<div class="icon">
|
|
<i class="fa fa-<?= $info_box->icon ?>"></i>
|
|
</div>
|
|
<a href="<?= base_url() . strtolower($info_box->link); ?>" class="small-box-footer">
|
|
More info
|
|
<i class="fa fa-arrow-circle-right"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="box box-default">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Total Barang Berdasarkan Kategori</h3>
|
|
<div class="box-tools pull-right">
|
|
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="box-body">
|
|
<div id="chartdiv2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="box box-default">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Top 5 Barang Terjual Bulan Ini</h3>
|
|
<div class="box-tools pull-right">
|
|
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="box-body">
|
|
<div id="chartdiv3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="box box-default">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Grafik Total Stok Barang</h3>
|
|
<div class="box-tools pull-right">
|
|
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="box-body">
|
|
<div id="chartdiv"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php else : ?>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="box box-widget widget-user">
|
|
<div class="widget-user-header bg-green-active">
|
|
<p style="text-align: center;"><br>
|
|
<span style="font-family: georgia, palatino; font-size: 15pt;">Selamat Datang di Aplikasi POS Buku Dharma Al Muhtadin Depok</span>
|
|
</p>
|
|
<h3 class="widget-user-username"></h3>
|
|
<h5 class="widget-user-desc"></h5>
|
|
</div>
|
|
<!-- <div class="widget-user-image">
|
|
<img class="img-circle" src="<?php echo base_url(); ?>assets/dist/img/logo.png">
|
|
</div>
|
|
<div class="box-footer">
|
|
<div class="row">
|
|
<div class="col-sm-4 border-right">
|
|
<div class="description-block">
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4 border-right">
|
|
<div class="description-block">
|
|
<h5 class="description-header">Alamat : Jl. Raya Cipayung No. 1 Cipayung - Depok</h5>
|
|
<span >No. Telp : 021-77882517 - Website : www.smk-almuhtadin.sch.id</span>
|
|
</div>
|
|
<center>
|
|
<i>--Sistem Stok dan Penjualan Buku--</i><br>
|
|
</center>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<div class="description-block">
|
|
<h5 class="description-header"></h5>
|
|
<span class="description-text"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="box box-default">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Total Barang Berdasarkan Kategori</h3>
|
|
<div class="box-tools pull-right">
|
|
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="box-body">
|
|
<div id="chartdiv2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="box box-default">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Top 5 Barang Terjual Bulan Ini</h3>
|
|
<div class="box-tools pull-right">
|
|
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="box-body">
|
|
<div id="chartdiv3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="box box-default">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Grafik Total Stok Barang</h3>
|
|
<div class="box-tools pull-right">
|
|
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="box-body">
|
|
<div id="chartdiv"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
</section>
|
|
<!-- Styles -->
|
|
|
|
|
|
<!-- Resources -->
|
|
<script src="<?php echo base_url() ?>assets/plugins/amchart4/core.js"></script>
|
|
<script src="<?php echo base_url() ?>assets/plugins/amchart4/charts.js"></script>
|
|
<script src="<?php echo base_url() ?>assets/plugins/amchart4/themes/dataviz.js"></script>
|
|
<script src="<?php echo base_url() ?>assets/plugins/amchart4/themes/material.js"></script>
|
|
<script src="<?php echo base_url() ?>assets/plugins/amchart4/themes/animated.js"></script>
|
|
|
|
<!-- Chart code -->
|
|
<script>
|
|
am4core.ready(function() {
|
|
let url = '<?= base_url() ?>';
|
|
// Themes begin
|
|
am4core.useTheme(am4themes_dataviz);
|
|
am4core.useTheme(am4themes_animated);
|
|
am4core.options.minPolylineStep = 5;
|
|
am4core.options.queue = true;
|
|
am4core.options.onlyShowOnViewport = true;
|
|
|
|
// Themes end
|
|
|
|
// Create chart instance
|
|
var chart = am4core.create("chartdiv", am4charts.XYChart);
|
|
|
|
// Add data
|
|
chart.data = [
|
|
|
|
<?php foreach ($graph as $row) : ?> {
|
|
"barang": "<?php echo $row->nama_barang; ?>",
|
|
"total": <?php echo $row->total; ?>
|
|
},
|
|
<?php endforeach; ?>
|
|
];
|
|
|
|
// Create axes
|
|
|
|
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
|
|
categoryAxis.dataFields.category = "barang";
|
|
categoryAxis.renderer.grid.template.location = 0;
|
|
categoryAxis.renderer.minGridDistance = 30;
|
|
|
|
categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
|
|
if (target.dataItem && target.dataItem.index & 2 == 2) {
|
|
return dy + 25;
|
|
}
|
|
return dy;
|
|
});
|
|
|
|
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
|
|
// Create series
|
|
var series = chart.series.push(new am4charts.ColumnSeries());
|
|
series.dataFields.valueY = "total";
|
|
series.dataFields.categoryX = "barang";
|
|
series.name = "total";
|
|
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
|
|
series.columns.template.fillOpacity = .8;
|
|
series.minBulletDistance = 20;
|
|
|
|
var columnTemplate = series.columns.template;
|
|
columnTemplate.strokeWidth = 2;
|
|
columnTemplate.strokeOpacity = 1;
|
|
|
|
|
|
|
|
// Create chart instance
|
|
var chart = am4core.create("chartdiv2", am4charts.PieChart);
|
|
|
|
// Add data
|
|
chart.data = [
|
|
<?php foreach ($kategori as $row) : ?> {
|
|
"barang": "<?php echo $row->nama_kategori ?>",
|
|
"total": <?php echo $row->total ?>,
|
|
"color": getRandomColor(),
|
|
},
|
|
<?php endforeach; ?>
|
|
];
|
|
// Add and configure Series
|
|
var pieSeries = chart.series.push(new am4charts.PieSeries());
|
|
pieSeries.dataFields.value = "total";
|
|
pieSeries.dataFields.category = "barang";
|
|
pieSeries.hiddenState.properties.endAngle = -90;
|
|
pieSeries.ticks.template.disabled = true;
|
|
pieSeries.alignLabels = false;
|
|
pieSeries.labels.template.text = "{value.percent.formatNumber('#.0')}%";
|
|
pieSeries.labels.template.radius = am4core.percent(-40);
|
|
pieSeries.labels.template.fill = am4core.color("white");
|
|
pieSeries.labels.template.relativeRotation = 90;
|
|
chart.responsive.useDefault = false
|
|
chart.responsive.enabled = true;
|
|
|
|
chart.color = [
|
|
<?php foreach ($kategori as $row) : ?>
|
|
getRandomColor(),
|
|
<?php endforeach; ?>
|
|
];
|
|
|
|
var colorSet = new am4core.ColorSet();
|
|
colorSet.list = chart.color.map(function(color) {
|
|
return new am4core.color(color);
|
|
});
|
|
pieSeries.colors = colorSet;
|
|
|
|
function getRandomColor() {
|
|
var letters = '0123456789ABCDEF';
|
|
var color = '#';
|
|
for (var i = 0; i < 6; i++) {
|
|
color += letters[Math.floor(Math.random() * 16)];
|
|
}
|
|
return color;
|
|
}
|
|
|
|
chart.responsive.useDefault = false
|
|
chart.responsive.enabled = true;
|
|
chart.responsive.rules.push({
|
|
relevant: function(target) {
|
|
return false;
|
|
},
|
|
state: function(target, stateId) {
|
|
return;
|
|
}
|
|
});
|
|
|
|
|
|
var chart = am4core.create("chartdiv3", am4charts.XYChart);
|
|
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
|
|
|
|
chart.paddingRight = 30;
|
|
|
|
|
|
chart.data = [
|
|
<?php foreach ($laris as $row) : ?> {
|
|
"barang": "<?php echo $row->nama_barang; ?>",
|
|
"total": <?php echo $row->total; ?>,
|
|
"href": url + "uploads/<?php echo $row->foto; ?>"
|
|
},
|
|
<?php endforeach; ?>
|
|
];
|
|
|
|
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
|
|
categoryAxis.dataFields.category = "barang";
|
|
categoryAxis.renderer.grid.template.strokeOpacity = 0;
|
|
categoryAxis.renderer.minGridDistance = 10;
|
|
categoryAxis.renderer.labels.template.dx = -40;
|
|
categoryAxis.renderer.minWidth = 120;
|
|
categoryAxis.renderer.tooltip.dx = -40;
|
|
|
|
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
|
|
valueAxis.renderer.inside = true;
|
|
valueAxis.renderer.labels.template.fillOpacity = 0.3;
|
|
valueAxis.renderer.grid.template.strokeOpacity = 0;
|
|
valueAxis.min = 0;
|
|
valueAxis.cursorTooltipEnabled = false;
|
|
valueAxis.renderer.baseGrid.strokeOpacity = 0;
|
|
valueAxis.renderer.labels.template.dy = 20;
|
|
|
|
var series = chart.series.push(new am4charts.ColumnSeries);
|
|
series.dataFields.valueX = "total";
|
|
series.dataFields.categoryY = "barang";
|
|
series.tooltipText = "{valueX.value}";
|
|
series.tooltip.pointerOrientation = "vertical";
|
|
series.tooltip.dy = -30;
|
|
series.columnsContainer.zIndex = 100;
|
|
series.minBulletDistance = 20;
|
|
|
|
|
|
var columnTemplate = series.columns.template;
|
|
columnTemplate.height = am4core.percent(50);
|
|
columnTemplate.maxHeight = 30;
|
|
columnTemplate.column.cornerRadius(60, 10, 60, 10);
|
|
columnTemplate.strokeOpacity = 0;
|
|
|
|
series.heatRules.push({
|
|
target: columnTemplate,
|
|
property: "fill",
|
|
dataField: "valueX",
|
|
min: am4core.color("#e5dc36"),
|
|
max: am4core.color("#5faa46")
|
|
});
|
|
series.mainContainer.mask = undefined;
|
|
|
|
var cursor = new am4charts.XYCursor();
|
|
chart.cursor = cursor;
|
|
cursor.lineX.disabled = true;
|
|
cursor.lineY.disabled = true;
|
|
cursor.behavior = "none";
|
|
|
|
var bullet = columnTemplate.createChild(am4charts.CircleBullet);
|
|
bullet.circle.radius = 10;
|
|
bullet.valign = "middle";
|
|
bullet.align = "left";
|
|
bullet.isMeasured = true;
|
|
bullet.interactionsEnabled = false;
|
|
bullet.horizontalCenter = "right";
|
|
bullet.interactionsEnabled = false;
|
|
|
|
var hoverState = bullet.states.create("hover");
|
|
var outlineCircle = bullet.createChild(am4core.Circle);
|
|
outlineCircle.adapter.add("radius", function(radius, target) {
|
|
var circleBullet = target.parent;
|
|
return circleBullet.circle.pixelRadius + 10;
|
|
})
|
|
|
|
var image = bullet.createChild(am4core.Image);
|
|
image.width = 30;
|
|
image.height = 30;
|
|
image.horizontalCenter = "middle";
|
|
image.verticalCenter = "middle";
|
|
image.propertyFields.href = "href";
|
|
image.adapter.add("mask", function(mask, target) {
|
|
var circleBullet = target.parent;
|
|
return circleBullet.circle;
|
|
})
|
|
var previousBullet;
|
|
chart.cursor.events.on("cursorpositionchanged", function(event) {
|
|
var dataItem = series.tooltipDataItem;
|
|
if (dataItem.column) {
|
|
var bullet = dataItem.column.children.getIndex(1);
|
|
if (previousBullet && previousBullet != bullet) {
|
|
previousBullet.isHover = false;
|
|
}
|
|
if (previousBullet != bullet) {
|
|
var hs = bullet.states.getKey("hover");
|
|
hs.properties.dx = dataItem.column.pixelWidth;
|
|
bullet.isHover = true;
|
|
previousBullet = bullet;
|
|
}
|
|
}
|
|
})
|
|
|
|
}); // end am4core.ready()
|
|
</script>
|
|
|
|
<!-- HTML -->
|