cerc-io/cosmos-explorer
16
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove files

Browse Source
This commit is contained in:
liangping 2022-05-05 12:19:42 +08:00
parent 640bf71bc5
commit 3b497b0f20
25 changed files with 0 additions and 2321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/@core/auth/jwt/jwtDefaultConfig.js
View File

@ -1,15 +0,0 @@
export default {
// Endpoints
loginEndpoint: '/jwt/login',
registerEndpoint: '/jwt/register',
refreshEndpoint: '/jwt/refresh-token',
logoutEndpoint: '/jwt/logout',
// This will be prefixed in authorization header with token
// e.g. Authorization: Bearer <token>
tokenType: 'Bearer',
// Value of this property will be used as key to store JWT token in storage
storageTokenKeyName: 'accessToken',
storageRefreshTokenKeyName: 'refreshToken',
}

111
src/@core/auth/jwt/jwtService.js
View File

@ -1,111 +0,0 @@
import jwtDefaultConfig from './jwtDefaultConfig'
export default class JwtService {
// Will be used by this service for making API calls
axiosIns = null
// jwtConfig <= Will be used by this service
jwtConfig = { ...jwtDefaultConfig }
// For Refreshing Token
isAlreadyFetchingAccessToken = false
// For Refreshing Token
subscribers = []
constructor(axiosIns, jwtOverrideConfig) {
this.axiosIns = axiosIns
this.jwtConfig = { ...this.jwtConfig, ...jwtOverrideConfig }
// Request Interceptor
this.axiosIns.interceptors.request.use(
config => {
// Get token from localStorage
const accessToken = this.getToken()
// If token is present add it to request's Authorization Header
if (accessToken) {
// eslint-disable-next-line no-param-reassign
config.headers.Authorization = `${this.jwtConfig.tokenType} ${accessToken}`
}
return config
},
error => Promise.reject(error),
)
// Add request/response interceptor
this.axiosIns.interceptors.response.use(
response => response,
error => {
// const { config, response: { status } } = error
const { config, response } = error
const originalRequest = config
// if (status === 401) {
if (response && response.status === 401) {
if (!this.isAlreadyFetchingAccessToken) {
this.isAlreadyFetchingAccessToken = true
this.refreshToken().then(r => {
this.isAlreadyFetchingAccessToken = false
// Update accessToken in localStorage
this.setToken(r.data.accessToken)
this.setRefreshToken(r.data.refreshToken)
this.onAccessTokenFetched(r.data.accessToken)
})
}
const retryOriginalRequest = new Promise(resolve => {
this.addSubscriber(accessToken => {
// Make sure to assign accessToken according to your response.
// Check: https://pixinvent.ticksy.com/ticket/2413870
// Change Authorization header
originalRequest.headers.Authorization = `${this.jwtConfig.tokenType} ${accessToken}`
resolve(this.axiosIns(originalRequest))
})
})
return retryOriginalRequest
}
return Promise.reject(error)
},
)
}
onAccessTokenFetched(accessToken) {
this.subscribers = this.subscribers.filter(callback => callback(accessToken))
}
addSubscriber(callback) {
this.subscribers.push(callback)
}
getToken() {
return localStorage.getItem(this.jwtConfig.storageTokenKeyName)
}
getRefreshToken() {
return localStorage.getItem(this.jwtConfig.storageRefreshTokenKeyName)
}
setToken(value) {
localStorage.setItem(this.jwtConfig.storageTokenKeyName, value)
}
setRefreshToken(value) {
localStorage.setItem(this.jwtConfig.storageRefreshTokenKeyName, value)
}
login(...args) {
return this.axiosIns.post(this.jwtConfig.loginEndpoint, ...args)
}
register(...args) {
return this.axiosIns.post(this.jwtConfig.registerEndpoint, ...args)
}
refreshToken() {
return this.axiosIns.post(this.jwtConfig.refreshEndpoint, {
refreshToken: this.getRefreshToken(),
})
}
}

9
src/@core/auth/jwt/useJwt.js
View File

@ -1,9 +0,0 @@
import JwtService from './jwtService'
export default function useJwt(axiosIns, jwtOverrideConfig) {
const jwt = new JwtService(axiosIns, jwtOverrideConfig)
return {
jwt,
}
}

128
src/@core/components/app-auto-suggest/AppAutoSuggest.vue
View File

