Added custom code widgets

Author: Julien Nahum

README.md

@@ -11,7 +11,9 @@ Model statistics dashboard for your Laravel Application
 
 This Laravel packages gives you a statistic dashboard for you Laravel application. Think of it as a light version of 
 [Grafana](https://grafana.com/), but built-in your Laravel application, and much easier to get started with. 
-No code knowledge is required to use Laravel Model Stats, users can do everything from the web interface.
+No code knowledge is required to use Laravel Model Stats, users can do everything from the web interface. It also 
+optionally supports custom-code widgets, allowing you to define your widget data with
+code, just like you would do with tinker.
 
 ---
 
@@ -31,7 +33,7 @@ php artisan migrate
 ```
 
 
-## Available Widgets
+## Available No-Code Widgets
 
 Different type of widgets (daily count, daily average, etc.) are available. When creating a widget,
 you choose a Model, an aggregation type and the column(s) for the graph. You can then resize and move the widgets around on your dashboard.
@@ -45,6 +47,27 @@ The aggregation types currently available:
 
 For each widget type, date can be any column: `created_at`,`updated_at`,`custom_date`.
 
+## Custom Code Widgets
+
+You can also use custom code widgets, allowing you to define your widget data with
+code, just like you would do with tinker.
+
+Your code must define a `$result` variable containing the data to return to the choosen chart. You can use the `$dateFrom` and `$dateTo` variable.
+
+Example custom code for a bar chart:
+
+```php 
+$result = [
+    'a' => 10,
+    'b' => 20
+];
+```
+
+Note that for safety reasons, your code won't be allowed to perform any write operations on the database.
+You can only use the code to query data and transform it in-memory.
+Even if disabling write operations makes things sage, **remote code execution is always a 
+very risky operation**. Be sure that your dashboard authorization is properly configured. You may want to disable custom code widgets by setting the `MODEL_STATS_CUSTOM_CODE` env variable to `false`. 
+
 ## Dashboard Authorization
 
 The ModelStats dashboard may be accessed at the `/stats` route. By default, you will only be able to access this 
@@ -95,7 +118,8 @@ Please review [our security policy](../../security/policy) on how to report secu
 
 ## Inspiration 
 - [Grafana](https://grafana.com/): for the dashboard/widget aspect
-- [Laravel Telescope](https://github.com/laravel/telescope): for many things in the package structure (front-end, authorization...)
+- [Laravel/Telescope](https://github.com/laravel/telescope): for many things in the package structure (front-end, authorization...)
+- [Spatie/Laravel-Web-Tinker](https://github.com/spatie/laravel-web-tinker): for their web tinker implementation, which is used for custom code widgets
 
 ## License
 

composer.json

@@ -18,7 +18,9 @@
     "require": {
         "php": "^8.0",
         "spatie/laravel-package-tools": "^1.4.3",
-        "illuminate/contracts": "^8.37"
+        "illuminate/contracts": "^8.37",
+        "illuminate/support": "^5.8|^6.0|^7.0|^8.0",
+        "laravel/tinker": "^1.0|^2.0"
     },
     "require-dev": {
         "brianium/paratest": "^6.2",

config/model-stats.php

@@ -17,13 +17,14 @@
     */
 
     'enabled' => env('MODEL_STATS_ENABLED', true),
+    'allow_custom_code' => env('MODEL_STATS_CUSTOM_CODE', true),
 
     /*
     |--------------------------------------------------------------------------
     | Route Middleware
     |--------------------------------------------------------------------------
     |
-    | These middleware will be assigned to every Telescope route, giving you
+    | These middleware will be assigned to every ModelStats route, giving you
     | the chance to add your own middleware to this list or change any of
     | the existing middleware. Or, you can simply stick with this list.
     |

package-lock.json

@@ -29,6 +29,7 @@
     },
     "dependencies": {
         "chart.js": "^2.9.4",
+        "codemirror": "^5.63.1",
         "vue-chartjs": "^3.5.1",
         "vue-grid-layout": "^2.3.12"
     }

package.json

@@ -1,4 +1,4 @@
 {
-    "/app.js": "/app.js?id=a15abf91bccabf4ac23f",
-    "/app.css": "/app.css?id=1b1e2e3e366c06d4c19a"
+    "/app.js": "/app.js?id=1d359e4a46e6fb75ddb1",
+    "/app.css": "/app.css?id=19e0f7b7376df74f5ecb"
 }

public/app.css

@@ -33,7 +33,7 @@ export default {
     },
 
     data: () => ({
-        frontEndVersion: 5,
+        frontEndVersion: 6,
         alert: {
             type: null,
             autoClose: 0,

public/app.js

@@ -0,0 +1,72 @@
+<template>
+    <div class="custom-code">
+        <label v-if="label" class="text-gray-700 dark:text-gray-300 uppercase font-bold text-xs">
+            {{ label }} - <button @click="executeCode" class="bg-blue-500 text-white text-xs p-1 rounded hover:bg-blue-400 pointer">Run Code</button>
+        </label>
+        <section class="border shadow-sm mt-1 relative">
+            <textarea ref="codeEditor" class="z-0"/>
+            <div class="pl-8 border-t bg-blue-100 bg-opacity-70 text-blue-900 absolute inset-x-0 bottom-0 text-sm backdrop-filter backdrop-blur-sm z-20">
+                Make sure to put your resulting data in a variable named <span class="font-semibold">$result</span>.<br>You can use the variables <span class="font-semibold">$dateFrom</span> and <span class="font-semibold">$dateTo</span> anywhere in your code.
+            </div>
+        </section>
+        <div v-if="error" class="text-sm text-red-500 -bottom-3"
+             v-html="error"></div>
+    </div>
+
+</template>
+
+<script>
+import 'codemirror/mode/php/php';
+import CodeMirror from 'codemirror';
+import axios from 'axios';
+
+export default {
+    data: () => ({
+        value: '',
+        codeEditor: null,
+        error: null,
+    }),
+    props: ['path', 'label'],
+    mounted() {
+        const config = {
+            autofocus: true,
+            extraKeys: {
+                'Cmd-Enter': () => {
+                    this.executeCode();
+                },
+                'Ctrl-Enter': () => {
+                    this.executeCode();
+                },
+            },
+            indentWithTabs: true,
+            lineNumbers: true,
+            lineWrapping: true,
+            mode: 'text/x-php',
+            tabSize: 4,
+        };
+        this.codeEditor = CodeMirror.fromTextArea(this.$refs.codeEditor, config);
+        this.codeEditor.on('change', editor => {
+            localStorage.setItem('tinker-tool', editor.getValue());
+        });
+        let value = localStorage.getItem('tinker-tool');
+        if (typeof value === 'string') {
+            this.codeEditor.setValue(value);
+            this.codeEditor.execCommand('goDocEnd');
+        }
+    },
+    methods: {
+        executeCode() {
+            this.error = null
+            let code = this.codeEditor.getValue().trim();
+            if (code === '') {
+                this.error = 'You must type some code to execute.'
+                return;
+            }
+            this.$emit('execute', code);
+        },
+    },
+};
+</script>
+
+<style src="codemirror/lib/codemirror.css"/>
+<style src="codemirror/theme/idea.css"/>

public/mix-manifest.json

@@ -0,0 +1,40 @@
+<template>
+    <div class="w-full">
+        <section class="output shadow-sm mt-2 border text-red-900 bg-red-100 p-4" v-if="value.code_executed && !value.valid_output">
+            <p class="font-semibold text-red-900">
+                Invalid Output Format
+            </p>
+            <p class="text-red-900" v-if="chartType == 'line_chart'">
+                For line charts, output (in <span class="font-semibold">$result</span> var) must be an associative array,
+                with dates as keys, and numbers as values.
+                <br>Example:
+            <pre>[
+    "2020-02-21" => 12,
+    "2020-02-22" => 14
+]</pre></p>
+            <p class="text-red-900" v-else-if="chartType == 'bar_chart'">
+                For bar charts, output (in <span class="font-semibold">$result</span> var) must be an associative array,
+                with column name as keys, and numbers as values.
+                <br>Example:
+            <pre>[
+    "facebook" => 12,
+    "twitter" => 14
+]</pre>
+
+            </p>
+        </section>
+        <section class="output shadow-sm mt-2 border"
+                 :class="value.code_executed?['text-blue-900 bg-blue-100']:['text-red-900 bg-red-100']">
+            <p class="p-4 pb-0 font-semibold" :class="value.code_executed?['text-blue-900']:['text-red-900']">
+                Code Execution Result
+            </p>
+            <pre class="p-4 pt-0 overflow-x-scroll"><code v-html="value.output"></code></pre>
+        </section>
+    </div>
+</template>
+
+<script>
+export default {
+    props: ['value', 'chartType'],
+};
+</script>

resources/js/components/App.vue

@@ -22,7 +22,7 @@
                        :key="widget.id">
                 <component class="w-full h-full"
                            @delete="deleteWidget(widget)"
-                           :is="typeToComponent[widget.aggregate_type]"
+                           :is="getWidgetComponent(widget)"
                            :widget="widget"/>
             </grid-item>
         </grid-layout>
@@ -32,6 +32,7 @@
 import DailyCount from "./components/DailyCount";
 import GroupByCount from "./components/GroupByCount";
 import PeriodTotal from "./components/PeriodTotal";
+import CustomCode from "./components/CustomCode";
 import VueGridLayout from 'vue-grid-layout';
 import clone from 'lodash/clone'
 
@@ -41,6 +42,7 @@ export default {
         PeriodTotal: PeriodTotal,
         DailyCount: DailyCount,
         GroupByCount: GroupByCount,
+        CustomCode: CustomCode,
         GridLayout: VueGridLayout.GridLayout,
         GridItem: VueGridLayout.GridItem
     },
@@ -64,6 +66,12 @@ export default {
     },
 
     methods: {
+        getWidgetComponent(widget) {
+            if (widget.custom_code) {
+                return 'custom-code'
+            }
+            return this.typeToComponent[widget.aggregate_type]
+        },
         initLayout() {
             this.gridLayout = clone(this.widgets).map((widget)=>{
                 return {...widget.position, ...widget }