@@ -797,7 +846,6 @@ function Chart({
{memoizedTitleChartDialog}
{memoizedTextChartDialog}
{memoizedChangeColor}
- {memoizedDownloadFinishedDialog}
{memoizedChartHotkeys}
diff --git a/frontend-components/plotly/src/components/Config.tsx b/frontend-components/plotly/src/components/Config.tsx
index 017f8dd9a33..f05d48e1e4b 100644
--- a/frontend-components/plotly/src/components/Config.tsx
+++ b/frontend-components/plotly/src/components/Config.tsx
@@ -117,11 +117,15 @@ export const DARK_CHARTS_TEMPLATE = {
],
dragmode: "pan",
font: {
- family: "Fira Code",
- size: 18,
+ family: "Arial, Helvetica, sans-serif",
+ size: 16,
},
hoverlabel: {
align: "left",
+ font: {
+ family: "Arial, Helvetica, sans-serif",
+ size: 14,
+ },
},
mapbox: {
style: "dark",
@@ -134,7 +138,8 @@ export const DARK_CHARTS_TEMPLATE = {
y: 0.99,
yanchor: "bottom",
font: {
- size: 15,
+ family: "Arial, Helvetica, sans-serif",
+ size: 14,
},
},
paper_bgcolor: "#000000",
@@ -148,6 +153,7 @@ export const DARK_CHARTS_TEMPLATE = {
showgrid: true,
showline: true,
tickfont: {
+ family: "Arial, Helvetica, sans-serif",
size: 14,
},
zeroline: false,
@@ -155,6 +161,10 @@ export const DARK_CHARTS_TEMPLATE = {
title: {
standoff: 20,
text: "",
+ font: {
+ family: "Arial, Helvetica, sans-serif",
+ size: 16,
+ },
},
gridcolor: "#283442",
linecolor: "#F5EFF3",
@@ -171,11 +181,16 @@ export const DARK_CHARTS_TEMPLATE = {
side: "right",
tick0: 0.5,
tickfont: {
+ family: "Arial, Helvetica, sans-serif",
size: 14,
},
title: {
standoff: 20,
text: "",
+ font: {
+ family: "Arial, Helvetica, sans-serif",
+ size: 16,
+ },
},
gridcolor: "#283442",
linecolor: "#F5EFF3",
@@ -289,27 +304,6 @@ export const LIGHT_CHARTS_TEMPLATE = {
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: {
@@ -647,7 +641,8 @@ export const LIGHT_CHARTS_TEMPLATE = {
"#9edae5"
],
font: {
- color: "#2a3f5f",
+ family: "Arial, Helvetica, sans-serif",
+ size: 16,
},
geo: {
bgcolor: "white",
@@ -659,6 +654,10 @@ export const LIGHT_CHARTS_TEMPLATE = {
},
hoverlabel: {
align: "left",
+ font: {
+ family: "Arial, Helvetica, sans-serif",
+ size: 14,
+ },
},
hovermode: "x",
mapbox: {
@@ -738,49 +737,53 @@ export const LIGHT_CHARTS_TEMPLATE = {
automargin: true,
autorange: true,
rangeslider: {
- visible: false
+ visible: false
},
showgrid: true,
showline: true,
tickfont: {
- size: 14
+ family: "Arial, Helvetica, sans-serif",
+ size: 14,
},
zeroline: false,
tick0: 1,
title: {
- standoff: 20,
- font: {
- size: 16
- }
+ standoff: 20,
+ font: {
+ family: "Arial, Helvetica, sans-serif",
+ size: 16,
+ },
},
gridcolor: "#283442",
linecolor: "#A9A9A9",
mirror: true,
ticks: "outside"
- },
- yaxis: {
- anchor: "x",
- automargin: true,
- fixedrange: false,
- zeroline: false,
- showgrid: true,
- showline: true,
- side: "right",
- tick0: 0.5,
- tickfont: {
- size: 14
},
- title: {
+ yaxis: {
+ anchor: "x",
+ automargin: true,
+ fixedrange: false,
+ zeroline: false,
+ showgrid: true,
+ showline: true,
+ side: "right",
+ tick0: 0.5,
+ tickfont: {
+ family: "Arial, Helvetica, sans-serif",
+ size: 14,
+ },
+ title: {
standoff: 20,
font: {
- size: 16
- }
+ family: "Arial, Helvetica, sans-serif",
+ size: 16,
+ },
+ },
+ gridcolor: "rgba(128, 128, 128, 0.33)",
+ linecolor: "#A9A9A9",
+ mirror: true,
+ ticks: "outside"
},
- gridcolor: "rgba(128, 128, 128, 0.33)",
- linecolor: "#A9A9A9",
- mirror: true,
- ticks: "outside"
- },
dragmode: "pan",
legend: {
bgcolor: "rgba(255, 255, 255, 0)",
@@ -789,8 +792,9 @@ export const LIGHT_CHARTS_TEMPLATE = {
y: 1.02,
yanchor: "bottom",
font: {
- size: 12
- }
+ family: "Arial, Helvetica, sans-serif",
+ size: 14,
+ },
},
},
};
diff --git a/frontend-components/plotly/src/components/Dialogs/DownloadFinishedDialog.tsx b/frontend-components/plotly/src/components/Dialogs/DownloadFinishedDialog.tsx
deleted file mode 100644
index b7f6b86ec33..00000000000
--- a/frontend-components/plotly/src/components/Dialogs/DownloadFinishedDialog.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import CommonDialog from "../Dialogs/CommonDialog";
-
-export default function DownloadFinishedDialog({
- open,
- close,
-}: {
- open: boolean;
- close: () => void;
-}) {
- const userHomeDir = window.download_path || "~/OpenBBUserData/exports";
- return (
-
-
-
- );
-}
diff --git a/frontend-components/plotly/src/components/Dialogs/TextChartDialog.tsx b/frontend-components/plotly/src/components/Dialogs/TextChartDialog.tsx
index 308a8a0d9eb..fd27e802470 100644
--- a/frontend-components/plotly/src/components/Dialogs/TextChartDialog.tsx
+++ b/frontend-components/plotly/src/components/Dialogs/TextChartDialog.tsx
@@ -1,5 +1,5 @@
import CommonDialog from "./CommonDialog";
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
const style = {
padding: "5px 2px 2px 5px",
@@ -17,65 +17,118 @@ export default function TextChartDialog({
open: boolean;
close: () => void;
addAnnotation: (annotation: any) => void;
- updateAnnotation: (annotation: any) => void;
+ updateAnnotation?: (annotation: any) => void;
deleteAnnotation: (annotation: any) => void;
popupData: any | null;
}) {
+ // Prevent multiple renderings
+ const hasLoaded = useRef(false);
+
const defaultPopupData = {
text: "",
color: "#0088CC",
size: 18,
bordercolor: "#822661",
+ arrowcolor: "#822661",
+ bgcolor: "#000000",
+ arrowsize: 1,
+ arrowwidth: 2,
yanchor: "above",
};
- const [popUpData, setPopUpData] = useState
(defaultPopupData);
- const [newPopupData, setNewPopupData] = useState(defaultPopupData);
- if (popupData && popupData !== popUpData) {
- if (popupData.annotation) {
- popupData.annotation = popupData?.annotation || {};
- setPopUpData(popupData);
- setNewPopupData(popupData);
+ // Use a single state object to hold all form data
+ const [formData, setFormData] = useState(defaultPopupData);
+ const [editMode, setEditMode] = useState(false);
+
+ // Handle initialization when dialog opens
+ useEffect(() => {
+ if (open && popupData?.annotation && !hasLoaded.current) {
+ const annotation = popupData.annotation;
+
+ // Get properties from annotation for editing
+ let data = {
+ text: annotation.text || "",
+ color: annotation.font?.color || defaultPopupData.color,
+ size: annotation.font?.size || defaultPopupData.size,
+ bordercolor: annotation.bordercolor || defaultPopupData.bordercolor,
+ bgcolor: annotation.bgcolor || defaultPopupData.bgcolor,
+ arrowcolor: annotation.arrowcolor || defaultPopupData.arrowcolor,
+ arrowsize: annotation.arrowsize || defaultPopupData.arrowsize,
+ arrowwidth: annotation.arrowwidth || defaultPopupData.arrowwidth,
+ yanchor: "above",
+ };
+
+ // Determine position based on annotation coordinates
+ if (annotation.y !== undefined && annotation.ay !== undefined) {
+ data.yanchor = annotation.y < annotation.ay ? "above" : "below";
+ }
+
+ setFormData(data);
+ setEditMode(true);
+ hasLoaded.current = true;
+ } else if (!open) {
+ // Reset when dialog closes
+ setFormData(defaultPopupData);
+ setEditMode(false);
+ hasLoaded.current = false;
+ } else if (open && !popupData?.annotation) {
+ // Reset for new annotations
+ setFormData(defaultPopupData);
+ setEditMode(false);
}
+ }, [open, popupData]);
+
+ function onChange(e: any) {
+ const name = e.target.id.replace("addtext_", "");
+ let value = e.target.value;
+
+ // Convert numeric values
+ if (name === "size" || name === "arrowsize" || name === "arrowwidth") {
+ value = parseFloat(value);
+ }
+
+ setFormData((prev: any) => ({
+ ...prev,
+ [name]: value
+ }));
}
function onClose() {
- console.log("closing");
- setPopUpData(defaultPopupData);
- setNewPopupData(defaultPopupData);
close();
}
- function onChange(e: any) {
- console.log(e.target.id.replace("addtext_", ""), e.target.value);
- const name = e.target.id.replace("addtext_", "");
- const value = e.target.value;
- setNewPopupData({ ...newPopupData, [name]: value });
- }
-
function onSubmit() {
- console.log("submitting", newPopupData);
- if (newPopupData.text !== "") {
- if (popUpData?.annotation) {
- setNewPopupData({ ...newPopupData, annotation: popUpData.annotation });
+ if (formData.text) {
+ const dataToSubmit = { ...formData };
+
+ // Add the annotation reference for editing
+ if (editMode && popupData?.annotation) {
+ dataToSubmit.annotation = popupData.annotation;
}
- addAnnotation(newPopupData);
+
+ addAnnotation(dataToSubmit);
close();
} else {
- document.getElementById("popup_textarea_warning")!.style.display =
- "block";
- document.getElementById("addtext_text")!.style.border = "1px solid red";
+ if (document.getElementById("popup_textarea_warning")) {
+ document.getElementById("popup_textarea_warning")!.style.display = "block";
+ }
+ if (document.getElementById("addtext_text")) {
+ document.getElementById("addtext_text")!.style.border = "1px solid red";
+ }
}
}
+
function onDelete() {
- deleteAnnotation(popUpData);
- onClose();
+ if (editMode && popupData) {
+ deleteAnnotation(popupData);
+ }
+ close();
}
return (
@@ -84,7 +137,7 @@ export default function TextChartDialog({