From 88bf8264978d5d93bf24615b61c6f299ca044e85 Mon Sep 17 00:00:00 2001
From: David Wheatley <david@davwheat.dev>
Date: Mon, 31 Oct 2022 00:34:56 +0100
Subject: [PATCH] feat: add statistics chart export button

---
 .../js/src/admin/components/StatisticsWidget.tsx    | 12 ++++++++++++
 extensions/statistics/less/admin.less               | 13 ++++++++++---
 extensions/statistics/locale/en.yml                 |  1 +
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/extensions/statistics/js/src/admin/components/StatisticsWidget.tsx b/extensions/statistics/js/src/admin/components/StatisticsWidget.tsx
index 6e4225a3ab..6fecf522cc 100644
--- a/extensions/statistics/js/src/admin/components/StatisticsWidget.tsx
+++ b/extensions/statistics/js/src/admin/components/StatisticsWidget.tsx
@@ -318,6 +318,18 @@ export default class StatisticsWidget extends DashboardWidget {
         </>
 
         {this.noData && <Placeholder text={app.translator.trans(`flarum-statistics.admin.statistics.no_data`)} />}
+
+        {!this.noData && !!this.chart && (
+          <Button
+            className="StatisticsWidget-chartExport Button"
+            icon="fas fa-file-export"
+            onclick={() => {
+              this.chart.export();
+            }}
+          >
+            {app.translator.trans('flarum-statistics.admin.statistics.export_chart_button')}
+          </Button>
+        )}
       </div>
     );
   }
diff --git a/extensions/statistics/less/admin.less b/extensions/statistics/less/admin.less
index ffbfffc696..8d9797896d 100644
--- a/extensions/statistics/less/admin.less
+++ b/extensions/statistics/less/admin.less
@@ -109,6 +109,13 @@
   .Placeholder {
     padding-bottom: 32px;
   }
+
+  &-chartExport {
+    position: relative;
+    z-index: 1;
+    margin: 16px;
+    margin-top: -32px;
+  }
 }
 
 /*!
@@ -119,9 +126,9 @@
   position: relative; /* for absolutely positioned tooltip */
 
   /* https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ */
-  font-family: -apple-system, BlinkMacSystemFont,
-  'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
-  'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
 
   .axis,
   .chart-label {
diff --git a/extensions/statistics/locale/en.yml b/extensions/statistics/locale/en.yml
index a0c7218603..65269f7742 100644
--- a/extensions/statistics/locale/en.yml
+++ b/extensions/statistics/locale/en.yml
@@ -20,6 +20,7 @@ flarum-statistics:
     # These translations are used in the Statistics dashboard widget.
     statistics:
       discussions_heading: => core.ref.discussions
+      export_chart_button: Export chart to SVG
       last_12_months_label: Last 12 months
       last_28_days_label: Last 28 days
       last_7_days_label: Last 7 days