feat(web): analyze index — five equal analysis cards

apps/web/app/components/ComboTrendChart.test.ts

@@ -0,0 +1,76 @@
+import { describe, expect, it } from 'vitest';
+import type { TrendPoint } from '@sigma/api-contract';
+import { yearAxisTicks } from '../lib/trendAxis';
+
+// Mirrors ComboTrendChart's own x(i) and left% formulas exactly (W/PAD match the component's
+// constants) so this test fails if the component's positioning drifts from x(t.i) again.
+const W = 1000;
+const PAD = 8;
+function xOf(i: number, n: number) {
+  return PAD + (i * (W - 2 * PAD)) / (n - 1);
+}
+function leftPct(i: number, n: number) {
+  return (xOf(i, n) / W) * 100;
+}
+
+describe('ComboTrendChart year-label positioning', () => {
+  it('places each label at its tick x(t.i) position, not evenly spaced, when years are unevenly distributed', () => {
+    // Years clustered at the start (2021, 2022 one point apart) with a long gap before 2026 — a
+    // flow-based `justify-content: space-between` layout would spread these four labels evenly
+    // across the width, landing the last two under the wrong bars.
+    const points: TrendPoint[] = [
+      { period: '2021', valueEur: 1, contracts: 1, partial: false },
+      { period: '2022', valueEur: 1, contracts: 1, partial: false },
+      { period: '2023', valueEur: 1, contracts: 1, partial: false },
+      { period: '2024', valueEur: 1, contracts: 1, partial: false },
+      { period: '2025', valueEur: 1, contracts: 1, partial: false },
+      { period: '2026', valueEur: 1, contracts: 1, partial: true },
+    ];
+    const n = points.length;
+    const ticks = yearAxisTicks(points, 'year');
+
+    const positions = ticks.map((t) => ({ year: t.year, leftPct: leftPct(t.i, n) }));
+
+    expect(positions).toEqual([
+      { year: '2021', leftPct: leftPct(0, n) },
+      { year: '2022', leftPct: leftPct(1, n) },
+      { year: '2023', leftPct: leftPct(2, n) },
+      { year: '2024', leftPct: leftPct(3, n) },
+      { year: '2025', leftPct: leftPct(4, n) },
+      { year: '2026', leftPct: leftPct(5, n) },
+    ]);
+
+    // Evenly-spaced (flow-based) positions would be i / (ticks.length - 1) * 100 — assert the
+    // computed positions do NOT match that for the interior ticks, proving this is tick-driven.
+    const evenlySpaced = ticks.map((_t, idx) => (idx / (ticks.length - 1)) * 100);
+    expect(positions.map((p) => p.leftPct)).not.toEqual(evenlySpaced);
+  });
+
+  it('matches tick x-position exactly for a fixture with a long gap before the last year (month grain)', () => {
+    const points: TrendPoint[] = [
+      { period: '2021-11', valueEur: 1, contracts: 1, partial: false },
+      { period: '2021-12', valueEur: 1, contracts: 1, partial: false },
+      { period: '2022-01', valueEur: 1, contracts: 1, partial: false },
+      { period: '2022-02', valueEur: 1, contracts: 1, partial: false },
+      { period: '2022-03', valueEur: 1, contracts: 1, partial: false },
+      { period: '2022-04', valueEur: 1, contracts: 1, partial: false },
+      { period: '2022-05', valueEur: 1, contracts: 1, partial: false },
+      { period: '2022-06', valueEur: 1, contracts: 1, partial: false },
+      { period: '2022-07', valueEur: 1, contracts: 1, partial: false },
+      { period: '2022-08', valueEur: 1, contracts: 1, partial: false },
+      { period: '2022-09', valueEur: 1, contracts: 1, partial: false },
+      { period: '2022-10', valueEur: 1, contracts: 1, partial: false },
+      { period: '2022-11', valueEur: 1, contracts: 1, partial: false },
+      { period: '2022-12', valueEur: 1, contracts: 1, partial: false },
+      { period: '2023-01', valueEur: 1, contracts: 1, partial: true },
+    ];
+    const n = points.length;
+    const ticks = yearAxisTicks(points, 'month');
+
+    expect(ticks).toEqual([
+      { i: 2, year: '2022' },
+      { i: 14, year: '2023' },
+    ]);
+    expect(ticks.map((t) => leftPct(t.i, n))).toEqual([leftPct(2, n), leftPct(14, n)]);
+  });
+});

