Skip to content

Add Image trace style #188

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Sep 20, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions Plotly.NET.sln
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "docs", "docs", "{7B09CC0A-F
docs\01_2_multiple-charts.fsx = docs\01_2_multiple-charts.fsx
docs\01_3_shapes.fsx = docs\01_3_shapes.fsx
docs\01_4_annotations.fsx = docs\01_4_annotations.fsx
docs\01_5_layout_images.fsx = docs\01_5_layout_images.fsx
docs\02_0_line-scatter-plots.fsx = docs\02_0_line-scatter-plots.fsx
docs\02_1_bar-and-column-charts.fsx = docs\02_1_bar-and-column-charts.fsx
docs\02_2_area-plots.fsx = docs\02_2_area-plots.fsx
Expand All @@ -57,6 +58,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "docs", "docs", "{7B09CC0A-F
docs\02_5_pie-doughnut-charts.fsx = docs\02_5_pie-doughnut-charts.fsx
docs\02_6_table.fsx = docs\02_6_table.fsx
docs\02_7_heatmaps.fsx = docs\02_7_heatmaps.fsx
docs\02_8_Images.fsx = docs\02_8_Images.fsx
docs\03_0_3d-scatter-plots.fsx = docs\03_0_3d-scatter-plots.fsx
docs\03_1_3d-surface-plots.fsx = docs\03_1_3d-surface-plots.fsx
docs\03_2_3d-mesh-plots.fsx = docs\03_2_3d-mesh-plots.fsx
Expand Down
76 changes: 76 additions & 0 deletions docs/01_5_layout_images.fsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
(**
---
title: Layout images
category: Chart Layout
categoryindex: 2
index: 6
---
*)

(*** hide ***)

(*** condition: prepare ***)
#r "nuget: Newtonsoft.JSON, 12.0.3"
#r "nuget: DynamicObj"
#r "../bin/Plotly.NET/netstandard2.0/Plotly.NET.dll"

(*** condition: ipynb ***)
#if IPYNB
#r "nuget: Plotly.NET, {{fsdocs-package-version}}"
#r "nuget: Plotly.NET.Interactive, {{fsdocs-package-version}}"
#endif // IPYNB

