<html>
  <head>
   <meta charset="UTF-8">
  <link
      href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"
      rel="stylesheet"
    />
  <style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
    gap: 10px; /* Space between the boxes */
    width: 1200px; /* Width of the container */
    height: 1000px; /* Height of the container */
	
	
        #loading {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 20px;
            border-radius: 5px;
        }
        #spinner {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
		a.button {
    padding: 1px 6px;
    border: 1px outset buttonborder;
    border-radius: 3px;
    color: buttontext;
    background-color: buttonface;
    text-decoration: none;
}
    </style>
	
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"> 	</script> 
 	<!---<script src= "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"> </script> -->
	  <script src=
"https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.umd.min.js">

    </script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js" integrity="..." crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="..." crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/2.0.1/chartjs-plugin-zoom.min.js" integrity="..." crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
	
	<!---<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/2.0.1/chartjs-plugin-zoom.min.js"></script>
	
    <link href="select-multiple.css" media="screen" rel="stylesheet" type="text/css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js" integrity="..." crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="..." crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/2.0.1/chartjs-plugin-zoom.min.js" integrity="..." crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<script src="jquery.select-multiple.js" type="text/javascript"></script>-->
  </head>

  <body>
   <!-- <h1>{{ file }}</h1>-->
   <a href="/table/export/values?cases_idt__cases_name={{file}}" class="btn btn-primary">Export all</a>
    <a href="/table/export/values?cases_idt__cases_name={{file}}&fluid_type=3&type_idt__Type_name=SE" class="btn btn-primary">Export Exp type 3</a>
  <a href="/table/export/values?cases_idt__cases_name={{file}}&fluid_type=2&type_idt__Type_name=SE" class="btn btn-primary">Export Exp type 2</a>
  <a href="/table/export/values?cases_idt__cases_name={{file}}&fluid_type=1&type_idt__Type_name=SE" class="btn btn-primary">Export Exp type 1</a>
  <a href="/table/export/values?cases_idt__cases_name={{file}}&fluid_type=1&type_idt__Type_name=KV" class="btn btn-primary">Export KV </a>
  <a href="/table/export/values?cases_idt__cases_name={{file}}&fluid_type=1&type_idt__Type_name=NDPI" class="btn btn-primary">Export NDPI </a>
  	    
   <script> 
	var URL='/table/values/mylist/?cases_idt__cases_name={{ file }}';
	var fluids={{ fluids }};
	console.log({{ fluids }});
	function getYearByRowid(obj,needle) {// the code you're looking for
//var needle = 'AL';
//var div = document.createElement("div");
//document.getElementById("main").appendChild(div);

// iterate over each element in the array
for (var i = 0; i < obj.length; i++){
  // look for the entry with a matching `code` value
  if (obj[i].rowid == needle){
  return obj[i].year;
     // we found it
    // obj[i].name is the matched result
  }
}
}


