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

feat: update axes labels in metric charts, add grid lines

parent 991286c1
No related branches found
No related tags found
No related merge requests found
......@@ -69,7 +69,7 @@ function render([data, startDate, endDate, maxY]) {
svg.append("g")
.classed('x-axis-group', true)
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x).ticks(6).tickSize(4).tickFormat(d3.utcFormat("%d.%m.%Y")))
.call(d3.axisBottom(x).ticks(6).tickPadding(8).tickSize(5).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'])
......@@ -78,8 +78,15 @@ function render([data, startDate, endDate, maxY]) {
svg.append("g")
.classed('y-axis-group', true)
.attr("transform", `translate(${marginLeft},0)`)
.call(d3.axisLeft(y).ticks(6).tickSize(0).tickPadding(5))
.call(d3
.axisLeft(y)
.ticks(6)
.tickSize(0)
.tickPadding(5)
.tickSizeInner(-_width.value + marginLeft + marginRight)
)
// Append y-axis title on the left
svg.append("text")
.attr("text-anchor", "end")
.attr("transform", "rotate(-90)")
......@@ -152,7 +159,7 @@ function render([data, startDate, endDate, maxY]) {
.attr('stroke-dasharray', 4)
.attr("d", d3.line()([[xPos, y(0)], [xPos, y(maxY)]]))
const group = releaseGroup.append('g')
const group = releaseGroup.append('g').attr('transform', 'translate(-79 0)')
group
.append('rect')
......@@ -168,7 +175,7 @@ function render([data, startDate, endDate, maxY]) {
.attr("y", y(maxY))
.attr("x", xPos)
.attr('dy', 12)
.attr('dx', 5)
.attr('dx', 8)
.text(release.tag_name)
.attr('stroke', 'none')
.attr('fill', colors.gray['600'])
......@@ -195,57 +202,73 @@ watch([() => props.data, () => props.startDate, () => props.endDate, () => props
</script>
<template>
<div ref="container"></div>
<div class="svg-container" ref="container"></div>
</template>
<style lang="scss">
.releases-group {
.tag-name {
font-size: 10px;
}
}
.path-group {
path {
fill: none;
stroke: var(--color--neutral-text);
}
<style lang="scss" scoped>
circle {
fill: var(--color--neutral-text);
:deep(.svg-container) {
.releases-group {
.tag-name {
font-size: 10px;
}
}
&.up {
.path-group {
path {
stroke: var(--color--positive-text);
fill: none;
stroke: var(--color--neutral-text);
}
circle {
fill: var(--color--positive-text);
fill: var(--color--neutral-text);
}
}
&.down {
path {
stroke: var(--color--negative-text);
&.up {
path {
stroke: var(--color--positive-text);
}
circle {
fill: var(--color--positive-text);
}
}
circle {
fill: var(--color--negative-text);
&.down {
path {
stroke: var(--color--negative-text);
}
circle {
fill: var(--color--negative-text);
}
}
}
}
.y-axis-group {
.tick {
&:first-of-type {
.y-axis-group {
.tick {
&:first-of-type {
text {
transform: translateY(-3px);
}
line {
stroke: none;
}
}
text {
transform: translateY(-3px);
@apply text-[11px];
}
line {
stroke: theme('colors.gray.200');
}
}
}
.x-axis-group {
text {
@apply text-[9px];
@apply text-[11px];
}
}
}
......
......@@ -73,23 +73,24 @@ function tooltipContent(d: TimelineChartDataPoint) {
:tooltip-content="tooltipContent"
:width="400"
/>
</div> <OverlayPanel
ref="op"
:pt="{
</div>
<OverlayPanel
ref="op"
:pt="{
root: {
class: 'z-[9999] bg-white border rounded-md shadow-md p-6'
class: 'z-[9999] bg-white border rounded-md shadow-md'
}
}"
>
<BaseTimelineDetailedChart
:data="data"
:max-y="maxY"
:y-axis-title="$t(metric)"
:start-date="startDate"
:end-date="endDate"
:tooltip-content="tooltipContent"
:height="400"
:width="660"
:data="data"
:max-y="maxY"
:y-axis-title="$t(metric)"
:start-date="startDate"
:end-date="endDate"
:tooltip-content="tooltipContent"
:height="400"
:width="660"
/>
</OverlayPanel>
</template>
......
......@@ -67,6 +67,7 @@ function tooltipContent(d: TimelineChartDataPoint) {
<BaseTimelineDetailedChart
:data="data"
:max-y="maxY"
:y-axis-title="$t(metric)"
:start-date="startDate"
:end-date="endDate"
:tooltip-content="tooltipContent"
......
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