Commit 69858567 authored by Alexandre Delanoë's avatar Alexandre Delanoë

[Chart] Radial tree.

parent 3a403771
...@@ -23,9 +23,6 @@ foreign import eChartsClass :: R.ReactClass Echarts ...@@ -23,9 +23,6 @@ foreign import eChartsClass :: R.ReactClass Echarts
chart :: Options -> R.ReactElement chart :: Options -> R.ReactElement
chart = echarts <<< chartWith <<< opts chart = echarts <<< chartWith <<< opts
chart' :: Options -> R.ReactElement
chart' = echarts <<< chartWith <<< opts'
chartWith :: Option -> Echarts chartWith :: Option -> Echarts
chartWith opts = { className : Nothing chartWith opts = { className : Nothing
...@@ -215,32 +212,6 @@ opts (Options { mainTitle : mainTitle ...@@ -215,32 +212,6 @@ opts (Options { mainTitle : mainTitle
} }
opts' :: Options -> Option
opts' (Options { mainTitle : mainTitle
, subTitle : subTitle
, xAxis : xs
, yAxis : ss
, yAxisFormat : (YAxisFormat { position : position
, visible : visible
})
, addZoom : addZoom}) =
{ title: title mainTitle subTitle
, legend : legend
, tooltip: { trigger: "axis"
, formatter: Nothing
}
, grid : {containLabel: false}
, xAxis : unsafeCoerce {}
, series : map toSeries $ ss
, yAxis : unsafeCoerce {}
, dataZoom: if addZoom then [zoom Slider, zoom Inside] else []
, children : unsafeCoerce []
}
data Zoom = Slider | Inside data Zoom = Slider | Inside
instance showZoom :: Show Zoom where instance showZoom :: Show Zoom where
......
...@@ -16,7 +16,7 @@ data SeriesShape = Line ...@@ -16,7 +16,7 @@ data SeriesShape = Line
| Pie | Pie
| Scatter | EffectScatter | Scatter | EffectScatter
| Radar | Radar
| Tree | TreeMap | Tree | Radial | TreeMap
| Sunburst | Sunburst
| Boxplot | Boxplot
| Candlestick | Candlestick
...@@ -37,9 +37,10 @@ instance showSeriesShape :: Show SeriesShape where ...@@ -37,9 +37,10 @@ instance showSeriesShape :: Show SeriesShape where
show Heatmap = "heatmap" show Heatmap = "heatmap"
show Line = "line" show Line = "line"
show Pie = "pie" show Pie = "pie"
show Tree = "tree" -- ^ https://ecomfe.github.io/echarts-examples/public/editor.html?c=tree-radial
show Sankey = "sankey" show Sankey = "sankey"
show TreeMap = "treemap" show TreeMap = "treemap"
show Scatter = "scatter" -- ^ https://ecomfe.github.io/echarts-examples/public/editor.html?c=scatter-simple show Scatter = "scatter" -- ^ https://ecomfe.github.io/echarts-examples/public/editor.html?c=scatter-simple
show Sunburst = "sunburst" show Sunburst = "sunburst"
show _ = "not implemented yet: should throw error here" show _ = "not implemented yet: should throw error here"
...@@ -48,7 +49,7 @@ seriesType = SeriesType <<< show ...@@ -48,7 +49,7 @@ seriesType = SeriesType <<< show
type Series = {} type Series = {}
data Serie = SeriesD1 D1 | SeriesD2 D2 | SerieSankey Sankey | SerieTreeMap TreeMap data Serie = SeriesD1 D1 | SeriesD2 D2 | SerieSankey Sankey | SerieTreeMap TreeMap | SerieTree Tree
type D1 = type D1 =
{ name :: String { name :: String
...@@ -68,6 +69,7 @@ toSeries (SeriesD1 a) = unsafeCoerce a ...@@ -68,6 +69,7 @@ toSeries (SeriesD1 a) = unsafeCoerce a
toSeries (SeriesD2 a) = unsafeCoerce a toSeries (SeriesD2 a) = unsafeCoerce a
toSeries (SerieSankey a) = unsafeCoerce a toSeries (SerieSankey a) = unsafeCoerce a
toSeries (SerieTreeMap a) = unsafeCoerce a toSeries (SerieTreeMap a) = unsafeCoerce a
toSeries (SerieTree a) = unsafeCoerce a
-- | Sankey Chart -- | Sankey Chart
-- https://ecomfe.github.io/echarts-examples/public/editor.html?c=sankey-simple -- https://ecomfe.github.io/echarts-examples/public/editor.html?c=sankey-simple
...@@ -93,47 +95,58 @@ mkSankey ns ls = SerieSankey {"type" : seriesType Sankey ...@@ -93,47 +95,58 @@ mkSankey ns ls = SerieSankey {"type" : seriesType Sankey
-- | TreeMap Chart -- | TreeMap Chart
-- https://ecomfe.github.io/echarts-examples/public/editor.html?c=treemap-simple -- https://ecomfe.github.io/echarts-examples/public/editor.html?c=treemap-simple
mkTreeMap :: Array TreeMapTree -> Serie mkTreeMap :: Array TreeData -> Serie
mkTreeMap ts = SerieTreeMap { "type" : seriesType TreeMap mkTreeMap ts = SerieTreeMap { "type" : seriesType TreeMap
, "data" : map toTreeMap ts , "data" : map toTree ts
} }
type TreeMap = { "type" :: SeriesType type TreeMap = { "type" :: SeriesType
, "data" :: Array TreeMapTree , "data" :: Array TreeData
} }
data TreeMapTree = TreeMapLeaf TreeMapLeaf data TreeData = TreeLeaf TreeLeaf
| TreeMapNode TreeMapNode | TreeNode TreeNode
toTreeMap :: TreeMapTree -> TreeMapTree toTree :: TreeData -> TreeData
toTreeMap (TreeMapLeaf x) = unsafeCoerce x toTree (TreeLeaf x) = unsafeCoerce x
toTreeMap (TreeMapNode x) = unsafeCoerce { name : x.name toTree (TreeNode x) = unsafeCoerce { name : x.name
, value : x.value , value : x.value
, children : (map toTreeMap x.children) , children : (map toTree x.children)
} }
type TreeMapNode = { name :: String type TreeNode = { name :: String
, value :: Number , value :: Number
, children :: Array TreeMapTree , children :: Array TreeData
} }
type TreeMapLeaf = { name :: String type TreeLeaf = { name :: String
, value :: Number , value :: Number
} }
treeMapNode :: String -> Number -> Array TreeMapTree -> TreeMapTree treeNode :: String -> Number -> Array TreeData -> TreeData
treeMapNode n v ts = TreeMapNode {name : n, value:v, children:ts} treeNode n v ts = TreeNode {name : n, value:v, children:ts}
treeMapLeaf :: String -> Number -> TreeMapTree treeLeaf :: String -> Number -> TreeData
treeMapLeaf n v = TreeMapLeaf { name : n, value : v} treeLeaf n v = TreeLeaf { name : n, value : v}
-- https://ecomfe.github.io/echarts-examples/public/data/asset/data/flare.json -- | Tree
-- https://ecomfe.github.io/echarts-examples/public/editor.html?c=tree-radial -- 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/data/asset/data/life-expectancy-table.json
-- https://ecomfe.github.io/echarts-examples/public/editor.html?c=scatter3D-dataset&gl=1 -- https://ecomfe.github.io/echarts-examples/public/editor.html?c=scatter3D-dataset&gl=1
...@@ -35,7 +35,8 @@ render dispatch _ state _ = [ ...@@ -35,7 +35,8 @@ render dispatch _ state _ = [
) )
, chart scatterEx , chart scatterEx
, chart sankeyEx , chart sankeyEx
, chart' treeMapEx , chart treeMapEx
, chart treeEx
] ]
where where
myData = [SeriesD1 $ series Bar "Bar Data" [ {name: "val1", value: 50.0} myData = [SeriesD1 $ series Bar "Bar Data" [ {name: "val1", value: 50.0}
...@@ -140,20 +141,68 @@ sankeyEx = Options { mainTitle : "" ...@@ -140,20 +141,68 @@ sankeyEx = Options { mainTitle : ""
} }
treeMapData = [ mkTreeMap [ treeMapNode "nodeA" 10.0 [ treeMapLeaf "nodeAa" 4.0 treeData :: Array TreeData
, treeMapLeaf "nodeAb" 5.0 treeData = [ treeNode "nodeA" 10.0 [ treeLeaf "nodeAa" 4.0
, treeMapLeaf "nodeAc" 1.0 , treeLeaf "nodeAb" 5.0
] , treeNode "nodeAc" 1.0 [ treeLeaf "nodeAca" 0.5
, treeMapNode "nodeB" 20.0 [ treeMapNode "nodeBb" 20.0 [treeMapLeaf "nodeBb1" 20.0] , treeLeaf "nodeAcb" 0.5
] ]
]
] ]
, treeNode "nodeB" 20.0 [ treeNode "nodeBa" 20.0 [ treeLeaf "nodeBa1" 20.0]]
, treeNode "nodeC" 20.0 [ treeNode "nodeCa" 20.0 [ treeLeaf "nodeCa1" 10.0
, treeLeaf "nodeCa2" 10.0
]
]
, treeNode "nodeD" 20.0 [ treeNode "nodeDa" 20.0 [ treeLeaf "nodeDa1" 2.0
, treeLeaf "nodeDa2" 2.0
, treeLeaf "nodeDa3" 2.0
, treeLeaf "nodeDa4" 2.0
, treeLeaf "nodeDa5" 2.0
, treeLeaf "nodeDa6" 2.0
, treeLeaf "nodeDa7" 2.0
, treeLeaf "nodeDa8" 2.0
, treeLeaf "nodeDa9" 2.0
, treeLeaf "nodeDa10" 2.0
]
]
]
treeData' :: Array TreeData
treeData' = [ treeNode "nodeA" 10.0 [ treeLeaf "nodeAa" 4.0
, treeLeaf "nodeAb" 5.0
, treeNode "nodeAc" 1.0 [ treeLeaf "nodeAca" 0.5
, treeLeaf "nodeAcb" 0.5
]
, treeNode "nodeB" 20.0 [ treeNode "nodeBa" 20.0 [ treeLeaf "nodeBa1" 20.0]]
, treeNode "nodeC" 20.0 [ treeNode "nodeBa" 20.0 [ treeLeaf "nodeBa1" 20.0]]
, treeNode "nodeD" 20.0 [ treeNode "nodeBa" 20.0 [ treeLeaf "nodeBa1" 20.0]]
, treeNode "nodeE" 20.0 [ treeNode "nodeBa" 20.0 [ treeLeaf "nodeBa1" 20.0]]
, treeNode "nodeF" 20.0 [ treeNode "nodeBa" 20.0 [ treeLeaf "nodeBa1" 20.0]]
, treeNode "nodeG" 20.0 [ treeNode "nodeBa" 20.0 [ treeLeaf "nodeBa1" 20.0]]
, treeNode "nodeH" 20.0 [ treeNode "nodeBa" 20.0 [ treeLeaf "nodeBa1" 20.0]]
]
]
treeMapEx :: Options treeMapEx :: Options
treeMapEx = Options { mainTitle : "" treeMapEx = Options { mainTitle : ""
, subTitle : "" , subTitle : ""
, xAxis : xAxis [] , xAxis : xAxis []
, yAxis : treeMapData , yAxis : [mkTreeMap treeData]
, yAxisFormat : (YAxisFormat { position : ""
, visible : false
})
, addZoom : false
}
treeEx :: Options
treeEx = Options { mainTitle : ""
, subTitle : ""
, xAxis : xAxis []
, yAxis : [mkTree treeData']
, yAxisFormat : (YAxisFormat { position : "" , yAxisFormat : (YAxisFormat { position : ""
, visible : false , visible : false
}) })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment