data-viz-lab · deciob · Sep 11, 2021
diff --git a/examples/LineChart.elm b/examples/LineChart.elm
@@ -97,7 +97,7 @@ sharedStackedLineConfig =
         |> Line.withLineStyle [ ( "stroke-width", "2" ) ]
         |> Line.withLabels Line.xGroupLabel
         |> Line.withColorPalette Scale.Color.tableau10
-        |> Line.withStackedLayout Line.drawLine
+        |> Line.withStackedLayout Shape.stackOffsetNone
         |> Line.withSymbols (icons "chart-b")
 
 
@@ -198,7 +198,14 @@ groupedTimeLine =
 
 groupedLine : Html msg
 groupedLine =
-    sharedGroupedLineConfig
+    Line.init requiredConfig
+        |> Line.withColorPalette Scale.Color.tableau10
+        |> Line.withYAxis yAxis
+        |> Line.withXAxisCont xAxis
+        |> Line.withLineStyle [ ( "opacity", "0.7" ), ( "stroke-width", "2" ) ]
+        |> Line.withLabels Line.xGroupLabel
+        |> Line.withGroupedLayout
+        |> Line.asArea
         |> Line.withXAxisCont xAxis
         |> Line.render ( dataContinuous, accessorContinuous )
 
@@ -220,16 +227,18 @@ stackedLine =
 stackedTimeArea : Html msg
 stackedTimeArea =
     sharedStackedLineConfig
+        |> Line.asArea
         |> Line.withXAxisTime xAxisTime
-        |> Line.withStackedLayout (Line.drawArea Shape.stackOffsetNone)
+        |> Line.withStackedLayout Shape.stackOffsetNone
         |> Line.render ( timeData, timeAccessor )
 
 
 stackedArea : Html msg
 stackedArea =
     sharedStackedLineConfig
+        |> Line.asArea
         |> Line.withXAxisCont xAxis
-        |> Line.withStackedLayout (Line.drawArea Shape.stackOffsetNone)
+        |> Line.withStackedLayout Shape.stackOffsetNone
         |> Line.render ( dataContinuous, accessorContinuous )
 
 
@@ -268,7 +277,7 @@ main =
             , style "color" "#444"
             , style "margin" "25px"
             ]
