Fixed broken "Decisions Over Time" chart that wasn't displaying bars. Root cause: Empty divs with percentage heights collapsed in flex containers. Fixes applied: 1. **Pixel heights instead of percentages** - Calculate absolute pixel heights from h-48 container (192px) - Percentage heights don't work in flex containers with items-end 2. **Non-breaking space inside bars** - Added to prevent empty div collapse - Even with height set, empty divs can collapse in some layouts 3. **Decision count labels** - Display count above each bar for exact numbers - Shows both visual proportion (bar height) and exact value (label) 4. **Minimum 10px height** - Ensures small values are always visible - Prevents bars from disappearing for low counts 5. **Wider bars** - Changed from max-w-16 (64px) to w-3/4 (75% width) - More visible and easier to interact with Timeline modes working: - ✅ 6-Hourly (24h) - 4 bars showing last 24 hours in 6-hour buckets - ✅ Daily (7d) - 7 bars showing last 7 days - ✅ Weekly (4w) - 4 bars showing last 4 weeks All modes show current snapshot updated on refresh. Files changed: - public/js/admin/audit-analytics.js: Timeline rendering logic - public/admin/audit-analytics.html: Updated cache version - public/*.html: Cache version bump for consistency 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
77 lines
3.2 KiB
HTML
77 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Documentation - Tractatus Framework</title>
|
|
<link rel="stylesheet" href="/css/tailwind.css?v=0.1.0.1761346862495">
|
|
<link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.1.0.1761346862495">
|
|
<style>
|
|
/* Prose styling for document content */
|
|
.prose h1 { @apply text-3xl font-bold mt-8 mb-4 text-gray-900; }
|
|
.prose h2 { @apply text-2xl font-bold mt-6 mb-3 text-gray-900; }
|
|
.prose h3 { @apply text-xl font-semibold mt-4 mb-2 text-gray-800; }
|
|
.prose p { @apply my-4 text-gray-700 leading-relaxed; }
|
|
.prose ul { @apply my-4 list-disc list-inside text-gray-700; }
|
|
.prose ol { @apply my-4 list-decimal list-inside text-gray-700; }
|
|
.prose code { @apply bg-gray-100 px-1 py-0.5 rounded text-sm font-mono text-red-600; }
|
|
.prose pre { @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4; }
|
|
.prose pre code { @apply bg-transparent text-gray-100 p-0; }
|
|
.prose a { @apply text-blue-600 hover:text-blue-700 underline; }
|
|
.prose blockquote { @apply border-l-4 border-blue-500 pl-4 italic text-gray-600 my-4; }
|
|
.prose strong { @apply font-semibold text-gray-900; }
|
|
.prose em { @apply italic; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="bg-white border-b border-gray-200 sticky top-0 z-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-16">
|
|
<div class="flex items-center">
|
|
<a href="/" class="text-xl font-bold text-gray-900">Tractatus Framework</a>
|
|
</div>
|
|
<div class="flex items-center space-x-6">
|
|
<a href="/docs.html" class="text-gray-700 hover:text-gray-900">Documentation</a>
|
|
<a href="/" class="text-gray-600 hover:text-gray-900">Home</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<div class="flex">
|
|
<!-- Sidebar -->
|
|
<aside class="w-64 bg-white border-r border-gray-200 min-h-screen p-6">
|
|
<h2 class="text-sm font-semibold text-gray-900 uppercase mb-4">Framework Docs</h2>
|
|
<nav id="doc-navigation" class="space-y-2">
|
|
<!-- Will be populated by JavaScript -->
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Document Viewer -->
|
|
<main class="flex-1 flex">
|
|
<div class="flex-1 p-8">
|
|
<div id="document-viewer" class="prose max-w-none"></div>
|
|
</div>
|
|
|
|
<!-- Table of Contents (Sticky) -->
|
|
<aside class="hidden lg:block w-64 bg-white border-l border-gray-200 p-6 sticky top-16 h-screen overflow-y-auto">
|
|
<div id="table-of-contents">
|
|
<!-- Will be populated by toc.js -->
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="/js/utils/api.js?v=0.1.0.1761346862495"></script>
|
|
<script src="/js/utils/router.js?v=0.1.0.1761346862495"></script>
|
|
<script src="/js/components/document-viewer.js?v=0.1.0.1761346862495"></script>
|
|
<script src="/js/components/code-copy-button.js?v=0.1.0.1761346862495"></script>
|
|
<script src="/js/components/toc.js?v=0.1.0.1761346862495"></script>
|
|
<script src="/js/docs-viewer-app.js?v=0.1.0.1761346862495"></script>
|
|
|
|
</body>
|
|
</html>
|