Allow custom chart tooltip format

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()

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>

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),
     }));

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;

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);
+    }
+}

src/Dashboard/Widgets/SharpGraphWidget.php

@@ -2,13 +2,16 @@
 
 namespace Code16\Sharp\Dashboard\Widgets;
 
+use Code16\Sharp\Dashboard\Widgets\Graph\NumberFormatOptions;
+
 abstract class SharpGraphWidget extends SharpWidget
 {
     protected ?string $display = null;
     protected array $ratio = [16, 9];
     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,
         ]);
     }
 

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,

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,

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,

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

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,
     ],
 
     /*