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

update style with config

Browse Source
This commit is contained in:
Fine 2022-11-07 21:16:22 +08:00
parent a56c6c188d
commit 7c6a0bd380
4 changed files with 9 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/hooks/useLegendProcessor.ts
View File

@ -17,6 +17,10 @@
import { LegendOptions } from "@/types/dashboard";
export default function useLegendProcess(legend?: LegendOptions) {
let isRight = false;
if (legend && legend.toTheRight) {
isRight = true;
}
function showEchartsLegend(keys: string[]) {
if (legend && !legend.show === undefined) {
return legend.show;
@ -29,11 +33,6 @@ export default function useLegendProcess(legend?: LegendOptions) {
}
return true;
}
function isRight() {
if (legend && legend.toTheRight) {
return true;
}
return false;
}
return { showEchartsLegend, isRight };
}

4
src/views/dashboard/graphs/Bar.vue
View File

@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div class="graph">
<div class="graph" :class="isRight ? 'flex-h' : 'flex-v'">
<Graph :option="option" @select="clickEvent" :filters="config.filters" />
<Legend :config="config.legend" :data="data" />
</div>
@ -49,7 +49,7 @@ const props = defineProps({
default: () => ({}),
},
});
const { showEchartsLegend } = useLegendProcess(props.config.legend);
const { showEchartsLegend, isRight } = useLegendProcess(props.config.legend);
const option = computed(() => getOption());
function getOption() {

3
src/views/dashboard/graphs/Line.vue
View File

@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div class="graph flex-v" :class="toTheRight ? 'flex-h' : 'flex-v'">
<div class="graph flex-v" :class="isRight ? 'flex-h' : 'flex-v'">
<Graph
:option="option"
@select="clickEvent"
@ -65,7 +65,6 @@ const props = defineProps({
},
});
const { showEchartsLegend, isRight } = useLegendProcess(props.config.legend);
const toTheRight = computed(() => isRight());
const option = computed(() => getOption());
function getOption() {
const keys = Object.keys(props.data || {}).filter(

2
src/views/dashboard/graphs/components/Legend.vue
View File

@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div>legend</div>
<div :style="`width: ${config.width || '100%'}`">legend</div>
</template>
<script lang="ts" setup>
import type { PropType } from "vue";