Merge branch 'dev' of ssh://gitlab.iscpif.fr:20022/gargantext/purescript-gargantext into dev

package.json

@@ -43,5 +43,6 @@
         "psc-package": "^0.3.2",
         "pulp": "^12.3.0",
         "purescript": "^0.12.0"
-    }
+    },
+    "version": "0.0.0"
 }

src/Gargantext/Components/Charts/Options/Color.purs

 module Gargantext.Components.Charts.Options.Color
-       ( ChartColor()
-       , chartColor
+       ( Color
+       , stringColor
+       , cssColor
        , transparent
+       , red
+       , blue
+       , magenta
+       , violet
+       , black
        ) where
 
 import Prelude
 
-import CSS (Color, toHexString)
+import CSS as CSS
 import Color (rgba)
+import Unsafe.Coerce (unsafeCoerce)
 
-newtype ChartColor = ChartColor String
+data Color
+
+stringColor :: String -> Color
+stringColor = unsafeCoerce
+
+cssColor :: CSS.Color -> Color
+cssColor = stringColor <<< CSS.toHexString
 
 transparent :: Color
-transparent = rgba 255 255 255 0.0
+transparent = cssColor $ rgba 255 255 255 0.0
+
+red :: Color
+red = stringColor "red"
+
+blue :: Color
+blue = stringColor "blue"
+
+magenta :: Color
+magenta = stringColor "magenta"
+
+violet :: Color
+violet = cssColor CSS.violet
 
-chartColor :: Color -> ChartColor
-chartColor = ChartColor <<< toHexString
+black :: Color
+black = stringColor "black"

src/Gargantext/Components/Charts/Options/ECharts.purs

@@ -2,17 +2,17 @@ module Gargantext.Components.Charts.Options.ECharts where
 
 import Prelude
 
-import CSS (black, italic, violet)
+import CSS (italic)
 import CSS.Common (normal)
 import Data.Array (length)
 import Data.Maybe (Maybe(..))
-import Gargantext.Components.Charts.Options.Color (chartColor, transparent)
+import Gargantext.Components.Charts.Options.Color (transparent, violet, black)
 import Gargantext.Components.Charts.Options.Data (DataN, DataS, DataV)
 import Gargantext.Components.Charts.Options.Font (IconOptions(..), Shape(..), TextStyle, chartFontStyle, chartFontWeight, icon)
 import Gargantext.Components.Charts.Options.Legend (legendType, LegendMode(..), PlainOrScroll(..), selectedMode, Orientation(..), orient)
 import Gargantext.Components.Charts.Options.Position (Align(..), LeftRelativePosition(..), TopRelativePosition(..), numberPosition, percentPosition, relativePosition)
-import Gargantext.Components.Charts.Options.Series (Serie(..), Series(..), toSeries, SeriesName, Chart(..), seriesType, D1, D2)
-import Gargantext.Components.Charts.Options.Type (DataZoom, Echarts, Legend, Option, Title, Tooltip, XAxis, YAxis)
+import Gargantext.Components.Charts.Options.Series (Series, SeriesName, Chart(..), seriesType, seriesD1)
+import Gargantext.Components.Charts.Options.Type (DataZoom, Echarts, Legend, Option, Title, Tooltip, XAxis, YAxis, xAxis, yAxis)
 import React (unsafeCreateElementDynamic)
 import React as R
 import Unsafe.Coerce (unsafeCoerce)
@@ -25,11 +25,12 @@ chart = echarts <<< chartWith <<< opts
 
 
 chartWith :: Option -> Echarts
-chartWith opts = { className : Nothing
+chartWith option =
+  { option
+  , className : Nothing
   , style     : Nothing
   , theme     : Nothing
   , group     : Nothing
-                 , option    : opts
   , initOpts  : Nothing
   , notMerge  : Nothing
   , lazyUpdate: Nothing
@@ -41,7 +42,7 @@ chartWith opts = { className : Nothing
   }
 
 echarts :: Echarts -> R.ReactElement
-echarts chart = unsafeCreateElementDynamic (unsafeCoerce eChartsClass) chart []
+echarts c = unsafeCreateElementDynamic (unsafeCoerce eChartsClass) c []
 
 type MainTitle = String
 type SubTitle  = String
@@ -67,12 +68,12 @@ title mainTitle subTitle =
    ,top: relativePosition (Relative Top)
    ,right: numberPosition 60.0
    ,bottom: percentPosition 40.0
-   ,backgroundColor: chartColor transparent
-   ,borderColor: chartColor transparent
+   ,backgroundColor: transparent
+   ,borderColor: transparent
    ,borderWidth: 0.0
    ,borderRadius: 0.0
    ,shadowBlur: 0.0
-   ,shadowColor: chartColor transparent
+   ,shadowColor: transparent
    ,shadowOffsetX: 0.0
    ,shadowOffsetY: 0.0
   }
@@ -99,7 +100,7 @@ legend =
    , itemHeight: 14.0
    , formatter: Nothing
    , selectedMode: selectedMode $ Bool true
-   , inactiveColor: chartColor violet
+   , inactiveColor: violet
    , selected: Nothing
    , textStyle: textStyle
    , "data": [data1]
@@ -115,22 +116,10 @@ data3 :: DataN
 data3 = {name: "Test", icon: icon $ Shape Diamond, textStyle: textStyle'}
 
 
-xAxis :: Array String -> XAxis
-xAxis [] = unsafeCoerce {}
-xAxis xs = { "data": xData xs
-           , "type": "category"
-           , axisTick: {alignWithLabel: true}
-           , show: if (length xs == 0) then false else true
-           }
-  where
-    xData :: Array String -> Array DataV
-    xData xs = map (\x -> {value : x, textStyle : textStyle'}) xs
-
 
-yDataVoid :: YAxis
-yDataVoid =
-  {
-    "type": ""
+yAxisVoid :: YAxis
+yAxisVoid = yAxis
+  { "type": ""
   , name: ""
   , min: 0
   , position: ""
@@ -138,10 +127,9 @@ yDataVoid =
   , show: false
   }
 
-yData1 :: YAxis
-yData1 =
-  {
-    "type": "value"
+yAxis1 :: YAxis
+yAxis1 = yAxis
+  { "type": "value"
   , name: "data"
   , min: 0
   , position: "left"
@@ -151,68 +139,65 @@ yData1 =
 
 tooltip' :: Tooltip
 tooltip' =
-  {
-    trigger: "axis"
+  { trigger:   "axis"
   , formatter: Nothing
   }
 
-
-series :: Chart -> SeriesName -> Array DataS -> D1
-series sh name ss =  { name: name
-  , "type": seriesType sh
-  , "data": ss
-  }
-
-seriesD2 :: String -> Chart -> Number -> Array (Array Number) -> D2
-seriesD2 n sh size ds = { "symbolSize" : size
-                      , "data"       : ds
-                      , "type"       : seriesType sh
-                      , name : n
+xAxis' :: Array String -> XAxis
+xAxis' [] = unsafeCoerce {}
+xAxis' xs = xAxis
+            { "data": xData xs
+            , "type": "category"
+            , axisTick: {alignWithLabel: true}
+            , show: length xs /= 0
             }
-
-
-
-data YAxisFormat = YAxisFormat { position :: String
-                               , visible  :: Boolean
+  where
+    xData :: Array String -> Array DataV
+    xData = map (\x -> {value : x, textStyle : textStyle'})
+
+-- TODO try to use Optional
+yAxis' :: { position :: String
+          , show     :: Boolean
+          } -> YAxis
+yAxis' {position, show} = yAxis
+  { "type": "value"
+  , name: "data"
+  , min: 0
+  , axisLabel: {formatter: "{value}"}
+  , position
+  , show
   }
 
-data Options = Options { mainTitle   :: MainTitle
+data Options = Options
+  { mainTitle :: MainTitle
   , subTitle  :: SubTitle
   , xAxis     :: XAxis
-                       , yAxis       :: Array Serie
-                       , yAxisFormat :: YAxisFormat
+  , yAxis     :: YAxis
+  , series    :: Array Series
   , addZoom   :: Boolean
   }
 
 opts :: Options -> Option
-opts (Options { mainTitle : mainTitle
-              , subTitle : subTitle
-              , xAxis : xs
-              , yAxis : ss
-              , yAxisFormat : (YAxisFormat { position : position
-                                           , visible  : visible
-                                         })
-              , addZoom : addZoom}) =
+opts (Options { mainTitle
+              , subTitle
+              , xAxis
+              , yAxis
+              , series
+              , addZoom
+              }) =
   { title: title mainTitle subTitle
-  , legend : legend
+  , legend
   , tooltip: { trigger: "axis"
              , formatter: Nothing
              }
-  , grid   : {containLabel: true}
-  , xAxis  : xs
-  , series : map toSeries $ ss
-  , yAxis  : { "type": "value"
-              , name: "data"
-              , min: 0
-              , position: position
-              , axisLabel: {formatter: "{value}"}
-              , show: visible
-              }
+  , grid: {containLabel: true}
+  , series
+  , xAxis
+  , yAxis
   , dataZoom: if addZoom then [zoom Slider, zoom Inside] else []
-  , children : unsafeCoerce []
+  , children : unsafeCoerce [] -- TODO
   }
 
-
 data Zoom = Slider | Inside
 
 instance showZoom :: Show Zoom where
@@ -229,10 +214,9 @@ zoom z = {
   }
 
 
-seriesPie :: D1
-seriesPie =
-  {
-    name: "Pie name"
+seriesPie :: Series
+seriesPie = seriesD1
+  { name: "Pie name"
   , "type": seriesType Pie
   , "data": [{name: "t1", value: 50.0},
              {name: "t2", value: 45.0},
@@ -246,7 +230,7 @@ seriesPie =
 textStyle2 :: TextStyle
 textStyle2 =
   {
-    color: chartColor black
+    color: black
     ,fontStyle: chartFontStyle italic
     ,fontWeight: chartFontWeight normal
     ,fontFamily: "sans-serif"
@@ -256,10 +240,10 @@ textStyle2 =
     ,lineHeight: percentPosition 0.0
     ,width: percentPosition 100.0
     ,height: percentPosition 100.0
-    ,textBorderColor: chartColor black
+    ,textBorderColor: black
     ,textBorderWidth: 0.0
-    ,textShadowColor: chartColor black
-    ,textShadowBlur: chartColor black
+    ,textShadowColor: black
+    ,textShadowBlur: black
     ,textShadowOffsetX: 0.0
     ,textShadowOffsetY: 0.0
   }
@@ -267,7 +251,7 @@ textStyle2 =
 textStyle' :: TextStyle
 textStyle' =
   {
-    color: chartColor black
+    color: black
     ,fontStyle: chartFontStyle normal
     ,fontWeight: chartFontWeight normal
     ,fontFamily: "sans-serif"
@@ -277,10 +261,10 @@ textStyle' =
     ,lineHeight: percentPosition 0.0
     ,width: percentPosition 100.0
     ,height: percentPosition 100.0
-    ,textBorderColor: chartColor black
+    ,textBorderColor: black
     ,textBorderWidth: 1.0
-    ,textShadowColor: chartColor black
-    ,textShadowBlur: chartColor black
+    ,textShadowColor: black
+    ,textShadowBlur: black
     ,textShadowOffsetX: 0.0
     ,textShadowOffsetY: 0.0
   }
@@ -288,7 +272,7 @@ textStyle' =
 textStyle :: TextStyle
 textStyle =
   {
-    color: chartColor black
+    color: black
     ,fontStyle: chartFontStyle normal
     ,fontWeight: chartFontWeight normal
     ,fontFamily: "sans-serif"
@@ -298,10 +282,10 @@ textStyle =
     ,lineHeight: percentPosition 0.0
     ,width: percentPosition 100.0
     ,height: percentPosition 100.0
-    ,textBorderColor: chartColor black
+    ,textBorderColor: black
     ,textBorderWidth: 1.0
-    ,textShadowColor: chartColor black
-    ,textShadowBlur: chartColor black
+    ,textShadowColor: black
+    ,textShadowBlur: black
     ,textShadowOffsetX: 0.0
     ,textShadowOffsetY: 0.0
   }

src/Gargantext/Components/Charts/Options/Font.purs

@@ -15,15 +15,15 @@ module Gargantext.Components.Charts.Options.Font
 import Prelude (Unit, ($), (<<<), (<>))
 
 import Data.Generic.Rep
-import Data.Generic.Rep.Show
+import Data.Generic.Rep.Show (genericShow)
 import CSS (FontStyle(..), FontWeight(..), Prefixed(..), Value(..))
 import Data.String (toLower)
-import Gargantext.Components.Charts.Options.Color (ChartColor)
+import Gargantext.Components.Charts.Options.Color (Color)
 import Gargantext.Components.Charts.Options.Position (LeftRelativePosition, Position, TopRelativePosition)
 
 
 type TextStyle =
-  { color      :: ChartColor
+  { color      :: Color
   , fontStyle  :: ChartFontStyle
   , fontWeight :: ChartFontWeight
   , fontFamily :: String
@@ -33,10 +33,10 @@ type TextStyle =
   , lineHeight    :: Position Unit
   , width         :: Position Unit
   , height        :: Position Unit
-  , textBorderColor :: ChartColor
+  , textBorderColor :: Color
   , textBorderWidth :: Number
-  , textShadowColor :: ChartColor
-  , textShadowBlur  :: ChartColor
+  , textShadowColor :: Color
+  , textShadowBlur  :: Color
   , textShadowOffsetX :: Number
   , textShadowOffsetY :: Number
   }

src/Gargantext/Components/Charts/Options/Series.purs

 module Gargantext.Components.Charts.Options.Series where
 
-import Effect.Exception (error, Error(..))
 import Unsafe.Coerce (unsafeCoerce)
 import Prelude
 
+import Gargantext.Types (class Optional)
+import Gargantext.Components.Charts.Options.Color (Color)
 import Gargantext.Components.Charts.Options.Data (DataS)
 
 
+data ItemStyle
+
+type ItemStyleOptional =
+  ( color :: Color
+  )
+
+itemStyle :: forall o. Optional o ItemStyleOptional => Record o -> ItemStyle
+itemStyle = unsafeCoerce
+
 newtype SeriesType = SeriesType String
 
 type SeriesName = String
@@ -48,36 +58,54 @@ seriesType :: Chart -> SeriesType
 seriesType = SeriesType <<< show
 
 
-type Series = {}
-data Serie = SeriesD1 D1 | SeriesD2 D2 | SerieSankey Sankey | SerieTree Tree
+data Series
 
-type D1 =
-  { name   :: String
-  , "type" :: SeriesType
+unsafeSeries :: forall o. { | o } -> Series
+unsafeSeries = unsafeCoerce
+
+type RequiredD1 o =
+  { "type" :: SeriesType
   , "data" :: Array DataS
+  | o
   }
 
--- | Scatter Dimension 2 data
-type D2 =
-  { name :: String
-  , "symbolSize" :: Number
-  , "data" :: Array (Array Number)
+type OptionalD1 =
+  ( name   :: String
+  -- many more...
+  )
+
+seriesD1 :: forall o. Optional o OptionalD1 => RequiredD1 o -> Series
+seriesD1 = unsafeSeries
+
+seriesFunnelD1 :: forall o. Optional o OptionalD1 => Record o -> Array DataS -> Series
+seriesFunnelD1 o ds = seriesD1 ((unsafeCoerce o :: RequiredD1 o) { "data" = ds, "type" = seriesType Funnel })
+
+seriesBarD1 :: forall o. Optional o OptionalD1 => Record o -> Array DataS -> Series
+seriesBarD1 o ds = seriesD1 ((unsafeCoerce o :: RequiredD1 o) { "data" = ds, "type" = seriesType Bar })
+
+seriesPieD1 :: forall o. Optional o OptionalD1 => Record o -> Array DataS -> Series
+seriesPieD1 o ds = seriesD1 ((unsafeCoerce o :: RequiredD1 o) { "data" = ds, "type" = seriesType Pie })
+
+type RequiredD2 o =
+  { "data" :: Array (Array Number)
   , "type" :: SeriesType
+  | o
   }
 
-toSeries :: Serie -> Series
-toSeries (SeriesD1 a)    = unsafeCoerce a
-toSeries (SeriesD2 a)    = unsafeCoerce a
-toSeries (SerieSankey a) = unsafeCoerce a
-toSeries (SerieTree   a) = unsafeCoerce a
+-- | Scatter Dimension 2 data
+type OptionalD2 =
+  ( name       :: String
+  , symbolSize :: Number
+  , itemStyle  :: ItemStyle
+  -- many more...
+  )
 
--- | Sankey Chart
--- https://ecomfe.github.io/echarts-examples/public/editor.html?c=sankey-simple
-type Sankey = { "type" :: SeriesType
-              , layout :: String
-              , "data" :: Array Node
-              , "links" :: Array Link
-              }
+seriesD2 :: forall o. Optional o OptionalD2 => RequiredD2 o -> Series
+seriesD2 = unsafeSeries
+
+seriesScatterD2 :: forall o. Optional o OptionalD2 => Record o -> Array (Array Number) -> Series
+seriesScatterD2 o ds =
+  seriesD2 ((unsafeCoerce o :: RequiredD2 o) { "data" = ds, "type" = seriesType Scatter })
 
 type Node = { name :: String}
 type Link = { source :: String
@@ -85,13 +113,21 @@ type Link = { source :: String
             , value  :: Number
             }
 
-mkSankey :: Array Node -> Array Link -> Serie
-mkSankey ns ls = SerieSankey { "type"  : seriesType Sankey
-                             , layout  : "none"
-                             , "data"  : ns
-                             , "links" : ls
+-- | Sankey Chart
+-- https://ecomfe.github.io/echarts-examples/public/editor.html?c=sankey-simple
+type RequiredSankey o =
+  { "data" :: Array Node
+  , links  :: Array Link
+  | o
   }
 
+type OptionalSankey =
+  ( layout :: String
+  )
+
+seriesSankey :: forall o. Optional o OptionalSankey => RequiredSankey o -> Series
+seriesSankey o = unsafeSeries ((unsafeCoerce o) { "type" = seriesType Sankey })
+
 -- | * Trees Chart
 -- All these Trees are hierarchical Trees structure (or diagram)
 -- https://en.wikipedia.org/wiki/Tree_structure
@@ -115,13 +151,21 @@ instance showTrees :: Show Trees where
 -- TreeMap example implementation:
 -- https://ecomfe.github.io/echarts-examples/public/editor.html?c=treemap-simple
 
-type Tree = { "type" :: SeriesType
+type RequiredTree o =
+  { "type" :: SeriesType
   , "data" :: Array TreeData
-            , layout :: String
+  | o
   }
 
-mkTree :: Trees -> Array TreeData -> Serie
-mkTree t ts = SerieTree { "type" : SeriesType (show t)
+type OptionalTree =
+  ( layout :: String
+  )
+
+seriesTree :: forall o. Optional o OptionalTree => RequiredTree o -> Series
+seriesTree = unsafeSeries
+
+mkTree :: Trees -> Array TreeData -> Series
+mkTree t ts = seriesTree { "type" : SeriesType (show t)
                          , "data" : map toJsTree ts
                          , layout : layout
                          }

src/Gargantext/Components/Charts/Options/Type.purs

@@ -2,17 +2,20 @@ module Gargantext.Components.Charts.Options.Type where
 
 import Prelude
 
-import CSS (Color)
 import Data.Maybe (Maybe)
-import Gargantext.Components.Charts.Options.Color (ChartColor)
+import Gargantext.Components.Charts.Options.Color (Color)
 import Gargantext.Components.Charts.Options.Data (DataN, DataV)
 import Gargantext.Components.Charts.Options.Font (TextStyle)
 import Gargantext.Components.Charts.Options.Legend (LegendType, Orient, SelectedMode)
 import Gargantext.Components.Charts.Options.Position (LeftRelativePosition, Position, TopRelativePosition)
 import Gargantext.Components.Charts.Options.Series (Series)
+import Gargantext.Types (class Optional)
 import React as R
+import Unsafe.Coerce (unsafeCoerce)
+
 newtype ChartAlign = ChartAlign String
 
+-- TODO: Not sure that Maybe is working here => use Optional
 type Echarts =
   { className   :: Maybe String
   , style       :: Maybe String  -- objealect-black-altdarkmincnaquadahherry-blossomect,
@@ -60,12 +63,12 @@ type Title =
   , top :: Position TopRelativePosition -- default 'auto'
   , right :: Position Unit -- default 'auto'
   , bottom :: Position Unit -- default 'auto'
-  , backgroundColor :: ChartColor -- default 'transparent''
-  , borderColor :: ChartColor -- default '#ccc'
+  , backgroundColor :: Color -- default 'transparent''
+  , borderColor :: Color -- default '#ccc'
   , borderWidth :: Number -- default '1'
   , borderRadius :: Number -- default 0; data NumberOrArray = Number | Array Number
   , shadowBlur :: Number
-  , shadowColor :: ChartColor
+  , shadowColor :: Color
   , shadowOffsetX :: Number
   , shadowOffsetY :: Number
   }
@@ -111,7 +114,7 @@ type Legend =
   , itemHeight :: Number
   , formatter :: Maybe String
   , selectedMode :: SelectedMode
-  , inactiveColor :: ChartColor
+  , inactiveColor :: Color
   , selected :: Maybe String -- object
   , textStyle :: TextStyle
   , "data" :: Array DataN
@@ -122,26 +125,39 @@ type Tooltip =
   , formatter :: Maybe String -- TODO function
   }
 
-type XAxis =
-  { "data"   :: Array DataV
+type AxisTick =
+  { alignWithLabel :: Boolean
+  }
+
+data XAxis
+
+type XAxisOptional =
+  ( "data"    :: Array DataV
   , "type"    :: String
   , axisTick  :: AxisTick
+  , name      :: String
+  , min       :: Int
+  , position  :: String
+  , axisLabel :: AxisLabel
   , show      :: Boolean
-  }
+  )
 
-type AxisTick =
-  {
-    alignWithLabel :: Boolean
-  }
+xAxis :: forall o. Optional o XAxisOptional => Record o -> XAxis
+xAxis = unsafeCoerce
+
+data YAxis
 
-type YAxis =
-  { "type"    :: String
+type YAxisOptional =
+  ( "type"    :: String
   , name      :: String
   , min       :: Int
   , position  :: String
   , axisLabel :: AxisLabel
   , show      :: Boolean
-  }
+  )
+
+yAxis :: forall o. Optional o YAxisOptional => Record o -> YAxis
+yAxis = unsafeCoerce
 
 type AxisLabel =
   { formatter :: String -- string or function

src/Gargantext/Components/GraphExplorer/Sigmajs.purs

@@ -3,9 +3,9 @@ module Gargantext.Components.GraphExplorer.Sigmajs where
 import Prelude
 
 import Effect (Effect)
-import Prim.Row (class Union)
 import React (Children, ReactClass, ReactElement, createElement, unsafeCreateElement)
 import Unsafe.Coerce (unsafeCoerce)
+import Gargantext.Types (class Optional)
 
 foreign import edgeShapesClass  :: forall props. ReactClass props
 foreign import filterClass      :: forall props. ReactClass props
@@ -64,12 +64,6 @@ foreign import data SigmaNode :: Type
 foreign import data SigmaEdge :: Type
 foreign import data SigmaSettings :: Type
 
--- | Proof that row `r` is a subset of row `s`
-class Optional (r :: # Type) (s :: # Type)
-instance srInstance :: Union r t s => Optional r s
-
-
-
 type NeoCypherOptProps =
   ( producers :: String
   , onGraphLoaded :: Effect Unit

src/Gargantext/Pages/Corpus/Dashboard.purs

@@ -4,10 +4,8 @@ import Prelude hiding (div)
 
 import Data.Array (zip)
 import Data.Tuple (Tuple(..))
-import Gargantext.Components.Charts.Options.ECharts
+import Gargantext.Components.Charts.Options.ECharts (Options(..), chart, xAxis', yAxis')
 import Gargantext.Components.Charts.Options.Series
-import Gargantext.Components.Charts.Options.Type (Option)
-import Data.Unit (Unit)
 import Data.Int (toNumber)
 import React.DOM (div, h1, text)
 import React.DOM.Props (className)
@@ -29,21 +27,22 @@ render dispatch _ state _ = [
     , chart treeEx
   ]
     where
-      myData = [SeriesD1 $ series Bar "Bar Data"  [ {name: "val1", value: 50.0}
+      myData = [seriesBarD1 {name: "Bar Data"}
+                            [ {name: "val1", value: 50.0}
                             , {name: "val2", value: 70.0}
                             , {name: "val3", value: 80.0}
                             ]
                ]
 
       focus :: String -> Options
-      focus school = Options { mainTitle : ("Focus " <> school)
+      focus school = Options
+        { mainTitle : "Focus " <> school
         , subTitle  : "Total scientific publications"
-                         , xAxis     : xAxis ["2015", "2016", "2017"]
-                         , yAxis     : myData
-                         , yAxisFormat : (YAxisFormat { position : "left"
-                                                      , visible  : true
-                                                      })
-
+        , xAxis     : xAxis' ["2015", "2016", "2017"]
+        , yAxis     : yAxis' { position: "left"
+                             , show: true
+                             }
+        , series    : myData
         , addZoom   : false
         }
 
@@ -58,13 +57,12 @@ naturePublis_y :: Array {name :: String, value :: Number}
 naturePublis_y = map (\(Tuple n v) -> {name: n, value: toNumber v }) (zip naturePublis_x naturePublis_y')
 
 naturePublis :: Options
-naturePublis = Options { mainTitle : "Nature of publications"
+naturePublis = Options
+  { mainTitle : "Nature of publications"
   , subTitle  : "Distribution by type"
-                  , xAxis     : xAxis []
-                  , yAxis     : [SeriesD1 $ series Funnel "Funnel Data" naturePublis_y]
-                  , yAxisFormat : (YAxisFormat { position : "left"
-                                               , visible  : false
-                                             })
+  , xAxis     : xAxis' []
+  , yAxis     : yAxis' { position: "left", show: false }
+  , series    : [seriesFunnelD1 { name: "Funnel Data" } naturePublis_y]
   , addZoom   : false
   }
 
@@ -77,15 +75,14 @@ globalPublis_y = [1,4,2,1,1,2,1,1,8,38,234,76,40,82,75,202,1475,1092,1827,2630,4
 
 
 globalPublis :: Options
-globalPublis = (Options { mainTitle : "Global Scientific Publications"
+globalPublis = Options
+  { mainTitle : "Global Scientific Publications"
   , subTitle  : "Distribution of scientific publications by IMT's Schools over time"
-                     , xAxis     : xAxis (map show globalPublis_x)
-                     , yAxis     : [SeriesD1 $ series Bar "Number of publication of IMT / year" $ map (\n -> {name: "", value: toNumber n }) globalPublis_y]
-                     , yAxisFormat : (YAxisFormat { position : "left"
-                                                  , visible  : true
-                                                })
+  , xAxis     : xAxis' (map show globalPublis_x)
+  , yAxis     : yAxis' { position: "left", show: true }
+  , series    : [seriesBarD1 {name: "Number of publication of IMT / year"} $ map (\n -> {name: "", value: toNumber n }) globalPublis_y]
   , addZoom   : true
-                   })
+  }
 
 
 
@@ -94,49 +91,51 @@ distriBySchool_y = [Tuple "Télécom Bretagne" 1150,Tuple "Télécom SudParis" 9
                    ,Tuple "Télécom Ecole de Management" 52,Tuple "Mines Albi-Carmaux" 6]
 
 distriBySchool :: Options
-distriBySchool = Options { mainTitle : "School production in 2017"
+distriBySchool = Options
+  { mainTitle : "School production in 2017"
   , subTitle  : "Distribution by school"
-                       , xAxis     : xAxis []
-                       , yAxis     : [ SeriesD1 $ series Pie "Pie data" (map (\(Tuple n v) -> {name: n, value: toNumber v}) distriBySchool_y)]
-                       , yAxisFormat : (YAxisFormat { position : ""
-                                                    , visible  : false
-                                                  })
+  , xAxis     : xAxis' []
+  , yAxis     : yAxis' { position : "", show: false }
+  , series    : [ seriesPieD1 {name: "Pie data"} (map (\(Tuple n v) -> {name: n, value: toNumber v}) distriBySchool_y)]
   , addZoom   : false
   }
 
 scatterEx :: Options
-scatterEx = Options { mainTitle : "Scatter test"
+scatterEx = Options
+  { mainTitle : "Scatter test"
   , subTitle  : "Scatter subtitle"
-                       , xAxis     : xAxis []
-                       , yAxis     : [ SeriesD2 $ seriesD2 "name1" Scatter 10.0 [[2.0,3.0],[3.0,4.0]]
-                                     , SeriesD2 $ seriesD2 "name2" Scatter 5.0 [[1.0,3.0],[5.0,4.0]]
-                                     , SeriesD2 $ seriesD2 "name3" Scatter 10.0 [[10.0,3.0],[8.0,4.0]]
-                                     ]
-                       , yAxisFormat : (YAxisFormat { position : ""
-                                                    , visible  : true
-                                                  })
+  , xAxis     : xAxis' []
+  , yAxis     : yAxis' { position: "", show: true }
+  , series    : [ seriesScatterD2 {name: "name1", symbolSize: 10.0} [[2.0,3.0],[3.0,4.0]]
+                , seriesScatterD2 {name: "name2", symbolSize: 5.0 } [[1.0,3.0],[5.0,4.0]]
+                , seriesScatterD2 {name: "name3", symbolSize: 10.0} [[10.0,3.0],[8.0,4.0]]
+                ]
   , addZoom   : false
   }
 
-
 sankeyEx :: Options
-sankeyEx = Options { mainTitle : ""
+sankeyEx = Options
+  { mainTitle : ""
   , subTitle  : ""
-                       , xAxis     : xAxis []
-                       , yAxis     : [ mkSankey [{name : "a"}, {name : "b"}, {name:"c"}, {name:"d"}]
-                       [{source : "a", target : "b", value :2.0}
+  , xAxis     : xAxis' []
+  , yAxis     : yAxis' { position: "", show: false }
+  , series    :
+     [ seriesSankey
+         { "data":
+             [ {name : "a"}, {name : "b"}
+             , {name:"c"}, {name:"d"} ]
+         , links:
+             [ {source : "a", target : "b", value :2.0}
              , {source : "a", target : "c", value :1.0}
              , {source : "b", target : "c", value :1.0}
              , {source : "b", target : "d", value :3.0}
              ]
+         , layout: "none"
+         }
      ]
-                       , yAxisFormat : (YAxisFormat { position : ""
-                                                    , visible  : false
-                                                  })
   , addZoom   : false
   }
 
-
 treeData :: Array TreeData
 treeData = [ treeNode "nodeA" 10.0 [ treeLeaf "nodeAa" 4.0
                                    , treeLeaf "nodeAb" 5.0
@@ -183,28 +182,24 @@ treeData' = [ treeNode "nodeA" 10.0 [ treeLeaf "nodeAa" 4.0
 
 
 treeMapEx :: Options
-treeMapEx = Options { mainTitle : ""
+treeMapEx = Options
+  { mainTitle : ""
   , subTitle  : ""
-                    , xAxis     : xAxis []
-                    , yAxis     : [mkTree TreeMap treeData]
-                    , yAxisFormat : (YAxisFormat { position : ""
-                                                    , visible  : false
-                                                  })
+  , xAxis     : xAxis' []
+  , yAxis     : yAxis' { position: "", show: false }
+  , series    : [mkTree TreeMap treeData]
   , addZoom   : false
   }
 
-
 treeEx :: Options
-treeEx = Options { mainTitle : "Tree"
+treeEx = Options
+  { mainTitle : "Tree"
   , subTitle  : "Radial"
-                    , xAxis     : xAxis []
-                    , yAxis     : [mkTree TreeRadial treeData']
-                    , yAxisFormat : (YAxisFormat { position : ""
-                                                    , visible  : false
-                                                  })
+  , xAxis     : xAxis' []
+  , yAxis     : yAxis' { position: "", show: false }
+  , series    : [mkTree TreeRadial treeData']
   , addZoom   : false
   }
 
-
 layoutDashboard :: Spec {} {} Void
 layoutDashboard = simpleSpec defaultPerformAction render

src/Gargantext/Pages/Corpus/Metrics.purs

 module Gargantext.Pages.Corpus.Metrics where
 
-import Data.Set as Set
 import Data.Array (foldl)
 import Data.Tuple (Tuple(..))
-import Data.Map (fromFoldableWith, Map(), keys, lookup)
+import Data.Map as Map
+import Data.Map (Map)
 import Data.Argonaut (class DecodeJson, decodeJson, (.?))
 import Data.Maybe (Maybe(..), maybe)
 import Effect.Aff (Aff)
@@ -12,10 +12,12 @@ import Gargantext.Config.REST (get)
 import React (ReactClass, ReactElement, createElement)
 import Thermite (Spec, Render, defaultPerformAction, simpleSpec, createClass)
 import Gargantext.Prelude
-import Gargantext.Types (TermList)
+import Gargantext.Types (TermList(..))
 import Gargantext.Components.Loader as Loader
 import Gargantext.Components.Charts.Options.ECharts
+import Gargantext.Components.Charts.Options.Type
 import Gargantext.Components.Charts.Options.Series
+import Gargantext.Components.Charts.Options.Color
 
 type Path =
   { corpusId :: Int
@@ -59,25 +61,33 @@ loadedMetricsSpec = simpleSpec defaultPerformAction render
     render dispatch {loaded} {} _ = [chart (scatterOptions loaded)]
 
 scatterOptions :: Array Metric -> Options
-scatterOptions ds = Options
+scatterOptions metrics = Options
   { mainTitle : "TODO Scatter test"
   , subTitle  : "TODO Scatter subtitle"
-  , xAxis     : xAxis [] -- $ SeriesD2 $ seriesD2 Scatter 5.0 (_.x <$> ds)
-  , yAxis     : map2series ( metric2map ds )
-  , yAxisFormat : (YAxisFormat { position : ""
-                               , visible  : true
-                               })
+  , xAxis     : xAxis { min: 0 }
+  , yAxis     : yAxis' { position : "", show: true }
+  , series    : map2series $ metric2map metrics
   , addZoom   : false
   }
   where
-    metric2map :: Array Metric -> Map TermList (Array (Array Number))
-    metric2map ds = fromFoldableWith (<>) $ map (\(Metric {x:x,y:y,cat:cat}) -> Tuple cat [[x,y]]) ds
+    metric2map :: Array Metric -> Map TermList (Array Metric)
+    metric2map ds = Map.fromFoldableWith (<>) $ (\(Metric m) -> Tuple m.cat [Metric m]) <$> ds
 
     --{-
-    map2series :: Map TermList (Array (Array Number)) -> Array Serie
-    map2series ms = map (\k -> maybe (toSeries k [[]]) (toSeries k) $ lookup k ms) ((Set.toUnfoldable $ keys ms) :: (Array TermList))
+    map2series :: Map TermList (Array Metric) -> Array Series
+    map2series ms = toSeries =<< Map.toUnfoldable ms
       where
-        toSeries k xs = SeriesD2 $ seriesD2 (show k) Scatter 5.0 xs
+        -- TODO colors are not respected yet
+        toSeries (Tuple k ms) = toSeries' color <$> ms
+          where
+            color =
+              case k of
+                StopTerm -> red
+                GraphTerm -> blue
+                CandidateTerm -> magenta
+        toSeries' color (Metric {label,x,y}) =
+          seriesScatterD2 {name: label, symbolSize: 5.0, itemStyle: itemStyle {color}}
+                          [[x,y]]
     --}
 
 getMetrics :: Path -> Aff Loaded

src/Gargantext/Types.purs

@@ -5,6 +5,7 @@ import Data.Argonaut ( class DecodeJson, decodeJson, class EncodeJson, encodeJso
 import Data.Maybe (Maybe(..))
 import Data.Either (Either(..))
 import Gargantext.Prelude
+import Prim.Row (class Union)
 
 data TermSize = MonoTerm | MultiTerm
 
@@ -70,3 +71,6 @@ termLists = [ { desc: "All terms",   mval: Nothing      }
             , { desc: "Candidate terms", mval: Just CandidateTerm }
             ]
 
+-- | Proof that row `r` is a subset of row `s`
+class Optional (r :: # Type) (s :: # Type)
+instance optionalInstance :: Union r t s => Optional r s