Style charts

elm.json

@@ -11,6 +11,7 @@
             "elm/core": "1.0.5",
             "elm/html": "1.0.0",
             "elm/json": "1.1.3",
+            "elm/svg": "1.0.1",
             "elm-community/list-extra": "8.7.0",
             "myrho/elm-round": "1.0.5",
             "terezka/elm-charts": "4.0.0"
@@ -19,7 +20,6 @@
             "K-Adam/elm-dom": "1.0.0",
             "danhandrea/elm-time-extra": "1.1.0",
             "elm/parser": "1.1.0",
-            "elm/svg": "1.0.1",
             "elm/time": "1.0.0",
             "elm/url": "1.0.0",
             "elm/virtual-dom": "1.0.2",

src/Icon.elm

@@ -0,0 +1,19 @@
+module Icon exposing (..)
+
+import Html exposing (Html)
+import Svg exposing (path, svg)
+import Svg.Attributes exposing (d, stroke, strokeWidth, viewBox)
+
+
+chevronUp : Html msg
+chevronUp =
+    svg [ viewBox "0 0 24 24", stroke "currentColor", strokeWidth "1.5" ]
+        [ path [ d "m4.5 15.75 7.5-7.5 7.5 7.5" ] []
+        ]
+
+
+chevronDown : Html msg
+chevronDown =
+    svg [ viewBox "0 0 24 24", stroke "currentColor", strokeWidth "1.5" ]
+        [ path [ d "m19.5 8.25-7.5 7.5-7.5-7.5" ] []
+        ]

src/Main.elm

@@ -7,10 +7,11 @@ import Chart.Attributes as CA
 import Database
 import Deck
 import Draft exposing (Draft)
-import Html exposing (Html, button, div, img, span, text)
+import Html exposing (Html, a, button, div, img, span, text)
 import Html.Attributes exposing (alt, class, classList, disabled, src)
 import Html.Events as Events exposing (onClick)
 import Html.Keyed as Keyed
+import Icon exposing (chevronDown, chevronUp)
 import List.Extra as List
 import Round
 import Signals
@@ -45,6 +46,10 @@ type FocusStat
     | FocusIWD
 
 
+type alias ChartAccordion =
+    { cmc : Bool, signals : Bool, signalsDelta : Bool }
+
+
 type alias ReadyModel =
     { draft : Draft
     , database : Database.Database
@@ -52,6 +57,7 @@ type alias ReadyModel =
     , flipHighlighted : Bool
     , focusStat : FocusStat
     , deckProgress : DeckProgress
+    , chartAccordion : ChartAccordion
     }
 
 
@@ -71,6 +77,11 @@ init flags =
                 , flipHighlighted = False
                 , focusStat = FocusPickRate
                 , deckProgress = DeckUpToPick
+                , chartAccordion =
+                    { cmc = True
+                    , signals = False
+                    , signalsDelta = False
+                    }
                 }
             , Cmd.none
             )
@@ -92,6 +103,9 @@ type Msg
     | FlipHighlightedCard
     | SetFocusStat FocusStat
     | SetDeckProgress DeckProgress
+    | ToggleCMCChart
+    | ToggleSignalsChart
+    | ToggleSignalsDeltaChart
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
@@ -123,6 +137,27 @@ update msg model =
                 SetDeckProgress progress ->
                     ( Ready { mdl | deckProgress = progress }, Cmd.none )
 
+                ToggleCMCChart ->
+                    let
+                        chartAccordion =
+                            mdl.chartAccordion
+                    in
+                    ( Ready { mdl | chartAccordion = { chartAccordion | cmc = not mdl.chartAccordion.cmc } }, Cmd.none )
+
+                ToggleSignalsChart ->
+                    let
+                        chartAccordion =
+                            mdl.chartAccordion
+                    in
+                    ( Ready { mdl | chartAccordion = { chartAccordion | signals = not mdl.chartAccordion.signals } }, Cmd.none )
+
+                ToggleSignalsDeltaChart ->
+                    let
+                        chartAccordion =
+                            mdl.chartAccordion
+                    in
+                    ( Ready { mdl | chartAccordion = { chartAccordion | signalsDelta = not mdl.chartAccordion.signalsDelta } }, Cmd.none )
+
         Error mdl ->
             ( Error mdl, Cmd.none )
 
@@ -175,7 +210,7 @@ viewSidebar model =
 viewDeck : ReadyModel -> Html Msg
 viewDeck model =
     div [ class "mt-6" ]
