From a3a4f1942db08b8f757ed16a413fb90aeaf51599 Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Wed, 11 Jun 2025 21:34:22 +0800 Subject: [PATCH] chart: Update Chart story by use JSON file data. (#947) --- crates/story/src/chart_story.rs | 86 ++- crates/story/src/fixtures/daily-devices.json | 457 ++++++++++++++++ crates/story/src/fixtures/mod.rs | 505 ------------------ .../story/src/fixtures/monthly-devices.json | 32 ++ crates/story/src/lib.rs | 1 - crates/ui/src/chart/area_chart.rs | 6 +- crates/ui/src/plot/mod.rs | 2 +- 7 files changed, 552 insertions(+), 537 deletions(-) create mode 100644 crates/story/src/fixtures/daily-devices.json delete mode 100644 crates/story/src/fixtures/mod.rs create mode 100644 crates/story/src/fixtures/monthly-devices.json diff --git a/crates/story/src/chart_story.rs b/crates/story/src/chart_story.rs index 26d64124..7e305f9a 100644 --- a/crates/story/src/chart_story.rs +++ b/crates/story/src/chart_story.rs @@ -1,6 +1,7 @@ use gpui::{ - div, linear_color_stop, linear_gradient, prelude::FluentBuilder, px, rgb, App, AppContext, - Context, Entity, FocusHandle, Focusable, IntoElement, ParentElement, Render, Styled, Window, + div, linear_color_stop, linear_gradient, prelude::FluentBuilder, px, App, AppContext, Context, + Entity, FocusHandle, Focusable, Hsla, IntoElement, ParentElement, Render, SharedString, Styled, + Window, }; use gpui_component::{ chart::{AreaChart, BarChart, LineChart, PieChart}, @@ -8,16 +9,41 @@ use gpui_component::{ dock::PanelControl, h_flex, v_flex, ActiveTheme, StyledExt, }; +use serde::Deserialize; -use crate::fixtures::{CHART_DATA, CHART_DATA_2}; +#[derive(Clone, Deserialize)] +struct MonthlyDevice { + pub month: SharedString, + pub desktop: f64, + pub color: Hsla, +} + +#[derive(Clone, Deserialize)] +struct DailyDevice { + pub date: SharedString, + pub desktop: f64, + pub mobile: f64, +} pub struct ChartStory { focus_handle: FocusHandle, + daily_devices: Vec, + monthly_devices: Vec, } impl ChartStory { fn new(_: &mut Window, cx: &mut Context) -> Self { + let daily_devices = + serde_json::from_str::>(include_str!("fixtures/daily-devices.json")) + .unwrap(); + let monthly_devices = serde_json::from_str::>(include_str!( + "fixtures/monthly-devices.json" + )) + .unwrap(); + Self { + daily_devices, + monthly_devices, focus_handle: cx.focus_handle(), } } @@ -103,8 +129,8 @@ impl Render for ChartStory { .child( div().h(px(400.)).child(chart_container( "Area Chart - Stacked", - AreaChart::new(CHART_DATA_2) - .x(|d| d.date) + AreaChart::new(self.daily_devices.clone()) + .x(|d| d.date.clone()) .y(|d| d.desktop) .stroke(cx.theme().chart_1) .fill(linear_gradient( @@ -130,31 +156,31 @@ impl Render for ChartStory { .h(px(450.)) .child(chart_container( "Pie Chart", - PieChart::new(CHART_DATA) + PieChart::new(self.monthly_devices.clone()) .value(|d| d.desktop) .outer_radius(100.) - .color(|d| rgb(d.color)), + .color(|d| d.color), true, cx, )) .child(chart_container( "Pie Chart - Donut", - PieChart::new(CHART_DATA) + PieChart::new(self.monthly_devices.clone()) .value(|d| d.desktop) .outer_radius(100.) .inner_radius(60.) - .color(|d| rgb(d.color)), + .color(|d| d.color), true, cx, )) .child(chart_container( "Pie Chart - Pad Angle", - PieChart::new(CHART_DATA) + PieChart::new(self.monthly_devices.clone()) .value(|d| d.desktop) .outer_radius(100.) .inner_radius(60.) .pad_angle(4. / 100.) - .color(|d| rgb(d.color)), + .color(|d| d.color), true, cx, )), @@ -166,23 +192,25 @@ impl Render for ChartStory { .h(px(400.)) .child(chart_container( "Bar Chart", - BarChart::new(CHART_DATA).x(|d| d.month).y(|d| d.desktop), + BarChart::new(self.monthly_devices.clone()) + .x(|d| d.month.clone()) + .y(|d| d.desktop), false, cx, )) .child(chart_container( "Bar Chart - Mixed", - BarChart::new(CHART_DATA) - .x(|d| d.month) + BarChart::new(self.monthly_devices.clone()) + .x(|d| d.month.clone()) .y(|d| d.desktop) - .fill(|d| rgb(d.color)), + .fill(|d| d.color), false, cx, )) .child(chart_container( "Bar Chart - Label", - BarChart::new(CHART_DATA) - .x(|d| d.month) + BarChart::new(self.monthly_devices.clone()) + .x(|d| d.month.clone()) .y(|d| d.desktop) .label(|d| d.desktop.to_string()), false, @@ -196,14 +224,16 @@ impl Render for ChartStory { .h(px(400.)) .child(chart_container( "Line Chart", - LineChart::new(CHART_DATA).x(|d| d.month).y(|d| d.desktop), + LineChart::new(self.monthly_devices.clone()) + .x(|d| d.month.clone()) + .y(|d| d.desktop), false, cx, )) .child(chart_container( "Line Chart - Linear", - LineChart::new(CHART_DATA) - .x(|d| d.month) + LineChart::new(self.monthly_devices.clone()) + .x(|d| d.month.clone()) .y(|d| d.desktop) .linear(), false, @@ -211,8 +241,8 @@ impl Render for ChartStory { )) .child(chart_container( "Line Chart - Dots", - LineChart::new(CHART_DATA) - .x(|d| d.month) + LineChart::new(self.monthly_devices.clone()) + .x(|d| d.month.clone()) .y(|d| d.desktop) .dot(), false, @@ -226,14 +256,16 @@ impl Render for ChartStory { .h(px(400.)) .child(chart_container( "Area Chart", - AreaChart::new(CHART_DATA).x(|d| d.month).y(|d| d.desktop), + AreaChart::new(self.monthly_devices.clone()) + .x(|d| d.month.clone()) + .y(|d| d.desktop), false, cx, )) .child(chart_container( "Area Chart - Linear", - AreaChart::new(CHART_DATA) - .x(|d| d.month) + AreaChart::new(self.monthly_devices.clone()) + .x(|d| d.month.clone()) .y(|d| d.desktop) .linear(), false, @@ -241,8 +273,8 @@ impl Render for ChartStory { )) .child(chart_container( "Area Chart - Linear Gradient", - AreaChart::new(CHART_DATA) - .x(|d| d.month) + AreaChart::new(self.monthly_devices.clone()) + .x(|d| d.month.clone()) .y(|d| d.desktop) .fill(linear_gradient( 0., diff --git a/crates/story/src/fixtures/daily-devices.json b/crates/story/src/fixtures/daily-devices.json new file mode 100644 index 00000000..594be51f --- /dev/null +++ b/crates/story/src/fixtures/daily-devices.json @@ -0,0 +1,457 @@ +[ + { + "date": "Apr 1", + "desktop": 222.0, + "mobile": 111.0 + }, + { + "date": "Apr 2", + "desktop": 97.0, + "mobile": 48.0 + }, + { + "date": "Apr 3", + "desktop": 167.0, + "mobile": 84.0 + }, + { + "date": "Apr 4", + "desktop": 242.0, + "mobile": 121.0 + }, + { + "date": "Apr 5", + "desktop": 373.0, + "mobile": 187.0 + }, + { + "date": "Apr 6", + "desktop": 301.0, + "mobile": 151.0 + }, + { + "date": "Apr 7", + "desktop": 245.0, + "mobile": 123.0 + }, + { + "date": "Apr 8", + "desktop": 409.0, + "mobile": 205.0 + }, + { + "date": "Apr 9", + "desktop": 59.0, + "mobile": 30.0 + }, + { + "date": "Apr 10", + "desktop": 261.0, + "mobile": 131.0 + }, + { + "date": "Apr 11", + "desktop": 327.0, + "mobile": 164.0 + }, + { + "date": "Apr 12", + "desktop": 292.0, + "mobile": 146.0 + }, + { + "date": "Apr 13", + "desktop": 342.0, + "mobile": 171.0 + }, + { + "date": "Apr 14", + "desktop": 137.0, + "mobile": 69.0 + }, + { + "date": "Apr 15", + "desktop": 120.0, + "mobile": 60.0 + }, + { + "date": "Apr 16", + "desktop": 138.0, + "mobile": 69.0 + }, + { + "date": "Apr 17", + "desktop": 446.0, + "mobile": 223.0 + }, + { + "date": "Apr 18", + "desktop": 364.0, + "mobile": 182.0 + }, + { + "date": "Apr 19", + "desktop": 243.0, + "mobile": 122.0 + }, + { + "date": "Apr 20", + "desktop": 89.0, + "mobile": 44.0 + }, + { + "date": "Apr 21", + "desktop": 137.0, + "mobile": 69.0 + }, + { + "date": "Apr 22", + "desktop": 224.0, + "mobile": 112.0 + }, + { + "date": "Apr 23", + "desktop": 138.0, + "mobile": 69.0 + }, + { + "date": "Apr 24", + "desktop": 387.0, + "mobile": 194.0 + }, + { + "date": "Apr 25", + "desktop": 215.0, + "mobile": 108.0 + }, + { + "date": "Apr 26", + "desktop": 75.0, + "mobile": 38.0 + }, + { + "date": "Apr 27", + "desktop": 383.0, + "mobile": 192.0 + }, + { + "date": "Apr 28", + "desktop": 122.0, + "mobile": 61.0 + }, + { + "date": "Apr 29", + "desktop": 315.0, + "mobile": 158.0 + }, + { + "date": "Apr 30", + "desktop": 454.0, + "mobile": 227.0 + }, + { + "date": "May 1", + "desktop": 165.0, + "mobile": 82.0 + }, + { + "date": "May 2", + "desktop": 293.0, + "mobile": 146.0 + }, + { + "date": "May 3", + "desktop": 247.0, + "mobile": 124.0 + }, + { + "date": "May 4", + "desktop": 385.0, + "mobile": 192.0 + }, + { + "date": "May 5", + "desktop": 481.0, + "mobile": 241.0 + }, + { + "date": "May 6", + "desktop": 498.0, + "mobile": 249.0 + }, + { + "date": "May 7", + "desktop": 388.0, + "mobile": 194.0 + }, + { + "date": "May 8", + "desktop": 149.0, + "mobile": 74.0 + }, + { + "date": "May 9", + "desktop": 227.0, + "mobile": 114.0 + }, + { + "date": "May 10", + "desktop": 293.0, + "mobile": 146.0 + }, + { + "date": "May 11", + "desktop": 335.0, + "mobile": 168.0 + }, + { + "date": "May 12", + "desktop": 197.0, + "mobile": 98.0 + }, + { + "date": "May 13", + "desktop": 197.0, + "mobile": 98.0 + }, + { + "date": "May 14", + "desktop": 448.0, + "mobile": 224.0 + }, + { + "date": "May 15", + "desktop": 473.0, + "mobile": 236.0 + }, + { + "date": "May 16", + "desktop": 338.0, + "mobile": 169.0 + }, + { + "date": "May 17", + "desktop": 499.0, + "mobile": 250.0 + }, + { + "date": "May 18", + "desktop": 315.0, + "mobile": 158.0 + }, + { + "date": "May 19", + "desktop": 235.0, + "mobile": 118.0 + }, + { + "date": "May 20", + "desktop": 177.0, + "mobile": 88.0 + }, + { + "date": "May 21", + "desktop": 82.0, + "mobile": 41.0 + }, + { + "date": "May 22", + "desktop": 81.0, + "mobile": 41.0 + }, + { + "date": "May 23", + "desktop": 252.0, + "mobile": 126.0 + }, + { + "date": "May 24", + "desktop": 294.0, + "mobile": 147.0 + }, + { + "date": "May 25", + "desktop": 201.0, + "mobile": 100.0 + }, + { + "date": "May 26", + "desktop": 213.0, + "mobile": 106.0 + }, + { + "date": "May 27", + "desktop": 420.0, + "mobile": 210.0 + }, + { + "date": "May 28", + "desktop": 233.0, + "mobile": 116.0 + }, + { + "date": "May 29", + "desktop": 78.0, + "mobile": 39.0 + }, + { + "date": "May 30", + "desktop": 340.0, + "mobile": 170.0 + }, + { + "date": "May 31", + "desktop": 178.0, + "mobile": 89.0 + }, + { + "date": "Jun 1", + "desktop": 178.0, + "mobile": 89.0 + }, + { + "date": "Jun 2", + "desktop": 470.0, + "mobile": 235.0 + }, + { + "date": "Jun 3", + "desktop": 103.0, + "mobile": 52.0 + }, + { + "date": "Jun 4", + "desktop": 439.0, + "mobile": 220.0 + }, + { + "date": "Jun 5", + "desktop": 88.0, + "mobile": 44.0 + }, + { + "date": "Jun 6", + "desktop": 294.0, + "mobile": 147.0 + }, + { + "date": "Jun 7", + "desktop": 323.0, + "mobile": 162.0 + }, + { + "date": "Jun 8", + "desktop": 385.0, + "mobile": 192.0 + }, + { + "date": "Jun 9", + "desktop": 438.0, + "mobile": 219.0 + }, + { + "date": "Jun 10", + "desktop": 155.0, + "mobile": 78.0 + }, + { + "date": "Jun 11", + "desktop": 92.0, + "mobile": 46.0 + }, + { + "date": "Jun 12", + "desktop": 492.0, + "mobile": 246.0 + }, + { + "date": "Jun 13", + "desktop": 81.0, + "mobile": 41.0 + }, + { + "date": "Jun 14", + "desktop": 426.0, + "mobile": 213.0 + }, + { + "date": "Jun 15", + "desktop": 307.0, + "mobile": 154.0 + }, + { + "date": "Jun 16", + "desktop": 371.0, + "mobile": 186.0 + }, + { + "date": "Jun 17", + "desktop": 475.0, + "mobile": 238.0 + }, + { + "date": "Jun 18", + "desktop": 107.0, + "mobile": 54.0 + }, + { + "date": "Jun 19", + "desktop": 341.0, + "mobile": 171.0 + }, + { + "date": "Jun 20", + "desktop": 408.0, + "mobile": 204.0 + }, + { + "date": "Jun 21", + "desktop": 169.0, + "mobile": 84.0 + }, + { + "date": "Jun 22", + "desktop": 317.0, + "mobile": 158.0 + }, + { + "date": "Jun 23", + "desktop": 480.0, + "mobile": 240.0 + }, + { + "date": "Jun 24", + "desktop": 132.0, + "mobile": 66.0 + }, + { + "date": "Jun 25", + "desktop": 141.0, + "mobile": 70.0 + }, + { + "date": "Jun 26", + "desktop": 434.0, + "mobile": 217.0 + }, + { + "date": "Jun 27", + "desktop": 448.0, + "mobile": 224.0 + }, + { + "date": "Jun 28", + "desktop": 149.0, + "mobile": 74.0 + }, + { + "date": "Jun 29", + "desktop": 103.0, + "mobile": 52.0 + }, + { + "date": "Jun 30", + "desktop": 446.0, + "mobile": 223.0 + } +] diff --git a/crates/story/src/fixtures/mod.rs b/crates/story/src/fixtures/mod.rs deleted file mode 100644 index b85cec98..00000000 --- a/crates/story/src/fixtures/mod.rs +++ /dev/null @@ -1,505 +0,0 @@ -#[derive(Clone)] -pub struct DataItem { - pub month: &'static str, - pub desktop: f64, - pub color: u32, -} - -pub const CHART_DATA: &[DataItem] = &[ - DataItem { - month: "January", - desktop: 186., - color: 0x93c5fd, - }, - DataItem { - month: "February", - desktop: 305., - color: 0x60a5fa, - }, - DataItem { - month: "March", - desktop: 237., - color: 0x3b82f6, - }, - DataItem { - month: "April", - desktop: 73., - color: 0x2563eb, - }, - DataItem { - month: "May", - desktop: 209., - color: 0x1d4ed8, - }, - DataItem { - month: "June", - desktop: 214., - color: 0x1e40af, - }, -]; - -#[derive(Clone)] -pub struct DataItem2 { - pub date: &'static str, - pub desktop: f64, - #[allow(dead_code)] - pub mobile: f64, -} - -pub const CHART_DATA_2: &[DataItem2] = &[ - DataItem2 { - date: "Apr 1", - desktop: 222., - mobile: 111., - }, - DataItem2 { - date: "Apr 2", - desktop: 97., - mobile: 48., - }, - DataItem2 { - date: "Apr 3", - desktop: 167., - mobile: 84., - }, - DataItem2 { - date: "Apr 4", - desktop: 242., - mobile: 121., - }, - DataItem2 { - date: "Apr 5", - desktop: 373., - mobile: 187., - }, - DataItem2 { - date: "Apr 6", - desktop: 301., - mobile: 151., - }, - DataItem2 { - date: "Apr 7", - desktop: 245., - mobile: 123., - }, - DataItem2 { - date: "Apr 8", - desktop: 409., - mobile: 205., - }, - DataItem2 { - date: "Apr 9", - desktop: 59., - mobile: 30., - }, - DataItem2 { - date: "Apr 10", - desktop: 261., - mobile: 131., - }, - DataItem2 { - date: "Apr 11", - desktop: 327., - mobile: 164., - }, - DataItem2 { - date: "Apr 12", - desktop: 292., - mobile: 146., - }, - DataItem2 { - date: "Apr 13", - desktop: 342., - mobile: 171., - }, - DataItem2 { - date: "Apr 14", - desktop: 137., - mobile: 69., - }, - DataItem2 { - date: "Apr 15", - desktop: 120., - mobile: 60., - }, - DataItem2 { - date: "Apr 16", - desktop: 138., - mobile: 69., - }, - DataItem2 { - date: "Apr 17", - desktop: 446., - mobile: 223., - }, - DataItem2 { - date: "Apr 18", - desktop: 364., - mobile: 182., - }, - DataItem2 { - date: "Apr 19", - desktop: 243., - mobile: 122., - }, - DataItem2 { - date: "Apr 20", - desktop: 89., - mobile: 44., - }, - DataItem2 { - date: "Apr 21", - desktop: 137., - mobile: 69., - }, - DataItem2 { - date: "Apr 22", - desktop: 224., - mobile: 112., - }, - DataItem2 { - date: "Apr 23", - desktop: 138., - mobile: 69., - }, - DataItem2 { - date: "Apr 24", - desktop: 387., - mobile: 194., - }, - DataItem2 { - date: "Apr 25", - desktop: 215., - mobile: 108., - }, - DataItem2 { - date: "Apr 26", - desktop: 75., - mobile: 38., - }, - DataItem2 { - date: "Apr 27", - desktop: 383., - mobile: 192., - }, - DataItem2 { - date: "Apr 28", - desktop: 122., - mobile: 61., - }, - DataItem2 { - date: "Apr 29", - desktop: 315., - mobile: 158., - }, - DataItem2 { - date: "Apr 30", - desktop: 454., - mobile: 227., - }, - DataItem2 { - date: "May 1", - desktop: 165., - mobile: 82., - }, - DataItem2 { - date: "May 2", - desktop: 293., - mobile: 146., - }, - DataItem2 { - date: "May 3", - desktop: 247., - mobile: 124., - }, - DataItem2 { - date: "May 4", - desktop: 385., - mobile: 192., - }, - DataItem2 { - date: "May 5", - desktop: 481., - mobile: 241., - }, - DataItem2 { - date: "May 6", - desktop: 498., - mobile: 249., - }, - DataItem2 { - date: "May 7", - desktop: 388., - mobile: 194., - }, - DataItem2 { - date: "May 8", - desktop: 149., - mobile: 74., - }, - DataItem2 { - date: "May 9", - desktop: 227., - mobile: 114., - }, - DataItem2 { - date: "May 10", - desktop: 293., - mobile: 146., - }, - DataItem2 { - date: "May 11", - desktop: 335., - mobile: 168., - }, - DataItem2 { - date: "May 12", - desktop: 197., - mobile: 98., - }, - DataItem2 { - date: "May 13", - desktop: 197., - mobile: 98., - }, - DataItem2 { - date: "May 14", - desktop: 448., - mobile: 224., - }, - DataItem2 { - date: "May 15", - desktop: 473., - mobile: 236., - }, - DataItem2 { - date: "May 16", - desktop: 338., - mobile: 169., - }, - DataItem2 { - date: "May 17", - desktop: 499., - mobile: 250., - }, - DataItem2 { - date: "May 18", - desktop: 315., - mobile: 158., - }, - DataItem2 { - date: "May 19", - desktop: 235., - mobile: 118., - }, - DataItem2 { - date: "May 20", - desktop: 177., - mobile: 88., - }, - DataItem2 { - date: "May 21", - desktop: 82., - mobile: 41., - }, - DataItem2 { - date: "May 22", - desktop: 81., - mobile: 41., - }, - DataItem2 { - date: "May 23", - desktop: 252., - mobile: 126., - }, - DataItem2 { - date: "May 24", - desktop: 294., - mobile: 147., - }, - DataItem2 { - date: "May 25", - desktop: 201., - mobile: 100., - }, - DataItem2 { - date: "May 26", - desktop: 213., - mobile: 106., - }, - DataItem2 { - date: "May 27", - desktop: 420., - mobile: 210., - }, - DataItem2 { - date: "May 28", - desktop: 233., - mobile: 116., - }, - DataItem2 { - date: "May 29", - desktop: 78., - mobile: 39., - }, - DataItem2 { - date: "May 30", - desktop: 340., - mobile: 170., - }, - DataItem2 { - date: "May 31", - desktop: 178., - mobile: 89., - }, - DataItem2 { - date: "Jun 1", - desktop: 178., - mobile: 89., - }, - DataItem2 { - date: "Jun 2", - desktop: 470., - mobile: 235., - }, - DataItem2 { - date: "Jun 3", - desktop: 103., - mobile: 52., - }, - DataItem2 { - date: "Jun 4", - desktop: 439., - mobile: 220., - }, - DataItem2 { - date: "Jun 5", - desktop: 88., - mobile: 44., - }, - DataItem2 { - date: "Jun 6", - desktop: 294., - mobile: 147., - }, - DataItem2 { - date: "Jun 7", - desktop: 323., - mobile: 162., - }, - DataItem2 { - date: "Jun 8", - desktop: 385., - mobile: 192., - }, - DataItem2 { - date: "Jun 9", - desktop: 438., - mobile: 219., - }, - DataItem2 { - date: "Jun 10", - desktop: 155., - mobile: 78., - }, - DataItem2 { - date: "Jun 11", - desktop: 92., - mobile: 46., - }, - DataItem2 { - date: "Jun 12", - desktop: 492., - mobile: 246., - }, - DataItem2 { - date: "Jun 13", - desktop: 81., - mobile: 41., - }, - DataItem2 { - date: "Jun 14", - desktop: 426., - mobile: 213., - }, - DataItem2 { - date: "Jun 15", - desktop: 307., - mobile: 154., - }, - DataItem2 { - date: "Jun 16", - desktop: 371., - mobile: 186., - }, - DataItem2 { - date: "Jun 17", - desktop: 475., - mobile: 238., - }, - DataItem2 { - date: "Jun 18", - desktop: 107., - mobile: 54., - }, - DataItem2 { - date: "Jun 19", - desktop: 341., - mobile: 171., - }, - DataItem2 { - date: "Jun 20", - desktop: 408., - mobile: 204., - }, - DataItem2 { - date: "Jun 21", - desktop: 169., - mobile: 84., - }, - DataItem2 { - date: "Jun 22", - desktop: 317., - mobile: 158., - }, - DataItem2 { - date: "Jun 23", - desktop: 480., - mobile: 240., - }, - DataItem2 { - date: "Jun 24", - desktop: 132., - mobile: 66., - }, - DataItem2 { - date: "Jun 25", - desktop: 141., - mobile: 70., - }, - DataItem2 { - date: "Jun 26", - desktop: 434., - mobile: 217., - }, - DataItem2 { - date: "Jun 27", - desktop: 448., - mobile: 224., - }, - DataItem2 { - date: "Jun 28", - desktop: 149., - mobile: 74., - }, - DataItem2 { - date: "Jun 29", - desktop: 103., - mobile: 52., - }, - DataItem2 { - date: "Jun 30", - desktop: 446., - mobile: 223., - }, -]; diff --git a/crates/story/src/fixtures/monthly-devices.json b/crates/story/src/fixtures/monthly-devices.json new file mode 100644 index 00000000..145759d5 --- /dev/null +++ b/crates/story/src/fixtures/monthly-devices.json @@ -0,0 +1,32 @@ +[ + { + "month": "January", + "desktop": 186.0, + "color": "#93c5fd" + }, + { + "month": "February", + "desktop": 305.0, + "color": "#60a5fa" + }, + { + "month": "March", + "desktop": 237.0, + "color": "#3b82f6" + }, + { + "month": "April", + "desktop": 73.0, + "color": "#2563eb" + }, + { + "month": "May", + "desktop": 209.0, + "color": "#1d4ed8" + }, + { + "month": "June", + "desktop": 214.0, + "color": "#1e40af" + } +] diff --git a/crates/story/src/lib.rs b/crates/story/src/lib.rs index 70b23852..d999bd04 100644 --- a/crates/story/src/lib.rs +++ b/crates/story/src/lib.rs @@ -11,7 +11,6 @@ mod color_picker_story; mod date_picker_story; mod drawer_story; mod dropdown_story; -mod fixtures; mod form_story; mod icon_story; mod image_story; diff --git a/crates/ui/src/chart/area_chart.rs b/crates/ui/src/chart/area_chart.rs index f1ed5131..0bf7fd28 100644 --- a/crates/ui/src/chart/area_chart.rs +++ b/crates/ui/src/chart/area_chart.rs @@ -17,7 +17,7 @@ use crate::{ pub struct AreaChart where T: 'static, - X: Clone + Copy + PartialEq + Into + 'static, + X: Clone + PartialEq + Into + 'static, Y: Clone + Copy + PartialOrd + Num + ToPrimitive + Sealed + 'static, { data: Vec, @@ -31,7 +31,7 @@ where impl AreaChart where - X: Clone + Copy + PartialEq + Into + 'static, + X: Clone + PartialEq + Into + 'static, Y: Clone + Copy + PartialOrd + Num + ToPrimitive + Sealed + 'static, { pub fn new(data: I) -> Self @@ -82,7 +82,7 @@ where impl Plot for AreaChart where - X: Clone + Copy + PartialEq + Into + 'static, + X: Clone + PartialEq + Into + 'static, Y: Clone + Copy + PartialOrd + Num + ToPrimitive + Sealed + 'static, { fn paint(&mut self, bounds: Bounds, window: &mut Window, cx: &mut App) { diff --git a/crates/ui/src/plot/mod.rs b/crates/ui/src/plot/mod.rs index 71e38c84..4c3aab25 100644 --- a/crates/ui/src/plot/mod.rs +++ b/crates/ui/src/plot/mod.rs @@ -15,7 +15,7 @@ pub use axis::{Axis, AxisText, AXIS_GAP}; pub use grid::Grid; pub use label::Label; -pub trait Plot: 'static + IntoElement { +pub trait Plot: IntoElement { fn paint(&mut self, bounds: Bounds, window: &mut Window, cx: &mut App); }