Skip to content

Commit

Permalink
plotlyjs v2.10.0: Add support to use version 3 of MathJax and add typ…
Browse files Browse the repository at this point in the history 
…esetMath attribute to config (plotly/plotly.js#6073)
  • Loading branch information
@kMutagene
kMutagene committed Feb 3, 2023
1 parent 99fcf65 commit d183457
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 15 deletions.
7 changes: 5 additions & 2 deletions src/Plotly.NET/CSharpLayer/GenericChartExtensions.fs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -958,11 +958,14 @@ module GenericChartExtensions =
/// Adds the necessary script tags to render tex strings to the chart's DisplayOptions
[<CompiledName("WithMathTex")>]
[<Extension>]
member this.WithMathTex([<Optional; DefaultParameterValue(true)>] ?AppendTags: bool) =
member this.WithMathTex(
[<Optional; DefaultParameterValue(true)>] ?AppendTags: bool,
[<Optional; DefaultParameterValue(3)>] ?MathJaxVersion: int
) =
let append =
Option.defaultValue true AppendTags

this |> Chart.withMathTex (append)
this |> Chart.withMathTex (AppendTags = append)


/// Save chart as html single page
Expand Down
27 changes: 21 additions & 6 deletions src/Plotly.NET/ChartAPI/Chart.fs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2769,6 +2769,7 @@ type Chart =
static member withConfigStyle
(
[<Optional; DefaultParameterValue(null)>] ?StaticPlot: bool,
[<Optional; DefaultParameterValue(null)>] ?TypesetMath: bool,
[<Optional; DefaultParameterValue(null)>] ?PlotlyServerUrl: string,
[<Optional; DefaultParameterValue(null)>] ?Autosizable: bool,
[<Optional; DefaultParameterValue(null)>] ?Editable: bool,
Expand All @@ -2784,6 +2785,7 @@ type Chart =
let config =
Config.init (
?StaticPlot = StaticPlot,
?TypesetMath = TypesetMath,
?PlotlyServerUrl = PlotlyServerUrl,
?Autosizable = Autosizable,
?Responsive = Responsive,
Expand Down Expand Up @@ -3171,17 +3173,30 @@ type Chart =

/// Adds the necessary script tags to render tex strings to the chart's DisplayOptions
[<CompiledName("WithMathTex")>]
static member withMathTex([<Optional; DefaultParameterValue(true)>] ?AppendTags: bool) =
static member withMathTex(
[<Optional; DefaultParameterValue(true)>] ?AppendTags: bool,
[<Optional; DefaultParameterValue(3)>] ?MathJaxVersion: int
) =
let version = MathJaxVersion |> Option.defaultValue 3

let tags =
[
"""<script type="text/x-mathjax-config;executed=true">MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], processEscapes: true}});</script>"""
"""<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML%2CSafe.js&ver=4.1"></script>"""
]
if version = 2 then
[
"""<script type="text/x-mathjax-config;executed=true">MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], processEscapes: true}});</script>"""
"""<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML%2CSafe.js&ver=4.1"></script>"""
]
else
[
"""<script>MathJax = {tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}};</script>"""
"""<script src="https://cdn.jsdelivr.net/npm/mathjax@3.2.0/es5/tex-svg.js"></script>"""
]

(fun (ch: GenericChart) ->

if (AppendTags |> Option.defaultValue true) then
ch |> Chart.withAdditionalHeadTags tags
ch
|> Chart.withAdditionalHeadTags tags
|> Chart.withConfigStyle()
else
ch |> Chart.withHeadTags tags)

Expand Down
4 changes: 4 additions & 0 deletions src/Plotly.NET/Config/Config.fs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -354,6 +354,7 @@ type Config() =
static member init
(
[<Optional; DefaultParameterValue(null)>] ?StaticPlot: bool,
[<Optional; DefaultParameterValue(null)>] ?TypesetMath: bool,
[<Optional; DefaultParameterValue(null)>] ?PlotlyServerUrl: string,
[<Optional; DefaultParameterValue(null)>] ?Autosizable: bool,
[<Optional; DefaultParameterValue(null)>] ?Editable: bool,
Expand All @@ -367,6 +368,7 @@ type Config() =
Config()
|> Config.style (
?StaticPlot = StaticPlot,
?TypesetMath = TypesetMath,
?PlotlyServerUrl = PlotlyServerUrl,
?Autosizable = Autosizable,
?Responsive = Responsive,
Expand Down Expand Up @@ -395,6 +397,7 @@ type Config() =
static member style
(
[<Optional; DefaultParameterValue(null)>] ?StaticPlot: bool,
[<Optional; DefaultParameterValue(null)>] ?TypesetMath: bool,
[<Optional; DefaultParameterValue(null)>] ?PlotlyServerUrl: string,
[<Optional; DefaultParameterValue(null)>] ?Autosizable: bool,
[<Optional; DefaultParameterValue(null)>] ?Editable: bool,
Expand All @@ -407,6 +410,7 @@ type Config() =
) =
fun (config: Config) ->
StaticPlot |> DynObj.setValueOpt config "staticPlot"
TypesetMath |> DynObj.setValueOpt config "typesetMath"
PlotlyServerUrl |> DynObj.setValueOpt config "plotlyServerURL"
Autosizable |> DynObj.setValueOpt config "autosizable"
Editable |> DynObj.setValueOpt config "editable"
Expand Down
36 changes: 29 additions & 7 deletions tests/Plotly.NET.Tests/HtmlCodegen/ChartLayout.fs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -336,7 +336,7 @@ let additionalHeadTagsChart =
// Add reference to the bulma css framework
|> Chart.withAdditionalHeadTags ["""<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">"""]

let mathtexChart =
let mathtexv3Chart =
[
Chart.Point([(1.,2.)],@"$\beta_{1c} = 25 \pm 11 \text{ km s}^{-1}$", UseDefaults = false)
Chart.Point([(2.,4.)],@"$\beta_{1c} = 25 \pm 11 \text{ km s}^{-1}$", UseDefaults = false)
Expand All @@ -346,6 +346,16 @@ let mathtexChart =
// include mathtex tags in <head>. pass true to append these scripts, false to ONLY include MathTeX.
|> Chart.withMathTex(true)

let mathtexv2Chart =
[
Chart.Point([(1.,2.)],@"$\beta_{1c} = 25 \pm 11 \text{ km s}^{-1}$", UseDefaults = false)
Chart.Point([(2.,4.)],@"$\beta_{1c} = 25 \pm 11 \text{ km s}^{-1}$", UseDefaults = false)
]
|> Chart.combine
|> Chart.withTitle @"$\beta_{1c} = 25 \pm 11 \text{ km s}^{-1}$"
// include mathtex tags in <head>. pass true to append these scripts, false to ONLY include MathTeX.
|> Chart.withMathTex(true, MathJaxVersion = 2)

[<Tests>]
let ``Display options`` =
testList "ChartLayout.Display options" [
Expand Down Expand Up @@ -376,16 +386,28 @@ let ``Display options`` =
]
|> substringListIsInChart additionalHeadTagsChart toEmbeddedHTML
);
testCase "MathTex data" ( fun () ->
testCase "MathTex v2 data" ( fun () ->
"""var data = [{"type":"scatter","name":"$\\beta_{1c} = 25 \\pm 11 \\text{ km s}^{-1}$","mode":"markers","x":[1.0],"y":[2.0],"marker":{},"line":{}},{"type":"scatter","name":"$\\beta_{1c} = 25 \\pm 11 \\text{ km s}^{-1}$","mode":"markers","x":[2.0],"y":[4.0],"marker":{},"line":{}}];"""
|> chartGeneratedContains mathtexChart
|> chartGeneratedContains mathtexv2Chart
);
testCase "MathTex layout" ( fun () ->
testCase "MathTex v2 layout" ( fun () ->
"var layout = {\"title\":{\"text\":\"$\\\\beta_{1c} = 25 \\\\pm 11 \\\\text{ km s}^{-1}$\"}};"
|> chartGeneratedContains mathtexChart
|> chartGeneratedContains mathtexv2Chart
);
testCase "MathTex include mathjax" ( fun () ->
testCase "MathTex v2 include mathjax" ( fun () ->
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/"
|> substringIsInChart mathtexChart toEmbeddedHTML
|> substringIsInChart mathtexv2Chart toEmbeddedHTML
)
testCase "MathTex v3 data" ( fun () ->
"""var data = [{"type":"scatter","name":"$\\beta_{1c} = 25 \\pm 11 \\text{ km s}^{-1}$","mode":"markers","x":[1.0],"y":[2.0],"marker":{},"line":{}},{"type":"scatter","name":"$\\beta_{1c} = 25 \\pm 11 \\text{ km s}^{-1}$","mode":"markers","x":[2.0],"y":[4.0],"marker":{},"line":{}}];"""
|> chartGeneratedContains mathtexv3Chart
);
testCase "MathTex v3 layout" ( fun () ->
"var layout = {\"title\":{\"text\":\"$\\\\beta_{1c} = 25 \\\\pm 11 \\\\text{ km s}^{-1}$\"}};"
|> chartGeneratedContains mathtexv3Chart
);
testCase "MathTex v3 include mathjax" ( fun () ->
"https://cdn.jsdelivr.net/npm/mathjax@3"
|> substringIsInChart mathtexv3Chart toEmbeddedHTML
)
]

0 comments on commit d183457

Please sign in to comment.