<script setup lang="ts">
|
import { onMounted, reactive, ref, watch } from "vue";
|
import type { DefaultConfigType } from "./index.d";
|
import cloneDeep from "lodash/cloneDeep";
|
import merge from "lodash/merge";
|
const mergedConfig = ref<any>(null);
|
const capsuleLength = ref<any>([]);
|
const capsuleValue = ref<any>([]);
|
const labelData = ref<any>([]);
|
// const labelDataLength = ref<any>([]);
|
|
const defaultConfig = reactive<DefaultConfigType>({
|
// Colors (hex|rgb|rgba|color keywords) ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
|
colors: [
|
"red",
|
"#32c5e9",
|
"#67e0e3",
|
"#9fe6b8",
|
"#ffdb5c",
|
"#ff9f7f",
|
"#fb7293",
|
],
|
unit: "",
|
showValue: false, // Show item value
|
});
|
const props = withDefaults(
|
defineProps<{
|
config: object | any;
|
data: Array<{
|
name: string;
|
value: string | number;
|
}>;
|
}>(),
|
{
|
config: () => { },
|
data: () => [],
|
}
|
);
|
const calcData = () => {
|
mergeConfig();
|
calcCapsuleLengthAndLabelData();
|
};
|
const mergeConfig = () => {
|
mergedConfig.value = merge(cloneDeep(defaultConfig), props.config || {});
|
};
|
const calcCapsuleLengthAndLabelData = () => {
|
if (!props.data.length) return;
|
const newcapsuleValue = props.data.map((item: any) => item.value);
|
const maxValue = Math.max(...newcapsuleValue);
|
capsuleValue.value = newcapsuleValue;
|
capsuleLength.value = newcapsuleValue.map((v: any) =>
|
maxValue ? v / maxValue : 0
|
);
|
const oneFifth = maxValue / 5;
|
const newlabelData = Array.from(
|
new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))
|
);
|
labelData.value = newlabelData;
|
// labelDataLength.value = Array.from(newlabelData).map((v) =>
|
// maxValue ? v / maxValue : 0
|
// );
|
// console.log(labelDataLength.value);
|
};
|
watch(
|
() => props.data,
|
(newval: any) => {
|
calcData();
|
},
|
);
|
watch(
|
() => props.config,
|
(newval: any) => {
|
calcData();
|
},
|
);
|
onMounted(() => {
|
calcData();
|
});
|
</script>
|
|
<template>
|
<div class="dv-capsule-chart">
|
<template v-if="mergedConfig">
|
<div class="label-column">
|
<div v-for="item in data" :key="item.name">
|
{{ item.name }}
|
</div>
|
<div> </div>
|
</div>
|
<div class="capsule-container">
|
<div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
|
<div class="capsule-item-column" :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]
|
};`">
|
<div v-if="mergedConfig.showValue" class="capsule-item-value">
|
{{ capsuleValue[index] }}
|
</div>
|
</div>
|
</div>
|
|
<div class="unit-label">
|
<div v-for="(label, index) in labelData" :key="label + index">
|
{{ label }}
|
</div>
|
</div>
|
</div>
|
|
<div class="unit-text" v-if="mergedConfig.unit">
|
{{ mergedConfig.unit }}
|
</div>
|
</template>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.dv-capsule-chart {
|
position: relative;
|
display: flex;
|
flex-direction: row;
|
box-sizing: border-box;
|
padding: 10px;
|
color: #fff;
|
height: 90%!important;
|
.label-column {
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
box-sizing: border-box;
|
padding-right: 10px;
|
text-align: right;
|
font-size: 12px;
|
|
div {
|
height: 20px;
|
line-height: 20px;
|
}
|
}
|
|
.capsule-container {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
}
|
|
.capsule-item {
|
//box-shadow: 0 0 3px #999;
|
box-shadow:none;
|
height: 10px;
|
margin: 5px 0px;
|
border-radius: 5px;
|
|
.capsule-item-column {
|
background: linear-gradient(to right, #9fe1fa, #f4edc9);
|
position: relative;
|
height: 15px;
|
margin-top: 1px;
|
border-radius: 5px;
|
transition: all 0.3s;
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
|
.capsule-item-value {
|
font-size: 12px;
|
transform: translateX(100%);
|
}
|
}
|
}
|
|
.unit-label {
|
height: 20px;
|
font-size: 12px;
|
position: relative;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.unit-text {
|
text-align: right;
|
display: flex;
|
align-items: flex-end;
|
font-size: 12px;
|
line-height: 20px;
|
margin-left: 10px;
|
}
|
}
|
</style>
|
