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"; import { LegendOptions } from "@/types/dashboard";
export default function useLegendProcess(legend?: LegendOptions) { export default function useLegendProcess(legend?: LegendOptions) {
let isRight = false;
if (legend && legend.toTheRight) {
isRight = true;
}
function showEchartsLegend(keys: string[]) { function showEchartsLegend(keys: string[]) {
if (legend && !legend.show === undefined) { if (legend && !legend.show === undefined) {
return legend.show; return legend.show;
@ -29,11 +33,6 @@ export default function useLegendProcess(legend?: LegendOptions) {
} }
return true; return true;
} }
function isRight() {
if (legend && legend.toTheRight) {
return true;
}
return false;
}
return { showEchartsLegend, isRight }; 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 See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="graph"> <div class="graph" :class="isRight ? 'flex-h' : 'flex-v'">
<Graph :option="option" @select="clickEvent" :filters="config.filters" /> <Graph :option="option" @select="clickEvent" :filters="config.filters" />
<Legend :config="config.legend" :data="data" /> <Legend :config="config.legend" :data="data" />
</div> </div>
@ -49,7 +49,7 @@ const props = defineProps({
default: () => ({}), default: () => ({}),
}, },
}); });
const { showEchartsLegend } = useLegendProcess(props.config.legend); const { showEchartsLegend, isRight } = useLegendProcess(props.config.legend);
const option = computed(() => getOption()); const option = computed(() => getOption());
function 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 See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="graph flex-v" :class="toTheRight ? 'flex-h' : 'flex-v'"> <div class="graph flex-v" :class="isRight ? 'flex-h' : 'flex-v'">
<Graph <Graph
:option="option" :option="option"
@select="clickEvent" @select="clickEvent"
@ -65,7 +65,6 @@ const props = defineProps({
}, },
}); });
const { showEchartsLegend, isRight } = useLegendProcess(props.config.legend); const { showEchartsLegend, isRight } = useLegendProcess(props.config.legend);
const toTheRight = computed(() => isRight());
const option = computed(() => getOption()); const option = computed(() => getOption());
function getOption() { function getOption() {
const keys = Object.keys(props.data || {}).filter( 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 See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div>legend</div> <div :style="`width: ${config.width || '100%'}`">legend</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import type { PropType } from "vue"; import type { PropType } from "vue";