{% extends "base.html" %}
{% load static %}
{% load filters %}
{% load humanize %}

{% block Title %} Статистика типового строительства СССР и России.{% endblock %}

{% block Add_Body_Attribute %} style="padding-top:70px;"{% endblock %}

{# block Date4Meta %}{{ META_DATA_PUBLISH|date:"c" }}{% endblock #}

{# block Last4Meta %}{{ META_DATA_PUBLISH|date:"c" }}{% endblock #}

{% block Description %}Статистика типового строительства СССР и России. Географи, график ввода в эксплуатацтяю, метраж. Здания проектов серии: {% for CountSeria in SERIA_NAV_DIM %}{{ CountSeria.SERIA_R }}{% if not forloop.last %}, {% endif %}{% endfor %}.{% endblock %}

{% block Keywords %}типовые проекты зданий, панельное строительство, {% for CountSeria in SERIA_NAV_DIM %}серия {{ CountSeria.SERIA_R }}, {{ CountSeria.SERIA_R }}, {% endfor %}, года простойки, регионы построки, распространенность{% endblock %}

{% block Top_JS1%}
<script type="text/javascript">
$(window).load(function(){let images = $('.half');images.each(function(i){$(this).width($(this).width()/2);});});
</script>
{% endblock %}

{% block Main_Content %}<div class="container-fluid">
<div class="row">
  <div class="col-md-9"><h1>Статистика</h1></div>
</div>

<div class="row">
  <div class="col-md-10"><a name="s_graph"></a>
  	<h2 class="header">Распределение типовых серии в жилом фонде<sup><small style="color: darkred;">*</small></sup></h2>
  </div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
step = Math.round( Math.pow({{ SERIA_NAV_DIM|length }}, 1./3.)-1);
step_tone = Math.floor(0xF0/step)-1;
DimColor = [];
for (i1=0; i1<=step; i1++ )
	for (i2=step; i2>=0; i2-- )
	  for (i3=0; i3<=step; i3++ ) {
		  //document.write("&nbsp;<span style='color:#"
			//	  + ("00"+(i1*step_tone).toString(16)).substr(-2)
			//	  + ("00"+(i2*step_tone).toString(16)).substr(-2)
			//	  + ("00"+(i3*step_tone).toString(16)).substr(-2)
			//	  + ";'>█</span> -- ");
		  //document.write( "#"
			//	  + ("00"+(i1*step_tone).toString(16)).substr(-2)
			//	  + ("00"+(i2*step_tone).toString(16)).substr(-2)
			//	  + ("00"+(i3*step_tone).toString(16)).substr(-2) + "<br>");
		  DimColor.push("#"
				  + ("00"+(i1*step_tone).toString(16)).substr(-2)
				  + ("00"+(i2*step_tone).toString(16)).substr(-2)
				  + ("00"+(i3*step_tone).toString(16)).substr(-2)
				  );
	  }{% for CountSeria in SERIA_NAV_DIM %}
  c{{ CountSeria.ID2URL }} = DimColor[{{ forloop.counter0 }}];	s{{ CountSeria.ID2URL }} = "{{ CountSeria.SERIA_R }}";	{% endfor %} sNone = "нет данных";

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {

	let dataNumBuildingPerSeria = google.visualization.arrayToDataTable([
		[ 'Проект серии', 'Число зданий (шт.)' ],{% for CountSeria in DATA2PIE %}
		[ 'Серия ' + s{{ CountSeria.ID }},  {{ CountSeria.NUM_BUILDING }} ]{% if not forloop.last %},{% endif %}{% endfor %}
	]);
	let dataM2PerSeria = google.visualization.arrayToDataTable([
		[ 'Проект серии', 'Общая площадь помещений в данно серии (м2)' ],{% for CountSeria in DATA2PIE %}
		[ 'Серия ' + s{{ CountSeria.ID }},  {{ CountSeria.AREA_M2|stringformat:"f" }} ]{% if not forloop.last %},{% endif %}{% endfor %}
	]);
	let TotalKnown = {% for CountSeria in DATA2PIE %}{{ CountSeria.NUM_BUILDING }}{% if not forloop.last %}+{% endif %}{% endfor %};
	let TotalAddress = 114808;
	let dataTotal = google.visualization.arrayToDataTable([
		[ 'База «Окнардии»', 'Количество адресов' ],
		[ 'Не обработано или нет данных',  TotalAddress-TotalKnown ],
		[ 'Оцифрованые типовые серии',  TotalKnown ]

	]);

	let options4Pie1 = {
		pieHole: 0.386,
		//backgroundColor:'#f1fff1',
		legend: {position: "none"},
		//chartArea: {left:20,top:10,width:'100%',height:'100%'},
		chartArea: {width: '95%', height: '95%'},
		slices: { {% for CountSeria in DATA2PIE %}
			{{ forloop.counter0 }}: { color: c{{ CountSeria.ID }} }{% if not forloop.last %},{% endif %}{% endfor %}
		},
		//colors: [ {% for CountSeria in DATA2PIE %} c{{ CountSeria.ID }} {% if not forloop.last %},{% endif %}{% endfor %} ],
		pieStartAngle: 30,
		//is3D: true,
		pieSliceTextStyle: {fontSize: 12},
		tooltip: {textStyle: {fontSize: 14, color: 'black', opacity: 0.8}, showColorCode: true}
	};
	let options4Pie2 = {
		pieHole: 0.16,
		legend: {position: "none"},
		chartArea: {width: '90%', height: '95%', top: 8, left:8},
		pieStartAngle: 115,
		slices: { 1: {offset: 0.04}},
		pieSliceTextStyle: {fontSize: 12},
		tooltip: {textStyle: {fontSize: 10, color: 'black', opacity: 0.8}, showColorCode: true}
	};

  let chartNumBuildingPerSeria = new google.visualization.PieChart(document.getElementById('donutchart1'));
  let chartM2PerSeria = new google.visualization.PieChart(document.getElementById('donutchart2'));
  let chartTotsl = new google.visualization.PieChart(document.getElementById('donutchart3'));
  chartNumBuildingPerSeria.draw(dataNumBuildingPerSeria, options4Pie1);
  chartM2PerSeria.draw(dataM2PerSeria, options4Pie1);
  chartTotsl.draw(dataTotal, options4Pie2);
}
$(window).load(function(){	{% for CountSeria in SERIA_NAV_DIM %}$(".cc{{ CountSeria.ID2URL }}").css("color",c{{ CountSeria.ID2URL }});	{% endfor %}});
</script>

  <div class="col-md-4">
	  <h4 style="text-align:center;">Количество зданий типовых проектов<sup><small style="color: darkred;">*</small></sup></h4>
	  <div id="donutchart1" style="height:350px;width:100%;"></div>
	  <div style="font-size: xx-small;float: right">© 2015-{% now "Y" %}, данные: oknardia.ru</div>
	</div>
  <div class="col-md-4">
	  <h4 style="text-align:center;">Общая площадь (м&sup2;) в типовых сериях<sup><small style="color: darkred;">*</small></sup></h4>
	  <div id="donutchart2" style="height:350px;width:100%;"></div>
	  <div style="font-size: xx-small;float: right">© 2015-{% now "Y" %}, данные: oknardia.ru</div>
	</div>
  <div class="col-md-2 col-md-offset-1">
	  <h4>Адресная база «Окнардия»<sup><small style="color: darkred;">*</small></sup></h4>
	  <div id="donutchart3" style="height:180px;width:100%;"></div>
	</div>
  <div class="col-md-4">
	  <h4>Обозначения:</h4>
		<diV style="font-size: small;">{% for CountSeria in SERIA_NAV_DIM %}
			<span style="display:inline-flex;width: 22.5%;"><nobr><span class="cc{{ CountSeria.ID2URL }}">█</span>&nbsp;<a href="/catalog/seria/{{ CountSeria.SERIA_L }}/all{{ CountSeria.ID2URL }}/">{{ CountSeria.SERIA_R }}</a></nobr></span>{% endfor %}
    </diV>
	</div>
</div>


<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script src="{% static 'js/ymaps-pie-chart-clusterer.js' %}" type="text/javascript"></script>
<script src="{% static '' %}{{ MAP_JS }}" charset="utf-8" type="text/javascript"></script>
<div class="row">
	<div class="col-md-12"><a name="s_map"></a>
		<h2 class="header">Здания типовых проектов на карте:</h2></div>
	<div class="col-xs-1" style="font-size: x-small;">
		<h6>Обозначения:</h6>
		<p style="margin-left:1ex;">{% for CountSeria in SERIA_NAV_DIM %}
			<nobr><span class="cc{{ CountSeria.ID2URL }}">█</span>	<a href="/catalog/seria/{{ CountSeria.SERIA_L }}/all{{ CountSeria.ID2URL }}/">{{ CountSeria.SERIA_R }}</a></nobr><br/>{% endfor %}
		</p>
	</div>
	<div class="col-xs-11">
		<div id="SeriaMap" style="height:650px;width:100%;">
      <p style="font-size:small;padding-top: 1ex;">Чтобы посмотреть цены на&nbsp;установку и&nbsp;замену окон от&nbsp;партнёров &laquo;Окнардия&raquo; в&nbsp;своей квартире: найдите дом на&nbsp;карте; кликните на&nbsp;него; перейдите по&nbsp;ссылке &laquo;Смотреть цены на установку окон&raquo;. При необходимости смените типовую планировку квартиры (на&nbsp;странице ценовой выдачи, справа от&nbsp;изображения типовых проёмов и&nbsp;схем открывания).</p>
			<noscript><p>Для отображения картографических данных с&nbsp;помощью &laquo;Яндекс.Карт&raquo; нужно включить поддержку JavaScript.</p></noscript>
		</div>
		<div style="font-size: xx-small;float: right">© 2015-{% now "Y" %}, данные: oknardia.ru</div>
	</div>
</div>

<!-- div class="row col-md-12">
	<div class="col-md-8 header"><a name="s_graph"></a>
		<h2>Возведение зданий разных серий по годам</h2>
	</div>
	<div class="col-md-9 col-md-offset-1" style="height:300px;font-size:large;">
		{% now "Y" %}<br>
		{#% include 'SeriaInfo/yaer_graph.html' %#}
	</div>
</div>

<div class="row col-md-12">
	<div class="col-md-8 header"><a name="s_graph"></a>
		<h2>Метраж в эксплуатации по годам</h2>
	</div>
	<div class="col-md-9 col-md-offset-1" style="height:300px;font-size:large;">
		{#% include 'SeriaInfo/yaer_graph.html' %#}
	</div>
</div -->


<div class="row">
	<div class="col-md-2 col-md-offset-10" style="margin-top: 4em;"><p style="font-size:xx-small;">время исполнения	скрипта: {{ ticks|floatformat:4 }}</p></div>
</div>
</div>
{% endblock %}

 {% comment %}
{% block Top_Nav_Bar %}
    {# ОТЛАДКА, ГАСИМ ВЕРХНЕЕ МЕНЮ #}
{% endblock %}
{% endcomment %}