nearly done with title

bower.json

@@ -64,3 +64,4 @@
                 "purescript-newtype": "^2.0.0"
         }
 }
+

src/Charts/ECharts.purs

 module Charts.ECharts where
 
-import CSS (Color)
+import Charts.Types
+import Data.Either
+
+import CSS (Color, borderColor, toHexString, turquoise, violet, yellowgreen)
 import Data.Maybe (Maybe(..))
+import Prelude (show)
 import React as R
 import React.DOM (p)
 import React.DOM.Props (Props)
-import Charts.Types
 
 foreign import eChartsClass :: forall props. R.ReactClass props
 foreign import eChartsClass2 :: R.ReactClass Echarts
@@ -94,7 +97,7 @@ series' =
 opt :: Option
 opt =
   {
-    title: Nothing
+    title: title'
     ,legend: Nothing
     ,tooltip: tooltip'
     ,grid: {containLabel: true}
@@ -103,6 +106,35 @@ opt =
     ,series: [series']
     ,dataZoom: [dz1', dz1', dz2', dz2']
   }
+  where title' =
+          {
+            id: ""
+            ,show: true
+            ,text: "MudaTitre rpz les pyramides"
+            ,link: "https://google.com"
+            ,target: "blank"
+            ,textStyle: Nothing
+            ,subtext: "Muda Subtitle"
+            ,sublink: "https://google.fr"
+            ,subtarget: "blank"
+            ,subtextStyle: Nothing
+            ,padding: 10.0
+            ,itemGap: 0.0
+            ,zlevel: 2.0
+            ,z: 2.0
+            ,left: renderLeftRelativePosition RightPos
+            ,top: renderTopRelativePosition Middle
+            ,right: renderNumber 60.0
+            ,bottom: renderPercentage 40.0
+            ,backgroundColor: renderCSSColor turquoise
+            ,borderColor: renderCSSColor violet
+            ,borderWidth: 20.0
+            ,borderRadius: Left 20.0
+            ,shadowBlur: 40.0
+            ,shadowColor: renderCSSColor turquoise
+            ,shadowOffsetX: 20.0
+            ,shadowOffsetY: 40.0
+          }
 
 charts :: Echarts
 charts =

src/Charts/Types.purs

 module Charts.Types where
 
-import Prelude ((<>), show, ($))
-import Data.Maybe(Maybe)
-import Data.Either(Either)
-import Data.String (toLower)
+import Unsafe.Coerce
+
+import CSS (Color, toHexString)
+import Data.Either (Either)
 import Data.Generic (class Generic, gShow)
-import CSS (Color)
+import Data.Maybe (Maybe)
+import Data.String (toLower)
+import Prelude ((<>), class Show, show, ($), (>>>), Unit, (<<<))
 
 type NumberOrArray = Either Number (Array Number)
 
-data Top = Top | Middle | Bottom
-derive instance genericTop :: Generic Top
+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"
+
+newtype CSSColor = CSSColor String
+
+renderCSSColor :: Color -> CSSColor
+renderCSSColor = CSSColor <<< toHexString
+
+foreign import data Position :: Type -> Type
+
+renderNumber :: forall r. Number -> Position r
+renderNumber = unsafeCoerce
 
-data Position relative = Flat Number | Percent Number | Relative relative -- 20 | 20% | top
+renderPercentage :: forall r. Number -> Position r
+renderPercentage n = unsafeCoerce $ (show n) <> "%"
 
-class InitialB r
-instance nightOfNumber :: InitialB Number
-instance runningInTheString :: InitialB String
+renderTopRelativePosition :: TopRelativePosition -> Position TopRelativePosition
+renderTopRelativePosition = unsafeCoerce <<< show
 
-displayTopPosition :: forall a. InitialB a => Position Top -> a
-displayTopPosition (Flat n) = n
-displayTopPosition (Percent n) = (show n) <> "%"
-displayTopPosition (Relative r) = toLower $ gShow r
+renderLeftRelativePosition :: LeftRelativePosition -> Position LeftRelativePosition
+renderLeftRelativePosition = unsafeCoerce <<< show
 
 type Echarts =
   { className   :: Maybe String,
@@ -40,7 +60,7 @@ type Echarts =
   }
 
 type Option =
-  { title    :: Maybe Title
+  { title    :: Title
   , legend   :: Maybe Legend
   , tooltip  :: Tooltip
   , grid     :: Grid
@@ -52,30 +72,30 @@ type Option =
 
 type Title =
   {
-    id :: Maybe String
+    id :: String -- None by default
   , show :: Boolean -- default True
-  , text :: Maybe String -- default ''
-  , link :: Maybe String -- default ''
+  , text :: String -- default ''
+  , link :: String -- default ''
   , target :: String -- default 'blank'
-  , textStyle :: TextStyle
+  , textStyle :: Maybe TextStyle
   , subtext :: String -- default ''
   , sublink :: String -- default ''
   , subtarget :: String -- default 'blank'
-  , subtextStyle :: SubtextStyle
+  , subtextStyle :: Maybe SubtextStyle
   , padding :: Number -- default '5'
   , itemGap :: Number -- default '10'
   , zlevel :: Number -- default '0'
   , z :: Number -- default '2'
-  , left :: Number -- default 'auto'
-  , top :: Number -- default 'auto'
-  , right :: Number -- default 'auto'
-  , bottom :: Number -- default 'auto'
-  , backgroundColor :: Color -- default 'transparent''
-  , borderColor :: Color -- default '#ccc'
+  , left :: Position LeftRelativePosition -- default 'auto'
+  , top :: Position TopRelativePosition -- default 'auto'
+  , right :: Position Unit -- default 'auto'
+  , bottom :: Position Unit -- default 'auto'
+  , backgroundColor :: CSSColor -- default 'transparent''
+  , borderColor :: CSSColor -- default '#ccc'
   , borderWidth :: Number -- default '1'
-  , borderRadius :: Number -- default 0; data NumberOrArray = Number | Array Number
+  , borderRadius :: NumberOrArray -- default 0; data NumberOrArray = Number | Array Number
   , shadowBlur :: Number
-  , shadowColor :: Color
+  , shadowColor :: CSSColor
   , shadowOffsetX :: Number
   , shadowOffsetY :: Number
   }