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: add tooltips for list graphs (#47)

Browse Source
This commit is contained in:
Fine0830
2022-03-30 21:19:06 +08:00
committed by GitHub
parent 767c92c60d
commit ee06546c20
38 changed files with 138 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/dashboard/configuration/widget/graph-styles/Area.vue
View File

@@ -34,16 +34,16 @@ import { useDashboardStore } from "@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const { selectedGrid } = dashboardStore;
const graph = dashboardStore.selectedGrid.graph || {};
const opacity = ref(selectedGrid.graph.opacity);
const opacity = ref(graph.opacity);
function updateConfig(param: { [key: string]: unknown }) {
const graph = {
...selectedGrid.graph,
...dashboardStore.selectedGrid.graph,
...param,
};
dashboardStore.selectWidget({ ...selectedGrid, graph });
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
}
</script>
<style lang="scss" scoped>

8
src/views/dashboard/configuration/widget/graph-styles/Bar.vue
View File

@@ -30,15 +30,15 @@ import { useI18n } from "vue-i18n";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const { selectedGrid } = dashboardStore;
const showBackground = ref(selectedGrid.graph.showBackground || false);
const graph = dashboardStore.selectedGrid.graph;
const showBackground = ref(graph.showBackground || false);
function changeConfig(param: { [key: string]: unknown }) {
const graph = {
...selectedGrid.graph,
...dashboardStore.selectedGrid.graph,
...param,
};
dashboardStore.selectWidget({ ...selectedGrid, graph });
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
}
</script>
<style lang="scss" scoped>

6
src/views/dashboard/configuration/widget/graph-styles/Card.vue
View File

@@ -43,9 +43,9 @@ import { useDashboardStore } from "@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const { selectedGrid } = dashboardStore;
const fontSize = ref(selectedGrid.graph.fontSize);
const showUnit = ref<boolean>(selectedGrid.graph.showUnit);
const graph = dashboardStore.selectedGrid.graph || {};
const fontSize = ref(graph.fontSize);
const showUnit = ref<boolean>(graph.showUnit);
function updateConfig(param: { [key: string]: unknown }) {
const graph = {

8
src/views/dashboard/configuration/widget/graph-styles/EndpointList.vue
View File

@@ -33,17 +33,17 @@ import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard";
const dashboardStore = useDashboardStore();
const { selectedGrid } = dashboardStore;
const graph = dashboardStore.selectedGrid.graph;
const { t } = useI18n();
const fontSize = ref(selectedGrid.graph.fontSize);
const fontSize = ref(graph.fontSize);
function updateConfig(param: { [key: string]: unknown }) {
const graph = {
...selectedGrid.graph,
...dashboardStore.selectedGrid.graph,
...param,
};
dashboardStore.selectWidget({ ...selectedGrid, graph });
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
}
</script>
<style lang="scss" scoped>

8
src/views/dashboard/configuration/widget/graph-styles/InstanceList.vue
View File

@@ -34,15 +34,15 @@ import { useDashboardStore } from "@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const { selectedGrid } = dashboardStore;
const fontSize = ref(selectedGrid.graph.fontSize);
const graph = dashboardStore.selectedGrid.graph;
const fontSize = ref(graph.fontSize);
function updateConfig(param: { [key: string]: unknown }) {
const graph = {
...selectedGrid.graph,
...dashboardStore.selectedGrid.graph,
...param,
};
dashboardStore.selectWidget({ ...selectedGrid, graph });
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
}
</script>
<style lang="scss" scoped>

22
src/views/dashboard/configuration/widget/graph-styles/Line.vue
View File

@@ -16,19 +16,19 @@ limitations under the License. -->
<div>
<span class="label">{{ t("showXAxis") }}</span>
<el-switch
v-model="selectedGrid.graph.showXAxis"
v-model="graph.showXAxis"
active-text="Yes"
inactive-text="No"
@change="updateConfig({ showXAxis: selectedGrid.graph.showXAxis })"
@change="updateConfig({ showXAxis: graph.showXAxis })"
/>
</div>
<div>
<span class="label">{{ t("showYAxis") }}</span>
<el-switch
v-model="selectedGrid.graph.showYAxis"
v-model="graph.showYAxis"
active-text="Yes"
inactive-text="No"
@change="updateConfig({ showYAxis: selectedGrid.graph.showYAxis })"
@change="updateConfig({ showYAxis: graph.showYAxis })"
/>
</div>
<div>
@@ -60,23 +60,23 @@ limitations under the License. -->
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const { selectedGrid } = dashboardStore;
const smooth = ref(selectedGrid.graph.smooth);
const showSymbol = ref(selectedGrid.graph.showSymbol);
const step = ref(selectedGrid.graph.step);
const graph = computed(() => dashboardStore.selectedGrid.graph || {});
const smooth = ref(graph.value.smooth);
const showSymbol = ref(graph.value.showSymbol);
const step = ref(graph.value.step);
function updateConfig(param: { [key: string]: unknown }) {
const graph = {
...selectedGrid.graph,
...dashboardStore.selectedGrid.graph,
...param,
};
dashboardStore.selectWidget({ ...selectedGrid, graph });
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
}
</script>
<style lang="scss" scoped>

10
src/views/dashboard/configuration/widget/graph-styles/ServiceList.vue
View File

@@ -16,10 +16,10 @@ limitations under the License. -->
<div class="item">
<span class="label">{{ t("showGroup") }}</span>
<el-switch
v-model="selectedGrid.graph.showGroup"
v-model="graph.showGroup"
active-text="Yes"
inactive-text="No"
@change="updateConfig({ showGroup: selectedGrid.graph.showGroup })"
@change="updateConfig({ showGroup: graph.showGroup })"
/>
</div>
<div class="item">
@@ -37,14 +37,14 @@ limitations under the License. -->
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const { selectedGrid } = dashboardStore;
const fontSize = ref(selectedGrid.graph.fontSize);
const graph = computed(() => dashboardStore.selectedGrid.graph || {});
const fontSize = ref(graph.value.fontSize);
function updateConfig(param: { [key: string]: unknown }) {
const { selectedGrid } = dashboardStore;

12
src/views/dashboard/configuration/widget/graph-styles/Table.vue
View File

@@ -50,17 +50,17 @@ import { useDashboardStore } from "@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const { selectedGrid } = dashboardStore;
const showTableValues = ref(selectedGrid.graph.showTableValues);
const tableHeaderCol1 = ref(selectedGrid.graph.tableHeaderCol1);
const tableHeaderCol2 = ref(selectedGrid.graph.tableHeaderCol2);
const graph = dashboardStore.selectedGrid.graph || {};
const showTableValues = ref(graph.showTableValues);
const tableHeaderCol1 = ref(graph.tableHeaderCol1);
const tableHeaderCol2 = ref(graph.tableHeaderCol2);
function updateConfig(param: { [key: string]: unknown }) {
const graph = {
...selectedGrid.graph,
...dashboardStore.selectedGrid.graph,
...param,
};
dashboardStore.selectWidget({ ...selectedGrid, graph });
dashboardStore.selectWidget({ ...dashboardStore.selectedGrid, graph });
}
</script>
<style lang="scss" scoped>

4
src/views/dashboard/configuration/widget/graph-styles/TopList.vue
View File

@@ -32,8 +32,8 @@ import { useDashboardStore } from "@/store/modules/dashboard";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
const { selectedGrid } = dashboardStore;
const color = ref(selectedGrid.graph.color || "purple");
const graph = dashboardStore.selectedGrid.graph || {};
const color = ref(graph.color || "purple");
const Colors = [
{ label: "Purple", value: "purple" },
{