github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 08:17:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update sankey style

Browse Source
This commit is contained in:
Fine 2023-08-21 17:24:08 +08:00
parent 974e0917b0
commit 01fa56014f
3 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/views/dashboard/related/topology/components/PodTopology.vue
View File

@ -266,7 +266,6 @@ limitations under the License. -->
<style lang="scss" scoped> <style lang="scss" scoped>
.sankey { .sankey {
margin-top: 10px; margin-top: 10px;
background-color: #333840 !important;
color: #ddd; color: #ddd;
} }
@ -276,7 +275,8 @@ limitations under the License. -->
right: 10px; right: 10px;
width: 400px; width: 400px;
height: 600px; height: 600px;
background-color: #2b3037; border: 1px solid #eee;
background-color: $theme-background;
overflow: auto; overflow: auto;
padding: 10px 15px; padding: 10px 15px;
border-radius: 3px; border-radius: 3px;
@ -284,6 +284,7 @@ limitations under the License. -->
transition: all 0.5ms linear; transition: all 0.5ms linear;
z-index: 99; z-index: 99;
text-align: left; text-align: left;
box-shadow: #eee 1px 2px 10px;
} }
.tool { .tool {
@ -300,8 +301,8 @@ limitations under the License. -->
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
transition: all 0.5ms linear; transition: all 0.5ms linear;
background-color: #252a2f99; background: rgb(0 0 0 / 30%);
color: #ddd; color: $text-color;
display: inline-block; display: inline-block;
border-radius: 3px; border-radius: 3px;
} }

6
src/views/dashboard/related/topology/components/Sankey.vue
View File

@ -51,16 +51,16 @@ limitations under the License. -->
data: topologyStore.nodes, data: topologyStore.nodes,
links: topologyStore.calls, links: topologyStore.calls,
label: { label: {
color: "#fff", color: "#666",
formatter: (param: any) => param.data.name, formatter: (param: any) => param.data.name,
}, },
color: ["#3fe1da", "#6be6c1", "#3fcfdc", "#626c91", "#3fbcde", "#a0a7e6", "#3fa9e1", "#96dee8", "#bf99f8"], color: ["#6be6c1", "#3fcfdc", "#626c91", "#3fbcde", "#a0a7e6", "#3fa9e1", "#96dee8", "#bf99f8"],
itemStyle: { itemStyle: {
borderWidth: 0, borderWidth: 0,
}, },
lineStyle: { lineStyle: {
color: "source", color: "source",
opacity: 0.12, opacity: 0.3,
}, },
tooltip: { tooltip: {
position: "bottom", position: "bottom",

1
src/views/dashboard/related/topology/components/Settings.vue
View File

@ -619,6 +619,7 @@ limitations under the License. -->
.label { .label {
font-size: $font-size-smaller; font-size: $font-size-smaller;
margin-top: 10px; margin-top: 10px;
color: #666;
} }
.legend-btn { .legend-btn {