@ -1,128 +0,0 @@
<template>
<div class="app-auto-suggest">
<input
v-model="searchQuery"
type="text"
v-bind="inputProps"
>
<ul class="auto-suggest-suggestions-list">
<li
v-for="(suggestion_list, grp_name, grp_index) in filteredData"
:key="grp_index"
class="suggestions-groups-list"
>
<!-- Group Header -->
<p class="suggestion-group-title">
<slot
name="group"
:group_name="grp_name"
>
<span>
{{ grp_name }}
</span>
</slot>
</p>
<!-- Suggestion List of each group -->
<ul>
<li
v-for="(suggestion, index) in suggestion_list"
:key="index"
class="suggestion-group-suggestion cursor-pointer"
@click="suggestionSelected(suggestion)"
>
<slot
:name="grp_name"
:suggestion="suggestion"
>
<span>{{ suggestion[data[grp_name].key] }}</span>
</slot>
</li>
<li
v-if="!suggestion_list.length && searchQuery"
class="suggestion-group-suggestion no-results"
>
<slot
name="noResult"
:group_name="grp_name"
>
<p>No Results Found.</p>
</slot>
</li>
</ul>
</li>
</ul>
</div>
</template>
<script>
import useAutoSuggest from './useAutoSuggest'
export default {
props: {
inputProps: {
type: Object,
default: () => {},
},
data: {
type: Object,
required: true,
},
searchLimit: {
type: Number,
default: 4,
},
},
setup(props, { emit }) {
// eslint-disable-next-line no-console
console.warn('This component is still in Development. Please do not use it.')
const { searchQuery, filteredData, resetsearchQuery } = useAutoSuggest(props)
const suggestionSelected = suggestion => {
resetsearchQuery()
emit('suggestion-selected', suggestion)
}
return {
searchQuery, filteredData, suggestionSelected,
}
},
}
</script>
<style scoped>
ul
{
list-style: none;
padding: 0;
margin: 0;
}
p {
margin: 0;
}
.app-auto-suggest {
position: relative;
}
.auto-suggest-suggestions-list {
box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
border-radius: 6px;
position: absolute;
top: calc(100% + 1rem);
background-color: white;
width: 100%;
}
.suggestion-group-title {
font-weight: 500;
padding: .75rem 1rem .25rem;
}
.suggestion-group-suggestion {
padding: .75rem 1rem
}
</style>

55
src/@core/components/app-auto-suggest/useAutoSuggest.js
View File

@ -1,55 +0,0 @@
import { ref, watch } from '@vue/composition-api'
export default function useAutoSuggest(props) {
const filteredData = ref({})
/**
* Filter group against provided query
* Grp Structure:
* {
* key: 'title',
* data: [
* title: 'Admin', img: 'someImage.png',
* title: 'Template', img: 'otherImage.png',
* ]
* }
* @param {Object} grp Group object to perform filter on
* @param {String} query Query string to filter
*/
const filterGrp = (grp, query) => {
const exactEle = grp.data.filter(item => item[grp.key].toLowerCase().startsWith(query.toLowerCase()))
const containEle = grp.data.filter(
// prettier-ignore
item => !item[grp.key].toLowerCase().startsWith(query.toLowerCase()) && item[grp.key].toLowerCase().indexOf(query.toLowerCase()) > -1,
)
return exactEle.concat(containEle).slice(0, props.searchLimit)
}
const searchQuery = ref('')
const resetsearchQuery = () => {
searchQuery.value = ''
}
const handleSearchQueryUpdate = val => {
if (val === '') {
filteredData.value = {}
} else {
const queriedData = {}
const dataGrps = Object.keys(props.data)
dataGrps.forEach((grp, i) => {
queriedData[dataGrps[i]] = filterGrp(props.data[grp], val)
})
filteredData.value = queriedData
}
}
watch(searchQuery, val => handleSearchQueryUpdate(val))
return {
searchQuery,
resetsearchQuery,
filteredData,
}
}

23
src/@core/components/app-timeline/AppTimeline.vue
View File

@ -1,23 +0,0 @@
<template>
<ul
v-bind="$attrs"
class="app-timeline"
v-on="$listeners"
>
<slot />
</ul>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.app-timeline {
list-style: none;
padding: 0;
margin: 0;
position: relative;
margin-left: 1rem;
}
</style>

182
src/@core/components/app-timeline/AppTimelineItem.vue
View File

@ -1,182 +0,0 @@
<template>
<li
v-bind="$attrs"
class="timeline-item"
:class="[`timeline-variant-${variant}`, fillBorder ? `timeline-item-fill-border-${variant}` : null]"
v-on="$listeners"
>
<div
v-if="!icon"
class="timeline-item-point"
/>
<div
v-else
class="timeline-item-icon d-flex align-items-center justify-content-center rounded-circle"
>
<feather-icon :icon="icon" />
</div>
<slot>
<div class="d-flex flex-sm-row flex-column flex-wrap justify-content-between mb-1 mb-sm-0">
<h6 v-text="title" />
<small
class="timeline-item-time text-nowrap text-muted"
v-text="time"
/>
</div>
<p
class="mb-0"
v-text="subtitle"
/>
</slot>
</li>
</template>
<script>
export default {
props: {
variant: {
type: String,
default: 'primary',
},
title: {
type: String,
default: null,
},
subtitle: {
type: String,
default: null,
},
time: {
type: String,
default: null,
},
icon: {
type: String,
default: null,
},
fillBorder: {
type: Boolean,
default: false,
},
},
}
</script>
<style lang="scss" scoped>
@import '~@core/scss/base/bootstrap-extended/include'; // Bootstrap includes
@import '~@core/scss/base/components/include'; // Components includes
// Color palettes
@import '~@core/scss/base/core/colors/palette-variables.scss';
$timeline-border-color: $border-color;
/* Generate:
* Apply background color to dot
*/
@each $color_name, $color in $colors {
@each $color_type, $color_value in $color {
@if $color_type== 'base' {
.timeline-variant-#{$color_name} {
&.timeline-item-fill-border-#{$color_name} {
border-color: $color_value !important;
&:last-of-type {
&:after {
background: linear-gradient($color_value, $white);
}
}
}
.timeline-item-point {
background-color: $color_value;
&:before {
background-color: rgba($color_value, 0.12);
}
}
.timeline-item-icon {
color: $color_value;
border: 1px solid $color_value;
}
}
}
}
}
.timeline-item {
padding-left: 2.5rem;
position: relative;
&:not(:last-of-type) {
padding-bottom: 2rem;
border-left: 1px solid $timeline-border-color;
}
// This gives shade to last timeline-item but isn't that revolutionary
&:last-of-type {
&:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 1px;
height: 100%;
background: linear-gradient($timeline-border-color, $white);
}
}
.timeline-item-point {
position: absolute;
left: -6px;
width: 12px;
height: 12px;
top: 0;
border-radius: 50%;
z-index: 1;
&:before {
content: '';
z-index: 1;
border-radius: 50%;
width: 20px;
height: 20px;
position: absolute;
top: -4px;
left: -4px;
bottom: 0;
right: 0;
}
}
.timeline-item-icon {
position: absolute;
left: -12px;
top: 0;
width: 24px;
height: 24px;
background-color: $white;
z-index: 1;
}
}
// *===============================================---*
// *--------- Dark Layout ---------------------------------------*
// *===============================================---*
.dark-layout {
.timeline-item {
&:last-of-type {
&:after {
background: linear-gradient($theme-dark-border-color, $theme-dark-card-bg);
}
}
&:not(:last-of-type) {
border-left-color: $theme-dark-border-color;
}
.timeline-item-icon {
background-color: $theme-dark-card-bg;
}
}
}
</style>

