Skip to content

Commit

Permalink
Add Vue usage
Browse files Browse the repository at this point in the history
  • Loading branch information
stevebauman authored Apr 2, 2024
1 parent ffaf4de commit 67e36b2
Showing 1 changed file with 62 additions and 5 deletions.
67 changes: 62 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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%')
Expand All @@ -52,11 +54,10 @@ $chart = (new Chart)->setType('donut')
Then, include the JavaScript (on every page using charts).

```html
...
<!-- layout.blade.php -->

</head>
<body>
...
<!-- ... -->

@apexchartsScripts
</body>
Expand All @@ -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
<!-- dashboard.blade.php -->

{!! $chart->container() !!}

{!! $chart->script() !!}
```

### Vue

If you're using Vue and Inertia, create a simple `chart.vue` component:

```vue
<!-- chart.vue -->
<template>
<apexchart
:type="chart.type"
:width="chart.width"
:height="chart.height"
:series="chart.series"
:options="chart.options"
/>
</template>
<script setup>
defineProps({
chart: Object,
});
</script>
```

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
<!-- dashboard.vue -->
<template>
<Chart :chart="chart" />
</template>
<script setup>
import Chart from './components/chart.vue';
defineProps({
chart: Object,
});
</script>
```

## Testing

```bash
Expand Down

0 comments on commit 67e36b2

Please sign in to comment.