fix(ui): Modernize response time chart (#1373 )

feat(condition): Format certificate and domain expiration durations in human-readable format (#1370 )
fix(external-endpoint): check per-endpoint maintenance windows (#1369 )
2026-08-24 16:16:04 +00:00 · 2025-10-29 14:15:59 -04:00 · 2025-10-27 16:30:12 -04:00 · 2025-10-27 12:21:20 -04:00 · 2025-10-25 12:45:15 -04:00 · 2025-10-22 13:13:53 -04:00
26 changed files with 1229 additions and 725 deletions
@@ -16,4 +16,10 @@ endpoints:
    url: https://api.github.com/healthz
    interval: 5m
    conditions:
-      - "[STATUS] == 200"
+      - "[STATUS] == 200"
+
+  - name: check-domain-expiration
+    url: "https://example.org/"
+    interval: 1h
+    conditions:
+      - "[DOMAIN_EXPIRATION] > 720h"
@@ -1,4 +1,3 @@
-version: "3.9"
 services:
  gatus:
    container_name: gatus
@@ -13,7 +12,7 @@ services:

  prometheus:
    container_name: prometheus
-    image: prom/prometheus:v2.14.0
+    image: prom/prometheus:v3.5.0
    restart: always
    command: --config.file=/etc/prometheus/prometheus.yml
    ports:
@@ -25,7 +24,7 @@ services:

  grafana:
    container_name: grafana
-    image: grafana/grafana:6.4.4
+    image: grafana/grafana:12.1.0
    restart: always
    environment:
      GF_SECURITY_ADMIN_PASSWORD: secret
@@ -19,7 +19,7 @@
  "editable": true,
  "fiscalYearStartMonth": 0,
  "graphTooltip": 0,
-  "id": 566,
+  "id": 41,
  "links": [],
  "panels": [
    {
@@ -39,7 +39,8 @@
            "mode": "absolute",
            "steps": [
              {
-                "color": "green"
+                "color": "green",
+                "value": 0
              },
              {
                "color": "yellow",
@@ -79,7 +80,7 @@
        "textMode": "auto",
        "wideLayout": true
      },
-      "pluginVersion": "12.0.2",
+      "pluginVersion": "12.1.0",
      "targets": [
        {
          "datasource": {
@@ -122,7 +123,8 @@
            "mode": "absolute",
            "steps": [
              {
-                "color": "red"
+                "color": "red",
+                "value": 0
              },
              {
                "color": "yellow",
@@ -162,7 +164,7 @@
        "textMode": "auto",
        "wideLayout": true
      },
-      "pluginVersion": "12.0.2",
+      "pluginVersion": "12.1.0",
      "targets": [
        {
          "datasource": {
@@ -193,7 +195,8 @@
            "mode": "absolute",
            "steps": [
              {
-                "color": "green"
+                "color": "green",
+                "value": 0
              }
            ]
          },
@@ -225,7 +228,7 @@
        "textMode": "auto",
        "wideLayout": true
      },
-      "pluginVersion": "12.0.2",
+      "pluginVersion": "12.1.0",
      "targets": [
        {
          "datasource": {
@@ -292,7 +295,7 @@
          "sort": "none"
        }
      },
-      "pluginVersion": "12.0.2",
+      "pluginVersion": "12.1.0",
      "targets": [
        {
          "datasource": {
@@ -321,7 +324,7 @@
        "type": "prometheus",
        "uid": "$datasource"
      },
-      "description": "SSL certificate expiration times for all services",
+      "description": "Domain expiration times for all domains",
      "fieldConfig": {
        "defaults": {
          "color": {
@@ -339,7 +342,8 @@
            "mode": "absolute",
            "steps": [
              {
-                "color": "red"
+                "color": "red",
+                "value": 0
              },
              {
                "color": "#EAB839",
@@ -395,7 +399,137 @@
        "showHeader": true,
        "sortBy": []
      },
-      "pluginVersion": "12.0.2",
+      "pluginVersion": "12.1.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "$datasource"
+          },
+          "editorMode": "code",
+          "expr": "gatus_results_domain_expiration_seconds",
+          "format": "table",
+          "instant": true,
+          "legendFormat": "__auto",
+          "refId": "A"
+        }
+      ],
+      "title": "Domain Expiration",
+      "transformations": [
+        {
+          "id": "organize",
+          "options": {
+            "excludeByName": {
+              "Time": true,
+              "Value": false,
+              "__name__": true,
+              "app_kubernetes_io_instance": true,
+              "app_kubernetes_io_managed_by": true,
+              "app_kubernetes_io_name": true,
+              "app_kubernetes_io_service": true,
+              "helm_sh_chart": true,
+              "instance": true,
+              "job": true,
+              "key": true,
+              "type": true
+            },
+            "includeByName": {},
+            "indexByName": {
+              "Value": 2,
+              "group": 0,
+              "name": 1
+            },
+            "renameByName": {
+              "Value": "Time Until Expiry",
+              "group": "Group",
+              "name": "Service"
+            }
+          }
+        }
+      ],
+      "type": "table"
+    },
+    {
+      "datasource": {
+        "type": "prometheus",
+        "uid": "$datasource"
+      },
+      "description": "SSL certificate expiration times for all services",
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "thresholds"
+          },
+          "custom": {
+            "align": "auto",
+            "cellOptions": {
+              "type": "auto"
+            },
+            "inspect": false
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "red",
+                "value": 0
+              },
+              {
+                "color": "#EAB839",
+                "value": 172800
+              },
+              {
+                "color": "green",
+                "value": 604800
+              }
+            ]
+          },
+          "unit": "dtdurations"
+        },
+        "overrides": [
+          {
+            "matcher": {
+              "id": "byName",
+              "options": "Time Until Expiry"
+            },
+            "properties": [
+              {
+                "id": "custom.cellOptions",
+                "value": {
+                  "applyToRow": false,
+                  "type": "color-background"
+                }
+              },
+              {
+                "id": "unit",
+                "value": "s"
+              }
+            ]
+          }
+        ]
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 12,
+        "y": 8
+      },
+      "id": 11,
+      "options": {
+        "cellHeight": "sm",
+        "footer": {
+          "countRows": false,
+          "fields": "",
+          "reducer": [
+            "sum"
+          ],
+          "show": false
+        },
+        "showHeader": true,
+        "sortBy": []
+      },
+      "pluginVersion": "12.1.0",
      "targets": [
        {
          "datasource": {
@@ -444,6 +578,113 @@
      ],
      "type": "table"
    },
+    {
+      "datasource": {
+        "type": "prometheus",
+        "uid": "$datasource"
+      },
+      "description": "Current status distribution across all services",
+      "fieldConfig": {
+        "defaults": {
+          "color": {
+            "mode": "palette-classic"
+          },
+          "custom": {
+            "axisBorderShow": false,
+            "axisCenteredZero": false,
+            "axisColorMode": "text",
+            "axisLabel": "",
+            "axisPlacement": "auto",
+            "barAlignment": 0,
+            "barWidthFactor": 0.6,
+            "drawStyle": "line",
+            "fillOpacity": 10,
+            "gradientMode": "none",
+            "hideFrom": {
+              "legend": false,
+              "tooltip": false,
+              "vis": false,
+              "viz": false
+            },
+            "insertNulls": false,
+            "lineInterpolation": "linear",
+            "lineWidth": 1,
+            "pointSize": 5,
+            "scaleDistribution": {
+              "type": "linear"
+            },
+            "showPoints": "never",
+            "spanNulls": false,
+            "stacking": {
+              "group": "A",
+              "mode": "none"
+            },
+            "thresholdsStyle": {
+              "mode": "off"
+            }
+          },
+          "mappings": [],
+          "thresholds": {
+            "mode": "absolute",
+            "steps": [
+              {
+                "color": "green",
+                "value": 0
+              },
+              {
+                "color": "red",
+                "value": 80
+              }
+            ]
+          },
+          "unit": "short"
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 0,
+        "y": 16
+      },
+      "id": 5,
+      "options": {
+        "legend": {
+          "calcs": [],
+          "displayMode": "list",
+          "placement": "bottom",
+          "showLegend": true
+        },
+        "tooltip": {
+          "hideZeros": false,
+          "mode": "single",
+          "sort": "none"
+        }
+      },
+      "pluginVersion": "12.1.0",
+      "targets": [
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "$datasource"
+          },
+          "expr": "sum(gatus_results_endpoint_success)",
+          "legendFormat": "Services UP",
+          "refId": "A"
+        },
+        {
+          "datasource": {
+            "type": "prometheus",
+            "uid": "$datasource"
+          },
+          "expr": "sum(1 - gatus_results_endpoint_success)",
+          "legendFormat": "Services DOWN",
+          "refId": "B"
+        }
+      ],
+      "title": "Service Status Distribution",
+      "type": "timeseries"
+    },
    {
      "datasource": {
        "type": "prometheus",
@@ -483,7 +724,8 @@
            "mode": "absolute",
            "steps": [
              {
-                "color": "red"
+                "color": "red",
+                "value": 0
              },
              {
                "color": "green",
@@ -525,7 +767,7 @@
        "h": 8,
        "w": 12,
        "x": 12,
-        "y": 8
+        "y": 16
      },
      "id": 2,
      "options": {
@@ -546,7 +788,7 @@
          }
        ]
      },
-      "pluginVersion": "12.0.2",
+      "pluginVersion": "12.1.0",
      "targets": [
        {
          "datasource": {
@@ -689,7 +931,8 @@
            "mode": "absolute",
            "steps": [
              {
-                "color": "green"
+                "color": "green",
+                "value": 0
              },
              {
                "color": "red",
@@ -703,9 +946,9 @@
      },
      "gridPos": {
        "h": 8,
-        "w": 12,
+        "w": 24,
        "x": 0,
-        "y": 16
+        "y": 24
      },
      "id": 4,
      "options": {
@@ -721,7 +964,7 @@
          "sort": "none"
        }
      },
-      "pluginVersion": "12.0.2",
+      "pluginVersion": "12.1.0",
      "targets": [
        {
          "datasource": {
@@ -735,112 +978,6 @@
      ],
      "title": "Response Times",
      "type": "timeseries"
-    },
-    {
-      "datasource": {
-        "type": "prometheus",
-        "uid": "$datasource"
-      },
-      "description": "Current status distribution across all services",
-      "fieldConfig": {
-        "defaults": {
-          "color": {
-            "mode": "palette-classic"
-          },
-          "custom": {
-            "axisBorderShow": false,
-            "axisCenteredZero": false,
-            "axisColorMode": "text",
-            "axisLabel": "",
-            "axisPlacement": "auto",
-            "barAlignment": 0,
-            "barWidthFactor": 0.6,
-            "drawStyle": "line",
-            "fillOpacity": 10,
-            "gradientMode": "none",
-            "hideFrom": {
-              "legend": false,
-              "tooltip": false,
-              "vis": false,
-              "viz": false
-            },
-            "insertNulls": false,
-            "lineInterpolation": "linear",
-            "lineWidth": 1,
-            "pointSize": 5,
-            "scaleDistribution": {
-              "type": "linear"
-            },
-            "showPoints": "never",
-            "spanNulls": false,
-            "stacking": {
-              "group": "A",
-              "mode": "none"
-            },
-            "thresholdsStyle": {
-              "mode": "off"
-            }
-          },
-          "mappings": [],
-          "thresholds": {
-            "mode": "absolute",
-            "steps": [
-              {
-                "color": "green"
-              },
-              {
-                "color": "red",
-                "value": 80
-              }
-            ]
-          },
-          "unit": "short"
-        },
-        "overrides": []
-      },
-      "gridPos": {
-        "h": 8,
-        "w": 12,
-        "x": 12,
-        "y": 16
-      },
-      "id": 5,
-      "options": {
-        "legend": {
-          "calcs": [],
-          "displayMode": "list",
-          "placement": "bottom",
-          "showLegend": true
-        },
-        "tooltip": {
-          "hideZeros": false,
-          "mode": "single",
-          "sort": "none"
-        }
-      },
-      "pluginVersion": "12.0.2",
-      "targets": [
-        {
-          "datasource": {
-            "type": "prometheus",
-            "uid": "$datasource"
-          },
-          "expr": "sum(gatus_results_endpoint_success)",
-          "legendFormat": "Services UP",
-          "refId": "A"
-        },
-        {
-          "datasource": {
-            "type": "prometheus",
-            "uid": "$datasource"
-          },
-          "expr": "sum(1 - gatus_results_endpoint_success)",
-          "legendFormat": "Services DOWN",
-          "refId": "B"
-        }
-      ],
-      "title": "Service Status Distribution",
-      "type": "timeseries"
    }
  ],
  "preload": false,
@@ -855,8 +992,8 @@
    "list": [
      {
        "current": {
-          "text": "myprom",
-          "value": "PA04845DA3A4B088E"
+          "text": "prometheus",
+          "value": "cedv077q7bbwgd"
        },
        "description": "Select your Prometheus datasource",
        "includeAll": false,
@@ -877,6 +1014,6 @@
  "timepicker": {},
  "timezone": "",
  "title": "Gatus - Service Monitoring Dashboard",
-  "uid": "gatus-monitoring2",
-  "version": 10
-}
+  "uid": "4ea25b6f-2edc-416c-8282-a1164f95537a",
+  "version": 1
+}
@@ -50,6 +50,7 @@ Have any feedback or questions? [Create a discussion](https://github.com/TwiN/ga
  - [Conditions](#conditions)
    - [Placeholders](#placeholders)
    - [Functions](#functions)
+  - [Announcements](#announcements)
  - [Storage](#storage)
  - [Client configuration](#client-configuration)
  - [Tunneling](#tunneling)
@@ -95,7 +96,6 @@ Have any feedback or questions? [Create a discussion](https://github.com/TwiN/ga
    - [Configuring Zulip alerts](#configuring-zulip-alerts)
    - [Configuring custom alerts](#configuring-custom-alerts)
    - [Setting a default alert](#setting-a-default-alert)
-  - [Announcements](#announcements)
  - [Maintenance](#maintenance)
  - [Security](#security)
    - [Basic Authentication](#basic-authentication)
@@ -309,6 +309,7 @@ You can then configure alerts to be triggered when an endpoint is unhealthy once
 | `endpoints[].ui.hide-hostname`                  | Whether to hide the hostname from the results.                                                                                              | `false`                    |
 | `endpoints[].ui.hide-port`                      | Whether to hide the port from the results.                                                                                                  | `false`                    |
 | `endpoints[].ui.hide-url`                       | Whether to hide the URL from the results. Useful if the URL contains a token.                                                               | `false`                    |
+| `endpoints[].ui.hide-errors`                    | Whether to hide errors from the results.                                                                                                    | `false`                    |
 | `endpoints[].ui.dont-resolve-failed-conditions` | Whether to resolve failed conditions for the UI.                                                                                            | `false`                    |
 | `endpoints[].ui.badge.response-time`            | List of response time thresholds. Each time a threshold is reached, the badge has a different color.                                        | `[50, 200, 300, 500, 750]` |
 | `endpoints[].extra-labels`                      | Extra labels to add to the metrics. Useful for grouping endpoints together.                                                                 | `{}`                       |
@@ -1300,7 +1301,7 @@ endpoints:
 ```


-#### Configuring ilert alerts
+#### Configuring Ilert alerts
 | Parameter                          | Description                                                                                | Default |
 |:-----------------------------------|:-------------------------------------------------------------------------------------------|:--------|
 | `alerting.ilert`                   | Configuration for alerts of type `ilert`                                                   | `{}`    |
@@ -1852,6 +1853,40 @@ endpoints:
 ```


+#### Configuring SendGrid alerts
+
+> ⚠️ **WARNING**: This alerting provider has not been tested yet. If you've tested it and confirmed that it works, please remove this warning and create a pull request, or comment on [#1223](https://github.com/TwiN/gatus/discussions/1223) with whether the provider works as intended. Thank you for your cooperation.
+
+| Parameter                             | Description                                                                                | Default       |
+|:--------------------------------------|:-------------------------------------------------------------------------------------------|:--------------|
+| `alerting.sendgrid`                   | Configuration for alerts of type `sendgrid`                                                | `{}`          |
+| `alerting.sendgrid.api-key`           | SendGrid API key                                                                           | Required `""` |
+| `alerting.sendgrid.from`              | Email address to send from                                                                 | Required `""` |
+| `alerting.sendgrid.to`                | Email address(es) to send alerts to (comma-separated for multiple recipients)              | Required `""` |
+| `alerting.sendgrid.default-alert`     | Default alert configuration. <br />See [Setting a default alert](#setting-a-default-alert) | N/A           |
+| `alerting.sendgrid.overrides`         | List of overrides that may be prioritized over the default configuration                   | `[]`          |
+| `alerting.sendgrid.overrides[].group` | Endpoint group for which the configuration will be overridden by this configuration        | `""`          |
+| `alerting.sendgrid.overrides[].*`     | See `alerting.sendgrid.*` parameters                                                       | `{}`          |
+
+```yaml
+alerting:
+  sendgrid:
+    api-key: "SG.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+    from: "alerts@example.com"
+    to: "admin@example.com,ops@example.com"
+
+endpoints:
+  - name: website
+    url: "https://twin.sh/health"
+    interval: 5m
+    conditions:
+      - "[STATUS] == 200"
+    alerts:
+      - type: sendgrid
+        send-on-resolved: true
+```
+
+
 #### Configuring Signal alerts

 > ⚠️ **WARNING**: This alerting provider has not been tested yet. If you've tested it and confirmed that it works, please remove this warning and create a pull request, or comment on [#1223](https://github.com/TwiN/gatus/discussions/1223) with whether the provider works as intended. Thank you for your cooperation.
@@ -1918,40 +1953,6 @@ endpoints:
 ```


-#### Configuring SendGrid alerts
-
-> ⚠️ **WARNING**: This alerting provider has not been tested yet. If you've tested it and confirmed that it works, please remove this warning and create a pull request, or comment on [#1223](https://github.com/TwiN/gatus/discussions/1223) with whether the provider works as intended. Thank you for your cooperation.
-
-| Parameter                             | Description                                                                                | Default       |
-|:--------------------------------------|:-------------------------------------------------------------------------------------------|:--------------|
-| `alerting.sendgrid`                   | Configuration for alerts of type `sendgrid`                                                | `{}`          |
-| `alerting.sendgrid.api-key`           | SendGrid API key                                                                           | Required `""` |
-| `alerting.sendgrid.from`              | Email address to send from                                                                 | Required `""` |
-| `alerting.sendgrid.to`                | Email address(es) to send alerts to (comma-separated for multiple recipients)              | Required `""` |
-| `alerting.sendgrid.default-alert`     | Default alert configuration. <br />See [Setting a default alert](#setting-a-default-alert) | N/A           |
-| `alerting.sendgrid.overrides`         | List of overrides that may be prioritized over the default configuration                   | `[]`          |
-| `alerting.sendgrid.overrides[].group` | Endpoint group for which the configuration will be overridden by this configuration        | `""`          |
-| `alerting.sendgrid.overrides[].*`     | See `alerting.sendgrid.*` parameters                                                       | `{}`          |
-
-```yaml
-alerting:
-  sendgrid:
-    api-key: "SG.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
-    from: "alerts@example.com"
-    to: "admin@example.com,ops@example.com"
-
-endpoints:
-  - name: website
-    url: "https://twin.sh/health"
-    interval: 5m
-    conditions:
-      - "[STATUS] == 200"
-    alerts:
-      - type: sendgrid
-        send-on-resolved: true
-```
-
-
 #### Configuring Slack alerts
 | Parameter                          | Description                                                                                | Default                             |
 |:-----------------------------------|:-------------------------------------------------------------------------------------------|:------------------------------------|
@@ -2675,6 +2676,7 @@ endpoint on the same port your application is configured to run on (`web.port`).
 | gatus_results_connected_total                | counter | Total number of results in which a connection was successfully established | key, group, name, type          | All                     |
 | gatus_results_duration_seconds               | gauge   | Duration of the request in seconds                                         | key, group, name, type          | All                     |
 | gatus_results_certificate_expiration_seconds | gauge   | Number of seconds until the certificate expires                            | key, group, name, type          | HTTP, STARTTLS          |
+| gatus_results_domain_expiration_seconds      | gauge   | Number of seconds until the domains expires                                | key, group, name, type          | HTTP, STARTTLS          |
 | gatus_results_endpoint_success               | gauge   | Displays whether or not the endpoint was a success (0 failure, 1 success)  | key, group, name, type          | All                     |

 See [examples/docker-compose-grafana-prometheus](.examples/docker-compose-grafana-prometheus) for further documentation as well as an example.
@@ -84,6 +84,7 @@ func (a *API) createRouter(cfg *config.Config) *fiber.App {
 	unprotectedAPIRouter.Get("/v1/endpoints/:key/response-times/:duration", ResponseTimeRaw)
 	unprotectedAPIRouter.Get("/v1/endpoints/:key/response-times/:duration/badge.svg", ResponseTimeBadge(cfg))
 	unprotectedAPIRouter.Get("/v1/endpoints/:key/response-times/:duration/chart.svg", ResponseTimeChart)
+	unprotectedAPIRouter.Get("/v1/endpoints/:key/response-times/:duration/history", ResponseTimeHistory)
 	// This endpoint requires authz with bearer token, so technically it is protected
 	unprotectedAPIRouter.Post("/v1/endpoints/:key/external", CreateExternalEndpointResult(cfg))
 	// SPA
@@ -126,3 +126,63 @@ func ResponseTimeChart(c *fiber.Ctx) error {
 	}
 	return nil
 }
+
+func ResponseTimeHistory(c *fiber.Ctx) error {
+	duration := c.Params("duration")
+	var from time.Time
+	switch duration {
+	case "30d":
+		from = time.Now().Truncate(time.Hour).Add(-30 * 24 * time.Hour)
+	case "7d":
+		from = time.Now().Truncate(time.Hour).Add(-7 * 24 * time.Hour)
+	case "24h":
+		from = time.Now().Truncate(time.Hour).Add(-24 * time.Hour)
+	default:
+		return c.Status(400).SendString("Durations supported: 30d, 7d, 24h")
+	}
+	endpointKey, err := url.QueryUnescape(c.Params("key"))
+	if err != nil {
+		return c.Status(400).SendString("invalid key encoding")
+	}
+	hourlyAverageResponseTime, err := store.Get().GetHourlyAverageResponseTimeByKey(endpointKey, from, time.Now())
+	if err != nil {
+		if errors.Is(err, common.ErrEndpointNotFound) {
+			return c.Status(404).SendString(err.Error())
+		}
+		if errors.Is(err, common.ErrInvalidTimeRange) {
+			return c.Status(400).SendString(err.Error())
+		}
+		return c.Status(500).SendString(err.Error())
+	}
+	if len(hourlyAverageResponseTime) == 0 {
+		return c.Status(200).JSON(map[string]interface{}{
+			"timestamps": []int64{},
+			"values":     []int{},
+		})
+	}
+	hourlyTimestamps := make([]int, 0, len(hourlyAverageResponseTime))
+	earliestTimestamp := int64(0)
+	for hourlyTimestamp := range hourlyAverageResponseTime {
+		hourlyTimestamps = append(hourlyTimestamps, int(hourlyTimestamp))
+		if earliestTimestamp == 0 || hourlyTimestamp < earliestTimestamp {
+			earliestTimestamp = hourlyTimestamp
+		}
+	}
+	for earliestTimestamp > from.Unix() {
+		earliestTimestamp -= int64(time.Hour.Seconds())
+		hourlyTimestamps = append(hourlyTimestamps, int(earliestTimestamp))
+	}
+	sort.Ints(hourlyTimestamps)
+	timestamps := make([]int64, 0, len(hourlyTimestamps))
+	values := make([]int, 0, len(hourlyTimestamps))
+	for _, hourlyTimestamp := range hourlyTimestamps {
+		timestamp := int64(hourlyTimestamp)
+		averageResponseTime := hourlyAverageResponseTime[timestamp]
+		timestamps = append(timestamps, timestamp*1000)
+		values = append(values, averageResponseTime)
+	}
+	return c.Status(http.StatusOK).JSON(map[string]interface{}{
+		"timestamps": timestamps,
+		"values":     values,
+	})
+}
@@ -81,3 +81,69 @@ func TestResponseTimeChart(t *testing.T) {
 		})
 	}
 }
+
+func TestResponseTimeHistory(t *testing.T) {
+	defer store.Get().Clear()
+	defer cache.Clear()
+	cfg := &config.Config{
+		Metrics: true,
+		Endpoints: []*endpoint.Endpoint{
+			{
+				Name:  "frontend",
+				Group: "core",
+			},
+			{
+				Name:  "backend",
+				Group: "core",
+			},
+		},
+	}
+	watchdog.UpdateEndpointStatus(cfg.Endpoints[0], &endpoint.Result{Success: true, Duration: time.Millisecond, Timestamp: time.Now()})
+	watchdog.UpdateEndpointStatus(cfg.Endpoints[1], &endpoint.Result{Success: false, Duration: time.Second, Timestamp: time.Now()})
+	api := New(cfg)
+	router := api.Router()
+	type Scenario struct {
+		Name         string
+		Path         string
+		ExpectedCode int
+	}
+	scenarios := []Scenario{
+		{
+			Name:         "history-response-time-24h",
+			Path:         "/api/v1/endpoints/core_backend/response-times/24h/history",
+			ExpectedCode: http.StatusOK,
+		},
+		{
+			Name:         "history-response-time-7d",
+			Path:         "/api/v1/endpoints/core_frontend/response-times/7d/history",
+			ExpectedCode: http.StatusOK,
+		},
+		{
+			Name:         "history-response-time-30d",
+			Path:         "/api/v1/endpoints/core_frontend/response-times/30d/history",
+			ExpectedCode: http.StatusOK,
+		},
+		{
+			Name:         "history-response-time-with-invalid-duration",
+			Path:         "/api/v1/endpoints/core_backend/response-times/3d/history",
+			ExpectedCode: http.StatusBadRequest,
+		},
+		{
+			Name:         "history-response-time-for-invalid-key",
+			Path:         "/api/v1/endpoints/invalid_key/response-times/7d/history",
+			ExpectedCode: http.StatusNotFound,
+		},
+	}
+	for _, scenario := range scenarios {
+		t.Run(scenario.Name, func(t *testing.T) {
+			request := httptest.NewRequest("GET", scenario.Path, http.NoBody)
+			response, err := router.Test(request)
+			if err != nil {
+				t.Fatal(err)
+			}
+			if response.StatusCode != scenario.ExpectedCode {
+				t.Errorf("%s %s should have returned %d, but returned %d instead", request.Method, request.URL, scenario.ExpectedCode, response.StatusCode)
+			}
+		})
+	}
+}
@@ -68,11 +68,20 @@ func CreateExternalEndpointResult(cfg *config.Config) fiber.Handler {
 			return c.Status(500).SendString(err.Error())
 		}
 		logr.Infof("[api.CreateExternalEndpointResult] Successfully inserted result for external endpoint with key=%s and success=%s", c.Params("key"), success)
+		inEndpointMaintenanceWindow := false
+		for _, maintenanceWindow := range externalEndpoint.MaintenanceWindows {
+			if maintenanceWindow.IsUnderMaintenance() {
+				logr.Debug("[api.CreateExternalEndpointResult] Under endpoint maintenance window")
+				inEndpointMaintenanceWindow = true
+			}
+		}
 		// Check if an alert should be triggered or resolved
-		if !cfg.Maintenance.IsUnderMaintenance() {
+		if !cfg.Maintenance.IsUnderMaintenance() && !inEndpointMaintenanceWindow {
 			watchdog.HandleAlerting(convertedEndpoint, result, cfg.Alerting)
 			externalEndpoint.NumberOfSuccessesInARow = convertedEndpoint.NumberOfSuccessesInARow
 			externalEndpoint.NumberOfFailuresInARow = convertedEndpoint.NumberOfFailuresInARow
+		} else {
+			logr.Debug("[api.CreateExternalEndpointResult] Not handling alerting because currently in the maintenance window")
 		}
 		if cfg.Metrics {
 			metrics.PublishMetricsForEndpoint(convertedEndpoint, result, extraLabels)
@@ -131,8 +131,8 @@ func TestPing(t *testing.T) {

 func TestCanPerformStartTLS(t *testing.T) {
 	type args struct {
-		address  string
-		insecure bool
+		address     string
+		insecure    bool
 		dnsresolver string
 	}
 	tests := []struct {
@@ -168,7 +168,7 @@ func TestCanPerformStartTLS(t *testing.T) {
 		{
 			name: "dns resolver",
 			args: args{
-				address: "smtp.gmail.com:587",
+				address:     "smtp.gmail.com:587",
 				dnsresolver: "tcp://1.1.1.1:53",
 			},
 			wantConnected: true,
@@ -340,7 +340,7 @@ func TestQueryWebSocket(t *testing.T) {
 }

 func TestTlsRenegotiation(t *testing.T) {
-	tests := []struct {
+	scenarios := []struct {
 		name           string
 		cfg            TLSConfig
 		expectedConfig tls.RenegotiationSupport
@@ -371,12 +371,12 @@ func TestTlsRenegotiation(t *testing.T) {
 			expectedConfig: tls.RenegotiateNever,
 		},
 	}
-	for _, test := range tests {
-		t.Run(test.name, func(t *testing.T) {
+	for _, scenario := range scenarios {
+		t.Run(scenario.name, func(t *testing.T) {
 			tls := &tls.Config{}
-			tlsConfig := configureTLS(tls, test.cfg)
-			if tlsConfig.Renegotiation != test.expectedConfig {
-				t.Errorf("expected tls renegotiation to be %v, but got %v", test.expectedConfig, tls.Renegotiation)
+			tlsConfig := configureTLS(tls, scenario.cfg)
+			if tlsConfig.Renegotiation != scenario.expectedConfig {
+				t.Errorf("expected tls renegotiation to be %v, but got %v", scenario.expectedConfig, tls.Renegotiation)
 			}
 		})
 	}
@@ -513,14 +513,11 @@ func TestQueryDNS(t *testing.T) {

 func TestCheckSSHBanner(t *testing.T) {
 	cfg := &Config{Timeout: 3}
-
 	t.Run("no-auth-ssh", func(t *testing.T) {
 		connected, status, err := CheckSSHBanner("tty.sdf.org", cfg)
-
 		if err != nil {
 			t.Errorf("Expected: error != nil, got: %v ", err)
 		}
-
 		if connected == false {
 			t.Errorf("Expected: connected == true, got: %v", connected)
 		}
@@ -528,14 +525,11 @@ func TestCheckSSHBanner(t *testing.T) {
 			t.Errorf("Expected: 0, got: %v", status)
 		}
 	})
-
 	t.Run("invalid-address", func(t *testing.T) {
 		connected, status, err := CheckSSHBanner("idontplaytheodds.com", cfg)
-
 		if err == nil {
 			t.Errorf("Expected: error, got: %v ", err)
 		}
-
 		if connected != false {
 			t.Errorf("Expected: connected == false, got: %v", connected)
 		}
@@ -543,5 +537,4 @@ func TestCheckSSHBanner(t *testing.T) {
 			t.Errorf("Expected: 1, got: %v", status)
 		}
 	})
-
 }
@@ -209,7 +209,46 @@ func sanitizeAndResolveNumericalWithContext(list []string, result *Result, conte
 }

 func prettifyNumericalParameters(parameters []string, resolvedParameters []int64, operator string) string {
-	return prettify(parameters, []string{strconv.Itoa(int(resolvedParameters[0])), strconv.Itoa(int(resolvedParameters[1]))}, operator)
+	resolvedStrings := make([]string, 2)
+	for i := 0; i < 2; i++ {
+		// Check if the parameter is a certificate or domain expiration placeholder
+		if parameters[i] == CertificateExpirationPlaceholder || parameters[i] == DomainExpirationPlaceholder {
+			// Format as duration string (convert milliseconds back to duration)
+			duration := time.Duration(resolvedParameters[i]) * time.Millisecond
+			resolvedStrings[i] = formatDuration(duration)
+		} else if _, err := time.ParseDuration(parameters[i]); err == nil {
+			// If the original parameter was a duration string (like "48h"), format the resolved value
+			// as a duration string too so it matches and doesn't show in parentheses
+			duration := time.Duration(resolvedParameters[i]) * time.Millisecond
+			resolvedStrings[i] = formatDuration(duration)
+		} else {
+			// Format as integer
+			resolvedStrings[i] = strconv.Itoa(int(resolvedParameters[i]))
+		}
+	}
+	return prettify(parameters, resolvedStrings, operator)
+}
+
+// formatDuration formats a duration in a clean, human-readable way by removing unnecessary zero components.
+// For example: 336h0m0s becomes 336h, 1h30m0s becomes 1h30m, but 1h0m15s stays as 1h0m15s.
+// Truncates to whole seconds to avoid decimal values like 7353h5m54.67s.
+func formatDuration(d time.Duration) string {
+	// Truncate to whole seconds to avoid decimal seconds
+	d = d.Truncate(time.Second)
+	s := d.String()
+	// Special case: if duration is zero, return "0s"
+	if s == "0s" {
+		return "0s"
+	}
+	// Remove trailing "0s" if present
+	if strings.HasSuffix(s, "0s") {
+		s = strings.TrimSuffix(s, "0s")
+		// Remove trailing "0m" if present after removing "0s"
+		if strings.HasSuffix(s, "0m") {
+			s = strings.TrimSuffix(s, "0m")
+		}
+	}
+	return s
 }

 // prettify returns a string representation of a condition with its parameters resolved between parentheses
@@ -476,7 +476,7 @@ func TestCondition_evaluate(t *testing.T) {
 			Condition:       Condition("[CERTIFICATE_EXPIRATION] > " + strconv.FormatInt((time.Hour*24*28).Milliseconds(), 10)),
 			Result:          &Result{CertificateExpiration: time.Hour * 24 * 14},
 			ExpectedSuccess: false,
-			ExpectedOutput:  "[CERTIFICATE_EXPIRATION] (1209600000) > 2419200000",
+			ExpectedOutput:  "[CERTIFICATE_EXPIRATION] (336h) > 2419200000",
 		},
 		{
 			Name:            "certificate-expiration-greater-than-duration",
@@ -490,7 +490,7 @@ func TestCondition_evaluate(t *testing.T) {
 			Condition:       Condition("[CERTIFICATE_EXPIRATION] > 48h"),
 			Result:          &Result{CertificateExpiration: 24 * time.Hour},
 			ExpectedSuccess: false,
-			ExpectedOutput:  "[CERTIFICATE_EXPIRATION] (86400000) > 48h (172800000)",
+			ExpectedOutput:  "[CERTIFICATE_EXPIRATION] (24h) > 48h",
 		},
 		{
 			Name:            "no-placeholders",
@@ -353,6 +353,9 @@ func (e *Endpoint) EvaluateHealthWithContext(context *gontext.Gontext) *Result {
 		}
 		result.port = ""
 	}
+	if processedEndpoint.UIConfig.HideErrors {
+		result.Errors = nil
+	}
 	if processedEndpoint.UIConfig.HideConditions {
 		result.ConditionResults = nil
 	}
@@ -1448,3 +1448,168 @@ func TestEndpoint_preprocessWithContext(t *testing.T) {
 		})
 	}
 }
+
+func TestEndpoint_HideUIFeatures(t *testing.T) {
+	defer client.InjectHTTPClient(nil)
+	tests := []struct {
+		name              string
+		endpoint          Endpoint
+		mockResponse      test.MockRoundTripper
+		checkHostname     bool
+		expectHostname    string
+		checkErrors       bool
+		expectErrors      bool
+		checkConditions   bool
+		expectConditions  bool
+		checkErrorContent string
+	}{
+		{
+			name: "hide-conditions",
+			endpoint: Endpoint{
+				Name:       "test-endpoint",
+				URL:        "https://example.com/health",
+				Conditions: []Condition{"[STATUS] == 200", "[BODY].status == UP"},
+				UIConfig:   &ui.Config{HideConditions: true},
+			},
+			mockResponse: test.MockRoundTripper(func(r *http.Request) *http.Response {
+				return &http.Response{StatusCode: http.StatusOK, Body: io.NopCloser(bytes.NewBufferString(`{"status": "UP"}`))}
+			}),
+			checkConditions:  true,
+			expectConditions: false,
+		},
+		{
+			name: "hide-hostname",
+			endpoint: Endpoint{
+				Name:       "test-endpoint",
+				URL:        "https://example.com/health",
+				Conditions: []Condition{"[STATUS] == 200"},
+				UIConfig:   &ui.Config{HideHostname: true},
+			},
+			mockResponse: test.MockRoundTripper(func(r *http.Request) *http.Response {
+				return &http.Response{StatusCode: http.StatusOK, Body: http.NoBody}
+			}),
+			checkHostname:  true,
+			expectHostname: "",
+		},
+		{
+			name: "hide-url-in-errors",
+			endpoint: Endpoint{
+				Name:         "test-endpoint",
+				URL:          "https://example.com/health",
+				Conditions:   []Condition{"[CONNECTED] == true"},
+				UIConfig:     &ui.Config{HideURL: true},
+				ClientConfig: &client.Config{Timeout: time.Millisecond},
+			},
+			mockResponse:      nil,
+			checkErrors:       true,
+			expectErrors:      true,
+			checkErrorContent: "<redacted>",
+		},
+		{
+			name: "hide-port-in-errors",
+			endpoint: Endpoint{
+				Name:         "test-endpoint",
+				URL:          "https://example.com:9999/health",
+				Conditions:   []Condition{"[CONNECTED] == true"},
+				UIConfig:     &ui.Config{HidePort: true},
+				ClientConfig: &client.Config{Timeout: time.Millisecond},
+			},
+			mockResponse:      nil,
+			checkErrors:       true,
+			expectErrors:      true,
+			checkErrorContent: "<redacted>",
+		},
+		{
+			name: "hide-errors",
+			endpoint: Endpoint{
+				Name:         "test-endpoint",
+				URL:          "https://example.com/health",
+				Conditions:   []Condition{"[CONNECTED] == true"},
+				UIConfig:     &ui.Config{HideErrors: true},
+				ClientConfig: &client.Config{Timeout: time.Millisecond},
+			},
+			mockResponse: nil,
+			checkErrors:  true,
+			expectErrors: false,
+		},
+		{
+			name: "dont-resolve-failed-conditions",
+			endpoint: Endpoint{
+				Name:       "test-endpoint",
+				URL:        "https://example.com/health",
+				Conditions: []Condition{"[STATUS] == 200"},
+				UIConfig:   &ui.Config{DontResolveFailedConditions: true},
+			},
+			mockResponse: test.MockRoundTripper(func(r *http.Request) *http.Response {
+				return &http.Response{StatusCode: http.StatusBadGateway, Body: http.NoBody}
+			}),
+			checkConditions:  true,
+			expectConditions: true,
+		},
+		{
+			name: "multiple-hide-features",
+			endpoint: Endpoint{
+				Name:       "test-endpoint",
+				URL:        "https://example.com/health",
+				Conditions: []Condition{"[STATUS] == 200"},
+				UIConfig:   &ui.Config{HideConditions: true, HideHostname: true, HideErrors: true},
+			},
+			mockResponse: test.MockRoundTripper(func(r *http.Request) *http.Response {
+				return &http.Response{StatusCode: http.StatusOK, Body: http.NoBody}
+			}),
+			checkConditions:  true,
+			expectConditions: false,
+			checkHostname:    true,
+			expectHostname:   "",
+			checkErrors:      true,
+			expectErrors:     false,
+		},
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			if tt.mockResponse != nil {
+				mockClient := &http.Client{Transport: tt.mockResponse}
+				if tt.endpoint.ClientConfig != nil && tt.endpoint.ClientConfig.Timeout > 0 {
+					mockClient.Timeout = tt.endpoint.ClientConfig.Timeout
+				}
+				client.InjectHTTPClient(mockClient)
+			} else {
+				client.InjectHTTPClient(nil)
+			}
+			err := tt.endpoint.ValidateAndSetDefaults()
+			if err != nil {
+				t.Fatalf("ValidateAndSetDefaults failed: %v", err)
+			}
+			result := tt.endpoint.EvaluateHealth()
+			if tt.checkHostname {
+				if result.Hostname != tt.expectHostname {
+					t.Errorf("Expected hostname '%s', got '%s'", tt.expectHostname, result.Hostname)
+				}
+			}
+			if tt.checkErrors {
+				hasErrors := len(result.Errors) > 0
+				if hasErrors != tt.expectErrors {
+					t.Errorf("Expected errors=%v, got errors=%v (actual errors: %v)", tt.expectErrors, hasErrors, result.Errors)
+				}
+				if tt.checkErrorContent != "" && len(result.Errors) > 0 {
+					found := false
+					for _, err := range result.Errors {
+						if strings.Contains(err, tt.checkErrorContent) {
+							found = true
+							break
+						}
+					}
+					if !found {
+						t.Errorf("Expected error to contain '%s', but got: %v", tt.checkErrorContent, result.Errors)
+					}
+				}
+			}
+			if tt.checkConditions {
+				hasConditions := result.ConditionResults != nil && len(result.ConditionResults) > 0
+				if hasConditions != tt.expectConditions {
+					t.Errorf("Expected conditions=%v, got conditions=%v (actual: %v)", tt.expectConditions, hasConditions, result.ConditionResults)
+				}
+			}
+		})
+	}
+}
@@ -16,6 +16,9 @@ type Config struct {
 	// HidePort whether to hide the port in the Result
 	HidePort bool `yaml:"hide-port"`

+	// HideErrors whether to hide the errors in the Result
+	HideErrors bool `yaml:"hide-errors"`
+
 	// DontResolveFailedConditions whether to resolve failed conditions in the Result for display in the UI
 	DontResolveFailedConditions bool `yaml:"dont-resolve-failed-conditions"`

@@ -58,6 +61,7 @@ func GetDefaultConfig() *Config {
 		HideHostname:                false,
 		HideURL:                     false,
 		HidePort:                    false,
+		HideErrors:                  false,
 		DontResolveFailedConditions: false,
 		HideConditions:              false,
 		Badge: &Badge{
@@ -17,6 +17,7 @@ var (
 	resultConnectedTotal               *prometheus.CounterVec
 	resultCodeTotal                    *prometheus.CounterVec
 	resultCertificateExpirationSeconds *prometheus.GaugeVec
+	resultDomainExpirationSeconds      *prometheus.GaugeVec
 	resultEndpointSuccess              *prometheus.GaugeVec

 	// Suite metrics
@@ -51,6 +52,9 @@ func UnregisterPrometheusMetrics() {
 	if resultCertificateExpirationSeconds != nil {
 		currentRegisterer.Unregister(resultCertificateExpirationSeconds)
 	}
+	if resultDomainExpirationSeconds != nil {
+		currentRegisterer.Unregister(resultDomainExpirationSeconds)
+	}
 	if resultEndpointSuccess != nil {
 		currentRegisterer.Unregister(resultEndpointSuccess)
 	}
@@ -119,6 +123,13 @@ func InitializePrometheusMetrics(cfg *config.Config, reg prometheus.Registerer)
 	}, append([]string{"key", "group", "name", "type"}, extraLabels...))
 	reg.MustRegister(resultCertificateExpirationSeconds)

+	resultDomainExpirationSeconds = prometheus.NewGaugeVec(prometheus.GaugeOpts{
+		Namespace: namespace,
+		Name:      "results_domain_expiration_seconds",
+		Help:      "Number of seconds until the domain expires",
+	}, append([]string{"key", "group", "name", "type"}, extraLabels...))
+	reg.MustRegister(resultDomainExpirationSeconds)
+
 	resultEndpointSuccess = prometheus.NewGaugeVec(prometheus.GaugeOpts{
 		Namespace: namespace,
 		Name:      "results_endpoint_success",
@@ -178,6 +189,9 @@ func PublishMetricsForEndpoint(ep *endpoint.Endpoint, result *endpoint.Result, e
 	if result.CertificateExpiration != 0 {
 		resultCertificateExpirationSeconds.WithLabelValues(append([]string{ep.Key(), ep.Group, ep.Name, string(endpointType)}, labelValues...)...).Set(result.CertificateExpiration.Seconds())
 	}
+	if result.DomainExpiration != 0 {
+		resultDomainExpirationSeconds.WithLabelValues(append([]string{ep.Key(), ep.Group, ep.Name, string(endpointType)}, labelValues...)...).Set(result.DomainExpiration.Seconds())
+	}
 	if result.Success {
 		resultEndpointSuccess.WithLabelValues(append([]string{ep.Key(), ep.Group, ep.Name, string(endpointType)}, labelValues...)...).Set(1)
 	} else {
@@ -48,6 +48,9 @@ func TestInitializePrometheusMetrics(t *testing.T) {
 	if resultCertificateExpirationSeconds == nil {
 		t.Error("resultCertificateExpirationSeconds metric not initialized")
 	}
+	if resultDomainExpirationSeconds == nil {
+		t.Error("resultDomainExpirationSeconds metric not initialized")
+	}
 	if resultEndpointSuccess == nil {
 		t.Error("resultEndpointSuccess metric not initialized")
 	}
@@ -120,9 +123,11 @@ func TestPublishMetricsForEndpoint(t *testing.T) {
 		ConditionResults: []*endpoint.ConditionResult{
 			{Condition: "[STATUS] == 200", Success: true},
 			{Condition: "[CERTIFICATE_EXPIRATION] > 48h", Success: true},
+			{Condition: "[DOMAIN_EXPIRATION] > 24h", Success: true},
 		},
 		Success:               true,
 		CertificateExpiration: 49 * time.Hour,
+		DomainExpiration:      25 * time.Hour,
 	}, []string{})
 	err := testutil.GatherAndCompare(reg, bytes.NewBufferString(`
 # HELP gatus_results_code_total Total number of results by code
@@ -140,6 +145,9 @@ gatus_results_total{group="http-ep-group",key="http-ep-group_http-ep-name",name=
 # HELP gatus_results_certificate_expiration_seconds Number of seconds until the certificate expires
 # TYPE gatus_results_certificate_expiration_seconds gauge
 gatus_results_certificate_expiration_seconds{group="http-ep-group",key="http-ep-group_http-ep-name",name="http-ep-name",type="HTTP"} 176400
+# HELP gatus_results_domain_expiration_seconds Number of seconds until the domain expires
+# TYPE gatus_results_domain_expiration_seconds gauge
+gatus_results_domain_expiration_seconds{group="http-ep-group",key="http-ep-group_http-ep-name",name="http-ep-name",type="HTTP"} 90000
 # HELP gatus_results_endpoint_success Displays whether or not the endpoint was a success
 # TYPE gatus_results_endpoint_success gauge
 gatus_results_endpoint_success{group="http-ep-group",key="http-ep-group_http-ep-name",name="http-ep-name",type="HTTP"} 1
@@ -154,9 +162,11 @@ gatus_results_endpoint_success{group="http-ep-group",key="http-ep-group_http-ep-
 		ConditionResults: []*endpoint.ConditionResult{
 			{Condition: "[STATUS] == 200", Success: true},
 			{Condition: "[CERTIFICATE_EXPIRATION] > 47h", Success: false},
+			{Condition: "[DOMAIN_EXPIRATION] > 24h", Success: true},
 		},
 		Success:               false,
 		CertificateExpiration: 47 * time.Hour,
+		DomainExpiration:      24 * time.Hour,
 	}, []string{})
 	err = testutil.GatherAndCompare(reg, bytes.NewBufferString(`
 # HELP gatus_results_code_total Total number of results by code
@@ -175,6 +185,9 @@ gatus_results_total{group="http-ep-group",key="http-ep-group_http-ep-name",name=
 # HELP gatus_results_certificate_expiration_seconds Number of seconds until the certificate expires
 # TYPE gatus_results_certificate_expiration_seconds gauge
 gatus_results_certificate_expiration_seconds{group="http-ep-group",key="http-ep-group_http-ep-name",name="http-ep-name",type="HTTP"} 169200
+# HELP gatus_results_domain_expiration_seconds Number of seconds until the domain expires
+# TYPE gatus_results_domain_expiration_seconds gauge
+gatus_results_domain_expiration_seconds{group="http-ep-group",key="http-ep-group_http-ep-name",name="http-ep-name",type="HTTP"} 86400
 # HELP gatus_results_endpoint_success Displays whether or not the endpoint was a success
 # TYPE gatus_results_endpoint_success gauge
 gatus_results_endpoint_success{group="http-ep-group",key="http-ep-group_http-ep-name",name="http-ep-name",type="HTTP"} 0
@@ -8,16 +8,17 @@
      "name": "gatus",
      "version": "4.0.0",
      "dependencies": {
-        "@headlessui/vue": "^1.7.23",
-        "@heroicons/vue": "^2.2.0",
-        "@vueuse/core": "^13.6.0",
+        "chart.js": "^4.5.1",
+        "chartjs-adapter-date-fns": "^3.0.0",
+        "chartjs-plugin-annotation": "^3.1.0",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "core-js": "^3.45.0",
+        "date-fns": "^4.1.0",
        "lucide-vue-next": "^0.539.0",
-        "radix-vue": "^1.9.17",
        "tailwind-merge": "^3.3.1",
        "vue": "^3.5.18",
+        "vue-chartjs": "^5.3.2",
        "vue-router": "^4.5.1"
      },
      "devDependencies": {
@@ -1861,42 +1862,6 @@
        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
      }
    },
-    "node_modules/@floating-ui/core": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
-      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/utils": "^0.2.10"
-      }
-    },
-    "node_modules/@floating-ui/dom": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.3.tgz",
-      "integrity": "sha512-uZA413QEpNuhtb3/iIKoYMSK07keHPYeXF02Zhd6e213j+d1NamLix/mCLxBUDW/Gx52sPH2m+chlUsyaBs/Ag==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/core": "^1.7.3",
-        "@floating-ui/utils": "^0.2.10"
-      }
-    },
-    "node_modules/@floating-ui/utils": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
-      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
-      "license": "MIT"
-    },
-    "node_modules/@floating-ui/vue": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.8.tgz",
-      "integrity": "sha512-SNJAa1jbT8Gh1LvWw2uIIViLL0saV2bCY59ISCvJzhbut5DSb2H3LKUK49Xkd7SixTNHKX4LFu59nbwIXt9jjQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/dom": "^1.7.3",
-        "@floating-ui/utils": "^0.2.10",
-        "vue-demi": ">=0.13.0"
-      }
-    },
    "node_modules/@hapi/hoek": {
      "version": "9.3.0",
      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -1912,30 +1877,6 @@
        "@hapi/hoek": "^9.0.0"
      }
    },
-    "node_modules/@headlessui/vue": {
-      "version": "1.7.23",
-      "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.23.tgz",
-      "integrity": "sha512-JzdCNqurrtuu0YW6QaDtR2PIYCKPUWq28csDyMvN4zmGccmE7lz40Is6hc3LA4HFeCI7sekZ/PQMTNmn9I/4Wg==",
-      "license": "MIT",
-      "dependencies": {
-        "@tanstack/vue-virtual": "^3.0.0-beta.60"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "vue": "^3.2.0"
-      }
-    },
-    "node_modules/@heroicons/vue": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.2.0.tgz",
-      "integrity": "sha512-G3dbSxoeEKqbi/DFalhRxJU4mTXJn7GwZ7ae8NuEQzd1bqdd0jAbdaBZlHPcvPD2xI1iGzNVB4k20Un2AguYPw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "vue": ">= 3"
-      }
-    },
    "node_modules/@humanwhocodes/config-array": {
      "version": "0.13.0",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -1974,24 +1915,6 @@
      "dev": true,
      "license": "BSD-3-Clause"
    },
-    "node_modules/@internationalized/date": {
-      "version": "3.8.2",
-      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.8.2.tgz",
-      "integrity": "sha512-/wENk7CbvLbkUvX1tu0mwq49CVkkWpkXubGel6birjRPyo6uQ4nQpnq5xZu823zRCwwn82zgHrvgF1vZyvmVgA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      }
-    },
-    "node_modules/@internationalized/number": {
-      "version": "3.6.4",
-      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.6.4.tgz",
-      "integrity": "sha512-P+/h+RDaiX8EGt3shB9AYM1+QgkvHmJ5rKi4/59k4sg9g58k9rqsRW0WxRO7jCoHyvVbFRRFKmVTdFYdehrxHg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@swc/helpers": "^0.5.0"
-      }
-    },
    "node_modules/@jridgewell/gen-mapping": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -2063,6 +1986,12 @@
        "@jridgewell/sourcemap-codec": "^1.4.10"
      }
    },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
    "node_modules/@leichtgewicht/ip-codec": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -2244,41 +2173,6 @@
      "integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==",
      "dev": true
    },
-    "node_modules/@swc/helpers": {
-      "version": "0.5.17",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
-      "integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "tslib": "^2.8.0"
-      }
-    },
-    "node_modules/@tanstack/virtual-core": {
-      "version": "3.13.12",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz",
-      "integrity": "sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
-    "node_modules/@tanstack/vue-virtual": {
-      "version": "3.13.12",
-      "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.12.tgz",
-      "integrity": "sha512-vhF7kEU9EXWXh+HdAwKJ2m3xaOnTTmgcdXcF2pim8g4GvI7eRrk2YRuV5nUlZnd/NbCIX4/Ja2OZu5EjJL06Ww==",
-      "license": "MIT",
-      "dependencies": {
-        "@tanstack/virtual-core": "3.13.12"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "vue": "^2.7.0 || ^3.0.0"
-      }
-    },
    "node_modules/@trysound/sax": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -2472,12 +2366,6 @@
        "@types/node": "*"
      }
    },
-    "node_modules/@types/web-bluetooth": {
-      "version": "0.0.21",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
-      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
-      "license": "MIT"
-    },
    "node_modules/@types/ws": {
      "version": "8.5.3",
      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -3221,44 +3109,6 @@
      "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
      "dev": true
    },
-    "node_modules/@vueuse/core": {
-      "version": "13.6.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.6.0.tgz",
-      "integrity": "sha512-DJbD5fV86muVmBgS9QQPddVX7d9hWYswzlf4bIyUD2dj8GC46R1uNClZhVAmsdVts4xb2jwp1PbpuiA50Qee1A==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/web-bluetooth": "^0.0.21",
-        "@vueuse/metadata": "13.6.0",
-        "@vueuse/shared": "13.6.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "vue": "^3.5.0"
-      }
-    },
-    "node_modules/@vueuse/metadata": {
-      "version": "13.6.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.6.0.tgz",
-      "integrity": "sha512-rnIH7JvU7NjrpexTsl2Iwv0V0yAx9cw7+clymjKuLSXG0QMcLD0LDgdNmXic+qL0SGvgSVPEpM9IDO/wqo1vkQ==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/shared": {
-      "version": "13.6.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.6.0.tgz",
-      "integrity": "sha512-pDykCSoS2T3fsQrYqf9SyF0QXWHmcGPQ+qiOVjlYSzlWd9dgppB2bFSM1GgKKkt7uzn0BBMV3IbJsUfHG2+BCg==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "vue": "^3.5.0"
-      }
-    },
    "node_modules/@webassemblyjs/ast": {
      "version": "1.11.1",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -3670,18 +3520,6 @@
      "dev": true,
      "license": "Python-2.0"
    },
-    "node_modules/aria-hidden": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
-      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
    "node_modules/array-flatten": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
@@ -4170,6 +4008,37 @@
        "node": ">=4"
      }
    },
+    "node_modules/chart.js": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+      "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
+    "node_modules/chartjs-adapter-date-fns": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz",
+      "integrity": "sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": ">=2.8.0",
+        "date-fns": ">=2.0.0"
+      }
+    },
+    "node_modules/chartjs-plugin-annotation": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-annotation/-/chartjs-plugin-annotation-3.1.0.tgz",
+      "integrity": "sha512-EkAed6/ycXD/7n0ShrlT1T2Hm3acnbFhgkIEJLa0X+M6S16x0zwj1Fv4suv/2bwayCT3jGPdAtI9uLcAMToaQQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": ">=4.0.0"
+      }
+    },
    "node_modules/chokidar": {
      "version": "3.5.3",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -5002,6 +4871,16 @@
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
      "license": "MIT"
    },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
    "node_modules/debug": {
      "version": "4.3.4",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -5146,12 +5025,6 @@
      "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==",
      "dev": true
    },
-    "node_modules/defu": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
-      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
-      "license": "MIT"
-    },
    "node_modules/depd": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -6237,7 +6110,8 @@
    "node_modules/fast-deep-equal": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
    },
    "node_modules/fast-glob": {
      "version": "3.2.11",
@@ -9535,88 +9409,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/radix-vue": {
-      "version": "1.9.17",
-      "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.9.17.tgz",
-      "integrity": "sha512-mVCu7I2vXt1L2IUYHTt0sZMz7s1K2ZtqKeTIxG3yC5mMFfLBG4FtE1FDeRMpDd+Hhg/ybi9+iXmAP1ISREndoQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/dom": "^1.6.7",
-        "@floating-ui/vue": "^1.1.0",
-        "@internationalized/date": "^3.5.4",
-        "@internationalized/number": "^3.5.3",
-        "@tanstack/vue-virtual": "^3.8.1",
-        "@vueuse/core": "^10.11.0",
-        "@vueuse/shared": "^10.11.0",
-        "aria-hidden": "^1.2.4",
-        "defu": "^6.1.4",
-        "fast-deep-equal": "^3.1.3",
-        "nanoid": "^5.0.7"
-      },
-      "peerDependencies": {
-        "vue": ">= 3.2.0"
-      }
-    },
-    "node_modules/radix-vue/node_modules/@types/web-bluetooth": {
-      "version": "0.0.20",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
-      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
-      "license": "MIT"
-    },
-    "node_modules/radix-vue/node_modules/@vueuse/core": {
-      "version": "10.11.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
-      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/web-bluetooth": "^0.0.20",
-        "@vueuse/metadata": "10.11.1",
-        "@vueuse/shared": "10.11.1",
-        "vue-demi": ">=0.14.8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/radix-vue/node_modules/@vueuse/metadata": {
-      "version": "10.11.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
-      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/radix-vue/node_modules/@vueuse/shared": {
-      "version": "10.11.1",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
-      "integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
-      "license": "MIT",
-      "dependencies": {
-        "vue-demi": ">=0.14.8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/radix-vue/node_modules/nanoid": {
-      "version": "5.1.5",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
-      "integrity": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "bin": {
-        "nanoid": "bin/nanoid.js"
-      },
-      "engines": {
-        "node": "^18 || >=20"
-      }
-    },
    "node_modules/randombytes": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -10821,6 +10613,7 @@
      "version": "2.8.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
      "license": "0BSD"
    },
    "node_modules/type-check": {
@@ -11026,30 +10819,14 @@
        }
      }
    },
-    "node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
+    "node_modules/vue-chartjs": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.2.tgz",
+      "integrity": "sha512-NrkbRRoYshbXbWqJkTN6InoDVwVb90C0R7eAVgMWcB9dPikbruaOoTFjFYHE/+tNPdIe6qdLCDjfjPHQ0fw4jw==",
      "license": "MIT",
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
+        "chart.js": "^4.1.1",
+        "vue": "^3.0.0-0 || ^2.7.0"
      }
    },
    "node_modules/vue-eslint-parser": {
@@ -13323,38 +13100,6 @@
      "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
      "dev": true
    },
-    "@floating-ui/core": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
-      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
-      "requires": {
-        "@floating-ui/utils": "^0.2.10"
-      }
-    },
-    "@floating-ui/dom": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.3.tgz",
-      "integrity": "sha512-uZA413QEpNuhtb3/iIKoYMSK07keHPYeXF02Zhd6e213j+d1NamLix/mCLxBUDW/Gx52sPH2m+chlUsyaBs/Ag==",
-      "requires": {
-        "@floating-ui/core": "^1.7.3",
-        "@floating-ui/utils": "^0.2.10"
-      }
-    },
-    "@floating-ui/utils": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
-      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="
-    },
-    "@floating-ui/vue": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.8.tgz",
-      "integrity": "sha512-SNJAa1jbT8Gh1LvWw2uIIViLL0saV2bCY59ISCvJzhbut5DSb2H3LKUK49Xkd7SixTNHKX4LFu59nbwIXt9jjQ==",
-      "requires": {
-        "@floating-ui/dom": "^1.7.3",
-        "@floating-ui/utils": "^0.2.10",
-        "vue-demi": ">=0.13.0"
-      }
-    },
    "@hapi/hoek": {
      "version": "9.3.0",
      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -13370,20 +13115,6 @@
        "@hapi/hoek": "^9.0.0"
      }
    },
-    "@headlessui/vue": {
-      "version": "1.7.23",
-      "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.23.tgz",
-      "integrity": "sha512-JzdCNqurrtuu0YW6QaDtR2PIYCKPUWq28csDyMvN4zmGccmE7lz40Is6hc3LA4HFeCI7sekZ/PQMTNmn9I/4Wg==",
-      "requires": {
-        "@tanstack/vue-virtual": "^3.0.0-beta.60"
-      }
-    },
-    "@heroicons/vue": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.2.0.tgz",
-      "integrity": "sha512-G3dbSxoeEKqbi/DFalhRxJU4mTXJn7GwZ7ae8NuEQzd1bqdd0jAbdaBZlHPcvPD2xI1iGzNVB4k20Un2AguYPw==",
-      "requires": {}
-    },
    "@humanwhocodes/config-array": {
      "version": "0.13.0",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -13407,22 +13138,6 @@
      "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
      "dev": true
    },
-    "@internationalized/date": {
-      "version": "3.8.2",
-      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.8.2.tgz",
-      "integrity": "sha512-/wENk7CbvLbkUvX1tu0mwq49CVkkWpkXubGel6birjRPyo6uQ4nQpnq5xZu823zRCwwn82zgHrvgF1vZyvmVgA==",
-      "requires": {
-        "@swc/helpers": "^0.5.0"
-      }
-    },
-    "@internationalized/number": {
-      "version": "3.6.4",
-      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.6.4.tgz",
-      "integrity": "sha512-P+/h+RDaiX8EGt3shB9AYM1+QgkvHmJ5rKi4/59k4sg9g58k9rqsRW0WxRO7jCoHyvVbFRRFKmVTdFYdehrxHg==",
-      "requires": {
-        "@swc/helpers": "^0.5.0"
-      }
-    },
    "@jridgewell/gen-mapping": {
      "version": "0.1.1",
      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -13483,6 +13198,11 @@
        "@jridgewell/sourcemap-codec": "^1.4.10"
      }
    },
+    "@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="
+    },
    "@leichtgewicht/ip-codec": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -13629,27 +13349,6 @@
      "integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==",
      "dev": true
    },
-    "@swc/helpers": {
-      "version": "0.5.17",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
-      "integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==",
-      "requires": {
-        "tslib": "^2.8.0"
-      }
-    },
-    "@tanstack/virtual-core": {
-      "version": "3.13.12",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz",
-      "integrity": "sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA=="
-    },
-    "@tanstack/vue-virtual": {
-      "version": "3.13.12",
-      "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.12.tgz",
-      "integrity": "sha512-vhF7kEU9EXWXh+HdAwKJ2m3xaOnTTmgcdXcF2pim8g4GvI7eRrk2YRuV5nUlZnd/NbCIX4/Ja2OZu5EjJL06Ww==",
-      "requires": {
-        "@tanstack/virtual-core": "3.13.12"
-      }
-    },
    "@trysound/sax": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -13840,11 +13539,6 @@
        "@types/node": "*"
      }
    },
-    "@types/web-bluetooth": {
-      "version": "0.0.21",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
-      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA=="
-    },
    "@types/ws": {
      "version": "8.5.3",
      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -14421,27 +14115,6 @@
      "integrity": "sha512-Iu8Tbg3f+emIIMmI2ycSI8QcEuAUgPTgHwesDU1eKMLE4YC/c/sFbGc70QgMq31ijRftV0R7vCm9co6rldCeOA==",
      "dev": true
    },
-    "@vueuse/core": {
-      "version": "13.6.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.6.0.tgz",
-      "integrity": "sha512-DJbD5fV86muVmBgS9QQPddVX7d9hWYswzlf4bIyUD2dj8GC46R1uNClZhVAmsdVts4xb2jwp1PbpuiA50Qee1A==",
-      "requires": {
-        "@types/web-bluetooth": "^0.0.21",
-        "@vueuse/metadata": "13.6.0",
-        "@vueuse/shared": "13.6.0"
-      }
-    },
-    "@vueuse/metadata": {
-      "version": "13.6.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.6.0.tgz",
-      "integrity": "sha512-rnIH7JvU7NjrpexTsl2Iwv0V0yAx9cw7+clymjKuLSXG0QMcLD0LDgdNmXic+qL0SGvgSVPEpM9IDO/wqo1vkQ=="
-    },
-    "@vueuse/shared": {
-      "version": "13.6.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.6.0.tgz",
-      "integrity": "sha512-pDykCSoS2T3fsQrYqf9SyF0QXWHmcGPQ+qiOVjlYSzlWd9dgppB2bFSM1GgKKkt7uzn0BBMV3IbJsUfHG2+BCg==",
-      "requires": {}
-    },
    "@webassemblyjs/ast": {
      "version": "1.11.1",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -14776,14 +14449,6 @@
      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
      "dev": true
    },
-    "aria-hidden": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
-      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
-      "requires": {
-        "tslib": "^2.0.0"
-      }
-    },
    "array-flatten": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
@@ -15123,6 +14788,26 @@
        "supports-color": "^5.3.0"
      }
    },
+    "chart.js": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+      "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
+      "requires": {
+        "@kurkle/color": "^0.3.0"
+      }
+    },
+    "chartjs-adapter-date-fns": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz",
+      "integrity": "sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==",
+      "requires": {}
+    },
+    "chartjs-plugin-annotation": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-annotation/-/chartjs-plugin-annotation-3.1.0.tgz",
+      "integrity": "sha512-EkAed6/ycXD/7n0ShrlT1T2Hm3acnbFhgkIEJLa0X+M6S16x0zwj1Fv4suv/2bwayCT3jGPdAtI9uLcAMToaQQ==",
+      "requires": {}
+    },
    "chokidar": {
      "version": "3.5.3",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -15721,6 +15406,11 @@
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
    },
+    "date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="
+    },
    "debug": {
      "version": "4.3.4",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -15822,11 +15512,6 @@
      "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==",
      "dev": true
    },
-    "defu": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
-      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg=="
-    },
    "depd": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -16615,7 +16300,8 @@
    "fast-deep-equal": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
    },
    "fast-glob": {
      "version": "3.2.11",
@@ -18970,60 +18656,6 @@
      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
      "dev": true
    },
-    "radix-vue": {
-      "version": "1.9.17",
-      "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.9.17.tgz",
-      "integrity": "sha512-mVCu7I2vXt1L2IUYHTt0sZMz7s1K2ZtqKeTIxG3yC5mMFfLBG4FtE1FDeRMpDd+Hhg/ybi9+iXmAP1ISREndoQ==",
-      "requires": {
-        "@floating-ui/dom": "^1.6.7",
-        "@floating-ui/vue": "^1.1.0",
-        "@internationalized/date": "^3.5.4",
-        "@internationalized/number": "^3.5.3",
-        "@tanstack/vue-virtual": "^3.8.1",
-        "@vueuse/core": "^10.11.0",
-        "@vueuse/shared": "^10.11.0",
-        "aria-hidden": "^1.2.4",
-        "defu": "^6.1.4",
-        "fast-deep-equal": "^3.1.3",
-        "nanoid": "^5.0.7"
-      },
-      "dependencies": {
-        "@types/web-bluetooth": {
-          "version": "0.0.20",
-          "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
-          "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
-        },
-        "@vueuse/core": {
-          "version": "10.11.1",
-          "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
-          "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
-          "requires": {
-            "@types/web-bluetooth": "^0.0.20",
-            "@vueuse/metadata": "10.11.1",
-            "@vueuse/shared": "10.11.1",
-            "vue-demi": ">=0.14.8"
-          }
-        },
-        "@vueuse/metadata": {
-          "version": "10.11.1",
-          "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
-          "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw=="
-        },
-        "@vueuse/shared": {
-          "version": "10.11.1",
-          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
-          "integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
-          "requires": {
-            "vue-demi": ">=0.14.8"
-          }
-        },
-        "nanoid": {
-          "version": "5.1.5",
-          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
-          "integrity": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw=="
-        }
-      }
-    },
    "randombytes": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -19954,7 +19586,8 @@
    "tslib": {
      "version": "2.8.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true
    },
    "type-check": {
      "version": "0.4.0",
@@ -20092,10 +19725,10 @@
        "@vue/shared": "3.5.18"
      }
    },
-    "vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+    "vue-chartjs": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.2.tgz",
+      "integrity": "sha512-NrkbRRoYshbXbWqJkTN6InoDVwVb90C0R7eAVgMWcB9dPikbruaOoTFjFYHE/+tNPdIe6qdLCDjfjPHQ0fw4jw==",
      "requires": {}
    },
    "vue-eslint-parser": {
@@ -8,22 +8,27 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
+    "chart.js": "^4.5.1",
+    "chartjs-adapter-date-fns": "^3.0.0",
+    "chartjs-plugin-annotation": "^3.1.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "core-js": "^3.45.0",
+    "date-fns": "^4.1.0",
    "lucide-vue-next": "^0.539.0",
    "tailwind-merge": "^3.3.1",
    "vue": "^3.5.18",
+    "vue-chartjs": "^5.3.2",
    "vue-router": "^4.5.1"
  },
  "devDependencies": {
+    "@babel/eslint-parser": "^7.25.1",
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-eslint": "^5.0.8",
    "@vue/cli-plugin-router": "^5.0.8",
    "@vue/cli-service": "^5.0.8",
    "@vue/compiler-sfc": "^3.5.18",
    "autoprefixer": "^10.4.21",
-    "@babel/eslint-parser": "^7.25.1",
    "eslint": "^8.57.1",
    "eslint-plugin-vue": "^9.28.0",
    "postcss": "^8.5.6",
@@ -44,13 +44,6 @@
              :key="date"
              class="relative"
            >
-              <!-- Vertical line from date to last icon -->
-              <div 
-                v-if="group.length > 0"
-                class="absolute left-3 w-0.5 bg-gray-300 dark:bg-gray-600 pointer-events-none"
-                :style="getTimelineHeight(group)"
-              ></div>
-
              <!-- Date Header -->
              <div class="flex items-center gap-3 mb-2 relative">
                <div class="relative z-10 bg-white dark:bg-gray-800 px-2 py-1 rounded-md border border-gray-200 dark:border-gray-600">
@@ -69,18 +62,37 @@
                  class="relative"
                >
                  <!-- Timeline Icon -->
-                  <div 
+                  <div
                    :class="[
-                      'absolute -left-[26px] top-1/2 -translate-y-1/2 w-5 h-5 rounded-full border bg-white dark:bg-gray-800 flex items-center justify-center z-10',
+                      'absolute -left-[26px] w-5 h-5 rounded-full border bg-white dark:bg-gray-800 flex items-center justify-center z-10',
+                      index === group.length - 1 ? 'top-3' : 'top-1/2 -translate-y-1/2',
                      getTypeClasses(announcement.type).border
                    ]"
                  >
-                    <component 
-                      :is="getTypeIcon(announcement.type)" 
+                    <component
+                      :is="getTypeIcon(announcement.type)"
                      :class="['w-3 h-3', getTypeClasses(announcement.type).iconColor]"
                    />
                  </div>

+                  <!-- Vertical line segment connecting upward from first icon to date -->
+                  <div
+                    v-if="index === 0"
+                    class="absolute w-0.5 bg-gray-300 dark:bg-gray-600 pointer-events-none"
+                    style="left: -16px; top: -2.5rem; height: calc(50% + 2.5rem);"
+                  ></div>
+
+                  <!-- Vertical line segment connecting downward to next icon -->
+                  <div
+                    v-if="index < group.length - 1"
+                    class="absolute w-0.5 bg-gray-300 dark:bg-gray-600 pointer-events-none"
+                    :style="{
+                      left: '-16px',
+                      top: '50%',
+                      height: index === group.length - 2 ? 'calc(50% + 1.25rem)' : 'calc(50% + 2rem)'
+                    }"
+                  ></div>
+
                  <!-- Announcement Card -->
                  <div 
                    :class="[
@@ -220,14 +232,6 @@ const getTypeClasses = (type) => {
  return typeConfigs[type] || typeConfigs.none
 }

-const getTimelineHeight = (group) => {
-  const height = group.length === 1 ? '2rem' : `${2 + (group.length - 1) * 3.5}rem`
-  return {
-    top: '1.5rem',
-    height
-  }
-}
-
 const formatDate = (dateString) => {
  const date = new Date(dateString)
  const today = new Date()
@@ -0,0 +1,294 @@
+<template>
+  <div class="relative w-full" style="height: 300px;">
+    <div v-if="loading" class="absolute inset-0 flex items-center justify-center bg-background/50">
+      <Loading />
+    </div>
+    <div v-else-if="error" class="absolute inset-0 flex items-center justify-center text-muted-foreground">
+      {{ error }}
+    </div>
+    <Line v-else :data="chartData" :options="chartOptions" />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import { Line } from 'vue-chartjs'
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler, TimeScale } from 'chart.js'
+import annotationPlugin from 'chartjs-plugin-annotation'
+import 'chartjs-adapter-date-fns'
+import { generatePrettyTimeDifference } from '@/utils/time'
+import Loading from './Loading.vue'
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler, TimeScale, annotationPlugin)
+
+const props = defineProps({
+  endpointKey: {
+    type: String,
+    required: true
+  },
+  duration: {
+    type: String,
+    required: true,
+    validator: (value) => ['24h', '7d', '30d'].includes(value)
+  },
+  serverUrl: {
+    type: String,
+    default: '..'
+  },
+  events: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const loading = ref(true)
+const error = ref(null)
+const timestamps = ref([])
+const values = ref([])
+const isDark = ref(document.documentElement.classList.contains('dark'))
+const hoveredEventIndex = ref(null)
+
+// Helper function to get color for unhealthy events
+const getEventColor = () => {
+  // Only UNHEALTHY events are displayed on the chart
+  return 'rgba(239, 68, 68, 0.8)' // Red
+}
+
+// Filter events based on selected duration and calculate durations
+const filteredEvents = computed(() => {
+  if (!props.events || props.events.length === 0) {
+    return []
+  }
+
+  const now = new Date()
+  let fromTime
+  switch (props.duration) {
+    case '24h':
+      fromTime = new Date(now.getTime() - 24 * 60 * 60 * 1000)
+      break
+    case '7d':
+      fromTime = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
+      break
+    case '30d':
+      fromTime = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000)
+      break
+    default:
+      return []
+  }
+
+  // Only include UNHEALTHY events and calculate their duration
+  const unhealthyEvents = []
+  for (let i = 0; i < props.events.length; i++) {
+    const event = props.events[i]
+    if (event.type !== 'UNHEALTHY') continue
+
+    const eventTime = new Date(event.timestamp)
+    if (eventTime < fromTime || eventTime > now) continue
+
+    // Find the next event to calculate duration
+    let duration = null
+    let isOngoing = false
+    if (i + 1 < props.events.length) {
+      const nextEvent = props.events[i + 1]
+      duration = generatePrettyTimeDifference(nextEvent.timestamp, event.timestamp)
+    } else {
+      // Still ongoing - calculate duration from event time to now
+      duration = generatePrettyTimeDifference(now, event.timestamp)
+      isOngoing = true
+    }
+
+    unhealthyEvents.push({
+      ...event,
+      duration,
+      isOngoing
+    })
+  }
+
+  return unhealthyEvents
+})
+
+const chartData = computed(() => {
+  if (timestamps.value.length === 0) {
+    return {
+      labels: [],
+      datasets: []
+    }
+  }
+  const labels = timestamps.value.map(ts => new Date(ts))
+  return {
+    labels,
+    datasets: [{
+      label: 'Response Time (ms)',
+      data: values.value,
+      borderColor: isDark.value ? 'rgb(96, 165, 250)' : 'rgb(59, 130, 246)',
+      backgroundColor: isDark.value ? 'rgba(96, 165, 250, 0.1)' : 'rgba(59, 130, 246, 0.1)',
+      borderWidth: 2,
+      pointRadius: 2,
+      pointHoverRadius: 4,
+      tension: 0.1,
+      fill: true
+    }]
+  }
+})
+
+const chartOptions = computed(() => {
+  // Include hoveredEventIndex in dependency tracking
+  // eslint-disable-next-line no-unused-vars
+  const _ = hoveredEventIndex.value
+
+  // Calculate max Y value for positioning annotations
+  const maxY = values.value.length > 0 ? Math.max(...values.value) : 0
+  const midY = maxY / 2
+
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    interaction: {
+      mode: 'index',
+      intersect: false
+    },
+    plugins: {
+      legend: {
+        display: false
+      },
+      tooltip: {
+        backgroundColor: isDark.value ? 'rgba(31, 41, 55, 0.95)' : 'rgba(255, 255, 255, 0.95)',
+        titleColor: isDark.value ? '#f9fafb' : '#111827',
+        bodyColor: isDark.value ? '#d1d5db' : '#374151',
+        borderColor: isDark.value ? '#4b5563' : '#e5e7eb',
+        borderWidth: 1,
+        padding: 12,
+        displayColors: false,
+        callbacks: {
+          title: (tooltipItems) => {
+            if (tooltipItems.length > 0) {
+              const date = new Date(tooltipItems[0].parsed.x)
+              return date.toLocaleString()
+            }
+            return ''
+          },
+          label: (context) => {
+            const value = context.parsed.y
+            return `${value}ms`
+          }
+        }
+      },
+      annotation: {
+        annotations: filteredEvents.value.reduce((acc, event, index) => {
+          // Find closest data point to determine annotation position
+          const eventTimestamp = new Date(event.timestamp).getTime()
+          let closestValue = 0
+
+          if (timestamps.value.length > 0 && values.value.length > 0) {
+            const closestIndex = timestamps.value.reduce((closest, ts, idx) => {
+              const tsTime = new Date(ts).getTime()
+              const currentDistance = Math.abs(tsTime - eventTimestamp)
+              const closestDistance = Math.abs(new Date(timestamps.value[closest]).getTime() - eventTimestamp)
+              return currentDistance < closestDistance ? idx : closest
+            }, 0)
+            closestValue = values.value[closestIndex]
+          }
+
+          // Position annotation at bottom if data point is in lower half, at top if in upper half
+          const position = closestValue <= midY ? 'end' : 'start'
+
+          acc[`event-${index}`] = {
+            type: 'line',
+            xMin: new Date(event.timestamp),
+            xMax: new Date(event.timestamp),
+            borderColor: getEventColor(),
+            borderWidth: 1,
+            borderDash: [5, 5],
+            enter() {
+              hoveredEventIndex.value = index
+            },
+            leave() {
+              hoveredEventIndex.value = null
+            },
+            label: {
+              display: () => hoveredEventIndex.value === index,
+              content: [event.isOngoing ? `Status: ONGOING` : `Status: RESOLVED`, `Unhealthy for ${event.duration}`, `Started at ${new Date(event.timestamp).toLocaleString()}`],
+              backgroundColor: getEventColor(),
+              color: '#ffffff',
+              font: {
+                size: 11
+              },
+              padding: 6,
+              position
+            }
+          }
+          return acc
+        }, {})
+      }
+    },
+    scales: {
+      x: {
+        type: 'time',
+        time: {
+          unit: props.duration === '24h' ? 'hour' : props.duration === '7d' ? 'day' : 'day',
+          displayFormats: {
+            hour: 'MMM d, ha',
+            day: 'MMM d'
+          }
+        },
+        grid: {
+          color: isDark.value ? 'rgba(75, 85, 99, 0.3)' : 'rgba(229, 231, 235, 0.8)',
+          drawBorder: false
+        },
+        ticks: {
+          color: isDark.value ? '#9ca3af' : '#6b7280',
+          maxRotation: 0,
+          autoSkipPadding: 20
+        }
+      },
+      y: {
+        beginAtZero: true,
+        grid: {
+          color: isDark.value ? 'rgba(75, 85, 99, 0.3)' : 'rgba(229, 231, 235, 0.8)',
+          drawBorder: false
+        },
+        ticks: {
+          color: isDark.value ? '#9ca3af' : '#6b7280',
+          callback: (value) => `${value}ms`
+        }
+      }
+    }
+  }
+})
+
+const fetchData = async () => {
+  loading.value = true
+  error.value = null
+  try {
+    const response = await fetch(`${props.serverUrl}/api/v1/endpoints/${props.endpointKey}/response-times/${props.duration}/history`, {
+      credentials: 'include'
+    })
+    if (response.status === 200) {
+      const data = await response.json()
+      timestamps.value = data.timestamps || []
+      values.value = data.values || []
+    } else {
+      error.value = 'Failed to load chart data'
+      console.error('[ResponseTimeChart] Error:', await response.text())
+    }
+  } catch (err) {
+    error.value = 'Failed to load chart data'
+    console.error('[ResponseTimeChart] Error:', err)
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(() => props.duration, () => {
+  fetchData()
+})
+
+onMounted(() => {
+  fetchData()
+  const observer = new MutationObserver(() => {
+    isDark.value = document.documentElement.classList.contains('dark')
+  })
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+  onUnmounted(() => observer.disconnect())
+})
+</script>
@@ -31,8 +31,28 @@ export const generatePrettyTimeAgo = (timestamp) => {
 * @returns {string} Time difference string
 */
 export const generatePrettyTimeDifference = (start, end) => {
-  let minutes = Math.ceil((new Date(start) - new Date(end)) / 1000 / 60);
-  return minutes + (minutes === 1 ? ' minute' : ' minutes');
+  const ms = new Date(start) - new Date(end)
+  const seconds = Math.floor(ms / 1000)
+  const minutes = Math.floor(seconds / 60)
+  const hours = Math.floor(minutes / 60)
+
+  if (hours > 0) {
+    const remainingMinutes = minutes % 60
+    const hoursText = hours + (hours === 1 ? ' hour' : ' hours')
+    if (remainingMinutes > 0) {
+      return hoursText + ' ' + remainingMinutes + (remainingMinutes === 1 ? ' minute' : ' minutes')
+    }
+    return hoursText
+  } else if (minutes > 0) {
+    const remainingSeconds = seconds % 60
+    const minutesText = minutes + (minutes === 1 ? ' minute' : ' minutes')
+    if (remainingSeconds > 0) {
+      return minutesText + ' ' + remainingSeconds + (remainingSeconds === 1 ? ' second' : ' seconds')
+    }
+    return minutesText
+  } else {
+    return seconds + (seconds === 1 ? ' second' : ' seconds')
+  }
 }

 /**
@@ -117,7 +117,13 @@
                </div>
              </CardHeader>
              <CardContent>
-                <img :src="generateResponseTimeChartImageURL(selectedChartDuration)" alt="Response time chart" class="w-full" />
+                <ResponseTimeChart
+                  v-if="endpointStatus && endpointStatus.key"
+                  :endpointKey="endpointStatus.key"
+                  :duration="selectedChartDuration"
+                  :serverUrl="serverUrl"
+                  :events="endpointStatus.events || []"
+                />
              </CardContent>
            </Card>

@@ -206,6 +212,7 @@ import EndpointCard from '@/components/EndpointCard.vue'
 import Settings from '@/components/Settings.vue'
 import Pagination from '@/components/Pagination.vue'
 import Loading from '@/components/Loading.vue'
+import ResponseTimeChart from '@/components/ResponseTimeChart.vue'
 import { SERVER_URL } from '@/main.js'
 import { generatePrettyTimeAgo, generatePrettyTimeDifference } from '@/utils/time'

@@ -389,10 +396,6 @@ const generateResponseTimeBadgeImageURL = (duration) => {
  return `${serverUrl}/api/v1/endpoints/${endpointStatus.value.key}/response-times/${duration}/badge.svg`
 }

-const generateResponseTimeChartImageURL = (duration) => {
-  return `${serverUrl}/api/v1/endpoints/${endpointStatus.value.key}/response-times/${duration}/chart.svg`
-}
-
 onMounted(() => {
  fetchData()
 })
Author	SHA1	Message	Date
TwiNandGitHub	e2f06e9ede	fix(ui): Modernize response time chart (#1373 )	2025-10-29 14:15:59 -04:00
TwiNandGitHub	beb9a2f3d9	feat(condition): Format certificate and domain expiration durations in human-readable format (#1370 )	2025-10-27 16:30:12 -04:00
MaxandGitHub	e469b6adf4	fix(external-endpoint): check per-endpoint maintenance windows (#1369 ) * fix(external-endpoint): check per-endpoint maintenance windows * refactor(external-endpoint): use tabs for indentation	2025-10-27 12:21:20 -04:00
Stefan Balea GitHub TwiN	2f8a3d2a02	feat(metrics): Add metrics for domain expiration (#1244 ) * Add metrics for domain expiration * Update grafana and prometheus versions and extend grafana dashboard with Domain expiration * feat(deps) update whois version --------- Co-authored-by: TwiN <twin@linux.com>	2025-10-25 12:45:15 -04:00
TwiNandGitHub	9495b7389e	feat(ui): Add support for `endpoints[].ui.hide-errors` to hide errors (#1361 ) Supersedes #1292	2025-10-22 13:13:53 -04:00
TwiN	c8bdecbde8	docs: Fix ordering in Table of Contents	2025-10-21 14:11:00 -04:00