function findMinMax(arr,key) {
  const datas = arr.map((node) => node[key]);
  return {
    min: Math.min(...datas),
    max: Math.max(...datas),
  }
  }
		//getData(type='bar',fluid_type=2); 
        function getRowids(data)
		{
		let desired_output = (data) => {
    let unique_values = [
        ...new Set(data.map((element) => element.rowid)),
    ];
    return unique_values;
};
		}
		async  function getDataX(fluid_type=2) {
 
               $('#loading').show();

                // Simulate a fetch request
                setTimeout(function() {
                    // Hide loading widget
                    $('#loading').hide();
                }, 8000); // Simulating a 3-second fetch delay


		 const response = await fetch('/table/values/mylist/?type_idt=3&cases_idt__cases_name={{ file }}'); //params_idt__params_name='+field+
const data =  await response.json(); 
$('#loading').hide();
//console.log(data);
return data;  
		}
		async function getData(type='line',fluid_type=2) { 
			ndpi_gas=[];
			var_gas_sep=[];
			ndpi_oil=[];
			var_oil=[];
			ndpi_condensate=[];
			var_condensate=[];
			other=[];
			allcosts=[];

            rowids=[];
			rids=[];
			//ez=[];
			labels = []; 
			values = []; 
			datas={};
			datas2={};
			datas3={};
	
			ex1= await getDataX();
			y='year';
			for (i = 0; i < ex1.results.length; i++) { 
				
				ndpi_gas.push(ex1.results[i]['ndpi_gas']);
				ndpi_oil.push(ex1.results[i]['ndpi_oil']);
				ndpi_condensate.push(ex1.results[i]['ndpi_condensate']);
				if (i>0){
				var_gas_sep.push(var_gas_sep[i-1]+ex1.results[i]['var_gas_sep']);
				var_oil.push(var_oil[i-1]+ex1.results[i]['var_oil']);
				var_condensate.push(var_condensate[i-1]+ex1.results[i]['var_condensate']);
				
				}
				else
				{
				var_oil.push(ex1.results[i]['var_oil']);
				var_gas_sep.push(ex1.results[i]['var_gas_sep']);
				var_condensate.push(ex1.results[i]['var_condensate']);
				}
				labels.push(ex1.results[i]['year']);
				datas['ndpi_gas']=ndpi_gas;
				datas2['ndpi_oil']=ndpi_oil;
				datas3['ndpi_condensate']=ndpi_condensate;
				datas['var_gas_sep']=var_gas_sep;
				datas2['var_oil']=var_oil;
				datas3['var_condensate']=var_condensate;
				/*datas['var_oil']=var_oil;
				datas['var_gas_sep']=var_gas_sep;
				datas['var_gas_sep']=var_gas_sep;*/
	
			}
			
		
		addchart(labels,datas,'bar-chart13','line',parrent="container",axisr=["var_gas_sep"]);
		addchart(labels,datas2,'bar-chart23','line',parrent="container",axisr=["var_oil"]);
		addchart(labels,datas3,'bar-chart33','line',parrent="container",axisr=["var_condensate"]);
		
}

 async function getDataDD() { 
            marketable_gas=[];
			marketable_condensate=[];
			//marketable_s_condensate=[];
			capital_contributions=[];
			net_present_value_cum=[];
			
			other=[];
			allcosts=[];

            rowids=[];
			rids=[];
			//ez=[];
			labels = []; 
			values = []; 
			datas4={};
		
	
			//ex1= await getDataX();
			 const response = await fetch( 
'/table/values/mylist/?type_idt=4&cases_idt__cases_name={{ file }}'); //+"&rowid_range_min="+rowid_min+"&rowid_range_max="+rowid_max); //params_idt__params_name='+field+
const ex1 =  await response.json(); 
			y='year';
			for (i = 0; i < ex1.results.length; i++) { 
				
				marketable_gas.push(ex1.results[i]['marketable_gas']*1000);
				marketable_condensate.push((ex1.results[i]['marketable_s_condensate']+ex1.results[i]['marketable_n_condensate'])*1000);
				//marketable_s_condensate.push(ex1.results[i]['marketable_s_condensate']*1000);
				//marketable_gas.push(ex1.results[i]['marketable_gas']);
				capital_contributions.push(ex1.results[i]['capital_contributions']);
				net_present_value_cum.push(ex1.results[i]['net_present_value_cum']);
				/*
				var_gas_sep.push(var_gas_sep[i-1]+ex1.results[i]['var_gas_sep']);
				var_oil.push(var_oil[i-1]+ex1.results[i]['var_oil']);
				var_condensate.push(var_condensate[i-1]+ex1.results[i]['var_condensate']);
			*/
				labels.push(ex1.results[i]['year']);
				datas4['marketable_gas']=marketable_gas;
				datas4['marketable_condensate']=marketable_condensate;
				//datas4['marketable_s_condensate']=marketable_s_condensate;
				//datas['marketable_gas']=marketable_gas;
				datas4['capital_contributions']=capital_contributions;
				datas4['net_present_value_cum']=net_present_value_cum;
				
	
		} 
		
		addchart(labels,datas4,'bar-chart114','line',parrent="container",axisr=["net_present_value_cum"],noline=['capital_contributions']);
		renderGrid();
		} 

	</script> 
	
	<script> 
	
