Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-07-27 17:19:39 +02:00
Code Issues Releases Activity Actions

Improve time series chart property names

Browse source
This commit is contained in:
Jose Farias 2024-04-20 12:37:45 -06:00
parent fd84d1df28
commit 139a18bf61
1 changed files with 30 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

60
app/javascript/controllers/time_series_chart_controller.js
View file

@ -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()
} }
} }