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

{% block Title %} Статистика типовых серий домов в России | Панельное строительство{% endblock %}

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

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

{% block Keywords %}типовые серии домов, панельное строительство, статистика жилого фонда, каталог типовых зданий, распределение серий по регионам, статистика типовых домов, кирпичные дома, износ жилого фонда, площадь жилого фонда, количество зданий, годы возведения, анализ панельной застройки{% endblock %}

{% block Author4Meta %}: Статистика типовых серий домов «Окнардия»{% endblock %}

{% block CopyrightAuthor4Meta %}: Статистика типовых серий домов «Окнардия»{% 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 Top_Meta1 %}{# <!-- BEGIN Дополнительные Metatags --> #}
  {# Удалить: itemprop microdata, rel=standout, twitter:domain — устаревшие теги #}
  <meta name="news_keywords" content="типовые серии домов, панельное строительство, статистика жилого фонда, распределение серий по регионам" />
  <link rel="canonical" href="{{ request.scheme }}://{{ request.get_host }}/stat_all/" />
  <!-- Разметка для соц-сетей Facebook Open Graph -->
  <meta property="fb:admins" name="admins" content="100000084781830" />
  <meta property="fb:pages" content="276108456054163" />
  <meta property="fb:app_id" content="258354027974262" />
  <meta property="fb:profile_id" name="profile_id" content="https://www.facebook.com/oknardia/" />
  <meta property="og:locale" content="ru_RU" />
  <meta property="og:site_name" content="oknardia.ru" />
  <meta property="og:url" content="{{ request.scheme }}://{{ request.get_host }}/stat_all/" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Статистика типового строительства - Окнардия" />
  <meta property="og:description" content="Статистика типового строительства в России. Анализ распределения серий домов по регионам, площадь жилого фонда, количество зданий." />
  <meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}/static/img/MerDY3gpU0w.jpg" />
  <link rel="image_src" href="{{ request.scheme }}://{{ request.get_host }}/static/img/MerDY3gpU0w.jpg" />
  <!-- Разметка для соц-сетей Twitter Card -->
  <meta name="twitter:title" content="Статистика типового строительства - Окнардия" />
  <meta name="twitter:description" content="Статистика типового строительства в России. Анализ распределения серий домов по регионам." />
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@oknardia" />
  <meta property="twitter:url" content="{{ request.scheme }}://{{ request.get_host }}/stat_all/" />
  <meta name="twitter:image" content="{{ request.scheme }}://{{ request.get_host }}/static/img/MerDY3gpU0w.jpg" />
  <meta name="relap-image" content="{{ request.scheme }}://{{ request.get_host }}/static/img/MerDY3gpU0w.jpg" />
{# <!-- END Дополнительные Metатags --> #}{% endblock %}

{% block ADD_TO_HEAD %}
  {# JSON-LD: страница статистики типовых серий — CollectionPage + BreadcrumbList + DataCatalog #}
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "CollectionPage",
    "name": "Статистика типовых серий домов",
    "description": "Анализ распределения типовых серий строительства в России: количество зданий, общая площадь, география и годы возведения.",
    "url": "{{ request.scheme }}://{{ request.get_host }}/stat_all/",
    "isPartOf": {
      "@type": "WebSite",
      "name": "Окнардия",
      "url": "{{ request.scheme }}://{{ request.get_host }}/"
    },
    "mainEntity": {
      "@type": "DataCatalog",
      "name": "Статистика типовых серий",
      "description": "База данных типовых серий строительства в СССР и России",
      "dataset": [{% for CountSeria in SERIA_NAV_DIM %}
        {
          "@type": "Dataset",
          "name": "Данные серии {{ CountSeria.SERIA_R }}",
          "description": "Информация о типовой серии {{ CountSeria.SERIA_R }}"
        }{% if not forloop.last %},{% endif %}{% endfor %}
      ]
    }
  }
  </script>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Главная",
        "item": "{{ request.scheme }}://{{ request.get_host }}/"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "Статистика",
        "item": "{{ request.scheme }}://{{ request.get_host }}/stat_all/"
      }
    ]
  }
  </script>
{% endblock %}

{% block Main_Content %}<div class="container-fluid">
{# Хлебные крошки: НАЧАЛО #}
<div class="row">
  <div class="col-md-11 col-xs-12">
    <ol class="breadcrumb">
      <li><a href="/">Главная</a></li>
      <li class="active">Статистика типового строительства России</li>
    </ol>
  </div>
</div>
{# Хлебные крошки: КОНЕЦ #}

<div class="row">
  <div class="col-md-9"><h1>Типовые серии домов в&nbsp;базе &laquo;Окнардия&raquo;</h1></div>
</div>

<div class="row">
  <div class="col-md-10"><a name="s_graph"></a>
  	<h2 class="header">Распределение типовых серий в&nbsp;жилом фонде<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++ ) {
		  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 %}