117
src/@core/components/app-tour/AppTour.vue
View File

@ -1,117 +0,0 @@
<!-- =========================================================================================
File Name: VxTour.vue
Description: Tour Component
----------------------------------------------------------------------------------------
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
Author: Pixinvent
Author URL: http://www.themeforest.net/user/pixinvent
========================================================================================== -->
<template>
<v-tour
name="vuexyTour"
:steps="steps"
>
<template slot-scope="tour">
<transition name="fade">
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<v-step
v-for="(step, index) of tour.steps"
v-if="tour.currentStep === index"
:key="index"
:step="step"
:previous-step="tour.previousStep"
:next-step="tour.nextStep"
:stop="tour.stop"
:is-first="tour.isFirst"
:is-last="tour.isLast"
:labels="tour.labels"
>
<div
slot="actions"
class="tour-actions d-flex justify-content-between"
>
<!-- Skip Button -->
<b-button
v-if="tour.currentStep != tour.steps.length - 1"
size="sm"
variant="outline-primary"
class="btn-tour-skip mr-1"
@click="tour.stop"
>
<span class="mr-25 align-middle">Skip</span>
<feather-icon
icon="XIcon"
size="12"
/>
</b-button>
<!-- Previous Button -->
<b-button
v-if="tour.currentStep"
size="sm"
variant="outline-primary mr-1"
@click="tour.previousStep"
>
<feather-icon
icon="ChevronLeftIcon"
size="12"
/>
<span class="ml-25 align-middle">Previous</span>
</b-button>
<!-- Next Button -->
<b-button
v-if="tour.currentStep != tour.steps.length - 1"
size="sm"
variant="primary"
class="btn-tour-next"
@click="tour.nextStep"
>
<span class="mr-25 align-middle">Next</span>
<feather-icon
icon="ChevronRightIcon"
size="12"
/>
</b-button>
<!-- Finish Button -->
<b-button
v-if="tour.currentStep == tour.steps.length - 1"
size="sm"
variant="primary"
class="btn-tour-finish"
@click="tour.stop"
>
<span class="mr-25 align-middle">Finish</span>
<feather-icon
icon="CheckCircleIcon"
size="12"
/>
</b-button>
</div>
</v-step>
<!-- eslint-enable vue/no-use-v-if-with-v-for -->
</transition>
</template>
</v-tour>
</template>
<script>
import { BButton } from 'bootstrap-vue'
export default {
name: 'VxTour',
components: {
BButton,
},
props: {
steps: {
required: true,
type: Array,
},
},
}
</script>

195
src/@core/components/b-card-actions/BCardActions.vue
View File

