Skip to content
Snippets Groups Projects
Commit 7894e4bf authored by Paul Pestov's avatar Paul Pestov
Browse files

feat: update chart styles

parent 94fd7b96
No related branches found
No related tags found
No related merge requests found
......@@ -3,6 +3,8 @@ import * as d3 from "d3"
import { ref, watch, computed } from "vue"
import type { TimelineChartDataPoint } from "@/types"
import { createTooltip, setEventListeners } from "@/helpers/d3/d3-tooltip"
import colors from 'tailwindcss/colors'
interface Props {
data: TimelineChartDataPoint[],
......@@ -60,13 +62,23 @@ watch([() => props.data, () => props.startDate, () => props.endDate], ([data, st
// Add the x-axis.
svg.append("g")
.classed('x-axis-group', true)
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x).ticks(3).tickFormat(d3.utcFormat("%d.%m.%Y")))
.call(d3.axisBottom(x).ticks(0).tickSize(0).tickFormat(d3.utcFormat("%d.%m.%Y")))
svg.select('.x-axis-group .domain').attr('stroke', colors.gray['400'])
svg.selectAll('.x-axis-group .tick text').attr('fill', colors.gray['400'])
// Add the y-axis.
svg.append("g")
.classed('y-axis-group', true)
.attr("transform", `translate(${marginLeft},0)`)
.call(d3.axisLeft(y).ticks(1))
.call(d3.axisLeft(y).ticks(1).tickSize(0).tickPadding(5))
svg.select('.y-axis-group .domain').attr('stroke', colors.gray['400'])
svg.selectAll('.y-axis-group .tick text').attr('fill', colors.gray['400'])
const trend = isUp(data, false)
......@@ -157,5 +169,18 @@ watch([() => props.data, () => props.startDate, () => props.endDate], ([data, st
}
}
.y-axis-group {
.tick {
&:first-of-type {
text {
transform: translateY(-3px);
}
}
text {
@apply text-[9px];
}
}
}
</style>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment