Add radar charts

.styleci.yml

@@ -2,6 +2,7 @@ preset: laravel
 
 enabled:
   - combine_consecutive_unsets
+  - concat_with_spaces
   - explicit_string_variable
   - length_ordered_imports
   - method_chaining_indentation

resources/js/components/ChartjsBarChart.vue

@@ -8,24 +8,5 @@
         extends: Bar,
 
         mixins: [reactiveData, charts],
-
-        props: {
-            'dataset': Array,
-            'additionalDatasets': Array,
-            'settings': Object,
-        },
-
-        mounted () {
-            this.chartData = this.createChartDataset();
-            //we need to set options manually as options are used to re-render chart when data changes in reactiveData/reactiveProp mixin
-            this.options = this.settings.options;
-            this.renderChart(this.chartData, this.options);
-        },
-
-        watch: {
-            dataset: function() {
-                this.chartData = this.createChartDataset();
-            }
-        }
     }
 </script>

resources/js/components/ChartjsLineChart.vue

@@ -8,24 +8,5 @@
         extends: Line,
 
         mixins: [reactiveData, charts],
-
-        props: {
-            'dataset': Array,
-            'additionalDatasets': Array,
-            'settings': Object,
-        },
-
-        mounted () {
-            this.chartData = this.createChartDataset();
-            //we need to set options manually as options are used to re-render chart when data changes in reactiveData/reactiveProp mixin
-            this.options = this.settings.options;
-            this.renderChart(this.chartData, this.options);
-        },
-
-        watch: {
-            dataset: function() {
-                this.chartData = this.createChartDataset();
-            }
-        }
     }
 </script>

resources/js/components/ChartjsRadarChart.vue

@@ -0,0 +1,12 @@
+<script>
+    import { Radar, mixins } from 'vue-chartjs'
+    import charts from "../mixins/charts";
+
+    const {reactiveData} = mixins;
+
+    export default {
+        extends: Radar,
+
+        mixins: [reactiveData, charts],
+    }
+</script>

resources/js/components/DetailField.vue

@@ -24,21 +24,14 @@
                 </div>
                 <div class="flex border-b border-40">
                     <div class="w-full py-4">
-                        <chartjs-bar-chart v-if="isType('bar')"
+                        <component
+                           :is="chartComponent"
                            :dataset="comparisonDataset"
                            :additionalDatasets="field.additionalDatasets"
                            :settings="field.settings"
                            :height="field.settings.height"
                            :width="field.settings.width"
                         />
-                        <chartjs-line-chart v-else
-                            :dataset="comparisonDataset"
-                            :additionalDatasets="field.additionalDatasets"
-                            :settings="field.settings"
-                            :height="field.settings.height"
-                            :width="field.settings.width"
-                        />
-
                     </div>
                 </div>
             </div>
@@ -49,6 +42,7 @@
 <script>
 import ChartjsLineChart from "./ChartjsLineChart";
 import ChartjsBarChart from "./ChartjsBarChart";
+import ChartjsRadarChart from "./ChartjsRadarChart";
 import Multiselect from 'vue-multiselect';
 import colors from "../mixins/colors";
 import datasetHandler from "../mixins/datasetHandler";
@@ -57,7 +51,8 @@ export default {
     components: {
         Multiselect,
         ChartjsLineChart,
-        ChartjsBarChart
+        ChartjsBarChart,
+	    ChartjsRadarChart
     },
 
     mixins: [colors, datasetHandler],
@@ -71,15 +66,15 @@ export default {
     },
 
     methods: {
-        isType: function(type){
+        isType (type){
             return this.field.settings.type.toLowerCase() === type
         },
 
-        isNotUser: function(element, index, array){
+        isNotUser (element, index, array){
             return element[this.field.settings.identProp] != this.field.ident;
         },
 
-        getDatapoint: function(values, title, color){
+        getDatapoint (values, title, color){
             if(!color){
                 color = this.getRandomColor();
             }
@@ -95,8 +90,8 @@ export default {
             }
         },
 
-        getChartTypeCustomizations: function(type, color){
-            if(this.isType('line')){
+        getChartTypeCustomizations (type, color){
+            if(this.isType('line')||this.isType('radar')){
                 return {
                     borderColor: color
                 }
@@ -110,7 +105,11 @@ export default {
     },
 
     computed: {
-        comparisonDataset: function(){
+    	chartComponent (){
+			return `chartjs-${this.field.settings.type.toLowerCase()}-chart`;
+	    },
+
+        comparisonDataset (){
             let chartData = [];
             if(! this.field.notEditable || Object.keys(this.field.value).length){
                 chartData.push(this.getDatapoint(this.field.value, this.field.title, this.field.settings.color));
@@ -127,7 +126,7 @@ export default {
             ];
         },
 
-        comparisonList: function(){
+        comparisonList (){
             return [
                 {
                     groupLabel: 'Select/Deselect All',
@@ -136,7 +135,7 @@ export default {
             ];
         },
 
-        valueDataset: function () {
+        valueDataset (){
             return {
                 labels: Object.keys(this.field.value),
                 datasets: Object.values(this.field.value)

resources/js/components/IndexField.vue

@@ -21,7 +21,7 @@ export default {
     props: ['resourceName', 'field'],
 
     computed: {
-        valueDataset: function () {
+        valueDataset (){
             let color = this.field.settings.indexColor || this.field.settings.color || this.getRandomColor();
             let colors = Array(this.field.settings.parameters.length).fill(color);
             return {
@@ -31,7 +31,7 @@ export default {
                         backgroundColor: colors,
                         'data': this.getAllowedParametersFromDataset(this.field.settings.parameters, this.field.value)
                     }
-                 ]
+                ]
             }
         },
     }

resources/js/mixins/charts.js

@@ -1,6 +1,25 @@
 export default{
-    methods:{
-        createChartDataset: function(){
+	props: {
+		'dataset': Array,
+		'additionalDatasets': Array,
+		'settings': Object,
+	},
+
+	mounted (){
+		this.chartData = this.createChartDataset();
+		//we need to set options manually as options are used to re-render chart when data changes in reactiveData/reactiveProp mixin
+		this.options = this.settings.options;
+		this.renderChart(this.chartData, this.options);
+	},
+
+	watch: {
+		dataset (){
+			this.chartData = this.createChartDataset();
+		}
+	},
+
+    methods: {
+        createChartDataset (){
             let datasets = [...this.additionalDatasets];
 
             for (let data in this.dataset) {