|
|
import { Dialog, Disclosure, Menu, Transition } from "@headlessui/react";
|
|
|
import {
|
|
|
ChevronDownIcon,
|
|
|
ChevronUpIcon,
|
|
|
} from "@heroicons/react/20/solid";
|
|
|
import { XMarkIcon } from "@heroicons/react/24/outline";
|
|
|
import { Fragment, useRef, useState } from "react";
|
|
|
|
|
|
import Map, { Layer, Popup, ScaleControl, Source } from "react-map-gl/maplibre";
|
|
|
import basemap from "./assets/basemap.json";
|
|
|
import mapstyle from "./countries.json";
|
|
|
|
|
|
|
|
|
mapstyle.sources.remap.url = import.meta.env.MODE === "localhost" ? "http://localhost:8080/capabilities/remap.json" : mapstyle.sources.remap.url
|
|
|
|
|
|
const paintedLayers = mapstyle.layers.reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {})
|
|
|
const toggleLayers = ["Подложка"]
|
|
|
|
|
|
|
|
|
const initialPaintFilters = [
|
|
|
{
|
|
|
id: "parameter_name",
|
|
|
name: "Показатель ВИЭ-генерации",
|
|
|
options: [
|
|
|
{
|
|
|
"value": "power_fact_mw",
|
|
|
"label": "Фактическая установленная мощность, МВт",
|
|
|
"checked": true
|
|
|
},
|
|
|
{
|
|
|
"value": "generation_gwh",
|
|
|
"label": "Производство электроэнергии, млн кВт⋅ч",
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": "res_share_generation",
|
|
|
"label": "Доля в выработке электроэнергии, %",
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": "res_share_power",
|
|
|
"label": "Доля в балансе мощности, %",
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": "generation_to_population_kWh_pers",
|
|
|
"label": "Производство электроэнергии на душу населения, кВт⋅ч/чел.",
|
|
|
"checked": false
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
]
|
|
|
|
|
|
const initialFilterFilters = [
|
|
|
{
|
|
|
id: "id_tech",
|
|
|
name: "ВИЭ-технология",
|
|
|
options: [
|
|
|
{
|
|
|
"value": 1,
|
|
|
"label": "СЭС",
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": 2,
|
|
|
"label": "Наземные ВЭС",
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": 3,
|
|
|
"label": "Офшорные ВЭС",
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": 4,
|
|
|
"label": "ГЭС",
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": 5,
|
|
|
"label": "БиоЭС",
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": 6,
|
|
|
"label": "ГеоЭС",
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": 8,
|
|
|
"label": "СЭС и ВЭС",
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": 7,
|
|
|
"label": "Все ВИЭ",
|
|
|
"checked": true
|
|
|
}
|
|
|
]
|
|
|
},
|
|
|
{
|
|
|
"id": "year",
|
|
|
"name": "Год",
|
|
|
"options": [
|
|
|
{
|
|
|
"value": 2010,
|
|
|
"label": 2010,
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": 2011,
|
|
|
"label": 2011,
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": 2012,
|
|
|
"label": 2012,
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": 2013,
|
|
|
"label": 2013,
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": 2014,
|
|
|
"label": 2014,
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": 2015,
|
|
|
"label": 2015,
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": 2016,
|
|
|
"label": 2016,
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": 2017,
|
|
|
"label": 2017,
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": 2018,
|
|
|
"label": 2018,
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": 2019,
|
|
|
"label": 2019,
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": 2020,
|
|
|
"label": 2020,
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": 2021,
|
|
|
"label": 2021,
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": 2022,
|
|
|
"label": 2022,
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": 2023,
|
|
|
"label": 2023,
|
|
|
"checked": false
|
|
|
},
|
|
|
{
|
|
|
"value": 2024,
|
|
|
"label": 2024,
|
|
|
"checked": true
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
]
|
|
|
|
|
|
export default function Countries({ mapOptions, onMapOptionClick }) {
|
|
|
const mapRef = useRef(null);
|
|
|
|
|
|
const [open, setOpen] = useState(false)
|
|
|
|
|
|
const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
|
|
|
|
|
|
const [popupInfo, setPopupInfo] = useState(null);
|
|
|
|
|
|
const [paintFilters, setPaintFilters] = useState(initialPaintFilters);
|
|
|
const [filterFilters, setFilterFilters] = useState(initialFilterFilters);
|
|
|
|
|
|
|
|
|
const generatePopup = (info) => {
|
|
|
// console.log(info)
|
|
|
const [currentTech, currentYear, currentParameter] = filterFilters.map(f => f.options.find(o => o.checked)).concat(paintFilters[0].options.find(o => o.checked))
|
|
|
return (
|
|
|
<div>
|
|
|
<img src={`/flags/${info.id_country}.png`} className="mb-4 w-36 outline outline-gray-400" />
|
|
|
{info.area_km2 && <p className="text-gray-500">Площадь <span className="text-gray-900 font-medium">{(info.area_km2 / 1000).toFixed(1).replace(".", ",")} тыс. км²</span></p>}
|
|
|
{info.population_person && <p className="text-gray-500">Численность населения <span className="text-gray-900 font-medium">{(info.population_person / 1000).toFixed(1).replace(".", ",")} тыс. чел.</span></p>}
|
|
|
{info.population_densitiy_pers_km2 && <p className="text-gray-500">Плотность населения <span className="text-gray-900 font-medium">{info.population_densitiy_pers_km2.toFixed(1).replace(".", ",")} чел./км²</span></p>}
|
|
|
{info.year_carbon_neutrality && <p className="text-gray-500">Целевой год достижения углеродной нейтральности <span className="text-gray-900 font-medium">{info.year_carbon_neutrality}</span></p>}
|
|
|
|
|
|
{info[currentParameter.value] &&
|
|
|
<div className="relative overflow-x-auto py-6">
|
|
|
<p className="text-sm font-medium">{currentParameter.label} в {currentYear.label} году</p>
|
|
|
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
|
|
|
<tbody>
|
|
|
{info[currentParameter.value] != null &&
|
|
|
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
|
<th scope="row" className="px-2 py-4 font-normal text-gray-900 dark:text-white">
|
|
|
{currentTech.label}
|
|
|
</th>
|
|
|
<td className="px-2 py-4 text-right">
|
|
|
{info[currentParameter.value].toFixed(2).replace(".", ",")}
|
|
|
</td>
|
|
|
</tr>
|
|
|
}
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
}
|
|
|
|
|
|
|
|
|
<div className="relative overflow-x-auto pt-2">
|
|
|
<p className="text-sm font-medium">Совокупная установленная мощность ВИЭ по итогам {info.static_date_power} года, МВт</p>
|
|
|
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
|
|
|
<tbody>
|
|
|
{info.static_power_fact_solar_mw != null &&
|
|
|
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
|
<th scope="row" className="px-2 py-4 font-normal text-gray-900 dark:text-white">
|
|
|
Солнечные электростанции
|
|
|
</th>
|
|
|
<td className="px-2 py-4 text-right">
|
|
|
{info.static_power_fact_solar_mw.toFixed(2).replace(".", ",")}
|
|
|
</td>
|
|
|
</tr>
|
|
|
}
|
|
|
{info.static_power_fact_onshore_mw != null &&
|
|
|
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
|
<th scope="row" className="px-2 py-4 font-normal text-gray-900 dark:text-white">
|
|
|
Наземные ветроэлектростанции
|
|
|
</th>
|
|
|
<td className="px-2 py-4 text-right">
|
|
|
{info.static_power_fact_onshore_mw.toFixed(2).replace(".", ",")}
|
|
|
</td>
|
|
|
</tr>
|
|
|
}
|
|
|
{info.static_power_fact_offshore_mw != null &&
|
|
|
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
|
<th scope="row" className="px-2 py-4 font-normal text-gray-900 dark:text-white">
|
|
|
Офшорные ветроэлектростанции
|
|
|
</th>
|
|
|
<td className="px-2 py-4 text-right">
|
|
|
{info.static_power_fact_offshore_mw.toFixed(2).replace(".", ",")}
|
|
|
</td>
|
|
|
</tr>
|
|
|
}
|
|
|
{info.static_power_fact_res_mw != null &&
|
|
|
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
|
<th scope="row" className="px-2 py-4 font-medium text-gray-900 dark:text-white uppercase">
|
|
|
Всего ВИЭ <span className="font-normal normal-case">(включая СЭС, ВЭС, ГЭС, БиоЭС, ГеоЭС)</span>
|
|
|
</th>
|
|
|
<td className="px-2 py-4 text-right">
|
|
|
{info.static_power_fact_res_mw.toFixed(2).replace(".", ",")}
|
|
|
</td>
|
|
|
</tr>
|
|
|
}
|
|
|
{info.static_res_share_power != null &&
|
|
|
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
|
<th scope="row" className="px-2 py-4 font-normal text-gray-900 dark:text-white">
|
|
|
Доля всей ВИЭ-генерации в балансе мощности страны, %
|
|
|
</th>
|
|
|
<td className="px-2 py-4 text-right">
|
|
|
{info.static_res_share_power.toFixed(2).replace(".", ",")}
|
|
|
</td>
|
|
|
</tr>
|
|
|
}
|
|
|
{info.static_solar_wind_share_power != null &&
|
|
|
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
|
|
<th scope="row" className="px-2 py-4 font-normal text-gray-900 dark:text-white">
|
|
|
Доля СЭС и ВЭС в балансе мощности страны, %
|
|
|
</th>
|
|
|
<td className="px-2 py-4 text-right">
|
|
|
{info.static_solar_wind_share_power.toFixed(2).replace(".", ",")}
|
|
|
</td>
|
|
|
</tr>
|
|
|
}
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
|
|
|
<p className="text-sm text-gray-400">Источник: IRENA</p>
|
|
|
{info.date_actualization && <p className="text-sm mt-4 text-gray-600">Дата актуализации: {info.date_actualization}</p>}
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
const generateLegend = function (parameter) {
|
|
|
const colors_and_breaks = mapstyle.layers.find(layer => layer.id == parameter.value).paint["fill-color"].slice(2)
|
|
|
const colors = colors_and_breaks.filter((cb, i) => i % 2 == 0)
|
|
|
const breaks = colors_and_breaks.filter((cb, i) => i % 2 == 1)
|
|
|
const labels = [`менее ${breaks[0]}`, ...breaks.map((brk, i, arr) => typeof arr[i + 1] !== 'undefined' ? `${brk} - ${arr[i + 1]}` : `более ${breaks.at(-1)}`)]
|
|
|
const legend_items = colors.map((col, i) => (
|
|
|
{
|
|
|
"color": col,
|
|
|
"label": labels[i]
|
|
|
}
|
|
|
)).reverse()
|
|
|
return (
|
|
|
<div>
|
|
|
<p>{parameter.label}</p>
|
|
|
{legend_items.map(item => <div className="flex items-center mt-3" key={item.color}><div className={"w-5 h-5 rounded-sm"} style={{ backgroundColor: item.color }}></div><p className="ml-3 text-sm text-gray-600">{item.label}</p></div>)}
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
|
|
|
const handleFilterToggle = function (event) {
|
|
|
|
|
|
if (paintFilters.filter((filter) => filter.id == event.target.name).length > 0) {
|
|
|
const newStatePaintFilters = paintFilters.map((filter) =>
|
|
|
filter.id == event.target.name
|
|
|
? {
|
|
|
...filter,
|
|
|
options: filter.options.map((option) =>
|
|
|
option.value == event.target.defaultValue
|
|
|
? { ...option, checked: true }
|
|
|
: { ...option, checked: false }
|
|
|
),
|
|
|
}
|
|
|
: filter
|
|
|
);
|
|
|
setPaintFilters(newStatePaintFilters);
|
|
|
} else {
|
|
|
const newStateFilterFilters = filterFilters.map((filter) =>
|
|
|
filter.id == event.target.name
|
|
|
? {
|
|
|
...filter,
|
|
|
options: filter.options.map((option) =>
|
|
|
option.value == event.target.defaultValue
|
|
|
? { ...option, checked: true }
|
|
|
: { ...option, checked: false }
|
|
|
),
|
|
|
}
|
|
|
: filter
|
|
|
);
|
|
|
setFilterFilters(newStateFilterFilters);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const applyPaintFilters = (filtersObj) => {
|
|
|
const parameter = filtersObj.find(filter => filter.id == "parameter_name").options.find(option => option.checked).value
|
|
|
const newPaint = paintedLayers[parameter].paint
|
|
|
return newPaint
|
|
|
};
|
|
|
|
|
|
const applyFilterFilters = (filtersObj) => {
|
|
|
const year_value = filtersObj.find(f => f.id == "year").options.find(option => option.checked).value
|
|
|
const tech_value = filtersObj.find(f => f.id == "id_tech").options.find(option => option.checked).value
|
|
|
return ["all", ["==", ["get", "year"], year_value], ["==", ["get", "id_tech_global"], tech_value]]
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleClick = (event) => {
|
|
|
if (event.features[0]) {
|
|
|
event.originalEvent.stopPropagation();
|
|
|
setPopupInfo({
|
|
|
lon: event.lngLat.lng,
|
|
|
lat: event.lngLat.lat,
|
|
|
...event.features[0].properties
|
|
|
})
|
|
|
setOpen(true)
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const handleMouseEnter = (event) => {
|
|
|
const feature = event.features[0];
|
|
|
if (!feature) return;
|
|
|
|
|
|
mapRef.current.getCanvas().style.cursor = "pointer";
|
|
|
};
|
|
|
|
|
|
const handleMouseLeave = (event) => {
|
|
|
const feature = event.features[0];
|
|
|
if (!feature) {
|
|
|
return;
|
|
|
}
|
|
|
mapRef.current.getCanvas().style.cursor = "";
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
<div className="bg-white">
|
|
|
<div>
|
|
|
<main className="mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
<div className="flex items-baseline justify-between border-b border-gray-200 pt-24 pb-6">
|
|
|
<h1 className="text-4xl font-bold tracking-tight text-gray-900">
|
|
|
Развитие возобновляемой энергетики в странах мира
|
|
|
</h1>
|
|
|
<div className="flex items-center">
|
|
|
<Menu as="div" className="relative inline-block text-left">
|
|
|
<div>
|
|
|
<Menu.Button className="hidden group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900">
|
|
|
{mapOptions.find((option) => option.current).name}
|
|
|
<ChevronDownIcon
|
|
|
className="-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
|
|
|
aria-hidden="true"
|
|
|
/>
|
|
|
</Menu.Button>
|
|
|
</div>
|
|
|
|
|
|
<Transition
|
|
|
as={Fragment}
|
|
|
enter="transition ease-out duration-100"
|
|
|
enterFrom="transform opacity-0 scale-95"
|
|
|
enterTo="transform opacity-100 scale-100"
|
|
|
leave="transition ease-in duration-75"
|
|
|
leaveFrom="transform opacity-100 scale-100"
|
|
|
leaveTo="transform opacity-0 scale-95"
|
|
|
show={true}
|
|
|
>
|
|
|
<Menu.Items className="absolute right-0 z-10 mt-2 w-40 origin-top-right rounded-md bg-white shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none">
|
|
|
<div className="py-1">
|
|
|
{mapOptions.map((option) => (
|
|
|
<Menu.Item key={option.name}>
|
|
|
<a
|
|
|
href="#"
|
|
|
className={option.current ? 'font-medium text-gray-900 block px-4 py-2 text-sm' : 'text-gray-500 block px-4 py-2 text-sm'}
|
|
|
onClick={onMapOptionClick}
|
|
|
>
|
|
|
{option.name}
|
|
|
</a>
|
|
|
</Menu.Item>
|
|
|
))}
|
|
|
</div>
|
|
|
</Menu.Items>
|
|
|
</Transition>
|
|
|
</Menu>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<section aria-labelledby="products-heading" className="pt-6 pb-24">
|
|
|
<div className="grid grid-cols-1 gap-x-8 gap-y-10 md:grid-cols-4">
|
|
|
|
|
|
<form className="hidden md:block h-[65vh] px-1 py-1 overflow-y-scroll">
|
|
|
{/* Layers */}
|
|
|
<ul
|
|
|
role="list"
|
|
|
className="space-y-4 border-b border-gray-200 pb-6 text-sm font-medium text-gray-900"
|
|
|
>
|
|
|
{toggleLayers.map((layer_name) => (
|
|
|
<div key={layer_name} className="flex items-center">
|
|
|
<input
|
|
|
id={layer_name}
|
|
|
name={layer_name}
|
|
|
defaultValue={layer_name}
|
|
|
type="checkbox"
|
|
|
defaultChecked={true}
|
|
|
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
|
|
|
onChange={(event) => {
|
|
|
mapRef.current
|
|
|
.getMap()
|
|
|
.setLayoutProperty(
|
|
|
event.target.id,
|
|
|
"visibility",
|
|
|
event.target.checked ? "visible" : "none"
|
|
|
);
|
|
|
}}
|
|
|
/>
|
|
|
<label
|
|
|
htmlFor={layer_name}
|
|
|
className="ml-3 text-sm text-gray-600"
|
|
|
>
|
|
|
{layer_name}
|
|
|
</label>
|
|
|
</div>
|
|
|
))}
|
|
|
</ul>
|
|
|
|
|
|
{/* Legend */}
|
|
|
<Disclosure as="div" className="border-b border-gray-200 py-6">
|
|
|
{({ open }) => (
|
|
|
<>
|
|
|
<h3 className="-my-3 flow-root">
|
|
|
<Disclosure.Button className="flex w-full items-center justify-between bg-white py-3 text-sm text-gray-400 hover:text-gray-500">
|
|
|
<span className="font-medium text-gray-900">
|
|
|
Легенда
|
|
|
</span>
|
|
|
<span className="ml-6 flex items-center">
|
|
|
{open ? (
|
|
|
<ChevronUpIcon
|
|
|
className="h-5 w-5"
|
|
|
aria-hidden="true"
|
|
|
/>
|
|
|
) : (
|
|
|
<ChevronDownIcon
|
|
|
className="h-5 w-5"
|
|
|
aria-hidden="true"
|
|
|
/>
|
|
|
)}
|
|
|
</span>
|
|
|
</Disclosure.Button>
|
|
|
</h3>
|
|
|
<Disclosure.Panel className="pt-6">
|
|
|
<div className="space-y-4">
|
|
|
{generateLegend(paintFilters.find(f => f.id == "parameter_name").options.find(parameter => parameter.checked))}
|
|
|
</div>
|
|
|
</Disclosure.Panel>
|
|
|
</>
|
|
|
)}
|
|
|
</Disclosure>
|
|
|
|
|
|
{/* Filters */}
|
|
|
{paintFilters.concat(filterFilters).map((section) => (
|
|
|
<Disclosure
|
|
|
as="div"
|
|
|
key={section.id}
|
|
|
className="border-b border-gray-200 py-6"
|
|
|
>
|
|
|
{({ open }) => (
|
|
|
<>
|
|
|
<h3 className="-my-3 flow-root">
|
|
|
<Disclosure.Button className="flex w-full items-center justify-between bg-white py-3 text-sm text-gray-400 hover:text-gray-500">
|
|
|
<span className="font-medium text-gray-900">
|
|
|
{section.name}
|
|
|
</span>
|
|
|
<span className="ml-6 flex items-center">
|
|
|
{open ? (
|
|
|
<ChevronUpIcon
|
|
|
className="h-5 w-5"
|
|
|
aria-hidden="true"
|
|
|
/>
|
|
|
) : (
|
|
|
<ChevronDownIcon
|
|
|
className="h-5 w-5"
|
|
|
aria-hidden="true"
|
|
|
/>
|
|
|
)}
|
|
|
</span>
|
|
|
</Disclosure.Button>
|
|
|
</h3>
|
|
|
<Disclosure.Panel className="pt-6">
|
|
|
<div className="space-y-4">
|
|
|
{section.options.map((option, optionIdx) => (
|
|
|
<div
|
|
|
key={option.value}
|
|
|
className="flex items-center"
|
|
|
>
|
|
|
<input
|
|
|
id={`filter-${section.id}-${optionIdx}`}
|
|
|
name={`${section.id}`}
|
|
|
defaultValue={option.value}
|
|
|
type="radio"
|
|
|
defaultChecked={option.checked}
|
|
|
className="peer h-4 w-4 rounded-full border-gray-400 text-indigo-600 focus:ring-indigo-500 disabled:text-gray-400 disabled:border-gray-200"
|
|
|
onChange={handleFilterToggle}
|
|
|
disabled={
|
|
|
(paintFilters[0].options.find(o => o.checked).value == "res_share_generation" ||
|
|
|
paintFilters[0].options.find(o => o.checked).value == "res_share_power" ||
|
|
|
paintFilters[0].options.find(o => o.checked).value == "generation_to_population_kWh_pers") &&
|
|
|
section.id == "id_tech" && option.value < 7 ?
|
|
|
true
|
|
|
: false
|
|
|
}
|
|
|
/>
|
|
|
<label
|
|
|
htmlFor={`filter-${section.id}-${optionIdx}`}
|
|
|
className="ml-3 text-sm text-gray-600 peer-disabled:text-gray-300"
|
|
|
>
|
|
|
{option.label}
|
|
|
</label>
|
|
|
</div>
|
|
|
))}
|
|
|
</div>
|
|
|
</Disclosure.Panel>
|
|
|
</>
|
|
|
)}
|
|
|
</Disclosure>
|
|
|
))}
|
|
|
|
|
|
|
|
|
{/* Metadata */}
|
|
|
<Disclosure as="div" className="border-b border-gray-200 py-6">
|
|
|
{({ open }) => (
|
|
|
<>
|
|
|
<h3 className="-my-3 flow-root">
|
|
|
<Disclosure.Button className="flex w-full items-center justify-between bg-white py-3 text-sm text-gray-400 hover:text-gray-500">
|
|
|
<span className="font-medium text-gray-900">
|
|
|
Метаданные
|
|
|
</span>
|
|
|
<span className="ml-6 flex items-center">
|
|
|
{open ? (
|
|
|
<ChevronUpIcon
|
|
|
className="h-5 w-5"
|
|
|
aria-hidden="true"
|
|
|
/>
|
|
|
) : (
|
|
|
<ChevronDownIcon
|
|
|
className="h-5 w-5"
|
|
|
aria-hidden="true"
|
|
|
/>
|
|
|
)}
|
|
|
</span>
|
|
|
</Disclosure.Button>
|
|
|
</h3>
|
|
|
<Disclosure.Panel className="pt-6">
|
|
|
<div className="space-y-4">
|
|
|
<p className="text-sm">
|
|
|
Границы показаны по состоянию на 2021 год
|
|
|
</p>
|
|
|
<p className="text-sm">
|
|
|
© Ассоциация развития возобновляемой энергетики
|
|
|
</p>
|
|
|
</div>
|
|
|
</Disclosure.Panel>
|
|
|
</>
|
|
|
)}
|
|
|
</Disclosure>
|
|
|
</form>
|
|
|
|
|
|
{/* Map itself */}
|
|
|
<div className="md:col-span-3">
|
|
|
<div className="h-[65vh]">
|
|
|
<Map
|
|
|
initialViewState={{
|
|
|
latitude: mapstyle.center[0],
|
|
|
longitude: mapstyle.center[1],
|
|
|
zoom: mapstyle.zoom,
|
|
|
}}
|
|
|
mapStyle={basemap}
|
|
|
minZoom={mapstyle.minZoom}
|
|
|
ref={mapRef}
|
|
|
interactiveLayerIds={["power_fact_mw"]}
|
|
|
onClick={handleClick}
|
|
|
onMouseEnter={handleMouseEnter}
|
|
|
onMouseLeave={handleMouseLeave}
|
|
|
maxZoom={6}
|
|
|
hash
|
|
|
>
|
|
|
|
|
|
{open && <Popup
|
|
|
longitude={popupInfo.lon}
|
|
|
latitude={popupInfo.lat}
|
|
|
closeButton={false}
|
|
|
>
|
|
|
{popupInfo.country_russian_name}
|
|
|
</Popup>}
|
|
|
<ScaleControl />
|
|
|
<Source
|
|
|
id="remap"
|
|
|
{...mapstyle.sources.remap}
|
|
|
>
|
|
|
<Layer {...paintedLayers["power_fact_mw"]} paint={applyPaintFilters(paintFilters)} filter={applyFilterFilters(filterFilters)} />
|
|
|
<Layer {...paintedLayers["Границы"]} />
|
|
|
</Source>
|
|
|
</Map>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
</main>
|
|
|
<Transition.Root show={open} as={Fragment}>
|
|
|
<Dialog as="div" className="relative z-10" onClose={setOpen}>
|
|
|
<Transition.Child
|
|
|
as={Fragment}
|
|
|
enter="ease-in-out duration-500"
|
|
|
enterFrom="opacity-0"
|
|
|
enterTo="opacity-100"
|
|
|
leave="ease-in-out duration-500"
|
|
|
leaveFrom="opacity-100"
|
|
|
leaveTo="opacity-0"
|
|
|
>
|
|
|
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
|
|
|
</Transition.Child>
|
|
|
|
|
|
<div className="fixed inset-0 overflow-hidden">
|
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
|
<div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
|
|
|
<Transition.Child
|
|
|
as={Fragment}
|
|
|
enter="transform transition ease-in-out duration-500 sm:duration-700"
|
|
|
enterFrom="translate-x-full"
|
|
|
enterTo="translate-x-0"
|
|
|
leave="transform transition ease-in-out duration-500 sm:duration-700"
|
|
|
leaveFrom="translate-x-0"
|
|
|
leaveTo="translate-x-full"
|
|
|
>
|
|
|
<Dialog.Panel className="pointer-events-auto relative w-screen max-w-md">
|
|
|
<Transition.Child
|
|
|
as={Fragment}
|
|
|
enter="ease-in-out duration-500"
|
|
|
enterFrom="opacity-0"
|
|
|
enterTo="opacity-100"
|
|
|
leave="ease-in-out duration-500"
|
|
|
leaveFrom="opacity-100"
|
|
|
leaveTo="opacity-0"
|
|
|
>
|
|
|
<div className="absolute top-0 left-0 -ml-8 flex pt-4 pr-2 sm:-ml-10 sm:pr-4">
|
|
|
<button
|
|
|
type="button"
|
|
|
className="rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
|
|
|
onClick={() => setOpen(false)}
|
|
|
>
|
|
|
<span className="sr-only">Close panel</span>
|
|
|
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
|
|
|
</button>
|
|
|
</div>
|
|
|
</Transition.Child>
|
|
|
<div className="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl">
|
|
|
<div className="px-4 sm:px-6">
|
|
|
<Dialog.Title className="text-lg font-medium text-gray-900">{popupInfo && popupInfo.country_russian_name}</Dialog.Title>
|
|
|
</div>
|
|
|
<div className="relative mt-6 flex-1 px-4 sm:px-6">
|
|
|
{/* Replace with your content */}
|
|
|
{popupInfo && generatePopup(popupInfo)}
|
|
|
{/* /End replace */}
|
|
|
</div>
|
|
|
</div>
|
|
|
</Dialog.Panel>
|
|
|
</Transition.Child>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</Dialog>
|
|
|
</Transition.Root>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
