docs: update docs to use fluent api

epessine · Feb 24, 2024 · 03052d4 · 03052d4
1 parent f27aead
commit 03052d4
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 76 deletions.
diff --git a/docs/page/content/docs/drawing-charts/_index.md b/docs/page/content/docs/drawing-charts/_index.md
@@ -18,15 +18,10 @@ class ExampleController extends Controller
 {
     public function __invoke(): View
     {
-        $chart = Chart::chartjs([
-            'type' => 'bar',
-            'data' => [
-                'labels' => ['A', 'B', 'C'],
-                'datasets' => [
-                    ['label' => 'First Dataset', 'data' => [10, 20, 30]],
-                ],
-            ],
-        ]);
+        $chart = Chart::chartjs()
+            ->bar()
+            ->labels(['A', 'B', 'C'])
+            ->series('First Series', [10, 20, 30]);
 
         return view('example.chart', compact('chart'));
     }
@@ -54,6 +49,35 @@ In the example below, we create a scriptable `backgroundColor` for a dataset on
 use Axis\Chart;
 use Axis\Support\Script;
 
+class ExampleController extends Controller
+{
+    public function __invoke(): View
+    {
+        $chart = Chart::chartjs()
+            ->bar()
+            ->labels(['A', 'B', 'C'])
+            ->series('First Series', [10, 20, 30], [
+                'backgroundColor' => Script::from(<<<'JS'
+                    function(ctx) {
+                        const index = ctx.dataIndex;
+                        const value = ctx.dataset.data[index];
+                        return value < 10 ? 'red' :  'green';
+                    }
+                JS),
+            ]);
+
+        return view('example.chart', compact('chart'));
+    }
+}
+```
+
+### Using raw data
+
+You can also create charts using the same JS API from your chosen library. This is useful if you want to create charts with high levels of customization. Here's how you can do it to create the same chart as the first one on this section:
+
+```php
+use Axis\Chart;
+
 class ExampleController extends Controller
 {
     public function __invoke(): View
@@ -63,17 +87,7 @@ class ExampleController extends Controller
             'data' => [
                 'labels' => ['A', 'B', 'C'],
                 'datasets' => [
-                    [
-                        'label' => 'First Dataset',
-                        'data' => [10, 20, 30],
-                        'backgroundColor' => Script::from(<<<'JS'
-                            function(ctx) {
-                                const index = ctx.dataIndex;
-                                const value = ctx.dataset.data[index];
-                                return value < 10 ? 'red' :  'green';
-                            }
-                        JS),
-                    ],
+                    ['label' => 'First Dataset', 'data' => [10, 20, 30]],
                 ],
             ],
         ]);

