Viewing file:  f69304a87d3cb197b8cefe1b665e3ef6.php (3.14 KB) -rw-rw-rw-
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
<v-charts-bar <?php echo e($attributes); ?>></v-charts-bar>
<?php if (! $__env->hasRenderedOnce('17d946b9-4786-47da-a55c-49cc062030d7')): $__env->markAsRenderedOnce('17d946b9-4786-47da-a55c-49cc062030d7');
$__env->startPush('scripts'); ?>
<!-- SEO Vue Component Template -->
<script
type="text/x-template"
id="v-charts-bar-template"
>
<canvas
:id="$.uid + '_chart'"
class="flex w-full max-w-full items-end"
:style="'aspect-ratio:' + aspectRatio + '/1'"
style=""
></canvas>
</script>
<script type="module">
app.component('v-charts-bar', {
template: '#v-charts-bar-template',
props: {
labels: {
type: Array,
default: [],
},
datasets: {
type: Array,
default: [],
},
aspectRatio: {
type: Number,
default: 3.23,
},
},
data() {
return {
chart: undefined,
}
},
mounted() {
this.prepare();
},
methods: {
prepare() {
const barCount = this.datasets.length;
this.datasets.forEach((dataset) => {
dataset.barThickness = Math.max(4, 36 / barCount);
});
if (this.chart) {
this.chart.destroy();
}
this.chart = new Chart(document.getElementById(this.$.uid + '_chart'), {
type: 'bar',
data: {
labels: this.labels,
datasets: this.datasets,
},
options: {
aspectRatio: this.aspectRatio,
plugins: {
legend: {
display: false
},
},
scales: {
x: {
beginAtZero: true,
border: {
dash: [8, 4],
}
},
y: {
beginAtZero: true,
border: {
dash: [8, 4],
}
}
}
}
});
}
}
});
</script>
<?php $__env->stopPush(); endif; ?><?php /**PATH C:\xampp\htdocs\laravel-crm\packages\Webkul\Admin\src/resources/views/components/charts/bar.blade.php ENDPATH**/ ?>
|