[MERGE] dashboard, thx @mudada.

bower.json

 {
-  "name": "purescript-gargantext",
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "output"
-  ],
-  "dependencies": {
-    "purescript-prelude": "^3.1.0",
-    "purescript-console": "^3.0.0",
-    "purescript-thermite": "^5.0.0",
-    "purescript-affjax": "^5.0.0",
-    "purescript-routing": "^6.1.2",
-    "purescript-argonaut-codecs": "^2.0.0",
-    "purescript-argonaut-traversals": "^2.0.0",
-    "purescript-argonaut": "^3.1.0",
-    "purescript-random": "^3.0.0",
-    "purescript-css": "^3.4.0"
-  },
-  "devDependencies": {
-    "purescript-psci-support": "^3.0.0"
-  },
-  "resolutions": {
-    "purescript-maybe": "^3.0.0",
-    "purescript-monoid": "^3.0.0",
-    "purescript-invariant": "^3.0.0",
-    "purescript-functions": "^3.0.0",
-    "purescript-functors": "^2.0.0",
-    "purescript-const": "^3.0.0",
-    "purescript-contravariant": "^3.0.0",
-    "purescript-tuples": "^4.0.0",
-    "purescript-distributive": "^3.0.0",
-    "purescript-identity": "^3.0.0",
-    "purescript-transformers": "^3.0.0",
-    "purescript-arrays": "^4.0.1",
-    "purescript-nonempty": "^4.0.0",
-    "purescript-unfoldable": "^3.0.0",
-    "purescript-lazy": "^3.0.0",
-    "purescript-unsafe-coerce": "^3.0.0",
-    "purescript-strings": "^3.0.0",
-    "purescript-generics": "^4.0.0",
-    "purescript-tailrec": "^3.0.0",
-    "purescript-proxy": "^2.0.0",
-    "purescript-integers": "^3.0.0",
-    "purescript-globals": "^3.0.0",
-    "purescript-maps": "^3.0.0",
-    "purescript-st": "^3.0.0",
-    "purescript-eff": "^3.0.0",
-    "purescript-profunctor": "^3.0.0",
-    "purescript-enums": "^3.1.0",
-    "purescript-profunctor-lenses": "^3.0.0",
-    "purescript-sets": "^3.0.0",
-    "purescript-argonaut-core": "^3.1.0",
-    "purescript-lists": "^4.0.0",
-    "purescript-argonaut-codecs": "^3.0.0",
-    "purescript-argonaut-traversals": "^3.0.0",
-    "purescript-argonaut": "^3.1.0",
-    "purescript-prelude": "^3.1.0",
-    "purescript-either": "^3.1.0",
-    "purescript-foldable-traversable": "^3.6.1",
-    "purescript-control": "^3.0.0",
-    "purescript-bifunctors": "^3.0.0",
-    "purescript-newtype": "^2.0.0"
-  }
+        "name": "purescript-gargantext",
+        "ignore": [
+                "**/.*",
+                "node_modules",
+                "bower_components",
+                "output"
+        ],
+        "dependencies": {
+                "purescript-prelude": "^3.1.0",
+                "purescript-console": "^3.0.0",
+                "purescript-thermite": "^5.0.0",
+                "purescript-affjax": "^5.0.0",
+                "purescript-routing": "^6.1.2",
+                "purescript-argonaut-codecs": "^2.0.0",
+                "purescript-argonaut-traversals": "^2.0.0",
+                "purescript-argonaut": "^3.1.0",
+                "purescript-random": "^3.0.0",
+                "purescript-css": "^3.4.0"
+        },
+        "devDependencies": {
+                "purescript-psci-support": "^3.0.0"
+        },
+        "resolutions": {
+                "purescript-maybe": "^3.0.0",
+                "purescript-monoid": "^3.0.0",
+                "purescript-invariant": "^3.0.0",
+                "purescript-functions": "^3.0.0",
+                "purescript-functors": "^2.0.0",
+                "purescript-const": "^3.0.0",
+                "purescript-contravariant": "^3.0.0",
+                "purescript-tuples": "^4.0.0",
+                "purescript-distributive": "^3.0.0",
+                "purescript-identity": "^3.0.0",
+                "purescript-transformers": "^3.0.0",
+                "purescript-arrays": "^4.0.1",
+                "purescript-nonempty": "^4.0.0",
+                "purescript-unfoldable": "^3.0.0",
+                "purescript-lazy": "^3.0.0",
+                "purescript-unsafe-coerce": "^3.0.0",
+                "purescript-strings": "^3.0.0",
+                "purescript-generics": "^4.0.0",
+                "purescript-tailrec": "^3.0.0",
+                "purescript-proxy": "^2.0.0",
+                "purescript-integers": "^3.0.0",
+                "purescript-globals": "^3.0.0",
+                "purescript-maps": "^3.0.0",
+                "purescript-st": "^3.0.0",
+                "purescript-eff": "^3.0.0",
+                "purescript-profunctor": "^3.0.0",
+                "purescript-enums": "^3.1.0",
+                "purescript-profunctor-lenses": "^3.0.0",
+                "purescript-sets": "^3.0.0",
+                "purescript-argonaut-core": "^3.1.0",
+                "purescript-lists": "^4.0.0",
+                "purescript-argonaut-codecs": "^3.0.0",
+                "purescript-argonaut-traversals": "^3.0.0",
+                "purescript-argonaut": "^3.1.0",
+                "purescript-prelude": "^3.1.0",
+                "purescript-either": "^3.1.0",
+                "purescript-foldable-traversable": "^3.6.1",
+                "purescript-control": "^3.0.0",
+                "purescript-bifunctors": "^3.0.0",
+                "purescript-newtype": "^2.0.0"
+        }
 }
+

src/Chart.js

@@ -3,3 +3,4 @@
 var ReactEcharts = require("echarts-for-react");
 
 exports.eChartsClass = ReactEcharts.default;
+exports.eChartsClass2 = ReactEcharts.default;

src/Chart.purs

 module Chart where
 
-import Prelude
+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 Data.Maybe (Maybe(..))
 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)
+import React.DOM.Props (Props, unsafeFromPropsArray, unsafeMkProps)
 
 -- eCharts Props
 
@@ -45,7 +32,7 @@ group = unsafeMkProps "group"
 
 type EchartsProps eff =
   { className   :: String,
-    style       :: String,  -- object,
+    style       :: String,  -- objealect-black-altdarkmincnaquadahherry-blossomect,
     theme       :: String,
     group       :: String,
     option      :: Option, --  PropTypes.object.isRequired,
@@ -67,13 +54,16 @@ type OptsLoading =
     zlevel    :: Int
   }
 
+type OpTest =
+  {option :: Option}
+
 type Option =
-  { title    :: Title
-  , legend   :: Legend
+  { title    :: Maybe Title
+  , legend   :: Maybe Legend
   , tooltip  :: Tooltip
   , grid     :: Grid
-  , xAxis    :: Array XAxis
-  , yAxis    :: Array YAxis
+  , xAxis    :: XAxis
+  , yAxis    :: YAxis
   , series   :: Array Series
   , dataZoom :: Array DataZoom
   }
@@ -94,35 +84,33 @@ type Grid =
 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
+  , zlevel :: Maybe Number
+  , z      :: Maybe Number
+  , left   :: Maybe Number
+  , top    :: Maybe Number
+  , right  :: Maybe Number
+  , bottom :: Maybe Number
+  , width  :: Maybe Number
+  , height :: Maybe Number
+  , orient :: Maybe String
+  , align  :: Maybe String
+  , padding       :: Maybe Number
+  , itemGap       :: Maybe Number
+  , itemWidth     :: Maybe Number
+  , itemHeight    :: Maybe Number
+  , formatter     :: Maybe String
+  , selectedMode  :: Maybe Boolean
+  , inactiveColor :: Maybe Color
+  , selected      :: Maybe String -- object
+  , "data"        :: Maybe (Array Data)
   }
 
 type Data =
   { name      :: String
-  , icon      :: String
-  , textStyle :: {}
+  , icon      :: Maybe String
+  , textStyle :: Maybe {}
   }
 
