From cd0ae5f87e70587ea4e4ae3984d84b00ff46b35d Mon Sep 17 00:00:00 2001 From: namnguyen Date: Thu, 6 Jun 2024 15:44:02 +0700 Subject: [PATCH 1/3] Adding theme for metric --- .../taipy-gui/src/components/Taipy/Metric.tsx | 95 ++++++++++++++++++- taipy/gui/_renderers/factory.py | 3 + taipy/gui/viselements.json | 15 +++ 3 files changed, 112 insertions(+), 1 deletion(-) diff --git a/frontend/taipy-gui/src/components/Taipy/Metric.tsx b/frontend/taipy-gui/src/components/Taipy/Metric.tsx index 3dc87eaaea..96f4244d96 100644 --- a/frontend/taipy-gui/src/components/Taipy/Metric.tsx +++ b/frontend/taipy-gui/src/components/Taipy/Metric.tsx @@ -19,6 +19,7 @@ import Tooltip from "@mui/material/Tooltip"; import {useClassNames, useDynamicJsonProperty, useDynamicProperty} from "../../utils/hooks"; import {extractPrefix, extractSuffix, sprintfToD3Converter} from "../../utils/formatConversion"; import {TaipyBaseProps, TaipyHoverProps} from "./utils"; +import {useTheme} from "@mui/material"; const Plot = lazy(() => import("react-plotly.js")); @@ -42,6 +43,9 @@ interface MetricProps extends TaipyBaseProps, TaipyHoverProps { showValue?: boolean; format?: string; deltaFormat?: string; + template?: string; + template_Dark_?: string; + template_Light_?: string; } const emptyLayout = {} as Record>; @@ -59,6 +63,7 @@ const Metric = (props: MetricProps) => { const className = useClassNames(props.libClassName, props.dynamicClassName, props.className); const baseLayout = useDynamicJsonProperty(props.layout, props.defaultLayout || "", emptyLayout); const hover = useDynamicProperty(props.hoverText, props.defaultHoverText, undefined); + const theme = useTheme(); const data = useMemo(() => { return [ @@ -116,13 +121,41 @@ const Metric = (props: MetricProps) => { const skelStyle = useMemo(() => ({...style, minHeight: "7em"}), [style]); + const layout = useMemo(() => { + const layout = {...baseLayout}; + let template = undefined; + try { + const tpl = props.template && JSON.parse(props.template); + const tplTheme = + theme.palette.mode === "dark" + ? props.template_Dark_ + ? JSON.parse(props.template_Dark_) + : darkTemplate + : props.template_Light_ && JSON.parse(props.template_Light_); + template = tpl ? (tplTheme ? {...tpl, ...tplTheme} : tpl) : tplTheme ? tplTheme : undefined; + } catch (e) { + console.info(`Error while parsing Metric.template\n${(e as Error).message || e}`); + } + if (template) { + layout.template = template; + } + + return layout + }, [ + props.template, + props.template_Dark_, + props.template_Light_, + theme.palette.mode, + baseLayout + ]) + return ( }> @@ -133,3 +166,63 @@ const Metric = (props: MetricProps) => { } export default Metric; + +const darkTemplate = { + layout: { + 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", + }, + paper_bgcolor: "rgb(31,47,68)", + }, +}; diff --git a/taipy/gui/_renderers/factory.py b/taipy/gui/_renderers/factory.py index 8c1133621b..1489e91798 100644 --- a/taipy/gui/_renderers/factory.py +++ b/taipy/gui/_renderers/factory.py @@ -372,6 +372,9 @@ class _Factory: ("show_value", PropertyType.boolean, True), ("format", PropertyType.string), ("delta_format", PropertyType.string), + ("template", PropertyType.dict), + ("template[dark]", PropertyType.dict), + ("template[light]", PropertyType.dict), ] ), "navbar": lambda gui, control_type, attrs: _Builder( diff --git a/taipy/gui/viselements.json b/taipy/gui/viselements.json index 6d54ad8723..f6c5204eae 100644 --- a/taipy/gui/viselements.json +++ b/taipy/gui/viselements.json @@ -905,6 +905,21 @@ "type": "str|number", "default_value": "None", "doc": "The height, in CSS units, of the metric." + }, + { + "name": "template", + "type": "dict", + "doc": "The Plotly layout template." + }, + { + "name": "template[dark]", + "type": "dict", + "doc": "The Plotly layout template applied over the base template when theme is dark." + }, + { + "name": "template[light]", + "type": "dict", + "doc": "The Plotly layout template applied over the base template when theme is not dark." } ] } From 10b13740bc5bce18f4f58c865c82e99413eb667a Mon Sep 17 00:00:00 2001 From: namnguyen Date: Thu, 6 Jun 2024 17:40:50 +0700 Subject: [PATCH 2/3] extracting theme to a common file --- .../taipy-gui/src/components/Taipy/Chart.tsx | 353 +----------------- .../taipy-gui/src/components/Taipy/Metric.tsx | 63 +--- .../taipy-gui/src/themes/darkThemeTemplate.ts | 349 +++++++++++++++++ 3 files changed, 358 insertions(+), 407 deletions(-) create mode 100644 frontend/taipy-gui/src/themes/darkThemeTemplate.ts diff --git a/frontend/taipy-gui/src/components/Taipy/Chart.tsx b/frontend/taipy-gui/src/components/Taipy/Chart.tsx index ee3e2379b9..3a0c697be4 100644 --- a/frontend/taipy-gui/src/components/Taipy/Chart.tsx +++ b/frontend/taipy-gui/src/components/Taipy/Chart.tsx @@ -43,6 +43,7 @@ import { useDynamicProperty, useModule, } from "../../utils/hooks"; +import { darkThemeTemplate } from "../../themes/darkThemeTemplate"; const Plot = lazy(() => import("react-plotly.js")); @@ -348,7 +349,7 @@ const Chart = (props: ChartProp) => { theme.palette.mode === "dark" ? props.template_Dark_ ? JSON.parse(props.template_Dark_) - : darkTemplate + : darkThemeTemplate : props.template_Light_ && JSON.parse(props.template_Light_); template = tpl ? (tplTheme ? { ...tpl, ...tplTheme } : tpl) : tplTheme ? tplTheme : undefined; } catch (e) { @@ -649,353 +650,3 @@ const Chart = (props: ChartProp) => { }; export default Chart; - -const darkTemplate = { - data: { - barpolar: [ - { - marker: { - line: { - color: "rgb(17,17,17)", - }, - pattern: { - solidity: 0.2, - }, - }, - type: "barpolar", - }, - ], - bar: [ - { - error_x: { - color: "#f2f5fa", - }, - error_y: { - color: "#f2f5fa", - }, - marker: { - line: { - color: "rgb(17,17,17)", - }, - pattern: { - 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", - }, - ], - contour: [ - { - 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: [ - { - 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: [ - { - 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: [ - { - 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: [ - { - 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: { - solidity: 0.2, - }, - }, - type: "histogram", - }, - ], - scatter: [ - { - marker: { - line: { - color: "#283442", - }, - }, - type: "scatter", - }, - ], - scattergl: [ - { - marker: { - line: { - color: "#283442", - }, - }, - type: "scattergl", - }, - ], - surface: [ - { - 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", - }, - 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)", - subunitcolor: "#506784", - }, - mapbox: { - style: "dark", - }, - paper_bgcolor: "rgb(17,17,17)", - plot_bgcolor: "rgb(17,17,17)", - polar: { - angularaxis: { - gridcolor: "#506784", - linecolor: "#506784", - }, - bgcolor: "rgb(17,17,17)", - radialaxis: { - gridcolor: "#506784", - linecolor: "#506784", - }, - }, - scene: { - xaxis: { - backgroundcolor: "rgb(17,17,17)", - gridcolor: "#506784", - linecolor: "#506784", - zerolinecolor: "#C8D4E3", - }, - yaxis: { - backgroundcolor: "rgb(17,17,17)", - gridcolor: "#506784", - linecolor: "#506784", - zerolinecolor: "#C8D4E3", - }, - zaxis: { - backgroundcolor: "rgb(17,17,17)", - gridcolor: "#506784", - linecolor: "#506784", - showbackground: true, - zerolinecolor: "#C8D4E3", - }, - }, - shapedefaults: { - line: { - color: "#f2f5fa", - }, - }, - sliderdefaults: { - bgcolor: "#C8D4E3", - bordercolor: "rgb(17,17,17)", - }, - ternary: { - aaxis: { - gridcolor: "#506784", - linecolor: "#506784", - }, - baxis: { - gridcolor: "#506784", - linecolor: "#506784", - }, - bgcolor: "rgb(17,17,17)", - caxis: { - gridcolor: "#506784", - linecolor: "#506784", - }, - }, - updatemenudefaults: { - bgcolor: "#506784", - }, - xaxis: { - gridcolor: "#283442", - linecolor: "#506784", - tickcolor: "#506784", - zerolinecolor: "#283442", - }, - yaxis: { - gridcolor: "#283442", - linecolor: "#506784", - tickcolor: "#506784", - zerolinecolor: "#283442", - }, - }, -}; diff --git a/frontend/taipy-gui/src/components/Taipy/Metric.tsx b/frontend/taipy-gui/src/components/Taipy/Metric.tsx index 96f4244d96..c99049a4e0 100644 --- a/frontend/taipy-gui/src/components/Taipy/Metric.tsx +++ b/frontend/taipy-gui/src/components/Taipy/Metric.tsx @@ -16,10 +16,11 @@ import {Data} from "plotly.js"; import Box from "@mui/material/Box"; import Skeleton from "@mui/material/Skeleton"; import Tooltip from "@mui/material/Tooltip"; +import {useTheme} from "@mui/material"; import {useClassNames, useDynamicJsonProperty, useDynamicProperty} from "../../utils/hooks"; import {extractPrefix, extractSuffix, sprintfToD3Converter} from "../../utils/formatConversion"; import {TaipyBaseProps, TaipyHoverProps} from "./utils"; -import {useTheme} from "@mui/material"; +import { darkThemeTemplate } from "../../themes/darkThemeTemplate"; const Plot = lazy(() => import("react-plotly.js")); @@ -167,62 +168,12 @@ const Metric = (props: MetricProps) => { export default Metric; +const { colorscale, colorway, font} = darkThemeTemplate.layout; const darkTemplate = { layout: { - 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", - }, + colorscale, + colorway, + font, paper_bgcolor: "rgb(31,47,68)", }, -}; +} diff --git a/frontend/taipy-gui/src/themes/darkThemeTemplate.ts b/frontend/taipy-gui/src/themes/darkThemeTemplate.ts new file mode 100644 index 0000000000..e0219a814c --- /dev/null +++ b/frontend/taipy-gui/src/themes/darkThemeTemplate.ts @@ -0,0 +1,349 @@ +export const darkThemeTemplate = { + data: { + barpolar: [ + { + marker: { + line: { + color: "rgb(17,17,17)", + }, + pattern: { + solidity: 0.2, + }, + }, + type: "barpolar", + }, + ], + bar: [ + { + error_x: { + color: "#f2f5fa", + }, + error_y: { + color: "#f2f5fa", + }, + marker: { + line: { + color: "rgb(17,17,17)", + }, + pattern: { + 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", + }, + ], + contour: [ + { + 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: [ + { + 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: [ + { + 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: [ + { + 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: [ + { + 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: { + solidity: 0.2, + }, + }, + type: "histogram", + }, + ], + scatter: [ + { + marker: { + line: { + color: "#283442", + }, + }, + type: "scatter", + }, + ], + scattergl: [ + { + marker: { + line: { + color: "#283442", + }, + }, + type: "scattergl", + }, + ], + surface: [ + { + 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", + }, + 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)", + subunitcolor: "#506784", + }, + mapbox: { + style: "dark", + }, + paper_bgcolor: "rgb(17,17,17)", + plot_bgcolor: "rgb(17,17,17)", + polar: { + angularaxis: { + gridcolor: "#506784", + linecolor: "#506784", + }, + bgcolor: "rgb(17,17,17)", + radialaxis: { + gridcolor: "#506784", + linecolor: "#506784", + }, + }, + scene: { + xaxis: { + backgroundcolor: "rgb(17,17,17)", + gridcolor: "#506784", + linecolor: "#506784", + zerolinecolor: "#C8D4E3", + }, + yaxis: { + backgroundcolor: "rgb(17,17,17)", + gridcolor: "#506784", + linecolor: "#506784", + zerolinecolor: "#C8D4E3", + }, + zaxis: { + backgroundcolor: "rgb(17,17,17)", + gridcolor: "#506784", + linecolor: "#506784", + showbackground: true, + zerolinecolor: "#C8D4E3", + }, + }, + shapedefaults: { + line: { + color: "#f2f5fa", + }, + }, + sliderdefaults: { + bgcolor: "#C8D4E3", + bordercolor: "rgb(17,17,17)", + }, + ternary: { + aaxis: { + gridcolor: "#506784", + linecolor: "#506784", + }, + baxis: { + gridcolor: "#506784", + linecolor: "#506784", + }, + bgcolor: "rgb(17,17,17)", + caxis: { + gridcolor: "#506784", + linecolor: "#506784", + }, + }, + updatemenudefaults: { + bgcolor: "#506784", + }, + xaxis: { + gridcolor: "#283442", + linecolor: "#506784", + tickcolor: "#506784", + zerolinecolor: "#283442", + }, + yaxis: { + gridcolor: "#283442", + linecolor: "#506784", + tickcolor: "#506784", + zerolinecolor: "#283442", + }, + }, +}; From 03da2e169bdcd03b0d71dbb50a44beef167e91e6 Mon Sep 17 00:00:00 2001 From: namnguyen Date: Fri, 7 Jun 2024 13:26:18 +0700 Subject: [PATCH 3/3] updating viselements --- taipy/gui/viselements.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/taipy/gui/viselements.json b/taipy/gui/viselements.json index f6c5204eae..9935d7a0f1 100644 --- a/taipy/gui/viselements.json +++ b/taipy/gui/viselements.json @@ -909,17 +909,17 @@ { "name": "template", "type": "dict", - "doc": "The Plotly layout template." + "doc": "The Plotly layout template." }, { "name": "template[dark]", "type": "dict", - "doc": "The Plotly layout template applied over the base template when theme is dark." + "doc": "The Plotly layout template applied over the base template when theme is dark." }, { "name": "template[light]", "type": "dict", - "doc": "The Plotly layout template applied over the base template when theme is not dark." + "doc": "The Plotly layout template applied over the base template when theme is not dark." } ] } @@ -2390,17 +2390,17 @@ { "name": "template", "type": "dict", - "doc": "The Plotly layout template." + "doc": "The Plotly layout template." }, { "name": "template[dark]", "type": "dict", - "doc": "The Plotly layout template applied over the base template when theme is dark." + "doc": "The Plotly layout template applied over the base template when theme is dark." }, { "name": "template[light]", "type": "dict", - "doc": "The Plotly layout template applied over the base template when theme is not dark." + "doc": "The Plotly layout template applied over the base template when theme is not dark." }, { "name": "decimator",