From 345e32811e120297fc434c4ae3b4baf31fbf09a3 Mon Sep 17 00:00:00 2001 From: Adrian Pizarro Serrano Date: Sat, 2 Nov 2019 16:36:49 +0100 Subject: [PATCH] Fixed for Ajax or asset input --- README.md | 56 ++++++++++++++++++++++-- examples/dataLoadChart/index.html | 64 +++++++++++++++++++++++++++ examples/museum/code.html | 15 ++++--- examples/museum/index.html | 4 +- examples/totem/code.html | 5 ++- examples/totem/index.html | 3 +- index.html | 4 +- index.js | 72 ++++++++++++++++--------------- 8 files changed, 170 insertions(+), 53 deletions(-) create mode 100644 examples/dataLoadChart/index.html diff --git a/README.md b/README.md index 9be38a8..1fb1fac 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Make 3D Charts with this component based on [A-Frame](https://aframe.io). | Property | Description | Default Value | | -------- | ----------- | ------------- | | type | Chart type. Currently we have bubble, pie, doughnut, bar, totem and cylinder charts.

*Totem: is used to change dynamically data charts | bubble | -| dataPoints | Path to JSON input data | ../data/data.json | | +| dataPoints | Path to JSON input file, asset or array of JSON data | ../data/data.json | | | axis_position | Set the axis position | {x:0, y:0, z:0} | | axis_visible | If false, axis will be hidden | true | | axis_color | Set the axis color | red | @@ -33,11 +33,11 @@ Make 3D Charts with this component based on [A-Frame](https://aframe.io). | show_legend_position | Set the legend position. Only works if show legend info property is true | {x:0, y:0, z:0} | | show_legend_rotation | Set the legend rotation. Only works if show legend info property is true | {x:0, y:0, z:0} | | show_legend_title | Title appearing in legend | Legend | -| entity_id_list | Comma separated list of a-entity ID. Only used in totem chart type | '' | -| dataPoints_list | Comma separated list of different URL dataPoint. Only used in totem chart type | '' | +| entity_id_list | Comma separated list of a-entity ID. Only used in totem chart type | 'barId,pieId' | +| dataPoints_list | JSON with name and data points. Only used in totem chart type | '{data1: ../data/data.json, data2: #asset1, data3: [{"x": 1, "y": 8, "z": 0, "size": 1, "color": "#ff0000"}]}' | ### JSON File -We need this file which contains the points in order to generate the chart. The path of this file must be included in dataPoint property. +File which contains the points in order to generate the chart. The path of this file must be included in dataPoint property. Example JSON file: @@ -86,3 +86,51 @@ Then require and use. require('aframe'); require('aframe-charts-component'); ``` + +### Extra Inputs + +-Ajax: +```html + + My A-Frame Scene + + + + + + + + + + +``` + +```JavaScript + $.get("/examples/data/data.json", function( data ) { + let myChart = document.getElementById("myChart"); + myChart.setAttribute('charts', {type: "bar", dataPoints: data}); + }); +``` + +-Asset: +```html + + My A-Frame Scene + + + + + + + + + + + + + +``` diff --git a/examples/dataLoadChart/index.html b/examples/dataLoadChart/index.html new file mode 100644 index 0000000..debe087 --- /dev/null +++ b/examples/dataLoadChart/index.html @@ -0,0 +1,64 @@ + + + + + A-Frame A-Charts Component - Bar + + + + + + + + Home + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/museum/code.html b/examples/museum/code.html index a69bb36..03c6b3c 100644 --- a/examples/museum/code.html +++ b/examples/museum/code.html @@ -50,16 +50,17 @@

Dynamic Museum Code

<a-scene background="color: grey" cursor="rayOrigin:mouse"> <!-- Cursor mouse clickable. --> <a-light type="point" intensity="1" position="-2 10 10"></a-light> - <a-entity id="barId" charts="type: bar; dataPoints: ../data/dataPositive.json" position="-50 0 10" rotation="0 30 -10"></a-entity> - <a-entity id="bubbleId" charts="type: bubble; dataPoints: ../data/dataPositive.json" position="-25 15 0" rotation="0 20 -10"></a-entity> - <a-entity id="pieId" charts="type: pie; dataPoints: ../data/dataPositive.json; pie_radius: 5" position="-5 0 -20"></a-entity> - <a-entity id="cylinderId" charts="type: cylinder; dataPoints: ../data/dataPositive.json" position="12 17 -5" rotation="0 -20 10"></a-entity> - <a-entity id="pieDoughnutId" charts="type: pie; dataPoints: ../data/dataPositive.json; pie_radius: 5; pie_doughnut: true" position="35 0 -10"></a-entity> + <a-entity id="barId" charts="type: bar; dataPoints: ../data/dataPositive.json" position="-50 0 10" rotation="0 30 -10"></a-entity> + <a-entity id="bubbleId" charts="type: bubble; dataPoints: ../data/dataPositive.json" position="-25 15 0" rotation="0 20 -10"></a-entity> + <a-entity id="pieId" charts="type: pie; dataPoints: ../data/dataPositive.json; pie_radius: 5" position="-5 0 -20"></a-entity> + <a-entity id="cylinderId" charts="type: cylinder; dataPoints: ../data/dataPositive.json" position="12 17 -5" rotation="0 -20 10"></a-entity> + <a-entity id="pieDoughnutId" charts="type: pie; dataPoints: ../data/dataPositive.json; pie_radius: 5; pie_doughnut: true" position="35 0 -10"></a-entity> <a-light type="point" intensity="0.7" position="1 30 30"></a-light> - <a-entity charts="type: totem; entity_id_list: barId,bubbleId,pieId,cylinderId,pieDoughnutId; - dataPoints_list: ../data/dataPositive.json,../data/data.json,../data/dataSmall.json" position="1 15 10"></a-entity> + <a-entity position="1 15 10" charts='type: totem; entity_id_list: barId,bubbleId,pieId,cylinderId,pieDoughnutId; + dataPoints_list: {"dataPositive.json": "../data/dataPositive.json", "data.json": "../data/data.json","dataSmall.json": "../data/dataSmall.json"}'> + </a-entity> <a-entity movement-controls="fly: true" position="0 30 30" rotation="-24 15 0"> <!-- Camera fly movement. --> diff --git a/examples/museum/index.html b/examples/museum/index.html index 5544415..cc79866 100644 --- a/examples/museum/index.html +++ b/examples/museum/index.html @@ -30,8 +30,8 @@ - + diff --git a/examples/totem/code.html b/examples/totem/code.html index 11869e5..7ce2dc3 100644 --- a/examples/totem/code.html +++ b/examples/totem/code.html @@ -54,8 +54,9 @@

Totem Code

<a-light type="point" intensity="0.7" position="1 30 30"></a-light> - <a-entity charts="type: totem; entity_id_list: barId; - dataPoints_list: ../data/dataPositive.json,../data/data.json,../data/dataSmall.json" position="1 15 10"></a-entity> + <a-entity charts='type: totem; entity_id_list: barId; + dataPoints_list: {"dataPositive.json": "../data/dataPositive.json", "data.json": "../data/data.json", "dataSmall.json": "../data/dataSmall.json"}' + position="1 15 10"></a-entity> <a-entity movement-controls="fly: true" position="0 30 30" rotation="-24 15 0"> diff --git a/examples/totem/index.html b/examples/totem/index.html index 619e870..cb311d8 100644 --- a/examples/totem/index.html +++ b/examples/totem/index.html @@ -26,8 +26,7 @@ - + diff --git a/index.html b/index.html index ac90cdb..dbcaa4a 100644 --- a/index.html +++ b/index.html @@ -119,8 +119,8 @@

Doughnut Chart

Totem

This is the totem example.

We can use it in order to change data dynamically

- 
<a-entity  position="1 15 10" charts="type: totem;  entity_id_list: barId;
-    dataPoints_list: ../data/dataPositive.json,../data/data.json,../data/dataSmall.json">
+                
<a-entity  position="1 15 10" charts='type: totem;  entity_id_list: barId;
+    dataPoints_list: {"dataPositive.json": "../data/dataPositive.json", "data.json": "../data/data.json", "dataSmall.json": "../data/dataSmall.json"}'>
 </a-entity>

                 Full detailed Code
             
diff --git a/index.js b/index.js
index 121f152..aefad1b 100644
--- a/index.js
+++ b/index.js
@@ -51,12 +51,22 @@ AFRAME.registerComponent('charts', {
     * Generally modifies the entity based on the data.
     */
 
-    update: function (newData) {
+    update: function (oldData) {
         const data = this.data;
-        if (newData!= null && newData.dataPoints){
-            this.loader.load(newData.dataPoints, this.onDataLoaded.bind(this));
-        }else if(data.dataPoints){
-            this.loader.load(data.dataPoints, this.onDataLoaded.bind(this));
+        if (data.dataPoints && data.dataPoints !== oldData.dataPoints) {
+            while (this.el.firstChild)
+                this.el.firstChild.remove();
+        }
+        if(data.dataPoints) {
+            if (data.dataPoints.constructor === ([{}]).constructor) {
+                this.onDataLoaded(this, data.dataPoints, true);
+            }else if(data.dataPoints.constructor === "".constructor){
+                try{
+                    this.onDataLoaded(this, JSON.parse(data.dataPoints), true);
+                }catch(e) {
+                    this.loader.load(data.dataPoints, this.onDataLoaded.bind(this, false));
+                }
+            }
         }else if(data.type === "totem"){
             generateTotem(data, this.el);
         }
@@ -84,10 +94,11 @@ AFRAME.registerComponent('charts', {
     */
     play: function () { },
 
-    onDataLoaded: function (file) {
-        let dataPoints;
+    onDataLoaded: function (isJson, file) {
+        let dataPoints = file;
         try{
-            dataPoints = JSON.parse(file);
+            if(!isJson)
+                dataPoints = JSON.parse(file);
         }catch(e) {
             throw new Error('Can\'t parse JSON file. Maybe is not a valid JSON file');
         }
@@ -392,12 +403,6 @@ function generateCylinder(point) {
     return entity;
 }
 
-let removeAllChildren = function(element, children){
-    children.forEach(function(child) {
-        element.el.removeChild(child);
-    });
-};
-
 function generateTotemTitle(width, position) {
     let entity = document.createElement('a-plane');
     entity.setAttribute('position', position);
@@ -428,21 +433,20 @@ function generateTotemSlice(properties, entity_id_list, dataPoints_path) {
     });
 
     entity.addEventListener('click', function () {
-        console.log(dataPoints_path);
         let entity_list = entity_id_list.split(',');
         for(let id of entity_list){
             let el = document.querySelector('#' + id).components.charts;
-            removeAllChildren(el, el.el.getChildEntities());
-            el.update({dataPoints: dataPoints_path});
+            let oldDataPoints = el.data.dataPoints;
+            el.data.dataPoints = dataPoints_path;
+            el.update({dataPoints: oldDataPoints});
         }
     });
     return entity;
 }
 
 function getTotemWidth(dataPoints_list) {
-    let max_width = 0;
-    for(let dataPoints of dataPoints_list){
-        let name = dataPoints.split('/')[dataPoints.split('/').length - 1];
+    let max_width = "Select dataSource:".length;
+    for(let name in dataPoints_list){
         if(name.length > max_width)
             max_width = name.length;
     }
@@ -457,17 +461,17 @@ function generateTotem(properties, element) {
     if(properties.dataPoints_list === '')
         return;
 
-    let dataPoints_list = properties.dataPoints_list.split(',');
+    let dataPoints_list = properties.dataPoints_list.constructor === ({}).constructor ? properties.dataPoints_list : JSON.parse(properties.dataPoints_list);
     let position = getPosition(element);
     let width = getTotemWidth(dataPoints_list);
     element.appendChild(generateTotemTitle(width, position));
     let offset = 0.75;
-    for(let dataPoints of dataPoints_list){
+    for(let myDataPoints in dataPoints_list){
         let dataProperties = {};
         dataProperties['position'] = {x: position.x, y: parseInt(position.y) - offset, z: position.z};
-        dataProperties['name'] = dataPoints.split('/')[dataPoints.split('/').length - 1];
+        dataProperties['name'] = myDataPoints;
         dataProperties['width'] = width;
-        element.appendChild(generateTotemSlice(dataProperties, properties.entity_id_list, dataPoints));
+        element.appendChild(generateTotemSlice(dataProperties, properties.entity_id_list, dataPoints_list[myDataPoints]));
         offset += 0.65;
     }
 
@@ -542,7 +546,7 @@ function generateAxis(element, properties) {
                 tick_end   = {x: axis_position.x + tick_length,  y: axis_position.y,                z: axis_position.z + tick};
             }
 
-            axis_line.setAttribute('line__' + tick, {
+            axis_line.setAttribute('line__' + axis + tick, {
                 'start': tick_start,
                 'end':   tick_end,
                 'color': tick_color
@@ -554,21 +558,21 @@ function generateAxis(element, properties) {
                 axis_text.setAttribute('position', tick_start);
 
                 if (axis === 'x') {
-                    axis_text.setAttribute('text__' + tick, {
+                    axis_text.setAttribute('text__' + axis + tick, {
                         'value': Math.round(tick * 100) / 100,
                         'width': axis_text_size,
                         'color': axis_text_color,
                         'xOffset': 5
                     });
                 }else if (axis === 'y') {
-                    axis_text.setAttribute('text__' + tick, {
+                    axis_text.setAttribute('text__' + axis + tick, {
                         'value': Math.round(tick * 100) / 100,
                         'width': axis_text_size,
                         'color': axis_text_color,
                         'xOffset': 4
                     });
                 }else{
-                    axis_text.setAttribute('text__' + tick, {
+                    axis_text.setAttribute('text__' + axis + tick, {
                         'value': Math.round(tick * 100) / 100,
                         'width': axis_text_size,
                         'color': axis_text_color,
@@ -646,21 +650,21 @@ function generateGridAxis(element, properties) {
                 axis_text.setAttribute('position', tick_end);
 
                 if (axis === 'x') {
-                    axis_text.setAttribute('text__' + tick, {
+                    axis_text.setAttribute('text__' + axis + tick, {
                         'value': Math.round(tick * 100) / 100,
                         'width': axis_text_size,
                         'color': axis_text_color,
                         'xOffset': 5
                     });
                 }else if (axis === 'y') {
-                    axis_text.setAttribute('text__' + tick, {
+                    axis_text.setAttribute('text__' + axis + tick, {
                         'value': Math.round(tick * 100) / 100,
                         'width': axis_text_size,
                         'color': axis_text_color,
                         'xOffset': 4
                     });
                 }else{
-                    axis_text.setAttribute('text__' + tick, {
+                    axis_text.setAttribute('text__' + axis + tick, {
                         'value': Math.round(tick * 100) / 100,
                         'width': axis_text_size,
                         'color': axis_text_color,
@@ -671,13 +675,13 @@ function generateGridAxis(element, properties) {
                 element.appendChild(axis_text);
             }
 
-            axis_line.setAttribute('line__' + tick, {
+            axis_line.setAttribute('line__' + axis + tick, {
                 'start': tick_start,
                 'end':   tick_end,
                 'color': axis_color
             });
 
-            axis_line.setAttribute('line__' + tick + axis_length, {
+            axis_line.setAttribute('line__' + axis + tick + axis_length, {
                 'start': grid_start,
                 'end':   grid_end,
                 'color': axis_color
@@ -700,7 +704,7 @@ function generateGridAxis(element, properties) {
                     sub_grid_end   = {x: axis_position.x + axis_length,           y: axis_position.y + grid,                  z: axis_position.z + tick};
                 }
 
-                axis_line.setAttribute('line__' + tick + grid + axis_length, {
+                axis_line.setAttribute('line__' + axis + tick + grid + axis_length, {
                     'start': sub_grid_start,
                     'end':   sub_grid_end,
                     'color': axis_color