From c05872fe0f5f4ece973173245a30bbfb946bec92 Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Fri, 24 Apr 2026 16:18:16 +0200
Subject: [PATCH 1/3] Format date labels for XY charts

---
 demo/app/Sharp/Dashboard/PostDashboard.php    |   2 +-
 package-lock.json                             | 141 +++++++++++++++---
 package.json                                  |   6 +-
 .../components/widgets/graph/Area.vue         |  16 +-
 .../components/widgets/graph/Bar.vue          |  16 +-
 .../components/widgets/graph/Line.vue         |  12 +-
 src/Dashboard/SharpDashboard.php              |   5 +-
 src/Dashboard/Widgets/IsXYChart.php           |   5 +
 .../Widgets/SharpAreaGraphWidget.php          |   2 +-
 src/Dashboard/Widgets/SharpBarGraphWidget.php |   2 +-
 .../Widgets/SharpGraphWidgetDataSet.php       |  25 +++-
 .../Widgets/SharpLineGraphWidget.php          |   2 +-
 src/Dashboard/Widgets/XYChartInterface.php    |   5 +
 tests/Unit/Dashboard/SharpDashboardTest.php   |  40 +++++
 tsconfig.json                                 |   1 +
 15 files changed, 240 insertions(+), 40 deletions(-)
 create mode 100644 src/Dashboard/Widgets/XYChartInterface.php

diff --git a/demo/app/Sharp/Dashboard/PostDashboard.php b/demo/app/Sharp/Dashboard/PostDashboard.php
index 4852162df..af88af502 100644
--- a/demo/app/Sharp/Dashboard/PostDashboard.php
+++ b/demo/app/Sharp/Dashboard/PostDashboard.php
@@ -65,7 +65,7 @@ protected function buildWidgetsData(): void
                 'visits_line',
                 SharpGraphWidgetDataSet::make(collect(CarbonPeriod::create($this->getStartDate(), $this->getEndDate()))
                     ->mapWithKeys(fn (Carbon $day, $k) => [
-                        $day->isoFormat('L') => rand(10, 100),
+                        $day->format('Y-m-d') => rand(10, 100),
                     ]))
                     ->setLabel('Visits')
                     ->setColor('#274754'),
diff --git a/package-lock.json b/package-lock.json
index 3199f7b4d..644ccb494 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,8 +29,8 @@
         "@tiptap/pm": "^3.3.0",
         "@tiptap/starter-kit": "^3.3.0",
         "@tiptap/vue-3": "^3.3.0",
-        "@unovis/ts": "^1.7.0-pre.1",
-        "@unovis/vue": "^1.7.0-pre.1",
+        "@unovis/ts": "^1.6.5",
+        "@unovis/vue": "^1.6.5",
         "@uppy/core": "^4.4.1",
         "@uppy/drop-target": "^3.1.1",
         "@uppy/thumbnail-generator": "^4.1.1",
@@ -77,7 +77,7 @@
         "laravel-vite-plugin": "^3.0.1",
         "tailwindcss": "^4.2.4",
         "tw-animate-css": "^1.3.0",
-        "typescript": "^5.6.3",
+        "typescript": "^6.0.3",
         "vite": "^8.0.10",
         "vite-bundle-visualizer": "^0.8.1",
         "vite-plugin-circular-dependency": "^0.4.1",
