Merge pull request #32 from openearth/dashboard-graph-titles

Dashboard graph titles

src/components/AppChart.vue

@@ -1,15 +1,7 @@
 <template>
   <div class="app-chart__container" v-if="graphData">
-    <sea-level-graph
-      v-if="activeClickableDataset.id === 'slp'"
-      :sea-level-rise-data="graphData"
-    />
-    <line-chart-zarr
-      v-if="zarrLayers.includes(activeClickableDataset.id)"
-      :graph-data="graphData"
-    />
-    <flood-extent-graph
-      v-if="activeClickableDataset.id === 'cfhp'"
+    <component
+      :is="graphComponents[graphData.graphType]"
       :graph-data="graphData"
     />
   </div>
@@ -22,10 +14,12 @@
   </div>
 </template>
 <script>
+import { markRaw } from "vue";
+import { mapGetters } from "vuex";
+import { graphTypes } from "../store/graphs";
 import FloodExtentGraph from "./ChartComponents/FloodExtentGraph.vue";
 import SeaLevelGraph from "./ChartComponents/SeaLevelGraph.vue";
 import LineChartZarr from "./ChartComponents/LineChartZarr.vue";
-import { mapGetters } from "vuex";
 
 export default {
   components: {
@@ -35,7 +29,11 @@ export default {
   },
   data() {
     return {
-      zarrLayers: ["ssl", "eesl", "sc"],
+      graphComponents: {
+        [graphTypes.FLOOD_EXTEND]: markRaw(FloodExtentGraph),
+        [graphTypes.SEA_LEVEL_RISE]: markRaw(SeaLevelGraph),
+        [graphTypes.LINE_CHART]: markRaw(LineChartZarr),
+      },
     };
   },
   computed: {

src/components/ChartComponents/SeaLevelGraph.vue

@@ -8,7 +8,7 @@ import * as echarts from "echarts";
 
 export default {
   props: {
-    seaLevelRiseData: {
+    graphData: {
       type: Object,
       required: true,
     },
@@ -23,7 +23,7 @@ export default {
       const series = [];
 
       // Loop through each scenario in the data and generate the series
-      this.seaLevelRiseData.scenarios.forEach((scenario, index) => {
+      this.graphData.scenarios.forEach((scenario, index) => {
         const color = this.colors[index % this.colors.length]; // Use standard colors in a cycle
 
         // Add low data as a transparent placeholder (baseline)
@@ -97,7 +97,7 @@ export default {
           },
           xAxis: {
             type: "category",
-            data: this.seaLevelRiseData.time, // Use time for x-axis
+            data: this.graphData.time, // Use time for x-axis
             name: "Year",
             nameLocation: "middle",
             nameGap: 25,
@@ -123,7 +123,7 @@ export default {
             },
           },
           legend: {
-            data: this.seaLevelRiseData.scenarios.map(
+            data: this.graphData.scenarios.map(
               (scenario) => `${scenario.name}`
             ),
             selectedMode: false,
@@ -148,7 +148,7 @@ export default {
     },
   },
   mounted() {
-    if (this.seaLevelRiseData && this.seaLevelRiseData.time) {
+    if (this.graphData && this.graphData.time) {
       nextTick(() => {
         this.renderChart();
       });

src/components/DashboardTab.vue

@@ -2,39 +2,38 @@
   <v-card flat class="scrollable-card">
     <v-card
       flat
-      v-for="(graph, index) in graphsInDashboard"
+      v-for="({ graphData, title }, index) in activeGraphs"
       :key="index"
       class="ma-3"
-      style="height: 350px"
     >
-      <v-col class="column-right">
+      <div class="graph-title">
+        <v-card-title>
+          {{ title }}<br />
+          <small>
+            (
+            {{ roundCoords(graphData.coords.lat) }},
+            {{ roundCoords(graphData.coords.lng) }}
+            )
+          </small>
+        </v-card-title>
         <v-btn icon flat class="close-button" @click="removeGraph(index)">
           <v-icon>mdi-close</v-icon>
         </v-btn>
-      </v-col>
-      <sea-level-graph
-        v-if="graph.type === 'seaLevelGraph'"
-        style="z-index: -1"
-        :sea-level-rise-data="graph.data"
-      />
-
-      <flood-extent-graph
-        v-else-if="graph.type === 'floodExtentGraph'"
-        style="z-index: -1"
-        :graph-data="graph.data"
-      />
-      <line-chart-zarr
-        v-else-if="graph.type === 'lineChartZarr'"
-        style="z-index: -1"
-        :graph-data="graph.data"
+      </div>
+      <component
+        :is="graphComponents[graphData.graphType]"
+        :graph-data="graphData"
+        style="height: 300px"
       />
     </v-card>
     <v-card flat> </v-card>
   </v-card>
 </template>
 
 <script>
+import { markRaw } from "vue";
 import { mapGetters, mapActions } from "vuex";
+import { graphTypes } from "../store/graphs";
 import SeaLevelGraph from "./ChartComponents/SeaLevelGraph.vue";
 import FloodExtentGraph from "./ChartComponents/FloodExtentGraph.vue";
 import LineChartZarr from "./ChartComponents/LineChartZarr.vue";
@@ -45,13 +44,23 @@ export default {
     FloodExtentGraph,
     LineChartZarr,
   },
+  data() {
+    return {
+      graphTypes,
+      graphComponents: {
+        [graphTypes.FLOOD_EXTEND]: markRaw(FloodExtentGraph),
+        [graphTypes.SEA_LEVEL_RISE]: markRaw(SeaLevelGraph),
+        [graphTypes.LINE_CHART]: markRaw(LineChartZarr),
+      },
+    };
+  },
   computed: {
-    ...mapGetters("map", ["graphsInDashboard"]),
+    ...mapGetters("dashboard", ["activeGraphs"]),
   },
   methods: {
-    ...mapActions("map", ["removeGraphFromDashboard"]),
-    removeGraph(index) {
-      this.removeGraphFromDashboard(index);
+    ...mapActions("dashboard", ["removeGraph"]),
+    roundCoords(number) {
+      return Number(number).toFixed(3);
     },
   },
 };
@@ -65,10 +74,11 @@ export default {
 .close-button {
   color: rgb(var(--v-theme-grey80));
 }
-.column-right {
+.graph-title {
   display: flex;
-  justify-content: flex-end;
-  margin-bottom: -47px;
-  z-index: 0;
+  justify-content: space-between;
+}
+.graph-title > .v-card-title {
+  flex: 0 1 auto;
 }
 </style>

src/store/dashboard/index.js

@@ -0,0 +1,37 @@
+export default {
+  namespaced: true,
+
+  state: {
+    graphs: [],
+  },
+
+  getters: {
+    graphs: (state) => {
+      return state.graphs;
+    },
+    activeGraphs: (state, getters, rootState, rootGetters) => {
+      const datasetIds = rootGetters["map/activeDatasetIds"];
+      return state.graphs.filter(({ graphData: { datasetId } }) =>
+        datasetIds.includes(datasetId)
+      );
+    },
+  },
+
+  mutations: {
+    ADD_GRAPH(state, graph) {
+      state.graphs.push(graph);
+    },
+    REMOVE_GRAPH(state, index) {
+      state.graphs.splice(index, 1);
+    },
+  },
+
+  actions: {
+    addGraph({ commit }, graph) {
+      commit("ADD_GRAPH", graph);
+    },
+    removeGraph({ commit }, index) {
+      commit("REMOVE_GRAPH", index);
+    },
+  },
+};

src/store/graphs/index.js

@@ -3,6 +3,23 @@ import getDataFromRaster from "@/lib/graphs/get-data-from-raster";
 import getDataFromZarr from "@/lib/graphs/get-data-from-zarr";
 import getDataFromMapbox from "@/lib/graphs/get-data-from-mapbox";
 
+export const graphTypes = {
+  FLOOD_EXTEND: "flood-extend-graph",
+  LINE_CHART: "line-chart-zarr",
+  SEA_LEVEL_RISE: "sea-level-rise",
+};
+
+const getGraphType = (id) => {
+  const graphType = {
+    cfhp: graphTypes.FLOOD_EXTEND,
+    eesl: graphTypes.LINE_CHART,
+    sc: graphTypes.LINE_CHART,
+    slp: graphTypes.SEA_LEVEL_RISE,
+    ssl: graphTypes.LINE_CHART,
+  }[id];
+  return graphType || graphTypes.LINE_CHART;
+};
+
 export default {
   namespaced: true,
   state: {
@@ -30,16 +47,24 @@ export default {
       //TODO: after demo refactor the if statements
       const currentGraphDataset = rootGetters["map/activeClickableDataset"];
       const mapboxLayers = rootGetters["map/mapboxLayers"];
+      const coords = { lat, lng };
       if (!currentGraphDataset) {
         return;
       }
+      const datasetId = currentGraphDataset.id;
+      const graphType = getGraphType(datasetId);
       if (_.has(currentGraphDataset, "transparentLayer")) {
         const mapboxLayer = mapboxLayers.find(
           (layer) => layer.id === currentGraphDataset.id
         );
 
         const graphData = getDataFromMapbox(mapboxLayer, features.properties);
-        commit("ADD_GRAPH_DATA", graphData);
+        commit("ADD_GRAPH_DATA", {
+          ...graphData,
+          datasetId,
+          graphType,
+          coords,
+        });
       } else {
         const layerType = _.has(currentGraphDataset, "cube:dimensions")
           ? "vector"
@@ -52,7 +77,12 @@ export default {
               lng,
               lat
             );
-            commit("ADD_GRAPH_DATA", graphData);
+            commit("ADD_GRAPH_DATA", {
+              ...graphData,
+              datasetId,
+              graphType,
+              coords,
+            });
           } catch (error) {
             console.error("Error getting raster data:", error);
           }
@@ -69,7 +99,12 @@ export default {
                 currentGraphDataset,
                 features
               );
-              commit("ADD_GRAPH_DATA", graphData);
+              commit("ADD_GRAPH_DATA", {
+                ...graphData,
+                datasetId,
+                graphType,
+                coords,
+              });
             } catch (error) {
               console.error("Error getting zarr data:", error);
             }

src/store/index.js

@@ -1,11 +1,13 @@
 import map from "./map";
 import graphs from "./graphs";
+import dashboard from "./dashboard";
 
 import { createStore } from "vuex";
 
 export default createStore({
   modules: {
     map,
     graphs,
+    dashboard,
   },
 });

src/store/map/index.js

@@ -13,7 +13,6 @@ export default {
     activeTheme: null,
     activeDatasets: [],
     mapboxLayers: [], //wmsLayers state have the format that is needed to add the layers on the map
-    graphsInDashboard: [], //TODO: this should be moved to the graphs/index.js
     seaLevelRiseData: {},
     activeClickableDataset: null,
     clickableDatasetsIds: ["cfhp", "slp", "ssl", "eesl", "sc", "cfr", "cbca"], // Not all layers are clickable. Only the ones in user stories.
@@ -38,12 +37,12 @@ export default {
     activeDatasets(state) {
       return state.activeDatasets;
     },
+    activeDatasetIds(state) {
+      return state.activeDatasets.map(({ id }) => id);
+    },
     mapboxLayers(state) {
       return state.mapboxLayers;
     },
-    graphsInDashboard(state) {
-      return state.graphsInDashboard;
-    },
     seaLevelRiseData(state) {
       return state.seaLevelRiseData;
     },
@@ -99,12 +98,6 @@ export default {
         (mapboxLayer) => mapboxLayer.id !== id
       );
     },
-    ADD_GRAPH_TO_DASHBOARD(state, graph) {
-      state.graphsInDashboard.push(graph);
-    },
-    REMOVE_GRAPH_FROM_DASHBOARD(state, index) {
-      state.graphsInDashboard.splice(index, 1);
-    },
     SET_SEA_LEVEL_RISE_DATA(state, data) {
       state.seaLevelRiseData = data;
     },
@@ -242,12 +235,7 @@ export default {
         dispatch("loadDatasetOnMap", dataset);
       }
     },
-    addGraphToDashboard({ commit }, graph) {
-      commit("ADD_GRAPH_TO_DASHBOARD", graph);
-    },
-    removeGraphFromDashboard({ commit }, index) {
-      commit("REMOVE_GRAPH_FROM_DASHBOARD", index);
-    },
+
     setSeaLevelRiseData({ commit }, graph) {
       commit("SET_SEA_LEVEL_RISE_DATA", graph);
     },