fix visual nits
This commit is contained in:
parent
9e6f1e86d0
commit
e346069421
|
@ -14,11 +14,21 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolTip {
|
.toolTip {
|
||||||
padding: 10px 0;
|
font-family: "Inconsolata", monospace;
|
||||||
|
font-weight: bold;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
background-color: var(--label);
|
||||||
|
color: var(--primary-background);
|
||||||
|
pointer-events: none;
|
||||||
|
border-radius: calc(10rem / 16);
|
||||||
|
padding: calc(10rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolTip p {
|
.toolTip p {
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
|
font-size: calc(16rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.key {
|
.key {
|
||||||
|
|
|
@ -59,13 +59,6 @@ export type StackedBarProps = {
|
||||||
itemMargin?: string;
|
itemMargin?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
const tooltipStyles = {
|
|
||||||
...defaultStyles,
|
|
||||||
minWidth: 60,
|
|
||||||
backgroundColor: Color.primaryAccentLighter,
|
|
||||||
color: Color.primaryBackground,
|
|
||||||
};
|
|
||||||
|
|
||||||
let tooltipTimeout: number;
|
let tooltipTimeout: number;
|
||||||
|
|
||||||
export function StackedBarGraph({
|
export function StackedBarGraph({
|
||||||
|
@ -151,7 +144,7 @@ export function StackedBarGraph({
|
||||||
<GridColumns
|
<GridColumns
|
||||||
scale={xScale}
|
scale={xScale}
|
||||||
height={yMax}
|
height={yMax}
|
||||||
left={valueAxisLeftOffset}
|
left={xScale.bandwidth() / 2}
|
||||||
offset={xScale.bandwidth() / 2}
|
offset={xScale.bandwidth() / 2}
|
||||||
stroke={Color.tertiaryBackground}
|
stroke={Color.tertiaryBackground}
|
||||||
strokeWidth={strokeWidth}
|
strokeWidth={strokeWidth}
|
||||||
|
@ -211,7 +204,7 @@ export function StackedBarGraph({
|
||||||
<AxisBottom
|
<AxisBottom
|
||||||
top={yMax}
|
top={yMax}
|
||||||
scale={xScale}
|
scale={xScale}
|
||||||
left={valueAxisLeftOffset / 5}
|
left={xScale.bandwidth() / 6}
|
||||||
hideTicks
|
hideTicks
|
||||||
hideAxisLine
|
hideAxisLine
|
||||||
labelProps={{
|
labelProps={{
|
||||||
|
@ -224,6 +217,7 @@ export function StackedBarGraph({
|
||||||
/>
|
/>
|
||||||
<AxisLeft
|
<AxisLeft
|
||||||
scale={yScale}
|
scale={yScale}
|
||||||
|
top={5}
|
||||||
numTicks={numTicksLeftAxis}
|
numTicks={numTicksLeftAxis}
|
||||||
hideAxisLine
|
hideAxisLine
|
||||||
labelProps={{
|
labelProps={{
|
||||||
|
@ -254,7 +248,7 @@ export function StackedBarGraph({
|
||||||
className={styles.toolTip}
|
className={styles.toolTip}
|
||||||
top={tooltipTop}
|
top={tooltipTop}
|
||||||
left={tooltipLeft}
|
left={tooltipLeft}
|
||||||
style={tooltipStyles}
|
unstyled
|
||||||
>
|
>
|
||||||
<p className={styles.key}>{tooltipData.key}</p>
|
<p className={styles.key}>{tooltipData.key}</p>
|
||||||
<p>{tooltipData.bar.data[tooltipData.key]}</p>
|
<p>{tooltipData.bar.data[tooltipData.key]}</p>
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue