Assign chart to a JSON Field

README.md

@@ -172,14 +172,22 @@ class Employee extends Resource
         return [
             //...
 
-            new InlinePanel($this, $request, 'Chart Name'),
+            new InlinePanel($this, $request, 'Chart Title'),
         ];
     }
 }
 ``` 
 **_NOTE:_** You must pass the `Resource` (i.e. `$this`) and `$request` to the `InlinePanel` component. 
 
-As an optional argument you can pass a chart name as the third argument, `showLabel` as fourth argument, `notEditable` as the fifth argument and `hideFromIndex` as the sixth argument.
+As an optional argument you can pass a chart title as the third argument, `showLabel` as fourth argument, `notEditable` as the fifth argument and `hideFromIndex` as the sixth argument. You can pass `chartName` as an optional seventh parameter if you want to add more than one charts to same model. 
+
+If you want to attach your chart to a JSON field directly on model you can set the optional eighth parameter `isField` as true.
+
+```php
+//...
+new InlinePanel($this, $request, 'Attendance', true, false, false, 'attendance', true),
+//...
+```
 
 ![Panel with Label](screenshots/PanelWithLabel.jpg "Panel with Label")
 

resources/js/components/FormField.vue

@@ -32,7 +32,7 @@ export default {
          * Fill the given FormData object with the field's internal value.
          */
         fill(formData) {
-            const attributeName = (this.field.attribute == 'metric_values') ? this.field.attribute : `${this.field.attribute}_${this.field.chartName || 'default'}`;
+            const attributeName = ((this.field.attribute == 'metric_values') || this.field.isField) ? this.field.attribute : `${this.field.attribute}_${this.field.chartName || 'default'}`;
             formData.append(attributeName, JSON.stringify(this.value) || '{}');
         },
 

resources/js/mixins/datasetHandler.js

@@ -1,7 +1,7 @@
 export default{
     methods:{
         getAllowedParametersFromDataset: function(parameters, dataset = []) {
-            return parameters.map(key => dataset[key] || 0);
+            return parameters.map(key => _.has(dataset, key) ? dataset[key] : 0);
         }
     }
 }

src/InlinePanel.php

@@ -19,6 +19,7 @@ class InlinePanel extends Panel
      * @param bool $notEditable
      * @param bool $hideFromIndex
      * @param string $chartName
+     * @param mixed $isField
      */
     public function __construct(
         NovaResource $resource,
@@ -27,12 +28,13 @@ public function __construct(
         $showLabel = false,
         $notEditable = false,
         $hideFromIndex = false,
-        $chartName = 'default'
+        $chartName = 'default',
+        $isField = false
     ) {
         parent::__construct(
             $panelTitle,
             $this->prepareFields(
-                $this->fields($resource->resource, $request, $panelTitle, $showLabel, $notEditable, $hideFromIndex, $chartName)
+                $this->fields($resource->resource, $request, $panelTitle, $showLabel, $notEditable, $hideFromIndex, $chartName, $isField)
             )
         );
     }
@@ -47,6 +49,7 @@ public function __construct(
      * @param bool $notEditable
      * @param bool $hideFromIndex
      * @param string $chartName
+     * @param bool $isField
      *
      * @return array
      */
@@ -57,11 +60,10 @@ protected function fields(
         $showLabel = false,
         $notEditable = false,
         $hideFromIndex = false,
-        $chartName = 'default'
+        $chartName = 'default',
+        $isField = false
     ): array {
-        $field = NovaChartjs::make($panelTitle, 'novaChartjsMetricValue', function () use ($chartable, $chartName) {
-            return optional($chartable->novaChartjsMetricValue()->where('chart_name', $chartName)->first())->metric_values ?? [];
-        });
+        $field = $this->getField($chartable, $panelTitle, $chartName, $isField);
 
         if ($showLabel) {
             $field->showLabel();
@@ -75,8 +77,33 @@ protected function fields(
             $field->hideFromIndex();
         }
 
+        if ($isField) {
+            $field->isField();
+        }
+
         $field->chartName($chartName);
 
         return [$field];
     }
+
+    /**
+     * Returns the field.
+     *
+     * @param Chartable $chartable
+     * @param string $panelTitle
+     * @param string $chartName
+     * @param bool $isField
+     *
+     * @return NovaChartjs
+     */
+    protected function getField(Chartable $chartable, $panelTitle = 'Chart Metric Values', $chartName = 'default', $isField = false): NovaChartjs
+    {
+        if ($isField) {
+            return NovaChartjs::make($panelTitle, $chartName);
+        }
+
+        return NovaChartjs::make($panelTitle, 'novaChartjsMetricValue', function () use ($chartable, $chartName) {
+            return optional($chartable->novaChartjsMetricValue()->where('chart_name', $chartName)->first())->metric_values ?? [];
+        });
+    }
 }

src/NovaChartjs.php

@@ -66,7 +66,7 @@ public function resolve($resource, $attribute = null)
 
             $this->withMeta([
                 'settings' => $settings,
-                'comparison' => $resource::getNovaChartjsComparisonData($this->getChartName()),
+                'comparison' => $resource::getNovaChartjsComparisonData($this->getChartName(), $this->getIsField()),
                 'additionalDatasets' => data_get($resource->getAdditionalDatasets(), $this->getChartName(), []),
                 'model' => Str::singular(Str::title(Str::snake(class_basename($resource), ' '))),
                 'title' => $this->getChartableProp($resource, $settings['titleProp'] ?? $resource->getKeyName()),
@@ -101,6 +101,18 @@ public function showLabel(): self
         ]);
     }
 
+    /**
+     * Hide Label to make Chart occupy full width.
+     *
+     * @return NovaChartjs
+     */
+    public function isField(): self
+    {
+        return $this->withMeta([
+            'isField' => true,
+        ]);
+    }
+
     /**
      * set whether a user can edit a model data.
      *
@@ -141,9 +153,11 @@ public function getChartableProp(Chartable $chartable, string $prop = 'id'): str
      */
     protected function fillAttributeFromRequest(NovaRequest $request, $requestAttribute, $model, $attribute)
     {
-        if ($model instanceof NovaChartjsMetricValue) {
+        if ($model instanceof NovaChartjsMetricValue || $this->getIsField()) {
             $value = json_decode($request[$requestAttribute], true);
             $model->{$attribute} = $this->isNullValue($value) ? null : $value;
+
+            return;
         }
 
         $chartName = $this->getChartName();
@@ -167,4 +181,14 @@ protected function getChartName()
     {
         return data_get($this->meta(), 'chartName', 'default');
     }
+
+    /**
+     * Returns chartname for current chart.
+     *
+     * @return bool
+     */
+    protected function getIsField()
+    {
+        return data_get($this->meta(), 'isField', false);
+    }
 }

src/Traits/HasChart.php

@@ -72,11 +72,29 @@ public function setNovaChartjsMetricValueAttribute($value): void
      * Return a list of all models available for comparison to root model.
      *
      * @param string $chartName
+     * @param mixed $isField
      *
      * @return array
      */
-    public static function getNovaChartjsComparisonData($chartName = 'default'): array
+    public static function getNovaChartjsComparisonData($chartName = 'default', $isField = false): array
     {
+        if ($isField) {
+            return static::get()
+                ->map(function ($chartData) use ($chartName) {
+                $chartData->setAttribute(
+                    'novaChartjsComparisonData',
+                    $chartData->{$chartName}
+                );
+
+                return $chartData;
+            })
+                ->reject(function ($chartData) {
+                return empty($chartData->novaChartjsComparisonData);
+            })
+                ->values()
+                ->toArray();
+        }
+
         return static::with('novaChartjsMetricValue')
             ->has('novaChartjsMetricValue')
             ->get()