<style>
.dx-pivotgrid .dx-pivotgrid-area.dx-pivotgrid-area-data {
font-size: 16px;
}
.dx-pivotgrid .dx-pivotgrid-area.dx-pivotgrid-horizontal-headers, .dx-pivotgrid .dx-pivotgrid-area.dx-pivotgrid-vertical-headers {
font-size: 16px;
}
.bg-light-gray {
background-color: lightgray !important
}
.dx-pivotgrid .dx-area-description-cell, .dx-pivotgrid .dx-column-header, .dx-pivotgrid .dx-data-header, .dx-pivotgrid .dx-total {
background-color: inherit;
}
.total-border {
border-left: 2px solid #8ac9ff !important;
border-right: 2px solid #8ac9ff !important;
}
</style>
<div class="page-inner">
<div class="page-header">
<ul class="breadcrumbs" style="margin-left: 0px;">
<li class="nav-home">
<a href="/">
<i class="flaticon-home"></i>
</a>
</li>
<li class="separator">
<i class="flaticon-right-arrow"></i>
</li>
<li class="nav-item">
<a href="" onclick="location.reload();">Spring Board</a>
</li>
</ul>
</div>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-sm-12">
<div id="gridContainer" style="font-size: medium; padding-top: 5px;"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="pivotGridContainer" style="font-size: medium; padding-top: 20px;"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="chart-container-1" style="margin-top:24px;"></div>
</div>
</div>
</div>
</div>
</div>
<script src="~/Scripts/highcharts/7.1.2/highcharts.js"></script>
<script>
var ValuesA = [
//{
// y: 2023, data: [
// { key: 'ISO pipe 152', data: ['', '', '', ''] },
// { key: 'ISO pipe 116/121', data: ['', '', '', ''] },
// { key: 'ISO pipe 103', data: ['', '', '', ''] },
// { key: 'ISO pipe 81', data: ['', '', '', ''] }
// ]
//},
{
y: 2024, data: [
{ key: '152', data: [10.3, '', '', 1.6] },
{ key: '116/121', data: [6, 7, 14, 0] },
{ key: '103', data: ['', 4.6, 2.3, ''] },
{ key: '81', data: ['', 5, 2, ''] }
]
},
{
y: 2025, data: [
{ key: '152', data: [11, '', '', ''] },
{ key: '116/121', data: [6.8, 7, 13, ''] },
{ key: '103', data: ['', 4.1, 2.3, ''] },
{ key: '81', data: ['', 5, 1.2, ''] }
]
},
{
y: 2026, data: [
{ key: '152', data: [11, '', '', ''] },
{ key: '116/121', data: [6.4, 11, 15, ''] },
{ key: '103', data: ['', 5, 3.4, ''] },
{ key: '81', data: ['', 4, 2, ''] }
]
},
{
y: 2027, data: [
{ key: '152', data: [11, '', '', ''] },
{ key: '116/121', data: [6.4, 10, 17, ''] },
{ key: '103', data: ['', 4.4, 3.4, ''] },
{ key: '81', data: ['', 3.5, 2, ''] }
]
}];
var ValuesB = [
//{
// y: 2023, data: [
// { key: 'ISO pipe 152', data: ['', '', '', ''] },
// { key: 'ISO pipe 116/121', data: ['', '', '', ''] },
// { key: 'ISO pipe 103', data: ['', '', '', ''] },
// { key: 'ISO pipe 81', data: ['', '', '', ''] }
// ]
//},
{
y: 2024, data: [
{ key: '152', data: [1.3, '', '', ''] },
{ key: '116/121', data: ['', 0.7, 0.7, ''] },
{ key: '103', data: ['', '', 0.7, ''] },
{ key: '81', data: ['', '', '', ''] }
]
},
{
y: 2025, data: [
{ key: '152', data: [0.2, '', '', ''] },
{ key: '116/121', data: ['', 1.3, 1.3, ''] },
{ key: '103', data: ['', 0.1, 0.4, ''] },
{ key: '81', data: ['', '', '', ''] }
]
},
{
y: 2026, data: [
{ key: '152', data: [0.6, '', '', ''] },
{ key: '116/121', data: ['', '', 1.7, ''] },
{ key: '103', data: ['', 0.8, 0.4, ''] },
{ key: '81', data: ['', '', '', ''] }
]
},
{
y: 2027, data: [
{ key: '152', data: [0.6, '', '', ''] },
{ key: '116/121', data: ['', 0.6, 0.9, ''] },
{ key: '103', data: ['', 0.3, 0.3, ''] },
{ key: '81', data: ['', 0.3, '', ''] }
]
}];
var ValuesC = [
//{
// y: 2023, data: [
// { key: 'ISO pipe 152', data: ['', '', '', ''] },
// { key: 'ISO pipe 116/121', data: ['', '', '', ''] },
// { key: 'ISO pipe 103', data: ['', '', '', ''] },
// { key: 'ISO pipe 81', data: ['', '', '', ''] }
// ]
//},
{
y: 2024, data: [
{ key: '152', data: ['11.6', '', '', '1.6'] },
{ key: '116/121', data: ['6', '7.7', '14.7', ''] },
{ key: '103', data: ['', '4.6', '3', ''] },
{ key: '81', data: ['', '5', '2', ''] }
]
},
{
y: 2025, data: [
{ key: '152', data: ['11.2', '', '', ''] },
{ key: '116/121', data: ['6.8', '8.3', '14.3', ''] },
{ key: '103', data: ['', '4.2', '2.7', ''] },
{ key: '81', data: ['', '5', '1.2', ''] }
]
},
{
y: 2026, data: [
{ key: '152', data: ['11.6', '', '', ''] },
{ key: '116/121', data: ['6.4', '11', '16.7', ''] },
{ key: '103', data: ['', '5.8', '3.8', ''] },
{ key: '81', data: ['', '4', '2', ''] }
]
},
{
y: 2027, data: [
{ key: '152', data: ['11.6', '', '', ''] },
{ key: '116/121', data: ['6.4', '10.6', '17.9', ''] },
{ key: '103', data: ['', '4.7', '3.7', ''] },
{ key: '81', data: ['', '3.8', '2', ''] }
]
}];
var ValuesD = [
//{
// y: 2023, data: [
// { key: 'ISO pipe 152', data: ['', '', '', ''] },
// { key: 'ISO pipe 116/121', data: ['', '', '', ''] },
// { key: 'ISO pipe 103', data: ['', '', '', ''] },
// { key: 'ISO pipe 81', data: ['', '', '', ''] }
// ]
//},
{
y: 2024, data: [
{ key: '152', data: ['', '', '', ''] },
{ key: '116/121', data: ['', '', 0.6, ''] },
{ key: '103', data: ['', '', '', ''] },
{ key: '81', data: ['', '', '', ''] }
]
},
{
y: 2025, data: [
{ key: '152', data: ['', '', '', ''] },
{ key: '116/121', data: ['', '', 0.3, ''] },
{ key: '103', data: ['', '', '', ''] },
{ key: '81', data: ['', '', '', ''] }
]
},
{
y: 2026, data: [
{ key: '152', data: ['', '', '', ''] },
{ key: '116/121', data: ['', '', 2.3, ''] },
{ key: '103', data: ['', '', '', ''] },
{ key: '81', data: ['', '', '', ''] }
]
},
{
y: 2027, data: [
{ key: '152', data: ['', '', '', ''] },
{ key: '116/121', data: ['', '', 2.3, ''] },
{ key: '103', data: ['', '', '', ''] },
{ key: '81', data: ['', '', '', ''] }
]
}];
var ValuesE = [
//{
// y: 2023, data: [
// { key: 'ISO pipe 152', data: ['', '', '', ''] },
// { key: 'ISO pipe 116/121', data: ['', '', '', ''] },
// { key: 'ISO pipe 103', data: ['', '', '', ''] },
// { key: 'ISO pipe 81', data: ['', '', '', ''] }
// ]
//},
{
y: 2024, data: [
{ key: '152', data: ['', '', '', ''] },
{ key: '116/121', data: ['', '3.4', '5.1', ''] },
{ key: '103', data: ['', '0.4', '0.6', ''] },
{ key: '81', data: ['', '', '', ''] }
]
},
{
y: 2025, data: [
{ key: '152', data: ['', '', '', ''] },
{ key: '116/121', data: ['', 1.6, 6.3, ''] },
{ key: '103', data: ['', 1.9, 1.2, ''] },
{ key: '81', data: ['', '', '', ''] }
]
},
{
y: 2026, data: [
{ key: '152', data: ['', '', '', ''] },
{ key: '116/121', data: ['', '', 1.2, ''] },
{ key: '103', data: ['', 0.1, '', ''] },
{ key: '81', data: ['', '', '', ''] }
]
},
{
y: 2027, data: [
{ key: '152', data: ['', '', '', ''] },
{ key: '116/121', data: ['', '', 0.3, ''] },
{ key: '103', data: ['', '', '', ''] },
{ key: '81', data: ['', '', '', ''] }
]
}];
var ValuesF = [
//{
// y: 2023, data: [
// { key: 'ISO pipe 152', data: ['', '', '', ''] },
// { key: 'ISO pipe 116/121', data: ['', '', '', ''] },
// { key: 'ISO pipe 103', data: ['', '', '', ''] },
// { key: 'ISO pipe 81', data: ['', '', '', ''] }
// ]
//},
{
y: 2024, data: [
{ key: '152', data: ['', '', '', '2.4'] },
{ key: '116/121', data: ['', '', '', ''] },
{ key: '103', data: ['', '', '', ''] },
{ key: '81', data: ['', '', 2, ''] }
]
},
{
y: 2025, data: [
{ key: '152', data: ['', '', '', ''] },
{ key: '116/121', data: ['', '', '', ''] },
{ key: '103', data: ['', '', '', ''] },
{ key: '81', data: ['', '', 2, ''] }
]
},
{
y: 2026, data: [
{ key: '152', data: ['', '', '', ''] },
{ key: '116/121', data: ['', '', '', ''] },
{ key: '103', data: ['', '', '', ''] },
{ key: '81', data: ['', 0.1, 2, ''] }
]
},
{
y: 2027, data: [
{ key: '152', data: ['', '', '', ''] },
{ key: '116/121', data: ['', '', '', ''] },
{ key: '103', data: ['', '', '', ''] },
{ key: '81', data: ['', 1.8, 2, ''] }
]
}];
var dxPivotGrid1;
var dxPivotGrid2;
var addBorder = function (domId) {
var cols = $('#' + domId).find('.dx-pivotgrid-horizontal-headers').find('table').find('thead').find('tr').eq(0).find('td');
var indexs = [];
index = 0;
for (item of cols) {
var colspan = $(item).attr('colspan');
if (colspan) {
index += Number(colspan);
} else {
index++;
}
if ($(item).hasClass('dx-total')) {
indexs.push(index);
$(item).addClass('total-border');
}
}
var rows = $('#' + domId).find('.dx-area-data-cell').find('table').find('tbody').find('tr');
for (item of rows) {
var cells = $(item).find('td');
for (i of indexs) {
$(cells).eq(i - 1).addClass('total-border');
}
}
}
$(function () {
var list = [];
var row = [];
var site = ['CN', 'TW', 'CPM', 'JP'];
var Subcategorys = ['152', '116/121', '103', '81'];
var Categorys = ['(a) Hot Tanks', '(b) Rebuild/Start-up DT'];
Categorys.push('(a) Operating Tanks');
Categorys.push('(b) Ready to Light + Hot soak');
Categorys.push('(c) Not available - waiting for rebuild without capital');
Categorys.push('(d) Not avilable - Cold');
var Values = [
{ index: 0, key: '(a) Hot Tanks', data: ValuesA },
{ index: 1, key: '(b) Rebuild/Start-up DT', data: ValuesB },
{ index: 2, key: '(a) Operating Tanks', data: ValuesC },
{ index: 3, key: '(b) Ready to Light + Hot soak', data: ValuesD },
{ index: 4, key: '(c) Not available - waiting for rebuild without capital', data: ValuesE },
{ index: 5, key: '(d) Not avilable - Cold', data: ValuesF }
];
for (var x = 2; x < Categorys.length; x++) {
for (var i = 2024; i <= 2027; i++) {
for (var j = 0; j < site.length; j++) {
for (var m = 0; m < Subcategorys.length; m++) {
if (Categorys[x] == '(a) Operating Tanks') {
var filterData = Values.find(c => c.key == '(a) Hot Tanks');
var yearData = filterData.data.find(c => c.y == i);
var data = yearData.data.find(c => c.key == Subcategorys[m]);
var value = data.data[j];
var temp = {
year: i,
Category: Categorys[x],
Subcategory: Subcategorys[m],
Value: value,
site: site[j],
Category_1: 'Hot Tanks'
};
list.push(temp);
//----------------------------------------------
filterData = Values.find(c => c.key == '(b) Rebuild/Start-up DT');
yearData = filterData.data.find(c => c.y == i);
data = yearData.data.find(c => c.key == Subcategorys[m]);
value = data.data[j];
var temp2 = {
year: i,
Category: Categorys[x],
Subcategory: Subcategorys[m],
Value: value,
site: site[j],
Category_1: 'Rebuild/Start-up DT'
};
list.push(temp2);
} else {
var filterData = Values.find(c => c.key == Categorys[x]);
var yearData = filterData.data.find(c => c.y == i);
var data = yearData.data.find(c => c.key == Subcategorys[m]);
var value = data.data[j];
var temp = {
year: i,
Category: Categorys[x],
Subcategory: Subcategorys[m],
Value: value,
site: site[j],
Category_1: 'Isopipe'
};
list.push(temp);
}
}
}
}
}
var index = 0;
dxPivotGrid1 = $('#gridContainer').dxPivotGrid({
allowSortingBySummary: true,
allowSorting: true,
allowFiltering: true,
allowExpandAll: true,
//width: 1000,
showBorders: true,
showColumnGrandTotals: false,
showRowGrandTotals: true,
texts: {
grandTotal: "Total (A+B+C+D)"
},
fieldChooser: {
enabled: false,
},
onContentReady() {
var data_cells = $('#gridContainer').find('.dx-area-data-cell').find('table')
.find('colgroup').find('col');
var cate_cells = $('#gridContainer').find('.dx-area-row-cell').find('table')
.find('colgroup').find('col');
var cate_table_width = 0;
if (cate_cells.length == 2) {
cate_table_width = 200;
} else if (cate_cells.length == 3) {
cate_table_width = 340;
}
if (data_cells.length < 5) {
dxPivotGrid1.option('width', 700 + cate_table_width);
} else if (data_cells.length < 10) {
dxPivotGrid1.option('width', 900 + cate_table_width);
} else if (data_cells.length < 15) {
dxPivotGrid1.option('width', 1100 + cate_table_width);
} else if (data_cells.length < 20) {
dxPivotGrid1.option('width', 1300 + cate_table_width > 1550 ? 1550 : 1300 + cate_table_width);
} else {
dxPivotGrid1.option('width', 1550);
}
$('#gridContainer').find('.custom-add-row').remove();
$('#gridContainer').find('.dx-area-description-cell')
.find('.dx-pivotgrid-toolbar')
.css('line-height', '32px')
.text('Category').css('font-weight', 'bold');
var headerRow = $('#gridContainer').find('.dx-area-description-cell')
.parent().clone();
$(headerRow)
.addClass('custom-add-row')
.find('.dx-pivotgrid-toolbar')
.css('line-height', '36px')
.text('Tank Count');
$(headerRow).find('.dx-area-column-cell')
.html('Asset Tank Count')
.css('line-height', '36px')
.css('background-color', '#003466')
.css('color', '#fff')
.css('font-weight', 'bold')
.css('text-align', 'center');
$(headerRow).insertBefore($('#gridContainer').find('.dx-area-description-cell').parent());
//var arr = [
// { key: '(a) Hot Tanks', index: -1 },
// { key: '(b) Rebuild/Start-up DT', index: -1 },
// { key: '(c) Operating Tanks', index: -1 }
//];
//var notBold = ['(a) Hot Tanks', '(b) Rebuild/Start-up DT', '(a) Hot Tanks Total', '(b) Rebuild/Start-up DT Total'];
var leftRows = $('#gridContainer').find('.dx-pivotgrid-vertical-headers tbody').find('tr');
for (var i = 0; i < leftRows.length; i++) {
var row = leftRows[i];
var cell = $(row).find('td').eq(0);
var rowspan = $(cell).attr('rowspan');
var text = $(cell).text();
//var item = arr.find(c => c.key == text);
//if (item) {
// if (rowspan) {
// item.index = i + 4;
// } else {
// item.index = i;
// }
//}
if (rowspan) {
i = i + parseInt(rowspan) - 1;
}
//if (!(notBold.find(c => c == text))) {
// $(cell).css('font-weight', 'bold');//.css('color', 'rgb(18 105 219)')
//}
}
var rows = $('#gridContainer').find('.dx-area-data-cell').find('tbody').find('tr');
var textRightRow = ['(a) Hot Tanks', '(b) Rebuild/Start-up DT'];
//for (var i = 0; i < rows.length; i++) {
// var lastCol = $(rows[i]).find('td').last();
// $(lastCol).hide();
//}
//var colgroup = $('.dx-area-data-cell').find('colgroup');
//$(colgroup).find('col').last().hide();
//$('.dx-area-column-cell').find('table').find('colgroup').find('col').last().hide();
//var headerRows = $('.dx-area-column-cell').find('table').find('thead').find('tr');
//for (var i = 0; i < 1; i++) {
// $(headerRows[i]).find('td').last().hide();
//}
var grayLines = Values.filter(c => c.index > 1);
$(leftRows[leftRows.length - 1]).find('td').addClass('bg-light-gray');
$(rows[leftRows.length - 1]).find('td').addClass('bg-light-gray');
for (var i = 0; i < leftRows.length; i++) {
var leftRow = leftRows[i];
var cell = $(leftRow).find('td').eq(0);
var rowspan = $(cell).attr('rowspan');
var text = $(cell).text().replace(' Total', '');
if (textRightRow.findIndex(c => c == text) > -1) {
$(cell).find('span').css('float', 'right');
}
//if (grayLines.findIndex(c => c.key == text) > -1) {
// $(leftRow).addClass('bg-light-gray');
// $(rows[i]).addClass('bg-light-gray');
// if (rowspan && parseInt(rowspan) > 0) {
// rowspan = parseInt(rowspan);
// for (var j = 1; j < rowspan; j++) {
// leftRow = $(leftRow).next();
// $(leftRow).addClass('bg-light-gray');
// $(rows[i + j]).addClass('bg-light-gray');
// }
// }
//}
}
setTimeout(function () {
addBorder('gridContainer');
}, 100);
//var row_a = rows[arr[0].index];
//var row_b = rows[arr[1].index];
//var row_c = rows[arr[2].index];
//var row_last = rows[rows.length - 1];
//var cols_c = $(row_c).find('td');
//var cols_a = $(row_a).find('td');
//var cols_b = $(row_b).find('td');
//var cols_total = $(row_last).find('td');
//for (var i = 0; i < cols_c.length; i++) {
// //var cell_a = $(cols_a[i]).text();
// //var cell_b = $(cols_b[i]).text();
// //var value = (Number(cell_a) * 100 + Number(cell_b) * 100) / 100;
// //var value = Number(value.toFixed(2));
// //$(cols_c[i]).find('span').text(value);
// var cell_c = $(cols_c[i]).text();
// var total = $(cols_total[i]).text();
// var value = (Number(total) * 100 - Number(cell_c) * 100) / 100;
// value = Number(value.toFixed(2));
// $(cols_total[i]).find('span').text(value);
//}
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
$(row).find('td').css('font-weight', 'bold');
}
//debugger
for (var i = 0; i < leftRows.length; i++) {
var row = leftRows[i];
$(row).find('td').css('font-weight', 'bold');
//var td = $(row).find('td').eq(0);
//var rowspan = $(td).attr('rowspan');
//if (rowspan) {
// i = i + parseInt(rowspan);
//} else {
// row = rows[i];
// $(row).find('td').css('font-weight', 'bold');
//}
}
clearInterval();
$('#gridContainer')
.find('.dx-area-data-cell')
.find('.dx-scrollable-content')
.css('margin-bottom', '10px');
setInterval(function () {
$('#gridContainer')
.find('.dx-area-data-cell')
.find('.dx-scrollable-scrollbar')
.eq(0)
.addClass('dx-state-hover')
.find('.dx-scrollable-scroll')
.removeClass('dx-state-invisible');
}, 500);
},
dataSource: {
fields: [{
caption: 'Category',
width: 250,
dataField: 'Category',
area: 'row',
sortingMethod: function (a, b) {
var displayTexts = ['(a) Operating Tanks', '(b) Ready to Light + Hot soak',
'(c) Not available - waiting for rebuild without capital', '(d) Not avilable - Cold'];
var values = [1, 2, 3, 4];
var index1 = displayTexts.findIndex(c => c == a.value);
var index2 = displayTexts.findIndex(c => c == b.value);
var value1 = values[index1];
var value2 = values[index2];
/*var fieldSortOrder = this.sortOrder;*/
if (value1 < value2) {
return 1;
} else if (value1 > value2) {
return 2;
} else {
return 0;
}
},
}, {
caption: 'Category_1',
dataField: 'Category_1',
width: 220,
area: 'row',
}, {
caption: 'Subcategory',
dataField: 'Subcategory',
width: 90,
area: 'row',
sortBy: 'value',
sortingMethod: function (a, b) {
var temps = [
{ displayText: '152', value: 1 },
{ displayText: '116/121', value: 2 },
{ displayText: '103', value: 3 },
{ displayText: '81', value: 4 }
];
var value1 = temps.find(c => c.displayText == a.value).value;
var value2 = temps.find(c => c.displayText == b.value).value;
/*var fieldSortOrder = this.sortOrder;*/
if (value1 < value2) {
return 1;
} else if (value1 > value2) {
return 2;
} else {
return 0;
}
},
selector(data) {
return data.Subcategory;
},
}, {
dataField: 'year',
area: 'column',
expanded: true,
}, {
dataField: 'site',
area: 'column',
sortingMethod: function (a, b) {
var temps = [
{ displayText: 'CN', value: 1 },
{ displayText: 'TW', value: 2 },
{ displayText: 'CPM', value: 3 },
{ displayText: 'JP', value: 4 }
];
var value1 = temps.find(c => c.displayText == a.value).value;
var value2 = temps.find(c => c.displayText == b.value).value;
/*var fieldSortOrder = this.sortOrder;*/
if (value1 < value2) {
return 1;
} else if (value1 > value2) {
return 2;
} else {
return 0;
}
},
}, {
caption: 'Value',
dataField: 'Value',
//showTotals: true,
showGrandTotals: true,
dataType: 'number',
summaryType: 'sum',
//summaryType: 'custom',
//calculateSummaryValue(summaryCell) {
// debugger
// const prevCell = summaryCell.prev('column', true);
// if (prevCell) {
// const prevVal = prevCell.value("Total Amount");
// const currentVal = summaryCell.value("Total Amount");
// return currentVal - prevVal;
// }
// return null;
//},
format: {
type: "fixedPoint",
precision: 1
},
area: 'data',
}],
store: list,
},
}).dxPivotGrid('instance');
});
$(function () {
var list = [];
var row = [];
var site = ['CN', 'TW', 'CPM', 'JP'];
var Subcategorys = ['152', '116/121', '103', '81'];
var Categorys = ['(a) Hot Tanks', '(b) Rebuild/Start-up DT'];
Categorys.push('(a) Operating Tanks');
Categorys.push('(b) Ready to Light + Hot soak');
Categorys.push('(c) Not available - waiting for rebuild without capital');
Categorys.push('(d) Not avilable - Cold');
var maps = [{
isopipe: '152', monthly: 9.5, FGE: 8.1
}, {
isopipe: '121', monthly: 8, FGE: 6.8
}, {
isopipe: '116', monthly: 7, FGE: 6
}, {
isopipe: '103', monthly: 4.5, FGE: 3.8
}, {
isopipe: '81', monthly: 2.8, FGE: 2.4
}];
var capacity_value_a = [];
var capacity_value_b = [];
var capacity_value_c = [];
var capacity_value_d = [];
var capacity_value_e = [];
var capacity_value_f = [];
for (item of ValuesA) {
//var num = Number(item.data[0].data[1]);
capacity_value_a.push({
y: item.y,
data: [
{
key: '152',
data:
[
Number(item.data[0].data[0]) * maps[0].FGE * 12,
Number(item.data[0].data[1]) * maps[0].FGE * 12,
Number(item.data[0].data[2]) * maps[0].FGE * 12,
Number(item.data[0].data[3]) * maps[0].FGE * 12
]
},
{
key: '116/121',
data:
[
Number(item.data[1].data[0]) * maps[1].FGE * 12,
Number(item.data[1].data[1]) * maps[1].FGE * 12,
Number(item.data[1].data[2]) * maps[1].FGE * 12,
Number(item.data[1].data[3]) * maps[1].FGE * 12
]
},
{
key: '103',
data:
[
Number(item.data[2].data[0]) * maps[3].FGE * 12,
Number(item.data[2].data[1]) * maps[3].FGE * 12,
Number(item.data[2].data[2]) * maps[3].FGE * 12,
Number(item.data[2].data[3]) * maps[3].FGE * 12
]
},
{
key: '81',
data:
[
Number(item.data[3].data[0]) * maps[4].FGE * 12,
Number(item.data[3].data[1]) * maps[4].FGE * 12,
Number(item.data[3].data[2]) * maps[4].FGE * 12,
Number(item.data[3].data[3]) * maps[4].FGE * 12
]
}
]
});
}
for (item of ValuesB) {
//var num = Number(item.data[0].data[1]);
capacity_value_b.push({
y: item.y,
data: [
{
key: '152',
data:
[
Number(item.data[0].data[0]) * maps[0].FGE * 12,
Number(item.data[0].data[1]) * maps[0].FGE * 12,
Number(item.data[0].data[2]) * maps[0].FGE * 12,
Number(item.data[0].data[3]) * maps[0].FGE * 12
]
},
{
key: '116/121',
data:
[
Number(item.data[1].data[0]) * maps[1].FGE * 12,
Number(item.data[1].data[1]) * maps[1].FGE * 12,
Number(item.data[1].data[2]) * maps[1].FGE * 12,
Number(item.data[1].data[3]) * maps[1].FGE * 12
]
},
{
key: '103',
data:
[
Number(item.data[2].data[0]) * maps[3].FGE * 12,
Number(item.data[2].data[1]) * maps[3].FGE * 12,
Number(item.data[2].data[2]) * maps[3].FGE * 12,
Number(item.data[2].data[3]) * maps[3].FGE * 12
]
},
{
key: '81',
data:
[
Number(item.data[3].data[0]) * maps[4].FGE * 12,
Number(item.data[3].data[1]) * maps[4].FGE * 12,
Number(item.data[3].data[2]) * maps[4].FGE * 12,
Number(item.data[3].data[3]) * maps[4].FGE * 12
]
}
]
});
}
for (item of ValuesC) {
//var num = Number(item.data[0].data[1]);
capacity_value_c.push({
y: item.y,
data: [
{
key: '152',
data:
[
Number(item.data[0].data[0]) * maps[0].FGE * 12,
Number(item.data[0].data[1]) * maps[0].FGE * 12,
Number(item.data[0].data[2]) * maps[0].FGE * 12,
Number(item.data[0].data[3]) * maps[0].FGE * 12
]
},
{
key: '116/121',
data:
[
Number(item.data[1].data[0]) * maps[1].FGE * 12,
Number(item.data[1].data[1]) * maps[1].FGE * 12,
Number(item.data[1].data[2]) * maps[1].FGE * 12,
Number(item.data[1].data[3]) * maps[1].FGE * 12
]
},
{
key: '103',
data:
[
Number(item.data[2].data[0]) * maps[3].FGE * 12,
Number(item.data[2].data[1]) * maps[3].FGE * 12,
Number(item.data[2].data[2]) * maps[3].FGE * 12,
Number(item.data[2].data[3]) * maps[3].FGE * 12
]
},
{
key: '81',
data:
[
Number(item.data[3].data[0]) * maps[4].FGE * 12,
Number(item.data[3].data[1]) * maps[4].FGE * 12,
Number(item.data[3].data[2]) * maps[4].FGE * 12,
Number(item.data[3].data[3]) * maps[4].FGE * 12
]
}
]
});
}
for (item of ValuesD) {
//var num = Number(item.data[0].data[1]);
capacity_value_d.push({
y: item.y,
data: [
{
key: '152',
data:
[
Number(item.data[0].data[0]) * maps[0].FGE * 12,
Number(item.data[0].data[1]) * maps[0].FGE * 12,
Number(item.data[0].data[2]) * maps[0].FGE * 12,
Number(item.data[0].data[3]) * maps[0].FGE * 12
]
},
{
key: '116/121',
data:
[
Number(item.data[1].data[0]) * maps[1].FGE * 12,
Number(item.data[1].data[1]) * maps[1].FGE * 12,
Number(item.data[1].data[2]) * maps[1].FGE * 12,
Number(item.data[1].data[3]) * maps[1].FGE * 12
]
},
{
key: '103',
data:
[
Number(item.data[2].data[0]) * maps[3].FGE * 12,
Number(item.data[2].data[1]) * maps[3].FGE * 12,
Number(item.data[2].data[2]) * maps[3].FGE * 12,
Number(item.data[2].data[3]) * maps[3].FGE * 12
]
},
{
key: '81',
data:
[
Number(item.data[3].data[0]) * maps[4].FGE * 12,
Number(item.data[3].data[1]) * maps[4].FGE * 12,
Number(item.data[3].data[2]) * maps[4].FGE * 12,
Number(item.data[3].data[3]) * maps[4].FGE * 12
]
}
]
});
}
for (item of ValuesE) {
//var num = Number(item.data[0].data[1]);
capacity_value_e.push({
y: item.y,
data: [
{
key: '152',
data:
[
Number(item.data[0].data[0]) * maps[0].FGE * 12,
Number(item.data[0].data[1]) * maps[0].FGE * 12,
Number(item.data[0].data[2]) * maps[0].FGE * 12,
Number(item.data[0].data[3]) * maps[0].FGE * 12
]
},
{
key: '116/121',
data:
[
Number(item.data[1].data[0]) * maps[1].FGE * 12,
Number(item.data[1].data[1]) * maps[1].FGE * 12,
Number(item.data[1].data[2]) * maps[1].FGE * 12,
Number(item.data[1].data[3]) * maps[1].FGE * 12
]
},
{
key: '103',
data:
[
Number(item.data[2].data[0]) * maps[3].FGE * 12,
Number(item.data[2].data[1]) * maps[3].FGE * 12,
Number(item.data[2].data[2]) * maps[3].FGE * 12,
Number(item.data[2].data[3]) * maps[3].FGE * 12
]
},
{
key: '81',
data:
[
Number(item.data[3].data[0]) * maps[4].FGE * 12,
Number(item.data[3].data[1]) * maps[4].FGE * 12,
Number(item.data[3].data[2]) * maps[4].FGE * 12,
Number(item.data[3].data[3]) * maps[4].FGE * 12
]
}
]
});
}
for (item of ValuesF) {
//var num = Number(item.data[0].data[1]);
capacity_value_f.push({
y: item.y,
data: [
{
key: '152',
data:
[
Number(item.data[0].data[0]) * maps[0].FGE * 12,
Number(item.data[0].data[1]) * maps[0].FGE * 12,
Number(item.data[0].data[2]) * maps[0].FGE * 12,
Number(item.data[0].data[3]) * maps[0].FGE * 12
]
},
{
key: '116/121',
data:
[
Number(item.data[1].data[0]) * maps[1].FGE * 12,
Number(item.data[1].data[1]) * maps[1].FGE * 12,
Number(item.data[1].data[2]) * maps[1].FGE * 12,
Number(item.data[1].data[3]) * maps[1].FGE * 12
]
},
{
key: '103',
data:
[
Number(item.data[2].data[0]) * maps[3].FGE * 12,
Number(item.data[2].data[1]) * maps[3].FGE * 12,
Number(item.data[2].data[2]) * maps[3].FGE * 12,
Number(item.data[2].data[3]) * maps[3].FGE * 12
]
},
{
key: '81',
data:
[
Number(item.data[3].data[0]) * maps[4].FGE * 12,
Number(item.data[3].data[1]) * maps[4].FGE * 12,
Number(item.data[3].data[2]) * maps[4].FGE * 12,
Number(item.data[3].data[3]) * maps[4].FGE * 12
]
}
]
});
}
var Values = [
{ index: 0, key: '(a) Hot Tanks', data: capacity_value_a },
{ index: 1, key: '(b) Rebuild/Start-up DT', data: capacity_value_b },
{ index: 2, key: '(a) Operating Tanks', data: capacity_value_c },
{ index: 3, key: '(b) Ready to Light + Hot soak', data: capacity_value_d },
{ index: 4, key: '(c) Not available - waiting for rebuild without capital', data: capacity_value_e },
{ index: 5, key: '(d) Not avilable - Cold', data: capacity_value_f }
];
for (var x = 2; x < Categorys.length; x++) {
for (var i = 2024; i <= 2027; i++) {
for (var j = 0; j < site.length; j++) {
for (var m = 0; m < Subcategorys.length; m++) {
if (Categorys[x] == '(a) Operating Tanks') {
var filterData = Values.find(c => c.key == '(a) Hot Tanks');
var yearData = filterData.data.find(c => c.y == i);
var data = yearData.data.find(c => c.key == Subcategorys[m]);
var value = data.data[j];
var temp = {
year: i,
Category: Categorys[x],
Subcategory: Subcategorys[m],
Value: value,
site: site[j],
Category_1: 'Hot Tanks'
};
list.push(temp);
//----------------------------------------------
filterData = Values.find(c => c.key == '(b) Rebuild/Start-up DT');
yearData = filterData.data.find(c => c.y == i);
data = yearData.data.find(c => c.key == Subcategorys[m]);
value = data.data[j];
var temp2 = {
year: i,
Category: Categorys[x],
Subcategory: Subcategorys[m],
Value: value,
site: site[j],
Category_1: 'Rebuild/Start-up DT'
};
list.push(temp2);
} else {
var filterData = Values.find(c => c.key == Categorys[x]);
var yearData = filterData.data.find(c => c.y == i);
var data = yearData.data.find(c => c.key == Subcategorys[m]);
var value = data.data[j];
var temp = {
year: i,
Category: Categorys[x],
Subcategory: Subcategorys[m],
Value: value,
site: site[j],
Category_1: 'Isopipe'
};
list.push(temp);
}
}
}
}
}
var index = 0;
dxPivotGrid2 = $('#pivotGridContainer').dxPivotGrid({
allowSortingBySummary: true,
allowSorting: true,
allowFiltering: true,
allowExpandAll: true,
//width: 1000,
showBorders: true,
showColumnGrandTotals: false,
showRowGrandTotals: true,
texts: {
grandTotal: "Total (A+B+C+D)"
},
fieldChooser: {
enabled: false,
},
onContentReady() {
var data_cells = $('#pivotGridContainer').find('.dx-area-data-cell').find('table')
.find('colgroup').find('col');
var cate_cells = $('#pivotGridContainer').find('.dx-area-row-cell').find('table')
.find('colgroup').find('col');
var cate_table_width = 0;
if (cate_cells.length == 2) {
cate_table_width = 220;
} else if (cate_cells.length == 3) {
cate_table_width = 340;
}
if (data_cells.length < 5) {
dxPivotGrid2.option('width', 750 + cate_table_width);
} else if (data_cells.length < 10) {
dxPivotGrid2.option('width', 950 + cate_table_width);
} else if (data_cells.length < 15) {
dxPivotGrid2.option('width', 1150 + cate_table_width);
} else if (data_cells.length < 20) {
dxPivotGrid2.option('width', 1350 + cate_table_width > 1550 ? 1550 : 1350 + cate_table_width);
} else {
dxPivotGrid2.option('width', 1550);
}
$('#pivotGridContainer').find('.custom-add-row').remove();
$('#pivotGridContainer').find('.dx-area-description-cell')
.find('.dx-pivotgrid-toolbar')
.css('line-height', '32px')
.text('Category').css('font-weight', 'bold');
var headerRow = $('#pivotGridContainer').find('.dx-area-description-cell')
.parent().clone();
$(headerRow)
.addClass('custom-add-row')
.find('.dx-pivotgrid-toolbar')
.css('line-height', '36px')
.text('FGE (Mft2)');
$(headerRow).find('.dx-area-column-cell')
.html('Asset Capacity')
.css('line-height', '36px')
.css('background-color', '#003466')
.css('color', '#fff')
.css('font-weight', 'bold')
.css('text-align', 'center');
$(headerRow).insertBefore($('#pivotGridContainer').find('.dx-area-description-cell').parent());
//var arr = [
// { key: '(a) Hot Tanks', index: -1 },
// { key: '(b) Rebuild/Start-up DT', index: -1 },
// { key: '(c) Operating Tanks', index: -1 }
//];
//var notBold = ['(a) Hot Tanks', '(b) Rebuild/Start-up DT', '(a) Hot Tanks Total', '(b) Rebuild/Start-up DT Total'];
var leftRows = $('#pivotGridContainer').find('.dx-pivotgrid-vertical-headers tbody').find('tr');
for (var i = 0; i < leftRows.length; i++) {
var row = leftRows[i];
var cell = $(row).find('td').eq(0);
var rowspan = $(cell).attr('rowspan');
var text = $(cell).text();
//var item = arr.find(c => c.key == text);
//if (item) {
// if (rowspan) {
// item.index = i + 4;
// } else {
// item.index = i;
// }
//}
if (rowspan) {
i = i + parseInt(rowspan) - 1;
}
//if (!(notBold.find(c => c == text))) {
// $(cell).css('font-weight', 'bold');//.css('color', 'rgb(18 105 219)')
//}
}
var rows = $('#pivotGridContainer').find('.dx-area-data-cell').find('tbody').find('tr');
var textRightRow = ['(a) Hot Tanks', '(b) Rebuild/Start-up DT'];
//for (var i = 0; i < rows.length; i++) {
// var lastCol = $(rows[i]).find('td').last();
// $(lastCol).hide();
//}
//var colgroup = $('.dx-area-data-cell').find('colgroup');
//$(colgroup).find('col').last().hide();
//$('.dx-area-column-cell').find('table').find('colgroup').find('col').last().hide();
//var headerRows = $('.dx-area-column-cell').find('table').find('thead').find('tr');
//for (var i = 0; i < 1; i++) {
// $(headerRows[i]).find('td').last().hide();
//}
var grayLines = Values.filter(c => c.index > 1);
$(leftRows[leftRows.length - 1]).find('td').addClass('bg-light-gray');
$(rows[leftRows.length - 1]).find('td').addClass('bg-light-gray');
for (var i = 0; i < leftRows.length; i++) {
var leftRow = leftRows[i];
var cell = $(leftRow).find('td').eq(0);
var rowspan = $(cell).attr('rowspan');
var text = $(cell).text().replace(' Total', '');
if (textRightRow.findIndex(c => c == text) > -1) {
$(cell).find('span').css('float', 'right');
}
//if (grayLines.findIndex(c => c.key == text) > -1) {
// $(leftRow).addClass('bg-light-gray');
// $(rows[i]).addClass('bg-light-gray');
// if (rowspan && parseInt(rowspan) > 0) {
// rowspan = parseInt(rowspan);
// for (var j = 1; j < rowspan; j++) {
// leftRow = $(leftRow).next();
// $(leftRow).addClass('bg-light-gray');
// $(rows[i + j]).addClass('bg-light-gray');
// }
// }
//}
}
setTimeout(function () {
addBorder('pivotGridContainer');
}, 100);
//var row_a = rows[arr[0].index];
//var row_b = rows[arr[1].index];
//var row_c = rows[arr[2].index];
//var row_last = rows[rows.length - 1];
//var cols_c = $(row_c).find('td');
//var cols_a = $(row_a).find('td');
//var cols_b = $(row_b).find('td');
//var cols_total = $(row_last).find('td');
//for (var i = 0; i < cols_c.length; i++) {
// //var cell_a = $(cols_a[i]).text();
// //var cell_b = $(cols_b[i]).text();
// //var value = (Number(cell_a) * 100 + Number(cell_b) * 100) / 100;
// //var value = Number(value.toFixed(2));
// //$(cols_c[i]).find('span').text(value);
// var cell_c = $(cols_c[i]).text();
// var total = $(cols_total[i]).text();
// var value = (Number(total) * 100 - Number(cell_c) * 100) / 100;
// value = Number(value.toFixed(2));
// $(cols_total[i]).find('span').text(value);
//}
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
$(row).find('td').css('font-weight', 'bold');
}
//debugger
for (var i = 0; i < leftRows.length; i++) {
var row = leftRows[i];
$(row).find('td').css('font-weight', 'bold');
//var td = $(row).find('td').eq(0);
//var rowspan = $(td).attr('rowspan');
//if (rowspan) {
// i = i + parseInt(rowspan);
//} else {
// row = rows[i];
// $(row).find('td').css('font-weight', 'bold');
//}
}
clearInterval();
$('#pivotGridContainer')
.find('.dx-area-data-cell')
.find('.dx-scrollable-content')
.css('margin-bottom', '10px');
setInterval(function () {
$('#pivotGridContainer')
.find('.dx-area-data-cell')
.find('.dx-scrollable-scrollbar')
.eq(0)
.addClass('dx-state-hover')
.find('.dx-scrollable-scroll')
.removeClass('dx-state-invisible');
}, 500);
},
dataSource: {
fields: [{
caption: 'Category',
width: 250,
dataField: 'Category',
area: 'row',
sortingMethod: function (a, b) {
var displayTexts = ['Hot Tanks (a)', 'Rebuild/Start-up DT (b)', 'Operating Tanks (c=a+b)', 'Ready to Light + Hot soak (d)'];
var values = [1, 2, 3, 4, 5];
var index1 = displayTexts.findIndex(c => c == a.value);
var index2 = displayTexts.findIndex(c => c == b.value);
var value1 = values[index1];
var value2 = values[index2];
/*var fieldSortOrder = this.sortOrder;*/
if (value1 < value2) {
return 1;
} else if (value1 > value2) {
return 2;
} else {
return 0;
}
},
}, {
caption: 'Category_1',
dataField: 'Category_1',
width: 220,
area: 'row',
}, {
caption: 'Subcategory',
dataField: 'Subcategory',
width: 90,
area: 'row',
sortBy: 'value',
sortingMethod: function (a, b) {
var temps = [
{ displayText: '152', value: 1 },
{ displayText: '116/121', value: 2 },
{ displayText: '103', value: 3 },
{ displayText: '81', value: 4 }
];
var value1 = temps.find(c => c.displayText == a.value).value;
var value2 = temps.find(c => c.displayText == b.value).value;
/*var fieldSortOrder = this.sortOrder;*/
if (value1 < value2) {
return 1;
} else if (value1 > value2) {
return 2;
} else {
return 0;
}
},
selector(data) {
return data.Subcategory;
},
}, {
dataField: 'year',
area: 'column',
expanded: true,
}, {
dataField: 'site',
area: 'column',
sortingMethod: function (a, b) {
var temps = [
{ displayText: 'CN', value: 1 },
{ displayText: 'TW', value: 2 },
{ displayText: 'CPM', value: 3 },
{ displayText: 'JP', value: 4 }
];
var value1 = temps.find(c => c.displayText == a.value).value;
var value2 = temps.find(c => c.displayText == b.value).value;
/*var fieldSortOrder = this.sortOrder;*/
if (value1 < value2) {
return 1;
} else if (value1 > value2) {
return 2;
} else {
return 0;
}
},
}, {
caption: 'Value',
dataField: 'Value',
//showTotals: true,
showGrandTotals: true,
dataType: 'number',
summaryType: 'sum',
//summaryType: 'custom',
//calculateCustomSummary: function (options) {
// debugger
// switch (options.summaryProcess) {
// case "start":
// // Initializing "totalValue" here
// break;
// case "calculate": options.totalValue = Math.round(options.value);
// break;
// case "finalize":
// // Assigning the final value to "totalValue" here
// break;
// }
//},
format: {
type: "fixedPoint",
precision: 0
},
area: 'data',
}],
store: list,
},
}).dxPivotGrid('instance');
})
Highcharts.chart('chart-container-1', {
chart: {
type: 'area'
},
title: {
text: '',
align: 'left'
},
legend: {
enabled: false
},
//subtitle: {
// text: 'Source: ' +
// '<a href="https://www.ssb.no/en/statbank/table/09288/"' +
// 'target="_blank">SSB</a>',
// align: 'left'
//},
yAxis: {
title: {
//useHTML: true,
//text: 'Million tonnes CO<sub>2</sub>-equivalents'
},
type: 'value',
tickInterval: 10, //间
max: 120,
min: 0,
labels: { style: { 'fontSize': '16px' } }
},
tooltip: {
shared: true,
headerFormat: '<span style="font-size:12px"><b>{point.key}</b></span>' +
'<br>'
},
xAxis: {
categories: ['Q4\'23', 'Jan\'24', 'Feb\'24', 'Mar\'24', 'Q2\'24', 'Q3\'24', 'Q4\'24', 'Q1\'25', 'Q2\'25', '26', '27'],
crosshair: true, // 启用 x 轴准星线
labels: { style: { 'fontSize': '16px' } }
},
tooltip: {
enabled: false,
animation: false,
},
plotOptions: {
//series: {
// pointStart: 2012
//},
line: {
dataLabels: { enabled: true, style: { 'fontSize': '16px' } }
},
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
enabled: false,
lineWidth: 1,
states: {
hover: {
enabled: false
}
},
lineColor: '#666666'
}
}
},
series: [{
name: 'hunting',
color: '#ffffcc',
data: [36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36]
}, {
name: 'Ocean transport',
color: '#c3d69b',
data: [43, 43, 43, 43, 43, 43, 43, 43, 43, 43, 43]
}, {
name: 'Households',
color: '#ffffcc',
data: [18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18]
}, {
name: 'Agriculture and hunting',
color: '#ff7f7f',
data: [23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23]
}, {
name: 'Value',
data: [98, 99, 104, 97, 89, 78, 77, 66, 64, 58, 44],
zIndex: 1,
type: 'line',
dataLabels: {
enabled: true
},
marker: {
fillColor: 'white',
symbol: 'circle',
lineWidth: 2,
enabled: true,
lineColor: Highcharts.getOptions().colors[0]
}
}]
});
</script>
