brush event augmentation, some types in events

Author: cryogenian

example/src/Bar.purs

@@ -73,6 +73,7 @@ options inp = do
           E.magicTiled
       E.dataView $ pure unit
 
+
   E.xAxis do
     E.name "X Axis"
     E.axisLine do
@@ -86,9 +87,9 @@ options inp = do
     E.inverse true
     E.splitArea E.hidden
 
-  E.grid do
-    E.left $ ET.Pixel 100
-
+--  E.grid do
+--    E.left $ ET.Pixel 100
+{-
   E.visualMap do
     E.continuous do
       E.dimension 1
@@ -107,7 +108,7 @@ 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,20 +153,21 @@ chart = do
       ch ← EC.init el
       inp ← genInp
       EC.setOption (options inp)  ch
+      EC.getOption ch >>= DT.traceAnyA
       EE.listenAll ch DT.traceAnyA
-      EE.dispatch (V.inj (SProxy ∷ SProxy "brush") $ toForeign evt) ch
+--      EE.dispatch (V.inj (SProxy ∷ SProxy "brush") $ toForeign evt) ch
   where
   evt =
     { batch:
       [ { areas:
           [ { brushType: "rect"
             , brushMode: "single"
-            , range:
-                [ [ 610
-                  , 885
+            , coordRange:
+                [ [ 0
+                  , 1
                   ]
-                , [ 236
-                  , 423
+                , [ 0
+                  , 1
                   ]
                 ]
             }

example/src/Pie.purs

@@ -7,6 +7,7 @@ import Control.Monad.Eff.Exception (EXCEPTION)
 import Data.Foreign (toForeign)
 import Data.Maybe (Maybe(..))
 import Data.Symbol (SProxy(..))
+import Data.StrMap as SM
 import Data.Variant as V
 import Debug.Trace as DT
 import DOM (DOM)
@@ -89,9 +90,15 @@ chart = do
       EE.listenAll ch DT.traceAnyA
       EE.dispatch
         (V.inj (SProxy ∷ SProxy "pieselected")
-           $ toForeign { seriesIndex: [1]
-                       , seriesName: []
-                       , dataIndex: Nothing
-                       , name: Just "seven"
-                       })
+           $  { seriesIndex: 1
+              , seriesName: "Outer"
+              , name: "seven"
+              , dataIndex: 4
+              })
         ch
+--      EE.dispatch
+--        (V.inj (SProxy ∷ SProxy "legendselectchanged")
+--           $ { name: "seven"
+--             , selected: SM.empty
+--             })
+--        ch

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

@@ -3,7 +3,7 @@ var echarts = require("echarts");
 exports.initImpl = function(theme) {
     return function(el) {
         return function() {
-            return echarts.init(el, theme);
+            return echarts.init(el,theme);
         };
     };
 };
@@ -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);
         };
@@ -38,6 +38,8 @@ exports.setOptionImpl = function(option) {
 exports.resetOptionImpl = function(option) {
     return function(chart) {
         return function() {
+            console.log("reset option")
+            console.log(option)
             chart.setOption(option, true, false);
             return {};
         };

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
 

src/ECharts/Event.js

@@ -1,11 +1,91 @@
+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) {
-                    console.log(e);
-                    callback(e)();
-                });
+                    var modifiedE = eName === "brush" ? addAll(this.getOption(), e) : e;
+                    callback(modifiedE)();
+                    });
             };
         };
     };

src/ECharts/Event.purs

@@ -65,9 +65,6 @@ dispatch vaction chart =
     , Tuple "mapSelect" ["name", "dataIndex"]
     , Tuple "mapUnSelect" ["name", "dataIndex"]
     , Tuple "mapToggleSelect" ["name", "dataIndex"]
-    , Tuple "pieSelect" ["name", "dataIndex"]
-    , Tuple "pieUnSelect" ["name", "dataIndex"]
-    , Tuple "pieToggleSelect" ["name", "dataIndex"]
     , Tuple "focusNodeAdjacency" ["seriesId", "seriesIndex", "seriesName"]
     , Tuple "unfocusNodeAdjacency" ["seriesId", "seriesIndex", "seriesName"]
     ]

src/ECharts/Types.purs

@@ -4,8 +4,6 @@ import Prelude
 
 import Control.Monad.Eff (kind Effect)
 import Data.Foreign (Foreign, toForeign)
-import Data.Maybe (Maybe)
-import Data.Symbol (SProxy(..))
 import Data.Variant as V
 import Data.StrMap as SM
 
@@ -182,35 +180,68 @@ newtype Coord = Coord Foreign
 coord ∷ Number → Number → Coord
 coord x y = Coord $ toForeign [ x, y ]
 
+type LegendEventR =
+  { name ∷ String
+  , selected ∷ SM.StrMap Boolean
+  }
+
+type DataRangeEventR =
+  { visualMapId ∷ String
+  , selected ∷ Array Number
+  }
+
+type ClickEventR =
+  { seriesName ∷ String
+  , name ∷ String
+  , dataIndex ∷ Int
+  , seriesIndex ∷ Int
+  }
+
+type BrushEventAreaR =
+  { brushType ∷ String
+  , panelId ∷ String
+  , coordRange ∷ Array Foreign
+  , xAxisData ∷ Array String
+  , yAxisData ∷ Array String
+  , gridIndex ∷ Int
+  }
+
+type BrushEventR =
+  { areas ∷ Array BrushEventAreaR
+  , titleTexts ∷ Array String
+  }
+
 type EChartsEventR =
-  ( click ∷ Foreign
+  ( click ∷ ClickEventR
   , dblclick ∷ Foreign
   , mousedown ∷ Foreign
   , mousemove ∷ Foreign
   , mouseup ∷ Foreign
   , mouseover ∷ Foreign
   , mouseout ∷ Foreign
-  , legendselectchanged ∷ Foreign
-  , legendselected ∷ Foreign
-  , legendunselected ∷ Foreign
+  , legendselectchanged ∷ LegendEventR
+  , legendselected ∷ LegendEventR
+  , legendunselected ∷ LegendEventR
   , datazoom ∷ Foreign
-  , datarangeselected ∷ Foreign
+  , datarangeselected ∷ DataRangeEventR
   , timelinechanged ∷ Foreign
   , timelineplaychanged ∷ Foreign
   , restore ∷ Foreign
   , dataviewchanged ∷ Foreign
   , magictypechanged ∷ Foreign
-  , pieselectchanged ∷ Foreign
-  , pieselected ∷ Foreign
-  , pieunselected ∷ Foreign
+  -- This is not absolutely accurate, but working with pieselectchanged
+  -- is too painful
+  , pieselectchanged ∷ ClickEventR
+  , pieselected ∷ ClickEventR
+  , pieunselected ∷ ClickEventR
   , mapselectchanged ∷ Foreign
   , mapselected ∷ Foreign
   , mapunselected ∷ Foreign
   , axisareaselected ∷ Foreign
   , focusNodeAdjancency ∷ Foreign
   , unfocusNodeAdjacency ∷ Foreign
-  , brush ∷ Foreign
-  , brushselected ∷ Foreign
+  , brush ∷ BrushEventR
+  , brushselected ∷ BrushEventR
   , pieSelect ∷ Foreign
   , pieUnSelect ∷ Foreign
   )