(**
# Annotations

[![Binder]({{root}}img/badge-binder.svg)](https://mybinder.org/v2/gh/plotly/Plotly.NET/gh-pages?filepath={{fsdocs-source-basename}}.ipynb) 
[![Script]({{root}}img/badge-script.svg)]({{root}}{{fsdocs-source-basename}}.fsx) 
[![Notebook]({{root}}img/badge-notebook.svg)]({{root}}{{fsdocs-source-basename}}.ipynb)


*Summary:* This example shows how to create Images and add them to the Charts in F#.

let's first create some data for the purpose of creating example charts:

*)

open Plotly.NET

let x = [1.; 2.; 3.; 4.; 5.; 6.; 7.; 8.; 9.; 10.; ]
let y' = [2.; 1.5; 5.; 1.5; 3.; 2.5; 2.5; 1.5; 3.5; 1.]

(**
use the `LayoutImage.init` function to generate an image, and either the `Chart.withLayoutImage` or the `Chart.withLayoutImages` function to add
multiple annotations at once.

*)

open Plotly.NET.LayoutObjects

let image =
LayoutImage.init(
Source="https://fsharp.org/img/logo/fsharp.svg",
XRef="x",
YRef="y",
X=0,
Y=3,
SizeX=2,
SizeY=2,
Sizing=StyleParam.LayoutImageSizing.Stretch,
Opacity=0.5,
Layer=StyleParam.Layer.Below
)

let imageChart =
Chart.Line(x,y',Name="line")
|> Chart.withLayoutImage(image)

(*** condition: ipynb ***)
#if IPYNB
imageChart
#endif // IPYNB

(***hide***)
imageChart |> GenericChart.toChartHTML
(***include-it-raw***)

130 changes: 130 additions & 0 deletions docs/02_8_Images.fsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
(**
---
title: Images
category: Simple Charts
categoryindex: 3
index: 9
---
*)

(*** hide ***)

(*** condition: prepare ***)
#r "nuget: Newtonsoft.JSON, 12.0.3"
#r "nuget: DynamicObj"
#r "../bin/Plotly.NET/netstandard2.0/Plotly.NET.dll"

(*** condition: ipynb ***)
#if IPYNB
#r "nuget: Plotly.NET, {{fsdocs-package-version}}"
#r "nuget: Plotly.NET.Interactive, {{fsdocs-package-version}}"
#endif // IPYNB

(**
# Images

[![Binder]({{root}}img/badge-binder.svg)](https://mybinder.org/v2/gh/plotly/Plotly.NET/gh-pages?filepath={{fsdocs-source-basename}}.ipynb) 
[![Script]({{root}}img/badge-script.svg)]({{root}}{{fsdocs-source-basename}}.fsx) 
[![Notebook]({{root}}img/badge-notebook.svg)]({{root}}{{fsdocs-source-basename}}.ipynb)

*Summary:* This example shows how to create image charts in F#.

There are multiple ways of generating image charts:
- From 3 Dimensional color collections, where the inner arrays contain 3 (color dimensions without alpha channel) or 4 (color dimensions and alpha channel) values. The color model can be set separately as shown below.
- From a 2 dimensional collection Plotly.NETs `ARGB` type that represents rgba values
- From a base64 encoded image data source

## Creating Image charts from raw color arrays
*)

// 3d collection containing color values
open Plotly.NET

let colors = [
[[0 ;0 ;255]; [255;255;0 ]; [0 ;0 ;255]]
[[255;0 ;0 ]; [255;0 ;255]; [255;0 ;255]]
[[0 ;255;0 ]; [0 ;255;255]; [255;0 ;0 ]]
]

let imageRaw =
Chart.Image(Z=colors)
|> Chart.withTitle "Image chart from raw color component arrays"

(*** condition: ipynb ***)
#if IPYNB
imageRaw
#endif // IPYNB

(***hide***)
imageRaw |> GenericChart.toChartHTML
(***include-it-raw***)

(**
To change the color model to HSL for example, add the `ColorModel` argument:
*)

let imageRawHSL =
Chart.Image(Z=colors, ColorModel=StyleParam.ColorModel.HSL)
|> Chart.withTitle "HSL color model"

(*** condition: ipynb ***)
#if IPYNB
imageRawHSL
#endif // IPYNB

(***hide***)
imageRawHSL |> GenericChart.toChartHTML
(***include-it-raw***)

(**
## Creating Image charts from ARGB arrays

Note that this way of creating image charts uses the RGBA color model.
*)

let argbs = [
[ColorKeyword.AliceBlue ; ColorKeyword.CornSilk ; ColorKeyword.LavenderBlush ] |> List.map ARGB.fromKeyword
[ColorKeyword.DarkGray ; ColorKeyword.Snow ; ColorKeyword.MidnightBlue ] |> List.map ARGB.fromKeyword
[ColorKeyword.LightSteelBlue; ColorKeyword.DarkKhaki; ColorKeyword.LightAkyBlue ] |> List.map ARGB.fromKeyword
]

let imageARGB =
Chart.Image(argbs)
|> Chart.withTitle "ARGB image chart"

(*** condition: ipynb ***)
#if IPYNB
imageARGB
#endif // IPYNB

(***hide***)
imageARGB |> GenericChart.toChartHTML
(***include-it-raw***)

(**
## Creating Image charts from base64 encoded images
*)
open System
open System.IO

let imageSource = $@"{__SOURCE_DIRECTORY__}/img/logo.png"

let base64String =
imageSource
|> File.ReadAllBytes
|> System.Convert.ToBase64String

let logoImage =
Chart.Image(
Source=($"data:image/jpg;base64,{base64String}")
)
|> Chart.withTitle "This is Plotly.NET:"

(*** condition: ipynb ***)
#if IPYNB
logoImage
#endif // IPYNB

(***hide***)
logoImage |> GenericChart.toChartHTML
(***include-it-raw***)
2 changes: 1 addition & 1 deletion docs/10_0_ternary_line_scatter_plots.fsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
---
title: Ternary line and scatter plots
category: Ternary Plots
categoryindex: 10
categoryindex: 11
index: 1
---
*)
Expand Down
4 changes: 2 additions & 2 deletions docs/10_1_styling_ternary_layouts.fsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
---
title: Styling ternary layouts
category: Ternary Plots
categoryindex: 9
index: 3
categoryindex: 11
index: 2
---
*)

Expand Down
35 changes: 21 additions & 14 deletions src/Plotly.NET/CSharpLayer/GenericChartExtensions.fs
Original file line number Diff line number Diff line change
Expand Up @@ -493,12 +493,15 @@ module GenericChartExtensions =
member this.WithConfig (config:Config) =
GenericChart.setConfig config this

[<CompiledName("WithAnnotation")>]
[<Extension>]
member this.WithAnnotation(annotation:Annotation, [<Optional;DefaultParameterValue(true)>]?Append:bool) =
this |> Chart.withAnnotation(annotation, ?Append = Append)

[<CompiledName("WithAnnotations")>]
[<Extension>]
member this.WithAnnotations(annotations:seq<Annotation>) =
this
|> GenericChart.mapLayout
(Layout.style (Annotations = annotations))
member this.WithAnnotations(annotations:Annotation seq, [<Optional;DefaultParameterValue(true)>]?Append:bool) =
this |> Chart.withAnnotations(annotations, ?Append = Append)

// Set the title of a Chart
[<CompiledName("WithTitle")>]
Expand Down Expand Up @@ -574,19 +577,13 @@ module GenericChartExtensions =
//(`x0`,`y0`), (`x1`,`y0`), (`x1`,`y1`), (`x0`,`y1`), (`x0`,`y0`)
[<CompiledName("WithShape")>]
[<Extension>]
member this.WithShape(shape:Shape) =
let layout =
GenericChart.getLayout this
|> Layout.style (Shapes=[shape])
GenericChart.setLayout layout this
member this.WithShape(shape:Shape, [<Optional;DefaultParameterValue(true)>]?Append:bool) =
this |> Chart.withShape(shape, ?Append = Append)

[<CompiledName("WithShapes")>]
[<Extension>]
member this.WithShapes(shapes:Shape seq) =
let layout =
GenericChart.getLayout this
|> Layout.style (Shapes=shapes)
GenericChart.setLayout layout this
member this.WithShapes(shapes:Shape seq, [<Optional;DefaultParameterValue(true)>]?Append:bool) =
this |> Chart.withShapes(shapes, ?Append = Append)

// ############################################################
// ####################### Apply to DisplayOptions
Expand Down Expand Up @@ -664,3 +661,13 @@ module GenericChartExtensions =
member this.WithTernary(ternary:Ternary, [<Optional;DefaultParameterValue(null)>] ?Id) =
this |> Chart.withTernary(ternary,?Id=Id)


[<CompiledName("WithLayoutImage")>]
[<Extension>]
member this.WithLayoutImage(image:LayoutImage, [<Optional;DefaultParameterValue(true)>]?Append:bool) =
this |> Chart.withLayoutImage(image, ?Append = Append)

[<CompiledName("WithLayoutImages")>]
[<Extension>]
member this.WithLayoutImages(images:seq<LayoutImage>, [<Optional;DefaultParameterValue(true)>]?Append:bool) =
this |> Chart.withLayoutImages(images, ?Append = Append)
Loading