Skip to content

Commit

Permalink
change annotations
Browse files Browse the repository at this point in the history
  • Loading branch information
@blackhexagon
blackhexagon committed Nov 30, 2021
1 parent 0a7c102 commit dd158f5
Show file tree
Hide file tree
Showing 7 changed files with 92 additions and 58 deletions.
36 changes: 26 additions & 10 deletions dev/sample.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,15 @@
"2": "60",
"3": "70",
"4": "80",
"5": "90",
"6": "80",
"7": "100"
"5": "90"
},
"colors": "7",
"name": "Test"
},
"2": {
"values": {
"4": "100",
"5": "100",
"6": "120",
"7": "130"
"5": "100"
},
"colors": "3",
"name": "uppward"
Expand All @@ -41,10 +37,10 @@
"value": "delta",
"colors": "5",
"annotation": [
["No.", "1"],
["Date", "1Q 2015"],
["Class", "A"],
["Type", "Investment"]
["Type", "Class", "Number of shares"],
["Subscription", "CZK", 1000],
["Transfer", "EUR", 450],
["Mistake"]
]
},
"5": {
Expand All @@ -58,6 +54,26 @@
"7": {
"value": "omega",
"colors": "8"
},
"8": {
"value": "psi",
"colors": "1"
},
"9": {
"value": "theta",
"colors": "2"
},
"10": {
"value": "omega",
"colors": "8"
},
"11": {
"value": "psi",
"colors": "1"
},
"12": {
"value": "theta",
"colors": "2"
}
},
"colors": {
Expand Down
30 changes: 21 additions & 9 deletions dist/accolade-chart-lib.es.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5758,6 +5758,10 @@ function redrawLineChart({ chart, set: set2, xScale, yScale, colors: colors$1, l
return line(interpolator(tr).map((value, idx) => [values[idx][0], value]));
};
});
const getPointRadius = () => xScale.bandwidth() * symbolPointRatio;
const getPointX = ([, colKey]) => {
return xScale(colKey) + xScale.bandwidth() / 2 - getPointRadius() / 2 + 4;
};
const tooltip = select("body").append("div").attr("class", "tooltip").style("position", "absolute").style("left", "0").style("top", "0").style("opacity", "0").style("width", "280px").style("pointer-events", "none").style("z-index", "500");
const annotationData = Object.entries(cols).filter(([, { annotation }]) => annotation).map(([key, { annotation }]) => [
key,
Expand All @@ -5767,23 +5771,31 @@ function redrawLineChart({ chart, set: set2, xScale, yScale, colors: colors$1, l
const annotations = chart.selectAll(`.annotation`).data(annotationData);
annotations.exit().remove();
const annotationsEnter = annotations.enter().append(`line`).attr(`class`, `annotation`).attr(`stroke-width`, 2).attr(`fill`, colors.point);
annotationsEnter.merge(annotations).transition(t).attr(`x1`, ([key]) => xScale(key) + xScale.bandwidth() / 2 - 1).attr(`y1`, height).attr(`x2`, ([key]) => xScale(key) + xScale.bandwidth() / 2 - 1).attr(`y2`, ([, , value]) => yScale(value) - 12).attr(`stroke`, "black");
const getPointRadius = () => xScale.bandwidth() * symbolPointRatio;
const getPointX = ([, colKey]) => {
return xScale(colKey) + xScale.bandwidth() / 2 - getPointRadius() / 2 + 4;
};
annotationsEnter.merge(annotations).transition(t).attr(`x1`, ([colKey]) => getPointX([0, colKey])).attr(`y1`, height).attr(`x2`, ([colKey]) => getPointX([0, colKey])).attr(`y2`, ([, , value]) => yScale(value) + getPointRadius()).attr(`stroke`, "black");
const pointsData = set2.sort(([key]) => isMaster(key) ? 1 : -1).reduce((acc, [key, { values }]) => acc.concat(lodash_pairs(values).map((pair) => [key, ...pair])), []).filter(([, , value]) => value);
const points = chart.selectAll(`.point`).data(pointsData, ([rowKey, colKey]) => rowKey + colKey);
points.exit().remove();
const pointsEnter = points.enter().append(`circle`).attr(`class`, `point`).attr(`stroke-width`, 2).attr(`fill`, colors.point);
pointsEnter.merge(points).transition(t).attr(`r`, () => getPointRadius()).attr(`cx`, getPointX).attr(`cy`, ([, , value]) => {
return yScale(value);
}).attr(`stroke`, ([rowKey]) => {
pointsEnter.merge(points).transition(t).attr(`r`, () => getPointRadius()).attr(`cx`, getPointX).attr(`cy`, ([, , value]) => yScale(value)).attr(`stroke`, ([rowKey]) => {
const [, { colors: colorKey }] = set2.find(([key]) => key === rowKey);
const { border: { r, g, b } } = colors$1[colorKey];
return `rgb(${r}, ${g}, ${b})`;
});
chart.selectAll(`.annotation-area`).data(annotationData).enter().append(`rect`).attr(`class`, `annotation-area`).attr(`fill`, "transparent").attr(`x`, ([key]) => xScale(key) + xScale.bandwidth() / 2 - 14).attr(`y`, ([, , value]) => yScale(value) - 14).attr(`width`, 28).attr(`height`, ([, , value]) => height - yScale(value) + 14).on("mouseover", (x2, [, data]) => tooltip.style("opacity", "1").html(`<dl>${data.map(([key, value]) => `<div><dt>${key}</dt><dd>${value}</dd></div>`).join("")}</dl>`)).on("mousemove", (x2, [, data]) => tooltip.style("left", `${event.pageX}px`).style("top", `${event.pageY}px`)).on("mouseout", () => tooltip.style("opacity", "0"));
chart.selectAll(`.annotation-area`).data(annotationData).enter().append(`rect`).attr(`class`, `annotation-area`).attr(`fill`, "transparent").attr(`x`, ([key]) => xScale(key) + xScale.bandwidth() / 2 - 14).attr(`y`, ([, , value]) => yScale(value) - 14).attr(`width`, 28).attr(`height`, ([, , value]) => height - yScale(value) + 14).on("mouseover", (x2, [key, [head, ...rest]]) => tooltip.style("opacity", "1").html(`
<table>
<caption>${cols[key].value}</caption>
<thead>
<tr>
${head.map((it) => `<th>${it}</th>`).join("")}
</tr>
</thead>
<tbody>
${rest.map((row) => `
<tr>${row.map((it) => `<td>${it}</td>`).join("")}</tr>
`).join("")}
</tbody>
</table>
`)).on("mousemove", (x2, [, data]) => tooltip.style("left", `${event.pageX}px`).style("top", `${event.pageY}px`)).on("mouseout", () => tooltip.style("opacity", "0"));
}
function redrawDoughnutChart({ chart, set: set2, colors: colors2, cols, width, sortDirection, sortType }) {
const t = transition().duration(1e3).delay(1e3);
Expand Down
22 changes: 18 additions & 4 deletions dist/accolade-chart-lib.umd.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/style.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"url": "https://github.com/visualio/accolade-chart-lib/issues"
},
"homepage": "https://github.com/visualio/accolade-chart-lib#readme",
"version": "1.0.7",
"version": "1.0.8",
"license": "MIT",
"main": "dist/accolade-chart-lib.umd.js",
"module": "dist/accolade-chart-lib.es.js",
Expand Down
39 changes: 25 additions & 14 deletions src/charts/lineChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,11 @@ export function redrawLineChart({chart, set, xScale, yScale, colors, labels, hei
}
})

/* point helpers */
const getPointRadius = () => xScale.bandwidth() * symbolPointRatio
const getPointX = ([, colKey]) => {
return xScale(colKey) + xScale.bandwidth() / 2 - getPointRadius() / 2 + 4
}

/* annotations */
const tooltip = select("body")
Expand Down Expand Up @@ -241,19 +246,14 @@ export function redrawLineChart({chart, set, xScale, yScale, colors, labels, hei

annotationsEnter.merge(annotations)
.transition(t)
.attr(`x1`, ([key]) => xScale(key) + xScale.bandwidth() / 2 - 1)
.attr(`x1`, ([colKey]) => getPointX([0, colKey]))
.attr(`y1`, height)
.attr(`x2`, ([key]) => xScale(key) + xScale.bandwidth() / 2 - 1)
.attr(`y2`, ([, , value]) => yScale(value) - 12)
.attr(`x2`, ([colKey]) => getPointX([0, colKey]))
.attr(`y2`, ([, , value]) => yScale(value) + getPointRadius())
.attr(`stroke`, "black")


/* points */
const getPointRadius = () => xScale.bandwidth() * symbolPointRatio
const getPointX = ([, colKey]) => {
return xScale(colKey) + xScale.bandwidth() / 2 - getPointRadius() / 2 + 4
}

const pointsData =
set.sort(([key]) => isMaster(key) ? 1 : -1)
.reduce((acc, [key, {values}]) => acc.concat(pairs(values).map(pair => ([key, ...pair]))), [])
Expand All @@ -271,10 +271,7 @@ export function redrawLineChart({chart, set, xScale, yScale, colors, labels, hei
.transition(t)
.attr(`r`, () => getPointRadius())
.attr(`cx`, getPointX)
.attr(`cy`, ([, , value]) => {
// console.log(value)
return yScale(value)
})
.attr(`cy`, ([, , value]) => yScale(value))
.attr(`stroke`, ([rowKey]) => {
const [, {colors: colorKey}] = set.find(([key]) => key === rowKey)
const {border: {r, g, b}} = colors[colorKey]
Expand All @@ -294,10 +291,24 @@ export function redrawLineChart({chart, set, xScale, yScale, colors, labels, hei
.attr(`y`, ([, , value]) => yScale(value) - 14)
.attr(`width`, 28)
.attr(`height`, ([, , value]) => height - yScale(value) + 14)
.on("mouseover", (x, [, data]) =>
.on("mouseover", (x, [key, [head, ...rest]]) =>
tooltip
.style("opacity", "1")
.html(`<dl>${data.map(([key, value]) => `<div><dt>${key}</dt><dd>${value}</dd></div>`).join('')}</dl>`)
.html(`
<table>
<caption>${cols[key].value}</caption>
<thead>
<tr>
${head.map(it => `<th>${it}</th>`).join('')}
</tr>
</thead>
<tbody>
${rest.map(row => `
<tr>${row.map(it => `<td>${it}</td>`).join('')}</tr>
`).join('')}
</tbody>
</table>
`)
)
.on("mousemove", (x, [, data]) =>
tooltip
Expand Down
19 changes: 0 additions & 19 deletions src/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
font-size: 0.8rem;
}


.tooltip:after {
content: '';
position: absolute;
Expand All @@ -20,22 +19,4 @@
border-color: transparent;
border-top-color: white;
transform: translate(-50%, 0);
}

.tooltip * {
margin: 0;
padding: 0;
}

.tooltip dl > div {
display: flex;
}

.tooltip dd {
font-weight: bold;
width: 50%;
}

.tooltip dt {
width: 50%;
}

0 comments on commit dd158f5

Please sign in to comment.