kirschbaum-development · navneetrai · Jan 31, 2021 · Jan 31, 2021 · Jan 31, 2021 · Jan 31, 2021
diff --git a/README.md b/README.md
@@ -319,6 +319,50 @@ You can add following settings to model settings
 7. `type`: `line` or `bar`. defaults to `line`.
 8. `options`: Options are passed directly to ChartJS instance can be used to customize your Chart as detailed in the [documentation](https://www.chartjs.org/docs/latest/)
 
+## Customizing ToolTips
+
+You can customize tooltips for the charts in two ways
+
+### Using Options
+You can use `options` setting mentioned above to customize tooltips.
+
+```php
+//...
+            'options' => [
+                'responsive' => true,
+                'maintainAspectRatio' => false,
+                'tooltips' => [
+                    'backgroundColor'=> '#CCC',
+                    'titleFontSize'=> 16,
+                    'titleFontColor'=> '#0066ff',
+                    'bodyFontColor'=> '#000',
+                    'bodyFontSize'=> 14,
+                    'displayColors'=> false
+                ]
+            ],
+//...
+```
+
+### Customizing ToolTip Template
+You can also customize the tooltip Template to change the underlying HTML for the tooltip using settings
+
+```php
+//...
+            'toolTipTemplate' => [
+                'title' => 'Title is @TITLE@',
+                'body' => '<span style="background: @BACK_COLOR@; border-color: @BORDER_COLOR@; border-width: 2px; opacity: @TOOL_TIP_MODEL.opacity@"></span>@LABEL@ => @VALUE@',
+            ],
+//...
+```
+
+We can customize both `title` and `body` of template by passing a custom string. We can use the following placeholders in the rendered tooltip
+1. `@TITLE@`: Title of tooltip. This is usually the current datapoint.
+2. `@LABEL@`: Label of tooltip. This is Usually the field name.
+3. `@VALUE@`: Value of tooltip.
+4. `@BACK_COLOR@`: Background color of this data item.
+5. `@BORDER_COLOR@`: Border color of this data item.
+6. `@TOOL_TIP_MODEL.*@`: We can replace * with any value specified in the [tooltip modelfor chartsJS](https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-model)
+
 ## Adding Chart Data
 
 After setup, to add chart data for any model, all you need to do is to edit the model after creating it. You will get a list of numeric inputs to add values for each parameter specified in settings.

diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/js/components/ChartjsBarChart.vue b/resources/js/components/ChartjsBarChart.vue
@@ -19,6 +19,7 @@
             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.replaceToolTipTemplate();
             this.renderChart(this.chartData, this.options);
         },
 

diff --git a/resources/js/components/ChartjsLineChart.vue b/resources/js/components/ChartjsLineChart.vue
@@ -19,6 +19,7 @@
             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.replaceToolTipTemplate();
             this.renderChart(this.chartData, this.options);
         },
 

diff --git a/resources/js/mixins/charts.js b/resources/js/mixins/charts.js
@@ -1,6 +1,6 @@
 export default{
     methods:{
-        createChartDataset: function(){
+        createChartDataset() {
             let datasets = [...this.additionalDatasets];
 
             for (let data in this.dataset) {
@@ -16,6 +16,99 @@ export default{
                 labels: this.settings.parameters,
                 datasets: datasets
             }
+        },
+
+        replaceToolTipTemplate() {
+            if (this.settings.toolTipTemplate && this.settings.toolTipTemplate.body) {
+                const toolTipBodyTemplate = this.settings.toolTipTemplate.body;
+                const toolTipTitleTemplate = this.settings.toolTipTemplate.title;
+                this.options.tooltips = {
+                    // Disable the on-canvas tooltip
+                    enabled: false,
+
+                    custom: function (tooltipModel) {
+                        // Tooltip Element
+                        var tooltipEl = document.getElementById('chartjs-tooltip');
+
+                        // Create element on first render
+                        if (!tooltipEl) {
+                            tooltipEl = document.createElement('div');
+                            tooltipEl.id = 'chartjs-tooltip';
+                            tooltipEl.innerHTML = '<table></table>';
+                            document.body.appendChild(tooltipEl);
+                        }
+
+                        // Hide if no tooltip
+                        if (tooltipModel.opacity === 0) {
+                            tooltipEl.style.opacity = 0;
+                            return;
+                        }
+
+                        // Set caret Position
+                        tooltipEl.classList.remove('above', 'below', 'no-transform');
+                        if (tooltipModel.yAlign) {
+                            tooltipEl.classList.add(tooltipModel.yAlign);
+                        } else {
+                            tooltipEl.classList.add('no-transform');
+                        }
+
+                        function getBody(bodyItem) {
+                            return bodyItem.lines;
+                        }
+
+                        // Set Text
+                        if (tooltipModel.body) {
+                            var titleLines = tooltipModel.title || [];
+                            var bodyLines = tooltipModel.body.map(getBody);
+
+                            var innerHtml = '<thead>';
+
+                            titleLines.forEach(function (title) {
+                                var newTitle = title;
+                                if (toolTipTitleTemplate) {
+                                    newTitle = toolTipTitleTemplate.replace('@TITLE@', title);
+                                }
+                                innerHtml += '<tr><th>' + newTitle + '</th></tr>';
+                            });
+                            innerHtml += '</thead><tbody>';
+
+                            bodyLines.forEach(function (body, i) {
+                                var colors = tooltipModel.labelColors[i];
+                                var bodyParts = body.toString().split(':', 2);
+
+                                var toolTipContent = toolTipBodyTemplate;
+                                toolTipContent = toolTipContent.replace('@BACK_COLOR@', colors.backgroundColor);
+                                toolTipContent = toolTipContent.replace('@BORDER_COLOR@', colors.borderColor);
+                                toolTipContent = toolTipContent.replace('@LABEL@', bodyParts[0]);
+                                toolTipContent = toolTipContent.replace('@VALUE@', bodyParts[1] || '');
+                                toolTipContent = toolTipContent.replace(/@TOOL_TIP_MODEL\.(\w+)@/g, function (pattern, variable) {
+                                    return tooltipModel[variable] || pattern;
+                                });
+
+                                innerHtml += '<tr><td>' + toolTipContent + '</td></tr>';
+                            });
+                            innerHtml += '</tbody>';
+
+                            var tableRoot = tooltipEl.querySelector('table');
+                            tableRoot.innerHTML = innerHtml;
+                        }
+
+                        // `this` will be the overall tooltip
+                        var position = this._chart.canvas.getBoundingClientRect();
+
+                        // Display, position, and set styles for font
+                        tooltipEl.style.opacity = 1;
+                        tooltipEl.style.position = 'absolute';
+                        tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
+                        tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
+                        tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
+                        tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
+                        tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
+                        tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
+                        tooltipEl.style.pointerEvents = 'none';
+                    }
+                };
+            }
         }
     }
 }