[bootstrap v4] fix charts display on dashboard

src/Gargantext/Components/Nodes/Corpus/Chart/Common.purs

@@ -15,6 +15,7 @@ import Gargantext.Sessions (Session)
 import Gargantext.Utils.CacheAPI as GUC
 import Gargantext.Utils.Reactix as R2
 
+thisModule :: String
 thisModule = "Gargantext.Components.Nodes.Corpus.Chart.Common"
 
 type MetricsLoadViewProps a = (
@@ -28,10 +29,10 @@ cacheName = "metrics"
 
 metricsLoadView :: forall a. Record (MetricsLoadViewProps a) -> R.Element
 metricsLoadView p = R.createElement metricsLoadViewCpt p []
-
-metricsLoadViewCpt :: forall a. R.Component (MetricsLoadViewProps a)
-metricsLoadViewCpt = R.hooksComponentWithModule thisModule "metricsLoadView" cpt
   where
+    metricsLoadViewCpt :: R.Component (MetricsLoadViewProps a)
+    metricsLoadViewCpt = R.hooksComponentWithModule thisModule "metricsLoadView" cpt
+
     cpt { getMetrics, loaded, path, reload, session } _ = do
       useLoader (fst reload /\ path) (getMetrics session) $ \l ->
         loaded { path, reload, session } l
@@ -47,11 +48,10 @@ type MetricsWithCacheLoadViewProps res ret = (
 metricsWithCacheLoadView :: forall res ret. DecodeJson res =>
                             Record (MetricsWithCacheLoadViewProps res ret) -> R.Element
 metricsWithCacheLoadView p = R.createElement metricsWithCacheLoadViewCpt p []
-
-metricsWithCacheLoadViewCpt :: forall res ret. DecodeJson res =>
-                               R.Component (MetricsWithCacheLoadViewProps res ret)
-metricsWithCacheLoadViewCpt = R.hooksComponentWithModule thisModule "metricsWithCacheLoadView" cpt
   where
+    metricsWithCacheLoadViewCpt :: R.Component (MetricsWithCacheLoadViewProps res ret)
+    metricsWithCacheLoadViewCpt = R.hooksComponentWithModule thisModule "metricsWithCacheLoadView" cpt
+
     cpt { getMetricsHash, handleResponse, loaded, mkRequest, path, reload, session } _ = do
       useLoaderWithCacheAPI { cacheEndpoint: (getMetricsHash session)
                             , handleResponse

src/Gargantext/Components/Nodes/Corpus/Chart/Histo.purs

@@ -3,7 +3,6 @@ module Gargantext.Components.Nodes.Corpus.Chart.Histo where
 import Data.Argonaut (class DecodeJson, class EncodeJson, decodeJson, encodeJson, (.:), (~>), (:=))
 import Data.Argonaut.Core (jsonEmptyObject)
 import Data.Maybe (Maybe(..))
-import Data.Tuple (Tuple(..))
 import Data.Tuple.Nested ((/\))
 import Effect.Aff (Aff)
 import Reactix as R
@@ -14,17 +13,16 @@ import Gargantext.Components.Charts.Options.Data (dataSerie)
 import Gargantext.Components.Charts.Options.ECharts (Options(..), chart, xAxis', yAxis')
 import Gargantext.Components.Charts.Options.Font (itemStyle, mkTooltip, templateFormatter)
 import Gargantext.Components.Charts.Options.Series (seriesBarD1)
-import Gargantext.Components.Nodes.Corpus.Chart.Common (metricsLoadView, metricsWithCacheLoadView)
-import Gargantext.Components.Nodes.Corpus.Chart.Types
-import Gargantext.Components.Nodes.Corpus.Chart.Utils as U
+import Gargantext.Components.Nodes.Corpus.Chart.Common (metricsWithCacheLoadView)
+import Gargantext.Components.Nodes.Corpus.Chart.Types (MetricsProps, Path, Props, ReloadPath)
 import Gargantext.Hooks.Loader (HashedResponse(..))
-import Gargantext.Prelude
+import Gargantext.Prelude (bind, map, pure, ($), (==))
 import Gargantext.Routes (SessionRoute(..))
 import Gargantext.Sessions (Session, get)
-import Gargantext.Types (ChartType(..), TabType(..))
+import Gargantext.Types (ChartType(..))
 import Gargantext.Utils.CacheAPI as GUC
-import Gargantext.Utils.Reactix as R2
 
+thisModule :: String
 thisModule = "Gargantext.Components.Nodes.Corpus.Chart.Histo"
 
 newtype ChartMetrics = ChartMetrics {
@@ -83,10 +81,10 @@ mkRequest session (_ /\ path@{ corpusId, limit, listId, tabType }) = GUC.makeGet
 
 histo :: Record Props -> R.Element
 histo props = R.createElement histoCpt props []
-
-histoCpt :: R.Component Props
-histoCpt = R.hooksComponentWithModule thisModule "histo" cpt
   where
+    histoCpt :: R.Component Props
+    histoCpt = R.hooksComponentWithModule thisModule "histo" cpt
+
     cpt { path, session } _ = do
       reload <- R.useState' 0
       pure $ metricsWithCacheLoadView {
@@ -100,10 +98,10 @@ histoCpt = R.hooksComponentWithModule thisModule "histo" cpt
         }
 
 loaded :: Record MetricsProps -> HistoMetrics -> R.Element
-loaded { path, reload, session } loaded =
+loaded { path, reload, session } l =
   H.div {} [
   {-  U.reloadButton reload
   , U.chartUpdateButton { chartType: Histo, path, reload, session }
-  , -} chart $ chartOptions loaded
+  , -} chart $ chartOptions l
   ]
   -- TODO: parametrize ngramsType above

src/Gargantext/Components/Nodes/Corpus/Dashboard.purs

@@ -125,17 +125,22 @@ renderChartCpt :: R.Component PredefinedChartProps
 renderChartCpt = R.hooksComponentWithModule thisModule "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)
+      pure $ H.div { className: "chart" }
+        [ H.div { className: "row" }
+          [ H.div { className: "col-2" }
+            [ R2.select { defaultValue: show chart
+                        , on: { change: onSelectChange }
+                        } (option <$> P.allPredefinedCharts)
+            ]
+          , H.div { className: "col-1" }
+            [ H.span { className: "btn btn-danger"
+                     , on: { click: onRemoveClick }} [ H.span { className: "fa fa-trash" } [] ]
+            ]
           ]
-        , H.div {} [
-            H.span { className: "btn btn-danger"
-                   , on: { click: onRemoveClick }} [ H.span { className: "fa fa-trash" } [] ]
+        , H.div { className: "row" }
+          [ H.div { className: "col-12 chart" }
+            [ P.render chart params ]
           ]
-        , P.render chart params
         ]
       where
         option pc =