Feature/mobile graph (#1160)

* chore(docker): improve repeat contributions workflow

* This change adds two new commands to gracefully stop and remove the Postgres and Clickhouse docker containers. To do so, it also gives them a recognizable name.

* Additionally, the Postgres container is updated to use a named volume for its data. This lower friction for repeat contributions where one would otherwise sign up and activate their accounts again and again each time.

* Update the ticks on the X and Y axis of the main chart to be responsive

* Update the changelog for the graph responsiveness fix

CHANGELOG.md

@@ -22,6 +22,7 @@ All notable changes to this project will be documented in this file.
 - Sites listing page will paginate if the user has a lot of sites plausible/analytics#994
 - Crash when changing theme on a loaded dashboard plausible/analytics#1123
 - UI fix for details button overlapping content on mobile plausible/analytics#1114
+- UI fix for the main graph on mobile overlapping its tick items on both axis
 
 ### Removed
 - Removes AppSignal monitoring package

assets/js/dashboard/stats/visitor-graph.js

@@ -100,6 +100,7 @@ class LineGraph extends React.Component {
   constructor(props) {
     super(props);
     this.regenerateChart = this.regenerateChart.bind(this);
+    this.updateWindowDimensions =  this.updateWindowDimensions.bind(this);
   }
 
   regenerateChart() {
@@ -157,6 +158,7 @@ class LineGraph extends React.Component {
           },
         },
         responsive: true,
+        onResize: this.updateWindowDimensions,
         elements: {line: {tension: 0}, point: {radius: 0}},
         onClick: this.onClick.bind(this),
         scales: {
@@ -208,6 +210,16 @@ class LineGraph extends React.Component {
     }
   }
 
+  /**
+   * The current ticks' limits are set to treat iPad (regular/Mini/Pro) as a regular screen.
+   * @param {*} chart - The chart instance.
+   * @param {*} dimensions - An object containing the new dimensions *of the chart.*
+   */
+  updateWindowDimensions(chart, dimensions) {
+    chart.options.scales.x.ticks.maxTicksLimit = dimensions.width < 720 ? 5 : 8
+    chart.options.scales.y.ticks.maxTicksLimit = dimensions.height < 233 ? 3 : 8
+  }
+
   onClick(e) {
     const element = this.chart.getElementsAtEventForMode(e, 'index', {intersect: false})[0]
     const date = this.chart.data.labels[element.index]