@ -1,195 +0,0 @@
<template>
<b-overlay
v-if="!cardClosed"
variant="white"
:show="showLoading"
spinner-variant="primary"
blur="0"
opacity=".75"
rounded="sm"
>
<b-card
ref="bCard"
v-bind="cardAttrs"
no-body
:aria-expanded="!content_visible ? 'true' : 'false'"
:aria-controls="parentID"
:style="cardStyles"
v-on="$listeners"
>
<div
v-if="showHeader"
class="card-header"
>
<!-- Title & SubTitle -->
<div>
<b-card-title>{{ $attrs.title }}</b-card-title>
<b-card-sub-title v-if="$attrs['sub-title']">
{{ $attrs['sub-title'] }}
</b-card-sub-title>
</div>
<!-- Card Actions -->
<b-card-actions-container
v-if="showActions"
:available-actions="availableActions"
:is-collapsed="!content_visible"
@collapse="triggerCollapse"
@refresh="triggerRefresh"
@close="triggerClose"
/>
</div>
<!-- Collapsible Content -->
<b-collapse
:id="parentID"
v-model="content_visible"
:visible="content_visible"
class="card-content"
>
<!-- Handle no-body -->
<slot v-if="$attrs['no-body'] !== undefined" />
<b-card-body v-else>
<slot />
</b-card-body>
</b-collapse>
</b-card>
</b-overlay>
</template>
<script>
import {
BCard, BCardTitle, BCardSubTitle, BCardBody, BCollapse, BOverlay,
} from 'bootstrap-vue'
import BCardActionsContainer from './BCardActionsContainer.vue'
export default {
components: {
BCardActionsContainer,
BCard,
BCardTitle,
BCardSubTitle,
BCardBody,
BCollapse,
BOverlay,
},
inheritAttrs: false,
props: {
collapsed: {
type: Boolean,
default: false,
},
noActions: {
type: Boolean,
default: false,
},
actionCollapse: {
type: Boolean,
default: false,
},
actionRefresh: {
type: Boolean,
default: false,
},
actionClose: {
type: Boolean,
default: false,
},
},
data() {
return {
parentID: '',
content_visible: !this.collapsed,
showLoading: false,
cardClosed: false,
cardStyles: {},
}
},
computed: {
cardAttrs() {
const cardAttrs = JSON.parse(JSON.stringify(this.$attrs))
delete cardAttrs.title
delete cardAttrs['sub-title']
return cardAttrs
},
showHeader() {
return this.$attrs.title || this.$attrs['sub-title'] || !this.noActions
},
showActions() {
if (this.noActions) return false
return true
},
availableActions() {
const actions = []
const allFalse = (this.actionCollapse || this.actionRefresh || this.actionClose) === false
if (this.actionCollapse || allFalse) actions.push('collapse')
if (this.actionRefresh || allFalse) actions.push('refresh')
if (this.actionClose || allFalse) actions.push('close')
return actions
},
},
created() {
this.parentID = String(Math.floor(Math.random() * 10) + 1)
},
methods: {
removeCard() {
this.$set(this.cardStyles, 'maxHeight', `${this.$refs.bCard.clientHeight}px`)
setTimeout(() => {
this.$set(this.cardStyles, 'maxHeight', '0px')
this.$set(this.cardStyles, 'overflow', 'hidden')
// this.$set(this.cardStyles, 'marginBottom', '0')
}, 10)
},
triggerCollapse() {
this.content_visible = !this.content_visible
this.$emit('collapse')
},
triggerRefresh() {
this.showLoading = true
this.$emit('refresh')
},
triggerClose() {
this.removeCard()
this.$emit('close')
},
},
}
</script>
<style lang="scss" scoped>
@import '~@core/scss/base/bootstrap-extended/include';
@import '~@core/scss/base/components/variables-dark';
.card {
::v-deep .card-header {
.heading-elements {
position: static;
cursor: inherit;
.list-inline {
display: block;
li {
a {
padding: 0;
}
&:not(:last-child) {
margin-right: 1rem;
}
}
}
}
}
}
.dark-layout {
.b-overlay-wrap ::v-deep .b-overlay {
// border: 10px solid red;
.bg-white {
background-color: $theme-dark-body-bg !important;
}
}
}
</style>

55
src/@core/components/b-card-actions/BCardActionsContainer.vue
View File

@ -1,55 +0,0 @@
<template>
<div class="heading-elements">
<ul class="list-inline mb-0">
<li v-if="availableActions.includes('collapse')">
<a
data-action="collapse"
:class="{ rotate: isCollapsed }"
@click="$emit('collapse')"
>
<feather-icon
icon="ChevronDownIcon"
size="16"
/>
</a>
</li>
<li v-if="availableActions.includes('refresh')">
<a
data-action="reload"
@click="$emit('refresh')"
>
<feather-icon
icon="RotateCwIcon"
size="14"
/>
</a>
</li>
<li v-if="availableActions.includes('close')">
<a
data-action="close"
@click="$emit('close')"
>
<feather-icon
icon="XIcon"
size="14"
/>
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
isCollapsed: {
type: Boolean,
requried: true,
},
availableActions: {
type: Array,
default: () => [],
},
},
}
</script>

2
src/@core/components/b-card-actions/index.js
View File

@ -1,2 +0,0 @@
export { default as BCardActions } from './BCardActions.vue'
export { default as BCardActionsContainer } from './BCardActionsContainer.vue'

166
src/@core/components/b-card-code/BCardCode.vue
View File

