Improve charts, convert rtl support page into a single dashboard page

src/App.vue

@@ -1,16 +1,21 @@
 <template>
   <div :class="{'nav-open': $sidebar.showSidebar}">
     <notifications></notifications>
-    <router-view></router-view>
+    <router-view :key="$route.fullPath"></router-view>
   </div>
 </template>
 
 <script>
 export default {
-  mounted() {
+  methods: {
-    if(!this.$rtl.isRTL) {
+    disableRTL() {
-      this.$rtl.disableRTL();
+      if(!this.$rtl.isRTL) {
+        this.$rtl.disableRTL();
+      }
     }
+  },
+  mounted() {
+    this.$watch('$route', this.disableRTL, {immediate: true});
   }
 };
 </script>

src/components/Cards/Card.vue

@@ -3,7 +3,7 @@
     <div class="card-image" v-if="$slots.image">
       <slot name="image"></slot>
     </div>
-    <div class="card-header" v-if="$slots.header || title">
+    <div class="card-header" v-if="$slots.header || title" :class="headerClasses">
       <slot name="header">
         <h4 class="card-title">{{title}}</h4>
         <p class="card-category" v-if="subTitle">{{subTitle}}</p>
@@ -25,7 +25,7 @@ export default {
     title: String,
     subTitle: String,
     type: String,
-    cardHeaderClasses: [String, Object]
+    headerClasses: [String, Object, Array]
   }
 };
 </script>

src/components/Charts/BarChart.js

@@ -42,8 +42,8 @@ export default {
   },
   mounted() {
     this.$watch('chartData', (newVal, oldVal) => {
-      this.updateGradients(this.chartData);
+      this.updateGradients(newVal);
-      if (oldVal === null) {
+      if (!oldVal) {
         this.renderChart(
           this.chartData,
           this.extraOptions

src/components/Charts/LineChart.js

@@ -43,7 +43,7 @@ export default {
   mounted() {
     this.$watch('chartData', (newVal, oldVal) => {
       this.updateGradients(this.chartData);
-      if (oldVal === null) {
+      if (!oldVal) {
         this.renderChart(
           this.chartData,
           this.extraOptions

src/layout/dashboard/DashboardLayout.vue

@@ -9,7 +9,7 @@
         <sidebar-link to="/profile" name="User Profile" icon="tim-icons icon-single-02"/>
         <sidebar-link to="/table-list" name="Table List" icon="tim-icons icon-puzzle-10"/>
         <sidebar-link to="/typography" name="Typography" icon="tim-icons icon-align-center"/>
-        <sidebar-link to="/rtl-support" name="RTL Support" icon="tim-icons icon-world"/>
+        <sidebar-link to="/dashboard?enableRTL=true" name="RTL Support" icon="tim-icons icon-world"/>
       </template>
     </side-bar>
     <div class="main-panel">

src/pages/Dashboard.vue

@@ -6,12 +6,14 @@
         <card type="chart">
           <template slot="header">
             <div class="row">
-              <div class="col-sm-6 text-left">
+              <div class="col-sm-6" :class="isRTL ? 'text-right' : 'text-left'">
                 <h5 class="card-category">Total Shipments</h5>
                 <h2 class="card-title">Performance</h2>
               </div>
               <div class="col-sm-6">
-                <div class="btn-group btn-group-toggle float-right" data-toggle="buttons">
+                <div class="btn-group btn-group-toggle"
+                     :class="isRTL ? 'float-left' : 'float-right'"
+                     data-toggle="buttons">
                   <label v-for="(option, index) in bigLineChart.categories"
                          :key="option"
                          class="btn btn-sm btn-primary btn-simple"
@@ -40,7 +42,7 @@
       </div>
     </div>
     <div class="row">
-      <div class="col-lg-4">
+      <div class="col-lg-4" :class="{'text-right': isRTL}">
         <card type="chart">
           <template slot="header">
             <h5 class="card-category">Total Shipments</h5>
@@ -56,7 +58,7 @@
           </div>
         </card>
       </div>
-      <div class="col-lg-4">
+      <div class="col-lg-4" :class="{'text-right': isRTL}">
         <card type="chart">
           <template slot="header">
             <h5 class="card-category">Daily Sales</h5>
@@ -72,7 +74,7 @@
           </div>
         </card>
       </div>
-      <div class="col-lg-4">
+      <div class="col-lg-4" :class="{'text-right': isRTL}">
         <card type="chart">
           <template slot="header">
             <h5 class="card-category">Completed Tasks</h5>
@@ -91,20 +93,18 @@
     </div>
     <div class="row">
       <div class="col-lg-6 col-md-12">
-        <card type="tasks">
+        <card type="tasks" :header-classes="{'text-right': isRTL}">
           <template slot="header">
             <h6 class="title d-inline">Tasks(5)</h6>
             <p class="card-category d-inline">today</p>
-            <div class="dropdown">
+            <base-dropdown menu-on-right="" tag="div" :class="{'float-left': isRTL}">
-              <button type="button" class="btn btn-link dropdown-toggle btn-icon" data-toggle="dropdown">
+              <base-button slot="title" type="link" icon class="dropdown-toggle">
                 <i class="tim-icons icon-settings-gear-63"></i>
-              </button>
+              </base-button>
-              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
+              <a class="dropdown-item" href="#pablo">Action</a>
-                <a class="dropdown-item" href="#pablo">Action</a>
+              <a class="dropdown-item" href="#pablo">Another action</a>
-                <a class="dropdown-item" href="#pablo">Another action</a>
+              <a class="dropdown-item" href="#pablo">Something else</a>
-                <a class="dropdown-item" href="#pablo">Something else</a>
+            </base-dropdown>
-              </div>
-            </div>
           </template>
           <div class="table-full-width table-responsive">
             <task-list></task-list>
@@ -112,16 +112,12 @@
         </card>
       </div>
       <div class="col-lg-6 col-md-12">
-        <div class="card ">
+        <card class="card" :header-classes="{'text-right': isRTL}">
-          <div class="card-header">
+          <h4 slot="header" class="card-title"> Simple Table</h4>
-            <h4 class="card-title"> Simple Table</h4>
+          <div class="table-responsive">
+            <user-table></user-table>
           </div>
-          <div class="card-body">
+        </card>
-            <div class="table-responsive">
-              <user-table></user-table>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -222,6 +218,14 @@
         }
       }
     },
+    computed: {
+      enableRTL() {
+        return this.$route.query.enableRTL;
+      },
+      isRTL() {
+        return this.$rtl.isRTL;
+      }
+    },
     methods: {
       initBigChart(index) {
         let chartData = {
@@ -249,7 +253,15 @@
       }
     },
     mounted() {
+      if (this.enableRTL) {
+        this.$rtl.enableRTL();
+      }
       this.initBigChart(0);
+    },
+    beforeDestroy() {
+      if (this.$rtl.isRTL) {
+        this.$rtl.disableRTL();
+      }
     }
   };
 </script>

src/pages/RTLSupport.vue

@@ -1,254 +0,0 @@
-<template>
-  <div>
-
-    <div class="row">
-      <div class="col-12">
-        <card type="chart" card-header-classes="text-left">
-          <template slot="header">
-            <div class="row">
-              <div class="col-sm-6 text-right">
-                <h5 class="card-category">Total Shipments</h5>
-                <h2 class="card-title">Performance</h2>
-              </div>
-              <div class="col-sm-6">
-                <div class="btn-group btn-group-toggle" data-toggle="buttons">
-                  <label v-for="(option, index) in bigLineChart.categories"
-                         :key="option"
-                         class="btn btn-sm btn-primary btn-simple"
-                         :class="{active: bigLineChart.activeIndex === index}"
-                         :id="index">
-                    <input type="radio"
-                           @click="initBigChart(index)"
-                           name="options" autocomplete="off"
-                           :checked="bigLineChart.activeIndex === index">
-                    {{option}}
-                  </label>
-                </div>
-              </div>
-            </div>
-          </template>
-          <div class="chart-area">
-            <line-chart style="height: 100%"
-                        :chart-data="bigLineChart.chartData"
-                        :gradient-color="bigLineChart.gradientColors"
-                        :gradient-stops="bigLineChart.gradientStops"
-                        :extra-options="bigLineChart.extraOptions">
-            </line-chart>
-          </div>
-        </card>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-lg-4">
-        <card type="chart" class="text-right">
-          <template slot="header">
-            <h5 class="card-category">Total Shipments</h5>
-            <h3 class="card-title"><i class="tim-icons icon-bell-55 text-primary"></i> 763,215</h3>
-          </template>
-          <div class="chart-area">
-            <line-chart style="height: 100%"
-                        :chart-data="purpleLineChart.chartData"
-                        :gradient-color="purpleLineChart.gradientColors"
-                        :gradient-stops="purpleLineChart.gradientStops"
-                        :extra-options="purpleLineChart.extraOptions">
-            </line-chart>
-          </div>
-        </card>
-      </div>
-      <div class="col-lg-4">
-        <card type="chart" class="text-right">
-          <template slot="header">
-            <h5 class="card-category">Daily Sales</h5>
-            <h3 class="card-title"><i class="tim-icons icon-delivery-fast text-info "></i> 3,500€</h3>
-          </template>
-          <div class="chart-area">
-            <bar-chart style="height: 100%"
-                       :chart-data="blueBarChart.chartData"
-                       :gradient-color="blueBarChart.gradientColors"
-                       :gradient-stops="blueBarChart.gradientStops"
-                       :extra-options="blueBarChart.extraOptions">
-            </bar-chart>
-          </div>
-        </card>
-      </div>
-      <div class="col-lg-4">
-        <card type="chart" class="text-right">
-          <template slot="header">
-            <h5 class="card-category">Completed Tasks</h5>
-            <h3 class="card-title"><i class="tim-icons icon-send text-success "></i> 12,100K</h3>
-          </template>
-          <div class="chart-area">
-            <line-chart style="height: 100%"
-                        :chart-data="greenLineChart.chartData"
-                        :gradient-color="greenLineChart.gradientColors"
-                        :gradient-stops="greenLineChart.gradientStops"
-                        :extra-options="greenLineChart.extraOptions">
-            </line-chart>
-          </div>
-        </card>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-lg-6 col-md-12">
-        <card type="tasks" class="text-right">
-          <template slot="header">
-            <h6 class="title d-inline">Tasks(5)</h6>
-            <p class="card-category d-inline">today</p>
-            <div class="dropdown float-left">
-              <button type="button" class="btn btn-link dropdown-toggle btn-icon" data-toggle="dropdown">
-                <i class="tim-icons icon-settings-gear-63"></i>
-              </button>
-              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
-                <a class="dropdown-item" href="#pablo">Action</a>
-                <a class="dropdown-item" href="#pablo">Another action</a>
-                <a class="dropdown-item" href="#pablo">Something else</a>
-              </div>
-            </div>
-          </template>
-          <div class="table-full-width table-responsive">
-            <task-list></task-list>
-          </div>
-        </card>
-      </div>
-      <div class="col-lg-6 col-md-12">
-        <card class="text-right">
-          <h4 slot="header" class="card-title"> Simple Table</h4>
-          <div class="table-responsive">
-            <user-table></user-table>
-          </div>
-        </card>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-  import LineChart from '@/components/Charts/LineChart';
-  import BarChart from '@/components/Charts/BarChart';
-  import * as chartConfigs from '@/components/Charts/config';
-  import TaskList from './Dashboard/TaskList';
-  import UserTable from './Dashboard/UserTable';
-
-  export default {
-    components: {
-      LineChart,
-      BarChart,
-      TaskList,
-      UserTable
-    },
-    data() {
-      return {
-        bigLineChart: {
-          allData: [
-            [100, 70, 90, 70, 85, 60, 75, 60, 90, 80, 110, 100],
-            [80, 120, 105, 110, 95, 105, 90, 100, 80, 95, 70, 120],
-            [60, 80, 65, 130, 80, 105, 90, 130, 70, 115, 60, 130]
-          ],
-          activeIndex: 0,
-          chartData: null,
-          extraOptions: chartConfigs.purpleChartOptions,
-          gradientColors: ['rgba(72,72,176,0.1)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
-          gradientStops: [1, 0.4, 0],
-          categories: ['Accounts', 'Purchases', 'Sessions']
-        },
-        purpleLineChart: {
-          extraOptions: chartConfigs.purpleChartOptions,
-          chartData: {
-            labels: ['JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
-            datasets: [{
-              label: "Data",
-              fill: true,
-              borderColor: '#d048b6',
-              borderWidth: 2,
-              borderDash: [],
-              borderDashOffset: 0.0,
-              pointBackgroundColor: '#d048b6',
-              pointBorderColor: 'rgba(255,255,255,0)',
-              pointHoverBackgroundColor: '#d048b6',
-              pointBorderWidth: 20,
-              pointHoverRadius: 4,
-              pointHoverBorderWidth: 15,
-              pointRadius: 4,
-              data: [80, 100, 70, 80, 120, 80],
-            }]
-          },
-          gradientColors: ['rgba(72,72,176,0.2)', 'rgba(72,72,176,0.0)', 'rgba(119,52,169,0)'],
-          gradientStops: [1, 0.2, 0],
-        },
-        greenLineChart: {
-          extraOptions: chartConfigs.greenChartOptions,
-          chartData: {
-            labels: ['JUL', 'AUG', 'SEP', 'OCT', 'NOV'],
-            datasets: [{
-              label: "My First dataset",
-              fill: true,
-              borderColor: '#00d6b4',
-              borderWidth: 2,
-              borderDash: [],
-              borderDashOffset: 0.0,
-              pointBackgroundColor: '#00d6b4',
-              pointBorderColor: 'rgba(255,255,255,0)',
-              pointHoverBackgroundColor: '#00d6b4',
-              pointBorderWidth: 20,
-              pointHoverRadius: 4,
-              pointHoverBorderWidth: 15,
-              pointRadius: 4,
-              data: [90, 27, 60, 12, 80],
-            }]
-          },
-          gradientColors: ['rgba(66,134,121,0.15)', 'rgba(66,134,121,0.0)', 'rgba(66,134,121,0)'],
-          gradientStops: [1, 0.4, 0],
-        },
-        blueBarChart: {
-          extraOptions: chartConfigs.barChartOptions,
-          chartData: {
-            labels: ['USA', 'GER', 'AUS', 'UK', 'RO', 'BR'],
-            datasets: [{
-              label: "Countries",
-              fill: true,
-              borderColor: '#1f8ef1',
-              borderWidth: 2,
-              borderDash: [],
-              borderDashOffset: 0.0,
-              data: [53, 20, 10, 80, 100, 45],
-            }]
-          },
-          gradientColors: ['rgba(29,140,248,0.2)', 'rgba(29,140,248,0.0)', 'rgba(29,140,248,0)'],
-          gradientStops: [1, 0.4, 0],
-        }
-      }
-    },
-    methods: {
-      initBigChart(index) {
-        this.bigLineChart.chartData = {
-          datasets: [{
-            label: "My First dataset",
-            fill: true,
-            borderColor: '#d346b1',
-            borderWidth: 2,
-            borderDash: [],
-            borderDashOffset: 0.0,
-            pointBackgroundColor: '#d346b1',
-            pointBorderColor: 'rgba(255,255,255,0)',
-            pointHoverBackgroundColor: '#d346b1',
-            pointBorderWidth: 20,
-            pointHoverRadius: 4,
-            pointHoverBorderWidth: 15,
-            pointRadius: 4,
-            data: this.bigLineChart.allData[index]
-          }],
-          labels: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
-        }
-        this.bigLineChart.activeIndex = index;
-      }
-    },
-    mounted() {
-      this.$rtl.enableRTL();
-      this.initBigChart(0);
-    },
-    beforeDestroy() {
-      this.$rtl.disableRTL();
-    }
-  };
-</script>
-<style>
-</style>

src/router/index.js

@@ -6,7 +6,7 @@ Vue.use(VueRouter);
 // configure router
 const router = new VueRouter({
   routes, // short for routes: routes
-  linkActiveClass: "active",
+  linkExactActiveClass: "active",
   scrollBehavior: (to) => {
     if (to.hash) {
       return {selector: to.hash}

src/router/routes.js

@@ -4,7 +4,6 @@ import NotFound from "@/pages/NotFoundPage.vue";
 
 // Admin pages
 import Dashboard from "@/pages/Dashboard.vue";
-import RTLSupport from "@/pages/RTLSupport.vue";
 import Profile from "@/pages/Profile.vue";
 import Notifications from "@/pages/Notifications.vue";
 import Icons from "@/pages/Icons.vue";
@@ -52,12 +51,7 @@ const routes = [
         path: "table-list",
         name: "table-list",
         component: TableList
-      },
+      }
-      {
-        path: "rtl-support",
-        name: "RTLSupport",
-        component: RTLSupport
-      },
     ]
   },
   { path: "*", component: NotFound },