@@ -4245,16 +4245,34 @@
       }
     },
     "node_modules/@unovis/ts": {
-      "version": "1.7.0-pre.1",
-      "resolved": "https://registry.npmjs.org/@unovis/ts/-/ts-1.7.0-pre.1.tgz",
-      "integrity": "sha512-7iXo6MKtH4lkKFT0bD+n6B0+Z168IofiD6qE0932+MeONizVG35W7QCKCwLY2YgPdKRrSF38VLMnJVYlDSBLdw==",
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@unovis/ts/-/ts-1.6.5.tgz",
+      "integrity": "sha512-4qeo0nKESrCX7vZr+zEGFjg2QbyjgxXN8//mPnvZi0e2mf+ZrjIRmHReHwO3u7fqMD7kgMMMD1ABJJFBcOempA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@emotion/css": "^11.7.1",
         "@juggle/resize-observer": "^3.3.1",
         "@types/d3": "^7.4.0",
+        "@types/d3-array": "~3.2.2",
+        "@types/d3-axis": "~3.0.6",
+        "@types/d3-brush": "~3.0.6",
+        "@types/d3-chord": "~3.0.6",
         "@types/d3-collection": "^1.0.10",
+        "@types/d3-color": "~3.1.3",
+        "@types/d3-drag": "~3.0.7",
+        "@types/d3-ease": "~3.0.2",
+        "@types/d3-force": "~3.0.10",
+        "@types/d3-geo": "~3.1.0",
+        "@types/d3-hierarchy": "~3.1.7",
+        "@types/d3-interpolate": "~3.0.4",
+        "@types/d3-path": "~3.1.1",
         "@types/d3-sankey": "^0.12.4",
+        "@types/d3-scale": "~4.0.9",
+        "@types/d3-selection": "~3.0.0",
+        "@types/d3-shape": "~3.1.7",
+        "@types/d3-timer": "~3.0.2",
+        "@types/d3-transition": "~3.0.9",
+        "@types/d3-zoom": "~3.0.8",
         "@types/dagre": "^0.7.50",
         "@types/geojson": "^7946.0.8",
         "@types/leaflet": "1.7.6",
@@ -4267,10 +4285,28 @@
         "@unovis/dagre-layout": "0.8.8-2",
         "@unovis/graphlibrary": "2.2.0-2",
         "d3": "^7.2.1",
+        "d3-array": "~3",
+        "d3-axis": "~3",
+        "d3-brush": "~3",
+        "d3-chord": "~3",
         "d3-collection": "^1.0.7",
+        "d3-color": "~3",
+        "d3-drag": "~3",
+        "d3-ease": "~3",
+        "d3-force": "~3",
+        "d3-geo": "~3",
         "d3-geo-projection": "^4.0.0",
+        "d3-hierarchy": "~3",
+        "d3-interpolate": "~3",
         "d3-interpolate-path": "^2.2.3",
+        "d3-path": "~3",
         "d3-sankey": "^0.12.3",
+        "d3-scale": "~4",
+        "d3-selection": "~3",
+        "d3-shape": "~3",
+        "d3-timer": "~3",
+        "d3-transition": "~3",
+        "d3-zoom": "~3",
         "elkjs": "^0.10.0",
         "geojson": "^0.5.0",
         "leaflet": "1.7.1",
@@ -4280,7 +4316,8 @@
         "three": "^0.135.0",
         "throttle-debounce": "^5.0.0",
         "topojson-client": "^3.1.0",
-        "tslib": "^2.3.1"
+        "tslib": "^2.3.1",
+        "typescript": "~4.2.4"
       }
     },
     "node_modules/@unovis/ts/node_modules/@types/leaflet": {
@@ -4304,13 +4341,26 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/@unovis/ts/node_modules/typescript": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.4.tgz",
+      "integrity": "sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==",
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/@unovis/vue": {
-      "version": "1.7.0-pre.1",
-      "resolved": "https://registry.npmjs.org/@unovis/vue/-/vue-1.7.0-pre.1.tgz",
-      "integrity": "sha512-m4LLLm4L6kWMq1Nh068IORSQX4dQb+4qUZBlUnSXlBCj4bBdqjoHmnsUcYQKhYhP96eULA5M8Jm5KbKsVjvdNA==",
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@unovis/vue/-/vue-1.6.5.tgz",
+      "integrity": "sha512-BSyEeuenhSCqo0kox4xe3bWMDUn0gfF4haggrVhhNWcp6pDmctniDebOP/8AFKlhPhfGJ6b39MdvoQNhXwc46A==",
       "license": "Apache-2.0",
       "peerDependencies": {
-        "@unovis/ts": "1.7.0-pre.1",
+        "@unovis/ts": "1.6.5",
         "vue": "^3"
       }
     },
