Merge remote-tracking branch 'origin/main'

SC-web/src/components/VisualPortal/LayoutB/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div style="margin-bottom: 12px;">
+    <el-row :gutter="12">
+      <template v-for="item in layout">
+        <el-col :span="12" v-if="item.jnpfKey === 'todo'">
+            <Todo v-if="item.jnpfKey === 'todo'" :title="item.title" />
+        </el-col>
+        <el-col :span="12" v-if="item.jnpfKey === 'commonFunc'">
+            <CommonFunc v-if="item.jnpfKey === 'commonFunc'" :title="item.title" :list="item.list" />
+        </el-col>
+      </template>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import {
+  Todo,
+  CommonFunc,
+} from "@/components/VisualPortal"
+//import VueGridLayout from 'vue-grid-layout'
+export default {
+  props: {
+    layout: { type: Array, default: () => [] },
+    mask: { type: Boolean, default: false },
+  },
+  components: {
+    Todo,
+    CommonFunc,
+  },
+}
+</script>
+<style lang="scss" scoped>
+.layout-area {
+  height: 300px;
+  overflow: hidden;
+
+  .el-scrollbar__wrap {
+    margin-bottom: 0 !important;
+    overflow-x: auto;
+  }
+
+  .el-scrollbar__bar.is-horizontal>div {
+    display: none;
+  }
+
+  .el-card {
+    width: 100%;
+    height: 100%;
+
+    .el-card__body {
+      padding: 0;
+    }
+  }
+
+  .vue-grid-item {
+    position: relative;
+
+    .mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    }
+  }
+}
+</style>

SC-web/src/components/VisualPortal/LayoutC/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div style="margin-bottom: 12px;">
+    <el-row :gutter="12">
+      <template v-for="item in layout">
+        <el-col :span="12" v-if="item.jnpfKey === 'barChart'">
+          <HBarChart :title="item.title" :option="item.option" :dataType="item.dataType" :propsApi="item.propsApi" />
+        </el-col>
+        <el-col :span="12" v-if="item.jnpfKey === 'annularChart'">
+          <HAnnularChart :title="item.title" :option="item.option" :dataType="item.dataType" :propsApi="item.propsApi" />
+        </el-col>
+        <el-col :span="12" v-if="item.jnpfKey === 'areaChart'">
+          <HAreaChart :title="item.title" :option="item.option" :dataType="item.dataType" :propsApi="item.propsApi" />
+        </el-col>
+        <el-col :span="12" v-if="item.jnpfKey === 'lineChart'">
+          <HLineChart :title="item.title" :option="item.option" :dataType="item.dataType" :propsApi="item.propsApi" />
+        </el-col>
+        <el-col :span="12" v-if="item.jnpfKey === 'pieChart'">
+          <HPieChart :title="item.title" :option="item.option" :dataType="item.dataType" :propsApi="item.propsApi" />
+        </el-col>
+        <el-col :span="12" v-if="item.jnpfKey === 'radarChart'">
+          <HRadarChart  :title="item.title" :option="item.option"
+            :dataType="item.dataType" :propsApi="item.propsApi" />
+        </el-col>
+      </template>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import {
+  Todo,
+  CommonFunc,
+  TodoList,
+  HNotice,
+  HEmail,
+  DataBoard,
+  HBarChart,
+  HAnnularChart,
+  HAreaChart,
+  HLineChart,
+  HPieChart,
+  HRadarChart
+} from "@/components/VisualPortal"
+import VueGridLayout from 'vue-grid-layout'
+export default {
+  props: {
+    layout: { type: Array, default: () => [] },
+    mask: { type: Boolean, default: false },
+  },
+  components: {
+    GridLayout: VueGridLayout.GridLayout,
+    GridItem: VueGridLayout.GridItem,
+    Todo,
+    CommonFunc,
+    TodoList,
+    HNotice,
+    HEmail,
+    DataBoard,
+    HBarChart,
+    HAnnularChart,
+    HAreaChart,
+    HLineChart,
+    HPieChart,
+    HRadarChart
+  },
+}
+</script>
+<style lang="scss" scoped>
+.layout-area {
+  height: 100%;
+  overflow: hidden;
+
+  >>>.el-scrollbar__wrap {
+    margin-bottom: 0 !important;
+    overflow-x: auto;
+  }
+
+  >>>.el-scrollbar__bar.is-horizontal>div {
+    display: none;
+  }
+
+  >>>.el-card {
+    width: 100%;
+    height: 100%;
+
+    .el-card__body {
+      padding: 0;
+    }
+  }
+
+  .vue-grid-item {
+    position: relative;
+
+    .mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    }
+  }
+}
+</style>

