Show peak value in the force curve

Add the capability of showing the peak value for the handle force curve

app/client/components/DashboardForceCurve.js

@@ -7,7 +7,8 @@
 
 import { AppElement, html, css } from './AppElement.js'
 import { customElement, property, state } from 'lit/decorators.js'
-import Chart from 'chart.js/auto'
+import ChartDataLabels from 'chartjs-plugin-datalabels'
+import { Chart, Filler, Legend, LinearScale, LineController, LineElement, PointElement } from 'chart.js/auto'
 
 @customElement('dashboard-force-curve')
 export class DashboardForceCurve extends AppElement {
@@ -17,6 +18,11 @@ export class DashboardForceCurve extends AppElement {
     }
   `
 
+  constructor () {
+    super()
+    Chart.register(ChartDataLabels, Legend, Filler, LinearScale, LineController, PointElement, LineElement)
+  }
+
   @property({ type: Object })
     value = []
 
@@ -33,7 +39,7 @@ export class DashboardForceCurve extends AppElement {
           datasets: [
             {
               fill: true,
-              data: this.value?.map((data, index) => ({ y: data, x: index })),
+              data: this.value?.map((data, index) => ({ y: parseInt(data, 10), x: index })),
               pointRadius: 1,
               borderColor: 'rgb(255,255,255)',
               backgroundColor: 'rgb(220,220,220)'
@@ -44,6 +50,18 @@ export class DashboardForceCurve extends AppElement {
           responsive: true,
           maintainAspectRatio: false,
           plugins: {
+            datalabels: {
+              anchor: 'center',
+              align: 'top',
+              formatter: (value) => `Peak: ${Math.round(value.y)}`,
+              display: (ctx) => Math.max(
+                ...ctx.dataset.data.map((point) => point.y)
+              ) === ctx.dataset.data[ctx.dataIndex].y,
+              font: {
+                size: 16
+              },
+              color: 'rgb(255,255,255)'
+            },
             legend: {
               title: {
                 display: true,
@@ -95,7 +113,7 @@ export class DashboardForceCurve extends AppElement {
 
   render () {
     if (this._chart?.data) {
-      this._chart.data.datasets[0].data = this.value?.map((data, index) => ({ y: data, x: index }))
+      this._chart.data.datasets[0].data = this.value?.map((data, index) => ({ y: parseInt(data, 10), x: index }))
       this.forceCurve = this.value
       this._chart.update()
     }

package.json

@@ -33,6 +33,8 @@
   "dependencies": {
     "@abandonware/bleno": "0.5.1-4",
     "@abandonware/noble": "1.9.2-15",
+    "chart.js": "^4.2.1",
+    "chartjs-plugin-datalabels": "^2.2.0",
     "finalhandler": "1.1.2",
     "form-data": "4.0.0",
     "incyclist-ant-plus": "^0.1.15",
@@ -42,8 +44,7 @@
     "pigpio": "3.3.1",
     "serve-static": "1.14.2",
     "ws": "8.5.0",
-    "xml2js": "0.4.23",
-    "chart.js": "^4.2.1"
+    "xml2js": "0.4.23"
   },
   "//fix1Comment": "version 0.5.3-8 currently does not work with bleno",
   "optionalDependencies": {