From 67e36b2fa265e8f5ab50de614177a2c40064db3c Mon Sep 17 00:00:00 2001 From: Steve Bauman Date: Tue, 2 Apr 2024 11:44:49 -0400 Subject: [PATCH 1/2] Add Vue usage --- README.md | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 62 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 43a7ba9..dae4844 100644 --- a/README.md +++ b/README.md @@ -35,12 +35,14 @@ You can change the chart settings of your app from `config/apexcharts.php` file ## Usage -First of all, create an instance of the `Chart` class and set the data and options according to your needs. +### Blade + +Create an instance of the `Chart` class and set the data and options according to your needs. ```php use Akaunting\Apexcharts\Chart; -... +// ... $chart = (new Chart)->setType('donut') ->setWidth('100%') @@ -52,11 +54,10 @@ $chart = (new Chart)->setType('donut') Then, include the JavaScript (on every page using charts). ```html -... + - - ... + @apexchartsScripts @@ -65,11 +66,67 @@ Then, include the JavaScript (on every page using charts). Finally, call the `container` and `script` method wherever you want to display the chart. ```php + + {!! $chart->container() !!} {!! $chart->script() !!} ``` +### Vue + +If you're using Vue and Inertia, create a simple `chart.vue` component: + +```vue + + + + + +``` + +Then, create an instance of `Chart` and call `toVue()` when passing it to your page: + +```php +Route::get('dashboard', function () { + $chart = (new Chart)->setType('...'); + + return inertia('dashboard', [ + 'chart' => $chart->toVue(), + ]); +}); +``` + +Finally, render the chart: + +```vue + + + + + +``` + ## Testing ```bash From 506e3e6b166b44f22f06b821deadb8039c3cfd1b Mon Sep 17 00:00:00 2001 From: Steve Bauman Date: Tue, 2 Apr 2024 11:52:46 -0400 Subject: [PATCH 2/2] Add npm install docs --- README.md | 30 ++++++++++++++++++++++++++---- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index dae4844..24d10d9 100644 --- a/README.md +++ b/README.md @@ -75,10 +75,32 @@ Finally, call the `container` and `script` method wherever you want to display t ### Vue -If you're using Vue and Inertia, create a simple `chart.vue` component: +If you're using Vue and Inertia, install Apexcharts and their Vue 3 adapter: + +```bash +npm install --save apexcharts +npm install --save vue3-apexcharts +``` + +```js +// resources/js/app.js + +import VueApexCharts from 'vue3-apexcharts'; + +createInertiaApp({ + // ... + setup({el, App, props, plugin}) { + return createApp({ render: () => h(App, props) }) + .use(VueApexCharts) + .mount(el); + }, +}); +``` + +Then, create a simple `chart.vue` component: ```vue - +