github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-15 04:09:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement the Dark Theme (#334)

Browse Source
This commit is contained in:
Fine0830
2023-11-14 20:37:15 +08:00
committed by GitHub
parent 780104c5d2
commit 832dc1676b
81 changed files with 638 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/hooks/useEcharts.ts
View File

@@ -30,6 +30,8 @@ import { useDebounceFn } from "@vueuse/core";
import { useEventListener } from "./useEventListener";
import { useBreakpoint } from "./useBreakpoint";
import echarts from "@/utils/echarts";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
export type ECOption = echarts.ComposeOption<
| BarSeriesOption
@@ -44,8 +46,9 @@ export type ECOption = echarts.ComposeOption<
>;
export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" | "default" = "default"): Indexable {
const appStore = useAppStoreWithOut();
const getDarkMode = computed(() => {
return theme === "default" ? "light" : theme;
return appStore.theme === "default" ? Themes.Light : theme;
});
let chartInstance: Nullable<echarts.ECharts> = null;
let resizeFn: Fn = resize;
@@ -55,7 +58,7 @@ export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" |
resizeFn = useDebounceFn(resize, 200);
const getOptions = computed(() => {
if (getDarkMode.value !== "dark") {
if (getDarkMode.value !== Themes.Dark) {
return cacheOptions.value as ECOption;
}
return {