diff --git a/docs/page/content/docs/drawing-charts/apex-charts.md b/docs/page/content/docs/drawing-charts/apex-charts.md
@@ -18,16 +18,10 @@ class ExampleController extends Controller
 {
     public function __invoke(): View
     {
-        $chart = Chart::apex([
-            'chart' => ['type' => 'line'],
-            'series' => [[
-                'name' => 'sales',
-                'data' => [30, 40, 35, 50, 49, 60, 70, 91, 125],
-            ]],
-            'xaxis' => [
-                'categories' => [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
-            ],
-        ]);
+        $chart = Chart::apex()
+            ->column()
+            ->labels([1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999])
+            ->series('sales', [30, 40, 35, 50, 49, 60, 70, 91, 125]);
 
         return view('example.chart', compact('chart'));
     }

diff --git a/docs/page/content/docs/drawing-charts/chart-js.md b/docs/page/content/docs/drawing-charts/chart-js.md
@@ -18,22 +18,13 @@ class ExampleController extends Controller
 {
     public function __invoke(): View
     {
-        $chart = Chart::chartjs([
-            'type' => 'bar',
-            'data' => [
-                'labels' => ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
-                'datasets' => [[
-                    'label' => '# of Votes',
-                    'data' => [12, 19, 3, 5, 2, 3],
-                    'borderWidth' => 1,
-                ]],
-            ],
-            'options' => [
-                'scales' => [
-                    'y' => ['beginAtZero' => true],
-                ]
-            ]
-        ]);
+        $chart = Chart::chartjs()
+            ->column()
+            ->labels(['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'])
+            ->series('# of Votes', [12, 19, 3, 5, 2, 3], ['borderWidth' => 1])
+            ->options(['scales' => [
+                'y' => ['beginAtZero' => true],
+            ]]);
 
         return view('example.chart', compact('chart'));
     }

diff --git a/docs/page/content/docs/drawing-charts/highcharts.md b/docs/page/content/docs/drawing-charts/highcharts.md
@@ -18,16 +18,13 @@ class ExampleController extends Controller
 {
     public function __invoke(): View
     {
-        $chart = Chart::highcharts([
-            'chart' => ['type' => 'bar'],
-            'title' => ['text' => 'Fruit Consumption'],
-            'xAxis' => ['categories' => ['Apples', 'Bananas', 'Oranges']],
-            'yAxis' => ['title' => ['text' => 'Fruit eaten']],
-            'series' => [
-                ['name' => 'Jane', 'data' => [1, 0, 4]],
-                ['name' => 'John', 'data' => [5, 7, 3]],
-            ],
-        ]);
+        $chart = Chart::highcharts()
+            ->bar()
+            ->title('Fruit Consumption')
+            ->labels(['Apples', 'Bananas', 'Oranges'])
+            ->series('Jane', [1, 0, 4])
+            ->series('John', [5, 7, 3])
+            ->options(['yAxis' => ['title' => ['text' => 'Fruit eaten']]]);
 
         return view('example.chart', compact('chart'));
     }

diff --git a/docs/page/content/docs/interacting-with-charts.md b/docs/page/content/docs/interacting-with-charts.md
@@ -1,5 +1,5 @@
 ---
-title: 'Interacting with Charts'
+title: "Interacting with Charts"
 weight: 3
 prev: /docs/your-first-chart
 ---
@@ -11,9 +11,11 @@ Every chart rendered by Axis is stored on the global Javascript object `$axis` o
 ```php
 use Axis\Chart;
 
-$chart = Chart::chartjs([
-    //chart config...
-]);
+$chart = Chart::chartjs()
+    ->line()
+    ->title('Example')
+    ->labels(['Mon', 'Tue', 'Wed', 'Thu'])
+    ->series('Interactions', [1, 3, 4, 6]);
 
 $chartId = $chart->getId(); // $chartId stores the chart instance id
 ```
@@ -23,13 +25,11 @@ You can use this identifier to interact with the chart instance via Javascript:
 ```html
 <section>
     <h1>Chart Interaction Example</h1>
-    <div>
-        {{ $chart }}
-    </div>
+    <div>{{ $chart }}</div>
     <button type="button" onclick="$axis[@js($chartId)].destroy()">
         DON'T PRESS
     </button>
 </section>
 ```
 
-In the above example, when the button is clicked, the chart instance will be destroyed.
+In the above example, when the button is clicked, the chart instance will be destroyed.
diff --git a/docs/page/content/docs/using-with-livewire.md b/docs/page/content/docs/using-with-livewire.md
@@ -18,9 +18,11 @@ class Example extends Component
     #[Axis]
     public function chart(): ChartJs
     {
-        return Chart::chartjs([
-            // chart config...
-        ]);
+        return Chart::chartjs()
+            ->radar()
+            ->title('Livewire Chart')
+            ->labels(['Mon', 'Tue', 'Wed', 'Thu'])
+            ->series('Clicks', [4, 12, 43, 27]);
     }
 }
 ```
@@ -59,12 +61,11 @@ class Example extends Component
     #[Axis]
     public function chart(): ChartJs
     {
-        return Chart::chartjs([
-            'data' => [
-                'labels' => $this->labels,
-            ],
-            // chart config...
-        ]);
+        return Chart::chartjs()
+            ->pie()
+            ->title('Livewire Chart')
+            ->labels($this->labels)
+            ->series('Quantity', [65, 42, 31]);
     }
 
     public function changeLabels(): void
@@ -92,9 +93,11 @@ class Example extends Component
     #[Axis]
     public function chart(): ChartJs
     {
-        return Chart::chartjs([
-            // chart config...
-        ]);
+        return Chart::chartjs()
+            ->column()
+            ->title('Livewire Chart')
+            ->labels(['Mon', 'Tue', 'Wed', 'Thu'])
+            ->series('Clicks', [22, 31, 9, 58]);
     }
 
     public function destroyChart(): void