@ -1,166 +0,0 @@
<template>
<b-card
v-bind="cardAttrs"
no-body
v-on="$listeners"
>
<div class="card-header">
<!-- Title & SubTitle -->
<div>
<b-card-title>{{ $attrs.title }}</b-card-title>
<b-card-sub-title v-if="$attrs['sub-title']">
{{ $attrs['sub-title'] }}
</b-card-sub-title>
</div>
<i
class="code-toggler feather icon-code cursor-pointer"
:aria-expanded="!code_visible ? 'true' : 'false'"
:aria-controls="parentID"
@click="code_visible = !code_visible"
/>
</div>
<template v-if="$attrs['no-body'] !== undefined">
<slot />
<!-- Code Content -->
<b-collapse
:id="parentID"
v-model="code_visible"
class="card-code"
:visible="code_visible"
>
<b-card-body>
<prism :language="codeLanguage">
<slot name="code" />
</prism>
</b-card-body>
</b-collapse>
</template>
<b-card-body v-else>
<!-- Card Content -->
<slot />
<!-- Code Content -->
<b-collapse
:id="parentID"
v-model="code_visible"
class="card-code"
:visible="code_visible"
>
<div class="p-1" />
<prism :language="codeLanguage">
<slot name="code" />
</prism>
</b-collapse>
</b-card-body>
</b-card>
</template>
<script>
import {
BCard, BCardTitle, BCardSubTitle, BCardBody, BCollapse,
} from 'bootstrap-vue'
import 'prismjs'
import 'prismjs/themes/prism-tomorrow.css'
import Prism from 'vue-prism-component'
export default {
components: {
BCard,
BCardTitle,
BCardSubTitle,
BCardBody,
BCollapse,
Prism,
},
inheritAttrs: false,
props: {
codeLanguage: {
default: 'markup',
type: String,
},
},
data() {
return {
parentID: '',
code_visible: false,
}
},
computed: {
cardAttrs() {
const cardAttrs = JSON.parse(JSON.stringify(this.$attrs))
delete cardAttrs.title
delete cardAttrs['sub-title']
return cardAttrs
},
},
created() {
this.parentID = String(Math.floor(Math.random() * 10) + 1)
},
}
</script>
<style lang="scss" scoped>
@import 'bootstrap/scss/functions';
@import '~@core/scss/base/bootstrap-extended/variables';
@import 'bootstrap/scss/variables';
@import '~@core/scss/base/components/variables-dark';
.card-code {
pre[class*='language-'] {
margin: 0;
max-height: 350px;
border-radius: 0.5rem;
}
/* width */
::-webkit-scrollbar {
width: 8px;
height: 8px;
background: #2d2d2d;
border-radius: 100%;
.dark-layout & {
background-color: $theme-dark-body-bg !important;
}
}
/* Track */
::-webkit-scrollbar-track {
background: transparent;
}
/* Handle */
::-webkit-scrollbar-thumb {
border-radius: 0.5rem;
background: rgba(241,241,241,.4);
}
/* Handle on hover */
// ::-webkit-scrollbar-thumb:hover {
// }
::-webkit-scrollbar-corner {
display: none;
}
}
.code-toggler {
border-bottom: 1px solid transparent;
&[aria-expanded='false'] {
border-bottom-color: $primary;
}
}
// HTML
.card {
.card-header .heading-elements {
position: static;
background: red;
}
}
</style>

3
src/@core/components/b-card-code/index.js
View File

@ -1,3 +0,0 @@
import BCardCode from './BCardCode.vue'
export default BCardCode

50
src/@core/components/charts/echart/AppEchartBar.vue
View File

@ -1,50 +0,0 @@
<template>
<e-charts
ref="line"
autoresize
:options="option"
theme="theme-color"
auto-resize
/>
</template>
<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/bar'
import theme from './theme.json'
ECharts.registerTheme('theme-color', theme)
export default {
components: {
ECharts,
},
props: {
optionData: {
type: Object,
default: null,
},
},
data() {
return {
option: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
left: 0,
},
grid: this.optionData.grid,
xAxis: this.optionData.xAxis,
yAxis: this.optionData.yAxis,
series: this.optionData.series,
},
}
},
}
</script>

46
src/@core/components/charts/echart/AppEchartDoughnut.vue
View File

@ -1,46 +0,0 @@
<template>
<e-charts
ref="line"
autoresize
:options="option"
theme="theme-color"
auto-resize
/>
</template>
<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/pie'
import theme from './theme.json'
ECharts.registerTheme('theme-color', theme)
export default {
components: {
ECharts,
},
props: {
series: {
type: Array,
default: null,
},
},
data() {
return {
option: {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)',
},
legend: {
left: 10,
bottom: '0',
},
series: this.series,
},
}
},
}
</script>

72
src/@core/components/charts/echart/AppEchartLine.vue
View File

@ -1,72 +0,0 @@
<template>
<e-charts
ref="line"
autoresize
:options="line"
theme="theme-color"
auto-resize
/>
</template>
<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/line'
import theme from './theme.json'
ECharts.registerTheme('theme-color', theme)
export default {
components: {
ECharts,
},
props: {
optionData: {
type: Object,
default: null,
},
},
data() {
return {
line: {
// Make gradient line here
visualMap: [{
show: true,
type: 'continuous',
min: 0,
max: 400,
}],
grid: {
width: '96%',
left: '30px',
top: '10px',
show: false,
},
tooltip: {
trigger: 'axis',
},
xAxis: [{
boundaryGap: false,
data: this.optionData.xAxisData,
}],
yAxis: {
type: 'value',
splitLine: { show: false },
},
series: {
type: 'line',
showSymbol: false,
data: this.optionData.series,
},
},
}
},
}
</script>
<style>
.echarts {
width: 100% !important;
}
</style>

73
src/@core/components/charts/echart/AppEchartRadar.vue
View File

