Skip to content

Commit a350327

Browse files
ivictborivictbor
committed
docs: agent landing card draws its bar chart in the new design system chart style, light and dark AdminForth/2005
1 parent 9602593 commit a350327

1 file changed

Lines changed: 29 additions & 42 deletions

File tree

‎documentation/static/landing-previews/agent.html‎

Lines changed: 29 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,14 @@
1313
.tool-ok { width: 16px; height: 16px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--success-soft); color: var(--success); }
1414
.tool-ok .i { width: 12px; height: 12px; }
1515
.chart { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
16+
/* the chart as the agent draws it with its Vega-Lite theme: tokens, slot 1 of the palette, 4px rounded bar tops */
1617
.vt { fill: var(--text); font-size: 13px; font-weight: 600; }
17-
.vl { fill: var(--text-2); }
18-
.va { fill: var(--text); font-size: 11px; font-weight: 600; }
19-
.vg { stroke: var(--grid); }
20-
.vd { stroke: var(--faint); }
21-
.vb { fill: #4C78A8; }
18+
.vs { fill: var(--muted); font-size: 12px; }
19+
.vl { fill: var(--muted); font-size: 11px; }
20+
.va { fill: var(--muted); font-size: 11px; font-weight: 500; }
21+
.vg { stroke: var(--border); fill: none; }
22+
.vd { stroke: var(--border-strong); fill: none; }
23+
.vb { fill: var(--c1); }
2224
.mic { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; gap: 2px; border-radius: 50%; color: var(--muted); }
2325
.mic span { width: 3px; border-radius: 2px; background: currentColor; }
2426
</style>
@@ -80,44 +82,29 @@
8082
<p style="margin-bottom: 8px">Here is the price distribution of 101 apartments:</p>
8183
<div class="chart">
8284
<div style="display: flex; justify-content: flex-end; padding: 4px; border-bottom: 1px solid var(--border); background: var(--bg)"><span class="t-xs t-muted" style="height: 24px; display: flex; align-items: center; padding: 0 8px; font-weight: 500">Copy</span></div>
83-
<div style="padding: 12px">
84-
<svg width="424" height="206" viewBox="0 0 424 206" style="display: block; font-size: 10px">
85-
<text x="229.0" y="13" text-anchor="middle" class="vt">Apartment prices</text>
86-
<line x1="40" x2="418" y1="166.0" y2="166.0" class="vg"/>
87-
<text x="35" y="169.5" text-anchor="end" class="vl">0</text>
88-
<line x1="40" x2="418" y1="131.0" y2="131.0" class="vg"/>
89-
<text x="35" y="134.5" text-anchor="end" class="vl">4</text>
90-
<line x1="40" x2="418" y1="96.0" y2="96.0" class="vg"/>
91-
<text x="35" y="99.5" text-anchor="end" class="vl">8</text>
92-
<line x1="40" x2="418" y1="61.0" y2="61.0" class="vg"/>
93-
<text x="35" y="64.5" text-anchor="end" class="vl">12</text>
94-
<line x1="40" x2="418" y1="26.0" y2="26.0" class="vg"/>
95-
<text x="35" y="29.5" text-anchor="end" class="vl">16</text>
96-
<rect x="43.8" y="26.0" width="30.2" height="140.0" class="vb"/>
97-
<text x="58.9" y="179" text-anchor="middle" class="vl">$1k</text>
98-
<rect x="81.6" y="87.2" width="30.2" height="78.8" class="vb"/>
99-
<text x="96.7" y="179" text-anchor="middle" class="vl">$2k</text>
100-
<rect x="119.4" y="131.0" width="30.2" height="35.0" class="vb"/>
101-
<text x="134.5" y="179" text-anchor="middle" class="vl">$3k</text>
102-
<rect x="157.2" y="69.8" width="30.2" height="96.2" class="vb"/>
103-
<text x="172.3" y="179" text-anchor="middle" class="vl">$4k</text>
104-
<rect x="195.0" y="43.5" width="30.2" height="122.5" class="vb"/>
105-
<text x="210.1" y="179" text-anchor="middle" class="vl">$5k</text>
106-
<rect x="232.8" y="113.5" width="30.2" height="52.5" class="vb"/>
107-
<text x="247.9" y="179" text-anchor="middle" class="vl">$6k</text>
108-
<rect x="270.6" y="87.2" width="30.2" height="78.8" class="vb"/>
109-
<text x="285.7" y="179" text-anchor="middle" class="vl">$7k</text>
110-
<rect x="308.4" y="61.0" width="30.2" height="105.0" class="vb"/>
111-
<text x="323.5" y="179" text-anchor="middle" class="vl">$8k</text>
112-
<rect x="346.2" y="78.5" width="30.2" height="87.5" class="vb"/>
113-
<text x="361.3" y="179" text-anchor="middle" class="vl">$9k</text>
114-
<rect x="384.0" y="78.5" width="30.2" height="87.5" class="vb"/>
115-
<text x="399.1" y="179" text-anchor="middle" class="vl">$10k</text>
116-
<line x1="40" x2="418" y1="166" y2="166" class="vd"/>
117-
<text x="229.0" y="202" text-anchor="middle" class="va">Price, USD</text>
118-
<text transform="translate(10 96.0) rotate(-90)" text-anchor="middle" class="va">Apartments</text>
85+
<svg width="446" height="230" viewBox="0 0 446 230" style="display: block">
86+
<text x="12.4" y="22" class="vt">Apartment prices</text>
87+
<text x="12.4" y="36" class="vs">101 apartments in $1k price buckets</text>
88+
<path d="M50.5 62.5H434.5M50.5 102.5H434.5M50.5 142.5H434.5" class="vg"/>
89+
<path d="M55.76 182V58a4 4 0 0 1 4 -4h18.88a4 4 0 0 1 4 4V182ZM94.16 182V114a4 4 0 0 1 4 -4h18.88a4 4 0 0 1 4 4V182ZM132.56 182V154a4 4 0 0 1 4 -4h18.88a4 4 0 0 1 4 4V182ZM170.96 182V98a4 4 0 0 1 4 -4h18.88a4 4 0 0 1 4 4V182ZM209.36 182V74a4 4 0 0 1 4 -4h18.88a4 4 0 0 1 4 4V182ZM247.76 182V138a4 4 0 0 1 4 -4h18.88a4 4 0 0 1 4 4V182ZM286.16 182V114a4 4 0 0 1 4 -4h18.88a4 4 0 0 1 4 4V182ZM324.56 182V90a4 4 0 0 1 4 -4h18.88a4 4 0 0 1 4 4V182ZM362.96 182V106a4 4 0 0 1 4 -4h18.88a4 4 0 0 1 4 4V182ZM401.36 182V106a4 4 0 0 1 4 -4h18.88a4 4 0 0 1 4 4V182Z" class="vb"/>
90+
<path d="M50.5 182.5H434.5" class="vd"/>
91+
<text x="44.5" y="185.5" text-anchor="end" class="vl">0</text>
92+
<text x="44.5" y="145.5" text-anchor="end" class="vl">5</text>
93+
<text x="44.5" y="105.5" text-anchor="end" class="vl">10</text>
94+
<text x="44.5" y="65.5" text-anchor="end" class="vl">15</text>
95+
<text x="69.2" y="197.5" text-anchor="middle" class="vl">$1k</text>
96+
<text x="107.6" y="197.5" text-anchor="middle" class="vl">$2k</text>
97+
<text x="146.0" y="197.5" text-anchor="middle" class="vl">$3k</text>
98+
<text x="184.4" y="197.5" text-anchor="middle" class="vl">$4k</text>
99+
<text x="222.8" y="197.5" text-anchor="middle" class="vl">$5k</text>
100+
<text x="261.2" y="197.5" text-anchor="middle" class="vl">$6k</text>
101+
<text x="299.6" y="197.5" text-anchor="middle" class="vl">$7k</text>
102+
<text x="338.0" y="197.5" text-anchor="middle" class="vl">$8k</text>
103+
<text x="376.4" y="197.5" text-anchor="middle" class="vl">$9k</text>
104+
<text x="414.8" y="197.5" text-anchor="middle" class="vl">$10k</text>
105+
<text x="242.5" y="216.5" text-anchor="middle" class="va">Price, USD</text>
106+
<text transform="translate(21.9 118.5) rotate(-90)" text-anchor="middle" class="va">Apartments</text>
119107
</svg>
120-
</div>
121108
</div>
122109
<p style="margin-top: 8px">Most apartments cost from $1k to $2k or from $4k to $5k.</p>
123110
</div>

0 commit comments

Comments
 (0)