Skip to content

Commit ec57a15

Browse files
thedanchezthedanchez
committed
docs: update playground examples
1 parent 38b98fd commit ec57a15

File tree

9 files changed

+69
-21
lines changed

9 files changed

+69
-21
lines changed

‎apps/playground/pages/ChildrenPlacement.tsx‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,24 @@ export const ChildrenPlacementPlayground: Component = () => {
6969

7070
return (
7171
<div class="container mx-auto max-w-6xl p-8">
72-
<h1 class="mb-4 text-3xl font-bold">Children Placement</h1>
72+
<div class="mb-4 flex items-center justify-between">
73+
<h1 class="text-3xl font-bold">Children Placement</h1>
74+
<a
75+
href="https://github.com/dsnchz/solid-uplot/blob/main/apps/playground/pages/ChildrenPlacement.tsx"
76+
target="_blank"
77+
rel="noopener noreferrer"
78+
class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900"
79+
>
80+
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
81+
<path
82+
fill-rule="evenodd"
83+
d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
84+
clip-rule="evenodd"
85+
/>
86+
</svg>
87+
View Source on GitHub
88+
</a>
89+
</div>
7390
<p class="mb-8 text-gray-600">
7491
Children can be positioned above or below the chart using the{" "}
7592
<code class="rounded bg-gray-100 px-1 text-xs">childrenPlacement</code> prop. The component

‎apps/playground/pages/DashboardLayout.tsx‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,24 @@ export const DashboardLayoutPage: Component = () => {
3131
<div class="flex h-full flex-col">
3232
{/* Page Header */}
3333
<div class="shrink-0 border-b border-gray-200 bg-white px-6 py-4">
34-
<h1 class="text-xl font-semibold text-gray-900">Dashboard Layout</h1>
34+
<div class="flex items-center justify-between">
35+
<h1 class="text-xl font-semibold text-gray-900">Dashboard Layout</h1>
36+
<a
37+
href="https://github.com/dsnchz/solid-uplot/blob/main/apps/playground/pages/DashboardLayout.tsx"
38+
target="_blank"
39+
rel="noopener noreferrer"
40+
class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900"
41+
>
42+
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
43+
<path
44+
fill-rule="evenodd"
45+
d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
46+
clip-rule="evenodd"
47+
/>
48+
</svg>
49+
View Source on GitHub
50+
</a>
51+
</div>
3552
<p class="mt-1 text-sm text-gray-500">
3653
Demonstrates <code class="rounded bg-gray-100 px-1 text-xs">autoResize</code> in a
3754
realistic page layout. The chart fills all remaining vertical space below the stats row

‎apps/playground/pages/Examples.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export const Examples: Component = () => {
8080
<div class="mb-8 flex items-center justify-between">
8181
<h1 class="text-3xl font-bold">SolidUplot Examples</h1>
8282
<a
83-
href="https://github.com/dsnchz/solid-uplot/blob/main/playground/pages/Examples.tsx"
83+
href="https://github.com/dsnchz/solid-uplot/blob/main/apps/playground/pages/Examples.tsx"
8484
target="_blank"
8585
rel="noopener noreferrer"
8686
class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900"

‎apps/playground/pages/LegendShowcase.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ export const LegendShowcasePage: Component = () => {
146146
<div class="mb-8 flex items-center justify-between">
147147
<h1 class="text-3xl font-bold">Legend Plugin Showcase</h1>
148148
<a
149-
href="https://github.com/dsnchz/solid-uplot/blob/main/playground/pages/LegendShowcase.tsx"
149+
href="https://github.com/dsnchz/solid-uplot/blob/main/apps/playground/pages/LegendShowcase.tsx"
150150
target="_blank"
151151
rel="noopener noreferrer"
152152
class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900"
@@ -176,11 +176,10 @@ export const LegendShowcasePage: Component = () => {
176176
A space-efficient legend that displays series horizontally with minimal visual
177177
footprint. Perfect for dashboards where space is at a premium.
178178
</p>
179-
<div class="rounded-lg border border-gray-200 bg-white p-4">
179+
<div class="rounded-lg border border-gray-200 bg-white p-4" style={{ height: "300px" }}>
180180
<SolidUplot
181181
autoResize
182182
data={sampleData}
183-
height={300}
184183
scales={{ x: { time: false } }}
185184
series={sampleSeries}
186185
plugins={[
@@ -201,11 +200,10 @@ export const LegendShowcasePage: Component = () => {
201200
A more spacious legend with larger indicators and clear labeling. Ideal when you have
202201
sufficient space and want maximum readability.
203202
</p>
204-
<div class="rounded-lg border border-gray-200 bg-white p-4">
203+
<div class="rounded-lg border border-gray-200 bg-white p-4" style={{ height: "300px" }}>
205204
<SolidUplot
206205
autoResize
207206
data={sampleData}
208-
height={300}
209207
scales={{ x: { time: false } }}
210208
series={sampleSeries}
211209
plugins={[
@@ -227,11 +225,10 @@ export const LegendShowcasePage: Component = () => {
227225
subtle visual feedback when tooltips are active without interfering with data
228226
exploration.
229227
</p>
230-
<div class="rounded-lg border border-gray-200 bg-white p-4">
228+
<div class="rounded-lg border border-gray-200 bg-white p-4" style={{ height: "300px" }}>
231229
<SolidUplot
232230
autoResize
233231
data={sampleData}
234-
height={300}
235232
scales={{ x: { time: false } }}
236233
series={sampleSeries}
237234
plugins={[

‎apps/playground/pages/MultiPlot.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export const MultiPlotPage: Component = () => {
7676
<div class="mb-4 flex items-center justify-between">
7777
<h1 class="text-3xl font-bold">Multiple Synchronized Plots</h1>
7878
<a
79-
href="https://github.com/dsnchz/solid-uplot/blob/main/playground/pages/MultiPlot.tsx"
79+
href="https://github.com/dsnchz/solid-uplot/blob/main/apps/playground/pages/MultiPlot.tsx"
8080
target="_blank"
8181
rel="noopener noreferrer"
8282
class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900"

‎apps/playground/pages/Plugins.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ export const PluginsPage: Component = () => {
124124
<div class="mb-8 flex items-center justify-between">
125125
<h1 class="text-3xl font-bold">Plugin System</h1>
126126
<a
127-
href="https://github.com/dsnchz/solid-uplot/blob/main/playground/pages/Plugins.tsx"
127+
href="https://github.com/dsnchz/solid-uplot/blob/main/apps/playground/pages/Plugins.tsx"
128128
target="_blank"
129129
rel="noopener noreferrer"
130130
class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900"
@@ -152,7 +152,7 @@ export const PluginsPage: Component = () => {
152152
chart ecosystem.
153153
</p>
154154

155-
<div class="rounded-lg border border-gray-200 bg-white p-4">
155+
<div class="rounded-lg border border-gray-200 bg-white p-4" style={{ height: "400px" }}>
156156
<SolidUplot
157157
autoResize
158158
data={[
@@ -166,7 +166,6 @@ export const PluginsPage: Component = () => {
166166
[3, 5, 8, 10, 12, 15, 18, 20, 25, 28], // Signups
167167
[7, 10, 14, 18, 16, 20, 24, 28, 32, 36], // Downloads
168168
]}
169-
height={400}
170169
scales={{
171170
x: {
172171
time: false,

‎apps/playground/pages/Resize.tsx‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,24 @@ export const Resize: Component = () => {
3434

3535
return (
3636
<div class="container mx-auto max-w-6xl p-8">
37-
<h1 class="mb-4 text-3xl font-bold">Chart Sizing Patterns</h1>
37+
<div class="mb-4 flex items-center justify-between">
38+
<h1 class="text-3xl font-bold">Chart Sizing Patterns</h1>
39+
<a
40+
href="https://github.com/dsnchz/solid-uplot/blob/main/apps/playground/pages/Resize.tsx"
41+
target="_blank"
42+
rel="noopener noreferrer"
43+
class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900"
44+
>
45+
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
46+
<path
47+
fill-rule="evenodd"
48+
d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
49+
clip-rule="evenodd"
50+
/>
51+
</svg>
52+
View Source on GitHub
53+
</a>
54+
</div>
3855

3956
{/* Summary */}
4057
<div class="mb-8 rounded-lg border border-blue-200 bg-blue-50 p-6">

‎apps/playground/pages/Streaming.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ export const Streaming = () => {
126126
<div class="mb-8 flex items-center justify-between">
127127
<h1 class="text-3xl font-bold">Streaming Charts</h1>
128128
<a
129-
href="https://github.com/dsnchz/solid-uplot/blob/main/playground/pages/Streaming.tsx"
129+
href="https://github.com/dsnchz/solid-uplot/blob/main/apps/playground/pages/Streaming.tsx"
130130
target="_blank"
131131
rel="noopener noreferrer"
132132
class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900"

‎apps/playground/pages/TooltipDialog.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export const TooltipDialogPage: Component = () => {
8686
<p class="mt-2 text-gray-600">Testing tooltip positioning in different contexts</p>
8787
</div>
8888
<a
89-
href="https://github.com/dsnchz/solid-uplot/blob/main/playground/pages/TooltipDialog.tsx"
89+
href="https://github.com/dsnchz/solid-uplot/blob/main/apps/playground/pages/TooltipDialog.tsx"
9090
target="_blank"
9191
rel="noopener noreferrer"
9292
class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900"
@@ -140,11 +140,10 @@ export const TooltipDialogPage: Component = () => {
140140
(default). The tooltip uses absolute positioning with document coordinates. Scroll the
141141
page and hover near edges to test overflow adjustment.
142142
</p>
143-
<div class="rounded-lg border border-gray-200 bg-white p-4">
143+
<div class="rounded-lg border border-gray-200 bg-white p-4" style={{ height: "400px" }}>
144144
<SolidUplot
145145
autoResize
146146
data={chartData}
147-
height={400}
148147
scales={{
149148
x: {
150149
time: false,
@@ -232,11 +231,13 @@ export const TooltipDialogPage: Component = () => {
232231
based on viewport edges, not dialog edges.
233232
</p>
234233
<Show when={dialogOpen()}>
235-
<div class="rounded-lg border border-gray-200 bg-white p-4">
234+
<div
235+
class="rounded-lg border border-gray-200 bg-white p-4"
236+
style={{ height: "400px" }}
237+
>
236238
<SolidUplot
237239
autoResize
238240
data={chartData}
239-
height={400}
240241
scales={{
241242
x: {
242243
time: false,

0 commit comments

Comments
 (0)