move legend to the right of the graph
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
This commit is contained in:
parent
c3b33493e5
commit
4cd27dbbaf
|
@ -1,12 +1,16 @@
|
|||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.barStack:hover {
|
||||
filter: drop-shadow(0 0 calc(4rem / 16) var(--label));
|
||||
}
|
||||
|
||||
.legend {
|
||||
position: relative;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.toolTip {
|
||||
|
|
|
@ -45,11 +45,18 @@ export type StackedBarProps = {
|
|||
numTicksLeftAxis?: number;
|
||||
/** Distance between the left axis labels and the start of the lines of the graph, in px. */
|
||||
valueAxisLeftOffset?: number;
|
||||
/** Distance between the right side of the graph and the legend, in px. */
|
||||
legendLeftOffset?: number;
|
||||
/** Distance between the top of the graph and the legend, in px. */
|
||||
legendTopOffset?: number;
|
||||
/** Width of the lines in the graph, in px. */
|
||||
strokeWidth?: number;
|
||||
/** Length of the dashes and the gaps in the graph, in px. */
|
||||
strokeDashArray?: string;
|
||||
/** Padding between each bar in the stacked bar graph, from 0 to 1 */
|
||||
scalePadding?: number;
|
||||
/** Margin for each item in the legend */
|
||||
itemMargin?: string;
|
||||
};
|
||||
|
||||
const tooltipStyles = {
|
||||
|
@ -73,6 +80,9 @@ export function StackedBarGraph({
|
|||
valueAxisLeftOffset = 40,
|
||||
strokeWidth = 2.5,
|
||||
strokeDashArray = "10,4",
|
||||
legendLeftOffset = 40,
|
||||
legendTopOffset = 40,
|
||||
itemMargin = "15px 0 0 0",
|
||||
}: StackedBarProps) {
|
||||
const yTotals = data.reduce((allTotals, currCategory) => {
|
||||
const yTotal = keys.reduce((categoryTotal, k) => {
|
||||
|
@ -125,7 +135,7 @@ export function StackedBarGraph({
|
|||
yScale.range([yMax, 0]);
|
||||
|
||||
return width < 10 ? null : (
|
||||
<div>
|
||||
<div className={styles.container}>
|
||||
<svg ref={containerRef} width={width} height={height}>
|
||||
<Group top={margin.top} left={margin.left}>
|
||||
<GridRows
|
||||
|
@ -228,11 +238,14 @@ export function StackedBarGraph({
|
|||
/>
|
||||
</Group>
|
||||
</svg>
|
||||
<div className={styles.legend} style={{ width: width }}>
|
||||
<div
|
||||
className={styles.legend}
|
||||
style={{ left: width + legendLeftOffset, top: legendTopOffset }}
|
||||
>
|
||||
<LegendOrdinal
|
||||
scale={colorScale}
|
||||
direction="row"
|
||||
labelMargin="0 15px 0 0"
|
||||
direction="column"
|
||||
itemMargin={itemMargin}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
Loading…
Reference in New Issue