[BugFix] update frontend-components and build new plotly and table html assets (#7007)

* update frontend-components and build new plotly and table html assets

* codespell for some reason

* too-many-positional-arguments

frontend-components/plotly/package.json

@@ -13,7 +13,7 @@
     "@radix-ui/react-dialog": "^1.0.3",
     "dom-to-image": "^2.6.0",
     "lodash": "^4.17.21",
-    "plotly.js-dist-min": "^2.32.0",
+    "plotly.js-dist-min": "^2.35.2",
     "posthog-js": "^1.55.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
@@ -37,7 +37,7 @@
     "react-hotkeys-hook": "^4.4.0",
     "tailwindcss": "^3.2.7",
     "typescript": "^4.9.3",
-    "vite": ">=4.5.4",
+    "vite": ">=4.5.6",
     "vite-plugin-singlefile": "^0.13.3"
   }
 }

frontend-components/plotly/src/App.tsx

@@ -70,7 +70,7 @@ function App() {
             globals.old_margin = { ...margin };
             if (margin.t !== undefined && margin.t > 40) margin.t = 40;
 
-            if (data.cmd === "/stocks/candle") margin.r -= 50;
+            if (data.cmd === "/equity/price/historical") margin.r -= 50;
           }
       });
     }
@@ -85,7 +85,7 @@ function App() {
       }
     });
 
