API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 24th, 2019
2,198
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.92 KB | None | 0 0
raw download clone embed print report
  1. <template>
  2. <div id="pageDashboard">
  3. <v-container grid-list-xl fluid>
  4. <v-layout row wrap>
  5. <!-- mini statistic start -->
  6. <v-flex lg3 sm6 xs12>
  7. <mini-statistic
  8. icon="fa fa-facebook"
  9. title="100+"
  10. sub-title="Likes"
  11. color="indigo"
  12. >
  13. </mini-statistic>
  14. </v-flex>
  15. <v-flex lg3 sm6 xs12>
  16. <mini-statistic
  17. icon="fa fa-google"
  18. title="150+"
  19. sub-title="Connections"
  20. color="red"
  21. >
  22. </mini-statistic>
  23. </v-flex>
  24. <v-flex lg3 sm6 xs12>
  25. <mini-statistic
  26. icon="fa fa-twitter"
  27. title="200+"
  28. sub-title="Followers"
  29. color="light-blue"
  30. >
  31. </mini-statistic>
  32. </v-flex>
  33. <v-flex lg3 sm6 xs12>
  34. <mini-statistic
  35. icon="fa fa-instagram"
  36. title="50+"
  37. sub-title="Shots"
  38. color="purple"
  39. >
  40. </mini-statistic>
  41. </v-flex>
  42. <!-- mini statistic end -->
  43. <v-flex lg8 sm12 xs12>
  44. <v-widget title="Site Traffic" content-bg="white">
  45. <v-btn icon slot="widget-header-action">
  46. <v-icon class="text--secondary">refresh</v-icon>
  47. </v-btn>
  48. <div slot="widget-content">
  49. <e-chart
  50. :path-option="[
  51. ['dataset.source', siteTrafficData],
  52. ['color', [color.lightBlue.base, color.green.lighten1]],
  53. ['legend.show', true],
  54. ['xAxis.axisLabel.show', true],
  55. ['yAxis.axisLabel.show', true],
  56. ['grid.left', '2%'],
  57. ['grid.bottom', '5%'],
  58. ['grid.right', '3%'],
  59. ['series[0].type', 'bar'],
  60. ['series[0].areaStyle', {}],
  61. ['series[0].smooth', true],
  62. ['series[1].smooth', true],
  63. ['series[1].type', 'bar'],
  64. ['series[1].areaStyle', {}],
  65. ]"
  66. height="400px"
  67. width="100%"
  68. >
  69. </e-chart>
  70. </div>
  71. </v-widget>
  72. </v-flex>
  73. <v-flex lg4 sm12 xs12>
  74. <v-widget title="Top Location" content-bg="white">
  75. <div slot="widget-content">
  76. <e-chart
  77. :path-option="[
  78. ['dataset.source', locationData],
  79. ['legend.bottom', '0'],
  80. ['color', [color.lightBlue.base, color.indigo.base, color.pink.base, color.green.base, color.cyan.base, color.teal.base]],
  81. ['xAxis.show', false],
  82. ['yAxis.show', false],
  83. ['series[0].type', 'pie'],
  84. ['series[0].avoidLabelOverlap', true],
  85. ['series[0].radius', ['50%', '70%']],
  86. ]"
  87. height="400px"
  88. width="100%"
  89. >
  90. </e-chart>
  91. </div>
  92. </v-widget>
  93. </v-flex>
  94. <!-- social/weather card start -->
  95. <v-flex lg4 sm12 xs12>
  96. <profile-card>
  97. </profile-card>
  98. </v-flex>
  99. <v-flex lg4 sm12 xs12>
  100. <box-chart
  101. card-color="indigo"
  102. title="Trending"
  103. sub-title="10%"
  104. icon="trending_up"
  105. :data="siteTrafficData"
  106. :chart-color="[color.indigo.lighten1]"
  107. type="line"
  108. >
  109. </box-chart>
  110. <box-chart class="mt-4"
  111. card-color="pink"
  112. title="Page views"
  113. sub-title="10%"
  114. icon="trending_up"
  115. :data="siteTrafficData"
  116. :chart-color="[color.pink.darken1, 'rgba(255,255,255,0.3)']"
  117. gradient
  118. type="area"
  119. >
  120. </box-chart>
  121. </v-flex>
  122. <!-- statistic section -->
  123. <v-flex lg4 sm12 xs12>
  124. <linear-statistic
  125. title="Sales"
  126. sub-title="Sales increase"
  127. icon="trending_up"
  128. color="success"
  129. :value="15"
  130. >
  131. </linear-statistic>
  132. <linear-statistic class="my-4"
  133. title="Orders"
  134. sub-title="Increase"
  135. icon="trending_up"
  136. color="pink"
  137. :value="30"
  138. >
  139. </linear-statistic>
  140. <linear-statistic class="my-4"
  141. title="Revenue"
  142. sub-title="Revenue increase"
  143. icon="trending_up"
  144. color="primary"
  145. :value="50"
  146. >
  147. </linear-statistic>
  148. <linear-statistic class="mt-4"
  149. title="Cost"
  150. sub-title="Cost reduce"
  151. icon="trending_down"
  152. color="orange"
  153. :value="25"
  154. >
  155. </linear-statistic>
  156. </v-flex>
  157. <!-- Circle statistic -->
  158. <v-flex lg4 sm12 xs12 v-for="(item,index) in trending" :key="'c-trending'+index">
  159. <circle-statistic
  160. :title="item.subheading"
  161. :sub-title="item.headline"
  162. :caption="item.caption"
  163. :icon="item.icon.label"
  164. :color="item.linear.color"
  165. :value="item.linear.value"
  166. >
  167. </circle-statistic>
  168. </v-flex>
  169. <!-- acitivity/chat widget -->
  170. <v-flex lg6 sm12 xs12>
  171. <chat-window height="308px"></chat-window>
  172. </v-flex>
  173. <v-flex lg6 sm12 xs12>
  174. <v-widget title="Activities" contentBg="white">
  175. <div slot="widget-content">
  176. <ol class="timeline timeline-activity timeline-point-sm timeline-content-right">
  177. <li class="timeline-block" v-for="(item, index) in activity" :key="index">
  178. <div class="timeline-point">
  179. <v-circle dot large :color="item.color"></v-circle>
  180. </div>
  181. <div class="timeline-content">
  182. <time datetime="2018" class="subheading">{{item.timeString}}</time>
  183. <div class="py-2 text--secondary" v-html="item.text"></div>
  184. </div>
  185. </li>
  186. </ol>
  187. </div>
  188. </v-widget>
  189. </v-flex>
  190. <v-flex lg7 sm12 xs12>
  191. <plain-table></plain-table>
  192. </v-flex>
  193. <v-flex lg5 sm12 xs12>
  194. <plain-table-order></plain-table-order>
  195. </v-flex>
  196. </v-layout>
  197. </v-container>
  198. </div>
  199. </template>
  200.  
  201. <script>
  202. import API from '@/api';
  203. import EChart from '@/components/chart/echart';
  204. import MiniStatistic from '@/components/widgets/statistic/MiniStatistic';
  205. import PostListCard from '@/components/widgets/card/PostListCard';
  206. import ProfileCard from '@/components/widgets/card/ProfileCard';
  207. import PostSingleCard from '@/components/widgets/card/PostSingleCard';
  208. import WeatherCard from '@/components/widgets/card/WeatherCard';
  209. import PlainTable from '@/components/widgets/list/PlainTable';
  210. import PlainTableOrder from '@/components/widgets/list/PlainTableOrder';
  211. import VWidget from '@/components/VWidget';
  212. import Material from 'vuetify/es5/util/colors';
  213. import VCircle from '@/components/circle/VCircle';
  214. import BoxChart from '@/components/widgets/chart/BoxChart';
  215. import ChatWindow from '@/components/chat/ChatWindow';
  216. import CircleStatistic from '@/components/widgets/statistic/CircleStatistic';
  217. import LinearStatistic from '@/components/widgets/statistic/LinearStatistic';
  218. export default {
  219. components: {
  220. VWidget,
  221. MiniStatistic,
  222. ChatWindow,
  223. VCircle,
  224. WeatherCard,
  225. PostSingleCard,
  226. PostListCard,
  227. ProfileCard,
  228. EChart,
  229. BoxChart,
  230. CircleStatistic,
  231. LinearStatistic,
  232. PlainTable,
  233. PlainTableOrder
  234. },
  235. data: () => ({
  236. color: Material,
  237. selectedTab: 'tab-1',
  238. linearTrending: [
  239. {
  240. subheading: 'Sales',
  241. headline: '2,55',
  242. caption: 'increase',
  243. percent: 15,
  244. icon: {
  245. label: 'trending_up',
  246. color: 'success'
  247. },
  248. linear: {
  249. value: 15,
  250. color: 'success'
  251. }
  252. },
  253. {
  254. subheading: 'Revenue',
  255. headline: '6,553',
  256. caption: 'increase',
  257. percent: 10,
  258. icon: {
  259. label: 'trending_down',
  260. color: 'error'
  261. },
  262. linear: {
  263. value: 15,
  264. color: 'error'
  265. }
  266. },
  267. {
  268. subheading: 'Orders',
  269. headline: '5,00',
  270. caption: 'increase',
  271. percent: 50,
  272. icon: {
  273. label: 'arrow_upward',
  274. color: 'info'
  275. },
  276. linear: {
  277. value: 50,
  278. color: 'info'
  279. }
  280. }
  281. ],
  282. trending: [
  283. {
  284. subheading: 'Email',
  285. headline: '15+',
  286. caption: 'email opens',
  287. percent: 15,
  288. icon: {
  289. label: 'email',
  290. color: 'info'
  291. },
  292. linear: {
  293. value: 15,
  294. color: 'info'
  295. }
  296. },
  297. {
  298. subheading: 'Tasks',
  299. headline: '90%',
  300. caption: 'tasks completed.',
  301. percent: 90,
  302. icon: {
  303. label: 'list',
  304. color: 'primary'
  305. },
  306. linear: {
  307. value: 90,
  308. color: 'success'
  309. }
  310. },
  311. {
  312. subheading: 'Issues',
  313. headline: '100%',
  314. caption: 'issues fixed.',
  315. percent: 100,
  316. icon: {
  317. label: 'bug_report',
  318. color: 'primary'
  319. },
  320. linear: {
  321. value: 100,
  322. color: 'error'
  323. }
  324. },
  325. ]
  326. }),
  327. computed: {
  328. activity () {
  329. return API.getActivity();
  330. },
  331. posts () {
  332. return API.getPost(3);
  333. },
  334. siteTrafficData () {
  335. return API.getMonthVisit;
  336. },
  337. locationData () {
  338. return API.getLocation;
  339. }
  340. },
  341.  
  342. };
  343. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!