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

add legend types

Browse Source
This commit is contained in:
Fine 2022-11-02 17:27:03 +08:00
parent b147428d8e
commit 1ca01d1ec7
2 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/types/dashboard.d.ts vendored
View File

@ -95,6 +95,7 @@ export type GraphConfig =
export interface BarConfig { export interface BarConfig {
type?: string; type?: string;
showBackground?: boolean; showBackground?: boolean;
LegendOptions?: LegendOptions;
} }
export interface LineConfig extends AreaConfig { export interface LineConfig extends AreaConfig {
type?: string; type?: string;
@ -110,6 +111,7 @@ export interface LineConfig extends AreaConfig {
export interface AreaConfig { export interface AreaConfig {
type?: string; type?: string;
opacity?: number; opacity?: number;
LegendOptions?: LegendOptions;
} }
export interface CardConfig { export interface CardConfig {
@ -180,3 +182,13 @@ export type EventParams = {
value: number | number[]; value: number | number[];
color: string; color: string;
}; };
export type LegendOptions = {
showLegend: boolean;
total: boolean;
min: boolean;
max: boolean;
mean: boolean;
asTable: boolean;
toTheRight: boolean;
width: number;
};

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

@ -44,7 +44,7 @@ limitations under the License. -->
class="inputs" class="inputs"
size="small" size="small"
placeholder="Please input the width" placeholder="Please input the width"
@change="updateLegendConfig({ toTheRight: legend.width })" @change="updateLegendConfig({ width: legend.width })"
/> />
</div> </div>
<div> <div>
@ -68,14 +68,14 @@ limitations under the License. -->
v-model="legend.mean" v-model="legend.mean"
active-text="Yes" active-text="Yes"
inactive-text="No" inactive-text="No"
@change="updateLegendConfig({ avg: legend.mean })" @change="updateLegendConfig({ mean: legend.mean })"
/> />
<span class="title ml-20 mr-5">{{ t("total") }}</span> <span class="title ml-20 mr-5">{{ t("total") }}</span>
<el-switch <el-switch
v-model="legend.total" v-model="legend.total"
active-text="Yes" active-text="Yes"
inactive-text="No" inactive-text="No"
@change="updateLegendConfig({ avg: legend.total })" @change="updateLegendConfig({ total: legend.total })"
/> />
</div> </div>
<div> <div>
@ -125,9 +125,10 @@ limitations under the License. -->
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, computed } from "vue"; import { ref, computed, reactive } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard";
import { LegendOptions } from "@/types/dashboard";
const { t } = useI18n(); const { t } = useI18n();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
@ -135,7 +136,17 @@ const graph = computed(() => dashboardStore.selectedGrid.graph || {});
const smooth = ref(graph.value.smooth); const smooth = ref(graph.value.smooth);
const showSymbol = ref(graph.value.showSymbol); const showSymbol = ref(graph.value.showSymbol);
const step = ref(graph.value.step); const step = ref(graph.value.step);
const legend = computed(() => graph.value.legend || {}); const legend = reactive<LegendOptions>({
showLegend: true,
total: false,
min: false,
max: false,
mean: false,
asTable: false,
toTheRight: false,
width: 120,
...graph.value.legend,
});
function updateConfig(param: { [key: string]: unknown }) { function updateConfig(param: { [key: string]: unknown }) {
const graph = { const graph = {