-    const title = data.layout?.title?.text || "Interactive Chart";
+    const title = data.layout?.title?.text || "OpenBB Platform";
     globals.title = title;
     return {
       data: data,

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

@@ -172,11 +172,11 @@ async function DynamicLoad({
     );
 
     if (XDATA.length === 0) return figure;
-    // We get the xaxis range, if no event is passed, we get the last 2000 points
+    // We get the xaxis range, if no event is passed, we get the last 1000 points
     const xaxis_range = event
       ? [event["xaxis.range[0]"], event["xaxis.range[1]"]]
       : [
-          XDATA[0]?.x[XDATA[0].x.length - 2000],
+          XDATA[0]?.x[XDATA[0].x.length - 1000],
           XDATA[0]?.x[XDATA[0].x.length - 1],
         ];
 
@@ -503,12 +503,12 @@ function Chart({
           .setAttribute("viewBox", changeIcon.viewBox);
 
         const volumeColorsDark = {
-          "#009600": "#00ACFF",
-          "#c80000": "#e4003a",
+          "#00ACFF0": "#00ACFF",
+          "#e4003a": "#e4003a",
         };
         const volumeColorsLight = {
-          "#e4003a": "#c80000",
-          "#00ACFF": "#009600",
+          "#e4003a": "#e4003a",
+          "#00ACFF": "#00ACFF",
         };
 
         const volumeColors = darkmode ? volumeColorsDark : volumeColorsLight;
@@ -638,7 +638,7 @@ function Chart({
       );
       if (
         (originalData.data[0]?.x !== undefined &&
-          originalData.data[0]?.x.length <= 2000) ||
+          originalData.data[0]?.x.length <= 1000) ||
         !traceTypes.includes(true)
       )
         return;
@@ -646,7 +646,7 @@ function Chart({
         name: "alertDialog",
         data: {
           title: "Warning",
-          content: `Data has been truncated to 2000 points for performance reasons.
+          content: `Data has been truncated to 1000 points for performance reasons.
 						Please use the zoom tool to see more data.`,
         },
       });

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

@@ -67,6 +67,12 @@ export const ICONS = {
 };
 
 export const DARK_CHARTS_TEMPLATE = {
+  line: {
+    "up_color": "#0074D9",
+    "down_color": "#FF4136",
+    "color": "#111111",
+    "width": 1.5
+  },
   data: {
     candlestick: [
       {
@@ -92,18 +98,22 @@ export const DARK_CHARTS_TEMPLATE = {
     },
     autotypenumbers: "strict",
     colorway: [
-      "#ffed00",
-      "#ef7d00",
-      "#e4003a",
-      "#c13246",
-      "#822661",
-      "#48277c",
-      "#005ca9",
-      "#00aaff",
-      "#9b30d9",
-      "#af005f",
-      "#5f00af",
-      "#af87ff",
+      "#1f77b4",
+      "#ff7f0e",
+      "#2ca02c",
+      "#d62728",
+      "#9467bd",
+      "#8c564b",
+      "#e377c2",
+      "#bcbd22",
+      "#17becf",
+      "#aec7e8",
+      "#ffbb78",
+      "#ff9896",
+      "#c5b0d5",
+      "#f7b6d2",
+      "#dbdb8d",
+      "#9edae5"
     ],
     dragmode: "pan",
     font: {
@@ -119,10 +129,10 @@ export const DARK_CHARTS_TEMPLATE = {
     hovermode: "x",
     legend: {
       bgcolor: "rgba(0, 0, 0, 0)",
-      x: 0.01,
-      xanchor: "left",
+      x: 1,
+      xanchor: "right",
       y: 0.99,
-      yanchor: "top",
+      yanchor: "bottom",
       font: {
         size: 15,
       },
@@ -144,7 +154,9 @@ export const DARK_CHARTS_TEMPLATE = {
       tick0: 1,
       title: {
         standoff: 20,
+        text: "",
       },
+      gridcolor: "#283442",
       linecolor: "#F5EFF3",
       mirror: true,
       ticks: "outside",
@@ -158,8 +170,12 @@ export const DARK_CHARTS_TEMPLATE = {
       showline: true,
       side: "right",
       tick0: 0.5,
+      tickfont: {
+        size: 14,
+      },
       title: {
         standoff: 20,
+        text: "",
       },
       gridcolor: "#283442",
       linecolor: "#F5EFF3",
@@ -170,6 +186,12 @@ export const DARK_CHARTS_TEMPLATE = {
 };
 
 export const LIGHT_CHARTS_TEMPLATE = {
+  line: {
+    "up_color": "#0074D9",
+    "down_color": "#FF4136",
+    "color": "#111111",
+    "width": 1.5
+  },
   data: {
     barpolar: [
       {
@@ -537,20 +559,20 @@ export const LIGHT_CHARTS_TEMPLATE = {
     ],
     candlestick: [
       {
-        decreasing: {
-          fillcolor: "#c80000",
-          line: {
-            color: "#990000",
-          },
+        "decreasing": {
+            "fillcolor": "#e4003a",
+            "line": {
+                "color": "#e4003a"
+            }
         },
-        increasing: {
-          fillcolor: "#009600",
-          line: {
-            color: "#007500",
-          },
+        "increasing": {
+            "fillcolor": "#00ACFF",
+            "line": {
+                "color": "#00ACFF"
+            }
         },
-        type: "candlestick",
-      },
+        "type": "candlestick"
+      }
     ],
   },
   layout: {
@@ -607,18 +629,22 @@ export const LIGHT_CHARTS_TEMPLATE = {
       ],
     },
     colorway: [
-      "#254495",
-      "#c13246",
-      "#48277c",
-      "#e4003a",
-      "#ef7d00",
-      "#822661",
-      "#ffed00",
-      "#00aaff",
-      "#9b30d9",
-      "#af005f",
-      "#5f00af",
-      "#af87ff",
+      "#1f77b4",
+      "#ff7f0e",
+      "#2ca02c",
+      "#d62728",
+      "#9467bd",
+      "#8c564b",
+      "#e377c2",
+      "#bcbd22",
+      "#17becf",
+      "#aec7e8",
+      "#ffbb78",
+      "#ff9896",
+      "#c5b0d5",
+      "#f7b6d2",
+      "#dbdb8d",
+      "#9edae5"
     ],
     font: {
       color: "#2a3f5f",
@@ -638,8 +664,8 @@ export const LIGHT_CHARTS_TEMPLATE = {
     mapbox: {
       style: "light",
     },
-    paper_bgcolor: "white",
-    plot_bgcolor: "white",
+    paper_bgcolor: "#FFFFFF",
+    plot_bgcolor: "#FFFFFF",
     polar: {
       angularaxis: {
         gridcolor: "#EBF0F8",
@@ -710,47 +736,61 @@ export const LIGHT_CHARTS_TEMPLATE = {
     },
     xaxis: {
       automargin: true,
-      ticks: "outside",
-      zerolinewidth: 2,
+      autorange: true,
       rangeslider: {
-        visible: false,
+          visible: false
       },
       showgrid: true,
       showline: true,
       tickfont: {
-        size: 15,
+          size: 14
       },
-      title: {
-        standoff: 20,
-      },
-      mirror: true,
       zeroline: false,
-    },
-    yaxis: {
-      automargin: true,
-      ticks: "outside",
-      tickfont: {
-        size: 15,
-      },
-      zerolinewidth: 2,
-      fixedrange: false,
+      tick0: 1,
       title: {
-        standoff: 20,
+          standoff: 20,
+          font: {
+              size: 16
+          }
       },
-      nticks: 8,
-      showgrid: true,
-      showline: true,
-      side: "right",
+      gridcolor: "#283442",
+      linecolor: "#A9A9A9",
       mirror: true,
-      zeroline: false,
+      ticks: "outside"
+  },
+  yaxis: {
+    anchor: "x",
+    automargin: true,
+    fixedrange: false,
+    zeroline: false,
+    showgrid: true,
+    showline: true,
+    side: "right",
+    tick0: 0.5,
+    tickfont: {
+        size: 14
     },
+    title: {
+        standoff: 20,
+        font: {
+            size: 16
+        }
+    },
+    gridcolor: "rgba(128, 128, 128, 0.33)",
+    linecolor: "#A9A9A9",
+    mirror: true,
+    ticks: "outside"
+  },
     dragmode: "pan",
     legend: {
-      bgcolor: "rgba(0, 0, 0, 0)",
-      x: 1.03,
-      xanchor: "left",
-      y: 0.99,
-      yanchor: "top",
+      bgcolor: "rgba(255, 255, 255, 0)",
+      x: 1,
+      xanchor: "right",
+      y: 1.02,
+      yanchor: "bottom",
+      font: {
+          size: 12
+      }
     },
   },
 };

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

@@ -47,6 +47,18 @@ export function PlotConfig({
     responsive: true,
     displaylogo: false,
     displayModeBar: true,
+    edits: {
+      legendPosition: true,
+      legendText: true,
+      annotationPosition: true,
+      annotationTail: true,
+      annotationText: true,
+      colorbarPosition: true,
+      shapePosition: true,
+    },
+    showAxisDragHandles: true,
+    showTips: false,
+    setBackground: "transparent",
     modeBarButtonsToRemove: ["lasso2d", "select2d", "downloadImage"],
     modeBarButtons: [
       [

frontend-components/plotly/vite.config.ts

@@ -2,7 +2,21 @@ import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 import { viteSingleFile } from "vite-plugin-singlefile";
 
+const stripUseClientDirective = () => {
+  return {
+    name: 'strip-use-client',
+    transform(code) {
+      if (code.includes('use client')) {
+        return {
+          code: code.replace(/"use client"/, ''),
+          map: null
+        }
+      }
+    }
+  }
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), viteSingleFile()],
+  plugins: [react(), stripUseClientDirective(), viteSingleFile()],
 });

frontend-components/tables/package.json

@@ -23,7 +23,7 @@
     "@tanstack/react-table": "^8.7.9",
     "dom-to-image": "^2.6.0",
     "nanoid": ">=3.3.8",
-    "plotly.js": "^2.32.0",
+    "plotly.js": "^2.35.2",
     "react": "^17.0.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
@@ -46,7 +46,7 @@
     "postcss": "^8.4.21",
     "tailwindcss": "^3.2.7",
     "typescript": "^4.9.3",
-    "vite": ">=4.5.4",
+    "vite": ">=4.5.6",
     "vite-plugin-singlefile": "^0.13.3"
   }
 }

frontend-components/tables/vite.config.ts

@@ -2,7 +2,23 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { viteSingleFile } from "vite-plugin-singlefile";
 
+
+const stripUseClientDirective = () => {
+  return {
+    name: 'strip-use-client',
+    transform(code) {
+      if (code.includes('use client')) {
+        return {
+          code: code.replace(/"use client"/, ''),
+          map: null
+        }
+      }
+    }
+  }
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react(), viteSingleFile()],
+  plugins: [react(),
+    stripUseClientDirective(),viteSingleFile()],
 });