Create responsive Dashboard layout (static, non-modifiable)

src/store/modules/layout.ts

@@ -19,6 +19,7 @@ export enum DashboardLayout {
 }
 
 export enum LayoutGetters {
+  getDashboardLayoutSm = 'getDashboardLayoutSm',
   getDashboardLayout = 'getDashboardLayout',
   getTradingLayout = 'getTradingLayout',
   getLayoutLocked = 'getLayoutLocked',
@@ -53,7 +54,15 @@ const DEFAULT_DASHBOARD_LAYOUT: GridItemData[] = [
   { i: DashboardLayout.dailyChart, x: 4, y: 0, w: 4, h: 6 },
   { i: DashboardLayout.hourlyChart, x: 4, y: 6, w: 4, h: 6 },
   { i: DashboardLayout.cumChartChart, x: 0, y: 6, w: 4, h: 6 },
-  { i: DashboardLayout.tradesLogChart, x: 0, y: 8, w: 12, h: 4 },
+  { i: DashboardLayout.tradesLogChart, x: 0, y: 12, w: 12, h: 4 },
+];
+
+const DEFAULT_DASHBOARD_LAYOUT_SM: GridItemData[] = [
+  { i: DashboardLayout.KPI, x: 0, y: 0, w: 12, h: 6 },
+  { i: DashboardLayout.dailyChart, x: 0, y: 6, w: 12, h: 6 },
+  { i: DashboardLayout.hourlyChart, x: 0, y: 12, w: 12, h: 6 },
+  { i: DashboardLayout.cumChartChart, x: 0, y: 18, w: 12, h: 6 },
+  { i: DashboardLayout.tradesLogChart, x: 0, y: 24, w: 12, h: 4 },
 ];
 
 const STORE_DASHBOARD_LAYOUT = 'ftDashboardLayout';
@@ -99,6 +108,9 @@ export default {
   },
 
   getters: {
+    [LayoutGetters.getDashboardLayoutSm]() {
+      return [...DEFAULT_DASHBOARD_LAYOUT_SM];
+    },
     [LayoutGetters.getDashboardLayout](state) {
       return state.dashboardLayout;
     },
@@ -112,7 +124,6 @@ export default {
 
   mutations: {
     [LayoutMutations.setDashboardLayout](state, layout) {
-      console.log('set dashboard layout');
       state.dashboardLayout = layout;
       localStorage.setItem(STORE_DASHBOARD_LAYOUT, JSON.stringify(layout));
     },

src/views/Dashboard.vue

@@ -2,14 +2,16 @@
   <GridLayout
     class="h-100 w-100"
     :row-height="50"
-    :layout="gridLayout"
+    :layout.sync="gridLayout"
     :vertical-compact="false"
     :margin="[5, 5]"
-    :is-resizable="!getLayoutLocked"
-    :is-draggable="!getLayoutLocked"
-    responsive
-    prevent-collision
-    @layout-updated="layoutUpdatedEvent"
+    :responsive-layouts="responsiveGridLayouts"
+    :is-resizable="!isLayoutLocked"
+    :is-draggable="!isLayoutLocked"
+    :responsive="true"
+    :prevent-collision="true"
+    @layout-updated="layoutUpdated"
+    @breakpoint-changed="breakpointChanged"
   >
     <GridItem
       :i="gridLayoutKPI.i"
@@ -181,6 +183,8 @@ export default class Dashboard extends Vue {
 
   @ftbot.Action getTrades;
 
+  @layoutNs.Getter [LayoutGetters.getDashboardLayoutSm]!: GridItemData[];
+
   @layoutNs.Getter [LayoutGetters.getDashboardLayout]!: GridItemData[];
 
   @layoutNs.Action [LayoutActions.setDashboardLayout];
@@ -195,8 +199,36 @@ export default class Dashboard extends Vue {
 
   formatPrice = formatPrice;
 
+  localGridLayout: GridItemData[] = [];
+
+  currentBreakpoint = '';
+
+  get isLayoutLocked() {
+    return this.getLayoutLocked || !this.isResizableLayout;
+  }
+
+  get isResizableLayout() {
+    return ['', 'md', 'lg', 'xl'].includes(this.currentBreakpoint);
+  }
+
   get gridLayout() {
-    return this.getDashboardLayout;
+    if (this.isResizableLayout) {
+      return this.getDashboardLayout;
+    }
+    return this.localGridLayout;
+  }
+
+  set gridLayout(newLayout) {
+    // Dummy setter to make gridLayout happy. Updates happen through layoutUpdated.
+  }
+
+  layoutUpdated(newLayout) {
+    // Frozen layouts for small screen sizes.
+    if (this.isResizableLayout) {
+      console.log('newlayout', newLayout);
+      console.log('saving dashboard');
+      this.setDashboardLayout(newLayout);
+    }
   }
 
   get gridLayoutKPI(): GridItemData {
@@ -219,6 +251,12 @@ export default class Dashboard extends Vue {
     return findGridLayout(this.gridLayout, DashboardLayout.tradesLogChart);
   }
 
+  get responsiveGridLayouts() {
+    return {
+      sm: this.getDashboardLayoutSm,
+    };
+  }
+
   mounted() {
     this.getDaily({ timescale: 30 });
     this.getTrades();
@@ -226,10 +264,12 @@ export default class Dashboard extends Vue {
     this.getBalance();
     this.getPerformance();
     this.getProfit();
+    this.localGridLayout = [...this.getDashboardLayoutSm];
   }
 
-  layoutUpdatedEvent(newLayout) {
-    this.setDashboardLayout(newLayout);
+  breakpointChanged(newBreakpoint) {
+    // console.log('breakpoint:', newBreakpoint);
+    this.currentBreakpoint = newBreakpoint;
   }
 }
 </script>