From 8decb5cac14fdece67a8239cd074f5251a1612d1 Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Thu, 8 Jan 2026 20:05:48 +0100
Subject: [PATCH] Allow custom chart tooltip format

---
 demo/app/Sharp/Dashboard/DemoDashboard.php    |  2 +
 .../ui/chart/ChartTooltipContent.vue          |  3 +-
 .../components/widgets/graph/useXYChart.ts    |  6 ++-
 resources/js/types/generated.d.ts             | 25 ++++++++++++
 .../Widgets/Graph/NumberFormatOptions.php     | 40 +++++++++++++++++++
 src/Dashboard/Widgets/SharpGraphWidget.php    | 11 +++++
 .../Dashboard/Widgets/AreaGraphWidgetData.php |  2 +
 .../Dashboard/Widgets/BarGraphWidgetData.php  |  2 +
 .../Dashboard/Widgets/LineGraphWidgetData.php |  2 +
 .../Dashboard/Widgets/PieGraphWidgetData.php  |  2 +
 src/Dev/config/typescript-transformer.php     |  8 ++--
 11 files changed, 98 insertions(+), 5 deletions(-)
 create mode 100644 src/Dashboard/Widgets/Graph/NumberFormatOptions.php

diff --git a/demo/app/Sharp/Dashboard/DemoDashboard.php b/demo/app/Sharp/Dashboard/DemoDashboard.php
index 02b91c442..be540b964 100644
--- a/demo/app/Sharp/Dashboard/DemoDashboard.php
+++ b/demo/app/Sharp/Dashboard/DemoDashboard.php
@@ -16,6 +16,7 @@
 use Code16\Sharp\Dashboard\Layout\DashboardLayoutRow;
 use Code16\Sharp\Dashboard\Layout\DashboardLayoutSection;
 use Code16\Sharp\Dashboard\SharpDashboard;
+use Code16\Sharp\Dashboard\Widgets\Graph\NumberFormatOptions;
 use Code16\Sharp\Dashboard\Widgets\SharpAreaGraphWidget;
 use Code16\Sharp\Dashboard\Widgets\SharpBarGraphWidget;
 use Code16\Sharp\Dashboard\Widgets\SharpFigureWidget;
@@ -56,6 +57,7 @@ protected function buildWidgets(WidgetsContainer $widgetsContainer): void
                 SharpAreaGraphWidget::make('visits_line')
                     ->setTitle('Visits')
                     ->setHeight(200)
+                    ->setTooltipValueFormat(new NumberFormatOptions(style: 'unit', unit: 'gigabyte'))
                     // ->setStacked()
                     // ->setShowStackTotal(label: 'Total visits')
                     // ->setShowLegend()
diff --git a/resources/js/components/ui/chart/ChartTooltipContent.vue b/resources/js/components/ui/chart/ChartTooltipContent.vue
index 88380e708..d831a2417 100644
--- a/resources/js/components/ui/chart/ChartTooltipContent.vue
+++ b/resources/js/components/ui/chart/ChartTooltipContent.vue
@@ -11,6 +11,7 @@ const props = withDefaults(defineProps<{
   nameKey?: string
   labelKey?: string
   labelFormatter?: (d: number | Date) => string
+  valueFormatter?: (d: number) => string
   payload?: Record<string, any>
   config?: ChartConfig
   class?: HTMLAttributes["class"]
@@ -97,7 +98,7 @@ const tooltipLabel = computed(() => {
                   </div>
               </template>
             <span v-if="value != null" class="text-foreground font-mono font-medium tabular-nums">
-              {{ value.toLocaleString() }}
+              {{ props.valueFormatter ? props.valueFormatter(value) : value.toLocaleString() }}
             </span>
           </div>
         </div>
diff --git a/resources/js/dashboard/components/widgets/graph/useXYChart.ts b/resources/js/dashboard/components/widgets/graph/useXYChart.ts
index a99a015dd..d056b0b45 100644
--- a/resources/js/dashboard/components/widgets/graph/useXYChart.ts
+++ b/resources/js/dashboard/components/widgets/graph/useXYChart.ts
@@ -87,7 +87,8 @@ export function useXYChart(props: DashboardWidgetProps<LineGraphWidgetData | Bar
                 return formatDate(nearestDate);
             }
             return props.value.labels[Math.round(x as number)];
-        }
+        },
+        valueFormatter: (y) => new Intl.NumberFormat(undefined, props.widget.formatOptions as any).format(y),
     });
 
     const rotate = computed(() =>
@@ -138,6 +139,9 @@ export function useXYChart(props: DashboardWidgetProps<LineGraphWidgetData | Bar
             if(!Number.isInteger(tick) && !needsDecimals.value) {
                 return '';
             }
+            // if(props.widget.formatOptions) {
+            //     return new Intl.NumberFormat(undefined, props.widget.formatOptions as any).format(tick as number);
+            // }
         },
         tickValues: yScale.value.ticks(yNumTicks.value),
     }));