-
-
 type SubtextStyle =
   { color      :: Color
   , fontStyle  :: String
@@ -146,14 +134,15 @@ type SubtextStyle =
 
 type Tooltip =
   { trigger   :: String
-  , formatter :: String -- TODO function
+  , formatter :: Maybe String -- TODO function
   }
 
 type XAxis =
-  { "data"   :: Array String
+  { "data"   :: Array Data
   , "type"   :: String
   , axisTick :: AxisTick
   }
+
 type AxisTick =
   {
     alignWithLabel :: Boolean
@@ -213,10 +202,14 @@ type Title =
 type Rich = {}
 
 
-foreign import eChartsClass :: forall props. ReactClass props
+foreign import eChartsClass :: forall props. R.ReactClass props
+foreign import eChartsClass2 :: R.ReactClass OpTest
 
-echarts :: forall eff. Array Props -> ReactElement
-echarts p = createElementDynamic eChartsClass (unsafeFromPropsArray p) []
+echarts :: forall eff. Array Props -> R.ReactElement
+echarts p = R.createElementDynamic eChartsClass (unsafeFromPropsArray p) []
+
+echarts' :: forall eff. Option -> R.ReactElement
+echarts' chart = R.createElementDynamic eChartsClass2 {option: chart} []
 
 -- Props
 
@@ -373,12 +366,106 @@ yAxisIndex = unsafeMkProps "yAxisIndex"
       -- , p''
       -- ]
 
-histogram :: ReactElement
+legend' :: Legend
+legend' =
+  {
+    "type": "plain"
+   , show: true
+   , zlevel: Nothing
+   , z: Nothing
+   , left: Nothing
+   , top: Nothing
+   , right: Nothing
+   , bottom: Nothing
+   , width: Nothing
+   , height: Nothing
+   , orient: Nothing
+   , align: Nothing
+   , padding: Nothing
+   , itemGap: Nothing
+   , itemWidth: Nothing
+   , itemHeight: Nothing
+   , formatter: Nothing
+   , selectedMode: Nothing
+   , inactiveColor: Nothing
+   , selected: Nothing
+   , "data": Nothing
+  }
+
+data1 :: Data
+data1 = {name: "Map terms coverage", icon: Nothing, textStyle: Nothing}
+
+data2 :: Data
+data2 = {name: "Favorites", icon: Nothing, textStyle: Nothing}
+
+data3 :: Data
+data3 = {name: "All", icon: Nothing, textStyle: Nothing}
+
+xAxis' :: XAxis
+xAxis' =
+ {
+   "data": [xData1, xData2, xData3]
+ , "type": "category"
+ , axisTick: {alignWithLabel: true}
+ }
+
+xData1 :: Data
+xData1 = {name: "Jan", icon: Nothing, textStyle: Nothing}
+
+xData2 :: Data
+xData2 = {name: "Feb", icon: Nothing, textStyle: Nothing}
+
+xData3 :: Data
+xData3 = {name: "Mar", icon: Nothing, textStyle: Nothing}
+
+yData1 :: YAxis
+yData1 =
+  {
+    "type": "value"
+  , name: "Score metric"
+  , min: 0
+  , position: "right"
+  , axisLabel: {formatter: "{value}"}
+  }
+
+tooltip' :: Tooltip
+tooltip' =
+  {
+    trigger: "axis"
+  , formatter: Nothing
+  }
+
+
+series' :: Series
+series' =
+  {
+    name: "All"
+  , "type": "bar"
+  , "data": [201, 777, 879]
+  }
+
+opt :: Option
+opt =
+  {
+    title: Nothing
+    ,legend: Nothing
+    ,tooltip: tooltip'
+    ,grid: {containLabel: true}
+    ,xAxis: xAxis'
+    ,yAxis: yData1
+    ,series: [series']
+    ,dataZoom: [dz1', dz1', dz2', dz2']
+  }
+
+histogram2 :: R.ReactElement
+histogram2 = echarts' opt
+
+histogram :: R.ReactElement
 histogram = echarts
      [ option
        [ tooltip [trigger "axis"]
        , grid [containLabel true]
-       , legend [data' ["Map terms coverage", "Favorites", "All"]]
+       , legend [data' ["TEST MUDADA", "Favorites", "All"]]
        -- , legend [data' ["Map Terms coverage", "Favorites", "All"]]
        , xAxis
          [ type' "category"
@@ -388,12 +475,41 @@ histogram = echarts
                  , "Sep", "Oct", "Nov" , "Dec"
                  ]
          ]
-       , dataZoom [dz1,dz1,dz2,dz2]
+       , dataZoom' [dz1', dz1', dz2', dz2']
        , yAxis [ya1, ya2]
        , series [sd1, sd2, sd3]
        ]
      ]
 
+{-
+type DataZoom =
+  {"type"      :: String
+  , xAxisIndex :: Int
+  , filterMode :: String
+  , start      :: Int
+  , end        :: Int
+  }
+-}
+
+dz1' :: DataZoom
+dz1' = {
+  "type": "slider"
+  ,xAxisIndex: 0
+  ,filterMode: "empty"
+  ,start: 0
+  ,end: 100
+  }
+
+dz2' :: DataZoom
+dz2' = {
+  "type": "inside"
+  ,xAxisIndex: 0
+  ,filterMode: "empty"
+  ,start: 0
+  ,end: 100
+  }
+
+dz1 :: forall props. props
 dz1 = unsafeFromPropsArray
       [ type' "slider"
       , xAxisIndex 0
@@ -402,6 +518,7 @@ dz1 = unsafeFromPropsArray
       , end 100
       ]
 
+dz2 :: forall props. props
 dz2 = unsafeFromPropsArray
       [ type' "inside"
       , xAxisIndex 0
@@ -410,6 +527,7 @@ dz2 = unsafeFromPropsArray
       , end 100
       ]
 
+ya1 :: forall props. props
 ya1 = unsafeFromPropsArray
       [ type' "value"
       , name "Score metric"
@@ -417,7 +535,7 @@ ya1 = unsafeFromPropsArray
       , position "right"
       , axisLabel [formatter "{value}"]
       ]
-
+ya2 :: forall props. props
 ya2 = unsafeFromPropsArray
       [ type' "value"
       , name "Publications (by year)"
@@ -426,6 +544,7 @@ ya2 = unsafeFromPropsArray
       , axisLabel [formatter "{value}"]
       ]
 
+sd1 :: forall props. props
 sd1 = unsafeFromPropsArray
       [ name "Map terms coverage"
       , type' "line"
@@ -439,6 +558,7 @@ sd1 = unsafeFromPropsArray
       , data' [95, 80, 75, 35, 30, 50, 70, 80, 95, 95, 95, 99]
       ]
 
+sd3 :: forall props. props
 sd3 = unsafeFromPropsArray
       [ name "All"
       , type' "bar"
@@ -447,7 +567,21 @@ sd3 = unsafeFromPropsArray
       , data' [201, 222, 223, 777, 244, 255, 555, 879, 938, 1364, 1806, 2324]
       ]
 
+dataZoom' :: Array DataZoom -> Props
+dataZoom' dzs = unsafeMkProps "dataZoom" $ dzToProps <$> dzs
+
+dzToProps :: forall props. DataZoom -> props
+dzToProps dz = unsafeFromPropsArray
+               [ type' dz."type"
+               , xAxisIndex dz.xAxisIndex
+               , filterMode dz.filterMode
+               , start dz.start
+               , end dz.end
+               ]
+
+
 
+sd2 :: forall props. props
 sd2 = unsafeFromPropsArray
       [ name "Favorites"
       , type' "bar"
@@ -457,5 +591,5 @@ sd2 = unsafeFromPropsArray
       ]
 
 
-p'' :: ReactElement
+p'' :: R.ReactElement
 p'' = p [] []

src/Charts/Color.purs

+module Charts.Color
+       (
+         ChartColor(),
+         chartColor
+       ) where
+
+import Prelude ((<<<))
+import CSS (Color, toHexString)
+
+newtype ChartColor = ChartColor String
+
+chartColor :: Color -> ChartColor
+chartColor = ChartColor <<< toHexString

src/Charts/Data.purs

+module Charts.Data where
+
+import Charts.Font (TextStyle, Icon)
+import Prelude ((<<<))
+import Unsafe.Coerce (unsafeCoerce)
+
+type DataN =
+  { name :: String
+  , icon :: Icon
+  , textStyle :: TextStyle
+  }
+
+type DataV =
+  { value :: String
+  , textStyle :: TextStyle
+  }
+
+type DataS =
+  { name :: String
+  , value :: Number
+  }

src/Charts/ECharts.js

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

src/Charts/Font.purs

+module Charts.Font
+       (
+         TextStyle,
+         ChartFontStyle(),
+         chartFontStyle,
+         ChartFontWeight(),
+         chartFontWeight,
+         Icon(),
+         ImageURL(..),
+         Shape(..),
+         IconOptions(..),
+         icon
+       ) where
+
+import CSS (FontStyle(..), FontWeight(..), Prefixed(..), Value(..))
+import Charts.Color (ChartColor)
+import Charts.Position (LeftRelativePosition, Position, TopRelativePosition)
+import Data.Generic (class Generic, gShow)
+import Data.String (toLower)
+import Prelude (Unit, ($), (<<<), (<>))
+
+type TextStyle =
+  { color      :: ChartColor
+  , fontStyle  :: ChartFontStyle
+  , fontWeight :: ChartFontWeight
+  , fontFamily :: String
+  , fontSize   :: Int
+  , align      :: Position LeftRelativePosition
+  , verticalAlign :: Position TopRelativePosition
+  , lineHeight    :: Position Unit
+  , width         :: Position Unit
+  , height        :: Position Unit
+  , textBorderColor :: ChartColor
+  , textBorderWidth :: Number
+  , textShadowColor :: ChartColor
+  , textShadowBlur  :: ChartColor
+  , textShadowOffsetX :: Number
+  , textShadowOffsetY :: Number
+  }
+
+
+newtype ChartFontStyle = ChartFontStyle String
+
+chartFontStyle :: FontStyle -> ChartFontStyle
+chartFontStyle (FontStyle (Value (Plain "italic"))) = ChartFontStyle "italic"
+chartFontStyle (FontStyle (Value (Plain "oblique"))) = ChartFontStyle "oblique"
+chartFontStyle _ = ChartFontStyle "normal"
+
+
+newtype ChartFontWeight = ChartFontWeight String
+
+chartFontWeight :: FontWeight -> ChartFontWeight
+chartFontWeight (FontWeight (Value (Plain "bold"))) = ChartFontWeight "bold"
+chartFontWeight (FontWeight (Value (Plain "bolder"))) = ChartFontWeight "bolder"
+chartFontWeight (FontWeight (Value (Plain "lighter"))) = ChartFontWeight "lighter"
+chartFontWeight  _ = ChartFontWeight "normal"
+
+
+newtype Icon = Icon String
+
+newtype ImageURL = ImageURL String
+
+data Shape = Circle | Rect | RoundRect | Triangle | Diamond | Pin | Arrow
+derive instance genericShape :: Generic Shape
+
+data IconOptions = Shape Shape | Image ImageURL
+
+icon :: IconOptions -> Icon
+icon (Shape s) = Icon <<< toLower $ gShow s
+icon (Image (ImageURL url)) = Icon $ "image://" <> url

src/Charts/Legend.purs

+module Charts.Legend
+       (
+         LegendType(..),
+         PlainOrScroll(..),
+         legendType,
+         Orient(),
+         Orientation(..),
+         orient,
+         SelectedMode(),
+         LegendMode(..),
+         selectedMode
+       ) where
+
+import Data.Generic (class Generic, gShow)
+import Data.String (toLower)
+import Prelude (class Show, show, (<<<))
+import Unsafe.Coerce (unsafeCoerce)
+
+newtype LegendType = LegendType String
+
+data PlainOrScroll = Plain | Scroll
+instance showPlainOrScroll :: Show PlainOrScroll where
+  show (Plain) = "plain"
+  show (Scroll) = "scroll"
+
+legendType :: PlainOrScroll -> LegendType
+legendType = LegendType <<< toLower <<< show
+
+
+newtype Orient = Orient String
+
+data Orientation = Horizontal | Vertical
+derive instance genericOrientation :: Generic Orientation
+
+orient :: Orientation -> Orient
+orient = Orient <<< toLower <<< gShow
+
+
+foreign import data SelectedMode :: Type
+
+data LegendMode = Bool Boolean | Single | Multiple
+derive instance genericLegendMode :: Generic LegendMode
+
+selectedMode :: LegendMode -> SelectedMode
+selectedMode (Bool b) = unsafeCoerce b
+selectedMode (Single) = unsafeCoerce "single"
+selectedMode (Multiple) = unsafeCoerce "multiple"
+

src/Charts/Position.purs

+module Charts.Position
+       (
+         Position(),
+         numberPosition,
+         percentPosition,
+         relativePosition,
+         Align(..),
+         TopRelativePosition(..),
+         LeftRelativePosition(..)
+       ) where
+
+import Prelude (class Show, show, ($), (<>))
+import Unsafe.Coerce (unsafeCoerce)
+
+-- | The type `Position` is made to render a css position.
+-- | It should be either a `Number`, a `"Number%"` or a `Position` type (`TopRelativePosition` for exemple)
+-- | To construct such a type you will have to use one of the smart constructor
+foreign import data Position :: Type -> Type
+
+-- | Smart constructor to build a JS Number
+numberPosition :: forall r. Number -> Position r
+numberPosition = unsafeCoerce
+
+-- | Smart constructor to build a JS Percent
+percentPosition :: forall r. Number -> Position r
+percentPosition n = unsafeCoerce $ (show n) <> "%"
+
+-- | Smart constructor to build a JS String giving position's detail ("top", "left", ...)
+relativePosition :: forall a. Show a => Align a -> Position a
+relativePosition (Auto) = unsafeCoerce "auto"
+relativePosition (Relative r) = unsafeCoerce $ show r
+
+data Align p = Auto | Relative p
+
+data TopRelativePosition = Top | Middle | Bottom
+instance showTopRelativePosition :: Show TopRelativePosition
+  where show (Top) = "top"
+        show (Middle) = "middle"
+        show (Bottom) = "bottom"
+
+data LeftRelativePosition = LeftPos | Center | RightPos
+instance showLeftRelativePosition :: Show LeftRelativePosition
+  where show (LeftPos) = "left"
+        show (Center) = "center"
+        show (RightPos) = "right"

src/Charts/Series.purs

+module Charts.Series where
+
+import Charts.Data (DataS)
+import Prelude (class Show, show, (<<<))
+
+
+newtype SeriesType = SeriesType String
+
+data SeriesShape = Line
+                 | Bar | PictorialBar
+                 | Pie
+                 | Scatter | EffectScater
+                 | Radar
+                 | Tree | TreeMap
+                 | Sunburst
+                 | Boxplot
+                 | Candlestick
+                 | Heatmap
+                 | Map
+                 | Parallel
+                 | Lines
+                 | Graph
+                 | Sankey
+                 | Funnel
+                 | Gauge
+                 | ThemeRiver
+
+instance showSeriesShape :: Show SeriesShape where
+  show Line = "line"
+  show Bar = "bar"
+  show Pie = "pie"
+  show Sunburst = "sunburst"
+  show Funnel = "funnel"
+  show Heatmap = "heatmap"
+  show _ = ""
+
+seriesType :: SeriesShape -> SeriesType
+seriesType = SeriesType <<< show
+
+type Series =
+  { name   :: String
+  , "type" :: SeriesType
+  , "data" :: Array DataS
+  }

src/Charts/Type.purs

+module Charts.Type where
+
+import Charts.Font
+
+import CSS (Color)
+import Charts.Series
+import Charts.Data
+import Charts.Color (ChartColor(..))
+import Charts.Font (Icon, icon, TextStyle)
+import Charts.Legend (LegendType, SelectedMode, selectedMode, Orient)
+import Charts.Position (LeftRelativePosition, Position, TopRelativePosition)
+import Data.Either (Either)
+import Data.Maybe (Maybe)
+import Prelude (Unit, (<<<))
+
+
+newtype ChartAlign = ChartAlign String
+
+type Echarts =
+  { className   :: Maybe String,
+    style       :: Maybe String,  -- objealect-black-altdarkmincnaquadahherry-blossomect,
+    theme       :: Maybe String,
+    group       :: Maybe String,
+    option      :: Option, --  PropTypes.object.isRequired,
+    initOpts    :: Maybe String, -- PropTypes.object,
+    notMerge    :: Maybe Boolean,
+    lazyUpdate  :: Maybe Boolean,
+    loading     :: Maybe Boolean,
+    optsLoading :: Maybe OptsLoading, --  PropTypes.object,
+    onReady     :: Maybe String, --  PropTypes.func,
+    resizable   :: Maybe Boolean, -- PropTypes.bool,
+    onEvents    :: Maybe String --  PropTypes.object
+  }
+
+type Option =
+  { title    :: Title
+  , legend   :: Legend
+  , tooltip  :: Tooltip
+  , grid     :: Grid
+  , xAxis    :: XAxis
+  , yAxis    :: YAxis
+  , series   :: Array Series
+  , dataZoom :: Array DataZoom
+  }
+
+type Title =
+  {
+    id :: String -- None by default
+  , show :: Boolean -- default True
+  , text :: String -- default ''
+  , link :: String -- default ''
+  , target :: String -- default 'blank'
+  , textStyle :: TextStyle
+  , subtext :: String -- default ''
+  , sublink :: String -- default ''
+  , subtarget :: String -- default 'blank'
+  , subtextStyle :: TextStyle
+  , padding :: Number -- default '5'
+  , itemGap :: Number -- default '10'
+  , zlevel :: Number -- default '0'
+  , z :: Number -- default '2'
+  , left :: Position LeftRelativePosition -- default 'auto'
+  , top :: Position TopRelativePosition -- default 'auto'
+  , right :: Position Unit -- default 'auto'
+  , bottom :: Position Unit -- default 'auto'
+  , backgroundColor :: ChartColor -- default 'transparent''
+  , borderColor :: ChartColor -- default '#ccc'
+  , borderWidth :: Number -- default '1'
+  , borderRadius :: Number -- default 0; data NumberOrArray = Number | Array Number
+  , shadowBlur :: Number
+  , shadowColor :: ChartColor
+  , shadowOffsetX :: Number
+  , shadowOffsetY :: Number
+  }
+
+type OptsLoading =
+  { text      :: String,
+    color     :: Color,  --- color
+    textColor :: Color, --color
+    maskColor :: Color, --color
+    zlevel    :: Int
+  }
+
+type DataZoom =
+  {"type"      :: String
+  , xAxisIndex :: Int
+  , filterMode :: String
+  , start      :: Int
+  , end        :: Int
+  }
+
+type Grid =
+  {containLabel :: Boolean
+  }
+
+type Legend =
+  {
+    id :: String
+  , "type" :: LegendType
+  , show :: Boolean
+  , zlevel :: Number
+  , z :: Number
+  , left :: Position LeftRelativePosition -- default 'auto
+  , top :: Position TopRelativePosition
+  , right :: Position Unit
+  , bottom :: Position Unit
+  , width :: Position Unit
+  , height :: Position Unit
+  , orient :: Orient
+  , align :: Position LeftRelativePosition
+  , padding :: Number
+  , itemGap :: Number
+  , itemWidth :: Number
+  , itemHeight :: Number
+  , formatter :: Maybe String
+  , selectedMode :: SelectedMode
+  , inactiveColor :: ChartColor
+  , selected :: Maybe String -- object
+  , textStyle :: TextStyle
+  , "data" :: Array DataN
+  }
+
+type Tooltip =
+  { trigger   :: String
+  , formatter :: Maybe String -- TODO function
+  }
+
+type XAxis =
+  { "data"   :: Array DataV
+  , "type"   :: String
+  , axisTick :: AxisTick
+  , show :: Boolean
+  }
+
+type AxisTick =
+  {
+    alignWithLabel :: Boolean
+  }
+
+type YAxis =
+  { "type"    :: String
+  , name      :: String
+  , min       :: Int
+  , position  :: String
+  , axisLabel :: AxisLabel
+  , show :: Boolean
+  }
+
+type AxisLabel =
+  { formatter :: String -- string or function
+  }
+
+type Rich = {}

src/Dashboard.purs

+module Dashboard where
+
+import Charts.ECharts
+
+import DOM (DOM)
+import Data.Unit (Unit)
+import Prelude (pure, unit)
+import React.DOM (div, h1, text, title)
+import React.DOM.Props (className)
+import Thermite (PerformAction, Render, Spec, simpleSpec)
+
+type State = Unit
+
+data Action = None
+
+initialState :: State
+initialState = unit
+
+performAction :: forall eff props. PerformAction (dom :: DOM | eff) State props Action
+performAction _ _ _ = pure unit
+
+render :: forall props. Render State props Action
+render dispatch _ state _ = [
+    h1 [] [text "IMT DashBoard"]
+  , histogram1
+  , div [className "row"] [
+      div [className "col-md-4 content"] [histogram2]
+    , div [className "col-md-4 content"] [histogram3]
+    , div [className "col-md-4 content"] [histogram4]
+    ]
+  ]
+
+layoutDashboard :: forall props eff. Spec (dom :: DOM | eff) State props Action
+layoutDashboard = simpleSpec performAction render

src/DocView.purs

@@ -2,7 +2,7 @@ module DocView where
 
 import Data.Argonaut
 
-import Chart (histogram, p'')
+import Chart (histogram2, p'')
 import Control.Monad.Aff (Aff, attempt)
 import Control.Monad.Aff.Class (liftAff)
 import Control.Monad.Cont.Trans (lift)
@@ -113,7 +113,7 @@ layoutDocview = simpleSpec performAction render
             [ p''
             , div [] [ text "    Filter ", input [] []]
             , h3 [] [text "Chart Title"]
-            , histogram
+            , histogram2
             , p''
             , br' []
             , div [] [ b [] [text d.title]

src/NTree.purs

@@ -41,8 +41,8 @@ toggleNode sid a = a
 myCorpus :: Int -> String -> NTree (Tuple String String)
 myCorpus n name = NNode n false name
     [ NLeaf (Tuple "Facets"    "#/corpus")
-    , NLeaf (Tuple "Graph"     "#/corpus")
-    , NLeaf (Tuple "Dashboard" "#/userPage")
+    , NLeaf (Tuple "Graph"     "#/docView")
+    , NLeaf (Tuple "Dashboard" "#/dashboard")
     ]
 
 exampleTree :: NTree (Tuple String String)

src/Navigation.purs

@@ -36,6 +36,7 @@ import Unsafe.Coerce (unsafeCoerce)
 import UserPage as UP
 import GraphExplorer as GE
 import NgramsTable as NG
+import Dashboard as Dsh
 
 type E e = (dom :: DOM, ajax :: AJAX, console :: CONSOLE | e)
 
@@ -56,6 +57,7 @@ type AppState =
   , showCorpus :: Boolean
   , graphExplorer :: GE.State
   , ngState :: NG.State
+  , dashboard :: Dsh.State
   }
 
 initAppState :: AppState
@@ -76,6 +78,7 @@ initAppState =
   , showCorpus : false
   , graphExplorer : GE.initialState
   , ngState : NG.initialState
+  , dashboard : Dsh.initialState
   }
 
 data Action
@@ -91,6 +94,7 @@ data Action
   | TreeViewA  NT.Action
   | TabViewA TV.Action
   | GraphExplorerA GE.Action
+  | DashboardA Dsh.Action
   | Search String
   | Go
   | CorpusAnalysisA CA.Action
@@ -105,7 +109,6 @@ performAction :: forall eff props. PerformAction ( dom :: DOM
                                                  ) AppState props Action
 performAction (SetRoute route)  _ _ = void do
   modifyState $ _ {currentRoute = pure route}
-
 performAction (Search s)  _ _ = void do
   modifyState $ _ {search = s}
 
@@ -126,6 +129,10 @@ performAction Go  _ _ = void do
   --modifyState id
 
 
+performAction Go  _ _ = void do
+  _ <- lift $ setHash "/addCorpus"
+  modifyState id
+
 performAction _ _ _ = void do
   modifyState id
 
@@ -194,6 +201,11 @@ _userPageAction = prism UserPageA \action ->
     UserPageA caction -> Right caction
     _-> Left action
 
+_dashBoardAction :: Prism' Action Dsh.Action
+_dashBoardAction = prism DashboardA \action ->
+  case action of
+    DashboardA caction -> Right caction
+    _ -> Left action
 
 _docAnnotationViewState :: Lens' AppState D.State
 _docAnnotationViewState = lens (\s -> s.docAnnotationView) (\s ss -> s{docAnnotationView = ss})
@@ -227,18 +239,17 @@ _tabviewAction = prism TabViewA \action ->
     TabViewA caction -> Right caction
     _-> Left action
 
-
-
 _corpusState :: Lens' AppState CA.State
 _corpusState = lens (\s -> s.corpusAnalysis) (\s ss -> s {corpusAnalysis = ss})
 
-
 _corpusAction :: Prism' Action CA.Action
 _corpusAction = prism CorpusAnalysisA \action ->
   case action of
     CorpusAnalysisA caction -> Right caction
     _-> Left action
 
+_dashBoardSate :: Lens' AppState Dsh.State
+_dashBoardSate = lens (\s -> s.dashboard) (\s ss -> s {dashboard = ss})
 
 _graphExplorerState :: Lens' AppState GE.State
 _graphExplorerState = lens (\s -> s.graphExplorer) (\s ss -> s{graphExplorer = ss})
@@ -275,9 +286,9 @@ pagesComponent s =
                                  | eff
                                  ) AppState props Action
     selectSpec CorpusAnalysis = layout0 $ focus _corpusState  _corpusAction CA.spec'
-    -- selectSpec Login      = focus _loginState _loginAction LN.renderSpec
+    selectSpec Login      = focus _loginState _loginAction LN.renderSpec
     selectSpec Home        = layout0 $ focus _landingState   _landingAction   (L.layoutLanding EN)
-    -- selectSpec AddCorpus  = layout0 $ focus _addCorpusState _addCorpusAction AC.layoutAddcorpus
+    selectSpec AddCorpus  = layout0 $ focus _addCorpusState _addCorpusAction AC.layoutAddcorpus
     selectSpec DocView    = layout0 $ focus _docViewState   _docViewAction   DV.layoutDocview
     selectSpec UserPage   = layout0 $ focus _userPageState  _userPageAction  UP.layoutUser
     selectSpec (DocAnnotation i)   = layout0 $ focus _docAnnotationViewState  _docAnnotationViewAction  D.docview
@@ -286,6 +297,7 @@ pagesComponent s =
     selectSpec SearchView = layout0 $ focus _searchState _searchAction  S.searchSpec
     selectSpec NGramsTable  = layout0 $ focus _ngState _ngAction  NG.ngramsTableSpec
     selectSpec PGraphExplorer = focus _graphExplorerState _graphExplorerAction  GE.spec
+    selectSpec Dashboard = layout0 $ focus _dashBoardSate _dashBoardAction Dsh.layoutDashboard
 
     selectSpec _ = simpleSpec defaultPerformAction defaultRender
 
@@ -564,6 +576,7 @@ layoutSpec =
 dispatchAction :: forall t115 t445 t447.
                   Bind t445 => Applicative t445  =>
                   (Action -> t445 t447) -> t115 -> Routes -> t445 Unit
+
 dispatchAction dispatcher _ Home = do
   _ <- dispatcher $ SetRoute $ Home
   _ <- dispatcher $ LandingA $ L.NoOp
@@ -599,13 +612,11 @@ dispatchAction dispatcher _ (DocAnnotation i) = do
   _ <- dispatcher $ DocAnnotationViewA $ D.NoOp
   pure unit
 
-
 dispatchAction dispatcher _ Tabview = do
   _ <- dispatcher $ SetRoute  $ Tabview
   _ <- dispatcher $ TabViewA $ TV.NoOp
   pure unit
 
-
 dispatchAction dispatcher _ CorpusAnalysis = do
   _ <- dispatcher $ SetRoute  $ CorpusAnalysis
   --_ <- dispatcher $ CorpusAnalysisA $ CA.NoOp
@@ -620,3 +631,7 @@ dispatchAction dispatcher _ NGramsTable = do
   _ <- dispatcher $ SetRoute  $ NGramsTable
   _ <- dispatcher $ NgramsA $ NG.NoOp
   pure unit
+
+dispatchAction dispatcher _ Dashboard = do
+  _ <- dispatcher $ SetRoute $ Dashboard
+  pure unit

src/PageRouter.purs

@@ -27,9 +27,10 @@ data Routes
   | CorpusAnalysis
   | PGraphExplorer
   | NGramsTable
+  | Dashboard
+
 
 instance showRoutes :: Show Routes where
-  show Home       = "Home"
   show Login      = "Login"
   show AddCorpus  = "AddCorpus"
   show DocView    = "DocView"
@@ -40,6 +41,8 @@ instance showRoutes :: Show Routes where
   show CorpusAnalysis   = "corpus"
   show PGraphExplorer   = "graphExplorer"
   show NGramsTable      = "NGramsTable"
+  show Dashboard        = "Dashboard"
+  show Home             = "Home"
 
 int :: Match Int
 int = floor <$> num
@@ -56,6 +59,7 @@ routing =
   <|> CorpusAnalysis <$   route "corpus"
   <|> PGraphExplorer <$   route "graphExplorer"
   <|> NGramsTable    <$   route "ngrams"
+  <|> Dashboard      <$   route "dashboard"
   <|> Home           <$     lit ""
   where
     route str      = lit "" *> lit str