hotfix / improve autoscaling/dynamic loading, fix forex candle charts, equity reports

frontend-components/plotly/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.3",
     "dom-to-image": "^2.6.0",
+    "lodash": "^4.17.21",
     "plotly.js-dist-min": "^2.21.0",
     "posthog-js": "^1.55.0",
     "react": "^18.0.0",
@@ -20,6 +21,7 @@
   },
   "devDependencies": {
     "@types/dom-to-image": "^2.6.4",
+    "@types/lodash": "^4.14.195",
     "@types/node": "^18.16.3",
     "@types/plotly.js-dist-min": "^2.3.1",
     "@types/react": "^18.0.27",

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

@@ -14,28 +14,41 @@ export default async function autoScaling(
       let y_min;
       let y_max;
 
-      const YaxisData = graphs.data.filter(
-        (trace) => trace.yaxis !== undefined,
-      );
+      const get_all_yaxis_traces = {};
+      const get_all_yaxis_annotations = {};
+      let volumeTraceYaxis = null;
+
       const yaxis_unique = [
         ...new Set(
-          YaxisData.map(
-            (trace) =>
+          graphs.data.map((trace) => {
+            if (
               trace.yaxis ||
               trace.y !== undefined ||
-              trace.type === "candlestick",
-          ),
+              trace.type === "candlestick"
+            ) {
+              if (trace.type === "bar" && trace?.name?.trim() === "Volume") {
+                volumeTraceYaxis = `yaxis${trace.yaxis.replace("y", "")}`;
+              }
+              get_all_yaxis_traces[trace.yaxis] =
+                get_all_yaxis_traces[trace.yaxis] || [];
+              get_all_yaxis_traces[trace.yaxis].push(trace);
+              return trace.yaxis;
+            }
+          }),
         ),
       ];
 
-      const get_all_yaxis_traces = (yaxis) => {
-        return graphs.data.filter(
-          (trace) =>
-            trace.yaxis === yaxis && (trace.y || trace.type === "candlestick"),
-        );
-      };
+      graphs.layout.annotations.map((annotation, i) => {
+        if (annotation.yref !== undefined && annotation.yref !== "paper") {
+          annotation.index = i;
+          const yaxis = `yaxis${annotation.yref.replace("y", "")}`;
+          get_all_yaxis_annotations[yaxis] =
+            get_all_yaxis_annotations[yaxis] || [];
+          get_all_yaxis_annotations[yaxis].push(annotation);
+        }
+      });
 
-      yaxis_unique.forEach((unique) => {
+      yaxis_unique.map((unique) => {
         if (typeof unique !== "string") {
           return;
         }
@@ -44,7 +57,7 @@ export default async function autoScaling(
         let y_values = [];
         let log_scale = graphs.layout[yaxis].type === "log";
 
-        get_all_yaxis_traces(unique).forEach((trace2) => {
+        get_all_yaxis_traces[unique].map((trace2) => {
           const x = trace2.x;
           log_scale = graphs.layout[yaxis].type === "log";
 
@@ -62,7 +75,23 @@ export default async function autoScaling(
 
           const yx_values = x.map((x, i) => {
             let out = null;
-            if (x >= x_min && x <= x_max) {
+            const isoDateRegex = new RegExp(
+              "^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}",
+            );
+            if (isoDateRegex.test(x)) {
+              const x_time = new Date(x).getTime();
+              const x0_min = new Date(x_min.replace(" ", "T")).getTime();
+              const x1_max = new Date(x_max.replace(" ", "T")).getTime();
+              if (x_time >= x0_min && x_time <= x1_max) {
+                if (trace2.y !== undefined) {
+                  out = y[i];
+                }
+                if (trace2.type === "candlestick") {
+                  y_candle.push(y_low[i]);
+                  y_candle.push(y_high[i]);
+                }
+              }
+            } else if (x >= x_min && x <= x_max) {
               if (trace2.y !== undefined) {
                 out = y[i];
               }
@@ -88,10 +117,6 @@ export default async function autoScaling(
         }
 
         const org_y_max = y_max;
-        const is_volume =
-          graphs.layout[yaxis].fixedrange !== undefined &&
-          yaxis !== "yaxis" &&
-          graphs.layout[yaxis].fixedrange === true;
 
         if (y_min !== undefined && y_max !== undefined) {
           const y_range = y_max - y_min;
@@ -103,7 +128,7 @@ export default async function autoScaling(
           y_min -= y_range * y_mult;
           y_max += y_range * y_mult;
 
-          if (is_volume) {
+          if (yaxis === volumeTraceYaxis) {
             if (graphs.layout[yaxis].tickvals !== undefined) {
               const range_x = 7;
               const volume_ticks = org_y_max;
@@ -137,6 +162,20 @@ export default async function autoScaling(
           to_update[`${yaxis}.range`] = [y_min, y_max];
           to_update[`${yaxis}.fixedrange`] = true;
           yaxis_fixedrange.push(yaxis);
+
+          if (get_all_yaxis_annotations[yaxis] !== undefined) {
+            get_all_yaxis_annotations[yaxis].map((annotation) => {
+              if (annotation.ay !== undefined) {
+                const yshift = annotation.ay;
+                const yshift_new = Math.min(
+                  Math.max(yshift, y_min + y_range * 0.2),
+                  y_max - y_range * 0.2,
+                );
+
+                to_update[`annotations[${annotation.index}].ay`] = yshift_new;
+              }
+            });
+          }
         }
       });