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