forked from cerc-io/cosmos-explorer
feat: chart theme switch
This commit is contained in:
Alisa | Side.one
parent
b10578e680
commit
2f93b4c10c
@ -1,50 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
themes: {
|
||||
name: string;
|
||||
icon: string;
|
||||
}[];
|
||||
}>();
|
||||
|
||||
const themeMap = { system: 'mdi-laptop', light: 'mdi-weather-sunny', dark: 'mdi-weather-night' }
|
||||
|
||||
const theme = ref(window.localStorage.getItem('theme') || 'dark');
|
||||
|
||||
const changeMode = () => {
|
||||
let value = 'dark';
|
||||
if (theme.value === 'dark') {
|
||||
value = 'light';
|
||||
}
|
||||
if (
|
||||
theme.value === 'system' &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
) {
|
||||
value = 'dark';
|
||||
}
|
||||
if (value === 'light') {
|
||||
document.documentElement.classList.add('light');
|
||||
document.documentElement.classList.remove('dark');
|
||||
} else {
|
||||
document.documentElement.classList.add('dark');
|
||||
document.documentElement.classList.remove('light');
|
||||
}
|
||||
document.documentElement.setAttribute('data-theme', value);
|
||||
window.localStorage.setItem('theme', value);
|
||||
};
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tooltip tooltip-bottom delay-1000">
|
||||
<button class=" btn btn-ghost btn-circle btn-sm mx-1" @click="changeMode">
|
||||
<Icon :icon="props.themes[theme].icon" class="text-2xl" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,21 +1,30 @@
|
||||
<script lang="ts" setup>
|
||||
import ApexCharts from 'vue3-apexcharts';
|
||||
import { computed } from 'vue';
|
||||
import { useBaseStore } from '@/stores';
|
||||
import { getDonutChartConfig } from './apexChartConfig';
|
||||
|
||||
const props = defineProps(['series', 'labels']);
|
||||
|
||||
const expenseRationChartConfig = computed(() =>
|
||||
getDonutChartConfig(window.localStorage.getItem('theme') || 'dark', props.labels)
|
||||
);
|
||||
const baseStore = useBaseStore();
|
||||
|
||||
const expenseRationChartConfig = computed(() => {
|
||||
const theme = baseStore.theme;
|
||||
getDonutChartConfig(theme, props.labels);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ApexCharts type="donut" height="410" :options="expenseRationChartConfig" :series="series" />
|
||||
<ApexCharts
|
||||
type="donut"
|
||||
height="410"
|
||||
:options="expenseRationChartConfig"
|
||||
:series="series"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'DonetChart',
|
||||
name: 'DonetChart',
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -3,40 +3,56 @@ import ApexCharts from 'vue3-apexcharts';
|
||||
import { getMarketPriceChartConfig } from './apexChartConfig';
|
||||
import { useIndexModule } from '@/modules/[chain]/indexStore';
|
||||
import { computed, ref } from '@vue/reactivity';
|
||||
import { useBaseStore } from '@/stores';
|
||||
|
||||
const store = useIndexModule();
|
||||
const baseStore = useBaseStore();
|
||||
const chartConfig = computed(() => {
|
||||
const labels = store.marketData.prices.map((item: any) => item[0]);
|
||||
return getMarketPriceChartConfig(window.localStorage.getItem('theme') || 'dark', labels);
|
||||
const theme = baseStore.theme;
|
||||
const labels = store.marketData.prices.map((item: any) => item[0]);
|
||||
return getMarketPriceChartConfig(theme, labels);
|
||||
});
|
||||
const kind = ref('price');
|
||||
const series = computed(() => {
|
||||
return [
|
||||
{
|
||||
name: 'Price',
|
||||
data:
|
||||
kind.value === 'price'
|
||||
? store.marketData.prices.map((item: any) => item[1])
|
||||
: store.marketData.total_volumes.map((item: any) => item[1]),
|
||||
},
|
||||
];
|
||||
return [
|
||||
{
|
||||
name: 'Price',
|
||||
data:
|
||||
kind.value === 'price'
|
||||
? store.marketData.prices.map((item: any) => item[1])
|
||||
: store.marketData.total_volumes.map(
|
||||
(item: any) => item[1]
|
||||
),
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
function changeChart(type: string) {
|
||||
kind.value = type;
|
||||
kind.value = type;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tabs tabs-boxed bg-transparent justify-end">
|
||||
<a class="tab text-xs mr-2 text-gray-400 uppercase" :class="{ 'tab-active': kind === 'price' }"
|
||||
@click="changeChart('price')">
|
||||
Price
|
||||
</a>
|
||||
<a class="tab text-xs text-gray-400 uppercase" :class="{ 'tab-active': kind === 'volume' }"
|
||||
@click="changeChart('volume')">
|
||||
Volume
|
||||
</a>
|
||||
</div>
|
||||
<ApexCharts type="area" height="230" :options="chartConfig" :series="series" />
|
||||
<div class="tabs tabs-boxed bg-transparent justify-end">
|
||||
<a
|
||||
class="tab text-xs mr-2 text-gray-400 uppercase"
|
||||
:class="{ 'tab-active': kind === 'price' }"
|
||||
@click="changeChart('price')"
|
||||
>
|
||||
Price
|
||||
</a>
|
||||
<a
|
||||
class="tab text-xs text-gray-400 uppercase"
|
||||
:class="{ 'tab-active': kind === 'volume' }"
|
||||
@click="changeChart('volume')"
|
||||
>
|
||||
Volume
|
||||
</a>
|
||||
</div>
|
||||
<ApexCharts
|
||||
type="area"
|
||||
height="230"
|
||||
:options="chartConfig"
|
||||
:series="series"
|
||||
/>
|
||||
</template>
|
||||
|
||||
@ -2,56 +2,61 @@
|
||||
import { ref, watch } from 'vue';
|
||||
import { Icon } from '@iconify/vue';
|
||||
const i18nLangs: Array<{ label: string; i18nLang: string }> = [
|
||||
{
|
||||
label: 'English',
|
||||
i18nLang: 'en',
|
||||
},
|
||||
{
|
||||
label: '中文',
|
||||
i18nLang: 'cn',
|
||||
},
|
||||
{
|
||||
label: 'English',
|
||||
i18nLang: 'en',
|
||||
},
|
||||
{
|
||||
label: '中文',
|
||||
i18nLang: 'cn',
|
||||
},
|
||||
];
|
||||
|
||||
let locale = ref(useI18n({ useScope: 'global' }).locale);
|
||||
watch(locale, (val: string) => {
|
||||
document.documentElement.setAttribute('lang', val as string);
|
||||
document.documentElement.setAttribute('lang', val as string);
|
||||
});
|
||||
|
||||
let currentLang = ref(localStorage.getItem('lang') || 'en');
|
||||
|
||||
watch(currentLang, (val: string) => {
|
||||
document.documentElement.setAttribute('lang', val as string);
|
||||
document.documentElement.setAttribute('lang', val as string);
|
||||
});
|
||||
|
||||
const handleLangChange = (lang: string) => {
|
||||
locale.value = lang;
|
||||
currentLang.value = lang;
|
||||
localStorage.setItem('lang', lang);
|
||||
locale.value = lang;
|
||||
currentLang.value = lang;
|
||||
localStorage.setItem('lang', lang);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="dropdown"
|
||||
:class="
|
||||
currentLang === 'ar' ? 'dropdown-right' : 'dropdown-bottom dropdown-end'
|
||||
"
|
||||
>
|
||||
<label tabindex="0" class="btn btn-ghost btn-circle btn-sm mx-1">
|
||||
<Icon icon="mdi-translate" class="text-2xl" />
|
||||
</label>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40"
|
||||
<div
|
||||
class="dropdown"
|
||||
:class="
|
||||
currentLang === 'ar'
|
||||
? 'dropdown-right'
|
||||
: 'dropdown-bottom dropdown-end'
|
||||
"
|
||||
>
|
||||
<li v-for="lang in i18nLangs" :key="lang.i18nLang">
|
||||
<a
|
||||
class="hover:bg-gray-100 dark:hover:bg-[#373f59]"
|
||||
:class="{ 'text-primary': currentLang === lang.i18nLang }"
|
||||
@click="handleLangChange(lang.i18nLang)"
|
||||
>{{ lang.label }}</a
|
||||
<label tabindex="0" class="btn btn-ghost btn-circle btn-sm mx-1">
|
||||
<Icon
|
||||
icon="mdi-translate"
|
||||
class="text-2xl text-gray-500 dark:text-gray-400"
|
||||
/>
|
||||
</label>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40"
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<li v-for="lang in i18nLangs" :key="lang.i18nLang">
|
||||
<a
|
||||
class="hover:bg-gray-100 dark:hover:bg-[#373f59]"
|
||||
:class="{ 'text-primary': currentLang === lang.i18nLang }"
|
||||
@click="handleLangChange(lang.i18nLang)"
|
||||
>{{ lang.label }}</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,45 +1,48 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { onMounted, computed } from 'vue';
|
||||
import { useBaseStore } from '@/stores';
|
||||
|
||||
const themeMap: Record<string, string> = { system: 'mdi-laptop', light: 'mdi-weather-sunny', dark: 'mdi-weather-night' }
|
||||
const themeMap: Record<string, string> = {
|
||||
system: 'mdi-laptop',
|
||||
light: 'mdi-weather-sunny',
|
||||
dark: 'mdi-weather-night',
|
||||
};
|
||||
const baseStore = useBaseStore();
|
||||
const theme = computed(() => {
|
||||
return baseStore.theme;
|
||||
});
|
||||
|
||||
const theme = ref(window.localStorage.getItem('theme') || 'dark');
|
||||
|
||||
const changeMode = (val?: string) => {
|
||||
let value = 'dark';
|
||||
const currentValue = val || theme.value;
|
||||
if (currentValue === 'dark') {
|
||||
value = 'light';
|
||||
}
|
||||
if (
|
||||
currentValue === 'system' &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
) {
|
||||
value = 'dark';
|
||||
}
|
||||
if (value === 'light') {
|
||||
document.documentElement.classList.add('light');
|
||||
document.documentElement.classList.remove('dark');
|
||||
} else {
|
||||
document.documentElement.classList.add('dark');
|
||||
document.documentElement.classList.remove('light');
|
||||
}
|
||||
document.documentElement.setAttribute('data-theme', value);
|
||||
window.localStorage.setItem('theme', value);
|
||||
theme.value = value;
|
||||
const changeMode = (val?: 'dark' | 'light') => {
|
||||
let value: 'dark' | 'light' = 'dark';
|
||||
const currentValue: 'dark' | 'light' = val || theme.value;
|
||||
if (currentValue === 'dark') {
|
||||
value = 'light';
|
||||
}
|
||||
if (value === 'light') {
|
||||
document.documentElement.classList.add('light');
|
||||
document.documentElement.classList.remove('dark');
|
||||
} else {
|
||||
document.documentElement.classList.add('dark');
|
||||
document.documentElement.classList.remove('light');
|
||||
}
|
||||
document.documentElement.setAttribute('data-theme', value);
|
||||
window.localStorage.setItem('theme', value);
|
||||
baseStore.theme = value;
|
||||
};
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
changeMode(theme.value === 'light' ? 'dark' : 'light');
|
||||
changeMode(theme.value === 'light' ? 'dark' : 'light');
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tooltip tooltip-bottom delay-1000">
|
||||
<button class=" btn btn-ghost btn-circle btn-sm mx-1" @click="changeMode()">
|
||||
<Icon :icon="themeMap?.[theme]" class="text-2xl" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="tooltip tooltip-bottom delay-1000">
|
||||
<button
|
||||
class="btn btn-ghost btn-circle btn-sm mx-1"
|
||||
@click="changeMode()"
|
||||
>
|
||||
<Icon :icon="themeMap?.[theme]" class="text-2xl text-gray-500 dark:text-gray-400" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -7,101 +7,111 @@ import { hashTx } from '@/libs';
|
||||
import { fromBase64 } from '@cosmjs/encoding';
|
||||
|
||||
export const useBaseStore = defineStore('baseStore', {
|
||||
state: () => {
|
||||
return {
|
||||
earlest: {} as Block,
|
||||
latest: {} as Block,
|
||||
recents: [] as Block[],
|
||||
};
|
||||
},
|
||||
getters: {
|
||||
blocktime(): number {
|
||||
if (this.earlest && this.latest) {
|
||||
if (
|
||||
this.latest.block?.header?.height !==
|
||||
this.earlest.block?.header?.height
|
||||
) {
|
||||
const diff = dayjs(this.latest.block?.header?.time).diff(
|
||||
this.earlest.block?.header?.time
|
||||
);
|
||||
return diff;
|
||||
}
|
||||
}
|
||||
return 6000;
|
||||
state: () => {
|
||||
return {
|
||||
earlest: {} as Block,
|
||||
latest: {} as Block,
|
||||
recents: [] as Block[],
|
||||
theme: (window.localStorage.getItem('theme') || 'dark') as
|
||||
| 'light'
|
||||
| 'dark',
|
||||
};
|
||||
},
|
||||
blockchain() {
|
||||
return useBlockchain();
|
||||
},
|
||||
currentChainId(): string {
|
||||
return this.latest.block?.header.chain_id || ""
|
||||
},
|
||||
txsInRecents() {
|
||||
const txs = [] as { height: string; hash: string; tx: DecodedTxRaw }[];
|
||||
this.recents.forEach((b) =>
|
||||
b.block?.data?.txs.forEach((tx: string) => {
|
||||
if (tx) {
|
||||
const raw = fromBase64(tx);
|
||||
try {
|
||||
txs.push({
|
||||
height: b.block.header.height,
|
||||
hash: hashTx(raw),
|
||||
tx: decodeTxRaw(raw),
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
getters: {
|
||||
blocktime(): number {
|
||||
if (this.earlest && this.latest) {
|
||||
if (
|
||||
this.latest.block?.header?.height !==
|
||||
this.earlest.block?.header?.height
|
||||
) {
|
||||
const diff = dayjs(this.latest.block?.header?.time).diff(
|
||||
this.earlest.block?.header?.time
|
||||
);
|
||||
return diff;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
);
|
||||
return txs;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
async initial() {
|
||||
this.fetchLatest();
|
||||
},
|
||||
async clearRecentBlocks() {
|
||||
this.recents = [];
|
||||
},
|
||||
async fetchLatest() {
|
||||
this.latest = await this.blockchain.rpc?.getBaseBlockLatest();
|
||||
if (
|
||||
!this.earlest ||
|
||||
this.earlest?.block?.header?.chain_id !=
|
||||
this.latest?.block?.header?.chain_id
|
||||
) {
|
||||
//reset earlest and recents
|
||||
this.earlest = this.latest;
|
||||
this.recents = [];
|
||||
}
|
||||
//check if the block exists in recents
|
||||
if (
|
||||
this.recents.findIndex(
|
||||
(x) => x?.block_id?.hash === this.latest?.block_id?.hash
|
||||
) === -1
|
||||
) {
|
||||
if (this.recents.length >= 50) {
|
||||
this.recents.shift();
|
||||
}
|
||||
this.recents.push(this.latest);
|
||||
}
|
||||
return this.latest;
|
||||
return 6000;
|
||||
},
|
||||
blockchain() {
|
||||
return useBlockchain();
|
||||
},
|
||||
currentChainId(): string {
|
||||
return this.latest.block?.header.chain_id || '';
|
||||
},
|
||||
txsInRecents() {
|
||||
const txs = [] as {
|
||||
height: string;
|
||||
hash: string;
|
||||
tx: DecodedTxRaw;
|
||||
}[];
|
||||
this.recents.forEach((b) =>
|
||||
b.block?.data?.txs.forEach((tx: string) => {
|
||||
if (tx) {
|
||||
const raw = fromBase64(tx);
|
||||
try {
|
||||
txs.push({
|
||||
height: b.block.header.height,
|
||||
hash: hashTx(raw),
|
||||
tx: decodeTxRaw(raw),
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
})
|
||||
);
|
||||
return txs;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
async initial() {
|
||||
this.fetchLatest();
|
||||
},
|
||||
async clearRecentBlocks() {
|
||||
this.recents = [];
|
||||
},
|
||||
async fetchLatest() {
|
||||
this.latest = await this.blockchain.rpc?.getBaseBlockLatest();
|
||||
if (
|
||||
!this.earlest ||
|
||||
this.earlest?.block?.header?.chain_id !=
|
||||
this.latest?.block?.header?.chain_id
|
||||
) {
|
||||
//reset earlest and recents
|
||||
this.earlest = this.latest;
|
||||
this.recents = [];
|
||||
}
|
||||
//check if the block exists in recents
|
||||
if (
|
||||
this.recents.findIndex(
|
||||
(x) => x?.block_id?.hash === this.latest?.block_id?.hash
|
||||
) === -1
|
||||
) {
|
||||
if (this.recents.length >= 50) {
|
||||
this.recents.shift();
|
||||
}
|
||||
this.recents.push(this.latest);
|
||||
}
|
||||
return this.latest;
|
||||
},
|
||||
|
||||
async fetchValidatorByHeight(height?: number, offset = 0) {
|
||||
return this.blockchain.rpc.getBaseValidatorsetAt(String(height), offset);
|
||||
async fetchValidatorByHeight(height?: number, offset = 0) {
|
||||
return this.blockchain.rpc.getBaseValidatorsetAt(
|
||||
String(height),
|
||||
offset
|
||||
);
|
||||
},
|
||||
async fetchLatestValidators(offset = 0) {
|
||||
return this.blockchain.rpc.getBaseValidatorsetLatest(offset);
|
||||
},
|
||||
async fetchBlock(height?: number | string) {
|
||||
return this.blockchain.rpc.getBaseBlockAt(String(height));
|
||||
},
|
||||
async fetchAbciInfo() {
|
||||
return this.blockchain.rpc.getBaseNodeInfo();
|
||||
},
|
||||
// async fetchNodeInfo() {
|
||||
// return this.blockchain.rpc.no()
|
||||
// }
|
||||
},
|
||||
async fetchLatestValidators(offset = 0) {
|
||||
return this.blockchain.rpc.getBaseValidatorsetLatest(offset);
|
||||
},
|
||||
async fetchBlock(height?: number | string) {
|
||||
return this.blockchain.rpc.getBaseBlockAt(String(height));
|
||||
},
|
||||
async fetchAbciInfo() {
|
||||
return this.blockchain.rpc.getBaseNodeInfo();
|
||||
},
|
||||
// async fetchNodeInfo() {
|
||||
// return this.blockchain.rpc.no()
|
||||
// }
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user