<template>

  <mdb-container class="white-text text-center d-flex justify-content-center">

    <div class="mask"></div>

    <mdb-card class="mobile-view">

      <mdb-card-header class="pt-1 pb-1 container-fluid phone-header">

        <mdb-row class="d-flex justify-content-between">

          <mdb-col col="2">

            <mdb-icon size="sm" icon="wifi"></mdb-icon>

          </mdb-col>

          <mdb-col col="3">

            <mdb-icon size="sm" class="pr-2" icon="headphones-alt"></mdb-icon>

            <mdb-icon size="sm" icon="battery-full"></mdb-icon>

          </mdb-col>

        </mdb-row>

      </mdb-card-header>

      <mdb-card-header class="pb-1 app-frame">

        <mdb-icon icon="chevron-left" size="lg" class="float-left mt-1"></mdb-icon>

        <p>My app</p>

      </mdb-card-header>

      <mdb-tab tabs justify class="m-0 app-frame">

        <mdb-tab-item

          icon="chart-line"

          :active="pillsActive==0"

          @click.native.prevent="pillsActive=0"

        >Statistics</mdb-tab-item>

        <mdb-tab-item

          icon="bullseye"

          :active="pillsActive==1"

          @click.native.prevent="pillsActive=1"

        >Target</mdb-tab-item>

      </mdb-tab>

      <mdb-card-body class="p-0 m-0 mobile-body scrollbar-dusty-grass thin">

        <mdb-tab-content>

          <mdb-tab-pane class="fade" key="show1" v-if="pillsActive==0">

            <mdb-line-chart :data="chartData" :options="chartOptions" :width="600" :height="300"></mdb-line-chart>

            <hr class="rule m-4" />

            <mdb-bar-chart :data="barChartData" :options="chartOptions" :width="600" :height="300"></mdb-bar-chart>

          </mdb-tab-pane>

          <mdb-tab-pane class="fade" key="show2" v-if="pillsActive==1">

            <mdb-container>

              <h4>Target completed in</h4>

              <mdb-simple-chart style="margin: 24px auto;" :value="88" color="rgb(150, 230, 161)">88%</mdb-simple-chart>

              <h4>Increase of performance</h4>

              <p>Compared to the last year</p>

              <mdb-simple-chart style="margin: 24px auto;" :value="57" color="#d4fc79">57%</mdb-simple-chart>

              <h4>Tasks left</h4>

              <mdb-simple-chart style="margin: 24px auto;" :value="72" color="rgb(150, 230, 161)">23%</mdb-simple-chart>

            </mdb-container>

          </mdb-tab-pane>

        </mdb-tab-content>

      </mdb-card-body>

      <mdb-card-footer class="app-frame">Company Name®</mdb-card-footer>

    </mdb-card>

  </mdb-container>

</template>

body {

  background-color: rgba(0, 0, 0, 0.9);

  background-image: url("https://images.pexels.com/photos/1227648/pexels-photo-1227648.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");

  background-size: cover;

  background-repeat: no-repeat;

  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

}

​

.mask {

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  background-color: rgba(0, 0, 0, 0.6);

}

.phone-header {

  background-color: rgba(255, 255, 255, 0.5);

}

.app-frame {

  background-color: rgba(255, 255, 255, 0.1);

}

.mobile-view {

  width: 375px;

  background-color: rgba(255, 255, 255, 0.1);

  border-top: 1px solid rgba(255, 255, 255, 0.8);

  border-left: 1px solid rgba(255, 255, 255, 0.4);

}

​

.mobile-body {

  height: 460px;

  position: relative;

  overflow-y: scroll;

  margin: 10px;

}

​

.scrollbar-dusty-grass::-webkit-scrollbar-track {

  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);

  background-color: rgba(255, 255, 255, 0.1);

  border-radius: 10px;

}

​

.scrollbar-dusty-grass::-webkit-scrollbar {

  width: 12px;

  background-color: rgba(255, 255, 255, 0.1);

}

​

.scrollbar-dusty-grass::-webkit-scrollbar-thumb {

  border-radius: 10px;

  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);

  background-image: -webkit-linear-gradient(330deg, #d4fc79 0%, #96e6a1 100%);

  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);

}

​

.thin::-webkit-scrollbar {

  width: 6px;

}

​

.rule {

  background-color: rgba(150, 230, 161, 0.7);

}

import {

  mdbLineChart,

  mdbSimpleChart,

  mdbBarChart,

  mdbContainer,

  mdbCard,

  mdbCardHeader,

  mdbCardFooter,

  mdbCardBody,

  mdbIcon,

  mdbRow,

  mdbCol,

  mdbTab,

  mdbTabContent,

  mdbTabPane,

  mdbTabItem,

  mdbCardTitle

} from "mdbvue";

export default {

  name: "ChartPage",

  components: {

    mdbLineChart,

    mdbSimpleChart,

    mdbBarChart,

    mdbContainer,

    mdbCard,

    mdbCardHeader,

    mdbCardFooter,

    mdbCardBody,

    mdbIcon,

    mdbRow,

    mdbCol,

    mdbTab,

    mdbTabContent,

    mdbTabPane,

    mdbTabItem,

    mdbCardTitle

  },

  data() {

    return {

      target: 80,

      pillsActive: 0,

      verticalWithin: 0,

      chartData: {

        labels: [

          "I",

          "II",

          "III",

          "IV",

          "V",

          "VI",

          "VII",

          "VIII",

          "IX",

          "X",

          "XI",

          "XII"

        ],

        datasets: [

          {

            label: "new users",

            backgroundColor: "rgba(150, 230, 161, 0.1",

            borderColor: "rgba(150, 230, 161, 0.9",

            borderWidth: 0.8,

            data: [28, 48, 40, 19, 86, 27, 90, 70, 60, 50, 67, 72]

          }

        ]

      },

      barChartData: {

        labels: ["<18", "18-25", "26 - 34", " > 35"],

        datasets: [

          {

            label: "% users in the each age group",

            backgroundColor: [

              "rgba(150, 230, 161, 0.1",

              "rgba(150, 230, 161, 0.5",

              "rgba(150, 230, 161, 0.2",

              "rgba(150, 230, 161, 0.3"

            ],

            borderColor: "rgba(150, 230, 161, 0.8",

            borderWidth: 0.8,

            data: [12, 56, 18, 24]

          }

        ]

      },

      chartOptions: {

        responsive: true,

        maintainAspectRatio: false,

        scales: {

          xAxes: [

            {

              gridLines: {

                display: true,

                color: "rgba(255, 255, 255, 0.2)"

              }

            }

          ]

        }

      }

    };

  }

};