refactor Data and TextStyle

src/Charts/Color.purs

@@ -2,7 +2,7 @@ module Charts.Color
        (
          ChartColor(),
          chartColor
-       )where
+       ) where
 
 import Prelude ((<<<))
 import CSS (Color, toHexString)

src/Charts/ECharts.purs

 module Charts.ECharts where
 
-import CSS (black, blue, white, yellow)
+
+import CSS (black, blue, italic, violet, white, yellow)
 import CSS.Common (normal)
+import Charts.Data
 import Charts.Color (chartColor)
-import Charts.Font (chartFontStyle, chartFontWeight)
-import Charts.Legend (legendType, LegendType, PlainOrScroll(..))
+import Charts.Font (IconOptions(..), Shape(..), TextStyle, chartFontStyle, chartFontWeight, icon)
+import Charts.Legend (legendType, LegendMode(..), PlainOrScroll(..), selectedMode, Orientation(..), orient)
 import Charts.Position (Align(..), LeftRelativePosition(..), TopRelativePosition(..), numberPosition, percentPosition, relativePosition)
-import Charts.Type (Data, DataZoom, Echarts, Legend, Option, Series, TextStyle, Title, Tooltip, XAxis, YAxis)
+import Charts.Type (DataZoom, Echarts, Legend, Option, Series, Title, Tooltip, XAxis, YAxis)
 import Data.Either (Either(..))
 import Data.Maybe (Maybe(..))
 import Prelude (($))
@@ -18,41 +20,42 @@ foreign import eChartsClass :: R.ReactClass Echarts
 echarts :: forall eff. Echarts -> R.ReactElement
 echarts chart = R.createElementDynamic eChartsClass chart []
 
-legend' :: Legend
-legend' =
+legend :: Legend
+legend =
   {
-    id: ""
+    id: "Muda"
    ,"type": legendType Plain
    , show: true
-   , zlevel: 40.0
-   , z: 40.0
-   , left: percentPosition 40.0
-   , top:  percentPosition 40.0
-   , right:  percentPosition 40.0
-   , bottom:  percentPosition 40.0
-   , width: percentPosition 40.0
-   , height: percentPosition 40.0
-   , orient: Nothing
-   , align: Nothing
-   , padding: Nothing
-   , itemGap: Nothing
-   , itemWidth: Nothing
-   , itemHeight: Nothing
+   , zlevel: 0.0
+   , z: 2.0
+   , left: relativePosition Auto
+   , top: relativePosition Auto
+   , right: relativePosition Auto
+   , bottom: relativePosition Auto
+   , width: relativePosition Auto
+   , height: relativePosition Auto
+   , orient: orient Horizontal
+   , align: relativePosition Auto
+   , padding: 5.0
+   , itemGap: 10.0
+   , itemWidth: 25.0
+   , itemHeight: 14.0
    , formatter: Nothing
-   , selectedMode: Nothing
-   , inactiveColor: Nothing
+   , selectedMode: selectedMode $ Bool true
+   , inactiveColor: chartColor violet
    , selected: Nothing
-   , "data": Nothing
+   , textStyle: textStyle
+   , "data": [data1]
   }
 
