Andrew Charlwood
552 lines
21 KiB
HTML
552 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>HCD Analysis — NHS Classic</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;600;700;900&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--nhs-blue: #005EB8;
|
|
--nhs-dark-blue: #003087;
|
|
--nhs-light-blue: #41B6E6;
|
|
--nhs-white: #FFFFFF;
|
|
--nhs-pale-grey: #E8EDEE;
|
|
--nhs-mid-grey: #768692;
|
|
--nhs-dark-grey: #425563;
|
|
--nhs-green: #009639;
|
|
--nhs-yellow: #FFB81C;
|
|
--nhs-red: #DA291C;
|
|
--sidebar-w: 240px;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: 'Source Sans 3', Arial, sans-serif;
|
|
background: #F0F4F5;
|
|
color: var(--nhs-dark-grey);
|
|
line-height: 1.5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* ── Top Header ── */
|
|
.top-header {
|
|
position: fixed; top: 0; left: 0; right: 0; z-index: 200;
|
|
height: 56px;
|
|
background: var(--nhs-dark-blue);
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 0 24px 0 0;
|
|
}
|
|
.top-header__brand {
|
|
display: flex; align-items: center; gap: 16px;
|
|
height: 100%; padding: 0 24px;
|
|
background: var(--nhs-blue);
|
|
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%);
|
|
padding-right: 40px;
|
|
}
|
|
.top-header__logo {
|
|
width: 40px; height: 40px;
|
|
background: var(--nhs-white);
|
|
border-radius: 4px;
|
|
display: grid; place-items: center;
|
|
font-weight: 900; font-size: 11px; color: var(--nhs-blue);
|
|
letter-spacing: 0.5px;
|
|
line-height: 1;
|
|
}
|
|
.top-header__title {
|
|
color: var(--nhs-white);
|
|
font-size: 20px; font-weight: 700;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.top-header__breadcrumb {
|
|
color: rgba(255,255,255,0.7);
|
|
font-size: 14px; font-weight: 400;
|
|
}
|
|
.top-header__breadcrumb strong { color: var(--nhs-white); font-weight: 600; }
|
|
.top-header__right {
|
|
display: flex; align-items: center; gap: 20px; color: rgba(255,255,255,0.8); font-size: 14px;
|
|
}
|
|
.top-header__right .status-dot {
|
|
width: 8px; height: 8px; border-radius: 50%; background: var(--nhs-green);
|
|
display: inline-block; margin-right: 4px;
|
|
}
|
|
|
|
/* ── Sidebar ── */
|
|
.sidebar {
|
|
position: fixed; top: 56px; left: 0; bottom: 0;
|
|
width: var(--sidebar-w);
|
|
background: var(--nhs-white);
|
|
border-right: 1px solid var(--nhs-pale-grey);
|
|
overflow-y: auto; z-index: 100;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
.sidebar__section { padding: 16px 0; }
|
|
.sidebar__section + .sidebar__section { border-top: 1px solid var(--nhs-pale-grey); }
|
|
.sidebar__label {
|
|
padding: 0 20px 8px;
|
|
font-size: 11px; font-weight: 700;
|
|
text-transform: uppercase; letter-spacing: 0.08em;
|
|
color: var(--nhs-mid-grey);
|
|
}
|
|
.sidebar__item {
|
|
display: flex; align-items: center; gap: 12px;
|
|
padding: 10px 20px;
|
|
font-size: 15px; font-weight: 400;
|
|
color: var(--nhs-dark-grey);
|
|
text-decoration: none;
|
|
border-left: 4px solid transparent;
|
|
transition: background 0.15s, border-color 0.15s;
|
|
cursor: pointer;
|
|
}
|
|
.sidebar__item:hover { background: #F0F4F5; }
|
|
.sidebar__item--active {
|
|
background: #E8F0FE;
|
|
border-left-color: var(--nhs-blue);
|
|
color: var(--nhs-blue);
|
|
font-weight: 600;
|
|
}
|
|
.sidebar__item svg { width: 18px; height: 18px; flex-shrink: 0; }
|
|
.sidebar__footer {
|
|
margin-top: auto; padding: 16px 20px;
|
|
border-top: 1px solid var(--nhs-pale-grey);
|
|
font-size: 12px; color: var(--nhs-mid-grey);
|
|
}
|
|
|
|
/* ── Main Content ── */
|
|
.main {
|
|
margin-left: var(--sidebar-w);
|
|
margin-top: 56px;
|
|
padding: 24px;
|
|
min-height: calc(100vh - 56px);
|
|
display: flex; flex-direction: column; gap: 20px;
|
|
}
|
|
|
|
/* ── KPI Row ── */
|
|
.kpi-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
}
|
|
.kpi-card {
|
|
background: var(--nhs-white);
|
|
border: 1px solid var(--nhs-pale-grey);
|
|
border-top: 4px solid var(--nhs-blue);
|
|
padding: 20px;
|
|
display: flex; flex-direction: column; gap: 2px;
|
|
}
|
|
.kpi-card--green { border-top-color: var(--nhs-green); }
|
|
.kpi-card__label {
|
|
font-size: 12px; font-weight: 600;
|
|
text-transform: uppercase; letter-spacing: 0.05em;
|
|
color: var(--nhs-mid-grey);
|
|
}
|
|
.kpi-card__value {
|
|
font-size: 32px; font-weight: 300;
|
|
color: var(--nhs-dark-blue);
|
|
line-height: 1.1;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.kpi-card__sub {
|
|
font-size: 13px; color: var(--nhs-mid-grey); margin-top: 4px;
|
|
}
|
|
|
|
/* ── Filter Bar ── */
|
|
.filter-bar {
|
|
background: var(--nhs-white);
|
|
border: 1px solid var(--nhs-pale-grey);
|
|
padding: 12px 20px;
|
|
display: flex; align-items: center; gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.filter-bar__group {
|
|
display: flex; align-items: center; gap: 8px;
|
|
}
|
|
.filter-bar__divider {
|
|
width: 1px; height: 28px; background: var(--nhs-pale-grey);
|
|
}
|
|
.filter-bar__label {
|
|
font-size: 12px; font-weight: 600;
|
|
text-transform: uppercase; letter-spacing: 0.04em;
|
|
color: var(--nhs-mid-grey);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Toggle pills */
|
|
.toggle-pills {
|
|
display: flex; border: 1px solid var(--nhs-pale-grey); overflow: hidden;
|
|
}
|
|
.toggle-pill {
|
|
padding: 6px 16px;
|
|
font-size: 14px; font-weight: 600;
|
|
color: var(--nhs-dark-grey);
|
|
background: var(--nhs-white);
|
|
cursor: pointer;
|
|
border: none; outline: none;
|
|
transition: background 0.15s, color 0.15s;
|
|
}
|
|
.toggle-pill + .toggle-pill { border-left: 1px solid var(--nhs-pale-grey); }
|
|
.toggle-pill--active {
|
|
background: var(--nhs-blue);
|
|
color: var(--nhs-white);
|
|
}
|
|
.toggle-pill:hover:not(.toggle-pill--active) { background: #F0F4F5; }
|
|
.toggle-pill:focus-visible { box-shadow: 0 0 0 3px var(--nhs-yellow); z-index: 1; }
|
|
|
|
/* Selects */
|
|
.filter-select {
|
|
height: 34px; padding: 0 12px;
|
|
border: 1px solid var(--nhs-pale-grey);
|
|
font-family: inherit; font-size: 14px;
|
|
color: var(--nhs-dark-grey);
|
|
background: var(--nhs-white);
|
|
cursor: pointer;
|
|
min-width: 140px;
|
|
}
|
|
.filter-select:focus { outline: 3px solid var(--nhs-yellow); outline-offset: 0; }
|
|
|
|
/* ── Chart Area ── */
|
|
.chart-card {
|
|
background: var(--nhs-white);
|
|
border: 1px solid var(--nhs-pale-grey);
|
|
flex: 1;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
.chart-card__header {
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid var(--nhs-pale-grey);
|
|
display: flex; justify-content: space-between; align-items: baseline;
|
|
}
|
|
.chart-card__title {
|
|
font-size: 18px; font-weight: 700;
|
|
color: var(--nhs-dark-blue);
|
|
}
|
|
.chart-card__subtitle {
|
|
font-size: 13px; color: var(--nhs-mid-grey);
|
|
}
|
|
.chart-card__tabs {
|
|
display: flex; gap: 0;
|
|
border-bottom: 1px solid var(--nhs-pale-grey);
|
|
}
|
|
.chart-tab {
|
|
padding: 10px 24px;
|
|
font-size: 14px; font-weight: 600;
|
|
color: var(--nhs-mid-grey);
|
|
border: none; background: none; cursor: pointer;
|
|
border-bottom: 3px solid transparent;
|
|
margin-bottom: -1px;
|
|
transition: color 0.15s, border-color 0.15s;
|
|
}
|
|
.chart-tab--active {
|
|
color: var(--nhs-blue);
|
|
border-bottom-color: var(--nhs-blue);
|
|
}
|
|
.chart-tab:hover:not(.chart-tab--active) { color: var(--nhs-dark-grey); }
|
|
.chart-tab:focus-visible { box-shadow: inset 0 0 0 3px var(--nhs-yellow); }
|
|
|
|
/* ── Icicle Chart Mock ── */
|
|
.icicle {
|
|
flex: 1; padding: 20px;
|
|
display: flex; flex-direction: column; gap: 3px;
|
|
min-height: 420px;
|
|
}
|
|
.icicle__row {
|
|
display: flex; gap: 3px;
|
|
flex: 1;
|
|
}
|
|
.icicle__cell {
|
|
display: flex; align-items: center; justify-content: center;
|
|
padding: 8px 12px;
|
|
color: var(--nhs-white);
|
|
font-size: 13px; font-weight: 600;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: filter 0.2s, transform 0.15s;
|
|
cursor: pointer;
|
|
line-height: 1.2;
|
|
}
|
|
.icicle__cell:hover { filter: brightness(1.15); transform: scaleY(1.03); z-index: 2; }
|
|
.icicle__cell span { position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
|
|
.icicle__cell small {
|
|
display: block; font-weight: 400; font-size: 11px; opacity: 0.85;
|
|
}
|
|
|
|
/* Level colors */
|
|
.lvl-0 { background: var(--nhs-dark-blue); }
|
|
.lvl-1a { background: #005EB8; }
|
|
.lvl-1b { background: #0072CE; }
|
|
.lvl-1c { background: #41B6E6; }
|
|
.lvl-1d { background: #768692; }
|
|
.lvl-2a { background: #003D7A; }
|
|
.lvl-2b { background: #004F9F; }
|
|
.lvl-2c { background: #0066B8; }
|
|
.lvl-2d { background: #007CC2; }
|
|
.lvl-2e { background: #2D9CDB; }
|
|
.lvl-2f { background: #5DADE2; }
|
|
.lvl-3a { background: #003060; }
|
|
.lvl-3b { background: #003D78; }
|
|
.lvl-3c { background: #004A90; }
|
|
.lvl-3d { background: #0057A8; }
|
|
.lvl-3e { background: #0064C0; }
|
|
.lvl-3f { background: #2080D0; }
|
|
.lvl-3g { background: #4098D8; }
|
|
.lvl-3h { background: #60B0E0; }
|
|
|
|
/* ── Footer ── */
|
|
.page-footer {
|
|
background: var(--nhs-pale-grey);
|
|
border-top: 1px solid #D0D5D6;
|
|
padding: 16px 20px;
|
|
font-size: 13px; color: var(--nhs-mid-grey);
|
|
text-align: center;
|
|
}
|
|
|
|
/* ── Responsive ── */
|
|
@media (max-width: 1024px) {
|
|
.kpi-row { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
@media (max-width: 768px) {
|
|
.sidebar { display: none; }
|
|
.main { margin-left: 0; }
|
|
.kpi-row { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Top Header -->
|
|
<header class="top-header">
|
|
<div class="top-header__brand">
|
|
<div class="top-header__logo">NHS</div>
|
|
<div>
|
|
<div class="top-header__title">HCD Analysis</div>
|
|
</div>
|
|
</div>
|
|
<div class="top-header__breadcrumb">
|
|
Dashboard › <strong>Pathway Analysis</strong>
|
|
</div>
|
|
<div class="top-header__right">
|
|
<span><span class="status-dot"></span> 656,247 records</span>
|
|
<span>Last updated: 2h ago</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Sidebar -->
|
|
<nav class="sidebar" aria-label="Main navigation">
|
|
<div class="sidebar__section">
|
|
<div class="sidebar__label">Analysis</div>
|
|
<a class="sidebar__item sidebar__item--active" href="#">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
|
Pathway Overview
|
|
</a>
|
|
<a class="sidebar__item" href="#">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
|
|
Drug Selection
|
|
</a>
|
|
<a class="sidebar__item" href="#">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg>
|
|
Trust Selection
|
|
</a>
|
|
<a class="sidebar__item" href="#">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
|
|
Directory Selection
|
|
</a>
|
|
<a class="sidebar__item" href="#">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14,2 14,8 20,8"/></svg>
|
|
Indications
|
|
</a>
|
|
</div>
|
|
<div class="sidebar__section">
|
|
<div class="sidebar__label">Reports</div>
|
|
<a class="sidebar__item" href="#">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
|
Cost Analysis
|
|
</a>
|
|
<a class="sidebar__item" href="#">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
|
Export Data
|
|
</a>
|
|
</div>
|
|
<div class="sidebar__footer">
|
|
NHS Norfolk & Waveney ICB<br>High Cost Drugs Programme
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main">
|
|
<!-- KPIs -->
|
|
<section class="kpi-row" aria-label="Key performance indicators">
|
|
<div class="kpi-card">
|
|
<div class="kpi-card__label">Unique Patients</div>
|
|
<div class="kpi-card__value">37,842</div>
|
|
<div class="kpi-card__sub">across all trusts</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-card__label">Drug Types</div>
|
|
<div class="kpi-card__value">89</div>
|
|
<div class="kpi-card__sub">high-cost drugs tracked</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-card__label">Total Cost</div>
|
|
<div class="kpi-card__value">£145.2M</div>
|
|
<div class="kpi-card__sub">current period spend</div>
|
|
</div>
|
|
<div class="kpi-card kpi-card--green">
|
|
<div class="kpi-card__label">Indication Match</div>
|
|
<div class="kpi-card__value">93%</div>
|
|
<div class="kpi-card__sub">GP diagnosis confirmed</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Filter Bar -->
|
|
<section class="filter-bar" aria-label="Filters">
|
|
<div class="filter-bar__group">
|
|
<span class="filter-bar__label">View</span>
|
|
<div class="toggle-pills" role="radiogroup" aria-label="Chart view type">
|
|
<button class="toggle-pill toggle-pill--active" role="radio" aria-checked="true">By Directory</button>
|
|
<button class="toggle-pill" role="radio" aria-checked="false">By Indication</button>
|
|
</div>
|
|
</div>
|
|
<div class="filter-bar__divider"></div>
|
|
<div class="filter-bar__group">
|
|
<span class="filter-bar__label">Initiated</span>
|
|
<select class="filter-select" aria-label="Treatment initiated period">
|
|
<option selected>All years</option>
|
|
<option>Last 2 years</option>
|
|
<option>Last 1 year</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-bar__group">
|
|
<span class="filter-bar__label">Last seen</span>
|
|
<select class="filter-select" aria-label="Last seen period">
|
|
<option selected>Last 6 months</option>
|
|
<option>Last 12 months</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-bar__divider"></div>
|
|
<div class="filter-bar__group">
|
|
<span class="filter-bar__label">Drugs</span>
|
|
<select class="filter-select" aria-label="Drug filter">
|
|
<option>All 89 drugs</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-bar__group">
|
|
<span class="filter-bar__label">Directorates</span>
|
|
<select class="filter-select" aria-label="Directorate filter">
|
|
<option>All 14 directorates</option>
|
|
</select>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Chart Card -->
|
|
<section class="chart-card" aria-label="Patient pathway chart">
|
|
<div class="chart-card__header">
|
|
<div>
|
|
<div class="chart-card__title">Patient Pathway Visualization</div>
|
|
<div class="chart-card__subtitle">Trust → Directorate → Drug → Patient Pathway</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart-card__tabs" role="tablist">
|
|
<button class="chart-tab chart-tab--active" role="tab" aria-selected="true">Icicle</button>
|
|
<button class="chart-tab" role="tab" aria-selected="false">Sankey</button>
|
|
<button class="chart-tab" role="tab" aria-selected="false">Timeline</button>
|
|
</div>
|
|
|
|
<!-- Icicle Chart -->
|
|
<div class="icicle" role="img" aria-label="Icicle chart showing patient treatment pathways">
|
|
<!-- Level 0: Root -->
|
|
<div class="icicle__row" style="flex: 0.8;">
|
|
<div class="icicle__cell lvl-0" style="flex: 1;">
|
|
<span>NHS Norfolk and Waveney ICB<small>37,842 patients · £145.2M</small></span>
|
|
</div>
|
|
</div>
|
|
<!-- Level 1: Directorates -->
|
|
<div class="icicle__row" style="flex: 1;">
|
|
<div class="icicle__cell lvl-1a" style="flex: 40;">
|
|
<span>Rheumatology<small>15,137 · 40%</small></span>
|
|
</div>
|
|
<div class="icicle__cell lvl-1b" style="flex: 28;">
|
|
<span>Dermatology<small>10,596 · 28%</small></span>
|
|
</div>
|
|
<div class="icicle__cell lvl-1c" style="flex: 18;">
|
|
<span>Gastroenterology<small>6,812 · 18%</small></span>
|
|
</div>
|
|
<div class="icicle__cell lvl-1d" style="flex: 14;">
|
|
<span>Oncology<small>5,297 · 14%</small></span>
|
|
</div>
|
|
</div>
|
|
<!-- Level 2: Drugs -->
|
|
<div class="icicle__row" style="flex: 1;">
|
|
<!-- Under Rheumatology -->
|
|
<div class="icicle__cell lvl-2a" style="flex: 22;"><span>ADALIMUMAB<small>8,325</small></span></div>
|
|
<div class="icicle__cell lvl-2b" style="flex: 12;"><span>ETANERCEPT<small>4,541</small></span></div>
|
|
<div class="icicle__cell lvl-2c" style="flex: 6;"><span>TOCILIZUMAB<small>2,271</small></span></div>
|
|
<!-- Under Dermatology -->
|
|
<div class="icicle__cell lvl-2d" style="flex: 16;"><span>SECUKINUMAB<small>6,057</small></span></div>
|
|
<div class="icicle__cell lvl-2e" style="flex: 12;"><span>DUPILUMAB<small>4,539</small></span></div>
|
|
<!-- Under Gastro -->
|
|
<div class="icicle__cell lvl-2c" style="flex: 10;"><span>INFLIXIMAB<small>3,787</small></span></div>
|
|
<div class="icicle__cell lvl-2a" style="flex: 8;"><span>VEDOLIZUMAB<small>3,025</small></span></div>
|
|
<!-- Under Oncology -->
|
|
<div class="icicle__cell lvl-2f" style="flex: 8;"><span>PEMBROLIZUMAB<small>3,025</small></span></div>
|
|
<div class="icicle__cell lvl-2b" style="flex: 6;"><span>NIVOLUMAB<small>2,272</small></span></div>
|
|
</div>
|
|
<!-- Level 3: Pathways -->
|
|
<div class="icicle__row" style="flex: 1.2;">
|
|
<div class="icicle__cell lvl-3a" style="flex: 14;"><span>ADA→ADA<small>5,310</small></span></div>
|
|
<div class="icicle__cell lvl-3b" style="flex: 8;"><span>ADA→ETA→SEC<small>3,015</small></span></div>
|
|
<div class="icicle__cell lvl-3c" style="flex: 7;"><span>ETA→ETA<small>2,648</small></span></div>
|
|
<div class="icicle__cell lvl-3d" style="flex: 5;"><span>ETA→ADA<small>1,893</small></span></div>
|
|
<div class="icicle__cell lvl-3e" style="flex: 6;"><span>TOC→TOC<small>2,271</small></span></div>
|
|
<div class="icicle__cell lvl-3f" style="flex: 10;"><span>SEC→SEC<small>3,785</small></span></div>
|
|
<div class="icicle__cell lvl-3a" style="flex: 6;"><span>SEC→DUP<small>2,272</small></span></div>
|
|
<div class="icicle__cell lvl-3g" style="flex: 6;"><span>DUP→DUP<small>2,267</small></span></div>
|
|
<div class="icicle__cell lvl-3h" style="flex: 6;"><span>DUP→SEC<small>2,272</small></span></div>
|
|
<div class="icicle__cell lvl-3c" style="flex: 6;"><span>INF→INF<small>2,272</small></span></div>
|
|
<div class="icicle__cell lvl-3b" style="flex: 4;"><span>INF→VED<small>1,515</small></span></div>
|
|
<div class="icicle__cell lvl-3d" style="flex: 5;"><span>VED→VED<small>1,893</small></span></div>
|
|
<div class="icicle__cell lvl-3e" style="flex: 3;"><span>VED→INF<small>1,132</small></span></div>
|
|
<div class="icicle__cell lvl-3f" style="flex: 5;"><span>PEM→PEM<small>1,893</small></span></div>
|
|
<div class="icicle__cell lvl-3g" style="flex: 3;"><span>PEM→NIV<small>1,132</small></span></div>
|
|
<div class="icicle__cell lvl-3h" style="flex: 4;"><span>NIV→NIV<small>1,514</small></span></div>
|
|
<div class="icicle__cell lvl-3a" style="flex: 2;"><span>NIV→PEM<small>758</small></span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="page-footer">
|
|
NHS Norfolk and Waveney ICB — High Cost Drugs Analysis · Data as of Feb 2026
|
|
</footer>
|
|
|
|
<script>
|
|
// Toggle pills interaction
|
|
document.querySelectorAll('.toggle-pills').forEach(group => {
|
|
group.querySelectorAll('.toggle-pill').forEach(pill => {
|
|
pill.addEventListener('click', () => {
|
|
group.querySelectorAll('.toggle-pill').forEach(p => {
|
|
p.classList.remove('toggle-pill--active');
|
|
p.setAttribute('aria-checked', 'false');
|
|
});
|
|
pill.classList.add('toggle-pill--active');
|
|
pill.setAttribute('aria-checked', 'true');
|
|
});
|
|
});
|
|
});
|
|
// Chart tabs interaction
|
|
document.querySelectorAll('.chart-tab').forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
document.querySelectorAll('.chart-tab').forEach(t => {
|
|
t.classList.remove('chart-tab--active');
|
|
t.setAttribute('aria-selected', 'false');
|
|
});
|
|
tab.classList.add('chart-tab--active');
|
|
tab.setAttribute('aria-selected', 'true');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|