@ -1,73 +0,0 @@
<template>
<e-charts
ref="line"
autoresize
:options="option"
theme="theme-color"
auto-resize
/>
</template>
<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/radar'
import theme from './theme.json'
ECharts.registerTheme('theme-color', theme)
export default {
components: {
ECharts,
},
props: {
optionData: {
type: Object,
default: null,
},
},
data() {
return {
option: {
title: {
text: 'Basic radar chart',
},
tooltip: {},
legend: {
data: ['Point One', 'Point Two'],
bottom: '0',
left: '0',
},
radar: {
name: {
textStyle: {
color: '#626262',
fontWeight: 'bold',
borderRadius: 3,
padding: [3, 5],
},
},
indicator: this.optionData.indicator,
splitArea: {
show: false,
},
splitLine: {
lineStyle: {
color: [
'#eeeeee',
],
},
},
axisLine: {
lineStyle: {
color: '#eeeeee',
},
},
},
series: this.optionData.series,
},
}
},
}
</script>

66
src/@core/components/charts/echart/AppEchartScatter.vue
View File

@ -1,66 +0,0 @@
<template>
<e-charts
ref="line"
:options="option"
theme="theme-color"
auto-resize
/>
</template>
<script>
import * as ECharts from 'echarts'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/scatter'
// import theme from './theme.json'
// ECharts.registerTheme('theme-color', theme)
export default {
components: {
ECharts,
},
props: {
optionData: {
type: Object,
default: null,
},
},
data() {
return {
option: {
grid: {
width: '95%',
left: '30px',
right: '40px',
containLabel: false,
},
legend: {
enable: true,
left: '0',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985',
},
},
},
xAxis: {
boundaryGap: false,
scale: true,
splitNumber: 10,
min: 0,
},
yAxis: {
splitLine: { show: false },
scale: true,
},
series: this.optionData.series,
},
}
},
}
</script>

72
src/@core/components/charts/echart/AppEchartStackedArea.vue
View File

@ -1,72 +0,0 @@
<template>
<e-charts
ref="line"
autoresize
:options="option"
theme="theme-color"
auto-resize
/>
</template>
<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/line'
import theme from './theme.json'
ECharts.registerTheme('theme-color', theme)
export default {
components: {
ECharts,
},
props: {
optionData: {
type: Object,
default: null,
},
},
data() {
return {
option: {
title: {
text: 'Stacked area chart',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985',
},
},
},
legend: {
left: '0',
},
grid: {
width: '95%',
left: '40px',
right: '4%',
containLabel: false,
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: this.optionData.xAxisData,
},
],
yAxis: [
{
type: 'value',
splitLine: { show: false },
},
],
series: this.optionData.series,
},
}
},
}
</script>

475
src/@core/components/charts/echart/theme.json
View File

