Elm Europe 2017 - Elm Plot: The big picture

Transcript

1. elm-plot: the big picture
4. So sassy
5. type alias PlotConfig data = { height : Int , width : Int , series : List (SeriesConfig data) } type alias SeriesConfig data = { color : String , colorArea : String , toX : data -> List Int , toY : data -> List Int }
7. config : PlotConfig Data config = { height = 300 , width = 500 , series = seriesConfigs } seriesConfigs : SeriesConfig Data seriesConfigs = [ { color = “pink” , colorArea = “lightpink” , toX = .x , toY = .y } ] main = plot config data
8. main = plot [ width 800, height 500 ] [ area [ stroke “pink” , fill “lightpink” ] data , xAxis [ tick myCustomTick ] , yAxis [] ]
9. type Element msg = Axis (AxisConfig msg) | Area AreaConfig | Line LineConfig plot : List PlotAttr -> List (Element msg) -> Svg msg
10. type alias AreaConfig = { fill : String , stroke : String } fill : String -> AreaConfig -> AreaConfig stroke : String -> AreaConfig -> AreaConfig area : List (AreaConfig -> AreaConfig) -> List Point -> Element msg
13. main = plot [ dimensions (800, 500) ] [ area [ stroke “pink” , fill “lightpink” ] data ] config = { name = “yay plots” , width = 800 , height = 500 , series = seriesConfigs } seriesConfigs = [ { color = “pink” , colorArea = “lightpink” , toX = .x , toY = .y } ] main = plot config data vs.
14. main = plot [ dimensions (800, 500) ] [ area [ stroke “pink” , fill “lightpink” ] data ] config = { name = “yay plots” , width = 800 , height = 500 , series = seriesConfigs } seriesConfigs = [ { color = “pink” , colorArea = “lightpink” , toX = .x , toY = .y } ] main = plot config data vs. ¯\_(ツ)_/¯
15. compromises, thinking and opinions
16. compromises, thinking and opinions why would you do this to me
18. more features
19. more features!!!
20. fill : String -> AreaConfig -> AreaConfig stroke : String -> AreaConfig -> AreaConfig strokeWidth : Int-> AreaConfig -> AreaConfig dashed : AreaConfig -> AreaConfig …
21. fill : String -> AreaConfig -> AreaConfig stroke : String -> AreaConfig -> AreaConfig strokeWidth : Int-> AreaConfig -> AreaConfig dashed : AreaConfig -> AreaConfig … nah
22. main = plot [ areaSerie Bezier [ stroke “pink”, fill “lightpink” ] data1 , lineSerie Linear [ stroke “lightskyblue” ] data2 ]
23. main = [ areaSerie Bezier [ stroke “pink”, fill “lightpink” ] data1 , lineSerie Linear [ stroke “lightskyblue” ] data2 , xAxis closestToZero [ axisLine [ stroke “grey” ] , ticks [ stroke skinStroke, length 15 ] (fromDelta 0.5) , ticks [ stroke blueStroke, length 10, strokeWidth “2px” ] (fromDelta 1) , labels [ fill pinkStroke ] toString (fromDelta 1) ] , yAxis lowest [ axisLine [ fill blueStroke, stroke skinStroke ] , ticks [ stroke blueStroke, length 4, strokeWidth “2px” ] (fromDelta 1) , labels [ fill pinkStroke ] toString (fromDelta 1) ] , yAxis closestToZero [ axisLine [ fill blueStroke, stroke skinStroke ] , ticks [ stroke blueStroke, length 4, strokeWidth “2px” ] (fromDelta 1) , labels [ fill pinkStroke ] toString (fromDelta 1) ] , verticalGrid [ stroke skinStroke ] (fromDelta 1) ]
25. designing API’s
26. what do we need?
27. what do we really need?
28. main = [ lineSerie Linear [] data , xAxis atZero [] , yAxis atLowest [] , yAxis atZero [] ]
29. help people make plots
30. help people make great plots
34. type alias Series data msg = { axis : Axis , interpolation : Interpolation , toDataPoints : data -> List (DataPoint msg) }
35. dots : (data -> List (DataPoint msg)) -> Series data msg line : (data -> List (DataPoint msg)) -> Series data msg area : (data -> List (DataPoint msg)) -> Series data msg custom : Axis -> Interpolation -> (data -> List (DataPoint msg)) -> Series data msg
36. shipping
37. shipping with integrity
38. “the future”
41. thanks