Dashboard.purs 11.6 KB
Newer Older
1
module Gargantext.Components.Nodes.Corpus.Dashboard where
2

3 4
import Data.Array as A
import Data.Maybe (Maybe(..), fromMaybe)
5
import Data.Tuple (fst)
6
import Data.Tuple.Nested ((/\))
7
import DOM.Simple.Console (log2)
8
import Effect (Effect)
9 10
import Effect.Aff (launchAff_)
import Effect.Class (liftEffect)
11 12
import Reactix as R
import Reactix.DOM.HTML as H
13 14 15 16

import Gargantext.Prelude

import Gargantext.Components.Node (NodePoly(..))
17
import Gargantext.Components.Nodes.Corpus.Chart.Predefined as P
18
import Gargantext.Components.Nodes.Dashboard.Types as DT
19
import Gargantext.Hooks.Loader (useLoader)
20
import Gargantext.Utils.Reactix as R2
21
import Gargantext.Sessions (Session)
22
import Gargantext.Types (NodeID)
23 24 25

type Props =
  (
26
    nodeId :: NodeID
27 28
  , session :: Session
  )
29

30
dashboardLayout :: Record Props -> R.Element
31 32
dashboardLayout props = R.createElement dashboardLayoutCpt props []

33
dashboardLayoutCpt :: R.Component Props
34
dashboardLayoutCpt = R.hooksComponent "G.C.N.C.D.dashboardLayout" cpt
35
  where
36
    cpt params@{nodeId, session} _ = do
37 38
      reload <- R.useState' 0

39 40 41
      useLoader {nodeId, reload: fst reload, session} DT.loadDashboardWithReload $
        \dashboardData@{hyperdata: DT.Hyperdata h, parentId} -> do
          let { charts } = h
42
          dashboardLayoutLoaded { charts
43 44
                                , corpusId: parentId
                                , defaultListId: 0
45 46
                                , key: show $ fst reload
                                , nodeId
47
                                , onChange: onChange nodeId reload (DT.Hyperdata h)
48 49 50
                                , session }

      where
51 52
        onChange :: NodeID -> R.State Int -> DT.Hyperdata -> Array P.PredefinedChart -> Effect Unit
        onChange nodeId (_ /\ setReload) (DT.Hyperdata h) charts = do
53
          launchAff_ do
54 55 56 57
            DT.saveDashboard {
                hyperdata: DT.Hyperdata $ h { charts = charts }
              , nodeId
              , session }
58
            liftEffect $ setReload $ (+) 1
59 60 61

type LoadedProps =
  (
62 63
    charts :: Array P.PredefinedChart
  , corpusId :: NodeID
64
  , defaultListId :: Int
65 66
  , key :: String
  , onChange :: Array P.PredefinedChart -> Effect Unit
67 68 69 70 71 72 73
  | Props
  )

dashboardLayoutLoaded :: Record LoadedProps -> R.Element
dashboardLayoutLoaded props = R.createElement dashboardLayoutLoadedCpt props []

dashboardLayoutLoadedCpt :: R.Component LoadedProps
74
dashboardLayoutLoadedCpt = R.hooksComponent "G.C.N.C.D.dashboardLayoutLoaded" cpt
75
  where
76
    cpt props@{ charts, corpusId, defaultListId, onChange, session } _ = do
77 78 79
      pure $
        H.div {} ([
            H.h1 {} [ H.text "DashBoard" ]
80
          ] <> chartsEls <> [addNew])
81
      where
82 83
        addNew = H.div { className: "row" } [
          H.span { className: "btn btn-default"
84
                 , on: { click: onClickAdd }} [ H.span { className: "fa fa-plus" } [] ]
85 86
          ]
          where
87 88
            onClickAdd _ = onChange $ A.cons P.CDocsHistogram charts
        chartsEls = A.mapWithIndex chartIdx charts
89
        chartIdx idx chart =
90
          renderChart { chart, corpusId, defaultListId, onChange: onChangeChart, onRemove, session }
91
          where
92
            onChangeChart c = do
93 94
              log2 "[dashboardLayout] idx" idx
              log2 "[dashboardLayout] new chart" c
95 96
              onChange $ fromMaybe charts (A.modifyAt idx (\_ -> c) charts)
            onRemove _ = onChange $ fromMaybe charts $ A.deleteAt idx charts
97 98 99

type PredefinedChartProps =
  (
100 101
    chart :: P.PredefinedChart
  , corpusId :: NodeID
102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126
  , defaultListId :: Int
  , onChange :: P.PredefinedChart -> Effect Unit
  , onRemove :: Unit -> Effect Unit
  , session :: Session
  )

renderChart :: Record PredefinedChartProps -> R.Element
renderChart props = R.createElement renderChartCpt props []

