From 67e4740cb281b81afc14f9a42707556db02987ef Mon Sep 17 00:00:00 2001 From: Tim Orme Date: Mon, 29 May 2023 19:09:57 -0700 Subject: [PATCH 1/2] Add times to tooltips --- elm/src/Graph.elm | 81 +++++++++++++++++++++++++++++++++++++++-------- elm/src/Main.elm | 12 +++++-- 2 files changed, 77 insertions(+), 16 deletions(-) diff --git a/elm/src/Graph.elm b/elm/src/Graph.elm index 28313ca..758ce1a 100644 --- a/elm/src/Graph.elm +++ b/elm/src/Graph.elm @@ -4,7 +4,7 @@ import Chart as C import Chart.Attributes as CA import Chart.Events as CE import Chart.Item as CI -import Html exposing (Attribute, Html) +import Html exposing (Attribute, Html, br, div, p, span, text) import Html.Attributes exposing (style) import Time exposing (..) @@ -14,6 +14,7 @@ import Time exposing (..) type alias GraphReadModel = { graphData : List GraphReadData , currentHover : List (CI.One GraphReadData CI.Dot) + , timeZone : Zone } @@ -22,6 +23,7 @@ type alias GraphReadModel = type alias GraphEpaModel = { graphData : List GraphEpaData , currentHover : List (CI.One GraphEpaData CI.Dot) + , timeZone : Zone } @@ -56,7 +58,7 @@ getReadChart graphModel onHover = , CE.onMouseMove onHover (CE.getNearest CI.dots) , CE.onMouseLeave (onHover []) ] - [ C.xLabels [ CA.fontSize 10, CA.withGrid, CA.format formatTime ] + [ C.xLabels [ CA.fontSize 10, CA.withGrid, CA.format (\time -> formatTime time graphModel.timeZone) ] , C.yLabels [ CA.fontSize 10, CA.withGrid ] , C.series .time [ C.interpolated .pm25 [ CA.monotone, CA.color CA.yellow ] [ CA.circle, CA.size 3 ] |> C.named "PM2.5" @@ -65,7 +67,7 @@ getReadChart graphModel onHover = graphModel.graphData , C.each graphModel.currentHover <| \p item -> - [ C.tooltip item [] [] [] ] + [ C.tooltip item [] [] (getPmToolTip item graphModel.timeZone) ] , C.legendsAt .min .max [ CA.row -- Appear as column instead of row @@ -95,7 +97,7 @@ getEpaChart graphModel onHover = , CE.onMouseMove onHover (CE.getNearest CI.dots) , CE.onMouseLeave (onHover []) ] - [ C.xLabels [ CA.fontSize 10, CA.withGrid, CA.format formatTime ] + [ C.xLabels [ CA.fontSize 10, CA.withGrid, CA.format (\time -> formatTime time graphModel.timeZone) ] , C.yLabels [ CA.fontSize 10, CA.withGrid ] , C.series .time [ C.interpolated .epa [ CA.monotone, CA.color CA.blue ] [ CA.circle, CA.size 3 ] |> C.named "EPA" @@ -103,7 +105,7 @@ getEpaChart graphModel onHover = graphModel.graphData , C.each graphModel.currentHover <| \p item -> - [ C.tooltip item [] [] [] ] + [ C.tooltip item [] [] (getEpaToolTip item graphModel.timeZone) ] , C.legendsAt .min .max [ CA.row -- Appear as column instead of row @@ -119,31 +121,84 @@ getEpaChart graphModel onHover = ] +getEpaToolTip : CI.One GraphEpaData CI.Dot -> Zone -> List (Html msg) +getEpaToolTip item timeZone = + let + data = + CI.getData item + + color = + CI.getColor item + + value = + String.fromFloat data.epa + + formattedTime = + formatTime data.time timeZone + in + [ div [] + [ span [ style "color" color ] [ text "EPA" ] + , span [] [ text (": " ++ value) ] + , br [] [] + , span [ style "color" color ] [ text "Time" ] + , span [] [ text (": " ++ formattedTime) ] + ] + ] + + +getPmToolTip : CI.One GraphReadData CI.Dot -> Zone -> List (Html msg) +getPmToolTip item timeZone = + let + data = + CI.getData item + + color = + CI.getColor item + + value = + CI.getTooltipValue item + + label = + CI.getName item + + formattedTime = + formatTime data.time timeZone + in + [ div [] + [ span [ style "color" color ] [ text label ] + , span [] [ text (": " ++ value) ] + , br [] [] + , span [ style "color" color ] [ text "Time" ] + , span [] [ text (": " ++ formattedTime) ] + ] + ] + + {-| Format a unix timestamp as a string like MM/DD HH:MM:SS -} -formatTime : Float -> String -formatTime time = +formatTime : Float -> Zone -> String +formatTime time timeZone = let milliTime = Time.millisToPosix (floor time * 1000) year = - String.fromInt (toYear utc milliTime) + String.fromInt (toYear timeZone milliTime) month = - monthToString (toMonth utc milliTime) + monthToString (toMonth timeZone milliTime) day = - String.fromInt (toDay utc milliTime) + String.fromInt (toDay timeZone milliTime) hour = - String.fromInt (toHour utc milliTime) + String.pad 2 '0' (String.fromInt (toHour timeZone milliTime)) minute = - String.fromInt (toMinute utc milliTime) + String.pad 2 '0' (String.fromInt (toMinute timeZone milliTime)) second = - String.fromInt (toSecond utc milliTime) + String.pad 2 '0' (String.fromInt (toSecond timeZone milliTime)) in month ++ "/" ++ day ++ " " ++ hour ++ ":" ++ minute ++ ":" ++ second diff --git a/elm/src/Main.elm b/elm/src/Main.elm index 6817d85..ed7977d 100644 --- a/elm/src/Main.elm +++ b/elm/src/Main.elm @@ -109,6 +109,7 @@ type alias Model = , hoveringEpas : List (CI.One EpaData CI.Dot) , errorData : ErrorData , currentGraph : VisibleGraph + , timeZone : Zone } @@ -128,8 +129,9 @@ init _ = , hoveringEpas = [] , errorData = { hasError = False, errorTitle = "", errorMessage = "" } , currentGraph = Epa + , timeZone = utc } - , Cmd.batch [ Task.perform FetchData Time.now, Task.perform FetchLatest Time.now ] + , Cmd.batch [ Task.perform FetchData Time.now, Task.perform FetchLatest Time.now, Task.perform GetTimeZone Time.here ] ) @@ -186,6 +188,7 @@ type Msg = FetchData Posix | FetchLatest Posix | FetchStatus Posix + | GetTimeZone Zone | GotData (Result Http.Error AllData) | GotLatest (Result Http.Error LatestData) | GotStatus (Result Http.Error DeviceInfoResponse) @@ -214,6 +217,9 @@ update msg model = -- Data requested ( { model | currentTime = Just newTime }, getData model.windowDuration ) + GetTimeZone timeZone -> + ( { model | timeZone = timeZone }, Cmd.none ) + GotLatest result -> case result of Ok data -> @@ -359,7 +365,7 @@ view model = (Grid.row [ Row.attrs [ style "padding-top" "1em", style "padding-bottom" "3em" ], Row.centerMd ] [ Grid.col [ Col.lg ] [ div [ style "height" "400px" ] - [ G.getEpaChart { graphData = model.allEpas, currentHover = model.hoveringEpas } OnEpaHover ] + [ G.getEpaChart { graphData = model.allEpas, currentHover = model.hoveringEpas, timeZone = model.timeZone } OnEpaHover ] ] ] ) @@ -368,7 +374,7 @@ view model = (Grid.row [ Row.attrs [ style "padding-top" "1em", style "padding-bottom" "3em" ], Row.centerMd ] [ Grid.col [ Col.lg ] [ div [ style "height" "400px" ] - [ G.getReadChart { graphData = model.allReads, currentHover = model.hoveringReads } OnReadHover ] + [ G.getReadChart { graphData = model.allReads, currentHover = model.hoveringReads, timeZone = model.timeZone } OnReadHover ] ] ] ) From 9262de5f4a84e30f1d0a8fe3feae6b1c0761d0b3 Mon Sep 17 00:00:00 2001 From: Tim Orme Date: Mon, 29 May 2023 19:16:09 -0700 Subject: [PATCH 2/2] Add comments --- elm/src/Graph.elm | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/elm/src/Graph.elm b/elm/src/Graph.elm index 758ce1a..70e837b 100644 --- a/elm/src/Graph.elm +++ b/elm/src/Graph.elm @@ -121,6 +121,8 @@ getEpaChart graphModel onHover = ] +{-| Get the tooltip for an EPA AQI data point. +-} getEpaToolTip : CI.One GraphEpaData CI.Dot -> Zone -> List (Html msg) getEpaToolTip item timeZone = let @@ -146,6 +148,8 @@ getEpaToolTip item timeZone = ] +{-| Get the tooltip for a particulate matter data point. +-} getPmToolTip : CI.One GraphReadData CI.Dot -> Zone -> List (Html msg) getPmToolTip item timeZone = let