Implement updated Bastion prototype and search workflow

okb-source/classifiers.css

@@ -0,0 +1 @@
+.table-wrap{overflow-x:auto;border:1px solid #55595b;border-radius:14px}.classifiers-table{width:100%;min-width:420px;border-collapse:collapse;background:#303234}.classifiers-table th,.classifiers-table td{padding:13px 18px;text-align:left;border-bottom:1px solid #55595b}.classifiers-table th{color:#a8cded;font-size:14px;background:rgba(168,205,237,.06)}.classifiers-table td:last-child{font-variant-numeric:tabular-nums}.classifiers-table .classifier-missing td{color:#b9d5e6;font-style:italic}.classifiers-table tbody tr:last-child td{border-bottom:0}.classifiers-table tbody tr:hover{background:rgba(255,255,255,.035)}

okb-source/ownership-eye.svg

@@ -0,0 +1,17 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="32" height="26" viewBox="0 0 32 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1000004626" filter="url(#filter0_d_0_6)">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M16.0006 19.3537C12.0241 19.3537 7.97444 17.025 5.78167 12.0269C7.96077 7.042 12.0702 4.64634 16.0543 4.64634C20.0216 4.64634 24.0408 7.03084 26.2193 12.0344C24.0467 17.0101 19.9896 19.3537 16.0006 19.3537ZM16.0543 3C11.1796 3 6.32941 6.05721 4 12.0284C6.35172 18.0196 11.138 21 16.0006 21C20.8753 21 25.6715 18.0041 28 12.0349C25.6697 6.0607 20.9272 3 16.0543 3ZM18.8536 12C18.8536 13.576 17.576 14.8536 16 14.8536C14.4239 14.8536 13.1463 13.576 13.1463 12C13.1463 10.424 14.4239 9.14633 16 9.14633C17.576 9.14633 18.8536 10.424 18.8536 12ZM20.5 12C20.5 14.4853 18.4852 16.5 16 16.5C13.5147 16.5 11.5 14.4853 11.5 12C11.5 9.5147 13.5147 7.49998 16 7.49998C18.4852 7.49998 20.5 9.5147 20.5 12Z" fill="#A8CDED"/>
+</g>
+<defs>
+<filter id="filter0_d_0_6" x="0" y="0" width="32" height="26" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_0_6"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_0_6" result="shape"/>
+</filter>
+</defs>
+</svg>

okb-source/ownership-graphic.css

@@ -0,0 +1,44 @@
+:root { background: #2b2b2b; }
+
+.ownership-graphic-body {
+  margin: 0;
+  min-width: 320px;
+  background: #2b2b2b;
+}
+
+.ownership-graphic {
+  position: relative;
+  width: 100%;
+  min-width: 960px;
+  line-height: 0;
+}
+
+.ownership-graphic__image {
+  display: block;
+  width: 100%;
+  height: auto;
+  user-select: none;
+}
+
+.ownership-graphic__link {
+  position: absolute;
+  z-index: 1;
+  display: block;
+  border-radius: 12px;
+  outline: none;
+}
+
+.ownership-graphic__link:hover,
+.ownership-graphic__link:focus-visible {
+  box-shadow: 0 0 0 3px rgba(168, 205, 237, .9), 0 0 28px rgba(143, 237, 145, .45);
+}
+
+.ownership-graphic__link--roscosmos { left: 44.4531%; top: 10.5093%; width: 16.6146%; height: 10.7407%; }
+.ownership-graphic__link--orkk { left: 44.2708%; top: 36.1574%; width: 16.6146%; height: 10.7407%; }
+.ownership-graphic__link--rks { left: 28.3333%; top: 55%; width: 18.5417%; height: 10.8333%; }
+.ownership-graphic__link--okb { left: 48.4375%; top: 73.5185%; width: 16.6667%; height: 10.8333%; }
+.ownership-graphic__link--russia { left: 67.1354%; top: 55.6481%; width: 5.2083%; height: 7.963%; }
+
+@media (max-width: 960px) {
+  .ownership-graphic { min-width: 720px; }
+}

okb-source/site.js

@@ -0,0 +1,42 @@
+(() => {
+  const modal = document.querySelector('#detailModal');
+  const viewport = document.querySelector('#modalViewport');
+  const renderCharts = root => root.querySelectorAll('[data-chart]').forEach(host => {
+    if (host.dataset.rendered) return;
+    host.dataset.rendered = 'true';
+    const data = JSON.parse(host.dataset.chart);
+    const render = (title, series, color, unit = 'тыс. руб.') => {
+      const width = 520, height = 252, pad = {l: 42, r: 18, t: 18, b: 36};
+      const values = series.map(item => item.value), maximum = Math.max(...values) * 1.15, minimum = Math.min(0, ...values) * .85;
+      const x = index => pad.l + index * ((width - pad.l - pad.r) / Math.max(1, series.length - 1));
+      const y = value => pad.t + (maximum - value) / (maximum - minimum || 1) * (height - pad.t - pad.b);
+      const points = series.map((item, index) => `${x(index)},${y(item.value)}`).join(' ');
+      const area = `${pad.l},${height - pad.b} ${points} ${x(series.length - 1)},${height - pad.b}`;
+      const grid = [0, .25, .5, .75, 1].map(t => { const yy = pad.t + t * (height - pad.t - pad.b); return `<line class="grid-line" x1="${pad.l}" y1="${yy}" x2="${width-pad.r}" y2="${yy}"/>`; }).join('');
+      const labels = series.map((item, index) => `<text class="chart-label" x="${x(index)}" y="${height-12}" text-anchor="middle">${item.year}</text>`).join('');
+      const dots = series.map((item, index) => `<circle class="chart-point" cx="${x(index)}" cy="${y(item.value)}" r="5"><title>${item.year}: ${item.value.toLocaleString('ru-RU')} ${unit}</title></circle>`).join('');
+      return `<article class="line-chart" style="--chart:${color}"><h3>${title}</h3><svg viewBox="0 0 ${width} ${height}" role="img" aria-label="${title}">${grid}<polygon class="chart-area" points="${area}"/><polyline class="chart-line" points="${points}"/>${dots}${labels}</svg></article>`;
+    };
+    if (data.employees) {
+      host.innerHTML = render('Динамика численности', data.employees, '#BE7AB9', data.unit || 'чел.');
+      return;
+    }
+    const unit = data.unit || 'тыс. руб.';
+    host.innerHTML = render(`Выручка, ${unit}`, data.income, '#73b8e5', unit) + render(`Чистая прибыль, ${unit}`, data.profit, '#55bd79', unit);
+  });
+  document.addEventListener('click', event => {
+    const trigger = event.target.closest('.detail-button');
+    if (trigger) {
+      const template = document.querySelector(`#${CSS.escape(trigger.dataset.modalSource)}`);
+      if (!template) return;
+      viewport.replaceChildren(template.content.cloneNode(true));
+      renderCharts(viewport);
+      modal.showModal();
+      return;
+    }
+    if (event.target.closest('.modal-close')) modal.close();
+    if (event.target === modal) modal.close();
+  });
+  document.addEventListener('keydown', event => { if (event.key === 'Escape' && modal?.open) modal.close(); });
+  renderCharts(document);
+})();