-        [ div [ class "w-full flex" ]
+        [ div [ class "w-full flex mb-4" ]
             [ button
                 [ onClick (SetDeckProgress DeckUpToPick)
                 , disabled (model.deckProgress == DeckUpToPick)
@@ -205,9 +240,37 @@ viewDeck model =
                 ]
                 [ text "Entire deck" ]
             ]
-        , viewCmcChart model
-        , viewSignalsChart model
-        , viewSignalsDeltaChart model
+        , div [ class "overflow-y-auto" ]
+            [ viewChart .cmc ToggleCMCChart "CMC curve" (viewCmcChart model) model
+            , viewChart .signals ToggleSignalsChart "Signals (card count)" (viewSignalsChart model) model
+            , viewChart .signalsDelta ToggleSignalsDeltaChart "Signals (delta)" (viewSignalsDeltaChart model) model
+            ]
+        ]
+
+
+viewChart : (ChartAccordion -> Bool) -> Msg -> String -> Html Msg -> ReadyModel -> Html Msg
+viewChart isOpenF toggle title chart model =
+    div [ class "mb-2 w-full" ]
+        [ button
+            [ class "w-full flex justify-between items-center bg-slate-900 text-white p-2 rounded shadow"
+            , onClick toggle
+            ]
+            [ span [] [ text title ]
+            , span [ class "h-4 w-4" ]
+                [ if isOpenF model.chartAccordion then
+                    chevronUp
+
+                  else
+                    chevronDown
+                ]
+            ]
+        , if isOpenF model.chartAccordion then
+            div [ class "py-2" ]
+                [ chart
+                ]
+
+          else
+            div [] []
         ]
 
 
@@ -226,9 +289,16 @@ viewCmcChart model =
     div [ class "m-4" ]
         [ C.chart
             [ CA.height 300
+            , CA.range
+                [ CA.highest 7 CA.exactly
+                , CA.lowest 0 CA.exactly
+                ]
             ]
-            [ C.xLabels []
-            , C.yLabels [ CA.withGrid ]
+            [ C.xLabels [ CA.color "white" ]
+            , C.yLabels [ CA.withGrid, CA.color "white", CA.ints ]
+            , C.yAxis [ CA.color "white", CA.noArrow ]
+            , C.xAxis [ CA.color "white", CA.noArrow ]
+            , C.yTicks [ CA.color "white", CA.ints ]
             , bars
             ]
         ]
@@ -242,11 +312,11 @@ viewSignalsChart model =
 
         lines =
             C.series (first >> toFloat)
-                [ C.interpolated (second >> .blue >> toFloat) [ CA.color CA.blue ] []
-                , C.interpolated (second >> .red >> toFloat) [ CA.color CA.red ] []
-                , C.interpolated (second >> .black >> toFloat) [ CA.color "black" ] []
-                , C.interpolated (second >> .green >> toFloat) [ CA.color CA.green ] []
-                , C.interpolated (second >> .white >> toFloat) [ CA.color "white" ] []
+                [ C.interpolated (second >> .blue >> toFloat) [ CA.color CA.blue, CA.width 2 ] []
+                , C.interpolated (second >> .red >> toFloat) [ CA.color CA.red, CA.width 2 ] []
+                , C.interpolated (second >> .black >> toFloat) [ CA.color "black", CA.width 2 ] []
+                , C.interpolated (second >> .green >> toFloat) [ CA.color CA.green, CA.width 2 ] []
+                , C.interpolated (second >> .white >> toFloat) [ CA.color "white", CA.width 2 ] []
                 ]
                 signals
     in
@@ -254,8 +324,11 @@ viewSignalsChart model =
         [ C.chart
             [ CA.height 300
             ]
-            [ C.xLabels []
-            , C.yLabels [ CA.withGrid ]
+            [ C.yLabels [ CA.withGrid, CA.color "white" ]
+            , C.xLabels [ CA.color "white" ]
+            , C.yAxis [ CA.color "white", CA.noArrow ]
+            , C.xAxis [ CA.color "white", CA.noArrow ]
+            , C.yTicks [ CA.color "white", CA.ints ]
             , lines
             ]
         ]
@@ -269,11 +342,11 @@ viewSignalsDeltaChart model =
 
         lines =
             C.series (first >> toFloat)
-                [ C.interpolated (second >> .blue) [ CA.color CA.blue ] []
-                , C.interpolated (second >> .red) [ CA.color CA.red ] []
-                , C.interpolated (second >> .black) [ CA.color "black" ] []
-                , C.interpolated (second >> .green) [ CA.color CA.green ] []
-                , C.interpolated (second >> .white) [ CA.color "white" ] []
+                [ C.interpolated (second >> .blue) [ CA.color CA.blue, CA.width 2 ] []
+                , C.interpolated (second >> .red) [ CA.color CA.red, CA.width 2 ] []
+                , C.interpolated (second >> .black) [ CA.color "black", CA.width 2 ] []
+                , C.interpolated (second >> .green) [ CA.color CA.green, CA.width 2 ] []
+                , C.interpolated (second >> .white) [ CA.color "white", CA.width 2 ] []
                 ]
                 signals
     in
@@ -281,8 +354,11 @@ viewSignalsDeltaChart model =
         [ C.chart
             [ CA.height 300
             ]
-            [ C.xLabels []
-            , C.yLabels [ CA.withGrid ]
+            [ C.yLabels [ CA.withGrid, CA.color "white" ]
+            , C.xLabels [ CA.color "white" ]
+            , C.yAxis [ CA.color "white", CA.noArrow ]
+            , C.xAxis [ CA.color "white", CA.noArrow ]
+            , C.yTicks [ CA.color "white", CA.ints ]
             , lines
             ]
         ]