add basic chart

Will merge to master only after the charts package is released (terezka/line-charts#27), because I don't want to require elm-github-install.

webui/LintConfig.elm

@@ -0,0 +1,38 @@
+module LintConfig exposing (config)
+
+import Lint.Types exposing (LintRule, Severity(..))
+import Lint.Rules.DefaultPatternPosition
+import Lint.Rules.NoConstantCondition
+import Lint.Rules.NoDebug
+import Lint.Rules.NoDuplicateImports
+import Lint.Rules.NoExposingEverything
+import Lint.Rules.NoImportingEverything
+import Lint.Rules.NoNestedLet
+import Lint.Rules.NoUnannotatedFunction
+import Lint.Rules.NoUnusedVariables
+import Lint.Rules.NoUselessIf
+import Lint.Rules.NoUselessPatternMatching
+import Lint.Rules.NoWarningComments
+import Lint.Rules.SimplifyPiping
+import Lint.Rules.SimplifyPropertyAccess
+import Lint.Rules.ElmTest.NoDuplicateTestBodies
+
+
+config : List ( Severity, LintRule )
+config =
+    [ ( Critical, Lint.Rules.DefaultPatternPosition.rule { position = Lint.Rules.DefaultPatternPosition.Last } )
+    , ( Critical, Lint.Rules.NoConstantCondition.rule )
+    , ( Critical, Lint.Rules.NoDebug.rule )
+    , ( Critical, Lint.Rules.NoDuplicateImports.rule )
+    , ( Critical, Lint.Rules.NoExposingEverything.rule )
+    , ( Critical, Lint.Rules.NoImportingEverything.rule { exceptions = [ "Html" ] } )
+    , ( Critical, Lint.Rules.NoNestedLet.rule )
+    , ( Critical, Lint.Rules.NoUnannotatedFunction.rule )
+    , ( Critical, Lint.Rules.NoUnusedVariables.rule )
+    , ( Critical, Lint.Rules.NoUselessIf.rule )
+    , ( Critical, Lint.Rules.NoUselessPatternMatching.rule )
+    , ( Warning, Lint.Rules.NoWarningComments.rule )
+    , ( Critical, Lint.Rules.SimplifyPiping.rule )
+    , ( Critical, Lint.Rules.SimplifyPropertyAccess.rule )
+    , ( Critical, Lint.Rules.ElmTest.NoDuplicateTestBodies.rule )
+    ]

webui/Makefile

@@ -25,6 +25,7 @@ live:  ## Runs an elm-live server for development. Use alongside the normal run
 
 $(OUTJS): $(shell find src)
 	npm install
+	$(shell npm bin)/elm-github-install
 	$(ELM_MAKE) $(ELMFLAGS) --yes $(MAIN) --output $(OUTJS)
 
 # -- HELPERS -- #

webui/elm-package.json

@@ -16,9 +16,15 @@
         "elm-lang/html": "2.0.0 <= v <= 2.0.0",
         "elm-lang/http": "1.0.0 <= v <= 1.0.0",
         "elm-lang/navigation": "2.1.0 <= v <= 2.1.0",
-        "juanedi/charty": "2.0.0 <= v < 3.0.0",
-        "justinmimbs/elm-date-extra": "3.0.0 <= v <= 3.0.0",
-        "rgrempel/elm-route-url": "4.0.0 <= v <= 4.0.0"
+        "justinmimbs/elm-date-extra": "2.0.0 <= v <= 3.0.0",
+        "rgrempel/elm-route-url": "4.0.0 <= v <= 4.0.0",
+        "terezka/line-charts": "0.0.0 <= v <= 1.0.0"
+    },
+    "dependency-sources": {
+        "terezka/line-charts": {
+            "url": "[email protected]:terezka/line-charts.git",
+            "ref": "master"
+        }
     },
     "elm-version": "0.18.0 <= v < 0.19.0"
 }

webui/package.json

@@ -6,6 +6,7 @@
   "license": "MIT",
   "repository": "https://github.com/AnotherKamila/stalkme",
   "dependencies": {
-    "elm": "0.18.*"
+    "elm": "0.18.*",
+    "elm-github-install": "^1.6.1"
   }
 }

webui/src/CsvTsdb/Graph.elm

