Fixed #2758 (#2914)

* Fixed #2758

* Prettified Code!

* Merge branch 'develop' of https://github.com/bennett1412/owncast into issue-#2758-fix

* Fixed prop value in chart component

* Prettified Code!

* Updated chart download button position

* Fixed linting errors

---------

Co-authored-by: bennett1412 <bennett1412@users.noreply.github.com>

web/components/admin/Chart.tsx

@@ -1,6 +1,7 @@
 import format from 'date-fns/format';
-import { FC } from 'react';
+import { FC, useRef } from 'react';
 
+import { DownloadOutlined } from '@ant-design/icons';
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -14,6 +15,7 @@ import {
   ChartOptions,
 } from 'chart.js';
 import { Line } from 'react-chartjs-2';
+import { Button } from 'antd';
 
 ChartJS.register(
   CategoryScale,
@@ -68,6 +70,16 @@ export const Chart: FC<ChartProps> = ({
 }) => {
   const renderData = [];
 
+  const chartRef = useRef(null);
+  const downloadChart = () => {
+    if (chartRef.current) {
+      const link = document.createElement('a');
+      link.download = 'chart.png';
+      link.href = chartRef.current.canvas.toDataURL();
+      link.click();
+    }
+  };
+
   if (data && data.length > 0) {
     renderData.push({
       id: title,
@@ -115,10 +127,18 @@ export const Chart: FC<ChartProps> = ({
   return (
     <div className="line-chart-container">
       <Line
+        ref={chartRef}
         data={{ datasets: renderData }}
         options={options as ChartOptions<'line'>}
         height="70vh"
       />
+      <Button
+        size="small"
+        onClick={downloadChart}
+        type="ghost"
+        icon={<DownloadOutlined />}
+        className="download-btn"
+      />
     </div>
   );
 };

web/styles/ant-overrides.scss

@@ -237,3 +237,12 @@ th {
 .ant-menu-light .ant-menu-item:hover {
   color: var(--theme-color-palette-12);
 }
+
+.line-chart-container{
+  position: relative;
+  .download-btn{
+    position:absolute;
+    top: 0.3rem;
+    right: 0.35rem;
+  }
+}