Creates base chart component using Chart.js #91

LiferayCloud · Mar 23, 2018 · 4c45a93 · 4c45a93
1 parent b965dcd
commit 4c45a93
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 8 deletions.
diff --git a/packages/marble-chart/demos/index.html b/packages/marble-chart/demos/index.html
@@ -18,7 +18,37 @@ <h1 class="page-title">Chart</h1>
   <div id="container"></div>
 
   <script>
-    new metal.Chart({}, '#container');
+    window.chart = new metal.Chart({
+      type: 'pie',
+      data: {
+        labels: [
+          'Foo',
+          'Bar'
+        ],
+        datasets: [
+          {
+            data: [
+              10,
+              45
+            ],
+            backgroundColor: [
+              'rgba(255, 99, 132, 0.2)',
+              'rgba(54, 162, 235, 0.2)'
+            ],
+            borderColor: [
+              'rgba(255,99,132,1)',
+              'rgba(54, 162, 235, 1)'
+            ],
+            borderWidth: 1
+          }
+        ]
+      },
+      options: {
+        legend: {
+          display: false
+        }
+      }
+    }, '#container');
   </script>
 </body>
 </html>
diff --git a/packages/marble-chart/package.json b/packages/marble-chart/package.json
@@ -27,6 +27,7 @@
     "metal"
   ],
   "dependencies": {
+    "chart.js": "^2.7.2",
     "metal-component": "^2.14.0",
     "metal-soy": "^2.14.0",
     "metal-state": "^2.14.0"

diff --git a/packages/marble-chart/src/Chart.js b/packages/marble-chart/src/Chart.js
@@ -1,13 +1,38 @@
+import {isServerSide} from 'metal';
 import Component from 'metal-component';
 import Soy from 'metal-soy';
 import {Config} from 'metal-state';
+import ChartJS from 'chart.js';
 
 import templates from './Chart.soy.js';
 
 /**
  * Chart component.
  */
-class Chart extends Component {}
+class Chart extends Component {
+  attached() {
+    if (isServerSide()) {
+      return;
+    }
+
+    this.chart = new ChartJS(this.refs.canvas, {
+      type: this.type,
+      data: this.data,
+      options: this.options,
+    });
+  }
+
+  willReceiveState(changes) {
+    if (changes.data) {
+      this.chart.data = changes.data.newVal;
+      this.chart.update();
+    }
+  }
+
+  disposed() {
+    this.chart.destroy();
+  }
+}
 
 /**
  * State definition.
@@ -16,11 +41,28 @@ class Chart extends Component {}
  */
 Chart.STATE = {
   /**
-   * ID to be applied to the element.
+   * Built-in types for Chart.js
    * @type {!String}
-   * @default example
    */
-  id: Config.string().value('example'),
+  type: {
+    value: Config.oneOf(['bar', 'bubble', 'line', 'pie', 'polarArea', 'radar']),
+  },
+
+  /**
+   * Data used to render Chart.js
+   * @type {!Object}
+   */
+  data: {
+    value: {}
+  },
+
+  /**
+   * Styling options for Chart.js
+   * @type {!Object}
+   */
+  options: {
+    value: {}
+  }
 };
 
 Soy.register(Chart, templates);

diff --git a/packages/marble-chart/src/Chart.soy b/packages/marble-chart/src/Chart.soy
@@ -4,7 +4,5 @@
  * This renders the component's whole content.
  */
 {template .render}
-  {@param? id: string}
-
-  <div id="{$id}">Hello World</div>
+  <canvas ref="canvas"></canvas>
 {/template}