Viewing file:  2097a5d3b3214ab204f2ecf3740766b1.php (3.15 KB) -rwxrwxrwx
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
<v-charts-bar <?php echo e($attributes); ?>></v-charts-bar>
<?php if (! $__env->hasRenderedOnce('00cc3d46-d3b7-4a27-9b2c-a46e94ea8599')): $__env->markAsRenderedOnce('00cc3d46-d3b7-4a27-9b2c-a46e94ea8599');
$__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 /var/www/html/laravel-crm/packages/Webkul/Admin/src/Providers/../Resources/views/components/charts/bar.blade.php ENDPATH**/ ?>
|