svg.vch__wrapper(:viewBox="viewbox")
g.vch__months__labels__wrapper(:transform="monthsLabelWrapperTransform[position]")
text.vch__month__label(
v-for="(month, index) in heatmap.firstFullWeekOfMonths",
:x="getMonthLabelPostion(month).x",
:y="getMonthLabelPostion(month).y"
) {{ lo.months[month.value] }}
g.vch__days__labels__wrapper(:transform="daysLabelWrapperTransform[position]")
text.vch__day__label(
:x="vertical ? SQUARE_SIZE * 1 : 0",
:y="vertical ? SQUARE_SIZE - SQUARE_BORDER_SIZE : 20"
) {{ lo.days[1] }}
text.vch__day__label(
:x="vertical ? SQUARE_SIZE * 3 : 0",
:y="vertical ? SQUARE_SIZE - SQUARE_BORDER_SIZE : 44"
) {{ lo.days[3] }}
text.vch__day__label(
:x="vertical ? SQUARE_SIZE * 5 : 0",
:y="vertical ? SQUARE_SIZE - SQUARE_BORDER_SIZE : 69"
) {{ lo.days[5] }}
g.vch__legend__wrapper(:transform="legendWrapperTransform[position]")
text(
:x="vertical ? SQUARE_SIZE * 1.25 : -25"
:y="vertical ? 8 : SQUARE_SIZE + 1"
) {{ lo.less }}
rect(
v-for="(color, index) in rangeColor",
:key="index",
:style="{ fill: color }",
:width="SQUARE_SIZE - SQUARE_BORDER_SIZE",
:height="SQUARE_SIZE - SQUARE_BORDER_SIZE",
:x="vertical ? SQUARE_SIZE * 1.75 : SQUARE_SIZE * index",
:y="vertical ? SQUARE_SIZE * (index + 1) : 5"
)
text(
:x="vertical ? SQUARE_SIZE * 1.25 : SQUARE_SIZE * rangeColor.length + 1",
:y="vertical ? SQUARE_SIZE * (rangeColor.length + 2) - SQUARE_BORDER_SIZE : SQUARE_SIZE + 1"
) {{ lo.more }}
g.vch__year__wrapper(:transform="yearWrapperTransform")
g.vch__month__wrapper(
v-for="(week, weekIndex) in heatmap.calendar",
:key="weekIndex",
:transform="getWeekPosition(weekIndex)"
)
rect.vch__day__square(
v-for="(day, dayIndex) in week",
v-if="day.date < now"
:key="dayIndex",
:transform="getDayPosition(dayIndex)"
:width="SQUARE_SIZE - SQUARE_BORDER_SIZE",
:height="SQUARE_SIZE - SQUARE_BORDER_SIZE",
:style="{ fill: rangeColor[day.colorIndex] }",
v-tooltip="tooltipOptions(day)",
@click="$emit('day-click', day)"
)