Add statically typed color representation

docs/1_3_shapes.fsx

@@ -47,8 +47,8 @@ multiple shapes at once.
 
 open Plotly.NET.LayoutObjects
 
-let s1 = Shape.init (StyleParam.ShapeType.Rectangle,2.,4.,3.,4.,Opacity=0.3,Fillcolor="#d3d3d3")
-let s2 = Shape.init (StyleParam.ShapeType.Rectangle,5.,7.,3.,4.,Opacity=0.3,Fillcolor="#d3d3d3")
+let s1 = Shape.init (StyleParam.ShapeType.Rectangle,2.,4.,3.,4.,Opacity=0.3,Fillcolor= Color.fromHex "#d3d3d3")
+let s2 = Shape.init (StyleParam.ShapeType.Rectangle,5.,7.,3.,4.,Opacity=0.3,Fillcolor= Color.fromHex "#d3d3d3")
 
 let shapes =
     Chart.Line(x,y',Name="line")    

docs/1_4_annotations.fsx

@@ -49,7 +49,7 @@ multiple annotations at once.
 open Plotly.NET.LayoutObjects
 
 let a1 = Annotation.init (X=2.,Y=4.,Text = "Hi there!")
-let a2 = Annotation.init (X=5.,Y=7.,Text="I am another annotation!",BGColor="white",BorderColor="black")
+let a2 = Annotation.init (X=5.,Y=7.,Text="I am another annotation!",BGColor= Color.fromString "white",BorderColor= Color.fromString  "black")
 
 let annotations =
     Chart.Line(x,y',Name="line")    

docs/2_3_range-plots.fsx

@@ -52,8 +52,8 @@ let range1 =
     Chart.Range(
         x,y,yUpper,yLower,
         StyleParam.Mode.Lines_Markers,
-        Color="grey",
-        RangeColor="lightblue")
+        Color = Color.fromString "grey",
+        RangeColor = Color.fromString "lightblue")
 
 (*** condition: ipynb ***)
 #if IPYNB

docs/2_6_table.fsx

@@ -79,11 +79,11 @@ let table2 =
         //sets cell row colors
         //ColorCells=[["#deebf7";"lightgrey"]],
         //sets font of header
-        FontHeader  = Font.init(FontFamily.Courier_New, Size=12., Color="white"),      
+        FontHeader  = Font.init(FontFamily.Courier_New, Size=12., Color=Color.fromString "white"),      
         //sets the height of the header
         HeightHeader= 30.,
         //sets lines of header
-        LineHeader  = Line.init(2.,"black"),                     
+        LineHeader  = Line.init(2.,Color.fromString "black"),                     
         ColumnWidth = [70;50;100;70],      
         //defines order of columns
         ColumnOrder = [1;2;3;4]                                  
@@ -120,8 +120,8 @@ let mapColor min max value =
     let proportion = 
         (255. * (value - min) / (max - min))
         |> int
-    Colors.fromRgb 255 (255 - proportion) proportion
-    |> Colors.toWebColor
+    ARGB.fromRGB 255 (255 - proportion) proportion
+    |> ARGB.toWebHex
 
 //Assign a color to every cell seperately. Matrix must be transposed for correct orientation.
 let cellcolor = 
@@ -196,7 +196,7 @@ let cellcolors =
     |> Seq.map (fun x -> Seq.append x (seq ["white"]))
 
 let font = Font.init(FontFamily.Consolas,Size=14.)
-let line = Line.init(0.,"white")
+let line = Line.init(0.,Color.fromString "white")
 let chartwidth = 50. + 10. * float elementsPerRow
 
 let table4 =

docs/4_5_splom.fsx

@@ -52,7 +52,7 @@ Until that is fixed, consider creating splom plot programatically using `Chart.G
 *)
 
 let splom1 =
-    Chart.Splom(data,Color="blue")
+    Chart.Splom(data,Color=Color.fromString "blue")
 
 (*** condition: ipynb ***)
 #if IPYNB

docs/5_0_geo-vs-mapbox.fsx

@@ -72,15 +72,15 @@ let myGeo =
     Geo.init(
         Resolution=StyleParam.GeoResolution.R50,
         ShowCoastLines=true, 
-        CoastLineColor="RebeccaPurple",
+        CoastLineColor=Color.fromString "RebeccaPurple",
         ShowLand=true, 
-        LandColor="LightGreen",
+        LandColor=Color.fromString "LightGreen",
         ShowOcean=true, 
-        OceanColor="LightBlue",
+        OceanColor=Color.fromString "LightBlue",
         ShowLakes=true, 
-        LakeColor="Blue",
+        LakeColor=Color.fromString "Blue",
         ShowRivers=true, 
-        RiverColor="Blue"
+        RiverColor=Color.fromString "Blue"
     )
 
 let moreFeaturesBaseMap =
@@ -114,7 +114,7 @@ let countryGeo =
         Visible=false, 
         Resolution=StyleParam.GeoResolution.R50,
         ShowCountries=true, 
-        CountryColor="RebeccaPurple"
+        CountryColor=Color.fromString "RebeccaPurple"
     )
 
 

docs/5_1_geo-plots.fsx

@@ -64,7 +64,7 @@ let pointGeo =
     |> Chart.withGeoStyle(
         Scope=StyleParam.GeoScope.NorthAmerica, 
         Projection=GeoProjection.init(StyleParam.GeoProjectionType.AzimuthalEqualArea),
-        CountryColor = "lightgrey"
+        CountryColor = Color.fromString "lightgrey"
     )
     |> Chart.withMarginSize(0,0,0,0)
 
@@ -106,7 +106,7 @@ let flights =
         Chart.LineGeo(
             [startCoords; endCoords],
             Opacity = opacityVals.[i],
-            Color = "red"
+            Color = Color.fromString "red"
         )
     )
     |> Chart.combine
@@ -115,7 +115,7 @@ let flights =
         Scope=StyleParam.GeoScope.NorthAmerica, 
         Projection=GeoProjection.init(StyleParam.GeoProjectionType.AzimuthalEqualArea),
         ShowLand=true,
-        LandColor = "lightgrey"
+        LandColor = Color.fromString "lightgrey"
     )
     |> Chart.withMarginSize(0,0,50,0)
     |> Chart.withTitle "Feb. 2011 American Airline flights"

docs/5_2_choropleth-map.fsx

@@ -124,7 +124,7 @@ let choroplethMap2 =
         Projection=GeoProjection.init(projectionType=StyleParam.GeoProjectionType.Mollweide),
         ShowLakes=true,
         ShowOcean=true,
-        OceanColor="lightblue",
+        OceanColor=Color.fromString "lightblue",
         ShowRivers=true)
     |> Chart.withColorBarStyle (Title.init("Alcohol consumption[l/y]"),Length=0.5)
 
@@ -244,7 +244,7 @@ let choroplethGeoJSON =
             Scope=StyleParam.GeoScope.NorthAmerica, 
             Projection=GeoProjection.init(StyleParam.GeoProjectionType.AzimuthalEqualArea),
             ShowLand=true,
-            LandColor = "lightgrey"
+            LandColor = Color.fromString "lightgrey"
         )
     )
     |> Chart.withSize (800.,800.)

docs/6_1_mapbox-plots.fsx

@@ -103,7 +103,7 @@ let flights =
         Chart.LineMapbox(
             [startCoords; endCoords],
             Opacity = opacityVals.[i],
-            Color = "red"
+            Color = Color.fromString "red"
         )
     )
     |> Chart.combine

docs/7_1_funnel.fsx

@@ -45,15 +45,15 @@ open Plotly.NET
 open Plotly.NET.TraceObjects
 
 // Customize the connector lines used to connect the funnel bars
-let connectorLine = Line.init (Color="royalblue", Dash=StyleParam.DrawingStyle.Dot, Width=3.)
+let connectorLine = Line.init (Color=Color.fromString "royalblue", Dash=StyleParam.DrawingStyle.Dot, Width=3.)
 let connector = FunnelConnector.init(Line=connectorLine)
 
 // Customize the outline of the funnel bars
-let line = Line.init(Width=2.,Color="3E4E88")
+let line = Line.init(Width=2.,Color=Color.fromHex "3E4E88")
 
 // create a funnel chart using custom connectors and outlines
 let funnel =
-    Chart.Funnel (x,y,Color="59D4E8", Line=line, Connector=connector)
+    Chart.Funnel (x,y,Color=Color.fromHex "59D4E8", Line=line, Connector=connector)
     |> Chart.withMarginSize(Left=100)
 
 (*** condition: ipynb ***)

docs/7_2_funnel_area.fsx

@@ -44,7 +44,7 @@ to visualizing funnel data.
 
 open Plotly.NET 
 
-let line = Line.init (Color="purple", Width=3.)
+let line = Line.init (Color=Color.fromString "purple", Width=3.)
 
 let funnelArea = 
     Chart.FunnelArea(Values=values, Text=text, Line=line)

docs/8_0_polar_line-scatter-plots.fsx

@@ -75,7 +75,7 @@ You can for example change the line style using `Chart.withLineStyle`
 
 let linePolar = 
     Chart.LinePolar(radial,theta)
-    |> Chart.withLineStyle(Color="purple",Dash=StyleParam.DrawingStyle.DashDot)
+    |> Chart.withLineStyle(Color=Color.fromString "purple",Dash=StyleParam.DrawingStyle.DashDot)
 
 (*** condition: ipynb ***)
 #if IPYNB

docs/8_2_styling_polar_layouts.fsx

@@ -97,13 +97,13 @@ let styledPolar2 =
     styledPolar
     |> Chart.withAngularAxis(
         AngularAxis.init(
-            Color="darkblue"
+            Color=Color.fromString "darkblue"
         )
     )
     |> Chart.withRadialAxis(
         RadialAxis.init(
             Title = Title.init("Hi, i am the radial axis"),
-            Color="darkblue",
+            Color=Color.fromString "darkblue",
             SeparateThousands = true
         )
     )

docs/9_0_parallel-categories.fsx

@@ -45,7 +45,7 @@ let dims =
 let parcats =
     Chart.ParallelCategories(
         dims,
-        Color=[0.;1.;0.;1.;0.;0.;0.],
+        Color = Color.fromColorScaleValues [0.;1.;0.;1.;0.;0.;0.],
         Colorscale = StyleParam.Colorscale.Blackbody
     )
 

docs/9_1_parallel-coords.fsx

@@ -53,7 +53,7 @@ the position of the vertex on the i-th axis corresponds to the i-th coordinate o
 *)
 
 let parcoords1 =
-    Chart.ParallelCoord(data,Color="blue")
+    Chart.ParallelCoord(data,Color=Color.fromString "blue")
 
 (*** condition: ipynb ***)
 #if IPYNB
@@ -83,7 +83,7 @@ let parcoords =
     let dyn = Trace("parcoords")
 
     dyn?dimensions <- v
-    dyn?line <- Line.init(Color = "blue")
+    dyn?line <- Line.init(Color=Color.fromString "blue")
 
     dyn
     |> GenericChart.ofTraceObject

src/Plotly.NET/ChartAPI/Chart2D.fs

@@ -602,15 +602,15 @@ module Chart2D =
                         Trace2DStyle.Scatter(X = x,Y = lower, Mode=StyleParam.Mode.Lines, ?FillColor=RangeColor) )               
                 |> TraceStyle.TraceInfo(?Name = Some lowerName, Showlegend=false)
                 |> TraceStyle.Line(Width=0.)
-                |> TraceStyle.Marker(Color=if RangeColor.IsSome then RangeColor.Value else "rgba(0,0,0,0.5)")             
+                |> TraceStyle.Marker(Color=if RangeColor.IsSome then RangeColor.Value else (Plotly.NET.Color.fromString "rgba(0,0,0,0.5)"))             
                 |> TraceStyle.TextLabel(?Text=LowerLabels,?Textposition=TextPosition,?Textfont=TextFont)
 
             let upper = 
                 Trace2D.initScatter (
                         Trace2DStyle.Scatter(X = x,Y = upper, Mode=StyleParam.Mode.Lines, ?FillColor=RangeColor, Fill=StyleParam.Fill.ToNext_y) )               
                 |> TraceStyle.TraceInfo(?Name = Some upperName, Showlegend=false)
                 |> TraceStyle.Line(Width=0.)
-                |> TraceStyle.Marker(Color=if RangeColor.IsSome then RangeColor.Value else "rgba(0,0,0,0.5)")             
+                |> TraceStyle.Marker(Color=if RangeColor.IsSome then RangeColor.Value else (Plotly.NET.Color.fromString "rgba(0,0,0,0.5)"))             
                 |> TraceStyle.TextLabel(?Text=UpperLabels,?Textposition=TextPosition,?Textfont=TextFont)
 
             GenericChart.MultiChart ([lower;upper;trace],Layout(),Config(), DisplayOptions())

src/Plotly.NET/ChartAPI/ChartDomain.fs

@@ -21,15 +21,15 @@ module ChartDomain =
                 [<Optional;DefaultParameterValue(null)>]  ?Labels:seq<'IConvertible>,
                 [<Optional;DefaultParameterValue(null)>]  ?Name,
                 [<Optional;DefaultParameterValue(null)>]  ?Showlegend,
-                [<Optional;DefaultParameterValue(null)>]  ?Colors,
+                [<Optional;DefaultParameterValue(null)>]  ?Color,
                 [<Optional;DefaultParameterValue(null)>]  ?TextPosition,
                 [<Optional;DefaultParameterValue(null)>]  ?TextFont,
                 [<Optional;DefaultParameterValue(null)>]  ?Hoverinfo,
                 [<Optional;DefaultParameterValue(null)>]  ?Textinfo,
                 [<Optional;DefaultParameterValue(null)>]  ?Opacity) =         
             TraceDomain.initPie (TraceDomainStyle.Pie(Values=values,?Labels=Labels,?Textinfo=Textinfo))
             |> TraceStyle.TraceInfo(?Name=Name,?Showlegend=Showlegend,?Opacity=Opacity,?Hoverinfo=Hoverinfo)        
-            |> TraceStyle.Marker(?Colors=Colors)
+            |> TraceStyle.Marker(?Color=Color)
             |> TraceStyle.TextLabel(?Text=Labels,?Textposition=TextPosition,?Textfont=TextFont)
             |> GenericChart.ofTraceObject 
 
@@ -38,22 +38,22 @@ module ChartDomain =
         static member Pie(data:seq<#IConvertible*#IConvertible>,
                 [<Optional;DefaultParameterValue(null)>]  ?Name,
                 [<Optional;DefaultParameterValue(null)>]  ?Showlegend,
-                [<Optional;DefaultParameterValue(null)>]  ?Colors,
+                [<Optional;DefaultParameterValue(null)>]  ?Color,
                 [<Optional;DefaultParameterValue(null)>]  ?TextPosition,
                 [<Optional;DefaultParameterValue(null)>]  ?TextFont,
                 [<Optional;DefaultParameterValue(null)>]  ?Hoverinfo,
                 [<Optional;DefaultParameterValue(null)>]  ?Textinfo,
                 [<Optional;DefaultParameterValue(null)>]  ?Opacity) =         
             let values,labels = Seq.unzip data 
-            Chart.Pie(values,Labels=labels,?Name=Name,?Showlegend=Showlegend,?Colors=Colors,?TextPosition=TextPosition,?TextFont=TextFont,?Hoverinfo=Hoverinfo,?Textinfo=Textinfo,?Opacity=Opacity)
+            Chart.Pie(values,Labels=labels,?Name=Name,?Showlegend=Showlegend,?Color=Color,?TextPosition=TextPosition,?TextFont=TextFont,?Hoverinfo=Hoverinfo,?Textinfo=Textinfo,?Opacity=Opacity)
 
 
         /// Shows how proportions of data, shown as pie-shaped pieces, contribute to the data as a whole.
         static member Doughnut(values,
                 [<Optional;DefaultParameterValue(null)>]  ?Labels,
                 [<Optional;DefaultParameterValue(null)>]  ?Name,
                 [<Optional;DefaultParameterValue(null)>]  ?Showlegend,
-                [<Optional;DefaultParameterValue(null)>]  ?Colors,
+                [<Optional;DefaultParameterValue(null)>]  ?Color,
                 [<Optional;DefaultParameterValue(null)>]  ?Hole,
                 [<Optional;DefaultParameterValue(null)>]  ?TextPosition,
                 [<Optional;DefaultParameterValue(null)>]  ?TextFont,
@@ -63,7 +63,7 @@ module ChartDomain =
             let hole' = if Hole.IsSome then Hole.Value else 0.4
             TraceDomain.initPie (TraceDomainStyle.Pie(Values=values,?Labels=Labels,?Textinfo=Textinfo,Hole=hole'))
             |> TraceStyle.TraceInfo(?Name=Name,?Showlegend=Showlegend,?Opacity=Opacity,?Hoverinfo=Hoverinfo)        
-            |> TraceStyle.Marker(?Colors=Colors)
+            |> TraceStyle.Marker(?Color=Color)
             |> TraceStyle.TextLabel(?Text=Labels,?Textposition=TextPosition,?Textfont=TextFont)
             |> GenericChart.ofTraceObject 
 
@@ -72,15 +72,15 @@ module ChartDomain =
         static member Doughnut(data:seq<#IConvertible*#IConvertible>,
                 [<Optional;DefaultParameterValue(null)>]  ?Name,
                 [<Optional;DefaultParameterValue(null)>]  ?Showlegend,
-                [<Optional;DefaultParameterValue(null)>]  ?Colors,
+                [<Optional;DefaultParameterValue(null)>]  ?Color,
                 [<Optional;DefaultParameterValue(null)>]  ?Hole,
                 [<Optional;DefaultParameterValue(null)>]  ?TextPosition,
                 [<Optional;DefaultParameterValue(null)>]  ?TextFont,
                 [<Optional;DefaultParameterValue(null)>]  ?Hoverinfo,
                 [<Optional;DefaultParameterValue(null)>]  ?Textinfo,
                 [<Optional;DefaultParameterValue(null)>]  ?Opacity) =         
             let values,labels = Seq.unzip data 
-            Chart.Doughnut(values,Labels=labels,?Name=Name,?Showlegend=Showlegend,?Colors=Colors,?Hole=Hole,?TextPosition=TextPosition,?TextFont=TextFont,?Hoverinfo=Hoverinfo,?Textinfo=Textinfo,?Opacity=Opacity)
+            Chart.Doughnut(values,Labels=labels,?Name=Name,?Showlegend=Showlegend,?Color=Color,?Hole=Hole,?TextPosition=TextPosition,?TextFont=TextFont,?Hoverinfo=Hoverinfo,?Textinfo=Textinfo,?Opacity=Opacity)
 
 
 
@@ -194,12 +194,12 @@ module ChartDomain =
         ///Colors: Sets the color of each sector of this trace. If not specified, the default trace color set is used to pick the sector colors.
         static member Sunburst(labels,parents,
             [<Optional;DefaultParameterValue(null)>]?Ids,
-            [<Optional;DefaultParameterValue(null)>]?Values             ,
-            [<Optional;DefaultParameterValue(null)>]?Text               ,
-            [<Optional;DefaultParameterValue(null)>]?Branchvalues       ,
-            [<Optional;DefaultParameterValue(null)>]?Level              ,
-            [<Optional;DefaultParameterValue(null)>]?Maxdepth           ,
-            [<Optional;DefaultParameterValue(null)>]?Colors: seq<string>,
+            [<Optional;DefaultParameterValue(null)>]?Values,
+            [<Optional;DefaultParameterValue(null)>]?Text,
+            [<Optional;DefaultParameterValue(null)>]?Branchvalues,
+            [<Optional;DefaultParameterValue(null)>]?Level,
+            [<Optional;DefaultParameterValue(null)>]?Maxdepth,
+            [<Optional;DefaultParameterValue(null)>]?Color,
             [<Optional;DefaultParameterValue(null)>]?ColorBar:ColorBar
             ) =
             TraceDomain.initSunburst(
@@ -214,7 +214,7 @@ module ChartDomain =
                     ?Maxdepth       = Maxdepth
                 )
             )
-            |> TraceStyle.Marker(?Colors=Colors,?ColorBar=ColorBar)
+            |> TraceStyle.Marker(?Color=Color,?ColorBar=ColorBar)
             |> GenericChart.ofTraceObject
 
 
@@ -243,14 +243,14 @@ module ChartDomain =
         ///Colors: Sets the color of each sector of this trace. If not specified, the default trace color set is used to pick the sector colors.
         static member Treemap(labels,parents,
             [<Optional;DefaultParameterValue(null)>]?Ids,
-            [<Optional;DefaultParameterValue(null)>]?Values             ,
-            [<Optional;DefaultParameterValue(null)>]?Text               ,
-            [<Optional;DefaultParameterValue(null)>]?Branchvalues       ,
-            [<Optional;DefaultParameterValue(null)>]?Tiling             ,
-            [<Optional;DefaultParameterValue(null)>]?PathBar            ,
-            [<Optional;DefaultParameterValue(null)>]?Level              ,
-            [<Optional;DefaultParameterValue(null)>]?Maxdepth           ,
-            [<Optional;DefaultParameterValue(null)>]?Colors: seq<string>,
+            [<Optional;DefaultParameterValue(null)>]?Values,
+            [<Optional;DefaultParameterValue(null)>]?Text,
+            [<Optional;DefaultParameterValue(null)>]?Branchvalues,
+            [<Optional;DefaultParameterValue(null)>]?Tiling,
+            [<Optional;DefaultParameterValue(null)>]?PathBar,
+            [<Optional;DefaultParameterValue(null)>]?Level,
+            [<Optional;DefaultParameterValue(null)>]?Maxdepth,
+            [<Optional;DefaultParameterValue(null)>]?Color,
             [<Optional;DefaultParameterValue(null)>]?ColorBar:ColorBar
             ) =
             TraceDomain.initTreemap(
@@ -267,7 +267,7 @@ module ChartDomain =
                     ?Maxdepth       = Maxdepth
                 )
             )
-            |> TraceStyle.Marker(?Colors=Colors,?ColorBar=ColorBar)
+            |> TraceStyle.Marker(?Color=Color,?ColorBar=ColorBar)
             |> GenericChart.ofTraceObject