Format date labels for XY charts

.github/workflows/deploy.yml

@@ -5,6 +5,7 @@ on:
   push:
     tags:
     - 'v9.*'
+    - 'v10.*'
 jobs:
   deploy:
     runs-on: ubuntu-latest

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'),

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')
+);
+```

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",

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>

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>

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>