@@ -1,37 +1,89 @@
 module CsvTsdb.Graph exposing (..)
 
+import Array
 import Date
 import Time
 import List             exposing (..)
 import List.Extra       exposing (..)
 import Html             exposing (Html)
 import Html.Attributes  exposing (class)
-import Charty.LineChart as LineChart exposing (Dataset)
-import Charty.Color
+
+--import Svg.Attributes as SvgA
+import LineChart
+import LineChart.Dots as Dots
+import LineChart as LineChart
+import LineChart.Junk as Junk exposing (..)
+import LineChart.Dots as Dots
+import LineChart.Container as Container
+import LineChart.Interpolation as Interpolation
+import LineChart.Axis.Intersection as Intersection
+import LineChart.Axis as Axis
+import LineChart.Legends as Legends
+import LineChart.Line as Line
+import LineChart.Events as Events
+import LineChart.Grid as Grid
+import LineChart.Legends as Legends
+import LineChart.Area as Area
+import Color exposing (Color)
 
 import CsvTsdb.Model exposing (Record)
 
-config = { drawPoints      = True
-         , background      = "white"
-         , colorAssignment = Charty.Color.assignDefaults
-         , labelPrecision  = 0
-         , drawLabels      = True
-         }
-
-records_to_dataset : List Record -> Dataset
-records_to_dataset =
-    let
-        grouplabel : List Record -> String
-        grouplabel = map .label >> head >> Maybe.withDefault "whatever" -- always non-empty
-        record2datapoint : Record -> LineChart.DataPoint
-        record2datapoint r = (r.date |> Date.toTime |> Time.inSeconds, r.value)
-        group2series : List Record -> LineChart.Series
-        group2series rs = { label = grouplabel rs, data = map record2datapoint rs }
+type alias Model = { hovered : Maybe Record }
+init_model = { hovered : Nothing }
+
+config : LineChart.Config Record m
+config =
+    { y = Axis.default 450 ""     .value
+    , x = Axis.time    700 "date" (.date >> Date.toTime)
+    , container =
+        -- Try out these different configs!
+         Container.responsive "chart-1" -- Try resizing the window!
+        --Container.custom
+        --    { attributesHtml = []
+        --    , attributesSvg = [ SvgA.style "background: #f2fff1;" ]
+        --    , size = Container.static
+        --    , margin = Container.Margin 20 140 60 80
+        --    , id = "line-chart-1"
+        --    }
+    , interpolation = Interpolation.default
+    , intersection = Intersection.default
+    , legends = Legends.default
+    , events = Events.default
+    , junk = Junk.hoverMany model.hinted formatX formatY
+    , grid = Grid.default
+    , area = Area.default
+    , line = Line.default
+    , dots = Dots.default
+    }
+
+records_to_series : List Record -> List (String, List Record)
+records_to_series =
+    let grouplabel = map .label >> head >> Maybe.withDefault "whatever" -- always non-empty
+        group2series rs = (grouplabel rs, sortBy (.date >> Date.toTime) rs)
     in sortBy .label >> groupWhile (\a b -> a.label == b.label) >> map group2series
 
-view : List Record -> Html m
-view = records_to_dataset >>
-    LineChart.view config >>
-    List.singleton >>
-    Html.div [ class "csvtsdb-graph" ]
+colorize : List (Color -> a) -> List a
+colorize xs =
+    let step = 360.0/(length xs |> toFloat)
+        deg2color x = Color.hsl (degrees x) 0.8 0.4
+        colors = (range 1 50) |> map (toFloat >> (*)step >> deg2color)
+    in map2 (<|) xs colors
 
+--view : List Record -> Html m
+--view =
+--    let wrap_series (label, data) color = label ++ " " ++ toString color |> Html.text
+--    in records_to_series >>
+--        map wrap_series >>
+--        colorize >>
+--        Html.div [ class "csvtsdb-graph" ]
+
+
+view : List Record -> Html m
+view =
+    let wrap_series (label, data) color = LineChart.line color Dots.circle label data
+    in records_to_series >>
+        map wrap_series >>
+        colorize >>
+        LineChart.viewCustom config >>
+        List.singleton >>
+        Html.div [ class "csvtsdb-graph" ]