generated from coulomb/repo-seed
feat: add clean timeline example without swimlanes
Created example-1 directory with minimalist timeline template that uses vertical anchor lines to connect items to a central horizontal timeline bar. This demonstrates an alternative visualization style without the swimlane-based layout. Features: - Clean template-v2.svg with vertical dashed anchor lines - Central horizontal timeline bar at y=190 - Items positioned above/below timeline with circle markers - Minimal styling with clean typography - 12-month timeline configuration - Sample data with milestones, development, and research items - Uses standard ITEM_ID and ITEM_TITLE placeholders Files: - template-v2.svg: Clean SVG template with anchor line design - project.json: Configuration for 12-month timeline - sample.csv: Sample timeline data with 14 items - style.css: Minimal CSS styling - output.svg: Generated timeline (for reference) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
379
example-1/output.svg
Normal file
379
example-1/output.svg
Normal file
@@ -0,0 +1,379 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="background: #ffffff;" width="1880" height="508" viewBox="0 0 1880 508">
|
||||
<defs>
|
||||
<!-- Clean, minimal month markers -->
|
||||
|
||||
|
||||
<!-- Central timeline bar -->
|
||||
|
||||
|
||||
<!-- Item with anchor line -->
|
||||
|
||||
</defs>
|
||||
|
||||
<!-- Clean white background -->
|
||||
<rect width="100%" height="100%" fill="#ffffff"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="40" y="40" font-family="Arial, sans-serif" font-size="24"
|
||||
font-weight="300" fill="#333">Timeline View</text>
|
||||
<text x="40" y="65" font-family="Arial, sans-serif" font-size="13"
|
||||
fill="#999">Clean timeline visualization without swimlanes</text>
|
||||
|
||||
<!-- Timeline label -->
|
||||
<text x="40" y="190" font-family="Arial, sans-serif" font-size="12"
|
||||
font-weight="600" fill="#666" text-anchor="end" dominant-baseline="middle">Timeline</text>
|
||||
|
||||
<!-- Month markers -->
|
||||
<g class="months">
|
||||
<g >
|
||||
<!-- Month separator line -->
|
||||
<line x1="220" y1="180" x2="220" y2="200"
|
||||
stroke="#d0d0d0" stroke-width="1"/>
|
||||
<!-- Month label -->
|
||||
<text x="224" y="220"
|
||||
font-family="Arial, sans-serif" font-size="11"
|
||||
fill="#666" text-anchor="start">Jan. 25</text>
|
||||
</g><g >
|
||||
<!-- Month separator line -->
|
||||
<line x1="340" y1="180" x2="340" y2="200"
|
||||
stroke="#d0d0d0" stroke-width="1"/>
|
||||
<!-- Month label -->
|
||||
<text x="344" y="220"
|
||||
font-family="Arial, sans-serif" font-size="11"
|
||||
fill="#666" text-anchor="start">Feb. 25</text>
|
||||
</g><g >
|
||||
<!-- Month separator line -->
|
||||
<line x1="460" y1="180" x2="460" y2="200"
|
||||
stroke="#d0d0d0" stroke-width="1"/>
|
||||
<!-- Month label -->
|
||||
<text x="464" y="220"
|
||||
font-family="Arial, sans-serif" font-size="11"
|
||||
fill="#666" text-anchor="start">März 25</text>
|
||||
</g><g >
|
||||
<!-- Month separator line -->
|
||||
<line x1="580" y1="180" x2="580" y2="200"
|
||||
stroke="#d0d0d0" stroke-width="1"/>
|
||||
<!-- Month label -->
|
||||
<text x="584" y="220"
|
||||
font-family="Arial, sans-serif" font-size="11"
|
||||
fill="#666" text-anchor="start">Apr. 25</text>
|
||||
</g><g >
|
||||
<!-- Month separator line -->
|
||||
<line x1="700" y1="180" x2="700" y2="200"
|
||||
stroke="#d0d0d0" stroke-width="1"/>
|
||||
<!-- Month label -->
|
||||
<text x="704" y="220"
|
||||
font-family="Arial, sans-serif" font-size="11"
|
||||
fill="#666" text-anchor="start">Mai 25</text>
|
||||
</g><g >
|
||||
<!-- Month separator line -->
|
||||
<line x1="820" y1="180" x2="820" y2="200"
|
||||
stroke="#d0d0d0" stroke-width="1"/>
|
||||
<!-- Month label -->
|
||||
<text x="824" y="220"
|
||||
font-family="Arial, sans-serif" font-size="11"
|
||||
fill="#666" text-anchor="start">Juni 25</text>
|
||||
</g><g >
|
||||
<!-- Month separator line -->
|
||||
<line x1="940" y1="180" x2="940" y2="200"
|
||||
stroke="#d0d0d0" stroke-width="1"/>
|
||||
<!-- Month label -->
|
||||
<text x="944" y="220"
|
||||
font-family="Arial, sans-serif" font-size="11"
|
||||
fill="#666" text-anchor="start">Juli 25</text>
|
||||
</g><g >
|
||||
<!-- Month separator line -->
|
||||
<line x1="1060" y1="180" x2="1060" y2="200"
|
||||
stroke="#d0d0d0" stroke-width="1"/>
|
||||
<!-- Month label -->
|
||||
<text x="1064" y="220"
|
||||
font-family="Arial, sans-serif" font-size="11"
|
||||
fill="#666" text-anchor="start">Aug. 25</text>
|
||||
</g><g >
|
||||
<!-- Month separator line -->
|
||||
<line x1="1180" y1="180" x2="1180" y2="200"
|
||||
stroke="#d0d0d0" stroke-width="1"/>
|
||||
<!-- Month label -->
|
||||
<text x="1184" y="220"
|
||||
font-family="Arial, sans-serif" font-size="11"
|
||||
fill="#666" text-anchor="start">Sept. 25</text>
|
||||
</g><g >
|
||||
<!-- Month separator line -->
|
||||
<line x1="1300" y1="180" x2="1300" y2="200"
|
||||
stroke="#d0d0d0" stroke-width="1"/>
|
||||
<!-- Month label -->
|
||||
<text x="1304" y="220"
|
||||
font-family="Arial, sans-serif" font-size="11"
|
||||
fill="#666" text-anchor="start">Okt. 25</text>
|
||||
</g><g >
|
||||
<!-- Month separator line -->
|
||||
<line x1="1420" y1="180" x2="1420" y2="200"
|
||||
stroke="#d0d0d0" stroke-width="1"/>
|
||||
<!-- Month label -->
|
||||
<text x="1424" y="220"
|
||||
font-family="Arial, sans-serif" font-size="11"
|
||||
fill="#666" text-anchor="start">Nov. 25</text>
|
||||
</g><g >
|
||||
<!-- Month separator line -->
|
||||
<line x1="1540" y1="180" x2="1540" y2="200"
|
||||
stroke="#d0d0d0" stroke-width="1"/>
|
||||
<!-- Month label -->
|
||||
<text x="1544" y="220"
|
||||
font-family="Arial, sans-serif" font-size="11"
|
||||
fill="#666" text-anchor="start">Dez. 25</text>
|
||||
</g><g >
|
||||
<!-- Month separator line -->
|
||||
<line x1="1660" y1="180" x2="1660" y2="200"
|
||||
stroke="#d0d0d0" stroke-width="1"/>
|
||||
<!-- Month label -->
|
||||
<text x="1664" y="220"
|
||||
font-family="Arial, sans-serif" font-size="11"
|
||||
fill="#666" text-anchor="start">Jan. 26</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Timeline bar and items -->
|
||||
<g class="timeline-content">
|
||||
<g >
|
||||
<!-- Main timeline horizontal line -->
|
||||
<line x1="40" y1="190" x2="1780" y2="190"
|
||||
stroke="#333" stroke-width="3" stroke-linecap="round"/>
|
||||
</g><g >
|
||||
<!-- Vertical anchor line from timeline to item -->
|
||||
<line x1="280" y1="190" x2="280" y2="150"
|
||||
stroke="#999" stroke-width="1" stroke-dasharray="3,3"/>
|
||||
|
||||
<!-- Circle marker at item position -->
|
||||
<circle cx="280" cy="150" r="4"
|
||||
fill="#4a90e2" stroke="#fff" stroke-width="2"/>
|
||||
|
||||
<!-- Item text -->
|
||||
<text x="280" y="150"
|
||||
font-family="Arial, sans-serif" font-size="12"
|
||||
fill="#333" text-anchor="middle" dy="-10">
|
||||
<tspan font-weight="600" fill="#4a90e2">D1</tspan>
|
||||
<tspan dx="4">Research Phase</tspan>
|
||||
</text>
|
||||
</g><g >
|
||||
<!-- Vertical anchor line from timeline to item -->
|
||||
<line x1="520" y1="190" x2="520" y2="168"
|
||||
stroke="#999" stroke-width="1" stroke-dasharray="3,3"/>
|
||||
|
||||
<!-- Circle marker at item position -->
|
||||
<circle cx="520" cy="168" r="4"
|
||||
fill="#4a90e2" stroke="#fff" stroke-width="2"/>
|
||||
|
||||
<!-- Item text -->
|
||||
<text x="520" y="168"
|
||||
font-family="Arial, sans-serif" font-size="12"
|
||||
fill="#333" text-anchor="middle" dy="-10">
|
||||
<tspan font-weight="600" fill="#4a90e2">D2</tspan>
|
||||
<tspan dx="4">Prototype Development</tspan>
|
||||
</text>
|
||||
</g><g >
|
||||
<!-- Vertical anchor line from timeline to item -->
|
||||
<line x1="760" y1="190" x2="760" y2="186"
|
||||
stroke="#999" stroke-width="1" stroke-dasharray="3,3"/>
|
||||
|
||||
<!-- Circle marker at item position -->
|
||||
<circle cx="760" cy="186" r="4"
|
||||
fill="#4a90e2" stroke="#fff" stroke-width="2"/>
|
||||
|
||||
<!-- Item text -->
|
||||
<text x="760" y="186"
|
||||
font-family="Arial, sans-serif" font-size="12"
|
||||
fill="#333" text-anchor="middle" dy="-10">
|
||||
<tspan font-weight="600" fill="#4a90e2">D3</tspan>
|
||||
<tspan dx="4">Core Features</tspan>
|
||||
</text>
|
||||
</g><g >
|
||||
<!-- Vertical anchor line from timeline to item -->
|
||||
<line x1="1000" y1="190" x2="1000" y2="204"
|
||||
stroke="#999" stroke-width="1" stroke-dasharray="3,3"/>
|
||||
|
||||
<!-- Circle marker at item position -->
|
||||
<circle cx="1000" cy="204" r="4"
|
||||
fill="#4a90e2" stroke="#fff" stroke-width="2"/>
|
||||
|
||||
<!-- Item text -->
|
||||
<text x="1000" y="204"
|
||||
font-family="Arial, sans-serif" font-size="12"
|
||||
fill="#333" text-anchor="middle" dy="-10">
|
||||
<tspan font-weight="600" fill="#4a90e2">D4</tspan>
|
||||
<tspan dx="4">Integration Testing</tspan>
|
||||
</text>
|
||||
</g><g >
|
||||
<!-- Vertical anchor line from timeline to item -->
|
||||
<line x1="1120" y1="190" x2="1120" y2="222"
|
||||
stroke="#999" stroke-width="1" stroke-dasharray="3,3"/>
|
||||
|
||||
<!-- Circle marker at item position -->
|
||||
<circle cx="1120" cy="222" r="4"
|
||||
fill="#4a90e2" stroke="#fff" stroke-width="2"/>
|
||||
|
||||
<!-- Item text -->
|
||||
<text x="1120" y="222"
|
||||
font-family="Arial, sans-serif" font-size="12"
|
||||
fill="#333" text-anchor="middle" dy="-10">
|
||||
<tspan font-weight="600" fill="#4a90e2">D5</tspan>
|
||||
<tspan dx="4">Performance Optimization</tspan>
|
||||
</text>
|
||||
</g><g >
|
||||
<!-- Main timeline horizontal line -->
|
||||
<line x1="40" y1="190" x2="1780" y2="190"
|
||||
stroke="#333" stroke-width="3" stroke-linecap="round"/>
|
||||
</g><g >
|
||||
<!-- Vertical anchor line from timeline to item -->
|
||||
<line x1="280" y1="190" x2="280" y2="246"
|
||||
stroke="#999" stroke-width="1" stroke-dasharray="3,3"/>
|
||||
|
||||
<!-- Circle marker at item position -->
|
||||
<circle cx="280" cy="246" r="4"
|
||||
fill="#4a90e2" stroke="#fff" stroke-width="2"/>
|
||||
|
||||
<!-- Item text -->
|
||||
<text x="280" y="246"
|
||||
font-family="Arial, sans-serif" font-size="12"
|
||||
fill="#333" text-anchor="middle" dy="-10">
|
||||
<tspan font-weight="600" fill="#4a90e2">M1</tspan>
|
||||
<tspan dx="4">Project Kickoff</tspan>
|
||||
</text>
|
||||
</g><g >
|
||||
<!-- Vertical anchor line from timeline to item -->
|
||||
<line x1="400" y1="190" x2="400" y2="264"
|
||||
stroke="#999" stroke-width="1" stroke-dasharray="3,3"/>
|
||||
|
||||
<!-- Circle marker at item position -->
|
||||
<circle cx="400" cy="264" r="4"
|
||||
fill="#4a90e2" stroke="#fff" stroke-width="2"/>
|
||||
|
||||
<!-- Item text -->
|
||||
<text x="400" y="264"
|
||||
font-family="Arial, sans-serif" font-size="12"
|
||||
fill="#333" text-anchor="middle" dy="-10">
|
||||
<tspan font-weight="600" fill="#4a90e2">M2</tspan>
|
||||
<tspan dx="4">Requirements Complete</tspan>
|
||||
</text>
|
||||
</g><g >
|
||||
<!-- Vertical anchor line from timeline to item -->
|
||||
<line x1="640" y1="190" x2="640" y2="282"
|
||||
stroke="#999" stroke-width="1" stroke-dasharray="3,3"/>
|
||||
|
||||
<!-- Circle marker at item position -->
|
||||
<circle cx="640" cy="282" r="4"
|
||||
fill="#4a90e2" stroke="#fff" stroke-width="2"/>
|
||||
|
||||
<!-- Item text -->
|
||||
<text x="640" y="282"
|
||||
font-family="Arial, sans-serif" font-size="12"
|
||||
fill="#333" text-anchor="middle" dy="-10">
|
||||
<tspan font-weight="600" fill="#4a90e2">M3</tspan>
|
||||
<tspan dx="4">Design Review</tspan>
|
||||
</text>
|
||||
</g><g >
|
||||
<!-- Vertical anchor line from timeline to item -->
|
||||
<line x1="880" y1="190" x2="880" y2="300"
|
||||
stroke="#999" stroke-width="1" stroke-dasharray="3,3"/>
|
||||
|
||||
<!-- Circle marker at item position -->
|
||||
<circle cx="880" cy="300" r="4"
|
||||
fill="#4a90e2" stroke="#fff" stroke-width="2"/>
|
||||
|
||||
<!-- Item text -->
|
||||
<text x="880" y="300"
|
||||
font-family="Arial, sans-serif" font-size="12"
|
||||
fill="#333" text-anchor="middle" dy="-10">
|
||||
<tspan font-weight="600" fill="#4a90e2">M4</tspan>
|
||||
<tspan dx="4">Beta Release</tspan>
|
||||
</text>
|
||||
</g><g >
|
||||
<!-- Vertical anchor line from timeline to item -->
|
||||
<line x1="1240" y1="190" x2="1240" y2="318"
|
||||
stroke="#999" stroke-width="1" stroke-dasharray="3,3"/>
|
||||
|
||||
<!-- Circle marker at item position -->
|
||||
<circle cx="1240" cy="318" r="4"
|
||||
fill="#4a90e2" stroke="#fff" stroke-width="2"/>
|
||||
|
||||
<!-- Item text -->
|
||||
<text x="1240" y="318"
|
||||
font-family="Arial, sans-serif" font-size="12"
|
||||
fill="#333" text-anchor="middle" dy="-10">
|
||||
<tspan font-weight="600" fill="#4a90e2">M5</tspan>
|
||||
<tspan dx="4">Launch</tspan>
|
||||
</text>
|
||||
</g><g >
|
||||
<!-- Main timeline horizontal line -->
|
||||
<line x1="40" y1="190" x2="1780" y2="190"
|
||||
stroke="#333" stroke-width="3" stroke-linecap="round"/>
|
||||
</g><g >
|
||||
<!-- Vertical anchor line from timeline to item -->
|
||||
<line x1="400" y1="190" x2="400" y2="342"
|
||||
stroke="#999" stroke-width="1" stroke-dasharray="3,3"/>
|
||||
|
||||
<!-- Circle marker at item position -->
|
||||
<circle cx="400" cy="342" r="4"
|
||||
fill="#4a90e2" stroke="#fff" stroke-width="2"/>
|
||||
|
||||
<!-- Item text -->
|
||||
<text x="400" y="342"
|
||||
font-family="Arial, sans-serif" font-size="12"
|
||||
fill="#333" text-anchor="middle" dy="-10">
|
||||
<tspan font-weight="600" fill="#4a90e2">R1</tspan>
|
||||
<tspan dx="4">User Feedback Round 1</tspan>
|
||||
</text>
|
||||
</g><g >
|
||||
<!-- Vertical anchor line from timeline to item -->
|
||||
<line x1="640" y1="190" x2="640" y2="360"
|
||||
stroke="#999" stroke-width="1" stroke-dasharray="3,3"/>
|
||||
|
||||
<!-- Circle marker at item position -->
|
||||
<circle cx="640" cy="360" r="4"
|
||||
fill="#4a90e2" stroke="#fff" stroke-width="2"/>
|
||||
|
||||
<!-- Item text -->
|
||||
<text x="640" y="360"
|
||||
font-family="Arial, sans-serif" font-size="12"
|
||||
fill="#333" text-anchor="middle" dy="-10">
|
||||
<tspan font-weight="600" fill="#4a90e2">R2</tspan>
|
||||
<tspan dx="4">Market Analysis</tspan>
|
||||
</text>
|
||||
</g><g >
|
||||
<!-- Vertical anchor line from timeline to item -->
|
||||
<line x1="880" y1="190" x2="880" y2="378"
|
||||
stroke="#999" stroke-width="1" stroke-dasharray="3,3"/>
|
||||
|
||||
<!-- Circle marker at item position -->
|
||||
<circle cx="880" cy="378" r="4"
|
||||
fill="#4a90e2" stroke="#fff" stroke-width="2"/>
|
||||
|
||||
<!-- Item text -->
|
||||
<text x="880" y="378"
|
||||
font-family="Arial, sans-serif" font-size="12"
|
||||
fill="#333" text-anchor="middle" dy="-10">
|
||||
<tspan font-weight="600" fill="#4a90e2">R3</tspan>
|
||||
<tspan dx="4">User Feedback Round 2</tspan>
|
||||
</text>
|
||||
</g><g >
|
||||
<!-- Vertical anchor line from timeline to item -->
|
||||
<line x1="1120" y1="190" x2="1120" y2="396"
|
||||
stroke="#999" stroke-width="1" stroke-dasharray="3,3"/>
|
||||
|
||||
<!-- Circle marker at item position -->
|
||||
<circle cx="1120" cy="396" r="4"
|
||||
fill="#4a90e2" stroke="#fff" stroke-width="2"/>
|
||||
|
||||
<!-- Item text -->
|
||||
<text x="1120" y="396"
|
||||
font-family="Arial, sans-serif" font-size="12"
|
||||
fill="#333" text-anchor="middle" dy="-10">
|
||||
<tspan font-weight="600" fill="#4a90e2">R4</tspan>
|
||||
<tspan dx="4">Final User Testing</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Subtle border -->
|
||||
<rect x="2" y="2" width="calc(100% - 4)" height="calc(100% - 4)"
|
||||
fill="none" stroke="#e0e0e0" stroke-width="1" rx="4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
16
example-1/project.json
Normal file
16
example-1/project.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"name": "Clean Timeline Example",
|
||||
"description": "Minimalist timeline visualization without swimlanes, using vertical anchor lines to connect items to a central timeline bar",
|
||||
"dataSource": "sample.csv",
|
||||
"stylesheet": "style.css",
|
||||
"svgTemplate": "template-v2.svg",
|
||||
"settings": {
|
||||
"timelineMonths": 12
|
||||
},
|
||||
"fieldMapping": {
|
||||
"id": "ID",
|
||||
"title": "Title",
|
||||
"lane": "Category",
|
||||
"due": ["Due Date"]
|
||||
}
|
||||
}
|
||||
15
example-1/sample.csv
Normal file
15
example-1/sample.csv
Normal file
@@ -0,0 +1,15 @@
|
||||
ID,Title,Category,Due Date
|
||||
M1,Project Kickoff,Milestones,2025-01-15
|
||||
M2,Requirements Complete,Milestones,2025-02-28
|
||||
M3,Design Review,Milestones,2025-04-15
|
||||
M4,Beta Release,Milestones,2025-06-30
|
||||
M5,Launch,Milestones,2025-09-01
|
||||
D1,Research Phase,Development,2025-01-20
|
||||
D2,Prototype Development,Development,2025-03-10
|
||||
D3,Core Features,Development,2025-05-15
|
||||
D4,Integration Testing,Development,2025-07-20
|
||||
D5,Performance Optimization,Development,2025-08-25
|
||||
R1,User Feedback Round 1,Research,2025-02-15
|
||||
R2,Market Analysis,Research,2025-04-01
|
||||
R3,User Feedback Round 2,Research,2025-06-15
|
||||
R4,Final User Testing,Research,2025-08-15
|
||||
|
73
example-1/style.css
Normal file
73
example-1/style.css
Normal file
@@ -0,0 +1,73 @@
|
||||
/* Clean Timeline Example - Minimal Styling */
|
||||
|
||||
body {
|
||||
font-family: 'Arial', 'Helvetica', sans-serif;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#svgContainer {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
margin: 20px auto;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* SVG styling enhancements */
|
||||
svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Timeline elements */
|
||||
.months text {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-size: 11px;
|
||||
fill: #666;
|
||||
}
|
||||
|
||||
.timeline-content line {
|
||||
stroke: #333;
|
||||
}
|
||||
|
||||
.timeline-content circle {
|
||||
cursor: pointer;
|
||||
transition: r 0.2s ease;
|
||||
}
|
||||
|
||||
.timeline-content circle:hover {
|
||||
r: 6;
|
||||
}
|
||||
|
||||
.timeline-content text {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-size: 12px;
|
||||
fill: #333;
|
||||
}
|
||||
|
||||
.item-id {
|
||||
font-weight: 600;
|
||||
fill: #4a90e2;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
fill: #333;
|
||||
}
|
||||
|
||||
/* Responsive container */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#svgContainer {
|
||||
padding: 10px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
}
|
||||
67
example-1/template-v2.svg
Normal file
67
example-1/template-v2.svg
Normal file
@@ -0,0 +1,67 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="background: #ffffff;">
|
||||
<defs>
|
||||
<!-- Clean, minimal month markers -->
|
||||
<g id="month-template" style="display: none;">
|
||||
<!-- Month separator line -->
|
||||
<line x1="{{MONTH_X}}" y1="180" x2="{{MONTH_X}}" y2="200"
|
||||
stroke="#d0d0d0" stroke-width="1"/>
|
||||
<!-- Month label -->
|
||||
<text x="{{MONTH_TEXT_X}}" y="220"
|
||||
font-family="Arial, sans-serif" font-size="11"
|
||||
fill="#666" text-anchor="start">{{MONTH_LABEL}}</text>
|
||||
</g>
|
||||
|
||||
<!-- Central timeline bar -->
|
||||
<g id="lane-template" style="display: none;">
|
||||
<!-- Main timeline horizontal line -->
|
||||
<line x1="{{LANE_X}}" y1="190" x2="{{LANE_WIDTH}}" y2="190"
|
||||
stroke="#333" stroke-width="3" stroke-linecap="round"/>
|
||||
</g>
|
||||
|
||||
<!-- Item with anchor line -->
|
||||
<g id="item-template" style="display: none;">
|
||||
<!-- Vertical anchor line from timeline to item -->
|
||||
<line x1="{{ITEM_X}}" y1="190" x2="{{ITEM_X}}" y2="{{ITEM_Y}}"
|
||||
stroke="#999" stroke-width="1" stroke-dasharray="3,3"/>
|
||||
|
||||
<!-- Circle marker at item position -->
|
||||
<circle cx="{{ITEM_X}}" cy="{{ITEM_Y}}" r="4"
|
||||
fill="#4a90e2" stroke="#fff" stroke-width="2"/>
|
||||
|
||||
<!-- Item text -->
|
||||
<text x="{{ITEM_X}}" y="{{ITEM_Y}}"
|
||||
font-family="Arial, sans-serif" font-size="12"
|
||||
fill="#333" text-anchor="middle" dy="-10">
|
||||
<tspan font-weight="600" fill="#4a90e2">{{ITEM_ID}}</tspan>
|
||||
<tspan dx="4">{{ITEM_TITLE}}</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</defs>
|
||||
|
||||
<!-- Clean white background -->
|
||||
<rect width="100%" height="100%" fill="#ffffff"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="40" y="40" font-family="Arial, sans-serif" font-size="24"
|
||||
font-weight="300" fill="#333">Timeline View</text>
|
||||
<text x="40" y="65" font-family="Arial, sans-serif" font-size="13"
|
||||
fill="#999">Clean timeline visualization without swimlanes</text>
|
||||
|
||||
<!-- Timeline label -->
|
||||
<text x="40" y="190" font-family="Arial, sans-serif" font-size="12"
|
||||
font-weight="600" fill="#666" text-anchor="end" dominant-baseline="middle">Timeline</text>
|
||||
|
||||
<!-- Month markers -->
|
||||
<g class="months">
|
||||
{{MONTHS}}
|
||||
</g>
|
||||
|
||||
<!-- Timeline bar and items -->
|
||||
<g class="timeline-content">
|
||||
{{LANES}}
|
||||
</g>
|
||||
|
||||
<!-- Subtle border -->
|
||||
<rect x="2" y="2" width="calc(100% - 4)" height="calc(100% - 4)"
|
||||
fill="none" stroke="#e0e0e0" stroke-width="1" rx="4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
Reference in New Issue
Block a user