getData(type='bar',fluid_type=2);
function selectMultiple()
{
  
   var type=document.getElementById("type");
  var selectedValues= '';
  var selectedValuesType= '';
    for (var i = 0; i < type.options.length; i++) {
     if(type.options[i].selected ==true){
          selectedValuesType += type.options[i].value + ", ";
      }
  }
  
  selectedValuesType=selectedValuesType.slice(0, -2)
  getData(type=selectedValuesType,fluid_type=2); 
}


</script>
    <script> 
	
	function getYearByRowid(obj,needle) {// the code you're looking for
//var needle = 'AL';

// iterate over each element in the array
for (var i = 0; i < obj.length; i++){
  // look for the entry with a matching `code` value
  if (obj[i].rowid == needle){
  return obj[i].year;
     // we found it
    // obj[i].name is the matched result
  }
}
}
function renderGrid()
{
/*
 const newDiv = document.createElement('div');
 newDiv.setAttribute("id", "wrapper");
 newDiv.setAttribute("style","height: 1000px;  width: 1200;");

 
 	let element = document.getElementById('wrapper');
			if (element == null) {
			 const newDiv = document.createElement('div');
			 newDiv.setAttribute("id", 'wrapper');
			  newDiv.setAttribute("style","height: 1000px;  width: 1200;");
			d=document.getElementById('container');//.appendChild(div);
			d.appendChild(newDiv);
			}
			element=document.getElementById(wrapper);
			if (element == null) {return ;}*/
 //style="height: 1000px;  width: 1200;" 
const translateEz={"marketable_condensate":"Товарный конденсат",
"marketable_gas":"Товарный газ",
"capital_contributions":"Капитальные вложения",
"net_present_value_cum":"Накопленный чистый дисконтированный доход",
"ndpi_gas":"Ставка НДПИ на газ",
"var_gas_sep":"Добыча газа сепарации",
"var_oil":"Добыча нефти",
"var_condensate":"Добыча конденсата",
"materials":"Материальные затраты",
"costs":"Расходы на оплату труда",
"tax":"Налоги и пошлины",
"amort":"Амортизационные отчисления",
"other":"Общехозяйственные и общепроизводственные затраты",
"allcosts":"Эксплуатационные затраты",
"year":"Годы",
};
 
	var greid=new gridjs.Grid({
  //columns: ['year', 'marketable_condensate',  'marketable_gas', 'capital_contributions' , 'net_present_value_cum',],
  columns: [{name:translateEz['year'],id:'year'}, {name:translateEz['marketable_condensate'],id:'marketable_condensate'},  {name:translateEz['marketable_gas'],id:'marketable_gas'}, {name:translateEz['capital_contributions'],id:'capital_contributions' } , {name:translateEz['net_present_value_cum'],id:'net_present_value_cum' },],
  sort: true,
  resizable: true,
  server: {
    url: '/table/values/mylist/?cases_idt__cases_name={{file}}&type_idt=4',
	gzip: true,
    data: (opts) => {
      return new Promise((resolve, reject) => {
        // let's implement our own HTTP client
        const xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (this.readyState === 4) {
            if (this.status === 200) {
              const resp = JSON.parse(this.response).results;
              //console.log(resp.data.map(card => [card.name, card.lang, card.released_at, card.artist])); 
			  //!!var groubedByTeam = Object.groupBy(resp, ({rowid})=> 'rowid')
			  const merged = resp.reduce((acc, o) => {
  acc[o.rowid] = Object.assign(acc[o.rowid] || {}, o)
  return acc;
}, {})

             const output = Object.values(merged)
			 for (i = 0; i < output.length; i++) { 
			 output[i]['marketable_condensate']=output[i]['marketable_n_condensate']+output[i]['marketable_s_condensate'];}

			  //console.log('output');
			  //console.log(output);
              // make sure the output conforms to StorageResponse format: 
              // https://github.com/grid-js/gridjs/blob/master/src/storage/storage.ts#L21-L24
              resolve({
                data: output, //.map(card => [card.year, card.capital_contributions, card.stock_launching, card.balance_value]),
               // total: 10,
              });
            } else {
              reject();
            }
          }
        };
        xhttp.open("GET", opts.url, true);
        xhttp.send();
      });
    }
  },
  pagination: {
    limit: 10
  }
}).render(document.getElementById('wrapper'));
}
function addchart(labels,data,div,type,parrent="container",axisr=[],noline=[""]) {
dataset=[];
alltype=type;
color=['#47DAB0','#9BDAF5','#8f30ee','#3cba9f','#e8c3b9','#c4ba50','#AE505C','#48F0D0','#47ABD0','#74ABD0','#30ee59'];
//color='#3cba9f'
const translateEz={"marketable_condensate":"Товарный конденсат",
"marketable_gas":"Товарный газ",
"capital_contributions":"Капитальные вложения",
"net_present_value_cum":"Накопленный чистый дисконтированный доход",
"ndpi_gas":"Ставка НДПИ на газ",
"var_gas_sep":"Добыча газа сепарации",
"var_oil":"Добыча нефти",
"var_condensate":"Добыча конденсата",
"materials":"Материальные затраты",
"costs":"Расходы на оплату труда",
"tax":"Налоги и пошлины",
"amort":"Амортизационные отчисления",
"other":"Общехозяйственные и общепроизводственные затраты",
"allcosts":"Эксплуатационные затраты",
"ndpi_condensate":"Ставка НДПИ на газовый конденсат",
"ndpi_oil":"Ставка НДПИ на нефть",
"capital":"Капитальные ремонты",
};
c=color.length;
for (i = 0; i < Object.keys(data).length; i++) { 
//c=0;
key=Object.keys(data);
axisl="";
/*
draw=0;
data[key[i]].forEach((element, index) => {
    if (element !== undefined) {
        draw=draw+1;}//console.log(`Element at index ${index} is undefined`);
    });
	if(draw <1){return -1;}*/
	type=alltype;
	          for (j = 0; j < noline.length; j++) { 
	         if(key[i]==noline[j]){type='bar'}
			 }
			 for (j = 0; j < axisr.length; j++) { 
	         if(key[i]==axisr[j])
			 {
             d={label:translateEz[key[i]],data:data[key[i]],backgroundColor:color[c--],"yAxisID":"right",type:type};}
			 else //if(key[i]==axisl)
			 {d={label:translateEz[key[i]],data:data[key[i]],backgroundColor:color[c--],"yAxisID":"left",type:type};}
			 }
			 if(axisr.length<1)
			 {
			 d={label:translateEz[key[i]],data:data[key[i]],backgroundColor:color[c--],type:type};
			 }
			dataset.push(d);
			}
			let element = document.getElementById(div);
			if (element == null) {
			 const newDiv = document.createElement('canvas');
			 newDiv.setAttribute("id", div);
			d=document.getElementById(parrent);//.appendChild(div);
			d.appendChild(newDiv);
			element=document.getElementById(div);
			}
			var myChart41 =new Chart( element.getContext('2d'), { 
				type: type, 
				data: { 
					labels: labels, 
					datasets:dataset
					
				}, 
				options: { 
				 plugins: {
      zoom: {
        zoom: {
          wheel: {
            enabled: true,
          },
          pinch: {
            enabled: true
          },
          mode: 'xy',
        }
		}
    },
				 scales: {
                    x: {
                        stacked: true,
                    },
                    y: {
                        stacked: true
                    }
                },
				
					legend: { display: true }, 
		
					title: { 
						display: true, 
						text: 'year vs EZ '
					} ,
					 
					
				} 
				
			}); 

  }

