2020 <VisLine
2121 :x =" x"
2222 :y =" y"
23- color =" var(--ui-secondary)"
23+ :color =" color"
24+ :line-dash-array =" lineDashArray"
2425 />
2526 <VisArea
2627 :x =" x"
27- :y =" y "
28+ :y =" yArea "
2829 color =" var(--ui-secondary)"
2930 :opacity =" 0.1"
3031 />
@@ -55,12 +56,13 @@ type DataRecord = {
5556 date: Date
5657 total: number
5758 checks: number
59+ commonTotal: number
5860}
5961
6062const { period, range, values } = defineProps <{
6163 period: Period
6264 range: Range
63- values: { date: string , total: number , checks: number }[]
65+ values: { date: string , total: number , checks: number , commonTotal : number }[]
6466}>()
6567
6668const cardRef = useTemplateRef <HTMLElement | null >(' cardRef' )
@@ -84,12 +86,20 @@ watch([() => period, () => range, () => values], () => {
8486 date ,
8587 total: value ?.total ?? 0 ,
8688 checks: value ?.checks ?? 0 ,
89+ commonTotal: value ?.commonTotal ?? 0 ,
8790 }
8891 })
8992}, { immediate: true })
9093
9194const x = (_ : DataRecord , i : number ) => i
92- const y = (d : DataRecord ) => d .total
95+ const y = [
96+ (d : DataRecord ) => d .total ,
97+ (d : DataRecord ) => d .commonTotal ,
98+ ]
99+ const yArea = (d : DataRecord ) => d .total
100+
101+ const color = (_ : DataRecord , i : number ) => [' var(--ui-secondary)' , ' var(--ui-secondary)' ][i ]
102+ const lineDashArray = (_ : DataRecord , i : number ) => [i === 0 ? undefined : 4 ]
93103
94104const total = computed (() => data .value .reduce ((acc : number , { total }) => acc + total , 0 ))
95105
@@ -111,7 +121,7 @@ function xTicks(i: number) {
111121 return formatDate (data .value [i ].date )
112122}
113123
114- const template = (d : DataRecord ) => ` ${formatDate (d .date )}: ${formatNumber (d .total )}, ${d .checks } ${pluralizationRu (d .checks , [' чек' , ' чека' , ' чеков' ])} `
124+ const template = (d : DataRecord ) => ` ${formatDate (d .date )}, ${format (d .date , ' eeeeee ' , { locale: ru })}: ${d .checks } ${pluralizationRu (d .checks , [' чек' , ' чека' , ' чеков' ])}<br> Выручка: ${ formatNumber ( d . total )}<br> Средняя: ${ formatNumber ( d . commonTotal )} `
115125 </script >
116126
117127<style scoped>
0 commit comments