feat: add custom css color chart (#242)

oraidex · Apr 16, 2024 · a67bc2c · a67bc2c
1 parent 6c6a97d
commit a67bc2c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/packages/oraidex-common-ui/package.json b/packages/oraidex-common-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@oraichain/oraidex-common-ui",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "files": [
     "dist/"
   ],

diff --git a/packages/oraidex-common-ui/src/components/TVChartContainer/TVChartContainer.stories.tsx b/packages/oraidex-common-ui/src/components/TVChartContainer/TVChartContainer.stories.tsx
@@ -53,7 +53,8 @@ OraiAtomChartDefaultURL.args = {
       symbol: "ORAI/ATOM",
       info: "orai-ibc/A2E2EEC9057A4A1C2C0A6A4C78B0239118DF5F278830F50B4A6BDD7A66506B78"
     }
-  ]
+  ],
+  customCssUrl: "/custom-trading.css"
   // baseUrl: BASE_API_URL.ORAIDEX,
   // wsUrl: BASE_SOCKET_URL.ORAIDEX
 };
@@ -74,7 +75,8 @@ TimpiChartDefaultURL.args = {
       symbol: "NTMPI/USDC",
       info: "ibc/576B1D63E401B6A9A071C78A1D1316D016EC9333D2FEB14AD503FAC4B8731CD1-orai15un8msx3n5zf9ahlxmfeqd2kwa5wm0nrpxer304m9nd5q6qq0g6sku5pdd"
     }
-  ]
+  ],
+  customCssUrl: "/custom-trading.css"
   // baseUrl: BASE_API_URL.ORAIDEX,
   // wsUrl: BASE_SOCKET_URL.ORAIDEX
 };

diff --git a/packages/oraidex-common-ui/src/components/TVChartContainer/TVChartContainer.tsx b/packages/oraidex-common-ui/src/components/TVChartContainer/TVChartContainer.tsx
@@ -38,6 +38,7 @@ export type TVChartContainerProsp = {
   baseUrl?: string;
   wsUrl?: string;
   fetchDataChart?: (arg: FetchChartDataParams) => Promise<Bar[]>;
+  customCssUrl?: string;
 };
 
 export default function TVChartContainer({
@@ -48,7 +49,8 @@ export default function TVChartContainer({
   setChartTimeFrame,
   baseUrl,
   wsUrl,
-  fetchDataChart
+  fetchDataChart,
+  customCssUrl
 }: TVChartContainerProsp) {
   const chartContainerRef = useRef<HTMLDivElement | null>(null);
   const tvWidgetRef = useRef<IChartingLibraryWidget | null>(null);
@@ -147,6 +149,13 @@ export default function TVChartContainer({
         { text: "1d", resolution: "15" as ResolutionString, description: "1 Day" }
       ]
     };
+
+    // update css url by prop
+    if (customCssUrl) {
+      widgetOptions["custom_css_url"] = customCssUrl;
+      // tvWidgetRef.current!.addCustomCSSFile("./custom.css");
+    }
+
     if (isMobile) widgetOptions.disabled_features.push(...disabledFeaturesOnMobile);
 
     const script = document.createElement("script");