@ -1,475 +0,0 @@
{
"color": [
"#826AF9",
"#9F87FF",
"#D2B0FF",
"#F8D3FF"
],
"backgroundColor": "rgba(0,0,0,0)",
"textStyle": {},
"title": {
"textStyle": {
"color": "#666666"
},
"subtextStyle": {
"color": "#999999"
}
},
"line": {
"itemStyle": {
"normal": {
"borderWidth": "1"
}
},
"lineStyle": {
"normal": {
"width": "1"
}
},
"symbolSize": "10",
"symbol": "emptyCircle",
"smooth": false
},
"radar": {
"itemStyle": {
"normal": {
"borderWidth": "2"
}
},
"lineStyle": {
"normal": {
"width": "3"
}
},
"symbolSize": "10",
"symbol": "emptyCircle",
"smooth": true
},
"bar": {
"itemStyle": {
"normal": {
"barBorderWidth": "0",
"barBorderColor": "#444444"
},
"emphasis": {
"barBorderWidth": "0",
"barBorderColor": "#444444"
}
}
},
"pie": {
"itemStyle": {
"normal": {
"borderWidth": "0",
"borderColor": "#444444"
},
"emphasis": {
"borderWidth": "0",
"borderColor": "#444444"
}
}
},
"scatter": {
"itemStyle": {
"normal": {
"borderWidth": "0",
"borderColor": "#444444"
},
"emphasis": {
"borderWidth": "0",
"borderColor": "#444444"
}
}
},
"boxplot": {
"itemStyle": {
"normal": {
"borderWidth": "0",
"borderColor": "#444444"
},
"emphasis": {
"borderWidth": "0",
"borderColor": "#444444"
}
}
},
"parallel": {
"itemStyle": {
"normal": {
"borderWidth": "0",
"borderColor": "#444444"
},
"emphasis": {
"borderWidth": "0",
"borderColor": "#444444"
}
}
},
"sankey": {
"itemStyle": {
"normal": {
"borderWidth": "0",
"borderColor": "#444444"
},
"emphasis": {
"borderWidth": "0",
"borderColor": "#444444"
}
}
},
"funnel": {
"itemStyle": {
"normal": {
"borderWidth": "0",
"borderColor": "#444444"
},
"emphasis": {
"borderWidth": "0",
"borderColor": "#444444"
}
}
},
"gauge": {
"itemStyle": {
"normal": {
"borderWidth": "0",
"borderColor": "#444444"
},
"emphasis": {
"borderWidth": "0",
"borderColor": "#444444"
}
}
},
"candlestick": {
"itemStyle": {
"normal": {
"color": "#d0648a",
"color0": "#ffffff",
"borderColor": "#d0648a",
"borderColor0": "#22c3aa",
"borderWidth": 1
}
}
},
"graph": {
"itemStyle": {
"normal": {
"borderWidth": "0",
"borderColor": "#444444"
}
},
"lineStyle": {
"normal": {
"width": 1,
"color": "#aaa"
}
},
"symbolSize": "10",
"symbol": "emptyCircle",
"smooth": true,
"color": [
"#4ea397",
"#22c3aa",
"#7bd9a5"
],
"label": {
"normal": {
"textStyle": {
"color": "#ffffff"
}
}
}
},
"map": {
"itemStyle": {
"normal": {
"areaColor": "#eeeeee",
"borderColor": "#999999",
"borderWidth": "0.5"
},
"emphasis": {
"areaColor": "rgba(34,195,170,0.25)",
"borderColor": "#22c3aa",
"borderWidth": "0.5"
}
},
"label": {
"normal": {
"textStyle": {
"color": "#28544e"
}
},
"emphasis": {
"textStyle": {
"color": "rgb(52,158,142)"
}
}
}
},
"geo": {
"itemStyle": {
"normal": {
"areaColor": "#eeeeee",
"borderColor": "#999999",
"borderWidth": "0.5"
},
"emphasis": {
"areaColor": "rgba(34,195,170,0.25)",
"borderColor": "#22c3aa",
"borderWidth": "0.5"
}
},
"label": {
"normal": {
"textStyle": {
"color": "#28544e"
}
},
"emphasis": {
"textStyle": {
"color": "rgb(52,158,142)"
}
}
}
},
"categoryAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
}
},
"valueAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
}
},
"logAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
}
},
"timeAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.3)",
"rgba(200,200,200,0.3)"
]
}
}
},
"toolbox": {
"iconStyle": {
"normal": {
"borderColor": "#aaaaaa"
},
"emphasis": {
"borderColor": "#666"
}
}
},
"legend": {
"textStyle": {
"color": "#999999"
}
},
"tooltip": {
"axisPointer": {
"lineStyle": {
"color": "#ccc",
"width": 1
},
"crossStyle": {
"color": "#ccc",
"width": 1
}
}
},
"timeline": {
"lineStyle": {
"color": "#349e8e",
"width": 1
},
"itemStyle": {
"normal": {
"color": "#349e8e",
"borderWidth": "1"
},
"emphasis": {
"color": "#57e8d2"
}
},
"controlStyle": {
"normal": {
"color": "#349e8e",
"borderColor": "#349e8e",
"borderWidth": "0"
}
},
"checkpointStyle": {
"color": "#22c3aa",
"borderColor": "rgba(34,195,170,0.25)"
},
"label": {
"normal": {
"textStyle": {
"color": "#349e8e"
}
}
}
},
"visualMap": {
"color": [
"#d0648a",
"#22c3aa",
"rgba(123,217,165,0.2)"
]
},
"dataZoom": {
"backgroundColor": "#fff",
"dataBackgroundColor": "#dedede",
"fillerColor": "rgba(34,195,170,0.25)",
"handleColor": "#dddddd",
"handleSize": "100%",
"textStyle": {
"color": "#999"
}
},
"markPoint": {
"label": {
"normal": {
"textStyle": {
"color": "#ffffff"
}
},
"emphasis": {
"textStyle": {
"color": "#ffffff"
}
}
}
}
}

51
src/@core/components/statistics-cards/StatisticCardHorizontal.vue
View File

@ -1,51 +0,0 @@
<template>
<b-card no-body>
<b-card-body class="d-flex justify-content-between align-items-center">
<div class="truncate">
<h2 class="mb-25 font-weight-bolder">
{{ statistic }}
</h2>
<span>{{ statisticTitle }}</span>
</div>
<b-avatar
:variant="`light-${color}`"
size="45"
>
<feather-icon
size="21"
:icon="icon"
/>
</b-avatar>
</b-card-body>
</b-card>
</template>
<script>
import { BCard, BCardBody, BAvatar } from 'bootstrap-vue'
export default {
components: {
BCard,
BCardBody,
BAvatar,
},
props: {
icon: {
type: String,
required: true,
},
statistic: {
type: [Number, String],
required: true,
},
statisticTitle: {
type: String,
default: '',
},
color: {
type: String,
default: 'primary',
},
},
}
</script>

49
src/@core/components/statistics-cards/StatisticCardVertical.vue
View File

@ -1,49 +0,0 @@
<template>
<b-card class="text-center">
<b-avatar
class="mb-1"
:variant="`light-${color}`"
size="45"
>
<feather-icon
size="21"
:icon="icon"
/>
</b-avatar>
<div class="truncate">
<h2 class="mb-25 font-weight-bolder">
{{ statistic }}
</h2>
<span>{{ statisticTitle }}</span>
</div>
</b-card>
</template>
<script>
import { BCard, BAvatar } from 'bootstrap-vue'
export default {
components: {
BCard,
BAvatar,
},
props: {
icon: {
type: String,
required: true,
},
statistic: {
type: [Number, String],
required: true,
},
statisticTitle: {
type: String,
default: '',
},
color: {
type: String,
default: 'primary',
},
},
}
</script>

83
src/@core/components/statistics-cards/StatisticCardWithAreaChart.vue
View File

