Merge pull request #667 from code16/improve-charts

Improve charts

Author: aguingand

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

@@ -16,10 +16,10 @@
 use Code16\Sharp\Dashboard\Layout\DashboardLayoutRow;
 use Code16\Sharp\Dashboard\Layout\DashboardLayoutSection;
 use Code16\Sharp\Dashboard\SharpDashboard;
+use Code16\Sharp\Dashboard\Widgets\SharpAreaGraphWidget;
 use Code16\Sharp\Dashboard\Widgets\SharpBarGraphWidget;
 use Code16\Sharp\Dashboard\Widgets\SharpFigureWidget;
 use Code16\Sharp\Dashboard\Widgets\SharpGraphWidgetDataSet;
-use Code16\Sharp\Dashboard\Widgets\SharpLineGraphWidget;
 use Code16\Sharp\Dashboard\Widgets\SharpOrderedListWidget;
 use Code16\Sharp\Dashboard\Widgets\SharpPanelWidget;
 use Code16\Sharp\Dashboard\Widgets\SharpPieGraphWidget;
@@ -31,19 +31,13 @@
 
 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
     {
@@ -52,19 +46,25 @@ protected function buildWidgets(WidgetsContainer $widgetsContainer): void
                 SharpBarGraphWidget::make('authors_bar')
                     ->setTitle('Posts by author')
                     ->setShowLegend(false)
-                    ->setHorizontal(),
+                // ->setHorizontal(),
             )
             ->addWidget(
                 SharpPieGraphWidget::make('categories_pie')
                     ->setTitle('Posts by category'),
             )
             ->addWidget(
-                SharpLineGraphWidget::make('visits_line')
+                SharpAreaGraphWidget::make('visits_line')
                     ->setTitle('Visits')
                     ->setHeight(200)
-                    ->setShowLegend()
-                    ->setMinimal()
-                    ->setCurvedLines(),
+                    // ->setStacked()
+                    // ->setShowStackTotal(label: 'Total visits')
+                    // ->setShowLegend()
+                    ->setDisplayHorizontalAxisAsTimeline()
+                // ->setEnableHorizontalAxisLabelSampling()
+                // ->setShowGradient()
+                // ->setShowDots()
+                // ->setMinimal()
+
             )
             ->addWidget(
                 SharpFigureWidget::make('draft_panel')
@@ -176,21 +176,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 +205,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 +229,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 +284,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) {

docs/guide/dashboard-widgets/graph.md

@@ -1,36 +1,77 @@
 # Graph widget
 
-This widget intends to display a graph visualization of any data.
+This widget intends to display a graph visualization of any data. There are four graph types, and they mostly share the same API. To choose one or the other, use its dedicated class:
 
-## Types
+## Line
 
-There are three graph types, and they mostly share the same API. To choose one or the other, use its dedicated class:
+```php
+$widgetsContainer->addWidget(
+    SharpLineGraphWidget::make('sales')
+);
+```
+
+Along with the [common configuration](#common-configuration), the following methods are available:
+
+### `setShowDots(bool $showDots = true)`
+
+Display dots on the graph lines.
 
-### Line graph
+### `setCurvedLines(bool $curvedLines = true)`
+
+Display lines with curved angles. Default is `true`.
 
+## Area
 ```php
 $widgetsContainer->addWidget(
-    SharpLineGraphWidget::make('sales')
+    SharpAreaGraphWidget::make('sales')
 );
 ```
 
-### Bar graph
+Along with the [common configuration](#common-configuration), the following methods are available:
+
+### `setCurvedLines(bool $curvedLines = true)`
+
+Display lines with curved angles. Default is `true`.
+
+### `setOpacity(float $opacity)`
+
+Change the opacity of the filled areas. Default is `0.4`.
 
+### `setShowGradient(bool $showGradient = true)`
+
+Display a gradient on top of the filled areas.
+
+### `setStacked(bool $stacked = true)`
+
+Stack areas on top of each other. Useful for comparing two or more series. The order of `->addGraphDataSet()` calls defines the stacking order.
+
+### `setShowStackTotal(bool $showStackTotal = true, ?string $label = null)`
+
+Show the total of all stacked areas in the tooltip. The label can be customized.
+
+## Bar
 ```php
 $widgetsContainer->addWidget(
     SharpBarGraphWidget::make('sales')
 );
 ```
 
-### Pie graph
+Along with the [common configuration](#common-configuration), the following methods are available:
+
+### `setHorizontal(bool $horizontal = true)`
+
+Display horizontal bars instead of vertical ones. Default is `false`.
+
+
+## Pie
 
 ```php
 $widgetsContainer->addWidget(
     SharpPieGraphWidget::make('sales')
 );
 ```
 
-## Attributes (setters)
+## Common configuration
 
 ### `setRatio(string $ratio)`
 
@@ -50,15 +91,11 @@ If true, legend and axis are hidden. Default is `false`.
 
 ### `setDisplayHorizontalAxisAsTimeline(bool $displayAsTimeline = true)`
 
-**(Line and Bar)** If true, and if X axis values are valid dates, the graph will create a timeline repartition of dates, creating visual gaps between dates. Default is `false`. 
+**(Line, Area, Bar)** If true, and if X axis values are valid dates, the graph will create a timeline repartition of dates, creating visual gaps between dates. Default is `false`. 
 
-### `setCurvedLines(bool $curvedLines = true)`
-
-**(Line only)** Display lines with curved angles. Default is `true`. 
-
-### `setHorizontal(bool $horizontal = true)`
+### `setEnableHorizontalAxisLabelSampling(bool $enableLabelSampling = true)`
 
-**(Bar only)** Display horizontal bars instead of vertical ones. Default is `false`.
+**(Line, Area, Bar)** If true, only some labels will be displayed depending on available space. It prevents label rotation. This method has no impact when `setDisplayHorizontalAxisAsTimeline()` is called. Default is `false`.
 
 ## Data valuation