@@ -15462,10 +15512,11 @@
       "dev": true
     },
     "node_modules/typescript": {
-      "version": "5.6.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
-      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
+      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
       "devOptional": true,
+      "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -23467,15 +23518,33 @@
       }
     },
     "@unovis/ts": {
-      "version": "1.7.0-pre.1",
-      "resolved": "https://registry.npmjs.org/@unovis/ts/-/ts-1.7.0-pre.1.tgz",
-      "integrity": "sha512-7iXo6MKtH4lkKFT0bD+n6B0+Z168IofiD6qE0932+MeONizVG35W7QCKCwLY2YgPdKRrSF38VLMnJVYlDSBLdw==",
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@unovis/ts/-/ts-1.6.5.tgz",
+      "integrity": "sha512-4qeo0nKESrCX7vZr+zEGFjg2QbyjgxXN8//mPnvZi0e2mf+ZrjIRmHReHwO3u7fqMD7kgMMMD1ABJJFBcOempA==",
       "requires": {
         "@emotion/css": "^11.7.1",
         "@juggle/resize-observer": "^3.3.1",
         "@types/d3": "^7.4.0",
+        "@types/d3-array": "~3.2.2",
+        "@types/d3-axis": "~3.0.6",
+        "@types/d3-brush": "~3.0.6",
+        "@types/d3-chord": "~3.0.6",
         "@types/d3-collection": "^1.0.10",
+        "@types/d3-color": "~3.1.3",
+        "@types/d3-drag": "~3.0.7",
+        "@types/d3-ease": "~3.0.2",
+        "@types/d3-force": "~3.0.10",
+        "@types/d3-geo": "~3.1.0",
+        "@types/d3-hierarchy": "~3.1.7",
+        "@types/d3-interpolate": "~3.0.4",
+        "@types/d3-path": "~3.1.1",
         "@types/d3-sankey": "^0.12.4",
+        "@types/d3-scale": "~4.0.9",
+        "@types/d3-selection": "~3.0.0",
+        "@types/d3-shape": "~3.1.7",
+        "@types/d3-timer": "~3.0.2",
+        "@types/d3-transition": "~3.0.9",
+        "@types/d3-zoom": "~3.0.8",
         "@types/dagre": "^0.7.50",
         "@types/geojson": "^7946.0.8",
         "@types/leaflet": "1.7.6",
@@ -23488,10 +23557,28 @@
         "@unovis/dagre-layout": "0.8.8-2",
         "@unovis/graphlibrary": "2.2.0-2",
         "d3": "^7.2.1",
+        "d3-array": "~3",
+        "d3-axis": "~3",
+        "d3-brush": "~3",
+        "d3-chord": "~3",
         "d3-collection": "^1.0.7",
+        "d3-color": "~3",
+        "d3-drag": "~3",
+        "d3-ease": "~3",
+        "d3-force": "~3",
+        "d3-geo": "~3",
         "d3-geo-projection": "^4.0.0",
+        "d3-hierarchy": "~3",
+        "d3-interpolate": "~3",
         "d3-interpolate-path": "^2.2.3",
+        "d3-path": "~3",
         "d3-sankey": "^0.12.3",
+        "d3-scale": "~4",
+        "d3-selection": "~3",
+        "d3-shape": "~3",
+        "d3-timer": "~3",
+        "d3-transition": "~3",
+        "d3-zoom": "~3",
         "elkjs": "^0.10.0",
         "geojson": "^0.5.0",
         "leaflet": "1.7.1",
@@ -23501,7 +23588,8 @@
         "three": "^0.135.0",
         "throttle-debounce": "^5.0.0",
         "topojson-client": "^3.1.0",
-        "tslib": "^2.3.1"
+        "tslib": "^2.3.1",
+        "typescript": "~4.2.4"
       },
       "dependencies": {
         "@types/leaflet": {
@@ -23521,13 +23609,18 @@
           "version": "2.8.1",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
           "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+        },
+        "typescript": {
+          "version": "4.2.4",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.4.tgz",
+          "integrity": "sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg=="
         }
       }
     },
     "@unovis/vue": {
-      "version": "1.7.0-pre.1",
-      "resolved": "https://registry.npmjs.org/@unovis/vue/-/vue-1.7.0-pre.1.tgz",
-      "integrity": "sha512-m4LLLm4L6kWMq1Nh068IORSQX4dQb+4qUZBlUnSXlBCj4bBdqjoHmnsUcYQKhYhP96eULA5M8Jm5KbKsVjvdNA==",
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@unovis/vue/-/vue-1.6.5.tgz",
+      "integrity": "sha512-BSyEeuenhSCqo0kox4xe3bWMDUn0gfF4haggrVhhNWcp6pDmctniDebOP/8AFKlhPhfGJ6b39MdvoQNhXwc46A==",
       "requires": {}
     },
     "@uppy/companion-client": {
@@ -34946,9 +35039,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "5.6.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
-      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
+      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
       "devOptional": true
     },
     "typescript-auto-import-cache": {
diff --git a/package.json b/package.json
index 670eec477..0a267e331 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "laravel-vite-plugin": "^3.0.1",
     "tailwindcss": "^4.2.4",
     "tw-animate-css": "^1.3.0",
-    "typescript": "^5.6.3",
+    "typescript": "^6.0.3",
     "vite": "^8.0.10",
     "vite-bundle-visualizer": "^0.8.1",
     "vite-plugin-circular-dependency": "^0.4.1",
@@ -57,8 +57,8 @@
     "@tiptap/pm": "^3.3.0",
     "@tiptap/starter-kit": "^3.3.0",
     "@tiptap/vue-3": "^3.3.0",
-    "@unovis/ts": "^1.7.0-pre.1",
-    "@unovis/vue": "^1.7.0-pre.1",
+    "@unovis/ts": "^1.6.5",
+    "@unovis/vue": "^1.6.5",
     "@uppy/core": "^4.4.1",
     "@uppy/drop-target": "^3.1.1",
     "@uppy/thumbnail-generator": "^4.1.1",
diff --git a/resources/js/dashboard/components/widgets/graph/Area.vue b/resources/js/dashboard/components/widgets/graph/Area.vue
index 5de32129a..b70ef3ccf 100644
--- a/resources/js/dashboard/components/widgets/graph/Area.vue
+++ b/resources/js/dashboard/components/widgets/graph/Area.vue
@@ -15,7 +15,17 @@
 
     const props = defineProps<DashboardWidgetProps<AreaGraphWidgetData>>();
 
-    const { data, x, y, color, tooltipTemplate, containerConfig, chartConfig, xAxisConfig, yAxisConfig } = useXYChart(props);
+    const {
+        data,
+        x,
+        y,
+        color,
+        tooltipTemplate,
+        containerConfig,
+        chartConfig,
+        xAxisConfig,
+        yAxisConfig
+    } = useXYChart(props);
 
     const svgDefs = computed(() => props.value?.datasets.map((dataset, i) => `
         <linearGradient id="fill-${i}" x1="0" y1="0" x2="0" y2="1">
@@ -101,11 +111,11 @@
                 } satisfies CrosshairConfigInterface<Datum>"
             />
 
-            <ChartTooltip />
+            <ChartTooltip/>
         </VisXYContainer>
 
         <template v-if="props.widget.showLegend && !props.widget.minimal">
-            <ChartLegendContent />
+            <ChartLegendContent/>
         </template>
     </ChartContainer>
 </template>
diff --git a/resources/js/dashboard/components/widgets/graph/Bar.vue b/resources/js/dashboard/components/widgets/graph/Bar.vue
index 698e56bfa..7a69fd8bf 100644
--- a/resources/js/dashboard/components/widgets/graph/Bar.vue
+++ b/resources/js/dashboard/components/widgets/graph/Bar.vue
@@ -19,7 +19,17 @@
 
     const props = defineProps<DashboardWidgetProps<BarGraphWidgetData>>();
 
-    const { data, x, y, color, tooltipTemplate, chartConfig, xAxisConfig, containerConfig, yAxisConfig } = useXYChart(props);
+    const {
+        data,
+        x,
+        y,
+        color,
+        tooltipTemplate,
+        chartConfig,
+        xAxisConfig,
+        containerConfig,
+        yAxisConfig
+    } = useXYChart(props);
 </script>
 
 <template>
@@ -58,7 +68,7 @@
                 />
             </template>
 
-            <ChartTooltip :triggers="{ [GroupedBar.selectors.barGroup]: tooltipTemplate }" />
+            <ChartTooltip :triggers="{ [GroupedBar.selectors.barGroup]: tooltipTemplate }"/>
 
             <VisGroupedBar
                 v-bind="{
@@ -72,7 +82,7 @@
         </VisXYContainer>
 
         <template v-if="props.widget.showLegend && !props.widget.minimal">
-            <ChartLegendContent />
+            <ChartLegendContent/>
         </template>
     </ChartContainer>
 </template>
diff --git a/resources/js/dashboard/components/widgets/graph/Line.vue b/resources/js/dashboard/components/widgets/graph/Line.vue
index e2fa8ab96..2b5f6b5db 100644
--- a/resources/js/dashboard/components/widgets/graph/Line.vue
+++ b/resources/js/dashboard/components/widgets/graph/Line.vue
@@ -13,7 +13,17 @@
 
     const props = defineProps<DashboardWidgetProps<LineGraphWidgetData>>();
 
-    const { data, x, y, color, tooltipTemplate, containerConfig, chartConfig, xAxisConfig, yAxisConfig } = useXYChart(props);
+    const {
+        data,
+        x,
+        y,
+        color,
+        tooltipTemplate,
+        containerConfig,
+        chartConfig,
+        xAxisConfig,
+        yAxisConfig
+    } = useXYChart(props);
 </script>
 
 <template>
diff --git a/src/Dashboard/SharpDashboard.php b/src/Dashboard/SharpDashboard.php
index 7c16dbf56..57d447380 100644
--- a/src/Dashboard/SharpDashboard.php
+++ b/src/Dashboard/SharpDashboard.php
@@ -6,6 +6,7 @@
 use Code16\Sharp\Dashboard\Widgets\SharpGraphWidgetDataSet;
 use Code16\Sharp\Dashboard\Widgets\SharpWidget;
 use Code16\Sharp\Dashboard\Widgets\WidgetsContainer;
+use Code16\Sharp\Dashboard\Widgets\XYChartInterface;
 use Code16\Sharp\EntityList\Traits\HandleDashboardCommands;
 use Code16\Sharp\Filters\Concerns\HasFilters;
 use Code16\Sharp\Utils\Traits\HandlePageAlertMessage;
@@ -104,8 +105,10 @@ final public function data(): array
 
             // First, graph widgets dataSets
             ->map(function (array $dataSets, string $key) {
+                $widget = $this->findWidgetByKey($key);
+                $hasDateLabels = $widget instanceof XYChartInterface && $widget->hasDisplayHorizontalAxisAsTimeline();
                 $dataSetsValues = collect($dataSets)
-                    ->map(fn ($dataSet) => $dataSet->toArray());
+                    ->map(fn (SharpGraphWidgetDataSet $dataSet) => $dataSet->withDateLabels($hasDateLabels)->toArray());
 
                 return [
                     'key' => $key,
diff --git a/src/Dashboard/Widgets/IsXYChart.php b/src/Dashboard/Widgets/IsXYChart.php
index 0ca70b8c5..880984106 100644
--- a/src/Dashboard/Widgets/IsXYChart.php
+++ b/src/Dashboard/Widgets/IsXYChart.php
@@ -7,6 +7,11 @@ trait IsXYChart
     protected bool $displayHorizontalAxisAsTimeline = false;
     protected bool $enableHorizontalAxisLabelSampling = false;
 
+    public function hasDisplayHorizontalAxisAsTimeline(): bool
+    {
+        return $this->displayHorizontalAxisAsTimeline;
+    }
+
     public function setDisplayHorizontalAxisAsTimeline(bool $displayAsTimeline = true): self
     {
         $this->displayHorizontalAxisAsTimeline = $displayAsTimeline;
diff --git a/src/Dashboard/Widgets/SharpAreaGraphWidget.php b/src/Dashboard/Widgets/SharpAreaGraphWidget.php
index bb4bc6375..b9a7480ac 100644
--- a/src/Dashboard/Widgets/SharpAreaGraphWidget.php
+++ b/src/Dashboard/Widgets/SharpAreaGraphWidget.php
@@ -2,7 +2,7 @@
 
 namespace Code16\Sharp\Dashboard\Widgets;
 
-class SharpAreaGraphWidget extends SharpGraphWidget
+class SharpAreaGraphWidget extends SharpGraphWidget implements XYChartInterface
 {
     use IsXYChart;
 
diff --git a/src/Dashboard/Widgets/SharpBarGraphWidget.php b/src/Dashboard/Widgets/SharpBarGraphWidget.php
index d52a225f2..fad98fc08 100644
--- a/src/Dashboard/Widgets/SharpBarGraphWidget.php
+++ b/src/Dashboard/Widgets/SharpBarGraphWidget.php
@@ -2,7 +2,7 @@
 
 namespace Code16\Sharp\Dashboard\Widgets;
 
-class SharpBarGraphWidget extends SharpGraphWidget
+class SharpBarGraphWidget extends SharpGraphWidget implements XYChartInterface
 {
     use IsXYChart;
 
diff --git a/src/Dashboard/Widgets/SharpGraphWidgetDataSet.php b/src/Dashboard/Widgets/SharpGraphWidgetDataSet.php
index c1430ccc0..154e7f2d8 100644
--- a/src/Dashboard/Widgets/SharpGraphWidgetDataSet.php
+++ b/src/Dashboard/Widgets/SharpGraphWidgetDataSet.php
@@ -2,6 +2,7 @@
 
 namespace Code16\Sharp\Dashboard\Widgets;
 
+use Carbon\Carbon;
 use Illuminate\Support\Collection;
 
 class SharpGraphWidgetDataSet
@@ -9,6 +10,7 @@ class SharpGraphWidgetDataSet
     protected array $values;
     protected ?string $label = null;
     protected ?string $color = null;
+    protected bool $hasDateLabels = false;
 
     protected function __construct(array|Collection $values)
     {
@@ -36,17 +38,38 @@ public function setColor(string $color): self
         return $this;
     }
 
+    /**
+     * @internal
+     */
+    public function withDateLabels(bool $hasDateLabels = true): self
+    {
+        $this->hasDateLabels = $hasDateLabels;
+
+        return $this;
+    }
+
     protected function formatValues(array $values): array
     {
         return array_map(fn ($value) => (float) $value, array_values($values));
     }
 
+    protected function formatLabels(array $values): array
+    {
+        if ($this->hasDateLabels) {
+            return array_map(function ($value) {
+                return (new Carbon($value))->setTimezone(config('app.timezone'))->toAtomString();
+            }, array_keys($values));
+        }
+
+        return array_keys($values);
+    }
+
     public function toArray(): array
     {
         return collect()
             ->merge([
                 'data' => $this->formatValues($this->values),
-                'labels' => array_keys($this->values),
+                'labels' => $this->formatLabels($this->values),
             ])
             ->when(
                 $this->label,
diff --git a/src/Dashboard/Widgets/SharpLineGraphWidget.php b/src/Dashboard/Widgets/SharpLineGraphWidget.php
index d6b5eaea5..7af15eb67 100644
--- a/src/Dashboard/Widgets/SharpLineGraphWidget.php
+++ b/src/Dashboard/Widgets/SharpLineGraphWidget.php
@@ -2,7 +2,7 @@
 
 namespace Code16\Sharp\Dashboard\Widgets;
 
-class SharpLineGraphWidget extends SharpGraphWidget
+class SharpLineGraphWidget extends SharpGraphWidget implements XYChartInterface
 {
     use IsXYChart;
 
diff --git a/src/Dashboard/Widgets/XYChartInterface.php b/src/Dashboard/Widgets/XYChartInterface.php
new file mode 100644
index 000000000..539546fe5
--- /dev/null
+++ b/src/Dashboard/Widgets/XYChartInterface.php
@@ -0,0 +1,5 @@
+<?php
+
+namespace Code16\Sharp\Dashboard\Widgets;
+
+interface XYChartInterface {}
diff --git a/tests/Unit/Dashboard/SharpDashboardTest.php b/tests/Unit/Dashboard/SharpDashboardTest.php
index 9a3e685b8..d506ced64 100644
--- a/tests/Unit/Dashboard/SharpDashboardTest.php
+++ b/tests/Unit/Dashboard/SharpDashboardTest.php
@@ -177,6 +177,46 @@ protected function buildWidgetsData(): void
         ]);
 });
 
+it('handles graph widget data with date labels', function () {
+    $dashboard = new class() extends FakeSharpDashboard
+    {
+        protected function buildWidgets(WidgetsContainer $widgetsContainer): void
+        {
+            $widgetsContainer->addWidget(SharpBarGraphWidget::make('widget')->setDisplayHorizontalAxisAsTimeline());
+        }
+
+        protected function buildWidgetsData(): void
+        {
+            $this->addGraphDataSet(
+                'widget',
+                SharpGraphWidgetDataSet::make([
+                    '2026-04-03' => 10,
+                    '2026-04-04 12:30:04' => 20,
+                    '2026-04-05' => 30,
+                ])->setLabel('test')->setColor('blue'));
+        }
+    };
+
+    expect($dashboard->data())
+        ->toEqual([
+            'widget' => [
+                'key' => 'widget',
+                'datasets' => [
+                    [
+                        'data' => [10, 20, 30],
+                        'label' => 'test',
+                        'color' => 'blue',
+                    ],
+                ],
+                'labels' => [
+                    '2026-04-03T00:00:00+00:00',
+                    '2026-04-04T12:30:04+00:00',
+                    '2026-04-05T00:00:00+00:00',
+                ],
+            ],
+        ]);
+});
+
 it('handles graph widget data with multiple datasets', function () {
     $dashboard = new class() extends FakeSharpDashboard
     {
diff --git a/tsconfig.json b/tsconfig.json
index b1acd82e8..97dc506d4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,6 +6,7 @@
     "downlevelIteration": true,
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
+    "strictNullChecks": false,
     "paths": {
       "@/*": ["./resources/js/*"],
       "ziggy-js": ["./vendor/tightenco/ziggy"]

From 9b42e02c836d8231e00cbe26e71ad35b63a3a4b9 Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Fri, 24 Apr 2026 18:08:40 +0200
Subject: [PATCH 2/3] Improvement + add doc

---
 docs/guide/dashboard-widgets/graph.md         | 15 +++++++++++++++
 src/Dashboard/SharpDashboard.php              | 19 +++++++++++++++++--
 .../Dashboard/SharpDashboardDataException.php |  7 +++++++
 3 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 src/Exceptions/Dashboard/SharpDashboardDataException.php

diff --git a/docs/guide/dashboard-widgets/graph.md b/docs/guide/dashboard-widgets/graph.md
index 620c686de..058f35f21 100644
--- a/docs/guide/dashboard-widgets/graph.md
+++ b/docs/guide/dashboard-widgets/graph.md
@@ -125,3 +125,18 @@ We use an instance of `Code16\Sharp\Dashboard\Widgets\SharpGraphWidgetDataSet` t
 - `setColor(string $color)` where $color can be an HTML constant or an hexadecimal value, to set the data color.
 
 You can chain calls to `addGraphDataSet()` to add multiple data sets, with different colors and labels.
+
+### Date labels
+
+When `setDisplayHorizontalAxisAsTimeline()` is used, dataset values should have a key parsable by Carbon (e.g `Y-m-d` or `Y-m-d H:i:s`), for example:
+
+```php
+$this->addGraphDataSet(
+    'daily_records',
+    SharpGraphWidgetDataSet::make(DailyRecord::get()->mapWithKeys(fn ($record) => [
+        $record->date->format('Y-m-d') => $record->fail_count
+    ]))
+        ->setLabel('Daily records')
+        ->setColor('blue')
+);
+```
diff --git a/src/Dashboard/SharpDashboard.php b/src/Dashboard/SharpDashboard.php
index 57d447380..94019ec4b 100644
--- a/src/Dashboard/SharpDashboard.php
+++ b/src/Dashboard/SharpDashboard.php
@@ -2,12 +2,14 @@
 
 namespace Code16\Sharp\Dashboard;
 
+use Carbon\Exceptions\InvalidFormatException;
 use Code16\Sharp\Dashboard\Layout\DashboardLayout;
 use Code16\Sharp\Dashboard\Widgets\SharpGraphWidgetDataSet;
 use Code16\Sharp\Dashboard\Widgets\SharpWidget;
 use Code16\Sharp\Dashboard\Widgets\WidgetsContainer;
 use Code16\Sharp\Dashboard\Widgets\XYChartInterface;
 use Code16\Sharp\EntityList\Traits\HandleDashboardCommands;
+use Code16\Sharp\Exceptions\Dashboard\SharpDashboardDataException;
 use Code16\Sharp\Filters\Concerns\HasFilters;
 use Code16\Sharp\Utils\Traits\HandlePageAlertMessage;
 use Illuminate\Support\Arr;
@@ -106,9 +108,8 @@ final public function data(): array
             // First, graph widgets dataSets
             ->map(function (array $dataSets, string $key) {
                 $widget = $this->findWidgetByKey($key);
-                $hasDateLabels = $widget instanceof XYChartInterface && $widget->hasDisplayHorizontalAxisAsTimeline();
                 $dataSetsValues = collect($dataSets)
-                    ->map(fn (SharpGraphWidgetDataSet $dataSet) => $dataSet->withDateLabels($hasDateLabels)->toArray());
+                    ->map(fn (SharpGraphWidgetDataSet $dataSet) => $this->dataSetToArray($widget, $dataSet));
 
                 return [
                     'key' => $key,
@@ -197,6 +198,20 @@ final protected function setOrderedListData(string $panelWidgetKey, array $data)
         return $this;
     }
 
+    private function dataSetToArray(SharpWidget $widget, SharpGraphWidgetDataSet $dataSet): array
+    {
+        $hasDateLabels = $widget instanceof XYChartInterface && $widget->hasDisplayHorizontalAxisAsTimeline();
+
+        try {
+            return $dataSet->withDateLabels($hasDateLabels)->toArray();
+        } catch (InvalidFormatException $e) {
+            throw new SharpDashboardDataException(
+                'Invalid date format for ['.$widget->getKey().'] dataset: '.$e->getMessage(),
+                previous: $e
+            );
+        }
+    }
+
     private function checkDashboardIsBuilt(): void
     {
         if (! $this->dashboardBuilt) {
diff --git a/src/Exceptions/Dashboard/SharpDashboardDataException.php b/src/Exceptions/Dashboard/SharpDashboardDataException.php
new file mode 100644
index 000000000..4eb519de4
--- /dev/null
+++ b/src/Exceptions/Dashboard/SharpDashboardDataException.php
@@ -0,0 +1,7 @@
+<?php
+
+namespace Code16\Sharp\Exceptions\Dashboard;
+
+use Code16\Sharp\Exceptions\SharpException;
+
+class SharpDashboardDataException extends SharpException {}

From 77955ffc38957ce0131adcd2e0f83cf97d34de27 Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Fri, 24 Apr 2026 19:19:29 +0200
Subject: [PATCH 3/3] Deploy v10 tags

---
 .github/workflows/deploy.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 49656d033..befb46091 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -5,6 +5,7 @@ on:
   push:
     tags:
     - 'v9.*'
+    - 'v10.*'
 jobs:
   deploy:
     runs-on: ubuntu-latest