Skip to content

Instantly share code, notes, and snippets.

@kutyel
Forked from arunas-cesonis/GoogleChart.elm
Created September 5, 2019 06:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kutyel/6f375dc3fd60f96f187c3817108109b9 to your computer and use it in GitHub Desktop.
Save kutyel/6f375dc3fd60f96f187c3817108109b9 to your computer and use it in GitHub Desktop.
module GoogleChart exposing (..)
import Html exposing (Html)
import Html.Attributes as HtmlA
import Json.Encode as E
import List.Extra as List
import Chart exposing (..)
colors =
[ "5DA5DA"
, "4D4D4D"
, "FAA43A"
, "60BD68"
, "F17CB0"
, "B2912F"
, "B276B2"
, "DECF3F"
, "F15854"
]
view : Chart -> Html msg
view chart =
let
ty =
case chart.plot of
Pie _ ->
"pie"
Bar _ ->
"bar"
_ ->
"line"
p value =
E.float value
-- E.object [("v", E.float value), ("f", E.string <| String.fromFloat value)]
seriesToData { headerX, headerY, points } =
E.list (E.list identity) <|
[ [ E.string headerX, E.string headerY ] ]
++ List.map (\( label, value ) -> [ E.string label, p value ]) points
data =
case chart.plot of
Pie series ->
seriesToData series
Bar series ->
seriesToData series
Line lines ->
E.list identity <|
[ E.list (E.string << Tuple.first) lines ]
++ (List.map (E.list E.float) <|
List.transpose (List.map Tuple.second lines)
)
hiddenLegend =
[ ( "legend"
, E.object
[ ( "position", E.string "none" )
]
)
]
defaultLegend =
[]
legend =
case chart.plot of
Pie _ ->
[ ( "legend"
, E.object
[ ( "position", E.string "right" )
, ( "alignment", E.string "center" )
, ( "maxLines", E.int 5 )
]
)
]
Bar _ ->
hiddenLegend
_ ->
defaultLegend
defaultArea =
[]
tenPercentArea =
[ ( "chartArea"
, E.object <|
[ ( "top", E.string "15%" )
, ( "right", E.string "15%" )
, ( "bottom", E.string "15%" )
, ( "left", E.string "15%" )
]
)
]
chartArea =
case chart.plot of
Pie _ ->
tenPercentArea
Bar _ ->
tenPercentArea
_ ->
tenPercentArea
vAxis =
case chart.plot of
Line _ ->
[ ( "vAxis"
, E.object
[ ( "baseline", E.float 2 )
]
)
]
_ ->
[ ( "vAxis"
, E.object
[ ( "format", E.string "percent" )
]
)
]
hAxis =
case chart.plot of
Line lines ->
[ ( "hAxis"
, E.object []
-- [ ( "baseline", E.float 1298 )
-- ]
)
]
_ ->
[]
in
Html.node
"google-chart"
[ HtmlA.property "type" <| E.string ty
-- , HtmlA.style "width" (chart.size.width |> round |> String.fromInt |> (\x -> x ++ "px"))
-- , HtmlA.style "height" (chart.size.height |> round |> String.fromInt |> (\x -> x ++ "px"))
, HtmlA.property "options" <|
E.object <|
[ ( "colors", E.list E.string colors )
, ( "is3D", E.bool True )
, ( "backgroundColor", E.string "transparent" )
-- , ( "title", E.string chart.title )
, ( "titleTextStyle"
, E.object <|
[ ( "fontSize", E.int 20 )
, ( "fontName", E.string "sans-serif" )
, ( "bold", E.bool False )
]
)
-- , ( "pieSliceText", E.string "label" )
]
++ chartArea
++ legend
++ vAxis
++ hAxis
, HtmlA.property "data" data
]
[]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment