fixes on charts export

domToImage.ts

@@ -0,0 +1,9 @@
+declare module 'dom-to-image-more' {
+  const domToImage: {
+    toBlob(node: HTMLElement): Promise<Blob>;
+    toPng(node: HTMLElement): Promise<string>;
+    toJpeg(node: HTMLElement, options?: any): Promise<string>;
+    toSvg(node: HTMLElement): Promise<string>;
+  };
+  export default domToImage;
+}

package.json

@@ -17,6 +17,8 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "dom-to-image": "^2.6.0",
+    "dom-to-image-more": "^3.6.3",
     "flowbite": "^3.1.2",
     "flowbite-react": "^0.12.6",
     "html2canvas": "^1.4.1",
@@ -32,6 +34,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",
+    "@types/dom-to-image": "^2.6.7",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",

src/components/Charts/ChartContainer.tsx

@@ -0,0 +1,32 @@
+import { Spinner } from "flowbite-react";
+import { forwardRef, ReactElement } from "react";
+import { ResponsiveContainer } from "recharts";
+
+interface ChartContainerProps {
+  children: ReactElement;
+  loading: boolean;
+  title?: string;
+}
+
+const ChartContainer = forwardRef<HTMLDivElement, ChartContainerProps>(
+  (props, ref) => {
+    return (
+      <div style={{ width: "100%", height: "480px" , position : "relative" }}>
+        {props.loading ? (
+          <div className="flex justify-center items-center w-full h-full">
+            <Spinner />
+          </div>
+        ) : (
+          <ResponsiveContainer width="100%" height="100%" ref={ref}>
+            {props.children}
+          </ResponsiveContainer>
+        )}
+
+        {/* {!props.loading && <ChartWatermark label="ZECHUB DASHBOARD" />} */}
+      </div>
+    );
+  }
+);
+
+ChartContainer.displayName = "ChartContatiner";
+export default ChartContainer;

src/components/Charts/Namada/NamadaChart.tsx

@@ -73,7 +73,7 @@ function NamadaChart(props: NamadaChartProps) {
                   </TabsContent>
 
                   <ChartFooter
-                    imgLabel={selectedTokenId}
+                    imgLabel={activeTab}
                     handleSaveToPng={props.handleSaveToPng}
                     lastUpdatedDate={props.lastUpdated}
                   />

src/components/Charts/Namada/RewardsChart.tsx

@@ -26,6 +26,7 @@ import "chartjs-adapter-date-fns";
 import { format, parse } from "date-fns";
 import { RefObject, useEffect, useState } from "react";
 import { Line } from "react-chartjs-2";
+import ChartContainer from "../ChartContainer";
 
 ChartJS.register(
   CategoryScale,
@@ -266,7 +267,6 @@ const RewardChart = (props: RewardChartProps) => {
 
   return (
     <div
-      ref={props.divChartRef}
       className="bg-white dark:bg-slate-900 p-6 rounded-lg shadow-sm border border-gray-200 dark:border-slate-700"
       style={{ width: "100%" }}
     >
@@ -305,9 +305,15 @@ const RewardChart = (props: RewardChartProps) => {
         </div>
       </div>
 
-      <div className="w-full" style={{ height: "480px", position: "relative" }}>
-        <Line data={chartData} options={options} />
-      </div>
+      <ChartContainer ref={props.divChartRef} loading={loading}>
+        <div
+          className="w-full"
+          style={{ height: "480px", position: "relative" }}
+        >
+          <Line data={chartData} options={options} />
+        </div>
+      </ChartContainer>
+
       {/* <div className="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
         <div className="bg-blue-50 dark:bg-slate-800 p-4 rounded-lg">
           <h3 className="font-semibold text-blue-800">Current Staked Ratio</h3>

src/components/Charts/Namada/TokenEcosystem.tsx

@@ -12,7 +12,6 @@ import { useResponsiveFontSize } from "../../hooks/useResponsiveFontSize";
 import { DATA_URL } from "../../lib/chart/data-url";
 import { getNamadaSupply } from "../../lib/chart/helpers";
 import { FlattenedTokenData } from "../../lib/chart/types";
-import { Spinner } from "flowbite-react";
 import {
   Area,
   AreaChart,
@@ -30,6 +29,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../UI/shadcn/select";
+import ChartContainer from "../ChartContainer";
 
 type NamadaAsset = {
   id: string;
@@ -78,7 +78,9 @@ export default function TokenEcosystem(props: TokenEcosystemProps) {
       }
     }
 
-    fetchData();
+    setTimeout(() => {
+      fetchData();
+    }, 2000);
     return () => controller.abort();
   }, []);
 
@@ -113,10 +115,7 @@ export default function TokenEcosystem(props: TokenEcosystemProps) {
       : [props.selectedTokenId];
 
   return (
-    <Card
-      ref={props.divChartRef}
-      className="shadow-sm border border-gray-200 dark:border-slate-700"
-    >
+    <Card className="shadow-sm border border-gray-200 dark:border-slate-700">
       <CardHeader className="flex flex-row items-center mb-12">
         <CardTitle className="flex-1 text-xl">
           {props.selectedTokenId === "all"
@@ -154,90 +153,82 @@ export default function TokenEcosystem(props: TokenEcosystemProps) {
       </CardHeader>
       <CardContent className="space-y-6">
         <div className="relative">
-          <ResponsiveContainer width="100%" height={420}>
-            {loading ? (
-              <div className="flex justify-center items-center h-full">
-                <Spinner />
-              </div>
-            ) : (
-              <AreaChart data={chartData}>
-                <defs>
-                  {activeTokenIds.map((id, index) => (
-                    <linearGradient
-                      key={id}
-                      id={`${id}-gradient`}
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="1"
-                    >
-                      <stop
-                        offset="5%"
-                        stopColor={`hsl(var(--chart-${(index % 6) + 1}))`}
-                        stopOpacity={0.6}
-                      />
-                      <stop
-                        offset="95%"
-                        stopColor={`hsl(var(--chart-${(index % 6) + 1}))`}
-                        stopOpacity={0.05}
-                      />
-                    </linearGradient>
-                  ))}
-                </defs>
-
-                <CartesianGrid strokeDasharray="3 3" strokeOpacity={0.1} />
-                <XAxis dataKey="Date" tick={{ fontSize, fill: "#94a3b8" }} />
-                <YAxis
-                  tick={{ fontSize, fill: "#94a3b8" }}
-                  tickFormatter={(value: number) => {
-                    // Use billions format for Namada, thousands for others
-                    if (props.selectedTokenId === "Namada") {
-                      return `${(value / 1e9).toFixed(1)}B`;
-                    }
-                    return `${(value / 1e3).toFixed(0)}k`;
-                  }}
-                />
-                <Tooltip
-                  wrapperStyle={{
-                    backgroundColor: "hsl(var(--chart-1)",
-                  }}
-                />
-                <Legend
-                  verticalAlign="bottom"
-                  align="center"
-                  content={() => (
-                    <div className="pt-5 flex justify-center gap-6 text-sm mt-2 text-slate-600 dark:text-slate-300">
-                      {activeTokenIds.map((id, index) => (
-                        <div key={id} className="flex items-center gap-2">
-                          <span
-                            className="w-3 h-3 inline-block rounded-sm"
-                            style={{
-                              background: `hsl(var(--chart-${
-                                (index % 6) + 1
-                              }))`,
-                            }}
-                          />
-                          <p>{id}</p>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                />
+          <ChartContainer ref={props.divChartRef} loading={loading}>
+            <AreaChart data={chartData} width={100} height={100}>
+              <defs>
                 {activeTokenIds.map((id, index) => (
-                  <Area
+                  <linearGradient
                     key={id}
-                    type="monotone"
-                    dataKey={id}
-                    stroke={`hsl(var(--chart-${(index % 6) + 1}))`}
-                    fill={`url(#${id}-gradient)`}
-                    name={id}
-                    strokeWidth={2}
-                    animationDuration={600}
-                  />
+                    id={`${id}-gradient`}
+                    x1="0"
+                    y1="0"
+                    x2="0"
+                    y2="1"
+                  >
+                    <stop
+                      offset="5%"
+                      stopColor={`hsl(var(--chart-${(index % 6) + 1}))`}
+                      stopOpacity={0.6}
+                    />
+                    <stop
+                      offset="95%"
+                      stopColor={`hsl(var(--chart-${(index % 6) + 1}))`}
+                      stopOpacity={0.05}
+                    />
+                  </linearGradient>
                 ))}
-              </AreaChart>
-            )}
-          </ResponsiveContainer>
+              </defs>
+
+              <CartesianGrid strokeDasharray="3 3" strokeOpacity={0.1} />
+              <XAxis dataKey="Date" tick={{ fontSize, fill: "#94a3b8" }} />
+              <YAxis
+                tick={{ fontSize, fill: "#94a3b8" }}
+                tickFormatter={(value: number) => {
+                  // Use billions format for Namada, thousands for others
+                  if (props.selectedTokenId === "Namada") {
+                    return `${(value / 1e9).toFixed(1)}B`;
+                  }
+                  return `${(value / 1e3).toFixed(0)}k`;
+                }}
+              />
+              <Tooltip
+                wrapperStyle={{
+                  backgroundColor: "hsl(var(--chart-1)",
+                }}
+              />
+              <Legend
+                verticalAlign="bottom"
+                align="center"
+                content={() => (
+                  <div className="pt-5 flex justify-center gap-6 text-sm mt-2 text-slate-600 dark:text-slate-300">
+                    {activeTokenIds.map((id, index) => (
+                      <div key={id} className="flex items-center gap-2">
+                        <span
+                          className="w-3 h-3 inline-block rounded-sm"
+                          style={{
+                            background: `hsl(var(--chart-${(index % 6) + 1}))`,
+                          }}
+                        />
+                        <p>{id}</p>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              />
+              {activeTokenIds.map((id, index) => (
+                <Area
+                  key={id}
+                  type="monotone"
+                  dataKey={id}
+                  stroke={`hsl(var(--chart-${(index % 6) + 1}))`}
+                  fill={`url(#${id}-gradient)`}
+                  name={id}
+                  strokeWidth={2}
+                  animationDuration={600}
+                />
+              ))}
+            </AreaChart>
+          </ChartContainer>
         </div>
       </CardContent>
     </Card>

src/components/hooks/useExportDashboardAsPNG.tsx

@@ -1,5 +1,6 @@
 import html2canvas from "html2canvas";
 import { useRef } from "react";
+import domToImage from "dom-to-image";
 
 export const PoolsType = {
   default: "default",
@@ -14,16 +15,12 @@ const useExportDashboardAsPNG = () => {
 
   const handleSaveToPng = async (label: string) => {
     try {
-      const canvas = await html2canvas(divChartRef.current!, {
-        scale: 3, // renders at 3x resolution
-        useCORS: true,
-      });
-
+      const blob = await domToImage.toBlob(divChartRef.current!);
+      if (!blob) throw new Error("Export failed: empty blob");
       const link = document.createElement("a");
-      link.href = canvas.toDataURL("image/png");
+      link.href = URL.createObjectURL(blob);
       link.download = `${label}-chart.png`;
       link.click();
-
     } catch (err) {
       alert("Error exporting chart!");
       console.error("Error saving chart: ", err);