Created
September 4, 2019 13:44
-
-
Save arunas-cesonis/a9bceaffbe95b4f97b0cf2ae52c16e09 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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