renderChartCpt :: R.Component PredefinedChartProps
renderChartCpt = R.hooksComponent "G.C.N.C.D.renderChart" cpt
  where
    cpt { chart, corpusId, defaultListId, onChange, onRemove, session } _ = do
      pure $ H.div { className: "row" } [
          H.div {} [
            R2.select { defaultValue: show chart
                      , on: { change: onSelectChange }
                      } (option <$> P.allPredefinedCharts)
          ]
        , H.div {} [
            H.span { className: "btn btn-danger"
                   , on: { click: onRemoveClick }} [ H.span { className: "fa fa-trash" } [] ]
          ]
        , P.render chart params
        ]
127
      where
128 129
        option pc =
          H.option { value: show pc } [ H.text $ show pc ]
130
        onSelectChange e = onChange $ P.readChart' value
131 132 133 134 135 136 137 138
          where
            value = R2.unsafeEventValue e
        onRemoveClick _ = onRemove unit
        params = { corpusId
                 , limit: Just 1000
                 , listId: Just defaultListId
                 , session
                 }
139

140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156
    -- aSchool school = H.div {className: "col-md-4 content"} [ chart $ focus school ]
    -- schools = [ "Télécom Bretagne", "Mines Nantes", "Eurecom" ]
    -- myData =
    --   [seriesBarD1 {name: "Bar Data"}
    --    [ dataSerie {name: "val1", value: 50.0}
    --    , dataSerie {name: "val2", value: 70.0}
    --    , dataSerie {name: "val3", value: 80.0} ] ]
    -- focus :: String -> Options
    -- focus school =
    --   Options
    --   { mainTitle : "Focus " <> school
    --   , subTitle  : "Total scientific publications"
    --   , xAxis     : xAxis' ["2015", "2016", "2017"]
    --   , yAxis     : yAxis' { position: "left", show: false, min : 0 }
    --   , series    : myData
    --   , addZoom   : false
    --   , tooltip   : tooltipTriggerAxis } -- Necessary?
157

158 159
-----------------------------------------------------------------------------------------------------------

160 161
-- naturePublis_x :: Array String
-- naturePublis_x = ["Com","Articles","Thèses","Reports"]
162

163 164
-- naturePublis_y' :: Array Int
-- naturePublis_y' = [23901,17417,1188,1176]
165

166 167
-- naturePublis_y :: Array DataD1
-- naturePublis_y = zipWith (\n v -> dataSerie {name: n, value: toNumber v }) naturePublis_x naturePublis_y'
168

169 170 171 172 173 174 175 176 177 178
-- naturePublis :: Options
-- naturePublis = Options
--   { mainTitle : "Nature of publications"
--   , subTitle  : "Distribution by type"
--   , xAxis     : xAxis' []
--   , yAxis     : yAxis' { position: "left", show: false, min:0}
--   , series    : [seriesFunnelD1 { name: "Funnel Data" } naturePublis_y]
--   , addZoom   : false
--   , tooltip   : tooltipTriggerAxis -- Necessary?
--   }
179 180 181

-----------------------------------------------------------------------------------------------------------

182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214
-- globalPublis_x :: Array Int
-- globalPublis_x = [1982,1986,1987,1988,1990,1993,1996,1997,1998,1999,2000,2001,2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,2015,2016,2017]
-- globalPublis_y :: Array Int
-- globalPublis_y = [1,4,2,1,1,2,1,1,8,38,234,76,40,82,75,202,1475,1092,1827,2630,4978,3668,4764,5915,4602,5269,6814,4018]


-- globalPublis :: Options
-- globalPublis = Options
--   { mainTitle : "Histogram"
--   , subTitle  : "Distribution of publications over time"
--   , xAxis     : xAxis' (map show globalPublis_x)
--   , yAxis     : yAxis' { position: "left", show: true, min:0}
--   , series    : [seriesBarD1 {name: "Number of publication / year"} $ map (\n -> dataSerie {name: "", value: toNumber n }) globalPublis_y]
--   , addZoom   : true
--   , tooltip   : tooltipTriggerAxis -- Necessary?
--   }



-- distriBySchool_y :: Array (Tuple String Int)
-- distriBySchool_y = [Tuple "Télécom Bretagne" 1150,Tuple "Télécom SudParis" 946,Tuple "Mines Nantes" 547,Tuple "Télécom ParisTech" 429,Tuple "IMT Atlantique" 205,Tuple "Mines Alès" 56
--                    ,Tuple "Télécom Ecole de Management" 52,Tuple "Mines Albi-Carmaux" 6]

-- distriBySchool :: Options
-- distriBySchool = Options
--   { mainTitle : "School production in 2017"
--   , subTitle  : "Distribution by school"
--   , xAxis     : xAxis' []
--   , yAxis     : yAxis' { position : "", show: false, min:0}
--   , series    : [ seriesPieD1 {name: "Pie data"} (map (\(Tuple n v) -> dataSerie {name: n, value: toNumber v}) distriBySchool_y)]
--   , addZoom   : false
--   , tooltip   : tooltipTriggerAxis -- Necessary?
--   }
215

