69 lines
3.9 KiB
XML
69 lines
3.9 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 1260" role="img" aria-labelledby="title desc">
|
||
<title id="title">Waterfall одного синтетического trace на шкале 240 миллисекунд</title>
|
||
<desc id="desc">Вертикальная диаграмма показывает gateway, catalog, pricing, inventory и adapter. Pricing перекрывается с inventory. Критическая цепочка gateway, catalog, inventory и adapter выделена синим.</desc>
|
||
<style>
|
||
.bg { fill: #071a2b; }
|
||
.panel { fill: #0d2a42; stroke: #35607f; stroke-width: 2; }
|
||
.axis { stroke: #89aac2; stroke-width: 3; }
|
||
.tick { stroke: #486d87; stroke-width: 2; }
|
||
.critical { fill: #31b8ff; }
|
||
.parallel { fill: #f6b756; }
|
||
.text { fill: #eaf6ff; font-family: Inter, Arial, sans-serif; }
|
||
.muted { fill: #b6d0e4; font-family: Inter, Arial, sans-serif; }
|
||
.title { font-size: 32px; font-weight: 700; }
|
||
.subtitle { font-size: 21px; }
|
||
.label { font-size: 26px; font-weight: 700; }
|
||
.meta { font-size: 21px; font-weight: 600; }
|
||
.small { font-size: 20px; }
|
||
</style>
|
||
<rect class="bg" width="720" height="1260" rx="34" />
|
||
<text class="text title" x="48" y="66">Один учебный waterfall</text>
|
||
<text class="muted subtitle" x="48" y="104">Синтетический trace; не production latency</text>
|
||
<rect class="panel" x="42" y="132" width="636" height="72" rx="16" />
|
||
<text class="text meta" x="68" y="178">Root duration: 240 ms · одна logical clock</text>
|
||
|
||
<line class="axis" x1="116" y1="248" x2="630" y2="248" />
|
||
<line class="tick" x1="116" y1="236" x2="116" y2="260" />
|
||
<line class="tick" x1="245" y1="236" x2="245" y2="260" />
|
||
<line class="tick" x1="373" y1="236" x2="373" y2="260" />
|
||
<line class="tick" x1="502" y1="236" x2="502" y2="260" />
|
||
<line class="tick" x1="630" y1="236" x2="630" y2="260" />
|
||
<text class="muted small" x="106" y="224">0</text>
|
||
<text class="muted small" x="228" y="224">60</text>
|
||
<text class="muted small" x="351" y="224">120</text>
|
||
<text class="muted small" x="480" y="224">180</text>
|
||
<text class="muted small" x="600" y="224">240 ms</text>
|
||
|
||
<text class="text label" x="48" y="310">gateway.handle</text>
|
||
<text class="muted meta" x="48" y="340">0–240 ms</text>
|
||
<rect class="critical" x="116" y="362" width="514" height="48" rx="12" />
|
||
<text class="bg meta" x="140" y="394">240 ms · root</text>
|
||
|
||
<line class="axis" x1="137" y1="428" x2="137" y2="466" />
|
||
<text class="text label" x="48" y="492">catalog.lookup</text>
|
||
<text class="muted meta" x="48" y="522">20–220 ms</text>
|
||
<rect class="critical" x="159" y="544" width="429" height="48" rx="12" />
|
||
<text class="bg meta" x="183" y="576">200 ms · child gateway</text>
|
||
|
||
<line class="axis" x1="180" y1="610" x2="180" y2="650" />
|
||
<text class="text label" x="48" y="676">pricing.read</text>
|
||
<text class="muted meta" x="48" y="706">30–70 ms</text>
|
||
<rect class="parallel" x="180" y="728" width="86" height="48" rx="12" />
|
||
<text class="bg meta" x="196" y="760">40</text>
|
||
<text class="muted small" x="284" y="760">параллельная ветвь</text>
|
||
|
||
<text class="text label" x="48" y="838">inventory.fetch</text>
|
||
<text class="muted meta" x="48" y="868">30–200 ms</text>
|
||
<rect class="critical" x="180" y="890" width="364" height="48" rx="12" />
|
||
<text class="bg meta" x="204" y="922">170 ms · позднее завершение</text>
|
||
|
||
<line class="axis" x1="330" y1="956" x2="330" y2="996" />
|
||
<text class="text label" x="48" y="1022">inventory.adapter</text>
|
||
<text class="muted meta" x="48" y="1052">100–170 ms</text>
|
||
<rect class="critical" x="330" y="1074" width="150" height="48" rx="12" />
|
||
<text class="bg meta" x="356" y="1106">70 ms</text>
|
||
|
||
<rect class="panel" x="42" y="1152" width="636" height="68" rx="16" />
|
||
<text class="text meta" x="68" y="1194">Критический путь: gateway → catalog → inventory → adapter</text>
|
||
</svg>
|