feat: add statistics chart export button (#3662)

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>
     );
   }

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,
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-  'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-  'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    sans-serif;
 
   .axis,
   .chart-label {

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