216 217 218 219 220 221 222 223 224 225 226 227 228
-- scatterEx :: Options
-- scatterEx = Options
--   { mainTitle : "Scatter test"
--   , subTitle  : "Scatter subtitle"
--   , xAxis     : xAxis' []
--   , yAxis     : yAxis' { position: "", show: true, min:0}
--   , series    : [ seriesScatterD2 {name: "name1", symbolSize: 10.0} (dataSerieV <$> [[2.0,3.0],[3.0,4.0]])
--                 , seriesScatterD2 {name: "name2", symbolSize: 5.0 } (dataSerieV <$> [[1.0,3.0],[5.0,4.0]])
--                 , seriesScatterD2 {name: "name3", symbolSize: 10.0} (dataSerieV <$> [[10.0,3.0],[8.0,4.0]])
--                 ]
--   , addZoom   : false
--   , tooltip   : tooltipTriggerAxis -- Necessary?
--   }
229

230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252
-- sankeyEx :: Options
-- sankeyEx = Options
--   { mainTitle : ""
--   , subTitle  : ""
--   , xAxis     : xAxis' []
--   , yAxis     : yAxis' { position: "", show: false, min:0}
--   , series    :
--      [ seriesSankey
--          { "data":
--              [ {name : "a"}, {name : "b"}
--              , {name:"c"},   {name:"d"} ]
--          , links:
--              [ {source : "a", target : "b", value :2.0}
--              , {source : "a", target : "c", value :1.0}
--              , {source : "b", target : "c", value :1.0}
--              , {source : "b", target : "d", value :3.0}
--              ]
--          , layout: "none"
--          }
--      ]
--   , tooltip   : tooltipTriggerAxis -- Necessary?
--   , addZoom   : false
--   }
253

254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280
-- treeData :: Array TreeNode
-- treeData =
--   [ treeNode "nodeA" 10
--     [ treeNode "nodeAa" 4 []
--     , treeNode "nodeAb" 5 []
--     , treeNode "nodeAc" 1
--       [ treeNode "nodeAca" 5 []
--       , treeNode "nodeAcb" 5 [] ] ]
--   , treeNode "nodeB" 20
--     [ treeNode "nodeBa" 20
--       [ treeNode "nodeBa1" 20 [] ]]
--   , treeNode "nodeC" 20
--     [ treeNode "nodeCa" 20
--       [ treeNode "nodeCa1" 10 []
--       , treeNode "nodeCa2" 10 [] ]
--     , treeNode "nodeD" 20
--       [ treeNode "nodeDa" 20
--         [ treeNode "nodeDa1" 2 []
--         , treeNode "nodeDa2" 2 []
--         , treeNode "nodeDa3" 2 []
--         , treeNode "nodeDa4" 2 []
--         , treeNode "nodeDa5" 2 []
--         , treeNode "nodeDa6" 2 []
--         , treeNode "nodeDa7" 2 []
--         , treeNode "nodeDa8" 2 []
--         , treeNode "nodeDa9" 2 []
--         , treeNode "nodeDa10" 2 [] ]]]]
281

282 283 284 285 286 287 288 289 290 291 292 293 294
-- treeData' :: Array TreeNode
-- treeData' =
--   [ treeNode "nodeA" 10
--     [ treeLeaf "nodeAa" 4
--     , treeLeaf "nodeAb" 5
--     , treeNode "nodeAc" 1 [ treeLeaf "nodeAca" 5, treeLeaf "nodeAcb" 5 ]]
--   , treeNode "nodeB" 20 [ treeNode "nodeBa" 20 [ treeLeaf "nodeBa1" 20]]
--   , treeNode "nodeC" 20 [ treeNode "nodeBa" 20 [ treeLeaf "nodeBa1" 20]]
--   , treeNode "nodeD" 20 [ treeNode "nodeBa" 20 [ treeLeaf "nodeBa1" 20]]
--   , treeNode "nodeE" 20 [ treeNode "nodeBa" 20 [ treeLeaf "nodeBa1" 20]]
--   , treeNode "nodeF" 20 [ treeNode "nodeBa" 20 [ treeLeaf "nodeBa1" 20]]
--   , treeNode "nodeG" 20 [ treeNode "nodeBa" 20 [ treeLeaf "nodeBa1" 20]]
--   , treeNode "nodeH" 20 [ treeNode "nodeBa" 20 [ treeLeaf "nodeBa1" 20]]]
295

296 297 298 299 300 301 302 303 304 305
-- treeMapEx :: Options
-- treeMapEx = Options
--   { mainTitle : ""
--   , subTitle  : ""
--   , xAxis     : xAxis' []
--   , yAxis     : yAxis' { position: "", show: false, min:0}
--   , series    : [mkTree TreeMap treeData]
--   , addZoom   : false
--   , tooltip   : tooltipTriggerAxis -- Necessary?
--   }
306

307 308 309 310 311 312 313 314 315 316
-- treeEx :: Options
-- treeEx = Options
--   { mainTitle : "Tree"
--   , subTitle  : "Radial"
--   , xAxis     : xAxis' []
--   , yAxis     : yAxis' { position: "", show: false, min:0}
--   , series    : [mkTree TreeRadial treeData']
--   , addZoom   : false
--   , tooltip   : tooltipTriggerAxis -- Necessary?
--   }