From ece273b2f7143fb7328afb151ae8031ce9072a35 Mon Sep 17 00:00:00 2001 From: deciob Date: Sat, 11 Sep 2021 18:21:50 +0100 Subject: [PATCH] wip on grouped area line charts --- examples/LineChart.elm | 19 +++++++--- src/Chart/Internal/Line.elm | 72 ++++++++++++++++++++++++------------- src/Chart/Internal/Type.elm | 19 ++++++++-- src/Chart/Line.elm | 44 +++++++++++------------ 4 files changed, 99 insertions(+), 55 deletions(-) diff --git a/examples/LineChart.elm b/examples/LineChart.elm index bf16842..a1a4770 100644 --- 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 index fbe6db7..798b603 100644 --- 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 index 6f095f4..93f6374 100644 --- 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 index 11fb12f..0d17189 100644 --- 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