[Charts] factoring Trees.

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

@@ -11,7 +11,7 @@ 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, SeriesShape(..), seriesType, D1, D2)
+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 React (unsafeCreateElementDynamic)
 import React as R
@@ -157,13 +157,13 @@ tooltip' =
   }
 
 
-series :: SeriesShape -> SeriesName -> Array DataS -> D1
+series :: Chart -> SeriesName -> Array DataS -> D1
 series sh name ss =  { name: name
   , "type": seriesType sh
   , "data": ss
   }
 
-seriesD2 :: SeriesShape -> Number -> Array (Array Number) -> D2
+seriesD2 :: Chart -> Number -> Array (Array Number) -> D2
 seriesD2 sh size ds = { "symbolSize" : size
                       , "data"       : ds
                       , "type"       : seriesType sh

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

@@ -11,12 +11,13 @@ newtype SeriesType = SeriesType String
 
 type SeriesName = String
 
-data SeriesShape = Line
+
+data Chart = Line
            | Bar | PictorialBar
            | Pie
            | Scatter | EffectScatter
            | Radar
-                 | Tree | Radial | TreeMap
+           | Trees
            | Sunburst
            | Boxplot
            | Candlestick
@@ -29,27 +30,26 @@ data SeriesShape = Line
            | Funnel
            | Gauge
            | ThemeRiver
+-- Trees
 
-instance showSeriesShape :: Show SeriesShape where
+instance showChart :: Show Chart where
   show Bar      = "bar"
   show EffectScatter = "effectScatter" -- ^ https://ecomfe.github.io/echarts-examples/public/editor.html?c=scatter-effect
   show Funnel   = "funnel"
   show Heatmap  = "heatmap"
   show Line     = "line"
   show Pie      = "pie"
-  show Tree     = "tree"               -- ^ https://ecomfe.github.io/echarts-examples/public/editor.html?c=tree-radial
   show Sankey   = "sankey"
-  show TreeMap  = "treemap"
   show Scatter  = "scatter"            -- ^ https://ecomfe.github.io/echarts-examples/public/editor.html?c=scatter-simple
   show Sunburst = "sunburst"
   show _        = "not implemented yet: should throw error here"
 
-seriesType :: SeriesShape -> SeriesType
+seriesType :: Chart -> SeriesType
 seriesType = SeriesType <<< show
 
 
 type Series = {}
-data Serie = SeriesD1 D1 | SeriesD2 D2 | SerieSankey Sankey | SerieTreeMap TreeMap | SerieTree Tree
+data Serie = SeriesD1 D1 | SeriesD2 D2 | SerieSankey Sankey | SerieTree Tree
 
 type D1 =
   { name   :: String
@@ -68,7 +68,6 @@ toSeries :: Serie -> Series
 toSeries (SeriesD1 a)    = unsafeCoerce a
 toSeries (SeriesD2 a)    = unsafeCoerce a
 toSeries (SerieSankey a) = unsafeCoerce a
-toSeries (SerieTreeMap a) = unsafeCoerce a
 toSeries (SerieTree   a) = unsafeCoerce a
 
 -- | Sankey Chart
@@ -86,35 +85,61 @@ type Link = { source :: String
             }
 
 mkSankey :: Array Node -> Array Link -> Serie
-mkSankey ns ls = SerieSankey {"type"   : seriesType Sankey
+mkSankey ns ls = SerieSankey { "type"  : seriesType Sankey
                              , layout  : "none"
                              , "data"  : ns
                              , "links" : ls
                              }
 
--- | TreeMap Chart
+-- | * Trees Chart
+-- All these Trees are hierarchical Trees structure (or diagram)
+-- https://en.wikipedia.org/wiki/Tree_structure
+
+-- Tree types
+data Trees = TreeLine | TreeRadial | TreeMap
+
+instance showTrees :: Show Trees where
+  show TreeLine    = "tree"           -- ^ https://ecomfe.github.io/echarts-examples/public/editor.html?c=tree-radial
+  show TreeRadial  = "tree"           -- ^ https://ecomfe.github.io/echarts-examples/public/editor.html?c=scatter-simple
+  show TreeMap     = "treemap"        -- ^ https://ecomfe.github.io/echarts-examples/public/editor.html?c=treemap-simple
+
+
+-- TreeLine is a 1-Dimension horizontal hierchical Tree
+
+-- TreeRadial is 1-Dimension radial (as circle) Tree with no surface meaning
+-- https://en.wikipedia.org/wiki/Radial_tree
+-- https://ecomfe.github.io/echarts-examples/public/editor.html?c=tree-radial
+
+-- TreeMap is a is 2-Dimension Tree with surface meaning
+-- TreeMap example implementation:
 -- https://ecomfe.github.io/echarts-examples/public/editor.html?c=treemap-simple
 
-mkTreeMap :: Array TreeData -> Serie
-mkTreeMap ts = SerieTreeMap { "type" : seriesType TreeMap
-                            , "data" : map toTree ts
+type Tree = { "type" :: SeriesType
+            , "data" :: Array TreeData
+            , layout :: String
             }
 
-type TreeMap = { "type" :: SeriesType
-               , "data" :: Array TreeData
+mkTree :: Trees -> Array TreeData -> Serie
+mkTree t ts = SerieTree { "type" : SeriesType (show t)
+                        , "data" : map toJsTree ts
+                        , layout : layout
                         }
+              where
+                layout = case t of
+                           TreeRadial -> "radial"
+                           _          -> "none"
 
+-- ** Data Structure of the Trees
 data TreeData = TreeLeaf TreeLeaf
               | TreeNode TreeNode
 
-toTree :: TreeData -> TreeData
-toTree (TreeLeaf x) = unsafeCoerce x
-toTree (TreeNode x) = unsafeCoerce { name : x.name
+toJsTree :: TreeData -> TreeData
+toJsTree (TreeLeaf x) = unsafeCoerce x
+toJsTree (TreeNode x) = unsafeCoerce { name : x.name
                                      , value : x.value
-                                   , children : (map toTree x.children)
+                                     , children : (map toJsTree x.children)
                                      }
 
-
 type TreeNode =  { name     :: String
                  , value    :: Number
                  , children :: Array TreeData
@@ -131,21 +156,6 @@ treeLeaf :: String -> Number -> TreeData
 treeLeaf n v = TreeLeaf { name : n, value : v}
 
 
--- | Tree
--- https://ecomfe.github.io/echarts-examples/public/editor.html?c=tree-radial
-
-type Tree = { "type" :: SeriesType
-            , "data" :: Array TreeData
-            , layout :: String
-            }
-
-mkTree :: Array TreeData -> Serie
-mkTree ts = SerieTree { "type" : seriesType Tree
-                 , "data" : map toTree ts
-                 , layout : "radial"
-                 }
-
-
 -- | TODO
 -- https://ecomfe.github.io/echarts-examples/public/data/asset/data/life-expectancy-table.json
 -- https://ecomfe.github.io/echarts-examples/public/editor.html?c=scatter3D-dataset&gl=1

src/Gargantext/Pages/Corpus/Doc/Facets/Dashboard.purs

@@ -190,7 +190,7 @@ treeMapEx :: Options
 treeMapEx = Options { mainTitle : ""
                     , subTitle  : ""
                     , xAxis     : xAxis []
-                    , yAxis     : [mkTreeMap treeData]
+                    , yAxis     : [mkTree TreeMap treeData]
                     , yAxisFormat : (YAxisFormat { position : ""
                                                     , visible  : false
                                                   })
@@ -199,10 +199,10 @@ treeMapEx = Options { mainTitle : ""
 
 
 treeEx :: Options
-treeEx = Options { mainTitle : ""
-                    , subTitle  : ""
+treeEx = Options { mainTitle : "Tree"
+                    , subTitle  : "Radial"
                     , xAxis     : xAxis []
-                    , yAxis     : [mkTree treeData']
+                    , yAxis     : [mkTree TreeRadial treeData']
                     , yAxisFormat : (YAxisFormat { position : ""
                                                     , visible  : false
                                                   })
@@ -210,6 +210,5 @@ treeEx = Options { mainTitle : ""
                      }
 
 
-
 layoutDashboard :: forall props. Spec State props Action
 layoutDashboard = simpleSpec performAction render