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

update charts

Browse Source
This commit is contained in:
Qiuxia Fan 2022-07-07 11:46:34 +08:00
parent bdc671ada8
commit 84315db9c5
3 changed files with 41 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/dashboard/graphs/Area.vue
View File

@ -29,7 +29,15 @@ defineProps({
}, },
intervalTime: { type: Array as PropType<string[]>, default: () => [] }, intervalTime: { type: Array as PropType<string[]>, default: () => [] },
config: { config: {
type: Object as PropType<AreaConfig>, type: Object as PropType<
AreaConfig & {
filters: {
value: number | string;
dataIndex: number;
sourceId: string;
};
} & { id: string }
>,
default: () => ({}), default: () => ({}),
}, },
}); });

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

@ -13,15 +13,16 @@ 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>
<Graph :option="option" /> <Graph :option="option" @select="clickEvent" :filters="config.filters" />
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue"; import { computed } from "vue";
import type { PropType } from "vue"; import type { PropType } from "vue";
import { Event } from "@/types/events"; import { Event } from "@/types/events";
import { BarConfig } from "@/types/dashboard"; import { BarConfig, EventParams } from "@/types/dashboard";
/*global defineProps */ /*global defineProps, defineEmits */
const emits = defineEmits(["click"]);
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object as PropType<{ [key: string]: number[] }>, type: Object as PropType<{ [key: string]: number[] }>,
@ -31,7 +32,15 @@ const props = defineProps({
theme: { type: String, default: "light" }, theme: { type: String, default: "light" },
itemEvents: { type: Array as PropType<Event[]>, default: () => [] }, itemEvents: { type: Array as PropType<Event[]>, default: () => [] },
config: { config: {
type: Object as PropType<BarConfig>, type: Object as PropType<
BarConfig & {
filters: {
value: number | string;
dataIndex: number;
sourceId: string;
};
} & { id: string }
>,
default: () => ({}), default: () => ({}),
}, },
}); });
@ -147,6 +156,14 @@ function getOption() {
}, },
enterable: true, enterable: true,
extraCssText: "max-height: 300px; overflow: auto; border: none", extraCssText: "max-height: 300px; overflow: auto; border: none",
axisPointer: {
lineStyle: {
width: 2,
},
label: {
show: false,
},
},
}, },
legend: { legend: {
type: "scroll", type: "scroll",
@ -186,4 +203,7 @@ function getOption() {
series: temp, series: temp,
}; };
} }
function clickEvent(params: EventParams) {
emits("click", params);
}
</script> </script>

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

@ -162,6 +162,14 @@ function getOption() {
enterable: true, enterable: true,
confine: true, confine: true,
extraCssText: "max-height: 300px; overflow: auto; border: none;", extraCssText: "max-height: 300px; overflow: auto; border: none;",
axisPointer: {
lineStyle: {
width: 2,
},
label: {
show: false,
},
},
}; };
const tips = { const tips = {
formatter(params: any) { formatter(params: any) {