diff --git a/resources/js/types/generated.d.ts b/resources/js/types/generated.d.ts
index a597cb7f6..ca61539d1 100644
--- a/resources/js/types/generated.d.ts
+++ b/resources/js/types/generated.d.ts
@@ -9,6 +9,7 @@ export type AreaGraphWidgetData = {
   ratioX: number | null;
   ratioY: number | null;
   height: number | null;
+  formatOptions: NumberFormatOptions | null;
   displayHorizontalAxisAsTimeline: boolean;
   enableHorizontalAxisLabelSampling: boolean;
   curved: boolean;
@@ -39,6 +40,7 @@ export type BarGraphWidgetData = {
   ratioX: number | null;
   ratioY: number | null;
   height: number | null;
+  formatOptions: NumberFormatOptions | null;
   displayHorizontalAxisAsTimeline: boolean;
   enableHorizontalAxisLabelSampling: boolean;
   horizontal: boolean;
@@ -718,6 +720,7 @@ export type LineGraphWidgetData = {
   ratioX: number | null;
   ratioY: number | null;
   height: number | null;
+  formatOptions: NumberFormatOptions | null;
   displayHorizontalAxisAsTimeline: boolean;
   enableHorizontalAxisLabelSampling: boolean;
   curved: boolean;
@@ -753,6 +756,27 @@ export type NotificationData = {
   autoHide: boolean;
 };
 export type NotificationLevel = "info" | "success" | "warning" | "danger";
+export type NumberFormatOptions = {
+  compactDisplay: string | null;
+  currency: string | null;
+  currencyDisplay: string | null;
+  currencySign: string | null;
+  maximumFractionDigits: number | null;
+  maximumSignificantDigits: number | null;
+  minimumFractionDigits: number | null;
+  minimumIntegerDigits: number | null;
+  minimumSignificantDigits: number | null;
+  notation: string | null;
+  roundingIncrement: number | null;
+  roundingMode: string | null;
+  roundingPriority: number | null;
+  signDisplay: string | null;
+  style: string | null;
+  trailingZeroDisplay: number | null;
+  unit: string | null;
+  unitDisplay: string | null;
+  useGrouping: boolean | null;
+};
 export type OrderedListWidgetData = {
   value?: {
     key: string;
@@ -809,6 +833,7 @@ export type PieGraphWidgetData = {
   ratioX: number | null;
   ratioY: number | null;
   height: number | null;
+  formatOptions: NumberFormatOptions | null;
 };
 export type SearchResultLinkData = {
   link: string;
diff --git a/src/Dashboard/Widgets/Graph/NumberFormatOptions.php b/src/Dashboard/Widgets/Graph/NumberFormatOptions.php
new file mode 100644
index 000000000..cdcc24724
--- /dev/null
+++ b/src/Dashboard/Widgets/Graph/NumberFormatOptions.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace Code16\Sharp\Dashboard\Widgets\Graph;
+
+use Illuminate\Contracts\Support\Arrayable;
+use Spatie\TypeScriptTransformer\Attributes\TypeScript;
+
+#[TypeScript]
+readonly class NumberFormatOptions implements Arrayable
+{
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options
+     */
+    public function __construct(
+        public ?string $style = null,
+        public ?string $currency = null,
+        public ?string $currencyDisplay = null,
+        public ?string $currencySign = null,
+        public ?bool $useGrouping = null,
+        public ?int $minimumIntegerDigits = null,
+        public ?int $minimumFractionDigits = null,
+        public ?int $maximumFractionDigits = null,
+        public ?int $minimumSignificantDigits = null,
+        public ?int $maximumSignificantDigits = null,
+        public ?string $notation = null,
+        public ?string $compactDisplay = null,
+        public ?string $signDisplay = null,
+        public ?string $unit = null,
+        public ?string $unitDisplay = null,
+        public ?string $roundingMode = null,
+        public ?int $roundingPriority = null,
+        public ?int $roundingIncrement = null,
+        public ?int $trailingZeroDisplay = null,
+    ) {}
+
+    public function toArray(): array
+    {
+        return array_filter(get_object_vars($this), fn ($value) => $value !== null);
+    }
+}
diff --git a/src/Dashboard/Widgets/SharpGraphWidget.php b/src/Dashboard/Widgets/SharpGraphWidget.php
index f27c19ea9..e4710fc9e 100644
--- a/src/Dashboard/Widgets/SharpGraphWidget.php
+++ b/src/Dashboard/Widgets/SharpGraphWidget.php
@@ -2,6 +2,8 @@
 
 namespace Code16\Sharp\Dashboard\Widgets;
 
+use Code16\Sharp\Dashboard\Widgets\Graph\NumberFormatOptions;
+
 abstract class SharpGraphWidget extends SharpWidget
 {
     protected ?string $display = null;
@@ -9,6 +11,7 @@ abstract class SharpGraphWidget extends SharpWidget
     protected ?int $height = null;
     protected bool $showLegend = true;
     protected bool $minimal = false;
+    protected ?NumberFormatOptions $formatOptions = null;
 
     public function setRatio(string $ratio): self
     {
@@ -38,6 +41,13 @@ public function setMinimal(bool $minimal = true): self
         return $this;
     }
 
+    public function setTooltipValueFormat(NumberFormatOptions $formatOptions): self
+    {
+        $this->formatOptions = $formatOptions;
+
+        return $this;
+    }
+
     public function toArray(): array
     {
         return parent::buildArray([
@@ -47,6 +57,7 @@ public function toArray(): array
             'height' => $this->height,
             'minimal' => $this->minimal,
             'showLegend' => $this->showLegend,
+            'formatOptions' => $this->formatOptions,
         ]);
     }
 
diff --git a/src/Data/Dashboard/Widgets/AreaGraphWidgetData.php b/src/Data/Dashboard/Widgets/AreaGraphWidgetData.php
index 3d2c155b6..76b16e7bc 100644
--- a/src/Data/Dashboard/Widgets/AreaGraphWidgetData.php
+++ b/src/Data/Dashboard/Widgets/AreaGraphWidgetData.php
@@ -2,6 +2,7 @@
 
 namespace Code16\Sharp\Data\Dashboard\Widgets;
 
+use Code16\Sharp\Dashboard\Widgets\Graph\NumberFormatOptions;
 use Code16\Sharp\Data\Data;
 use Code16\Sharp\Enums\GraphWidgetDisplay;
 use Code16\Sharp\Enums\WidgetType;
@@ -28,6 +29,7 @@ public function __construct(
         public ?int $ratioX = null,
         public ?int $ratioY = null,
         public ?int $height = null,
+        public ?NumberFormatOptions $formatOptions = null,
         public bool $displayHorizontalAxisAsTimeline = false,
         public bool $enableHorizontalAxisLabelSampling = false,
         public bool $curved = false,
diff --git a/src/Data/Dashboard/Widgets/BarGraphWidgetData.php b/src/Data/Dashboard/Widgets/BarGraphWidgetData.php
index b55290f87..f510d4308 100644
--- a/src/Data/Dashboard/Widgets/BarGraphWidgetData.php
+++ b/src/Data/Dashboard/Widgets/BarGraphWidgetData.php
@@ -2,6 +2,7 @@
 
 namespace Code16\Sharp\Data\Dashboard\Widgets;
 
+use Code16\Sharp\Dashboard\Widgets\Graph\NumberFormatOptions;
 use Code16\Sharp\Data\Data;
 use Code16\Sharp\Enums\GraphWidgetDisplay;
 use Code16\Sharp\Enums\WidgetType;
@@ -28,6 +29,7 @@ public function __construct(
         public ?int $ratioX = null,
         public ?int $ratioY = null,
         public ?int $height = null,
+        public ?NumberFormatOptions $formatOptions = null,
         public bool $displayHorizontalAxisAsTimeline = false,
         public bool $enableHorizontalAxisLabelSampling = false,
         public bool $horizontal = false,
diff --git a/src/Data/Dashboard/Widgets/LineGraphWidgetData.php b/src/Data/Dashboard/Widgets/LineGraphWidgetData.php
index 0a818ac07..3f5f03945 100644
--- a/src/Data/Dashboard/Widgets/LineGraphWidgetData.php
+++ b/src/Data/Dashboard/Widgets/LineGraphWidgetData.php
@@ -2,6 +2,7 @@
 
 namespace Code16\Sharp\Data\Dashboard\Widgets;
 
+use Code16\Sharp\Dashboard\Widgets\Graph\NumberFormatOptions;
 use Code16\Sharp\Data\Data;
 use Code16\Sharp\Enums\GraphWidgetDisplay;
 use Code16\Sharp\Enums\WidgetType;
@@ -28,6 +29,7 @@ public function __construct(
         public ?int $ratioX = null,
         public ?int $ratioY = null,
         public ?int $height = null,
+        public ?NumberFormatOptions $formatOptions = null,
         public bool $displayHorizontalAxisAsTimeline = false,
         public bool $enableHorizontalAxisLabelSampling = false,
         public bool $curved = false,
diff --git a/src/Data/Dashboard/Widgets/PieGraphWidgetData.php b/src/Data/Dashboard/Widgets/PieGraphWidgetData.php
index b6b5cd70f..497c115c4 100644
--- a/src/Data/Dashboard/Widgets/PieGraphWidgetData.php
+++ b/src/Data/Dashboard/Widgets/PieGraphWidgetData.php
@@ -2,6 +2,7 @@
 
 namespace Code16\Sharp\Data\Dashboard\Widgets;
 
+use Code16\Sharp\Dashboard\Widgets\Graph\NumberFormatOptions;
 use Code16\Sharp\Data\Data;
 use Code16\Sharp\Enums\GraphWidgetDisplay;
 use Code16\Sharp\Enums\WidgetType;
@@ -28,6 +29,7 @@ public function __construct(
         public ?int $ratioX = null,
         public ?int $ratioY = null,
         public ?int $height = null,
+        public ?NumberFormatOptions $formatOptions = null,
     ) {}
 
     public static function from(array $widget): self
diff --git a/src/Dev/config/typescript-transformer.php b/src/Dev/config/typescript-transformer.php
index dbd612802..b3fe34deb 100644
--- a/src/Dev/config/typescript-transformer.php
+++ b/src/Dev/config/typescript-transformer.php
@@ -9,6 +9,7 @@
     'auto_discover_types' => [
         __DIR__.'/../../Data',
         __DIR__.'/../../Enums',
+        __DIR__.'/../../Dashboard/Widgets/Graph',
     ],
 
     /*
@@ -18,9 +19,9 @@
      */
 
     'collectors' => [
-        Spatie\TypeScriptTransformer\Collectors\DefaultCollector::class,
+        \Spatie\TypeScriptTransformer\Collectors\DefaultCollector::class,
         \Code16\Sharp\Dev\TypeScriptTransformer\DataTypeScriptCollector::class,
-        Spatie\TypeScriptTransformer\Collectors\EnumCollector::class,
+        \Spatie\TypeScriptTransformer\Collectors\EnumCollector::class,
     ],
 
     /*
@@ -29,7 +30,8 @@
      */
 
     'transformers' => [
-        Spatie\TypeScriptTransformer\Transformers\EnumTransformer::class,
+        \Spatie\TypeScriptTransformer\Transformers\EnumTransformer::class,
+        \Spatie\LaravelTypeScriptTransformer\Transformers\DtoTransformer::class,
     ],
 
     /*