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

fix: render graphs

Browse Source
This commit is contained in:
Qiuxia Fan
2022-01-06 16:10:15 +08:00
parent c282655369
commit f19b69d050
8 changed files with 56 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,10 +13,10 @@ 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>
<Graph ref="chart" :option="option" :autoResize="true" />
<Graph :option="option" />
</template>
<script lang="ts" setup>
import { defineProps, ref, computed } from "vue";
import { defineProps, computed } from "vue";
import type { PropType } from "vue";
import { Event } from "@/types/events";
@@ -37,8 +37,6 @@ const props = defineProps({
default: () => ({ theme: "light", showBackground: true, barWidth: 20 }),
},
});
/*global Nullable */
const chart = ref<Nullable<HTMLElement>>(null);
const option = computed(() => getOption());
function getOption() {

2
src/views/dashboard/graphs/HeatMap.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>
<Graph ref="chart" :option="option" :autoResize="true" />
<Graph :option="option" />
</template>
<script lang="ts" setup>
import { defineProps, ref, computed } from "vue";

4
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>
<Graph ref="chart" :option="option" :autoResize="true" />
<Graph :option="option" />
</template>
<script lang="ts" setup>
import { defineProps, ref, computed } from "vue";
@@ -30,8 +30,6 @@ const props = defineProps({
theme: { type: String, default: "light" },
itemEvents: { type: Array as PropType<Event[]>, default: () => [] },
});
/*global Nullable */
const chart = ref<Nullable<HTMLElement>>(null);
const option = computed(() => getOption());
function getOption() {
const keys = Object.keys(props.data || {}).filter(

2
src/views/dashboard/graphs/Pie.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>
<Graph ref="chart" :option="option" :autoResize="true" />
<Graph :option="option" />
</template>
<script lang="ts" setup>
import { defineProps, ref, computed } from "vue";