Merge pull request #45 from cryogenian/events

Events/Actions

Author: cryogenian

example/src/Bar.purs

@@ -7,23 +7,18 @@ import Color as C
 import Control.Monad.Eff (Eff)
 import Control.Monad.Eff.Exception (EXCEPTION)
 import Control.Monad.Eff.Random (RANDOM, random)
-
+import DOM (DOM)
+import DOM.Node.Types (ElementId(..))
 import Data.Array as Arr
-import Data.Traversable as F
 import Data.Maybe (Maybe(..))
-
+import Data.Traversable as F
 import Debug.Trace as DT
-
-import DOM (DOM)
-import DOM.Node.Types (ElementId(..))
-
 import ECharts.Chart as EC
-import ECharts.Types as ET
-import ECharts.Monad (DSL)
-import ECharts.Types.Phantom as ETP
 import ECharts.Commands as E
 import ECharts.Event as EE
-
+import ECharts.Monad (DSL)
+import ECharts.Types as ET
+import ECharts.Types.Phantom as ETP
 import Utils as U
 
 itemStyle ∷ DSL ETP.ItemStyleI
@@ -73,6 +68,7 @@ options inp = do
           E.magicTiled
       E.dataView $ pure unit
 
+
   E.xAxis do
     E.name "X Axis"
     E.axisLine do
@@ -107,7 +103,6 @@ options inp = do
       E.controller do
         E.inRange do
           F.for_ (C.fromHexString "#2f4554") E.color
-
   E.series do
     E.bar do
       E.name "bar"
@@ -152,4 +147,5 @@ chart = do
       ch ← EC.init el
       inp ← genInp
       EC.setOption (options inp)  ch
+      EC.getOption ch >>= DT.traceAnyA
       EE.listenAll ch DT.traceAnyA

example/src/Pie.purs

@@ -5,6 +5,8 @@ import Prelude
 import Control.Monad.Eff (Eff)
 import Control.Monad.Eff.Exception (EXCEPTION)
 import Data.Maybe (Maybe(..))
+import Data.Symbol (SProxy(..))
+import Data.Variant as V
 import Debug.Trace as DT
 import DOM (DOM)
 import DOM.Node.Types (ElementId(..))
@@ -46,6 +48,7 @@ options = do
           E.name "three"
     E.pie do
       E.name "Outer"
+      E.selectedMode ET.Multiple
       E.radius $ ET.Radius { start: ET.Percent 40.0, end: ET.Percent 55.0 }
       E.buildItems do
         E.addItem do
@@ -83,3 +86,11 @@ chart = do
       ch ← EC.init el
       EC.setOption options ch
       EE.listenAll ch DT.traceAnyA
+      EE.dispatch
+        (V.inj (SProxy ∷ SProxy "pieselected")
+           $  { seriesIndex: 1
+              , seriesName: "Outer"
+              , name: "seven"
+              , dataIndex: 4
+              })
+        ch

example/src/Scatter.purs

@@ -5,26 +5,20 @@ import Prelude
 import Control.Monad.Eff (Eff)
 import Control.Monad.Eff.Exception (EXCEPTION)
 import Control.Monad.Eff.Random (RANDOM)
-
 import Data.Array (zipWith)
 import Data.Maybe (Maybe(..), maybe)
 import Data.NonEmpty as NE
 import Data.Tuple (Tuple(..), uncurry)
-
 import Debug.Trace as DT
-
 import DOM (DOM)
 import DOM.Node.Types (ElementId(..))
-
 import ECharts.Chart as EC
 import ECharts.Theme as ETheme
 import ECharts.Types as ET
 import ECharts.Types.Phantom as ETP
 import ECharts.Commands as E
 import ECharts.Monad (DSL)
-
 import Math (cos, sin, (%))
-
 import Utils as U
 
 genSinData ∷ ∀ e. Eff (random ∷ RANDOM|e) (Array ET.Item)

package.json

