Skip to content

Commit

Permalink
Add times to tooltips
Browse files Browse the repository at this point in the history
  • Loading branch information
@TimOrme
TimOrme committed May 30, 2023
1 parent 2fc0594 commit 67e4740
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 16 deletions.
81 changes: 68 additions & 13 deletions elm/src/Graph.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (..)

Expand All @@ -14,6 +14,7 @@ import Time exposing (..)
type alias GraphReadModel =
{ graphData : List GraphReadData
, currentHover : List (CI.One GraphReadData CI.Dot)
, timeZone : Zone
}


Expand All @@ -22,6 +23,7 @@ type alias GraphReadModel =
type alias GraphEpaModel =
{ graphData : List GraphEpaData
, currentHover : List (CI.One GraphEpaData CI.Dot)
, timeZone : Zone
}


Expand Down Expand Up @@ -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"
Expand All @@ -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
Expand Down Expand Up @@ -95,15 +97,15 @@ 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"
]
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
Expand All @@ -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

Expand Down
12 changes: 9 additions & 3 deletions elm/src/Main.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ type alias Model =
, hoveringEpas : List (CI.One EpaData CI.Dot)
, errorData : ErrorData
, currentGraph : VisibleGraph
, timeZone : Zone
}


Expand All @@ -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 ]
)


Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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 ->
Expand Down Expand Up @@ -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 ]
]
]
)
Expand All @@ -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 ]
]
]
)
Expand Down

0 comments on commit 67e4740

Please sign in to comment.