diff --git a/src/components/Graph.vue b/src/components/Graph.vue index 2ad0b48f..5ed35d1d 100644 --- a/src/components/Graph.vue +++ b/src/components/Graph.vue @@ -252,11 +252,11 @@ limitations under the License. --> display: block; white-space: nowrap; z-index: 9999999; - box-shadow: #ddd 1px 2px 10px; + box-shadow: var(--sw-topology-box-shadow); transition: all cubic-bezier(0.075, 0.82, 0.165, 1) linear; - background-color: rgb(255 255 255); + background-color: var(--sw-bg-color-overlay); border-radius: 4px; - color: rgb(51 51 51); + color: $font-color; padding: 5px; } @@ -267,7 +267,7 @@ limitations under the License. --> &:hover { color: $active-color; - background-color: #eee; + background-color: $popper-hover-bg-color; } } diff --git a/src/hooks/data.ts b/src/hooks/data.ts index 8d88e076..3d45a00d 100644 --- a/src/hooks/data.ts +++ b/src/hooks/data.ts @@ -130,3 +130,43 @@ export const RespFields: Indexable = { error }`, }; + +export const DarkChartColors = [ + "#79bbff", + "#a0a7e6", + "#30A4EB", + "#45BFC0", + "#ebbf93", + "#884dde", + "#1bbf93", + "#7289ab", + "#f56c6c", + "#81feb7", + "#4094fa", + "#ff894d", + "#884dde", + "#ebbf93", + "#fedc6d", + "#da7cfa", + "#b88230", + "#a0cfff", +]; + +export const LightChartColors = [ + "#3f96e3", + "#a0a7e6", + "#45BFC0", + "#FFCC55", + "#FF6A84", + "#c23531", + "#2f4554", + "#61a0a8", + "#d48265", + "#91c7ae", + "#749f83", + "#ca8622", + "#bda29a", + "#6e7074", + "#546570", + "#c4ccd3", +]; diff --git a/src/hooks/useLegendProcessor.ts b/src/hooks/useLegendProcessor.ts index 11c4e4b4..e9439a09 100644 --- a/src/hooks/useLegendProcessor.ts +++ b/src/hooks/useLegendProcessor.ts @@ -16,6 +16,9 @@ */ import type { LegendOptions } from "@/types/dashboard"; import { isDef } from "@/utils/is"; +import { DarkChartColors, LightChartColors } from "./data"; +import { useAppStoreWithOut } from "@/store/modules/app"; +import { Themes } from "@/constants/data"; export default function useLegendProcess(legend?: LegendOptions) { let isRight = false; @@ -96,37 +99,11 @@ export default function useLegendProcess(legend?: LegendOptions) { return { source, headers }; } - function chartColors(keys: string[]) { - let color: string[] = []; - switch (keys.length) { - case 2: - color = ["#FF6A84", "#a0b1e6"]; - break; - case 1: - color = ["#3f96e3"]; - break; - default: - color = [ - "#30A4EB", - "#45BFC0", - "#FFCC55", - "#FF6A84", - "#a0a7e6", - "#c23531", - "#2f4554", - "#61a0a8", - "#d48265", - "#91c7ae", - "#749f83", - "#ca8622", - "#bda29a", - "#6e7074", - "#546570", - "#c4ccd3", - ]; - break; - } - return color; + function chartColors() { + const appStore = useAppStoreWithOut(); + const list = appStore.theme === Themes.Dark ? DarkChartColors : LightChartColors; + + return list; } return { showEchartsLegend, isRight, aggregations, chartColors }; } diff --git a/src/styles/reset.scss b/src/styles/reset.scss index d2396848..75987932 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss @@ -123,89 +123,3 @@ code, pre { font-family: Consolas, Menlo, Courier, monospace; } - -.el-menu { - --el-menu-item-height: 50px; -} - -.el-menu-item-group__title { - display: none; -} - -.el-sub-menu .el-menu-item { - height: 40px; - line-height: 40px; - padding: 0 0 0 56px !important; -} - -.el-sub-menu__title { - .el-icon.menu-icons { - margin-top: -5px !important; - } -} - -.el-drawer__header { - margin-bottom: 0; - padding-left: 10px; - font-size: 16px; -} - -.el-drawer__body { - padding: 0; -} - -.switch { - margin: 0 5px; -} - -div.vis-tooltip { - max-width: 600px; - overflow: hidden; - background-color: var(--vis-tooltip-bg) !important; - white-space: normal !important; - font-size: $font-size-smaller !important; - color: var(--font-color) !important; -} - -.vis-item { - cursor: pointer; - height: 20px; -} - -.vis-item.Error { - background-color: #e66; - opacity: 0.8; - border-color: #e66; - color: var(--sw-event-vis-selected) !important; -} - -.vis-item.Normal { - background-color: #fac858; - border-color: #fac858; - color: var(--sw-event-vis-selected) !important; -} - -.vis-item .vis-item-content { - padding: 0 3px !important; -} - -.vis-item.vis-selected.Error, -.vis-item.vis-selected.Normal { - color: var(--sw-event-vis-selected) !important; -} - -.vis-time-axis .vis-text { - color: var(--sw-time-axis-text) !important; -} - -.el-menu--vertical.sub-list { - display: none; -} - -div:has(> a.menu-title) { - display: none; -} - -.el-input-number .el-input__inner { - text-align: left !important; -} diff --git a/src/styles/theme.scss b/src/styles/theme.scss index 9d48255d..2fb0dd27 100644 --- a/src/styles/theme.scss +++ b/src/styles/theme.scss @@ -54,6 +54,7 @@ html { --sw-time-axis-text: #4d4d4d; --sw-drawer-header: #72767b; --sw-marketplace-border: #dedfe0; + --sw-grid-item-active: #79bbff; } html.dark { @@ -94,6 +95,7 @@ html.dark { --sw-time-axis-text: #aaa; --sw-drawer-header: #e9e9eb; --sw-marketplace-border: #606266; + --sw-grid-item-active: #73767a; } .el-drawer__header { @@ -150,3 +152,89 @@ $theme-background: var(--theme-background); $active-background: var(--el-color-primary); $font-size-smaller: 12px; $font-size-normal: 14px; + +.el-menu { + --el-menu-item-height: 50px; +} + +.el-menu-item-group__title { + display: none; +} + +.el-sub-menu .el-menu-item { + height: 40px; + line-height: 40px; + padding: 0 0 0 56px !important; +} + +.el-sub-menu__title { + .el-icon.menu-icons { + margin-top: -5px !important; + } +} + +.el-drawer__header { + margin-bottom: 0; + padding-left: 10px; + font-size: 16px; +} + +.el-drawer__body { + padding: 0; +} + +.switch { + margin: 0 5px; +} + +div.vis-tooltip { + max-width: 600px; + overflow: hidden; + background-color: var(--vis-tooltip-bg) !important; + white-space: normal !important; + font-size: $font-size-smaller !important; + color: var(--font-color) !important; +} + +.vis-item { + cursor: pointer; + height: 20px; +} + +.vis-item.Error { + background-color: #e66; + opacity: 0.8; + border-color: #e66; + color: var(--sw-event-vis-selected) !important; +} + +.vis-item.Normal { + background-color: #fac858; + border-color: #fac858; + color: var(--sw-event-vis-selected) !important; +} + +.vis-item .vis-item-content { + padding: 0 3px !important; +} + +.vis-item.vis-selected.Error, +.vis-item.vis-selected.Normal { + color: var(--sw-event-vis-selected) !important; +} + +.vis-time-axis .vis-text { + color: var(--sw-time-axis-text) !important; +} + +.el-menu--vertical.sub-list { + display: none; +} + +div:has(> a.menu-title) { + display: none; +} + +.el-input-number .el-input__inner { + text-align: left !important; +} diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue index 74f71b92..55df3fe0 100644 --- a/src/views/dashboard/controls/Tab.vue +++ b/src/views/dashboard/controls/Tab.vue @@ -375,7 +375,7 @@ limitations under the License. --> } .vue-grid-item.active { - border: 1px solid $active-color; + border: 1px solid var(--sw-grid-item-active); } .no-data-tips { diff --git a/src/views/dashboard/graphs/Bar.vue b/src/views/dashboard/graphs/Bar.vue index db646e48..50b61f3e 100644 --- a/src/views/dashboard/graphs/Bar.vue +++ b/src/views/dashboard/graphs/Bar.vue @@ -74,7 +74,7 @@ limitations under the License. --> }, }; }); - const color: string[] = chartColors(keys); + const color: string[] = chartColors(); return { color, tooltip: { diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue index d438df06..11d23515 100644 --- a/src/views/dashboard/graphs/Line.vue +++ b/src/views/dashboard/graphs/Line.vue @@ -92,7 +92,7 @@ limitations under the License. --> } return serie; }); - const color: string[] = chartColors(keys); + const color: string[] = chartColors(); const tooltip = { trigger: "axis", backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff", diff --git a/src/views/dashboard/graphs/components/Legend.vue b/src/views/dashboard/graphs/components/Legend.vue index 268c1b28..36be0de9 100644 --- a/src/views/dashboard/graphs/components/Legend.vue +++ b/src/views/dashboard/graphs/components/Legend.vue @@ -111,9 +111,8 @@ limitations under the License. --> const isRight = computed(() => useLegendProcess(props.config).isRight); const width = computed(() => (props.config.width ? props.config.width + "px" : isRight.value ? "150px" : "100%")); const colors = computed(() => { - const keys = Object.keys(props.data || {}).filter((i: any) => Array.isArray(props.data[i]) && props.data[i].length); const { chartColors } = useLegendProcess(props.config); - return chartColors(keys); + return chartColors(); });