gridy-chart-chartjs - npm Package Compare versions

Comparing version 2.0.11 to 2.0.12

index.js

 
 
-export { GridyChartChartJS } from 'src/gridy-chart-chartjs.js';
+export { GridyChartChartJs } from 'src/gridy-chart-chartjs.js';

package.json

 {
   "name": "gridy-chart-chartjs",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "description": "GridyGrid chart component ChartJS driver",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -6,3 +6,3 @@ # GridyGrid chart component ChartsJS driver
 ```shell
-npm i  gridy-grid chart.js gridy-chart-chartjs
+npm i gridy-grid chart.js gridy-chart-chartjs gridy-grid-default sk-theme-default
 ```
@@ -23,6 +23,7 @@
     
-        <gridy-chart dri="chart-js" type="line" width="400" height="300" options='{"scales":{"y":{ "beginAtZero": true }}'></gridy-chart>
+        <gridy-chart dri="chart-js" type="line" field-price1="Price1" field-price2="Price2" width="400" height="300" options='{"scales":{"y":{ "beginAtZero": true }}}'></gridy-chart>
     
     </gridy-grid>
-    <script>
+    <script type="module">
+        import { GridyGrid } from '/node_modules/gridy-grid/src/gridy-grid.js';
         let data = [];
@@ -38,4 +39,5 @@ for (let i = 0; i < 10; i++) {
         });
+        customElements.define('gridy-grid', GridyGrid);
     </script>
     
-```
+```

src/gridy-chart-chartjs.js

 import { GridyChartDriver } from "../../gridy-grid/src/chart/gridy-chart-driver.js";
+import { FieldMappedChart } from "../../gridy-grid/src/chart/impl/field-mapped-chart.js";
 import * as jsonpath from '../../sk-core/complets/jsonpath.js';
@@ -14,8 +15,9 @@
 
-export class GridyChartChartJS extends GridyChartDriver {
-
-    fmtData(fields, data) {
+export class DefaultChartJs extends FieldMappedChart {
+    
+    fmtData(data) {
         let datasets = [];
         let min = 0, max = 0;
-        for (let field of fields) {
+        for (let fieldKey of Object.keys(this.fieldMappings)) {
+            let field = this.fieldMappings[fieldKey];
             let dsData = [];
@@ -47,5 +49,25 @@ for (let dataItem of data) {
     }
+    
+    render(container, options) {
+        let chart = new Chart(container, options);
+        chart.render();
+        return chart;    
+    }
+}
 
-    renderChart(el, data) {
-        let fmtedData = this.fmtData(el.dataSource.fields, data);
+export class GridyChartChartJs extends GridyChartDriver {
+
+    
+    implByType(type) {				
+        return new DefaultChartJs(this.el);
+	}
+    
+	renderChart(el, data) {
+
+		this.type = el.getAttribute('type');
+
+		this.chartImpl = this.implByType(this.type);
+		this.chartImpl.configFromEl(el);
+
+		let fmtedData = this.chartImpl.fmtData(data);
         let container = el.querySelector('.gridy-chart-container');
@@ -62,4 +84,5 @@ container.innerHTML = '';
         }
-        this.chart = new Chart(el.ctx, config);
+        
+        this.chart = this.chartImpl.render(el.ctx, config);
     }
-}
+}

No alert changes

Improved metrics

Total package byte prevSize

4461

increased by22.25%

Lines of code

73

increased by30.36%

Number of lines in readme file

41

increased by7.89%

No dependency changes