deploy awal
This commit is contained in:
atuy
@@ -0,0 +1,406 @@
|
||||
<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 -->
|
||||
Reference in New Issue
Block a user