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"; import { LegendOptions } from "@/types/dashboard";
export default function useLegendProcess() { export default function useLegendProcess(legend?: LegendOptions) {
function showEchartsLegend(keys: string[], legend?: LegendOptions) { function showEchartsLegend(keys: string[]) {
if (legend && !legend.show === undefined) { if (legend && !legend.show === undefined) {
return legend.show; return legend.show;
} }
@ -29,5 +29,11 @@ export default function useLegendProcess() {
} }
return true; 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: () => ({}), default: () => ({}),
}, },
}); });
const { showEchartsLegend } = useLegendProcess(); const { showEchartsLegend } = useLegendProcess(props.config.legend);
const option = computed(() => getOption()); const option = computed(() => getOption());
function getOption() { function getOption() {
@ -120,7 +120,7 @@ function getOption() {
}, },
legend: { legend: {
type: "scroll", type: "scroll",
show: showEchartsLegend(keys, props.config.legend), show: showEchartsLegend(keys),
icon: "circle", icon: "circle",
top: 0, top: 0,
left: 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 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"> <div class="graph flex-v" :class="toTheRight ? 'flex-h' : 'flex-v'">
<Graph <Graph
:option="option" :option="option"
@select="clickEvent" @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()); const option = computed(() => getOption());
function getOption() { function getOption() {
const keys = Object.keys(props.data || {}).filter( const keys = Object.keys(props.data || {}).filter(
@ -158,7 +159,7 @@ function getOption() {
tooltip: props.config.smallTips ? tips : tooltip, tooltip: props.config.smallTips ? tips : tooltip,
legend: { legend: {
type: "scroll", type: "scroll",
show: showEchartsLegend(keys, props.config.legend), show: showEchartsLegend(keys),
icon: "circle", icon: "circle",
top: 0, top: 0,
left: 0, left: 0,