handle add text high/low for candlestick traces when updating

frontend-components/plotly/src/components/Chart.tsx

@@ -63,6 +63,7 @@ export default function Chart({
   const [changeColor, setChangeColor] = useState(false);
   const [colorActive, setColorActive] = useState(false);
   const [onAnnotationClick, setOnAnnotationClick] = useState({});
+  const [ohlcAnnotation, setOhlcAnnotation] = useState([]);
 
   const onClose = () => setModal({ name: "" });
 
@@ -90,6 +91,8 @@ export default function Chart({
       setOnAnnotationClick,
       setAnnotations,
       onAnnotationClick,
+      ohlcAnnotation,
+      setOhlcAnnotation,
       annotations,
       plotDiv,
     });

frontend-components/plotly/src/components/Dialogs/TextChartDialog.tsx

@@ -49,21 +49,13 @@ export default function TextChartDialog({
   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.type === "checkbox"
-        ? e.target.checked
-          ? 1
-          : 0
-        : e.target.value;
+    const value = e.target.value;
     setNewPopupData({ ...newPopupData, [name]: value });
   }
 
   function onSubmit() {
     console.log("submitting", newPopupData);
     if (newPopupData.text !== "") {
-      let above = ["above", 1].includes(newPopupData.yanchor);
-      newPopupData.yanchor = above ? "above" : "below";
-
       if (popUpData?.annotation) {
         setNewPopupData({ ...newPopupData, annotation: popUpData.annotation });
       }
@@ -158,19 +150,21 @@ export default function TextChartDialog({
               defaultValue={popUpData?.annotation?.size || newPopupData?.size}
             ></input>
             <div>
-              <label htmlFor="addtext_yanchor" style={{ marginRight: 28 }}>
-                <b>Position (Above)</b>
+              <label htmlFor="addtext_yanchor" style={{ marginRight: 31 }}>
+                <b>Position</b>
               </label>
-              <input
-                type="checkbox"
-                style={{ ...style, width: "45px" }}
+              <select
                 id="addtext_yanchor"
-                name="check"
-                defaultChecked={
-                  newPopupData?.yanchor === "above" ? true : false
+                name="yanchor"
+                style={{ width: "100px" }}
+                defaultValue={
+                  popUpData?.annotation?.yanchor || newPopupData?.yanchor
                 }
                 onChange={onChange}
-              ></input>
+              >
+                <option value="above">Above</option>
+                <option value="below">Below</option>
+              </select>
             </div>
           </div>
         </div>

frontend-components/plotly/src/utils/addAnnotation.tsx

@@ -44,6 +44,10 @@ export function add_annotation({
       break;
     }
   }
+
+  if (popup_data.high != undefined) {
+    y = popup_data.yanchor == "above" ? popup_data.high : popup_data.low;
+  }
   if (index == -1) {
     let annotation: Annotations = {
       x: x,
@@ -71,14 +75,19 @@ export function add_annotation({
       },
       clicktoshow: "onoff",
       captureevents: true,
+      high: popup_data.high || undefined,
+      low: popup_data.low || undefined,
     };
     annotations.push(annotation);
   } else {
+    annotations[index].y = y;
     annotations[index].text = popup_data.text;
     annotations[index].font.color = popup_data.color;
     annotations[index].font.size = popup_data.size;
     annotations[index].ay = y + popup_data.yshift;
     annotations[index].bordercolor = popup_data.bordercolor;
+    annotations[index].high = popup_data.high || undefined;
+    annotations[index].low = popup_data.low || undefined;
   }
   return { annotations: annotations, annotation: annotations[index] };
 }
@@ -124,6 +133,8 @@ export function init_annotation({
   setOnAnnotationClick,
   setAnnotations,
   onAnnotationClick,
+  ohlcAnnotation,
+  setOhlcAnnotation,
   annotations,
   plotDiv,
 }: {
@@ -134,12 +145,15 @@ export function init_annotation({
   onAnnotationClick: any;
   setOnAnnotationClick: (onAnnotationClick: any) => void;
   setAnnotations: (annotations: Partial<Annotations>[]) => void;
+  ohlcAnnotation: any;
+  setOhlcAnnotation: (ohlcAnnotation: any) => void;
   annotations: Annotations[];
   plotDiv: PlotlyHTMLElement;
 }) {
   if (popupData.text != undefined && popupData.text != "") {
     popupData.text = popupData.text.replace(/\n/g, "<br>");
     let popup_data: Partial<PopupData>;
+    let inOhlc = false;
 
     if (popupData.annotation) {
       console.log("data", popupData);
@@ -151,12 +165,35 @@ export function init_annotation({
           popupData.annotation.y < popupData.annotation.ay ? "above" : "below",
         ...popupData,
       };
+      if (popupData.annotation.high != undefined) {
+        inOhlc = true;
+      }
       console.log("popup_data", popup_data);
       let to_update = plot_text({
         plotData,
         popup_data: popup_data as PopupData,
         current_text: popupData.annotation.text,
       });
+
+      if (inOhlc) {
+        // we update the ohlcAnnotation
+        let ohlcAnnotationIndex = ohlcAnnotation.findIndex(
+          (a) =>
+            a.x == popupData.annotation.x &&
+            a.y == popupData.annotation.y &&
+            a.yref == popupData.annotation.yref
+        );
+        console.log("ohlcAnnotationIndex", ohlcAnnotationIndex);
+        if (ohlcAnnotationIndex == -1) {
+          // we add the annotation to the ohlcAnnotation array
+          setOhlcAnnotation([...ohlcAnnotation, to_update.annotation]);
+        } else {
+          // we replace the annotation in the ohlcAnnotation array
+          ohlcAnnotation[ohlcAnnotationIndex] = to_update.annotation;
+          setOhlcAnnotation(ohlcAnnotation);
+        }
+      }
+
       setAnnotations(
         [...annotations, to_update.annotation].filter((a) => a != undefined)
       );
@@ -182,6 +219,8 @@ export function init_annotation({
       let popup_data = {
         x: annotation.x,
         y: annotation.y,
+        high: annotation?.high ?? undefined,
+        low: annotation?.low ?? undefined,
         yanchor: annotation.y < annotation.ay ? "above" : "below",
         text: annotation.text,
         color: annotation.font.color,
@@ -189,7 +228,8 @@ export function init_annotation({
         bordercolor: annotation.bordercolor,
         annotation: annotation,
       };
-      console.log("popup_data", popup_data);
+
+      console.log("popup_data_clickannotation", popup_data);
       setOnAnnotationClick(popup_data);
       setModal({ name: "textDialog", data: popup_data });
       setOnAnnotationClick({});
@@ -200,12 +240,15 @@ export function init_annotation({
       let x = eventData.points[0].x;
       let yaxis = eventData.points[0].fullData.yaxis;
       let y = 0;
+      let high, low;
 
       // We need to check if the trace is a candlestick or not
       // this is because the y value is stored in the high or low
       if (eventData.points[0].y != undefined) {
         y = eventData.points[0].y;
       } else if (eventData.points[0].low != undefined) {
+        high = eventData.points[0].high;
+        low = eventData.points[0].low;
         if (popup_data?.yanchor == "below") {
           y = eventData.points[0].low;
         } else {
@@ -217,13 +260,24 @@ export function init_annotation({
         x: onAnnotationClick?.annotation?.x ?? x,
         y: onAnnotationClick?.annotation?.y ?? y,
         yref: onAnnotationClick?.annotation?.yref ?? yaxis,
+        high: onAnnotationClick?.annotation?.high ?? high,
+        low: onAnnotationClick?.annotation?.low ?? low,
         ...popupData,
       };
+
+      if (high != undefined) {
+        // save the annotation to use later
+        ohlcAnnotation.push(popup_data);
+        setOhlcAnnotation(ohlcAnnotation);
+        console.log("ohlcAnnotation", ohlcAnnotation);
+      }
+
       let to_update = plot_text({
         plotData,
         popup_data: popup_data as PopupData,
         current_text: onAnnotationClick?.annotation?.text,
       });
+
       setAnnotations(
         [...annotations, to_update.annotation].filter((a) => a != undefined)
       );