feat: Stroke graphic #91

h2oai · Oct 25, 2022 · ad0b06c · ad0b06c
1 parent da02d16
commit ad0b06c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 0 deletions.
diff --git a/help/docs/guide/graphics.md b/help/docs/guide/graphics.md
@@ -53,3 +53,14 @@ view(
 ![Screenshot](assets/screenshots/graphics_bar_y.png)
 
 
+## Stroke Y
+
+```py
+view(
+    box(mode='g stroke-y', style='h-8', data=[0.1, 0.9, 0.2, 0.8, 0.3, 0.7, 0.4, 0.6, 0.5]),
+)
+```
+
+
+![Screenshot](assets/screenshots/graphics_stroke_y.png)
+
diff --git a/help/docs/guide/index.md b/help/docs/guide/index.md
@@ -458,6 +458,7 @@ Draw microcharts, sparklines, and other data graphics.
 - [Area Y](graphics.md#area-y)
 - [Step Y](graphics.md#step-y)
 - [Bar Y](graphics.md#bar-y)
+- [Stroke Y](graphics.md#stroke-y)
 ## Format
 
 Learn the basics of formatting and templates.

diff --git a/py/pkg/docs/graphics.py b/py/pkg/docs/graphics.py
@@ -46,3 +46,9 @@ def graphics_bar_y(view: View):  # height 3
     )
 
 
+# ## Stroke Y
+def graphics_stroke_y(view: View):  # height 3
+    view(
+        box(mode='g stroke-y', style='h-8', data=[0.1, 0.9, 0.2, 0.8, 0.3, 0.7, 0.4, 0.6, 0.5]),
+    )
+
diff --git a/web/src/graphics.tsx b/web/src/graphics.tsx
@@ -78,6 +78,19 @@ const
     d.push('V', w, h)
     d.push('Z')
     return d.join(' ')
+  },
+  makeStrokeY = (ys: F[], w: F, h: F) => {
+    const n = ys.length
+    if (n < 1) return ''
+    const
+      dx = Math.floor(w / n),
+      dx2 = dx / 2,
+      d: Array<S | F> = []
+    for (let i = 0; i < n; i++) {
+      d.push('M', dx2 + dx * i, h)
+      d.push('V', lerp(ys[i], h, 0))
+    }
+    return d.join(' ')
   }
 export const Graphic = ({ context, box }: BoxProps) => {
   const { modes, style, data } = box