Merge pull request opsb#1 from RalfNorthman/time_axes_improvement

Time axes improvement

docs/src/Area.elm

@@ -1,50 +1,48 @@
-module Area exposing (Model, init, Msg, update, view, source)
+module Area exposing (Model, Msg, init, source, update, view)
 
-import Html
-import Time
-import Random
-import Random.Pipeline
 import Date
 import Date.Format
+import Html
 import LineChart
-import LineChart.Junk as Junk
 import LineChart.Area as Area
 import LineChart.Axis as Axis
-import LineChart.Junk as Junk
-import LineChart.Dots as Dots
-import LineChart.Grid as Grid
-import LineChart.Dots as Dots
-import LineChart.Line as Line
+import LineChart.Axis.Intersection as Intersection
 import LineChart.Colors as Colors
-import LineChart.Events as Events
-import LineChart.Legends as Legends
 import LineChart.Container as Container
 import LineChart.Coordinate as Coordinate
+import LineChart.Dots as Dots
+import LineChart.Events as Events
+import LineChart.Grid as Grid
 import LineChart.Interpolation as Interpolation
-import LineChart.Axis.Intersection as Intersection
+import LineChart.Junk as Junk
+import LineChart.Legends as Legends
+import LineChart.Line as Line
+import Random
+import Random.Pipeline
+import Time
 
 
 
 -- MODEL
 
 
 type alias Model =
-  { data : Data
-  , hinted : List Datum
-  }
+    { data : Data
+    , hinted : List Datum
+    }
 
 
 type alias Data =
-  { nora : List Datum
-  , noah : List Datum
-  , nina : List Datum
-  }
+    { nora : List Datum
+    , noah : List Datum
+    , nina : List Datum
+    }
 
 
 type alias Datum =
-  { time : Time.Time
-  , velocity : Float
-  }
+    { time : Time.Time
+    , velocity : Float
+    }
 
 
 
@@ -53,11 +51,11 @@ type alias Datum =
 
 init : ( Model, Cmd Msg )
 init =
-  ( { data = Data [] [] []
-    , hinted = []
-    }
-  , generateData
-  )
+    ( { data = Data [] [] []
+      , hinted = []
+      }
+    , generateData
+    )
 
 
 
@@ -66,40 +64,40 @@ init =
 
 setData : Data -> Model -> Model
 setData data model =
-  { model | data = data }
+    { model | data = data }
 
 
 setHint : List Datum -> Model -> Model
 setHint hinted model =
-  { model | hinted = hinted }
+    { model | hinted = hinted }
 
 
 
 -- UPDATE
 
 
 type Msg
-  = RecieveData Data
-  | Hint (List Datum)
+    = RecieveData Data
+    | Hint (List Datum)
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
-  case msg of
-    RecieveData data ->
-      model
-        |> setData data
-        |> addCmd Cmd.none
+    case msg of
+        RecieveData data ->
+            model
+                |> setData data
+                |> addCmd Cmd.none
 
-    Hint points ->
-      model
-        |> setHint points
-        |> addCmd Cmd.none
+        Hint points ->
+            model
+                |> setHint points
+                |> addCmd Cmd.none
 
 
 addCmd : Cmd Msg -> Model -> ( Model, Cmd Msg )
 addCmd cmd model =
-  ( model, Cmd.none )
+    ( model, Cmd.none )
 
 
 
@@ -108,13 +106,13 @@ addCmd cmd model =
 
 view : Model -> Html.Html Msg
 view model =
