Added build system and assets for js

2020-11-30 12:13:03 -05:00
parent fd4961d7ae
commit 76b64536d1
18 changed files with 22644 additions and 535 deletions
--- a/resources/js/multiColumnChart.js
+++ b/resources/js/multiColumnChart.js
@@ -0,0 +1,87 @@
+
+const multiColumnChart = () => {
+    return {
+        chart: null,
+
+        drawChart(component) {
+            if (this.chart) {
+                this.chart.destroy()
+            }
+
+            const stacked = component.get('columnChartModel.isStacked');
+            const animated = component.get('columnChartModel.animated');
+            const onColumnClickEventName = component.get('columnChartModel.onColumnClickEventName')
+            const dataLabels = component.get('columnChartModel.dataLabels');
+            const data = component.get('columnChartModel.data');
+            const sparkline = component.get('columnChartModel.sparkline');
+
+            const series = Object.keys(data)
+                .map(seriesName => ({
+                    name: seriesName,
+                    data: data[seriesName].map(item => item.value)
+                }))
+
+            const categories = component.get('columnChartModel.xAxis.categories').length > 0
+                ? component.get('columnChartModel.xAxis.categories')
+                : data[series[0].name].map(item => item.title)
+            ;
+
+            const options = {
+                series: series,
+
+                chart: {
+                    type: 'bar',
+                    height: '100%',
+                    stacked: stacked,
+
+                    ...sparkline,
+
+                    toolbar: { show: false },
+
+                    animations: { enabled: animated },
+
+                    events: {
+                        dataPointSelection: function(event, chartContext, {seriesIndex, dataPointIndex}) {
+                            if (!onColumnClickEventName) {
+                                return
+                            }
+
+                            const column = data[series[seriesIndex].name][dataPointIndex]
+                            component.call('onColumnClick', column)
+                        },
+                    }
+                },
+
+                legend: component.get('columnChartModel.legend'),
+
+                plotOptions: {
+                    bar: {
+                        horizontal: false,
+                        columnWidth: '50%',
+                    },
+                },
+
+                dataLabels: dataLabels,
+
+                xaxis: {
+                    categories: categories,
+                },
+
+                yaxis: {
+                    title: {
+                        text: component.get('columnChartModel.title'),
+                    }
+                },
+
+                fill: {
+                    opacity: component.get('columnChartModel.opacity'),
+                },
+            };
+
+            this.chart = new ApexCharts(this.$refs.container, options);
+            this.chart.render();
+        }
+    }
+}
+
+export default multiColumnChart