From f64436cb7bb3750f6aad4f1c8beb57953756de03 Mon Sep 17 00:00:00 2001 From: Ralf Northman Date: Fri, 19 Apr 2019 15:57:46 +0200 Subject: [PATCH 1/2] Ran elm-format on the whole package. --- docs/src/Area.elm | 210 +++--- docs/src/Lines.elm | 331 ++++----- docs/src/Main.elm | 321 ++++----- docs/src/Random/Pipeline.elm | 15 +- docs/src/Selection.elm | 610 +++++++++-------- docs/src/Stepped.elm | 279 ++++---- docs/src/Ticks.elm | 267 ++++---- examples/Area.elm | 110 ++- examples/Axis.elm | 371 +++++----- examples/BrokenData.elm | 136 ++-- examples/Container.elm | 124 ++-- examples/Docs/Axis/Example1.elm | 101 ++- examples/Docs/Axis/Example2.elm | 101 ++- examples/Docs/Axis/Example3.elm | 120 ++-- examples/Docs/Axis/Example4.elm | 111 ++- examples/Docs/Axis/Example5.elm | 111 ++- examples/Docs/Axis/Example6.elm | 129 ++-- examples/Docs/AxisLine/Example1.elm | 157 +++-- examples/Docs/Colors/Example1.elm | 89 ++- examples/Docs/Container/Example1.elm | 99 ++- examples/Docs/Container/Example2.elm | 99 ++- examples/Docs/Container/Example3.elm | 113 ++- examples/Docs/Container/Example4.elm | 99 ++- examples/Docs/Dots/Example1.elm | 68 +- examples/Docs/Dots/Example2.elm | 103 ++- examples/Docs/Dots/Example3.elm | 118 ++-- examples/Docs/Dots/Example4.elm | 140 ++-- examples/Docs/Dots/Example5.elm | 118 ++-- examples/Docs/Dots/Example6.elm | 146 ++-- examples/Docs/Events/Example1.elm | 118 ++-- examples/Docs/Events/Example2.elm | 118 ++-- examples/Docs/Events/Example3.elm | 118 ++-- examples/Docs/Events/Example4.elm | 126 ++-- examples/Docs/Intersection/Example1.elm | 112 ++- examples/Docs/Junk/Example1.elm | 121 ++-- examples/Docs/Junk/Example2.elm | 150 ++-- examples/Docs/Junk/Example3.elm | 122 ++-- examples/Docs/Junk/Example4.elm | 133 ++-- examples/Docs/Legends/Example1.elm | 99 ++- examples/Docs/Legends/Example2.elm | 99 ++- examples/Docs/Legends/Example3.elm | 125 ++-- examples/Docs/Line/Example1.elm | 99 ++- examples/Docs/Line/Example2.elm | 118 ++-- examples/Docs/Line/Example3.elm | 144 ++-- examples/Docs/Line/Example4.elm | 152 ++--- examples/Docs/LineChart/Example1.elm | 10 +- examples/Docs/LineChart/Example2.elm | 27 +- examples/Docs/LineChart/Example3.elm | 31 +- examples/Docs/LineChart/Example4.elm | 39 +- examples/Docs/LineChart/Example5.elm | 48 +- examples/Docs/LineChart/Example6.elm | 48 +- examples/Docs/LineChart/Example7.elm | 75 +- examples/Docs/LineChart/Example8.elm | 99 ++- examples/Docs/LineChart/Example9.elm | 99 ++- examples/Docs/Range/Example1.elm | 142 ++-- examples/Docs/Tick/Example1.elm | 190 +++--- examples/Docs/Ticks/Example1.elm | 158 +++-- examples/Docs/Ticks/Example2.elm | 172 ++--- examples/Docs/Title/Example1.elm | 169 ++--- examples/Docs/Values/Example1.elm | 138 ++-- examples/Docs/Values/Example2.elm | 140 ++-- examples/Docs/Values/Example3.elm | 138 ++-- examples/Dots.elm | 134 ++-- examples/Events1.elm | 224 +++--- examples/Events2.elm | 130 ++-- examples/Events3.elm | 130 ++-- examples/Explanation/ChartArea.elm | 105 ++- examples/Explanation/Intersections.elm | 99 +-- examples/Explanation/Ranges.elm | 162 ++--- examples/Explanation/SvgAndDataSpace.elm | 168 ++--- examples/Grid.elm | 104 ++- examples/Interpolation.elm | 108 ++- examples/Intersection.elm | 110 ++- examples/Junk.elm | 151 ++-- examples/Legends.elm | 147 ++-- examples/Line.elm | 109 ++- examples/Lines.elm | 60 +- examples/LotsOfData.elm | 127 ++-- examples/Selection1.elm | 150 ++-- examples/Selection2.elm | 443 ++++++------ examples/Simple.elm | 21 +- examples/Size.elm | 103 ++- examples/Tooltip1.elm | 129 ++-- examples/Tooltip2.elm | 228 ++++--- examples/Tooltip3.elm | 123 ++-- src/Internal/Area.elm | 102 ++- src/Internal/Axis.elm | 413 ++++++----- src/Internal/Axis/Intersection.elm | 37 +- src/Internal/Axis/Line.elm | 82 +-- src/Internal/Axis/Range.elm | 83 ++- src/Internal/Axis/Tick.elm | 167 ++--- src/Internal/Axis/Ticks.elm | 52 +- src/Internal/Axis/Title.elm | 47 +- src/Internal/Axis/Values.elm | 222 +++--- src/Internal/Axis/Values/Time.elm | 299 ++++---- src/Internal/Container.elm | 120 ++-- src/Internal/Coordinate.elm | 147 ++-- src/Internal/Data.elm | 23 +- src/Internal/Dots.elm | 422 +++++++----- src/Internal/Events.elm | 374 +++++----- src/Internal/Grid.elm | 85 +-- src/Internal/Interpolation.elm | 268 +++++--- src/Internal/Legends.elm | 252 +++---- src/Internal/Line.elm | 387 ++++++----- src/Internal/Path.elm | 206 +++--- src/Internal/Svg.elm | 295 ++++---- src/Internal/Utils.elm | 115 ++-- src/LineChart.elm | 832 ++++++++++++----------- src/LineChart/Area.elm | 13 +- src/LineChart/Axis.elm | 73 +- src/LineChart/Axis/Intersection.elm | 27 +- src/LineChart/Axis/Line.elm | 64 +- src/LineChart/Axis/Range.elm | 37 +- src/LineChart/Axis/Tick.elm | 305 +++++---- src/LineChart/Axis/Ticks.elm | 93 ++- src/LineChart/Axis/Title.elm | 109 +-- src/LineChart/Axis/Values.elm | 79 ++- src/LineChart/Colors.elm | 68 +- src/LineChart/Container.elm | 72 +- src/LineChart/Coordinate.elm | 94 +-- src/LineChart/Dots.elm | 217 +++--- src/LineChart/Events.elm | 113 +-- src/LineChart/Grid.elm | 11 +- src/LineChart/Interpolation.elm | 14 +- src/LineChart/Junk.elm | 289 ++++---- src/LineChart/Legends.elm | 102 ++- src/LineChart/Line.elm | 73 +- tests/Coordinate.elm | 15 +- 128 files changed, 9638 insertions(+), 8998 deletions(-) diff --git a/docs/src/Area.elm b/docs/src/Area.elm index 59f5e9d..59bd0d0 100644 --- a/docs/src/Area.elm +++ b/docs/src/Area.elm @@ -1,27 +1,25 @@ -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 @@ -29,22 +27,22 @@ import LineChart.Axis.Intersection as Intersection 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,12 +64,12 @@ 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 } @@ -79,27 +77,27 @@ setHint hinted model = 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 diff --git a/docs/src/Lines.elm b/docs/src/Lines.elm index 1e38825..016b563 100644 --- a/docs/src/Lines.elm +++ b/docs/src/Lines.elm @@ -1,32 +1,30 @@ -module Lines exposing (Model, init, Msg, update, view, source) +module Lines exposing (Model, Msg, init, source, update, view) -import Html -import Svg -import Random -import Random.Pipeline -import Time import Color.Manipulate as Manipulate +import Html import LineChart -import LineChart.Junk as Junk import LineChart.Area as Area import LineChart.Axis as Axis -import LineChart.Axis.Title as Title +import LineChart.Axis.Intersection as Intersection +import LineChart.Axis.Line as AxisLine import LineChart.Axis.Range as Range -import LineChart.Axis.Ticks as Ticks import LineChart.Axis.Tick as Tick -import LineChart.Axis.Line as AxisLine -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.Ticks as Ticks +import LineChart.Axis.Title as Title 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 Svg +import Time @@ -34,25 +32,25 @@ import LineChart.Axis.Intersection as Intersection type alias Model = - { data : Data - , hinted : Maybe Datum - } + { data : Data + , hinted : Maybe Datum + } type alias Data = - { denmark : List Datum - , sweden : List Datum - , iceland : List Datum - , greenland : List Datum - , norway : List Datum - , finland : List Datum - } + { denmark : List Datum + , sweden : List Datum + , iceland : List Datum + , greenland : List Datum + , norway : List Datum + , finland : List Datum + } type alias Datum = - { time : Time.Time - , rain : Float - } + { time : Time.Time + , rain : Float + } @@ -61,11 +59,11 @@ type alias Datum = init : ( Model, Cmd Msg ) init = - ( { data = Data [] [] [] [] [] [] - , hinted = Nothing - } - , generateData - ) + ( { data = Data [] [] [] [] [] [] + , hinted = Nothing + } + , generateData + ) @@ -74,12 +72,12 @@ init = setData : Data -> Model -> Model setData data model = - { model | data = data } + { model | data = data } setHint : Maybe Datum -> Model -> Model setHint hinted model = - { model | hinted = hinted } + { model | hinted = hinted } @@ -87,27 +85,27 @@ setHint hinted model = type Msg - = RecieveData Data - | Hint (Maybe Datum) + = RecieveData Data + | Hint (Maybe Datum) update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = - case msg of - RecieveData numbers -> - model - |> setData numbers - |> addCmd Cmd.none + case msg of + RecieveData numbers -> + model + |> setData numbers + |> addCmd Cmd.none - Hint point -> - model - |> setHint point - |> addCmd Cmd.none + Hint point -> + model + |> setHint point + |> addCmd Cmd.none addCmd : Cmd Msg -> Model -> ( Model, Cmd Msg ) addCmd cmd model = - ( model, Cmd.none ) + ( model, Cmd.none ) @@ -116,16 +114,16 @@ addCmd cmd model = view : Model -> Html.Html Msg view model = - Html.div [] - [ LineChart.viewCustom (chartConfig model) - [ LineChart.line (Manipulate.lighten 0.2 Colors.cyan) Dots.circle "Denmark" model.data.denmark - , LineChart.line (Manipulate.lighten 0 Colors.cyan) Dots.circle "Sweden" model.data.sweden - , LineChart.line (Manipulate.lighten 0.2 Colors.blue) Dots.circle "Iceland" model.data.iceland - , LineChart.line (Manipulate.lighten 0 Colors.blue) Dots.circle "Greenland" model.data.greenland - , LineChart.line (Manipulate.lighten 0 Colors.pink) Dots.circle "Norway" model.data.norway - , LineChart.line (Manipulate.darken 0.2 Colors.pink) Dots.circle "Finland" model.data.finland + Html.div [] + [ LineChart.viewCustom (chartConfig model) + [ LineChart.line (Manipulate.lighten 0.2 Colors.cyan) Dots.circle "Denmark" model.data.denmark + , LineChart.line (Manipulate.lighten 0 Colors.cyan) Dots.circle "Sweden" model.data.sweden + , LineChart.line (Manipulate.lighten 0.2 Colors.blue) Dots.circle "Iceland" model.data.iceland + , LineChart.line (Manipulate.lighten 0 Colors.blue) Dots.circle "Greenland" model.data.greenland + , LineChart.line (Manipulate.lighten 0 Colors.pink) Dots.circle "Norway" model.data.norway + , LineChart.line (Manipulate.darken 0.2 Colors.pink) Dots.circle "Finland" model.data.finland + ] ] - ] @@ -134,19 +132,19 @@ view model = chartConfig : Model -> LineChart.Config Datum Msg chartConfig model = - { y = yAxisConfig - , x = xAxisConfig - , container = containerConfig - , interpolation = Interpolation.monotone - , intersection = Intersection.default - , legends = Legends.default - , events = eventsConfig - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = lineConfig model.hinted - , dots = Dots.custom (Dots.disconnected 4 2) - } + { y = yAxisConfig + , x = xAxisConfig + , container = containerConfig + , interpolation = Interpolation.monotone + , intersection = Intersection.default + , legends = Legends.default + , events = eventsConfig + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = lineConfig model.hinted + , dots = Dots.custom (Dots.disconnected 4 2) + } @@ -155,30 +153,32 @@ chartConfig model = yAxisConfig : Axis.Config Datum Msg yAxisConfig = - Axis.custom - { title = Title.atDataMax -10 -10 "Rain" - , variable = Just << .rain - , pixels = 450 - , range = Range.padded 20 20 - , axisLine = AxisLine.rangeFrame Colors.gray - , ticks = Ticks.custom <| \dataRange axisRange -> - [ tickRain ( dataRange.min, "bits" ) - , tickRain ( middle dataRange, "some" ) - , tickRain ( dataRange.max, "lots" ) - ] - } + Axis.custom + { title = Title.atDataMax -10 -10 "Rain" + , variable = Just << .rain + , pixels = 450 + , range = Range.padded 20 20 + , axisLine = AxisLine.rangeFrame Colors.gray + , ticks = + Ticks.custom <| + \dataRange axisRange -> + [ tickRain ( dataRange.min, "bits" ) + , tickRain ( middle dataRange, "some" ) + , tickRain ( dataRange.max, "lots" ) + ] + } xAxisConfig : Axis.Config Datum Msg xAxisConfig = - Axis.custom - { title = Title.default "Time" - , variable = Just << .time - , pixels = 1270 - , range = Range.padded 20 20 - , axisLine = AxisLine.none - , ticks = Ticks.timeCustom 10 tickTime - } + Axis.custom + { title = Title.default "Time" + , variable = Just << .time + , pixels = 1270 + , range = Range.padded 20 20 + , axisLine = AxisLine.none + , ticks = Ticks.timeCustom 10 tickTime + } @@ -187,34 +187,37 @@ xAxisConfig = tickRain : ( Float, String ) -> Tick.Config msg tickRain ( value, label ) = - Tick.custom - { position = value - , color = Colors.gray - , width = 1 - , length = 5 - , grid = True - , direction = Tick.negative - , label = Just (tickLabel label) - } + Tick.custom + { position = value + , color = Colors.gray + , width = 1 + , length = 5 + , grid = True + , direction = Tick.negative + , label = Just (tickLabel label) + } tickTime : Tick.Time -> Tick.Config msg tickTime time = - let label = Tick.format time in - Tick.custom - { position = time.timestamp - , color = Colors.gray - , width = 1 - , length = 5 - , grid = False - , direction = Tick.negative - , label = Just (tickLabel label) - } + let + label = + Tick.format time + in + Tick.custom + { position = time.timestamp + , color = Colors.gray + , width = 1 + , length = 5 + , grid = False + , direction = Tick.negative + , label = Just (tickLabel label) + } tickLabel : String -> Svg.Svg msg tickLabel = - Junk.label Colors.black + Junk.label Colors.black @@ -223,13 +226,13 @@ tickLabel = containerConfig : Container.Config Msg containerConfig = - Container.custom - { attributesHtml = [] - , attributesSvg = [] - , size = Container.relative - , margin = Container.Margin 30 180 30 70 - , id = "line-chart-lines" - } + Container.custom + { attributesHtml = [] + , attributesSvg = [] + , size = Container.relative + , margin = Container.Margin 30 180 30 70 + , id = "line-chart-lines" + } @@ -238,10 +241,10 @@ containerConfig = eventsConfig : Events.Config Datum Msg eventsConfig = - Events.custom - [ Events.onMouseMove Hint Events.getNearest - , Events.onMouseLeave (Hint Nothing) - ] + Events.custom + [ Events.onMouseMove Hint Events.getNearest + , Events.onMouseLeave (Hint Nothing) + ] @@ -250,20 +253,21 @@ eventsConfig = lineConfig : Maybe Datum -> Line.Config Datum lineConfig maybeHovered = - Line.custom (toLineStyle maybeHovered) + Line.custom (toLineStyle maybeHovered) toLineStyle : Maybe Datum -> List Datum -> Line.Style toLineStyle maybeHovered lineData = - case maybeHovered of - Nothing -> - Line.style 1 identity + case maybeHovered of + Nothing -> + Line.style 1 identity - Just hovered -> - if List.any ((==) hovered) lineData then - Line.style 2 identity - else - Line.style 1 (Manipulate.grayscale) + Just hovered -> + if List.any ((==) hovered) lineData then + Line.style 2 identity + + else + Line.style 1 Manipulate.grayscale @@ -272,12 +276,12 @@ toLineStyle maybeHovered lineData = round10 : Float -> Float round10 float = - toFloat (round (float * 10)) / 10 + toFloat (round (float * 10)) / 10 middle : Coordinate.Range -> Float middle r = - r.min + (r.max - r.min) / 2 + r.min + (r.max - r.min) / 2 @@ -286,40 +290,40 @@ middle r = generateData : Cmd Msg generateData = - let - genNumbers min max = - Random.list 10 (Random.float min max) - - compile a b c d e f = - Data (toData a) (toData b) (toData c) (toData d) (toData e) (toData f) - in - Random.Pipeline.generate compile - |> Random.Pipeline.with (genNumbers 50 90) - |> Random.Pipeline.with (genNumbers 20 60) - |> Random.Pipeline.with (genNumbers 30 60) - |> Random.Pipeline.with (genNumbers 40 90) - |> Random.Pipeline.with (genNumbers 80 100) - |> Random.Pipeline.with (genNumbers 70 90) - |> Random.Pipeline.send RecieveData + let + genNumbers min max = + Random.list 10 (Random.float min max) + + compile a b c d e f = + Data (toData a) (toData b) (toData c) (toData d) (toData e) (toData f) + in + Random.Pipeline.generate compile + |> Random.Pipeline.with (genNumbers 50 90) + |> Random.Pipeline.with (genNumbers 20 60) + |> Random.Pipeline.with (genNumbers 30 60) + |> Random.Pipeline.with (genNumbers 40 90) + |> Random.Pipeline.with (genNumbers 80 100) + |> Random.Pipeline.with (genNumbers 70 90) + |> Random.Pipeline.send RecieveData toData : List Float -> List Datum toData numbers = - let - toDatum index rain = - Datum (indexToTime index) rain - in - List.indexedMap toDatum numbers + let + toDatum index rain = + Datum (indexToTime index) rain + in + List.indexedMap toDatum numbers indexToTime : Int -> Time.Time indexToTime index = - Time.hour * 24 * 365 * 30 + xInterval * toFloat index + Time.hour * 24 * 365 * 30 + xInterval * toFloat index xInterval : Time.Time xInterval = - Time.hour * 24 * 31 + Time.hour * 24 * 31 @@ -328,13 +332,12 @@ xInterval = 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 + } @@ -343,7 +346,7 @@ main = source : String source = - """ + """ -- MODEL diff --git a/docs/src/Main.elm b/docs/src/Main.elm index 0480984..547c6e3 100644 --- a/docs/src/Main.elm +++ b/docs/src/Main.elm @@ -1,15 +1,15 @@ -port module Main exposing (..) +port module Main exposing (Id, Model, Msg(..), highlight, init, main, setBodyScroll, update, view, viewExample, viewSource, viewTitle) +import Area +import Dict import Html import Html.Attributes import Html.Events import Html.Lazy -import Dict -import Area +import Lines import Selection import Stepped import Ticks -import Lines @@ -17,18 +17,18 @@ import Lines type alias Model = - { focused : Id - , isSourceOpen : Bool - , selection : Selection.Model - , area : Area.Model - , stepped : Stepped.Model - , ticks : Ticks.Model - , lines : Lines.Model - } + { focused : Id + , isSourceOpen : Bool + , selection : Selection.Model + , area : Area.Model + , stepped : Stepped.Model + , ticks : Ticks.Model + , lines : Lines.Model + } type alias Id = - Int + Int @@ -37,22 +37,22 @@ type alias Id = init : ( Model, Cmd Msg ) init = - let - ( selection, cmdSelection ) = - Selection.init + let + ( selection, cmdSelection ) = + Selection.init - ( area, cmdArea ) = - Area.init + ( area, cmdArea ) = + Area.init - ( stepped, cmdStepped ) = - Stepped.init + ( stepped, cmdStepped ) = + Stepped.init - ( ticks, cmdTicks ) = - Ticks.init + ( ticks, cmdTicks ) = + Ticks.init - ( lines, cmdLines ) = - Lines.init - in + ( lines, cmdLines ) = + Lines.init + in ( { focused = 0 , isSourceOpen = False , selection = selection @@ -72,87 +72,91 @@ init = ) + -- UPDATE type Msg - = Focus Id - | CloseSource - | SelectionMsg Selection.Msg - | AreaMsg Area.Msg - | SteppedMsg Stepped.Msg - | TicksMsg Ticks.Msg - | LinesMsg Lines.Msg + = Focus Id + | CloseSource + | SelectionMsg Selection.Msg + | AreaMsg Area.Msg + | SteppedMsg Stepped.Msg + | TicksMsg Ticks.Msg + | LinesMsg Lines.Msg update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = - case msg of - Focus id -> - let - isSourceOpen = - if model.isSourceOpen && model.focused == id then - False - else if model.focused /= id then - True - else - not model.isSourceOpen - in - ( { model | isSourceOpen = isSourceOpen - , focused = id - } - , setBodyScroll isSourceOpen - ) - - CloseSource -> - ( { model | isSourceOpen = False } - , setBodyScroll False - ) - - SelectionMsg msg -> - let - ( selection, cmd ) = - Selection.update msg model.selection - in - ( { model | selection = selection } - , Cmd.map SelectionMsg cmd - ) - - AreaMsg msg -> - let - ( area, cmd ) = - Area.update msg model.area - in - ( { model | area = area } - , Cmd.map AreaMsg cmd - ) - - SteppedMsg msg -> - let - ( stepped, cmd ) = - Stepped.update msg model.stepped - in - ( { model | stepped = stepped } - , Cmd.map SteppedMsg cmd - ) - - TicksMsg msg -> - let - ( ticks, cmd ) = - Ticks.update msg model.ticks - in - ( { model | ticks = ticks } - , Cmd.map TicksMsg cmd - ) - - LinesMsg msg -> - let - ( lines, cmd ) = - Lines.update msg model.lines - in - ( { model | lines = lines } - , Cmd.map LinesMsg cmd - ) + case msg of + Focus id -> + let + isSourceOpen = + if model.isSourceOpen && model.focused == id then + False + + else if model.focused /= id then + True + + else + not model.isSourceOpen + in + ( { model + | isSourceOpen = isSourceOpen + , focused = id + } + , setBodyScroll isSourceOpen + ) + + CloseSource -> + ( { model | isSourceOpen = False } + , setBodyScroll False + ) + + SelectionMsg msg -> + let + ( selection, cmd ) = + Selection.update msg model.selection + in + ( { model | selection = selection } + , Cmd.map SelectionMsg cmd + ) + + AreaMsg msg -> + let + ( area, cmd ) = + Area.update msg model.area + in + ( { model | area = area } + , Cmd.map AreaMsg cmd + ) + + SteppedMsg msg -> + let + ( stepped, cmd ) = + Stepped.update msg model.stepped + in + ( { model | stepped = stepped } + , Cmd.map SteppedMsg cmd + ) + + TicksMsg msg -> + let + ( ticks, cmd ) = + Ticks.update msg model.ticks + in + ( { model | ticks = ticks } + , Cmd.map TicksMsg cmd + ) + + LinesMsg msg -> + let + ( lines, cmd ) = + Lines.update msg model.lines + in + ( { model | lines = lines } + , Cmd.map LinesMsg cmd + ) @@ -161,19 +165,20 @@ update msg model = view : Model -> Html.Html Msg view model = - Html.div - [ Html.Attributes.class "view" ] - [ viewTitle - , Html.div - [ Html.Attributes.class "view__body" ] - [ viewExample 0 "full" AreaMsg Area.view model.area - , viewExample 1 "full" SelectionMsg Selection.view model.selection - , viewExample 2 "full" LinesMsg Lines.view model.lines - , viewExample 3 "full" SteppedMsg Stepped.view model.stepped - -- , viewExample 4 "half" TicksMsg Ticks.view model.ticks + Html.div + [ Html.Attributes.class "view" ] + [ viewTitle + , Html.div + [ Html.Attributes.class "view__body" ] + [ viewExample 0 "full" AreaMsg Area.view model.area + , viewExample 1 "full" SelectionMsg Selection.view model.selection + , viewExample 2 "full" LinesMsg Lines.view model.lines + , viewExample 3 "full" SteppedMsg Stepped.view model.stepped + + -- , viewExample 4 "half" TicksMsg Ticks.view model.ticks + ] + , viewSource model.focused model.isSourceOpen ] - , viewSource model.focused model.isSourceOpen - ] viewTitle : Html.Html msg @@ -207,57 +212,59 @@ viewTitle = viewExample : Id -> String -> (msg -> Msg) -> (a -> Html.Html msg) -> a -> Html.Html Msg viewExample id modifier toMsg view model = - let - class = - "view__example__container view__example__container--" ++ modifier - in - Html.div - [ Html.Attributes.class class ] - [ Html.map toMsg (Html.Lazy.lazy view model) - , Html.button - [ Html.Attributes.class "view__example__toggle-source" - , Html.Events.onClick (Focus id) + let + class = + "view__example__container view__example__container--" ++ modifier + in + Html.div + [ Html.Attributes.class class ] + [ Html.map toMsg (Html.Lazy.lazy view model) + , Html.button + [ Html.Attributes.class "view__example__toggle-source" + , Html.Events.onClick (Focus id) + ] + [ Html.text "see source" ] ] - [ Html.text "see source" ] - ] viewSource : Id -> Bool -> Html.Html Msg viewSource id isSourceOpen = - let - classes = - if isSourceOpen then - "view__source__container view__source__container--open" - else - "view__source__container view__source__container--closed" - - viewInnerSource i s = - if i == id then - Html.pre - [ Html.Attributes.class "shown" ] - [ Html.text s ] - else - Html.pre - [ Html.Attributes.class "hidden" ] - [ Html.text s ] - - viewSources = - List.indexedMap viewInnerSource - [ Area.source - , Selection.source - , Lines.source - , Stepped.source + let + classes = + if isSourceOpen then + "view__source__container view__source__container--open" + + else + "view__source__container view__source__container--closed" + + viewInnerSource i s = + if i == id then + Html.pre + [ Html.Attributes.class "shown" ] + [ Html.text s ] + + else + Html.pre + [ Html.Attributes.class "hidden" ] + [ Html.text s ] + + viewSources = + List.indexedMap viewInnerSource + [ Area.source + , Selection.source + , Lines.source + , Stepped.source + ] + in + Html.div + [ Html.Attributes.class classes ] + [ Html.button + [ Html.Events.onClick CloseSource ] + [ Html.text "[x] close" ] + , Html.div + [ Html.Attributes.class "view__source__inner elm" ] + viewSources ] - in - Html.div - [ Html.Attributes.class classes ] - [ Html.button - [ Html.Events.onClick CloseSource ] - [ Html.text "[x] close" ] - , Html.div - [ Html.Attributes.class "view__source__inner elm" ] - viewSources - ] @@ -265,6 +272,8 @@ viewSource id isSourceOpen = port highlight : () -> Cmd msg + + port setBodyScroll : Bool -> Cmd msg @@ -277,6 +286,6 @@ main = Html.program { init = init , update = update - , subscriptions = (always Sub.none) + , subscriptions = always Sub.none , view = view } diff --git a/docs/src/Random/Pipeline.elm b/docs/src/Random/Pipeline.elm index 5a68ff5..84f5fa7 100644 --- a/docs/src/Random/Pipeline.elm +++ b/docs/src/Random/Pipeline.elm @@ -1,8 +1,7 @@ -module Random.Pipeline exposing (generate, with, send) - - -{-| Random pipeline helpers -} +module Random.Pipeline exposing (generate, send, with) +{-| Random pipeline helpers +-} import Random @@ -10,16 +9,16 @@ import Random {-| -} generate : a -> Random.Generator a generate f = - Random.map (\_ -> f) Random.bool + Random.map (\_ -> f) Random.bool {-| -} with : Random.Generator a -> Random.Generator (a -> b) -> Random.Generator b with = - Random.map2 (|>) + Random.map2 (|>) {-| -} -send : (a -> msg) -> (Random.Generator a) -> Cmd msg +send : (a -> msg) -> Random.Generator a -> Cmd msg send = - Random.generate + Random.generate diff --git a/docs/src/Selection.elm b/docs/src/Selection.elm index 32035cf..c033700 100644 --- a/docs/src/Selection.elm +++ b/docs/src/Selection.elm @@ -1,45 +1,42 @@ -module Selection exposing (Model, init, Msg, update, view, source) +module Selection exposing (Model, Msg, init, source, update, view) -import Html -import Html.Attributes -import Svg -import Svg.Attributes -import Time import Date import Date.Format -import Random -import Random.Pipeline +import Html +import Html.Attributes import LineChart -import LineChart.Junk as Junk import LineChart.Area as Area import LineChart.Axis as Axis -import LineChart.Axis.Title as Title +import LineChart.Axis.Intersection as Intersection +import LineChart.Axis.Line as AxisLine import LineChart.Axis.Range as Range import LineChart.Axis.Ticks as Ticks -import LineChart.Axis.Line as AxisLine -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.Title as Title 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 Svg +import Svg.Attributes +import Time 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 + } @@ -47,31 +44,32 @@ main = type alias Model = - { data : Data - , hovered : Maybe Float - , selection : Maybe Selection - , dragging : Bool - , hinted : Maybe Datum - } + { data : Data + , hovered : Maybe Float + , selection : Maybe Selection + , dragging : Bool + , hinted : Maybe Datum + } type alias Selection = - { xStart : Float - , xEnd : Float - } + { xStart : Float + , xEnd : Float + } type alias Data = - { sanJose : List Datum - , sanDiego : List Datum - , sanFransisco : List Datum - } + { sanJose : List Datum + , sanDiego : List Datum + , sanFransisco : List Datum + } type alias Datum = - { time : Time.Time - , displacement : Float - } + { time : Time.Time + , displacement : Float + } + -- INIT @@ -79,82 +77,95 @@ type alias Datum = init : ( Model, Cmd Msg ) init = - ( { data = Data [] [] [] - , hovered = Nothing - , selection = Nothing - , dragging = False - , hinted = Nothing - } - , generateData - ) + ( { data = Data [] [] [] + , hovered = Nothing + , selection = Nothing + , dragging = False + , hinted = Nothing + } + , generateData + ) generateData : Cmd Msg generateData = - let - genNumbers min max = - Random.list 201 (Random.float min max) + let + genNumbers min max = + Random.list 201 (Random.float min max) - compile a b c = - Data (toData a) (toData b) (toData c) - in - Random.Pipeline.generate compile - |> Random.Pipeline.with (genNumbers -10 10) - |> Random.Pipeline.with (genNumbers -7 7) - |> Random.Pipeline.with (genNumbers -8 8) - |> Random.Pipeline.send RecieveData + compile a b c = + Data (toData a) (toData b) (toData c) + in + Random.Pipeline.generate compile + |> Random.Pipeline.with (genNumbers -10 10) + |> Random.Pipeline.with (genNumbers -7 7) + |> Random.Pipeline.with (genNumbers -8 8) + |> Random.Pipeline.send RecieveData toData : List Float -> List Datum toData numbers = - let - toDatum index displacement = - Datum (indexToTime index) displacement - in - List.indexedMap toDatum numbers + let + toDatum index displacement = + Datum (indexToTime index) displacement + 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.minute * 15 * toFloat index -- hours from first datum - - - + Time.hour + * 24 + * 365 + * 45 + + -- 45 years + Time.hour + * 24 + * 30 + + -- a month + Time.minute + * 15 + * toFloat index + + + +-- hours from first datum -- MODEL API setData : Data -> Model -> Model setData data model = - { model | data = data } + { model | data = data } setSelection : Maybe Selection -> Model -> Model setSelection selection model = - { model | selection = selection } + { model | selection = selection } setDragging : Bool -> Model -> Model setDragging dragging model = - { model | dragging = dragging } + { model | dragging = dragging } setHovered : Maybe Float -> Model -> Model setHovered hovered model = - { model | hovered = hovered } + { model | hovered = hovered } setHint : Maybe Datum -> Model -> Model setHint hinted model = - { model | hinted = hinted } + { model | hinted = hinted } getSelectionXStart : Float -> Model -> Float getSelectionXStart hovered model = - case model.selection of - Just selection -> selection.xStart - Nothing -> hovered + case model.selection of + Just selection -> + selection.xStart + + Nothing -> + hovered @@ -162,77 +173,82 @@ getSelectionXStart hovered model = type Msg - = RecieveData Data - -- Chart Main - | Hold Coordinate.Point - | Move Coordinate.Point - | Drop Coordinate.Point - | LeaveChart Coordinate.Point - | LeaveContainer Coordinate.Point - -- Chart Zoom - | Hint (Maybe Datum) + = RecieveData Data + -- Chart Main + | Hold Coordinate.Point + | Move Coordinate.Point + | Drop Coordinate.Point + | LeaveChart Coordinate.Point + | LeaveContainer Coordinate.Point + -- Chart Zoom + | Hint (Maybe Datum) update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = - case msg of - RecieveData data -> - model - |> setData data - |> addCmd Cmd.none - - Hold point -> - model - |> setSelection Nothing - |> setDragging True - |> addCmd Cmd.none - - Move point -> - if model.dragging then - let - start = getSelectionXStart point.x model - newSelection = Selection start point.x - in - model - |> setSelection (Just newSelection) - |> setHovered (Just point.x) - |> addCmd Cmd.none - else - model - |> setHovered (Just point.x) - |> addCmd Cmd.none + case msg of + RecieveData data -> + model + |> setData data + |> addCmd Cmd.none + + Hold point -> + model + |> setSelection Nothing + |> setDragging True + |> addCmd Cmd.none + + Move point -> + if model.dragging then + let + start = + getSelectionXStart point.x model + + newSelection = + Selection start point.x + in + model + |> setSelection (Just newSelection) + |> setHovered (Just point.x) + |> addCmd Cmd.none - Drop point -> - if point.x == getSelectionXStart point.x model then - model - |> setSelection Nothing - |> setDragging False - |> addCmd Cmd.none - else - model - |> setDragging False - |> addCmd Cmd.none + else + model + |> setHovered (Just point.x) + |> addCmd Cmd.none - LeaveChart point -> - model - |> setHovered Nothing - |> addCmd Cmd.none + Drop point -> + if point.x == getSelectionXStart point.x model then + model + |> setSelection Nothing + |> setDragging False + |> addCmd Cmd.none - LeaveContainer point -> - model - |> setDragging False - |> setHovered Nothing - |> addCmd Cmd.none + else + model + |> setDragging False + |> addCmd Cmd.none + + LeaveChart point -> + model + |> setHovered Nothing + |> addCmd Cmd.none - Hint datum -> - model - |> setHint datum - |> addCmd Cmd.none + LeaveContainer point -> + model + |> setDragging False + |> setHovered Nothing + |> addCmd Cmd.none + + Hint datum -> + model + |> setHint datum + |> addCmd Cmd.none addCmd : Cmd Msg -> Model -> ( Model, Cmd Msg ) addCmd cmd model = - ( model, Cmd.none ) + ( model, Cmd.none ) @@ -241,43 +257,44 @@ addCmd cmd model = view : Model -> Html.Html Msg view model = - Html.div [] <| - case model.selection of - Nothing -> - [ viewPlaceholder - , viewChartMain model - ] + Html.div [] <| + case model.selection of + Nothing -> + [ viewPlaceholder + , viewChartMain model + ] - Just selection -> - if selection.xStart == selection.xEnd then - [ viewPlaceholder - , viewChartMain model - ] - else - [ viewChartZoom model selection - , viewChartMain model - ] + Just selection -> + if selection.xStart == selection.xEnd then + [ viewPlaceholder + , viewChartMain model + ] + + else + [ viewChartZoom model selection + , viewChartMain model + ] viewPlaceholder : Html.Html Msg viewPlaceholder = - Html.div - [ Html.Attributes.class "view__selection__placeholder" ] - [ viewInnerPlaceholder ] + Html.div + [ Html.Attributes.class "view__selection__placeholder" ] + [ viewInnerPlaceholder ] viewInnerPlaceholder : Html.Html Msg viewInnerPlaceholder = - Html.div - [ Html.Attributes.class "view__selection__placeholder__inner" ] - [ viewPlaceholderText ] + Html.div + [ Html.Attributes.class "view__selection__placeholder__inner" ] + [ viewPlaceholderText ] viewPlaceholderText : Html.Html Msg viewPlaceholderText = - Html.div - [ Html.Attributes.class "view__selection__placeholder__inner__text" ] - [ Html.text "Select a range on the chart to the right!" ] + Html.div + [ Html.Attributes.class "view__selection__placeholder__inner__text" ] + [ Html.text "Select a range on the chart to the right!" ] @@ -286,80 +303,81 @@ viewPlaceholderText = viewChartMain : Model -> Html.Html Msg viewChartMain model = - viewChart model.data - { range = Range.default - , junk = junkConfig model - , legends = Legends.default - , events = events - , width = 670 - , margin = Container.Margin 30 165 30 70 - , dots = Dots.custom (Dots.full 0) - , id = "line-chart-selection-main" - } + viewChart model.data + { range = Range.default + , junk = junkConfig model + , legends = Legends.default + , events = events + , width = 670 + , margin = Container.Margin 30 165 30 70 + , dots = Dots.custom (Dots.full 0) + , id = "line-chart-selection-main" + } events : Events.Config Datum Msg events = - let - options bool = - { stopPropagation = True - , preventDefault = True - , catchOutsideChart = bool - } - in - Events.custom - [ Events.onWithOptions "mousedown" (options False) Hold Events.getData - , Events.onWithOptions "mousemove" (options False) Move Events.getData - , Events.onWithOptions "mouseup" (options True) Drop Events.getData - , Events.onWithOptions "mouseleave" (options False) LeaveChart Events.getData - , Events.onWithOptions "mouseleave" (options True) LeaveContainer Events.getData - ] + let + options bool = + { stopPropagation = True + , preventDefault = True + , catchOutsideChart = bool + } + in + Events.custom + [ Events.onWithOptions "mousedown" (options False) Hold Events.getData + , Events.onWithOptions "mousemove" (options False) Move Events.getData + , Events.onWithOptions "mouseup" (options True) Drop Events.getData + , Events.onWithOptions "mouseleave" (options False) LeaveChart Events.getData + , Events.onWithOptions "mouseleave" (options True) LeaveContainer Events.getData + ] junkConfig : Model -> Junk.Config Datum msg junkConfig model = - Junk.custom <| \system -> - { below = below system model.selection - , above = above system model.hovered - , html = [] - } + Junk.custom <| + \system -> + { below = below system model.selection + , above = above system model.hovered + , html = [] + } below : Coordinate.System -> Maybe Selection -> List (Svg.Svg msg) below system selection = - case selection of - Just { xStart, xEnd } -> - let - attributes = - [ Svg.Attributes.fill "#4646461a" ] + case selection of + Just { xStart, xEnd } -> + let + attributes = + [ Svg.Attributes.fill "#4646461a" ] - ( yStart, yEnd ) = - ( system.y.min, system.y.max ) + ( yStart, yEnd ) = + ( system.y.min, system.y.max ) - viewSelection = - Junk.rectangle system attributes xStart xEnd yStart yEnd - in - [ viewSelection ] + viewSelection = + Junk.rectangle system attributes xStart xEnd yStart yEnd + in + [ viewSelection ] - Nothing -> - [] + Nothing -> + [] above : Coordinate.System -> Maybe Float -> List (Svg.Svg msg) above system hovered = - case hovered of - Just hovered -> - [ Junk.vertical system [] hovered - , title system - ] + case hovered of + Just hovered -> + [ Junk.vertical system [] hovered + , title system + ] - Nothing -> - [ title system ] + Nothing -> + [ title system ] title : Coordinate.System -> Svg.Svg msg title system = - Junk.labelAt system system.x.max system.y.max 20 -5 "start" Colors.black "Earthquake in" + Junk.labelAt system system.x.max system.y.max 20 -5 "start" Colors.black "Earthquake in" @@ -368,43 +386,42 @@ title system = viewChartZoom : Model -> Selection -> Html.Html Msg viewChartZoom model selection = - viewChart model.data - { range = xAxisRangeConfig selection - , junk = - Junk.hoverOne model.hinted - [ ( "time", formatX ) - , ( "displacement", formatY ) - ] - , events = Events.hoverOne Hint - , legends = Legends.none - , dots = Dots.hoverOne model.hinted - , width = 670 - , margin = Container.Margin 30 60 30 75 - , id = "line-chart-zoom" - } + viewChart model.data + { range = xAxisRangeConfig selection + , junk = + Junk.hoverOne model.hinted + [ ( "time", formatX ) + , ( "displacement", formatY ) + ] + , events = Events.hoverOne Hint + , legends = Legends.none + , dots = Dots.hoverOne model.hinted + , width = 670 + , margin = Container.Margin 30 60 30 75 + , id = "line-chart-zoom" + } xAxisRangeConfig : Selection -> Range.Config xAxisRangeConfig selection = - let - xStart = - min selection.xStart selection.xEnd + let + xStart = + min selection.xStart selection.xEnd - xEnd = - max selection.xStart selection.xEnd - in - Range.window xStart xEnd + xEnd = + max selection.xStart selection.xEnd + in + Range.window xStart xEnd formatX : Datum -> String formatX datum = - Date.Format.format "%l:%M%P, %e. %b, %Y" (Date.fromTime datum.time) + Date.Format.format "%l:%M%P, %e. %b, %Y" (Date.fromTime datum.time) formatY : Datum -> String formatY datum = - toString (round100 datum.displacement) - + toString (round100 datum.displacement) @@ -412,67 +429,67 @@ formatY datum = type alias Config = - { range : Range.Config - , junk : Junk.Config Datum Msg - , events : Events.Config Datum Msg - , legends : Legends.Config Datum Msg - , dots : Dots.Config Datum - , margin : Container.Margin - , width : Int - , id : String - } + { range : Range.Config + , junk : Junk.Config Datum Msg + , events : Events.Config Datum Msg + , legends : Legends.Config Datum Msg + , dots : Dots.Config Datum + , margin : Container.Margin + , width : Int + , id : String + } viewChart : Data -> Config -> Html.Html Msg viewChart data { range, junk, events, legends, dots, width, margin, id } = - let - containerStyles = - [ ( "display", "inline-block" ) - , ( "width", "50%" ) - , ( "height", "100%" ) - ] - in - LineChart.viewCustom - { y = - Axis.custom - { title = Title.atAxisMax 50 0 "displacement" - , variable = Just << .displacement - , pixels = 450 - , range = Range.padded 20 20 - , axisLine = AxisLine.rangeFrame Colors.gray - , ticks = Ticks.float 5 - } - , x = - Axis.custom - { title = Title.default "time" - , variable = Just << .time - , pixels = width - , range = range - , axisLine = AxisLine.rangeFrame Colors.gray - , ticks = Ticks.time 5 - } - , container = - Container.custom - { attributesHtml = [ Html.Attributes.style containerStyles ] - , attributesSvg = [] - , size = Container.static - , margin = margin - , id = id - } - , interpolation = Interpolation.monotone - , intersection = Intersection.default - , legends = legends - , events = events - , junk = junk - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = dots - } - [ LineChart.line Colors.pink Dots.circle "San Jose" data.sanJose - , LineChart.line Colors.cyan Dots.circle "San Fransisco" data.sanFransisco - , LineChart.line Colors.blue Dots.circle "San Diego" data.sanDiego - ] + let + containerStyles = + [ ( "display", "inline-block" ) + , ( "width", "50%" ) + , ( "height", "100%" ) + ] + in + LineChart.viewCustom + { y = + Axis.custom + { title = Title.atAxisMax 50 0 "displacement" + , variable = Just << .displacement + , pixels = 450 + , range = Range.padded 20 20 + , axisLine = AxisLine.rangeFrame Colors.gray + , ticks = Ticks.float 5 + } + , x = + Axis.custom + { title = Title.default "time" + , variable = Just << .time + , pixels = width + , range = range + , axisLine = AxisLine.rangeFrame Colors.gray + , ticks = Ticks.time 5 + } + , container = + Container.custom + { attributesHtml = [ Html.Attributes.style containerStyles ] + , attributesSvg = [] + , size = Container.static + , margin = margin + , id = id + } + , interpolation = Interpolation.monotone + , intersection = Intersection.default + , legends = legends + , events = events + , junk = junk + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = dots + } + [ LineChart.line Colors.pink Dots.circle "San Jose" data.sanJose + , LineChart.line Colors.cyan Dots.circle "San Fransisco" data.sanFransisco + , LineChart.line Colors.blue Dots.circle "San Diego" data.sanDiego + ] @@ -481,8 +498,7 @@ viewChart data { range, junk, events, legends, dots, width, margin, id } = round100 : Float -> Float round100 float = - toFloat (round (float * 100)) / 100 - + toFloat (round (float * 100)) / 100 @@ -491,7 +507,7 @@ round100 float = source : String source = - """ + """ -- MODEL diff --git a/docs/src/Stepped.elm b/docs/src/Stepped.elm index a1497cf..3a9f37e 100644 --- a/docs/src/Stepped.elm +++ b/docs/src/Stepped.elm @@ -1,44 +1,41 @@ -module Stepped exposing (Model, init, Msg, update, view, source) +module Stepped exposing (Model, Msg, init, source, update, view) -import Html -import Html.Attributes -import Time -import Random +import Color.Convert import Date -import Date.Format import Date.Extra -import Color.Convert +import Date.Format +import Html +import Html.Attributes import LineChart -import LineChart.Junk as Junk import LineChart.Area as Area import LineChart.Axis as Axis -import LineChart.Axis.Title as Title +import LineChart.Axis.Intersection as Intersection +import LineChart.Axis.Line as AxisLine import LineChart.Axis.Range as Range import LineChart.Axis.Ticks as Ticks -import LineChart.Axis.Line as AxisLine -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.Title as Title 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 Time 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 + } @@ -46,15 +43,15 @@ main = type alias Model = - { data : List Data - , hinted : Maybe Data - } + { data : List Data + , hinted : Maybe Data + } type alias Data = - { year : Int - , price : Float - } + { year : Int + , price : Float + } @@ -63,49 +60,49 @@ type alias Data = init : ( Model, Cmd Msg ) init = - ( { data = initData - , hinted = Nothing - } - , Cmd.none - ) + ( { data = initData + , hinted = Nothing + } + , Cmd.none + ) initData : List Data initData = - [ Data 1980 0.12 - , Data 1981 0.14 - , Data 1982 0.155 - , Data 1983 0.16 - , Data 1984 0.17 - , Data 1985 0.17 - , Data 1986 0.18 - , Data 1987 0.18 - , Data 1988 0.19 - , Data 1989 0.20 - , Data 1990 0.22 - , Data 1991 0.24 - , Data 1992 0.24 - , Data 1993 0.25 - , Data 1994 0.25 - , Data 1995 0.25 - , Data 1996 0.26 - , Data 1997 0.26 - , Data 1998 0.26 - , Data 1999 0.26 - , Data 2000 0.27 - , Data 2001 0.27 - , Data 2002 0.27 - , Data 2003 0.28 - , Data 2004 0.28 - , Data 2005 0.30 - , Data 2006 0.32 - , Data 2007 0.34 - , Data 2008 0.36 - , Data 2009 0.39 - , Data 2010 0.41 - , Data 2011 0.46 - , Data 2012 0.60 - ] + [ Data 1980 0.12 + , Data 1981 0.14 + , Data 1982 0.155 + , Data 1983 0.16 + , Data 1984 0.17 + , Data 1985 0.17 + , Data 1986 0.18 + , Data 1987 0.18 + , Data 1988 0.19 + , Data 1989 0.2 + , Data 1990 0.22 + , Data 1991 0.24 + , Data 1992 0.24 + , Data 1993 0.25 + , Data 1994 0.25 + , Data 1995 0.25 + , Data 1996 0.26 + , Data 1997 0.26 + , Data 1998 0.26 + , Data 1999 0.26 + , Data 2000 0.27 + , Data 2001 0.27 + , Data 2002 0.27 + , Data 2003 0.28 + , Data 2004 0.28 + , Data 2005 0.3 + , Data 2006 0.32 + , Data 2007 0.34 + , Data 2008 0.36 + , Data 2009 0.39 + , Data 2010 0.41 + , Data 2011 0.46 + , Data 2012 0.6 + ] @@ -114,7 +111,7 @@ initData = setHint : Maybe Data -> Model -> Model setHint hinted model = - { model | hinted = hinted } + { model | hinted = hinted } @@ -122,21 +119,21 @@ setHint hinted model = type Msg - = Hint (Maybe Data) + = Hint (Maybe Data) update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = - case msg of - Hint point -> - model - |> setHint point - |> addCmd Cmd.none + case msg of + Hint point -> + model + |> setHint point + |> addCmd Cmd.none addCmd : Cmd Msg -> Model -> ( Model, Cmd Msg ) addCmd cmd model = - ( model, Cmd.none ) + ( model, Cmd.none ) @@ -145,7 +142,7 @@ addCmd cmd model = view : Model -> Html.Html Msg view model = - Html.div [] [ chart model ] + Html.div [] [ chart model ] @@ -154,65 +151,67 @@ view model = chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = - Axis.custom - { title = Title.default "price (£)" - , variable = Just << .price - , pixels = 380 - , range = Range.padded 20 20 - , axisLine = AxisLine.full Colors.gray - , ticks = Ticks.float 5 - } - , x = - let - toDate year = - Date.Extra.fromParts year Date.Jan 01 0 0 0 0 - in - Axis.custom - { title = Title.default "Year" - , variable = Just << Date.toTime << toDate << .year - , pixels = 1270 - , range = Range.padded 20 20 - , axisLine = AxisLine.full Colors.gray - , ticks = Ticks.time 10 - } - , container = - Container.custom - { attributesHtml = [] - , attributesSvg = [] - , size = Container.relative - , margin = Container.Margin 30 140 30 70 - , id = "line-chart-stepped" - } - , interpolation = Interpolation.stepped - , intersection = Intersection.default - , legends = Legends.default - , events = Events.hoverOne Hint - , junk = Junk.hoverOne model.hinted - [ ( "year", \datum -> toString datum.year ) - , ( "price", \datum -> toString datum.price ++ "£" ) - ] - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = - let - styleLegend _ = - Dots.empty 5 1 - - styleIndividual datum = - if Just datum == model.hinted - then Dots.full 5 - else Dots.empty 5 1 - in - Dots.customAny - { legend = styleLegend - , individual = styleIndividual - } - } - [ LineChart.line Colors.pink Dots.circle "UK stamp" model.data ] - + LineChart.viewCustom + { y = + Axis.custom + { title = Title.default "price (£)" + , variable = Just << .price + , pixels = 380 + , range = Range.padded 20 20 + , axisLine = AxisLine.full Colors.gray + , ticks = Ticks.float 5 + } + , x = + let + toDate year = + Date.Extra.fromParts year Date.Jan 1 0 0 0 0 + in + Axis.custom + { title = Title.default "Year" + , variable = Just << Date.toTime << toDate << .year + , pixels = 1270 + , range = Range.padded 20 20 + , axisLine = AxisLine.full Colors.gray + , ticks = Ticks.time 10 + } + , container = + Container.custom + { attributesHtml = [] + , attributesSvg = [] + , size = Container.relative + , margin = Container.Margin 30 140 30 70 + , id = "line-chart-stepped" + } + , interpolation = Interpolation.stepped + , intersection = Intersection.default + , legends = Legends.default + , events = Events.hoverOne Hint + , junk = + Junk.hoverOne model.hinted + [ ( "year", \datum -> toString datum.year ) + , ( "price", \datum -> toString datum.price ++ "£" ) + ] + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = + let + styleLegend _ = + Dots.empty 5 1 + + styleIndividual datum = + if Just datum == model.hinted then + Dots.full 5 + + else + Dots.empty 5 1 + in + Dots.customAny + { legend = styleLegend + , individual = styleIndividual + } + } + [ LineChart.line Colors.pink Dots.circle "UK stamp" model.data ] @@ -221,7 +220,7 @@ chart model = round100 : Float -> Float round100 float = - toFloat (round (float * 100)) / 100 + toFloat (round (float * 100)) / 100 @@ -230,7 +229,7 @@ round100 float = source : String source = - """ + """ -- MODEL diff --git a/docs/src/Ticks.elm b/docs/src/Ticks.elm index aacd914..b8138b1 100644 --- a/docs/src/Ticks.elm +++ b/docs/src/Ticks.elm @@ -1,39 +1,36 @@ -module Ticks exposing (Model, init, Msg, update, view) +module Ticks exposing (Model, Msg, init, update, view) import Html -import Random import LineChart -import LineChart.Junk as Junk import LineChart.Area as Area import LineChart.Axis as Axis -import LineChart.Axis.Title as Title +import LineChart.Axis.Intersection as Intersection +import LineChart.Axis.Line as AxisLine import LineChart.Axis.Range as Range -import LineChart.Axis.Ticks as Ticks import LineChart.Axis.Tick as Tick -import LineChart.Axis.Line as AxisLine -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.Ticks as Ticks +import LineChart.Axis.Title as Title 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 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 + } @@ -47,10 +44,10 @@ type alias Model = type alias Data = - { nora : List Coordinate.Point - , noah : List Coordinate.Point - , nina : List Coordinate.Point - } + { nora : List Coordinate.Point + , noah : List Coordinate.Point + , nina : List Coordinate.Point + } @@ -59,21 +56,21 @@ type alias Data = init : ( Model, Cmd Msg ) init = - ( { data = Data [] [] [] - , hinted = Nothing - } - , getNumbers - ) + ( { data = Data [] [] [] + , hinted = Nothing + } + , getNumbers + ) getNumbers : Cmd Msg getNumbers = - let - genNumbers min max = - Random.list 10 (Random.float min max) - in - Random.map3 (,,) (genNumbers 9 12) (genNumbers 7 10) (genNumbers 2 10) - |> Random.generate RecieveNumbers + let + genNumbers min max = + Random.list 10 (Random.float min max) + in + Random.map3 (,,) (genNumbers 9 12) (genNumbers 7 10) (genNumbers 2 10) + |> Random.generate RecieveNumbers @@ -82,17 +79,17 @@ getNumbers = setData : ( List Float, List Float, List Float ) -> Model -> Model setData ( n1, n2, n3 ) model = - { model | data = Data (toData n1) (toData n2) (toData n3) } + { model | data = Data (toData n1) (toData n2) (toData n3) } toData : List Float -> List Coordinate.Point toData numbers = - List.indexedMap (\i -> Coordinate.Point (toFloat i)) numbers + List.indexedMap (\i -> Coordinate.Point (toFloat i)) numbers setHint : Maybe Coordinate.Point -> Model -> Model setHint hinted model = - { model | hinted = hinted } + { model | hinted = hinted } @@ -100,27 +97,27 @@ setHint hinted model = type Msg - = RecieveNumbers ( List Float, List Float, List Float ) - | Hint (Maybe Coordinate.Point) + = RecieveNumbers ( List Float, List Float, List Float ) + | Hint (Maybe Coordinate.Point) update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = - case msg of - RecieveNumbers numbers -> - model - |> setData numbers - |> addCmd Cmd.none + case msg of + RecieveNumbers numbers -> + model + |> setData numbers + |> addCmd Cmd.none - Hint point -> - model - |> setHint point - |> addCmd Cmd.none + Hint point -> + model + |> setHint point + |> addCmd Cmd.none addCmd : Cmd Msg -> Model -> ( Model, Cmd Msg ) addCmd cmd model = - ( model, Cmd.none ) + ( model, Cmd.none ) @@ -129,8 +126,8 @@ addCmd cmd model = view : Model -> Html.Html Msg view model = - Html.div [] - [ chart model ] + Html.div [] + [ chart model ] @@ -139,105 +136,113 @@ view model = chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { x = xAxisConfig model - , y = yAxisConfig model - , container = - Container.custom - { attributesHtml = [] - , attributesSvg = [] - , size = Container.relative - , margin = Container.Margin 60 100 30 70 - , id = "line-chart-ticks" - } - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.hoverOne Hint - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.custom (Dots.disconnected 7 2) - } - [ LineChart.line Colors.blue Dots.plus "Nora" model.data.nora - , LineChart.line Colors.cyan Dots.cross "Noah" model.data.noah - , LineChart.dash Colors.pink Dots.none "Class" [ 5, 2 ] model.data.nina - ] + LineChart.viewCustom + { x = xAxisConfig model + , y = yAxisConfig model + , container = + Container.custom + { attributesHtml = [] + , attributesSvg = [] + , size = Container.relative + , margin = Container.Margin 60 100 30 70 + , id = "line-chart-ticks" + } + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.hoverOne Hint + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.custom (Dots.disconnected 7 2) + } + [ LineChart.line Colors.blue Dots.plus "Nora" model.data.nora + , LineChart.line Colors.cyan Dots.cross "Noah" model.data.noah + , LineChart.dash Colors.pink Dots.none "Class" [ 5, 2 ] model.data.nina + ] xAxisConfig : Model -> Axis.Config Coordinate.Point msg xAxisConfig model = - let formatX = - \x -> if x == 0 then "K" else toString x - in - Axis.custom - { title = Title.default "Year" - , variable = Just << .x - , pixels = 800 - , range = Range.padded 50 20 - , axisLine = AxisLine.rangeFrame Colors.gray - , ticks = ticksConfig .x formatX model.hinted - } + let + formatX = + \x -> + if x == 0 then + "K" + + else + toString x + in + Axis.custom + { title = Title.default "Year" + , variable = Just << .x + , pixels = 800 + , range = Range.padded 50 20 + , axisLine = AxisLine.rangeFrame Colors.gray + , ticks = ticksConfig .x formatX model.hinted + } yAxisConfig : Model -> Axis.Config Coordinate.Point msg yAxisConfig model = - let formatY = - toString << round10 - in - Axis.custom - { title = Title.atAxisMax 10 0 "Grade avg." - , variable = Just << .y - , pixels = 450 - , range = Range.padded 50 20 - , axisLine = AxisLine.rangeFrame Colors.gray - , ticks = ticksConfig .y formatY model.hinted - } + let + formatY = + toString << round10 + in + Axis.custom + { title = Title.atAxisMax 10 0 "Grade avg." + , variable = Just << .y + , pixels = 450 + , range = Range.padded 50 20 + , axisLine = AxisLine.rangeFrame Colors.gray + , ticks = ticksConfig .y formatY model.hinted + } ticksConfig : (Coordinate.Point -> Float) -> (Float -> String) -> Maybe Coordinate.Point -> Ticks.Config msg ticksConfig toValue format maybeHovered = - let - hoverOne = - case maybeHovered of - Just hovered -> - [ opposite format (toValue hovered) ] + let + hoverOne = + case maybeHovered of + Just hovered -> + [ opposite format (toValue hovered) ] - Nothing -> - [] + Nothing -> + [] - framing range = - List.map (gridless format) [ range.min, range.max ] - in - Ticks.custom <| \dataRange axisRange -> - framing dataRange ++ hoverOne + framing range = + List.map (gridless format) [ range.min, range.max ] + in + Ticks.custom <| + \dataRange axisRange -> + framing dataRange ++ hoverOne opposite : (Float -> String) -> Float -> Tick.Config msg opposite format n = - Tick.custom - { position = n - , color = Colors.gray - , width = 1 - , length = 5 - , grid = True - , direction = Tick.positive - , label = Just <| Junk.label Colors.black (format n) - } + Tick.custom + { position = n + , color = Colors.gray + , width = 1 + , length = 5 + , grid = True + , direction = Tick.positive + , label = Just <| Junk.label Colors.black (format n) + } gridless : (Float -> String) -> Float -> Tick.Config msg gridless format n = - Tick.custom - { position = n - , color = Colors.gray - , width = 1 - , length = 5 - , grid = False - , direction = Tick.negative - , label = Just <| Junk.label Colors.black (format n) - } + Tick.custom + { position = n + , color = Colors.gray + , width = 1 + , length = 5 + , grid = False + , direction = Tick.negative + , label = Just <| Junk.label Colors.black (format n) + } @@ -246,4 +251,4 @@ gridless format n = round10 : Float -> Float round10 float = - toFloat (round (float * 10)) / 10 + toFloat (round (float * 10)) / 10 diff --git a/examples/Area.elm b/examples/Area.elm index d9db2ae..98d7437 100644 --- a/examples/Area.elm +++ b/examples/Area.elm @@ -1,58 +1,54 @@ module CustomLines exposing (main) - +import Color import Html import Html.Attributes exposing (class) -import LineChart -import LineChart.Dots as Dots import LineChart as LineChart -import LineChart.Junk as Junk exposing (..) -import LineChart.Dots as Dots +import LineChart.Area as Area +import LineChart.Axis as Axis +import LineChart.Axis.Intersection as Intersection import LineChart.Colors as Colors 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.Dots as Dots import LineChart.Events as Events import LineChart.Grid as Grid +import LineChart.Interpolation as Interpolation +import LineChart.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area -import Color +import LineChart.Line as Line main : Html.Html msg main = - Html.div - [ class "container" ] - [ chart ] + Html.div + [ class "container" ] + [ chart ] chart : Html.Html msg chart = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = - -- Try out these different configs! - -- Area.default - -- Area.normal 0.5 - Area.stacked 0.5 - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck - , LineChart.line Colors.blue Dots.circle "Bobby" bobby - , LineChart.line Colors.cyan Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = + -- Try out these different configs! + -- Area.default + -- Area.normal 0.5 + Area.stacked 0.5 + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck + , LineChart.line Colors.blue Dots.circle "Bobby" bobby + , LineChart.line Colors.cyan Dots.diamond "Alice" alice + ] @@ -60,35 +56,35 @@ chart = type alias Info = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Info alice = - [ Info 10 34 1.34 0 - , Info 16 42 1.62 3000 - , Info 25 75 1.73 25000 - , Info 43 83 1.75 40000 - ] + [ Info 10 34 1.34 0 + , Info 16 42 1.62 3000 + , Info 25 75 1.73 25000 + , Info 43 83 1.75 40000 + ] bobby : List Info bobby = - [ Info 10 38 1.32 0 - , Info 17 69 1.75 2000 - , Info 25 75 1.87 32000 - , Info 43 77 1.87 52000 - ] + [ Info 10 38 1.32 0 + , Info 17 69 1.75 2000 + , Info 25 75 1.87 32000 + , Info 43 77 1.87 52000 + ] chuck : List Info chuck = - [ Info 10 42 1.35 0 - , Info 15 72 1.72 1800 - , Info 25 89 1.83 85000 - , Info 43 95 1.84 120000 - ] + [ Info 10 42 1.35 0 + , Info 15 72 1.72 1800 + , Info 25 89 1.83 85000 + , Info 43 95 1.84 120000 + ] diff --git a/examples/Axis.elm b/examples/Axis.elm index 6b1eb66..6fe9bf0 100644 --- a/examples/Axis.elm +++ b/examples/Axis.elm @@ -1,261 +1,304 @@ module Axis exposing (main) - +import Color import Html import Html.Attributes exposing (class) -import Svg -import Svg.Attributes as SvgA import LineChart -import LineChart.Dots as Dots -import LineChart.Junk as Junk exposing (..) -import LineChart.Colors as Colors -import LineChart.Container as Container -import LineChart.Interpolation as Interpolation +import LineChart.Area as Area +import LineChart.Axis as Axis import LineChart.Axis.Intersection as Intersection -import LineChart.Axis.Title as Title -import LineChart.Axis.Ticks as Ticks -import LineChart.Axis.Tick as Tick -import LineChart.Axis.Range as Range import LineChart.Axis.Line as AxisLine +import LineChart.Axis.Range as Range +import LineChart.Axis.Tick as Tick +import LineChart.Axis.Ticks as Ticks +import LineChart.Axis.Title as Title import LineChart.Axis.Values as Values -import LineChart.Axis as Axis -import LineChart.Legends as Legends -import LineChart.Line as Line +import LineChart.Colors as Colors +import LineChart.Container as Container +import LineChart.Dots as Dots import LineChart.Events as Events import LineChart.Grid as Grid +import LineChart.Interpolation as Interpolation +import LineChart.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area -import Color +import LineChart.Line as Line +import Svg +import Svg.Attributes as SvgA import Time main : Html.Html msg main = - Html.div - [ class "container" ] - [ chart ] + Html.div + [ class "container" ] + [ chart ] chart : Html.Html msg chart = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = - -- Try out these different configs! - -- Axis.default 700 "Age" .age - -- Axis.full 700 "Age" .age - Axis.time Time.utc 700 "Date" (toFloat << Time.posixToMillis << .date) + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = + -- Try out these different configs! + -- Axis.default 700 "Age" .age + -- Axis.full 700 "Age" .age + Axis.time Time.utc 700 "Date" (toFloat << Time.posixToMillis << .date) + -- customAxis - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.rust Dots.triangle "Chuck" chuck - , LineChart.line Colors.strongBlue Dots.circle "Bobby" bobby - , LineChart.line Colors.purple Dots.diamond "Alice" alice - ] + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.rust Dots.triangle "Chuck" chuck + , LineChart.line Colors.strongBlue Dots.circle "Bobby" bobby + , LineChart.line Colors.purple Dots.diamond "Alice" alice + ] customAxis : Axis.Config Info msg customAxis = - Axis.custom - { title = Title.default "Age" - , variable = Just << .age -- Try changing to .date and use Ticks.time! - , pixels = 700 - , range = - Range.padded 20 20 + Axis.custom + { title = Title.default "Age" + , variable = Just << .age -- Try changing to .date and use Ticks.time! + , pixels = 700 + , range = + Range.padded 20 20 + -- Range.padded 0 10 -- Range.padded 10 0 - , axisLine = - AxisLine.rangeFrame Color.gray + , axisLine = + AxisLine.rangeFrame Color.gray + -- AxisLine.full -- AxisLine.none -- customAxisLine - , ticks = - Ticks.float 7 + , ticks = + Ticks.float 7 + -- Ticks.floatCustom 7 customFloatTick -- Ticks.int 7 -- Only show's integers! -- Ticks.intCustom 7 customIntTick -- Ticks.time 5 -- Try with the variable being .date! -- Ticks.timeCustom 7 customTimeTick -- customTicks - } + } customAxisLine : AxisLine.Config msg customAxisLine = - AxisLine.custom <| \dataRange range -> - { color = Color.orange - , width = 2 - , events = [ SvgA.style "pointer-events: none;" ] - , start = 15 -- try range.min - , end = 35 -- try dataRange.min - } + AxisLine.custom <| + \dataRange range -> + { color = Color.orange + , width = 2 + , events = [ SvgA.style "pointer-events: none;" ] + , start = 15 -- try range.min + , end = 35 -- try dataRange.min + } customFloatTick : Float -> Tick.Config msg customFloatTick position = - Tick.custom - { position = position - , color = Color.orange - , width = 2 - , length = 8 - , grid = - -- True adds a grid line! - False - , direction = - Tick.negative + Tick.custom + { position = position + , color = Color.orange + , width = 2 + , length = 8 + , grid = + -- True adds a grid line! + False + , direction = + Tick.negative + -- Tick.positive - , label = - -- Junk.label just produces a SVG! Try using your own SVG markup! - Just <| - Junk.label Color.blue (String.fromFloat position) - -- customLabel position - } + , label = + -- Junk.label just produces a SVG! Try using your own SVG markup! + Just <| + Junk.label Color.blue (String.fromFloat position) + + -- customLabel position + } customLabel : Float -> Svg.Svg msg customLabel position = - Svg.g [] - [ Svg.text_ - [ SvgA.fill "#717171" - , SvgA.style "pointer-events: none;" - ] - [ Svg.tspan [] [ Svg.text (String.fromFloat position) ] ] - , Svg.circle - [ SvgA.cx "15" - , SvgA.cy "-10" - , SvgA.r "3" - , SvgA.fill <| if Basics.remainderBy 2 (round position) == 0 then "pink" else "lightblue" - ] - [] - ] + Svg.g [] + [ Svg.text_ + [ SvgA.fill "#717171" + , SvgA.style "pointer-events: none;" + ] + [ Svg.tspan [] [ Svg.text (String.fromFloat position) ] ] + , Svg.circle + [ SvgA.cx "15" + , SvgA.cy "-10" + , SvgA.r "3" + , SvgA.fill <| + if Basics.remainderBy 2 (round position) == 0 then + "pink" + + else + "lightblue" + ] + [] + ] customIntTick : Int -> Tick.Config msg customIntTick position = - Tick.custom - { position = toFloat position - , color = Color.orange - , width = 2 - , length = 8 - , grid = False - , direction = Tick.positive - , label = Just <| Junk.label Color.green (String.fromInt position) - } + Tick.custom + { position = toFloat position + , color = Color.orange + , width = 2 + , length = 8 + , grid = False + , direction = Tick.positive + , label = Just <| Junk.label Color.green (String.fromInt position) + } customTimeTick : Tick.Time -> Tick.Config msg customTimeTick info = - let - label = - Tick.format info - -- customFormat info - -- customFormat2 info - in - Tick.custom - { position = toFloat (Time.posixToMillis info.timestamp) - , color = Color.orange - , width = 2 - , length = 8 - , grid = False - , direction = Tick.positive - , label = Just <| Junk.label Color.green label - } + let + label = + Tick.format info + + -- customFormat info + -- customFormat2 info + in + Tick.custom + { position = toFloat (Time.posixToMillis info.timestamp) + , color = Color.orange + , width = 2 + , length = 8 + , grid = False + , direction = Tick.positive + , label = Just <| Junk.label Color.green label + } customFormat : Tick.Time -> String customFormat info = - case info.interval.unit of - Tick.Millisecond -> "ms" -- TODO format info.timestamp here! - Tick.Second -> "s" - Tick.Minute -> "m" - Tick.Hour -> "h" - Tick.Day -> "d" - Tick.Month -> "m" - Tick.Year -> "y" + case info.interval.unit of + Tick.Millisecond -> + "ms" + + -- TODO format info.timestamp here! + Tick.Second -> + "s" + + Tick.Minute -> + "m" + + Tick.Hour -> + "h" + + Tick.Day -> + "d" + + Tick.Month -> + "m" + + Tick.Year -> + "y" customFormat2 : Tick.Time -> String customFormat2 info = - case info.change of - Just change -> customFormatChange info - Nothing -> customFormat info + case info.change of + Just change -> + customFormatChange info + + Nothing -> + customFormat info customFormatChange : Tick.Time -> String customFormatChange info = - case info.interval.unit of - Tick.Millisecond -> "new ms!" - Tick.Second -> "new s!" - Tick.Minute -> "new m!" - Tick.Hour -> "new h!" - Tick.Day -> "new d!" - Tick.Month -> "new m!" - Tick.Year -> "new y!" + case info.interval.unit of + Tick.Millisecond -> + "new ms!" + Tick.Second -> + "new s!" -customTicks : Ticks.Config msg -customTicks = - Ticks.custom <| \dataRange range -> - List.map Tick.float [ 20, 23, 25, 28 ] - -- List.map Tick.float (Values.float (Values.exactly 14) dataRange) - -- List.map Tick.float (Values.float (Values.around 3) dataRange) - -- List.map customFloatTick (Values.float (Values.around 3) dataRange) - -- List.map Tick.float [ dataRange.min, dataRange.max ] - -- Ticks.frame Tick.float dataRange -- Helper! Same as above! + Tick.Minute -> + "new m!" + + Tick.Hour -> + "new h!" + Tick.Day -> + "new d!" + Tick.Month -> + "new m!" + Tick.Year -> + "new y!" + + +customTicks : Ticks.Config msg +customTicks = + Ticks.custom <| + \dataRange range -> + List.map Tick.float [ 20, 23, 25, 28 ] + +-- List.map Tick.float (Values.float (Values.exactly 14) dataRange) +-- List.map Tick.float (Values.float (Values.around 3) dataRange) +-- List.map customFloatTick (Values.float (Values.around 3) dataRange) +-- List.map Tick.float [ dataRange.min, dataRange.max ] +-- Ticks.frame Tick.float dataRange -- Helper! Same as above! -- DATA type alias Info = - { age : Float - , weight : Float - , height : Float - , income : Float - , date : Time.Posix - } + { age : Float + , weight : Float + , height : Float + , income : Float + , date : Time.Posix + } toInfo : Float -> Float -> Float -> Float -> Int -> Info toInfo age weight height income ms = - Info age weight height income (Time.millisToPosix ms) + Info age weight height income (Time.millisToPosix ms) + -- TODO fix date data + + alice : List Info alice = - [ toInfo 10 34 1.34 0 (1 * 3600000) - , toInfo 16 42 1.62 3000 (2 * 3600000) - , toInfo 25 75 1.73 25000 (3 * 3600000) - , toInfo 43 83 1.75 40000 (4 * 3600000) - ] + [ toInfo 10 34 1.34 0 (1 * 3600000) + , toInfo 16 42 1.62 3000 (2 * 3600000) + , toInfo 25 75 1.73 25000 (3 * 3600000) + , toInfo 43 83 1.75 40000 (4 * 3600000) + ] bobby : List Info bobby = - [ toInfo 10 38 1.32 0 (1 * 3600000) - , toInfo 17 69 1.75 2000 (2 * 3600000) - , toInfo 25 75 1.87 32000 (3 * 3600000) - , toInfo 43 77 1.87 52000 (4 * 3600000) - ] + [ toInfo 10 38 1.32 0 (1 * 3600000) + , toInfo 17 69 1.75 2000 (2 * 3600000) + , toInfo 25 75 1.87 32000 (3 * 3600000) + , toInfo 43 77 1.87 52000 (4 * 3600000) + ] chuck : List Info chuck = - [ toInfo 10 42 1.35 0 (1 * 3600000) - , toInfo 15 72 1.72 1800 (2 * 3600000) - , toInfo 25 89 1.83 85000 (3 * 3600000) - , toInfo 43 95 1.84 120000 (4 * 3600000) - ] + [ toInfo 10 42 1.35 0 (1 * 3600000) + , toInfo 15 72 1.72 1800 (2 * 3600000) + , toInfo 25 89 1.83 85000 (3 * 3600000) + , toInfo 43 95 1.84 120000 (4 * 3600000) + ] diff --git a/examples/BrokenData.elm b/examples/BrokenData.elm index 82774b3..a43b6e8 100644 --- a/examples/BrokenData.elm +++ b/examples/BrokenData.elm @@ -1,65 +1,61 @@ module BrokenData exposing (main) - import Html import Html.Attributes exposing (class) -import LineChart -import LineChart.Dots as Dots import LineChart as LineChart -import LineChart.Junk as Junk exposing (..) -import LineChart.Colors as Colors -import LineChart.Dots as Dots -import LineChart.Container as Container -import LineChart.Interpolation as Interpolation +import LineChart.Area as Area +import LineChart.Axis as Axis import LineChart.Axis.Intersection as Intersection -import LineChart.Axis.Title as Title -import LineChart.Axis.Ticks as Ticks -import LineChart.Axis.Range as Range import LineChart.Axis.Line as AxisLine -import LineChart.Axis as Axis -import LineChart.Legends as Legends -import LineChart.Line as Line +import LineChart.Axis.Range as Range +import LineChart.Axis.Ticks as Ticks +import LineChart.Axis.Title as Title +import LineChart.Colors as Colors +import LineChart.Container as Container +import LineChart.Dots as Dots import LineChart.Events as Events import LineChart.Grid as Grid +import LineChart.Interpolation as Interpolation +import LineChart.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area +import LineChart.Line as Line main : Html.Html msg main = - Html.div - [ class "container" ] - [ chart ] + Html.div + [ class "container" ] + [ chart ] chart : Html.Html msg chart = - LineChart.viewCustom - { y = - Axis.custom - { title = Title.default "Weight" - , variable = .income -- or .weight -- as opposed to `Just << .height` - , pixels = 450 - , range = Range.default - , axisLine = AxisLine.default - , ticks = Ticks.default - } - , x = Axis.default 700 "Age" .age - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.linear - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.gold Dots.diamond "Alice" alice - , LineChart.line Colors.pink Dots.circle "Bobby" bobby - , LineChart.line Colors.blue Dots.plus "Chuck" chuck - ] + LineChart.viewCustom + { y = + Axis.custom + { title = Title.default "Weight" + , variable = .income -- or .weight -- as opposed to `Just << .height` + , pixels = 450 + , range = Range.default + , axisLine = AxisLine.default + , ticks = Ticks.default + } + , x = Axis.default 700 "Age" .age + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.linear + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.gold Dots.diamond "Alice" alice + , LineChart.line Colors.pink Dots.circle "Bobby" bobby + , LineChart.line Colors.blue Dots.plus "Chuck" chuck + ] @@ -67,41 +63,41 @@ chart = type alias Info = - { age : Float - , weight : Maybe Float - , height : Float - , income : Maybe Float -- This is now a Maybe! - } + { age : Float + , weight : Maybe Float + , height : Float + , income : Maybe Float -- This is now a Maybe! + } alice : List Info alice = - [ Info 10 (Just 34) 1.34 (Just 0) - , Info 16 (Just 42) 1.62 (Just 3000) - , Info 22 (Just 75) 1.73 (Just 25000) - , Info 25 (Just 75) 1.73 (Just 25000) - , Info 43 (Just 83) 1.75 (Just 40000) - , Info 53 (Just 83) 1.75 (Just 80000) - ] + [ Info 10 (Just 34) 1.34 (Just 0) + , Info 16 (Just 42) 1.62 (Just 3000) + , Info 22 (Just 75) 1.73 (Just 25000) + , Info 25 (Just 75) 1.73 (Just 25000) + , Info 43 (Just 83) 1.75 (Just 40000) + , Info 53 (Just 83) 1.75 (Just 80000) + ] bobby : List Info bobby = - [ Info 10 (Just 38) 1.32 (Just 0) - , Info 16 (Just 69) 1.75 (Just 2000) - , Info 22 (Nothing) 1.87 (Just 31000) - , Info 25 (Nothing) 1.87 (Just 32000) - , Info 43 (Just 77) 1.87 (Just 52000) - , Info 53 (Just 77) 1.87 (Just 82000) - ] + [ Info 10 (Just 38) 1.32 (Just 0) + , Info 16 (Just 69) 1.75 (Just 2000) + , Info 22 Nothing 1.87 (Just 31000) + , Info 25 Nothing 1.87 (Just 32000) + , Info 43 (Just 77) 1.87 (Just 52000) + , Info 53 (Just 77) 1.87 (Just 82000) + ] chuck : List Info chuck = - [ Info 10 (Just 42) 1.35 (Just 0) - , Info 16 (Just 72) 1.72 (Just 1800) - , Info 22 (Just 82) 1.72 (Just 90800) - , Info 25 (Just 82) 1.72 (Nothing) - , Info 43 (Just 95) 1.84 (Just 120000) - , Info 53 (Just 95) 1.84 (Just 130000) - ] + [ Info 10 (Just 42) 1.35 (Just 0) + , Info 16 (Just 72) 1.72 (Just 1800) + , Info 22 (Just 82) 1.72 (Just 90800) + , Info 25 (Just 82) 1.72 Nothing + , Info 43 (Just 95) 1.84 (Just 120000) + , Info 53 (Just 95) 1.84 (Just 130000) + ] diff --git a/examples/Container.elm b/examples/Container.elm index 206a00c..28a49d0 100644 --- a/examples/Container.elm +++ b/examples/Container.elm @@ -1,64 +1,60 @@ module Container exposing (main) - +import Color import Html import Html.Attributes exposing (class) -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.Area as Area import LineChart.Axis as Axis -import LineChart.Legends as Legends -import LineChart.Line as Line +import LineChart.Axis.Intersection as Intersection +import LineChart.Container as Container +import LineChart.Dots as Dots import LineChart.Events as Events import LineChart.Grid as Grid +import LineChart.Interpolation as Interpolation +import LineChart.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area -import Color +import LineChart.Line as Line +import Svg.Attributes as SvgA main : Html.Html msg main = - Html.div - [ class "container" ] - [ chart ] + Html.div + [ class "container" ] + [ chart ] chart : Html.Html msg chart = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = - -- Try out these different configs! - -- Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - -- Container.responsive "line-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.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Color.green Dots.triangle "Chuck" chuck - , LineChart.line Color.blue Dots.circle "Bobby" bobby - , LineChart.line Color.red Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = + -- Try out these different configs! + -- Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + -- Container.responsive "line-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.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Color.green Dots.triangle "Chuck" chuck + , LineChart.line Color.blue Dots.circle "Bobby" bobby + , LineChart.line Color.red Dots.diamond "Alice" alice + ] @@ -66,35 +62,35 @@ chart = type alias Info = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Info alice = - [ Info 10 34 1.34 0 - , Info 16 42 1.62 3000 - , Info 25 75 1.73 25000 - , Info 43 83 1.75 40000 - ] + [ Info 10 34 1.34 0 + , Info 16 42 1.62 3000 + , Info 25 75 1.73 25000 + , Info 43 83 1.75 40000 + ] bobby : List Info bobby = - [ Info 10 38 1.32 0 - , Info 17 69 1.75 2000 - , Info 25 75 1.87 32000 - , Info 43 77 1.87 52000 - ] + [ Info 10 38 1.32 0 + , Info 17 69 1.75 2000 + , Info 25 75 1.87 32000 + , Info 43 77 1.87 52000 + ] chuck : List Info chuck = - [ Info 10 42 1.35 0 - , Info 15 72 1.72 1800 - , Info 25 89 1.83 85000 - , Info 43 95 1.84 120000 - ] + [ Info 10 42 1.35 0 + , Info 15 72 1.72 1800 + , Info 25 89 1.83 85000 + , Info 43 95 1.84 120000 + ] diff --git a/examples/Docs/Axis/Example1.elm b/examples/Docs/Axis/Example1.elm index 25c87c1..6e46fc2 100644 --- a/examples/Docs/Axis/Example1.elm +++ b/examples/Docs/Axis/Example1.elm @@ -1,56 +1,51 @@ module Docs.Axis.Example1 exposing (main) - import Html import LineChart -import LineChart.Colors as Colors -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.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 main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = xAxisConfig - , y = Axis.default 400 "Income ($)" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = xAxisConfig + , y = Axis.default 400 "Income ($)" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] xAxisConfig : Axis.Config Data msg xAxisConfig = - Axis.default 650 "Age (years)" .age + Axis.default 650 "Age (years)" .age @@ -58,40 +53,40 @@ xAxisConfig = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 4 24 0.94 0 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 4 24 0.94 0 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 - , Data 25 75 1.87 28000 - , Data 43 77 1.87 52000 - ] + [ Data 4 22 1.01 0 + , Data 25 75 1.87 28000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 4 21 0.98 0 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] average : List Data average = - [ Data 4 22.3 1.0 0 - , Data 25 79.7 1.8 46000 - , Data 43 85 1.82 70667 - ] + [ Data 4 22.3 1.0 0 + , Data 25 79.7 1.8 46000 + , Data 43 85 1.82 70667 + ] diff --git a/examples/Docs/Axis/Example2.elm b/examples/Docs/Axis/Example2.elm index 931173e..a31c900 100644 --- a/examples/Docs/Axis/Example2.elm +++ b/examples/Docs/Axis/Example2.elm @@ -1,56 +1,51 @@ module Docs.Axis.Example2 exposing (main) - import Html import LineChart -import LineChart.Colors as Colors -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.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 main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = xAxisConfig - , y = Axis.default 400 "Income ($)" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = xAxisConfig + , y = Axis.default 400 "Income ($)" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] xAxisConfig : Axis.Config Data msg xAxisConfig = - Axis.full 650 "Age (years)" .age + Axis.full 650 "Age (years)" .age @@ -58,40 +53,40 @@ xAxisConfig = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 4 24 0.94 0 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 4 24 0.94 0 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 - , Data 25 75 1.87 28000 - , Data 43 77 1.87 52000 - ] + [ Data 4 22 1.01 0 + , Data 25 75 1.87 28000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 4 21 0.98 0 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] average : List Data average = - [ Data 4 22.3 1.0 0 - , Data 25 79.7 1.8 46000 - , Data 43 85 1.82 70667 - ] + [ Data 4 22.3 1.0 0 + , Data 25 79.7 1.8 46000 + , Data 43 85 1.82 70667 + ] diff --git a/examples/Docs/Axis/Example3.elm b/examples/Docs/Axis/Example3.elm index 6a0249e..93a3e6d 100644 --- a/examples/Docs/Axis/Example3.elm +++ b/examples/Docs/Axis/Example3.elm @@ -1,75 +1,73 @@ module Docs.Axis.Example3 exposing (main) - -import Time import Html import LineChart -import LineChart.Colors as Colors -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.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 Time main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = xAxisConfig - , y = Axis.default 400 "Income ($)" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = xAxisConfig + , y = Axis.default 400 "Income ($)" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] xAxisConfig : Axis.Config Data msg xAxisConfig = - Axis.time 650 "Date" .date - -- Change the `dateInterval` function to change the dates! + Axis.time 650 "Date" .date + + + +-- Change the `dateInterval` function to change the dates! dateInterval : Int -> Time.Time dateInterval i = - -- 4 * year + toFloat i * 21 * year - -- 20 * day + toFloat i * 8 * day - 4 * Time.hour + toFloat i * 21 * Time.hour + -- 4 * year + toFloat i * 21 * year + -- 20 * day + toFloat i * 8 * day + 4 * Time.hour + toFloat i * 21 * Time.hour day : Time.Time day = - 24 * Time.hour + 24 * Time.hour year : Time.Time year = - 356 * day + 356 * day @@ -77,41 +75,41 @@ year = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - , date : Time.Time - } + { age : Float + , weight : Float + , height : Float + , income : Float + , date : Time.Time + } alice : List Data alice = - [ Data 4 24 0.94 0 (dateInterval 0) - , Data 25 75 1.73 25000 (dateInterval 1) - , Data 46 83 1.75 40000 (dateInterval 2) - ] + [ Data 4 24 0.94 0 (dateInterval 0) + , Data 25 75 1.73 25000 (dateInterval 1) + , Data 46 83 1.75 40000 (dateInterval 2) + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 (dateInterval 0) - , Data 25 75 1.87 28000 (dateInterval 1) - , Data 46 77 1.87 52000 (dateInterval 2) - ] + [ Data 4 22 1.01 0 (dateInterval 0) + , Data 25 75 1.87 28000 (dateInterval 1) + , Data 46 77 1.87 52000 (dateInterval 2) + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 (dateInterval 0) - , Data 25 89 1.83 85000 (dateInterval 1) - , Data 46 95 1.84 120000 (dateInterval 2) - ] + [ Data 4 21 0.98 0 (dateInterval 0) + , Data 25 89 1.83 85000 (dateInterval 1) + , Data 46 95 1.84 120000 (dateInterval 2) + ] average : List Data average = - [ Data 4 22.3 1.0 0 (dateInterval 0) - , Data 25 79.7 1.8 46000 (dateInterval 1) - , Data 46 85 1.82 70667 (dateInterval 2) - ] + [ Data 4 22.3 1.0 0 (dateInterval 0) + , Data 25 79.7 1.8 46000 (dateInterval 1) + , Data 46 85 1.82 70667 (dateInterval 2) + ] diff --git a/examples/Docs/Axis/Example4.elm b/examples/Docs/Axis/Example4.elm index 48e0ccf..b8f6d53 100644 --- a/examples/Docs/Axis/Example4.elm +++ b/examples/Docs/Axis/Example4.elm @@ -1,57 +1,52 @@ module Docs.Axis.Example4 exposing (main) - -import Time import Html import LineChart -import LineChart.Colors as Colors -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.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 Time main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = xAxisConfig - , y = Axis.default 400 "($)" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = xAxisConfig + , y = Axis.default 400 "($)" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] xAxisConfig : Axis.Config Data msg xAxisConfig = - Axis.picky 650 "Age (years)" .age [ 4, 25, 46 ] + Axis.picky 650 "Age (years)" .age [ 4, 25, 46 ] @@ -59,56 +54,56 @@ xAxisConfig = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - , date : Time.Time - } + { age : Float + , weight : Float + , height : Float + , income : Float + , date : Time.Time + } alice : List Data alice = - [ Data 4 24 0.94 0 (dateInterval 0) - , Data 25 75 1.73 25000 (dateInterval 1) - , Data 46 83 1.75 40000 (dateInterval 2) - ] + [ Data 4 24 0.94 0 (dateInterval 0) + , Data 25 75 1.73 25000 (dateInterval 1) + , Data 46 83 1.75 40000 (dateInterval 2) + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 (dateInterval 0) - , Data 25 75 1.87 28000 (dateInterval 1) - , Data 46 77 1.87 52000 (dateInterval 2) - ] + [ Data 4 22 1.01 0 (dateInterval 0) + , Data 25 75 1.87 28000 (dateInterval 1) + , Data 46 77 1.87 52000 (dateInterval 2) + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 (dateInterval 0) - , Data 25 89 1.83 85000 (dateInterval 1) - , Data 46 95 1.84 120000 (dateInterval 2) - ] + [ Data 4 21 0.98 0 (dateInterval 0) + , Data 25 89 1.83 85000 (dateInterval 1) + , Data 46 95 1.84 120000 (dateInterval 2) + ] average : List Data average = - [ Data 4 22.3 1.0 0 (dateInterval 0) - , Data 25 79.7 1.8 46000 (dateInterval 1) - , Data 46 85 1.82 70667 (dateInterval 2) - ] + [ Data 4 22.3 1.0 0 (dateInterval 0) + , Data 25 79.7 1.8 46000 (dateInterval 1) + , Data 46 85 1.82 70667 (dateInterval 2) + ] dateInterval : Int -> Time.Time dateInterval i = - 4 * year + toFloat i * 21 * year + 4 * year + toFloat i * 21 * year day : Time.Time day = - 24 * Time.hour + 24 * Time.hour year : Time.Time year = - 356 * day + 356 * day diff --git a/examples/Docs/Axis/Example5.elm b/examples/Docs/Axis/Example5.elm index 10bcf2e..31a797a 100644 --- a/examples/Docs/Axis/Example5.elm +++ b/examples/Docs/Axis/Example5.elm @@ -1,57 +1,52 @@ module Docs.Axis.Example5 exposing (main) - -import Time import Html import LineChart -import LineChart.Colors as Colors -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.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 Time main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = Axis.time 650 "Date" .date - , y = yAxisConfig - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = Axis.time 650 "Date" .date + , y = yAxisConfig + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] yAxisConfig : Axis.Config Data msg yAxisConfig = - Axis.none 400 .income + Axis.none 400 .income @@ -59,56 +54,56 @@ yAxisConfig = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - , date : Time.Time - } + { age : Float + , weight : Float + , height : Float + , income : Float + , date : Time.Time + } alice : List Data alice = - [ Data 4 24 0.94 0 (dateInterval 0) - , Data 25 75 1.73 25000 (dateInterval 1) - , Data 46 83 1.75 40000 (dateInterval 2) - ] + [ Data 4 24 0.94 0 (dateInterval 0) + , Data 25 75 1.73 25000 (dateInterval 1) + , Data 46 83 1.75 40000 (dateInterval 2) + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 (dateInterval 0) - , Data 25 75 1.87 28000 (dateInterval 1) - , Data 46 77 1.87 52000 (dateInterval 2) - ] + [ Data 4 22 1.01 0 (dateInterval 0) + , Data 25 75 1.87 28000 (dateInterval 1) + , Data 46 77 1.87 52000 (dateInterval 2) + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 (dateInterval 0) - , Data 25 89 1.83 85000 (dateInterval 1) - , Data 46 95 1.84 120000 (dateInterval 2) - ] + [ Data 4 21 0.98 0 (dateInterval 0) + , Data 25 89 1.83 85000 (dateInterval 1) + , Data 46 95 1.84 120000 (dateInterval 2) + ] average : List Data average = - [ Data 4 22.3 1.0 0 (dateInterval 0) - , Data 25 79.7 1.8 46000 (dateInterval 1) - , Data 46 85 1.82 70667 (dateInterval 2) - ] + [ Data 4 22.3 1.0 0 (dateInterval 0) + , Data 25 79.7 1.8 46000 (dateInterval 1) + , Data 46 85 1.82 70667 (dateInterval 2) + ] dateInterval : Int -> Time.Time dateInterval i = - 4 * year + toFloat i * 21 * year + 4 * year + toFloat i * 21 * year day : Time.Time day = - 24 * Time.hour + 24 * Time.hour year : Time.Time year = - 356 * day + 356 * day diff --git a/examples/Docs/Axis/Example6.elm b/examples/Docs/Axis/Example6.elm index b1a6159..00d756a 100644 --- a/examples/Docs/Axis/Example6.elm +++ b/examples/Docs/Axis/Example6.elm @@ -1,68 +1,63 @@ module Docs.Axis.Example6 exposing (main) - -import Time import Html import LineChart -import LineChart.Colors as Colors -import LineChart.Junk as Junk import LineChart.Area as Area import LineChart.Axis as Axis -import LineChart.Axis.Title as Title -import LineChart.Axis.Range as Range +import LineChart.Axis.Intersection as Intersection import LineChart.Axis.Line as AxisLine +import LineChart.Axis.Range as Range import LineChart.Axis.Ticks as Ticks -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.Title as Title import LineChart.Colors as Colors -import LineChart.Events as Events -import LineChart.Legends as Legends import LineChart.Container as Container +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 Time main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = xAxisConfig - , y = Axis.default 400 "($)" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = xAxisConfig + , y = Axis.default 400 "($)" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] xAxisConfig : Axis.Config Data msg xAxisConfig = - Axis.custom - { title = Title.default "Year" - , variable = Just << .date - , pixels = 700 - , range = Range.padded 20 20 - , axisLine = AxisLine.full Colors.black - , ticks = Ticks.time 5 - } + Axis.custom + { title = Title.default "Year" + , variable = Just << .date + , pixels = 700 + , range = Range.padded 20 20 + , axisLine = AxisLine.full Colors.black + , ticks = Ticks.time 5 + } @@ -70,56 +65,56 @@ xAxisConfig = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - , date : Time.Time - } + { age : Float + , weight : Float + , height : Float + , income : Float + , date : Time.Time + } alice : List Data alice = - [ Data 4 24 0.94 0 (dateInterval 0) - , Data 25 75 1.73 25000 (dateInterval 1) - , Data 46 83 1.75 40000 (dateInterval 2) - ] + [ Data 4 24 0.94 0 (dateInterval 0) + , Data 25 75 1.73 25000 (dateInterval 1) + , Data 46 83 1.75 40000 (dateInterval 2) + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 (dateInterval 0) - , Data 25 75 1.87 28000 (dateInterval 1) - , Data 46 77 1.87 52000 (dateInterval 2) - ] + [ Data 4 22 1.01 0 (dateInterval 0) + , Data 25 75 1.87 28000 (dateInterval 1) + , Data 46 77 1.87 52000 (dateInterval 2) + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 (dateInterval 0) - , Data 25 89 1.83 85000 (dateInterval 1) - , Data 46 95 1.84 120000 (dateInterval 2) - ] + [ Data 4 21 0.98 0 (dateInterval 0) + , Data 25 89 1.83 85000 (dateInterval 1) + , Data 46 95 1.84 120000 (dateInterval 2) + ] average : List Data average = - [ Data 4 22.3 1.0 0 (dateInterval 0) - , Data 25 79.7 1.8 46000 (dateInterval 1) - , Data 46 85 1.82 70667 (dateInterval 2) - ] + [ Data 4 22.3 1.0 0 (dateInterval 0) + , Data 25 79.7 1.8 46000 (dateInterval 1) + , Data 46 85 1.82 70667 (dateInterval 2) + ] dateInterval : Int -> Time.Time dateInterval i = - 4 * year + toFloat i * 21 * year + 4 * year + toFloat i * 21 * year day : Time.Time day = - 24 * Time.hour + 24 * Time.hour year : Time.Time year = - 356 * day + 356 * day diff --git a/examples/Docs/AxisLine/Example1.elm b/examples/Docs/AxisLine/Example1.elm index 1bef94a..dd5ec77 100644 --- a/examples/Docs/AxisLine/Example1.elm +++ b/examples/Docs/AxisLine/Example1.elm @@ -1,88 +1,87 @@ module Docs.AxisLine.Example1 exposing (main) - -import Time import Html import LineChart -import LineChart.Colors as Colors -import LineChart.Junk as Junk import LineChart.Area as Area import LineChart.Axis as Axis -import LineChart.Axis.Title as Title -import LineChart.Axis.Range as Range +import LineChart.Axis.Intersection as Intersection import LineChart.Axis.Line as AxisLine +import LineChart.Axis.Range as Range import LineChart.Axis.Ticks as Ticks -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.Title as Title import LineChart.Colors as Colors -import LineChart.Events as Events -import LineChart.Legends as Legends import LineChart.Container as Container +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 Time main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = xAxisConfig - , y = Axis.default 400 "($)" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = xAxisConfig + , y = Axis.default 400 "($)" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] xAxisConfig : Axis.Config Data msg xAxisConfig = - Axis.custom - { title = Title.default "Weight" - , variable = Just << .weight - , pixels = 700 - , range = Range.default - , axisLine = axisLineConfig - , ticks = Ticks.default - } + Axis.custom + { title = Title.default "Weight" + , variable = Just << .weight + , pixels = 700 + , range = Range.default + , axisLine = axisLineConfig + , ticks = Ticks.default + } axisLineConfig : AxisLine.Config msg axisLineConfig = - -- AxisLine.default - -- AxisLine.rangeFrame Colors.gray - -- AxisLine.full Colors.gray - AxisLine.none - -- customAxisLineConfig + -- AxisLine.default + -- AxisLine.rangeFrame Colors.gray + -- AxisLine.full Colors.gray + AxisLine.none + + + +-- customAxisLineConfig customAxisLineConfig : AxisLine.Config msg customAxisLineConfig = - AxisLine.custom <| \dataRange axisRange -> - { color = Colors.gray - , width = 2 - , events = [] - , start = dataRange.min - , end = 50 - } + AxisLine.custom <| + \dataRange axisRange -> + { color = Colors.gray + , width = 2 + , events = [] + , start = dataRange.min + , end = 50 + } @@ -90,56 +89,56 @@ customAxisLineConfig = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - , date : Time.Time - } + { age : Float + , weight : Float + , height : Float + , income : Float + , date : Time.Time + } alice : List Data alice = - [ Data 4 24 0.94 0 (dateInterval 0) - , Data 25 75 1.73 25000 (dateInterval 1) - , Data 46 83 1.75 40000 (dateInterval 2) - ] + [ Data 4 24 0.94 0 (dateInterval 0) + , Data 25 75 1.73 25000 (dateInterval 1) + , Data 46 83 1.75 40000 (dateInterval 2) + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 (dateInterval 0) - , Data 25 75 1.87 28000 (dateInterval 1) - , Data 46 77 1.87 52000 (dateInterval 2) - ] + [ Data 4 22 1.01 0 (dateInterval 0) + , Data 25 75 1.87 28000 (dateInterval 1) + , Data 46 77 1.87 52000 (dateInterval 2) + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 (dateInterval 0) - , Data 25 89 1.83 85000 (dateInterval 1) - , Data 46 95 1.84 120000 (dateInterval 2) - ] + [ Data 4 21 0.98 0 (dateInterval 0) + , Data 25 89 1.83 85000 (dateInterval 1) + , Data 46 95 1.84 120000 (dateInterval 2) + ] average : List Data average = - [ Data 4 22.3 1.0 0 (dateInterval 0) - , Data 25 79.7 1.8 46000 (dateInterval 1) - , Data 46 85 1.82 70667 (dateInterval 2) - ] + [ Data 4 22.3 1.0 0 (dateInterval 0) + , Data 25 79.7 1.8 46000 (dateInterval 1) + , Data 46 85 1.82 70667 (dateInterval 2) + ] dateInterval : Int -> Time.Time dateInterval i = - 4 * year + toFloat i * 21 * year + 4 * year + toFloat i * 21 * year day : Time.Time day = - 24 * Time.hour + 24 * Time.hour year : Time.Time year = - 356 * day + 356 * day diff --git a/examples/Docs/Colors/Example1.elm b/examples/Docs/Colors/Example1.elm index d97f6eb..6ae72fd 100644 --- a/examples/Docs/Colors/Example1.elm +++ b/examples/Docs/Colors/Example1.elm @@ -1,69 +1,64 @@ module Docs.LineChart.Example6 exposing (main) - import Html import LineChart -import LineChart.Colors as Colors -import LineChart.Dots as Dots -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 main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = Axis.picky 700 "" .x [ 0, 1 ] - , y = Axis.picky 400 "" .y [ 0, 16 ] - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.stacked 0.5 - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.red Dots.circle "red" data - , LineChart.line Colors.redLight Dots.circle "redLight" data - , LineChart.line Colors.pink Dots.circle "pink" data - , LineChart.line Colors.pinkLight Dots.circle "pinkLight" data - , LineChart.line Colors.gold Dots.circle "gold" data - , LineChart.line Colors.goldLight Dots.circle "goldLight" data - , LineChart.line Colors.green Dots.circle "green" data - , LineChart.line Colors.greenLight Dots.circle "greenLight" data - , LineChart.line Colors.teal Dots.circle "teal" data - , LineChart.line Colors.tealLight Dots.circle "tealLight" data - , LineChart.line Colors.cyan Dots.circle "cyan" data - , LineChart.line Colors.cyanLight Dots.circle "cyanLight" data - , LineChart.line Colors.blue Dots.circle "blue" data - , LineChart.line Colors.blueLight Dots.circle "blueLight" data - , LineChart.line Colors.purple Dots.circle "purple" data - , LineChart.line Colors.purpleLight Dots.circle "purpleLight" data - ] + LineChart.viewCustom + { x = Axis.picky 700 "" .x [ 0, 1 ] + , y = Axis.picky 400 "" .y [ 0, 16 ] + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.stacked 0.5 + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.red Dots.circle "red" data + , LineChart.line Colors.redLight Dots.circle "redLight" data + , LineChart.line Colors.pink Dots.circle "pink" data + , LineChart.line Colors.pinkLight Dots.circle "pinkLight" data + , LineChart.line Colors.gold Dots.circle "gold" data + , LineChart.line Colors.goldLight Dots.circle "goldLight" data + , LineChart.line Colors.green Dots.circle "green" data + , LineChart.line Colors.greenLight Dots.circle "greenLight" data + , LineChart.line Colors.teal Dots.circle "teal" data + , LineChart.line Colors.tealLight Dots.circle "tealLight" data + , LineChart.line Colors.cyan Dots.circle "cyan" data + , LineChart.line Colors.cyanLight Dots.circle "cyanLight" data + , LineChart.line Colors.blue Dots.circle "blue" data + , LineChart.line Colors.blueLight Dots.circle "blueLight" data + , LineChart.line Colors.purple Dots.circle "purple" data + , LineChart.line Colors.purpleLight Dots.circle "purpleLight" data + ] data : List Coordinate.Point data = - [ Coordinate.Point 0 1 - , Coordinate.Point 1 1 - ] + [ Coordinate.Point 0 1 + , Coordinate.Point 1 1 + ] diff --git a/examples/Docs/Container/Example1.elm b/examples/Docs/Container/Example1.elm index d3e260f..fa619e6 100644 --- a/examples/Docs/Container/Example1.elm +++ b/examples/Docs/Container/Example1.elm @@ -1,51 +1,46 @@ module Docs.Container.Example1 exposing (main) - import Html import LineChart -import LineChart.Colors as Colors -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.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 main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = Axis.default 700 "Age" .age - , y = Axis.default 400 "Income" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = Axis.default 700 "Age" .age + , y = Axis.default 400 "Income" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] @@ -53,40 +48,40 @@ chart = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 4 24 0.94 0 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 4 24 0.94 0 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 - , Data 25 75 1.87 28000 - , Data 43 77 1.87 52000 - ] + [ Data 4 22 1.01 0 + , Data 25 75 1.87 28000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 4 21 0.98 0 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] average : List Data average = - [ Data 4 22.3 1.0 0 - , Data 25 79.7 1.8 46000 - , Data 43 85 1.82 70667 - ] + [ Data 4 22.3 1.0 0 + , Data 25 79.7 1.8 46000 + , Data 43 85 1.82 70667 + ] diff --git a/examples/Docs/Container/Example2.elm b/examples/Docs/Container/Example2.elm index 287ce95..d2e9adc 100644 --- a/examples/Docs/Container/Example2.elm +++ b/examples/Docs/Container/Example2.elm @@ -1,51 +1,46 @@ module Docs.Container.Example2 exposing (main) - import Html import LineChart -import LineChart.Colors as Colors -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.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 main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = Axis.default 700 "Age" .age - , y = Axis.default 400 "Income" .income - , container = Container.responsive "line-chart-1" -- Try resizing your brower window! - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = Axis.default 700 "Age" .age + , y = Axis.default 400 "Income" .income + , container = Container.responsive "line-chart-1" -- Try resizing your brower window! + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] @@ -53,40 +48,40 @@ chart = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 4 24 0.94 0 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 4 24 0.94 0 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 - , Data 25 75 1.87 28000 - , Data 43 77 1.87 52000 - ] + [ Data 4 22 1.01 0 + , Data 25 75 1.87 28000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 4 21 0.98 0 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] average : List Data average = - [ Data 4 22.3 1.0 0 - , Data 25 79.7 1.8 46000 - , Data 43 85 1.82 70667 - ] + [ Data 4 22.3 1.0 0 + , Data 25 79.7 1.8 46000 + , Data 43 85 1.82 70667 + ] diff --git a/examples/Docs/Container/Example3.elm b/examples/Docs/Container/Example3.elm index 0e7c5bd..8a41a31 100644 --- a/examples/Docs/Container/Example3.elm +++ b/examples/Docs/Container/Example3.elm @@ -1,63 +1,58 @@ module Docs.Container.Example3 exposing (main) - import Html import Html.Attributes import LineChart -import LineChart.Colors as Colors -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.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 main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = Axis.default 700 "Age" .age - , y = Axis.default 400 "Income" .income - , container = containerConfig - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = Axis.default 700 "Age" .age + , y = Axis.default 400 "Income" .income + , container = containerConfig + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] containerConfig : Container.Config msg containerConfig = - Container.custom - { attributesHtml = [ Html.Attributes.style [ ( "font-family", "monospace" ) ] ] - , attributesSvg = [] - , size = Container.static - , margin = Container.Margin 30 100 60 80 - , id = "chart-id" - } + Container.custom + { attributesHtml = [ Html.Attributes.style [ ( "font-family", "monospace" ) ] ] + , attributesSvg = [] + , size = Container.static + , margin = Container.Margin 30 100 60 80 + , id = "chart-id" + } @@ -65,40 +60,40 @@ containerConfig = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 4 24 0.94 0 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 4 24 0.94 0 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 - , Data 25 75 1.87 28000 - , Data 43 77 1.87 52000 - ] + [ Data 4 22 1.01 0 + , Data 25 75 1.87 28000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 4 21 0.98 0 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] average : List Data average = - [ Data 4 22.3 1.0 0 - , Data 25 79.7 1.8 46000 - , Data 43 85 1.82 70667 - ] + [ Data 4 22.3 1.0 0 + , Data 25 79.7 1.8 46000 + , Data 43 85 1.82 70667 + ] diff --git a/examples/Docs/Container/Example4.elm b/examples/Docs/Container/Example4.elm index c2cfa9d..5d9b567 100644 --- a/examples/Docs/Container/Example4.elm +++ b/examples/Docs/Container/Example4.elm @@ -1,51 +1,46 @@ module Docs.Container.Example4 exposing (main) - import Html import LineChart -import LineChart.Colors as Colors -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.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 main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = Axis.default 700 "Age" .age - , y = Axis.default 400 "Income" .income - , container = Container.spaced "line-chart-1" 60 110 60 70 - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = Axis.default 700 "Age" .age + , y = Axis.default 400 "Income" .income + , container = Container.spaced "line-chart-1" 60 110 60 70 + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] @@ -53,40 +48,40 @@ chart = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 4 24 0.94 0 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 4 24 0.94 0 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 - , Data 25 75 1.87 28000 - , Data 43 77 1.87 52000 - ] + [ Data 4 22 1.01 0 + , Data 25 75 1.87 28000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 4 21 0.98 0 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] average : List Data average = - [ Data 4 22.3 1.0 0 - , Data 25 79.7 1.8 46000 - , Data 43 85 1.82 70667 - ] + [ Data 4 22.3 1.0 0 + , Data 25 79.7 1.8 46000 + , Data 43 85 1.82 70667 + ] diff --git a/examples/Docs/Dots/Example1.elm b/examples/Docs/Dots/Example1.elm index a8bad2c..7459c2b 100644 --- a/examples/Docs/Dots/Example1.elm +++ b/examples/Docs/Dots/Example1.elm @@ -1,30 +1,30 @@ module Docs.Dots.Example1 exposing (main) - import Html import LineChart import LineChart.Colors as Colors import LineChart.Dots as Dots -import LineChart.Colors as Colors - - main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.view .age .income - [ LineChart.line Colors.gold Dots.circle "Alice" alice - -- ^^^^^^^^^^^ - , LineChart.line Colors.blue Dots.square "Bobby" bobby - -- ^^^^^^^^^^^ - , LineChart.line Colors.pink Dots.diamond "Chuck" chuck - -- ^^^^^^^^^^^^ - ] + LineChart.view .age + .income + [ LineChart.line Colors.gold Dots.circle "Alice" alice + + -- ^^^^^^^^^^^ + , LineChart.line Colors.blue Dots.square "Bobby" bobby + + -- ^^^^^^^^^^^ + , LineChart.line Colors.pink Dots.diamond "Chuck" chuck + + -- ^^^^^^^^^^^^ + ] @@ -32,40 +32,40 @@ chart = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 4 24 0.94 0 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 4 24 0.94 0 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 - , Data 25 75 1.87 28000 - , Data 43 77 1.87 52000 - ] + [ Data 4 22 1.01 0 + , Data 25 75 1.87 28000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 4 21 0.98 0 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] average : List Data average = - [ Data 4 22.3 1.0 0 - , Data 25 79.7 1.8 46000 - , Data 43 85 1.82 70667 - ] + [ Data 4 22.3 1.0 0 + , Data 25 79.7 1.8 46000 + , Data 43 85 1.82 70667 + ] diff --git a/examples/Docs/Dots/Example2.elm b/examples/Docs/Dots/Example2.elm index 9f48f3d..e62ac45 100644 --- a/examples/Docs/Dots/Example2.elm +++ b/examples/Docs/Dots/Example2.elm @@ -1,53 +1,48 @@ module Docs.Dots.Example2 exposing (main) - import Html import LineChart -import LineChart.Colors as Colors -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.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 main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = Axis.default 700 "Age" .age - , y = Axis.default 400 "Income" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = - -- Dots.default - Dots.custom (Dots.full 8) - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = Axis.default 700 "Age" .age + , y = Axis.default 400 "Income" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = + -- Dots.default + Dots.custom (Dots.full 8) + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] @@ -55,40 +50,40 @@ chart = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 4 24 0.94 0 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 4 24 0.94 0 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 - , Data 25 75 1.87 28000 - , Data 43 77 1.87 52000 - ] + [ Data 4 22 1.01 0 + , Data 25 75 1.87 28000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 4 21 0.98 0 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] average : List Data average = - [ Data 4 22.3 1.0 0 - , Data 25 79.7 1.8 46000 - , Data 43 85 1.82 70667 - ] + [ Data 4 22.3 1.0 0 + , Data 25 79.7 1.8 46000 + , Data 43 85 1.82 70667 + ] diff --git a/examples/Docs/Dots/Example3.elm b/examples/Docs/Dots/Example3.elm index df39e40..1a11a56 100644 --- a/examples/Docs/Dots/Example3.elm +++ b/examples/Docs/Dots/Example3.elm @@ -3,31 +3,27 @@ module Docs.Dots.Example3 exposing (main) import Html import Html.Attributes exposing (class) import LineChart -import LineChart.Colors as Colors -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.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 main : Program Never Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -48,14 +44,14 @@ init = type Msg - = Hover (Maybe Data) + = Hover (Maybe Data) update : Msg -> Model -> Model update msg model = - case msg of - Hover hovering -> - { model | hovering = hovering } + case msg of + Hover hovering -> + { model | hovering = hovering } @@ -64,31 +60,31 @@ update msg model = view : Model -> Html.Html Msg view model = - Html.div - [ class "container" ] - [ chart model ] + Html.div + [ class "container" ] + [ chart model ] chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.hoverOne Hover - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.hoverOne model.hovering - } - [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck - , LineChart.line Colors.cyan Dots.circle "Bobby" bobby - , LineChart.line Colors.purple Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.hoverOne Hover + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.hoverOne model.hovering + } + [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck + , LineChart.line Colors.cyan Dots.circle "Bobby" bobby + , LineChart.line Colors.purple Dots.diamond "Alice" alice + ] @@ -96,35 +92,35 @@ chart model = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 10 34 1.34 0 - , Data 16 42 1.62 3000 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 10 34 1.34 0 + , Data 16 42 1.62 3000 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 10 38 1.32 0 - , Data 17 69 1.75 2000 - , Data 25 75 1.87 32000 - , Data 43 77 1.87 52000 - ] + [ Data 10 38 1.32 0 + , Data 17 69 1.75 2000 + , Data 25 75 1.87 32000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 10 42 1.35 0 - , Data 15 72 1.72 1800 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 10 42 1.35 0 + , Data 15 72 1.72 1800 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] diff --git a/examples/Docs/Dots/Example4.elm b/examples/Docs/Dots/Example4.elm index 1fcb3a1..fb53c9f 100644 --- a/examples/Docs/Dots/Example4.elm +++ b/examples/Docs/Dots/Example4.elm @@ -3,31 +3,27 @@ module Docs.Dots.Example4 exposing (main) import Html import Html.Attributes exposing (class) import LineChart -import LineChart.Colors as Colors -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.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 main : Program Never Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -48,14 +44,14 @@ init = type Msg - = Hover (Maybe Data) + = Hover (Maybe Data) update : Msg -> Model -> Model update msg model = - case msg of - Hover hovering -> - { model | hovering = hovering } + case msg of + Hover hovering -> + { model | hovering = hovering } @@ -64,46 +60,46 @@ update msg model = view : Model -> Html.Html Msg view model = - Html.div - [ class "container" ] - [ chart model ] + Html.div + [ class "container" ] + [ chart model ] chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.hoverOne Hover - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = customDotsConfig - } - [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck - , LineChart.line Colors.cyan Dots.circle "Bobby" bobby - , LineChart.line Colors.purple Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.hoverOne Hover + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = customDotsConfig + } + [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck + , LineChart.line Colors.cyan Dots.circle "Bobby" bobby + , LineChart.line Colors.purple Dots.diamond "Alice" alice + ] customDotsConfig : Dots.Config Data customDotsConfig = - let - styleLegend _ = - Dots.full 7 - - styleIndividual datum = - Dots.full <| (datum.height - 1) * 12 - in - Dots.customAny - { legend = styleLegend - , individual = styleIndividual - } + let + styleLegend _ = + Dots.full 7 + + styleIndividual datum = + Dots.full <| (datum.height - 1) * 12 + in + Dots.customAny + { legend = styleLegend + , individual = styleIndividual + } @@ -111,35 +107,35 @@ customDotsConfig = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 10 34 1.34 0 - , Data 16 42 1.62 3000 - , Data 25 73 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 10 34 1.34 0 + , Data 16 42 1.62 3000 + , Data 25 73 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 10 38 1.32 0 - , Data 17 69 1.75 2000 - , Data 25 78 1.87 32000 - , Data 43 77 1.87 52000 - ] + [ Data 10 38 1.32 0 + , Data 17 69 1.75 2000 + , Data 25 78 1.87 32000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 10 42 1.35 0 - , Data 15 72 1.72 1800 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 10 42 1.35 0 + , Data 15 72 1.72 1800 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] diff --git a/examples/Docs/Dots/Example5.elm b/examples/Docs/Dots/Example5.elm index 4dcd1f0..3cc3444 100644 --- a/examples/Docs/Dots/Example5.elm +++ b/examples/Docs/Dots/Example5.elm @@ -3,31 +3,27 @@ module Docs.Dots.Example3 exposing (main) import Html import Html.Attributes exposing (class) import LineChart -import LineChart.Colors as Colors -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.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 main : Program Never Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -48,14 +44,14 @@ init = type Msg - = Hover (List Data) + = Hover (List Data) update : Msg -> Model -> Model update msg model = - case msg of - Hover hovering -> - { model | hovering = hovering } + case msg of + Hover hovering -> + { model | hovering = hovering } @@ -64,31 +60,31 @@ update msg model = view : Model -> Html.Html Msg view model = - Html.div - [ class "container" ] - [ chart model ] + Html.div + [ class "container" ] + [ chart model ] chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.hoverMany Hover - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.hoverMany model.hovering - } - [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck - , LineChart.line Colors.cyan Dots.circle "Bobby" bobby - , LineChart.line Colors.purple Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.hoverMany Hover + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.hoverMany model.hovering + } + [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck + , LineChart.line Colors.cyan Dots.circle "Bobby" bobby + , LineChart.line Colors.purple Dots.diamond "Alice" alice + ] @@ -96,35 +92,35 @@ chart model = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 10 34 1.34 0 - , Data 16 42 1.62 3000 - , Data 25 73 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 10 34 1.34 0 + , Data 16 42 1.62 3000 + , Data 25 73 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 10 38 1.32 0 - , Data 17 69 1.75 2000 - , Data 25 76 1.87 32000 - , Data 43 77 1.87 52000 - ] + [ Data 10 38 1.32 0 + , Data 17 69 1.75 2000 + , Data 25 76 1.87 32000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 10 42 1.35 0 - , Data 15 72 1.72 1800 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 10 42 1.35 0 + , Data 15 72 1.72 1800 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] diff --git a/examples/Docs/Dots/Example6.elm b/examples/Docs/Dots/Example6.elm index e3e7623..0928b07 100644 --- a/examples/Docs/Dots/Example6.elm +++ b/examples/Docs/Dots/Example6.elm @@ -3,31 +3,27 @@ module Docs.Dots.Example3 exposing (main) import Html import Html.Attributes exposing (class) import LineChart -import LineChart.Colors as Colors -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.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 main : Program Never Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -48,14 +44,14 @@ init = type Msg - = Hover (Maybe Data) + = Hover (Maybe Data) update : Msg -> Model -> Model update msg model = - case msg of - Hover hovering -> - { model | hovering = hovering } + case msg of + Hover hovering -> + { model | hovering = hovering } @@ -64,48 +60,50 @@ update msg model = view : Model -> Html.Html Msg view model = - Html.div - [ class "container" ] - [ chart model ] + Html.div + [ class "container" ] + [ chart model ] chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.hoverOne Hover - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = customDotsConfig model.hovering - } - [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck - , LineChart.line Colors.cyan Dots.circle "Bobby" bobby - , LineChart.line Colors.purple Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.hoverOne Hover + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = customDotsConfig model.hovering + } + [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck + , LineChart.line Colors.cyan Dots.circle "Bobby" bobby + , LineChart.line Colors.purple Dots.diamond "Alice" alice + ] customDotsConfig : Maybe Data -> Dots.Config Data customDotsConfig maybeHovered = - let - styleLegend _ = - Dots.disconnected 10 2 - - styleIndividual datum = - if Just datum == maybeHovered - then Dots.empty 8 2 - else Dots.disconnected 10 2 - in - Dots.customAny - { legend = styleLegend - , individual = styleIndividual - } + let + styleLegend _ = + Dots.disconnected 10 2 + + styleIndividual datum = + if Just datum == maybeHovered then + Dots.empty 8 2 + + else + Dots.disconnected 10 2 + in + Dots.customAny + { legend = styleLegend + , individual = styleIndividual + } @@ -113,35 +111,35 @@ customDotsConfig maybeHovered = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 10 34 1.34 0 - , Data 16 42 1.62 3000 - , Data 25 73 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 10 34 1.34 0 + , Data 16 42 1.62 3000 + , Data 25 73 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 10 38 1.32 0 - , Data 17 69 1.75 2000 - , Data 25 76 1.87 32000 - , Data 43 77 1.87 52000 - ] + [ Data 10 38 1.32 0 + , Data 17 69 1.75 2000 + , Data 25 76 1.87 32000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 10 42 1.35 0 - , Data 15 72 1.72 1800 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 10 42 1.35 0 + , Data 15 72 1.72 1800 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] diff --git a/examples/Docs/Events/Example1.elm b/examples/Docs/Events/Example1.elm index a10b6dd..ff8b88a 100644 --- a/examples/Docs/Events/Example1.elm +++ b/examples/Docs/Events/Example1.elm @@ -3,31 +3,27 @@ module Docs.Events.Example1 exposing (main) import Html import Html.Attributes exposing (class) import LineChart -import LineChart.Colors as Colors -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.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 main : Program Never Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -48,14 +44,14 @@ init = type Msg - = Hover (Maybe Data) + = Hover (Maybe Data) update : Msg -> Model -> Model update msg model = - case msg of - Hover hovering -> - { model | hovering = hovering } + case msg of + Hover hovering -> + { model | hovering = hovering } @@ -64,31 +60,31 @@ update msg model = view : Model -> Html.Html Msg view model = - Html.div - [ class "container" ] - [ chart model ] + Html.div + [ class "container" ] + [ chart model ] chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.hoverOne Hover - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.hoverOne model.hovering - } - [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck - , LineChart.line Colors.cyan Dots.circle "Bobby" bobby - , LineChart.line Colors.purple Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.hoverOne Hover + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.hoverOne model.hovering + } + [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck + , LineChart.line Colors.cyan Dots.circle "Bobby" bobby + , LineChart.line Colors.purple Dots.diamond "Alice" alice + ] @@ -96,35 +92,35 @@ chart model = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 10 34 1.34 0 - , Data 16 42 1.62 3000 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 10 34 1.34 0 + , Data 16 42 1.62 3000 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 10 38 1.32 0 - , Data 17 69 1.75 2000 - , Data 25 75 1.87 32000 - , Data 43 77 1.87 52000 - ] + [ Data 10 38 1.32 0 + , Data 17 69 1.75 2000 + , Data 25 75 1.87 32000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 10 42 1.35 0 - , Data 15 72 1.72 1800 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 10 42 1.35 0 + , Data 15 72 1.72 1800 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] diff --git a/examples/Docs/Events/Example2.elm b/examples/Docs/Events/Example2.elm index e9546bc..344849e 100644 --- a/examples/Docs/Events/Example2.elm +++ b/examples/Docs/Events/Example2.elm @@ -3,31 +3,27 @@ module Docs.Events.Example2 exposing (main) import Html import Html.Attributes exposing (class) import LineChart -import LineChart.Colors as Colors -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.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 main : Program Never Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -48,14 +44,14 @@ init = type Msg - = Hover (List Data) + = Hover (List Data) update : Msg -> Model -> Model update msg model = - case msg of - Hover hovering -> - { model | hovering = hovering } + case msg of + Hover hovering -> + { model | hovering = hovering } @@ -64,31 +60,31 @@ update msg model = view : Model -> Html.Html Msg view model = - Html.div - [ class "container" ] - [ chart model ] + Html.div + [ class "container" ] + [ chart model ] chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.hoverMany Hover - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.hoverMany model.hovering - } - [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck - , LineChart.line Colors.cyan Dots.circle "Bobby" bobby - , LineChart.line Colors.purple Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.hoverMany Hover + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.hoverMany model.hovering + } + [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck + , LineChart.line Colors.cyan Dots.circle "Bobby" bobby + , LineChart.line Colors.purple Dots.diamond "Alice" alice + ] @@ -96,35 +92,35 @@ chart model = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 10 34 1.34 0 - , Data 16 42 1.62 3000 - , Data 25 73 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 10 34 1.34 0 + , Data 16 42 1.62 3000 + , Data 25 73 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 10 38 1.32 0 - , Data 17 69 1.75 2000 - , Data 25 76 1.87 32000 - , Data 43 77 1.87 52000 - ] + [ Data 10 38 1.32 0 + , Data 17 69 1.75 2000 + , Data 25 76 1.87 32000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 10 42 1.35 0 - , Data 15 72 1.72 1800 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 10 42 1.35 0 + , Data 15 72 1.72 1800 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] diff --git a/examples/Docs/Events/Example3.elm b/examples/Docs/Events/Example3.elm index 6244592..1ee5e4e 100644 --- a/examples/Docs/Events/Example3.elm +++ b/examples/Docs/Events/Example3.elm @@ -3,31 +3,27 @@ module Docs.Events.Example3 exposing (main) import Html import Html.Attributes exposing (class) import LineChart -import LineChart.Colors as Colors -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.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 main : Program Never Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -48,14 +44,14 @@ init = type Msg - = Click (Maybe Data) + = Click (Maybe Data) update : Msg -> Model -> Model update msg model = - case msg of - Click hovering -> - { model | hovering = hovering } + case msg of + Click hovering -> + { model | hovering = hovering } @@ -64,31 +60,31 @@ update msg model = view : Model -> Html.Html Msg view model = - Html.div - [ class "container" ] - [ chart model ] + Html.div + [ class "container" ] + [ chart model ] chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.click Click - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.hoverOne model.hovering - } - [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck - , LineChart.line Colors.cyan Dots.circle "Bobby" bobby - , LineChart.line Colors.purple Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.click Click + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.hoverOne model.hovering + } + [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck + , LineChart.line Colors.cyan Dots.circle "Bobby" bobby + , LineChart.line Colors.purple Dots.diamond "Alice" alice + ] @@ -96,35 +92,35 @@ chart model = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 10 34 1.34 0 - , Data 16 42 1.62 3000 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 10 34 1.34 0 + , Data 16 42 1.62 3000 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 10 38 1.32 0 - , Data 17 69 1.75 2000 - , Data 25 75 1.87 32000 - , Data 43 77 1.87 52000 - ] + [ Data 10 38 1.32 0 + , Data 17 69 1.75 2000 + , Data 25 75 1.87 32000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 10 42 1.35 0 - , Data 15 72 1.72 1800 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 10 42 1.35 0 + , Data 15 72 1.72 1800 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] diff --git a/examples/Docs/Events/Example4.elm b/examples/Docs/Events/Example4.elm index 3bbc7ea..7250973 100644 --- a/examples/Docs/Events/Example4.elm +++ b/examples/Docs/Events/Example4.elm @@ -3,31 +3,27 @@ module Docs.Events.Example4 exposing (main) import Html import Html.Attributes exposing (class) import LineChart -import LineChart.Colors as Colors -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.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 main : Program Never Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -48,14 +44,14 @@ init = type Msg - = Hover (Maybe Data) + = Hover (Maybe Data) update : Msg -> Model -> Model update msg model = - case msg of - Hover hovering -> - { model | hovering = hovering } + case msg of + Hover hovering -> + { model | hovering = hovering } @@ -64,35 +60,35 @@ update msg model = view : Model -> Html.Html Msg view model = - Html.div - [ class "container" ] - [ chart model ] + Html.div + [ class "container" ] + [ chart model ] chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = - Events.custom - [ Events.onMouseMove Hover Events.getNearest - , Events.onMouseLeave (Hover Nothing) - ] - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.hoverOne model.hovering - } - [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck - , LineChart.line Colors.cyan Dots.circle "Bobby" bobby - , LineChart.line Colors.purple Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = + Events.custom + [ Events.onMouseMove Hover Events.getNearest + , Events.onMouseLeave (Hover Nothing) + ] + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.hoverOne model.hovering + } + [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck + , LineChart.line Colors.cyan Dots.circle "Bobby" bobby + , LineChart.line Colors.purple Dots.diamond "Alice" alice + ] @@ -100,35 +96,35 @@ chart model = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 10 34 1.34 0 - , Data 16 42 1.62 3000 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 10 34 1.34 0 + , Data 16 42 1.62 3000 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 10 38 1.32 0 - , Data 17 69 1.75 2000 - , Data 25 75 1.87 32000 - , Data 43 77 1.87 52000 - ] + [ Data 10 38 1.32 0 + , Data 17 69 1.75 2000 + , Data 25 75 1.87 32000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 10 42 1.35 0 - , Data 15 72 1.72 1800 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 10 42 1.35 0 + , Data 15 72 1.72 1800 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] diff --git a/examples/Docs/Intersection/Example1.elm b/examples/Docs/Intersection/Example1.elm index 1f111af..7a092b4 100644 --- a/examples/Docs/Intersection/Example1.elm +++ b/examples/Docs/Intersection/Example1.elm @@ -1,65 +1,63 @@ module Docs.Intersection.Example1 exposing (main) - import Html import LineChart -import LineChart.Colors as Colors -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 main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = Axis.default 650 "Age (years)" .age - , y = Axis.default 400 "Income ($)" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = intersectionConfig - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = Axis.default 650 "Age (years)" .age + , y = Axis.default 400 "Income ($)" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = intersectionConfig + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] intersectionConfig : Intersection.Config intersectionConfig = - Intersection.default - -- Intersection.atOrigin - -- Intersection.at 0 3 - -- Intersection.custom .min middle + Intersection.default + + + +-- Intersection.atOrigin +-- Intersection.at 0 3 +-- Intersection.custom .min middle middle : Coordinate.Range -> Float middle { min, max } = - min + (max - min) / 2 + min + (max - min) / 2 @@ -67,40 +65,40 @@ middle { min, max } = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 4 24 0.94 0 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 4 24 0.94 0 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 - , Data 25 75 1.87 28000 - , Data 43 77 1.87 52000 - ] + [ Data 4 22 1.01 0 + , Data 25 75 1.87 28000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 4 21 0.98 0 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] average : List Data average = - [ Data 4 22.3 1.0 0 - , Data 25 79.7 1.8 46000 - , Data 43 85 1.82 70667 - ] + [ Data 4 22.3 1.0 0 + , Data 25 79.7 1.8 46000 + , Data 43 85 1.82 70667 + ] diff --git a/examples/Docs/Junk/Example1.elm b/examples/Docs/Junk/Example1.elm index 82ba133..b8b0980 100644 --- a/examples/Docs/Junk/Example1.elm +++ b/examples/Docs/Junk/Example1.elm @@ -2,30 +2,27 @@ module Docs.Junk.Example1 exposing (main) 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.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 main : Program Never Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -46,14 +43,14 @@ init = type Msg - = Hover (Maybe Data) + = Hover (Maybe Data) update : Msg -> Model -> Model update msg model = - case msg of - Hover hovered -> - { model | hovered = hovered } + case msg of + Hover hovered -> + { model | hovered = hovered } @@ -62,33 +59,33 @@ update msg model = view : Model -> Html.Html Msg view = - chart + chart chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.hoverOne Hover - , junk = - Junk.hoverOne model.hovered - [ ( "Age", toString << .age ) - , ( "Weight", toString << .weight ) - ] - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.hoverOne model.hovered - } - [ LineChart.line Colors.green Dots.triangle "Chuck" chuck - , LineChart.line Colors.gold Dots.circle "Bobby" bobby - , LineChart.line Colors.purple Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.hoverOne Hover + , junk = + Junk.hoverOne model.hovered + [ ( "Age", toString << .age ) + , ( "Weight", toString << .weight ) + ] + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.hoverOne model.hovered + } + [ LineChart.line Colors.green Dots.triangle "Chuck" chuck + , LineChart.line Colors.gold Dots.circle "Bobby" bobby + , LineChart.line Colors.purple Dots.diamond "Alice" alice + ] @@ -96,35 +93,35 @@ chart model = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 10 34 1.34 0 - , Data 16 42 1.62 3000 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 10 34 1.34 0 + , Data 16 42 1.62 3000 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 10 38 1.32 0 - , Data 17 69 1.75 2000 - , Data 25 75 1.87 32000 - , Data 43 77 1.87 52000 - ] + [ Data 10 38 1.32 0 + , Data 17 69 1.75 2000 + , Data 25 75 1.87 32000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 10 42 1.35 0 - , Data 15 72 1.72 1800 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 10 42 1.35 0 + , Data 15 72 1.72 1800 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] diff --git a/examples/Docs/Junk/Example2.elm b/examples/Docs/Junk/Example2.elm index a90ce9a..32acea4 100644 --- a/examples/Docs/Junk/Example2.elm +++ b/examples/Docs/Junk/Example2.elm @@ -1,34 +1,31 @@ module Docs.Junk.Example2 exposing (main) import Html -import Svg -import Svg.Attributes 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 Svg +import Svg.Attributes main : Program Never Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -49,18 +46,18 @@ init = type Msg - = Hover Coordinate.Point - | Clear + = Hover Coordinate.Point + | Clear update : Msg -> Model -> Model update msg model = - case msg of - Hover hovered -> - { model | hovered = Just hovered } + case msg of + Hover hovered -> + { model | hovered = Just hovered } - Clear -> - { model | hovered = Nothing } + Clear -> + { model | hovered = Nothing } @@ -69,49 +66,52 @@ update msg model = view : Model -> Html.Html Msg view = - chart + chart chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = - Events.custom - [ Events.onMouseMove Hover Events.getData - , Events.onMouseLeave Clear - ] - , junk = Junk.custom (junk model.hovered) -- Junk goes here! - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blue Dots.triangle "Chuck" chuck - , LineChart.line Colors.cyan Dots.circle "Bobby" bobby - , LineChart.line Colors.pink Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = + Events.custom + [ Events.onMouseMove Hover Events.getData + , Events.onMouseLeave Clear + ] + , junk = Junk.custom (junk model.hovered) -- Junk goes here! + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blue Dots.triangle "Chuck" chuck + , LineChart.line Colors.cyan Dots.circle "Bobby" bobby + , LineChart.line Colors.pink Dots.diamond "Alice" alice + ] junk : Maybe Coordinate.Point -> Coordinate.System -> Junk.Layers msg junk hovered system = - { below = - case hovered of - Just hovered -> [ sectionBand hovered system ] - Nothing -> [] - , above = [] - , html = [] - } + { below = + case hovered of + Just hovered -> + [ sectionBand hovered system ] + + Nothing -> + [] + , above = [] + , html = [] + } sectionBand : Coordinate.Point -> Coordinate.System -> Svg.Svg msg sectionBand hovered system = - Junk.rectangle system [ Svg.Attributes.fill "#b6b6b61a" ] (hovered.x - 5) (hovered.x + 5) system.y.min system.y.max + Junk.rectangle system [ Svg.Attributes.fill "#b6b6b61a" ] (hovered.x - 5) (hovered.x + 5) system.y.min system.y.max @@ -119,35 +119,35 @@ sectionBand hovered system = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 10 34 1.34 0 - , Data 16 42 1.62 3000 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 10 34 1.34 0 + , Data 16 42 1.62 3000 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 10 38 1.32 0 - , Data 17 69 1.75 2000 - , Data 25 75 1.87 32000 - , Data 43 77 1.87 52000 - ] + [ Data 10 38 1.32 0 + , Data 17 69 1.75 2000 + , Data 25 75 1.87 32000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 10 42 1.35 0 - , Data 15 72 1.72 1800 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 10 42 1.35 0 + , Data 15 72 1.72 1800 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] diff --git a/examples/Docs/Junk/Example3.elm b/examples/Docs/Junk/Example3.elm index 4369013..acf10a7 100644 --- a/examples/Docs/Junk/Example3.elm +++ b/examples/Docs/Junk/Example3.elm @@ -1,76 +1,74 @@ module Docs.Junk.Example3 exposing (main) import Html -import Svg 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 Svg main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.custom junk - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blue Dots.triangle "Chuck" chuck - , LineChart.line Colors.cyan Dots.circle "Bobby" bobby - , LineChart.line Colors.pink Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.custom junk + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blue Dots.triangle "Chuck" chuck + , LineChart.line Colors.cyan Dots.circle "Bobby" bobby + , LineChart.line Colors.pink Dots.diamond "Alice" alice + ] junk : Coordinate.System -> Junk.Layers msg junk system = - { below = [] - , above = [ movedStuff system ] - , html = [] - } + { below = [] + , above = [ movedStuff system ] + , html = [] + } someDataPoint : Data someDataPoint = - Data 25 73 1.73 25000 + Data 25 73 1.73 25000 movedStuff : Coordinate.System -> Svg.Svg msg movedStuff system = - Svg.g - [ Junk.transform - [ Junk.move system someDataPoint.age someDataPoint.weight - , Junk.offset 20 10 - -- Try changing the offset! + Svg.g + [ Junk.transform + [ Junk.move system someDataPoint.age someDataPoint.weight + , Junk.offset 20 10 + + -- Try changing the offset! + ] ] - ] - [ Junk.label Colors.blue "stuff" ] + [ Junk.label Colors.blue "stuff" ] @@ -78,35 +76,35 @@ movedStuff system = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 10 34 1.34 0 - , Data 16 42 1.62 3000 - , Data 25 73 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 10 34 1.34 0 + , Data 16 42 1.62 3000 + , Data 25 73 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 10 38 1.32 0 - , Data 17 69 1.75 2000 - , Data 25 76 1.87 32000 - , Data 43 77 1.87 52000 - ] + [ Data 10 38 1.32 0 + , Data 17 69 1.75 2000 + , Data 25 76 1.87 32000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 10 42 1.35 0 - , Data 15 72 1.72 1800 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 10 42 1.35 0 + , Data 15 72 1.72 1800 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] diff --git a/examples/Docs/Junk/Example4.elm b/examples/Docs/Junk/Example4.elm index 0042bc3..2e05918 100644 --- a/examples/Docs/Junk/Example4.elm +++ b/examples/Docs/Junk/Example4.elm @@ -1,34 +1,31 @@ module Docs.Junk.Example4 exposing (main) -import Html -import Time 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.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 Time main : Program Never Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -49,14 +46,14 @@ init = type Msg - = Hover (List Data) + = Hover (List Data) update : Msg -> Model -> Model update msg model = - case msg of - Hover hovered -> - { model | hovered = hovered } + case msg of + Hover hovered -> + { model | hovered = hovered } @@ -65,40 +62,40 @@ update msg model = view : Model -> Html.Html Msg view = - chart + chart chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.time 700 "Time" .date - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.hoverMany Hover - , junk = - Junk.hoverMany model.hovered formatX formatY - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck - , LineChart.line Colors.blue Dots.circle "Bobby" bobby - , LineChart.line Colors.cyan Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.time 700 "Time" .date + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.hoverMany Hover + , junk = + Junk.hoverMany model.hovered formatX formatY + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck + , LineChart.line Colors.blue Dots.circle "Bobby" bobby + , LineChart.line Colors.cyan Dots.diamond "Alice" alice + ] formatX : Data -> String formatX = - .date >> Date.fromTime >> Date.Format.format "%e. %b, %Y" + .date >> Date.fromTime >> Date.Format.format "%e. %b, %Y" formatY : Data -> String formatY data = - toString data.weight ++ "kg" + toString data.weight ++ "kg" @@ -106,56 +103,56 @@ formatY data = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - , date : Time.Time - } + { age : Float + , weight : Float + , height : Float + , income : Float + , date : Time.Time + } alice : List Data alice = - [ Data 4 24 0.94 0 (dateInterval 0) - , Data 25 75 1.73 25000 (dateInterval 1) - , Data 46 83 1.75 40000 (dateInterval 2) - ] + [ Data 4 24 0.94 0 (dateInterval 0) + , Data 25 75 1.73 25000 (dateInterval 1) + , Data 46 83 1.75 40000 (dateInterval 2) + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 (dateInterval 0) - , Data 25 75 1.87 28000 (dateInterval 1) - , Data 46 77 1.87 52000 (dateInterval 2) - ] + [ Data 4 22 1.01 0 (dateInterval 0) + , Data 25 75 1.87 28000 (dateInterval 1) + , Data 46 77 1.87 52000 (dateInterval 2) + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 (dateInterval 0) - , Data 25 89 1.83 85000 (dateInterval 1) - , Data 46 95 1.84 120000 (dateInterval 2) - ] + [ Data 4 21 0.98 0 (dateInterval 0) + , Data 25 89 1.83 85000 (dateInterval 1) + , Data 46 95 1.84 120000 (dateInterval 2) + ] average : List Data average = - [ Data 4 22.3 1.0 0 (dateInterval 0) - , Data 25 79.7 1.8 46000 (dateInterval 1) - , Data 46 85 1.82 70667 (dateInterval 2) - ] + [ Data 4 22.3 1.0 0 (dateInterval 0) + , Data 25 79.7 1.8 46000 (dateInterval 1) + , Data 46 85 1.82 70667 (dateInterval 2) + ] dateInterval : Int -> Time.Time dateInterval i = - 4 * year + toFloat i * 21 * year + 4 * year + toFloat i * 21 * year day : Time.Time day = - 24 * Time.hour + 24 * Time.hour year : Time.Time year = - 356 * day + 356 * day diff --git a/examples/Docs/Legends/Example1.elm b/examples/Docs/Legends/Example1.elm index 1a0fd1c..0cd0ca0 100644 --- a/examples/Docs/Legends/Example1.elm +++ b/examples/Docs/Legends/Example1.elm @@ -1,51 +1,46 @@ module Docs.Legends.Example1 exposing (main) - import Html import LineChart -import LineChart.Colors as Colors -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.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 main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = Axis.default 700 "Age" .age - , y = Axis.default 400 "Income" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.byEnding (Junk.label Colors.black) - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = Axis.default 700 "Age" .age + , y = Axis.default 400 "Income" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.byEnding (Junk.label Colors.black) + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] @@ -53,40 +48,40 @@ chart = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 4 24 0.94 0 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 4 24 0.94 0 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 - , Data 25 75 1.87 28000 - , Data 43 77 1.87 52000 - ] + [ Data 4 22 1.01 0 + , Data 25 75 1.87 28000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 4 21 0.98 0 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] average : List Data average = - [ Data 4 22.3 1.0 0 - , Data 25 79.7 1.8 46000 - , Data 43 85 1.82 70667 - ] + [ Data 4 22.3 1.0 0 + , Data 25 79.7 1.8 46000 + , Data 43 85 1.82 70667 + ] diff --git a/examples/Docs/Legends/Example2.elm b/examples/Docs/Legends/Example2.elm index e717716..fa6019c 100644 --- a/examples/Docs/Legends/Example2.elm +++ b/examples/Docs/Legends/Example2.elm @@ -1,51 +1,46 @@ module Docs.Legends.Example2 exposing (main) - import Html import LineChart -import LineChart.Colors as Colors -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.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 main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = Axis.default 700 "Age" .age - , y = Axis.default 400 "Income" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.grouped .max .min 10 -60 - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = Axis.default 700 "Age" .age + , y = Axis.default 400 "Income" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.grouped .max .min 10 -60 + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] @@ -53,40 +48,40 @@ chart = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 4 24 0.94 0 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 4 24 0.94 0 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 - , Data 25 75 1.87 28000 - , Data 43 77 1.87 52000 - ] + [ Data 4 22 1.01 0 + , Data 25 75 1.87 28000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 4 21 0.98 0 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] average : List Data average = - [ Data 4 22.3 1.0 0 - , Data 25 79.7 1.8 46000 - , Data 43 85 1.82 70667 - ] + [ Data 4 22.3 1.0 0 + , Data 25 79.7 1.8 46000 + , Data 43 85 1.82 70667 + ] diff --git a/examples/Docs/Legends/Example3.elm b/examples/Docs/Legends/Example3.elm index 0716914..32a14f2 100644 --- a/examples/Docs/Legends/Example3.elm +++ b/examples/Docs/Legends/Example3.elm @@ -1,78 +1,73 @@ module Docs.Legends.Example3 exposing (main) - import Html -import Svg import LineChart -import LineChart.Colors as Colors -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 Svg main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = Axis.default 700 "Age" .age - , y = Axis.default 400 "Income" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.groupedCustom 30 viewLegends - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.gold Dots.triangle "Chuck" chuck - , LineChart.line Colors.cyan Dots.circle "Alice" alice - , LineChart.line Colors.pink Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = Axis.default 700 "Age" .age + , y = Axis.default 400 "Income" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.groupedCustom 30 viewLegends + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.gold Dots.triangle "Chuck" chuck + , LineChart.line Colors.cyan Dots.circle "Alice" alice + , LineChart.line Colors.pink Dots.diamond "Bobby" bobby + ] viewLegends : Coordinate.System -> List (Legends.Legend msg) -> Svg.Svg msg viewLegends system legends = - Svg.g - [ Junk.transform - [ Junk.move system system.x.min system.y.min - , Junk.offset 20 20 + Svg.g + [ Junk.transform + [ Junk.move system system.x.min system.y.min + , Junk.offset 20 20 + ] ] - ] - (List.indexedMap viewLegend legends) + (List.indexedMap viewLegend legends) viewLegend : Int -> Legends.Legend msg -> Svg.Svg msg viewLegend index { sample, label } = - Svg.g - [ Junk.transform [ Junk.offset (toFloat index * 100) 20 ] ] - [ sample, viewLabel label ] + Svg.g + [ Junk.transform [ Junk.offset (toFloat index * 100) 20 ] ] + [ sample, viewLabel label ] viewLabel : String -> Svg.Svg msg viewLabel label = - Svg.g - [ Junk.transform [ Junk.offset 40 4 ] ] - [ Junk.label Colors.black label ] + Svg.g + [ Junk.transform [ Junk.offset 40 4 ] ] + [ Junk.label Colors.black label ] @@ -80,40 +75,40 @@ viewLabel label = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 4 24 0.94 0 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 4 24 0.94 0 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 - , Data 25 75 1.87 28000 - , Data 43 77 1.87 52000 - ] + [ Data 4 22 1.01 0 + , Data 25 75 1.87 28000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 4 21 0.98 0 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] average : List Data average = - [ Data 4 22.3 1.0 0 - , Data 25 79.7 1.8 46000 - , Data 43 85 1.82 70667 - ] + [ Data 4 22.3 1.0 0 + , Data 25 79.7 1.8 46000 + , Data 43 85 1.82 70667 + ] diff --git a/examples/Docs/Line/Example1.elm b/examples/Docs/Line/Example1.elm index 85a0471..9c0b7cf 100644 --- a/examples/Docs/Line/Example1.elm +++ b/examples/Docs/Line/Example1.elm @@ -1,51 +1,46 @@ module Docs.Line.Example1 exposing (main) - import Html import LineChart -import LineChart.Colors as Colors -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.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 main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = Axis.default 700 "Age" .age - , y = Axis.default 400 "Income" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.wider 3 - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = Axis.default 700 "Age" .age + , y = Axis.default 400 "Income" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.wider 3 + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] @@ -53,40 +48,40 @@ chart = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 4 24 0.94 0 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 4 24 0.94 0 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 - , Data 25 75 1.87 28000 - , Data 43 77 1.87 52000 - ] + [ Data 4 22 1.01 0 + , Data 25 75 1.87 28000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 4 21 0.98 0 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] average : List Data average = - [ Data 4 22.3 1.0 0 - , Data 25 79.7 1.8 46000 - , Data 43 85 1.82 70667 - ] + [ Data 4 22.3 1.0 0 + , Data 25 79.7 1.8 46000 + , Data 43 85 1.82 70667 + ] diff --git a/examples/Docs/Line/Example2.elm b/examples/Docs/Line/Example2.elm index 4290840..b3b7d08 100644 --- a/examples/Docs/Line/Example2.elm +++ b/examples/Docs/Line/Example2.elm @@ -3,31 +3,27 @@ module Docs.Line.Example2 exposing (main) import Html import Html.Attributes exposing (class) import LineChart -import LineChart.Colors as Colors -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.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 main : Program Never Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -48,14 +44,14 @@ init = type Msg - = Hover (Maybe Data) + = Hover (Maybe Data) update : Msg -> Model -> Model update msg model = - case msg of - Hover hovering -> - { model | hovering = hovering } + case msg of + Hover hovering -> + { model | hovering = hovering } @@ -64,31 +60,31 @@ update msg model = view : Model -> Html.Html Msg view model = - Html.div - [ class "container" ] - [ chart model ] + Html.div + [ class "container" ] + [ chart model ] chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.hoverOne Hover - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.hoverOne model.hovering - , dots = Dots.default - } - [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck - , LineChart.line Colors.cyan Dots.circle "Bobby" bobby - , LineChart.line Colors.purple Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.hoverOne Hover + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.hoverOne model.hovering + , dots = Dots.default + } + [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck + , LineChart.line Colors.cyan Dots.circle "Bobby" bobby + , LineChart.line Colors.purple Dots.diamond "Alice" alice + ] @@ -96,35 +92,35 @@ chart model = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 10 34 1.34 0 - , Data 16 42 1.62 3000 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 10 34 1.34 0 + , Data 16 42 1.62 3000 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 10 38 1.32 0 - , Data 17 69 1.75 2000 - , Data 25 75 1.87 32000 - , Data 43 77 1.87 52000 - ] + [ Data 10 38 1.32 0 + , Data 17 69 1.75 2000 + , Data 25 75 1.87 32000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 10 42 1.35 0 - , Data 15 72 1.72 1800 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 10 42 1.35 0 + , Data 15 72 1.72 1800 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] diff --git a/examples/Docs/Line/Example3.elm b/examples/Docs/Line/Example3.elm index 75c2fc1..da79660 100644 --- a/examples/Docs/Line/Example3.elm +++ b/examples/Docs/Line/Example3.elm @@ -1,33 +1,30 @@ module Docs.Line.Example3 exposing (main) +import Color.Manipulate as Manipulate import Html import Html.Attributes exposing (class) import LineChart -import LineChart.Colors as Colors -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.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 Color.Manipulate as Manipulate +import LineChart.Junk as Junk +import LineChart.Legends as Legends +import LineChart.Line as Line main : Program Never Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -48,14 +45,14 @@ init = type Msg - = Hover (Maybe Data) + = Hover (Maybe Data) update : Msg -> Model -> Model update msg model = - case msg of - Hover hovered -> - { model | hovered = hovered } + case msg of + Hover hovered -> + { model | hovered = hovered } @@ -64,51 +61,54 @@ update msg model = view : Model -> Html.Html Msg view model = - Html.div - [ class "container" ] - [ chart model ] + Html.div + [ class "container" ] + [ chart model ] chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.hoverOne Hover - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = lineConfig model.hovered - , dots = Dots.default - } - [ LineChart.line Colors.red Dots.triangle "Chuck" chuck - , LineChart.line Colors.cyan Dots.circle "Bobby" bobby - , LineChart.line Colors.purple Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.hoverOne Hover + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = lineConfig model.hovered + , dots = Dots.default + } + [ LineChart.line Colors.red Dots.triangle "Chuck" chuck + , LineChart.line Colors.cyan Dots.circle "Bobby" bobby + , LineChart.line Colors.purple Dots.diamond "Alice" alice + ] lineConfig : Maybe Data -> Line.Config Data lineConfig maybeHovered = - Line.custom (toLineStyle maybeHovered) + Line.custom (toLineStyle maybeHovered) toLineStyle : Maybe Data -> List Data -> Line.Style toLineStyle maybeHovered lineData = - case maybeHovered of - Nothing -> -- No line is hovered - Line.style 1 identity + case maybeHovered of + Nothing -> + -- No line is hovered + Line.style 1 identity + + Just hovered -> + -- Some line is hovered + if List.any ((==) hovered) lineData then + -- It is this one, so make it pop! + Line.style 2 (Manipulate.darken 0.1) - Just hovered -> -- Some line is hovered - if List.any ((==) hovered) lineData then - -- It is this one, so make it pop! - Line.style 2 (Manipulate.darken 0.1) - else - -- It is not this one, so hide it a bit - Line.style 1 (Manipulate.lighten 0.35) + else + -- It is not this one, so hide it a bit + Line.style 1 (Manipulate.lighten 0.35) @@ -116,35 +116,35 @@ toLineStyle maybeHovered lineData = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 10 34 1.34 0 - , Data 16 42 1.62 3000 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 10 34 1.34 0 + , Data 16 42 1.62 3000 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 10 38 1.32 0 - , Data 17 69 1.75 2000 - , Data 25 75 1.87 32000 - , Data 43 77 1.87 52000 - ] + [ Data 10 38 1.32 0 + , Data 17 69 1.75 2000 + , Data 25 75 1.87 32000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 10 42 1.35 0 - , Data 15 72 1.72 1800 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 10 42 1.35 0 + , Data 15 72 1.72 1800 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] diff --git a/examples/Docs/Line/Example4.elm b/examples/Docs/Line/Example4.elm index 2af7472..9a5043c 100644 --- a/examples/Docs/Line/Example4.elm +++ b/examples/Docs/Line/Example4.elm @@ -1,33 +1,30 @@ module Docs.Line.Example4 exposing (main) +import Color.Manipulate as Manipulate import Html import Html.Attributes exposing (class) import LineChart -import LineChart.Colors as Colors -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.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 Color.Manipulate as Manipulate +import LineChart.Junk as Junk +import LineChart.Legends as Legends +import LineChart.Line as Line main : Program Never Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -48,14 +45,14 @@ init = type Msg - = Hover (Maybe Data) + = Hover (Maybe Data) update : Msg -> Model -> Model update msg model = - case msg of - Hover hovered -> - { model | hovered = hovered } + case msg of + Hover hovered -> + { model | hovered = hovered } @@ -64,71 +61,74 @@ update msg model = view : Model -> Html.Html Msg view model = - Html.div - [ class "container" ] - [ chart model ] + Html.div + [ class "container" ] + [ chart model ] chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.hoverOne Hover - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = lineConfig model.hovered - , dots = Dots.default - } - [ LineChart.line Colors.red Dots.triangle "Chuck" chuck - , LineChart.line Colors.cyan Dots.circle "Bobby" bobby - , LineChart.line Colors.purple Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.hoverOne Hover + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = lineConfig model.hovered + , dots = Dots.default + } + [ LineChart.line Colors.red Dots.triangle "Chuck" chuck + , LineChart.line Colors.cyan Dots.circle "Bobby" bobby + , LineChart.line Colors.purple Dots.diamond "Alice" alice + ] lineConfig : Maybe Data -> Line.Config Data lineConfig maybeHovered = - Line.custom (toLineStyle maybeHovered) + Line.custom (toLineStyle maybeHovered) toLineStyle : Maybe Data -> List Data -> Line.Style toLineStyle maybeHovered lineData = - case maybeHovered of - Nothing -> -- No line is hovered - vanilla + case maybeHovered of + Nothing -> + -- No line is hovered + vanilla + + Just hovered -> + -- Some line is hovered + if List.any ((==) hovered) lineData then + -- It is this one, so make it pop! + blacken - Just hovered -> -- Some line is hovered - if List.any ((==) hovered) lineData then - -- It is this one, so make it pop! - blacken - else - -- It is not this one, so hide it a bit - hide + else + -- It is not this one, so hide it a bit + hide vanilla : Line.Style vanilla = - Line.style 1 identity + Line.style 1 identity emphasize : Line.Style emphasize = - Line.style 2 (Manipulate.darken 0.15) + Line.style 2 (Manipulate.darken 0.15) hide : Line.Style hide = - Line.style 1 (Manipulate.lighten 0.15) + Line.style 1 (Manipulate.lighten 0.15) blacken : Line.Style blacken = - Line.style 2 (\_ -> Colors.black) + Line.style 2 (\_ -> Colors.black) @@ -136,35 +136,35 @@ blacken = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 10 34 1.34 0 - , Data 16 42 1.62 3000 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 10 34 1.34 0 + , Data 16 42 1.62 3000 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 10 38 1.32 0 - , Data 17 69 1.75 2000 - , Data 25 75 1.87 32000 - , Data 43 77 1.87 52000 - ] + [ Data 10 38 1.32 0 + , Data 17 69 1.75 2000 + , Data 25 75 1.87 32000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 10 42 1.35 0 - , Data 15 72 1.72 1800 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 10 42 1.35 0 + , Data 15 72 1.72 1800 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] diff --git a/examples/Docs/LineChart/Example1.elm b/examples/Docs/LineChart/Example1.elm index abfeccd..ceb1278 100644 --- a/examples/Docs/LineChart/Example1.elm +++ b/examples/Docs/LineChart/Example1.elm @@ -1,20 +1,20 @@ module Docs.LineChart.Example1 exposing (main) - import Html import LineChart main : Html.Html msg main = - chart + chart type alias Point = - { x : Float, y : Float } + { x : Float, y : Float } chart : Html.Html msg chart = - LineChart.view1 .x .y - [ Point 1 2, Point 5 5, Point 10 10 ] + LineChart.view1 .x + .y + [ Point 1 2, Point 5 5, Point 10 10 ] diff --git a/examples/Docs/LineChart/Example2.elm b/examples/Docs/LineChart/Example2.elm index 6c19866..4a0f65f 100644 --- a/examples/Docs/LineChart/Example2.elm +++ b/examples/Docs/LineChart/Example2.elm @@ -1,32 +1,33 @@ module Docs.LineChart.Example2 exposing (main) - import Html import LineChart main : Html.Html msg main = - chart + chart type alias Human = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } chart : Html.Html msg chart = - LineChart.view1 .age .weight -- Try changing to .height or bmi - [ Human 4 24 0.94 0 - , Human 25 75 1.73 25000 - , Human 43 83 1.75 40000 - ] + LineChart.view1 .age + .weight + -- Try changing to .height or bmi + [ Human 4 24 0.94 0 + , Human 25 75 1.73 25000 + , Human 43 83 1.75 40000 + ] bmi : Human -> Float bmi human = - human.weight / human.height ^ 2 + human.weight / human.height ^ 2 diff --git a/examples/Docs/LineChart/Example3.elm b/examples/Docs/LineChart/Example3.elm index acb8678..c7b45d2 100644 --- a/examples/Docs/LineChart/Example3.elm +++ b/examples/Docs/LineChart/Example3.elm @@ -1,39 +1,38 @@ module Docs.LineChart.Example3 exposing (main) - import Html import LineChart main : Html.Html msg main = - chart + chart type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } chart : Html.Html msg chart = - LineChart.view2 .age .weight alice chuck + LineChart.view2 .age .weight alice chuck alice : List Data alice = - [ Data 4 24 0.94 0 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 4 24 0.94 0 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 4 21 0.98 0 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] diff --git a/examples/Docs/LineChart/Example4.elm b/examples/Docs/LineChart/Example4.elm index 06b8993..39b63f4 100644 --- a/examples/Docs/LineChart/Example4.elm +++ b/examples/Docs/LineChart/Example4.elm @@ -1,18 +1,17 @@ module Docs.LineChart.Example4 exposing (main) - import Html import LineChart main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.view3 .age .weight alice bobby chuck + LineChart.view3 .age .weight alice bobby chuck @@ -20,32 +19,32 @@ chart = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 4 24 0.94 0 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 4 24 0.94 0 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 - , Data 25 75 1.87 28000 - , Data 43 77 1.87 52000 - ] + [ Data 4 22 1.01 0 + , Data 25 75 1.87 28000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 4 21 0.98 0 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] diff --git a/examples/Docs/LineChart/Example5.elm b/examples/Docs/LineChart/Example5.elm index f6aa668..d120991 100644 --- a/examples/Docs/LineChart/Example5.elm +++ b/examples/Docs/LineChart/Example5.elm @@ -1,6 +1,5 @@ module Docs.LineChart.Example5 exposing (main) - import Html import LineChart import LineChart.Colors as Colors @@ -9,16 +8,17 @@ import LineChart.Dots as Dots main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.view .age .height - [ LineChart.line Colors.purple Dots.cross "Alice" alice - , LineChart.line Colors.blue Dots.square "Bobby" bobby - , LineChart.line Colors.cyan Dots.circle "Chuck" chuck - ] + LineChart.view .age + .height + [ LineChart.line Colors.purple Dots.cross "Alice" alice + , LineChart.line Colors.blue Dots.square "Bobby" bobby + , LineChart.line Colors.cyan Dots.circle "Chuck" chuck + ] @@ -26,32 +26,32 @@ chart = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 4 24 0.94 0 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 4 24 0.94 0 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 - , Data 25 75 1.87 28000 - , Data 43 77 1.87 52000 - ] + [ Data 4 22 1.01 0 + , Data 25 75 1.87 28000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 4 21 0.98 0 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] diff --git a/examples/Docs/LineChart/Example6.elm b/examples/Docs/LineChart/Example6.elm index 4ab3e85..345bb7b 100644 --- a/examples/Docs/LineChart/Example6.elm +++ b/examples/Docs/LineChart/Example6.elm @@ -1,6 +1,5 @@ module Docs.LineChart.Example6 exposing (main) - import Html import LineChart import LineChart.Colors as Colors @@ -9,16 +8,17 @@ import LineChart.Dots as Dots main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.view .age .height - [ LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - , LineChart.line Colors.blueLight Dots.square "Chuck" chuck - ] + LineChart.view .age + .height + [ LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + , LineChart.line Colors.blueLight Dots.square "Chuck" chuck + ] @@ -26,32 +26,32 @@ chart = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 4 24 0.94 0 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 4 24 0.94 0 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 - , Data 25 75 1.87 28000 - , Data 43 77 1.87 52000 - ] + [ Data 4 22 1.01 0 + , Data 25 75 1.87 28000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 4 21 0.98 0 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] diff --git a/examples/Docs/LineChart/Example7.elm b/examples/Docs/LineChart/Example7.elm index 7607000..18b2fef 100644 --- a/examples/Docs/LineChart/Example7.elm +++ b/examples/Docs/LineChart/Example7.elm @@ -1,6 +1,5 @@ module Docs.LineChart.Example7 exposing (main) - import Html import LineChart import LineChart.Colors as Colors @@ -9,29 +8,31 @@ import LineChart.Dots as Dots main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.view .age .height - [ LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - , LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , dashedLine - ] + LineChart.view .age + .height + [ LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + , LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , dashedLine + ] + dashedLine : LineChart.Series Data dashedLine = - let - pattern = [ 4, 2 ] - -- ^^^^^^^^ - -- (scroll to the left to see where it's used!) - -- Try passing different numbers! - in - LineChart.dash Colors.purpleLight Dots.none "Average" pattern average - + let + pattern = + [ 4, 2 ] + -- ^^^^^^^^ + -- (scroll to the left to see where it's used!) + -- Try passing different numbers! + in + LineChart.dash Colors.purpleLight Dots.none "Average" pattern average @@ -39,40 +40,40 @@ dashedLine = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 4 24 0.94 0 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 4 24 0.94 0 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 - , Data 25 75 1.87 28000 - , Data 43 77 1.87 52000 - ] + [ Data 4 22 1.01 0 + , Data 25 75 1.87 28000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 4 21 0.98 0 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] average : List Data average = - [ Data 4 22.3 1.0 0 - , Data 25 79.7 1.8 46000 - , Data 43 85 1.82 70667 - ] + [ Data 4 22.3 1.0 0 + , Data 25 79.7 1.8 46000 + , Data 43 85 1.82 70667 + ] diff --git a/examples/Docs/LineChart/Example8.elm b/examples/Docs/LineChart/Example8.elm index 6cbcc49..d641e7c 100644 --- a/examples/Docs/LineChart/Example8.elm +++ b/examples/Docs/LineChart/Example8.elm @@ -1,55 +1,50 @@ module Docs.LineChart.Example8 exposing (main) - import Html import LineChart -import LineChart.Colors as Colors -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.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 main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom chartConfig - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom chartConfig + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] chartConfig : LineChart.Config Data msg chartConfig = - { x = Axis.default 700 "Age" .age - , y = Axis.default 400 "Income" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.stacked 0.5 -- Changed from the default! - , line = Line.default - , dots = Dots.default - } + { x = Axis.default 700 "Age" .age + , y = Axis.default 400 "Income" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.stacked 0.5 -- Changed from the default! + , line = Line.default + , dots = Dots.default + } @@ -57,40 +52,40 @@ chartConfig = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 4 24 0.94 0 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 4 24 0.94 0 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 - , Data 25 75 1.87 28000 - , Data 43 77 1.87 52000 - ] + [ Data 4 22 1.01 0 + , Data 25 75 1.87 28000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 4 21 0.98 0 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] average : List Data average = - [ Data 4 22.3 1.0 0 - , Data 25 79.7 1.8 46000 - , Data 43 85 1.82 70667 - ] + [ Data 4 22.3 1.0 0 + , Data 25 79.7 1.8 46000 + , Data 43 85 1.82 70667 + ] diff --git a/examples/Docs/LineChart/Example9.elm b/examples/Docs/LineChart/Example9.elm index 66486fb..63c8105 100644 --- a/examples/Docs/LineChart/Example9.elm +++ b/examples/Docs/LineChart/Example9.elm @@ -1,51 +1,46 @@ module Docs.LineChart.Example9 exposing (main) - import Html import LineChart -import LineChart.Colors as Colors -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.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 main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = Axis.default 700 "Age" .age - , y = Axis.default 400 "Income" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = Axis.default 700 "Age" .age + , y = Axis.default 400 "Income" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] @@ -53,40 +48,40 @@ chart = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 4 24 0.94 0 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 4 24 0.94 0 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 - , Data 25 75 1.87 28000 - , Data 43 77 1.87 52000 - ] + [ Data 4 22 1.01 0 + , Data 25 75 1.87 28000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 4 21 0.98 0 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] average : List Data average = - [ Data 4 22.3 1.0 0 - , Data 25 79.7 1.8 46000 - , Data 43 85 1.82 70667 - ] + [ Data 4 22.3 1.0 0 + , Data 25 79.7 1.8 46000 + , Data 43 85 1.82 70667 + ] diff --git a/examples/Docs/Range/Example1.elm b/examples/Docs/Range/Example1.elm index 9d970e4..eafc015 100644 --- a/examples/Docs/Range/Example1.elm +++ b/examples/Docs/Range/Example1.elm @@ -1,82 +1,80 @@ module Docs.Range.Example1 exposing (main) - -import Time import Html import LineChart -import LineChart.Colors as Colors -import LineChart.Junk as Junk import LineChart.Area as Area import LineChart.Axis as Axis -import LineChart.Axis.Title as Title -import LineChart.Axis.Range as Range +import LineChart.Axis.Intersection as Intersection import LineChart.Axis.Line as AxisLine +import LineChart.Axis.Range as Range import LineChart.Axis.Ticks as Ticks -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.Title as Title 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 Time main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = xAxisConfig - , y = Axis.default 400 "($)" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = xAxisConfig + , y = Axis.default 400 "($)" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] xAxisConfig : Axis.Config Data msg xAxisConfig = - Axis.custom - { title = Title.default "Weight" - , variable = Just << .weight - , pixels = 700 - , range = rangeConfig - , axisLine = AxisLine.rangeFrame Colors.gray - , ticks = Ticks.float 5 - } + Axis.custom + { title = Title.default "Weight" + , variable = Just << .weight + , pixels = 700 + , range = rangeConfig + , axisLine = AxisLine.rangeFrame Colors.gray + , ticks = Ticks.float 5 + } rangeConfig : Range.Config rangeConfig = - -- Range.default - Range.window 70 97 - -- Range.padded 40 40 - -- Range.custom specialRange + -- Range.default + Range.window 70 97 + + + +-- Range.padded 40 40 +-- Range.custom specialRange specialRange : Coordinate.Range -> Coordinate.Range specialRange { min, max } = - { min = min - 5, max = max + 10 } + { min = min - 5, max = max + 10 } @@ -84,56 +82,56 @@ specialRange { min, max } = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - , date : Time.Time - } + { age : Float + , weight : Float + , height : Float + , income : Float + , date : Time.Time + } alice : List Data alice = - [ Data 4 24 0.94 0 (dateInterval 0) - , Data 25 75 1.73 25000 (dateInterval 1) - , Data 46 83 1.75 40000 (dateInterval 2) - ] + [ Data 4 24 0.94 0 (dateInterval 0) + , Data 25 75 1.73 25000 (dateInterval 1) + , Data 46 83 1.75 40000 (dateInterval 2) + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 (dateInterval 0) - , Data 25 75 1.87 28000 (dateInterval 1) - , Data 46 77 1.87 52000 (dateInterval 2) - ] + [ Data 4 22 1.01 0 (dateInterval 0) + , Data 25 75 1.87 28000 (dateInterval 1) + , Data 46 77 1.87 52000 (dateInterval 2) + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 (dateInterval 0) - , Data 25 89 1.83 85000 (dateInterval 1) - , Data 46 95 1.84 120000 (dateInterval 2) - ] + [ Data 4 21 0.98 0 (dateInterval 0) + , Data 25 89 1.83 85000 (dateInterval 1) + , Data 46 95 1.84 120000 (dateInterval 2) + ] average : List Data average = - [ Data 4 22.3 1.0 0 (dateInterval 0) - , Data 25 79.7 1.8 46000 (dateInterval 1) - , Data 46 85 1.82 70667 (dateInterval 2) - ] + [ Data 4 22.3 1.0 0 (dateInterval 0) + , Data 25 79.7 1.8 46000 (dateInterval 1) + , Data 46 85 1.82 70667 (dateInterval 2) + ] dateInterval : Int -> Time.Time dateInterval i = - 4 * year + toFloat i * 21 * year + 4 * year + toFloat i * 21 * year day : Time.Time day = - 24 * Time.hour + 24 * Time.hour year : Time.Time year = - 356 * day + 356 * day diff --git a/examples/Docs/Tick/Example1.elm b/examples/Docs/Tick/Example1.elm index 9fb0406..8bce5f0 100644 --- a/examples/Docs/Tick/Example1.elm +++ b/examples/Docs/Tick/Example1.elm @@ -1,100 +1,108 @@ module Docs.Tick.Example1 exposing (main) - -import Time import Html import LineChart -import LineChart.Colors as Colors -import LineChart.Junk as Junk import LineChart.Area as Area import LineChart.Axis as Axis -import LineChart.Axis.Title as Title -import LineChart.Axis.Range as Range +import LineChart.Axis.Intersection as Intersection import LineChart.Axis.Line as AxisLine -import LineChart.Axis.Ticks as Ticks +import LineChart.Axis.Range as Range import LineChart.Axis.Tick as Tick -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.Ticks as Ticks +import LineChart.Axis.Title as Title import LineChart.Colors as Colors -import LineChart.Events as Events -import LineChart.Legends as Legends import LineChart.Container as Container +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 Time main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = xAxisConfig - , y = Axis.default 400 "($)" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = xAxisConfig + , y = Axis.default 400 "($)" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] xAxisConfig : Axis.Config Data msg xAxisConfig = - Axis.custom - { title = Title.default "Weight" - , variable = Just << .weight - , pixels = 700 - , range = Range.default - , axisLine = AxisLine.rangeFrame Colors.gray - , ticks = ticksConfig - } + Axis.custom + { title = Title.default "Weight" + , variable = Just << .weight + , pixels = 700 + , range = Range.default + , axisLine = AxisLine.rangeFrame Colors.gray + , ticks = ticksConfig + } ticksConfig : Ticks.Config msg ticksConfig = - -- Ticks.floatCustom 7 Tick.float - -- Ticks.floatCustom 7 Tick.long - -- Ticks.floatCustom 7 Tick.gridless - Ticks.intCustom 7 customTick + -- Ticks.floatCustom 7 Tick.float + -- Ticks.floatCustom 7 Tick.long + -- Ticks.floatCustom 7 Tick.gridless + Ticks.intCustom 7 customTick customTick : Int -> Tick.Config msg customTick number = - let - color = - -- Change the color based on value! - if number < 50 then Colors.purple - else if number < 80 then Colors.green - else Colors.pinkLight - - label = Junk.label color (toString number) - even = number % 20 == 0 - in - Tick.custom - { position = toFloat number - , color = Colors.black - , width = 2 - , length = 2 - , grid = not even -- Add or remove grid! - , direction = if even then Tick.positive else Tick.negative - , label = Just label - } + let + color = + -- Change the color based on value! + if number < 50 then + Colors.purple + + else if number < 80 then + Colors.green + + else + Colors.pinkLight + + label = + Junk.label color (toString number) + + even = + number % 20 == 0 + in + Tick.custom + { position = toFloat number + , color = Colors.black + , width = 2 + , length = 2 + , grid = not even -- Add or remove grid! + , direction = + if even then + Tick.positive + + else + Tick.negative + , label = Just label + } @@ -102,56 +110,56 @@ customTick number = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - , date : Time.Time - } + { age : Float + , weight : Float + , height : Float + , income : Float + , date : Time.Time + } alice : List Data alice = - [ Data 4 24 0.94 0 (dateInterval 0) - , Data 25 75 1.73 25000 (dateInterval 1) - , Data 46 83 1.75 40000 (dateInterval 2) - ] + [ Data 4 24 0.94 0 (dateInterval 0) + , Data 25 75 1.73 25000 (dateInterval 1) + , Data 46 83 1.75 40000 (dateInterval 2) + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 (dateInterval 0) - , Data 25 75 1.87 28000 (dateInterval 1) - , Data 46 77 1.87 52000 (dateInterval 2) - ] + [ Data 4 22 1.01 0 (dateInterval 0) + , Data 25 75 1.87 28000 (dateInterval 1) + , Data 46 77 1.87 52000 (dateInterval 2) + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 (dateInterval 0) - , Data 25 89 1.83 85000 (dateInterval 1) - , Data 46 95 1.84 120000 (dateInterval 2) - ] + [ Data 4 21 0.98 0 (dateInterval 0) + , Data 25 89 1.83 85000 (dateInterval 1) + , Data 46 95 1.84 120000 (dateInterval 2) + ] average : List Data average = - [ Data 4 22.3 1.0 0 (dateInterval 0) - , Data 25 79.7 1.8 46000 (dateInterval 1) - , Data 46 85 1.82 70667 (dateInterval 2) - ] + [ Data 4 22.3 1.0 0 (dateInterval 0) + , Data 25 79.7 1.8 46000 (dateInterval 1) + , Data 46 85 1.82 70667 (dateInterval 2) + ] dateInterval : Int -> Time.Time dateInterval i = - 4 * year + toFloat i * 21 * year + 4 * year + toFloat i * 21 * year day : Time.Time day = - 24 * Time.hour + 24 * Time.hour year : Time.Time year = - 356 * day + 356 * day diff --git a/examples/Docs/Ticks/Example1.elm b/examples/Docs/Ticks/Example1.elm index 4bd94d4..1d25e0f 100644 --- a/examples/Docs/Ticks/Example1.elm +++ b/examples/Docs/Ticks/Example1.elm @@ -1,91 +1,85 @@ module Docs.Ticks.Example1 exposing (main) - -import Time import Html import LineChart -import LineChart.Colors as Colors -import LineChart.Junk as Junk import LineChart.Area as Area import LineChart.Axis as Axis -import LineChart.Axis.Title as Title -import LineChart.Axis.Range as Range +import LineChart.Axis.Intersection as Intersection import LineChart.Axis.Line as AxisLine -import LineChart.Axis.Ticks as Ticks +import LineChart.Axis.Range as Range import LineChart.Axis.Tick as Tick -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.Ticks as Ticks +import LineChart.Axis.Title as Title import LineChart.Colors as Colors -import LineChart.Events as Events -import LineChart.Legends as Legends import LineChart.Container as Container +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 Time main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = xAxisConfig - , y = Axis.default 400 "($)" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = xAxisConfig + , y = Axis.default 400 "($)" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] xAxisConfig : Axis.Config Data msg xAxisConfig = - Axis.custom - { title = Title.default "Weight" - , variable = Just << .weight - , pixels = 700 - , range = Range.default - , axisLine = AxisLine.rangeFrame Colors.gray - , ticks = ticksConfig - } + Axis.custom + { title = Title.default "Weight" + , variable = Just << .weight + , pixels = 700 + , range = Range.default + , axisLine = AxisLine.rangeFrame Colors.gray + , ticks = ticksConfig + } ticksConfig : Ticks.Config msg ticksConfig = - -- Ticks.int 7 - -- Ticks.time 7 - -- Ticks.float 7 - Ticks.intCustom 7 someCustomTick - + -- Ticks.int 7 + -- Ticks.time 7 + -- Ticks.float 7 + Ticks.intCustom 7 someCustomTick someCustomTick : Int -> Tick.Config msg someCustomTick number = - Tick.custom - { position = toFloat number - , color = Colors.black - , width = 2 - , length = 2 - , grid = True - , direction = Tick.negative - , label = Just (Junk.label Colors.black (toString number)) - } + Tick.custom + { position = toFloat number + , color = Colors.black + , width = 2 + , length = 2 + , grid = True + , direction = Tick.negative + , label = Just (Junk.label Colors.black (toString number)) + } @@ -93,56 +87,56 @@ someCustomTick number = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - , date : Time.Time - } + { age : Float + , weight : Float + , height : Float + , income : Float + , date : Time.Time + } alice : List Data alice = - [ Data 4 24 0.94 0 (dateInterval 0) - , Data 25 75 1.73 25000 (dateInterval 1) - , Data 46 83 1.75 40000 (dateInterval 2) - ] + [ Data 4 24 0.94 0 (dateInterval 0) + , Data 25 75 1.73 25000 (dateInterval 1) + , Data 46 83 1.75 40000 (dateInterval 2) + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 (dateInterval 0) - , Data 25 75 1.87 28000 (dateInterval 1) - , Data 46 77 1.87 52000 (dateInterval 2) - ] + [ Data 4 22 1.01 0 (dateInterval 0) + , Data 25 75 1.87 28000 (dateInterval 1) + , Data 46 77 1.87 52000 (dateInterval 2) + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 (dateInterval 0) - , Data 25 89 1.83 85000 (dateInterval 1) - , Data 46 95 1.84 120000 (dateInterval 2) - ] + [ Data 4 21 0.98 0 (dateInterval 0) + , Data 25 89 1.83 85000 (dateInterval 1) + , Data 46 95 1.84 120000 (dateInterval 2) + ] average : List Data average = - [ Data 4 22.3 1.0 0 (dateInterval 0) - , Data 25 79.7 1.8 46000 (dateInterval 1) - , Data 46 85 1.82 70667 (dateInterval 2) - ] + [ Data 4 22.3 1.0 0 (dateInterval 0) + , Data 25 79.7 1.8 46000 (dateInterval 1) + , Data 46 85 1.82 70667 (dateInterval 2) + ] dateInterval : Int -> Time.Time dateInterval i = - 4 * year + toFloat i * 21 * year + 4 * year + toFloat i * 21 * year day : Time.Time day = - 24 * Time.hour + 24 * Time.hour year : Time.Time year = - 356 * day + 356 * day diff --git a/examples/Docs/Ticks/Example2.elm b/examples/Docs/Ticks/Example2.elm index 8889497..415e924 100644 --- a/examples/Docs/Ticks/Example2.elm +++ b/examples/Docs/Ticks/Example2.elm @@ -1,38 +1,34 @@ module Docs.Ticks.Example2 exposing (main) - -import Time import Html import LineChart -import LineChart.Colors as Colors -import LineChart.Junk as Junk import LineChart.Area as Area import LineChart.Axis as Axis -import LineChart.Axis.Title as Title -import LineChart.Axis.Range as Range +import LineChart.Axis.Intersection as Intersection import LineChart.Axis.Line as AxisLine -import LineChart.Axis.Ticks as Ticks +import LineChart.Axis.Range as Range import LineChart.Axis.Tick as Tick -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.Ticks as Ticks +import LineChart.Axis.Title as Title import LineChart.Colors as Colors -import LineChart.Events as Events -import LineChart.Legends as Legends import LineChart.Container as Container +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 Time main : Program Never Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -53,14 +49,14 @@ init = type Msg - = Hover (Maybe Data) + = Hover (Maybe Data) update : Msg -> Model -> Model update msg model = - case msg of - Hover hovered -> - { model | hovered = hovered } + case msg of + Hover hovered -> + { model | hovered = hovered } @@ -69,56 +65,60 @@ update msg model = view : Model -> Html.Html Msg view = - chart + chart chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { x = xAxisConfig model - , y = Axis.default 400 "($)" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.hoverOne Hover - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = xAxisConfig model + , y = Axis.default 400 "($)" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.hoverOne Hover + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] xAxisConfig : Model -> Axis.Config Data msg xAxisConfig model = - Axis.custom - { title = Title.default "Weight" - , variable = Just << .weight - , pixels = 700 - , range = Range.padded 20 20 - , axisLine = AxisLine.rangeFrame Colors.gray - , ticks = ticksConfig model.hovered - } + Axis.custom + { title = Title.default "Weight" + , variable = Just << .weight + , pixels = 700 + , range = Range.padded 20 20 + , axisLine = AxisLine.rangeFrame Colors.gray + , ticks = ticksConfig model.hovered + } ticksConfig : Maybe Data -> Ticks.Config msg ticksConfig maybeHovered = - let - hoverOne = - case maybeHovered of - Just hovered -> [ Tick.opposite hovered.weight ] - Nothing -> [] + let + hoverOne = + case maybeHovered of + Just hovered -> + [ Tick.opposite hovered.weight ] - framing range = - List.map Tick.gridless [ range.min, range.max ] - in - Ticks.custom <| \dataRange axisRange -> - framing dataRange ++ hoverOne + Nothing -> + [] + + framing range = + List.map Tick.gridless [ range.min, range.max ] + in + Ticks.custom <| + \dataRange axisRange -> + framing dataRange ++ hoverOne @@ -126,56 +126,56 @@ ticksConfig maybeHovered = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - , date : Time.Time - } + { age : Float + , weight : Float + , height : Float + , income : Float + , date : Time.Time + } alice : List Data alice = - [ Data 4 24 0.94 0 (dateInterval 0) - , Data 25 75 1.73 25000 (dateInterval 1) - , Data 46 83 1.75 40000 (dateInterval 2) - ] + [ Data 4 24 0.94 0 (dateInterval 0) + , Data 25 75 1.73 25000 (dateInterval 1) + , Data 46 83 1.75 40000 (dateInterval 2) + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 (dateInterval 0) - , Data 25 75 1.87 28000 (dateInterval 1) - , Data 46 77 1.87 52000 (dateInterval 2) - ] + [ Data 4 22 1.01 0 (dateInterval 0) + , Data 25 75 1.87 28000 (dateInterval 1) + , Data 46 77 1.87 52000 (dateInterval 2) + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 (dateInterval 0) - , Data 25 89 1.83 85000 (dateInterval 1) - , Data 46 95 1.84 120000 (dateInterval 2) - ] + [ Data 4 21 0.98 0 (dateInterval 0) + , Data 25 89 1.83 85000 (dateInterval 1) + , Data 46 95 1.84 120000 (dateInterval 2) + ] average : List Data average = - [ Data 4 22.3 1.0 0 (dateInterval 0) - , Data 25 79.7 1.8 46000 (dateInterval 1) - , Data 46 85 1.82 70667 (dateInterval 2) - ] + [ Data 4 22.3 1.0 0 (dateInterval 0) + , Data 25 79.7 1.8 46000 (dateInterval 1) + , Data 46 85 1.82 70667 (dateInterval 2) + ] dateInterval : Int -> Time.Time dateInterval i = - 4 * year + toFloat i * 21 * year + 4 * year + toFloat i * 21 * year day : Time.Time day = - 24 * Time.hour + 24 * Time.hour year : Time.Time year = - 356 * day + 356 * day diff --git a/examples/Docs/Title/Example1.elm b/examples/Docs/Title/Example1.elm index fede3c2..8bde386 100644 --- a/examples/Docs/Title/Example1.elm +++ b/examples/Docs/Title/Example1.elm @@ -1,104 +1,109 @@ module Docs.Title.Example1 exposing (main) - -import Time import Html -import Svg -import Svg.Attributes import LineChart -import LineChart.Colors as Colors -import LineChart.Junk as Junk import LineChart.Area as Area import LineChart.Axis as Axis -import LineChart.Axis.Title as Title -import LineChart.Axis.Range as Range +import LineChart.Axis.Intersection as Intersection import LineChart.Axis.Line as AxisLine +import LineChart.Axis.Range as Range import LineChart.Axis.Ticks as Ticks -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.Title as Title 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 Svg +import Svg.Attributes +import Time main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = xAxisConfig - , y = Axis.default 400 "($)" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = xAxisConfig + , y = Axis.default 400 "($)" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] xAxisConfig : Axis.Config Data msg xAxisConfig = - Axis.custom - { title = titleConfig - , variable = Just << .weight - , pixels = 700 - , range = Range.default - , axisLine = AxisLine.rangeFrame Colors.gray - , ticks = Ticks.default - } + Axis.custom + { title = titleConfig + , variable = Just << .weight + , pixels = 700 + , range = Range.default + , axisLine = AxisLine.rangeFrame Colors.gray + , ticks = Ticks.default + } titleConfig : Title.Config msg titleConfig = - Title.default "Weight" - -- Title.atAxisMax 0 10 "Weight" - -- Title.atDataMax 0 10 "Weight" - -- customTitleConfig - -- customTitleConfig2 + Title.default "Weight" + + + +-- Title.atAxisMax 0 10 "Weight" +-- Title.atDataMax 0 10 "Weight" +-- customTitleConfig +-- customTitleConfig2 customTitleConfig : Title.Config msg customTitleConfig = - let position dataRange axisRange = 80 in - Title.atPosition position -15 30 "Weight" -- There are default offsets which have to be cancelled out! 😬 + let + position dataRange axisRange = + 80 + in + Title.atPosition position -15 30 "Weight" +-- There are default offsets which have to be cancelled out! 😬 -- customTitleConfig2 : Title.Config msg customTitleConfig2 = - let position dataRange axisRange = middle axisRange in - Title.custom position -10 35 <| - Svg.g - [ Svg.Attributes.style "text-anchor: middle;" ] - [ Junk.label Colors.pink "Weight" ] + let + position dataRange axisRange = + middle axisRange + in + Title.custom position -10 35 <| + Svg.g + [ Svg.Attributes.style "text-anchor: middle;" ] + [ Junk.label Colors.pink "Weight" ] middle : Coordinate.Range -> Float middle { min, max } = - min + (max - min) / 2 + min + (max - min) / 2 @@ -106,56 +111,56 @@ middle { min, max } = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - , date : Time.Time - } + { age : Float + , weight : Float + , height : Float + , income : Float + , date : Time.Time + } alice : List Data alice = - [ Data 4 24 0.94 0 (dateInterval 0) - , Data 25 75 1.73 25000 (dateInterval 1) - , Data 46 83 1.75 40000 (dateInterval 2) - ] + [ Data 4 24 0.94 0 (dateInterval 0) + , Data 25 75 1.73 25000 (dateInterval 1) + , Data 46 83 1.75 40000 (dateInterval 2) + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 (dateInterval 0) - , Data 25 75 1.87 28000 (dateInterval 1) - , Data 46 77 1.87 52000 (dateInterval 2) - ] + [ Data 4 22 1.01 0 (dateInterval 0) + , Data 25 75 1.87 28000 (dateInterval 1) + , Data 46 77 1.87 52000 (dateInterval 2) + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 (dateInterval 0) - , Data 25 89 1.83 85000 (dateInterval 1) - , Data 46 95 1.84 120000 (dateInterval 2) - ] + [ Data 4 21 0.98 0 (dateInterval 0) + , Data 25 89 1.83 85000 (dateInterval 1) + , Data 46 95 1.84 120000 (dateInterval 2) + ] average : List Data average = - [ Data 4 22.3 1.0 0 (dateInterval 0) - , Data 25 79.7 1.8 46000 (dateInterval 1) - , Data 46 85 1.82 70667 (dateInterval 2) - ] + [ Data 4 22.3 1.0 0 (dateInterval 0) + , Data 25 79.7 1.8 46000 (dateInterval 1) + , Data 46 85 1.82 70667 (dateInterval 2) + ] dateInterval : Int -> Time.Time dateInterval i = - 4 * year + toFloat i * 21 * year + 4 * year + toFloat i * 21 * year day : Time.Time day = - 24 * Time.hour + 24 * Time.hour year : Time.Time year = - 356 * day + 356 * day diff --git a/examples/Docs/Values/Example1.elm b/examples/Docs/Values/Example1.elm index 5716ce4..c9d4214 100644 --- a/examples/Docs/Values/Example1.elm +++ b/examples/Docs/Values/Example1.elm @@ -1,82 +1,78 @@ module Docs.Values.Example1 exposing (main) - -import Time import Html import LineChart -import LineChart.Colors as Colors -import LineChart.Junk as Junk import LineChart.Area as Area import LineChart.Axis as Axis -import LineChart.Axis.Title as Title -import LineChart.Axis.Range as Range +import LineChart.Axis.Intersection as Intersection import LineChart.Axis.Line as AxisLine -import LineChart.Axis.Ticks as Ticks +import LineChart.Axis.Range as Range import LineChart.Axis.Tick as Tick +import LineChart.Axis.Ticks as Ticks +import LineChart.Axis.Title as Title import LineChart.Axis.Values as Values -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.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 Time main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = xAxisConfig - , y = Axis.default 400 "($)" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = xAxisConfig + , y = Axis.default 400 "($)" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] xAxisConfig : Axis.Config Data msg xAxisConfig = - Axis.custom - { title = Title.default "Weight" - , variable = Just << .weight - , pixels = 700 - , range = Range.default - , axisLine = AxisLine.rangeFrame Colors.gray - , ticks = ticksConfig - } + Axis.custom + { title = Title.default "Weight" + , variable = Just << .weight + , pixels = 700 + , range = Range.default + , axisLine = AxisLine.rangeFrame Colors.gray + , ticks = ticksConfig + } ticksConfig : Ticks.Config msg ticksConfig = - Ticks.custom <| \dataRange axisRange -> - List.map Tick.int (valuesWithin dataRange) + Ticks.custom <| + \dataRange axisRange -> + List.map Tick.int (valuesWithin dataRange) valuesWithin : Coordinate.Range -> List Int valuesWithin = - Values.int (Values.around 3) + Values.int (Values.around 3) @@ -84,56 +80,56 @@ valuesWithin = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - , date : Time.Time - } + { age : Float + , weight : Float + , height : Float + , income : Float + , date : Time.Time + } alice : List Data alice = - [ Data 4 24 0.94 0 (dateInterval 0) - , Data 25 75 1.73 25000 (dateInterval 1) - , Data 46 83 1.75 40000 (dateInterval 2) - ] + [ Data 4 24 0.94 0 (dateInterval 0) + , Data 25 75 1.73 25000 (dateInterval 1) + , Data 46 83 1.75 40000 (dateInterval 2) + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 (dateInterval 0) - , Data 25 75 1.87 28000 (dateInterval 1) - , Data 46 77 1.87 52000 (dateInterval 2) - ] + [ Data 4 22 1.01 0 (dateInterval 0) + , Data 25 75 1.87 28000 (dateInterval 1) + , Data 46 77 1.87 52000 (dateInterval 2) + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 (dateInterval 0) - , Data 25 89 1.83 85000 (dateInterval 1) - , Data 46 95 1.84 120000 (dateInterval 2) - ] + [ Data 4 21 0.98 0 (dateInterval 0) + , Data 25 89 1.83 85000 (dateInterval 1) + , Data 46 95 1.84 120000 (dateInterval 2) + ] average : List Data average = - [ Data 4 22.3 1.0 0 (dateInterval 0) - , Data 25 79.7 1.8 46000 (dateInterval 1) - , Data 46 85 1.82 70667 (dateInterval 2) - ] + [ Data 4 22.3 1.0 0 (dateInterval 0) + , Data 25 79.7 1.8 46000 (dateInterval 1) + , Data 46 85 1.82 70667 (dateInterval 2) + ] dateInterval : Int -> Time.Time dateInterval i = - 4 * year + toFloat i * 21 * year + 4 * year + toFloat i * 21 * year day : Time.Time day = - 24 * Time.hour + 24 * Time.hour year : Time.Time year = - 356 * day + 356 * day diff --git a/examples/Docs/Values/Example2.elm b/examples/Docs/Values/Example2.elm index 8e161df..a9e2e5d 100644 --- a/examples/Docs/Values/Example2.elm +++ b/examples/Docs/Values/Example2.elm @@ -1,82 +1,78 @@ module Docs.Values.Example2 exposing (main) - -import Time import Html import LineChart -import LineChart.Colors as Colors -import LineChart.Junk as Junk import LineChart.Area as Area import LineChart.Axis as Axis -import LineChart.Axis.Title as Title -import LineChart.Axis.Range as Range +import LineChart.Axis.Intersection as Intersection import LineChart.Axis.Line as AxisLine -import LineChart.Axis.Ticks as Ticks +import LineChart.Axis.Range as Range import LineChart.Axis.Tick as Tick +import LineChart.Axis.Ticks as Ticks +import LineChart.Axis.Title as Title import LineChart.Axis.Values as Values -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.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 Time main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = xAxisConfig - , y = Axis.default 400 "($)" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = xAxisConfig + , y = Axis.default 400 "($)" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] xAxisConfig : Axis.Config Data msg xAxisConfig = - Axis.custom - { title = Title.default "Time" - , variable = Just << .date - , pixels = 700 - , range = Range.default - , axisLine = AxisLine.rangeFrame Colors.gray - , ticks = ticksConfig - } + Axis.custom + { title = Title.default "Time" + , variable = Just << .date + , pixels = 700 + , range = Range.default + , axisLine = AxisLine.rangeFrame Colors.gray + , ticks = ticksConfig + } -ticksConfig: Ticks.Config msg +ticksConfig : Ticks.Config msg ticksConfig = - Ticks.custom <| \dataRange axisRange -> - List.map Tick.time (valuesWithin dataRange) + Ticks.custom <| + \dataRange axisRange -> + List.map Tick.time (valuesWithin dataRange) valuesWithin : Coordinate.Range -> List Tick.Time valuesWithin = - Values.time 5 + Values.time 5 @@ -84,56 +80,56 @@ valuesWithin = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - , date : Time.Time - } + { age : Float + , weight : Float + , height : Float + , income : Float + , date : Time.Time + } alice : List Data alice = - [ Data 4 24 0.94 0 (dateInterval 0) - , Data 25 75 1.73 25000 (dateInterval 1) - , Data 46 83 1.75 40000 (dateInterval 2) - ] + [ Data 4 24 0.94 0 (dateInterval 0) + , Data 25 75 1.73 25000 (dateInterval 1) + , Data 46 83 1.75 40000 (dateInterval 2) + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 (dateInterval 0) - , Data 25 75 1.87 28000 (dateInterval 1) - , Data 46 77 1.87 52000 (dateInterval 2) - ] + [ Data 4 22 1.01 0 (dateInterval 0) + , Data 25 75 1.87 28000 (dateInterval 1) + , Data 46 77 1.87 52000 (dateInterval 2) + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 (dateInterval 0) - , Data 25 89 1.83 85000 (dateInterval 1) - , Data 46 95 1.84 120000 (dateInterval 2) - ] + [ Data 4 21 0.98 0 (dateInterval 0) + , Data 25 89 1.83 85000 (dateInterval 1) + , Data 46 95 1.84 120000 (dateInterval 2) + ] average : List Data average = - [ Data 4 22.3 1.0 0 (dateInterval 0) - , Data 25 79.7 1.8 46000 (dateInterval 1) - , Data 46 85 1.82 70667 (dateInterval 2) - ] + [ Data 4 22.3 1.0 0 (dateInterval 0) + , Data 25 79.7 1.8 46000 (dateInterval 1) + , Data 46 85 1.82 70667 (dateInterval 2) + ] dateInterval : Int -> Time.Time dateInterval i = - 4 * year + toFloat i * 21 * year + 4 * year + toFloat i * 21 * year day : Time.Time day = - 24 * Time.hour + 24 * Time.hour year : Time.Time year = - 356 * day + 356 * day diff --git a/examples/Docs/Values/Example3.elm b/examples/Docs/Values/Example3.elm index d62f80c..7fdf078 100644 --- a/examples/Docs/Values/Example3.elm +++ b/examples/Docs/Values/Example3.elm @@ -1,77 +1,73 @@ module Docs.Values.Example1 exposing (main) - -import Time import Html import LineChart -import LineChart.Colors as Colors -import LineChart.Junk as Junk import LineChart.Area as Area import LineChart.Axis as Axis -import LineChart.Axis.Title as Title -import LineChart.Axis.Range as Range +import LineChart.Axis.Intersection as Intersection import LineChart.Axis.Line as AxisLine -import LineChart.Axis.Ticks as Ticks +import LineChart.Axis.Range as Range import LineChart.Axis.Tick as Tick +import LineChart.Axis.Ticks as Ticks +import LineChart.Axis.Title as Title import LineChart.Axis.Values as Values -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.Colors as Colors -import LineChart.Events as Events -import LineChart.Legends as Legends import LineChart.Container as Container +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 Time main : Html.Html msg main = - chart + chart chart : Html.Html msg chart = - LineChart.viewCustom - { x = xAxisConfig - , y = Axis.default 400 "($)" .income - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom + { x = xAxisConfig + , y = Axis.default 400 "($)" .income + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] xAxisConfig : Axis.Config Data msg xAxisConfig = - Axis.custom - { title = Title.default "Weight" - , variable = Just << .weight - , pixels = 700 - , range = Range.default - , axisLine = AxisLine.rangeFrame Colors.gray - , ticks = ticksConfig - } + Axis.custom + { title = Title.default "Weight" + , variable = Just << .weight + , pixels = 700 + , range = Range.default + , axisLine = AxisLine.rangeFrame Colors.gray + , ticks = ticksConfig + } ticksConfig : Ticks.Config msg ticksConfig = - Ticks.custom <| \dataRange axisRange -> - List.map Tick.float (Values.custom 45 10 dataRange) ++ - List.map Tick.long (Values.custom 30 20 dataRange) + Ticks.custom <| + \dataRange axisRange -> + List.map Tick.float (Values.custom 45 10 dataRange) + ++ List.map Tick.long (Values.custom 30 20 dataRange) @@ -79,56 +75,56 @@ ticksConfig = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - , date : Time.Time - } + { age : Float + , weight : Float + , height : Float + , income : Float + , date : Time.Time + } alice : List Data alice = - [ Data 4 24 0.94 0 (dateInterval 0) - , Data 25 75 1.73 25000 (dateInterval 1) - , Data 46 83 1.75 40000 (dateInterval 2) - ] + [ Data 4 24 0.94 0 (dateInterval 0) + , Data 25 75 1.73 25000 (dateInterval 1) + , Data 46 83 1.75 40000 (dateInterval 2) + ] bobby : List Data bobby = - [ Data 4 22 1.01 0 (dateInterval 0) - , Data 25 75 1.87 28000 (dateInterval 1) - , Data 46 77 1.87 52000 (dateInterval 2) - ] + [ Data 4 22 1.01 0 (dateInterval 0) + , Data 25 75 1.87 28000 (dateInterval 1) + , Data 46 77 1.87 52000 (dateInterval 2) + ] chuck : List Data chuck = - [ Data 4 21 0.98 0 (dateInterval 0) - , Data 25 89 1.83 85000 (dateInterval 1) - , Data 46 95 1.84 120000 (dateInterval 2) - ] + [ Data 4 21 0.98 0 (dateInterval 0) + , Data 25 89 1.83 85000 (dateInterval 1) + , Data 46 95 1.84 120000 (dateInterval 2) + ] average : List Data average = - [ Data 4 22.3 1.0 0 (dateInterval 0) - , Data 25 79.7 1.8 46000 (dateInterval 1) - , Data 46 85 1.82 70667 (dateInterval 2) - ] + [ Data 4 22.3 1.0 0 (dateInterval 0) + , Data 25 79.7 1.8 46000 (dateInterval 1) + , Data 46 85 1.82 70667 (dateInterval 2) + ] dateInterval : Int -> Time.Time dateInterval i = - 4 * year + toFloat i * 21 * year + 4 * year + toFloat i * 21 * year day : Time.Time day = - 24 * Time.hour + 24 * Time.hour year : Time.Time year = - 356 * day + 356 * day diff --git a/examples/Dots.elm b/examples/Dots.elm index a721539..0d52121 100644 --- a/examples/Dots.elm +++ b/examples/Dots.elm @@ -1,71 +1,73 @@ module Dots exposing (main) - +import Color import Html import Html.Attributes exposing (class) import LineChart -import LineChart.Dots as Dots -import LineChart.Junk as Junk exposing (..) -import LineChart.Container as Container -import LineChart.Colors as Colors -import LineChart.Interpolation as Interpolation -import LineChart.Axis.Intersection as Intersection +import LineChart.Area as Area import LineChart.Axis as Axis -import LineChart.Legends as Legends -import LineChart.Line as Line +import LineChart.Axis.Intersection as Intersection +import LineChart.Colors as Colors +import LineChart.Container as Container +import LineChart.Dots as Dots import LineChart.Events as Events import LineChart.Grid as Grid +import LineChart.Interpolation as Interpolation +import LineChart.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area -import Color +import LineChart.Line as Line main : Html.Html msg main = - Html.div - [ class "container" ] - [ chart ] + Html.div + [ class "container" ] + [ chart ] chart : Html.Html msg chart = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = - -- Try out these different configs! - -- Dots.default - -- Dots.custom (Dots.full 10) - -- Dots.custom (Dots.aura 7 7 0.2) - -- Dots.custom (Dots.empty 10 1) - customConfig + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = + -- Try out these different configs! + -- Dots.default + -- Dots.custom (Dots.full 10) + -- Dots.custom (Dots.aura 7 7 0.2) + -- Dots.custom (Dots.empty 10 1) + customConfig + -- For making the dots change based on whether it's hovered, see Events.elm! - } - [ LineChart.line Colors.gold Dots.diamond "Alice" alice - , LineChart.line Colors.red Dots.circle "Bobby" bobby - , LineChart.line Colors.teal Dots.triangle "Chuck" chuck - ] + } + [ LineChart.line Colors.gold Dots.diamond "Alice" alice + , LineChart.line Colors.red Dots.circle "Bobby" bobby + , LineChart.line Colors.teal Dots.triangle "Chuck" chuck + ] customConfig : Dots.Config Info customConfig = - let - style size = Dots.full size - getSize datum = (datum.height - 1) * 12 - in - Dots.customAny - { legend = \_ -> style 7 - , individual = \datum -> style (getSize datum) - } + let + style size = + Dots.full size + + getSize datum = + (datum.height - 1) * 12 + in + Dots.customAny + { legend = \_ -> style 7 + , individual = \datum -> style (getSize datum) + } @@ -73,35 +75,35 @@ customConfig = type alias Info = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Info alice = - [ Info 10 34 1.34 0 - , Info 16 42 1.62 3000 - , Info 25 75 1.73 25000 - , Info 43 83 1.75 40000 - ] + [ Info 10 34 1.34 0 + , Info 16 42 1.62 3000 + , Info 25 75 1.73 25000 + , Info 43 83 1.75 40000 + ] bobby : List Info bobby = - [ Info 10 38 1.32 0 - , Info 17 69 1.75 2000 - , Info 25 78 1.87 32000 - , Info 43 77 1.87 52000 - ] + [ Info 10 38 1.32 0 + , Info 17 69 1.75 2000 + , Info 25 78 1.87 32000 + , Info 43 77 1.87 52000 + ] chuck : List Info chuck = - [ Info 10 42 1.35 0 - , Info 15 72 1.62 1800 - , Info 25 89 1.68 85000 - , Info 43 95 1.68 120000 - ] + [ Info 10 42 1.35 0 + , Info 15 72 1.62 1800 + , Info 25 89 1.68 85000 + , Info 43 95 1.68 120000 + ] diff --git a/examples/Events1.elm b/examples/Events1.elm index da7d184..761ef6a 100644 --- a/examples/Events1.elm +++ b/examples/Events1.elm @@ -1,33 +1,31 @@ module Events1 exposing (main) +import Browser +import Color import Html exposing (Html, div, h1, node, p, text) import Html.Attributes exposing (class) -import Svg exposing (Attribute, Svg, g, text_, tspan) 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.Area as Area import LineChart.Axis as Axis -import LineChart.Legends as Legends -import LineChart.Line as Line +import LineChart.Axis.Intersection as Intersection +import LineChart.Container as Container +import LineChart.Dots as Dots import LineChart.Events as Events import LineChart.Grid as Grid +import LineChart.Interpolation as Interpolation +import LineChart.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area -import Color -import Browser - +import LineChart.Line as Line +import Svg exposing (Attribute, Svg, g, text_, tspan) main : Program () Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -48,14 +46,14 @@ init = type Msg - = Hover (Maybe Info) + = Hover (Maybe Info) update : Msg -> Model -> Model update msg model = - case msg of - Hover hovering -> - { model | hovering = hovering } + case msg of + Hover hovering -> + { model | hovering = hovering } @@ -64,88 +62,101 @@ update msg model = view : Model -> Svg Msg view model = - Html.div - [ class "container" ] - [ chart model ] + Html.div + [ class "container" ] + [ chart model ] chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.hoverOne Hover - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = - Line.hoverOne model.hovering + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.hoverOne Hover + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = + Line.hoverOne model.hovering + -- customLineConfig model.hovering - , dots = - Dots.hoverOne model.hovering + , dots = + Dots.hoverOne model.hovering + -- customDotsConfig model.hovering - } - [ LineChart.line Color.orange Dots.triangle "Chuck" chuck - , LineChart.line Color.yellow Dots.circle "Bobby" bobby - , LineChart.line Color.purple Dots.diamond "Alice" alice - ] + } + [ LineChart.line Color.orange Dots.triangle "Chuck" chuck + , LineChart.line Color.yellow Dots.circle "Bobby" bobby + , LineChart.line Color.purple Dots.diamond "Alice" alice + ] customLineConfig : Maybe Info -> Line.Config Info customLineConfig maybeHovered = - let - styleDefault = - Line.style 1 identity + let + styleDefault = + Line.style 1 identity + + styleHovered = + Line.style 2 identity - styleHovered = - Line.style 2 identity + styleNotHovered = + Line.style 1 (Color.Manipulate.lighten 0.3) - styleNotHovered = - Line.style 1 (Color.Manipulate.lighten 0.3) + lineConfig data = + -- `data` being all the data for a line + case maybeHovered of + Just hovered -> + if + List.any (dotIsHovered maybeHovered) data + -- This line is hovered + then + styleHovered + -- Some line is hovered, but not this one - lineConfig data = -- `data` being all the data for a line - case maybeHovered of - Just hovered -> - if List.any (dotIsHovered maybeHovered) data - -- This line is hovered - then styleHovered - -- Some line is hovered, but not this one - else styleNotHovered + else + styleNotHovered - Nothing -> - -- No line is hovered - styleDefault - in - Line.custom lineConfig + Nothing -> + -- No line is hovered + styleDefault + in + Line.custom lineConfig customDotsConfig : Maybe Info -> Dots.Config Info customDotsConfig maybeHovered = - let - styleDefault = - Dots.empty 5 2 - - styleHover = - Dots.full 8 - - styleLegend data = -- `data` being all the data for a line - if List.any (dotIsHovered maybeHovered) data - then styleHover - else styleDefault - - styleIndividual datum = -- `datum` being a single data point on a line - if dotIsHovered maybeHovered datum - then styleHover - else styleDefault - in - Dots.customAny - { legend = styleLegend - , individual = styleIndividual - } + let + styleDefault = + Dots.empty 5 2 + + styleHover = + Dots.full 8 + + styleLegend data = + -- `data` being all the data for a line + if List.any (dotIsHovered maybeHovered) data then + styleHover + + else + styleDefault + + styleIndividual datum = + -- `datum` being a single data point on a line + if dotIsHovered maybeHovered datum then + styleHover + + else + styleDefault + in + Dots.customAny + { legend = styleLegend + , individual = styleIndividual + } @@ -154,42 +165,43 @@ customDotsConfig maybeHovered = dotIsHovered : Maybe Info -> Info -> Bool dotIsHovered maybeHovered datum = - Just datum == maybeHovered + Just datum == maybeHovered + -- DATA type alias Info = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Info alice = - [ Info 10 34 1.34 0 - , Info 16 42 1.62 3000 - , Info 25 75 1.73 25000 - , Info 43 83 1.75 40000 - ] + [ Info 10 34 1.34 0 + , Info 16 42 1.62 3000 + , Info 25 75 1.73 25000 + , Info 43 83 1.75 40000 + ] bobby : List Info bobby = - [ Info 10 38 1.32 0 - , Info 17 69 1.75 2000 - , Info 25 75 1.87 32000 - , Info 43 77 1.87 52000 - ] + [ Info 10 38 1.32 0 + , Info 17 69 1.75 2000 + , Info 25 75 1.87 32000 + , Info 43 77 1.87 52000 + ] chuck : List Info chuck = - [ Info 10 42 1.35 0 - , Info 15 72 1.72 1800 - , Info 25 89 1.83 85000 - , Info 43 95 1.84 120000 - ] + [ Info 10 42 1.35 0 + , Info 15 72 1.72 1800 + , Info 25 89 1.83 85000 + , Info 43 95 1.84 120000 + ] diff --git a/examples/Events2.elm b/examples/Events2.elm index 9585809..bef77a1 100644 --- a/examples/Events2.elm +++ b/examples/Events2.elm @@ -1,33 +1,31 @@ module Events2 exposing (main) +import Browser +import Color import Html exposing (Html, div, h1, node, p, text) import Html.Attributes exposing (class) -import Svg exposing (Attribute, Svg, g, text_, tspan) 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.Area as Area import LineChart.Axis as Axis -import LineChart.Legends as Legends -import LineChart.Line as Line +import LineChart.Axis.Intersection as Intersection +import LineChart.Container as Container +import LineChart.Dots as Dots import LineChart.Events as Events import LineChart.Grid as Grid +import LineChart.Interpolation as Interpolation +import LineChart.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area -import Color -import Browser - +import LineChart.Line as Line +import Svg exposing (Attribute, Svg, g, text_, tspan) main : Program () Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -48,14 +46,14 @@ init = type Msg - = Hover (Maybe Info) + = Hover (Maybe Info) update : Msg -> Model -> Model update msg model = - case msg of - Hover hovering -> - { model | hovering = hovering } + case msg of + Hover hovering -> + { model | hovering = hovering } @@ -64,35 +62,35 @@ update msg model = view : Model -> Svg Msg view model = - Html.div - [ class "container" ] - [ chart model ] + Html.div + [ class "container" ] + [ chart model ] chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = - Events.custom - [ Events.onMouseMove Hover Events.getNearest - , Events.onMouseLeave (Hover Nothing) - ] - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.hoverOne model.hovering - , dots = Dots.hoverOne model.hovering - } - [ LineChart.line Color.orange Dots.triangle "Chuck" chuck - , LineChart.line Color.yellow Dots.circle "Bobby" bobby - , LineChart.line Color.purple Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = + Events.custom + [ Events.onMouseMove Hover Events.getNearest + , Events.onMouseLeave (Hover Nothing) + ] + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.hoverOne model.hovering + , dots = Dots.hoverOne model.hovering + } + [ LineChart.line Color.orange Dots.triangle "Chuck" chuck + , LineChart.line Color.yellow Dots.circle "Bobby" bobby + , LineChart.line Color.purple Dots.diamond "Alice" alice + ] @@ -100,35 +98,35 @@ chart model = type alias Info = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Info alice = - [ Info 10 34 1.34 0 - , Info 16 42 1.62 3000 - , Info 25 75 1.73 25000 - , Info 43 83 1.75 40000 - ] + [ Info 10 34 1.34 0 + , Info 16 42 1.62 3000 + , Info 25 75 1.73 25000 + , Info 43 83 1.75 40000 + ] bobby : List Info bobby = - [ Info 10 38 1.32 0 - , Info 17 69 1.75 2000 - , Info 25 75 1.87 32000 - , Info 43 77 1.87 52000 - ] + [ Info 10 38 1.32 0 + , Info 17 69 1.75 2000 + , Info 25 75 1.87 32000 + , Info 43 77 1.87 52000 + ] chuck : List Info chuck = - [ Info 10 42 1.35 0 - , Info 15 72 1.72 1800 - , Info 25 89 1.83 85000 - , Info 43 95 1.84 120000 - ] + [ Info 10 42 1.35 0 + , Info 15 72 1.72 1800 + , Info 25 89 1.83 85000 + , Info 43 95 1.84 120000 + ] diff --git a/examples/Events3.elm b/examples/Events3.elm index 112478a..076d878 100644 --- a/examples/Events3.elm +++ b/examples/Events3.elm @@ -1,33 +1,31 @@ module Events3 exposing (main) +import Browser +import Color import Html exposing (Html, div, h1, node, p, text) import Html.Attributes exposing (class) -import Svg exposing (Attribute, Svg, g, text_, tspan) 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.Area as Area import LineChart.Axis as Axis -import LineChart.Legends as Legends -import LineChart.Line as Line +import LineChart.Axis.Intersection as Intersection +import LineChart.Container as Container +import LineChart.Dots as Dots import LineChart.Events as Events import LineChart.Grid as Grid +import LineChart.Interpolation as Interpolation +import LineChart.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area -import Color -import Browser - +import LineChart.Line as Line +import Svg exposing (Attribute, Svg, g, text_, tspan) main : Program () Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -48,14 +46,14 @@ init = type Msg - = Hover (List Info) + = Hover (List Info) update : Msg -> Model -> Model update msg model = - case msg of - Hover hovering -> - { model | hovering = hovering } + case msg of + Hover hovering -> + { model | hovering = hovering } @@ -64,35 +62,35 @@ update msg model = view : Model -> Html Msg view model = - Html.div - [ class "container" ] - [ chart model ] + Html.div + [ class "container" ] + [ chart model ] chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = - Events.custom - [ Events.onMouseMove Hover Events.getNearestX - , Events.onMouseLeave (Hover []) - ] - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.hoverMany model.hovering - } - [ LineChart.line Color.orange Dots.triangle "Chuck" chuck - , LineChart.line Color.yellow Dots.circle "Bobby" bobby - , LineChart.line Color.purple Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = + Events.custom + [ Events.onMouseMove Hover Events.getNearestX + , Events.onMouseLeave (Hover []) + ] + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.hoverMany model.hovering + } + [ LineChart.line Color.orange Dots.triangle "Chuck" chuck + , LineChart.line Color.yellow Dots.circle "Bobby" bobby + , LineChart.line Color.purple Dots.diamond "Alice" alice + ] @@ -100,35 +98,35 @@ chart model = type alias Info = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Info alice = - [ Info 10 34 1.34 0 - , Info 16 42 1.62 3000 - , Info 25 75 1.73 25000 - , Info 43 83 1.75 40000 - ] + [ Info 10 34 1.34 0 + , Info 16 42 1.62 3000 + , Info 25 75 1.73 25000 + , Info 43 83 1.75 40000 + ] bobby : List Info bobby = - [ Info 10 38 1.32 0 - , Info 17 69 1.75 2000 - , Info 25 75 1.87 32000 - , Info 43 77 1.87 52000 - ] + [ Info 10 38 1.32 0 + , Info 17 69 1.75 2000 + , Info 25 75 1.87 32000 + , Info 43 77 1.87 52000 + ] chuck : List Info chuck = - [ Info 10 42 1.35 0 - , Info 15 72 1.72 1800 - , Info 25 89 1.83 85000 - , Info 43 95 1.84 120000 - ] + [ Info 10 42 1.35 0 + , Info 15 72 1.72 1800 + , Info 25 89 1.83 85000 + , Info 43 95 1.84 120000 + ] diff --git a/examples/Explanation/ChartArea.elm b/examples/Explanation/ChartArea.elm index 111ec2c..e038487 100644 --- a/examples/Explanation/ChartArea.elm +++ b/examples/Explanation/ChartArea.elm @@ -1,79 +1,76 @@ module Explanation.ChartArea exposing (main) - -import Svg -import Svg.Attributes +import Color import Html import Html.Attributes exposing (class) -import LineChart +import LineChart as LineChart +import LineChart.Area as Area +import LineChart.Axis as Axis +import LineChart.Axis.Intersection as Intersection import LineChart.Colors as Colors +import LineChart.Container as Container import LineChart.Coordinate as Coordinate -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.Interpolation as Interpolation +import LineChart.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area -import Color - +import LineChart.Line as Line +import Svg +import Svg.Attributes main : Html.Html msg main = - Html.div - [ class "container" ] - [ chart ] + Html.div + [ class "container" ] + [ chart ] chart : Html.Html msg chart = - LineChart.viewCustom - { y = Axis.picky 500 "y" .y [] - , x = Axis.picky 700 "x" .x [] - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = customJunk - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.pink Dots.none "some data" data - ] + LineChart.viewCustom + { y = Axis.picky 500 "y" .y [] + , x = Axis.picky 700 "x" .x [] + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = customJunk + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.pink Dots.none "some data" data + ] customJunk : Junk.Config data msg customJunk = - Junk.custom <| \system -> - { below = [ rectangle system ] - , above = - [ Junk.labelAt system 1 1.5 0 0 "middle" Color.black "chart area" - , Junk.labelAt system 6.25 1.5 0 0 "middle" Color.black "not chart area" - ] - , html = [] - } + Junk.custom <| + \system -> + { below = [ rectangle system ] + , above = + [ Junk.labelAt system 1 1.5 0 0 "middle" Color.black "chart area" + , Junk.labelAt system 6.25 1.5 0 0 "middle" Color.black "not chart area" + ] + , html = [] + } rectangle : Coordinate.System -> Svg.Svg msg rectangle system = - Junk.rectangle system - [ Svg.Attributes.fill "#aaf8a94d" - , Svg.Attributes.clipPath "" - ] - system.x.min - system.x.max - system.y.min - system.y.max + Junk.rectangle system + [ Svg.Attributes.fill "#aaf8a94d" + , Svg.Attributes.clipPath "" + ] + system.x.min + system.x.max + system.y.min + system.y.max @@ -81,11 +78,11 @@ rectangle system = type alias Data = - { x : Float, y : Float } + { x : Float, y : Float } data : List Data data = - [ Data -1 -5 - , Data 5 5 - ] + [ Data -1 -5 + , Data 5 5 + ] diff --git a/examples/Explanation/Intersections.elm b/examples/Explanation/Intersections.elm index 28985b0..110e5ab 100644 --- a/examples/Explanation/Intersections.elm +++ b/examples/Explanation/Intersections.elm @@ -1,75 +1,76 @@ module Explanation.Intersections exposing (main) - -import Svg -import Svg.Attributes +import Color import Html import Html.Attributes exposing (class) import LineChart +import LineChart.Area as Area +import LineChart.Axis as Axis +import LineChart.Axis.Intersection as Intersection import LineChart.Colors as Colors +import LineChart.Container as Container import LineChart.Coordinate as Coordinate -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.Interpolation as Interpolation +import LineChart.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area -import Color - +import LineChart.Line as Line +import Svg +import Svg.Attributes main : Html.Html msg main = - Html.div - [ class "container" ] - [ chart ] + Html.div + [ class "container" ] + [ chart ] chart : Html.Html msg chart = - LineChart.viewCustom - { y = Axis.picky 500 "y" .y [ -1, 0, 1, 2, 3 ] - , x = Axis.picky 700 "x" .x [ -1, 0 ,1, 2, 3] - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.default - , intersection = Intersection.at 1 1 - , legends = Legends.default - , events = Events.default - , junk = customJunk - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.pink Dots.none "some data" data - ] + LineChart.viewCustom + { y = Axis.picky 500 "y" .y [ -1, 0, 1, 2, 3 ] + , x = Axis.picky 700 "x" .x [ -1, 0, 1, 2, 3 ] + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.default + , intersection = Intersection.at 1 1 + , legends = Legends.default + , events = Events.default + , junk = customJunk + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.pink Dots.none "some data" data + ] customJunk : Junk.Config data msg customJunk = - Junk.custom <| \system -> - { below = [] - , above = - [ note system 1.2 1.25 0 0 "↙ The intersection" - ] - , html = [] - } + Junk.custom <| + \system -> + { below = [] + , above = + [ note system 1.2 1.25 0 0 "↙ The intersection" + ] + , html = [] + } note : Coordinate.System -> Float -> Float -> Float -> Float -> String -> Svg.Svg msg note system x y xo yo text = - let _ = Debug.log "system" system in - Svg.g - [ Junk.transform [ Junk.move system x y, Junk.offset xo yo ] - , Svg.Attributes.style "text-anchor: start;" - ] - [ Junk.label Color.black text ] + let + _ = + Debug.log "system" system + in + Svg.g + [ Junk.transform [ Junk.move system x y, Junk.offset xo yo ] + , Svg.Attributes.style "text-anchor: start;" + ] + [ Junk.label Color.black text ] @@ -77,11 +78,11 @@ note system x y xo yo text = type alias Data = - { x : Float, y : Float } + { x : Float, y : Float } data : List Data data = - [ Data -1 -3 - , Data 6 3 - ] + [ Data -1 -3 + , Data 6 3 + ] diff --git a/examples/Explanation/Ranges.elm b/examples/Explanation/Ranges.elm index ac11485..041d18e 100644 --- a/examples/Explanation/Ranges.elm +++ b/examples/Explanation/Ranges.elm @@ -1,113 +1,115 @@ module Explanation.Ranges exposing (main) - -import Svg -import Svg.Attributes +import Color import Html import Html.Attributes exposing (class) -import LineChart -import LineChart.Colors as Colors -import LineChart.Coordinate as Coordinate 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.Area as Area +import LineChart.Axis as Axis import LineChart.Axis.Intersection as Intersection -import LineChart.Axis.Title as Title -import LineChart.Axis.Ticks as Ticks -import LineChart.Axis.Tick as Tick -import LineChart.Axis.Range as Range import LineChart.Axis.Line as AxisLine -import LineChart.Axis as Axis -import LineChart.Legends as Legends -import LineChart.Line as Line +import LineChart.Axis.Range as Range +import LineChart.Axis.Tick as Tick +import LineChart.Axis.Ticks as Ticks +import LineChart.Axis.Title as Title +import LineChart.Colors as Colors +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.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area -import Color - +import LineChart.Line as Line +import Svg +import Svg.Attributes main : Html.Html msg main = - Html.div - [ class "container" ] - [ chart ] + Html.div + [ class "container" ] + [ chart ] chart : Html.Html msg chart = - LineChart.viewCustom - { y = Axis.picky 500 "y" .y [] - , x = customAxis - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = customJunk - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.pink Dots.none "some data" data - ] + LineChart.viewCustom + { y = Axis.picky 500 "y" .y [] + , x = customAxis + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = customJunk + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.pink Dots.none "some data" data + ] customAxis : Axis.Config Data msg customAxis = - Axis.custom - { title = Title.atAxisMax 0 -17 "x" - , variable = Just << .x - , pixels = 700 - , range = - Range.custom <| \{ min, max } -> - { min = min - 1, max = max + 2 } - , axisLine = AxisLine.full Colors.gray - , ticks = - Ticks.custom <| \dataRange axisRange -> - List.map (customTick Tick.negative) [ dataRange.min, dataRange.max ] ++ - List.map (customTick Tick.negative) [ axisRange.min, axisRange.max ] - } + Axis.custom + { title = Title.atAxisMax 0 -17 "x" + , variable = Just << .x + , pixels = 700 + , range = + Range.custom <| + \{ min, max } -> + { min = min - 1, max = max + 2 } + , axisLine = AxisLine.full Colors.gray + , ticks = + Ticks.custom <| + \dataRange axisRange -> + List.map (customTick Tick.negative) [ dataRange.min, dataRange.max ] + ++ List.map (customTick Tick.negative) [ axisRange.min, axisRange.max ] + } customTick : Tick.Direction -> Float -> Tick.Config msg customTick direction n = - let labelNumber = toFloat (round (n * 100)) / 100 in - Tick.custom - { position = n - , color = Colors.gray - , width = 1 - , length = 10 - , grid = True - , direction = direction - , label = Just <| Junk.label Color.black (toString labelNumber) - } + let + labelNumber = + toFloat (round (n * 100)) / 100 + in + Tick.custom + { position = n + , color = Colors.gray + , width = 1 + , length = 10 + , grid = True + , direction = direction + , label = Just <| Junk.label Color.black (toString labelNumber) + } customJunk : Junk.Config data msg customJunk = - Junk.custom <| \system -> - { below = [] - , above = - [ Junk.labelAt system 2 1.5 0 -10 "middle" Color.black "← axis range →" - , Junk.labelAt system 2 -1.5 0 18 "middle" Color.black "← data range →" - , rangeLine system 1.5 system.x.min system.x.max - , rangeLine system -1.5 system.xData.min system.xData.max - ] - , html = [] - } + Junk.custom <| + \system -> + { below = [] + , above = + [ Junk.labelAt system 2 1.5 0 -10 "middle" Color.black "← axis range →" + , Junk.labelAt system 2 -1.5 0 18 "middle" Color.black "← data range →" + , rangeLine system 1.5 system.x.min system.x.max + , rangeLine system -1.5 system.xData.min system.xData.max + ] + , html = [] + } rangeLine : Coordinate.System -> Float -> Float -> Float -> Svg.Svg msg rangeLine system = - Junk.horizontalCustom system - [ Svg.Attributes.stroke "#65d842" - , Svg.Attributes.clipPath "" - ] + Junk.horizontalCustom system + [ Svg.Attributes.stroke "#65d842" + , Svg.Attributes.clipPath "" + ] @@ -115,11 +117,11 @@ rangeLine system = type alias Data = - { x : Float, y : Float } + { x : Float, y : Float } data : List Data data = - [ Data -1 -5 - , Data 5 5 - ] + [ Data -1 -5 + , Data 5 5 + ] diff --git a/examples/Explanation/SvgAndDataSpace.elm b/examples/Explanation/SvgAndDataSpace.elm index 3aef7a6..09880a6 100644 --- a/examples/Explanation/SvgAndDataSpace.elm +++ b/examples/Explanation/SvgAndDataSpace.elm @@ -1,104 +1,114 @@ module Explanation.Ranges exposing (main) - +import Color import Html import Html.Attributes exposing (class) -import LineChart +import LineChart as LineChart +import LineChart.Area as Area +import LineChart.Axis as Axis +import LineChart.Axis.Intersection as Intersection import LineChart.Colors as Colors +import LineChart.Container as Container import LineChart.Coordinate as Coordinate -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.Interpolation as Interpolation +import LineChart.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area -import Color - +import LineChart.Line as Line main : Html.Html msg main = - Html.div - [ class "container" ] - [ chart ] + Html.div + [ class "container" ] + [ chart ] chart : Html.Html msg chart = - LineChart.viewCustom - { y = Axis.picky 500 "y" .y [ 0, 3 ] - , x = Axis.picky 700 "x" .x [ 0, 3 ] - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.custom customJunk - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.pink Dots.none "some data" data - ] + LineChart.viewCustom + { y = Axis.picky 500 "y" .y [ 0, 3 ] + , x = Axis.picky 700 "x" .x [ 0, 3 ] + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.custom customJunk + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.pink Dots.none "some data" data + ] customJunk : Coordinate.System -> Junk.Layers msg customJunk system = - let - dataLabel point = - Junk.labelAt system point.x point.y 12 5 "start" - - svgLabel point = - Junk.labelAt system point.x point.y 12 25 "start" - - circle point = - Junk.circle system 3 Colors.cyan point.x point.y - - dataSpace point = - "Data-space: " ++ pointToString point - - svgSpace point = - "SVG-space: " ++ pointToString point - - pointData1 = Coordinate.Point 0 3 - pointSvg1 = Coordinate.toSvg system pointData1 - - pointData2 = Coordinate.Point 0 0 - pointSvg2 = Coordinate.toSvg system pointData2 - - pointData3 = Coordinate.Point 3 0 - pointSvg3 = Coordinate.toSvg system pointData3 - in - { below = [] - , above = - [ dataLabel pointData1 Color.black (dataSpace pointData1) - , svgLabel pointData1 Color.black (svgSpace pointSvg1) - , circle pointData1 - -- - , dataLabel pointData2 Color.black (dataSpace pointData2) - , svgLabel pointData2 Color.black (svgSpace pointSvg2) - , circle pointData2 - -- - , dataLabel pointData3 Color.black (dataSpace pointData3) - , svgLabel pointData3 Color.black (svgSpace pointSvg3) - , circle pointData3 - ] - , html = [] - } + let + dataLabel point = + Junk.labelAt system point.x point.y 12 5 "start" + + svgLabel point = + Junk.labelAt system point.x point.y 12 25 "start" + + circle point = + Junk.circle system 3 Colors.cyan point.x point.y + + dataSpace point = + "Data-space: " ++ pointToString point + + svgSpace point = + "SVG-space: " ++ pointToString point + + pointData1 = + Coordinate.Point 0 3 + + pointSvg1 = + Coordinate.toSvg system pointData1 + + pointData2 = + Coordinate.Point 0 0 + + pointSvg2 = + Coordinate.toSvg system pointData2 + + pointData3 = + Coordinate.Point 3 0 + + pointSvg3 = + Coordinate.toSvg system pointData3 + in + { below = [] + , above = + [ dataLabel pointData1 Color.black (dataSpace pointData1) + , svgLabel pointData1 Color.black (svgSpace pointSvg1) + , circle pointData1 + + -- + , dataLabel pointData2 Color.black (dataSpace pointData2) + , svgLabel pointData2 Color.black (svgSpace pointSvg2) + , circle pointData2 + + -- + , dataLabel pointData3 Color.black (dataSpace pointData3) + , svgLabel pointData3 Color.black (svgSpace pointSvg3) + , circle pointData3 + ] + , html = [] + } pointToString : Coordinate.Point -> String pointToString { x, y } = - let round10 n = toFloat (round (n * 10)) / 10 in - "( " ++ toString (round10 x) ++ ", " ++ toString (round10 y) ++ " )" + let + round10 n = + toFloat (round (n * 10)) / 10 + in + "( " ++ toString (round10 x) ++ ", " ++ toString (round10 y) ++ " )" @@ -106,11 +116,11 @@ pointToString { x, y } = type alias Data = - { x : Float, y : Float } + { x : Float, y : Float } data : List Data data = - [ Data -1 -5 - , Data 5 5 - ] + [ Data -1 -5 + , Data 5 5 + ] diff --git a/examples/Grid.elm b/examples/Grid.elm index 7fc6a39..476365f 100644 --- a/examples/Grid.elm +++ b/examples/Grid.elm @@ -1,57 +1,55 @@ module Grid exposing (main) - import Html import Html.Attributes exposing (class) import LineChart -import LineChart.Junk as Junk exposing (..) -import LineChart.Dots as Dots +import LineChart.Area as Area +import LineChart.Axis as Axis +import LineChart.Axis.Intersection as Intersection import LineChart.Colors as Colors 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.Dots as Dots import LineChart.Events as Events import LineChart.Grid as Grid +import LineChart.Interpolation as Interpolation +import LineChart.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area +import LineChart.Line as Line main : Html.Html msg main = - Html.div - [ class "container" ] - [ chart ] + Html.div + [ class "container" ] + [ chart ] chart : Html.Html msg chart = - LineChart.viewCustom - { y = Axis.default 500 "Weight" .weight - , x = Axis.default 650 "Age" .age - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = - -- Try out these different configs! - Grid.dots 1 Colors.grayLight - -- Grid.lines 2 Color.lightGray + LineChart.viewCustom + { y = Axis.default 500 "Weight" .weight + , x = Axis.default 650 "Age" .age + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = + -- Try out these different configs! + Grid.dots 1 Colors.grayLight + -- Grid.lines 2 Color.lightGray -- Note: Where the lines show up is determined by the ticks. -- To edit, look at the Axis.elm module. - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck - , LineChart.line Colors.blue Dots.circle "Bobby" bobby - , LineChart.line Colors.gold Dots.diamond "Alice" alice - ] + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck + , LineChart.line Colors.blue Dots.circle "Bobby" bobby + , LineChart.line Colors.gold Dots.diamond "Alice" alice + ] @@ -59,35 +57,35 @@ chart = type alias Info = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Info alice = - [ Info 10 34 1.34 0 - , Info 16 42 1.62 3000 - , Info 25 75 1.73 25000 - , Info 43 83 1.75 40000 - ] + [ Info 10 34 1.34 0 + , Info 16 42 1.62 3000 + , Info 25 75 1.73 25000 + , Info 43 83 1.75 40000 + ] bobby : List Info bobby = - [ Info 10 38 1.32 0 - , Info 17 69 1.75 2000 - , Info 25 75 1.87 32000 - , Info 43 77 1.87 52000 - ] + [ Info 10 38 1.32 0 + , Info 17 69 1.75 2000 + , Info 25 75 1.87 32000 + , Info 43 77 1.87 52000 + ] chuck : List Info chuck = - [ Info 10 42 1.35 0 - , Info 15 72 1.72 1800 - , Info 25 89 1.83 85000 - , Info 43 95 1.84 120000 - ] + [ Info 10 42 1.35 0 + , Info 15 72 1.72 1800 + , Info 25 89 1.83 85000 + , Info 43 95 1.84 120000 + ] diff --git a/examples/Interpolation.elm b/examples/Interpolation.elm index d041797..3ff6437 100644 --- a/examples/Interpolation.elm +++ b/examples/Interpolation.elm @@ -1,57 +1,53 @@ module Interpolation exposing (main) - import Html import Html.Attributes exposing (class) -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.Area as Area import LineChart.Axis as Axis +import LineChart.Axis.Intersection as Intersection import LineChart.Colors as Colors -import LineChart.Legends as Legends -import LineChart.Line as Line +import LineChart.Container as Container +import LineChart.Dots as Dots import LineChart.Events as Events import LineChart.Grid as Grid +import LineChart.Interpolation as Interpolation +import LineChart.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area +import LineChart.Line as Line main : Html.Html msg main = - Html.div - [ class "container" ] - [ chart ] + Html.div + [ class "container" ] + [ chart ] chart : Html.Html msg chart = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = - -- Try out these different configs! - -- Interpolation.linear - -- Interpolation.monotone - Interpolation.stepped - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.gold Dots.triangle "Chuck" chuck - , LineChart.line Colors.pink Dots.circle "Bobby" bobby - , LineChart.line Colors.blue Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = + -- Try out these different configs! + -- Interpolation.linear + -- Interpolation.monotone + Interpolation.stepped + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.gold Dots.triangle "Chuck" chuck + , LineChart.line Colors.pink Dots.circle "Bobby" bobby + , LineChart.line Colors.blue Dots.diamond "Alice" alice + ] @@ -59,35 +55,35 @@ chart = type alias Info = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Info alice = - [ Info 10 34 1.34 0 - , Info 16 42 1.62 3000 - , Info 25 75 1.73 25000 - , Info 43 83 1.75 40000 - ] + [ Info 10 34 1.34 0 + , Info 16 42 1.62 3000 + , Info 25 75 1.73 25000 + , Info 43 83 1.75 40000 + ] bobby : List Info bobby = - [ Info 10 38 1.32 0 - , Info 17 69 1.75 2000 - , Info 25 75 1.87 32000 - , Info 43 77 1.87 52000 - ] + [ Info 10 38 1.32 0 + , Info 17 69 1.75 2000 + , Info 25 75 1.87 32000 + , Info 43 77 1.87 52000 + ] chuck : List Info chuck = - [ Info 10 42 1.35 0 - , Info 15 72 1.72 1800 - , Info 25 89 1.83 85000 - , Info 43 95 1.84 120000 - ] + [ Info 10 42 1.35 0 + , Info 15 72 1.72 1800 + , Info 25 89 1.83 85000 + , Info 43 95 1.84 120000 + ] diff --git a/examples/Intersection.elm b/examples/Intersection.elm index 1c8a301..95c1fee 100644 --- a/examples/Intersection.elm +++ b/examples/Intersection.elm @@ -1,59 +1,55 @@ module Intersection exposing (main) - +import Color import Html import Html.Attributes exposing (class) -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.Area as Area import LineChart.Axis as Axis -import LineChart.Legends as Legends -import LineChart.Line as Line +import LineChart.Axis.Intersection as Intersection +import LineChart.Container as Container +import LineChart.Dots as Dots import LineChart.Events as Events import LineChart.Grid as Grid +import LineChart.Interpolation as Interpolation +import LineChart.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area -import Color +import LineChart.Line as Line main : Html.Html msg main = - Html.div - [ class "container" ] - [ chart ] + Html.div + [ class "container" ] + [ chart ] chart : Html.Html msg chart = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.default - , intersection = - -- Try out these different configs! - -- Intersection.default - -- Intersection.at 25 60 - Intersection.custom .max .min + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.default + , intersection = + -- Try out these different configs! + -- Intersection.default + -- Intersection.at 25 60 + Intersection.custom .max .min -- Note: Want to swap the direction of the ticks? Checkout out Axis.elm! - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Color.green Dots.triangle "Chuck" chuck - , LineChart.line Color.blue Dots.circle "Bobby" bobby - , LineChart.line Color.red Dots.diamond "Alice" alice - ] + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Color.green Dots.triangle "Chuck" chuck + , LineChart.line Color.blue Dots.circle "Bobby" bobby + , LineChart.line Color.red Dots.diamond "Alice" alice + ] @@ -61,35 +57,35 @@ chart = type alias Info = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Info alice = - [ Info 10 34 1.34 0 - , Info 16 42 1.62 3000 - , Info 25 75 1.73 25000 - , Info 43 83 1.75 40000 - ] + [ Info 10 34 1.34 0 + , Info 16 42 1.62 3000 + , Info 25 75 1.73 25000 + , Info 43 83 1.75 40000 + ] bobby : List Info bobby = - [ Info 10 38 1.32 0 - , Info 17 69 1.75 2000 - , Info 25 75 1.87 32000 - , Info 43 77 1.87 52000 - ] + [ Info 10 38 1.32 0 + , Info 17 69 1.75 2000 + , Info 25 75 1.87 32000 + , Info 43 77 1.87 52000 + ] chuck : List Info chuck = - [ Info 10 42 1.35 0 - , Info 15 72 1.72 1800 - , Info 25 89 1.83 85000 - , Info 43 95 1.84 120000 - ] + [ Info 10 42 1.35 0 + , Info 15 72 1.72 1800 + , Info 25 89 1.83 85000 + , Info 43 95 1.84 120000 + ] diff --git a/examples/Junk.elm b/examples/Junk.elm index 470ce2b..7bd3cf5 100644 --- a/examples/Junk.elm +++ b/examples/Junk.elm @@ -1,97 +1,96 @@ module Junk exposing (main) +import Color import Html exposing (Html, div, h1, node, p, text) import Html.Attributes exposing (class) -import Svg exposing (Attribute, Svg, g, text_, tspan) -import Svg.Attributes as SvgA 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.Area as Area +import LineChart.Axis as Axis import LineChart.Axis.Intersection as Intersection +import LineChart.Container as Container import LineChart.Coordinate as Coordinate -import LineChart.Axis as Axis -import LineChart.Legends as Legends -import LineChart.Line as Line +import LineChart.Dots as Dots import LineChart.Events as Events import LineChart.Grid as Grid +import LineChart.Interpolation as Interpolation +import LineChart.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area -import Color +import LineChart.Line as Line +import Svg exposing (Attribute, Svg, g, text_, tspan) +import Svg.Attributes as SvgA main : Html.Html msg main = - Html.div - [ class "container" ] - [ chart ] + Html.div + [ class "container" ] + [ chart ] chart : Html.Html msg chart = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.custom junk -- Junk goes here! - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Color.orange Dots.triangle "Chuck" chuck - , LineChart.line Color.yellow Dots.circle "Bobby" bobby - , LineChart.line Color.purple Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.custom junk -- Junk goes here! + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Color.orange Dots.triangle "Chuck" chuck + , LineChart.line Color.yellow Dots.circle "Bobby" bobby + , LineChart.line Color.purple Dots.diamond "Alice" alice + ] junk : Coordinate.System -> Junk.Layers msg junk system = - { below = [ sectionBand system, picassoQuote system ] - , above = [ picassoImage system ] - , html = [] - } + { below = [ sectionBand system, picassoQuote system ] + , above = [ picassoImage system ] + , html = [] + } picassoImage : Coordinate.System -> Svg msg picassoImage system = - let - x = - 10 + Coordinate.toSvgX system system.x.max - - y = - 70 + Coordinate.toSvgY system system.y.max - in - Svg.image - [ SvgA.xlinkHref picassoImageLink - , SvgA.x (toString x) - , SvgA.y (toString y) - , SvgA.height "100px" - , SvgA.width "100px" - ] - [] + let + x = + 10 + Coordinate.toSvgX system system.x.max + + y = + 70 + Coordinate.toSvgY system system.y.max + in + Svg.image + [ SvgA.xlinkHref picassoImageLink + , SvgA.x (toString x) + , SvgA.y (toString y) + , SvgA.height "100px" + , SvgA.width "100px" + ] + [] picassoImageLink : String picassoImageLink = - "https://s-media-cache-ak0.pinimg.com/originals/fe/a5/51/fea551e5d80a2472b6623fcfb308f661.jpg" + "https://s-media-cache-ak0.pinimg.com/originals/fe/a5/51/fea551e5d80a2472b6623fcfb308f661.jpg" picassoQuote : Coordinate.System -> Svg msg picassoQuote system = - Svg.g - [ Junk.transform [ Junk.move system 15 70 ] ] - [ Junk.label Color.black "Computers are useless. They only give you answers." ] + Svg.g + [ Junk.transform [ Junk.move system 15 70 ] ] + [ Junk.label Color.black "Computers are useless. They only give you answers." ] sectionBand : Coordinate.System -> Svg msg sectionBand system = - Junk.rectangle system [ SvgA.fill "#b6b6b61a" ] 30 40 system.y.min system.y.max + Junk.rectangle system [ SvgA.fill "#b6b6b61a" ] 30 40 system.y.min system.y.max @@ -99,35 +98,35 @@ sectionBand system = type alias Info = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Info alice = - [ Info 10 34 1.34 0 - , Info 16 42 1.62 3000 - , Info 25 75 1.73 25000 - , Info 43 83 1.75 40000 - ] + [ Info 10 34 1.34 0 + , Info 16 42 1.62 3000 + , Info 25 75 1.73 25000 + , Info 43 83 1.75 40000 + ] bobby : List Info bobby = - [ Info 10 38 1.32 0 - , Info 17 69 1.75 2000 - , Info 25 75 1.87 32000 - , Info 43 77 1.87 52000 - ] + [ Info 10 38 1.32 0 + , Info 17 69 1.75 2000 + , Info 25 75 1.87 32000 + , Info 43 77 1.87 52000 + ] chuck : List Info chuck = - [ Info 10 42 1.35 0 - , Info 15 72 1.72 1800 - , Info 25 89 1.83 85000 - , Info 43 95 1.84 120000 - ] + [ Info 10 42 1.35 0 + , Info 15 72 1.72 1800 + , Info 25 89 1.83 85000 + , Info 43 95 1.84 120000 + ] diff --git a/examples/Legends.elm b/examples/Legends.elm index 5670466..e200a76 100644 --- a/examples/Legends.elm +++ b/examples/Legends.elm @@ -1,91 +1,86 @@ module Legends exposing (main) - +import Color import Html import Html.Attributes exposing (class) -import Svg -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.Coordinate as Coordinate -import LineChart.Interpolation as Interpolation -import LineChart.Axis.Intersection as Intersection +import LineChart.Area as Area import LineChart.Axis as Axis +import LineChart.Axis.Intersection as Intersection import LineChart.Colors as Colors -import LineChart.Legends as Legends -import LineChart.Line as Line +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.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area -import Color +import LineChart.Line as Line +import Svg +import Svg.Attributes as SvgA main : Html.Html msg main = - Html.div - [ class "container" ] - [ chart ] + Html.div + [ class "container" ] + [ chart ] chart : Html.Html msg chart = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = - -- Try out these different configs! - Legends.default + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = + -- Try out these different configs! + Legends.default + -- Legends.byEnding (Junk.label Color.black) -- Legends.byBeginning (Junk.label Color.black) -- Legends.grouped .max .min 0 -60 -- Arguments: x-coordinate y-coordinate x-offset y-offset -- Legends.groupedCustom 30 viewLegends -- Legends.groupedCustom 20 viewLegends - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.gold Dots.triangle "Chuck" chuck - , LineChart.line Colors.pink Dots.circle "Bobby" bobby - , LineChart.line Colors.blue Dots.diamond "Alice" alice - ] + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.gold Dots.triangle "Chuck" chuck + , LineChart.line Colors.pink Dots.circle "Bobby" bobby + , LineChart.line Colors.blue Dots.diamond "Alice" alice + ] viewLegends : Coordinate.System -> List (Legends.Legend msg) -> Svg.Svg msg viewLegends system legends = - Svg.g - [ SvgA.class "chart__legends" - , Junk.transform - [ Junk.move system system.x.min system.y.min - , Junk.offset 20 20 + Svg.g + [ SvgA.class "chart__legends" + , Junk.transform + [ Junk.move system system.x.min system.y.min + , Junk.offset 20 20 + ] ] - ] - (List.indexedMap viewLegend legends) + (List.indexedMap viewLegend legends) viewLegend : Int -> Legends.Legend msg -> Svg.Svg msg viewLegend index { sample, label } = - Svg.g - [ SvgA.class "chart__legend" - , Junk.transform [ Junk.offset (toFloat index * 100) 20 ] - ] - [ sample - , Svg.g - [ Junk.transform [ Junk.offset 40 4 ] ] - [ Junk.label Color.black label ] - ] - - + Svg.g + [ SvgA.class "chart__legend" + , Junk.transform [ Junk.offset (toFloat index * 100) 20 ] + ] + [ sample + , Svg.g + [ Junk.transform [ Junk.offset 40 4 ] ] + [ Junk.label Color.black label ] + ] @@ -93,35 +88,35 @@ viewLegend index { sample, label } = type alias Info = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Info alice = - [ Info 10 34 1.34 0 - , Info 16 42 1.62 3000 - , Info 25 75 1.73 25000 - , Info 43 83 1.75 40000 - ] + [ Info 10 34 1.34 0 + , Info 16 42 1.62 3000 + , Info 25 75 1.73 25000 + , Info 43 83 1.75 40000 + ] bobby : List Info bobby = - [ Info 10 38 1.32 0 - , Info 17 69 1.75 2000 - , Info 25 75 1.87 32000 - , Info 43 77 1.87 52000 - ] + [ Info 10 38 1.32 0 + , Info 17 69 1.75 2000 + , Info 25 75 1.87 32000 + , Info 43 77 1.87 52000 + ] chuck : List Info chuck = - [ Info 10 42 1.35 0 - , Info 15 72 1.72 1800 - , Info 25 89 1.83 85000 - , Info 43 95 1.84 120000 - ] + [ Info 10 42 1.35 0 + , Info 15 72 1.72 1800 + , Info 25 89 1.83 85000 + , Info 43 95 1.84 120000 + ] diff --git a/examples/Line.elm b/examples/Line.elm index e00bc95..322d46b 100644 --- a/examples/Line.elm +++ b/examples/Line.elm @@ -1,57 +1,54 @@ module Line exposing (main) - +import Color import Html import Html.Attributes exposing (class) -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.Area as Area import LineChart.Axis as Axis -import LineChart.Legends as Legends -import LineChart.Line as Line +import LineChart.Axis.Intersection as Intersection +import LineChart.Container as Container +import LineChart.Dots as Dots import LineChart.Events as Events import LineChart.Grid as Grid +import LineChart.Interpolation as Interpolation +import LineChart.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area -import Color +import LineChart.Line as Line main : Html.Html msg main = - Html.div - [ class "container" ] - [ chart ] + Html.div + [ class "container" ] + [ chart ] chart : Html.Html msg chart = - LineChart.viewCustom - { y = Axis.default 450 "Height" .height - , x = Axis.default 700 "Age" .age - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = - -- Try out these different configs! - -- Line.default - Line.wider 2 + LineChart.viewCustom + { y = Axis.default 450 "Height" .height + , x = Axis.default 700 "Age" .age + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = + -- Try out these different configs! + -- Line.default + Line.wider 2 + -- For making the line change based on whether it's hovered, see Events.elm! - , dots = Dots.default - } - [ LineChart.line Color.red Dots.diamond "Alice" alice - , LineChart.line Color.blue Dots.circle "Bobby" bobby - , LineChart.line Color.green Dots.triangle "Chuck" chuck - ] + , dots = Dots.default + } + [ LineChart.line Color.red Dots.diamond "Alice" alice + , LineChart.line Color.blue Dots.circle "Bobby" bobby + , LineChart.line Color.green Dots.triangle "Chuck" chuck + ] @@ -59,35 +56,35 @@ chart = type alias Info = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Info alice = - [ Info 10 34 1.34 0 - , Info 16 42 1.62 3000 - , Info 25 75 1.73 25000 - , Info 43 83 1.75 40000 - ] + [ Info 10 34 1.34 0 + , Info 16 42 1.62 3000 + , Info 25 75 1.73 25000 + , Info 43 83 1.75 40000 + ] bobby : List Info bobby = - [ Info 10 38 1.32 0 - , Info 17 69 1.75 2000 - , Info 25 75 1.87 32000 - , Info 43 77 1.87 52000 - ] + [ Info 10 38 1.32 0 + , Info 17 69 1.75 2000 + , Info 25 75 1.87 32000 + , Info 43 77 1.87 52000 + ] chuck : List Info chuck = - [ Info 10 42 1.35 0 - , Info 15 72 1.72 1800 - , Info 25 89 1.83 85000 - , Info 43 95 1.84 120000 - ] + [ Info 10 42 1.35 0 + , Info 15 72 1.72 1800 + , Info 25 89 1.83 85000 + , Info 43 95 1.84 120000 + ] diff --git a/examples/Lines.elm b/examples/Lines.elm index 24b7554..43768e0 100644 --- a/examples/Lines.elm +++ b/examples/Lines.elm @@ -1,27 +1,27 @@ module Lines exposing (main) - +import Color import Html import Html.Attributes exposing (class) import LineChart import LineChart.Dots as Dots -import Color main : Html.Html msg main = - Html.div - [ class "container" ] - [ chart ] + Html.div + [ class "container" ] + [ chart ] chart : Html.Html msg chart = - LineChart.view .age .height - [ LineChart.line Color.red Dots.diamond "Alice" alice - , LineChart.line Color.blue Dots.circle "Bobby" bobby - , LineChart.line Color.green Dots.plus "Chuck" chuck - ] + LineChart.view .age + .height + [ LineChart.line Color.red Dots.diamond "Alice" alice + , LineChart.line Color.blue Dots.circle "Bobby" bobby + , LineChart.line Color.green Dots.plus "Chuck" chuck + ] @@ -29,35 +29,35 @@ chart = type alias Info = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Info alice = - [ Info 10 34 1.34 0 - , Info 16 42 1.62 3000 - , Info 25 75 1.73 25000 - , Info 43 83 1.75 40000 - ] + [ Info 10 34 1.34 0 + , Info 16 42 1.62 3000 + , Info 25 75 1.73 25000 + , Info 43 83 1.75 40000 + ] bobby : List Info bobby = - [ Info 10 38 1.32 0 - , Info 17 69 1.75 2000 - , Info 25 75 1.87 32000 - , Info 43 77 1.87 52000 - ] + [ Info 10 38 1.32 0 + , Info 17 69 1.75 2000 + , Info 25 75 1.87 32000 + , Info 43 77 1.87 52000 + ] chuck : List Info chuck = - [ Info 10 42 1.35 0 - , Info 15 72 1.72 1800 - , Info 25 89 1.83 85000 - , Info 43 95 1.84 120000 - ] + [ Info 10 42 1.35 0 + , Info 15 72 1.72 1800 + , Info 25 89 1.83 85000 + , Info 43 95 1.84 120000 + ] diff --git a/examples/LotsOfData.elm b/examples/LotsOfData.elm index 34bd095..bc37782 100644 --- a/examples/LotsOfData.elm +++ b/examples/LotsOfData.elm @@ -2,35 +2,32 @@ module LotsOfData exposing (main) import Html exposing (Html, div, h1, node, p, text) import Html.Attributes exposing (class) -import Svg exposing (Attribute, Svg, g, text_, tspan) import LineChart as LineChart -import LineChart.Junk as Junk exposing (..) -import LineChart.Dots as Dots +import LineChart.Area as Area +import LineChart.Axis as Axis +import LineChart.Axis.Intersection as Intersection +import LineChart.Colors as Colors import LineChart.Container as Container import LineChart.Coordinate as Coordinate -import LineChart.Junk as Junk -import LineChart.Colors as Colors -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.Dots as Dots import LineChart.Events as Events import LineChart.Grid as Grid +import LineChart.Interpolation as Interpolation +import LineChart.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area +import LineChart.Line as Line import Random - +import Svg exposing (Attribute, Svg, g, text_, tspan) 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 + } @@ -51,27 +48,27 @@ init = type Msg - = RecieveNumbers (List Float) + = RecieveNumbers (List Float) update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = - case msg of - RecieveNumbers numbers -> - ( { model | data = List.indexedMap toData numbers } - , Cmd.none - ) + case msg of + RecieveNumbers numbers -> + ( { model | data = List.indexedMap toData numbers } + , Cmd.none + ) toData : Int -> Float -> Coordinate.Point toData index = - Coordinate.Point (toFloat index) + Coordinate.Point (toFloat index) getNumbers : Cmd Msg getNumbers = - Random.list 1501 (Random.float 0 20) - |> Random.generate RecieveNumbers + Random.list 1501 (Random.float 0 20) + |> Random.generate RecieveNumbers @@ -80,28 +77,28 @@ getNumbers = view : Model -> Svg Msg view model = - Html.div - [ class "container" ] - [ chart model ] + Html.div + [ class "container" ] + [ chart model ] chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "y" .y - , x = Axis.default 1700 "x" .x - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.default - , intersection = Intersection.custom .min .min - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.pink Dots.none "data" model.data ] + LineChart.viewCustom + { y = Axis.default 450 "y" .y + , x = Axis.default 1700 "x" .x + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.default + , intersection = Intersection.custom .min .min + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.pink Dots.none "data" model.data ] @@ -109,35 +106,35 @@ chart model = type alias Info = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Info alice = - [ Info 10 34 1.34 0 - , Info 16 42 1.62 3000 - , Info 25 75 1.73 25000 - , Info 43 83 1.75 40000 - ] + [ Info 10 34 1.34 0 + , Info 16 42 1.62 3000 + , Info 25 75 1.73 25000 + , Info 43 83 1.75 40000 + ] bobby : List Info bobby = - [ Info 10 38 1.32 0 - , Info 17 69 1.75 2000 - , Info 25 75 1.87 32000 - , Info 43 77 1.87 52000 - ] + [ Info 10 38 1.32 0 + , Info 17 69 1.75 2000 + , Info 25 75 1.87 32000 + , Info 43 77 1.87 52000 + ] chuck : List Info chuck = - [ Info 10 42 1.35 0 - , Info 15 72 1.72 1800 - , Info 25 89 1.83 85000 - , Info 43 95 1.84 120000 - ] + [ Info 10 42 1.35 0 + , Info 15 72 1.72 1800 + , Info 25 89 1.83 85000 + , Info 43 95 1.84 120000 + ] diff --git a/examples/Selection1.elm b/examples/Selection1.elm index 2545edd..f99e775 100644 --- a/examples/Selection1.elm +++ b/examples/Selection1.elm @@ -1,34 +1,31 @@ module Selection1 exposing (main) import Html -import Svg -import Svg.Attributes 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 Svg +import Svg.Attributes main : Program Never Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -49,18 +46,18 @@ init = type Msg - = Hover Coordinate.Point - | Clear + = Hover Coordinate.Point + | Clear update : Msg -> Model -> Model update msg model = - case msg of - Hover hovered -> - { model | hovered = Just hovered } + case msg of + Hover hovered -> + { model | hovered = Just hovered } - Clear -> - { model | hovered = Nothing } + Clear -> + { model | hovered = Nothing } @@ -69,49 +66,52 @@ update msg model = view : Model -> Html.Html Msg view = - chart + chart chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = - Events.custom - [ Events.onMouseMove Hover Events.getData - , Events.onMouseLeave Clear - ] - , junk = Junk.custom (junk model) -- Junk goes here! - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Colors.blue Dots.triangle "Chuck" chuck - , LineChart.line Colors.cyan Dots.circle "Bobby" bobby - , LineChart.line Colors.pink Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = + Events.custom + [ Events.onMouseMove Hover Events.getData + , Events.onMouseLeave Clear + ] + , junk = Junk.custom (junk model) -- Junk goes here! + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Colors.blue Dots.triangle "Chuck" chuck + , LineChart.line Colors.cyan Dots.circle "Bobby" bobby + , LineChart.line Colors.pink Dots.diamond "Alice" alice + ] junk : Model -> Coordinate.System -> Junk.Layers msg junk model system = - { below = - case model.hovered of - Just hovered -> [ sectionBand system hovered ] - Nothing -> [] - , above = [] - , html = [] - } + { below = + case model.hovered of + Just hovered -> + [ sectionBand system hovered ] + + Nothing -> + [] + , above = [] + , html = [] + } sectionBand : Coordinate.System -> Coordinate.Point -> Svg.Svg msg sectionBand system hovered = - Junk.rectangle system [ Svg.Attributes.fill "#b6b6b61a" ] (hovered.x - 5) (hovered.x + 5) system.y.min system.y.max + Junk.rectangle system [ Svg.Attributes.fill "#b6b6b61a" ] (hovered.x - 5) (hovered.x + 5) system.y.min system.y.max @@ -119,35 +119,35 @@ sectionBand system hovered = type alias Data = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Data alice = - [ Data 10 34 1.34 0 - , Data 16 42 1.62 3000 - , Data 25 75 1.73 25000 - , Data 43 83 1.75 40000 - ] + [ Data 10 34 1.34 0 + , Data 16 42 1.62 3000 + , Data 25 75 1.73 25000 + , Data 43 83 1.75 40000 + ] bobby : List Data bobby = - [ Data 10 38 1.32 0 - , Data 17 69 1.75 2000 - , Data 25 75 1.87 32000 - , Data 43 77 1.87 52000 - ] + [ Data 10 38 1.32 0 + , Data 17 69 1.75 2000 + , Data 25 75 1.87 32000 + , Data 43 77 1.87 52000 + ] chuck : List Data chuck = - [ Data 10 42 1.35 0 - , Data 15 72 1.72 1800 - , Data 25 89 1.83 85000 - , Data 43 95 1.84 120000 - ] + [ Data 10 42 1.35 0 + , Data 15 72 1.72 1800 + , Data 25 89 1.83 85000 + , Data 43 95 1.84 120000 + ] diff --git a/examples/Selection2.elm b/examples/Selection2.elm index 409b484..8443593 100644 --- a/examples/Selection2.elm +++ b/examples/Selection2.elm @@ -2,40 +2,37 @@ module Selection2 exposing (main) import Html import Html.Attributes -import Svg -import Svg.Attributes -import Random import LineChart -import LineChart.Junk as Junk import LineChart.Area as Area import LineChart.Axis as Axis -import LineChart.Axis.Title as Title +import LineChart.Axis.Intersection as Intersection +import LineChart.Axis.Line as AxisLine import LineChart.Axis.Range as Range import LineChart.Axis.Ticks as Ticks -import LineChart.Axis.Line as AxisLine -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.Title as Title 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 Svg +import Svg.Attributes 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 + } @@ -52,16 +49,16 @@ type alias Model = type alias Selection = - { start : Float - , end : Float - } + { start : Float + , end : Float + } type alias Data = - { alice : List Coordinate.Point - , bobby : List Coordinate.Point - , chuck : List Coordinate.Point - } + { alice : List Coordinate.Point + , bobby : List Coordinate.Point + , chuck : List Coordinate.Point + } @@ -70,24 +67,24 @@ type alias Data = init : ( Model, Cmd Msg ) init = - ( { data = Data [] [] [] - , hovered = Nothing - , selection = Nothing - , dragging = False - , hinted = Nothing - } - , getNumbers - ) + ( { data = Data [] [] [] + , hovered = Nothing + , selection = Nothing + , dragging = False + , hinted = Nothing + } + , getNumbers + ) getNumbers : Cmd Msg getNumbers = - let - genNumbers = - Random.list 200 (Random.float 0 20) - in - Random.map3 (,,) genNumbers genNumbers genNumbers - |> Random.generate RecieveNumbers + let + genNumbers = + Random.list 200 (Random.float 0 20) + in + Random.map3 (,,) genNumbers genNumbers genNumbers + |> Random.generate RecieveNumbers @@ -96,39 +93,42 @@ getNumbers = setData : ( List Float, List Float, List Float ) -> Model -> Model setData ( n1, n2, n3 ) model = - { model | data = Data (toData n1) (toData n2) (toData n3) } + { model | data = Data (toData n1) (toData n2) (toData n3) } toData : List Float -> List Coordinate.Point toData numbers = - List.indexedMap (\i -> Coordinate.Point (toFloat i)) numbers + List.indexedMap (\i -> Coordinate.Point (toFloat i)) numbers setSelection : Maybe Selection -> Model -> Model setSelection selection model = - { model | selection = selection } + { model | selection = selection } setDragging : Bool -> Model -> Model setDragging dragging model = - { model | dragging = dragging } + { model | dragging = dragging } setHovered : Maybe Float -> Model -> Model setHovered hovered model = - { model | hovered = hovered } + { model | hovered = hovered } setHint : Maybe Coordinate.Point -> Model -> Model setHint hinted model = - { model | hinted = hinted } + { model | hinted = hinted } getSelectionStart : Float -> Model -> Float getSelectionStart hovered model = - case model.selection of - Just selection -> selection.start - Nothing -> hovered + case model.selection of + Just selection -> + selection.start + + Nothing -> + hovered @@ -136,77 +136,82 @@ getSelectionStart hovered model = type Msg - = RecieveNumbers ( List Float, List Float, List Float ) - -- Chart 1 - | Hold Coordinate.Point - | Move Coordinate.Point - | Drop Coordinate.Point - | LeaveChart Coordinate.Point - | LeaveContainer Coordinate.Point - -- Chart 2 - | Hint (Maybe Coordinate.Point) + = RecieveNumbers ( List Float, List Float, List Float ) + -- Chart 1 + | Hold Coordinate.Point + | Move Coordinate.Point + | Drop Coordinate.Point + | LeaveChart Coordinate.Point + | LeaveContainer Coordinate.Point + -- Chart 2 + | Hint (Maybe Coordinate.Point) update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = - case msg of - RecieveNumbers numbers -> - model - |> setData numbers - |> addCmd Cmd.none - - Hold point -> - model - |> setSelection Nothing - |> setDragging True - |> addCmd Cmd.none - - Move point -> - if model.dragging then - let - start = getSelectionStart point.x model - newSelection = Selection start point.x - in - model - |> setSelection (Just newSelection) - |> setHovered (Just point.x) - |> addCmd Cmd.none - else - model - |> setHovered (Just point.x) - |> addCmd Cmd.none - - Drop point -> - if point.x == getSelectionStart point.x model then - model - |> setSelection Nothing - |> setDragging False - |> addCmd Cmd.none - else - model - |> setDragging False - |> addCmd Cmd.none - - LeaveChart point -> - model - |> setHovered Nothing - |> addCmd Cmd.none - - LeaveContainer point -> - model - |> setDragging False - |> setHovered Nothing - |> addCmd Cmd.none - - Hint point -> - model - |> setHint point - |> addCmd Cmd.none + case msg of + RecieveNumbers numbers -> + model + |> setData numbers + |> addCmd Cmd.none + + Hold point -> + model + |> setSelection Nothing + |> setDragging True + |> addCmd Cmd.none + + Move point -> + if model.dragging then + let + start = + getSelectionStart point.x model + + newSelection = + Selection start point.x + in + model + |> setSelection (Just newSelection) + |> setHovered (Just point.x) + |> addCmd Cmd.none + + else + model + |> setHovered (Just point.x) + |> addCmd Cmd.none + + Drop point -> + if point.x == getSelectionStart point.x model then + model + |> setSelection Nothing + |> setDragging False + |> addCmd Cmd.none + + else + model + |> setDragging False + |> addCmd Cmd.none + + LeaveChart point -> + model + |> setHovered Nothing + |> addCmd Cmd.none + + LeaveContainer point -> + model + |> setDragging False + |> setHovered Nothing + |> addCmd Cmd.none + + Hint point -> + model + |> setHint point + |> addCmd Cmd.none addCmd : Cmd Msg -> Model -> ( Model, Cmd Msg ) addCmd cmd model = - ( model, Cmd.none ) + ( model, Cmd.none ) @@ -215,15 +220,15 @@ addCmd cmd model = view : Model -> Html.Html Msg view model = - Html.div [ Html.Attributes.style [ ("display", "flex") ] ] <| - case model.selection of - Nothing -> - [ chart model ] + Html.div [ Html.Attributes.style [ ( "display", "flex" ) ] ] <| + case model.selection of + Nothing -> + [ chart model ] - Just selection -> - [ chart model - , chartZoom model selection - ] + Just selection -> + [ chart model + , chartZoom model selection + ] @@ -232,52 +237,57 @@ view model = chart : Model -> Html.Html Msg chart model = - viewChart model.data - { range = Range.default - , junk = junkConfig model - , legends = Legends.default - , events = - Events.custom - [ Events.onWithOptions "mousedown" (Events.Options True True False) Hold Events.getData - , Events.onWithOptions "mousemove" (Events.Options True True False) Move Events.getData - , Events.onWithOptions "mouseup" (Events.Options True True True) Drop Events.getData - , Events.onWithOptions "mouseleave" (Events.Options True True False) LeaveChart Events.getData - , Events.onWithOptions "mouseleave" (Events.Options True True True) LeaveContainer Events.getData - ] - , dots = Dots.custom (Dots.full 0) - , id = "line-chart" - } + viewChart model.data + { range = Range.default + , junk = junkConfig model + , legends = Legends.default + , events = + Events.custom + [ Events.onWithOptions "mousedown" (Events.Options True True False) Hold Events.getData + , Events.onWithOptions "mousemove" (Events.Options True True False) Move Events.getData + , Events.onWithOptions "mouseup" (Events.Options True True True) Drop Events.getData + , Events.onWithOptions "mouseleave" (Events.Options True True False) LeaveChart Events.getData + , Events.onWithOptions "mouseleave" (Events.Options True True True) LeaveContainer Events.getData + ] + , dots = Dots.custom (Dots.full 0) + , id = "line-chart" + } junkConfig : Model -> Junk.Config Coordinate.Point msg junkConfig model = - Junk.custom <| \system -> - { below = below system model.selection - , above = above system model.hovered - , html = [] - } + Junk.custom <| + \system -> + { below = below system model.selection + , above = above system model.hovered + , html = [] + } below : Coordinate.System -> Maybe Selection -> List (Svg.Svg msg) below system selection = - case selection of - Just { start, end } -> - [ Junk.rectangle system [ Svg.Attributes.fill "#b6b6b61a" ] - start end system.y.min system.y.max - ] + case selection of + Just { start, end } -> + [ Junk.rectangle system + [ Svg.Attributes.fill "#b6b6b61a" ] + start + end + system.y.min + system.y.max + ] - Nothing -> - [] + Nothing -> + [] above : Coordinate.System -> Maybe Float -> List (Svg.Svg msg) above system hovered = - case hovered of - Just hovered -> - [ Junk.vertical system [] hovered ] + case hovered of + Just hovered -> + [ Junk.vertical system [] hovered ] - Nothing -> - [] + Nothing -> + [] @@ -286,33 +296,34 @@ above system hovered = chartZoom : Model -> Selection -> Html.Html Msg chartZoom model selection = - viewChart model.data - { range = xAxisRangeConfig selection - , junk = - Junk.hoverOne model.hinted - [ ( "x", toString << round100 << .x ) - , ( "y", toString << round100 << .y ) - ] - , events = Events.hoverOne Hint - , legends = Legends.none - , dots = Dots.hoverOne model.hinted - , id = "line-chart-zoom" - } + viewChart model.data + { range = xAxisRangeConfig selection + , junk = + Junk.hoverOne model.hinted + [ ( "x", toString << round100 << .x ) + , ( "y", toString << round100 << .y ) + ] + , events = Events.hoverOne Hint + , legends = Legends.none + , dots = Dots.hoverOne model.hinted + , id = "line-chart-zoom" + } xAxisRangeConfig : Selection -> Range.Config xAxisRangeConfig selection = - let - start = - min selection.start selection.end + let + start = + min selection.start selection.end - end = - if selection.start == selection.end - then selection.start + 1 - else max selection.start selection.end - in - Range.window start end + end = + if selection.start == selection.end then + selection.start + 1 + else + max selection.start selection.end + in + Range.window start end @@ -320,50 +331,50 @@ xAxisRangeConfig selection = type alias Config = - { range : Range.Config - , junk : Junk.Config Coordinate.Point Msg - , events : Events.Config Coordinate.Point Msg - , legends : Legends.Config Coordinate.Point Msg - , dots : Dots.Config Coordinate.Point - , id : String - } + { range : Range.Config + , junk : Junk.Config Coordinate.Point Msg + , events : Events.Config Coordinate.Point Msg + , legends : Legends.Config Coordinate.Point Msg + , dots : Dots.Config Coordinate.Point + , id : String + } viewChart : Data -> Config -> Html.Html Msg viewChart data { range, junk, events, legends, dots, id } = - LineChart.viewCustom - { y = Axis.default 450 "y" .y - , x = - Axis.custom - { title = Title.default "x" - , variable = Just << .x - , pixels = 700 - , range = range - , axisLine = AxisLine.rangeFrame Colors.gray - , ticks = Ticks.float 5 - } - , container = - Container.custom - { attributesHtml = [ Html.Attributes.style [ ( "font-family", "monospace" ) ] ] - , attributesSvg = [] - , size = Container.static - , margin = Container.Margin 30 100 60 50 - , id = "chart-id" - } - , interpolation = Interpolation.monotone - , intersection = Intersection.default - , legends = legends - , events = events - , junk = junk - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = dots - } - [ LineChart.line Colors.pink Dots.circle "Alice" data.alice - , LineChart.line Colors.cyan Dots.circle "Bobby" data.bobby - , LineChart.line Colors.blue Dots.circle "Chuck" data.chuck - ] + LineChart.viewCustom + { y = Axis.default 450 "y" .y + , x = + Axis.custom + { title = Title.default "x" + , variable = Just << .x + , pixels = 700 + , range = range + , axisLine = AxisLine.rangeFrame Colors.gray + , ticks = Ticks.float 5 + } + , container = + Container.custom + { attributesHtml = [ Html.Attributes.style [ ( "font-family", "monospace" ) ] ] + , attributesSvg = [] + , size = Container.static + , margin = Container.Margin 30 100 60 50 + , id = "chart-id" + } + , interpolation = Interpolation.monotone + , intersection = Intersection.default + , legends = legends + , events = events + , junk = junk + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = dots + } + [ LineChart.line Colors.pink Dots.circle "Alice" data.alice + , LineChart.line Colors.cyan Dots.circle "Bobby" data.bobby + , LineChart.line Colors.blue Dots.circle "Chuck" data.chuck + ] @@ -372,4 +383,4 @@ viewChart data { range, junk, events, legends, dots, id } = round100 : Float -> Float round100 float = - toFloat (round (float * 100)) / 100 + toFloat (round (float * 100)) / 100 diff --git a/examples/Simple.elm b/examples/Simple.elm index 2fed024..56082a4 100644 --- a/examples/Simple.elm +++ b/examples/Simple.elm @@ -1,6 +1,5 @@ module Simple exposing (main) - import Html import Html.Attributes exposing (class) import LineChart @@ -8,24 +7,24 @@ import LineChart main : Html.Html msg main = - Html.div - [ class "container" ] - [ chart1, chart2, chart3 ] + Html.div + [ class "container" ] + [ chart1, chart2, chart3 ] chart1 : Html.Html msg chart1 = - LineChart.view1 .x .y data1 + LineChart.view1 .x .y data1 chart2 : Html.Html msg chart2 = - LineChart.view2 .x .y data1 data2 + LineChart.view2 .x .y data1 data2 chart3 : Html.Html msg chart3 = - LineChart.view3 .x .y data1 data2 data3 + LineChart.view3 .x .y data1 data2 data3 @@ -33,19 +32,19 @@ chart3 = type alias Point = - { x : Float, y : Float } + { x : Float, y : Float } data1 : List Point data1 = - [ Point 1 2, Point 6 4, Point 10 10 ] + [ Point 1 2, Point 6 4, Point 10 10 ] data2 : List Point data2 = - [ Point 1 5, Point 6 9, Point 10 7 ] + [ Point 1 5, Point 6 9, Point 10 7 ] data3 : List Point data3 = - [ Point 1 3, Point 6 2, Point 10 11 ] + [ Point 1 3, Point 6 2, Point 10 11 ] diff --git a/examples/Size.elm b/examples/Size.elm index 3d547c1..6e290c7 100644 --- a/examples/Size.elm +++ b/examples/Size.elm @@ -1,54 +1,49 @@ module Size exposing (main) - +import Color import Html import Html.Attributes exposing (class) -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.Area as Area import LineChart.Axis as Axis -import LineChart.Legends as Legends -import LineChart.Line as Line +import LineChart.Axis.Intersection as Intersection +import LineChart.Container as Container +import LineChart.Dots as Dots import LineChart.Events as Events import LineChart.Grid as Grid +import LineChart.Interpolation as Interpolation +import LineChart.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area -import Color -import Color +import LineChart.Line as Line main : Html.Html msg main = - Html.div - [ class "container" ] - [ chart ] + Html.div + [ class "container" ] + [ chart ] chart : Html.Html msg chart = - LineChart.viewCustom - { y = Axis.default 450 "Height" .height -- Change number here to edit height - , x = Axis.default 700 "Age" .age -- Change number here to edit width - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } - [ LineChart.line Color.red Dots.diamond "Alice" alice - , LineChart.line Color.blue Dots.circle "Bobby" bobby - , LineChart.line Color.green Dots.plus "Chuck" chuck - ] + LineChart.viewCustom + { y = Axis.default 450 "Height" .height -- Change number here to edit height + , x = Axis.default 700 "Age" .age -- Change number here to edit width + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } + [ LineChart.line Color.red Dots.diamond "Alice" alice + , LineChart.line Color.blue Dots.circle "Bobby" bobby + , LineChart.line Color.green Dots.plus "Chuck" chuck + ] @@ -56,35 +51,35 @@ chart = type alias Info = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Info alice = - [ Info 10 34 1.34 0 - , Info 16 42 1.62 3000 - , Info 25 75 1.73 25000 - , Info 43 83 1.75 40000 - ] + [ Info 10 34 1.34 0 + , Info 16 42 1.62 3000 + , Info 25 75 1.73 25000 + , Info 43 83 1.75 40000 + ] bobby : List Info bobby = - [ Info 10 38 1.32 0 - , Info 17 69 1.75 2000 - , Info 25 75 1.87 32000 - , Info 43 77 1.87 52000 - ] + [ Info 10 38 1.32 0 + , Info 17 69 1.75 2000 + , Info 25 75 1.87 32000 + , Info 43 77 1.87 52000 + ] chuck : List Info chuck = - [ Info 10 42 1.35 0 - , Info 15 72 1.72 1800 - , Info 25 89 1.83 85000 - , Info 43 95 1.84 120000 - ] + [ Info 10 42 1.35 0 + , Info 15 72 1.72 1800 + , Info 25 89 1.83 85000 + , Info 43 95 1.84 120000 + ] diff --git a/examples/Tooltip1.elm b/examples/Tooltip1.elm index 020451d..ff07b7a 100644 --- a/examples/Tooltip1.elm +++ b/examples/Tooltip1.elm @@ -1,33 +1,30 @@ module Tooltip1 exposing (main) +import Color import Html exposing (Html, div, h1, node, p, text) import Html.Attributes exposing (class) -import Svg exposing (Attribute, Svg, g, text_, tspan) import LineChart as LineChart -import LineChart.Junk as Junk exposing (..) -import LineChart.Dots as Dots -import LineChart.Container as Container -import LineChart.Junk as Junk -import LineChart.Interpolation as Interpolation -import LineChart.Axis.Intersection as Intersection +import LineChart.Area as Area import LineChart.Axis as Axis -import LineChart.Legends as Legends -import LineChart.Line as Line +import LineChart.Axis.Intersection as Intersection +import LineChart.Container as Container +import LineChart.Dots as Dots import LineChart.Events as Events import LineChart.Grid as Grid +import LineChart.Interpolation as Interpolation +import LineChart.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area -import Color - +import LineChart.Line as Line +import Svg exposing (Attribute, Svg, g, text_, tspan) main : Program Never Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -48,14 +45,14 @@ init = type Msg - = Hover (Maybe Info) + = Hover (Maybe Info) update : Msg -> Model -> Model update msg model = - case msg of - Hover hovered -> - { model | hovered = hovered } + case msg of + Hover hovered -> + { model | hovered = hovered } @@ -64,35 +61,35 @@ update msg model = view : Model -> Svg Msg view model = - Html.div - [ class "container" ] - [ chart model ] + Html.div + [ class "container" ] + [ chart model ] chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.hoverOne Hover - , junk = - Junk.hoverOne model.hovered - [ ( "Age", toString << .age ) - , ( "Weight", toString << .weight ) - ] - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.hoverOne model.hovered - } - [ LineChart.line Color.orange Dots.triangle "Chuck" chuck - , LineChart.line Color.yellow Dots.circle "Bobby" bobby - , LineChart.line Color.purple Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.hoverOne Hover + , junk = + Junk.hoverOne model.hovered + [ ( "Age", toString << .age ) + , ( "Weight", toString << .weight ) + ] + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.hoverOne model.hovered + } + [ LineChart.line Color.orange Dots.triangle "Chuck" chuck + , LineChart.line Color.yellow Dots.circle "Bobby" bobby + , LineChart.line Color.purple Dots.diamond "Alice" alice + ] @@ -100,35 +97,35 @@ chart model = type alias Info = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Info alice = - [ Info 10 34 1.34 0 - , Info 16 42 1.62 3000 - , Info 25 75 1.73 25000 - , Info 43 83 1.75 40000 - ] + [ Info 10 34 1.34 0 + , Info 16 42 1.62 3000 + , Info 25 75 1.73 25000 + , Info 43 83 1.75 40000 + ] bobby : List Info bobby = - [ Info 10 38 1.32 0 - , Info 17 69 1.75 2000 - , Info 25 75 1.87 32000 - , Info 43 77 1.87 52000 - ] + [ Info 10 38 1.32 0 + , Info 17 69 1.75 2000 + , Info 25 75 1.87 32000 + , Info 43 77 1.87 52000 + ] chuck : List Info chuck = - [ Info 10 42 1.35 0 - , Info 15 72 1.72 1800 - , Info 25 89 1.83 85000 - , Info 43 95 1.84 120000 - ] + [ Info 10 42 1.35 0 + , Info 15 72 1.72 1800 + , Info 25 89 1.83 85000 + , Info 43 95 1.84 120000 + ] diff --git a/examples/Tooltip2.elm b/examples/Tooltip2.elm index c17d6d3..8c59563 100644 --- a/examples/Tooltip2.elm +++ b/examples/Tooltip2.elm @@ -1,34 +1,31 @@ module Tooltip exposing (main) +import Color import Html exposing (Html, div, h1, node, p, text) import Html.Attributes exposing (class) -import Svg exposing (Attribute, Svg, g, text_, tspan) import LineChart as LineChart -import LineChart.Junk as Junk exposing (..) -import LineChart.Dots as Dots +import LineChart.Area as Area +import LineChart.Axis as Axis +import LineChart.Axis.Intersection as Intersection import LineChart.Container as Container import LineChart.Coordinate as Coordinate -import LineChart.Junk as Junk -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.Dots as Dots import LineChart.Events as Events import LineChart.Grid as Grid +import LineChart.Interpolation as Interpolation +import LineChart.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area -import Color - +import LineChart.Line as Line +import Svg exposing (Attribute, Svg, g, text_, tspan) main : Program Never Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -49,14 +46,14 @@ init = type Msg - = Hover (Maybe Info) + = Hover (Maybe Info) update : Msg -> Model -> Model update msg model = - case msg of - Hover hovered -> - { model | hovered = hovered } + case msg of + Hover hovered -> + { model | hovered = hovered } @@ -65,85 +62,100 @@ update msg model = view : Model -> Svg Msg view model = - Html.div - [ class "container" ] - [ chart model ] + Html.div + [ class "container" ] + [ chart model ] chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.hoverOne Hover - , junk = - case model.hovered of - Just info -> tooltip info - Nothing -> Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.hoverOne model.hovered - } - [ LineChart.line Color.orange Dots.triangle "Chuck" chuck - , LineChart.line Color.yellow Dots.circle "Bobby" bobby - , LineChart.line Color.purple Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.hoverOne Hover + , junk = + case model.hovered of + Just info -> + tooltip info + + Nothing -> + Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.hoverOne model.hovered + } + [ LineChart.line Color.orange Dots.triangle "Chuck" chuck + , LineChart.line Color.yellow Dots.circle "Bobby" bobby + , LineChart.line Color.purple Dots.diamond "Alice" alice + ] tooltip : Info -> Junk.Config data msg tooltip info = - Junk.custom <| \system -> - { below = [] - , above = [] - , html = [ tooltipHtml system info ] - } + Junk.custom <| + \system -> + { below = [] + , above = [] + , html = [ tooltipHtml system info ] + } tooltipHtml : Coordinate.System -> Info -> Html.Html msg tooltipHtml system info = - let - shouldFlip = - -- is point closer to the left or right side? - -- if closer to the right, flip tooltip - info.age - system.x.min > system.x.max - info.age - - space = if shouldFlip then -15 else 15 - xPosition = Coordinate.toSvgX system info.age + space - yPosition = Coordinate.toSvgY system info.weight - - containerStyles = - [ ( "left", toString xPosition ++ "px" ) - , ( "top", toString yPosition ++ "px" ) - , ( "position", "absolute" ) - , ( "padding", "5px" ) - , ( "background", "rgba(247, 193, 255, 0.8)" ) - , ( "border", "1px solid #51ff5f" ) - , ( "pointer-events", "none" ) - , if shouldFlip - then ( "transform", "translateX(-100%)" ) - else ( "transform", "translateX(0)" ) - ] - - viewValue ( label, value ) = - Html.p - [ Html.Attributes.style valueStyles ] - [ Html.text <| label ++ " - " ++ toString value ] - - valueStyles = - [ ( "margin", "3px" ) ] - - valuesHtml = - List.map viewValue - [ ( "age", info.age ) - , ( "weight", info.weight ) - ] - in - Html.div [ Html.Attributes.style containerStyles ] valuesHtml + let + shouldFlip = + -- is point closer to the left or right side? + -- if closer to the right, flip tooltip + info.age - system.x.min > system.x.max - info.age + + space = + if shouldFlip then + -15 + + else + 15 + + xPosition = + Coordinate.toSvgX system info.age + space + + yPosition = + Coordinate.toSvgY system info.weight + + containerStyles = + [ ( "left", toString xPosition ++ "px" ) + , ( "top", toString yPosition ++ "px" ) + , ( "position", "absolute" ) + , ( "padding", "5px" ) + , ( "background", "rgba(247, 193, 255, 0.8)" ) + , ( "border", "1px solid #51ff5f" ) + , ( "pointer-events", "none" ) + , if shouldFlip then + ( "transform", "translateX(-100%)" ) + + else + ( "transform", "translateX(0)" ) + ] + + viewValue ( label, value ) = + Html.p + [ Html.Attributes.style valueStyles ] + [ Html.text <| label ++ " - " ++ toString value ] + + valueStyles = + [ ( "margin", "3px" ) ] + + valuesHtml = + List.map viewValue + [ ( "age", info.age ) + , ( "weight", info.weight ) + ] + in + Html.div [ Html.Attributes.style containerStyles ] valuesHtml @@ -151,35 +163,35 @@ tooltipHtml system info = type alias Info = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Info alice = - [ Info 10 34 1.34 0 - , Info 16 42 1.62 3000 - , Info 25 75 1.73 25000 - , Info 43 83 1.75 40000 - ] + [ Info 10 34 1.34 0 + , Info 16 42 1.62 3000 + , Info 25 75 1.73 25000 + , Info 43 83 1.75 40000 + ] bobby : List Info bobby = - [ Info 10 38 1.32 0 - , Info 17 69 1.75 2000 - , Info 25 75 1.87 32000 - , Info 43 77 1.87 52000 - ] + [ Info 10 38 1.32 0 + , Info 17 69 1.75 2000 + , Info 25 75 1.87 32000 + , Info 43 77 1.87 52000 + ] chuck : List Info chuck = - [ Info 10 42 1.35 0 - , Info 15 72 1.72 1800 - , Info 25 89 1.83 85000 - , Info 43 95 1.84 120000 - ] + [ Info 10 42 1.35 0 + , Info 15 72 1.72 1800 + , Info 25 89 1.83 85000 + , Info 43 95 1.84 120000 + ] diff --git a/examples/Tooltip3.elm b/examples/Tooltip3.elm index 339681f..c27a02a 100644 --- a/examples/Tooltip3.elm +++ b/examples/Tooltip3.elm @@ -3,30 +3,27 @@ module Tooltip3 exposing (main) import Html import Html.Attributes import LineChart as LineChart -import LineChart.Junk as Junk exposing (..) -import LineChart.Dots as Dots +import LineChart.Area as Area +import LineChart.Axis as Axis +import LineChart.Axis.Intersection as Intersection import LineChart.Colors as Colors import LineChart.Container as Container -import LineChart.Junk as Junk -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.Dots as Dots import LineChart.Events as Events import LineChart.Grid as Grid +import LineChart.Interpolation as Interpolation +import LineChart.Junk as Junk exposing (..) import LineChart.Legends as Legends -import LineChart.Area as Area - +import LineChart.Line as Line main : Program Never Model Msg main = - Browser.sandbox - { init = init - , update = update - , view = view - } + Browser.sandbox + { init = init + , update = update + , view = view + } @@ -47,14 +44,14 @@ init = type Msg - = Hover (List Info) + = Hover (List Info) update : Msg -> Model -> Model update msg model = - case msg of - Hover hovered -> - { model | hovered = hovered } + case msg of + Hover hovered -> + { model | hovered = hovered } @@ -63,42 +60,42 @@ update msg model = view : Model -> Html.Html Msg view model = - Html.div - [ Html.Attributes.style [ ( "font-family", "monospace" ) ] ] - [ chart model ] + Html.div + [ Html.Attributes.style [ ( "font-family", "monospace" ) ] ] + [ chart model ] chart : Model -> Html.Html Msg chart model = - LineChart.viewCustom - { y = Axis.default 450 "Weight" .weight - , x = Axis.default 700 "Age" .age - , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.hoverMany Hover - , junk = - Junk.hoverMany model.hovered formatX formatY - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.hoverMany model.hovered - } - [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck - , LineChart.line Colors.cyan Dots.circle "Bobby" bobby - , LineChart.line Colors.purple Dots.diamond "Alice" alice - ] + LineChart.viewCustom + { y = Axis.default 450 "Weight" .weight + , x = Axis.default 700 "Age" .age + , container = Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.hoverMany Hover + , junk = + Junk.hoverMany model.hovered formatX formatY + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.hoverMany model.hovered + } + [ LineChart.line Colors.pink Dots.triangle "Chuck" chuck + , LineChart.line Colors.cyan Dots.circle "Bobby" bobby + , LineChart.line Colors.purple Dots.diamond "Alice" alice + ] formatX : Info -> String formatX info = - "Age: " ++ toString info.age + "Age: " ++ toString info.age formatY : Info -> String formatY info = - toString info.weight ++ " kg" + toString info.weight ++ " kg" @@ -106,35 +103,35 @@ formatY info = type alias Info = - { age : Float - , weight : Float - , height : Float - , income : Float - } + { age : Float + , weight : Float + , height : Float + , income : Float + } alice : List Info alice = - [ Info 10 34 1.34 0 - , Info 16 42 1.62 3000 - , Info 25 75 1.73 25000 - , Info 43 83 1.75 40000 - ] + [ Info 10 34 1.34 0 + , Info 16 42 1.62 3000 + , Info 25 75 1.73 25000 + , Info 43 83 1.75 40000 + ] bobby : List Info bobby = - [ Info 10 38 1.32 0 - , Info 17 69 1.75 2000 - , Info 25 75 1.87 32000 - , Info 43 77 1.87 52000 - ] + [ Info 10 38 1.32 0 + , Info 17 69 1.75 2000 + , Info 25 75 1.87 32000 + , Info 43 77 1.87 52000 + ] chuck : List Info chuck = - [ Info 10 42 1.35 0 - , Info 15 72 1.72 1800 - , Info 25 89 1.83 85000 - , Info 43 95 1.84 120000 - ] + [ Info 10 42 1.35 0 + , Info 15 72 1.72 1800 + , Info 25 89 1.83 85000 + , Info 43 95 1.84 120000 + ] diff --git a/src/Internal/Area.elm b/src/Internal/Area.elm index f4b0b5b..ca5eba8 100644 --- a/src/Internal/Area.elm +++ b/src/Internal/Area.elm @@ -1,49 +1,55 @@ -module Internal.Area - exposing - ( Config(..), default, none, percentage, normal, stacked - , hasArea, opacity, opacitySingle, opacityContainer +module Internal.Area exposing + ( Config(..) + , default + , hasArea + , none + , normal + , opacity + , opacityContainer + , opacitySingle + , percentage + , stacked ) {-| -} - {-| -} type Config - = None - | Normal Float - | Stacked Float - | Percentage Float + = None + | Normal Float + | Stacked Float + | Percentage Float {-| -} default : Config default = - none + none {-| -} none : Config none = - None + None {-| -} normal : Float -> Config normal = - Normal + Normal {-| -} stacked : Float -> Config stacked = - Stacked + Stacked {-| -} percentage : Float -> Config percentage = - Percentage + Percentage @@ -53,38 +59,66 @@ percentage = {-| -} hasArea : Config -> Bool hasArea config = - case config of - None -> False - Normal _ -> True - Stacked _ -> True - Percentage _ -> True + case config of + None -> + False + + Normal _ -> + True + + Stacked _ -> + True + + Percentage _ -> + True {-| -} opacity : Config -> Float opacity config = - case config of - None -> 0 - Normal opacity_ -> opacity_ - Stacked opacity_ -> opacity_ - Percentage opacity_ -> opacity_ + case config of + None -> + 0 + + Normal opacity_ -> + opacity_ + + Stacked opacity_ -> + opacity_ + + Percentage opacity_ -> + opacity_ {-| -} opacitySingle : Config -> Float opacitySingle config = - case config of - None -> 0 - Normal opacity_ -> opacity_ - Stacked opacity_ -> 1 - Percentage opacity_ -> 1 + case config of + None -> + 0 + + Normal opacity_ -> + opacity_ + + Stacked opacity_ -> + 1 + + Percentage opacity_ -> + 1 {-| -} opacityContainer : Config -> Float opacityContainer config = - case config of - None -> 1 - Normal opacity_ -> 1 - Stacked opacity_ -> opacity_ - Percentage opacity_ -> opacity_ + case config of + None -> + 1 + + Normal opacity_ -> + 1 + + Stacked opacity_ -> + opacity_ + + Percentage opacity_ -> + opacity_ diff --git a/src/Internal/Axis.elm b/src/Internal/Axis.elm index 37a97d8..3c55d1f 100644 --- a/src/Internal/Axis.elm +++ b/src/Internal/Axis.elm @@ -1,160 +1,195 @@ module Internal.Axis exposing - ( Config, default, custom, full, time, none, picky - , variable, pixels, range, ticks - , viewHorizontal, viewVertical - ) + ( Config + , custom + , default + , full + , none + , picky + , pixels + , range + , ticks + , time + , variable + , viewHorizontal + , viewVertical + ) - -import Svg exposing (Svg, Attribute, g, text_, tspan, text) -import Svg.Attributes as Attributes exposing (class, strokeWidth, stroke) -import LineChart.Axis.Tick as Tick exposing (Direction) -import Internal.Coordinate as Coordinate exposing (..) -import LineChart.Colors as Colors -import Internal.Data as Data +import Color +import Internal.Axis.Intersection as Intersection +import Internal.Axis.Line as AxisLine import Internal.Axis.Range as Range import Internal.Axis.Tick -import Internal.Axis.Values as Values import Internal.Axis.Ticks as Ticks -import Internal.Axis.Line as AxisLine -import Internal.Axis.Intersection as Intersection import Internal.Axis.Title as Title +import Internal.Axis.Values as Values +import Internal.Coordinate as Coordinate exposing (..) +import Internal.Data as Data import Internal.Svg as Svg exposing (..) import Internal.Utils exposing (..) -import Color +import LineChart.Axis.Tick as Tick exposing (Direction) +import LineChart.Colors as Colors +import Svg exposing (Attribute, Svg, g, text, text_, tspan) +import Svg.Attributes as Attributes exposing (class, stroke, strokeWidth) import Time {-| -} -type Config data msg = - Config (Properties data msg) +type Config data msg + = Config (Properties data msg) {-| -} type alias Properties data msg = - { title : Title.Config msg - , variable : data -> Maybe Float - , pixels : Int - , range : Range.Config - , axisLine : AxisLine.Config msg - , ticks : Ticks.Config msg - } + { title : Title.Config msg + , variable : data -> Maybe Float + , pixels : Int + , range : Range.Config + , axisLine : AxisLine.Config msg + , ticks : Ticks.Config msg + } {-| -} default : Int -> String -> (data -> Float) -> Config data msg default pixels_ title_ variable_ = - custom - { title = Title.atDataMax 0 0 title_ - , variable = Just << variable_ - , pixels = pixels_ - , range = Range.padded 20 20 - , axisLine = AxisLine.rangeFrame Colors.gray - , ticks = - Ticks.custom <| \data range_ -> - let smallest = Coordinate.smallestRange data range_ - rangeLong = range_.max - range_.min - rangeSmall = smallest.max - smallest.min - diff = 1 - (rangeLong - rangeSmall) / rangeLong - amount = round <| diff * toFloat pixels_ / 90 - in - List.map Tick.float <| Values.float (Values.around amount) smallest - } - + custom + { title = Title.atDataMax 0 0 title_ + , variable = Just << variable_ + , pixels = pixels_ + , range = Range.padded 20 20 + , axisLine = AxisLine.rangeFrame Colors.gray + , ticks = + Ticks.custom <| + \data range_ -> + let + smallest = + Coordinate.smallestRange data range_ + + rangeLong = + range_.max - range_.min + + rangeSmall = + smallest.max - smallest.min + + diff = + 1 - (rangeLong - rangeSmall) / rangeLong + + amount = + round <| diff * toFloat pixels_ / 90 + in + List.map Tick.float <| Values.float (Values.around amount) smallest + } {-| -} full : Int -> String -> (data -> Float) -> Config data msg full pixels_ title_ variable_ = - custom - { title = Title.atAxisMax 0 0 title_ - , variable = Just << variable_ - , pixels = pixels_ - , range = Range.padded 20 20 - , axisLine = AxisLine.default - , ticks = - Ticks.custom <| \data range_ -> - let largest = Coordinate.largestRange data range_ - amount = pixels_ // 90 - in - List.map Tick.float <| Values.float (Values.around amount) largest - } + custom + { title = Title.atAxisMax 0 0 title_ + , variable = Just << variable_ + , pixels = pixels_ + , range = Range.padded 20 20 + , axisLine = AxisLine.default + , ticks = + Ticks.custom <| + \data range_ -> + let + largest = + Coordinate.largestRange data range_ + + amount = + pixels_ // 90 + in + List.map Tick.float <| Values.float (Values.around amount) largest + } {-| -} time : Time.Zone -> Int -> String -> (data -> Float) -> Config data msg time zone pixels_ title_ variable_ = - custom - { title = Title.atDataMax 0 0 title_ - , variable = Just << variable_ - , pixels = pixels_ - , range = Range.padded 20 20 - , axisLine = AxisLine.rangeFrame Colors.gray - , ticks = - Ticks.custom <| \data range_ -> - let smallest = Coordinate.smallestRange data range_ - rangeLong = range_.max - range_.min - rangeSmall = smallest.max - smallest.min - diff = 1 - (rangeLong - rangeSmall) / rangeLong - amount = round <| diff * toFloat pixels_ / 90 - in - List.map Tick.time <| Values.time zone amount smallest - } + custom + { title = Title.atDataMax 0 0 title_ + , variable = Just << variable_ + , pixels = pixels_ + , range = Range.padded 20 20 + , axisLine = AxisLine.rangeFrame Colors.gray + , ticks = + Ticks.custom <| + \data range_ -> + let + smallest = + Coordinate.smallestRange data range_ + + rangeLong = + range_.max - range_.min + + rangeSmall = + smallest.max - smallest.min + + diff = + 1 - (rangeLong - rangeSmall) / rangeLong + + amount = + round <| diff * toFloat pixels_ / 90 + in + List.map Tick.time <| Values.time zone amount smallest + } {-| -} -none : Int -> (data -> Float) -> Config data msg +none : Int -> (data -> Float) -> Config data msg none pixels_ variable_ = - custom - { title = Title.default "" - , variable = Just << variable_ - , pixels = pixels_ - , range = Range.padded 20 20 - , axisLine = AxisLine.none - , ticks = Ticks.custom <| \_ _ -> [] - } + custom + { title = Title.default "" + , variable = Just << variable_ + , pixels = pixels_ + , range = Range.padded 20 20 + , axisLine = AxisLine.none + , ticks = Ticks.custom <| \_ _ -> [] + } {-| -} picky : Int -> String -> (data -> Float) -> List Float -> Config data msg picky pixels_ title_ variable_ ticks_ = - custom - { title = Title.atAxisMax 0 0 title_ - , variable = Just << variable_ - , pixels = pixels_ - , range = Range.padded 20 20 - , axisLine = AxisLine.default - , ticks = Ticks.custom <| \_ _ -> List.map Tick.float ticks_ - } + custom + { title = Title.atAxisMax 0 0 title_ + , variable = Just << variable_ + , pixels = pixels_ + , range = Range.padded 20 20 + , axisLine = AxisLine.default + , ticks = Ticks.custom <| \_ _ -> List.map Tick.float ticks_ + } {-| -} custom : Properties data msg -> Config data msg custom = - Config + Config {-| -} variable : Config data msg -> (data -> Maybe Float) variable (Config config) = - config.variable + config.variable {-| -} pixels : Config data msg -> Float pixels (Config config) = - toFloat config.pixels + toFloat config.pixels {-| -} range : Config data msg -> Range.Config range (Config config) = - config.range + config.range {-| -} ticks : Config data msg -> Ticks.Config msg ticks (Config config) = - config.ticks + config.ticks @@ -162,11 +197,11 @@ ticks (Config config) = type alias ViewConfig msg = - { line : AxisLine.Properties msg - , ticks : List (Tick.Properties msg) - , intersection : Float - , title : Title.Properties msg - } + { line : AxisLine.Properties msg + , ticks : List (Tick.Properties msg) + , intersection : Float + , title : Title.Properties msg + } {-| -} @@ -174,26 +209,26 @@ viewHorizontal : Coordinate.System -> Intersection.Config -> Config data msg -> viewHorizontal system intersection (Config config) = let viewConfig = - { line = AxisLine.config config.axisLine system.xData system.x - , ticks = Ticks.ticks system.xData system.x config.ticks - , intersection = Intersection.getY intersection system - , title = Title.config config.title - } + { line = AxisLine.config config.axisLine system.xData system.x + , ticks = Ticks.ticks system.xData system.x config.ticks + , intersection = Intersection.getY intersection system + , title = Title.config config.title + } at x = - { x = x, y = viewConfig.intersection } + { x = x, y = viewConfig.intersection } viewAxisLine = - viewHorizontalAxisLine system viewConfig.intersection + viewHorizontalAxisLine system viewConfig.intersection viewTick tick = - viewHorizontalTick system (at tick.position) tick + viewHorizontalTick system (at tick.position) tick in g [ class "chart__axis--horizontal" ] - [ viewHorizontalTitle system at viewConfig - , viewAxisLine viewConfig.line - , g [ class "chart__ticks" ] (List.map viewTick viewConfig.ticks) - ] + [ viewHorizontalTitle system at viewConfig + , viewAxisLine viewConfig.line + , g [ class "chart__ticks" ] (List.map viewTick viewConfig.ticks) + ] {-| -} @@ -201,26 +236,26 @@ viewVertical : Coordinate.System -> Intersection.Config -> Config data msg -> Sv viewVertical system intersection (Config config) = let viewConfig = - { line = AxisLine.config config.axisLine system.yData system.y - , ticks = Ticks.ticks system.yData system.y config.ticks - , intersection = Intersection.getX intersection system - , title = Title.config config.title - } + { line = AxisLine.config config.axisLine system.yData system.y + , ticks = Ticks.ticks system.yData system.y config.ticks + , intersection = Intersection.getX intersection system + , title = Title.config config.title + } at y = - { x = viewConfig.intersection, y = y } + { x = viewConfig.intersection, y = y } viewAxisLine = - viewVerticalAxisLine system viewConfig.intersection + viewVerticalAxisLine system viewConfig.intersection viewTick tick = - viewVerticalTick system (at tick.position) tick + viewVerticalTick system (at tick.position) tick in g [ class "chart__axis--vertical" ] - [ viewVerticalTitle system at viewConfig - , viewAxisLine viewConfig.line - , g [ class "chart__ticks" ] (List.map viewTick viewConfig.ticks) - ] + [ viewVerticalTitle system at viewConfig + , viewAxisLine viewConfig.line + , g [ class "chart__ticks" ] (List.map viewTick viewConfig.ticks) + ] @@ -229,32 +264,42 @@ viewVertical system intersection (Config config) = viewHorizontalTitle : Coordinate.System -> (Float -> Data.Point) -> ViewConfig msg -> Svg msg viewHorizontalTitle system at { title } = - let position = at (title.position system.xData system.x) - ( xOffset, yOffset ) = title.offset - in - g [ class "chart__title" - , transform - [ move system position.x position.y - , offset (xOffset + 15) (yOffset + 5) + let + position = + at (title.position system.xData system.x) + + ( xOffset, yOffset ) = + title.offset + in + g + [ class "chart__title" + , transform + [ move system position.x position.y + , offset (xOffset + 15) (yOffset + 5) + ] + , anchorStyle Start ] - , anchorStyle Start - ] - [ title.view ] + [ title.view ] viewVerticalTitle : Coordinate.System -> (Float -> Data.Point) -> ViewConfig msg -> Svg msg viewVerticalTitle system at { title } = - let position = at (title.position system.yData system.y) - ( xOffset, yOffset ) = title.offset - in - g [ class "chart__title" - , transform - [ move system position.x position.y - , offset (xOffset + 2) (yOffset - 10) + let + position = + at (title.position system.yData system.y) + + ( xOffset, yOffset ) = + title.offset + in + g + [ class "chart__title" + , transform + [ move system position.x position.y + , offset (xOffset + 2) (yOffset - 10) + ] + , anchorStyle End ] - , anchorStyle End - ] - [ title.view ] + [ title.view ] @@ -263,21 +308,21 @@ viewVerticalTitle system at { title } = viewHorizontalAxisLine : Coordinate.System -> Float -> AxisLine.Properties msg -> Svg msg viewHorizontalAxisLine system axisPosition config = - horizontal system (attributesLine system config) axisPosition config.start config.end + horizontal system (attributesLine system config) axisPosition config.start config.end viewVerticalAxisLine : Coordinate.System -> Float -> AxisLine.Properties msg -> Svg msg viewVerticalAxisLine system axisPosition config = - vertical system (attributesLine system config) axisPosition config.start config.end + vertical system (attributesLine system config) axisPosition config.start config.end attributesLine : Coordinate.System -> AxisLine.Properties msg -> List (Svg.Attribute msg) attributesLine system { events, width, color } = - events ++ - [ strokeWidth (String.fromFloat width) - , stroke (Color.toCssString color) - , Svg.withinChartArea system - ] + events + ++ [ strokeWidth (String.fromFloat width) + , stroke (Color.toCssString color) + , Svg.withinChartArea system + ] @@ -286,48 +331,70 @@ attributesLine system { events, width, color } = viewHorizontalTick : Coordinate.System -> Data.Point -> Tick.Properties msg -> Svg msg viewHorizontalTick system ({ x, y } as point) tick = - g [ class "chart__tick" ] - [ xTick system (lengthOfTick tick) (attributesTick tick) y x - , viewMaybe tick.label (viewHorizontalLabel system tick point) - ] + g [ class "chart__tick" ] + [ xTick system (lengthOfTick tick) (attributesTick tick) y x + , viewMaybe tick.label (viewHorizontalLabel system tick point) + ] viewVerticalTick : Coordinate.System -> Data.Point -> Tick.Properties msg -> Svg msg viewVerticalTick system ({ x, y } as point) tick = - g [ class "chart__tick" ] - [ yTick system (lengthOfTick tick) (attributesTick tick) x y - , viewMaybe tick.label (viewVerticalLabel system tick point) - ] + g [ class "chart__tick" ] + [ yTick system (lengthOfTick tick) (attributesTick tick) x y + , viewMaybe tick.label (viewVerticalLabel system tick point) + ] lengthOfTick : Tick.Properties msg -> Float lengthOfTick { length, direction } = - if Internal.Axis.Tick.isPositive direction then -length else length + if Internal.Axis.Tick.isPositive direction then + -length + + else + length attributesTick : Tick.Properties msg -> List (Svg.Attribute msg) attributesTick { width, color } = - [ strokeWidth (String.fromFloat width), stroke (Color.toCssString color) ] + [ strokeWidth (String.fromFloat width), stroke (Color.toCssString color) ] viewHorizontalLabel : Coordinate.System -> Tick.Properties msg -> Data.Point -> Svg msg -> Svg msg viewHorizontalLabel system { direction, length } position view = - let - yOffset = if Internal.Axis.Tick.isPositive direction then -5 - length else 15 + length - in - g [ transform [ move system position.x position.y, offset 0 yOffset ] - , anchorStyle Middle - ] - [ view ] + let + yOffset = + if Internal.Axis.Tick.isPositive direction then + -5 - length + + else + 15 + length + in + g + [ transform [ move system position.x position.y, offset 0 yOffset ] + , anchorStyle Middle + ] + [ view ] viewVerticalLabel : Coordinate.System -> Tick.Properties msg -> Data.Point -> Svg msg -> Svg msg viewVerticalLabel system { direction, length } position view = - let - anchor = if Internal.Axis.Tick.isPositive direction then Start else End - xOffset = if Internal.Axis.Tick.isPositive direction then 5 + length else -5 - length - in - g [ transform [ move system position.x position.y, offset xOffset 5 ] - , anchorStyle anchor - ] - [ view ] + let + anchor = + if Internal.Axis.Tick.isPositive direction then + Start + + else + End + + xOffset = + if Internal.Axis.Tick.isPositive direction then + 5 + length + + else + -5 - length + in + g + [ transform [ move system position.x position.y, offset xOffset 5 ] + , anchorStyle anchor + ] + [ view ] diff --git a/src/Internal/Axis/Intersection.elm b/src/Internal/Axis/Intersection.elm index 293aae3..07dc8bc 100644 --- a/src/Internal/Axis/Intersection.elm +++ b/src/Internal/Axis/Intersection.elm @@ -1,43 +1,48 @@ module Internal.Axis.Intersection exposing - ( Config - , default, atOrigin, at, custom - -- INTERNAL - , getX, getY - ) + ( Config + , at + , atOrigin + , custom + -- INTERNAL + + , default + , getX + , getY + ) import Internal.Coordinate as Coordinate import Internal.Data as Data - {-| -} -type Config = - Config (Coordinate.System -> Data.Point) +type Config + = Config (Coordinate.System -> Data.Point) {-| -} default : Config default = - custom .min .min + custom .min .min {-| -} atOrigin : Config atOrigin = - custom towardsZero towardsZero + custom towardsZero towardsZero {-| -} at : Float -> Float -> Config at x y = - custom (always x) (always y) + custom (always x) (always y) {-| -} custom : (Coordinate.Range -> Float) -> (Coordinate.Range -> Float) -> Config custom toX toY = - Config <| \{ x, y } -> - Data.Point (toX x) (toY y) + Config <| + \{ x, y } -> + Data.Point (toX x) (toY y) @@ -46,7 +51,7 @@ custom toX toY = towardsZero : Coordinate.Range -> Float towardsZero { max, min } = - clamp min max 0 + clamp min max 0 @@ -56,10 +61,10 @@ towardsZero { max, min } = {-| -} getX : Config -> Coordinate.System -> Float getX (Config func) = - .x << func + .x << func {-| -} getY : Config -> Coordinate.System -> Float getY (Config func) = - .y << func + .y << func diff --git a/src/Internal/Axis/Line.elm b/src/Internal/Axis/Line.elm index 63e6abb..5387976 100644 --- a/src/Internal/Axis/Line.elm +++ b/src/Internal/Axis/Line.elm @@ -1,59 +1,63 @@ -module Internal.Axis.Line exposing (Config, none, default, full, rangeFrame, Properties, custom, config) +module Internal.Axis.Line exposing (Config, Properties, config, custom, default, full, none, rangeFrame) - -import Svg exposing (Attribute) -import LineChart.Colors as Colors -import Internal.Coordinate as Coordinate import Color - +import Internal.Coordinate as Coordinate +import LineChart.Colors as Colors +import Svg exposing (Attribute) {-| -} -type Config msg = - Config (Coordinate.Range -> Coordinate.Range -> Properties msg) +type Config msg + = Config (Coordinate.Range -> Coordinate.Range -> Properties msg) {-| -} default : Config msg default = - full Colors.gray + full Colors.gray {-| -} none : Config msg none = - custom <| \_ {min, max} -> - { color = Colors.transparent - , width = 0 - , events = [] - , start = min - , end = max - } + custom <| + \_ { min, max } -> + { color = Colors.transparent + , width = 0 + , events = [] + , start = min + , end = max + } {-| -} full : Color.Color -> Config msg full color = - custom <| \data range -> - { color = color - , width = 1 - , events = [] - , start = range.min - , end = range.max - } + custom <| + \data range -> + { color = color + , width = 1 + , events = [] + , start = range.min + , end = range.max + } {-| -} rangeFrame : Color.Color -> Config msg rangeFrame color = - custom <| \data range -> - let smallest = Coordinate.smallestRange data range in - { color = color - , width = 1 - , events = [] - , start = smallest.min - , end = smallest.max - } + custom <| + \data range -> + let + smallest = + Coordinate.smallestRange data range + in + { color = color + , width = 1 + , events = [] + , start = smallest.min + , end = smallest.max + } @@ -62,18 +66,18 @@ rangeFrame color = {-| -} type alias Properties msg = - { color : Color.Color - , width : Float - , events : List (Attribute msg) - , start : Float - , end : Float - } + { color : Color.Color + , width : Float + , events : List (Attribute msg) + , start : Float + , end : Float + } {-| -} custom : (Coordinate.Range -> Coordinate.Range -> Properties msg) -> Config msg custom = - Config + Config @@ -83,4 +87,4 @@ custom = {-| -} config : Config msg -> Coordinate.Range -> Coordinate.Range -> Properties msg config (Config config_) = - config_ + config_ diff --git a/src/Internal/Axis/Range.elm b/src/Internal/Axis/Range.elm index bf97bfb..234294f 100644 --- a/src/Internal/Axis/Range.elm +++ b/src/Internal/Axis/Range.elm @@ -1,38 +1,37 @@ -module Internal.Axis.Range exposing (Config, default, padded, window, custom, applyX, applyY) +module Internal.Axis.Range exposing (Config, applyX, applyY, custom, default, padded, window) import LineChart.Coordinate as Coordinate - {-| -} type Config - = Padded Float Float - | Window Float Float - | Custom (Coordinate.Range -> Coordinate.Range) + = Padded Float Float + | Window Float Float + | Custom (Coordinate.Range -> Coordinate.Range) {-| -} default : Config default = - padded 0 0 + padded 0 0 {-| -} padded : Float -> Float -> Config padded = - Padded + Padded {-| -} window : Float -> Float -> Config window = - Window + Window {-| -} custom : (Coordinate.Range -> Coordinate.Range) -> Config custom = - Custom + Custom @@ -42,32 +41,52 @@ custom = {-| -} applyX : Config -> Coordinate.System -> Coordinate.Range applyX range system = - case range of - Padded padMin padMax -> - let - { frame } = system - { size } = frame - system_ = { system | frame = { frame | size = { size | width = size.width - padMin - padMax |> Basics.max 1 } } } - scale = Coordinate.scaleDataX system_ - in - Coordinate.Range (system.x.min - scale padMin) (system.x.max + scale padMax) + case range of + Padded padMin padMax -> + let + { frame } = + system + + { size } = + frame + + system_ = + { system | frame = { frame | size = { size | width = size.width - padMin - padMax |> Basics.max 1 } } } + + scale = + Coordinate.scaleDataX system_ + in + Coordinate.Range (system.x.min - scale padMin) (system.x.max + scale padMax) + + Window min max -> + Coordinate.Range min max - Window min max -> Coordinate.Range min max - Custom toRange -> toRange system.x + Custom toRange -> + toRange system.x {-| -} applyY : Config -> Coordinate.System -> Coordinate.Range applyY range system = - case range of - Padded padMin padMax -> - let - { frame } = system - { size } = frame - system_ = { system | frame = { frame | size = { size | height = size.height - padMin - padMax |> Basics.max 1 } } } - scale = Coordinate.scaleDataY system_ - in - Coordinate.Range (system.y.min - scale padMin) (system.y.max + scale padMax) - - Window min max -> Coordinate.Range min max - Custom toRange -> toRange system.y + case range of + Padded padMin padMax -> + let + { frame } = + system + + { size } = + frame + + system_ = + { system | frame = { frame | size = { size | height = size.height - padMin - padMax |> Basics.max 1 } } } + + scale = + Coordinate.scaleDataY system_ + in + Coordinate.Range (system.y.min - scale padMin) (system.y.max + scale padMax) + + Window min max -> + Coordinate.Range min max + + Custom toRange -> + toRange system.y diff --git a/src/Internal/Axis/Tick.elm b/src/Internal/Axis/Tick.elm index a18f9eb..2cfe73a 100644 --- a/src/Internal/Axis/Tick.elm +++ b/src/Internal/Axis/Tick.elm @@ -1,33 +1,41 @@ module Internal.Axis.Tick exposing - ( Config, Properties, Direction(..), isPositive - , custom, int, float, long, gridless, labelless, opposite - , properties - ) + ( Config + , Direction(..) + , Properties + , custom + , float + , gridless + , int + , isPositive + , labelless + , long + , opposite + , properties + ) {-| -} -import Svg exposing (Svg, Attribute) +import Color import Internal.Svg as Svg import LineChart.Colors as Colors -import Color - +import Svg exposing (Attribute, Svg) {-| -} -type Config msg = - Config (Properties msg) +type Config msg + = Config (Properties msg) {-| -} type alias Properties msg = - { position : Float - , color : Color.Color - , width : Float - , length : Float - , grid : Bool - , direction : Direction - , label : Maybe (Svg msg) - } + { position : Float + , color : Color.Color + , width : Float + , length : Float + , grid : Bool + , direction : Direction + , label : Maybe (Svg msg) + } @@ -36,8 +44,8 @@ type alias Properties msg = {-| -} type Direction - = Negative - | Positive + = Negative + | Positive @@ -46,9 +54,12 @@ type Direction isPositive : Direction -> Bool isPositive direction = - case direction of - Positive -> True - Negative -> False + case direction of + Positive -> + True + + Negative -> + False @@ -58,91 +69,91 @@ isPositive direction = {-| -} int : Int -> Config msg int n = - custom - { position = toFloat n - , color = Colors.gray - , width = 1 - , length = 5 - , grid = True - , direction = Negative - , label = Just <| Svg.label "inherit" (String.fromInt n) - } + custom + { position = toFloat n + , color = Colors.gray + , width = 1 + , length = 5 + , grid = True + , direction = Negative + , label = Just <| Svg.label "inherit" (String.fromInt n) + } {-| -} float : Float -> Config msg float n = - custom - { position = n - , color = Colors.gray - , width = 1 - , length = 5 - , grid = True - , direction = Negative - , label = Just <| Svg.label "inherit" (String.fromFloat n) - } + custom + { position = n + , color = Colors.gray + , width = 1 + , length = 5 + , grid = True + , direction = Negative + , label = Just <| Svg.label "inherit" (String.fromFloat n) + } {-| -} gridless : Float -> Config msg gridless n = - custom - { position = n - , color = Colors.gray - , width = 1 - , length = 5 - , grid = False - , direction = Negative - , label = Just <| Svg.label "inherit" (String.fromFloat n) - } + custom + { position = n + , color = Colors.gray + , width = 1 + , length = 5 + , grid = False + , direction = Negative + , label = Just <| Svg.label "inherit" (String.fromFloat n) + } {-| -} labelless : Float -> Config msg labelless n = - custom - { position = n - , color = Colors.gray - , width = 1 - , length = 5 - , grid = True - , direction = Negative - , label = Nothing - } + custom + { position = n + , color = Colors.gray + , width = 1 + , length = 5 + , grid = True + , direction = Negative + , label = Nothing + } {-| -} long : Float -> Config msg long n = - custom - { position = n - , color = Colors.gray - , width = 1 - , length = 20 - , grid = True - , direction = Negative - , label = Just <| Svg.label "inherit" (String.fromFloat n) - } + custom + { position = n + , color = Colors.gray + , width = 1 + , length = 20 + , grid = True + , direction = Negative + , label = Just <| Svg.label "inherit" (String.fromFloat n) + } {-| -} opposite : Float -> Config msg opposite n = - custom - { position = n - , color = Colors.gray - , width = 1 - , length = 5 - , grid = True - , direction = Positive - , label = Just <| Svg.label "inherit" (String.fromFloat n) - } + custom + { position = n + , color = Colors.gray + , width = 1 + , length = 5 + , grid = True + , direction = Positive + , label = Just <| Svg.label "inherit" (String.fromFloat n) + } {-| -} custom : Properties msg -> Config msg custom = - Config + Config @@ -152,4 +163,4 @@ custom = {-| -} properties : Config msg -> Properties msg properties (Config properties_) = - properties_ + properties_ diff --git a/src/Internal/Axis/Ticks.elm b/src/Internal/Axis/Ticks.elm index 3499cdd..1ae0461 100644 --- a/src/Internal/Axis/Ticks.elm +++ b/src/Internal/Axis/Ticks.elm @@ -1,26 +1,31 @@ module Internal.Axis.Ticks exposing - ( Config - , int, time, float - , intCustom, timeCustom, floatCustom, custom - -- INTERNAL - , ticks - ) + ( Config + , custom + -- INTERNAL + + , float + , floatCustom + , int + , intCustom + , ticks + , time + , timeCustom + ) - - -import LineChart.Axis.Tick as Tick import Internal.Axis.Tick -import Internal.Coordinate as Coordinate exposing (..) import Internal.Axis.Values as Values +import Internal.Coordinate as Coordinate exposing (..) +import LineChart.Axis.Tick as Tick import Time + -- AXIS {-| -} type Config msg - = Config (Coordinate.Range -> Coordinate.Range -> List (Tick.Config msg)) + = Config (Coordinate.Range -> Coordinate.Range -> List (Tick.Config msg)) @@ -30,19 +35,19 @@ type Config msg {-| -} int : Int -> Config msg int amount = - intCustom amount Tick.int + intCustom amount Tick.int {-| -} float : Int -> Config msg float amount = - floatCustom amount Tick.float + floatCustom amount Tick.float {-| -} time : Time.Zone -> Int -> Config msg time zone amount = - timeCustom zone amount Tick.time + timeCustom zone amount Tick.time @@ -52,22 +57,25 @@ time zone amount = {-| -} intCustom : Int -> (Int -> Tick.Config msg) -> Config msg intCustom amount tick = - custom <| \data range -> - List.map tick <| Values.int (Values.around amount) (Coordinate.smallestRange data range) + custom <| + \data range -> + List.map tick <| Values.int (Values.around amount) (Coordinate.smallestRange data range) {-| -} floatCustom : Int -> (Float -> Tick.Config msg) -> Config msg floatCustom amount tick = - custom <| \data range -> - List.map tick <| Values.float (Values.around amount) (Coordinate.smallestRange data range) + custom <| + \data range -> + List.map tick <| Values.float (Values.around amount) (Coordinate.smallestRange data range) {-| -} timeCustom : Time.Zone -> Int -> (Tick.Time -> Tick.Config msg) -> Config msg timeCustom zone amount tick = - custom <| \data range -> - List.map tick <| Values.time zone amount (Coordinate.smallestRange data range) + custom <| + \data range -> + List.map tick <| Values.time zone amount (Coordinate.smallestRange data range) @@ -77,7 +85,7 @@ timeCustom zone amount tick = {-| -} custom : (Coordinate.Range -> Coordinate.Range -> List (Tick.Config msg)) -> Config msg custom = - Config + Config @@ -86,4 +94,4 @@ custom = ticks : Coordinate.Range -> Coordinate.Range -> Config msg -> List (Tick.Properties msg) ticks dataRange range (Config values) = - List.map Internal.Axis.Tick.properties <| values dataRange range + List.map Internal.Axis.Tick.properties <| values dataRange range diff --git a/src/Internal/Axis/Title.elm b/src/Internal/Axis/Title.elm index b86af93..7c14a8a 100644 --- a/src/Internal/Axis/Title.elm +++ b/src/Internal/Axis/Title.elm @@ -1,58 +1,63 @@ -module Internal.Axis.Title exposing (Config, Properties, default, atAxisMax, atDataMax, atPosition, custom, config) +module Internal.Axis.Title exposing (Config, Properties, atAxisMax, atDataMax, atPosition, config, custom, default) -import Svg exposing (Svg) import Internal.Coordinate as Coordinate import Internal.Svg as Svg - +import Svg exposing (Svg) {-| -} -type Config msg = - Config (Properties msg) +type Config msg + = Config (Properties msg) {-| -} type alias Properties msg = - { view : Svg msg - , position : Coordinate.Range -> Coordinate.Range -> Float - , offset : ( Float, Float ) - } + { view : Svg msg + , position : Coordinate.Range -> Coordinate.Range -> Float + , offset : ( Float, Float ) + } {-| -} default : String -> Config msg default = - atAxisMax 0 0 + atAxisMax 0 0 {-| -} atAxisMax : Float -> Float -> String -> Config msg atAxisMax = - let position data range = range.max in - atPosition position + let + position data range = + range.max + in + atPosition position {-| -} atDataMax : Float -> Float -> String -> Config msg atDataMax = - let position data range = Basics.min data.max range.max in - atPosition position + let + position data range = + Basics.min data.max range.max + in + atPosition position {-| -} atPosition : (Coordinate.Range -> Coordinate.Range -> Float) -> Float -> Float -> String -> Config msg atPosition position x y = - custom position x y << Svg.label "inherit" + custom position x y << Svg.label "inherit" {-| -} custom : (Coordinate.Range -> Coordinate.Range -> Float) -> Float -> Float -> Svg msg -> Config msg custom position x y title = - Config - { view = title - , position = position - , offset = ( x, y ) - } + Config + { view = title + , position = position + , offset = ( x, y ) + } @@ -62,4 +67,4 @@ custom position x y title = {-| -} config : Config msg -> Properties msg config (Config title) = - title + title diff --git a/src/Internal/Axis/Values.elm b/src/Internal/Axis/Values.elm index adfbad3..c4e5916 100644 --- a/src/Internal/Axis/Values.elm +++ b/src/Internal/Axis/Values.elm @@ -1,31 +1,29 @@ -module Internal.Axis.Values exposing (Amount, around, exactly, int, time, float, custom) +module Internal.Axis.Values exposing (Amount, around, custom, exactly, float, int, time) - -import Round -import LineChart.Axis.Tick exposing (Time, Unit(..), Interval) import Internal.Axis.Values.Time as Time -import Internal.Utils as Utils import Internal.Coordinate as Coordinate +import Internal.Utils as Utils +import LineChart.Axis.Tick exposing (Interval, Time, Unit(..)) +import Round import Time {-| -} type Amount - = Exactly Int - | Around Int - + = Exactly Int + | Around Int {-| -} around : Int -> Amount around = - Around + Around {-| -} exactly : Int -> Amount exactly = - Exactly + Exactly @@ -35,17 +33,23 @@ exactly = {-| -} int : Amount -> Coordinate.Range -> List Int int amount = - case amount of - Exactly amount_ -> List.map round << values False True amount_ - Around amount_ -> List.map round << values False False amount_ + case amount of + Exactly amount_ -> + List.map round << values False True amount_ + + Around amount_ -> + List.map round << values False False amount_ {-| -} float : Amount -> Coordinate.Range -> List Float float amount = - case amount of - Exactly amount_ -> values True True amount_ - Around amount_ -> values True False amount_ + case amount of + Exactly amount_ -> + values True True amount_ + + Around amount_ -> + values True False amount_ {-| -} @@ -53,10 +57,10 @@ custom : Float -> Float -> Coordinate.Range -> List Float custom intersection interval range = let offset value = - interval * toFloat (floor (value / interval)) + interval * toFloat (floor (value / interval)) beginning = - intersection - offset (intersection - range.min) + intersection - offset (intersection - range.min) in positions range beginning interval 0 [] @@ -64,7 +68,7 @@ custom intersection interval range = {-| -} time : Time.Zone -> Int -> Coordinate.Range -> List Time time = - Time.values + Time.values @@ -74,129 +78,161 @@ time = values : Bool -> Bool -> Int -> Coordinate.Range -> List Float values allowDecimals exact amountRough range = let - amountRoughSafe = - if amountRough == 0 then 1 else amountRough + amountRoughSafe = + if amountRough == 0 then + 1 + + else + amountRough + + intervalRough = + (range.max - range.min) / toFloat amountRough - intervalRough = - (range.max - range.min) / toFloat amountRough + interval = + getInterval intervalRough allowDecimals exact - interval = - getInterval intervalRough allowDecimals exact + intervalSafe = + if interval == 0 then + 1 - intervalSafe = - if interval == 0 then 1 else interval + else + interval - beginning = - getBeginning range.min intervalSafe + beginning = + getBeginning range.min intervalSafe in positions range beginning intervalSafe 0 [] getBeginning : Float -> Float -> Float getBeginning min interval = - let - multiple = - min / interval -- TODO figure out precision - in - if multiple == toFloat (round multiple) - then min - else ceilingTo interval min + let + multiple = + min / interval + + -- TODO figure out precision + in + if multiple == toFloat (round multiple) then + min + + else + ceilingTo interval min positions : Coordinate.Range -> Float -> Float -> Float -> List Float -> List Float positions range beginning interval m acc = - let next = correctFloat (getPrecision interval) (beginning + (m * interval)) in - if next > range.max then acc else positions range beginning interval (m + 1) (acc ++ [ next ]) + let + next = + correctFloat (getPrecision interval) (beginning + (m * interval)) + in + if next > range.max then + acc + + else + positions range beginning interval (m + 1) (acc ++ [ next ]) getInterval : Float -> Bool -> Bool -> Float getInterval intervalRaw allowDecimals hasTickAmount = - let - magnitude = - Utils.magnitude intervalRaw + let + magnitude = + Utils.magnitude intervalRaw + + normalized = + intervalRaw / magnitude - normalized = - intervalRaw / magnitude + multiples = + getMultiples magnitude allowDecimals hasTickAmount - multiples = - getMultiples magnitude allowDecimals hasTickAmount + findMultiple multiples_ = + case multiples_ of + m1 :: m2 :: rest -> + if normalized <= (m1 + m2) / 2 then + m1 - findMultiple multiples_ = - case multiples_ of - m1 :: m2 :: rest -> - if normalized <= (m1 + m2) / 2 - then m1 else findMultiple (m2 :: rest) + else + findMultiple (m2 :: rest) - m1 :: rest -> - if normalized <= m1 - then m1 else findMultiple rest + m1 :: rest -> + if normalized <= m1 then + m1 - [] -> - 1 + else + findMultiple rest - findMultipleExact multiples_ = - case multiples_ of - m1 :: rest -> - if m1 * magnitude >= intervalRaw - then m1 else findMultipleExact rest + [] -> + 1 - [] -> - 1 + findMultipleExact multiples_ = + case multiples_ of + m1 :: rest -> + if m1 * magnitude >= intervalRaw then + m1 - multiple = - if hasTickAmount then - findMultipleExact multiples - else - findMultiple multiples + else + findMultipleExact rest - precision = - getPrecision magnitude + getPrecision multiple - in - correctFloat precision (multiple * magnitude) + [] -> + 1 + + multiple = + if hasTickAmount then + findMultipleExact multiples + + else + findMultiple multiples + + precision = + getPrecision magnitude + getPrecision multiple + in + correctFloat precision (multiple * magnitude) getMultiples : Float -> Bool -> Bool -> List Float getMultiples magnitude allowDecimals hasTickAmount = - let - defaults = - if hasTickAmount then - [ 1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10 ] - else - [ 1, 2, 2.5, 5, 10 ] - in + let + defaults = + if hasTickAmount then + [ 1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10 ] + + else + [ 1, 2, 2.5, 5, 10 ] + in if allowDecimals then - defaults - else - if magnitude == 1 then + defaults + + else if magnitude == 1 then List.filter (\n -> toFloat (round n) == n) defaults - else if magnitude <= 0.1 then + + else if magnitude <= 0.1 then [ 1 / magnitude ] - else + + else defaults {-| -} correctFloat : Int -> Float -> Float correctFloat prec = - Round.round prec >> String.toFloat >> Maybe.withDefault 0 + Round.round prec >> String.toFloat >> Maybe.withDefault 0 {-| -} getPrecision : Float -> Int getPrecision number = - case String.split "e" (String.fromFloat number) of - [ before, after ] -> - String.toInt after |> Maybe.withDefault 0 |> abs - - _ -> - case String.split "." (String.fromFloat number) of + case String.split "e" (String.fromFloat number) of [ before, after ] -> - String.length after + String.toInt after |> Maybe.withDefault 0 |> abs _ -> - 0 + case String.split "." (String.fromFloat number) of + [ before, after ] -> + String.length after + + _ -> + 0 ceilingTo : Float -> Float -> Float ceilingTo prec number = - prec * toFloat (ceiling (number / prec)) + prec * toFloat (ceiling (number / prec)) diff --git a/src/Internal/Axis/Values/Time.elm b/src/Internal/Axis/Values/Time.elm index 80325ee..a447ac1 100644 --- a/src/Internal/Axis/Values/Time.elm +++ b/src/Internal/Axis/Values/Time.elm @@ -4,9 +4,9 @@ module Internal.Axis.Values.Time exposing (values) import Internal.Coordinate as Coordinate import Internal.Utils as Utils +import LineChart.Axis.Tick exposing (Interval, Time, Unit(..)) import Time import Time.Extra -import LineChart.Axis.Tick exposing (Time, Unit(..), Interval) @@ -16,52 +16,63 @@ import LineChart.Axis.Tick exposing (Time, Unit(..), Interval) {-| -} values : Time.Zone -> Int -> Coordinate.Range -> List Time values zone amountRough range = - let - intervalRough = - (range.max - range.min) / toFloat amountRough + let + intervalRough = + (range.max - range.min) / toFloat amountRough - unit = - findBestUnit intervalRough all + unit = + findBestUnit intervalRough all - multiple = - findBestMultiple intervalRough unit + multiple = + findBestMultiple intervalRough unit - interval = - toMs unit * toFloat multiple + interval = + toMs unit * toFloat multiple - beginning = - beginAt zone (floatToPosix range.min) unit multiple + beginning = + beginAt zone (floatToPosix range.min) unit multiple - toPositions acc i = - let next_ = next zone beginning unit (i * multiple) in - if posixsToFloat next_ > range.max then acc else toPositions (acc ++ [ next_ ]) (i + 1) + toPositions acc i = + let + next_ = + next zone beginning unit (i * multiple) + in + if posixsToFloat next_ > range.max then + acc - toTimes values_ unitChange acc = - case values_ of - value :: next_ :: rest -> - let - isFirst = List.isEmpty acc - newAcc = toTime unitChange value isFirst :: acc - newUnitChange = getUnitChange unit zone value next_ - in - toTimes (next_ :: rest) newUnitChange newAcc + else + toPositions (acc ++ [ next_ ]) (i + 1) - [ value ] -> - toTime unitChange value (List.isEmpty acc) :: acc + toTimes values_ unitChange acc = + case values_ of + value :: next_ :: rest -> + let + isFirst = + List.isEmpty acc - [] -> - acc + newAcc = + toTime unitChange value isFirst :: acc - toTime unitChange value isFirst = - { change = unitChange - , interval = Interval unit multiple - , timestamp = value - , isFirst = isFirst - , zone = zone - } + newUnitChange = + getUnitChange unit zone value next_ + in + toTimes (next_ :: rest) newUnitChange newAcc - in - toTimes (toPositions [] 0) Nothing [] + [ value ] -> + toTime unitChange value (List.isEmpty acc) :: acc + + [] -> + acc + + toTime unitChange value isFirst = + { change = unitChange + , interval = Interval unit multiple + , timestamp = value + , isFirst = isFirst + , zone = zone + } + in + toTimes (toPositions [] 0) Nothing [] @@ -72,77 +83,94 @@ values zone amountRough range = -} findBestUnit : Float -> List Unit -> Unit findBestUnit interval units_ = - let - findBest_ units__ u0 = - case units__ of - u1 :: u2 :: rest -> - if interval <= middleOfNext u1 u2 - then u1 - else findBest_ (u2 :: rest) u1 + let + findBest_ units__ u0 = + case units__ of + u1 :: u2 :: rest -> + if interval <= middleOfNext u1 u2 then + u1 + + else + findBest_ (u2 :: rest) u1 + + u :: _ -> + u - u :: _ -> u - [] -> Year + [] -> + Year - middleOfNext u1 u2 = - (toMs u1 * highestMultiple (multiples u1) + toMs u2) / 2 - in - findBest_ units_ Year + middleOfNext u1 u2 = + (toMs u1 * highestMultiple (multiples u1) + toMs u2) / 2 + in + findBest_ units_ Year {-| Finds the best fit multiple given the interval and it's best fit unit. -} findBestMultiple : Float -> Unit -> Int findBestMultiple interval unit = - let - findBest_ multiples_ = - case multiples_ of - m1 :: m2 :: rest -> - if interval <= (middleOfNext m1 m2) - then m1 - else findBest_ (m2 :: rest) + let + findBest_ multiples_ = + case multiples_ of + m1 :: m2 :: rest -> + if interval <= middleOfNext m1 m2 then + m1 - m :: _ -> m - [] -> 1 + else + findBest_ (m2 :: rest) - middleOfNext m1 m2 = - (toFloat m1 * toMs unit + toFloat m2 * toMs unit) / 2 - in - findBest_ (multiples unit) + m :: _ -> + m + + [] -> + 1 + + middleOfNext m1 m2 = + (toFloat m1 * toMs unit + toFloat m2 * toMs unit) / 2 + in + findBest_ (multiples unit) {-| Find the best position for the first tick. -} beginAt : Time.Zone -> Time.Posix -> Unit -> Int -> Time.Posix beginAt zone min unit multiple = - min - |> Time.Extra.add (toExtraUnit unit) multiple zone - |> Time.Extra.ceiling (toExtraUnit unit) zone + min + |> Time.Extra.add (toExtraUnit unit) multiple zone + |> Time.Extra.ceiling (toExtraUnit unit) zone next : Time.Zone -> Time.Posix -> Unit -> Int -> Time.Posix next zone timestamp unit multiple = - Time.Extra.add (toExtraUnit unit) multiple zone timestamp + Time.Extra.add (toExtraUnit unit) multiple zone timestamp getUnitChange : Unit -> Time.Zone -> Time.Posix -> Time.Posix -> Maybe Unit getUnitChange interval zone value next_ = - let - equalBy unit = - Time.Extra.diff (toExtraUnit unit) zone - (Time.Extra.floor (toExtraUnit unit) zone value) - (Time.Extra.floor (toExtraUnit unit) zone next_) == 0 + let + equalBy unit = + Time.Extra.diff (toExtraUnit unit) + zone + (Time.Extra.floor (toExtraUnit unit) zone value) + (Time.Extra.floor (toExtraUnit unit) zone next_) + == 0 + + unitChange_ units = + case units of + unit :: rest -> + if toMs unit <= toMs interval then + unitChange_ rest - unitChange_ units = - case units of - unit :: rest -> - if toMs unit <= toMs interval then unitChange_ rest - else if not (equalBy unit) then Just unit - else Nothing + else if not (equalBy unit) then + Just unit - [] -> - Nothing - in - unitChange_ all + else + Nothing + + [] -> + Nothing + in + unitChange_ all @@ -151,70 +179,109 @@ getUnitChange interval zone value next_ = all : List Unit all = - [ Millisecond, Second, Minute, Hour, Day, Month, Year ] + [ Millisecond, Second, Minute, Hour, Day, Month, Year ] allReversed : List Unit allReversed = - List.reverse all + List.reverse all toMs : Unit -> Float toMs unit = - case unit of - Millisecond -> 1 - Second -> 1000 - Minute -> 60000 - Hour -> 3600000 - Day -> 24 * 3600000 - Month -> 28 * 24 * 3600000 - Year -> 364 * 24 * 3600000 + case unit of + Millisecond -> + 1 + + Second -> + 1000 + + Minute -> + 60000 + + Hour -> + 3600000 + + Day -> + 24 * 3600000 + + Month -> + 28 * 24 * 3600000 + + Year -> + 364 * 24 * 3600000 multiples : Unit -> List Int multiples unit = - case unit of - Millisecond -> [ 1, 2, 5, 10, 20, 25, 50, 100, 200, 500 ] - Second -> [ 1, 2, 5, 10, 15, 30 ] - Minute -> [ 1, 2, 5, 10, 15, 30 ] - Hour -> [ 1, 2, 3, 4, 6, 8, 12 ] - Day -> [ 1, 2 ] - Month -> [ 1, 2, 3, 4, 6 ] - Year -> [ 1, 2, 5, 10, 20, 25, 50, 100, 200, 500, 1000, 10000 ] + case unit of + Millisecond -> + [ 1, 2, 5, 10, 20, 25, 50, 100, 200, 500 ] + + Second -> + [ 1, 2, 5, 10, 15, 30 ] + + Minute -> + [ 1, 2, 5, 10, 15, 30 ] + + Hour -> + [ 1, 2, 3, 4, 6, 8, 12 ] + + Day -> + [ 1, 2 ] + + Month -> + [ 1, 2, 3, 4, 6 ] + + Year -> + [ 1, 2, 5, 10, 20, 25, 50, 100, 200, 500, 1000, 10000 ] toExtraUnit : Unit -> Time.Extra.Interval toExtraUnit unit = - case unit of - Millisecond -> Time.Extra.Millisecond - Second -> Time.Extra.Second - Minute -> Time.Extra.Minute - Hour -> Time.Extra.Hour - Day -> Time.Extra.Day - Month -> Time.Extra.Month - Year -> Time.Extra.Year + case unit of + Millisecond -> + Time.Extra.Millisecond + + Second -> + Time.Extra.Second + + Minute -> + Time.Extra.Minute + + Hour -> + Time.Extra.Hour + + Day -> + Time.Extra.Day + + Month -> + Time.Extra.Month + + Year -> + Time.Extra.Year highestMultiple : List Int -> Float highestMultiple = - List.reverse >> List.head >> Maybe.withDefault 0 >> toFloat + List.reverse >> List.head >> Maybe.withDefault 0 >> toFloat magnitude : Float -> Unit -> Float magnitude interval unit = - case unit of - Year -> - max 1 (Utils.magnitude interval) + case unit of + Year -> + max 1 (Utils.magnitude interval) - _ -> - 1 + _ -> + 1 floatToPosix : Float -> Time.Posix floatToPosix ms = - Time.millisToPosix (Basics.round ms) + Time.millisToPosix (Basics.round ms) posixsToFloat : Time.Posix -> Float posixsToFloat posix = - Basics.toFloat (Time.posixToMillis posix) + Basics.toFloat (Time.posixToMillis posix) diff --git a/src/Internal/Container.elm b/src/Internal/Container.elm index e31fa7d..12970fa 100644 --- a/src/Internal/Container.elm +++ b/src/Internal/Container.elm @@ -1,106 +1,114 @@ module Internal.Container exposing - ( Config, Properties, Size, Margin - , default, spaced, styled, responsive, custom - , relative, static - , properties, sizeStyles - ) + ( Config + , Margin + , Properties + , Size + , custom + , default + , properties + , relative + , responsive + , sizeStyles + , spaced + , static + , styled + ) {-| -} -import Svg import Html import Html.Attributes - +import Svg {-| -} -type Config msg = - Config (Properties msg) +type Config msg + = Config (Properties msg) {-| -} type alias Properties msg = - { attributesHtml : List (Html.Attribute msg) - , attributesSvg : List (Svg.Attribute msg) - , size : Size - , margin : Margin - , id : String - } + { attributesHtml : List (Html.Attribute msg) + , attributesSvg : List (Svg.Attribute msg) + , size : Size + , margin : Margin + , id : String + } {-| -} type Size - = Static - | Relative + = Static + | Relative {-| -} type alias Margin = - { top : Float - , right : Float - , bottom : Float - , left : Float - } + { top : Float + , right : Float + , bottom : Float + , left : Float + } {-| -} default : String -> Config msg default id = - styled id [] + styled id [] {-| -} spaced : String -> Float -> Float -> Float -> Float -> Config msg spaced id top right bottom left = - custom - { attributesHtml = [] - , attributesSvg = [] - , size = static - , margin = Margin top right bottom left - , id = id - } + custom + { attributesHtml = [] + , attributesSvg = [] + , size = static + , margin = Margin top right bottom left + , id = id + } {-| -} styled : String -> List ( String, String ) -> Config msg styled id styles = - custom - { attributesHtml = List.map (\(p, v) -> Html.Attributes.style p v) styles - , attributesSvg = [] - , size = static - , margin = Margin 60 140 60 80 - , id = id - } + custom + { attributesHtml = List.map (\( p, v ) -> Html.Attributes.style p v) styles + , attributesSvg = [] + , size = static + , margin = Margin 60 140 60 80 + , id = id + } {-| -} responsive : String -> Config msg responsive id = - custom - { attributesHtml = [] - , attributesSvg = [] - , size = relative - , margin = Margin 60 140 60 80 - , id = id - } + custom + { attributesHtml = [] + , attributesSvg = [] + , size = relative + , margin = Margin 60 140 60 80 + , id = id + } {-| -} custom : Properties msg -> Config msg custom = - Config + Config {-| -} relative : Size relative = - Relative + Relative {-| -} static : Size static = - Static + Static @@ -110,17 +118,17 @@ static = {-| -} properties : (Properties msg -> a) -> Config msg -> a properties f (Config properties_) = - f properties_ + f properties_ {-| -} sizeStyles : Config msg -> Float -> Float -> List (Html.Attribute msg) sizeStyles (Config properties_) width height = - case properties_.size of - Static -> - [ Html.Attributes.style "height" (String.fromFloat height ++ "px") - , Html.Attributes.style "width" (String.fromFloat width ++ "px") - ] - - Relative -> - [] + case properties_.size of + Static -> + [ Html.Attributes.style "height" (String.fromFloat height ++ "px") + , Html.Attributes.style "width" (String.fromFloat width ++ "px") + ] + + Relative -> + [] diff --git a/src/Internal/Coordinate.elm b/src/Internal/Coordinate.elm index ef0f574..0462003 100644 --- a/src/Internal/Coordinate.elm +++ b/src/Internal/Coordinate.elm @@ -1,54 +1,64 @@ module Internal.Coordinate exposing - ( System, Frame, Size, Margin, Range - , range, minimum, minimumOrZero, maximum - , ground, reachX, reachY, lengthX, lengthY - , smallestRange, largestRange - ) - + ( Frame + , Margin + , Range + , Size + , System + , ground + , largestRange + , lengthX + , lengthY + , maximum + , minimum + , minimumOrZero + , range + , reachX + , reachY + , smallestRange + ) {-| -} - {-| -} type alias System = - { frame : Frame - , x : Range - , y : Range - , xData : Range - , yData : Range - , id : String - } + { frame : Frame + , x : Range + , y : Range + , xData : Range + , yData : Range + , id : String + } {-| -} type alias Frame = - { margin : Margin - , size : Size - } + { margin : Margin + , size : Size + } {-| -} type alias Size = - { width : Float - , height : Float - } + { width : Float + , height : Float + } {-| -} type alias Margin = - { top : Float - , right : Float - , bottom : Float - , left : Float - } + { top : Float + , right : Float + , bottom : Float + , left : Float + } {-| -} type alias Range = - { min : Float - , max : Float - } + { min : Float + , max : Float + } @@ -58,89 +68,98 @@ type alias Range = {-| -} range : (a -> Float) -> List a -> Range range toValue data = - let - range_ = - { min = minimum toValue data - , max = maximum toValue data - } - in - if range_.min == range_.max then - { range_ | max = range_.max + 1 } - else - range_ + let + range_ = + { min = minimum toValue data + , max = maximum toValue data + } + in + if range_.min == range_.max then + { range_ | max = range_.max + 1 } + + else + range_ {-| -} minimum : (a -> Float) -> List a -> Float minimum toValue = - List.map toValue - >> List.minimum - >> Maybe.withDefault 0 + List.map toValue + >> List.minimum + >> Maybe.withDefault 0 {-| -} minimumOrZero : (a -> Float) -> List a -> Float minimumOrZero toValue = - minimum toValue >> Basics.min 0 + minimum toValue >> Basics.min 0 {-| -} maximum : (a -> Float) -> List a -> Float maximum toValue = - List.map toValue - >> List.maximum - >> Maybe.withDefault 1 + List.map toValue + >> List.maximum + >> Maybe.withDefault 1 {-| -} ground : Range -> Range ground range_ = - { range_ | min = Basics.min range_.min 0 } + { range_ | min = Basics.min range_.min 0 } {-| -} reachX : System -> Float reachX system = - let - diff = - system.x.max - system.x.min - in - if diff > 0 then diff else 1 + let + diff = + system.x.max - system.x.min + in + if diff > 0 then + diff + + else + 1 {-| -} reachY : System -> Float reachY system = - let - diff = - system.y.max - system.y.min - in - if diff > 0 then diff else 1 + let + diff = + system.y.max - system.y.min + in + if diff > 0 then + diff + + else + 1 {-| -} lengthX : System -> Float lengthX system = - max 1 (system.frame.size.width - system.frame.margin.left - system.frame.margin.right) + max 1 (system.frame.size.width - system.frame.margin.left - system.frame.margin.right) {-| -} lengthY : System -> Float lengthY system = - max 1 (system.frame.size.height - system.frame.margin.bottom - system.frame.margin.top) + max 1 (system.frame.size.height - system.frame.margin.bottom - system.frame.margin.top) {-| -} smallestRange : Range -> Range -> Range smallestRange data range_ = - { min = Basics.max data.min range_.min - , max = Basics.min data.max range_.max - } + { min = Basics.max data.min range_.min + , max = Basics.min data.max range_.max + } {-| -} largestRange : Range -> Range -> Range largestRange data range_ = - { min = Basics.min data.min range_.min - , max = Basics.max data.max range_.max - } + { min = Basics.min data.min range_.min + , max = Basics.max data.max range_.max + } diff --git a/src/Internal/Data.elm b/src/Internal/Data.elm index ce026cc..bf83d64 100644 --- a/src/Internal/Data.elm +++ b/src/Internal/Data.elm @@ -1,28 +1,29 @@ -module Internal.Data exposing (..) +module Internal.Data exposing (Data, Point, isWithinRange) {-| -} import Internal.Coordinate exposing (..) - {-| -} type alias Data data = - { user : data - , point : Point - , isReal : Bool - } + { user : data + , point : Point + , isReal : Bool + } {-| -} type alias Point = - { x : Float - , y : Float - } + { x : Float + , y : Float + } {-| -} isWithinRange : System -> Point -> Bool isWithinRange system point = - clamp system.x.min system.x.max point.x == point.x && - clamp system.y.min system.y.max point.y == point.y + clamp system.x.min system.x.max point.x + == point.x + && clamp system.y.min system.y.max point.y + == point.y diff --git a/src/Internal/Dots.elm b/src/Internal/Dots.elm index 6882128..234f911 100644 --- a/src/Internal/Dots.elm +++ b/src/Internal/Dots.elm @@ -1,55 +1,63 @@ module Internal.Dots exposing - ( Config, default, custom, customAny - , Shape(..) - , Style, style, empty, disconnected, aura, full - , Variety - , view, viewSample - ) + ( Config + , Shape(..) + , Style + , Variety + , aura + , custom + , customAny + , default + , disconnected + , empty + , full + , style + , view + , viewSample + ) {-| -} +import Color +import Internal.Data as Data +import LineChart.Coordinate as Coordinate exposing (..) import Svg exposing (Svg) import Svg.Attributes as Attributes -import LineChart.Coordinate as Coordinate exposing (..) -import Internal.Data as Data -import Color - {-| -} -type Config data = - Config - { legend : List data -> Style - , individual : data -> Style - } +type Config data + = Config + { legend : List data -> Style + , individual : data -> Style + } {-| -} default : Config data default = - Config - { legend = \_ -> disconnected 10 2 - , individual = \_ -> disconnected 10 2 - } + Config + { legend = \_ -> disconnected 10 2 + , individual = \_ -> disconnected 10 2 + } {-| -} custom : Style -> Config data custom style_ = - Config - { legend = \_ -> style_ - , individual = \_ -> style_ - } + Config + { legend = \_ -> style_ + , individual = \_ -> style_ + } {-| -} customAny : - { legend : List data -> Style - , individual : data -> Style - } - -> Config data + { legend : List data -> Style + , individual : data -> Style + } + -> Config data customAny = - Config + Config @@ -57,67 +65,68 @@ customAny = {-| -} -type Style = - Style StyleConfig +type Style + = Style StyleConfig {-| -} type alias StyleConfig = - { radius : Float - , variety : Variety - } + { radius : Float + , variety : Variety + } {-| -} type Variety - = Empty Int - | Disconnected Int - | Aura Int Float - | Full + = Empty Int + | Disconnected Int + | Aura Int Float + | Full {-| -} type Shape - = None - | Circle - | Triangle - | Square - | Diamond - | Cross - | Plus + = None + | Circle + | Triangle + | Square + | Diamond + | Cross + | Plus {-| -} style : Float -> Variety -> Style style radius variety = - Style - { radius = radius - , variety = variety - } + Style + { radius = radius + , variety = variety + } {-| -} empty : Float -> Int -> Style empty radius border = - style radius (Empty border) + style radius (Empty border) {-| -} disconnected : Float -> Int -> Style disconnected radius border = - style radius (Disconnected border) + style radius (Disconnected border) {-| -} aura : Float -> Int -> Float -> Style aura radius aura_ opacity = - style radius (Aura aura_ opacity) + style radius (Aura aura_ opacity) {-| -} full : Float -> Style full radius = - style radius Full + style radius Full + -- INTERNAL / VIEW @@ -125,34 +134,34 @@ full radius = {-| -} type alias Arguments data = - { system : Coordinate.System - , dotsConfig : Config data - , shape : Shape - , color : Color.Color - } + { system : Coordinate.System + , dotsConfig : Config data + , shape : Shape + , color : Color.Color + } {-| -} view : Arguments data -> Data.Data data -> Svg msg view { system, dotsConfig, shape, color } data = - let - (Config config) = - dotsConfig + let + (Config config) = + dotsConfig - (Style style_) = - config.individual data.user - in - viewShape system style_ shape color data.point + (Style style_) = + config.individual data.user + in + viewShape system style_ shape color data.point {-| -} viewSample : Config data -> Shape -> Color.Color -> Coordinate.System -> List (Data.Data data) -> Coordinate.Point -> Svg msg viewSample (Config config) shape color system data = - let - (Style style_) = - config.legend (List.map .user data) - in - viewShape system style_ shape color + let + (Style style_) = + config.legend (List.map .user data) + in + viewShape system style_ shape color @@ -161,93 +170,120 @@ viewSample (Config config) shape color system data = viewShape : Coordinate.System -> StyleConfig -> Shape -> Color.Color -> Point -> Svg msg viewShape system { radius, variety } shape color point = - let size = 2 * pi * radius - pointSvg = toSvg system point - view_ = - case shape of - Circle -> viewCircle - Triangle -> viewTriangle - Square -> viewSquare - Diamond -> viewDiamond - Cross -> viewCross - Plus -> viewPlus - None -> \_ _ _ _ _ -> Svg.text "" - in - view_ [] variety color size pointSvg + let + size = + 2 * pi * radius + + pointSvg = + toSvg system point + + view_ = + case shape of + Circle -> + viewCircle + + Triangle -> + viewTriangle + + Square -> + viewSquare + + Diamond -> + viewDiamond + + Cross -> + viewCross + Plus -> + viewPlus + + None -> + \_ _ _ _ _ -> Svg.text "" + in + view_ [] variety color size pointSvg viewCircle : List (Svg.Attribute msg) -> Variety -> Color.Color -> Float -> Coordinate.Point -> Svg msg viewCircle events variety color area point = - let - radius = sqrt (area / pi) - attributes = - [ Attributes.cx (String.fromFloat point.x) - , Attributes.cy (String.fromFloat point.y) - , Attributes.r (String.fromFloat radius) - ] - in - Svg.circle (events ++ attributes ++ varietyAttributes color variety) [] + let + radius = + sqrt (area / pi) + + attributes = + [ Attributes.cx (String.fromFloat point.x) + , Attributes.cy (String.fromFloat point.y) + , Attributes.r (String.fromFloat radius) + ] + in + Svg.circle (events ++ attributes ++ varietyAttributes color variety) [] viewTriangle : List (Svg.Attribute msg) -> Variety -> Color.Color -> Float -> Coordinate.Point -> Svg msg viewTriangle events variety color area point = - let - attributes = - [ Attributes.d (pathTriangle area point) ] - in - Svg.path (events ++ attributes ++ varietyAttributes color variety) [] + let + attributes = + [ Attributes.d (pathTriangle area point) ] + in + Svg.path (events ++ attributes ++ varietyAttributes color variety) [] viewSquare : List (Svg.Attribute msg) -> Variety -> Color.Color -> Float -> Coordinate.Point -> Svg msg viewSquare events variety color area point = - let - side = sqrt area - attributes = - [ Attributes.x <| String.fromFloat (point.x - side / 2) - , Attributes.y <| String.fromFloat (point.y - side / 2) - , Attributes.width <| String.fromFloat side - , Attributes.height <| String.fromFloat side - ] - in - Svg.rect (events ++ attributes ++ varietyAttributes color variety) [] + let + side = + sqrt area + + attributes = + [ Attributes.x <| String.fromFloat (point.x - side / 2) + , Attributes.y <| String.fromFloat (point.y - side / 2) + , Attributes.width <| String.fromFloat side + , Attributes.height <| String.fromFloat side + ] + in + Svg.rect (events ++ attributes ++ varietyAttributes color variety) [] viewDiamond : List (Svg.Attribute msg) -> Variety -> Color.Color -> Float -> Coordinate.Point -> Svg msg viewDiamond events variety color area point = - let - side = sqrt area - rotation = "rotate(45 " ++ String.fromFloat point.x ++ " " ++ String.fromFloat point.y ++ ")" - attributes = - [ Attributes.x <| String.fromFloat (point.x - side / 2) - , Attributes.y <| String.fromFloat (point.y - side / 2) - , Attributes.width <| String.fromFloat side - , Attributes.height <| String.fromFloat side - , Attributes.transform rotation - ] - in - Svg.rect (events ++ attributes ++ varietyAttributes color variety) [] + let + side = + sqrt area + + rotation = + "rotate(45 " ++ String.fromFloat point.x ++ " " ++ String.fromFloat point.y ++ ")" + + attributes = + [ Attributes.x <| String.fromFloat (point.x - side / 2) + , Attributes.y <| String.fromFloat (point.y - side / 2) + , Attributes.width <| String.fromFloat side + , Attributes.height <| String.fromFloat side + , Attributes.transform rotation + ] + in + Svg.rect (events ++ attributes ++ varietyAttributes color variety) [] viewPlus : List (Svg.Attribute msg) -> Variety -> Color.Color -> Float -> Coordinate.Point -> Svg msg viewPlus events variety color area point = - let - attributes = - [ Attributes.d (pathPlus area point) ] - in - Svg.path (events ++ attributes ++ varietyAttributes color variety) [] + let + attributes = + [ Attributes.d (pathPlus area point) ] + in + Svg.path (events ++ attributes ++ varietyAttributes color variety) [] viewCross : List (Svg.Attribute msg) -> Variety -> Color.Color -> Float -> Coordinate.Point -> Svg msg viewCross events variety color area point = - let - rotation = "rotate(45 " ++ String.fromFloat point.x ++ " " ++ String.fromFloat point.y ++ ")" - attributes = - [ Attributes.d (pathPlus area point) - , Attributes.transform rotation - ] - in - Svg.path (events ++ attributes ++ varietyAttributes color variety) [] + let + rotation = + "rotate(45 " ++ String.fromFloat point.x ++ " " ++ String.fromFloat point.y ++ ")" + + attributes = + [ Attributes.d (pathPlus area point) + , Attributes.transform rotation + ] + in + Svg.path (events ++ attributes ++ varietyAttributes color variety) [] @@ -256,46 +292,56 @@ viewCross events variety color area point = pathTriangle : Float -> Point -> String pathTriangle area point = - let - side = sqrt <| area * 4 / (sqrt 3) - height = (sqrt 3) * side / 2 - fromMiddle = height - tan (degrees 30) * side / 2 + let + side = + sqrt <| area * 4 / sqrt 3 + + height = + sqrt 3 * side / 2 + + fromMiddle = + height - tan (degrees 30) * side / 2 - commands = - [ "M" ++ String.fromFloat point.x ++ " " ++ String.fromFloat (point.y - fromMiddle) - , "l" ++ String.fromFloat (-side / 2) ++ " " ++ String.fromFloat height - , "h" ++ String.fromFloat side - , "z" - ] - in - String.join " " commands + commands = + [ "M" ++ String.fromFloat point.x ++ " " ++ String.fromFloat (point.y - fromMiddle) + , "l" ++ String.fromFloat (-side / 2) ++ " " ++ String.fromFloat height + , "h" ++ String.fromFloat side + , "z" + ] + in + String.join " " commands pathPlus : Float -> Point -> String pathPlus area point = - let - side = sqrt (area / 5) - r3 = side - r6 = side / 2 - - commands = - [ "M" ++ String.fromFloat (point.x - r6) ++ " " ++ String.fromFloat (point.y - r3 - r6) - , "v" ++ String.fromFloat r3 - , "h" ++ String.fromFloat -r3 - , "v" ++ String.fromFloat r3 - , "h" ++ String.fromFloat r3 - , "v" ++ String.fromFloat r3 - , "h" ++ String.fromFloat r3 - , "v" ++ String.fromFloat -r3 - , "h" ++ String.fromFloat r3 - , "v" ++ String.fromFloat -r3 - , "h" ++ String.fromFloat -r3 - , "v" ++ String.fromFloat -r3 - , "h" ++ String.fromFloat -r3 - , "v" ++ String.fromFloat r3 - ] - in - String.join " " commands + let + side = + sqrt (area / 5) + + r3 = + side + + r6 = + side / 2 + + commands = + [ "M" ++ String.fromFloat (point.x - r6) ++ " " ++ String.fromFloat (point.y - r3 - r6) + , "v" ++ String.fromFloat r3 + , "h" ++ String.fromFloat -r3 + , "v" ++ String.fromFloat r3 + , "h" ++ String.fromFloat r3 + , "v" ++ String.fromFloat r3 + , "h" ++ String.fromFloat r3 + , "v" ++ String.fromFloat -r3 + , "h" ++ String.fromFloat r3 + , "v" ++ String.fromFloat -r3 + , "h" ++ String.fromFloat -r3 + , "v" ++ String.fromFloat -r3 + , "h" ++ String.fromFloat -r3 + , "v" ++ String.fromFloat r3 + ] + in + String.join " " commands @@ -304,25 +350,25 @@ pathPlus area point = varietyAttributes : Color.Color -> Variety -> List (Svg.Attribute msg) varietyAttributes color variety = - case variety of - Empty width -> - [ Attributes.stroke (Color.toCssString color) - , Attributes.strokeWidth (String.fromInt width) - , Attributes.fill "white" - ] - - Aura width opacity -> - [ Attributes.stroke (Color.toCssString color) - , Attributes.strokeWidth (String.fromInt width) - , Attributes.strokeOpacity (String.fromFloat opacity) - , Attributes.fill (Color.toCssString color) - ] - - Disconnected width -> - [ Attributes.stroke "white" - , Attributes.strokeWidth (String.fromInt width) - , Attributes.fill (Color.toCssString color) - ] - - Full -> - [ Attributes.fill (Color.toCssString color) ] + case variety of + Empty width -> + [ Attributes.stroke (Color.toCssString color) + , Attributes.strokeWidth (String.fromInt width) + , Attributes.fill "white" + ] + + Aura width opacity -> + [ Attributes.stroke (Color.toCssString color) + , Attributes.strokeWidth (String.fromInt width) + , Attributes.strokeOpacity (String.fromFloat opacity) + , Attributes.fill (Color.toCssString color) + ] + + Disconnected width -> + [ Attributes.stroke "white" + , Attributes.strokeWidth (String.fromInt width) + , Attributes.fill (Color.toCssString color) + ] + + Full -> + [ Attributes.fill (Color.toCssString color) ] diff --git a/src/Internal/Events.elm b/src/Internal/Events.elm index e47ca48..7dd5258 100644 --- a/src/Internal/Events.elm +++ b/src/Internal/Events.elm @@ -1,9 +1,31 @@ module Internal.Events exposing - ( Config, default, hoverMany, hoverOne, click, custom - , Event, onClick, onMouseMove, onMouseUp, onMouseDown, onMouseLeave, on, onWithOptions, Options - , Decoder, getSvg, getData, getNearest, getNearestX, getWithin, getWithinX - , map, map2, map3 - -- INTERNAL + ( Config + , Decoder + , Event + , Options + , click + , custom + , default + , getData + , getNearest + , getNearestX + , getSvg + , getWithin + , getWithinX + , hoverMany + , hoverOne + , map + , map2 + , map3 + -- INTERNAL + + , on + , onClick + , onMouseDown + , onMouseLeave + , onMouseMove + , onMouseUp + , onWithOptions , toChartAttributes , toContainerAttributes ) @@ -11,58 +33,57 @@ module Internal.Events exposing {-| -} import DOM -import Svg -import Svg.Events import Html.Events -import LineChart.Coordinate as Coordinate exposing (..) import Internal.Data as Data import Internal.Utils exposing (withFirst) import Json.Decode as Json - +import LineChart.Coordinate as Coordinate exposing (..) +import Svg +import Svg.Events {-| -} type Config data msg - = Config (List (Event data msg)) + = Config (List (Event data msg)) {-| -} default : Config data msg default = - custom [] + custom [] {-| -} hoverMany : (List data -> msg) -> Config data msg hoverMany msg = - custom - [ onMouseMove msg getNearestX - , onMouseLeave (msg []) - ] + custom + [ onMouseMove msg getNearestX + , onMouseLeave (msg []) + ] {-| -} hoverOne : (Maybe data -> msg) -> Config data msg hoverOne msg = - custom - [ onMouseMove msg (getWithin 30) - , on "touchstart" msg (getWithin 100) - , on "touchmove" msg (getWithin 100) - , onMouseLeave (msg Nothing) - ] + custom + [ onMouseMove msg (getWithin 30) + , on "touchstart" msg (getWithin 100) + , on "touchmove" msg (getWithin 100) + , onMouseLeave (msg Nothing) + ] {-| -} click : (Maybe data -> msg) -> Config data msg click msg = - custom - [ onClick msg (getWithin 30) ] + custom + [ onClick msg (getWithin 30) ] {-| -} custom : List (Event data msg) -> Config data msg custom = - Config + Config @@ -71,60 +92,67 @@ custom = {-| -} type Event data msg - = Event Bool (List (Data.Data data) -> System -> Svg.Attribute msg) + = Event Bool (List (Data.Data data) -> System -> Svg.Attribute msg) onClick : (a -> msg) -> Decoder data a -> Event data msg onClick = - on "click" + on "click" {-| -} onMouseMove : (a -> msg) -> Decoder data a -> Event data msg onMouseMove = - on "mousemove" + on "mousemove" {-| -} onMouseDown : (a -> msg) -> Decoder data a -> Event data msg onMouseDown = - on "mousedown" + on "mousedown" {-| -} onMouseUp : (a -> msg) -> Decoder data a -> Event data msg onMouseUp = - on "mouseup" + on "mouseup" {-| -} onMouseLeave : msg -> Event data msg onMouseLeave msg = - Event False <| \_ _ -> - Svg.Events.on "mouseleave" (Json.succeed msg) + Event False <| + \_ _ -> + Svg.Events.on "mouseleave" (Json.succeed msg) {-| -} on : String -> (a -> msg) -> Decoder data a -> Event data msg on event toMsg decoder = - Event False <| \data system -> - let defaultOptions = Options False False False in - Svg.Events.custom event (toJsonDecoder defaultOptions data system (map toMsg decoder)) + Event False <| + \data system -> + let + defaultOptions = + Options False False False + in + Svg.Events.custom event (toJsonDecoder defaultOptions data system (map toMsg decoder)) {-| -} onWithOptions : String -> Options -> (a -> msg) -> Decoder data a -> Event data msg onWithOptions event options toMsg decoder = - Event options.catchOutsideChart <| \data system -> - Html.Events.custom event (toJsonDecoder options data system (map toMsg decoder)) + Event options.catchOutsideChart <| + \data system -> + Html.Events.custom event (toJsonDecoder options data system (map toMsg decoder)) {-| -} type alias Options = - { stopPropagation : Bool - , preventDefault : Bool - , catchOutsideChart : Bool - } + { stopPropagation : Bool + , preventDefault : Bool + , catchOutsideChart : Bool + } + -- INTERNAL @@ -133,21 +161,29 @@ type alias Options = {-| -} toChartAttributes : List (Data.Data data) -> System -> Config data msg -> List (Svg.Attribute msg) toChartAttributes data system (Config events) = - let - order (Event outside event) = - if outside then Nothing else Just (event data system) - in - List.filterMap order events + let + order (Event outside event) = + if outside then + Nothing + + else + Just (event data system) + in + List.filterMap order events {-| -} toContainerAttributes : List (Data.Data data) -> System -> Config data msg -> List (Svg.Attribute msg) toContainerAttributes data system (Config events) = - let - order (Event outside event) = - if outside then Just (event data system) else Nothing - in - List.filterMap order events + let + order (Event outside event) = + if outside then + Just (event data system) + + else + Nothing + in + List.filterMap order events @@ -155,79 +191,87 @@ toContainerAttributes data system (Config events) = {-| -} -type Decoder data msg = - Decoder (List (Data.Data data) -> System -> Point -> msg) +type Decoder data msg + = Decoder (List (Data.Data data) -> System -> Point -> msg) {-| -} getSvg : Decoder data Point getSvg = - Decoder <| \points system searched -> - searched + Decoder <| + \points system searched -> + searched {-| -} getData : Decoder data Point getData = - Decoder <| \points system searchedSvg -> - Coordinate.toData system searchedSvg + Decoder <| + \points system searchedSvg -> + Coordinate.toData system searchedSvg {-| -} getNearest : Decoder data (Maybe data) getNearest = - Decoder <| \points system searchedSvg -> - let - searched = - Coordinate.toData system searchedSvg - in - getNearestHelp points system searched - |> Maybe.map .user + Decoder <| + \points system searchedSvg -> + let + searched = + Coordinate.toData system searchedSvg + in + getNearestHelp points system searched + |> Maybe.map .user {-| -} getWithin : Float -> Decoder data (Maybe data) getWithin radius = - Decoder <| \points system searchedSvg -> - let - searched = - Coordinate.toData system searchedSvg + Decoder <| + \points system searchedSvg -> + let + searched = + Coordinate.toData system searchedSvg - keepIfEligible closest = - if withinRadius system radius searched closest.point - then Just closest.user - else Nothing - in - getNearestHelp points system searched - |> Maybe.andThen keepIfEligible + keepIfEligible closest = + if withinRadius system radius searched closest.point then + Just closest.user + + else + Nothing + in + getNearestHelp points system searched + |> Maybe.andThen keepIfEligible {-| -} getNearestX : Decoder data (List data) getNearestX = - Decoder <| \points system searchedSvg -> - let - searched = - Coordinate.toData system searchedSvg - in - getNearestXHelp points system searched - |> List.map .user + Decoder <| + \points system searchedSvg -> + let + searched = + Coordinate.toData system searchedSvg + in + getNearestXHelp points system searched + |> List.map .user {-| -} getWithinX : Float -> Decoder data (List data) getWithinX radius = - Decoder <| \points system searchedSvg -> - let - searched = - Coordinate.toData system searchedSvg + Decoder <| + \points system searchedSvg -> + let + searched = + Coordinate.toData system searchedSvg - keepIfEligible = - withinRadiusX system radius searched << .point - in - getNearestXHelp points system searched - |> List.filter keepIfEligible - |> List.map .user + keepIfEligible = + withinRadiusX system radius searched << .point + in + getNearestXHelp points system searched + |> List.filter keepIfEligible + |> List.map .user @@ -237,19 +281,19 @@ getWithinX radius = {-| -} map : (a -> msg) -> Decoder data a -> Decoder data msg map f (Decoder a) = - Decoder <| \ps s p -> f (a ps s p) + Decoder <| \ps s p -> f (a ps s p) {-| -} map2 : (a -> b -> msg) -> Decoder data a -> Decoder data b -> Decoder data msg map2 f (Decoder a) (Decoder b) = - Decoder <| \ps s p -> f (a ps s p) (b ps s p) + Decoder <| \ps s p -> f (a ps s p) (b ps s p) {-| -} map3 : (a -> b -> c -> msg) -> Decoder data a -> Decoder data b -> Decoder data c -> Decoder data msg map3 f (Decoder a) (Decoder b) (Decoder c) = - Decoder <| \ps s p -> f (a ps s p) (b ps s p) (c ps s p) + Decoder <| \ps s p -> f (a ps s p) (b ps s p) (c ps s p) @@ -258,35 +302,42 @@ map3 f (Decoder a) (Decoder b) (Decoder c) = getNearestHelp : List (Data.Data data) -> System -> Point -> Maybe (Data.Data data) getNearestHelp points system searched = - let - distance_ = - distance system searched + let + distance_ = + distance system searched - getClosest point closest = - if distance_ closest.point < distance_ point.point - then closest - else point - in - withFirst (List.filter .isReal points) (List.foldl getClosest) + getClosest point closest = + if distance_ closest.point < distance_ point.point then + closest + + else + point + in + withFirst (List.filter .isReal points) (List.foldl getClosest) getNearestXHelp : List (Data.Data data) -> System -> Point -> List (Data.Data data) getNearestXHelp points system searched = - let - distanceX_ = - distanceX system searched + let + distanceX_ = + distanceX system searched + + getClosest point allClosest = + case List.head allClosest of + Just closest -> + if closest.point.x == point.point.x then + point :: allClosest - getClosest point allClosest = - case List.head allClosest of - Just closest -> - if closest.point.x == point.point.x then point :: allClosest - else if distanceX_ closest.point > distanceX_ point.point then [ point ] - else allClosest + else if distanceX_ closest.point > distanceX_ point.point then + [ point ] - Nothing -> - [ point ] - in - List.foldl getClosest [] points + else + allClosest + + Nothing -> + [ point ] + in + List.foldl getClosest [] points @@ -323,50 +374,57 @@ withinRadiusX system radius searched dot = {-| -} -toJsonDecoder : Options -> List (Data.Data data) -> System -> Decoder data msg -> Json.Decoder { message : msg, stopPropagation : Bool, preventDefault : Bool} +toJsonDecoder : Options -> List (Data.Data data) -> System -> Decoder data msg -> Json.Decoder { message : msg, stopPropagation : Bool, preventDefault : Bool } toJsonDecoder options data system (Decoder decoder) = - let - handle mouseX mouseY { left, top, height, width } = - let - widthPercent = width / system.frame.size.width - heightPercent = height / system.frame.size.height - - newSize = - { width = width - , height = height - } - - newMargin = - { top = system.frame.margin.top * heightPercent - , right = system.frame.margin.right * widthPercent - , bottom = system.frame.margin.bottom * heightPercent - , left = system.frame.margin.left * widthPercent - } - - newSystem = - { system | frame = { size = newSize, margin = newMargin } } - - x = (mouseX - left) - y = (mouseY - top) - in - decoder data newSystem (Point x y) - - withOptions msg = - { message = msg - , stopPropagation = options.stopPropagation - , preventDefault = options.preventDefault - } - in - Json.map3 handle - (Json.field "pageX" Json.float) -- TODO - (Json.field "pageY" Json.float) - (DOM.target position) - |> Json.map withOptions + let + handle mouseX mouseY { left, top, height, width } = + let + widthPercent = + width / system.frame.size.width + + heightPercent = + height / system.frame.size.height + + newSize = + { width = width + , height = height + } + + newMargin = + { top = system.frame.margin.top * heightPercent + , right = system.frame.margin.right * widthPercent + , bottom = system.frame.margin.bottom * heightPercent + , left = system.frame.margin.left * widthPercent + } + + newSystem = + { system | frame = { size = newSize, margin = newMargin } } + + x = + mouseX - left + + y = + mouseY - top + in + decoder data newSystem (Point x y) + + withOptions msg = + { message = msg + , stopPropagation = options.stopPropagation + , preventDefault = options.preventDefault + } + in + Json.map3 handle + (Json.field "pageX" Json.float) + -- TODO + (Json.field "pageY" Json.float) + (DOM.target position) + |> Json.map withOptions position : Json.Decoder DOM.Rectangle position = - Json.oneOf - [ DOM.boundingClientRect - , Json.lazy (\_ -> DOM.parentElement position) - ] + Json.oneOf + [ DOM.boundingClientRect + , Json.lazy (\_ -> DOM.parentElement position) + ] diff --git a/src/Internal/Grid.elm b/src/Internal/Grid.elm index e4449c8..7444a28 100644 --- a/src/Internal/Grid.elm +++ b/src/Internal/Grid.elm @@ -1,41 +1,39 @@ module Internal.Grid exposing (Config, default, dots, lines, view) - {-| -} -import Svg -import Svg.Attributes as Attributes +import Color +import Internal.Axis as Axis +import Internal.Axis.Ticks as Ticks import Internal.Svg as Svg import LineChart.Colors as Colors import LineChart.Coordinate as Coordinate -import Internal.Axis as Axis -import Internal.Axis.Ticks as Ticks -import Color - +import Svg +import Svg.Attributes as Attributes {-| -} type Config - = Dots Float Color.Color - | Lines Float Color.Color + = Dots Float Color.Color + | Lines Float Color.Color {-| -} default : Config default = - lines 1 Colors.grayLightest + lines 1 Colors.grayLightest {-| -} dots : Float -> Color.Color -> Config dots = - Dots + Dots {-| -} lines : Float -> Color.Color -> Config lines = - Lines + Lines @@ -45,43 +43,50 @@ lines = {-| -} view : Coordinate.System -> Axis.Config data msg -> Axis.Config data msg -> Config -> List (Svg.Svg msg) view system xAxis yAxis grid = - let - verticals = - Ticks.ticks system.xData system.x (Axis.ticks xAxis) - |> List.filterMap hasGrid + let + verticals = + Ticks.ticks system.xData system.x (Axis.ticks xAxis) + |> List.filterMap hasGrid + + horizontals = + Ticks.ticks system.yData system.y (Axis.ticks yAxis) + |> List.filterMap hasGrid + + hasGrid tick = + if tick.grid then + Just tick.position - horizontals = - Ticks.ticks system.yData system.y (Axis.ticks yAxis) - |> List.filterMap hasGrid + else + Nothing + in + case grid of + Dots radius color -> + viewDots system verticals horizontals radius color - hasGrid tick = - if tick.grid then Just tick.position else Nothing - in - case grid of - Dots radius color -> viewDots system verticals horizontals radius color - Lines width color -> viewLines system verticals horizontals width color + Lines width color -> + viewLines system verticals horizontals width color viewDots : Coordinate.System -> List Float -> List Float -> Float -> Color.Color -> List (Svg.Svg msg) viewDots system verticals horizontals radius color = - let - alldots = - List.concatMap dots_ verticals + let + alldots = + List.concatMap dots_ verticals - dots_ g = - List.map (dot g) horizontals + dots_ g = + List.map (dot g) horizontals - dot x y = - Coordinate.toSvg system (Coordinate.Point x y) - in - List.map (Svg.gridDot radius color) alldots + dot x y = + Coordinate.toSvg system (Coordinate.Point x y) + in + List.map (Svg.gridDot radius color) alldots viewLines : Coordinate.System -> List Float -> List Float -> Float -> Color.Color -> List (Svg.Svg msg) viewLines system verticals horizontals width color = - let - attributes = - [ Attributes.strokeWidth (String.fromFloat width), Attributes.stroke (Color.toCssString color) ] - in - List.map (Svg.horizontalGrid system attributes) horizontals ++ - List.map (Svg.verticalGrid system attributes) verticals + let + attributes = + [ Attributes.strokeWidth (String.fromFloat width), Attributes.stroke (Color.toCssString color) ] + in + List.map (Svg.horizontalGrid system attributes) horizontals + ++ List.map (Svg.verticalGrid system attributes) verticals diff --git a/src/Internal/Interpolation.elm b/src/Internal/Interpolation.elm index bcc1f0d..8fae031 100644 --- a/src/Internal/Interpolation.elm +++ b/src/Internal/Interpolation.elm @@ -2,32 +2,36 @@ module Internal.Interpolation exposing (Config(..), toCommands) {-| -} -import Internal.Path as Path exposing (..) import Internal.Data as Data exposing (..) - +import Internal.Path as Path exposing (..) {-| -} type Config - = Linear - | Monotone - | Stepped + = Linear + | Monotone + | Stepped {-| -} -toCommands : Config -> List (List (Data.Data data), Maybe (Data.Data data)) -> List (List Command) +toCommands : Config -> List ( List (Data.Data data), Maybe (Data.Data data) ) -> List (List Command) toCommands interpolation data = - let - points = - List.map (Tuple.first >> List.map .point) + let + points = + List.map (Tuple.first >> List.map .point) + + pointsSections = + List.map (Tuple.mapFirst (List.map .point) >> Tuple.mapSecond (Maybe.map .point)) + in + case interpolation of + Linear -> + linear (points data) + + Monotone -> + monotone (points data) - pointsSections = - List.map (Tuple.mapFirst (List.map .point) >> Tuple.mapSecond (Maybe.map .point)) - in - case interpolation of - Linear -> linear (points data) - Monotone -> monotone (points data) - Stepped -> stepped (pointsSections data) + Stepped -> + stepped (pointsSections data) @@ -36,7 +40,7 @@ toCommands interpolation data = linear : List (List Point) -> List (List Command) linear = - List.map (List.map Line) + List.map (List.map Line) @@ -45,143 +49,195 @@ linear = monotone : List (List Point) -> List (List Command) monotone sections = - List.foldr monotoneSection ( First, [] ) sections - |> Tuple.second + List.foldr monotoneSection ( First, [] ) sections + |> Tuple.second monotoneSection : List Point -> ( Tangent, List (List Command) ) -> ( Tangent, List (List Command) ) monotoneSection points ( tangent, acc ) = - let - ( t0, commands ) = - case points of - p0 :: rest -> - monotonePart (p0 :: rest) ( tangent, [ Line p0 ] ) + let + ( t0, commands ) = + case points of + p0 :: rest -> + monotonePart (p0 :: rest) ( tangent, [ Line p0 ] ) - [] -> - ( tangent, [] ) - in - ( t0, commands :: acc ) + [] -> + ( tangent, [] ) + in + ( t0, commands :: acc ) type Tangent - = First - | Previous Float + = First + | Previous Float monotonePart : List Point -> ( Tangent, List Command ) -> ( Tangent, List Command ) monotonePart points ( tangent, commands ) = - case ( tangent, points ) of - ( First, p0 :: p1 :: p2 :: rest ) -> - let t1 = slope3 p0 p1 p2 - t0 = slope2 p0 p1 t1 - in - ( Previous t1 - , commands ++ [ monotoneCurve p0 p1 t0 t1 ] - ) - |> monotonePart (p1 :: p2 :: rest) - - ( Previous t0, p0 :: p1 :: p2 :: rest ) -> - let t1 = slope3 p0 p1 p2 in - ( Previous t1 - , commands ++ [ monotoneCurve p0 p1 t0 t1 ] - ) - |> monotonePart (p1 :: p2 :: rest) - - ( First, [ p0, p1 ] ) -> - let t1 = slope3 p0 p1 p1 in - ( Previous t1 - , commands ++ [ monotoneCurve p0 p1 t1 t1, Line p1 ] - ) - - ( Previous t0, [ p0, p1 ] ) -> - let t1 = slope3 p0 p1 p1 in - ( Previous t1 - , commands ++ [ monotoneCurve p0 p1 t0 t1, Line p1 ] - ) - - ( _, _ ) -> - ( tangent - , commands - ) + case ( tangent, points ) of + ( First, p0 :: p1 :: p2 :: rest ) -> + let + t1 = + slope3 p0 p1 p2 + + t0 = + slope2 p0 p1 t1 + in + ( Previous t1 + , commands ++ [ monotoneCurve p0 p1 t0 t1 ] + ) + |> monotonePart (p1 :: p2 :: rest) + + ( Previous t0, p0 :: p1 :: p2 :: rest ) -> + let + t1 = + slope3 p0 p1 p2 + in + ( Previous t1 + , commands ++ [ monotoneCurve p0 p1 t0 t1 ] + ) + |> monotonePart (p1 :: p2 :: rest) + + ( First, [ p0, p1 ] ) -> + let + t1 = + slope3 p0 p1 p1 + in + ( Previous t1 + , commands ++ [ monotoneCurve p0 p1 t1 t1, Line p1 ] + ) + + ( Previous t0, [ p0, p1 ] ) -> + let + t1 = + slope3 p0 p1 p1 + in + ( Previous t1 + , commands ++ [ monotoneCurve p0 p1 t0 t1, Line p1 ] + ) + + ( _, _ ) -> + ( tangent + , commands + ) monotoneCurve : Point -> Point -> Float -> Float -> Command monotoneCurve point0 point1 tangent0 tangent1 = - let - dx = - (point1.x - point0.x) / 3 - in - CubicBeziers - { x = point0.x + dx, y = point0.y + dx * tangent0 } - { x = point1.x - dx, y = point1.y - dx * tangent1 } - point1 + let + dx = + (point1.x - point0.x) / 3 + in + CubicBeziers + { x = point0.x + dx, y = point0.y + dx * tangent0 } + { x = point1.x - dx, y = point1.y - dx * tangent1 } + point1 {-| Calculate the slopes of the tangents (Hermite-type interpolation) based on - the following paper: Steffen, M. 1990. A Simple Method for Monotonic - Interpolation in One Dimension +the following paper: Steffen, M. 1990. A Simple Method for Monotonic +Interpolation in One Dimension -} slope3 : Point -> Point -> Point -> Float slope3 point0 point1 point2 = - let - h0 = point1.x - point0.x - h1 = point2.x - point1.x - s0h = toH h0 h1 - s1h = toH h1 h0 - s0 = (point1.y - point0.y) / s0h - s1 = (point2.y - point1.y) / s1h - p = (s0 * h1 + s1 * h0) / (h0 + h1) - slope = (sign s0 + sign s1) * (min (min (abs s0) (abs s1)) (0.5 * abs p)) - in - if isNaN slope then 0 else slope + let + h0 = + point1.x - point0.x + + h1 = + point2.x - point1.x + + s0h = + toH h0 h1 + + s1h = + toH h1 h0 + + s0 = + (point1.y - point0.y) / s0h + + s1 = + (point2.y - point1.y) / s1h + + p = + (s0 * h1 + s1 * h0) / (h0 + h1) + + slope = + (sign s0 + sign s1) * min (min (abs s0) (abs s1)) (0.5 * abs p) + in + if isNaN slope then + 0 + + else + slope toH : Float -> Float -> Float toH h0 h1 = - if h0 == 0 - then if h1 < 0 then 0 * -1 else h1 - else h0 + if h0 == 0 then + if h1 < 0 then + 0 * -1 + + else + h1 + + else + h0 {-| Calculate a one-sided slope. -} slope2 : Point -> Point -> Float -> Float slope2 point0 point1 t = - let h = point1.x - point0.x in - if h /= 0 - then (3 * (point1.y - point0.y) / h - t) / 2 - else t + let + h = + point1.x - point0.x + in + if h /= 0 then + (3 * (point1.y - point0.y) / h - t) / 2 + + else + t sign : Float -> Float sign x = - if x < 0 - then -1 - else 1 + if x < 0 then + -1 + + else + 1 -- INTERNAL / STEPPED -stepped : List (List Point, Maybe Point) -> List (List Command) +stepped : List ( List Point, Maybe Point ) -> List (List Command) stepped sections = - let - expand result section = - case section of - (a :: b :: rest, broken) -> expand (result ++ after a b) (b :: rest, broken) - (last :: [], Just broken) -> result ++ [ Point broken.x last.y ] - (last :: [], Nothing) -> result - ([], _) -> result - in - List.map (expand [] >> List.map Line) sections + let + expand result section = + case section of + ( a :: b :: rest, broken ) -> + expand (result ++ after a b) ( b :: rest, broken ) + + ( last :: [], Just broken ) -> + result ++ [ Point broken.x last.y ] + + ( last :: [], Nothing ) -> + result + + ( [], _ ) -> + result + in + List.map (expand [] >> List.map Line) sections fakeLast : Point -> Point -> Point fakeLast last0 last1 = - Point (last1.x + last1.x - last0.x) last1.y + Point (last1.x + last1.x - last0.x) last1.y after : Point -> Point -> List Point after a b = - [ a, Point b.x a.y, b ] + [ a, Point b.x a.y, b ] diff --git a/src/Internal/Legends.elm b/src/Internal/Legends.elm index a383566..0d67a49 100644 --- a/src/Internal/Legends.elm +++ b/src/Internal/Legends.elm @@ -1,23 +1,29 @@ module Internal.Legends exposing - ( Config, default, none - , byEnding, byBeginning - , grouped, groupedCustom - , hover, hoverOne - -- INTERNAL - , view - ) + ( Config + , byBeginning + , byEnding + , default + , grouped + , groupedCustom + , hover + , hoverOne + -- INTERNAL + + , none + , view + ) {-| -} -import Svg exposing (Svg) -import Svg.Attributes as Attributes -import LineChart.Area as Area -import LineChart.Coordinate as Coordinate import Internal.Data as Data import Internal.Dots as Dot import Internal.Line as Line -import Internal.Utils as Utils import Internal.Svg as Svg +import Internal.Utils as Utils +import LineChart.Area as Area +import LineChart.Coordinate as Coordinate +import Svg exposing (Svg) +import Svg.Attributes as Attributes @@ -26,77 +32,80 @@ import Internal.Svg as Svg {-| -} type Config data msg - = None - | Free Placement (String -> Svg msg) - | Grouped Float (Arguments data msg -> Container msg) + = None + | Free Placement (String -> Svg msg) + | Grouped Float (Arguments data msg -> Container msg) {-| -} type Placement - = Beginning - | Ending + = Beginning + | Ending {-| -} type alias Container msg = - Coordinate.System -> List (Legend msg) -> Svg msg + Coordinate.System -> List (Legend msg) -> Svg msg {-| -} type alias Legend msg = - { sample : Svg msg - , label : String - } + { sample : Svg msg + , label : String + } {-| -} default : Config data msg default = - hover [] + hover [] {-| -} hover : List data -> Config data msg hover data = - Grouped 30 (defaultLegends .max .max 0 10 data) + Grouped 30 (defaultLegends .max .max 0 10 data) {-| -} hoverOne : Maybe data -> Config data msg hoverOne maybeOne = - case maybeOne of - Just data -> hover [ data ] - Nothing -> hover [] + case maybeOne of + Just data -> + hover [ data ] + + Nothing -> + hover [] {-| -} none : Config data msg none = - None + None {-| -} byEnding : (String -> Svg.Svg msg) -> Config data msg byEnding = - Free Ending + Free Ending {-| -} byBeginning : (String -> Svg.Svg msg) -> Config data msg byBeginning = - Free Beginning + Free Beginning {-| -} grouped : (Coordinate.Range -> Float) -> (Coordinate.Range -> Float) -> Float -> Float -> Config data msg grouped toX toY offsetX offsetY = - Grouped 30 (defaultLegends toX toY offsetX offsetY []) + Grouped 30 (defaultLegends toX toY offsetX offsetY []) {-| -} groupedCustom : Float -> (Coordinate.System -> List (Legend msg) -> Svg.Svg msg) -> Config data msg groupedCustom sampleWidth container = - Grouped sampleWidth (\_ -> container) + Grouped sampleWidth (\_ -> container) @@ -105,30 +114,30 @@ groupedCustom sampleWidth container = {-| -} type alias Arguments data msg = - { system : Coordinate.System - , dotsConfig : Dot.Config data - , lineConfig : Line.Config data - , area : Area.Config - , lines : List (Line.Series data) - , data : List (List (Data.Data data)) - , x : data -> Maybe Float - , y : data -> Maybe Float - , legends : Config data msg - } + { system : Coordinate.System + , dotsConfig : Dot.Config data + , lineConfig : Line.Config data + , area : Area.Config + , lines : List (Line.Series data) + , data : List (List (Data.Data data)) + , x : data -> Maybe Float + , y : data -> Maybe Float + , legends : Config data msg + } {-| -} view : Arguments data msg -> Svg.Svg msg view arguments = - case arguments.legends of - Free placement view_ -> - viewFrees arguments placement view_ + case arguments.legends of + Free placement view_ -> + viewFrees arguments placement view_ - Grouped sampleWidth container -> - viewGrouped arguments sampleWidth (container arguments) + Grouped sampleWidth container -> + viewGrouped arguments sampleWidth (container arguments) - None -> - Svg.text "" + None -> + Svg.text "" @@ -137,33 +146,33 @@ view arguments = viewFrees : Arguments data msg -> Placement -> (String -> Svg msg) -> Svg.Svg msg viewFrees { system, lines, data } placement view_ = - Svg.g [ Attributes.class "chart__legends" ] <| - List.map2 (viewFree system placement view_) lines data + Svg.g [ Attributes.class "chart__legends" ] <| + List.map2 (viewFree system placement view_) lines data viewFree : Coordinate.System -> Placement -> (String -> Svg msg) -> Line.Series data -> List (Data.Data data) -> Svg.Svg msg viewFree system placement viewLabel line data = - let - ( orderedPoints, anchor, xOffset ) = - case placement of - Beginning -> - ( data, Svg.End, -10 ) - - Ending -> - ( List.reverse data, Svg.Start, 10 ) - - transform { x, y } = - Svg.transform - [ Svg.move system x y - , Svg.offset xOffset 3 - ] + let + ( orderedPoints, anchor, xOffset ) = + case placement of + Beginning -> + ( data, Svg.End, -10 ) + + Ending -> + ( List.reverse data, Svg.Start, 10 ) - viewLegend { point } = - Svg.g - [ transform point, Svg.anchorStyle anchor ] - [ viewLabel (Line.label line) ] - in - Utils.viewMaybe (List.head orderedPoints) viewLegend + transform { x, y } = + Svg.transform + [ Svg.move system x y + , Svg.offset xOffset 3 + ] + + viewLegend { point } = + Svg.g + [ transform point, Svg.anchorStyle anchor ] + [ viewLabel (Line.label line) ] + in + Utils.viewMaybe (List.head orderedPoints) viewLegend @@ -172,72 +181,71 @@ viewFree system placement viewLabel line data = viewGrouped : Arguments data msg -> Float -> Container msg -> Svg.Svg msg viewGrouped arguments sampleWidth container = - let - toLegend line data = - { sample = viewSample arguments sampleWidth line data - , label = Line.label line - } - - legends = - List.map2 toLegend arguments.lines arguments.data - in - container arguments.system legends + let + toLegend line data = + { sample = viewSample arguments sampleWidth line data + , label = Line.label line + } + legends = + List.map2 toLegend arguments.lines arguments.data + in + container arguments.system legends viewSample : Arguments data msg -> Float -> Line.Series data -> List (Data.Data data) -> Svg msg viewSample { system, lineConfig, dotsConfig, area } sampleWidth line data = - let - dotPosition = - Data.Point (sampleWidth / 2) 0 - |> Coordinate.toData system - - color = - Line.color lineConfig line data - - shape = - Line.shape line - in - Svg.g - [ Attributes.class "chart__sample" ] - [ Line.viewSample lineConfig line area data sampleWidth - , Dot.viewSample dotsConfig shape color system data dotPosition - ] + let + dotPosition = + Data.Point (sampleWidth / 2) 0 + |> Coordinate.toData system + + color = + Line.color lineConfig line data + + shape = + Line.shape line + in + Svg.g + [ Attributes.class "chart__sample" ] + [ Line.viewSample lineConfig line area data sampleWidth + , Dot.viewSample dotsConfig shape color system data dotPosition + ] -- DEFAULTS -defaultLegends - : (Coordinate.Range -> Float) - -> (Coordinate.Range -> Float) - -> Float - -> Float - -> List data - -> Arguments data msg - -> Coordinate.System - -> List (Legend msg) - -> Svg msg +defaultLegends : + (Coordinate.Range -> Float) + -> (Coordinate.Range -> Float) + -> Float + -> Float + -> List data + -> Arguments data msg + -> Coordinate.System + -> List (Legend msg) + -> Svg msg defaultLegends toX toY offsetX offsetY hovered arguments system legends = - Svg.g - [ Attributes.class "chart__legends" - , Svg.transform - [ Svg.move system (toX system.x) (toY system.y) - , Svg.offset offsetX offsetY + Svg.g + [ Attributes.class "chart__legends" + , Svg.transform + [ Svg.move system (toX system.x) (toY system.y) + , Svg.offset offsetX offsetY + ] ] - ] - (List.indexedMap defaultLegend legends) + (List.indexedMap defaultLegend legends) defaultLegend : Int -> Legend msg -> Svg msg defaultLegend index { sample, label } = - Svg.g - [ Attributes.class "chart__legend" - , Svg.transform [ Svg.offset 20 (toFloat index * 20) ] - ] - [ sample - , Svg.g - [ Svg.transform [ Svg.offset 40 4 ] ] - [ Svg.label "inherit" label ] - ] + Svg.g + [ Attributes.class "chart__legend" + , Svg.transform [ Svg.offset 20 (toFloat index * 20) ] + ] + [ sample + , Svg.g + [ Svg.transform [ Svg.offset 40 4 ] ] + [ Svg.label "inherit" label ] + ] diff --git a/src/Internal/Line.elm b/src/Internal/Line.elm index cb41d32..5c1c8b2 100644 --- a/src/Internal/Line.elm +++ b/src/Internal/Line.elm @@ -1,20 +1,26 @@ module Internal.Line exposing - ( Series, line, dash - , Config, default, wider, custom - , Style, style - -- INTERNAL - , shape, label, color, data - , view, viewSample - ) + ( Config + , Series + , Style + , color + , custom + , dash + , data + , default + , label + , line + , shape + , style + -- INTERNAL + + , view + , viewSample + , wider + ) -{-| - - --} +{-| -} -import Svg -import Svg.Attributes as Attributes -import LineChart.Junk as Junk +import Color import Internal.Area as Area import Internal.Coordinate as Coordinate import Internal.Data as Data @@ -22,7 +28,9 @@ import Internal.Dots as Dot import Internal.Interpolation as Interpolation import Internal.Path as Path import Internal.Utils as Utils -import Color +import LineChart.Junk as Junk +import Svg +import Svg.Attributes as Attributes @@ -30,46 +38,46 @@ import Color {-| -} -type Series data = - Series (SeriesConfig data) +type Series data + = Series (SeriesConfig data) {-| -} type alias SeriesConfig data = - { color : Color.Color - , shape : Dot.Shape - , dashing : List Float - , label : String - , data : List data - } + { color : Color.Color + , shape : Dot.Shape + , dashing : List Float + , label : String + , data : List data + } {-| -} label : Series data -> String label (Series config) = - config.label + config.label {-| -} shape : Series data -> Dot.Shape shape (Series config) = - config.shape + config.shape {-| -} data : Series data -> List data data (Series config) = - config.data + config.data {-| -} color : Config data -> Series data -> List (Data.Data data) -> Color.Color color (Config config) (Series line_) data_ = - let - (Style style_) = - config (List.map .user data_) - in - style_.color line_.color + let + (Style style_) = + config (List.map .user data_) + in + style_.color line_.color @@ -79,13 +87,13 @@ color (Config config) (Series line_) data_ = {-| -} line : Color.Color -> Dot.Shape -> String -> List data -> Series data line color_ shape_ label_ data_ = - Series <| SeriesConfig color_ shape_ [] label_ data_ + Series <| SeriesConfig color_ shape_ [] label_ data_ {-| -} dash : Color.Color -> Dot.Shape -> String -> List Float -> List data -> Series data dash color_ shape_ label_ dashing_ data_ = - Series <| SeriesConfig color_ shape_ dashing_ label_ data_ + Series <| SeriesConfig color_ shape_ dashing_ label_ data_ @@ -93,26 +101,26 @@ dash color_ shape_ label_ dashing_ data_ = {-| -} -type Config data = - Config (List data -> Style) +type Config data + = Config (List data -> Style) {-| -} default : Config data default = - Config <| \_ -> style 1 identity + Config <| \_ -> style 1 identity {-| -} wider : Float -> Config data wider width = - Config <| \_ -> style width identity + Config <| \_ -> style width identity {-| -} custom : (List data -> Style) -> Config data custom = - Config + Config @@ -120,17 +128,17 @@ custom = {-| -} -type Style = - Style - { width : Float - , color : Color.Color -> Color.Color - } +type Style + = Style + { width : Float + , color : Color.Color -> Color.Color + } {-| -} style : Float -> (Color.Color -> Color.Color) -> Style style width color_ = - Style { width = width, color = color_ } + Style { width = width, color = color_ } @@ -138,92 +146,102 @@ style width color_ = type alias Arguments data = - { system : Coordinate.System - , dotsConfig : Dot.Config data - , interpolation : Interpolation.Config - , lineConfig : Config data - , area : Area.Config - } + { system : Coordinate.System + , dotsConfig : Dot.Config data + , interpolation : Interpolation.Config + , lineConfig : Config data + , area : Area.Config + } {-| -} view : Arguments data -> List (Series data) -> List (List (Data.Data data)) -> Svg.Svg msg view arguments lines datas = - let - container = - Svg.g [ Attributes.class "chart__lines" ] + let + container = + Svg.g [ Attributes.class "chart__lines" ] - buildSeriesViews = - if Area.opacityContainer arguments.area < 1 - then viewStacked arguments.area - else viewNormal - in - List.map2 (viewSingle arguments) lines datas - |> Utils.unzip3 - |> buildSeriesViews - |> container + buildSeriesViews = + if Area.opacityContainer arguments.area < 1 then + viewStacked arguments.area + + else + viewNormal + in + List.map2 (viewSingle arguments) lines datas + |> Utils.unzip3 + |> buildSeriesViews + |> container viewNormal : ( List (Svg.Svg msg), List (Svg.Svg msg), List (Svg.Svg msg) ) -> List (Svg.Svg msg) viewNormal ( areas, lines, dots ) = - let - view_ area_ line_ dots_ = - Svg.g [ Attributes.class "chart__line" ] [ area_, line_, dots_ ] - in - List.map3 view_ areas lines dots + let + view_ area_ line_ dots_ = + Svg.g [ Attributes.class "chart__line" ] [ area_, line_, dots_ ] + in + List.map3 view_ areas lines dots -viewStacked : Area.Config -> ( List (Svg.Svg msg), List (Svg.Svg msg), List (Svg.Svg msg) ) -> List (Svg.Svg msg) +viewStacked : Area.Config -> ( List (Svg.Svg msg), List (Svg.Svg msg), List (Svg.Svg msg) ) -> List (Svg.Svg msg) viewStacked area ( areas, lines, dots ) = - let opacity = "opacity: " ++ String.fromFloat (Area.opacityContainer area) - toList l d = [ l, d ] - bottoms = List.concat <| List.map2 toList lines dots - in - [ Svg.g [ Attributes.class "chart__bottoms", Attributes.style opacity ] areas - , Svg.g [ Attributes.class "chart__tops" ] bottoms - ] + let + opacity = + "opacity: " ++ String.fromFloat (Area.opacityContainer area) + + toList l d = + [ l, d ] + + bottoms = + List.concat <| List.map2 toList lines dots + in + [ Svg.g [ Attributes.class "chart__bottoms", Attributes.style opacity ] areas + , Svg.g [ Attributes.class "chart__tops" ] bottoms + ] viewSingle : Arguments data -> Series data -> List (Data.Data data) -> ( Svg.Svg msg, Svg.Svg msg, Svg.Svg msg ) viewSingle arguments line_ data_ = - let - -- Parting - sections = - Utils.part .isReal data_ [] [] - - parts = - List.map Tuple.first sections - - -- Style - style_ = - arguments.lineConfig |> \(Config look) -> look (List.map .user data_) - - -- Dots - viewDots = - parts - |> List.concat - |> List.filter (Data.isWithinRange arguments.system << .point) - |> List.map (viewDot arguments line_ style_) - |> Svg.g [ Attributes.class "chart__dots" ] - - -- Interpolations - commands = - Interpolation.toCommands arguments.interpolation sections - - viewAreas () = - Svg.g - [ Attributes.class "chart__interpolation__area" ] <| - List.map2 (viewArea arguments line_ style_) commands parts - - viewSeriess = - Svg.g - [ Attributes.class "chart__interpolation__line" ] <| - List.map2 (viewSeries arguments line_ style_) commands parts - in - ( Utils.viewIf (Area.hasArea arguments.area) viewAreas - , viewSeriess - , viewDots - ) + let + -- Parting + sections = + Utils.part .isReal data_ [] [] + + parts = + List.map Tuple.first sections + + -- Style + style_ = + arguments.lineConfig |> (\(Config look) -> look (List.map .user data_)) + + -- Dots + viewDots = + parts + |> List.concat + |> List.filter (Data.isWithinRange arguments.system << .point) + |> List.map (viewDot arguments line_ style_) + |> Svg.g [ Attributes.class "chart__dots" ] + + -- Interpolations + commands = + Interpolation.toCommands arguments.interpolation sections + + viewAreas () = + Svg.g + [ Attributes.class "chart__interpolation__area" ] + <| + List.map2 (viewArea arguments line_ style_) commands parts + + viewSeriess = + Svg.g + [ Attributes.class "chart__interpolation__line" ] + <| + List.map2 (viewSeries arguments line_ style_) commands parts + in + ( Utils.viewIf (Area.hasArea arguments.area) viewAreas + , viewSeriess + , viewDots + ) @@ -232,12 +250,12 @@ viewSingle arguments line_ data_ = viewDot : Arguments data -> Series data -> Style -> Data.Data data -> Svg.Svg msg viewDot arguments (Series lineConfig) (Style style_) = - Dot.view - { system = arguments.system - , dotsConfig = arguments.dotsConfig - , shape = lineConfig.shape - , color = style_.color lineConfig.color - } + Dot.view + { system = arguments.system + , dotsConfig = arguments.dotsConfig + , shape = lineConfig.shape + , color = style_.color lineConfig.color + } @@ -246,23 +264,24 @@ viewDot arguments (Series lineConfig) (Style style_) = viewSeries : Arguments data -> Series data -> Style -> List Path.Command -> List (Data.Data data) -> Svg.Svg msg viewSeries { system, lineConfig } line_ style_ interpolation data_ = - let - attributes = - Junk.withinChartArea system :: toSeriesAttributes line_ style_ - in - Utils.viewWithFirst data_ <| \first _ -> - Path.view system attributes (Path.Move first.point :: interpolation) + let + attributes = + Junk.withinChartArea system :: toSeriesAttributes line_ style_ + in + Utils.viewWithFirst data_ <| + \first _ -> + Path.view system attributes (Path.Move first.point :: interpolation) toSeriesAttributes : Series data -> Style -> List (Svg.Attribute msg) toSeriesAttributes (Series serie) (Style style_) = - [ Attributes.style "pointer-events: none;" - , Attributes.class "chart__interpolation__line__fragment" - , Attributes.stroke (Color.toCssString (style_.color serie.color)) - , Attributes.strokeWidth (String.fromFloat style_.width) - , Attributes.strokeDasharray (String.join " " (List.map String.fromFloat serie.dashing)) - , Attributes.fill "transparent" - ] + [ Attributes.style "pointer-events: none;" + , Attributes.class "chart__interpolation__line__fragment" + , Attributes.stroke (Color.toCssString (style_.color serie.color)) + , Attributes.strokeWidth (String.fromFloat style_.width) + , Attributes.strokeDasharray (String.join " " (List.map String.fromFloat serie.dashing)) + , Attributes.fill "transparent" + ] @@ -271,29 +290,31 @@ toSeriesAttributes (Series serie) (Style style_) = viewArea : Arguments data -> Series data -> Style -> List Path.Command -> List (Data.Data data) -> Svg.Svg msg viewArea { system, lineConfig, area } line_ style_ interpolation data_ = - let - ground point = - Data.Point point.x (Utils.towardsZero system.y) - - attributes = - Junk.withinChartArea system - :: Attributes.fillOpacity (String.fromFloat (Area.opacitySingle area)) - :: toAreaAttributes line_ style_ area - - commands first middle last = - Utils.concat - [ Path.Move (ground <| Path.toPoint first), Path.Line (Path.toPoint first) ] interpolation - [ Path.Line (ground <| Path.toPoint last) ] - in - Utils.viewWithEdges interpolation <| \first middle last -> - Path.view system attributes (commands first middle last) + let + ground point = + Data.Point point.x (Utils.towardsZero system.y) + + attributes = + Junk.withinChartArea system + :: Attributes.fillOpacity (String.fromFloat (Area.opacitySingle area)) + :: toAreaAttributes line_ style_ area + + commands first middle last = + Utils.concat + [ Path.Move (ground <| Path.toPoint first), Path.Line (Path.toPoint first) ] + interpolation + [ Path.Line (ground <| Path.toPoint last) ] + in + Utils.viewWithEdges interpolation <| + \first middle last -> + Path.view system attributes (commands first middle last) toAreaAttributes : Series data -> Style -> Area.Config -> List (Svg.Attribute msg) toAreaAttributes (Series serie) (Style style_) area = - [ Attributes.class "chart__interpolation__area__fragment" - , Attributes.fill (Color.toCssString (style_.color serie.color)) - ] + [ Attributes.class "chart__interpolation__area__fragment" + , Attributes.fill (Color.toCssString (style_.color serie.color)) + ] @@ -303,35 +324,35 @@ toAreaAttributes (Series serie) (Style style_) area = {-| -} viewSample : Config data -> Series data -> Area.Config -> List (Data.Data data) -> Float -> Svg.Svg msg viewSample (Config look) line_ area data_ sampleWidth = - let - style_ = - look (List.map .user data_) - - lineAttributes = - toSeriesAttributes line_ style_ - - sizeAttributes = - [ Attributes.x1 "0" - , Attributes.y1 "0" - , Attributes.x2 (String.fromFloat sampleWidth) - , Attributes.y2 "0" - ] - - areaAttributes = - Attributes.fillOpacity (String.fromFloat (Area.opacity area)) - :: toAreaAttributes line_ style_ area - - rectangleAttributes = - [ Attributes.x "0" - , Attributes.y "0" - , Attributes.height "9" - , Attributes.width (String.fromFloat sampleWidth) - ] - - viewRectangle () = - Svg.rect (areaAttributes ++ rectangleAttributes) [] - in - Svg.g [] - [ Svg.line (lineAttributes ++ sizeAttributes) [] - , Utils.viewIf (Area.hasArea area) viewRectangle - ] + let + style_ = + look (List.map .user data_) + + lineAttributes = + toSeriesAttributes line_ style_ + + sizeAttributes = + [ Attributes.x1 "0" + , Attributes.y1 "0" + , Attributes.x2 (String.fromFloat sampleWidth) + , Attributes.y2 "0" + ] + + areaAttributes = + Attributes.fillOpacity (String.fromFloat (Area.opacity area)) + :: toAreaAttributes line_ style_ area + + rectangleAttributes = + [ Attributes.x "0" + , Attributes.y "0" + , Attributes.height "9" + , Attributes.width (String.fromFloat sampleWidth) + ] + + viewRectangle () = + Svg.rect (areaAttributes ++ rectangleAttributes) [] + in + Svg.g [] + [ Svg.line (lineAttributes ++ sizeAttributes) [] + , Utils.viewIf (Area.hasArea area) viewRectangle + ] diff --git a/src/Internal/Path.elm b/src/Internal/Path.elm index bdb17da..799603c 100644 --- a/src/Internal/Path.elm +++ b/src/Internal/Path.elm @@ -1,4 +1,7 @@ -module Internal.Path exposing (Command(..), view, toPoint) +module Internal.Path exposing + ( Command(..), view + , toPoint + ) {-| SVG path commands. @@ -6,35 +9,34 @@ module Internal.Path exposing (Command(..), view, toPoint) -} -import Svg exposing (Svg, Attribute) -import Svg.Attributes exposing (d) import LineChart.Coordinate as Coordinate exposing (..) - +import Svg exposing (Attribute, Svg) +import Svg.Attributes exposing (d) {-| -} type Command - = Move Point - | Line Point - | Horizontal Float - | Vertical Float - | CubicBeziers Point Point Point - | CubicBeziersShort Point Point - | QuadraticBeziers Point Point - | QuadraticBeziersShort Point - | Arc Float Float Int Bool Bool Point - | Close + = Move Point + | Line Point + | Horizontal Float + | Vertical Float + | CubicBeziers Point Point Point + | CubicBeziersShort Point Point + | QuadraticBeziers Point Point + | QuadraticBeziersShort Point + | Arc Float Float Int Bool Bool Point + | Close {-| Makes a path SVG element, translating your commands with the provided system. view = - Svg.Path.view system attributes commands + Svg.Path.view system attributes commands -} view : Coordinate.System -> List (Attribute msg) -> List Command -> Svg msg view system attributes commands = - viewPath <| attributes ++ [ d (description system commands) ] + viewPath <| attributes ++ [ d (description system commands) ] @@ -43,92 +45,130 @@ view system attributes commands = viewPath : List (Attribute msg) -> Svg msg viewPath attributes = - Svg.path attributes [] + Svg.path attributes [] description : System -> List Command -> String description system commands = - join (List.map (translate system >> toString) commands) + join (List.map (translate system >> toString) commands) toPoint : Command -> Point toPoint command = - case command of - Close -> Point 0 0 + case command of + Close -> + Point 0 0 + + Move p -> + p + + Line p -> + p + + Horizontal x -> + Point x 0 - Move p -> p - Line p -> p - Horizontal x -> Point x 0 - Vertical y -> Point 0 y + Vertical y -> + Point 0 y - CubicBeziers c1 c2 p -> p - CubicBeziersShort c1 p -> p - QuadraticBeziers c1 p -> p - QuadraticBeziersShort p -> p + CubicBeziers c1 c2 p -> + p - Arc rx ry xAxisRotation largeArcFlag sweepFlag p -> - p + CubicBeziersShort c1 p -> + p + + QuadraticBeziers c1 p -> + p + + QuadraticBeziersShort p -> + p + + Arc rx ry xAxisRotation largeArcFlag sweepFlag p -> + p toString : Command -> String toString command = - case command of - Close -> "Z" - - Move p -> "M" ++ point p - Line p -> "L" ++ point p - Horizontal x -> "H" ++ String.fromFloat x - Vertical y -> "V" ++ String.fromFloat y - - CubicBeziers c1 c2 p -> "C" ++ points [ c1, c2, p ] - CubicBeziersShort c1 p -> "Q" ++ points [ c1, p ] - QuadraticBeziers c1 p -> "Q" ++ points [ c1, p ] - QuadraticBeziersShort p -> "T" ++ point p - - Arc rx ry xAxisRotation largeArcFlag sweepFlag p -> - "A" ++ join - [ String.fromFloat rx - , String.fromFloat ry - , String.fromInt xAxisRotation - , bool largeArcFlag - , bool sweepFlag - , point p - ] + case command of + Close -> + "Z" + + Move p -> + "M" ++ point p + + Line p -> + "L" ++ point p + + Horizontal x -> + "H" ++ String.fromFloat x + + Vertical y -> + "V" ++ String.fromFloat y + + CubicBeziers c1 c2 p -> + "C" ++ points [ c1, c2, p ] + + CubicBeziersShort c1 p -> + "Q" ++ points [ c1, p ] + + QuadraticBeziers c1 p -> + "Q" ++ points [ c1, p ] + + QuadraticBeziersShort p -> + "T" ++ point p + + Arc rx ry xAxisRotation largeArcFlag sweepFlag p -> + "A" + ++ join + [ String.fromFloat rx + , String.fromFloat ry + , String.fromInt xAxisRotation + , bool largeArcFlag + , bool sweepFlag + , point p + ] translate : System -> Command -> Command translate system command = - case command of - Move p -> Move (toSvg system p) - Line p -> Line (toSvg system p) - Horizontal x -> Horizontal (toSvgX system x) - Vertical y -> Vertical (toSvgY system y) + case command of + Move p -> + Move (toSvg system p) + + Line p -> + Line (toSvg system p) + + Horizontal x -> + Horizontal (toSvgX system x) - CubicBeziers c1 c2 p -> - CubicBeziers - (toSvg system c1) - (toSvg system c2) - (toSvg system p) + Vertical y -> + Vertical (toSvgY system y) - CubicBeziersShort c1 p -> - CubicBeziersShort - (toSvg system c1) - (toSvg system p) + CubicBeziers c1 c2 p -> + CubicBeziers + (toSvg system c1) + (toSvg system c2) + (toSvg system p) - QuadraticBeziers c1 p -> - QuadraticBeziers - (toSvg system c1) - (toSvg system p) + CubicBeziersShort c1 p -> + CubicBeziersShort + (toSvg system c1) + (toSvg system p) - QuadraticBeziersShort p -> - QuadraticBeziersShort - (toSvg system p) + QuadraticBeziers c1 p -> + QuadraticBeziers + (toSvg system c1) + (toSvg system p) - Arc rx ry xAxisRotation largeArcFlag sweepFlag p -> - Arc rx ry xAxisRotation largeArcFlag sweepFlag (toSvg system p) + QuadraticBeziersShort p -> + QuadraticBeziersShort + (toSvg system p) - Close -> - Close + Arc rx ry xAxisRotation largeArcFlag sweepFlag p -> + Arc rx ry xAxisRotation largeArcFlag sweepFlag (toSvg system p) + + Close -> + Close @@ -137,19 +177,23 @@ translate system command = join : List String -> String join commands = - String.join " " commands + String.join " " commands point : Point -> String point point_ = - String.fromFloat point_.x ++ " " ++ String.fromFloat point_.y + String.fromFloat point_.x ++ " " ++ String.fromFloat point_.y points : List Point -> String points points_ = - String.join "," (List.map point points_) + String.join "," (List.map point points_) bool : Bool -> String bool bool_ = - if bool_ then "1" else "0" + if bool_ then + "1" + + else + "0" diff --git a/src/Internal/Svg.elm b/src/Internal/Svg.elm index 3453758..20cdaed 100644 --- a/src/Internal/Svg.elm +++ b/src/Internal/Svg.elm @@ -1,63 +1,80 @@ module Internal.Svg exposing - ( gridDot - , horizontal, vertical - , rectangle - , horizontalGrid, verticalGrid - , xTick, yTick - , label - , Anchor(..), anchorStyle - , Transfrom, transform, move, offset - , withinChartArea - ) + ( horizontal, vertical + , rectangle + , gridDot + , horizontalGrid, verticalGrid + , xTick, yTick + , label + , Anchor(..), anchorStyle + , Transfrom, transform, move, offset + , withinChartArea + ) {-| + # Lines + @docs horizontal, vertical + # Rectangles + @docs rectangle + # Grids + ## Dots + @docs gridDot + ## Lines + @docs horizontalGrid, verticalGrid + # Axis + @docs xTick, yTick + # Helpers + ## Label + @docs label + ## Anchor + @docs Anchor, anchorStyle + ## Transfrom + @docs Transfrom, transform, move, offset @docs withinChartArea -} -import Svg exposing (Svg, Attribute, g) -import Svg.Attributes as Attributes -import LineChart.Colors as Colors -import LineChart.Coordinate as Coordinate exposing (..) +import Color import Internal.Path as Path exposing (..) import Internal.Utils exposing (..) -import Color - +import LineChart.Colors as Colors +import LineChart.Coordinate as Coordinate exposing (..) +import Svg exposing (Attribute, Svg, g) +import Svg.Attributes as Attributes {-| -} withinChartArea : Coordinate.System -> Svg.Attribute msg withinChartArea { id } = - Attributes.clipPath <| "url(#" ++ toChartAreaId id ++ ")" + Attributes.clipPath <| "url(#" ++ toChartAreaId id ++ ")" @@ -67,13 +84,13 @@ withinChartArea { id } = {-| -} gridDot : Float -> Color.Color -> Point -> Svg msg gridDot radius color point = - Svg.circle - [ Attributes.cx (String.fromFloat point.x) - , Attributes.cy (String.fromFloat point.y) - , Attributes.r (String.fromFloat radius) - , Attributes.fill (Color.toCssString color) - ] - [] + Svg.circle + [ Attributes.cx (String.fromFloat point.x) + , Attributes.cy (String.fromFloat point.y) + , Attributes.r (String.fromFloat radius) + , Attributes.fill (Color.toCssString color) + ] + [] @@ -83,78 +100,90 @@ gridDot radius color point = {-| -} horizontal : Coordinate.System -> List (Attribute msg) -> Float -> Float -> Float -> Svg msg horizontal system userAttributes y x1 x2 = - let - attributes = - concat - [ Attributes.stroke (Color.toCssString Colors.gray) - , Attributes.style "pointer-events: none;" - ] userAttributes [] - in - Path.view system attributes - [ Move { x = x1, y = y } - , Line { x = x1, y = y } - , Line { x = x2, y = y } - ] + let + attributes = + concat + [ Attributes.stroke (Color.toCssString Colors.gray) + , Attributes.style "pointer-events: none;" + ] + userAttributes + [] + in + Path.view system + attributes + [ Move { x = x1, y = y } + , Line { x = x1, y = y } + , Line { x = x2, y = y } + ] {-| -} vertical : Coordinate.System -> List (Attribute msg) -> Float -> Float -> Float -> Svg msg vertical system userAttributes x y1 y2 = - let - attributes = - concat - [ Attributes.stroke (Color.toCssString Colors.gray) - , Attributes.style "pointer-events: none;" - ] userAttributes [] - in - Path.view system attributes - [ Move { x = x, y = y1 } - , Line { x = x, y = y1 } - , Line { x = x, y = y2 } - ] + let + attributes = + concat + [ Attributes.stroke (Color.toCssString Colors.gray) + , Attributes.style "pointer-events: none;" + ] + userAttributes + [] + in + Path.view system + attributes + [ Move { x = x, y = y1 } + , Line { x = x, y = y1 } + , Line { x = x, y = y2 } + ] {-| -} rectangle : Coordinate.System -> List (Attribute msg) -> Float -> Float -> Float -> Float -> Svg msg rectangle system userAttributes x1 x2 y1 y2 = - let - attributes = - concat - [ Attributes.fill (Color.toCssString Colors.gray) ] - userAttributes [] - in - Path.view system attributes - [ Move { x = x1, y = y1 } - , Line { x = x1, y = y2 } - , Line { x = x2, y = y2 } - , Line { x = x2, y = y1 } - ] + let + attributes = + concat + [ Attributes.fill (Color.toCssString Colors.gray) ] + userAttributes + [] + in + Path.view system + attributes + [ Move { x = x1, y = y1 } + , Line { x = x1, y = y2 } + , Line { x = x2, y = y2 } + , Line { x = x2, y = y1 } + ] {-| -} horizontalGrid : Coordinate.System -> List (Attribute msg) -> Float -> Svg msg horizontalGrid system userAttributes y = - let - attributes = - concat - [ Attributes.stroke (Color.toCssString Colors.gray) - , Attributes.style "pointer-events: none;" - ] userAttributes [] - in - horizontal system attributes y system.x.min system.x.max + let + attributes = + concat + [ Attributes.stroke (Color.toCssString Colors.gray) + , Attributes.style "pointer-events: none;" + ] + userAttributes + [] + in + horizontal system attributes y system.x.min system.x.max {-| -} verticalGrid : Coordinate.System -> List (Attribute msg) -> Float -> Svg msg verticalGrid system userAttributes x = - let - attributes = - concat - [ Attributes.stroke (Color.toCssString Colors.gray) - , Attributes.style "pointer-events: none;" - ] userAttributes [] - in - vertical system attributes x system.y.min system.y.max + let + attributes = + concat + [ Attributes.stroke (Color.toCssString Colors.gray) + , Attributes.style "pointer-events: none;" + ] + userAttributes + [] + in + vertical system attributes x system.y.min system.y.max @@ -164,36 +193,36 @@ verticalGrid system userAttributes x = {-| -} xTick : Coordinate.System -> Float -> List (Attribute msg) -> Float -> Float -> Svg msg xTick system height userAttributes y x = - let - attributes = - concat - [ Attributes.stroke (Color.toCssString Colors.gray) ] - userAttributes - [ Attributes.x1 <| String.fromFloat (toSvgX system x) - , Attributes.x2 <| String.fromFloat (toSvgX system x) - , Attributes.y1 <| String.fromFloat (toSvgY system y) - , Attributes.y2 <| String.fromFloat (toSvgY system y + height) - ] - in + let + attributes = + concat + [ Attributes.stroke (Color.toCssString Colors.gray) ] + userAttributes + [ Attributes.x1 <| String.fromFloat (toSvgX system x) + , Attributes.x2 <| String.fromFloat (toSvgX system x) + , Attributes.y1 <| String.fromFloat (toSvgY system y) + , Attributes.y2 <| String.fromFloat (toSvgY system y + height) + ] + in Svg.line attributes [] {-| -} yTick : Coordinate.System -> Float -> List (Attribute msg) -> Float -> Float -> Svg msg yTick system width userAttributes x y = - let - attributes = - concat - [ Attributes.class "chart__tick" - , Attributes.stroke (Color.toCssString Colors.gray) - ] - userAttributes - [ Attributes.x1 <| String.fromFloat (toSvgX system x) - , Attributes.x2 <| String.fromFloat (toSvgX system x - width) - , Attributes.y1 <| String.fromFloat (toSvgY system y) - , Attributes.y2 <| String.fromFloat (toSvgY system y) - ] - in + let + attributes = + concat + [ Attributes.class "chart__tick" + , Attributes.stroke (Color.toCssString Colors.gray) + ] + userAttributes + [ Attributes.x1 <| String.fromFloat (toSvgX system x) + , Attributes.x2 <| String.fromFloat (toSvgX system x - width) + , Attributes.y1 <| String.fromFloat (toSvgY system y) + , Attributes.y2 <| String.fromFloat (toSvgY system y) + ] + in Svg.line attributes [] @@ -204,11 +233,12 @@ yTick system width userAttributes x y = {-| -} label : String -> String -> Svg.Svg msg label color string = - Svg.text_ - [ Attributes.fill color - , Attributes.style "pointer-events: none;" - ] - [ Svg.tspan [] [ Svg.text string ] ] + Svg.text_ + [ Attributes.fill color + , Attributes.style "pointer-events: none;" + ] + [ Svg.tspan [] [ Svg.text string ] ] + -- ANCHOR @@ -216,22 +246,27 @@ label color string = {-| -} type Anchor - = Start - | Middle - | End + = Start + | Middle + | End {-| -} anchorStyle : Anchor -> Svg.Attribute msg anchorStyle anchor = - let - anchorString = - case anchor of - Start -> "start" - Middle -> "middle" - End -> "end" - in - Attributes.style <| "text-anchor: " ++ anchorString ++ ";" + let + anchorString = + case anchor of + Start -> + "start" + + Middle -> + "middle" + + End -> + "end" + in + Attributes.style <| "text-anchor: " ++ anchorString ++ ";" @@ -239,38 +274,42 @@ anchorStyle anchor = {-| -} -type Transfrom = - Transfrom Float Float +type Transfrom + = Transfrom Float Float {-| -} move : Coordinate.System -> Float -> Float -> Transfrom move system x y = - Transfrom (toSvgX system x) (toSvgY system y) + Transfrom (toSvgX system x) (toSvgY system y) {-| -} offset : Float -> Float -> Transfrom offset x y = - Transfrom x y + Transfrom x y {-| -} transform : List Transfrom -> Svg.Attribute msg transform translations = - let - (Transfrom x y) = - toPosition translations - in - Attributes.transform <| - "translate(" ++ String.fromFloat x ++ ", " ++ String.fromFloat y ++ ")" + let + (Transfrom x y) = + toPosition translations + in + Attributes.transform <| + "translate(" + ++ String.fromFloat x + ++ ", " + ++ String.fromFloat y + ++ ")" toPosition : List Transfrom -> Transfrom toPosition = - List.foldr addPosition (Transfrom 0 0) + List.foldr addPosition (Transfrom 0 0) addPosition : Transfrom -> Transfrom -> Transfrom addPosition (Transfrom x y) (Transfrom xf yf) = - Transfrom (xf + x) (yf + y) + Transfrom (xf + x) (yf + y) diff --git a/src/Internal/Utils.elm b/src/Internal/Utils.elm index eeab1d8..b3cb9fe 100644 --- a/src/Internal/Utils.elm +++ b/src/Internal/Utils.elm @@ -1,10 +1,10 @@ -module Internal.Utils exposing (..) +module Internal.Utils exposing (apply, apply2, concat, indexedMap2, last, lastSafe, magnitude, nonEmptyList, part, toChartAreaId, towardsZero, unzip3, viewIf, viewMaybe, viewMaybeHtml, viewWithEdges, viewWithFirst, withFirst) {-| -} import Html -import Svg import LineChart.Coordinate as Coordinate +import Svg @@ -26,39 +26,45 @@ apply2 stuff1 stuff2 toNewStuff = {-| -} concat : List a -> List a -> List a -> List a concat first second third = - first ++ second ++ third + first ++ second ++ third {-| -} -unzip3 : List (a,b,c) -> (List a, List b, List c) +unzip3 : List ( a, b, c ) -> ( List a, List b, List c ) unzip3 pairs = - let - step (a,b,c) (aas,bs,cs) = - (a :: aas, b :: bs, c :: cs) - in - List.foldr step ([], [], []) pairs + let + step ( a, b, c ) ( aas, bs, cs ) = + ( a :: aas, b :: bs, c :: cs ) + in + List.foldr step ( [], [], [] ) pairs {-| -} indexedMap2 : (Int -> a -> b -> c) -> List a -> List b -> List c indexedMap2 f a b = - let - collect a_ b_ i c = - case ( a_, b_ ) of - ( a0 :: a__, b0 :: b__ ) -> collect a__ b__ (i + 1) <| c ++ [ f i a0 b0 ] - ( [], _ ) -> c - ( _, [] ) -> c - in - collect a b 0 [] + let + collect a_ b_ i c = + case ( a_, b_ ) of + ( a0 :: a__, b0 :: b__ ) -> + collect a__ b__ (i + 1) <| c ++ [ f i a0 b0 ] + + ( [], _ ) -> + c + + ( _, [] ) -> + c + in + collect a b 0 [] {-| -} viewIf : Bool -> (() -> Svg.Svg msg) -> Svg.Svg msg viewIf condition view = - if condition then - view () - else - Svg.text "" + if condition then + view () + + else + Svg.text "" {-| -} @@ -76,83 +82,86 @@ viewMaybeHtml a view = {-| -} nonEmptyList : List a -> Maybe (List a) nonEmptyList list = - if List.isEmpty list - then Nothing - else Just list + if List.isEmpty list then + Nothing + + else + Just list {-| -} withFirst : List a -> (a -> List a -> b) -> Maybe b withFirst stuff process = - case stuff of - first :: rest -> - Just (process first rest) + case stuff of + first :: rest -> + Just (process first rest) - _ -> - Nothing + _ -> + Nothing {-| -} viewWithFirst : List a -> (a -> List a -> Svg.Svg msg) -> Svg.Svg msg viewWithFirst stuff view = - case stuff of - first :: rest -> - view first rest + case stuff of + first :: rest -> + view first rest - _ -> - Svg.text "" + _ -> + Svg.text "" {-| -} viewWithEdges : List a -> (a -> List a -> a -> Svg.Svg msg) -> Svg.Svg msg viewWithEdges stuff view = - case stuff of - first :: rest -> - view first rest (lastSafe first rest) + case stuff of + first :: rest -> + view first rest (lastSafe first rest) - _ -> - Svg.text "" + _ -> + Svg.text "" {-| -} towardsZero : Coordinate.Range -> Float towardsZero { max, min } = - clamp min max 0 + clamp min max 0 {-| -} last : List a -> Maybe a last list = - List.head (List.drop (List.length list - 1) list) + List.head (List.drop (List.length list - 1) list) {-| -} lastSafe : a -> List a -> a lastSafe first rest = - Maybe.withDefault first (last rest) + Maybe.withDefault first (last rest) {-| -} toChartAreaId : String -> String toChartAreaId id = - "chart__chart-area--" ++ id + "chart__chart-area--" ++ id {-| -} magnitude : Float -> Float magnitude num = - toFloat <| 10 ^ (floor (logBase e num / logBase e 10)) + toFloat <| 10 ^ floor (logBase e num / logBase e 10) {-| -} part : (a -> Bool) -> List a -> List a -> List ( List a, Maybe a ) -> List ( List a, Maybe a ) part isReal points current parts = - case points of - first :: rest -> - if isReal first then - part isReal rest (current ++ [first]) parts - else - part isReal rest [] ( ( current, Just first ) :: parts) - - [] -> - ( current, Nothing ) :: parts + case points of + first :: rest -> + if isReal first then + part isReal rest (current ++ [ first ]) parts + + else + part isReal rest [] (( current, Just first ) :: parts) + + [] -> + ( current, Nothing ) :: parts diff --git a/src/LineChart.elm b/src/LineChart.elm index 07dcb75..4255e9e 100644 --- a/src/LineChart.elm +++ b/src/LineChart.elm @@ -1,126 +1,128 @@ module LineChart exposing - ( view1, view2, view3 - , view, Series, line, dash - , viewCustom, Config - ) + ( view1, view2, view3 + , view, Series, line, dash + , viewCustom, Config + ) {-| + ## Table of contents + ### Quick start + > [view1](#view1) for visualizing a single data series.
> [view2](#view2) for visualizing two data series.
> [view3](#view3) for visualizing three data series.
+ ### Customizing lines -> [view](#view) for visualizing *any* amount of data series.
+ +> [view](#view) for visualizing _any_ amount of data series.
> [line](#line) for configuring color, dot etc. of a line representing a data series.
-> [dash](#dash) for configuring color, dot etc. of a *dashed* line representing a data series.
+> [dash](#dash) for configuring color, dot etc. of a _dashed_ line representing a data series.
+ ### Customizing everything -> [viewCustom](#viewCustom) for configuring any other aspect of the chart (axis, area, etc.).
+> [viewCustom](#viewCustom) for configuring any other aspect of the chart (axis, area, etc.).
# Quick start + @docs view1, view2, view3 + # Customizing lines + @docs view, Series, line, dash + # Customizing everything + @docs viewCustom, Config -} +import Color import Html import Html.Attributes -import Svg -import Svg.Attributes - -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.Colors as Colors -import LineChart.Events as Events -import LineChart.Legends as Legends -import LineChart.Container as Container -import LineChart.Interpolation as Interpolation -import LineChart.Axis.Intersection as Intersection - import Internal.Area import Internal.Axis -import Internal.Junk +import Internal.Axis.Range +import Internal.Container +import Internal.Coordinate as Coordinate +import Internal.Data as Data import Internal.Dots -import Internal.Grid -import Internal.Line import Internal.Events +import Internal.Grid +import Internal.Junk import Internal.Legends -import Internal.Container -import Internal.Axis.Range - -import Internal.Data as Data +import Internal.Line import Internal.Utils as Utils -import Internal.Coordinate as Coordinate -import Color +import LineChart.Area as Area +import LineChart.Axis as Axis +import LineChart.Axis.Intersection as Intersection +import LineChart.Colors as Colors +import LineChart.Container as Container +import LineChart.Dots as Dots +import LineChart.Events as Events +import LineChart.Grid as Grid +import LineChart.Interpolation as Interpolation +import LineChart.Junk as Junk +import LineChart.Legends as Legends +import LineChart.Line as Line +import Svg +import Svg.Attributes -- VIEW / SIMPLE -{-| - -** Show a line chart ** +{-| \*\* Show a line chart \*\* type alias Point = - { x : Float, y : Float } + { x : Float, y : Float } chart : Html msg chart = - LineChart.view1 .x .y - [ Point 0 2, Point 5 5, Point 10 10 ] - + LineChart.view1 .x + .y + [ Point 0 2, Point 5 5, Point 10 10 ] _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/LineChart/Example1.elm)._ - -** Choosing your variables ** +\*\* Choosing your variables \*\* Notice that we provide `.x` and `.y` to specify which data we want to show. So if we had more complex data structures, like a human with an `age`, `weight`, `height`, and `income`, we can easily pick which two properties we want to plot: + chart : Html msg chart = - LineChart.view1 .age .weight - [ Human 4 24 0.94 0 - , Human 25 75 1.73 25000 - , Human 43 83 1.75 40000 - ] + LineChart.view1 .age + .weight + [ Human 4 24 0.94 0 + , Human 25 75 1.73 25000 + , Human 43 83 1.75 40000 + ] -- Try changing .weight to .height - Chart Result _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/LineChart/Example2.elm)._ - -** Use any function to determine inputs ** +\*\* Use any function to determine inputs \*\* Rather than using data like `.weight` directly, you can make a function like `bmi human = human.weight / human.height ^ 2` and create a chart of `.age` vs `bmi`. This allows you to keep your data set nice and minimal! - -** The whole chart is just a function ** +\*\* The whole chart is just a function \*\* `view1` is just a function, so it will update as your data changes. If you get more data points or some data points are changed, the chart @@ -129,42 +131,35 @@ refreshes automatically! -} view1 : (data -> Float) -> (data -> Float) -> List data -> Svg.Svg msg view1 toX toY dataset = - view toX toY <| defaultLines [ dataset ] + view toX toY <| defaultLines [ dataset ] -{-| - -** Show a line chart with two lines ** +{-| \*\* Show a line chart with two lines \*\* Say you have two humans and you would like to see how their weight relates to their age. Here's how you could plot it. chart : Html msg chart = - LineChart.view2 .age .weight alice chuck - + LineChart.view2 .age .weight alice chuck Chart Result _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/LineChart/Example3.elm)._ - -} view2 : (data -> Float) -> (data -> Float) -> List data -> List data -> Svg.Svg msg view2 toX toY dataset1 dataset2 = - view toX toY <| defaultLines [ dataset1, dataset2 ] + view toX toY <| defaultLines [ dataset1, dataset2 ] -{-| - -** Show a line chart with three lines ** +{-| \*\* Show a line chart with three lines \*\* It works just like `view1` and `view2`. chart : Html msg chart = - LineChart.view3 .age .weight alice bob chuck - + LineChart.view3 .age .weight alice bob chuck Chart Result @@ -172,104 +167,96 @@ _See the full example [here](https://github.com/terezka/line-charts/blob/master/ But what if you have more people? What if you have _four_ people?! In that case, check out `view`. + -} view3 : (data -> Float) -> (data -> Float) -> List data -> List data -> List data -> Svg.Svg msg view3 toX toY dataset1 dataset2 dataset3 = - view toX toY <| defaultLines [ dataset1, dataset2, dataset3 ] + view toX toY <| defaultLines [ dataset1, dataset2, dataset3 ] -- VIEW -{-| - -** Show any amount of lines ** +{-| \*\* Show any amount of lines \*\* If you want to change the color, the dot, or the title of a line, then see the `line` function. chart : Html msg chart = - LineChart.view .age .height - [ LineChart.line Colors.purple Dots.cross "Alice" alice - , LineChart.line Colors.blue Dots.square "Bobby" bobby - , LineChart.line Colors.cyan Dots.circle "Chuck" chuck - ] - + LineChart.view .age + .height + [ LineChart.line Colors.purple Dots.cross "Alice" alice + , LineChart.line Colors.blue Dots.square "Bobby" bobby + , LineChart.line Colors.cyan Dots.circle "Chuck" chuck + ] Chart Result _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/LineChart/Example5.elm)._ - See `viewCustom` for all other customizations. -} view : (data -> Float) -> (data -> Float) -> List (Series data) -> Svg.Svg msg view toX toY = - viewCustom (defaultConfig toX toY) + viewCustom (defaultConfig toX toY) {-| This is the type holds the visual configuration representing a _series_ of data. Definition of _series_: + > a number of events, objects, or people of a similar or related kind coming one after another. -** Examples of customizations ** +\*\* Examples of customizations \*\* See the `line` and `dash` functions for more information! - solidLine : LineChart.Series Human solidLine = - LineChart.line Colors.purple Dots.cross "Alice" alice - + LineChart.line Colors.purple Dots.cross "Alice" alice dashedLine : LineChart.Series Human dashedLine = - LineChart.dash Colors.purpleLight Dots.none "Average" [ 4, 2 ] average - + LineChart.dash Colors.purpleLight Dots.none "Average" [ 4, 2 ] average -} type alias Series data = - Internal.Line.Series data - + Internal.Line.Series data -{-| -** Customize a solid line ** +{-| \*\* Customize a solid line \*\* Try changing the color or explore all the available dot shapes from `LineChart.Dots`! chart : Html msg chart = - LineChart.view .age .weight - [ LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - , LineChart.line Colors.blueLight Dots.square "Chuck" chuck - ] + LineChart.view .age + .weight + [ LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + , LineChart.line Colors.blueLight Dots.square "Chuck" chuck + ] Chart Result _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/LineChart/Example6.elm)._ - -** Regarding the title ** +\*\* Regarding the title \*\* The string title will show up in the legends. If you are interested in customizing your legends, dot size or line width, check out `viewCustom`. - -} +-} line : Color.Color -> Dots.Shape -> String -> List data -> Series data line = - Internal.Line.line - + Internal.Line.line -{-| -** Customize a dashed line ** +{-| \*\* Customize a dashed line \*\* Works just like `line`, except it takes another argument which is an array of floats describing your dashing pattern. I recommend typing in random numbers and seeing what @@ -277,28 +264,30 @@ happens, but you alternativelly you can see the SVG `stroke-dasharray` [documentation](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray) for examples of patterns. + chart : Html msg chart = - LineChart.view .age .height - [ LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - , LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , dashedLine - ] + LineChart.view .age + .height + [ LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + , LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , dashedLine + ] dashedLine : LineChart.Series Human dashedLine = - LineChart.dash Colors.purpleLight Dots.none "Average" [ 4, 2 ] average - -- ^^^^^^^^ - -- (Scroll to the left to see the pattern!) - -- Try passing different numbers! + LineChart.dash Colors.purpleLight Dots.none "Average" [ 4, 2 ] average + + -- ^^^^^^^^ + -- (Scroll to the left to see the pattern!) + -- Try passing different numbers! Chart Result _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/LineChart/Example7.elm)._ - -** When should I use a dashed line? ** +\*\* When should I use a dashed line? \*\* Dashed lines are especially good for visualizing processed data like averages or predicted values. @@ -306,16 +295,14 @@ averages or predicted values. -} dash : Color.Color -> Dots.Shape -> String -> List Float -> List data -> Series data dash = - Internal.Line.dash + Internal.Line.dash -- VIEW / CUSTOM -{-| - -** Available customizations ** +{-| \*\* Available customizations \*\* Use with `viewCustom`. @@ -359,91 +346,84 @@ Use with `viewCustom`. SVG or HTML fun you can imagine.
_See [`LineChart.Junk`](http://package.elm-lang.org/packages/terezka/line-charts/latest/LineChart.Junk) for more information and examples._ - -** Example configuration ** +\*\* Example configuration \*\* A good start would be to copy it and play around with customizations available for each property. - chartConfig : Config Info msg chartConfig = - { y = Axis.default 400 "Age" .age - , x = Axis.default 700 "Weight" .weight - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } + { y = Axis.default 400 "Age" .age + , x = Axis.default 700 "Weight" .weight + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/LineChart/Example8.elm)._ -} type alias Config data msg = - { x : Axis.Config data msg - , y : Axis.Config data msg - , container : Container.Config msg - , intersection : Intersection.Config - , interpolation : Interpolation.Config - , legends : Legends.Config data msg - , events : Events.Config data msg - , area : Area.Config - , grid : Grid.Config - , line : Line.Config data - , dots : Dots.Config data - , junk : Junk.Config data msg - } - - - -{-| - -** Customize everything ** + { x : Axis.Config data msg + , y : Axis.Config data msg + , container : Container.Config msg + , intersection : Intersection.Config + , interpolation : Interpolation.Config + , legends : Legends.Config data msg + , events : Events.Config data msg + , area : Area.Config + , grid : Grid.Config + , line : Line.Config data + , dots : Dots.Config data + , junk : Junk.Config data msg + } + + +{-| \*\* Customize everything \*\* See the `Config` type for information about the available customizations. Or copy and play with the example below. No one will tell. -** Example customiztion ** +\*\* Example customiztion \*\* The example below makes the line chart an area chart. chart : Html msg chart = - LineChart.viewCustom chartConfig - [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck - , LineChart.line Colors.pinkLight Dots.plus "Alice" alice - , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby - ] + LineChart.viewCustom chartConfig + [ LineChart.line Colors.blueLight Dots.square "Chuck" chuck + , LineChart.line Colors.pinkLight Dots.plus "Alice" alice + , LineChart.line Colors.goldLight Dots.diamond "Bobby" bobby + ] chartConfig : Config Info msg chartConfig = - { y = Axis.default 400 "Age" .age - , x = Axis.default 700 "Weight" .weight - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.stacked 0.5 -- Changed from the default! - , line = Line.default - , dots = Dots.default - } - + { y = Axis.default 400 "Age" .age + , x = Axis.default 700 "Weight" .weight + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.stacked 0.5 -- Changed from the default! + , line = Line.default + , dots = Dots.default + } Chart Result _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/LineChart/Example9.elm)._ - -** Speaking of area charts ** +\*\* Speaking of area charts \*\* Remember that area charts are for data where the area under the curve _matters_. Typically, this would be when you have a quantity accumulating over time. @@ -456,78 +436,85 @@ trying to visualize, it's best to leave it out! -} viewCustom : Config data msg -> List (Series data) -> Svg.Svg msg viewCustom config lines = - let - -- Data - data = toDataPoints config lines - dataSafe = List.map (List.filter .isReal) data - dataAll = List.concat data - dataAllSafe = List.concat dataSafe - - -- System - system = - toSystem config dataAllSafe - - -- Junk - junkLineInfo line_ = - ( Internal.Line.color config.line line_ [] - , Internal.Line.label line_ - , Internal.Line.data line_ - ) - - getJunk = - Internal.Junk.getLayers - (List.map junkLineInfo lines) - (Internal.Axis.variable config.x) - (Internal.Axis.variable config.y) - - addGrid = - Internal.Junk.addBelow - (Internal.Grid.view system config.x config.y config.grid) - - junk = - getJunk system config.junk |> addGrid - - -- View - viewLines = - Internal.Line.view - { system = system - , interpolation = config.interpolation - , dotsConfig = config.dots - , lineConfig = config.line - , area = config.area - } - - viewLegends = - Internal.Legends.view - { system = system - , legends = config.legends - , x = Internal.Axis.variable config.x - , y = Internal.Axis.variable config.y - , dotsConfig = config.dots - , lineConfig = config.line - , area = config.area - , data = dataSafe - , lines = lines - } - - attributes = - List.concat - [ Internal.Container.properties .attributesSvg config.container - , Internal.Events.toContainerAttributes dataAll system config.events - , [ viewBoxAttribute system ] - ] - in - container config system junk.html <| - Svg.svg attributes - [ Svg.defs [] [ clipPath system ] - , Svg.g [ Svg.Attributes.class "chart__junk--below" ] junk.below - , viewLines lines data - , chartAreaPlatform config dataAll system - , Internal.Axis.viewHorizontal system config.intersection config.x - , Internal.Axis.viewVertical system config.intersection config.y - , viewLegends - , Svg.g [ Svg.Attributes.class "chart__junk--above" ] junk.above - ] + let + -- Data + data = + toDataPoints config lines + + dataSafe = + List.map (List.filter .isReal) data + + dataAll = + List.concat data + + dataAllSafe = + List.concat dataSafe + + -- System + system = + toSystem config dataAllSafe + + -- Junk + junkLineInfo line_ = + ( Internal.Line.color config.line line_ [] + , Internal.Line.label line_ + , Internal.Line.data line_ + ) + + getJunk = + Internal.Junk.getLayers + (List.map junkLineInfo lines) + (Internal.Axis.variable config.x) + (Internal.Axis.variable config.y) + + addGrid = + Internal.Junk.addBelow + (Internal.Grid.view system config.x config.y config.grid) + + junk = + getJunk system config.junk |> addGrid + + -- View + viewLines = + Internal.Line.view + { system = system + , interpolation = config.interpolation + , dotsConfig = config.dots + , lineConfig = config.line + , area = config.area + } + + viewLegends = + Internal.Legends.view + { system = system + , legends = config.legends + , x = Internal.Axis.variable config.x + , y = Internal.Axis.variable config.y + , dotsConfig = config.dots + , lineConfig = config.line + , area = config.area + , data = dataSafe + , lines = lines + } + + attributes = + List.concat + [ Internal.Container.properties .attributesSvg config.container + , Internal.Events.toContainerAttributes dataAll system config.events + , [ viewBoxAttribute system ] + ] + in + container config system junk.html <| + Svg.svg attributes + [ Svg.defs [] [ clipPath system ] + , Svg.g [ Svg.Attributes.class "chart__junk--below" ] junk.below + , viewLines lines data + , chartAreaPlatform config dataAll system + , Internal.Axis.viewHorizontal system config.intersection config.x + , Internal.Axis.viewVertical system config.intersection config.y + , viewLegends + , Svg.g [ Svg.Attributes.class "chart__junk--above" ] junk.above + ] @@ -536,176 +523,221 @@ viewCustom config lines = viewBoxAttribute : Coordinate.System -> Html.Attribute msg viewBoxAttribute { frame } = - Svg.Attributes.viewBox <| - "0 0 " ++ String.fromFloat frame.size.width ++ " " ++ String.fromFloat frame.size.height + Svg.Attributes.viewBox <| + "0 0 " + ++ String.fromFloat frame.size.width + ++ " " + ++ String.fromFloat frame.size.height container : Config data msg -> Coordinate.System -> List (Html.Html msg) -> Html.Html msg -> Html.Html msg container config { frame } junkHtml plot = - let - userAttributes = - Internal.Container.properties .attributesHtml config.container + let + userAttributes = + Internal.Container.properties .attributesHtml config.container - sizeStyles = - Internal.Container.sizeStyles config.container frame.size.width frame.size.height + sizeStyles = + Internal.Container.sizeStyles config.container frame.size.width frame.size.height - styles = - Html.Attributes.style "position" "relative" :: sizeStyles - in - Html.div (styles ++ userAttributes) (plot :: junkHtml) + styles = + Html.Attributes.style "position" "relative" :: sizeStyles + in + Html.div (styles ++ userAttributes) (plot :: junkHtml) chartAreaAttributes : Coordinate.System -> List (Svg.Attribute msg) chartAreaAttributes system = - [ Svg.Attributes.x <| String.fromFloat system.frame.margin.left - , Svg.Attributes.y <| String.fromFloat system.frame.margin.top - , Svg.Attributes.width <| String.fromFloat (Coordinate.lengthX system) - , Svg.Attributes.height <| String.fromFloat (Coordinate.lengthY system) - ] + [ Svg.Attributes.x <| String.fromFloat system.frame.margin.left + , Svg.Attributes.y <| String.fromFloat system.frame.margin.top + , Svg.Attributes.width <| String.fromFloat (Coordinate.lengthX system) + , Svg.Attributes.height <| String.fromFloat (Coordinate.lengthY system) + ] chartAreaPlatform : Config data msg -> List (Data.Data data) -> Coordinate.System -> Svg.Svg msg chartAreaPlatform config data system = - let - attributes = - List.concat - [ [ Svg.Attributes.fill "transparent" ] - , chartAreaAttributes system - , Internal.Events.toChartAttributes data system config.events - ] - in - Svg.rect attributes [] - - -clipPath : Coordinate.System -> Svg.Svg msg + let + attributes = + List.concat + [ [ Svg.Attributes.fill "transparent" ] + , chartAreaAttributes system + , Internal.Events.toChartAttributes data system config.events + ] + in + Svg.rect attributes [] + + +clipPath : Coordinate.System -> Svg.Svg msg clipPath system = - Svg.clipPath - [ Svg.Attributes.id (Utils.toChartAreaId system.id) ] - [ Svg.rect (chartAreaAttributes system) [] ] + Svg.clipPath + [ Svg.Attributes.id (Utils.toChartAreaId system.id) ] + [ Svg.rect (chartAreaAttributes system) [] ] toDataPoints : Config data msg -> List (Series data) -> List (List (Data.Data data)) toDataPoints config lines = - let - x = Internal.Axis.variable config.x - y = Internal.Axis.variable config.y - - data = - List.map (Internal.Line.data >> List.filterMap addPoint) lines - - addPoint datum = - case ( x datum, y datum ) of - ( Just x_, Just y_ ) -> Just <| Data.Data datum (Data.Point x_ y_) True - ( Just x_, Nothing ) -> Just <| Data.Data datum (Data.Point x_ 0) False - ( Nothing, Just y_ ) -> Nothing -- TODO not allowed - ( Nothing, Nothing ) -> Nothing - in - case config.area of - Internal.Area.None -> data - Internal.Area.Normal _ -> data - Internal.Area.Stacked _ -> stack data - Internal.Area.Percentage _ -> normalize (stack data) + let + x = + Internal.Axis.variable config.x + + y = + Internal.Axis.variable config.y + + data = + List.map (Internal.Line.data >> List.filterMap addPoint) lines + + addPoint datum = + case ( x datum, y datum ) of + ( Just x_, Just y_ ) -> + Just <| Data.Data datum (Data.Point x_ y_) True + + ( Just x_, Nothing ) -> + Just <| Data.Data datum (Data.Point x_ 0) False + + ( Nothing, Just y_ ) -> + Nothing + + -- TODO not allowed + ( Nothing, Nothing ) -> + Nothing + in + case config.area of + Internal.Area.None -> + data + + Internal.Area.Normal _ -> + data + + Internal.Area.Stacked _ -> + stack data + + Internal.Area.Percentage _ -> + normalize (stack data) stack : List (List (Data.Data data)) -> List (List (Data.Data data)) stack dataset = - let - stackBelows dataset_ result = - case dataset_ of - data :: belows -> - stackBelows belows <| - List.foldl addBelows data belows :: result + let + stackBelows dataset_ result = + case dataset_ of + data :: belows -> + stackBelows belows <| + List.foldl addBelows data belows + :: result - [] -> - result - in - List.reverse (stackBelows dataset []) + [] -> + result + in + List.reverse (stackBelows dataset []) addBelows : List (Data.Data data) -> List (Data.Data data) -> List (Data.Data data) addBelows alldata dataBelowAll = - let - iterate datum0 dataTop dataBelowTop result = - case ( dataTop, dataBelowTop ) of - ( datum1 :: data, datumBelow :: dataBelow ) -> - -- if the data point is after the point below, add it - if datum1.point.x > datumBelow.point.x - then - if datumBelow.isReal then - iterate datum0 (datum1 :: data) dataBelow (add datumBelow datum0 :: result) - else - let breakdata = { datum0 | isReal = False } in - iterate datum0 (datum1 :: data) dataBelow (add datumBelow datum0 :: result) - -- if not, try the next - else iterate datum1 data (datumBelow :: dataBelow) result - - ( [], datumBelow :: dataBelow ) -> - -- if the data point is after the point below, add it - if datum0.point.x <= datumBelow.point.x - then iterate datum0 [] dataBelow (add datumBelow datum0 :: result) - -- if not, try the next - else iterate datum0 [] dataBelow (datumBelow :: result) - - ( datum1 :: data, [] ) -> - result - - ( [], [] ) -> - result - - add below datum = - setY below (below.point.y + datum.point.y) - in - List.reverse <| Maybe.withDefault [] <| Utils.withFirst alldata <| \first rest -> - iterate first rest dataBelowAll [] + let + iterate datum0 dataTop dataBelowTop result = + case ( dataTop, dataBelowTop ) of + ( datum1 :: data, datumBelow :: dataBelow ) -> + -- if the data point is after the point below, add it + if datum1.point.x > datumBelow.point.x then + if datumBelow.isReal then + iterate datum0 (datum1 :: data) dataBelow (add datumBelow datum0 :: result) + + else + let + breakdata = + { datum0 | isReal = False } + in + iterate datum0 (datum1 :: data) dataBelow (add datumBelow datum0 :: result) + -- if not, try the next + + else + iterate datum1 data (datumBelow :: dataBelow) result + + ( [], datumBelow :: dataBelow ) -> + -- if the data point is after the point below, add it + if datum0.point.x <= datumBelow.point.x then + iterate datum0 [] dataBelow (add datumBelow datum0 :: result) + -- if not, try the next + + else + iterate datum0 [] dataBelow (datumBelow :: result) + + ( datum1 :: data, [] ) -> + result + + ( [], [] ) -> + result + + add below datum = + setY below (below.point.y + datum.point.y) + in + List.reverse <| + Maybe.withDefault [] <| + Utils.withFirst alldata <| + \first rest -> + iterate first rest dataBelowAll [] normalize : List (List (Data.Data data)) -> List (List (Data.Data data)) normalize datasets = - case datasets of - highest :: belows -> - let - toPercentage highest_ datum = - setY datum (100 * datum.point.y / highest_.point.y) - in - List.map (List.map2 toPercentage highest) (highest :: belows) + case datasets of + highest :: belows -> + let + toPercentage highest_ datum = + setY datum (100 * datum.point.y / highest_.point.y) + in + List.map (List.map2 toPercentage highest) (highest :: belows) - [] -> - datasets + [] -> + datasets setY : Data.Data data -> Float -> Data.Data data setY datum y = - Data.Data datum.user (Data.Point datum.point.x y) datum.isReal + Data.Data datum.user (Data.Point datum.point.x y) datum.isReal toSystem : Config data msg -> List (Data.Data data) -> Coordinate.System toSystem config data = - let - container_ = Internal.Container.properties identity config.container - hasArea = Internal.Area.hasArea config.area - size = Coordinate.Size (Internal.Axis.pixels config.x) (Internal.Axis.pixels config.y) - frame = Coordinate.Frame container_.margin size - xRange = Coordinate.range (.point >> .x) data - yRange = Coordinate.range (.point >> .y) data - - system = - { frame = frame - , x = xRange - , y = adjustDomainRange yRange - , xData = xRange - , yData = yRange - , id = container_.id - } - - adjustDomainRange domain = - if hasArea - then Coordinate.ground domain - else domain - in - { system - | x = Internal.Axis.Range.applyX (Internal.Axis.range config.x) system - , y = Internal.Axis.Range.applyY (Internal.Axis.range config.y) system - } + let + container_ = + Internal.Container.properties identity config.container + + hasArea = + Internal.Area.hasArea config.area + + size = + Coordinate.Size (Internal.Axis.pixels config.x) (Internal.Axis.pixels config.y) + + frame = + Coordinate.Frame container_.margin size + + xRange = + Coordinate.range (.point >> .x) data + + yRange = + Coordinate.range (.point >> .y) data + + system = + { frame = frame + , x = xRange + , y = adjustDomainRange yRange + , xData = xRange + , yData = yRange + , id = container_.id + } + + adjustDomainRange domain = + if hasArea then + Coordinate.ground domain + + else + domain + in + { system + | x = Internal.Axis.Range.applyX (Internal.Axis.range config.x) system + , y = Internal.Axis.Range.applyY (Internal.Axis.range config.y) system + } @@ -714,45 +746,45 @@ toSystem config data = defaultConfig : (data -> Float) -> (data -> Float) -> Config data msg defaultConfig toX toY = - { y = Axis.default 400 "" toY - , x = Axis.default 700 "" toX - , container = Container.default "line-chart-1" - , interpolation = Interpolation.default - , intersection = Intersection.default - , legends = Legends.default - , events = Events.default - , junk = Junk.default - , grid = Grid.default - , area = Area.default - , line = Line.default - , dots = Dots.default - } + { y = Axis.default 400 "" toY + , x = Axis.default 700 "" toX + , container = Container.default "line-chart-1" + , interpolation = Interpolation.default + , intersection = Intersection.default + , legends = Legends.default + , events = Events.default + , junk = Junk.default + , grid = Grid.default + , area = Area.default + , line = Line.default + , dots = Dots.default + } defaultLines : List (List data) -> List (Series data) defaultLines = - List.map4 Internal.Line.line defaultColors defaultShapes defaultLabel + List.map4 Internal.Line.line defaultColors defaultShapes defaultLabel defaultColors : List Color.Color defaultColors = - [ Colors.pink - , Colors.blue - , Colors.gold - ] + [ Colors.pink + , Colors.blue + , Colors.gold + ] defaultShapes : List Dots.Shape defaultShapes = - [ Internal.Dots.Circle - , Internal.Dots.Triangle - , Internal.Dots.Cross - ] + [ Internal.Dots.Circle + , Internal.Dots.Triangle + , Internal.Dots.Cross + ] defaultLabel : List String defaultLabel = - [ "First" - , "Second" - , "Third" - ] + [ "First" + , "Second" + , "Third" + ] diff --git a/src/LineChart/Area.elm b/src/LineChart/Area.elm index fc6bbcc..6b95c73 100644 --- a/src/LineChart/Area.elm +++ b/src/LineChart/Area.elm @@ -9,7 +9,6 @@ module LineChart.Area exposing (Config, default, normal, stacked) import Internal.Area as Area - {-| Use in the `LineChart.Config` passed to `LineChart.viewCustom`. chartConfig : LineChart.Config Data Msg @@ -21,14 +20,14 @@ import Internal.Area as Area -} type alias Config = - Area.Config + Area.Config {-| No color below your lines. -} default : Config default = - Area.none + Area.none {-| Color the area below your lines. The color is always the color of @@ -39,7 +38,7 @@ _See example [here](https://github.com/terezka/line-charts/blob/master/examples/ -} normal : Float -> Config normal = - Area.normal + Area.normal {-| Stacks your values and colors the area in the line color. The color is @@ -51,10 +50,11 @@ _See example [here](https://github.com/terezka/line-charts/blob/master/examples/ same set of x values and don't have missing data! If not, the area will not stack properly. It will be fixed sometime though! + -} stacked : Float -> Config stacked = - Area.stacked + Area.stacked {-| Same as stacked, but the areas takes up the whole graph and your values @@ -63,7 +63,8 @@ you can pass the opacity. **Warning:** Right now, this only works if all your lines have the same set of x values! If not, the area will not add properly. + -} percentage : Float -> Config percentage = - Area.percentage + Area.percentage diff --git a/src/LineChart/Axis.elm b/src/LineChart/Axis.elm index 652b74a..beab078 100644 --- a/src/LineChart/Axis.elm +++ b/src/LineChart/Axis.elm @@ -1,24 +1,20 @@ -module LineChart.Axis exposing (Config, default, full, time, custom, none, picky) +module LineChart.Axis exposing (Config, default, full, time, none, picky, custom) -{-| - -_If you're confused as to what "axis range" and "data range" means, +{-| _If you're confused as to what "axis range" and "data range" means, check out `Axis.Range` for an explanation!_ @docs Config, default, full, time, none, picky, custom -} - import Internal.Axis as Axis import Internal.Axis.Title as Title -import LineChart.Axis.Range as Range import LineChart.Axis.Line as AxisLine +import LineChart.Axis.Range as Range import LineChart.Axis.Ticks as Ticks import Time - {-| Use in the `LineChart.Config` passed to `LineChart.viewCustom`. chartConfig : LineChart.Config data msg @@ -31,7 +27,7 @@ import Time -} type alias Config data msg = - Axis.Config data msg + Axis.Config data msg {-| Draws a line the full length of your _data range_ and adds a little space on @@ -41,51 +37,46 @@ Pass the length of your axis in pixels, the title and it's variable. xAxisConfig : Axis.Config Data msg xAxisConfig = - Axis.default 650 "Age (years)" .age - + Axis.default 650 "Age (years)" .age _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Axis/Example1.elm)._ -} default : Int -> String -> (data -> Float) -> Config data msg default = - Axis.default + Axis.default {-| Draws a line the full length of your _axis range_ and adds some nice ticks to it. Pass the length of your axis in pixels, the title and it's variable. - xAxisConfig : Axis.Config Data msg xAxisConfig = - Axis.full 650 "Age (years)" .age - + Axis.full 650 "Age (years)" .age _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Axis/Example2.elm)._ -} full : Int -> String -> (data -> Float) -> Config data msg full = - Axis.full + Axis.full {-| Draws a line the full length of your _data range_ and adds some nice datetime ticks to it. Pass the length of your axis in pixels, the title and it's variable. - xAxisConfig : Axis.Config Data msg xAxisConfig = - Axis.time 650 "Date" .date - + Axis.time 650 "Date" .date _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Axis/Example3.elm)._ -} -time : Time.Zone ->Int -> String -> (data -> Float) -> Config data msg +time : Time.Zone -> Int -> String -> (data -> Float) -> Config data msg time = - Axis.time + Axis.time {-| Draws the full length of your axis range and adds some ticks at the positions @@ -94,11 +85,9 @@ specified in the last argument. Pass the length of your axis in pixels, the title, it's variable and the numbers where you'd like ticks to show up. - xAxisConfig : Axis.Config Data msg xAxisConfig = - Axis.picky 650 "Age (years)" .age [ 4, 25, 46 ] - + Axis.picky 650 "Age (years)" .age [ 4, 25, 46 ] _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Axis/Example4.elm)._ @@ -109,30 +98,26 @@ the `ticks` property in `Axis.custom`. -} picky : Int -> String -> (data -> Float) -> List Float -> Config data msg picky = - Axis.picky + Axis.picky {-| Doesn't draw the axis at all. Pass the length of your axis in pixels and it's variable. - xAxisConfig : Axis.Config Data msg xAxisConfig = - Axis.none 650 .age - + Axis.none 650 .age _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Axis/Example5.elm)._ -} none : Int -> (data -> Float) -> Config data msg none = - Axis.none - + Axis.none -{-| -Properties: +{-| Properties: - **title**: Adds a title on your axis.
_See `LineChart.Axis.Title` for more information and examples._ @@ -145,10 +130,10 @@ Properties: - **ticks**: Customizes your ticks.
_See `LineChart.Axis.Ticks` for more information and examples._ - - xAxisConfig : Axis.Config Data msg - xAxisConfig = - Axis.custom +``` +xAxisConfig : Axis.Config Data msg +xAxisConfig = + Axis.custom { title = Title.default "Year" , variable = Just << .date , pixels = 700 @@ -156,22 +141,22 @@ Properties: , axisLine = AxisLine.full Colors.black , ticks = Ticks.time 5 } - +``` _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Axis/Example8.elm)._ -} custom : Properties data msg -> Config data msg custom = - Axis.custom + Axis.custom {-| -} type alias Properties data msg = - { title : Title.Config msg - , variable : data -> Maybe Float - , pixels : Int - , range : Range.Config - , axisLine : AxisLine.Config msg - , ticks : Ticks.Config msg - } + { title : Title.Config msg + , variable : data -> Maybe Float + , pixels : Int + , range : Range.Config + , axisLine : AxisLine.Config msg + , ticks : Ticks.Config msg + } diff --git a/src/LineChart/Axis/Intersection.elm b/src/LineChart/Axis/Intersection.elm index 0c994c6..db99b24 100644 --- a/src/LineChart/Axis/Intersection.elm +++ b/src/LineChart/Axis/Intersection.elm @@ -2,6 +2,7 @@ module LineChart.Axis.Intersection exposing (Config, default, atOrigin, at, cust {-| + ## Where is the intersection? The intersection is where your two axis lines meet. By default this is at @@ -14,12 +15,10 @@ not be as illustated below. -} - import Internal.Axis.Intersection as Intersection import LineChart.Coordinate as Coordinate - {-| Use in the `LineChart.Config` passed to `LineChart.viewCustom`. chartConfig : LineChart.Config Data msg @@ -31,53 +30,49 @@ import LineChart.Coordinate as Coordinate -} type alias Config = - Intersection.Config + Intersection.Config {-| Sets the intersection at the minimum on both the range and domain. intersectionConfig : Intersection.Config intersectionConfig = - Intersection.default - + Intersection.default _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Intersection/Example1.elm)._ -} default : Config default = - Intersection.default + Intersection.default {-| Sets the intersection as close to the origin as your range and domain allows. intersectionConfig : Intersection.Config intersectionConfig = - Intersection.atOrigin - + Intersection.atOrigin _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Intersection/Example1.elm)._ - -} atOrigin : Config atOrigin = - Intersection.atOrigin + Intersection.atOrigin {-| Sets the intersection to your chosen x and y respectivily. intersectionConfig : Intersection.Config intersectionConfig = - Intersection.at 0 3 - + Intersection.at 0 3 _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Intersection/Example1.elm)._ -} at : Float -> Float -> Config at = - Intersection.at + Intersection.at {-| Sets the intersection to your chosen x and y, given the range and domain @@ -85,15 +80,15 @@ respectivily. intersectionConfig : Intersection.Config intersectionConfig = - Intersection.custom .min middle + Intersection.custom .min middle middle : Coordinate.Range -> Float middle { min, max } = - min + (max - min) / 2 + min + (max - min) / 2 _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Intersection/Example1.elm)._ -} custom : (Coordinate.Range -> Float) -> (Coordinate.Range -> Float) -> Config custom = - Intersection.custom + Intersection.custom diff --git a/src/LineChart/Axis/Line.elm b/src/LineChart/Axis/Line.elm index 57f1dd9..914f112 100644 --- a/src/LineChart/Axis/Line.elm +++ b/src/LineChart/Axis/Line.elm @@ -1,22 +1,16 @@ -module LineChart.Axis.Line exposing - ( Config, default, full, rangeFrame, none - , Properties, custom - ) +module LineChart.Axis.Line exposing (Config, default, full, rangeFrame, none, custom, Properties) -{-| - -_If you're confused as to what "axis range" and "data range" means, +{-| _If you're confused as to what "axis range" and "data range" means, check out `Axis.Range` for an explanation!_ @docs Config, default, full, rangeFrame, none, custom, Properties -} -import Svg exposing (Attribute) -import LineChart.Coordinate as Coordinate -import Internal.Axis.Line as Line import Color - +import Internal.Axis.Line as Line +import LineChart.Coordinate as Coordinate +import Svg exposing (Attribute) {-| This configuration is part of the @@ -34,63 +28,63 @@ _See full example [here](https://github.com/terezka/line-charts/blob/master/exam -} type alias Config msg = - Line.Config msg + Line.Config msg {-| Draws the full length of your axis range. axisLineConfig : AxisLine.Config msg axisLineConfig = - AxisLine.default + AxisLine.default _See full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/AxisLine/Example1.elm)._ -} default : Config msg default = - Line.default + Line.default {-| Same as the default, except you get to pick the color. axisLineConfig : AxisLine.Config msg axisLineConfig = - AxisLine.full Color.red + AxisLine.full Color.red _See full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/AxisLine/Example1.elm)._ -} full : Color.Color -> Config msg full = - Line.full + Line.full {-| Draws the full length of your data range in your given color. axisLineConfig : AxisLine.Config msg axisLineConfig = - AxisLine.rangeFrame Color.red + AxisLine.rangeFrame Color.red _See full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/AxisLine/Example1.elm)._ -} rangeFrame : Color.Color -> Config msg rangeFrame = - Line.rangeFrame + Line.rangeFrame {-| Removes the axis line entirely. axisLineConfig : AxisLine.Config msg axisLineConfig = - AxisLine.none + AxisLine.none _See full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/AxisLine/Example1.elm)._ -} none : Config msg none = - Line.none + Line.none @@ -99,12 +93,12 @@ none = {-| -} type alias Properties msg = - { color : Color.Color - , width : Float - , events : List (Attribute msg) - , start : Float - , end : Float - } + { color : Color.Color + , width : Float + , events : List (Attribute msg) + , start : Float + , end : Float + } {-| Given your data range and axis range respectivily, define your own @@ -112,18 +106,18 @@ axis line configuration. axisLineConfig : AxisLine.Config msg axisLineConfig = - AxisLine.custom <| \dataRange axisRange -> - { color = Colors.gray - , width = 2 - , events = [] - , start = dataRange.min - , end = 5 - } + AxisLine.custom <| + \dataRange axisRange -> + { color = Colors.gray + , width = 2 + , events = [] + , start = dataRange.min + , end = 5 + } _See full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/AxisLine/Example1.elm)._ - -} custom : (Coordinate.Range -> Coordinate.Range -> Properties msg) -> Config msg custom = - Line.custom + Line.custom diff --git a/src/LineChart/Axis/Range.elm b/src/LineChart/Axis/Range.elm index d62868a..893e4a4 100644 --- a/src/LineChart/Axis/Range.elm +++ b/src/LineChart/Axis/Range.elm @@ -1,21 +1,22 @@ -module LineChart.Axis.Range exposing (Config, default, padded, window, custom) +module LineChart.Axis.Range exposing (Config, default, window, padded, custom) {-| + ## Axis ranges and data ranges Considering the following data: data = - [ { x = -1, y = -2 } - , { x = 5, y = 6 } - ] + [ { x = -1, y = -2 } + , { x = 5, y = 6 } + ] From this we can see that the smallest x is -1 and the largest x is 5. We call this the x-data range. By default, the axis range is the same as your data range, but we can make it far more complicated than that. -Opposite your data range which is only calculated from from your data, +Opposite your data range which is only calculated from from your data, **your axis range can be edited** with this module. For example, you can make it larger than your data range, as illustrated below. @@ -37,7 +38,6 @@ import Internal.Axis.Range as Range import LineChart.Coordinate as Coordinate - {-| First of all, this configuration is part of the configuration in `Axis.custom`. @@ -51,15 +51,14 @@ configuration in `Axis.custom`. -} type alias Config = - Range.Config + Range.Config {-| Set the axis range to the full length of your data range. rangeConfig : Range.Config rangeConfig = - Range.default - + Range.default _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Range/Example1.elm)._ @@ -68,7 +67,7 @@ _See the full example [here](https://github.com/terezka/line-charts/blob/master/ -} default : Config default = - Range.default + Range.default {-| Add a given amount of pixels to the minimum and maximum of your axis range, @@ -76,8 +75,7 @@ respectivily. rangeConfig : Range.Config rangeConfig = - Range.padded 40 40 - + Range.padded 40 40 _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Range/Example1.elm)._ @@ -86,17 +84,15 @@ _See the full example [here](https://github.com/terezka/line-charts/blob/master/ -} padded : Float -> Float -> Config padded = - Range.padded + Range.padded {-| Straight up set your axis range by specifying the minimum and maximum, respectivily. - rangeConfig : Range.Config rangeConfig = - Range.window -0.5 4.5 - + Range.window -0.5 4.5 _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Range/Example1.elm)._ @@ -105,19 +101,18 @@ _See the full example [here](https://github.com/terezka/line-charts/blob/master/ -} window : Float -> Float -> Config window = - Range.window + Range.window {-| Given your data range, produce your desired axis range. rangeConfig : Range.Config rangeConfig = - Range.custom specialRange + Range.custom specialRange specialRange : Coordinate.Range -> Coordinate.Range specialRange { min, max } = - { min = min - 1, max = max + 2 } - + { min = min - 1, max = max + 2 } _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Range/Example1.elm)._ @@ -126,4 +121,4 @@ _See the full example [here](https://github.com/terezka/line-charts/blob/master/ -} custom : (Coordinate.Range -> Coordinate.Range) -> Config custom = - Range.custom + Range.custom diff --git a/src/LineChart/Axis/Tick.elm b/src/LineChart/Axis/Tick.elm index e170ec2..61dc76f 100644 --- a/src/LineChart/Axis/Tick.elm +++ b/src/LineChart/Axis/Tick.elm @@ -1,34 +1,39 @@ module LineChart.Axis.Tick exposing - ( Config, Properties - , Direction, negative, positive - , int, float, long, gridless, labelless, opposite - , time, Time, Unit(..), Interval, format - , custom - ) + ( Config, int, float, time + , long, gridless, labelless, opposite + , custom, Properties, Direction, negative, positive + , format, Time, Interval, Unit(..) + ) {-| @docs Config, int, float, time + ## Special styles + You can also make your own with `custom`! + @docs long, gridless, labelless, opposite + # Customiztion + @docs custom, Properties, Direction, negative, positive + # Time formatting + @docs format, Time, Interval, Unit -} -import Svg exposing (Svg, Attribute) +import Color +import DateFormat import Internal.Axis.Tick as Tick import Internal.Svg as Svg +import Svg exposing (Attribute, Svg) import Time -import DateFormat -import Color - {-| Used in the configuration in the `ticks` property of the @@ -57,7 +62,7 @@ _See the full example [here](https://github.com/terezka/line-charts/blob/master/ -} type alias Config msg = - Tick.Config msg + Tick.Config msg @@ -67,37 +72,37 @@ type alias Config msg = {-| -} int : Int -> Config msg int = - Tick.int + Tick.int {-| -} float : Float -> Config msg float = - Tick.float + Tick.float {-| -} gridless : Float -> Config msg gridless = - Tick.gridless + Tick.gridless {-| -} labelless : Float -> Config msg labelless = - Tick.labelless + Tick.labelless {-| -} opposite : Float -> Config msg opposite = - Tick.opposite + Tick.opposite {-| -} long : Float -> Config msg long = - Tick.long + Tick.long @@ -105,60 +110,58 @@ long = {-| You can format your tick label differently based on it's unit. - -} type Unit - = Millisecond - | Second - | Minute - | Hour - | Day - | Month - | Year - + = Millisecond + | Second + | Minute + | Hour + | Day + | Month + | Year {-| Explanation: - - ** timestamp ** is the position where the tick goes on the axis. - - ** isFirst ** is whether this is the first tick or not. - - ** interval ** is the interval at which all the ticks are spaced. - - ** change ** is a `Just` when the tick is changing to a larger unit + - \*\* timestamp \*\* is the position where the tick goes on the axis. + - \*\* isFirst \*\* is whether this is the first tick or not. + - \*\* interval \*\* is the interval at which all the ticks are spaced. + - \*\* change \*\* is a `Just` when the tick is changing to a larger unit than used in the interval. E.g. if the interval is 2 hours, then this will be a `Just Day` when the day changes. Useful if you want a different formatting for those ticks! -} type alias Time = - { timestamp : Time.Posix - , zone : Time.Zone - , isFirst : Bool - , interval : Interval - , change : Maybe Unit - } + { timestamp : Time.Posix + , zone : Time.Zone + , isFirst : Bool + , interval : Interval + , change : Maybe Unit + } {-| The interval at which ticks are spaced. If ticks a spaced with two hours, this will be `{ unit = Hour, multiple = 2 }`. -} type alias Interval = - { unit : Unit - , multiple : Int - } + { unit : Unit + , multiple : Int + } {-| -} time : Time -> Config msg time time_ = - custom - { position = Basics.toFloat (Time.posixToMillis time_.timestamp) - , color = Color.gray - , width = 1 - , length = 5 - , grid = True - , direction = negative - , label = Just <| Svg.label "inherit" (format time_) - } + custom + { position = Basics.toFloat (Time.posixToMillis time_.timestamp) + , color = Color.gray + , width = 1 + , length = 5 + , grid = True + , direction = negative + , label = Just <| Svg.label "inherit" (format time_) + } {-| This is the default formatting of the time type. Useful when you want to @@ -166,26 +169,31 @@ change other properties of your time tick, but won't bother with the formatting. tickConfig : Tick.Time -> Tick.Config msg tickConfig time = - Tick.custom - { position = time.timestamp - , color = Color.blue - , width = 1 - , length = 7 - , grid = True - , direction = Tick.positive - , label = Just <| - Junk.label Color.blue (Tick.format time) - } + Tick.custom + { position = time.timestamp + , color = Color.blue + , width = 1 + , length = 7 + , grid = True + , direction = Tick.positive + , label = + Just <| + Junk.label Color.blue (Tick.format time) + } -} format : Time -> String format { zone, change, interval, timestamp, isFirst } = - if isFirst then - formatBold (nextUnit interval.unit) zone timestamp - else - case change of - Just change_ -> formatBold change_ zone timestamp - Nothing -> formatNorm interval.unit zone timestamp + if isFirst then + formatBold (nextUnit interval.unit) zone timestamp + + else + case change of + Just change_ -> + formatBold change_ zone timestamp + + Nothing -> + formatNorm interval.unit zone timestamp @@ -206,66 +214,70 @@ format { zone, change, interval, timestamp, isFirst } = -} type alias Properties msg = - { position : Float - , color : Color.Color - , width : Float - , length : Float - , grid : Bool - , direction : Direction - , label : Maybe (Svg msg) - } + { position : Float + , color : Color.Color + , width : Float + , length : Float + , grid : Bool + , direction : Direction + , label : Maybe (Svg msg) + } {-| The direction of the little line. If the tick in question is on the x-axis that means that positive means the tick points up, and negative points down. -} type alias Direction = - Tick.Direction + Tick.Direction {-| -} negative : Direction negative = - Tick.Negative + Tick.Negative {-| -} positive : Direction positive = - Tick.Positive + Tick.Positive {-| Make your own tick! customTick : Float -> Tick.Config msg customTick number = - let - color = - -- Change the color based on value! - if number < 50 then Colors.purple - else if number < 70 then Colors.green - else Colors.pinkLight - - label = - Junk.label color (toString number) - in - Tick.custom - { position = number - , color = Colors.black - , width = 1 - , length = 7 - , grid = True - , direction = Tick.positive - , label = Just label - } - + let + color = + -- Change the color based on value! + if number < 50 then + Colors.purple + + else if number < 70 then + Colors.green + + else + Colors.pinkLight + + label = + Junk.label color (toString number) + in + Tick.custom + { position = number + , color = Colors.black + , width = 1 + , length = 7 + , grid = True + , direction = Tick.positive + , label = Just label + } _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Tick/Example1.elm)._ -} custom : Properties msg -> Config msg custom = - Tick.custom + Tick.custom @@ -274,41 +286,82 @@ custom = formatNorm : Unit -> Time.Zone -> Time.Posix -> String formatNorm unit = - let tokens = - case unit of - Millisecond -> [ DateFormat.millisecondNumber ] - Second -> [ DateFormat.secondNumber ] - Minute -> [ DateFormat.minuteFixed ] - Hour -> [ DateFormat.hourNumber, DateFormat.amPmLowercase ] - Day -> [ DateFormat.dayOfMonthSuffix ] - Month -> [ DateFormat.monthNameAbbreviated ] - Year -> [ DateFormat.yearNumber ] - in - DateFormat.format tokens + let + tokens = + case unit of + Millisecond -> + [ DateFormat.millisecondNumber ] + + Second -> + [ DateFormat.secondNumber ] + + Minute -> + [ DateFormat.minuteFixed ] + + Hour -> + [ DateFormat.hourNumber, DateFormat.amPmLowercase ] + + Day -> + [ DateFormat.dayOfMonthSuffix ] + + Month -> + [ DateFormat.monthNameAbbreviated ] + + Year -> + [ DateFormat.yearNumber ] + in + DateFormat.format tokens formatBold : Unit -> Time.Zone -> Time.Posix -> String formatBold unit = - let tokens = - case unit of - Millisecond -> [ DateFormat.millisecondNumber ] - Second -> [ DateFormat.secondNumber ] - Minute -> [ DateFormat.minuteNumber ] - Hour -> [ DateFormat.hourNumber, DateFormat.amPmLowercase ] - Day -> [ DateFormat.dayOfWeekNameFull ] - Month -> [ DateFormat.monthNameAbbreviated ] - Year -> [ DateFormat.yearNumber ] - in - DateFormat.format tokens + let + tokens = + case unit of + Millisecond -> + [ DateFormat.millisecondNumber ] + + Second -> + [ DateFormat.secondNumber ] + + Minute -> + [ DateFormat.minuteNumber ] + + Hour -> + [ DateFormat.hourNumber, DateFormat.amPmLowercase ] + + Day -> + [ DateFormat.dayOfWeekNameFull ] + + Month -> + [ DateFormat.monthNameAbbreviated ] + + Year -> + [ DateFormat.yearNumber ] + in + DateFormat.format tokens nextUnit : Unit -> Unit nextUnit unit = - case unit of - Millisecond -> Second - Second -> Minute - Minute -> Hour - Hour -> Day - Day -> Month - Month -> Year - Year -> Year + case unit of + Millisecond -> + Second + + Second -> + Minute + + Minute -> + Hour + + Hour -> + Day + + Day -> + Month + + Month -> + Year + + Year -> + Year diff --git a/src/LineChart/Axis/Ticks.elm b/src/LineChart/Axis/Ticks.elm index c24f532..219c365 100644 --- a/src/LineChart/Axis/Ticks.elm +++ b/src/LineChart/Axis/Ticks.elm @@ -1,30 +1,39 @@ module LineChart.Axis.Ticks exposing - ( Config, default - , int, time, float - , intCustom, timeCustom, floatCustom, custom - ) + ( Config, default + , int, time, float + , intCustom, timeCustom, floatCustom + , custom + ) {-| @docs Config, default + # Custom amount Choose the approximate amount of ticks on your axis! + ticksConfig : Ticks.Config msg ticksConfig = - Ticks.int 7 -- makes ca. 7 ticks at nice integers - -- or - Ticks.time 7 -- makes ca. 7 ticks at nice datetimes - -- or - Ticks.float 7 -- makes ca. 7 ticks at nice float - + Ticks.int 7 + -- makes ca. 7 ticks at nice integers + -- or + Ticks.time + 7 + -- makes ca. 7 ticks at nice datetimes + -- or + Ticks.float + 7 + + -- makes ca. 7 ticks at nice float _See full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Ticks/Example1.elm)._ @docs int, time, float + # Custom tick Now you get to decide how the ticks should look. Remember that all formatting of @@ -32,21 +41,22 @@ the value in the label is done in `Axis.Tick`! ticksConfig : Ticks.Config msg ticksConfig = - Ticks.intCustom 7 customTick - + Ticks.intCustom 7 customTick _See full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Ticks/Example1.elm)._ @docs intCustom, timeCustom, floatCustom + # Custom positions + @docs custom -} -import LineChart.Coordinate as Coordinate exposing (..) import Internal.Axis.Ticks as Ticks import LineChart.Axis.Tick as Tick +import LineChart.Coordinate as Coordinate exposing (..) import Time @@ -62,7 +72,7 @@ import Time -} type alias Config msg = - Ticks.Config msg + Ticks.Config msg @@ -71,78 +81,87 @@ type alias Config msg = {-| Makes around five ticks at "nice" numbers. -** What are "nice" numbers/integers/datetimes? ** +\*\* What are "nice" numbers/integers/datetimes? \*\* "Nice" numbers are intervals which begin with 10, 5, 3, 2, 1 (adjusted to magnitude, of course!). For dates, it means whole days, weeks, months or hours, minutes, and seconds. --} -- TODO make better approximate +-} + + + +-- TODO make better approximate + + default : Config msg default = - Ticks.float 5 + Ticks.float 5 {-| -} int : Int -> Config msg int = - Ticks.int + Ticks.int {-| -} time : Time.Zone -> Int -> Config msg time = - Ticks.time + Ticks.time {-| -} float : Int -> Config msg float = - Ticks.float + Ticks.float {-| -} intCustom : Int -> (Int -> Tick.Config msg) -> Config msg intCustom = - Ticks.intCustom + Ticks.intCustom {-| -} floatCustom : Int -> (Float -> Tick.Config msg) -> Config msg floatCustom = - Ticks.floatCustom + Ticks.floatCustom {-| -} timeCustom : Time.Zone -> Int -> (Tick.Time -> Tick.Config msg) -> Config msg timeCustom = - Ticks.timeCustom + Ticks.timeCustom {-| Make your own combination of ticks. ticksConfig : Maybe Info -> Ticks.Config msg ticksConfig maybeHovered = - let - hoverOne = - case maybeHovered of - Just hovered -> [ Tick.float hovered.age ] - Nothing -> [] - - framing range = - List.map Tick.float [ range.min, range.max ] - in - Ticks.custom <| \dataRange axisRange -> - framing dataRange ++ hoverOne - + let + hoverOne = + case maybeHovered of + Just hovered -> + [ Tick.float hovered.age ] + + Nothing -> + [] + + framing range = + List.map Tick.float [ range.min, range.max ] + in + Ticks.custom <| + \dataRange axisRange -> + framing dataRange ++ hoverOne _See full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Ticks/Example2.elm)._ -** What if I still want nice values?** +\*\* What if I still want nice values?\*\* You can use `Axis.Values` to produce "nice" values within a given range. -} custom : (Coordinate.Range -> Coordinate.Range -> List (Tick.Config msg)) -> Config msg custom = - Ticks.custom + Ticks.custom diff --git a/src/LineChart/Axis/Title.elm b/src/LineChart/Axis/Title.elm index fa471bf..7602dfb 100644 --- a/src/LineChart/Axis/Title.elm +++ b/src/LineChart/Axis/Title.elm @@ -6,10 +6,9 @@ module LineChart.Axis.Title exposing (Config, default, atAxisMax, atDataMax, atP -} -import Svg exposing (Svg) import Internal.Axis.Title as Title import LineChart.Coordinate as Coordinate - +import Svg exposing (Svg) {-| Part of the configuration in `Axis.custom`. @@ -23,103 +22,109 @@ import LineChart.Coordinate as Coordinate -} type alias Config msg = - Title.Config msg + Title.Config msg {-| Place the title at the maxima of your axis range. -} default : String -> Config msg default = - Title.default + Title.default {-| Place the title at the maxima of your data range. Arguments: - 1. The x offset in SVG-space. - 2. The y offset in SVG-space. - 3. The title. - - - titleConfig : Title.Config msg - titleConfig = - Title.atDataMax 0 10 "Age" +1. The x offset in SVG-space. +2. The y offset in SVG-space. +3. The title. +``` +titleConfig : Title.Config msg +titleConfig = + Title.atDataMax 0 10 "Age" +``` _See full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Title/Example1.elm)._ -} atDataMax : Float -> Float -> String -> Config msg atDataMax = - Title.atDataMax + Title.atDataMax {-| Place the title at the maxima of your axis range. Arguments: - 1. The x offset in SVG-space. - 2. The y offset in SVG-space. - 3. The title. - - - titleConfig : Title.Config msg - titleConfig = - Title.atAxisMax 0 10 "Age" +1. The x offset in SVG-space. +2. The y offset in SVG-space. +3. The title. +``` +titleConfig : Title.Config msg +titleConfig = + Title.atAxisMax 0 10 "Age" +``` _See full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Title/Example1.elm)._ -} atAxisMax : Float -> Float -> String -> Config msg atAxisMax = - Title.atAxisMax + Title.atAxisMax {-| Place your title in any spot along your axis. Arguments: - 1. Given the data range and axis range, provide a position. - 2. The x offset in SVG-space. - 3. The y offset in SVG-space. - 4. The title. - - - titleConfig : Title.Config msg - titleConfig = - let position dataRange axisRange = 80 in - Title.atPosition position -15 30 "Weight" - +1. Given the data range and axis range, provide a position. +2. The x offset in SVG-space. +3. The y offset in SVG-space. +4. The title. + +``` +titleConfig : Title.Config msg +titleConfig = + let + position dataRange axisRange = + 80 + in + Title.atPosition position -15 30 "Weight" +``` _See full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Title/Example1.elm)._ -} atPosition : (Coordinate.Range -> Coordinate.Range -> Float) -> Float -> Float -> String -> Config msg atPosition = - Title.atPosition + Title.atPosition {-| Almost the same as `atPosition` except instead of a string title, you pass a SVG title. Arguments: - 1. Given the data range and axis range, provide a position. - 2. The x offset in SVG-space. - 3. The y offset in SVG-space. - 4. The title view. - - - titleConfig : Title.Config msg - titleConfig = - let position dataRange axisRange = middle axisRange in - Title.custom position -10 35 <| +1. Given the data range and axis range, provide a position. +2. The x offset in SVG-space. +3. The y offset in SVG-space. +4. The title view. + +``` +titleConfig : Title.Config msg +titleConfig = + let + position dataRange axisRange = + middle axisRange + in + Title.custom position -10 35 <| Svg.g - [ Svg.Attributes.style "text-anchor: middle;" ] - [ Junk.label Colors.pink "Weight" ] - - middle : Coordinate.Range -> Float - middle { min, max } = - min + (max - min) / 2 + [ Svg.Attributes.style "text-anchor: middle;" ] + [ Junk.label Colors.pink "Weight" ] +middle : Coordinate.Range -> Float +middle { min, max } = + min + (max - min) / 2 +``` _See full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Title/Example1.elm)._ -} -custom : (Coordinate.Range -> Coordinate.Range -> Float) -> Float -> Float -> (Svg msg) -> Config msg +custom : (Coordinate.Range -> Coordinate.Range -> Float) -> Float -> Float -> Svg msg -> Config msg custom = - Title.custom + Title.custom diff --git a/src/LineChart/Axis/Values.elm b/src/LineChart/Axis/Values.elm index 07b62e5..e31df7b 100644 --- a/src/LineChart/Axis/Values.elm +++ b/src/LineChart/Axis/Values.elm @@ -1,48 +1,55 @@ -module LineChart.Axis.Values exposing (Amount, around, exactly, int, time, float, custom) +module LineChart.Axis.Values exposing + ( int, float, Amount, around, exactly + , time + , custom + ) -{-| - -Use in `Ticks.custom` for creating "nice" values. +{-| Use in `Ticks.custom` for creating "nice" values. ticksConfig : Ticks.Config msg ticksConfig = - Ticks.custom <| \dataRange axisRange -> - List.map Tick.int (valuesWithin dataRange) + Ticks.custom <| + \dataRange axisRange -> + List.map Tick.int (valuesWithin dataRange) valuesWithin : Coordinate.Range -> List Int valuesWithin = - Values.int (Values.around 3) - + Values.int (Values.around 3) _See full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Values/Example1.elm)._ -** What are "nice" numbers/integers/datetimes? ** +\*\* What are "nice" numbers/integers/datetimes? \*\* When I say "nice", I just mean that I try to calculate intervals which begin with 10, 5, 3, 2, 1 (adjusted to magnitude, of course!). For dates, I try to hit whole days, weeks, months or hours, minutes, and seconds. + # Nice numbers + @docs int, float, Amount, around, exactly + # Nice times + @docs time + # Custom numbers + @docs custom -} -import LineChart.Axis.Tick as Tick import Internal.Axis.Values as Values +import LineChart.Axis.Tick as Tick import LineChart.Coordinate as Coordinate import Time - {-| -} type alias Amount = - Values.Amount + Values.Amount {-| Will get you around the amount of numbers you pass it, although it will @@ -50,17 +57,18 @@ prioritize getting "nice" numbers. -} around : Int -> Amount around = - Values.around + Values.around {-| Will get you _closer_ to the amount of numbers you pass it, although not actually _exactly_, since you still want decently "nice" numbers. P.S. If you have a better name for this function, please contact me. + -} exactly : Int -> Amount exactly = - Values.exactly + Values.exactly @@ -71,56 +79,56 @@ exactly = valuesWithin : Coordinate.Range -> List Int valuesWithin = - Values.int (Values.around 3) - + Values.int (Values.around 3) _See full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Values/Example1.elm)._ -} int : Amount -> Coordinate.Range -> List Int int = - Values.int + Values.int {-| Makes nice floats. valuesWithin : Coordinate.Range -> List Float valuesWithin = - -- something like [ 1, 1.5, 2, 2.5 ] - Values.float (Values.exactly 4) - + -- something like [ 1, 1.5, 2, 2.5 ] + Values.float (Values.exactly 4) -} float : Amount -> Coordinate.Range -> List Float float = - Values.float + Values.float {-| Makes evenly spaced floats. Arguments: - 1. A number which must be in your resulting numbers (commonly 0). - 2. The interval between your numbers. - 3. The range which your numbers must be between. +1. A number which must be in your resulting numbers (commonly 0). +2. The interval between your numbers. +3. The range which your numbers must be between. +``` - ticksConfig : Ticks.Config msg - ticksConfig = - Ticks.custom <| \dataRange axisRange -> - List.map Tick.float (Values.custom 45 10 dataRange) ++ - -- ^ Makes [ 25, 45, 55, 65, 75, 85, 95 ] - - List.map Tick.long (Values.custom 30 20 dataRange) - -- ^ Makes [ 30, 50, 70, 90 ] +ticksConfig : Ticks.Config msg +ticksConfig = + Ticks.custom <| + \dataRange axisRange -> + List.map Tick.float (Values.custom 45 10 dataRange) + ++ -- ^ Makes [ 25, 45, 55, 65, 75, 85, 95 ] + List.map Tick.long (Values.custom 30 20 dataRange) +-- ^ Makes [ 30, 50, 70, 90 ] +``` _See full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Values/Example3.elm)._ -} custom : Float -> Float -> Coordinate.Range -> List Float custom = - Values.custom + Values.custom @@ -131,12 +139,11 @@ custom = valuesWithin : Coordinate.Range -> List Float valuesWithin = - Values.time 5 - + Values.time 5 _See full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Values/Example2.elm)._ -} time : Time.Zone -> Int -> Coordinate.Range -> List Tick.Time time = - Values.time + Values.time diff --git a/src/LineChart/Colors.elm b/src/LineChart/Colors.elm index d22d66f..87351b8 100644 --- a/src/LineChart/Colors.elm +++ b/src/LineChart/Colors.elm @@ -1,22 +1,27 @@ module LineChart.Colors exposing - ( pink, blue, gold, red, green, cyan, teal, purple, rust, strongBlue - , pinkLight, blueLight, goldLight, redLight, greenLight, cyanLight, tealLight, purpleLight - , black, gray, grayLight, grayLightest, transparent - ) + ( pink, blue, gold, red, green, cyan, teal, purple, rust, strongBlue + , pinkLight, blueLight, goldLight, redLight, greenLight, cyanLight, tealLight, purpleLight + , black, gray, grayLight, grayLightest + , transparent + ) -{-| - -Colors! +{-| Colors! @docs pink, blue, gold, red, green, cyan, teal, purple, rust, strongBlue + ## Light + @docs pinkLight, blueLight, goldLight, redLight, greenLight, cyanLight, tealLight, purpleLight + ## Gray scale + @docs black, gray, grayLight, grayLightest + ## Other + @docs transparent -} @@ -24,115 +29,112 @@ module LineChart.Colors exposing import Color - {-| -} pink : Color.Color pink = - Color.rgb255 245 105 215 + Color.rgb255 245 105 215 {-| -} pinkLight : Color.Color pinkLight = - Color.rgb255 244 143 177 + Color.rgb255 244 143 177 {-| -} gold : Color.Color gold = - Color.rgb255 205 145 60 + Color.rgb255 205 145 60 {-| -} goldLight : Color.Color goldLight = - Color.rgb255 255 204 128 + Color.rgb255 255 204 128 {-| -} blue : Color.Color blue = - Color.rgb255 3 169 244 + Color.rgb255 3 169 244 {-| -} blueLight : Color.Color blueLight = - Color.rgb255 128 222 234 + Color.rgb255 128 222 234 {-| -} green : Color.Color green = - Color.rgb255 67 160 71 + Color.rgb255 67 160 71 {-| -} greenLight : Color.Color greenLight = - Color.rgb255 197 225 165 + Color.rgb255 197 225 165 {-| -} red : Color.Color red = - Color.rgb255 216 27 96 + Color.rgb255 216 27 96 {-| -} redLight : Color.Color redLight = - Color.rgb255 239 154 154 + Color.rgb255 239 154 154 {-| -} rust : Color.Color rust = - Color.rgb255 205 102 51 + Color.rgb255 205 102 51 {-| -} purple : Color.Color purple = - Color.rgb255 156 39 176 + Color.rgb255 156 39 176 {-| -} purpleLight : Color.Color purpleLight = - Color.rgb255 206 147 216 + Color.rgb255 206 147 216 {-| -} cyan : Color.Color cyan = - Color.rgb255 0 229 255 + Color.rgb255 0 229 255 {-| -} cyanLight : Color.Color cyanLight = - Color.rgb255 128 222 234 + Color.rgb255 128 222 234 {-| -} teal : Color.Color teal = - Color.rgb255 29 233 182 + Color.rgb255 29 233 182 {-| -} tealLight : Color.Color tealLight = - Color.rgb255 128 203 196 + Color.rgb255 128 203 196 {-| -} strongBlue : Color.Color strongBlue = - Color.rgb255 89 51 204 - - + Color.rgb255 89 51 204 @@ -142,28 +144,28 @@ strongBlue = {-| -} black : Color.Color black = - Color.rgb255 0 0 0 + Color.rgb255 0 0 0 {-| -} gray : Color.Color gray = - Color.rgb255 163 163 163 + Color.rgb255 163 163 163 {-| -} grayLight : Color.Color grayLight = - Color.rgb255 211 211 211 + Color.rgb255 211 211 211 {-| -} grayLightest : Color.Color grayLightest = - Color.rgb255 243 243 243 + Color.rgb255 243 243 243 {-| -} transparent : Color.Color transparent = - Color.rgba 0 0 0 0 + Color.rgba 0 0 0 0 diff --git a/src/LineChart/Container.elm b/src/LineChart/Container.elm index 5c1821c..77f91cb 100644 --- a/src/LineChart/Container.elm +++ b/src/LineChart/Container.elm @@ -1,25 +1,28 @@ module LineChart.Container exposing - ( Config, Properties, Size, Margin - , default, spaced, styled, responsive, custom - , relative, static - ) + ( Config, default, spaced, styled, responsive + , custom, Properties, Margin + , Size, relative, static + ) {-| @docs Config, default, spaced, styled, responsive + # Customization + @docs custom, Properties, Margin + ## Sizing + @docs Size, relative, static -} import Html -import Svg import Internal.Container as Container - +import Svg {-| Use in the `LineChart.Config` passed to `LineChart.viewCustom`. @@ -33,7 +36,7 @@ import Internal.Container as Container -} type alias Config msg = - Container.Config msg + Container.Config msg {-| The default container configuration. @@ -45,7 +48,7 @@ _See the full example [here](https://github.com/terezka/line-charts/blob/master/ -} default : String -> Config msg default = - Container.default + Container.default {-| The default container configuration, but you decide the margins. @@ -54,15 +57,14 @@ Pass the id and the top, right, bottom, and left margin respectivily. customContainer : Container.Config msg customContainer = - Container.spaced "line-chart-1" 60 100 60 70 - + Container.spaced "line-chart-1" 60 100 60 70 _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Container/Example4.elm)._ -} spaced : String -> Float -> Float -> Float -> Float -> Config msg spaced = - Container.spaced + Container.spaced {-| The default container configuration, but you can add some extra styles. @@ -71,7 +73,7 @@ Pass the id and styles in form of tupels of strings. customContainer : Container.Config msg customContainer = - Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] + Container.styled "line-chart-1" [ ( "font-family", "monospace" ) ] Ok, so we have `spaced` if we want to set the margins and `styled` if we want to set the styles; but what if I want to set the margins AND the @@ -80,7 +82,7 @@ styles? If so, use `custom`! -} styled : String -> List ( String, String ) -> Config msg styled = - Container.styled + Container.styled {-| Makes the chart take the size of your container. @@ -92,26 +94,26 @@ _See the full example [here](https://github.com/terezka/line-charts/blob/master/ -} responsive : String -> Config msg responsive = - Container.responsive + Container.responsive {-| -} type alias Properties msg = - { attributesHtml : List (Html.Attribute msg) - , attributesSvg : List (Svg.Attribute msg) - , size : Container.Size - , margin : Margin - , id : String - } + { attributesHtml : List (Html.Attribute msg) + , attributesSvg : List (Svg.Attribute msg) + , size : Container.Size + , margin : Margin + , id : String + } {-| -} type alias Margin = - { top : Float - , right : Float - , bottom : Float - , left : Float - } + { top : Float + , right : Float + , bottom : Float + , left : Float + } {-| Properties: @@ -123,24 +125,24 @@ type alias Margin = - **id** sets the id. It's important for this to be unique for every chart on your page. - - containerConfig : Container.Config msg - containerConfig = - Container.custom +``` +containerConfig : Container.Config msg +containerConfig = + Container.custom { attributesHtml = [ Html.Attributes.style [ ( "font-family", "monospace" ) ] ] , attributesSvg = [] , size = Container.static , margin = Container.Margin 30 100 60 80 , id = "chart-id" } - +``` _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Container/Example3.elm)._ -} custom : Properties msg -> Config msg custom = - Container.custom + Container.custom @@ -149,19 +151,19 @@ custom = {-| -} type alias Size = - Container.Size + Container.Size {-| Makes the chart size relative to it's container -} relative : Size relative = - Container.relative + Container.relative {-| Makes the chart the exact number of pixels defined in your x and y axis - configuration. +configuration. -} static : Size static = - Container.static + Container.static diff --git a/src/LineChart/Coordinate.elm b/src/LineChart/Coordinate.elm index 5276683..616a869 100644 --- a/src/LineChart/Coordinate.elm +++ b/src/LineChart/Coordinate.elm @@ -1,16 +1,11 @@ module LineChart.Coordinate exposing - ( Frame, Size - , System, Range - , Point, toSvg, toData - , toSvgX, toSvgY - , toDataX, toDataY - , scaleSvgX, scaleSvgY - , scaleDataX, scaleDataY - ) + ( System, Frame, Size, Range + , Point, toSvg, toData + , toSvgX, toSvgY, toDataX, toDataY + , scaleSvgX, scaleSvgY, scaleDataX, scaleDataY + ) -{-| - -**Data-space and SVG-space** +{-| **Data-space and SVG-space** Data-space is the regular cartesian coordinate system, the coordinate system you probably learned about in school. The x axis goes horizontally and the numbers @@ -40,38 +35,48 @@ this module! @docs System, Frame, Size, Range + # Translation + ## Point + @docs Point, toSvg, toData + ## Single value + @docs toSvgX, toSvgY, toDataX, toDataY + # Scaling Scaling is different from translating in that it does not take a position as it's input, but a _distance_. Translating a position takes the frame into account, scaling doesn't. + system : System system = - { frame = Frame (Margin 10 10 10 10) (Size 100 100) - , x = Range 0 10 - , y = Range 0 10 - } + { frame = Frame (Margin 10 10 10 10) (Size 100 100) + , x = Range 0 10 + , y = Range 0 10 + } data : Point data = - Point 2 3 + Point 2 3 dataXinSvg : Float dataXinSvg = - toSvgX system data.x -- 30 (margin.left + 2 * 100 / 10) + toSvgX system data.x + -- 30 (margin.left + 2 * 100 / 10) dataXinSvg : Float dataXinSvg = - scaleSvgX system data.x -- 20 (2 * 100 / 10) + scaleSvgX system data.x + + -- 20 (2 * 100 / 10) @docs scaleSvgX, scaleSvgY, scaleDataX, scaleDataY @@ -81,21 +86,20 @@ import Internal.Coordinate exposing (..) import LineChart.Container as Container - {-| Specifies the size and margins of your chart. -} type alias Frame = - { margin : Container.Margin - , size : Size - } + { margin : Container.Margin + , size : Size + } {-| The size (px) of your chart. -} type alias Size = - { width : Float - , height : Float - } + { width : Float + , height : Float + } @@ -125,9 +129,9 @@ type alias System = {-| These are minimum and maximum values that make up a range. -} type alias Range = - { min : Float - , max : Float - } + { min : Float + , max : Float + } @@ -138,28 +142,28 @@ type alias Range = -} toSvgX : System -> Float -> Float toSvgX system value = - scaleSvgX system (value - system.x.min) + system.frame.margin.left + scaleSvgX system (value - system.x.min) + system.frame.margin.left {-| Translate a y-coordinate from data-space to SVG-space. -} toSvgY : System -> Float -> Float toSvgY system value = - scaleSvgY system (system.y.max - value) + system.frame.margin.top + scaleSvgY system (system.y.max - value) + system.frame.margin.top {-| Translate a x-coordinate from SVG-space to data-space. -} toDataX : System -> Float -> Float toDataX system value = - system.x.min + scaleDataX system (value - system.frame.margin.left) + system.x.min + scaleDataX system (value - system.frame.margin.left) {-| Translate a y-coordinate from SVG-space to data-space. -} toDataY : System -> Float -> Float toDataY system value = - system.y.max - scaleDataY system (value - system.frame.margin.top) + system.y.max - scaleDataY system (value - system.frame.margin.top) @@ -170,28 +174,28 @@ toDataY system value = -} scaleSvgX : System -> Float -> Float scaleSvgX system value = - value * (lengthX system) / (reachX system) + value * lengthX system / reachX system {-| Scale a y-value from data-space to SVG-space. -} scaleSvgY : System -> Float -> Float scaleSvgY system value = - value * (lengthY system) / (reachY system) + value * lengthY system / reachY system {-| Scale a x-value from SVG-space to data-space. -} scaleDataX : System -> Float -> Float scaleDataX system value = - value * (reachX system) / (lengthX system) + value * reachX system / lengthX system {-| Scale a y-value from SVG-space to data-space. -} scaleDataY : System -> Float -> Float scaleDataY system value = - value * (reachY system) / (lengthY system) + value * reachY system / lengthY system @@ -200,24 +204,24 @@ scaleDataY system value = {-| -} type alias Point = - { x : Float - , y : Float - } + { x : Float + , y : Float + } {-| Translates a data-space point to a SVG-space point. -} toSvg : System -> Point -> Point toSvg system point = - { x = toSvgX system point.x - , y = toSvgY system point.y - } + { x = toSvgX system point.x + , y = toSvgY system point.y + } {-| Translates a SVG-space point to a data-space point. -} toData : System -> Point -> Point toData system point = - { x = toDataX system point.x - , y = toDataY system point.y - } + { x = toDataX system point.x + , y = toDataY system point.y + } diff --git a/src/LineChart/Dots.elm b/src/LineChart/Dots.elm index 94d4d4b..32e05ad 100644 --- a/src/LineChart/Dots.elm +++ b/src/LineChart/Dots.elm @@ -1,33 +1,46 @@ module LineChart.Dots exposing - ( Shape, none - , circle, triangle, square, diamond, plus, cross - , Config, default, custom, customAny, hoverOne, hoverMany - , Style, empty, disconnected, aura, full - ) + ( Shape + , none, circle, triangle, square, diamond, plus, cross + , Config, default + , hoverOne, hoverMany + , custom, customAny + , Style, full, empty, disconnected, aura + ) {-| + # Shapes + @docs Shape + ## Selection + Hopefully, these are self-explanatory. Legends @docs none, circle, triangle, square, diamond, plus, cross + # Styles + @docs Config, default + ## Hover styles + @docs hoverOne, hoverMany + ## Customization + @docs custom, customAny + ### Selection -@docs Style, full, empty, disconnected, aura +@docs Style, full, empty, disconnected, aura -} @@ -38,23 +51,24 @@ import Internal.Dots as Dots -- QUICK START -{-| - -**Change the shape of your dots** +{-| **Change the shape of your dots** The shape type changes the shape of your dots. humanChart : Html msg humanChart = - LineChart.view .age .income - [ LineChart.line Colors.gold Dots.circle "Alice" alice - -- ^^^^^^^^^^^ - , LineChart.line Colors.blue Dots.square "Bobby" bobby - -- ^^^^^^^^^^^ - , LineChart.line Colors.pink Dots.diamond "Chuck" chuck - -- ^^^^^^^^^^^^ - ] + LineChart.view .age + .income + [ LineChart.line Colors.gold Dots.circle "Alice" alice + -- ^^^^^^^^^^^ + , LineChart.line Colors.blue Dots.square "Bobby" bobby + + -- ^^^^^^^^^^^ + , LineChart.line Colors.pink Dots.diamond "Chuck" chuck + + -- ^^^^^^^^^^^^ + ] _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Dots/Example1.elm)._ @@ -65,54 +79,52 @@ They can be different shapes (circle, square, etc.) for each line. -} type alias Shape = - Dots.Shape + Dots.Shape {-| -} none : Shape none = - Dots.None + Dots.None {-| -} circle : Shape circle = - Dots.Circle + Dots.Circle {-| -} triangle : Shape triangle = - Dots.Triangle + Dots.Triangle {-| -} square : Shape square = - Dots.Square + Dots.Square {-| -} diamond : Shape diamond = - Dots.Diamond + Dots.Diamond {-| -} plus : Shape plus = - Dots.Plus + Dots.Plus {-| -} cross : Shape cross = - Dots.Cross + Dots.Cross -{-| - -**Change the style of your dots** +{-| **Change the style of your dots** Use in the `LineChart.Config` passed to `LineChart.viewCustom`. @@ -123,7 +135,6 @@ Use in the `LineChart.Config` passed to `LineChart.viewCustom`. , ... } - **What is a dot style?** The style of the dot includes the size of the dot and various other qualities @@ -131,14 +142,14 @@ like whether it has a border or not. See your options under _Styles_. -} type alias Config data = - Dots.Config data + Dots.Config data {-| Draws a white outline around all your dots. -} default : Config data default = - Dots.default + Dots.default @@ -149,126 +160,124 @@ default = dotsConfig : Dots.Config Data dotsConfig = - Dots.custom (Dots.full 5) - + Dots.custom (Dots.full 5) _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Dots/Example2.elm)._ - -} custom : Style -> Config data custom = - Dots.custom + Dots.custom {-| Change the style of _any_ of your dots. Particularly useful for hover states, but it can also be used for creating another dimension for your chart by varying the size of your dots based on some property. - **Extra dimension example** customDotsConfig : Dots.Config Data customDotsConfig = - let - styleLegend _ = - Dots.full 7 - - styleIndividual datum = - Dots.full <| (datum.height - 1) * 12 - in - Dots.customAny - { legend = styleLegend - , individual = styleIndividual - } - + let + styleLegend _ = + Dots.full 7 + + styleIndividual datum = + Dots.full <| (datum.height - 1) * 12 + in + Dots.customAny + { legend = styleLegend + , individual = styleIndividual + } _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Dots/Example4.elm)._ - **Hover state example** customDotsConfig : Maybe Data -> Dots.Config Data customDotsConfig maybeHovered = - let - styleLegend _ = - Dots.disconnected 10 2 - - styleIndividual datum = - if Just datum == maybeHovered - then Dots.empty 8 2 - else Dots.disconnected 10 2 - in - Dots.customAny - { legend = styleLegend - , individual = styleIndividual - } - + let + styleLegend _ = + Dots.disconnected 10 2 + + styleIndividual datum = + if Just datum == maybeHovered then + Dots.empty 8 2 + + else + Dots.disconnected 10 2 + in + Dots.customAny + { legend = styleLegend + , individual = styleIndividual + } _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Dots/Example6.elm)._ - -} customAny : - { legend : List data -> Style - , individual : data -> Style - } - -> Config data + { legend : List data -> Style + , individual : data -> Style + } + -> Config data customAny = - Dots.customAny + Dots.customAny {-| Adds a hover effect on the given dot! dotsConfig : Maybe Data -> Dots.Config Data dotsConfig hovered = - Dots.hoverOne hovered - + Dots.hoverOne hovered _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Dots/Example3.elm)._ -} hoverOne : Maybe data -> Config data hoverOne maybeHovered = - let - styleLegend _ = - disconnected 10 2 - - styleIndividual datum = - if Just datum == maybeHovered - then aura 7 6 0.3 - else disconnected 10 2 - in - Dots.customAny - { legend = styleLegend - , individual = styleIndividual - } + let + styleLegend _ = + disconnected 10 2 + + styleIndividual datum = + if Just datum == maybeHovered then + aura 7 6 0.3 + + else + disconnected 10 2 + in + Dots.customAny + { legend = styleLegend + , individual = styleIndividual + } {-| Adds a hover effect on several given dots! dotsConfig : List Data -> Dots.Config Data dotsConfig hovered = - Dots.hoverMany hovered + Dots.hoverMany hovered _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Dots/Example5.elm)._ -} hoverMany : List data -> Config data hoverMany hovered = - let - styleLegend _ = - disconnected 10 2 - - styleIndividual datum = - if List.any ((==) datum) hovered - then aura 7 6 0.3 - else disconnected 10 2 - in - Dots.customAny - { legend = styleLegend - , individual = styleIndividual - } + let + styleLegend _ = + disconnected 10 2 + + styleIndividual datum = + if List.any ((==) datum) hovered then + aura 7 6 0.3 + + else + disconnected 10 2 + in + Dots.customAny + { legend = styleLegend + , individual = styleIndividual + } @@ -277,7 +286,7 @@ hoverMany hovered = {-| -} type alias Style = - Dots.Style + Dots.Style {-| Makes dots plain and solid. @@ -286,11 +295,10 @@ Pass the radius. Legends - -} full : Float -> Style full = - Dots.full + Dots.full {-| Makes dots with a white core and a colored border. @@ -302,7 +310,7 @@ Pass the radius and the width of the border. -} empty : Float -> Int -> Style empty = - Dots.empty + Dots.empty {-| Makes dots with a colored core and a white border. @@ -314,7 +322,7 @@ Pass the radius and the width of the border. -} disconnected : Float -> Int -> Style disconnected = - Dots.disconnected + Dots.disconnected {-| Makes dots with a colored core and a less colored, transparent "aura". @@ -324,8 +332,7 @@ aura (A number between 0 and 1). Legends - -} aura : Float -> Int -> Float -> Style aura = - Dots.aura + Dots.aura diff --git a/src/LineChart/Events.elm b/src/LineChart/Events.elm index d4cdc1b..6585202 100644 --- a/src/LineChart/Events.elm +++ b/src/LineChart/Events.elm @@ -1,36 +1,44 @@ module LineChart.Events exposing - ( Config, default, hoverOne, hoverMany, click, custom - , Event, onClick, onMouseMove, onMouseUp, onMouseDown, onMouseLeave, on, onWithOptions, Options - , Decoder, getSvg, getData, getNearest, getNearestX, getWithin, getWithinX - , map, map2, map3 - ) + ( Config, default, hoverOne, hoverMany, click + , custom + , Event, onClick, onMouseMove, onMouseUp, onMouseDown, onMouseLeave, on, onWithOptions, Options + , Decoder, getSvg, getData, getNearest, getNearestX, getWithin, getWithinX + , map, map2, map3 + ) {-| @docs Config, default, hoverOne, hoverMany, click + # Customization + @docs custom + ## Events + @docs Event, onClick, onMouseMove, onMouseUp, onMouseDown, onMouseLeave, on, onWithOptions, Options + ## Decoders + @docs Decoder, getSvg, getData, getNearest, getNearestX, getWithin, getWithinX + ### Maps - type Msg = - Hover ( Maybe Data, Coordinate.Point ) + type Msg + = Hover ( Maybe Data, Coordinate.Point ) events : Events.Config Data Msg events = - Events.custom - [ Events.onMouseMove Hover decoder ] + Events.custom + [ Events.onMouseMove Hover decoder ] decoder : Events.Decoder decoder = - Events.map2 (,) Events.getNearest Events.getSvg + Events.map2 (,) Events.getNearest Events.getSvg @docs map, map2, map3 @@ -55,14 +63,14 @@ import LineChart.Coordinate as Coordinate -} type alias Config data msg = - Events.Config data msg + Events.Config data msg {-| Adds no events. -} default : Config data msg default = - Events.default + Events.default {-| Sends a message when the mouse is within a 30 pixel radius of a dot. @@ -72,15 +80,14 @@ Pass a message taking the data of the data point hovered. eventsConfig : Events.Config Data Msg eventsConfig = - Events.hoverOne Hover - + Events.hoverOne Hover _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Events/Example1.elm)._ -} hoverOne : (Maybe data -> msg) -> Config data msg hoverOne = - Events.hoverOne + Events.hoverOne {-| Sends a message when the mouse is within a 30 pixel distance of a @@ -91,15 +98,14 @@ Pass a message taking the data of the data points hovered. eventsConfig : Events.Config Data Msg eventsConfig = - Events.hoverMany OnHoverMany - + Events.hoverMany OnHoverMany _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Events/Example2.elm)._ -} hoverMany : (List data -> msg) -> Config data msg hoverMany = - Events.hoverMany + Events.hoverMany {-| Sends a given message when clicking on a dot. @@ -108,15 +114,14 @@ Pass a message taking the data of the data points clicked. eventsConfig : Events.Config Data Msg eventsConfig = - Events.click Click - + Events.click Click _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Events/Example3.elm)._ -} click : (Maybe data -> msg) -> Config data msg click = - Events.click + Events.click {-| Add your own combination of events. The cool thing here is that you can pick @@ -124,11 +129,10 @@ another `Events.Decoder` or use `Events.on` for events without shortcuts. eventsConfig : Events.Config Data Msg eventsConfig = - Events.custom - [ Events.onMouseMove Hover Events.getNearest - , Events.onMouseLeave (Hover Nothing) - ] - + Events.custom + [ Events.onMouseMove Hover Events.getNearest + , Events.onMouseLeave (Hover Nothing) + ] _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Events/Example4.elm)._ @@ -138,7 +142,7 @@ hovering the chart area and `Hover Nothing` when your leave the chart area. -} custom : List (Event data msg) -> Config data msg custom = - Events.custom + Events.custom @@ -147,51 +151,51 @@ custom = {-| -} type alias Event data msg = - Events.Event data msg + Events.Event data msg {-| -} onClick : (a -> msg) -> Decoder data a -> Event data msg onClick = - Events.onClick + Events.onClick {-| -} onMouseMove : (a -> msg) -> Decoder data a -> Event data msg onMouseMove = - Events.onMouseMove + Events.onMouseMove {-| -} onMouseDown : (a -> msg) -> Decoder data a -> Event data msg onMouseDown = - Events.onMouseDown + Events.onMouseDown {-| -} onMouseUp : (a -> msg) -> Decoder data a -> Event data msg onMouseUp = - Events.onMouseUp + Events.onMouseUp {-| -} onMouseLeave : msg -> Event data msg onMouseLeave = - Events.onMouseLeave + Events.onMouseLeave {-| Add any event to your chart. Arguments: - 1. The JavaScript event name. - 2. The message. - 3. The `Events.Decoder` to determine what data you want from the event. +1. The JavaScript event name. +2. The message. +3. The `Events.Decoder` to determine what data you want from the event. -} on : String -> (a -> msg) -> Decoder data a -> Event data msg on = - Events.on + Events.on {-| Same as `on`, but you can add some options too! @@ -200,18 +204,19 @@ on = 2. The `Options`. 2. The message. 3. The `Events.Decoder` to determine what data you want from the event. + -} onWithOptions : String -> Options -> (a -> msg) -> Decoder data a -> Event data msg onWithOptions = - Events.onWithOptions + Events.onWithOptions {-| -} type alias Options = - { stopPropagation : Bool - , preventDefault : Bool - , catchOutsideChart : Bool - } + { stopPropagation : Bool + , preventDefault : Bool + , catchOutsideChart : Bool + } @@ -223,26 +228,26 @@ This example gets you the data of the nearest dot to where you are hovering. events : Config Data Msg events = - Events.custom - [ Events.onMouseMove Hover Events.getNearest ] + Events.custom + [ Events.onMouseMove Hover Events.getNearest ] -} type alias Decoder data msg = - Events.Decoder data msg + Events.Decoder data msg {-| Get the SVG-space coordinates of the event. -} getSvg : Decoder data Coordinate.Point getSvg = - Events.getSvg + Events.getSvg {-| Get the data-space coordinates of the event. -} getData : Decoder data Coordinate.Point getData = - Events.getData + Events.getData {-| Get the data coordinates nearest to the event. @@ -250,7 +255,7 @@ Returns `Nothing` if you have no data showing. -} getNearest : Decoder data (Maybe data) getNearest = - Events.getNearest + Events.getNearest {-| Get the data coordinates nearest of the event within the radius @@ -258,14 +263,14 @@ you provide in the first argument. Returns `Nothing` if you have no data showing -} getWithin : Float -> Decoder data (Maybe data) getWithin = - Events.getWithin + Events.getWithin {-| Get the data coordinates horizontally nearest to the event. -} getNearestX : Decoder data (List data) getNearestX = - Events.getNearestX + Events.getNearestX {-| Finds the data coordinates horizontally nearest to the event, within the @@ -273,7 +278,7 @@ distance you provide in the first argument. -} getWithinX : Float -> Decoder data (List data) getWithinX = - Events.getWithinX + Events.getWithinX @@ -283,16 +288,16 @@ getWithinX = {-| -} map : (a -> msg) -> Decoder data a -> Decoder data msg map = - Events.map + Events.map {-| -} map2 : (a -> b -> msg) -> Decoder data a -> Decoder data b -> Decoder data msg map2 = - Events.map2 + Events.map2 {-| -} map3 : (a -> b -> c -> msg) -> Decoder data a -> Decoder data b -> Decoder data c -> Decoder data msg map3 = - Events.map3 + Events.map3 diff --git a/src/LineChart/Grid.elm b/src/LineChart/Grid.elm index fcd4bc9..c6f9e80 100644 --- a/src/LineChart/Grid.elm +++ b/src/LineChart/Grid.elm @@ -4,6 +4,7 @@ module LineChart.Grid exposing (Config, default, dots, lines) @docs Config, default, dots, lines + # How do I change where the grid lines/dots are placed? By default there is a grid by every tick. If you want to change @@ -18,8 +19,8 @@ See `LineChart.Axis` -> `LineChart.Axis.Ticks` -> `LineChart.Axis.Tick`. -} -import Internal.Grid as Grid import Color +import Internal.Grid as Grid {-| Use in the `LineChart.Config` passed to `LineChart.viewCustom`. @@ -33,25 +34,25 @@ import Color -} type alias Config = - Grid.Config + Grid.Config {-| Gets you some vague gray grid lines. -} default : Config default = - Grid.default + Grid.default {-| Gets you a grid dots of a given radius and color. -} dots : Float -> Color.Color -> Config dots = - Grid.dots + Grid.dots {-| Gets you grid lines of a given width and color. -} lines : Float -> Color.Color -> Config lines = - Grid.lines + Grid.lines diff --git a/src/LineChart/Interpolation.elm b/src/LineChart/Interpolation.elm index d4549d1..2e872cb 100644 --- a/src/LineChart/Interpolation.elm +++ b/src/LineChart/Interpolation.elm @@ -1,8 +1,6 @@ module LineChart.Interpolation exposing (Config, default, linear, monotone, stepped) -{-| - -Interpolation is the the kind of line which is drawn between your data points. +{-| Interpolation is the the kind of line which is drawn between your data points. It's meant to be a guide to where your data point would actually be if you had more data. It's not just for looks! @@ -24,14 +22,14 @@ import Internal.Interpolation as Interpolation -} type alias Config = - Interpolation.Config + Interpolation.Config {-| The vanilla of interpolations: linear. -} default : Config default = - linear + linear {-| A linear interpolation. @@ -41,7 +39,7 @@ default = -} linear : Config linear = - Interpolation.Linear + Interpolation.Linear {-| A monotone-x interpolation. @@ -51,7 +49,7 @@ linear = -} monotone : Config monotone = - Interpolation.Monotone + Interpolation.Monotone {-| A stepped interpolation where the step comes after the dot. @@ -61,4 +59,4 @@ monotone = -} stepped : Config stepped = - Interpolation.Stepped + Interpolation.Stepped diff --git a/src/LineChart/Junk.elm b/src/LineChart/Junk.elm index 7570e1f..c8cbba2 100644 --- a/src/LineChart/Junk.elm +++ b/src/LineChart/Junk.elm @@ -1,16 +1,15 @@ module LineChart.Junk exposing - ( Config, Layers, default, hoverOne, hoverMany, custom - , Transfrom, transform, move, offset, placed - , vertical, horizontal, verticalCustom, horizontalCustom - , rectangle, circle - , label, labelAt - , withinChartArea - , hover, hoverAt - ) - -{-| - -Junk is a way to draw whatever you like in the chart. The name comes from + ( Config, default, hoverOne, hoverMany + , custom, Layers + , withinChartArea + , vertical, horizontal, verticalCustom, horizontalCustom + , rectangle, circle + , label, labelAt + , placed, Transfrom, transform, move, offset + , hover, hoverAt + ) + +{-| Junk is a way to draw whatever you like in the chart. The name comes from [Edward Tufte's concept of "chart junk"](https://en.wikipedia.org/wiki/Chartjunk). If you want to add tooltips, sections for emphasis, or kittens on your chart, this is where it's at. @@ -19,11 +18,15 @@ this is where it's at. @docs Config, default, hoverOne, hoverMany + # Customization + @docs custom, Layers + # Helpers + ## On chart area A good thing to know before reading this section is what I mean by "chart area". @@ -36,34 +39,43 @@ _What is an axis-range? See the `Axis.Range` module._ @docs withinChartArea + ## Lines + @docs vertical, horizontal, verticalCustom, horizontalCustom + ## Shapes + @docs rectangle, circle + ## Label + @docs label, labelAt + ## Placing + @docs placed, Transfrom, transform, move, offset + ## Hover views + This is just regular html views! Nothing fancy - you can also make your own! Notice that you can override all the styles. @docs hover, hoverAt - -} -import Svg -import Svg.Attributes as Attributes +import Color import Html -import LineChart.Coordinate as Coordinate import Internal.Junk as Junk import Internal.Svg as Svg -import Color +import LineChart.Coordinate as Coordinate +import Svg +import Svg.Attributes as Attributes @@ -74,7 +86,7 @@ import Color -} default : Config data msg default = - Junk.none + Junk.none @@ -92,17 +104,17 @@ default = -} type alias Config data msg = - Junk.Config data msg + Junk.Config data msg {-| Draws the default tooltip. customJunk : Maybe Data -> Junk.Junk msg customJunk hovered = - Junk.hoverOne model.hovered - [ ( "Age", toString << .age ) - , ( "Weight", toString << .weight ) - ] + Junk.hoverOne model.hovered + [ ( "Age", toString << .age ) + , ( "Weight", toString << .weight ) + ] _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Junk/Example1.elm)._ @@ -111,33 +123,31 @@ _See the full example [here](https://github.com/terezka/line-charts/blob/master/ -} hoverOne : Maybe data -> List ( String, data -> String ) -> Config data msg hoverOne = - Junk.hoverOne + Junk.hoverOne {-| Draws the default tooltip for multiple hovered points. customJunk : List Data -> Junk.Junk msg customJunk hovered = - Junk.hoverMany model.hovered formatX formatY + Junk.hoverMany model.hovered formatX formatY formatX : Data -> String formatX = - .date >> Date.fromTime >> Date.Format.format "%e. %b, %Y" + .date >> Date.fromTime >> Date.Format.format "%e. %b, %Y" formatY : Data -> String formatY data = - toString data.weight ++ "kg" - + toString data.weight ++ "kg" _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Junk/Example4.elm)._ - Tooltip -} hoverMany : List data -> (data -> String) -> (data -> String) -> Config data msg hoverMany = - Junk.hoverMany + Junk.hoverMany {-| The layers where you can put your junk. @@ -148,10 +158,10 @@ hoverMany = -} type alias Layers msg = - { below : List (Svg.Svg msg) - , above : List (Svg.Svg msg) - , html : List (Html.Html msg) - } + { below : List (Svg.Svg msg) + , above : List (Svg.Svg msg) + , html : List (Html.Html msg) + } {-| Draw whatever junk you'd like. You're given the `Coordinate.System` to help @@ -161,32 +171,34 @@ to translate from data-space into SVG-space and vice versa. To learn more about the `Coordinate.System` and how to use it, see the `Coordinate` module. - junk : Maybe Coordinate.Point -> Coordinate.System -> Junk.Layers msg junk hovered system = - { below = - case hovered of - Just hovered -> [ sectionBand hovered system ] - Nothing -> [] - , above = [] - , html = [] - } + { below = + case hovered of + Just hovered -> + [ sectionBand hovered system ] + + Nothing -> + [] + , above = [] + , html = [] + } sectionBand : Coordinate.Point -> Coordinate.System -> Svg.Svg msg sectionBand hovered system = - Junk.rectangle system - [ Svg.Attributes.fill "#b6b6b61a" ] - (hovered.x - 5) (hovered.x + 5) - system.y.min system.y.max - + Junk.rectangle system + [ Svg.Attributes.fill "#b6b6b61a" ] + (hovered.x - 5) + (hovered.x + 5) + system.y.min + system.y.max _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Junk/Example2.elm)._ - -} custom : (Coordinate.System -> Layers msg) -> Config data msg custom = - Junk.custom + Junk.custom @@ -195,43 +207,43 @@ custom = {-| -} type alias Transfrom = - Svg.Transfrom + Svg.Transfrom {-| Produces a SVG transform attributes. Useful to move elements around. movedStuff : Coordinate.System -> Svg.Svg msg movedStuff system = - Svg.g - [ Junk.transform - [ Junk.move system someDataPoint.age someDataPoint.weight - , Junk.offset 20 10 - -- Try changing the offset! - ] - ] - [ Junk.label Colors.blue "stuff" ] + Svg.g + [ Junk.transform + [ Junk.move system someDataPoint.age someDataPoint.weight + , Junk.offset 20 10 + -- Try changing the offset! + ] + ] + [ Junk.label Colors.blue "stuff" ] _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Junk/Example3.elm)._ -} transform : List Transfrom -> Svg.Attribute msg transform = - Svg.transform + Svg.transform {-| Moves in data-space. -} move : Coordinate.System -> Float -> Float -> Transfrom move = - Svg.move + Svg.move {-| Moves in SVG-space. -} offset : Float -> Float -> Transfrom offset = - Svg.offset + Svg.offset @@ -243,10 +255,11 @@ offset = Pass the x-coordinate. **Note:** The line is truncated off if outside the chart area. + -} vertical : Coordinate.System -> List (Svg.Attribute msg) -> Float -> Svg.Svg msg vertical system attributes at = - Svg.vertical system (withinChartArea system :: attributes) at system.y.min system.y.max + Svg.vertical system (withinChartArea system :: attributes) at system.y.min system.y.max {-| Draws a horizontal line which is the full length of the x-range. @@ -254,10 +267,11 @@ vertical system attributes at = Pass the y-coordinate. **Note:** The line is truncated off if outside the chart area. + -} horizontal : Coordinate.System -> List (Svg.Attribute msg) -> Float -> Svg.Svg msg horizontal system attributes at = - Svg.horizontal system (withinChartArea system :: attributes) at system.x.min system.x.max + Svg.horizontal system (withinChartArea system :: attributes) at system.x.min system.x.max {-| Draws a vertical line. @@ -265,21 +279,23 @@ horizontal system attributes at = Pass the x-, y1- and y2-coordinates, respectively. **Note:** The line is truncated off if outside the chart area. + -} verticalCustom : Coordinate.System -> List (Svg.Attribute msg) -> Float -> Float -> Float -> Svg.Svg msg verticalCustom system attributes = - Svg.vertical system (withinChartArea system :: attributes) + Svg.vertical system (withinChartArea system :: attributes) {-| Draws a horizontal line. -Pass the y-, x1- and x2-coordinates, respectively. +Pass the y-, x1- and x2-coordinates, respectively. **Note:** The line is truncated off if outside the chart area. + -} -horizontalCustom : Coordinate.System -> List (Svg.Attribute msg) -> Float -> Float -> Float -> Svg.Svg msg +horizontalCustom : Coordinate.System -> List (Svg.Attribute msg) -> Float -> Float -> Float -> Svg.Svg msg horizontalCustom system attributes = - Svg.horizontal system (withinChartArea system :: attributes) + Svg.horizontal system (withinChartArea system :: attributes) {-| Draws a rectangle. This can be used for grid bands and highlighting a @@ -288,39 +304,42 @@ range e.g. for selection. xSelectionArea : Coordinate.System -> Float -> Float -> Svg msg xSelectionArea system startX endX = Junk.rectangle system - [ Attributes.fill "rgba(255,0,0,0.1)" ] - startX endX system.y.min system.y.max + [ Attributes.fill "rgba(255,0,0,0.1)" ] + startX + endX + system.y.min + system.y.max **Note:** The rectangle is truncated off if outside the chart area. -} rectangle : Coordinate.System -> List (Svg.Attribute msg) -> Float -> Float -> Float -> Float -> Svg.Svg msg rectangle system attributes = - Svg.rectangle system (withinChartArea system :: attributes) + Svg.rectangle system (withinChartArea system :: attributes) {-| Draws a circle. Pass the system, radius, color and x- and y-coordinates respectively. - -} circle : Coordinate.System -> Float -> Color.Color -> Float -> Float -> Svg.Svg msg circle system radius color x y = - Svg.gridDot radius color <| Coordinate.toSvg system (Coordinate.Point x y) + Svg.gridDot radius color <| Coordinate.toSvg system (Coordinate.Point x y) {-| Place a list of elements on a given spot. Arguments: - 1. The coordinate system. - 2. The x-coordinate in data-space. - 3. The y-coordinate in data-space. - 4. The x-offset in SVG-space. - 5. The y-offset in SVG-space. - 6. The list of elements + +1. The coordinate system. +2. The x-coordinate in data-space. +3. The y-coordinate in data-space. +4. The x-offset in SVG-space. +5. The y-offset in SVG-space. +6. The list of elements -} placed : Coordinate.System -> Float -> Float -> Float -> Float -> List (Svg.Svg msg) -> Svg.Svg msg placed system x y xo yo = - Svg.g [ transform [ move system x y, offset xo yo ] ] + Svg.g [ transform [ move system x y, offset xo yo ] ] @@ -331,43 +350,46 @@ placed system x y xo yo = -} label : Color.Color -> String -> Svg.Svg msg label color = - Svg.label (Color.toCssString color) - + Svg.label (Color.toCssString color) {-| A label, but you get to place it too. Arguments: - 1. The coordinate system. - 2. The x-coordinate in data-space. - 3. The y-coordinate in data-space. - 4. The x-offset in SVG-space. - 5. The y-offset in SVG-space. - 6. The `text-anchor` css value. - 7. The color of the text. - 8. The text. - - - customJunk : Junk.Config Data msg - customJunk = - Junk.custom <| \system -> - { below = [] - , above = - [ Junk.labelAt system 2 1.5 0 -10 "middle" Colors.black "← axis range →" - , Junk.labelAt system 2 -1.5 0 18 "middle" Colors.black "← data range →" - -- Try changing the numbers! - ] - , html = [] - } + +1. The coordinate system. +2. The x-coordinate in data-space. +3. The y-coordinate in data-space. +4. The x-offset in SVG-space. +5. The y-offset in SVG-space. +6. The `text-anchor` css value. +7. The color of the text. +8. The text. + +``` +customJunk : Junk.Config Data msg +customJunk = + Junk.custom <| + \system -> + { below = [] + , above = + [ Junk.labelAt system 2 1.5 0 -10 "middle" Colors.black "← axis range →" + , Junk.labelAt system 2 -1.5 0 18 "middle" Colors.black "← data range →" + + -- Try changing the numbers! + ] + , html = [] + } +``` -} labelAt : Coordinate.System -> Float -> Float -> Float -> Float -> String -> Color.Color -> String -> Svg.Svg msg labelAt system x y xo yo anchor color text = - Svg.g - [ transform [ move system x y, offset xo yo ] - , Attributes.style <| "text-anchor: " ++ anchor ++ ";" - ] - [ label color text ] + Svg.g + [ transform [ move system x y, offset xo yo ] + , Attributes.style <| "text-anchor: " ++ anchor ++ ";" + ] + [ label color text ] {-| An attribute which when added, truncates the rendered element if it @@ -375,7 +397,7 @@ extends outside the chart area. -} withinChartArea : Coordinate.System -> Svg.Attribute msg withinChartArea = - Svg.withinChartArea + Svg.withinChartArea @@ -388,20 +410,22 @@ Pass the hint x-coordinate, your styles and your internal view. customJunk : Maybe Data -> Junk.Config Data msg customJunk hovered = - Junk.custom <| \system -> - { below = [] - , above = [] - , html = - [ Junk.hover system hovered.x - [ ( "border-color", "red" ) ] - [ Html.text (toString hovered.y) ] - ] - } + Junk.custom <| + \system -> + { below = [] + , above = [] + , html = + [ Junk.hover system + hovered.x + [ ( "border-color", "red" ) ] + [ Html.text (toString hovered.y) ] + ] + } - -} -hover : Coordinate.System -> Float -> List ( String, String ) -> List (Html.Html msg) -> Html.Html msg +-} +hover : Coordinate.System -> Float -> List ( String, String ) -> List (Html.Html msg) -> Html.Html msg hover = - Junk.hover + Junk.hover {-| Make the markup for a hover placed at a given x- and y-coordinate. @@ -410,17 +434,20 @@ Pass the hint x- and y-coordinate, your styles and your internal view. customJunk : Maybe Data -> Junk.Config Data msg customJunk hovered = - Junk.custom <| \system -> - { below = [] - , above = [] - , html = - [ Junk.hoverAt system hovered.x system.y.max - [ ( "border-color", "red" ) ] - [ Html.text (toString hovered.y) ] - ] - } + Junk.custom <| + \system -> + { below = [] + , above = [] + , html = + [ Junk.hoverAt system + hovered.x + system.y.max + [ ( "border-color", "red" ) ] + [ Html.text (toString hovered.y) ] + ] + } -} -hoverAt : Coordinate.System -> Float -> Float -> List ( String, String ) -> List (Html.Html msg) -> Html.Html msg +hoverAt : Coordinate.System -> Float -> Float -> List ( String, String ) -> List (Html.Html msg) -> Html.Html msg hoverAt = - Junk.hoverAt + Junk.hoverAt diff --git a/src/LineChart/Legends.elm b/src/LineChart/Legends.elm index 2e615fd..267e6f6 100644 --- a/src/LineChart/Legends.elm +++ b/src/LineChart/Legends.elm @@ -1,21 +1,25 @@ module LineChart.Legends exposing - ( Config, none, default - , byEnding, byBeginning - , grouped, groupedCustom, Legend - ) + ( Config, default, none + , byEnding, byBeginning + , grouped, groupedCustom, Legend + ) {-| @docs Config, default, none + ## Free legends + Where the title is hanging by its respective line. Legends @docs byEnding, byBeginning + ## Grouped legends + Where the titles are gathered in one spot. Legends @@ -24,9 +28,9 @@ Where the titles are gathered in one spot. -} -import Svg -import LineChart.Coordinate as Coordinate exposing (..) import Internal.Legends as Legends +import LineChart.Coordinate as Coordinate exposing (..) +import Svg @@ -43,15 +47,15 @@ import Internal.Legends as Legends } -} -type alias Config data msg - = Legends.Config data msg +type alias Config data msg = + Legends.Config data msg {-| Produces legends in the top right corner. -} default : Config data msg default = - Legends.default + Legends.default @@ -62,7 +66,7 @@ default = -} none : Config data msg none = - Legends.none + Legends.none @@ -78,20 +82,19 @@ none = , ... } - _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Legends/Example1.elm)._ -} byEnding : (String -> Svg.Svg msg) -> Config data msg byEnding = - Legends.byEnding + Legends.byEnding {-| Same as `byEnding`, except by the beginning of the line! -} byBeginning : (String -> Svg.Svg msg) -> Config data msg byBeginning = - Legends.byBeginning + Legends.byBeginning @@ -100,19 +103,19 @@ byBeginning = {-| Draws some legends. You desicde where. Arguments: - 1. Given the x-axis range, you produce the x-coordinate in data-space of the legends. - 2. Given the y-axis range, you produce the y-coordinate of data-space the legends. - 3. Move the legends horizontally in SVG-space. - 4. Move the legends vertically in SVG-space. - - - chartConfig : LineChart.Config Data msg - chartConfig = - { ... - , legends = Legends.grouped .max .min 0 -60 -- Bottom right corner - , ... - } - +1. Given the x-axis range, you produce the x-coordinate in data-space of the legends. +2. Given the y-axis range, you produce the y-coordinate of data-space the legends. +3. Move the legends horizontally in SVG-space. +4. Move the legends vertically in SVG-space. + +``` +chartConfig : LineChart.Config Data msg +chartConfig = + { ... + , legends = Legends.grouped .max .min 0 -60 -- Bottom right corner + , ... + } +``` Makes this: @@ -123,32 +126,31 @@ _See the full example [here](https://github.com/terezka/line-charts/blob/master/ -} grouped : (Coordinate.Range -> Float) -> (Coordinate.Range -> Float) -> Float -> Float -> Config data msg grouped = - Legends.grouped + Legends.grouped {-| Stuff that's helpful when you're drawing your legends. A sample of your line as well your line's label. -} type alias Legend msg = - { sample : Svg.Svg msg - , label : String - } + { sample : Svg.Svg msg + , label : String + } {-| Customize your grouped legends. Arguments: - 1. The width of the line samples. - 2. Your view function for the legends. - +1. The width of the line samples. +2. Your view function for the legends. - legends : Legends data msg - legends = - Legends.groupedCustom 30 viewLegends +``` +legends : Legends data msg +legends = + Legends.groupedCustom 30 viewLegends - - viewLegends : Coordinate.System -> List (Legends.Legend msg) -> Svg.Svg msg - viewLegends system legends = - Svg.g +viewLegends : Coordinate.System -> List (Legends.Legend msg) -> Svg.Svg msg +viewLegends system legends = + Svg.g [ Junk.transform [ Junk.move system system.x.min system.y.min , Junk.offset 20 20 @@ -156,30 +158,26 @@ type alias Legend msg = ] (List.indexedMap viewLegend legends) - - viewLegend : Int -> Legends.Legend msg -> Svg.Svg msg - viewLegend index { sample, label } = - Svg.g +viewLegend : Int -> Legends.Legend msg -> Svg.Svg msg +viewLegend index { sample, label } = + Svg.g [ Junk.transform [ Junk.offset (toFloat index * 100) 20 ] ] [ sample, viewLabel label ] - - viewLabel : String -> Svg.Svg msg - viewLabel label = - Svg.g +viewLabel : String -> Svg.Svg msg +viewLabel label = + Svg.g [ Junk.transform [ Junk.offset 40 4 ] ] [ Junk.label Colors.black label ] - +``` Makes this: Legends - _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Legends/Example3.elm)._ - -} groupedCustom : Float -> (Coordinate.System -> List (Legend msg) -> Svg.Svg msg) -> Config data msg groupedCustom = - Legends.groupedCustom + Legends.groupedCustom diff --git a/src/LineChart/Line.elm b/src/LineChart/Line.elm index 6e130b2..e0c3de5 100644 --- a/src/LineChart/Line.elm +++ b/src/LineChart/Line.elm @@ -1,22 +1,21 @@ module LineChart.Line exposing - ( Config, default - , wider, hoverOne - , custom - , Style, style - ) + ( Config, default, wider, hoverOne, custom + , Style, style + ) {-| @docs Config, default, wider, hoverOne, custom + ## Styles + @docs Style, style -} -import Internal.Line as Line import Color - +import Internal.Line as Line {-| Use in the `LineChart.Config` passed to `LineChart.viewCustom`. @@ -30,14 +29,14 @@ import Color -} type alias Config data = - Line.Config data + Line.Config data {-| Makes 1px wide lines. -} default : Config data default = - Line.default + Line.default {-| Pass the desired width of your lines. @@ -49,13 +48,12 @@ default = , ... } - _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Line/Example1.elm)._ -} wider : Float -> Config data wider = - Line.wider + Line.wider {-| Makes the line, to which the data in the first argument belongs, wider! @@ -67,47 +65,49 @@ wider = , ... } - _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Line/Example2.elm)._ -} hoverOne : Maybe data -> Config data hoverOne hovered = - custom <| \data -> - if List.any (Just >> (==) hovered) data then - style 3 identity - else - style 1 identity + custom <| + \data -> + if List.any (Just >> (==) hovered) data then + style 3 identity + + else + style 1 identity {-| Edit as style of a line based on its data. lineConfig : Maybe Data -> Line.Config Data lineConfig maybeHovered = - Line.custom (toLineStyle maybeHovered) - + Line.custom (toLineStyle maybeHovered) toLineStyle : Maybe Data -> List Data -> Line.Style toLineStyle maybeHovered lineData = - case maybeHovered of - Nothing -> -- No line is hovered - Line.style 1 identity + case maybeHovered of + Nothing -> + -- No line is hovered + Line.style 1 identity - Just hovered -> -- Some line is hovered - if List.any ((==) hovered) lineData then - -- It is this one, so make it pop! - Line.style 2 (Manipulate.darken 0.1) - else - -- It is not this one, so hide it a bit - Line.style 1 (Manipulate.lighten 0.35) + Just hovered -> + -- Some line is hovered + if List.any ((==) hovered) lineData then + -- It is this one, so make it pop! + Line.style 2 (Manipulate.darken 0.1) + else + -- It is not this one, so hide it a bit + Line.style 1 (Manipulate.lighten 0.35) _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Line/Example3.elm)._ -} custom : (List data -> Style) -> Config data custom = - Line.custom + Line.custom @@ -116,31 +116,30 @@ custom = {-| -} type alias Style = - Line.Style + Line.Style {-| Pass the width of the line and a function transforming the line's color. vanilla : Line.Style vanilla = - Line.style 1 identity + Line.style 1 identity emphasize : Line.Style emphasize = - Line.style 2 (Manipulate.darken 0.15) + Line.style 2 (Manipulate.darken 0.15) hide : Line.Style hide = - Line.style 1 (Manipulate.lighten 0.15) + Line.style 1 (Manipulate.lighten 0.15) blacken : Line.Style blacken = - Line.style 2 (\_ -> Colors.black) - + Line.style 2 (\_ -> Colors.black) _See the full example [here](https://github.com/terezka/line-charts/blob/master/examples/Docs/Line/Example4.elm)._ -} style : Float -> (Color.Color -> Color.Color) -> Style style = - Line.style + Line.style diff --git a/tests/Coordinate.elm b/tests/Coordinate.elm index 50c0b52..737dd06 100644 --- a/tests/Coordinate.elm +++ b/tests/Coordinate.elm @@ -1,10 +1,11 @@ -module Coordinate exposing (..) +module Coordinate exposing (coordinates, frame, horizontal, system, updateFrame, vertical) import Expect exposing (Expectation) -import Fuzz exposing (Fuzzer, list, int, float, string) -import Test exposing (..) +import Fuzz exposing (Fuzzer, float, int, list, string) import Internal.Coordinate exposing (Margin) import LineChart.Coordinate exposing (..) +import Test exposing (..) + -- MATERIAL @@ -12,9 +13,9 @@ import LineChart.Coordinate exposing (..) frame : Frame frame = - { margin = Margin 0 0 0 0 - , size = Size 100 100 - } + { margin = Margin 0 0 0 0 + , size = Size 100 100 + } system : System @@ -101,4 +102,4 @@ vertical = updateFrame : System -> Frame -> System updateFrame system frame = - { system | frame = frame } + { system | frame = frame } From f5d880fb2595c33030f3618a552602ec25ccc0dc Mon Sep 17 00:00:00 2001 From: Ralf Northman Date: Fri, 19 Apr 2019 16:01:06 +0200 Subject: [PATCH 2/2] Effort to make time axes behave more reasonably. --- src/Internal/Axis/Values/Time.elm | 106 ++++++++++++++++++++++++++++-- 1 file changed, 99 insertions(+), 7 deletions(-) diff --git a/src/Internal/Axis/Values/Time.elm b/src/Internal/Axis/Values/Time.elm index a447ac1..5ff5ac5 100644 --- a/src/Internal/Axis/Values/Time.elm +++ b/src/Internal/Axis/Values/Time.elm @@ -5,7 +5,7 @@ module Internal.Axis.Values.Time exposing (values) import Internal.Coordinate as Coordinate import Internal.Utils as Utils import LineChart.Axis.Tick exposing (Interval, Time, Unit(..)) -import Time +import Time exposing (Month(..)) import Time.Extra @@ -135,9 +135,34 @@ findBestMultiple interval unit = -} beginAt : Time.Zone -> Time.Posix -> Unit -> Int -> Time.Posix beginAt zone min unit multiple = - min - |> Time.Extra.add (toExtraUnit unit) multiple zone - |> Time.Extra.ceiling (toExtraUnit unit) zone + let + firstWholeUnit : Time.Posix + firstWholeUnit = + Time.Extra.ceiling (toExtraUnit unit) zone min + + firstInUnit : Int + firstInUnit = + unitFunc unit firstWholeUnit + + multiMod : Int -> Int + multiMod x = + modBy multiple + (multiple - modBy multiple x) + + addAmount : Int + addAmount = + case unit of + Month -> + multiMod (firstInUnit - 1) + + Day -> + multiMod (firstInUnit - 1) + + _ -> + multiMod firstInUnit + in + firstWholeUnit + |> Time.Extra.add (toExtraUnit unit) addAmount zone next : Time.Zone -> Time.Posix -> Unit -> Int -> Time.Posix @@ -216,7 +241,7 @@ multiples : Unit -> List Int multiples unit = case unit of Millisecond -> - [ 1, 2, 5, 10, 20, 25, 50, 100, 200, 500 ] + [ 2, 5, 10, 20, 25, 50, 100, 200, 500 ] Second -> [ 1, 2, 5, 10, 15, 30 ] @@ -228,10 +253,10 @@ multiples unit = [ 1, 2, 3, 4, 6, 8, 12 ] Day -> - [ 1, 2 ] + [ 1, 2, 7, 14 ] Month -> - [ 1, 2, 3, 4, 6 ] + [ 1, 2, 3, 6 ] Year -> [ 1, 2, 5, 10, 20, 25, 50, 100, 200, 500, 1000, 10000 ] @@ -285,3 +310,70 @@ floatToPosix ms = posixsToFloat : Time.Posix -> Float posixsToFloat posix = Basics.toFloat (Time.posixToMillis posix) + + +unitFunc : Unit -> (Time.Posix -> Int) +unitFunc unit_ = + case unit_ of + Millisecond -> + Time.toMillis Time.utc + + Second -> + Time.toSecond Time.utc + + Minute -> + Time.toMinute Time.utc + + Hour -> + Time.toHour Time.utc + + Day -> + Time.toDay Time.utc + + Month -> + \time -> + Time.toMonth Time.utc time + |> monthToInt + + Year -> + Time.toSecond Time.utc + + +monthToInt : Month -> Int +monthToInt month = + case month of + Jan -> + 1 + + Feb -> + 2 + + Mar -> + 3 + + Apr -> + 4 + + May -> + 5 + + Jun -> + 6 + + Jul -> + 7 + + Aug -> + 8 + + Sep -> + 9 + + Oct -> + 10 + + Nov -> + 11 + + Dec -> + 12