Merge branch 'timeline-slider' into ms-2-part-2

Author: GusevPM

components/DatePicker.vue

@@ -122,6 +122,8 @@ const updateSelectedRange = (from, to) => {
 			} else {
 				selectedRange.value = `${from.toFormat("dd LLL yyyy")} - ${to.toFormat("dd LLL yyyy")}`
 			}
+			month.value = to.c.month
+			year.value = to.c.year
 		} else {
 			selectedRange.value = from.toFormat("dd LLL")
 		}
@@ -131,8 +133,8 @@ const updateSelectedRange = (from, to) => {
 }
 updateSelectedRange(startDate.value, endDate.value)
 
-const isNextMonthAvailable = true // computed(() => !(month.value === currentDate.value.month && year.value === currentDate.value.year))
-const isPrevMonthAvailable = true // computed(() => limitMinDate.value ? limitMinDate.value.ts < days.value[0][0].ts : true)
+const isNextMonthAvailable = true
+const isPrevMonthAvailable = true
 const isDayAvailable = (d) => {
 	if (d.startOf("day").ts > currentDate.value.startOf("day").ts) {
 		return false
@@ -154,6 +156,8 @@ const handleSelectPeriod = (period) => {
 		startDate.value = DateTime.now()
 			.minus({
 				days: period.timeframe === "day" ? period.value - 1 : 0,
+				months: period.timeframe === "month" ? period.value : 0,
+				years: period.timeframe === "year" ? period.value : 0,
 			})
 			.startOf("day")
 		endDate.value = DateTime.now().endOf("day")
@@ -193,6 +197,12 @@ const isInSelectedPeriod = (d) => {
 
 const isOpen = ref(false)
 const handleOpen = () => {
+	if (props.to) {
+		let to = DateTime.fromSeconds(parseInt(props.to))
+		month.value = to.c.month
+		year.value = to.c.year
+	}
+
 	isOpen.value = true
 }
 const handleClose = () => {

components/modules/stats/BarChart.vue

@@ -57,6 +57,10 @@ const buildChart = (chart, cData, onEnter, onLeave) => {
 	const y = d3.scaleLinear([MIN_VALUE, MAX_VALUE], [height - marginBottom, marginTop])
 
 	function formatDate(date) {
+		if (props.series?.timeframe?.timeframe === "hour") {
+			return DateTime.fromJSDate(date).toFormat("HH:mm, LLL dd, yyyy")
+		}
+
 		return DateTime.fromJSDate(date).toFormat("LLL dd, yyyy")
 	}
 
@@ -105,7 +109,12 @@ const buildChart = (chart, cData, onEnter, onLeave) => {
 	svg.append("g")
 		.attr("transform", `translate(0, ${height - marginAxisX})`)
 		.attr("color", "var(--op-20)")
-		.call(d3.axisBottom(scaleX).ticks(Math.min(cData.data.length, 6)).tickFormat(d3.timeFormat("%b %d")))
+		.call(
+			d3
+				.axisBottom(scaleX)
+				.ticks(Math.min(cData.data.length, 6))
+				.tickFormat(d3.timeFormat(["hour", "day"].includes(props.series.timeframe.timeframe) ? "%b %d" : "%b"))
+		)
 		.selectAll(".tick line")
 		.filter(function (d) {
 			return d === 0

components/modules/stats/LineChart.vue

@@ -49,8 +49,8 @@ const buildChart = (chart, cData, onEnter, onLeave) => {
 		.curve(d3.curveCatmullRom)
 
 	function formatDate(date) {
-		if (props.series.timeframe === "hour") {
-			return DateTime.fromJSDate(date).toFormat("LLL dd, HH:mm")
+		if (props.series?.timeframe?.timeframe === "hour") {
+			return DateTime.fromJSDate(date).toFormat("HH:mm, LLL dd, yyyy")
 		}
 
 		return DateTime.fromJSDate(date).toFormat("LLL dd, yyyy")
@@ -104,8 +104,8 @@ const buildChart = (chart, cData, onEnter, onLeave) => {
 		.call(
 			d3
 				.axisBottom(x)
-				.ticks(6)
-				.tickFormat(d3.timeFormat(props.series.timeframe === "hour" ? "%H:%M" : "%b %d")),
+				.ticks(Math.min(cData.data.length, 6))
+				.tickFormat(d3.timeFormat(["hour", "day"].includes(props.series.timeframe.timeframe) ? "%b %d" : "%b"))
 		)
 
 	svg.append("g")