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

feat: dynamic switching components

Browse Source
This commit is contained in:
Qiuxia Fan
2022-01-04 22:29:35 +08:00
parent 731aded68b
commit b9a6e648ae
6 changed files with 116 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/views/dashboard/graphs/ProgressBar.vue
View File

@@ -22,7 +22,7 @@ limitations under the License. -->
/>
<div class="mb-5 ell">
<span class="calls sm mr-10">{{ i.value }}</span>
<span class="cp link-hover" @click="handleLink(i)">
<span class="cp link-hover">
{{ i.name + getTraceId(i) }}
</span>
</div>
@@ -33,7 +33,7 @@ limitations under the License. -->
/>
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import type { PropType } from "vue";
import { defineProps, computed } from "vue";
import { ElProgress } from "element-plus";
@@ -53,33 +53,33 @@ const props = defineProps({
});
const maxValue = computed(() => {
if (!props.data.length) {
return null;
return 0;
}
const temp: number[] = props.data.map((i: any) => i.value);
return Math.max.apply(null, temp);
});
const getTraceId = computed((i: { [key: string]: (number | string)[] }) => {
const getTraceId = (i: { [key: string]: (number | string)[] }): string => {
return i.traceIds && i.traceIds[0] ? ` - ${i.traceIds[0]}` : "";
});
const datas: any = computed(() => {
};
const datas: any = () => {
if (!props.data.length) {
return [];
}
const { sortOrder } = props.itemConfig;
let val: { [key: string]: number | string }[] = [];
const val: any = props.data;
switch (sortOrder) {
case "DES":
val = props.data.sort((a: any, b: any) => b.value - a.value);
val.sort((a: any, b: any) => b.value - a.value);
break;
case "ASC":
val = props.data.sort((a: any, b: any) => a.value - b.value);
val.sort((a: any, b: any) => a.value - b.value);
break;
default:
break;
}
return val;
});
};
function handleClick(i: string) {
copy(i);
}

32
src/views/dashboard/graphs/index.ts
View File

@@ -15,22 +15,22 @@
* limitations under the License.
*/
import ChartArea from "./Area.vue";
import ChartLine from "./Line.vue";
import ChartBar from "./Bar.vue";
import ChartHeatmap from "./Heatmap.vue";
import ProgressBar from "./ProgressBar.vue";
import ChartTable from "./Table.vue";
import ChartPie from "./Pie.vue";
import ChartCard from "./Card.vue";
import Area from "./Area.vue";
import Line from "./Line.vue";
import Bar from "./Bar.vue";
import Heatmap from "./Heatmap.vue";
// import ProgressBar from "./ProgressBar.vue";
import Table from "./Table.vue";
import Pie from "./Pie.vue";
import Card from "./Card.vue";
export default {
ChartLine,
ChartBar,
ChartHeatmap,
ProgressBar,
ChartArea,
ChartTable,
ChartPie,
ChartCard,
Line,
Bar,
Heatmap,
// ProgressBar,
Area,
Table,
Pie,
Card,
};