apps/web/app/components/ComboTrendChart.tsx

@@ -0,0 +1,146 @@
+import { useState } from 'react';
+import type { TrendGranularity, TrendPoint } from '@sigma/api-contract';
+import { count, money } from '@sigma/shared';
+import { periodLabel, yearAxisTicks } from '../lib/trendAxis';
+
+// Bar + line combo for the contracts overview (/trends): bars carry the contract count, the ink line
+// the € volume. Server-rendered SVG like TrendChart; the only client behavior is the hover tooltip
+// (React state after hydration — SSR renders the chart without it, so no-JS still gets the picture).
+// The accessible data lives in the year cards next to the chart, matching the TrendChart pattern.
+
+const W = 1000;
+const H = 300;
+const TOP = 10;
+const BOT = 272;
+const PAD = 8;
+
+export function ComboTrendChart({
+  points,
+  granularity,
+  cssHeight = 240,
+  interactive = true,
+  ariaLabel = 'Брой договори и € обем във времето',
+}: {
+  points: TrendPoint[];
+  granularity: TrendGranularity;
+  cssHeight?: number;
+  interactive?: boolean;
+  ariaLabel?: string;
+}) {
+  const [hover, setHover] = useState<number | null>(null);
+  if (points.length < 2) return null;
+
+  const n = points.length;
+  const vMax = Math.max(1, ...points.map((p) => p.valueEur)) * 1.12;
+  const cMax = Math.max(1, ...points.map((p) => p.contracts));
+  const x = (i: number) => PAD + (i * (W - 2 * PAD)) / (n - 1);
+  const yV = (v: number) => BOT - (v / vMax) * (BOT - TOP);
+  const yC = (c: number) => BOT - (c / cMax) * (BOT - TOP) * 0.62;
+  const bw = Math.max(2, ((W - 2 * PAD) / n) * 0.66);
+
+  // Final period is partial (still filling): dashed line tail + faded bar, like TrendChart.
+  // `partial` is only ever set on the as_of (final) period (see TrendPoint in api-contract), so a
+  // leading partial can't occur — `> 0` intentionally treats an all-partial single-point series (or
+  // the impossible partialIdx === 0 case) as fully solid, mirroring TrendChart.
+  const partialIdx = points.findIndex((p) => p.partial);
+  const hasPartial = partialIdx > 0;
+  const solidEnd = hasPartial ? partialIdx - 1 : n - 1;
+  const xy = (i: number) => `${x(i).toFixed(1)} ${yV(points[i]!.valueEur).toFixed(1)}`;
+  const line = points
+    .slice(0, solidEnd + 1)
+    .map((_p, i) => `${i ? 'L' : 'M'}${xy(i)}`)
+    .join(' ');
+  const dashed = hasPartial ? `M${xy(solidEnd)} L${xy(partialIdx)}` : '';
+
+  const ticks = yearAxisTicks(points, granularity);
+
+  const hp = hover != null ? points[hover] : null;
+
+  return (
+    <div className="combo-chart" onMouseLeave={() => interactive && setHover(null)}>
+      <svg
+        viewBox={`0 0 ${W} ${H}`}
+        preserveAspectRatio="none"
+        style={{ display: 'block', width: '100%', height: cssHeight }}
+        role="img"
+        aria-label={ariaLabel}
+      >
+        {[0, 1 / 3, 2 / 3, 1].map((f) => (
+          <line
+            key={f}
+            className="combo-grid"
+            x1={0}
+            y1={yV(vMax * f).toFixed(1)}
+            x2={W}
+            y2={yV(vMax * f).toFixed(1)}
+            vectorEffect="non-scaling-stroke"
+          />
+        ))}
+        {points.map((p, i) => (
+          <rect
+            key={p.period}
+            className={`combo-bar${hover === i ? ' is-hover' : ''}${p.partial ? ' is-partial' : ''}`}
+            x={(x(i) - bw / 2).toFixed(1)}
+            y={yC(p.contracts).toFixed(1)}
+            width={bw.toFixed(1)}
+            height={(BOT - yC(p.contracts)).toFixed(1)}
+            onMouseEnter={interactive ? () => setHover(i) : undefined}
+          />
+        ))}
+        <path className="combo-line" d={line} vectorEffect="non-scaling-stroke" />
+        {hasPartial && (
+          <path className="combo-line-partial" d={dashed} vectorEffect="non-scaling-stroke" />
+        )}
+        {hp && hover != null && (
+          <>
+            <line
+              className="combo-cursor"
+              x1={x(hover).toFixed(1)}
+              y1={6}
+              x2={x(hover).toFixed(1)}
+              y2={BOT}
+              vectorEffect="non-scaling-stroke"
+            />
+            <circle
+              className="combo-dot"
+              cx={x(hover).toFixed(1)}
+              cy={yV(hp.valueEur).toFixed(1)}
+              r={4}
+              vectorEffect="non-scaling-stroke"
+            />
+          </>
+        )}
+      </svg>
+      <div className="combo-xlab" aria-hidden="true">
+        {ticks.map((t) => (
+          <span key={t.i} style={{ left: `${((x(t.i) / W) * 100).toFixed(1)}%` }}>
+            {t.year}
+          </span>
+        ))}
+      </div>
+      {hp && hover != null && (
+        <div
+          className="combo-tip"
+          aria-hidden="true"
+          style={{
+            left: `${((x(hover) / W) * 100).toFixed(1)}%`,
+            top: (yV(hp.valueEur) / H) * cssHeight - 4,
+          }}
+        >
+          <div className="combo-tip-label">
+            {periodLabel(hp.period, granularity)}
+            {hp.partial ? ' · частично' : ''}
+          </div>
+          <div className="combo-tip-row">
+            <span>€ обем</span>
+            <strong>{money(hp.valueEur)}</strong>
+          </div>
+          <div className="combo-tip-row">
+            <span>договори</span>
+            <strong>{count(hp.contracts)}</strong>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/app/components/FullscreenButton.tsx

@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/**
+ * Toggle the native Fullscreen API on a container ref. SSR-safe: the listener and the
+ * `document` reads only run in the browser effect. `requestFullscreen` is feature-detected,
+ * so the button no-ops gracefully where the API is unavailable.
+ */
+export function useFullscreen<T extends HTMLElement>() {
+  const ref = useRef<T>(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  useEffect(() => {
+    const onChange = () => setIsFullscreen(document.fullscreenElement === ref.current);
+    document.addEventListener('fullscreenchange', onChange);
+    return () => document.removeEventListener('fullscreenchange', onChange);
+  }, []);
+
+  const toggle = useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (document.fullscreenElement) {
+      document.exitFullscreen?.();
+    } else {
+      el.requestFullscreen?.().catch(() => {});
+    }
+  }, []);
+
+  return { ref, isFullscreen, toggle };
+}
+
+export function FullscreenButton({ active, onToggle }: { active: boolean; onToggle: () => void }) {
+  return (
+    <button
+      type="button"
+      className="fs-btn"
+      onClick={onToggle}
+      aria-pressed={active}
+      aria-label={active ? 'Изход от цял екран' : 'Разгледай графиката на цял екран'}
+      title={active ? 'Изход от цял екран' : 'На цял екран'}
+    >
+      <svg
+        aria-hidden="true"
+        width="13"
+        height="13"
+        viewBox="0 0 16 16"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        {active ? (
+          <>
+            <path d="M6 2v4H2" />
+            <path d="M10 2v4h4" />
+            <path d="M6 14v-4H2" />
+            <path d="M10 14v-4h4" />
+          </>
+        ) : (
+          <>
+            <path d="M2 6V2h4" />
+            <path d="M14 6V2h-4" />
+            <path d="M2 10v4h4" />
+            <path d="M14 10v4h-4" />
+          </>
+        )}
+      </svg>
+      <span>{active ? 'Изход' : 'Цял екран'}</span>
+    </button>
+  );
+}