Improve charts

components.json

@@ -1,14 +1,13 @@
 {
   "$schema": "https://shadcn-vue.com/schema.json",
-  "style": "default",
+  "style": "new-york",
   "typescript": true,
   "tailwind": {
-    "config": "tailwind.config.js",
+    "config": "",
     "css": "resources/css/shadcn.css",
     "baseColor": "slate",
     "cssVariables": true
   },
-  "framework": "laravel",
   "aliases": {
     "components": "@/components",
     "utils": "@/utils/cn"

demo/app/Sharp/Dashboard/DemoDashboard.php

@@ -31,28 +31,23 @@
 
 class DemoDashboard extends SharpDashboard
 {
-    private static array $colors = [
-        '#2a9d90',
-        '#e76e50',
-        '#274754',
-        '#e8c468',
-        '#f4a462',
-        //        '#3B82F6',
-        //        '#064E3B',
-        //        '#EC4899',
-        //        '#78350F',
-        //        '#9CA3AF',
+    const array COLORS = [
+        'oklch(0.809 0.105 251.813)',
+        'oklch(0.623 0.214 259.815)',
+        'oklch(0.546 0.245 262.881)',
+        'oklch(0.488 0.243 264.376)',
+        'oklch(0.424 0.199 265.638)',
     ];
-    private static int $colorsIndex = 0;
 
     protected function buildWidgets(WidgetsContainer $widgetsContainer): void
     {
         $widgetsContainer
             ->addWidget(
                 SharpBarGraphWidget::make('authors_bar')
                     ->setTitle('Posts by author')
+                    ->setShowAllLabels()
                     ->setShowLegend(false)
-                    ->setHorizontal(),
+                // ->setHorizontal(),
             )
             ->addWidget(
                 SharpPieGraphWidget::make('categories_pie')
@@ -62,9 +57,13 @@ protected function buildWidgets(WidgetsContainer $widgetsContainer): void
                 SharpLineGraphWidget::make('visits_line')
                     ->setTitle('Visits')
                     ->setHeight(200)
-                    ->setShowLegend()
-                    ->setMinimal()
-                    ->setCurvedLines(),
+                    // ->setShowLegend()
+                    ->setDisplayHorizontalAxisAsTimeline()
+                // ->setShowAllLabels()
+                // ->setShowDots()
+                // ->setFilled()
+                // ->setMinimal()
+
             )
             ->addWidget(
                 SharpFigureWidget::make('draft_panel')
@@ -176,21 +175,21 @@ protected function setLineGraphDataSet(): void
     {
         $visits = collect(CarbonPeriod::create($this->getStartDate(), $this->getEndDate()))
             ->mapWithKeys(function (Carbon $day, $k) {
-                return [$day->isoFormat('L') => (int) (rand(10000, 20000) * 1.02)];
+                return [$day->format('Y-m-d') => (int) (rand(10000, 20000) * 1.02)];
             });
 
         $this
             ->addGraphDataSet(
                 'visits_line',
                 SharpGraphWidgetDataSet::make($visits)
                     ->setLabel('Visits')
-                    ->setColor(static::nextColor()),
+                    ->setColor(static::COLORS[0]),
             )
             ->addGraphDataSet(
                 'visits_line',
                 SharpGraphWidgetDataSet::make($visits->map(fn ($value) => (int) ($value / (rand(20, 40) / 10))))
                     ->setLabel('New')
-                    ->setColor(static::nextColor()),
+                    ->setColor(static::COLORS[1]),
             );
     }
 
@@ -205,14 +204,14 @@ protected function setBarsGraphDataSet(): void
                     )]
             )
             ->orderBy('posts_count', 'desc')
-            ->limit(8)
+            ->limit(15)
             ->get()
             ->pluck('posts_count', 'name');
 
         $this->addGraphDataSet(
             'authors_bar',
             SharpGraphWidgetDataSet::make($data)
-                ->setColor(static::nextColor()),
+                ->setColor(static::COLORS[1]),
         );
     }
 
@@ -229,12 +228,12 @@ protected function setPieGraphDataSet(): void
             ->limit(5)
             ->orderBy('posts_count', 'desc')
             ->get()
-            ->each(function (Category $category) {
+            ->each(function (Category $category, $i) {
                 $this->addGraphDataSet(
                     'categories_pie',
                     SharpGraphWidgetDataSet::make([$category->posts_count])
                         ->setLabel($category->name)
-                        ->setColor(static::nextColor()),
+                        ->setColor(static::COLORS[$i % count(static::COLORS)]),
                 );
             });
     }
@@ -284,15 +283,6 @@ protected function setCustomPanelDataSet(): void
         }
     }
 
-    private static function nextColor(): string
-    {
-        if (static::$colorsIndex >= count(static::$colors)) {
-            static::$colorsIndex = 0;
-        }
-
-        return static::$colors[static::$colorsIndex++];
-    }
-
     protected function getStartDate(): Carbon
     {
         return $this->queryParams->filterFor(PeriodRequiredFilter::class)->getStart();

demo/database/seeders/DatabaseSeeder.php

@@ -26,6 +26,8 @@ public function run()
         $editor2 = User::factory(['email' => 'editor2@example.org'])
             ->create();
 
+        User::factory(50)->create();
+
         collect([$admin, $editor1, $editor2])
             ->shuffle()
             ->each(function (User $user, int $k) {