From f962c84b68a9b3fb5eb5407a485b92c4bf3a9403 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20Delano=C3=AB?= <devel+git@delanoe.org>
Date: Tue, 11 Sep 2018 16:35:19 +0200
Subject: [PATCH] [Charts] factoring Trees.
---
.../Components/Charts/Options/ECharts.purs | 6 +-
.../Components/Charts/Options/Series.purs | 136 ++++++++++--------
.../Pages/Corpus/Doc/Facets/Dashboard.purs | 9 +-
3 files changed, 80 insertions(+), 71 deletions(-)
diff --git a/src/Gargantext/Components/Charts/Options/ECharts.purs b/src/Gargantext/Components/Charts/Options/ECharts.purs
index 2afd6651..d0fae340 100644
--- a/src/Gargantext/Components/Charts/Options/ECharts.purs
+++ b/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
diff --git a/src/Gargantext/Components/Charts/Options/Series.purs b/src/Gargantext/Components/Charts/Options/Series.purs
index 03b8f8b9..0e559942 100644
--- a/src/Gargantext/Components/Charts/Options/Series.purs
+++ b/src/Gargantext/Components/Charts/Options/Series.purs
@@ -11,45 +11,45 @@ newtype SeriesType = SeriesType String
type SeriesName = String
-data SeriesShape = Line
- | Bar | PictorialBar
- | Pie
- | Scatter | EffectScatter
- | Radar
- | Tree | Radial | TreeMap
- | Sunburst
- | Boxplot
- | Candlestick
- | Heatmap
- | Map
- | Parallel
- | Lines
- | Graph
- | Sankey
- | Funnel
- | Gauge
- | ThemeRiver
-
-instance showSeriesShape :: Show SeriesShape where
+
+data Chart = Line
+ | Bar | PictorialBar
+ | Pie
+ | Scatter | EffectScatter
+ | Radar
+ | Trees
+ | Sunburst
+ | Boxplot
+ | Candlestick
+ | Heatmap
+ | Map
+ | Parallel
+ | Lines
+ | Graph
+ | Sankey
+ | Funnel
+ | Gauge
+ | ThemeRiver
+-- Trees
+
+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
@@ -67,9 +67,8 @@ type D2 =
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
+toSeries (SerieSankey a) = unsafeCoerce a
+toSeries (SerieTree a) = unsafeCoerce a
-- | Sankey Chart
-- https://ecomfe.github.io/echarts-examples/public/editor.html?c=sankey-simple
@@ -86,34 +85,60 @@ type Link = { source :: String
}
mkSankey :: Array Node -> Array Link -> Serie
-mkSankey ns ls = SerieSankey {"type" : seriesType Sankey
- , layout : "none"
- , "data" : ns
- , "links" : ls
- }
+mkSankey ns ls = SerieSankey { "type" : seriesType Sankey
+ , layout : "none"
+ , "data" : ns
+ , "links" : ls
+ }
--- | TreeMap Chart
--- https://ecomfe.github.io/echarts-examples/public/editor.html?c=treemap-simple
+-- | * 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
-mkTreeMap :: Array TreeData -> Serie
-mkTreeMap ts = SerieTreeMap { "type" : seriesType TreeMap
- , "data" : map toTree ts
- }
+-- 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
-type TreeMap = { "type" :: SeriesType
- , "data" :: Array TreeData
- }
+type Tree = { "type" :: SeriesType
+ , "data" :: Array TreeData
+ , layout :: String
+ }
+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
- , value : x.value
- , children : (map toTree x.children)
- }
-
+toJsTree :: TreeData -> TreeData
+toJsTree (TreeLeaf x) = unsafeCoerce x
+toJsTree (TreeNode x) = unsafeCoerce { name : x.name
+ , value : x.value
+ , children : (map toJsTree x.children)
+ }
type TreeNode = { name :: String
, value :: Number
@@ -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
diff --git a/src/Gargantext/Pages/Corpus/Doc/Facets/Dashboard.purs b/src/Gargantext/Pages/Corpus/Doc/Facets/Dashboard.purs
index 87d24d26..4899ebda 100644
--- a/src/Gargantext/Pages/Corpus/Doc/Facets/Dashboard.purs
+++ b/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
--
2.21.0