@ -1,83 +0,0 @@
<template>
<b-card no-body>
<b-card-body class="pb-0">
<b-avatar
class="mb-1"
:variant="`light-${color}`"
size="45"
>
<feather-icon
size="21"
:icon="icon"
/>
</b-avatar>
<div class="truncate">
<h2 class="mb-25 font-weight-bolder">
{{ statistic }}
</h2>
<span>{{ statisticTitle }}</span>
</div>
</b-card-body>
<vue-apex-charts
type="area"
height="100"
width="100%"
:options="chartOptionsComputed"
:series="chartData"
/>
</b-card>
</template>
<script>
import { BCard, BCardBody, BAvatar } from 'bootstrap-vue'
import VueApexCharts from 'vue-apexcharts'
import { $themeColors } from '@themeConfig'
import { areaChartOptions } from './chartOptions'
export default {
components: {
VueApexCharts,
BCard,
BCardBody,
BAvatar,
},
props: {
icon: {
type: String,
required: true,
},
statistic: {
type: [Number, String],
required: true,
},
statisticTitle: {
type: String,
default: '',
},
color: {
type: String,
default: 'primary',
},
chartData: {
type: Array,
default: () => [],
},
chartOptions: {
type: Object,
default: null,
},
},
computed: {
chartOptionsComputed() {
if (this.chartOptions === null) {
const options = JSON.parse(JSON.stringify(areaChartOptions))
options.theme.monochrome.color = $themeColors[this.color]
return options
}
return this.chartOptions
},
},
}
</script>

101
src/@core/components/statistics-cards/StatisticCardWithLineChart.vue
View File

@ -1,101 +0,0 @@
<template>
<b-card no-body>
<b-card-body class="d-flex justify-content-between align-items-center pb-0">
<div class="truncate">
<h2 class="font-weight-bolder">
{{ statistic }}
</h2>
<span>{{ statisticTitle }}</span>
</div>
<b-avatar
:variant="`light-${color}`"
size="45"
>
<feather-icon
size="21"
:icon="icon"
/>
</b-avatar>
</b-card-body>
<vue-apex-charts
type="line"
height="100"
width="100%"
:options="chartOptionsComputed"
:series="chartData"
/>
</b-card>
</template>
<script>
import { BCard, BCardBody, BAvatar } from 'bootstrap-vue'
import VueApexCharts from 'vue-apexcharts'
import { $themeColors } from '@themeConfig'
import { lineChartOptions } from './chartOptions'
export default {
components: {
VueApexCharts,
BCard,
BCardBody,
BAvatar,
},
props: {
icon: {
type: String,
required: true,
},
statistic: {
type: [Number, String],
required: true,
},
statisticTitle: {
type: String,
default: '',
},
color: {
type: String,
default: 'primary',
},
chartData: {
type: Array,
default: () => [],
},
chartOptions: {
type: Object,
default: null,
},
},
computed: {
chartOptionsComputed() {
if (this.chartOptions === null) {
const options = JSON.parse(JSON.stringify(lineChartOptions))
options.fill.gradient.gradientToColors = [this.gradientToColor(this.color)]
options.colors = [$themeColors[this.color]]
return options
}
return this.chartOptions
},
},
methods: {
gradientToColor(color) {
const gradientToColors = {
primary: '#A9A2F6',
success: '#55DD92',
warning: '#ffc085',
danger: '#F97794',
info: '#59E0F0',
secondary: '#B4B9BF',
light: '#D0D4DB',
dark: '#919191',
}
return gradientToColors[color]
},
},
}
</script>

122
src/@core/components/statistics-cards/chartOptions.js
View File

@ -1,122 +0,0 @@
import { $themeColors } from '@themeConfig'
export const areaChartOptions = {
grid: {
show: false,
padding: {
left: 0,
right: 0,
},
},
chart: {
toolbar: {
show: false,
},
sparkline: {
enabled: true,
},
},
dataLabels: {
enabled: false,
},
stroke: {
curve: 'smooth',
width: 2.5,
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 0.9,
opacityFrom: 0.5,
opacityTo: 0.2,
stops: [0, 80, 100],
},
},
xaxis: {
type: 'numeric',
lines: {
show: false,
},
axisBorder: {
show: false,
},
labels: { show: false },
},
yaxis: [
{
y: 0,
offsetX: 0,
offsetY: 0,
padding: {
left: 0,
right: 0,
},
},
],
tooltip: {
x: { show: false },
},
theme: {
monochrome: {
enabled: true,
color: $themeColors.primary,
shadeTo: 'light',
shadeIntensity: 0.65,
},
},
}
export const lineChartOptions = {
grid: {
show: false,
padding: {
left: 0,
right: 0,
},
},
chart: {
type: 'line',
dropShadow: {
enabled: true,
top: 5,
left: 0,
blur: 4,
opacity: 0.1,
},
toolbar: {
show: false,
},
sparkline: {
enabled: true,
},
},
stroke: {
width: 5,
curve: 'smooth',
},
xaxis: {
type: 'numeric',
},
colors: [$themeColors.primary],
fill: {
type: 'gradient',
gradient: {
shade: 'dark',
gradientToColors: ['#A9A2F6'],
shadeIntensity: 1,
type: 'horizontal',
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100, 100, 100],
},
},
markers: {
size: 0,
hover: {
size: 5,
},
},
tooltip: {
x: { show: false },
},
}