added tree, table and chart in the same docView

bower.json

@@ -15,7 +15,8 @@
     "purescript-argonaut-codecs": "^2.0.0",
     "purescript-argonaut-traversals": "^2.0.0",
     "purescript-argonaut": "^3.1.0",
-    "purescript-random": "^3.0.0"
+    "purescript-random": "^3.0.0",
+    "purescript-css": "^3.4.0"
   },
   "devDependencies": {
     "purescript-psci-support": "^3.0.0"

package.json

 {
   "dependencies": {
-    "create-react-class": "^15.6.0",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1"
+    "create-react-class": "^15.6.2",
+    "echarts": "^3.8.5",
+    "echarts-for-react": "^2.0.0",
+    "prop-types": "15.6.0",
+    "react": "^16.2.0",
+    "react-addons-css-transition-group": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-echarts-v3": "^1.0.14"
   }
 }

src/Chart.js

+"use strict";
+
+var ReactEcharts = require("echarts-for-react");
+
+exports.eChartsClass = ReactEcharts.default;

src/Chart.purs

+module Chart where
+
+import Prelude
+
+import CSS (Color, white)
+import React (ReactClass, ReactElement, createElementDynamic)
+import React.DOM.Props (Props, unsafeFromPropsArray, unsafeMkProps)
+import Control.Monad.Eff (Eff)
+import DOM (DOM)
+import DOM.HTML (window) as DOM
+import DOM.HTML.Types (htmlDocumentToParentNode) as DOM
+import DOM.HTML.Window (document) as DOM
+import DOM.Node.ParentNode (QuerySelector(..))
+import DOM.Node.ParentNode (querySelector) as DOM
+import Data.Maybe (fromJust)
+import Partial.Unsafe (unsafePartial)
+import React (ReactElement)
+import React as R
+import React.DOM (p)
+import React.DOM.Props (Props, className, unsafeFromPropsArray)
+import ReactDOM as RDOM
+import Thermite (Render, Spec, createReactSpec, defaultPerformAction, simpleSpec)
+
+-- eCharts Props
+
+-- className :: String -> from React DOM Props
+--    style     :: String,  -- object,
+
+theme :: String -> Props
+theme = unsafeMkProps "theme"
+
+group :: String -> Props
+group = unsafeMkProps "group"
+
+    -- group     :: String,
+    -- option    :: Option, --  PropTypes.object.isRequired,
+    -- initOpts  :: String, -- PropTypes.object,
+    -- notMerge  :: Boolean,
+    -- lazyUpdate:: Boolean,
+    -- loading   :: Boolean,
+    -- optsLoading::  OptsLoading, --  PropTypes.object,
+    -- onReady    :: String, --  PropTypes.func,
+    -- resizable  :: Boolean, -- PropTypes.bool,
+    -- onEvents   :: String --  PropTypes.object
+
+type EchartsProps eff =
+  { className :: String,
+    style     :: String,  -- object,
+    theme     :: String,
+    group     :: String,
+    option    :: Option, --  PropTypes.object.isRequired,
+    initOpts  :: String, -- PropTypes.object,
+    notMerge  :: Boolean,
+    lazyUpdate:: Boolean,
+    loading   :: Boolean,
+    optsLoading::  OptsLoading, --  PropTypes.object,
+    onReady    :: String, --  PropTypes.func,
+    resizable  :: Boolean, -- PropTypes.bool,
+    onEvents   :: String --  PropTypes.object
+  }
+
+type OptsLoading =
+  { text :: String,
+    color :: Color,  --- color
+    textColor :: Color, --color
+    maskColor:: Color, --color
+    zlevel :: Int
+  }
+
+type Option =
+  { title :: Title
+  , legend :: Legend
+  , tooltip :: Tooltip
+  , grid :: Grid
+  , xAxis :: Array XAxis
+  , yAxis :: Array YAxis
+  , series :: Array Series
+  , dataZoom :: Array DataZoom
+  }
+
+
+type DataZoom =
+  {"type":: String
+  , xAxisIndex:: Int
+  , filterMode:: String
+  , start:: Int
+  , end:: Int
+  }
+
+type Grid =
+  {containLabel :: Boolean
+  }
+
+type Legend =
+  {"type" :: String
+  , show :: Boolean
+  , zlevel :: Number
+  , z :: Number
+  , left :: Number
+  , top :: Number
+  , right :: Number
+  , bottom :: Number
+  , width :: Number
+  , height :: Number
+  , orient :: String
+  , align :: String
+  , padding :: Number
+  , itemGap :: Number
+  , itemWidth :: Number
+  , itemHeight :: Number
+  , formatter :: String
+  , selectedMode :: Boolean
+  , inactiveColor :: Color
+  , selected :: String -- object
+  , "data" :: Array Data
+  }
+
+type Data =
+  {name :: String
+  , icon :: String
+  , textStyle :: {}
+  }
+
+
+
+type SubtextStyle =
+  { color :: Color
+  , fontStyle :: String
+  , fontWeight :: String
+  , fontFamily :: String
+  , fontSize :: Int
+  , align :: String
+  , verticalAlign :: String
+  , lineHeight :: Number
+  , width :: Number
+  , height :: Number
+  , textBorderColor :: String
+  , textBorderWidth :: Number
+  , textShadowColor :: String
+  , textShadowBlur :: Number
+  , textShadowOffsetX :: Number
+  , textShadowOffsetY :: Number
+  , rich :: Rich
+  }
+
+
+type Tooltip =
+  { trigger :: String
+  , formatter :: String -- TODO function
+  }
+
+type XAxis =
+  { "data" :: Array String
+  , "type" :: String
+  , axisTick :: AxisTick
+  }
+type AxisTick =
+  {
+    alignWithLabel :: Boolean
+  }
+
+type YAxis =
+  { "type" :: String
+  , name :: String
+  , min :: Int
+  , position :: String
+  , axisLabel :: AxisLabel
+  }
+
+type AxisLabel =
+  { formatter :: String -- string or function
+  }
+
+
+type Series =
+  {name :: String
+  , "type" :: String
+  , "data" :: Array Int
+  }
+
+type Title =
+  { text :: String
+  , show :: Boolean
+  , link :: String
+  , target :: String
+  , textStyle :: TextStyle
+  , subtext :: String
+  , sublink :: String
+  , subtarget :: String
+  , subtextStyle :: SubtextStyle
+  , padding :: Number
+  , itemGap :: Number
+  , zlevel :: Number
+  , z :: Number
+  , left :: Number
+  , top :: Number
+  , right :: Number
+  , bottom :: Number
+  , backgroundColor :: Color
+  , borderColor :: Color
+  , borderWidth :: Number
+  , borderRadius :: Number -- NumberOrArray
+  , shadowBlur :: Number
+  , shadowColor :: Color
+  , shadowOffsetX :: Number
+  , shadowOffsetY :: Number
+  }
+
+-- data NumberOrArray = Number | Array Number
+
+
+
+type Rich = {}
+
+
+foreign import eChartsClass :: forall props. ReactClass props
+
+echarts :: forall eff. Array Props -> ReactElement
+echarts p = createElementDynamic eChartsClass (unsafeFromPropsArray p) []
+
+-- Props
+
+loading :: Boolean -> Props
+loading = unsafeMkProps "loading"
+
+type TextStyle =
+  { color :: Color
+  , fontStyle :: String
+  , fontWeight :: String
+  , fontFamily :: String
+  , fontSize :: Int
+  , align :: String
+  , verticalAlign :: String
+  , lineHeight :: Int
+  , width :: Int
+  , height :: Int
+  , textBorderColor :: String
+  , textBorderWidth :: Int
+  , textShadowColor :: String
+  , textShadowBlur :: Int
+  , textShadowOffsetX :: Int
+  , textShadowOffsetY :: Int
+  , rich :: Rich
+  }
+
+foreign import data TextStyleProps :: Type
+
+textStyle :: Array Props -> Props
+textStyle = unsafeMkProps "textStyle"
+
+subTextStyle :: Array Props -> Props
+subTextStyle = unsafeMkProps "subTextStyle"
+
+color :: Color -> Props
+color = unsafeMkProps "color"
+
+align :: String -> Props
+align = unsafeMkProps "align"
+
+option :: Array Props -> Props
+option = unsafeMkProps "option" <<< unsafeFromPropsArray
+
+ts :: Props
+ts = textStyle [color white, align "left"]
+
+title :: Array Props -> Props
+title = unsafeMkProps "title" <<< unsafeFromPropsArray
+
+text :: String -> Props
+text = unsafeMkProps "text"
+
+
+tooltip :: Array Props -> Props
+tooltip = unsafeMkProps "tooltip" <<< unsafeFromPropsArray
+
+trigger :: String -> Props
+trigger = unsafeMkProps "trigger"
+
+grid :: Array Props -> Props
+grid = unsafeMkProps "grid" <<< unsafeFromPropsArray
+
+containLabel :: Boolean -> Props
+containLabel = unsafeMkProps "containLabel"
+
+legend :: Array Props -> Props
+legend = unsafeMkProps "legend" <<< unsafeFromPropsArray
+
+data' :: forall a. a -> Props
+data' = unsafeMkProps "data"
+
+xAxis :: Array Props -> Props
+xAxis ap = unsafeMkProps "xAxis" [unsafeFromPropsArray ap]
+
+type' :: String -> Props
+type' = unsafeMkProps "type"
+
+axisTick :: Array Props -> Props
+axisTick = unsafeMkProps "axisTick" <<< unsafeFromPropsArray
+
+alignWithLabel :: Boolean -> Props
+alignWithLabel = unsafeMkProps "alignWithLabel"
+
+xAxisIndex :: Int -> Props
+xAxisIndex = unsafeMkProps "xAxisIndex"
+
+filterMode :: String -> Props
+filterMode = unsafeMkProps "filterMode"
+
+start :: Int -> Props
+start = unsafeMkProps "start"
+
+end :: Int -> Props
+end = unsafeMkProps "end"
+
+dataZoom :: Array Props -> Props
+dataZoom = unsafeMkProps "dataZoom"
+
+name :: String -> Props
+name = unsafeMkProps "name"
+
+position :: String -> Props
+position = unsafeMkProps "position"
+
+axisLabel :: Array Props -> Props
+axisLabel = unsafeMkProps "axisLabel" <<< unsafeFromPropsArray
+
+formatter :: String -> Props
+formatter = unsafeMkProps "formatter"
+
+min :: Int -> Props
+min = unsafeMkProps "min"
+
+yAxis :: Array Props -> Props
+yAxis = unsafeMkProps "yAxis"
+
+series :: Array Props -> Props
+series = unsafeMkProps "series"
+
+label :: Array Props -> Props
+label = unsafeMkProps "label"
+
+normal :: Array Props -> Props
+normal = unsafeMkProps "normal"
+
+showp :: Boolean -> Props
+showp = unsafeMkProps "show"
+
+lineStyle :: Array Props -> Props
+lineStyle = unsafeMkProps "lineStyle" <<< unsafeFromPropsArray
+
+width :: Int -> Props
+width = unsafeMkProps "width"
+
+shadowColor :: String -> Props
+shadowColor = unsafeMkProps "shadowColor"
+
+shadowBlur :: Int -> Props
+shadowBlur = unsafeMkProps "shadowBlur"
+
+shadowOffsetY :: Int -> Props
+shadowOffsetY = unsafeMkProps "shadowOffsetY"
+
+yAxisIndex :: Int -> Props
+yAxisIndex = unsafeMkProps "yAxisIndex"
+
+
+
+-------------------
+
+
+      -- [ p''
+      -- , ex1
+      -- , p''
+      -- ]
+
+ex1 :: ReactElement
+ex1 = echarts
+     [ option
+       [ tooltip [trigger "axis"]
+       , grid [containLabel true]
+       , legend [data' ["data1", "data2", "data3"]]
+       , xAxis
+         [ type' "category"
+         , axisTick [alignWithLabel true]
+         , data' ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sep", "Oct", "Nov", "Dec"]
+         ]
+       , dataZoom [dz1,dz1,dz2,dz2]
+       , yAxis [ya1, ya2]
+       , series [sd1, sd2, sd3]
+       ]
+     ]
+
+dz1 = unsafeFromPropsArray
+      [ type' "slider"
+      , xAxisIndex 0
+      , filterMode "empty"
+      , start 0
+      , end 100
+      ]
+
+dz2 = unsafeFromPropsArray
+      [ type' "inside"
+      , xAxisIndex 0
+      , filterMode "empty"
+      , start 0
+      , end 100
+      ]
+
+ya1 = unsafeFromPropsArray
+      [ type' "value"
+      , name "Eur"
+      , min 0
+      , position "left"
+      , axisLabel [formatter "{value} h"]
+      ]
+
+ya2 = unsafeFromPropsArray
+      [ type' "value"
+      , name "Eur"
+      , min 0
+      , position "right"
+      , axisLabel [formatter "{value} Eur"]
+      ]
+
+sd1 = unsafeFromPropsArray
+      [ name "data1"
+      , type' "line"
+      , label [normal[showp true, position "top"]]
+      , lineStyle [ normal
+                    [ width 3
+                    , shadowColor "rgba(0,0,0,0.4)"
+                    , shadowBlur 10
+                    , shadowOffsetY 10
+                    ]]
+      , data' [1, 13, 37, 35, 15, 13, 25, 21, 6, 45, 32, 2]
+      ]
+
+sd2 = unsafeFromPropsArray
+      [ name "data2"
+      , type' "bar"
+      , label [normal[showp true, position "top"]]
+      , yAxisIndex 1
+      , data' [22, 22, 23, 77, 24, 55, 55, 89, 98, 164, 106, 224]
+      ]
+
+sd3 = unsafeFromPropsArray
+      [ name "data3"
+      , type' "bar"
+      , label [normal[showp true, position "top"]]
+      , yAxisIndex 1
+      , data' [201, 222, 223, 777, 244, 255, 555, 879, 938, 1364, 1806, 2324]
+      ]
+
+
+
+p'' :: ReactElement
+p'' = p [] []

src/DocView.purs

@@ -32,6 +32,7 @@ import React.DOM.Props (Props, _type, className, href, onChange, onClick, select
 import ReactDOM as RDOM
 import Thermite (PerformAction, Render, Spec, cotransform, createReactSpec, defaultPerformAction, modifyState, simpleSpec)
 import Unsafe.Coerce (unsafeCoerce)
+import Chart
 
 main :: forall e. Eff (dom:: DOM, console :: CONSOLE, ajax :: AJAX | e) Unit
 main = do
@@ -126,6 +127,11 @@ spec = simpleSpec performAction render
               [
                 br' []
               , br' []
+              , p''
+              , ex1
+              , p''
+
+
               , div [] [b [] [text d.title]]
               , div [] [ text "Search "
                        , input [] []

yarn.lock

@@ -6,24 +6,62 @@ asap@~2.0.3:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
 
+batch-processor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
+
 core-js@^1.0.0:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
 
-create-react-class@^15.6.0:
-  version "15.6.0"
-  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.0.tgz#ab448497c26566e1e29413e883207d57cfe7bed4"
+create-react-class@^15.6.2:
+  version "15.6.3"
+  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
   dependencies:
     fbjs "^0.8.9"
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+echarts-for-react@^2.0.0:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/echarts-for-react/-/echarts-for-react-2.0.8.tgz#cf56641d8a3bc50852310aeec06a464c4fc72b67"
+  dependencies:
+    element-resize-event "2.0.9"
+
+echarts@^3.8.5:
+  version "3.8.5"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-3.8.5.tgz#58e4a51d2743c6fb75257b0dc0a9cf9f5378ac0e"
+  dependencies:
+    zrender "3.7.4"
+
+element-resize-detector@latest:
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/element-resize-detector/-/element-resize-detector-1.1.14.tgz#af064a0a618a820ad570a95c5eec5b77be0128c1"
+  dependencies:
+    batch-processor "^1.0.0"
+
+element-resize-event@2.0.9:
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/element-resize-event/-/element-resize-event-2.0.9.tgz#2f5e1581a296eb5275210c141bc56342e218f876"
+
 encoding@^0.1.11:
   version "0.1.12"
   resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
   dependencies:
     iconv-lite "~0.4.13"
 
+fbjs@^0.8.16:
+  version "0.8.16"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.9"
+
 fbjs@^0.8.9:
   version "0.8.14"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.14.tgz#d1dbe2be254c35a91e09f31f9cd50a40b2a0ed1c"
@@ -55,6 +93,10 @@ js-tokens@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
+lodash@latest:
+  version "4.17.5"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
+
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
@@ -78,31 +120,53 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10:
-  version "15.5.10"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
+prop-types@15.6.0:
+  version "15.6.0"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
-    fbjs "^0.8.9"
+    fbjs "^0.8.16"
     loose-envify "^1.3.1"
+    object-assign "^4.1.1"
 
-react-dom@^15.6.1:
+prop-types@^15.6.0:
   version "15.6.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.1.tgz#2cb0ed4191038e53c209eb3a79a23e2a4cf99470"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
+react-addons-css-transition-group@^16.2.0:
+  version "16.0.0-alpha.3"
+  resolved "https://registry.yarnpkg.com/react-addons-css-transition-group/-/react-addons-css-transition-group-16.0.0-alpha.3.tgz#26b3f0e1185d5acff11118a7918fd96050f89740"
   dependencies:
     fbjs "^0.8.9"
-    loose-envify "^1.1.0"
     object-assign "^4.1.0"
-    prop-types "^15.5.10"
 
-react@^15.6.1:
-  version "15.6.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"
+react-dom@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.2.0.tgz#69003178601c0ca19b709b33a83369fe6124c044"
   dependencies:
-    create-react-class "^15.6.0"
-    fbjs "^0.8.9"
+    fbjs "^0.8.16"
     loose-envify "^1.1.0"
-    object-assign "^4.1.0"
-    prop-types "^15.5.10"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
+
+react-echarts-v3@^1.0.14:
+  version "1.0.19"
+  resolved "https://registry.yarnpkg.com/react-echarts-v3/-/react-echarts-v3-1.0.19.tgz#04148f16e3e7f01c2f6f3e6f0654bb32f238c2dc"
+  dependencies:
+    element-resize-detector latest
+    lodash latest
+
+react@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
 
 setimmediate@^1.0.5:
   version "1.0.5"
@@ -115,3 +179,7 @@ ua-parser-js@^0.7.9:
 whatwg-fetch@>=0.10.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
+
+zrender@3.7.4:
+  version "3.7.4"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-3.7.4.tgz#f847d53948481ef6d42906d1ea9aeec7acbefdf2"