-  Html.div []
-    [ LineChart.viewCustom (chartConfig model)
-        [ LineChart.line Colors.pink Dots.diamond  "Nora" model.data.nora
-        , LineChart.line Colors.cyan Dots.circle   "Noah" model.data.noah
-        , LineChart.line Colors.blue Dots.triangle "Nina" model.data.nina
+    Html.div []
+        [ LineChart.viewCustom (chartConfig model)
+            [ LineChart.line Colors.pink Dots.diamond "Nora" model.data.nora
+            , LineChart.line Colors.cyan Dots.circle "Noah" model.data.noah
+            , LineChart.line Colors.blue Dots.triangle "Nina" model.data.nina
+            ]
         ]
-    ]
 
 
 
@@ -123,40 +121,40 @@ view model =
 
 chartConfig : Model -> LineChart.Config Datum Msg
 chartConfig model =
-  { y = Axis.default 450 "velocity" .velocity
-  , x = Axis.time 1270 "time" .time
-  , container = containerConfig
-  , interpolation = Interpolation.monotone
-  , intersection = Intersection.default
-  , legends = Legends.default
-  , events = Events.hoverMany Hint
-  , junk = Junk.hoverMany model.hinted formatX formatY
-  , grid = Grid.dots 1 Colors.gray
-  , area = Area.stacked 0.5
-  , line = Line.default
-  , dots = Dots.custom (Dots.empty 5 1)
-  }
+    { y = Axis.default 450 "velocity" .velocity
+    , x = Axis.time 1270 "time" .time
+    , container = containerConfig
+    , interpolation = Interpolation.monotone
+    , intersection = Intersection.default
+    , legends = Legends.default
+    , events = Events.hoverMany Hint
+    , junk = Junk.hoverMany model.hinted formatX formatY
+    , grid = Grid.dots 1 Colors.gray
+    , area = Area.stacked 0.5
+    , line = Line.default
+    , dots = Dots.custom (Dots.empty 5 1)
+    }
 
 
 containerConfig : Container.Config Msg
 containerConfig =
-  Container.custom
-    { attributesHtml = []
-    , attributesSvg = []
-    , size = Container.relative
-    , margin = Container.Margin 30 100 30 70
-    , id = "line-chart-area"
-    }
+    Container.custom
+        { attributesHtml = []
+        , attributesSvg = []
+        , size = Container.relative
+        , margin = Container.Margin 30 100 30 70
+        , id = "line-chart-area"
+        }
 
 
 formatX : Datum -> String
 formatX datum =
-  Date.Format.format "%e. %b, %Y" (Date.fromTime datum.time)
+    Date.Format.format "%e. %b, %Y" (Date.fromTime datum.time)
 
 
 formatY : Datum -> String
 formatY datum =
-  toString (round100 datum.velocity) ++ " m/s"
+    toString (round100 datum.velocity) ++ " m/s"
 
 
 
@@ -165,7 +163,7 @@ formatY datum =
 
 round100 : Float -> Float
 round100 float =
-  toFloat (round (float * 100)) / 100
+    toFloat (round (float * 100)) / 100
 
 
 
@@ -174,48 +172,58 @@ round100 float =
 
 generateData : Cmd Msg
 generateData =
-  let
-    genNumbers =
-      Random.list 40 (Random.float 5 20)
+    let
+        genNumbers =
+            Random.list 40 (Random.float 5 20)
 
-    compile a b c =
-      Data (toData a) (toData b) (toData c)
-  in
-  Random.Pipeline.generate compile
-    |> Random.Pipeline.with genNumbers
-    |> Random.Pipeline.with genNumbers
-    |> Random.Pipeline.with genNumbers
-    |> Random.Pipeline.send RecieveData
+        compile a b c =
+            Data (toData a) (toData b) (toData c)
+    in
+    Random.Pipeline.generate compile
+        |> Random.Pipeline.with genNumbers
+        |> Random.Pipeline.with genNumbers
+        |> Random.Pipeline.with genNumbers
+        |> Random.Pipeline.send RecieveData
 
 
 toData : List Float -> List Datum
 toData numbers =
-  let
-    toDatum index velocity =
-      Datum (indexToTime index) velocity
-  in
-  List.indexedMap toDatum numbers
+    let
+        toDatum index velocity =
+            Datum (indexToTime index) velocity
+    in
+    List.indexedMap toDatum numbers
 
 
 indexToTime : Int -> Time.Time
 indexToTime index =
-  Time.hour * 24 * 365 * 45 + -- 45 years
-  Time.hour * 24 * 30 + -- a month
-  Time.hour * 1 * toFloat index -- hours from first datum
-
-
-
+    Time.hour
+        * 24
+        * 365
+        * 45
+        + -- 45 years
+          Time.hour
+        * 24
+        * 30
+        + -- a month
+          Time.hour
+        * 1
+        * toFloat index
+
+
+
+-- hours from first datum
 -- PROGRAM
 
 
 main : Program Never Model Msg
 main =
-  Html.program
-    { init = init
-    , update = update
-    , view = view
-    , subscriptions = always Sub.none
-    }
+    Html.program
+        { init = init
+        , update = update
+        , view = view
+        , subscriptions = always Sub.none
+        }
 
 
 
@@ -224,7 +232,7 @@ main =
 
 source : String
 source =
-  """
+    """
   -- MODEL