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

fix: update styles

Browse Source
This commit is contained in:
Qiuxia Fan 2022-01-06 10:51:26 +08:00
parent b40a5e600e
commit e234361853
3 changed files with 85 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/dashboard/Edit.vue
View File

@ -18,7 +18,7 @@ limitations under the License. -->
<grid-layout /> <grid-layout />
<el-dialog <el-dialog
v-model="dashboardStore.showConfig" v-model="dashboardStore.showConfig"
title="Edit" title="Edit Graph Options"
fullscreen fullscreen
@closed="dashboardStore.setConfigPanel(false)" @closed="dashboardStore.setConfigPanel(false)"
> >

139
src/views/dashboard/configuration/ConfigEdit.vue
View File

@ -14,63 +14,67 @@ See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="widget-config flex-v"> <div class="widget-config flex-v">
<div class="graph" style="height: 350px; width: 100%"> <div class="graph">
<component <div class="header">Title</div>
:is="states.chartType" <div class="render-chart">
:intervalTime="appStoreWithOut.intervalTime" <component
:data="source" :is="states.chartType"
/> :intervalTime="appStoreWithOut.intervalTime"
:data="source"
/>
</div>
<span v-show="!source">{{ t("noData") }}</span> <span v-show="!source">{{ t("noData") }}</span>
</div> </div>
<el-collapse <div class="collapse" :style="{ height: configHeight + 'px' }">
class="collapse" <el-collapse
v-model="states.activeNames" v-model="states.activeNames"
:style="{ '--el-collapse-header-font-size': '15px' }" :style="{ '--el-collapse-header-font-size': '15px' }"
> >
<el-collapse-item :title="t('metricName')" name="1"> <el-collapse-item :title="t('metricName')" name="1">
<div> <div>
<Selector <Selector
:value="states.metrics" :value="states.metrics"
:options="metricOpts" :options="metricOpts"
:multiple="true" :multiple="true"
size="mini" size="mini"
placeholder="Select a metric" placeholder="Select a metric"
@change="changeMetrics" @change="changeMetrics"
class="selectors" class="selectors"
/> />
<Selector <Selector
v-show="states.valueType" v-show="states.valueType"
:value="states.valueType" :value="states.valueType"
:options="states.valueTypes" :options="states.valueTypes"
size="mini" size="mini"
placeholder="Select a metric" placeholder="Select a metric"
@change="changeValueType" @change="changeValueType"
class="selectors" class="selectors"
/> />
</div> </div>
</el-collapse-item> </el-collapse-item>
<el-collapse-item :title="t('selectVisualization')" name="2"> <el-collapse-item :title="t('selectVisualization')" name="2">
<div class="chart-types"> <div class="chart-types">
<span <span
v-for="(type, index) in ChartTypes" v-for="(type, index) in ChartTypes"
:key="index" :key="index"
@click="changeChartType(type)" @click="changeChartType(type)"
:class="{ active: type.value === states.chartType }" :class="{ active: type.value === states.chartType }"
> >
{{ type.label }} {{ type.label }}
</span> </span>
</div> </div>
</el-collapse-item> </el-collapse-item>
<el-collapse-item :title="t('graphStyles')" name="3"> <el-collapse-item :title="t('graphStyles')" name="3">
<component :is="`${states.chartType}Config`" /> <component :is="`${states.chartType}Config`" />
</el-collapse-item> </el-collapse-item>
<el-collapse-item :title="t('widgetOptions')" name="4"> <el-collapse-item :title="t('widgetOptions')" name="4">
<WidgetOptions /> <WidgetOptions />
</el-collapse-item> </el-collapse-item>
<el-collapse-item :title="t('standardOptions')" name="5"> <el-collapse-item :title="t('standardOptions')" name="5">
<StandardOptions /> <StandardOptions />
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
</div>
<div class="footer"> <div class="footer">
<el-button size="mini"> <el-button size="mini">
{{ t("cancel") }} {{ t("cancel") }}
@ -168,6 +172,7 @@ export default defineComponent({
count: [1, 2, 5, 4, 5, 6, 7, 3, 4, 5, 2, 1, 6, 9], count: [1, 2, 5, 4, 5, 6, 7, 3, 4, 5, 2, 1, 6, 9],
avg: [3, 2, 4, 4, 5, 6, 5, 3, 4, 1, 2, 1, 6, 10], avg: [3, 2, 4, 4, 5, 6, 5, 3, 4, 1, 2, 1, 6, 10],
}; };
const configHeight = document.documentElement.clientHeight - 520;
return { return {
states, states,
changeChartType, changeChartType,
@ -178,6 +183,7 @@ export default defineComponent({
ChartTypes, ChartTypes,
source, source,
metricOpts, metricOpts,
configHeight,
}; };
}, },
}); });
@ -187,12 +193,27 @@ export default defineComponent({
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden;
} }
.graph { .graph {
position: relative;
min-width: 1280px; min-width: 1280px;
border: 1px solid #eee; border: 1px solid #eee;
padding: 10px; background-color: #fff;
}
.header {
padding: 3px 0;
text-align: center;
// border-bottom: 1px solid #eee;
background-color: aliceblue;
}
.render-chart {
padding: 5px;
height: 350px;
width: 100%;
} }
.selectors { .selectors {
@ -224,7 +245,8 @@ export default defineComponent({
} }
span.active { span.active {
background-color: #eee; background-color: #409eff;
color: #fff;
} }
.footer { .footer {
@ -239,6 +261,7 @@ span.active {
} }
.collapse { .collapse {
margin: 10px 0; margin-top: 10px;
overflow: auto;
} }
</style> </style>

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

@ -87,6 +87,9 @@ function getOption() {
type: "dotted", type: "dotted",
}, },
showBackground: props.config.showBackground, showBackground: props.config.showBackground,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
markArea: markArea:
index === 0 index === 0
? { ? {