From 1285cb757b357986c21fe3121495f790a971d230 Mon Sep 17 00:00:00 2001 From: Navneet Rai Date: Tue, 18 Feb 2020 07:46:10 -0500 Subject: [PATCH 01/10] Move methods and properties common between charts to mixin --- resources/js/mixins/charts.js | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/resources/js/mixins/charts.js b/resources/js/mixins/charts.js index 1d77a40..239bd84 100644 --- a/resources/js/mixins/charts.js +++ b/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) { From 56bf64eda96e0963184bac74dff22cc8d1f8fc76 Mon Sep 17 00:00:00 2001 From: Navneet Rai Date: Tue, 18 Feb 2020 07:46:48 -0500 Subject: [PATCH 02/10] Add method to dynamically compute component name --- resources/js/components/DetailField.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/resources/js/components/DetailField.vue b/resources/js/components/DetailField.vue index 6ea1886..6f4d5b5 100644 --- a/resources/js/components/DetailField.vue +++ b/resources/js/components/DetailField.vue @@ -110,7 +110,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)); From fbc6682327a87ab420fe307570748b642b10ca94 Mon Sep 17 00:00:00 2001 From: Navneet Rai Date: Tue, 18 Feb 2020 07:48:26 -0500 Subject: [PATCH 03/10] Use component-is to dynamically pick the right chart type --- resources/js/components/DetailField.vue | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/resources/js/components/DetailField.vue b/resources/js/components/DetailField.vue index 6f4d5b5..3f81d75 100644 --- a/resources/js/components/DetailField.vue +++ b/resources/js/components/DetailField.vue @@ -24,21 +24,14 @@
- - -
From 1bffe36be7c12520158cddd1f59d0beb70512bf6 Mon Sep 17 00:00:00 2001 From: Navneet Rai Date: Tue, 18 Feb 2020 07:51:07 -0500 Subject: [PATCH 04/10] Remove common code from existing charts --- resources/js/components/ChartjsBarChart.vue | 19 ------------------- resources/js/components/ChartjsLineChart.vue | 19 ------------------- 2 files changed, 38 deletions(-) diff --git a/resources/js/components/ChartjsBarChart.vue b/resources/js/components/ChartjsBarChart.vue index 8826677..c3b7d7e 100644 --- a/resources/js/components/ChartjsBarChart.vue +++ b/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(); - } - } } diff --git a/resources/js/components/ChartjsLineChart.vue b/resources/js/components/ChartjsLineChart.vue index ef1cd48..1210940 100644 --- a/resources/js/components/ChartjsLineChart.vue +++ b/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(); - } - } } From 6fed5d9f30897066dea4f88fe8ed8f47c9e76e45 Mon Sep 17 00:00:00 2001 From: Navneet Rai Date: Tue, 18 Feb 2020 07:51:35 -0500 Subject: [PATCH 05/10] Create Chartjs Radar Chart --- resources/js/components/ChartjsRadarChart.vue | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 resources/js/components/ChartjsRadarChart.vue diff --git a/resources/js/components/ChartjsRadarChart.vue b/resources/js/components/ChartjsRadarChart.vue new file mode 100644 index 0000000..c505d1a --- /dev/null +++ b/resources/js/components/ChartjsRadarChart.vue @@ -0,0 +1,12 @@ + From 0b99c230494e94a848bfc29f6c9e3517803221f1 Mon Sep 17 00:00:00 2001 From: Navneet Rai Date: Tue, 18 Feb 2020 07:52:10 -0500 Subject: [PATCH 06/10] Add radar chart to Detail Field --- resources/js/components/DetailField.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/resources/js/components/DetailField.vue b/resources/js/components/DetailField.vue index 3f81d75..9b72d5e 100644 --- a/resources/js/components/DetailField.vue +++ b/resources/js/components/DetailField.vue @@ -42,6 +42,7 @@