elm xD

module Components.LineChart exposing (view)

import Axis
import Color
import Element as E
import Path exposing (Path)
import Scale exposing (ContinuousScale)
import Shape
import Time
import TypedSvg exposing (g, svg)
import TypedSvg.Attributes exposing (class, fill, stroke, transform, viewBox)
import TypedSvg.Attributes.InPx exposing (strokeWidth)
import TypedSvg.Core exposing (Svg)
import TypedSvg.Types exposing (Paint(..), Transform(..))


w : Float
w =
    900


h : Float
h =
    450


padding : Float
padding =
    30


time_start : Int
time_start =
    1607731200000


time_end : Int
time_end =
    time_start + 1000 * 60 * 60 * 24


xScale : ContinuousScale Time.Posix
xScale =
    Scale.time Time.utc ( 0, w - 2 * padding ) ( Time.millisToPosix time_start, Time.millisToPosix time_end )


yScale : ContinuousScale Float
yScale =
    Scale.linear ( h - 2 * padding, 0 ) ( 0, 3 )


xAxis : Svg msg
xAxis =
    Axis.bottom [ Axis.tickCount 24 ] xScale


yAxis : Svg msg
yAxis =
    Axis.left [ Axis.tickCount 3 ] yScale


transformToLineData : ( Time.Posix, Float ) -> Maybe ( Float, Float )
transformToLineData ( x, y ) =
    Just ( Scale.convert xScale x, Scale.convert yScale y )


line : List ( Time.Posix, Float ) -> Path
line model =
    List.map transformToLineData model
        |> Shape.line (Shape.stepCurve 0)


view : E.Element msg
view =
    E.html <|
        svg [ viewBox 0 0 w h ] <|
            [ g [ transform [ Translate (padding - 1) (h - padding) ] ]
                [ xAxis ]
            , g [ transform [ Translate (padding - 1) padding ] ]
                [ yAxis ]
            ]
                ++ List.indexedMap view_row time_series_list


view_row : Int -> List ( Time.Posix, Float ) -> Svg a
view_row index time_series =
    g [ transform [ Translate padding padding ] ]
        [ Path.element (line time_series) [ stroke <| Paint <| Color.rgb 0 0 0, strokeWidth 8, fill PaintNone ]
        ]


time_series_list : List (List ( Time.Posix, Float ))
time_series_list =
    [ [ ( Time.millisToPosix <| time_start + 3600000 * 0, 1 )
      , ( Time.millisToPosix <| time_start + 3600000 * 1, 1 )
      , ( Time.millisToPosix <| time_start + 3600000 * 2, 1 )
      , ( Time.millisToPosix <| time_start + 3600000 * 3, 1 )
      , ( Time.millisToPosix <| time_start + 3600000 * 4, 1 )
      ]
    , [ ( Time.millisToPosix <| time_start + 3600000 * 5, 1 )
      , ( Time.millisToPosix <| time_start + 3600000 * 6, 1 )
      ]
    , [ ( Time.millisToPosix <| time_start + 3600000 * 0, 2 )
      , ( Time.millisToPosix <| time_start + 3600000 * 24, 2 )
      ]
    ]