logscale_demo/logscale_demo.rs
1//! Logarithmic Scale Demo - demonstrates log scale support in gpui-px
2//!
3//! Run with: cargo run --example logscale_demo --features gpui
4
5use gpui::*;
6use gpui_px::*;
7use gpui_ui_kit::{MiniApp, MiniAppConfig};
8
9fn main() {
10 MiniApp::run(
11 MiniAppConfig::new("gpui-px Logarithmic Scale Demo").size(900.0, 1200.0),
12 |cx| cx.new(|_| LogScaleDemo),
13 );
14}
15
16struct LogScaleDemo;
17
18impl Render for LogScaleDemo {
19 fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
20 // Generate logarithmic data for scatter plot
21 let log_x: Vec<f64> = vec![10.0, 100.0, 1000.0, 10000.0];
22 let log_y: Vec<f64> = vec![1.0, 10.0, 100.0, 1000.0];
23
24 // Generate frequency response data (20 Hz to 20 kHz)
25 let freq_x: Vec<f64> = (0..60)
26 .map(|i| 20.0 * 10_f64.powf(i as f64 / 20.0))
27 .collect();
28 let freq_y: Vec<f64> = freq_x
29 .iter()
30 .map(|&f| {
31 // Simulated frequency response with rolloffs
32 if f < 100.0 {
33 -12.0 * (100.0 - f) / 80.0 // Low frequency rolloff
34 } else if f > 5000.0 {
35 -6.0 * (f - 5000.0) / 15000.0 // High frequency rolloff
36 } else {
37 0.0 // Flat response
38 }
39 })
40 .collect();
41
42 // Bar chart data
43 let bar_categories: Vec<&str> = vec!["10", "100", "1K", "10K", "100K"];
44 let bar_values: Vec<f64> = vec![10.0, 100.0, 1000.0, 10000.0, 100000.0];
45
46 div()
47 .size_full()
48 .flex()
49 .flex_col()
50 .bg(rgb(0xffffff))
51 .p_8()
52 .gap_8()
53 // Header
54 .child(
55 div()
56 .flex()
57 .flex_col()
58 .gap_2()
59 .child(
60 div()
61 .text_3xl()
62 .font_weight(FontWeight::BOLD)
63 .child("Logarithmic Scale Support"),
64 )
65 .child(
66 div()
67 .text_base()
68 .text_color(rgb(0x666666))
69 .child("Demonstrating logarithmic axis scaling for scatter, line, and bar charts"),
70 ),
71 )
72 // Example 1: Scatter Plot with Log-Log Scale
73 .child(
74 div()
75 .flex()
76 .flex_col()
77 .gap_3()
78 .child(
79 div()
80 .text_xl()
81 .font_weight(FontWeight::SEMIBOLD)
82 .child("1. Scatter Plot - Log-Log Scale"),
83 )
84 .child(
85 div()
86 .text_sm()
87 .text_color(rgb(0x666666))
88 .child("Both X and Y axes use logarithmic scaling. Ideal for power-law relationships."),
89 )
90 .child(
91 scatter(&log_x, &log_y)
92 .title("Log-Log Scatter Plot")
93 .color(0xe377c2)
94 .x_scale(ScaleType::Log)
95 .y_scale(ScaleType::Log)
96 .point_radius(10.0)
97 .opacity(0.8)
98 .size(800.0, 400.0)
99 .build()
100 .unwrap(),
101 )
102 .child(
103 div()
104 .p_3()
105 .bg(rgb(0xf5f5f5))
106 .rounded_md()
107 .font_family("Monaco")
108 .text_sm()
109 .text_color(rgb(0x333333))
110 .child("scatter(&x, &y)\n .x_scale(ScaleType::Log)\n .y_scale(ScaleType::Log)\n .build()?"),
111 ),
112 )
113 // Example 2: Line Chart with Log X-Axis
114 .child(
115 div()
116 .flex()
117 .flex_col()
118 .gap_3()
119 .child(
120 div()
121 .text_xl()
122 .font_weight(FontWeight::SEMIBOLD)
123 .child("2. Line Chart - Logarithmic X-Axis"),
124 )
125 .child(
126 div()
127 .text_sm()
128 .text_color(rgb(0x666666))
129 .child("Frequency response plot with logarithmic frequency axis (20 Hz to 20 kHz) - standard in audio engineering."),
130 )
131 .child(
132 line(&freq_x, &freq_y)
133 .title("Frequency Response")
134 .color(0x1f77b4)
135 .x_scale(ScaleType::Log)
136 .stroke_width(2.5)
137 .show_points(false)
138 .size(800.0, 400.0)
139 .build()
140 .unwrap(),
141 )
142 .child(
143 div()
144 .p_3()
145 .bg(rgb(0xf5f5f5))
146 .rounded_md()
147 .font_family("Monaco")
148 .text_sm()
149 .text_color(rgb(0x333333))
150 .child("line(&frequency, &magnitude_db)\n .x_scale(ScaleType::Log)\n .build()?"),
151 ),
152 )
153 // Example 3: Bar Chart with Log Y-Axis
154 .child(
155 div()
156 .flex()
157 .flex_col()
158 .gap_3()
159 .child(
160 div()
161 .text_xl()
162 .font_weight(FontWeight::SEMIBOLD)
163 .child("3. Bar Chart - Logarithmic Y-Axis"),
164 )
165 .child(
166 div()
167 .text_sm()
168 .text_color(rgb(0x666666))
169 .child("Bar chart with logarithmic value axis - useful for comparing values across multiple orders of magnitude."),
170 )
171 .child(
172 bar(&bar_categories, &bar_values)
173 .title("Logarithmic Values")
174 .color(0x2ca02c)
175 .y_scale(ScaleType::Log)
176 .opacity(0.85)
177 .size(800.0, 400.0)
178 .build()
179 .unwrap(),
180 )
181 .child(
182 div()
183 .p_3()
184 .bg(rgb(0xf5f5f5))
185 .rounded_md()
186 .font_family("Monaco")
187 .text_sm()
188 .text_color(rgb(0x333333))
189 .child("bar(&categories, &values)\n .y_scale(ScaleType::Log)\n .build()?"),
190 ),
191 )
192 // Notes section
193 .child(
194 div()
195 .mt_4()
196 .p_4()
197 .bg(rgb(0xfef3c7))
198 .border_1()
199 .border_color(rgb(0xfbbf24))
200 .rounded_md()
201 .flex()
202 .flex_col()
203 .gap_2()
204 .child(
205 div()
206 .text_base()
207 .font_weight(FontWeight::SEMIBOLD)
208 .text_color(rgb(0x92400e))
209 .child("Important Notes about Logarithmic Scales:"),
210 )
211 .child(
212 div()
213 .text_sm()
214 .text_color(rgb(0x78350f))
215 .child("• All values must be positive - zero and negative values will cause validation errors"),
216 )
217 .child(
218 div()
219 .text_sm()
220 .text_color(rgb(0x78350f))
221 .child("• Each decade (10x increase) gets equal spacing on the axis"),
222 )
223 .child(
224 div()
225 .text_sm()
226 .text_color(rgb(0x78350f))
227 .child("• Logarithmic scales are ideal for data spanning multiple orders of magnitude"),
228 )
229 .child(
230 div()
231 .text_sm()
232 .text_color(rgb(0x78350f))
233 .child("• Common use cases: frequency domain (audio/RF), power measurements, exponential growth"),
234 ),
235 )
236 // Supported chart types
237 .child(
238 div()
239 .mt_4()
240 .flex()
241 .flex_col()
242 .gap_2()
243 .child(
244 div()
245 .text_base()
246 .font_weight(FontWeight::SEMIBOLD)
247 .child("Supported Chart Types:"),
248 )
249 .child(
250 div()
251 .ml_4()
252 .flex()
253 .flex_col()
254 .gap_1()
255 .child(
256 div()
257 .text_sm()
258 .child("• Scatter: Both X and Y axes can be logarithmic"),
259 )
260 .child(div().text_sm().child("• Line: Both X and Y axes can be logarithmic"))
261 .child(div().text_sm().child("• Bar: Only Y-axis (values) can be logarithmic"))
262 .child(div().text_sm().child("• Heatmap: Both X and Y axes support logarithmic scaling"))
263 .child(div().text_sm().child("• Contour/Isoline: Both X and Y axes support logarithmic scaling")),
264 ),
265 )
266 }
267}