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

set position with configs

Browse Source
This commit is contained in:
Fine 2022-11-07 16:36:27 +08:00
parent f0fcc63ff5
commit a56c6c188d
3 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/hooks/useLegendProcessor.ts
View File

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

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

@ -49,7 +49,7 @@ const props = defineProps({
default: () => ({}),
},
});
const { showEchartsLegend } = useLegendProcess();
const { showEchartsLegend } = useLegendProcess(props.config.legend);
const option = computed(() => getOption());
function getOption() {
@ -120,7 +120,7 @@ function getOption() {
},
legend: {
type: "scroll",
show: showEchartsLegend(keys, props.config.legend),
show: showEchartsLegend(keys),
icon: "circle",
top: 0,
left: 0,

7
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">
<div class="graph flex-v" :class="toTheRight ? 'flex-h' : 'flex-v'">
<Graph
:option="option"
@select="clickEvent"
@ -64,7 +64,8 @@ const props = defineProps({
}),
},
});
const { showEchartsLegend } = useLegendProcess();
const { showEchartsLegend, isRight } = useLegendProcess(props.config.legend);
const toTheRight = computed(() => isRight());
const option = computed(() => getOption());
function getOption() {
const keys = Object.keys(props.data || {}).filter(
@ -158,7 +159,7 @@ function getOption() {
tooltip: props.config.smallTips ? tips : tooltip,
legend: {
type: "scroll",
show: showEchartsLegend(keys, props.config.legend),
show: showEchartsLegend(keys),
icon: "circle",
top: 0,
left: 0,