Closed FlorianJacta closed 1 year ago
FredLL-Avaiga
commented
1 year ago This post explains how to extract plotly-python theme and use them in plotly.js https://stackoverflow.com/questions/71721049/react-plotly-js-apply-dark-plotly-dark-theme
I've extracted the dark theme that can be set through the layout property (non dynamic): layout={"template": dark_template}
FredLL-Avaiga
commented
1 year ago We could define a new (non dynamic) property template that could be specialized in template[dark] template[light]. The chart would then switch template automatically depending on the current theme ...
@florian-vuillemot @FabienLelaquais any input ?
FredLL-Avaiga
commented
1 year ago PS: I guess the provided template could be trimmed depending on which types of chart are used
FredLL-Avaiga
commented
1 year ago 
FredLL-Avaiga
commented
1 year ago 
from taipy.gui import Gui
import pandas as pd
data = pd.DataFrame({
"x": ['2017-01-04', '2017-01-05', '2017-01-06', '2017-01-09', '2017-01-10', '2017-01-11', '2017-01-12', '2017-01-13', '2017-01-17', '2017-01-18', '2017-01-19', '2017-01-20', '2017-01-23', '2017-01-24', '2017-01-25', '2017-01-26', '2017-01-27', '2017-01-30', '2017-01-31', '2017-02-01', '2017-02-02', '2017-02-03', '2017-02-06', '2017-02-07', '2017-02-08', '2017-02-09', '2017-02-10', '2017-02-13', '2017-02-14', '2017-02-15'],
"close": [116.019997, 116.610001, 117.910004, 118.989998, 119.110001, 119.75, 119.25, 119.040001, 120, 119.989998, 119.779999, 120, 120.080002, 119.970001, 121.879997, 121.940002, 121.949997, 121.629997, 121.349998, 128.75, 128.529999, 129.080002, 130.289993, 131.529999, 132.039993, 132.419998, 132.119995, 133.289993, 135.020004, 135.509995],
"high": [116.510002, 116.860001, 118.160004, 119.43, 119.379997, 119.93, 119.300003, 119.620003, 120.239998, 120.5, 120.089996, 120.449997, 120.809998, 120.099998, 122.099998, 122.440002, 122.349998, 121.629997, 121.389999, 130.490005, 129.389999, 129.190002, 130.5, 132.089996, 132.220001, 132.449997, 132.940002, 133.820007, 135.089996, 136.270004],
"low": [115.75, 115.809998, 116.470001, 117.940002, 118.300003, 118.599998, 118.209999, 118.809998, 118.220001, 119.709999, 119.370003, 119.730003, 119.769997, 119.5, 120.279999, 121.599998, 121.599998, 120.660004, 120.620003, 127.010002, 127.779999, 128.160004, 128.899994, 130.449997, 131.220001, 131.119995, 132.050003, 132.75, 133.25, 134.619995],
"open": [115.849998, 115.919998, 116.779999, 117.949997, 118.769997, 118.739998, 118.900002, 119.110001, 118.339996, 120, 119.400002, 120.449997, 120, 119.550003, 120.419998, 121.669998, 122.139999, 120.93, 121.150002, 127.029999, 127.980003, 128.309998, 129.130005, 130.539993, 131.350006, 131.649994, 132.460007, 133.080002, 133.470001, 135.520004],
})
dark_template = {
"data": {
"barpolar": [
{
"marker": {
"line": {
"color": "rgb(17,17,17)",
"width": 0.5
},
"pattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
}
},
"type": "barpolar"
}
],
"bar": [
{
"error_x": {
"color": "#f2f5fa"
},
"error_y": {
"color": "#f2f5fa"
},
"marker": {
"line": {
"color": "rgb(17,17,17)",
"width": 0.5
},
"pattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
}
},
"type": "bar"
}
],
"carpet": [
{
"aaxis": {
"endlinecolor": "#A2B1C6",
"gridcolor": "#506784",
"linecolor": "#506784",
"minorgridcolor": "#506784",
"startlinecolor": "#A2B1C6"
},
"baxis": {
"endlinecolor": "#A2B1C6",
"gridcolor": "#506784",
"linecolor": "#506784",
"minorgridcolor": "#506784",
"startlinecolor": "#A2B1C6"
},
"type": "carpet"
}
],
"choropleth": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"type": "choropleth"
}
],
"contourcarpet": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"type": "contourcarpet"
}
],
"contour": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0.0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1.0,
"#f0f921"
]
],
"type": "contour"
}
],
"heatmapgl": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0.0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1.0,
"#f0f921"
]
],
"type": "heatmapgl"
}
],
"heatmap": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0.0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1.0,
"#f0f921"
]
],
"type": "heatmap"
}
],
"histogram2dcontour": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0.0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1.0,
"#f0f921"
]
],
"type": "histogram2dcontour"
}
],
"histogram2d": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0.0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1.0,
"#f0f921"
]
],
"type": "histogram2d"
}
],
"histogram": [
{
"marker": {
"pattern": {
"fillmode": "overlay",
"size": 10,
"solidity": 0.2
}
},
"type": "histogram"
}
],
"mesh3d": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"type": "mesh3d"
}
],
"parcoords": [
{
"line": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "parcoords"
}
],
"pie": [
{
"automargin": True,
"type": "pie"
}
],
"scatter3d": [
{
"line": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scatter3d"
}
],
"scattercarpet": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scattercarpet"
}
],
"scattergeo": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scattergeo"
}
],
"scattergl": [
{
"marker": {
"line": {
"color": "#283442"
}
},
"type": "scattergl"
}
],
"scattermapbox": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scattermapbox"
}
],
"scatterpolargl": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scatterpolargl"
}
],
"scatterpolar": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scatterpolar"
}
],
"scatter": [
{
"marker": {
"line": {
"color": "#283442"
}
},
"type": "scatter"
}
],
"scatterternary": [
{
"marker": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"type": "scatterternary"
}
],
"surface": [
{
"colorbar": {
"outlinewidth": 0,
"ticks": ""
},
"colorscale": [
[
0.0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1.0,
"#f0f921"
]
],
"type": "surface"
}
],
"table": [
{
"cells": {
"fill": {
"color": "#506784"
},
"line": {
"color": "rgb(17,17,17)"
}
},
"header": {
"fill": {
"color": "#2a3f5f"
},
"line": {
"color": "rgb(17,17,17)"
}
},
"type": "table"
}
]
},
"layout": {
"annotationdefaults": {
"arrowcolor": "#f2f5fa",
"arrowhead": 0,
"arrowwidth": 1
},
"autotypenumbers": "strict",
"coloraxis": {
"colorbar": {
"outlinewidth": 0,
"ticks": ""
}
},
"colorscale": {
"diverging": [
[
0,
"#8e0152"
],
[
0.1,
"#c51b7d"
],
[
0.2,
"#de77ae"
],
[
0.3,
"#f1b6da"
],
[
0.4,
"#fde0ef"
],
[
0.5,
"#f7f7f7"
],
[
0.6,
"#e6f5d0"
],
[
0.7,
"#b8e186"
],
[
0.8,
"#7fbc41"
],
[
0.9,
"#4d9221"
],
[
1,
"#276419"
]
],
"sequential": [
[
0.0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1.0,
"#f0f921"
]
],
"sequentialminus": [
[
0.0,
"#0d0887"
],
[
0.1111111111111111,
"#46039f"
],
[
0.2222222222222222,
"#7201a8"
],
[
0.3333333333333333,
"#9c179e"
],
[
0.4444444444444444,
"#bd3786"
],
[
0.5555555555555556,
"#d8576b"
],
[
0.6666666666666666,
"#ed7953"
],
[
0.7777777777777778,
"#fb9f3a"
],
[
0.8888888888888888,
"#fdca26"
],
[
1.0,
"#f0f921"
]
]
},
"colorway": [
"#636efa",
"#EF553B",
"#00cc96",
"#ab63fa",
"#FFA15A",
"#19d3f3",
"#FF6692",
"#B6E880",
"#FF97FF",
"#FECB52"
],
"font": {
"color": "#f2f5fa"
},
"geo": {
"bgcolor": "rgb(17,17,17)",
"lakecolor": "rgb(17,17,17)",
"landcolor": "rgb(17,17,17)",
"showlakes": True,
"showland": True,
"subunitcolor": "#506784"
},
"hoverlabel": {
"align": "left"
},
"hovermode": "closest",
"mapbox": {
"style": "dark"
},
"paper_bgcolor": "rgb(17,17,17)",
"plot_bgcolor": "rgb(17,17,17)",
"polar": {
"angularaxis": {
"gridcolor": "#506784",
"linecolor": "#506784",
"ticks": ""
},
"bgcolor": "rgb(17,17,17)",
"radialaxis": {
"gridcolor": "#506784",
"linecolor": "#506784",
"ticks": ""
}
},
"scene": {
"xaxis": {
"backgroundcolor": "rgb(17,17,17)",
"gridcolor": "#506784",
"gridwidth": 2,
"linecolor": "#506784",
"showbackground": True,
"ticks": "",
"zerolinecolor": "#C8D4E3"
},
"yaxis": {
"backgroundcolor": "rgb(17,17,17)",
"gridcolor": "#506784",
"gridwidth": 2,
"linecolor": "#506784",
"showbackground": True,
"ticks": "",
"zerolinecolor": "#C8D4E3"
},
"zaxis": {
"backgroundcolor": "rgb(17,17,17)",
"gridcolor": "#506784",
"gridwidth": 2,
"linecolor": "#506784",
"showbackground": True,
"ticks": "",
"zerolinecolor": "#C8D4E3"
}
},
"shapedefaults": {
"line": {
"color": "#f2f5fa"
}
},
"sliderdefaults": {
"bgcolor": "#C8D4E3",
"bordercolor": "rgb(17,17,17)",
"borderwidth": 1,
"tickwidth": 0
},
"ternary": {
"aaxis": {
"gridcolor": "#506784",
"linecolor": "#506784",
"ticks": ""
},
"baxis": {
"gridcolor": "#506784",
"linecolor": "#506784",
"ticks": ""
},
"bgcolor": "rgb(17,17,17)",
"caxis": {
"gridcolor": "#506784",
"linecolor": "#506784",
"ticks": ""
}
},
"title": {
"x": 0.05
},
"updatemenudefaults": {
"bgcolor": "#506784",
"borderwidth": 0
},
"xaxis": {
"automargin": True,
"gridcolor": "#283442",
"linecolor": "#506784",
"ticks": "",
"title": {
"standoff": 15
},
"zerolinecolor": "#283442",
"zerolinewidth": 2
},
"yaxis": {
"automargin": True,
"gridcolor": "#283442",
"linecolor": "#506784",
"ticks": "",
"title": {
"standoff": 15
},
"zerolinecolor": "#283442",
"zerolinewidth": 2
}
}
}
options = {
"decreasing": {"line": {"color": '#7F7F7F'}},
"increasing": {"line": {"color": '#17BECF'}},
"line": {"color": 'rgba(31,119,180,1)'},
}
layout = {
"dragmode": 'zoom',
"margin": {
"r": 10,
"t": 25,
"b": 40,
"l": 60
},
"showlegend": False,
"xaxis": {
"autorange": True,
"domain": [0, 1],
"range": ['2017-01-03 12:00', '2017-02-15 12:00'],
"rangeslider": {"range": ['2017-01-03 12:00', '2017-02-15 12:00']},
"title": 'Date',
"type": 'date'
},
"yaxis": {
"autorange": True,
"domain": [0, 1],
"range": [114.609999778, 137.410004222],
"type": 'linear'
},
}
md = """
## CandleStick
<|toggle|theme|>
<|{data}|chart|type=candlestick|layout={layout}|x=x|close=close|open=open|low=low|high=high|options={options}|template[dark]={dark_template}|>
"""
Gui(md).run(async_mode="threading", use_reloader=False)
Description Taipy GUI has a dark mode, but it doesn't affect the charts which all have a light background making it a bit too flashy. The goal would be to change charts to make it dark-mode friendly.
Acceptance Criteria