-data1 :: Data
-data1 = {name: "Map terms coverage", icon: Nothing, textStyle: Nothing}
+data1 :: DataN
+data1 = {name: "Map terms coverage", icon: icon $ Shape Circle, textStyle: textStyle'}
 
-data2 :: Data
-data2 = {name: "Favorites", icon: Nothing, textStyle: Nothing}
+data2 :: DataN
+data2 = {name: "Favorites", icon: icon $ Shape Circle, textStyle: textStyle'}
 
-data3 :: Data
-data3 = {name: "All", icon: Nothing, textStyle: Nothing}
+data3 :: DataN
+data3 = {name: "Test", icon: icon $ Shape Diamond, textStyle: textStyle'}
 
 xAxis' :: XAxis
 xAxis' =
@@ -62,14 +65,14 @@ xAxis' =
  , axisTick: {alignWithLabel: true}
  }
 
-xData1 :: Data
-xData1 = {name: "Jan", icon: Nothing, textStyle: Nothing}
+xData1 :: DataV
+xData1 = {value: "Jan", textStyle: textStyle'}
 
-xData2 :: Data
-xData2 = {name: "Feb", icon: Nothing, textStyle: Nothing}
+xData2 :: DataV
+xData2 = {value: "Feb", textStyle: textStyle'}
 
-xData3 :: Data
-xData3 = {name: "Mar", icon: Nothing, textStyle: Nothing}
+xData3 :: DataV
+xData3 = {value: "Mar", textStyle: textStyle'}
 
 yData1 :: YAxis
 yData1 =
@@ -101,7 +104,7 @@ opt :: Option
 opt =
   {
     title: title
-    ,legend: Nothing
+    ,legend: legend
     ,tooltip: tooltip'
     ,grid: {containLabel: true}
     ,xAxis: xAxis'
@@ -113,7 +116,7 @@ opt =
 title :: Title
 title =
   {
-    id: ""
+    id: "Muda"
    ,show: true
    ,text: "MudaTitre rpz les pyramides"
    ,link: "https://google.com"
@@ -127,8 +130,8 @@ title =
    ,itemGap: 0.0
    ,zlevel: 2.0
    ,z: 2.0
-   ,left: relativePosition (Relative Center)
-   ,top: relativePosition (Relative Middle)
+   ,left: relativePosition (Relative LeftPos)
+   ,top: relativePosition (Relative Top)
    ,right: numberPosition 60.0
    ,bottom: percentPosition 40.0
    ,backgroundColor: chartColor black
@@ -145,7 +148,7 @@ textStyle2 :: TextStyle
 textStyle2 =
   {
     color: chartColor yellow
-    ,fontStyle: chartFontStyle normal
+    ,fontStyle: chartFontStyle italic
     ,fontWeight: chartFontWeight normal
     ,fontFamily: "sans-serif"
     ,fontSize: 12
@@ -162,6 +165,26 @@ textStyle2 =
     ,textShadowOffsetY: 0.0
   }
 
+textStyle' :: TextStyle
+textStyle' =
+  {
+    color: chartColor violet
+    ,fontStyle: chartFontStyle normal
+    ,fontWeight: chartFontWeight normal
+    ,fontFamily: "sans-serif"
+    ,fontSize: 12
+    ,align: relativePosition $ Relative LeftPos
+    ,verticalAlign: relativePosition $ Relative Top
+    ,lineHeight: percentPosition 0.0
+    ,width: percentPosition 100.0
+    ,height: percentPosition 100.0
+    ,textBorderColor: chartColor black
+    ,textBorderWidth: 5.0
+    ,textShadowColor: chartColor black
+    ,textShadowBlur: chartColor black
+    ,textShadowOffsetX: 0.0
+    ,textShadowOffsetY: 0.0
+  }
 
 textStyle :: TextStyle
 textStyle =

src/Charts/Font.purs

 module Charts.Font
        (
+         TextStyle,
          ChartFontStyle(),
          chartFontStyle,
          ChartFontWeight(),
-         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
 
@@ -15,6 +46,7 @@ chartFontStyle (FontStyle (Value (Plain "italic"))) = ChartFontStyle "italic"
 chartFontStyle (FontStyle (Value (Plain "oblique"))) = ChartFontStyle "oblique"
 chartFontStyle _ = ChartFontStyle "normal"
 
+
 newtype ChartFontWeight = ChartFontWeight String
 
 chartFontWeight :: FontWeight -> ChartFontWeight
@@ -22,3 +54,17 @@ 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(),
+         LegendType(..),
          PlainOrScroll(..),
          legendType,
          Orient(),
          Orientation(..),
-         orient
+         orient,
+         SelectedMode(),
+         LegendMode(..),
+         selectedMode
        ) where
 
 import Data.Generic (class Generic, gShow)
 import Data.String (toLower)
-import Prelude ((<<<))
+import Prelude (class Show, show, (<<<))
+import Unsafe.Coerce (unsafeCoerce)
 
 newtype LegendType = LegendType String
 
 data PlainOrScroll = Plain | Scroll
-derive instance genericPlainOrScroll :: Generic PlainOrScroll
+instance showPlainOrScroll :: Show PlainOrScroll where
+  show (Plain) = "plain"
+  show (Scroll) = "scroll"
 
 legendType :: PlainOrScroll -> LegendType
-legendType = LegendType <<< toLower <<< gShow
+legendType = LegendType <<< toLower <<< show
 
 
 newtype Orient = Orient String
@@ -28,3 +34,15 @@ 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

@@ -8,6 +8,7 @@ module Charts.Position
          TopRelativePosition(..),
          LeftRelativePosition(..)
        ) where
+
 import Prelude (class Show, show, ($), (<>))
 import Unsafe.Coerce (unsafeCoerce)
 

src/Charts/Type.purs

@@ -3,8 +3,10 @@ module Charts.Type where
 import Charts.Font
 
 import CSS (Color)
-import Charts.Color (ChartColor)
-import Charts.Legend (LegendType)
+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)
@@ -31,7 +33,7 @@ type Echarts =
 
 type Option =
   { title    :: Title
-  , legend   :: Maybe Legend
+  , legend   :: Legend
   , tooltip  :: Tooltip
   , grid     :: Grid
   , xAxis    :: XAxis
@@ -103,42 +105,18 @@ type Legend =
   , bottom :: Position Unit
   , width :: Position Unit
   , height :: Position Unit
-  , orient :: Maybe String
-  , align :: Maybe String
-  , padding :: Maybe Number
-  , itemGap :: Maybe Number
-  , itemWidth :: Maybe Number
-  , itemHeight :: Maybe Number
+  , orient :: Orient
+  , align :: Position LeftRelativePosition
+  , padding :: Number
+  , itemGap :: Number
+  , itemWidth :: Number
+  , itemHeight :: Number
   , formatter :: Maybe String
-  , selectedMode :: Maybe Boolean
-  , inactiveColor :: Maybe Color
+  , selectedMode :: SelectedMode
+  , inactiveColor :: ChartColor
   , selected :: Maybe String -- object
-  , "data" :: Maybe (Array Data)
-  }
-
-type Data =
-  { name      :: String
-  , icon      :: Maybe String
-  , textStyle :: Maybe {}
-  }
-
-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
+  , textStyle :: TextStyle
+  , "data" :: Array DataN
   }
 
 type Tooltip =
@@ -147,7 +125,7 @@ type Tooltip =
   }
 
 type XAxis =
-  { "data"   :: Array Data
+  { "data"   :: Array DataV
   , "type"   :: String
   , axisTick :: AxisTick
   }