Add legend

TimOrme · Mar 21, 2023 · 62e6706 · 62e6706
1 parent 3f6a664
commit 62e6706
Showing 1 changed file with 19 additions and 3 deletions.
diff --git a/elm/src/Main.elm b/elm/src/Main.elm
@@ -204,11 +204,27 @@ view model =
                             [ C.xLabels [ CA.moveDown 25, CA.withGrid, CA.rotate 60, CA.format formatTime ]
                             , C.yLabels [ CA.withGrid ]
                             , C.series .time
-                                [ C.interpolated .epa [ CA.monotone, CA.color CA.blue ] []
-                                , C.interpolated .pm25 [ CA.monotone, CA.color CA.yellow ] []
-                                , C.interpolated .pm10 [ CA.monotone, CA.color CA.red ] []
+                                [ C.interpolated .epa [ CA.monotone, CA.color CA.blue ] [] |> C.named "EPA"
+                                , C.interpolated .pm25 [ CA.monotone, CA.color CA.yellow ] [] |> C.named "PM2.5"
+                                , C.interpolated .pm10 [ CA.monotone, CA.color CA.red ] [] |> C.named "PM10"
                                 ]
                                 model.allReads
+                            , C.legendsAt .min
+                                .max
+                                [ CA.row -- Appear as column instead of row
+                                , CA.alignLeft -- Anchor legends to the right
+                                , CA.spacing 5 -- Spacing between legends
+                                , CA.background "lightgray" -- Color background
+                                , CA.border "gray" -- Add border
+                                , CA.borderWidth 1 -- Set border width
+                                , CA.htmlAttrs [ style "padding" "0px 4px" ]
+                                ]
+                                [ CA.width 30 -- Change width of legend window
+                                , CA.height 30 -- Change height of legend window
+                                , CA.fontSize 12 -- Change font size
+                                , CA.color "red" -- Change font color
+                                , CA.spacing 12 -- Change spacing between window and title
+                                ]
                             ]
                         ]
                     ]