-            [ Html.div attrs [ chartTitle "grouped", groupedLine ]
+            [ Html.div attrs [ chartTitle "grouped Area", groupedLine ]
             , Html.div attrs [ chartTitle "grouped time", groupedTimeLine ]
             , Html.div attrs [ chartTitle "stacked", stackedLine ]
             , Html.div attrs [ chartTitle "stacked time", stackedTimeLine ]

diff --git a/src/Chart/Internal/Line.elm b/src/Chart/Internal/Line.elm
@@ -36,6 +36,7 @@ import Chart.Internal.Type
         , Layout(..)
         , LineDraw(..)
         , PointContinuous
+        , StackOffset
         , ariaLabelledbyContent
         , bottomGap
         , colorStyle
@@ -248,8 +249,8 @@ renderLineGrouped ( data, config ) =
 -- STACKED
 
 
-renderLineStacked : LineDraw -> ( DataContinuousGroup, Config msg validation ) -> Html msg
-renderLineStacked lineDraw ( data, config ) =
+renderLineStacked : StackOffset -> ( DataContinuousGroup, Config msg validation ) -> Html msg
+renderLineStacked offset ( data, config ) =
     let
         c =
             fromConfig config
@@ -290,20 +291,12 @@ renderLineStacked lineDraw ( data, config ) =
 
         stackedConfig : StackConfig String
         stackedConfig =
-            case lineDraw of
-                Line ->
-                    { data = dataStacked
-                    , offset = Shape.stackOffsetNone
-                    , order = identity
-                    }
-
-                Area stackingMethod ->
-                    { data = dataStacked
-                    , offset = stackingMethod
+            { data = dataStacked
+            , offset = offset
 
-                    --TODO: this might need some thinking
-                    , order = identity
-                    }
+            --TODO: this might need some thinking
+            , order = identity
+            }
 
         stackResult =
             Shape.stack stackedConfig
@@ -356,12 +349,12 @@ renderLineStacked lineDraw ( data, config ) =
                 c.yScale
 
         draw =
-            case lineDraw of
+            case c.lineDraw of
                 Line ->
                     drawContinuousLine config xContinuousScale yScale combinedData
 
-                Area _ ->
-                    drawAreas config xContinuousScale yScale stackResult combinedData
+                Area ->
+                    drawStackedAreas config xContinuousScale yScale stackResult combinedData
 
         events =
             c.events
@@ -789,14 +782,30 @@ defaultSymbolSize =
     10
 
 
-drawAreas :
+areaGenerator :
+    ContinuousScale Float
+    -> ContinuousScale Float
+    -> PointContinuous
+    -> Maybe ( ( Float, Float ), ( Float, Float ) )
+areaGenerator xScale yScale ( x1, y1 ) =
+    let
+        x =
+            Scale.convert xScale x1
+    in
+    Just
+        ( ( x, Scale.convert yScale y1 )
+        , ( x, Scale.convert yScale 0 )
+        )
+
+
+drawStackedAreas :
     Config msg validation
     -> ContinuousScale Float
     -> ContinuousScale Float
     -> StackResult String
     -> List DataGroupContinuous
     -> List (Svg msg)
-drawAreas config xScale yScale stackedResult combinedData =
+drawStackedAreas config xScale yScale stackedResult combinedData =
     let
         c =
             fromConfig config
@@ -905,13 +914,28 @@ drawContinuousLine config xScale yScale sortedData =
 
         line : DataGroupContinuous -> Path
         line dataGroup =
-            dataGroup.points
-                |> List.map lineGenerator
-                |> Shape.line c.curve
+            case c.lineDraw of
+                Line ->
+                    dataGroup.points
+                        |> List.map lineGenerator
+                        |> Shape.line c.curve
+
+                Area ->
+                    dataGroup.points
+                        |> List.map (areaGenerator xScale yScale)
+                        |> Shape.area c.curve
+
+        extraStyles =
+            case c.lineDraw of
+                Line ->
+                    [ ( "fill", "none" ) ]
+
+                Area ->
+                    []
 
         styles idx =
             colorStyle c (Just idx) Nothing
-                |> Helpers.mergeStyles [ ( "fill", "none" ) ]
+                |> Helpers.mergeStyles extraStyles
                 |> Helpers.mergeStyles c.coreStyle
                 |> style
 

diff --git a/src/Chart/Internal/Type.elm b/src/Chart/Internal/Type.elm
@@ -35,6 +35,7 @@ module Chart.Internal.Type exposing
     , PointContinuous
     , RenderContext(..)
     , RequiredConfig
+    , StackOffset
     , StackedValues
     , Steps
     , YScale(..)
@@ -94,6 +95,7 @@ module Chart.Internal.Type exposing
     , setHistogramDomain
     , setIcons
     , setLayout
+    , setLineDraw
     , setOrientation
     , setSvgDesc
     , setSvgTitle
@@ -278,10 +280,14 @@ type Orientation
 
 type LineDraw
     = Line
-    | Area (List (List ( Float, Float )) -> List (List ( Float, Float )))
+    | Area
 
 
-lineDrawArea : (List (List ( Float, Float )) -> List (List ( Float, Float ))) -> LineDraw
+type alias StackOffset =
+    List (List ( Float, Float )) -> List (List ( Float, Float ))
+
+
+lineDrawArea : LineDraw
 lineDrawArea =
     Area
 
@@ -293,7 +299,7 @@ lineDrawLine =
 
 type Layout
     = StackedBar Direction
-    | StackedLine LineDraw
+    | StackedLine StackOffset
     | GroupedBar
     | GroupedLine
 
@@ -434,6 +440,7 @@ type alias ConfigStruct msg =
     , histogramDomain : Maybe ( Float, Float )
     , symbols : List Symbol
     , layout : Layout
+    , lineDraw : LineDraw
     , margin : Margin
     , orientation : Orientation
     , showColumnTitle : ColumnTitle
@@ -473,6 +480,7 @@ defaultConfig =
         , histogramDomain = Nothing
         , symbols = []
         , layout = defaultLayout
+        , lineDraw = Line
         , margin = defaultMargin
         , orientation = defaultOrientation
         , showColumnTitle = NoColumnTitle
@@ -604,6 +612,11 @@ setLayout layout (Config c) =
     toConfig { c | layout = layout }
 
 
+setLineDraw : LineDraw -> Config msg validation -> Config msg validation
+setLineDraw lineDraw (Config c) =
+    toConfig { c | lineDraw = lineDraw }
+
+
 setIcons : List Symbol -> Config msg validation -> Config msg validation
 setIcons all (Config c) =
     Config { c | symbols = all }

diff --git a/src/Chart/Line.elm b/src/Chart/Line.elm
@@ -3,8 +3,8 @@ module Chart.Line exposing
     , init
     , render
     , Config, RequiredConfig
-    , withColorPalette, withCurve, withDesc, withLabels, withGroupedLayout, withLineStyle, withTableFloatFormat, withTablePosixFormat, withoutTable, withStackedLayout, withTitle, withXContDomain, withXContinuousDomain, withXTimeDomain, withYDomain, withLogYScale, withPointAnnotation, withVLineAnnotation, withEvent
-    , axisBottom, axisGrid, axisLeft, axisRight, xGroupLabel, drawArea, drawLine
+    , asArea, withColorPalette, withCurve, withDesc, withLabels, withGroupedLayout, withLineStyle, withTableFloatFormat, withTablePosixFormat, withoutTable, withStackedLayout, withTitle, withXContDomain, withXContinuousDomain, withXTimeDomain, withYDomain, withLogYScale, withPointAnnotation, withVLineAnnotation, withEvent
+    , axisBottom, axisGrid, axisLeft, axisRight, xGroupLabel, drawLine
     , XAxis, YAxis, hideAxis, hideXAxis, hideYAxis, withXAxisCont, withXAxisContinuous, withXAxisTime, withYAxis
     , withSymbols
     , Hint, hoverAll, hoverOne
@@ -37,12 +37,12 @@ It expects the X axis to plot time or continuous data and the Y axis to plot con
 
 # Optional Configuration setters
 
-@docs withColorPalette, withCurve, withDesc, withLabels, withGroupedLayout, withLineStyle, withTableFloatFormat, withTablePosixFormat, withoutTable, withStackedLayout, withTitle, withXContDomain, withXContinuousDomain, withXTimeDomain, withYDomain, withLogYScale, withPointAnnotation, withVLineAnnotation, withEvent
+@docs asArea, withColorPalette, withCurve, withDesc, withLabels, withGroupedLayout, withLineStyle, withTableFloatFormat, withTablePosixFormat, withoutTable, withStackedLayout, withTitle, withXContDomain, withXContinuousDomain, withXTimeDomain, withYDomain, withLogYScale, withPointAnnotation, withVLineAnnotation, withEvent
 
 
 # Configuration arguments
 
-@docs axisBottom, axisGrid, axisLeft, axisRight, xGroupLabel, drawArea, drawLine
+@docs axisBottom, axisGrid, axisLeft, axisRight, xGroupLabel, drawLine
 
 
 # Axis
@@ -222,14 +222,26 @@ render ( externalData, accessor ) config =
         Type.GroupedLine ->
             renderLineGrouped ( data, config )
 
-        Type.StackedLine lineDraw ->
-            renderLineStacked lineDraw ( data, config )
+        Type.StackedLine offset ->
+            renderLineStacked offset ( data, config )
 
         _ ->
             -- TODO
             Html.text ""
 
 
+{-| Draw the line chart as an area
+
+    Line.init requiredConfig
+        |> Line.asArea
+        |> Line.render ( data, accessor )
+
+-}
+asArea : Config msg validation -> Config msg validation
+asArea =
+    Type.setLineDraw Type.Area
+
+
 {-| Sets the line curve shape
 
 Defaults to `Shape.continuousCurve`
@@ -406,9 +418,9 @@ It takes an option to draw stacked lines or stacked areas
         |> Line.render ( data, accessor )
 
 -}
-withStackedLayout : Type.LineDraw -> Config msg validation -> Config msg validation
-withStackedLayout lineDraw config =
-    Type.setLayout (Type.StackedLine lineDraw) config
+withStackedLayout : Type.StackOffset -> Config msg validation -> Config msg validation
+withStackedLayout offset config =
+    Type.setLayout (Type.StackedLine offset) config
 
 
 {-| Creates a grouped line chart.
@@ -723,20 +735,6 @@ withVLineAnnotation annotation config =
             config
 
 
-{-| A stacked chart with areas option.
-It takes a [Stack Offset](https://package.elm-lang.org/packages/gampleman/elm-visualization/latest/Shape#stackOffsetNone) option from the elm-visualization Shape module.
-
-    Line.init requiredConfig
-        |> Line.withStackedLayout
-            (Line.drawArea Shape.stackOffsetNone)
-        |> Line.render ( data, accessor )
-
--}
-drawArea : (List (List ( Float, Float )) -> List (List ( Float, Float ))) -> Type.LineDraw
-drawArea =
-    Type.lineDrawArea
-
-
 {-| A stacked chart with lines option.
 
     Line.init requiredConfig