576 строки
19 KiB
JavaScript
576 строки
19 KiB
JavaScript
function onRegionalSales() {
|
|
var scale = chroma.scale(["#ade1fb", "#097dc6"]).domain([1, 100]),
|
|
selectedShape = null,
|
|
selectedCountry = "USA";
|
|
|
|
function resizeMap() {
|
|
var map = $("#map").data("kendoMap");
|
|
map.resize();
|
|
map.center([50.000, 0]);
|
|
}
|
|
|
|
function resizeChart(){
|
|
var chart = $("#top-selling-products").data("kendoChart");
|
|
chart.resize();
|
|
}
|
|
|
|
function onMarketShareDataBound(e) {
|
|
var percentage = 0,
|
|
revenue = 0;
|
|
if (this.dataSource.data().length == 2) {
|
|
percentage = (this.dataSource.at(1).sales / this.dataSource.at(0).sales);
|
|
revenue = this.dataSource.at(1).sales;
|
|
}
|
|
|
|
$("#market-share-label").text(kendo.toString(percentage, "p2"));
|
|
$("#revenue-label").text(kendo.toString(revenue, "c2"));
|
|
|
|
$("#revenue-no-data").toggle(revenue === 0);
|
|
$("#market-share-no-data").toggle(percentage === 0);
|
|
if (percentage === 0) {
|
|
$("#market-share").css({
|
|
visibility: "hidden"
|
|
});
|
|
} else {
|
|
$("#market-share").css({
|
|
visibility: "visible"
|
|
});
|
|
}
|
|
}
|
|
|
|
$('[data-toggle=offcanvas]').click(function () {
|
|
$('.row-offcanvas').toggleClass('active');
|
|
});
|
|
|
|
$('#start-date').kendoDatePicker({
|
|
value: new Date(1996, 0, 1),
|
|
min: new Date(1996, 0, 1),
|
|
max: new Date(1998, 5, 30),
|
|
change: startChange
|
|
})
|
|
|
|
$('#end-date').kendoDatePicker({
|
|
value: new Date(1998, 7, 9),
|
|
min: new Date(1996, 0, 1),
|
|
max: new Date(1998, 7, 9),
|
|
change: endChange
|
|
})
|
|
|
|
$("#map").kendoMap({
|
|
center: [50.000, 0],
|
|
zoom: 2,
|
|
layers: [{
|
|
style: {
|
|
fill: {
|
|
color: "#1996E4"
|
|
},
|
|
stroke: {
|
|
color: "#FFFFFF"
|
|
}
|
|
},
|
|
type: "shape",
|
|
dataSource: {
|
|
type: "geojson",
|
|
transport: {
|
|
read: {
|
|
dataType: "json",
|
|
url: "./Content/countries-sales.geo.json"
|
|
}
|
|
}
|
|
}
|
|
}],
|
|
shapeCreated: onShapeCreated,
|
|
shapeMouseEnter: onShapeMouseEnter,
|
|
shapeMouseLeave: onShapeMouseLeave,
|
|
shapeClick: onShapeClick,
|
|
zoomable: false
|
|
});
|
|
|
|
var orderDetailsData = [];
|
|
var customers = [];
|
|
var countryCustomers = []
|
|
var topSellingProducts = [];
|
|
|
|
$.when(
|
|
$.getJSON("./Content/order-details.json", function (data) {
|
|
orderDetailsData = data;
|
|
}
|
|
),
|
|
$.getJSON("./Content/customers.json", function (data) {
|
|
customers = data;
|
|
}
|
|
),
|
|
$.getJSON("./Content/country-customers.json", function (data) {
|
|
countryCustomers = data;
|
|
}
|
|
),
|
|
$.getJSON("./Content/top-selling-products.json", function (data) {
|
|
topSellingProducts = data;
|
|
}
|
|
)).then(function () {
|
|
initWidgets();
|
|
onCriteriaChange();
|
|
})
|
|
|
|
function initWidgets() {
|
|
$("#market-share").kendoChart({
|
|
theme: "metro",
|
|
autoBind: false,
|
|
dataBound: onMarketShareDataBound,
|
|
legend: {
|
|
visible: false
|
|
},
|
|
dataSource: {
|
|
transport: {
|
|
read: function (options) {
|
|
var from = new Date(options.data.fromDate);
|
|
var to = new Date(options.data.toDate);
|
|
var total = 0;
|
|
var result = [];
|
|
|
|
for (var i = 0; i < orderDetailsData.length; i++) {
|
|
var order = orderDetailsData[i];
|
|
if (order.country == options.data.country) {
|
|
var orderDate = kendo.parseDate(order.orderDate)
|
|
if (orderDate > from && orderDate < to) {
|
|
total += order.price;
|
|
}
|
|
}
|
|
}
|
|
result = [{
|
|
"country": "All",
|
|
"sales": 854648.019191742
|
|
}, {
|
|
"country": options.data.country,
|
|
"sales": total
|
|
}]
|
|
options.success(result);
|
|
}
|
|
}
|
|
},
|
|
seriesDefaults: {
|
|
type: "donut"
|
|
},
|
|
series: [{
|
|
field: "sales",
|
|
categoryField: "country",
|
|
}],
|
|
tooltip: {
|
|
visible: true,
|
|
template: "#= dataItem.country #: #= kendo.toString(dataItem.sales, 'c2') #"
|
|
}
|
|
})
|
|
|
|
$("#revenue").kendoSparkline({
|
|
theme: "metro",
|
|
type: "column",
|
|
autoBind: false,
|
|
dataSource: {
|
|
transport: {
|
|
read: function (options) {
|
|
var from = new Date(options.data.fromDate);
|
|
var to = new Date(options.data.toDate);
|
|
var result = [];
|
|
|
|
for (var i = 0; i < orderDetailsData.length; i++) {
|
|
var order = orderDetailsData[i];
|
|
if (order.country == options.data.country) {
|
|
var orderDate = kendo.parseDate(order.orderDate)
|
|
if (orderDate > from && orderDate < to) {
|
|
result.push({
|
|
"date": orderDate,
|
|
"value": order.price
|
|
});
|
|
}
|
|
}
|
|
}
|
|
options.success(result);
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
categoryField: "date",
|
|
aggregate: "sum",
|
|
color: "#1996e4",
|
|
gap: 0.2,
|
|
field: "value"
|
|
}],
|
|
categoryAxis: {
|
|
type: "date",
|
|
baseUnit: "months"
|
|
},
|
|
tooltip: {
|
|
template: "#=kendo.toString(value, 'c2')# "
|
|
}
|
|
})
|
|
|
|
$("#orders").kendoSparkline({
|
|
theme: "metro",
|
|
type: "column",
|
|
autoBind: false,
|
|
dataSource: {
|
|
transport: {
|
|
read: function (options) {
|
|
var from = new Date(options.data.fromDate);
|
|
var to = new Date(options.data.toDate);
|
|
var result = [];
|
|
|
|
for (var i = 0; i < orderDetailsData.length; i++) {
|
|
var order = orderDetailsData[i];
|
|
if (order.country == options.data.country) {
|
|
var orderDate = kendo.parseDate(order.orderDate)
|
|
if (orderDate > from && orderDate < to) {
|
|
result.push({
|
|
"date": orderDate,
|
|
"value": 1
|
|
});
|
|
}
|
|
}
|
|
}
|
|
options.success(result);
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
categoryField: "date",
|
|
aggregate: "sum",
|
|
color: "#1996e4",
|
|
gap: 0.2,
|
|
field: "value"
|
|
}],
|
|
categoryAxis: {
|
|
type: "date",
|
|
baseUnit: "months"
|
|
}
|
|
})
|
|
|
|
$("#customers").kendoSparkline({
|
|
theme: "metro",
|
|
type: "column",
|
|
autoBind: false,
|
|
dataSource: {
|
|
transport: {
|
|
read: function (options) {
|
|
var from = new Date(options.data.fromDate);
|
|
var to = new Date(options.data.toDate);
|
|
var result = [];
|
|
|
|
for (var i = 0; i < countryCustomers.length; i++) {
|
|
var customer = countryCustomers[i];
|
|
if (customer.Country == options.data.country) {
|
|
var orderDate = kendo.parseDate(customer.Date)
|
|
if (orderDate > from && orderDate < to) {
|
|
result.push({
|
|
"date": customer.Date,
|
|
"value": customer.Value
|
|
});
|
|
}
|
|
}
|
|
}
|
|
options.success(result);
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
categoryField: "date",
|
|
aggregate: "sum",
|
|
color: "#1996e4",
|
|
gap: 0.2,
|
|
field: "value"
|
|
}],
|
|
categoryAxis: {
|
|
type: "date",
|
|
baseUnit: "months"
|
|
}
|
|
})
|
|
|
|
$("#top-selling-products").kendoChart({
|
|
theme: "metro",
|
|
autoBind: false,
|
|
legend: {
|
|
visible: true,
|
|
position: "top"
|
|
},
|
|
chartArea: {
|
|
background: "#eeeeee"
|
|
},
|
|
dataBound: onTopProductsDataBound,
|
|
dataSource: {
|
|
transport: {
|
|
read: function (options) {
|
|
var from = new Date(options.data.fromDate);
|
|
var to = new Date(options.data.toDate);
|
|
var products = [];
|
|
var result = [];
|
|
|
|
for (var i = 0; i < topSellingProducts.length; i++) {
|
|
var product = topSellingProducts[i];
|
|
if (product.Country == options.data.country) {
|
|
var orderDate = kendo.parseDate(product.Date);
|
|
if (orderDate > from && orderDate < to) {
|
|
result.push({
|
|
"productName": product.ProductName,
|
|
"date": product.Date,
|
|
"quantity": product.Quantity
|
|
})
|
|
}
|
|
}
|
|
}
|
|
options.success(result);
|
|
}
|
|
},
|
|
group: "productName"
|
|
},
|
|
seriesDefaults: {
|
|
type: "line",
|
|
style: "smooth"
|
|
},
|
|
series: [{
|
|
field: "quantity",
|
|
markers: {
|
|
visible: false
|
|
}
|
|
}],
|
|
categoryAxis: [{
|
|
majorGridLines: {
|
|
visible: false
|
|
},
|
|
line: {
|
|
width: 0
|
|
},
|
|
labels: {
|
|
visible: false
|
|
}
|
|
}],
|
|
valueAxis: {
|
|
majorUnit: 50,
|
|
majorTicks: {
|
|
visible: false
|
|
},
|
|
majorGridLines: {
|
|
visible: false
|
|
},
|
|
line: {
|
|
visible: false
|
|
},
|
|
labels: {
|
|
visible: false
|
|
}
|
|
},
|
|
tooltip: {
|
|
visible: true,
|
|
template: "#=data.series.name.replace(data.series.field, data.value)#"
|
|
}
|
|
|
|
})
|
|
}
|
|
|
|
function onCriteriaChange() {
|
|
var marketShare = $("#market-share").data("kendoChart"),
|
|
topSellingProducts = $("#top-selling-products").data("kendoChart"),
|
|
revenue = $("#revenue").data("kendoSparkline"),
|
|
orders = $("#orders").data("kendoSparkline"),
|
|
customers = $("#customers").data("kendoSparkline"),
|
|
fromDate = $("#start-date").data("kendoDatePicker").value(),
|
|
toDate = $("#end-date").data("kendoDatePicker").value();
|
|
getCountryOrdersTotal(fromDate, toDate);
|
|
getCountryCustomersTotal();
|
|
|
|
marketShare.dataSource.read({
|
|
country: selectedCountry,
|
|
fromDate: kendo.format("{0:dd/MM/yyyy hh:mm:ss}", fromDate),
|
|
toDate: kendo.format("{0:dd/MM/yyyy hh:mm:ss}", toDate)
|
|
});
|
|
topSellingProducts.dataSource.read({
|
|
country: selectedCountry,
|
|
fromDate: kendo.format("{0:MM/dd/yyyy hh:mm:ss}", fromDate),
|
|
toDate: kendo.format("{0:MM/dd/yyyy hh:mm:ss}", toDate)
|
|
});
|
|
revenue.dataSource.read({
|
|
country: selectedCountry,
|
|
fromDate: kendo.format("{0:dd/MM/yyyy hh:mm:ss}", fromDate),
|
|
toDate: kendo.format("{0:dd/MM/yyyy hh:mm:ss}", toDate)
|
|
});
|
|
orders.dataSource.read({
|
|
country: selectedCountry,
|
|
fromDate: kendo.format("{0:dd/MM/yyyy hh:mm:ss}", fromDate),
|
|
toDate: kendo.format("{0:dd/MM/yyyy hh:mm:ss}", toDate)
|
|
});
|
|
customers.dataSource.read({
|
|
country: selectedCountry,
|
|
fromDate: kendo.format("{0:dd/MM/yyyy hh:mm:ss}", fromDate),
|
|
toDate: kendo.format("{0:dd/MM/yyyy hh:mm:ss}", toDate)
|
|
});
|
|
|
|
listCustomers(selectedCountry);
|
|
|
|
setSparkLinesWidths();
|
|
}
|
|
|
|
function startChange(e) {
|
|
var StartDate = $("#start-date").data("kendoDatePicker");
|
|
var EndDate = $("#end-date").data("kendoDatePicker");
|
|
var startDate = StartDate.value();
|
|
var endDate = EndDate.value();
|
|
|
|
if (startDate) {
|
|
startDate = new Date(startDate);
|
|
startDate.setDate(startDate.getDate());
|
|
EndDate.min(startDate);
|
|
} else if (endDate) {
|
|
StartDate.max(new Date(endDate));
|
|
} else {
|
|
endDate = new Date();
|
|
StartDate.max(endDate);
|
|
EndDate.min(endDate);
|
|
}
|
|
|
|
onCriteriaChange();
|
|
}
|
|
|
|
function endChange(e) {
|
|
var StartDate = $("#start-date").data("kendoDatePicker");
|
|
var EndDate = $("#end-date").data("kendoDatePicker");
|
|
var startDate = StartDate.value();
|
|
var endDate = EndDate.value();
|
|
|
|
if (endDate) {
|
|
endDate = new Date(endDate);
|
|
endDate.setDate(endDate.getDate());
|
|
StartDate.max(endDate);
|
|
} else if (startDate) {
|
|
EndDate.min(new Date(startDate));
|
|
} else {
|
|
endDate = new Date();
|
|
StartDate.max(endDate);
|
|
EndDate.min(endDate);
|
|
}
|
|
|
|
onCriteriaChange();
|
|
}
|
|
|
|
function listCustomers(country) {
|
|
$("#countryName").text(country);
|
|
var companyNames = "";
|
|
|
|
for (var i = 0; i < customers.length; i++) {
|
|
var customer = customers[i];
|
|
if (customer.Country == country) {
|
|
companyNames += customer.CompanyName + ", ";
|
|
}
|
|
}
|
|
|
|
$("#countryCustomers span").text(companyNames);
|
|
|
|
var containerWidth = $(".sparkline-container").parent().width(),
|
|
getSparkLines = $(".k-sparkline"),
|
|
chartWidth = (80 * containerWidth) / 100;
|
|
|
|
getSparkLines.each(function () {
|
|
$(this).data("kendoSparkline").setOptions({
|
|
chartArea: {
|
|
width: chartWidth
|
|
}
|
|
});
|
|
});
|
|
|
|
$("#top-selling-products").data("kendoChart").resize();
|
|
$("#market-share").data("kendoChart").resize();
|
|
}
|
|
|
|
function setSparkLinesWidths() {
|
|
var containerWidth = $(".sparkline-container").parent().width(),
|
|
getSparkLines = $(".k-sparkline"),
|
|
sparkLineWidth = (80 * containerWidth) / 100;
|
|
|
|
getSparkLines.each(function () {
|
|
$(this).data("kendoSparkline").setOptions({
|
|
chartArea: {
|
|
width: sparkLineWidth
|
|
}
|
|
});
|
|
});
|
|
|
|
$("#top-selling-products").data("kendoChart").resize();
|
|
$("#market-share").data("kendoChart").resize();
|
|
}
|
|
|
|
function onShapeCreated(e) {
|
|
var color = scale(e.shape.dataItem.properties.sales).hex();
|
|
e.shape.fill(color);
|
|
}
|
|
|
|
function onShapeClick(e) {
|
|
if (selectedShape) {
|
|
var sales = selectedShape.dataItem.properties.sales;
|
|
var color = scale(sales).hex();
|
|
selectedShape.options.set("fill.color", color);
|
|
selectedShape.options.set("stroke.color", "white");
|
|
selectedShape.dataItem.properties.selected = false;
|
|
}
|
|
|
|
e.shape.options.set("fill.color", "#0c669f");
|
|
e.shape.options.set("stroke.color", "black");
|
|
e.shape.dataItem.properties.selected = true;
|
|
selectedShape = e.shape;
|
|
selectedCountry = selectedShape.dataItem.properties.name;
|
|
|
|
onCriteriaChange();
|
|
}
|
|
|
|
function onShapeMouseEnter(e) {
|
|
e.shape.options.set("fill.color", "#0c669f");
|
|
}
|
|
|
|
function onShapeMouseLeave(e) {
|
|
if (!e.shape.dataItem.properties.selected) {
|
|
var sales = e.shape.dataItem.properties.sales;
|
|
var color = scale(sales).hex();
|
|
e.shape.options.set("fill.color", color);
|
|
e.shape.options.set("stroke.color", "white");
|
|
}
|
|
}
|
|
|
|
function onTopProductsDataBound() {
|
|
var items = this.dataSource.data().length;
|
|
$("#products-no-data").toggle(items === 0);
|
|
}
|
|
|
|
function getCountryOrdersTotal(fromDate, toDate) {
|
|
var total = 0;
|
|
var from = new Date(fromDate);
|
|
var to = new Date(toDate);
|
|
|
|
for (var i = 0; i < orderDetailsData.length; i++) {
|
|
var order = orderDetailsData[i];
|
|
if (order.country == selectedCountry) {
|
|
var orderDate = kendo.parseDate(order.orderDate)
|
|
if (orderDate > from && orderDate < to) {
|
|
total++;
|
|
}
|
|
}
|
|
}
|
|
|
|
$("#orders-label").text(total);
|
|
$("#orders-no-data").toggle(total === 0);
|
|
}
|
|
|
|
function getCountryCustomersTotal(fromDate, toDate) {
|
|
var total = 0;
|
|
|
|
for (var i = 0; i < customers.length; i++) {
|
|
var customer = customers[i];
|
|
if (customer.Country == selectedCountry) {
|
|
total++;
|
|
}
|
|
}
|
|
|
|
$("#customers-label").text(total);
|
|
$("#customers-no-data").toggle(total === 0);
|
|
}
|
|
|
|
$(window).resize(function(){
|
|
resizeMap();
|
|
resizeChart();
|
|
});
|
|
} |