Added min width to missing graphs
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
c5c84176ec
commit
14d3d235a6
|
@ -69,6 +69,8 @@ export type StatsPlotProps = {
|
|||
boxPlotLeftOffset?: number;
|
||||
/** Boxplot padding */
|
||||
boxPlotPadding?: number;
|
||||
/** Minimum width of the graph. */
|
||||
minWidth?: number;
|
||||
};
|
||||
|
||||
export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
|
||||
|
@ -96,7 +98,12 @@ export const BoxPlot = withTooltip<StatsPlotProps, TooltipData>(
|
|||
boxPlotWidthFactor = 0.4,
|
||||
boxPlotLeftOffset = 0.3,
|
||||
boxPlotPadding = 0.3,
|
||||
minWidth = 500,
|
||||
}: StatsPlotProps & WithTooltipProvidedProps<TooltipData>) => {
|
||||
if (width < minWidth) {
|
||||
width = minWidth;
|
||||
}
|
||||
|
||||
// bounds
|
||||
const xMax = width;
|
||||
const yMax = height - 120;
|
||||
|
|
|
@ -23,3 +23,11 @@
|
|||
margin: calc(16rem / 8);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
|
||||
/* To fix legend being cut off on mobile */
|
||||
.legend {
|
||||
justify-content: start;
|
||||
}
|
||||
}
|
|
@ -50,6 +50,8 @@ interface LineGraphProps {
|
|||
yTickLabelSize?: number;
|
||||
/** Margin for each item in the legend */
|
||||
itemMargin?: string;
|
||||
/** Minimum width of the graph. */
|
||||
minWidth?: number;
|
||||
}
|
||||
|
||||
const DEFAULT_LABEL_SIZE = 16;
|
||||
|
@ -72,7 +74,12 @@ export const LineGraph = withTooltip<LineGraphProps, TooltipData>(
|
|||
hideTooltip,
|
||||
showTooltip,
|
||||
itemMargin = "0 0 0 15px",
|
||||
minWidth = 500,
|
||||
}) => {
|
||||
if (width < minWidth) {
|
||||
width = minWidth;
|
||||
}
|
||||
|
||||
const xLength = data.xValues.length;
|
||||
|
||||
if (data.lines.length != colorRange.length) {
|
||||
|
|
|
@ -61,6 +61,8 @@ export type StackedBarProps = {
|
|||
tooltipBottomLabel?: string;
|
||||
//** Display percentage */
|
||||
displayPercentage?: boolean;
|
||||
/** Minimum width of the graph. */
|
||||
minWidth?: number;
|
||||
};
|
||||
|
||||
let tooltipTimeout: number;
|
||||
|
@ -91,7 +93,12 @@ export const StackedBarGraphVertical = withTooltip<
|
|||
tooltipBottomLabel = "",
|
||||
tooltipTopLabel = "",
|
||||
displayPercentage,
|
||||
minWidth = 500,
|
||||
}: StackedBarProps & WithTooltipProvidedProps<TooltipData>) => {
|
||||
if (width < minWidth) {
|
||||
width = minWidth;
|
||||
}
|
||||
|
||||
const yTotals = data.reduce((allTotals, currCategory) => {
|
||||
const yTotal = keys.reduce((categoryTotal, k) => {
|
||||
categoryTotal += currCategory[k] as number;
|
||||
|
@ -284,7 +291,12 @@ export const StackedBarGraphHorizontal = withTooltip<
|
|||
tooltipBottomLabel = "",
|
||||
tooltipTopLabel = "",
|
||||
displayPercentage,
|
||||
minWidth = 500,
|
||||
}: StackedBarProps & WithTooltipProvidedProps<TooltipData>) => {
|
||||
if (width < minWidth) {
|
||||
width = minWidth;
|
||||
}
|
||||
|
||||
const yTotals = data.reduce((allTotals, currCategory) => {
|
||||
const yTotal = keys.reduce((categoryTotal, k) => {
|
||||
categoryTotal += currCategory[k] as number;
|
||||
|
|
Loading…
Reference in New Issue