SC-web/src/components/VisualPortal/Todo/index.vue

@@ -3,7 +3,7 @@
     <div slot="header" class="portal-common-title">
       <span>{{ title }}</span>
     </div>
-    <div class="todo-box-body">
+    <div class="todo-box-body sty-now">
       <router-link class="item" to="/workFlow/flowTodo">
         <i class="icon-ym icon-ym-flowTodo"></i>
         <div class="text">
@@ -57,19 +57,22 @@ export default {
 </script>
 <style lang="scss" scoped>
 .todo-box {
-  >>> .el-card__body {
+  .el-card__body {
     width: 100%;
     height: calc(100% - 55px);
   }
+
   .todo-box-body {
-    padding: 0 30px;
+    padding: 7px 30px;
     height: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
+
     .item {
       height: 56px;
       display: block;
+
       i {
         width: 56px;
         height: 56px;
@@ -81,23 +84,29 @@ export default {
         text-align: center;
         line-height: 56px;
         font-size: 30px;
+
         &.icon-ym-flowTodo {
           background: #f68900;
         }
+
         &.icon-ym-flowEntrust {
           background: #1890ff;
         }
+
         &.icon-ym-flowDone {
           background: #7b1ae1;
         }
       }
+
       .text {
         display: inline-block;
         height: 56px;
+
         .num {
           font-size: 20px;
           line-height: 36px;
         }
+
         .name {
           font-size: 14px;
           color: #666;
@@ -105,5 +114,4 @@ export default {
       }
     }
   }
-}
+}</style>
-</style>

SC-web/src/store/modules/tagsView.js

@@ -5,6 +5,8 @@ const state = {
 
 const mutations = {
   ADD_VISITED_VIEW: (state, view) => {
+    // 封门户
+    if(view.name === 'dashboard') return
     if (state.visitedViews.some(v => v.path === view.path)) return
     state.visitedViews.push(
       Object.assign({}, view, {

SC-web/src/views/dashboard/admin/components/LineChartA.vue

@@ -0,0 +1,132 @@
+<template>
+  <div id="charta" style="width:100%;height:400px;margin-top:30px;"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from './mixins/resize'
+export default {
+  name: 'charta',
+  mixins: [resize],
+  data() {
+    return {
+      chart: null,
+      option: {
+        title: {
+          text: '近7日采购量',
+          textStyle: {
+            fontSize: 16,
+            fontWeight: 900,
+            color: '#333'
+          }
+        },
+        grid: {
+          x: 80,
+          y: 50,
+          x2: 50,
+          y2: 60,
+          borderWidth: 0
+        },
+        // legend: {
+        //   data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
+        //   top : '55%',
+        //   orient: 'vertical',
+        //   textStyle:{//图例文字的样式
+        //     color:'#dbdbdb' 
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          // formatter:function(){
+          //   return '整天数据'+"<br>"+'交易'
+          // }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['2AM', '4AM', '6AM', '8AM', '10AM',
+            '12AM', '2PM', '4PM', '6PM', '8PM', '10PM', '12PM'],
+          axisLine: {
+            show: false, //是否显示x轴
+            lineStyle: {
+              // color: '#dbdbdb', // y坐标轴的轴线颜色
+              // width: 1, //这里是坐标轴的宽度,可以去掉
+            }
+          },
+          axisTick: {
+            show: false, //是否显示刻度
+          },
+          // X轴的字体样式
+          axisLabel: {
+            show: true, //这行代码控制着坐标轴y轴的文字是否显示
+            textStyle: {
+              color: '#666', //X轴上的字体颜色
+              fontSize: '12', // X轴字体大小
+
+            }
+          },
+        },
+        yAxis: {
+          type: 'value',
+          // y轴的颜色和宽度
+          axisLine: {
+            show: false, //是否显示y轴
+            lineStyle: {
+              // color: '#000', // y坐标轴的轴线颜色
+              // width: 1, //这里是坐标轴的宽度,可以去掉
+            }
+          },
+          axisTick: {
+            show: false, //是否显示刻度
+          },
+          // y轴的字体样式
+          axisLabel: {
+            show: true, //这行代码控制着坐标轴y轴的文字是否显示
+            textStyle: {
+              color: '#666', //y轴上的字体颜色
+              fontSize: '12' // y轴字体大小
+            }
+          },
+        },
+        series: [{
+          data: [0, 2820, 8932, 5700, 7901, 4934, 5000, 3000, 4090, 2330, 3820, 0],
+          type: 'line',
+          radius: '100%',
+          center: ['100%', '50%'],
+          areaStyle: {},
+          smooth: true,
+          areaStyle: {
+            color: '#d0e2f3'
+          },
+          itemStyle: {
+            normal: {
+              color: '#1890FF', //改变折线点的颜色
+              lineStyle: {
+                color: '#1890FF' //改变折线颜色
+              }
+            }
+          },
+          stack: '总量',
+        }]
+      }
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById('charta'))
+      this.chart.setOption(this.option);
+      window.onresize = this.chart.resize()
+    }
+  }
+}
+</script>

SC-web/src/views/dashboard/admin/components/LineChartB.vue

@@ -0,0 +1,132 @@
+<template>
+  <div id="chartb" style="width:100%;height:400px;margin-top:30px;"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import resize from './mixins/resize'
+export default {
+  name: 'chartb',
+  mixins: [resize],
+  data() {
+    return {
+      chart: null,
+      option: {
+        title: {
+          text: '近7日销售量',
+          textStyle: {
+            fontSize: 16,
+            fontWeight: 900,
+            color: '#333'
+          }
+        },
+        grid: {
+          x: 80,
+          y: 50,
+          x2: 50,
+          y2: 60,
+          borderWidth: 0
+        },
+        // legend: {
+        //   data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
+        //   top : '55%',
+        //   orient: 'vertical',
+        //   textStyle:{//图例文字的样式
+        //     color:'#dbdbdb' 
+        //   }
+        // },
+        tooltip: {
+          trigger: 'axis',
+          // formatter:function(){
+          //   return '整天数据'+"<br>"+'交易'
+          // }
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['2AM', '4AM', '6AM', '8AM', '10AM',
+            '12AM', '2PM', '4PM', '6PM', '8PM', '10PM', '12PM'],
+          axisLine: {
+            show: false, //是否显示x轴
+            lineStyle: {
+              // color: '#dbdbdb', // y坐标轴的轴线颜色
+              // width: 1, //这里是坐标轴的宽度,可以去掉
+            }
+          },
+          axisTick: {
+            show: false, //是否显示刻度
+          },
+          // X轴的字体样式
+          axisLabel: {
+            show: true, //这行代码控制着坐标轴y轴的文字是否显示
+            textStyle: {
+              color: '#666', //X轴上的字体颜色
+              fontSize: '12', // X轴字体大小
+
+            }
+          },
+        },
+        yAxis: {
+          type: 'value',
+          // y轴的颜色和宽度
+          axisLine: {
+            show: false, //是否显示y轴
+            lineStyle: {
+              // color: '#000', // y坐标轴的轴线颜色
+              // width: 1, //这里是坐标轴的宽度,可以去掉
+            }
+          },
+          axisTick: {
+            show: false, //是否显示刻度
+          },
+          // y轴的字体样式
+          axisLabel: {
+            show: true, //这行代码控制着坐标轴y轴的文字是否显示
+            textStyle: {
+              color: '#666', //y轴上的字体颜色
+              fontSize: '12' // y轴字体大小
+            }
+          },
+        },
+        series: [{
+          data: [0, 2820, 8932, 5700, 7901, 4934, 5000, 3000, 4090, 2330, 3820, 0],
+          type: 'line',
+          radius: '100%',
+          center: ['100%', '50%'],
+          areaStyle: {},
+          smooth: true,
+          areaStyle: {
+            color: '#d0e2f3'
+          },
+          itemStyle: {
+            normal: {
+              color: '#1890FF', //改变折线点的颜色
+              lineStyle: {
+                color: '#1890FF' //改变折线颜色
+              }
+            }
+          },
+          stack: '总量',
+        }]
+      }
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById('chartb'))
+      this.chart.setOption(this.option);
+      window.onresize = this.chart.resize()
+    }
+  }
+}
+</script>

SC-web/src/views/dashboard/admin/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="dashboard-editor-container">
+    <PortalLayoutB :layout="layout" v-if="type === 0" />
     <div class="sale">
       <div class="sale_title">
         <span> 销售指数</span>
@@ -41,29 +42,64 @@
       </ul>
     </div>
     <panel-group />
+    <!-- <el-row style="background:#fff;padding:0 16px;margin-bottom:10px;border-radius: 4px;">
+      <div class="dateSelect">
+        <el-date-picker v-model="value1" type="date" placeholder="进7日" size="small">
+        </el-date-picker>
+      </div>
+      <line-chart-a />
+    </el-row>
+    <el-row style="background:#fff;padding:0 16px;margin-bottom:10px;border-radius: 4px;">
+      <div class="dateSelect">
+        <el-date-picker v-model="value1" type="date" placeholder="进7日" size="small">
+        </el-date-picker>
+      </div>
+      <line-chart-b />
+    </el-row> -->
+    <el-row :gutter="12">
+      <el-col :span="12">
         <el-row style="background:#fff;padding:0 16px;margin-bottom:10px;border-radius: 4px;">
+          <div class="dateSelect">
+            <el-date-picker v-model="value1" type="date" placeholder="进7日" size="small">
+            </el-date-picker>
+          </div>
+          <line-chart-a />
+        </el-row>
+      </el-col>
+      <el-col :span="12">
+        <el-row style="background:#fff;padding:0 16px;margin-bottom:10px;border-radius: 4px;">
+          <div class="dateSelect">
+            <el-date-picker v-model="value1" type="date" placeholder="进7日" size="small">
+            </el-date-picker>
+          </div>
+          <line-chart-b />
+        </el-row>
+      </el-col>
+    </el-row>
+    <!-- <el-row style="background:#fff;padding:0 16px;margin-bottom:10px;border-radius: 4px;">
       <div class="dateSelect">
         <el-date-picker v-model="value1" type="date" placeholder="选择日期" size="small">
         </el-date-picker>
       </div>
       <line-chart />
-    </el-row>
+    </el-row> -->
+    <!-- <PortalLayoutC :layout="layout" v-if="type === 0" /> -->
     <el-row :gutter="10" class="notice">
       <el-col :span="12">
         <div class="notice_left">
           <div class="notice_title">
             <div class="title_left">
-              <span>公告通知</span>
+              <span>消息通知</span>
             </div>
             <div class="title_right">
-              查看更多 >
+
             </div>
           </div>
           <div class="no_left_massage">
             <ul>
               <li v-for="(item, index) in massageList" :key="index">
-                <p class="com-hover">{{item.title}}</p>
+                <p class="com-hover">{{ item.head }}</p>
-                <span class="time">{{item.listDate}}</span>
+                <span class="time">{{ item.creatorTime }}</span>
               </li>
             </ul>
           </div>
@@ -73,7 +109,7 @@
         <div class="notice_right">
           <div class="notice_title">
             <div class="title_left">
-              <span>进行中的项目</span>
+              <span>进行中的合同</span>
             </div>
             <div class="title_right">
               查看更多 >
@@ -138,41 +174,84 @@
 </template>
 
 <script>
+import request from '@/utils/request'
+import { getAuthPortal } from '@/api/onlineDev/portal'
+import PortalLayoutB from '@/components/VisualPortal/LayoutB'
+import PortalLayoutC from '@/components/VisualPortal/LayoutC'
+import { mapGetters } from 'vuex'
 import echarts from 'echarts'
 import PanelGroup from './components/PanelGroup'
-  import LineChart from './components/LineChart'
+import LineChartA from './components/LineChartA'
+import LineChartB from './components/LineChartB'
 import CountTo from 'vue-count-to'
 export default {
   name: 'DashboardAdmin',
   components: {
     PanelGroup,
-      LineChart,
+    LineChartA,
-      CountTo
+    LineChartB,
+    CountTo,
+    PortalLayoutB,
+    PortalLayoutC
   },
   data() {
     return {
+      type: null,
+      layout: [],
       value1: '',
       charts: '',
       opinionData: ["3", "2", "4", "4", "5"],
-        massageList: [
+      massageList: []
-          { title: '【通知】中秋国庆双节放假通知', listDate: '2020-09-19' },
-          { title: '【公告】你好朋友，感谢使用再生资源智慧管家平台', listDate: '2020-09-18' },
-          { title: '【通知】月饼发放通知，请各部门主管到行政部领取', listDate: '2020-09-17' },
-          { title: '【公告】本季度销售之星名单公示', listDate: '2020-09-16' },
-          { title: '【通知】公司上班时间调整通知，下月执行', listDate: '2020-09-15' },
-          { title: '【公告】公司新上任总裁任命书', listDate: '2020-09-14' },
-          { title: '【公告】午餐补贴通知，本月生效', listDate: '2020-09-13' },
-          { title: '【通知】公司技术交流培训课通知', listDate: '2020-09-12' },
-          { title: '【通知】关于公司组织员工秋季旅游通知', listDate: '2020-09-11' },
-        ]
     }
   },
   computed: {
     sysConfig() {
       return this.$store.state.settings.sysConfig
+    },
+    ...mapGetters(['userInfo'])
+  },
+  created() {
+    this.portalId = this.userInfo.portalId
+    this.getData()
+    this.getMsg()
+  },
+  methods: {
+    getData() {
+      getAuthPortal(this.portalId).then(res => {
+        this.type = res.data.type || 0
+        if (res.data) {
+          if (res.data.type === 1) {
+            if (res.data.customUrl && res.data.customUrl !== 1) {
+              this.currentView = (resolve) => require([`@/views/${res.data.customUrl}`], resolve)
+            }
+          } else {
+            if (res.data.formData) {
+              let formData = JSON.parse(res.data.formData)
+              this.layout = formData.layout || []
+            }
           }
+        }
+      });
+    },
+    getMsg() {
+      request({
+        url: "/api/messageCenter/MessageCenter/getMobileList",
+        method: "post",
+        data: {
+          currentPage: 1,
+					pageSize: 9,
         },
-    methods: {}
+      }).then(res => {
+        if(res.code==200){
+          let _list = res.data.list;
+          this.massageList = _list;
+          //console.log(_list)
+        }
+      }).catch(() => {
+      })
+      console.log('getMsg')
+    }
+  }
 }
 </script>
 
@@ -181,9 +260,11 @@
   background: #fff;
   margin-bottom: 10px;
   border-radius: 4px;
+
   .sale_title {
     padding-top: 16px;
     padding-left: 22px;
+
     span {
       &:first-child {
         font-size: 16px;
@@ -191,26 +272,31 @@
         color: #333;
         margin-right: 10px;
       }
+
       &:nth-child(2) {
         color: #999;
         font-size: 12px;
       }
     }
   }
+
   .sale_items {
     display: flex;
     justify-content: space-around;
     padding: 34px 0;
+
     li {
       display: flex;
       flex-direction: column;
       text-align: center;
+
       .nums {
         font-size: 26px !important;
         padding-top: 13px;
         padding-bottom: 9px;
         color: #1890ff;
         font-weight: 600;
+
         span {
           font-size: 26px !important;
           padding-top: 13px;
@@ -219,6 +305,7 @@
           font-weight: 600;
         }
       }
+
       .lastnums {
         font-size: 26px !important;
         padding-top: 13px;
@@ -226,11 +313,13 @@
         font-weight: 600;
         color: #333;
       }
+
       &:first-child {
         span:last-child {
           color: #08b41f;
         }
       }
+
       &:nth-child(4) {
         span {
           &:last-child {
@@ -238,6 +327,7 @@
           }
         }
       }
+
       &:nth-child(2) {
         span {
           &:last-child {
@@ -245,6 +335,7 @@
           }
         }
       }
+
       &:nth-child(3) {
         span {
           &:last-child {
@@ -252,6 +343,7 @@
           }
         }
       }
+
       &:last-child {
         span {
           &:last-child {
@@ -259,6 +351,7 @@
           }
         }
       }
+
       span {
         &:nth-child(2) {
           font-size: 26px !important;
@@ -267,6 +360,7 @@
           color: #1890ff;
           font-weight: 600;
         }
+
         &:nth-child(3) {
           font-size: 12px;
         }
@@ -274,34 +368,41 @@
     }
   }
 }
+
 .notice {
   padding-bottom: 20px;
+
   .notice_title {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 60px;
     padding: 0 25px;
+
     .title_left {
       display: flex;
       align-items: center;
+
       span {
         font-size: 16px;
         font-weight: bold;
         color: #333;
       }
     }
+
     .title_right {
       font-size: 12px;
       color: #999;
       line-height: 30px;
     }
   }
+
   .notice_right {
     background: #fff;
     height: 400px;
     border-radius: 4px;
     overflow: hidden;
+
     .no_right_massage {
       li {
         display: flex;
@@ -309,20 +410,24 @@
         border: 1px;
         height: 170px;
         border-top: 1px solid #f2f2f5;
+
         .right_item {
           width: 50%;
           padding: 16px 20px;
           display: flex;
           flex-direction: column;
           justify-content: space-between;
+
           .right-top {
             font-size: 14px;
             display: flex;
             align-items: center;
+
             img {
               margin-right: 10px;
             }
           }
+
           p {
             font-size: 14px;
             line-height: 22px;
@@ -337,6 +442,7 @@
             -webkit-box-orient: vertical;
             /* autoprefixer: on */
           }
+
           .bt {
             display: flex;
             justify-content: space-between;
@@ -344,21 +450,25 @@
             color: #999;
           }
         }
+
         .linet {
           border-left: 1px solid #f2f2f5;
         }
       }
     }
   }
+
   .notice_left {
     background: #fff;
     height: 400px;
     border-radius: 4px;
     overflow: hidden;
+
     .no_left_massage {
       height: 340px;
       padding: 10px 20px;
       border-top: 1px solid #f2f2f5;
+
       ul {
         li {
           display: flex;
@@ -367,14 +477,16 @@
           color: #303133;
           padding: 10px 0;
           cursor: pointer;
+
           p {
             width: calc(100% - 80px);
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
           }
+
           .time {
-              width: 80px;
+            width: 180px;
             display: inline-block;
             text-align: right;
             color: #999999;
@@ -411,15 +523,18 @@
     margin-bottom: 20px;
   }
 }
+
 .dateSelect {
   position: absolute;
   right: 67px;
   top: 38px;
   z-index: 100;
+
   .el-date-editor {
     width: 160px;
   }
 }
+
 @media (max-width: 1024px) {
   .chart-wrapper {
     padding: 8px;