@@ -2,7 +2,7 @@
   "name": "purescript-echarts",
   "private": true,
   "devDependencies": {
-    "echarts": "3.5.4",
+    "echarts": "cryogenian/echarts#item-value-unshift-prebuild",
     "express": "^4.14.0"
   },
   "scripts": {

src/ECharts/Chart.js

@@ -19,7 +19,7 @@ exports.registerTheme = function(name) {
         return function() {
             // if value is not `undefined` and is not of type `string` then it must be `Foreign` for which we only permit plain Objects.
             if (theme !== undefined && typeof theme !== 'string' && !isObject(theme)) {
-                throw new TypeError('Theme must be an Object')
+                throw new TypeError('Theme must be an Object');
             }
             echarts.registerTheme(name, theme);
         };

src/ECharts/Chart.purs

@@ -43,7 +43,8 @@ initWithTheme
   ⇒ Theme
   → HTMLElement
   → m Chart
-initWithTheme theme el = liftEff $ initImpl (either (toForeign <<< builtInThemeName) toForeign theme) el
+initWithTheme theme el =
+  liftEff $ initImpl (either (toForeign <<< builtInThemeName) toForeign theme) el
 
 foreign import registerTheme
   ∷ ∀ e. String

src/ECharts/Commands.purs

@@ -220,6 +220,12 @@ xAxisIndex a = set "xAxisIndex" $ toForeign a
 yAxisIndex ∷ ∀ i. Int → DSL (yAxisIndex ∷ I|i)
 yAxisIndex a = set "yAxisIndex" $ toForeign a
 
+xAxisAllIndices ∷ ∀ i. DSL (xAxisIndex ∷ I|i)
+xAxisAllIndices = set "xAxisIndex" $ toForeign "all"
+
+yAxisAllIndices ∷ ∀ i. DSL (yAxisIndex ∷ I|i)
+yAxisAllIndices = set "yAxisIndex" $ toForeign "all"
+
 polarIndex ∷ ∀ i. Int → DSL (polarIndex ∷ I|i)
 polarIndex a = set "polarIndex" $ toForeign a
 
@@ -430,33 +436,69 @@ textMiddle = set "textBaseline" $ toForeign "middle"
 brush ∷ ∀ i. DSL TP.BrushI → DSL (brush ∷ I|i)
 brush = set "brush" <<< buildObj
 
+brushType ∷ ∀ i. DSL TP.BrushToolboxI → DSL (brushType ∷ I|i)
+brushType a = set "type" $ buildArr a
+
 brushToolbox ∷ ∀ i. DSL TP.BrushToolboxI → DSL (brushToolbox ∷ I|i)
 brushToolbox a =  set "toolbox" $ buildArr a
 
+brushModeSingle ∷ ∀ i. DSL (brushMode ∷ I|i)
+brushModeSingle = set "brushMode" $ toForeign "single"
+
+brushIcons ∷ ∀ i. DSL TP.BFFieldI → DSL (bfIcon ∷ I|i)
+brushIcons a = set "icon" $ buildObj a
+
+brushTitle ∷ ∀ i. DSL TP.BFFieldI → DSL (bfTitle ∷ I|i)
+brushTitle a = set "title" $ buildObj a
+
+brushModeMultiple ∷ ∀ i. DSL (brushMode ∷ I|i)
+brushModeMultiple = set "brushMode" $ toForeign "multiple"
+
 rect ∷ ∀ i. DSL (tool ∷ I|i)
 rect = set "" $ toForeign "rect"
 
+setRect ∷ ∀ i. String → DSL (rect ∷ I|i)
+setRect a = set "rect" $ toForeign a
+
 polygon ∷ ∀ i. DSL (tool ∷ I|i)
 polygon = set "" $ toForeign "polygon"
 
+setPolygon ∷ ∀ i. String → DSL (polygon ∷ I|i)
+setPolygon a = set "polygon" $ toForeign a
+
 lineX ∷ ∀ i. DSL (tool ∷ I|i)
 lineX = set "" $ toForeign "lineX"
 
+setLineX ∷ ∀ i. String → DSL (lineX ∷ I|i)
+setLineX a = set "lineX" $ toForeign a
+
 lineY ∷ ∀ i. DSL (tool ∷ I|i)
 lineY = set "" $ toForeign "lineY"
 
+setLineY ∷ ∀ i. String → DSL (lineY ∷ I|i)
+setLineY a = set "lineY" $ toForeign a
+
 keep ∷ ∀ i. DSL (tool ∷ I|i)
 keep = set "" $ toForeign "keep"
 
+setKeep ∷ ∀ i. String → DSL (keep ∷ I|i)
+setKeep a = set "keep" $ toForeign a
+
 clear ∷ ∀ i. DSL (tool ∷ I|i)
 clear = set "" $ toForeign "clear"
 
+setClear ∷ ∀ i. String → DSL (clear ∷ I|i)
+setClear a = set "clear" $ toForeign a
+
 toolbox ∷ ∀ i. DSL TP.ToolboxI → DSL (toolbox ∷ I|i)
 toolbox a = set "toolbox" $ buildObj a
 
 feature ∷ ∀ i. DSL TP.FeatureI → DSL (feature ∷ I|i)
 feature a = set "feature" $ buildObj a
 
+brushFeature ∷ ∀ i. DSL TP.BrushFeatureI → DSL (brush ∷ I|i)
+brushFeature a = set "brush" $ buildObj a
+
 magicType ∷ ∀ i. DSL TP.MagicTypeI → DSL (magicType ∷ I|i)
 magicType a = set "magicType" $ buildObj a
 

src/ECharts/Event.js

@@ -1,11 +1,102 @@
+function addData(area, axis, setKey) {
+    if (axis.type !== "value") {
+        area[setKey] = axis.data;
+    } else {
+        area[setKey] = [ ];
+    }
+    return;
+}
+
+// ECharts doesn't send x-axis data in brush events but we need it
+// because sorting algo may be opaque
+function addAxisData(option, e, axisKey, setKey, axisIndexKey) {
+    var i, j, gridIndex;
+    for (i = 0; i < e.areas.length; i++) {
+        gridIndex = parseInt(e.areas[i].panelId.match(/\d+$/g)[0]);
+        e.areas[i].gridIndex = gridIndex;
+        if (typeof option === "undefined") {
+            e.areas[i][setKey] = [ ];
+            e.areas[i][axisIndexKey] = 0;
+        } else if (typeof option[axisKey].length === "undefined" && gridIndex === 0) {
+            addData(e.areas[i], option[axisKey], setKey);
+            e.areas[i][axisIndexKey] = 0;
+        } else if (option[axisKey].length === 1 && gridIndex === 0) {
+            addData(e.areas[i], option[axisKey][0], setKey);
+            e.areas[i][axisIndexKey] = 0;
+        } else {
+            for (j = 0; j < option[axisKey].length; j++) {
+                if (option[axisKey][j].gridIndex === gridIndex) {
+                    addData(e.areas[i], option[axisKey][j], setKey);
+                    e.areas[i][axisIndexKey] = j;
+                }
+            }
+        }
+    }
+    return e;
+}
+
+function addXAxisData(option, e) {
+    return addAxisData(option, e, "xAxis", "xAxisData", "xAxisIndex");
+}
+
+function addYAxisData(option, e) {
+    return addAxisData(option, e, "yAxis", "yAxisData", "yAxisIndex");
+}
+
+function addSeriesAndTitles(option, e) {
+    var i, xIx, yIx, serie, ai, area;
+    for (ai = 0; ai < e.areas.length; ai++) {
+        area = e.areas[ai];
+        area.serieNames = [];
+        area.serieIndices = [];
+        for (i = 0; i < option.series.length; i++) {
+            serie = option.series[i];
+            xIx = serie.xAxisIndex || 0;
+            yIx = serie.xAxisIndex || 0;
+            if (xIx == area.xAxisIndex && yIx == area.yAxisIndex) {
+                area.serieNames.push(serie.name);
+                area.serieIndices.push(i);
+            }
+        }
+    }
+    var titles, titleTexts = [];
+    if (!option.title) {
+        titles = [];
+    } else if (typeof option.title.length === "undefined") {
+        titles = [option.title];
+    } else {
+        titles = option.title;
+    }
+    for (i = 0; i < titles.length; i++) {
+        if (titles[i].text) titleTexts.push(titles[i].text);
+    }
+    e.titleTexts = titleTexts;
+    return e;
+}
+
+function addAll(option, e) {
+    return addSeriesAndTitles(option, addYAxisData(option, addXAxisData(option, e)));
+}
+
 exports.on_ = function(chart) {
     return function(eName) {
         return function(callback) {
             return function() {
                 return chart.on(eName, function(e) {
+                    if (eName === "brush") {
+                        addAll(this.getOption(), e);
+                    }
                     callback(e)();
-                });
+                    });
             };
         };
     };
 };
+
+exports.dispatchAction_ = function(action) {
+    return function(chart) {
+        return function() {
+            return chart.dispatchAction(action);
+        };
+    };
+}