mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-07-27 17:19:39 +02:00
Improve time series chart property names
This commit is contained in:
parent
fd84d1df28
commit
139a18bf61
1 changed files with 30 additions and 30 deletions
|
@ -10,12 +10,12 @@ export default class extends Controller {
|
||||||
strokeWidth: { type: Number, default: 2 }
|
strokeWidth: { type: Number, default: 2 }
|
||||||
}
|
}
|
||||||
|
|
||||||
#_d3MainSvg = null
|
#d3SvgMemo = null
|
||||||
#_d3MainGroup = null
|
#d3GroupMemo = null
|
||||||
#d3Tooltip = null
|
#d3Tooltip = null
|
||||||
#normalDataPoints = []
|
|
||||||
#d3InitialContainerWidth = 0
|
#d3InitialContainerWidth = 0
|
||||||
#d3InitialContainerHeight = 0
|
#d3InitialContainerHeight = 0
|
||||||
|
#normalDataPoints = []
|
||||||
|
|
||||||
connect() {
|
connect() {
|
||||||
this.#install()
|
this.#install()
|
||||||
|
@ -34,8 +34,8 @@ export default class extends Controller {
|
||||||
}
|
}
|
||||||
|
|
||||||
#teardown() {
|
#teardown() {
|
||||||
this.#_d3MainSvg = null
|
this.#d3SvgMemo = null
|
||||||
this.#_d3MainGroup = null
|
this.#d3GroupMemo = null
|
||||||
this.#d3Tooltip = null
|
this.#d3Tooltip = null
|
||||||
this.#normalDataPoints = []
|
this.#normalDataPoints = []
|
||||||
|
|
||||||
|
@ -75,15 +75,15 @@ export default class extends Controller {
|
||||||
|
|
||||||
|
|
||||||
#drawEmpty() {
|
#drawEmpty() {
|
||||||
this.#d3MainSvg.selectAll(".tick").remove()
|
this.#d3Svg.selectAll(".tick").remove()
|
||||||
this.#d3MainSvg.selectAll(".domain").remove()
|
this.#d3Svg.selectAll(".domain").remove()
|
||||||
|
|
||||||
this.#drawDashedLineEmptyState()
|
this.#drawDashedLineEmptyState()
|
||||||
this.#drawCenteredCircleEmptyState()
|
this.#drawCenteredCircleEmptyState()
|
||||||
}
|
}
|
||||||
|
|
||||||
#drawDashedLineEmptyState() {
|
#drawDashedLineEmptyState() {
|
||||||
this.#d3MainSvg
|
this.#d3Svg
|
||||||
.append("line")
|
.append("line")
|
||||||
.attr("x1", this.#d3InitialContainerWidth / 2)
|
.attr("x1", this.#d3InitialContainerWidth / 2)
|
||||||
.attr("y1", 0)
|
.attr("y1", 0)
|
||||||
|
@ -94,7 +94,7 @@ export default class extends Controller {
|
||||||
}
|
}
|
||||||
|
|
||||||
#drawCenteredCircleEmptyState() {
|
#drawCenteredCircleEmptyState() {
|
||||||
this.#d3MainSvg
|
this.#d3Svg
|
||||||
.append("circle")
|
.append("circle")
|
||||||
.attr("cx", this.#d3InitialContainerWidth / 2)
|
.attr("cx", this.#d3InitialContainerWidth / 2)
|
||||||
.attr("cy", this.#d3InitialContainerHeight / 2)
|
.attr("cy", this.#d3InitialContainerHeight / 2)
|
||||||
|
@ -118,7 +118,7 @@ export default class extends Controller {
|
||||||
|
|
||||||
#drawXAxisLabels() {
|
#drawXAxisLabels() {
|
||||||
// Add ticks
|
// Add ticks
|
||||||
this.#d3MainGroup
|
this.#d3Group
|
||||||
.append("g")
|
.append("g")
|
||||||
.attr("transform", `translate(0,${this.#d3ContainerHeight})`)
|
.attr("transform", `translate(0,${this.#d3ContainerHeight})`)
|
||||||
.call(
|
.call(
|
||||||
|
@ -132,7 +132,7 @@ export default class extends Controller {
|
||||||
.remove()
|
.remove()
|
||||||
|
|
||||||
// Style ticks
|
// Style ticks
|
||||||
this.#d3MainGroup.selectAll(".tick text")
|
this.#d3Group.selectAll(".tick text")
|
||||||
.style("fill", tailwindColors.gray[500])
|
.style("fill", tailwindColors.gray[500])
|
||||||
.style("font-size", "12px")
|
.style("font-size", "12px")
|
||||||
.style("font-weight", "500")
|
.style("font-weight", "500")
|
||||||
|
@ -145,7 +145,7 @@ export default class extends Controller {
|
||||||
}
|
}
|
||||||
|
|
||||||
#drawTrendline() {
|
#drawTrendline() {
|
||||||
this.#d3MainGroup
|
this.#d3Group
|
||||||
.append("path")
|
.append("path")
|
||||||
.datum(this.#normalDataPoints)
|
.datum(this.#normalDataPoints)
|
||||||
.attr("fill", "none")
|
.attr("fill", "none")
|
||||||
|
@ -173,7 +173,7 @@ export default class extends Controller {
|
||||||
#trackMouseForShowingTooltip() {
|
#trackMouseForShowingTooltip() {
|
||||||
const bisectDate = d3.bisector(d => d.date).left
|
const bisectDate = d3.bisector(d => d.date).left
|
||||||
|
|
||||||
this.#d3MainGroup.append("rect")
|
this.#d3Group.append("rect")
|
||||||
.attr("width", this.#d3ContainerWidth)
|
.attr("width", this.#d3ContainerWidth)
|
||||||
.attr("height", this.#d3ContainerHeight)
|
.attr("height", this.#d3ContainerHeight)
|
||||||
.attr("fill", "none")
|
.attr("fill", "none")
|
||||||
|
@ -192,11 +192,11 @@ export default class extends Controller {
|
||||||
const d = xPos - this.#d3XScale(d0.date) > this.#d3XScale(d1.date) - xPos ? d1 : d0
|
const d = xPos - this.#d3XScale(d0.date) > this.#d3XScale(d1.date) - xPos ? d1 : d0
|
||||||
|
|
||||||
// Reset
|
// Reset
|
||||||
this.#d3MainGroup.selectAll(".data-point-circle").remove()
|
this.#d3Group.selectAll(".data-point-circle").remove()
|
||||||
this.#d3MainGroup.selectAll(".guideline").remove()
|
this.#d3Group.selectAll(".guideline").remove()
|
||||||
|
|
||||||
// Big circle
|
// Big circle
|
||||||
this.#d3MainGroup
|
this.#d3Group
|
||||||
.append("circle")
|
.append("circle")
|
||||||
.attr("class", "data-point-circle")
|
.attr("class", "data-point-circle")
|
||||||
.attr("cx", this.#d3XScale(d.date))
|
.attr("cx", this.#d3XScale(d.date))
|
||||||
|
@ -207,7 +207,7 @@ export default class extends Controller {
|
||||||
.attr("pointer-events", "none")
|
.attr("pointer-events", "none")
|
||||||
|
|
||||||
// Small circle
|
// Small circle
|
||||||
this.#d3MainGroup
|
this.#d3Group
|
||||||
.append("circle")
|
.append("circle")
|
||||||
.attr("class", "data-point-circle")
|
.attr("class", "data-point-circle")
|
||||||
.attr("cx", this.#d3XScale(d.date))
|
.attr("cx", this.#d3XScale(d.date))
|
||||||
|
@ -217,7 +217,7 @@ export default class extends Controller {
|
||||||
.attr("pointer-events", "none")
|
.attr("pointer-events", "none")
|
||||||
|
|
||||||
// Guideline
|
// Guideline
|
||||||
this.#d3MainGroup
|
this.#d3Group
|
||||||
.append("line")
|
.append("line")
|
||||||
.attr("class", "guideline")
|
.attr("class", "guideline")
|
||||||
.attr("x1", this.#d3XScale(d.date))
|
.attr("x1", this.#d3XScale(d.date))
|
||||||
|
@ -235,8 +235,8 @@ export default class extends Controller {
|
||||||
.style("top", event.pageY - 10 + "px")
|
.style("top", event.pageY - 10 + "px")
|
||||||
})
|
})
|
||||||
.on("mouseout", () => {
|
.on("mouseout", () => {
|
||||||
this.#d3MainGroup.selectAll(".guideline").remove()
|
this.#d3Group.selectAll(".guideline").remove()
|
||||||
this.#d3MainGroup.selectAll(".data-point-circle").remove()
|
this.#d3Group.selectAll(".data-point-circle").remove()
|
||||||
this.#d3Tooltip.style("opacity", 0)
|
this.#d3Tooltip.style("opacity", 0)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -309,26 +309,26 @@ export default class extends Controller {
|
||||||
.attr("viewBox", [ 0, 0, this.#d3InitialContainerWidth, this.#d3InitialContainerHeight ])
|
.attr("viewBox", [ 0, 0, this.#d3InitialContainerWidth, this.#d3InitialContainerHeight ])
|
||||||
}
|
}
|
||||||
|
|
||||||
#createFullChartGroup() {
|
#createMainGroup() {
|
||||||
return this.#d3MainSvg
|
return this.#d3Svg
|
||||||
.append("g")
|
.append("g")
|
||||||
.attr("transform", `translate(${this.#margin.left},${this.#margin.top})`)
|
.attr("transform", `translate(${this.#margin.left},${this.#margin.top})`)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
get #d3MainSvg() {
|
get #d3Svg() {
|
||||||
if (this.#_d3MainSvg) {
|
if (this.#d3SvgMemo) {
|
||||||
return this.#_d3MainSvg
|
return this.#d3SvgMemo
|
||||||
} else {
|
} else {
|
||||||
return this.#_d3MainSvg = this.#createMainSvg()
|
return this.#d3SvgMemo = this.#createMainSvg()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
get #d3MainGroup() {
|
get #d3Group() {
|
||||||
if (this.#_d3MainGroup) {
|
if (this.#d3GroupMemo) {
|
||||||
return this.#_d3MainGroup
|
return this.#d3GroupMemo
|
||||||
} else {
|
} else {
|
||||||
return this.#_d3MainGroup = this.#createFullChartGroup()
|
return this.#d3GroupMemo = this.#createMainGroup()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue