Skip to content

Commit 1adc06e

Browse files
kMutagenekMutagene
authored
Merge pull request #188 from plotly/image
2 parents d94ffa7 + e17e533 commit 1adc06e

File tree

15 files changed

+744
-35
lines changed

15 files changed

+744
-35
lines changed

‎Plotly.NET.sln‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "docs", "docs", "{7B09CC0A-F
4949
docs\01_2_multiple-charts.fsx = docs\01_2_multiple-charts.fsx
5050
docs\01_3_shapes.fsx = docs\01_3_shapes.fsx
5151
docs\01_4_annotations.fsx = docs\01_4_annotations.fsx
52+
docs\01_5_layout_images.fsx = docs\01_5_layout_images.fsx
5253
docs\02_0_line-scatter-plots.fsx = docs\02_0_line-scatter-plots.fsx
5354
docs\02_1_bar-and-column-charts.fsx = docs\02_1_bar-and-column-charts.fsx
5455
docs\02_2_area-plots.fsx = docs\02_2_area-plots.fsx
@@ -57,6 +58,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "docs", "docs", "{7B09CC0A-F
5758
docs\02_5_pie-doughnut-charts.fsx = docs\02_5_pie-doughnut-charts.fsx
5859
docs\02_6_table.fsx = docs\02_6_table.fsx
5960
docs\02_7_heatmaps.fsx = docs\02_7_heatmaps.fsx
61+
docs\02_8_Images.fsx = docs\02_8_Images.fsx
6062
docs\03_0_3d-scatter-plots.fsx = docs\03_0_3d-scatter-plots.fsx
6163
docs\03_1_3d-surface-plots.fsx = docs\03_1_3d-surface-plots.fsx
6264
docs\03_2_3d-mesh-plots.fsx = docs\03_2_3d-mesh-plots.fsx

‎docs/01_5_layout_images.fsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
(**
2+
---
3+
title: Layout images
4+
category: Chart Layout
5+
categoryindex: 2
6+
index: 6
7+
---
8+
*)
9+
10+
(*** hide ***)
11+
12+
(*** condition: prepare ***)
13+
#r "nuget: Newtonsoft.JSON, 12.0.3"
14+
#r "nuget: DynamicObj"
15+
#r "../bin/Plotly.NET/netstandard2.0/Plotly.NET.dll"
16+
17+
(*** condition: ipynb ***)
18+
#if IPYNB
19+
#r "nuget: Plotly.NET, {{fsdocs-package-version}}"
20+
#r "nuget: Plotly.NET.Interactive, {{fsdocs-package-version}}"
21+
#endif // IPYNB
22+
23+
(**
24+
# Annotations
25+
26+
[![Binder]({{root}}img/badge-binder.svg)](https://mybinder.org/v2/gh/plotly/Plotly.NET/gh-pages?filepath={{fsdocs-source-basename}}.ipynb) 
27+
[![Script]({{root}}img/badge-script.svg)]({{root}}{{fsdocs-source-basename}}.fsx) 
28+
[![Notebook]({{root}}img/badge-notebook.svg)]({{root}}{{fsdocs-source-basename}}.ipynb)
29+
30+
31+
*Summary:* This example shows how to create Images and add them to the Charts in F#.
32+
33+
let's first create some data for the purpose of creating example charts:
34+
35+
*)
36+
37+
open Plotly.NET
38+
39+
let x = [1.; 2.; 3.; 4.; 5.; 6.; 7.; 8.; 9.; 10.; ]
40+
let y' = [2.; 1.5; 5.; 1.5; 3.; 2.5; 2.5; 1.5; 3.5; 1.]
41+
42+
(**
43+
use the `LayoutImage.init` function to generate an image, and either the `Chart.withLayoutImage` or the `Chart.withLayoutImages` function to add
44+
multiple annotations at once.
45+
46+
*)
47+
48+
open Plotly.NET.LayoutObjects
49+
50+
let image =
51+
LayoutImage.init(
52+
Source="https://fsharp.org/img/logo/fsharp.svg",
53+
XRef="x",
54+
YRef="y",
55+
X=0,
56+
Y=3,
57+
SizeX=2,
58+
SizeY=2,
59+
Sizing=StyleParam.LayoutImageSizing.Stretch,
60+
Opacity=0.5,
61+
Layer=StyleParam.Layer.Below
62+
)
63+
64+
let imageChart =
65+
Chart.Line(x,y',Name="line")
66+
|> Chart.withLayoutImage(image)
67+
68+
(*** condition: ipynb ***)
69+
#if IPYNB
70+
imageChart
71+
#endif // IPYNB
72+
73+
(***hide***)
74+
imageChart |> GenericChart.toChartHTML
75+
(***include-it-raw***)
76+

‎docs/02_8_Images.fsx‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
(**
2+
---
3+
title: Images
4+
category: Simple Charts
5+
categoryindex: 3
6+
index: 9
7+
---
8+
*)
9+
10+
(*** hide ***)
11+
12+
(*** condition: prepare ***)
13+
#r "nuget: Newtonsoft.JSON, 12.0.3"
14+
#r "nuget: DynamicObj"
15+
#r "../bin/Plotly.NET/netstandard2.0/Plotly.NET.dll"
16+
17+
(*** condition: ipynb ***)
18+
#if IPYNB
19+
#r "nuget: Plotly.NET, {{fsdocs-package-version}}"
20+
#r "nuget: Plotly.NET.Interactive, {{fsdocs-package-version}}"
21+
#endif // IPYNB
22+
23+
(**
24+
# Images
25+
26+
[![Binder]({{root}}img/badge-binder.svg)](https://mybinder.org/v2/gh/plotly/Plotly.NET/gh-pages?filepath={{fsdocs-source-basename}}.ipynb) 
27+
[![Script]({{root}}img/badge-script.svg)]({{root}}{{fsdocs-source-basename}}.fsx) 
28+
[![Notebook]({{root}}img/badge-notebook.svg)]({{root}}{{fsdocs-source-basename}}.ipynb)
29+
30+
*Summary:* This example shows how to create image charts in F#.
31+
32+
There are multiple ways of generating image charts:
33+
- 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.
34+
- From a 2 dimensional collection Plotly.NETs `ARGB` type that represents rgba values
35+
- From a base64 encoded image data source
36+
37+
## Creating Image charts from raw color arrays
38+
*)
39+
40+
// 3d collection containing color values
41+
open Plotly.NET
42+
43+
let colors = [
44+
[[0 ;0 ;255]; [255;255;0 ]; [0 ;0 ;255]]
45+
[[255;0 ;0 ]; [255;0 ;255]; [255;0 ;255]]
46+
[[0 ;255;0 ]; [0 ;255;255]; [255;0 ;0 ]]
47+
]
48+
49+
let imageRaw =
50+
Chart.Image(Z=colors)
51+
|> Chart.withTitle "Image chart from raw color component arrays"
52+
53+
(*** condition: ipynb ***)
54+
#if IPYNB
55+
imageRaw
56+
#endif // IPYNB
57+
58+
(***hide***)
59+
imageRaw |> GenericChart.toChartHTML
60+
(***include-it-raw***)
61+
62+
(**
63+
To change the color model to HSL for example, add the `ColorModel` argument:
64+
*)
65+
66+
let imageRawHSL =
67+
Chart.Image(Z=colors, ColorModel=StyleParam.ColorModel.HSL)
68+
|> Chart.withTitle "HSL color model"
69+
70+
(*** condition: ipynb ***)
71+
#if IPYNB
72+
imageRawHSL
73+
#endif // IPYNB
74+
75+
(***hide***)
76+
imageRawHSL |> GenericChart.toChartHTML
77+
(***include-it-raw***)
78+
79+
(**
80+
## Creating Image charts from ARGB arrays
81+
82+
Note that this way of creating image charts uses the RGBA color model.
83+
*)
84+
85+
let argbs = [
86+
[ColorKeyword.AliceBlue ; ColorKeyword.CornSilk ; ColorKeyword.LavenderBlush ] |> List.map ARGB.fromKeyword
87+
[ColorKeyword.DarkGray ; ColorKeyword.Snow ; ColorKeyword.MidnightBlue ] |> List.map ARGB.fromKeyword
88+
[ColorKeyword.LightSteelBlue; ColorKeyword.DarkKhaki; ColorKeyword.LightAkyBlue ] |> List.map ARGB.fromKeyword
89+
]
90+
91+
let imageARGB =
92+
Chart.Image(argbs)
93+
|> Chart.withTitle "ARGB image chart"
94+
95+
(*** condition: ipynb ***)
96+
#if IPYNB
97+
imageARGB
98+
#endif // IPYNB
99+
100+
(***hide***)
101+
imageARGB |> GenericChart.toChartHTML
102+
(***include-it-raw***)
103+
104+
(**
105+
## Creating Image charts from base64 encoded images
106+
*)
107+
open System
108+
open System.IO
109+
110+
let imageSource = $@"{__SOURCE_DIRECTORY__}/img/logo.png"
111+
112+
let base64String =
113+
imageSource
114+
|> File.ReadAllBytes
115+
|> System.Convert.ToBase64String
116+
117+
let logoImage =
118+
Chart.Image(
119+
Source=($"data:image/jpg;base64,{base64String}")
120+
)
121+
|> Chart.withTitle "This is Plotly.NET:"
122+
123+
(*** condition: ipynb ***)
124+
#if IPYNB
125+
logoImage
126+
#endif // IPYNB
127+
128+
(***hide***)
129+
logoImage |> GenericChart.toChartHTML
130+
(***include-it-raw***)

‎docs/10_0_ternary_line_scatter_plots.fsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
---
33
title: Ternary line and scatter plots
44
category: Ternary Plots
5-
categoryindex: 10
5+
categoryindex: 11
66
index: 1
77
---
88
*)

‎docs/10_1_styling_ternary_layouts.fsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
---
33
title: Styling ternary layouts
44
category: Ternary Plots
5-
categoryindex: 9
6-
index: 3
5+
categoryindex: 11
6+
index: 2
77
---
88
*)
99

‎src/Plotly.NET/CSharpLayer/GenericChartExtensions.fs‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -493,12 +493,15 @@ module GenericChartExtensions =
493493
member this.WithConfig (config:Config) =
494494
GenericChart.setConfig config this
495495

496+
[<CompiledName("WithAnnotation")>]
497+
[<Extension>]
498+
member this.WithAnnotation(annotation:Annotation, [<Optional;DefaultParameterValue(true)>]?Append:bool) =
499+
this |> Chart.withAnnotation(annotation, ?Append = Append)
500+
496501
[<CompiledName("WithAnnotations")>]
497502
[<Extension>]
498-
member this.WithAnnotations(annotations:seq<Annotation>) =
499-
this
500-
|> GenericChart.mapLayout
501-
(Layout.style (Annotations = annotations))
503+
member this.WithAnnotations(annotations:Annotation seq, [<Optional;DefaultParameterValue(true)>]?Append:bool) =
504+
this |> Chart.withAnnotations(annotations, ?Append = Append)
502505

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

583583
[<CompiledName("WithShapes")>]
584584
[<Extension>]
585-
member this.WithShapes(shapes:Shape seq) =
586-
let layout =
587-
GenericChart.getLayout this
588-
|> Layout.style (Shapes=shapes)
589-
GenericChart.setLayout layout this
585+
member this.WithShapes(shapes:Shape seq, [<Optional;DefaultParameterValue(true)>]?Append:bool) =
586+
this |> Chart.withShapes(shapes, ?Append = Append)
590587

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

664+
665+
[<CompiledName("WithLayoutImage")>]
666+
[<Extension>]
667+
member this.WithLayoutImage(image:LayoutImage, [<Optional;DefaultParameterValue(true)>]?Append:bool) =
668+
this |> Chart.withLayoutImage(image, ?Append = Append)
669+
670+
[<CompiledName("WithLayoutImages")>]
671+
[<Extension>]
672+
member this.WithLayoutImages(images:seq<LayoutImage>, [<Optional;DefaultParameterValue(true)>]?Append:bool) =
673+
this |> Chart.withLayoutImages(images, ?Append = Append)

0 commit comments

Comments
 (0)