add option to show comma separated numbers

change card padding
dcasia · Feb 10, 2020 · c0193c7 · c0193c7
1 parent 9a3d47a
commit c0193c7
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -68,6 +68,12 @@ use DigitalCreative\NovaApexChart\formatter\BasicFormatter;
 new BasicFormatter('$', 'USD');
 ```
 
+Show comma separated numbers
+```php
+use DigitalCreative\NovaApexChart\formatter\BasicFormatter;
+new BasicFormatter('', '', true);
+```
+
 ## License
 
 The MIT License (MIT). Please see [License File](https://raw.githubusercontent.com/dcasia/nova-slider-filter/master/LICENSE) for more information.
diff --git a/dist/js/nova-apex-chart.js b/dist/js/nova-apex-chart.js
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     },
     "dependencies": {
         "apexcharts": "^3.10.1",
+        "comma-number": "^2.0.1",
         "vue": "^2.5.0",
         "vue-apexcharts": "^1.5.1"
     }

diff --git a/resources/js/components/NovaApexChart.vue b/resources/js/components/NovaApexChart.vue
@@ -1,11 +1,12 @@
 <template>
-    <card class="p-10">
+    <card class="px-6 py-4">
         <apexchart :type="card.type" :options="options" :series="card.series"></apexchart>
     </card>
 </template>
 
 <script>
     import VueApexCharts from 'vue-apexcharts'
+    import commaNumber from 'comma-number'
 
     export default {
         components: {
@@ -19,10 +20,6 @@
             // 'resourceId',
             // 'resourceName',
         ],
-        created() {
-            console.log(this.card)
-        },
-
         methods: {
             handleFormatter(options) {
 
@@ -31,8 +28,10 @@
                     if (key === 'formatter') {
                         const prefix = options[ key ].prefix || ''
                         const suffix = options[ key ].suffix || ''
+                        const showComma = options[ key ].showComma || false
                         options[ key ] = function (val) {
-                            return `${ prefix } ${ val } ${ suffix }`
+                            const finalValue = showComma ? commaNumber(val) : val
+                            return `${ prefix } ${ finalValue } ${ suffix }`
                         }
                     }
 
@@ -43,7 +42,6 @@
 
             }
         },
-
         computed: {
             options() {
                 const options = this.card.options

diff --git a/src/Formatter/BasicFormatter.php b/src/Formatter/BasicFormatter.php
@@ -16,11 +16,17 @@ class BasicFormatter implements JsonSerializable
      */
     private $suffix;
 
-    public function __construct(string $prefix, string $suffix)
+    /**
+     * @var bool
+     */
+    private $showComma;
+
+    public function __construct(string $prefix, string $suffix, bool $showComma = false)
     {
 
         $this->prefix = $prefix;
         $this->suffix = $suffix;
+        $this->showComma = $showComma;
 
     }
 
@@ -29,6 +35,7 @@ public function jsonSerialize(): array
         return [
             'prefix' => $this->prefix,
             'suffix' => $this->suffix,
+            'showComma' => $this->showComma,
         ];
     }
 }