Skip to content
Snippets Groups Projects
Commit 7d1c3b6d authored by Leander's avatar Leander
Browse files

feat: add data points to radar chart

parent 104fa545
No related branches found
No related tags found
No related merge requests found
...@@ -76,43 +76,53 @@ export default class RadarChart extends Chart { ...@@ -76,43 +76,53 @@ export default class RadarChart extends Chart {
label: attribute.label, label: attribute.label,
key: attribute.key, key: attribute.key,
}) })
console.log(vis.axes)
} }
} }
updateVis(selectedData: any[]): void { updateVis(selectedData: any[]): void {
const vis = this; const vis = this;
const data = vis.chart.select('.dataWrapper') const dataWrapper = vis.chart.select('.dataWrapper')
this.config.selectedData = selectedData; this.config.selectedData = selectedData;
const preparedData = vis.getPreparedData() const preparedData = vis.getPreparedData()
const data = dataWrapper.selectAll('.data')
data.selectAll('.data')
.data(preparedData) .data(preparedData)
.join( .join(
enter => enter.append("path"), enter => enter.append("g"),
update => update, update => update,
exit => exit.remove() exit => exit.remove()
) )
.attr("class", "data") .attr("class", "data")
data.append("path")
.attr("d", (d: any) => { .attr("d", (d: any) => {
const data = d.map((d: any) => d.value) const data = d.map((d: any) => d.value)
return d3.lineRadial() return d3.lineRadial()
.angle((_, index) => Math.PI * 2 / vis.axes.length * index) .angle((_, index) => Math.PI * 2 / vis.axes.length * index)
.radius((data) => data) .radius((value) => value || 0)
.curve(d3.curveCardinalClosed.tension(0.6)) .curve(d3.curveCardinalClosed.tension(0.6))
([...data, data[0]]) ([...data, data[0]])
}) })
.attr('fill', '#69b3a211') .attr('fill', '#69b3a211')
.attr('stroke', 'black') .attr('stroke', 'black')
data.selectAll('.dataPoint')
.data((d: any) => d)
.join(
enter => enter.append("circle"),
update => update,
exit => exit.remove()
)
.attr("class", "dataPoint")
.attr("r", 3)
.attr("cx", (data: {label: string, value: number}, index: number) => Math.sin(2 * Math.PI * (index/vis.axes.length)) * data.value)
.attr("cy", (data: {label: string, value: number}, index: number) => -Math.cos(2 * Math.PI * (index/vis.axes.length)) * data.value)
.attr('fill', 'black')
} }
private getPreparedData() { private getPreparedData() {
return this.config.selectedData.map( return this.config.selectedData.map(
(d: any) => this.axes.map(axis => { (d: any) => this.axes.map(axis => {
console.log(axis.label)
console.log(d[axis.key])
console.log(axis.scale(d[axis.key]))
return { return {
label: axis.label, label: axis.label,
value: axis.scale(d[axis.key]) value: axis.scale(d[axis.key])
...@@ -158,30 +168,44 @@ export default class RadarChart extends Chart { ...@@ -158,30 +168,44 @@ export default class RadarChart extends Chart {
.attr('fill', 'black') .attr('fill', 'black')
.text((d: any) => d.label) .text((d: any) => d.label)
const data = vis.chart.append("g") const dataWrapper = vis.chart.append("g")
.attr("class", "dataWrapper") .attr("class", "dataWrapper")
.attr('transform', `translate(${vis.chartCenter},${vis.chartCenter})`) .attr('transform', `translate(${vis.chartCenter},${vis.chartCenter})`)
const preparedData = vis.getPreparedData() const preparedData = vis.getPreparedData()
data.selectAll('.data') const data = dataWrapper.selectAll('.data')
.data(preparedData) .data(preparedData)
.join( .join(
enter => enter.append("path"), enter => enter.append("g"),
update => update, update => update,
exit => exit.remove() exit => exit.remove()
) )
.attr("class", "data") .attr("class", "data")
data.append("path")
.attr("d", (d: any) => { .attr("d", (d: any) => {
const data = d.map((d: any) => d.value) const data = d.map((d: any) => d.value)
return d3.lineRadial() return d3.lineRadial()
.angle((_, index) => Math.PI * 2 / vis.axes.length * index) .angle((_, index) => Math.PI * 2 / vis.axes.length * index)
.radius((value) => value) .radius((value) => value || 0)
.curve(d3.curveCardinalClosed.tension(0.6)) .curve(d3.curveCardinalClosed.tension(0.6))
([...data, data[0]]) ([...data, data[0]])
}) })
.attr('fill', '#69b3a211') .attr('fill', '#69b3a211')
.attr('stroke', 'black') .attr('stroke', 'black')
data.selectAll('.dataPoint')
.data((d: any) => d)
.join(
enter => enter.append("circle"),
update => update,
exit => exit.remove()
)
.attr("class", "dataPoint")
.attr("r", 3)
.attr("cx", (data: {label: string, value: number}, index: number) => Math.sin(2 * Math.PI * (index/vis.axes.length)) * data.value)
.attr("cy", (data: {label: string, value: number}, index: number) => -Math.cos(2 * Math.PI * (index/vis.axes.length)) * data.value)
.attr('fill', 'black')
} }
} }
\ No newline at end of file
...@@ -79,8 +79,10 @@ h1 { ...@@ -79,8 +79,10 @@ h1 {
#bubble-chart-wrapper { #bubble-chart-wrapper {
position: relative; position: relative;
margin: 0 auto; margin: 1rem auto;
width: fit-content; width: fit-content;
box-shadow: 0 0 20px rgba(51, 51, 51, 0.5);
padding: 1rem;
} }
.bubble-chart-settings { .bubble-chart-settings {
...@@ -113,7 +115,7 @@ h1 { ...@@ -113,7 +115,7 @@ h1 {
#radar-chart-wrapper { #radar-chart-wrapper {
position: relative; position: relative;
margin: 0 auto 4rem; margin: 0 4rem 4rem;
} }
} }
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment