| import { motion } from 'motion/react'; |
|
|
| export default function DenormalizationDiagram() { |
| return ( |
| <motion.div |
| initial={{ opacity: 0, y: 24, scale: 0.97 }} |
| animate={{ opacity: 1, y: 0, scale: 1 }} |
| transition={{ duration: 0.7, ease: [0.25, 0.1, 0.25, 1] as const, delay: 0.2 }} |
| className="mt-10 mb-4" |
| > |
| <div className="text-center mb-6"> |
| <span className="text-lg font-bold uppercase tracking-widest text-indigo-400" style={{ filter: 'drop-shadow(0 0 10px rgba(99,102,241,0.5))' }}> |
| DENORMALIZATION |
| </span> |
| <p className="text-sm text-slate-400 mt-2">Deliberate act of adding redundant data to speed up reads and simplify queries</p> |
| </div> |
| |
| <svg |
| viewBox="0 0 900 580" |
| className="w-full max-w-6xl mx-auto" |
| style={{ filter: 'drop-shadow(0 0 30px rgba(99,102,241,0.1))' }} |
| > |
| <defs> |
| <marker id="denormArrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"> |
| <polygon points="0 0,8 3,0 6" fill="#3b82f6" /> |
| </marker> |
| <linearGradient id="headerGrad" x1="0%" y1="0%" x2="100%" y2="0%"> |
| <stop offset="0%" stopColor="rgba(59,130,246,0.2)" /> |
| <stop offset="100%" stopColor="rgba(59,130,246,0.05)" /> |
| </linearGradient> |
| <linearGradient id="greenBoxGrad" x1="0%" y1="0%" x2="100%" y2="100%"> |
| <stop offset="0%" stopColor="rgba(34,197,94,0.12)" /> |
| <stop offset="100%" stopColor="rgba(34,197,94,0.04)" /> |
| </linearGradient> |
| <linearGradient id="redBoxGrad" x1="0%" y1="0%" x2="100%" y2="100%"> |
| <stop offset="0%" stopColor="rgba(239,68,68,0.12)" /> |
| <stop offset="100%" stopColor="rgba(239,68,68,0.04)" /> |
| </linearGradient> |
| </defs> |
| |
| {/* === HEADER BOX === */} |
| <g transform="translate(20, 10)"> |
| <rect x="0" y="0" width="860" height="55" rx="12" fill="url(#headerGrad)" stroke="rgba(59,130,246,0.4)" strokeWidth="2" /> |
| {/* Database Icon */} |
| <rect x="15" y="10" width="35" height="35" rx="6" fill="rgba(59,130,246,0.2)" stroke="#3b82f6" strokeWidth="2" /> |
| <line x1="15" y1="20" x2="50" y2="20" stroke="#3b82f6" strokeWidth="2" /> |
| <line x1="15" y1="30" x2="50" y2="30" stroke="#3b82f6" strokeWidth="2" /> |
| <line x1="15" y1="40" x2="50" y2="40" stroke="#3b82f6" strokeWidth="2" /> |
| {/* Text */} |
| <text x="65" y="22" fill="#60a5fa" fontSize="9" fontFamily="'Inter',sans-serif">Denormalization is the deliberate act of adding redundant data to a previously normalized schema</text> |
| <text x="65" y="35" fill="#60a5fa" fontSize="9" fontFamily="'Inter',sans-serif">to speed up reads and simplify queries.</text> |
| <text x="65" y="48" fill="#93c5fd" fontSize="8" fontWeight="600" fontFamily="'Inter',sans-serif">It's a targeted performance optimization, not an excuse to skip good modelling.</text> |
| </g> |
| |
| {/* === 1) NORMALIZED (Left) === */} |
| <g transform="translate(20, 80)"> |
| <rect x="0" y="0" width="380" height="320" rx="12" fill="rgba(59,130,246,0.05)" stroke="rgba(59,130,246,0.3)" strokeWidth="1.5" /> |
| |
| {/* Title */} |
| <text x="20" y="25" fill="#3b82f6" fontSize="11" fontWeight="800" fontFamily="'Inter',sans-serif">1) NORMALIZED (SOURCE OF TRUTH)</text> |
| |
| {/* Customers Icon */} |
| <g transform="translate(20, 40)"> |
| <circle cx="10" cy="8" r="5" fill="rgba(59,130,246,0.3)" stroke="#3b82f6" strokeWidth="1.5" /> |
| <ellipse cx="10" cy="20" rx="8" ry="5" fill="none" stroke="#3b82f6" strokeWidth="1.5" /> |
| <circle cx="28" cy="8" r="5" fill="rgba(59,130,246,0.3)" stroke="#3b82f6" strokeWidth="1.5" /> |
| <ellipse cx="28" cy="20" rx="8" ry="5" fill="none" stroke="#3b82f6" strokeWidth="1.5" /> |
| </g> |
| |
| {/* Customers Table */} |
| <text x="60" y="55" fill="#60a5fa" fontSize="9" fontWeight="700" fontFamily="'Inter',sans-serif">customers</text> |
| <rect x="60" y="60" width="300" height="70" rx="4" fill="rgba(15,23,42,0.4)" stroke="rgba(59,130,246,0.3)" strokeWidth="1" /> |
| {/* Header */} |
| <rect x="60" y="60" width="70" height="20" fill="rgba(59,130,246,0.2)" stroke="rgba(59,130,246,0.3)" strokeWidth="1" /> |
| <text x="95" y="73" textAnchor="middle" fill="#93c5fd" fontSize="7" fontFamily="'Inter',sans-serif">customer_id</text> |
| <text x="95" y="80" textAnchor="middle" fill="#3b82f6" fontSize="6" fontFamily="'Inter',sans-serif">(PK)</text> |
| <rect x="130" y="60" width="130" height="20" fill="rgba(59,130,246,0.2)" stroke="rgba(59,130,246,0.3)" strokeWidth="1" /> |
| <text x="195" y="73" textAnchor="middle" fill="#93c5fd" fontSize="7" fontFamily="'Inter',sans-serif">name</text> |
| <text x="195" y="80" textAnchor="middle" fill="#ef4444" fontSize="6" fontFamily="'Inter',sans-serif">(NOT NULL)</text> |
| <rect x="260" y="60" width="100" height="20" fill="rgba(59,130,246,0.2)" stroke="rgba(59,130,246,0.3)" strokeWidth="1" /> |
| <text x="310" y="73" textAnchor="middle" fill="#93c5fd" fontSize="7" fontFamily="'Inter',sans-serif">tier</text> |
| <text x="310" y="80" textAnchor="middle" fill="#ef4444" fontSize="6" fontFamily="'Inter',sans-serif">(PK)</text> |
| {/* Data */} |
| <text x="95" y="98" textAnchor="middle" fill="#e2e8f0" fontSize="8" fontFamily="'Inter',sans-serif">1</text> |
| <text x="195" y="98" textAnchor="middle" fill="#e2e8f0" fontSize="8" fontFamily="'Inter',sans-serif">Alice</text> |
| <text x="310" y="98" textAnchor="middle" fill="#e2e8f0" fontSize="8" fontFamily="'Inter',sans-serif">Gold</text> |
| <text x="95" y="113" textAnchor="middle" fill="#e2e8f0" fontSize="8" fontFamily="'Inter',sans-serif">2</text> |
| <text x="195" y="113" textAnchor="middle" fill="#e2e8f0" fontSize="8" fontFamily="'Inter',sans-serif">Bob</text> |
| <text x="310" y="113" textAnchor="middle" fill="#e2e8f0" fontSize="8" fontFamily="'Inter',sans-serif">Silver</text> |
| <text x="95" y="128" textAnchor="middle" fill="#e2e8f0" fontSize="8" fontFamily="'Inter',sans-serif">3</text> |
| <text x="195" y="128" textAnchor="middle" fill="#e2e8f0" fontSize="8" fontFamily="'Inter',sans-serif">Carol</text> |
| <text x="310" y="128" textAnchor="middle" fill="#e2e8f0" fontSize="8" fontFamily="'Inter',sans-serif">Bronze</text> |
| |
| {/* Orders Icon */} |
| <g transform="translate(20, 145)"> |
| <rect x="0" y="0" width="35" height="25" rx="3" fill="none" stroke="#3b82f6" strokeWidth="1.5" /> |
| <line x1="0" y1="8" x2="35" y2="8" stroke="#3b82f6" strokeWidth="1.5" /> |
| <line x1="0" y1="16" x2="35" y2="16" stroke="#3b82f6" strokeWidth="1.5" /> |
| <circle cx="28" cy="22" r="6" fill="none" stroke="#3b82f6" strokeWidth="1.5" /> |
| <line x1="25" y1="22" x2="31" y2="22" stroke="#3b82f6" strokeWidth="1" /> |
| <line x1="28" y1="19" x2="28" y2="25" stroke="#3b82f6" strokeWidth="1" /> |
| </g> |
| |
| {/* Orders Table */} |
| <text x="60" y="160" fill="#60a5fa" fontSize="9" fontWeight="700" fontFamily="'Inter',sans-serif">orders</text> |
| <rect x="60" y="165" width="300" height="85" rx="4" fill="rgba(15,23,42,0.4)" stroke="rgba(59,130,246,0.3)" strokeWidth="1" /> |
| {/* Header */} |
| <rect x="60" y="165" width="60" height="20" fill="rgba(59,130,246,0.2)" stroke="rgba(59,130,246,0.3)" strokeWidth="1" /> |
| <text x="90" y="178" textAnchor="middle" fill="#93c5fd" fontSize="7" fontFamily="'Inter',sans-serif">order_id</text> |
| <text x="90" y="185" textAnchor="middle" fill="#3b82f6" fontSize="6" fontFamily="'Inter',sans-serif">(PK)</text> |
| <rect x="120" y="165" width="70" height="20" fill="rgba(59,130,246,0.2)" stroke="rgba(59,130,246,0.3)" strokeWidth="1" /> |
| <text x="155" y="178" textAnchor="middle" fill="#93c5fd" fontSize="7" fontFamily="'Inter',sans-serif">customer_id</text> |
| <text x="155" y="185" textAnchor="middle" fill="#3b82f6" fontSize="6" fontFamily="'Inter',sans-serif">(FK)</text> |
| <rect x="190" y="165" width="85" height="20" fill="rgba(59,130,246,0.2)" stroke="rgba(59,130,246,0.3)" strokeWidth="1" /> |
| <text x="232" y="178" textAnchor="middle" fill="#93c5fd" fontSize="7" fontFamily="'Inter',sans-serif">order_total</text> |
| <text x="232" y="185" textAnchor="middle" fill="#64748b" fontSize="6" fontFamily="'Inter',sans-serif">(NUMERIC(12,2))</text> |
| <rect x="275" y="165" width="85" height="20" fill="rgba(59,130,246,0.2)" stroke="rgba(59,130,246,0.3)" strokeWidth="1" /> |
| <text x="317" y="178" textAnchor="middle" fill="#93c5fd" fontSize="7" fontFamily="'Inter',sans-serif">created_at</text> |
| {/* Data */} |
| <text x="90" y="203" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">101</text> |
| <text x="155" y="203" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">1</text> |
| <text x="232" y="203" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">120.00</text> |
| <text x="317" y="203" textAnchor="middle" fill="#e2e8f0" fontSize="6" fontFamily="'Inter',sans-serif">2025-05-01 10:15:00</text> |
| <text x="90" y="218" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">102</text> |
| <text x="155" y="218" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">2</text> |
| <text x="232" y="218" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">85.50</text> |
| <text x="317" y="218" textAnchor="middle" fill="#e2e8f0" fontSize="6" fontFamily="'Inter',sans-serif">2025-05-01 11:20:00</text> |
| <text x="90" y="233" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">103</text> |
| <text x="155" y="233" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">1</text> |
| <text x="232" y="233" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">230.00</text> |
| <text x="317" y="233" textAnchor="middle" fill="#e2e8f0" fontSize="6" fontFamily="'Inter',sans-serif">2025-05-02 09:30:00</text> |
| <text x="90" y="248" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">104</text> |
| <text x="155" y="248" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">3</text> |
| <text x="232" y="248" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">75.00</text> |
| <text x="317" y="248" textAnchor="middle" fill="#e2e8f0" fontSize="6" fontFamily="'Inter',sans-serif">2025-05-02 12:45:00</text> |
| </g> |
| |
| {/* Arrow between sections */} |
| <line x1="410" y1="240" x2="430" y2="240" stroke="#3b82f6" strokeWidth="2" markerEnd="url(#denormArrow)" /> |
| |
| {/* === 2) TYPICAL REPORT (Bottom Left) === */} |
| <g transform="translate(20, 410)"> |
| <rect x="0" y="0" width="380" height="70" rx="12" fill="rgba(34,197,94,0.08)" stroke="rgba(34,197,94,0.3)" strokeWidth="1.5" /> |
| <text x="15" y="20" fill="#4ade80" fontSize="10" fontWeight="800" fontFamily="'Inter',sans-serif">2) TYPICAL REPORT NEEDS A JOIN</text> |
| <text x="15" y="38" fill="#86efac" fontSize="7" fontFamily="'monospace',sans-serif">SELECT c.name, c.tier, SUM(o.order_total) AS revenue</text> |
| <text x="15" y="50" fill="#86efac" fontSize="7" fontFamily="'monospace',sans-serif">FROM orders o</text> |
| <text x="15" y="62" fill="#86efac" fontSize="7" fontFamily="'monospace',sans-serif">JOIN customers c ON c.customer_id = o.customer_id GROUP BY c.name, c.tier;</text> |
| </g> |
| |
| {/* === 3) DENORMALIZED (Right) === */} |
| <g transform="translate(440, 80)"> |
| <rect x="0" y="0" width="440" height="320" rx="12" fill="rgba(34,197,94,0.05)" stroke="rgba(34,197,94,0.3)" strokeWidth="1.5" /> |
| |
| {/* Title */} |
| <text x="15" y="25" fill="#22c55e" fontSize="11" fontWeight="800" fontFamily="'Inter',sans-serif">3) DENORMALIZED (FOR READ PERFORMANCE)</text> |
| |
| {/* Subtitle */} |
| <text x="15" y="42" fill="#4ade80" fontSize="8" fontFamily="'Inter',sans-serif">orders_enriched (with redundant customer data)</text> |
| |
| {/* Enriched Table */} |
| <rect x="15" y="50" width="410" height="125" rx="4" fill="rgba(15,23,42,0.4)" stroke="rgba(34,197,94,0.3)" strokeWidth="1" /> |
| {/* Header */} |
| <rect x="15" y="50" width="50" height="25" fill="rgba(34,197,94,0.2)" stroke="rgba(34,197,94,0.3)" strokeWidth="1" /> |
| <text x="40" y="63" textAnchor="middle" fill="#86efac" fontSize="6" fontFamily="'Inter',sans-serif">order_id</text> |
| <text x="40" y="72" textAnchor="middle" fill="#22c55e" fontSize="5" fontFamily="'Inter',sans-serif">(PK)</text> |
| <rect x="65" y="50" width="60" height="25" fill="rgba(34,197,94,0.2)" stroke="rgba(34,197,94,0.3)" strokeWidth="1" /> |
| <text x="95" y="67" textAnchor="middle" fill="#86efac" fontSize="6" fontFamily="'Inter',sans-serif">customer_id</text> |
| <text x="95" y="74" textAnchor="middle" fill="#3b82f6" fontSize="5" fontFamily="'Inter',sans-serif">(FK)</text> |
| <rect x="125" y="50" width="90" height="25" fill="rgba(245,158,11,0.15)" stroke="#f59e0b" strokeWidth="1" /> |
| <text x="170" y="63" textAnchor="middle" fill="#fbbf24" fontSize="6" fontFamily="'Inter',sans-serif">customer_name</text> |
| <text x="170" y="72" textAnchor="middle" fill="#f59e0b" fontSize="5" fontFamily="'Inter',sans-serif">(DENORMALIZED)</text> |
| <rect x="215" y="50" width="70" height="25" fill="rgba(245,158,11,0.15)" stroke="#f59e0b" strokeWidth="1" /> |
| <text x="250" y="63" textAnchor="middle" fill="#fbbf24" fontSize="6" fontFamily="'Inter',sans-serif">customer_tier</text> |
| <text x="250" y="72" textAnchor="middle" fill="#f59e0b" fontSize="5" fontFamily="'Inter',sans-serif">(DENORMALIZED)</text> |
| <rect x="285" y="50" width="70" height="25" fill="rgba(34,197,94,0.2)" stroke="rgba(34,197,94,0.3)" strokeWidth="1" /> |
| <text x="320" y="63" textAnchor="middle" fill="#86efac" fontSize="6" fontFamily="'Inter',sans-serif">order_total</text> |
| <text x="320" y="72" textAnchor="middle" fill="#64748b" fontSize="5" fontFamily="'Inter',sans-serif">(NUMERIC(12,2))</text> |
| <rect x="355" y="50" width="70" height="25" fill="rgba(34,197,94,0.2)" stroke="rgba(34,197,94,0.3)" strokeWidth="1" /> |
| <text x="390" y="67" textAnchor="middle" fill="#86efac" fontSize="6" fontFamily="'Inter',sans-serif">created_at</text> |
| {/* Data */} |
| <text x="40" y="93" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">101</text> |
| <text x="95" y="93" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">1</text> |
| <text x="170" y="93" textAnchor="middle" fill="#fbbf24" fontSize="7" fontFamily="'Inter',sans-serif">Alice</text> |
| <text x="250" y="93" textAnchor="middle" fill="#fbbf24" fontSize="7" fontFamily="'Inter',sans-serif">Gold</text> |
| <text x="320" y="93" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">120.00</text> |
| <text x="390" y="93" textAnchor="middle" fill="#e2e8f0" fontSize="6" fontFamily="'Inter',sans-serif">2025-05-01 10:15:00</text> |
| <text x="40" y="108" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">102</text> |
| <text x="95" y="108" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">2</text> |
| <text x="170" y="108" textAnchor="middle" fill="#fbbf24" fontSize="7" fontFamily="'Inter',sans-serif">Bob</text> |
| <text x="250" y="108" textAnchor="middle" fill="#fbbf24" fontSize="7" fontFamily="'Inter',sans-serif">Silver</text> |
| <text x="320" y="108" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">85.50</text> |
| <text x="390" y="108" textAnchor="middle" fill="#e2e8f0" fontSize="6" fontFamily="'Inter',sans-serif">2025-05-01 11:20:00</text> |
| <text x="40" y="123" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">103</text> |
| <text x="95" y="123" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">1</text> |
| <text x="170" y="123" textAnchor="middle" fill="#fbbf24" fontSize="7" fontFamily="'Inter',sans-serif">Alice</text> |
| <text x="250" y="123" textAnchor="middle" fill="#fbbf24" fontSize="7" fontFamily="'Inter',sans-serif">Gold</text> |
| <text x="320" y="123" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">230.00</text> |
| <text x="390" y="123" textAnchor="middle" fill="#e2e8f0" fontSize="6" fontFamily="'Inter',sans-serif">2025-05-02 09:30:00</text> |
| <text x="40" y="138" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">104</text> |
| <text x="95" y="138" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">3</text> |
| <text x="170" y="138" textAnchor="middle" fill="#fbbf24" fontSize="7" fontFamily="'Inter',sans-serif">Carol</text> |
| <text x="250" y="138" textAnchor="middle" fill="#fbbf24" fontSize="7" fontFamily="'Inter',sans-serif">Bronze</text> |
| <text x="320" y="138" textAnchor="middle" fill="#e2e8f0" fontSize="7" fontFamily="'Inter',sans-serif">75.00</text> |
| <text x="390" y="138" textAnchor="middle" fill="#e2e8f0" fontSize="6" fontFamily="'Inter',sans-serif">2025-05-02 12:45:00</text> |
| |
| {/* Success message */} |
| <rect x="15" y="185" width="410" height="55" rx="6" fill="rgba(34,197,94,0.1)" stroke="#22c55e" strokeWidth="1" /> |
| <text x="30" y="200" fill="#4ade80" fontSize="9">✓</text> |
| <text x="50" y="202" fill="#4ade80" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Now the same report is simpler and faster (no join needed):</text> |
| <text x="50" y="218" fill="#86efac" fontSize="7" fontFamily="'monospace',sans-serif">SELECT customer_name, customer_tier, SUM(order_total) AS revenue</text> |
| <text x="50" y="230" fill="#86efac" fontSize="7" fontFamily="'monospace',sans-serif">FROM orders_enriched</text> |
| <text x="50" y="242" fill="#86efac" fontSize="7" fontFamily="'monospace',sans-serif">GROUP BY customer_name, customer_tier;</text> |
| |
| {/* SQL Source of Truth */} |
| <text x="15" y="260" fill="#60a5fa" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">SQL: SOURCE OF TRUTH (NORMALIZED)</text> |
| <rect x="15" y="268" width="200" height="45" rx="4" fill="rgba(15,23,42,0.4)" stroke="rgba(59,130,246,0.3)" strokeWidth="1" /> |
| <text x="25" y="280" fill="#60a5fa" fontSize="6" fontFamily="'monospace',sans-serif">-- Source of truth</text> |
| <text x="25" y="290" fill="#93c5fd" fontSize="6" fontFamily="'monospace',sans-serif">CREATE TABLE customers (</text> |
| <text x="35" y="300" fill="#fbbf24" fontSize="6" fontFamily="'monospace',sans-serif">customer_id BIGINT PRIMARY KEY,</text> |
| <text x="35" y="308" fill="#fbbf24" fontSize="6" fontFamily="'monospace',sans-serif">name TEXT NOT NULL,</text> |
| </g> |
| |
| {/* === PROS (Bottom Left) === */} |
| <g transform="translate(20, 490)"> |
| <rect x="0" y="0" width="260" height="80" rx="12" fill="url(#greenBoxGrad)" stroke="rgba(34,197,94,0.4)" strokeWidth="2" /> |
| <rect x="0" y="0" width="260" height="22" rx="12" fill="#22c55e" /> |
| <rect x="0" y="12" width="260" height="68" rx="0" fill="rgba(34,197,94,0.05)" /> |
| <text x="130" y="15" textAnchor="middle" fill="white" fontSize="9" fontWeight="800" fontFamily="'Inter',sans-serif">PROS: WHAT YOU GAIN</text> |
| |
| {/* Rocket Icon */} |
| <path d="M15 35 L20 30 L25 35 L22 35 L22 48 L18 48 L18 35 Z" fill="none" stroke="#4ade80" strokeWidth="1.5" /> |
| <text x="35" y="40" fill="#4ade80" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Faster reads</text> |
| <text x="35" y="52" fill="#86efac" fontSize="7" fontFamily="'Inter',sans-serif">sub-p99 latencies</text> |
| |
| {/* Search Icon */} |
| <circle cx="20" cy="62" r="5" fill="none" stroke="#4ade80" strokeWidth="1.5" /> |
| <line x1="24" y1="66" x2="28" y2="70" stroke="#4ade80" strokeWidth="1.5" strokeLinecap="round" /> |
| <text x="35" y="67" fill="#4ade80" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Simpler queries</text> |
| <text x="35" y="79" fill="#86efac" fontSize="7" fontFamily="'Inter',sans-serif">fewer joins/aggregations</text> |
| </g> |
| |
| {/* === CONS (Bottom Center) === */} |
| <g transform="translate(300, 490)"> |
| <rect x="0" y="0" width="280" height="80" rx="12" fill="url(#redBoxGrad)" stroke="rgba(239,68,68,0.4)" strokeWidth="2" /> |
| <rect x="0" y="0" width="280" height="22" rx="12" fill="#ef4444" /> |
| <rect x="0" y="12" width="280" height="68" rx="0" fill="rgba(239,68,68,0.05)" /> |
| <text x="140" y="15" textAnchor="middle" fill="white" fontSize="9" fontWeight="800" fontFamily="'Inter',sans-serif">CONS: WHAT IT COSTS</text> |
| |
| {/* Edit Icon */} |
| <path d="M15 35 L22 28 L25 31 L18 38 Z" fill="none" stroke="#f87171" strokeWidth="1.5" /> |
| <line x1="12" y1="40" x2="18" y2="38" stroke="#f87171" strokeWidth="1.5" /> |
| <text x="35" y="40" fill="#f87171" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Write amplification</text> |
| <text x="35" y="52" fill="#fca5a5" fontSize="7" fontFamily="'Inter',sans-serif">extra updates/inserts</text> |
| |
| {/* Warning Icon */} |
| <path d="M20 60 L25 70 L15 70 Z" fill="none" stroke="#f87171" strokeWidth="1.5" /> |
| <text x="20" y="68" textAnchor="middle" fill="#f87171" fontSize="8">!</text> |
| <text x="35" y="67" fill="#f87171" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Consistency risk</text> |
| <text x="35" y="79" fill="#fca5a5" fontSize="7" fontFamily="'Inter',sans-serif">stale/drifting data</text> |
| </g> |
| |
| {/* === OPERATIONAL (Bottom Right) === */} |
| <g transform="translate(600, 490)"> |
| <rect x="0" y="0" width="280" height="80" rx="12" fill="rgba(245,158,11,0.08)" stroke="rgba(245,158,11,0.4)" strokeWidth="2" /> |
| |
| {/* Gear Icon */} |
| <circle cx="20" cy="25" r="10" fill="none" stroke="#fbbf24" strokeWidth="1.5" /> |
| <circle cx="20" cy="25" r="4" fill="none" stroke="#fbbf24" strokeWidth="1.5" /> |
| <line x1="20" y1="10" x2="20" y2="14" stroke="#fbbf24" strokeWidth="1.5" /> |
| <line x1="20" y1="36" x2="20" y2="40" stroke="#fbbf24" strokeWidth="1.5" /> |
| <line x1="5" y1="25" x2="9" y2="25" stroke="#fbbf24" strokeWidth="1.5" /> |
| <line x1="31" y1="25" x2="35" y2="25" stroke="#fbbf24" strokeWidth="1.5" /> |
| <text x="40" y="28" fill="#fbbf24" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Operational overhead</text> |
| <text x="40" y="40" fill="#fcd34d" fontSize="7" fontFamily="'Inter',sans-serif">(refreshes, backfills, monitoring)</text> |
| |
| {/* Fan-out Icon */} |
| <path d="M15 58 L20 65 L25 58" fill="none" stroke="#fbbf24" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> |
| <line x1="20" y1="52" x2="20" y2="58" stroke="#fbbf24" strokeWidth="1.5" /> |
| <line x1="12" y1="55" x2="16" y2="58" stroke="#fbbf24" strokeWidth="1.5" /> |
| <line x1="28" y1="55" x2="24" y2="58" stroke="#fbbf24" strokeWidth="1.5" /> |
| <text x="35" y="62" fill="#fbbf24" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">Change fan-out</text> |
| <text x="35" y="74" fill="#fcd34d" fontSize="7" fontFamily="'Inter',sans-serif">schema/logic updates must be mirrored</text> |
| </g> |
| |
| {/* === EXAMPLE Badge === */} |
| <rect x="180" y="75" width="60" height="18" rx="9" fill="#3b82f6" /> |
| <text x="210" y="87" textAnchor="middle" fill="white" fontSize="8" fontWeight="700" fontFamily="'Inter',sans-serif">EXAMPLE</text> |
| </svg> |
| </motion.div> |
| ); |
| } |
|
|
