plot: Add StepAfter kind to StokeStrike (#1356)

Implements new `StokeStrike::StepAfter`  for plot component

<img width="1700" height="1030" alt="step-after-plot-stoke-style"
src="https://github.com/user-attachments/assets/89252ba9-2834-4c9a-9020-7977ffea6865"
/>

crates/story/src/chart_story.rs

@@ -246,6 +246,15 @@ impl Render for ChartStory {
                         false,
                         cx,
                     ))
+                    .child(chart_container(
+                        "Line Chart - Step After",
+                        LineChart::new(self.monthly_devices.clone())
+                            .x(|d| d.month.clone())
+                            .y(|d| d.desktop)
+                            .step_after(),
+                        false,
+                        cx,
+                    ))
                     .child(chart_container(
                         "Line Chart - Dots",
                         LineChart::new(self.monthly_devices.clone())
@@ -278,6 +287,15 @@ impl Render for ChartStory {
                         false,
                         cx,
                     ))
+                    .child(chart_container(
+                        "Area Chart - Step After",
+                        AreaChart::new(self.monthly_devices.clone())
+                            .x(|d| d.month.clone())
+                            .y(|d| d.desktop)
+                            .step_after(),
+                        false,
+                        cx,
+                    ))
                     .child(chart_container(
                         "Area Chart - Linear Gradient",
                         AreaChart::new(self.monthly_devices.clone())

crates/ui/src/chart/area_chart.rs

@@ -74,6 +74,11 @@ where
         self
     }
 
+    pub fn step_after(mut self) -> Self {
+        self.stroke_style = StrokeStyle::StepAfter;
+        self
+    }
+
     pub fn tick_margin(mut self, tick_margin: usize) -> Self {
         self.tick_margin = tick_margin;
         self

crates/ui/src/chart/line_chart.rs

@@ -64,6 +64,11 @@ where
         self
     }
 
+    pub fn step_after(mut self) -> Self {
+        self.stroke_style = StrokeStyle::StepAfter;
+        self
+    }
+
     pub fn dot(mut self) -> Self {
         self.dot = true;
         self

crates/ui/src/plot/mod.rs

@@ -26,6 +26,7 @@ pub enum StrokeStyle {
     #[default]
     Natural,
     Linear,
+    StepAfter,
 }
 
 pub fn origin_point<T>(x: T, y: T, origin: Point<T>) -> Point<T>

crates/ui/src/plot/shape/area.rs

@@ -144,6 +144,16 @@ impl<T> Area<T> {
                     line_builder.line_to(*p);
                 }
             }
+            StrokeStyle::StepAfter => {
+                area_builder.move_to(points[0]);
+                line_builder.move_to(points[0]);
+                for p in points.windows(2) {
+                    area_builder.line_to(Point::new(p[1].x, p[0].y));
+                    area_builder.line_to(Point::new(p[1].x, p[1].y));
+                    line_builder.line_to(Point::new(p[1].x, p[0].y));
+                    line_builder.line_to(Point::new(p[1].x, p[1].y));
+                }
+            }
         }
 
         // Close path

crates/ui/src/plot/shape/line.rs

@@ -182,6 +182,13 @@ impl<T> Line<T> {
                     builder.line_to(*p);
                 }
             }
+            StrokeStyle::StepAfter => {
+                builder.move_to(dots[0]);
+                for d in dots.windows(2) {
+                    builder.line_to(Point::new(d[1].x, d[0].y));
+                    builder.line_to(Point::new(d[1].x, d[1].y));
+                }
+            }
         }
 
         (builder.build().ok(), paint_dots)