You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by bi...@apache.org on 2018/03/26 07:08:24 UTC
[royale-asjs] branch feature/echarts updated: Fix data binding
issues
This is an automated email from the ASF dual-hosted git repository.
bigosmallm pushed a commit to branch feature/echarts
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/feature/echarts by this push:
new 4ae3684 Fix data binding issues
4ae3684 is described below
commit 4ae36845c19a923a58f795738b2f428c2615d130
Author: Om Muppirala <bi...@apache.org>
AuthorDate: Mon Mar 26 00:07:44 2018 -0700
Fix data binding issues
---
examples/royale/ECharts/src/Main.mxml | 37 +++++----
examples/royale/ECharts/src/echarts/ECharts.as | 50 ++++++++----
.../royale/ECharts/src/echarts/EChartsOptions.as | 90 ++++++++++++++++++++--
examples/royale/ECharts/src/echarts/Series.as | 50 +++++++++++-
examples/royale/ECharts/src/echarts/Title.as | 4 +-
examples/royale/ECharts/src/echarts/XAxis.as | 36 ++++++++-
examples/royale/ECharts/src/echarts/YAxis.as | 3 +
examples/royale/ECharts/template.html | 2 +-
8 files changed, 230 insertions(+), 42 deletions(-)
diff --git a/examples/royale/ECharts/src/Main.mxml b/examples/royale/ECharts/src/Main.mxml
index 30b170e..1b95907 100644
--- a/examples/royale/ECharts/src/Main.mxml
+++ b/examples/royale/ECharts/src/Main.mxml
@@ -1,21 +1,26 @@
<?xml version="1.0" encoding="utf-8"?>
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:local="*"
- xmlns:models="models.*"
- xmlns:js="library://ns.apache.org/royale/basic" xmlns:ns1="library://ns.apache.org/royale/express" xmlns:ns2="echarts.*"
+ xmlns:js="library://ns.apache.org/royale/express"
+ xmlns:ns2="echarts.*"
+ initialize="onAppInitialize(event)"
>
<fx:Script>
<![CDATA[
- [Bindable] public var data:Array = ["shirt","cardign","chiffon shirt","pants","heels","socks"];
- [Bindable] public var seriesData:Array = [5, 20, 36, 10, 10, 20];
+ [Bindable] private var data:Array = ["shirt","cardign","chiffon shirt","pants","heels","socks"];
+ [Bindable] private var seriesData:Array = [5, 20, 36, 10, 10, 20];
+
+ private function onAppInitialize(event:Event):void
+ {
+ setTimeout(function():void {
+ this.data = ["shirt","cardign","chiffon shirt","pants","heels","socks"];
+ this.seriesData = [5, 20, 36, 10, 10, 20];
+ },2000);
+ }
]]>
</fx:Script>
- <js:valuesImpl>
- <js:SimpleCSSValuesImpl />
- </js:valuesImpl>
<js:initialView>
<js:View>
- <ns2:ECharts>
+ <ns2:ECharts id="chart">
<ns2:chartOptions>
<ns2:EChartsOptions>
<ns2:title>
@@ -23,17 +28,19 @@
link="http://www.google.com" target="_self" />
</ns2:title>
<ns2:xAxis>
- <ns2:XAxis data="{this.data}" />
+ <ns2:XAxis data="{this.data}" position="top" />
</ns2:xAxis>
-
+ <ns2:yAxis>
+ <ns2:YAxis/>
+ </ns2:yAxis>
<ns2:series>
- <fx:Array>
- <ns2:Series name="Sales" type="bar" data="{this.seriesData}" />
- </fx:Array>
+ <js:ArrayList>
+ <ns2:Series name="Accounts" type="bar" data="{this.seriesData}" />
+ </js:ArrayList>
</ns2:series>
</ns2:EChartsOptions>
</ns2:chartOptions>
</ns2:ECharts>
</js:View>
</js:initialView>
-</js:Application>
+</js:Application>
\ No newline at end of file
diff --git a/examples/royale/ECharts/src/echarts/ECharts.as b/examples/royale/ECharts/src/echarts/ECharts.as
index dee7a1a..4697a80 100644
--- a/examples/royale/ECharts/src/echarts/ECharts.as
+++ b/examples/royale/ECharts/src/echarts/ECharts.as
@@ -9,9 +9,10 @@ package echarts
private var echartsContainer:WrappedHTMLElement;
private var echartsInstance:Object;
+ private var echartsInstanceCreated:Boolean = false;
//EChart options
- private var _chartOptions:EChartsOptions;
+ private var _chartOptions:EChartsOptions = null;
public function ECharts()
{
@@ -25,24 +26,17 @@ package echarts
echartsContainer.setAttribute("style", "width: 600px;height:400px;");
echartsInstance = global["echarts"].init(echartsContainer);
+ echartsInstanceCreated = true;
var option:Object =
{
- xAxis: {
- data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
- },
- yAxis: {
-
- },
+ xAxis:{},
+ yAxis:{},
series:[{
data: [5, 20, 36, 10, 10, 20],
type: "bar",
name: "Sales"
- }],
- tooltip: {},
- legend: {
- data:['Sales']
- }
+ }]
};
//echartsInstance.setOption(option);
@@ -50,13 +44,41 @@ package echarts
return echartsContainer;
}
+ protected function handleChartOptionsChanged(event:Event):void {
+ applyChartOptions(EChartsOptions(event.currentTarget).options);
+ }
+
public function set chartOptions(v:EChartsOptions):void {
- this._chartOptions = v;
- echartsInstance.setOption(v);
+ if(this._chartOptions == null) {
+ this._chartOptions = v;
+ this._chartOptions.addEventListener("chartOptionsChanged", this.handleChartOptionsChanged);
+ this.applyChartOptions(this._chartOptions.options);
+ }
+ else {
+ if(!isEqual(this._chartOptions.options, v.options)) {
+ this._chartOptions = v;
+ this._chartOptions.addEventListener("chartOptionsChanged", this.handleChartOptionsChanged);
+ this.applyChartOptions(this._chartOptions.options);
+ }
+ }
+ }
+
+ private function applyChartOptions(options:Object):void {
+ if(this.echartsInstanceCreated) {
+ this.echartsInstance.setOption(options);
+ }
+ }
+
+ private function isEqual(a:Object, b:Object):Boolean {
+ return JSON.stringify(a) === JSON.stringify(b);
}
public function get chartOptions():EChartsOptions {
return this._chartOptions;
}
+
+ public function redraw(v:EChartsOptions):void {
+ echartsInstance.resize(v);
+ }
}
}
\ No newline at end of file
diff --git a/examples/royale/ECharts/src/echarts/EChartsOptions.as b/examples/royale/ECharts/src/echarts/EChartsOptions.as
index f9bf75a..a922827 100644
--- a/examples/royale/ECharts/src/echarts/EChartsOptions.as
+++ b/examples/royale/ECharts/src/echarts/EChartsOptions.as
@@ -1,9 +1,89 @@
package echarts
{
- public class EChartsOptions{
- public var title:Title;
- public var xAxis:XAxis;
- public var yAxis:YAxis = new YAxis();
- public var series:Array = [];
+ import org.apache.royale.events.EventDispatcher;
+ import org.apache.royale.collections.ArrayList;
+ import org.apache.royale.events.CollectionEvent;
+
+ [Bindable("chartOptionsChanged")]
+ public class EChartsOptions extends EventDispatcher{
+ private var _title:Title = new Title();
+ private var _xAxis:XAxis;
+ private var _yAxis:YAxis = new YAxis();
+ private var _series:ArrayList;
+
+ public function EChartsOptions() {
+
+ }
+
+ [Bindable("chartOptionsChanged")]
+ public function get title():Title
+ {
+ return _title;
+ }
+
+ public function set title(value:Title):void
+ {
+ _title = value;
+ dispatchEvent(new Event("chartOptionsChanged"));
+ }
+
+ [Bindable("chartOptionsChanged")]
+ public function get xAxis():XAxis
+ {
+ return _xAxis;
+ }
+
+ public function set xAxis(value:XAxis):void
+ {
+ _xAxis = value;
+ this._xAxis.addEventListener("xAxisChanged", this.optionsChanged);
+ dispatchEvent(new Event("chartOptionsChanged"));
+ }
+
+ [Bindable("chartOptionsChanged")]
+ public function get yAxis():YAxis
+ {
+ return _yAxis;
+ }
+
+ public function set yAxis(value:YAxis):void
+ {
+ _yAxis = value;
+ dispatchEvent(new Event("chartOptionsChanged"));
+ }
+
+ [Bindable("chartOptionsChanged")]
+ public function get series():ArrayList
+ {
+ return _series;
+ }
+
+ public function set series(value:ArrayList):void
+ {
+ _series = value;
+ this._series.addEventListener(CollectionEvent.ITEM_UPDATED, this.optionsChanged);
+ this._series.addEventListener(CollectionEvent.COLLECTION_CHANGED, this.optionsChanged);
+ this._series.addEventListener(CollectionEvent.ITEM_ADDED, this.optionsChanged);
+ dispatchEvent(new Event("chartOptionsChanged"));
+ }
+
+ public function get options():Object {
+ return {title: this.title,
+ xAxis: this.xAxis.obj,
+ yAxis: this.yAxis,
+ series: getSeriesValues()};
+ }
+
+ protected function getSeriesValues():Array {
+ var a:Array = this.series.source.map(function(item:Series):Object {
+ return item.obj;
+ });
+ return a;
+ }
+
+ protected function optionsChanged(event:Event):void {
+ dispatchEvent(new Event("chartOptionsChanged"));
+ }
+
}
}
\ No newline at end of file
diff --git a/examples/royale/ECharts/src/echarts/Series.as b/examples/royale/ECharts/src/echarts/Series.as
index 6ff1af2..8640a54 100644
--- a/examples/royale/ECharts/src/echarts/Series.as
+++ b/examples/royale/ECharts/src/echarts/Series.as
@@ -1,9 +1,51 @@
package echarts
{
+ import org.apache.royale.events.EventDispatcher;
- public class Series{
- public var data:Array;
- public var name:String;
- public var type:String;
+ public class Series extends EventDispatcher{
+ private var _data:Array;
+ private var _name:String;
+ private var _type:String;
+
+ [Bindable("seriesChanged")]
+ public function get data():Array
+ {
+ return _data;
+ }
+
+ public function set data(value:Array):void
+ {
+ _data = value;
+ dispatchEvent(new Event("seriesChanged"));
+ }
+
+ [Bindable("seriesChanged")]
+ public function get name():String
+ {
+ return _name;
+ }
+
+ public function set name(value:String):void
+ {
+ _name = value;
+ }
+
+ [Bindable("seriesChanged")]
+ public function get type():String
+ {
+ return _type;
+ }
+
+ public function set type(value:String):void
+ {
+ _type = value;
+ dispatchEvent(new Event("seriesChanged"));
+ }
+
+ public function get obj():Object {
+ return {data: this.data,
+ type: this.type,
+ name: this.name};
+ }
}
}
\ No newline at end of file
diff --git a/examples/royale/ECharts/src/echarts/Title.as b/examples/royale/ECharts/src/echarts/Title.as
index b524e7d..4d96392 100644
--- a/examples/royale/ECharts/src/echarts/Title.as
+++ b/examples/royale/ECharts/src/echarts/Title.as
@@ -1,6 +1,8 @@
package echarts
{
-
+ /**
+ * @royalesuppresspublicvarwarning
+ */
public class Title{
public var text:String;
public var show:Boolean;
diff --git a/examples/royale/ECharts/src/echarts/XAxis.as b/examples/royale/ECharts/src/echarts/XAxis.as
index 2681dc0..92cd868 100644
--- a/examples/royale/ECharts/src/echarts/XAxis.as
+++ b/examples/royale/ECharts/src/echarts/XAxis.as
@@ -1,6 +1,38 @@
package echarts
{
- public class XAxis{
- public var data:Array;
+ import org.apache.royale.events.EventDispatcher;
+
+ public class XAxis extends EventDispatcher{
+ private var _data:Array;
+ private var _position:String;
+
+ [Bindable("xAxisChanged")]
+ public function get data():Array
+ {
+ return _data;
+ }
+
+ public function set data(value:Array):void
+ {
+ _data = value;
+ dispatchEvent(new Event("xAxisChanged"));
+ }
+
+ [Bindable("xAxisChanged")]
+ public function get position():String
+ {
+ return _position;
+ }
+
+ public function set position(value:String):void
+ {
+ _position = value;
+ dispatchEvent(new Event("xAxisChanged"));
+ }
+
+ public function get obj():Object {
+ return {data: this.data,
+ position: this.position};
+ }
}
}
\ No newline at end of file
diff --git a/examples/royale/ECharts/src/echarts/YAxis.as b/examples/royale/ECharts/src/echarts/YAxis.as
index 4b50526..210877e 100644
--- a/examples/royale/ECharts/src/echarts/YAxis.as
+++ b/examples/royale/ECharts/src/echarts/YAxis.as
@@ -1,5 +1,8 @@
package echarts
{
+ /**
+ * @royalesuppresspublicvarwarning
+ */
public class YAxis{
}
diff --git a/examples/royale/ECharts/template.html b/examples/royale/ECharts/template.html
index a28c6ce..2c32c6e 100644
--- a/examples/royale/ECharts/template.html
+++ b/examples/royale/ECharts/template.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8"/>
<title>ECharts Example</title>
-<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts-en.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts-en.js"></script>
${head}
</head>
<body>
--
To stop receiving notification emails like this one, please contact
bigosmallm@apache.org.