function findMinMax(arr,key) {
  const datas = arr.map((node) => node[key]);
  return {
    min: Math.min(...datas),
    max: Math.max(...datas),
  }
  }
		//getData(type='bar',fluid_type=2); 
        function getRowids(data)
		{
		let desired_output = (data) => {
    let unique_values = [
        ...new Set(data.map((element) => element.rowid)),
    ];
    return unique_values;
};
		}
		async  function getDataX(fluid_type=2) {
 
               $('#loading').show();

                // Simulate a fetch request
                setTimeout(function() {
                    // Hide loading widget
                    $('#loading').hide();
                }, 8000); // Simulating a 3-second fetch delay

		 const response2 = await fetch( 
'/table/values/ezlist/?cases_idt__cases_name={{ file }}&type_idt=2&type_idt__Type_name=SE&sort=rowid&fluid_type='+fluid_type); //+"&rowid_range_min="+rowid_min+"&rowid_range_max="+rowid_max); //params_idt__params_name='+field+
const data2 =  await response2.json(); 
$('#loading').hide();
//console.log(data);
return data2;  
		}
		async function getData(type='line',fluid_type=2) { 
			materials=[];
			capital=[];
			stuff=[];
			costs=[];
			tax=[];
			amort=[];
			other=[];
			allcosts=[];
		   
const responsey2 = await fetch( 
'/table/values/mylist/?cases_idt__cases_name={{ file }}&type_idt=2&type_idt__Type_name=SE&params_idt__params_name=year&sort=rowid'); 
	//		console.log(response); 
		//	const data = await response.json(); 
			const datay2 = await responsey2.json(); 
		
			lengthy2 = datay2.results.length; 
		
            rowids=[];
			rids=[];
			//ez=[];
			labels = []; 
			values = []; 
			datasn={};
            for (j = 0; j <fluids.length; j++) 
			{
			ex12= await getDataX(fluid_type=fluids[j]);
			y='year';
			for (i = 0; i < ex12.results.length; i++) { 
				//rowids.push(datay.results[i]['rowid']); 
				//console.log(datay.results[i]['rowid']);
				//ex1= await getDataX(field_type=fluid_type,rowid=datay.results[i]['rowid']);
				materials.push(ex12.results[i][0]['materials_prefix']);
				capital.push(ex12.results[i][0]['capital_prefix']);
				stuff.push(ex12.results[i][0]['stuff_prefix']);
				costs.push(ex12.results[i][0]['costs_prefix']);
				tax.push(ex12.results[i][0]['tax_prefix']);
				amort.push(ex12.results[i][0]['amort_prefix']);
				other.push(ex12.results[i][0]['other_prefix']);
				allcosts.push(ex12.results[i][0]['allcosts_prefix']);
				datasn['materials']=materials;
				datasn['capital']=capital;
				//datas['stuff']=stuff;
				datasn['costs']=costs;
				datasn['tax']=tax;
				datasn['amort']=amort;
				datasn['other']=other;
				datasn['allcosts']=allcosts;
				//ex1.results[i][0]['rowid']
				year2=getYearByRowid(datay2.results,ex12.results[i][0]['rowid']);
				labels.push(year2);//rowid
				//console.log(ex1);
				//ez.push(ex1); 
			}
			
		addchart(labels,datasn,'bar-chart11'+j+i,'bar',parrent="container",axisr=[]);
		addchart(labels,datasn,'bar-chart12'+j+i,'line',parrent="container",axisr=[]);
	}


		} 

	</script> 
	
	<script> 
getData(type='bar',fluid_type=2);
getDataDD();
//renderGrid();
</script>


<div id="dataq">


</div>
 <div id="loading">
        <div id="spinner"></div> Loading...
    </div>


<div>
<!---
<button id="button">
    Click me!
</button>-->
</div>

<div id="container" class="container">
<!--
<div id='bar' style="height: 1000px;width: 1200px">
<canvas id="bar-chart11"> 
	</canvas>
	</div>
	<div id='bar' style="height: 1000px;width: 1200px">
<canvas id="bar-chart12"> 
	</canvas>
	</div>
	
	<div id='bar' style="height: 1000px;width: 1200px">
<canvas id="bar-chart1"> 
	</canvas>
	</div>
	<div id='bar' style="height: 1000px;width: 1200px">
<canvas id="bar-chart2"> 
	</canvas>
	</div>
		<div id='bar' style="height: 1000px;width: 1200px">
<canvas id="bar-chart3"> 
	</canvas>
	</div>-->
	<div   style="height: 1000px;  width: 1200;" id="wrapper"></div>
 <script>//renderGrid();</script>
	</div>

  </body>
</html>