diff --git a/frontend/src/metabase/query_builder/components/VisualizationResult.jsx b/frontend/src/metabase/query_builder/components/VisualizationResult.jsx
index a1c1c2ed5c1059f4d8e8a542cc24ddbe3fb32e65..ba4cb4f1a6c79aff44f9223472619e9b95ae07c8 100644
--- a/frontend/src/metabase/query_builder/components/VisualizationResult.jsx
+++ b/frontend/src/metabase/query_builder/components/VisualizationResult.jsx
@@ -105,6 +105,7 @@ export default class VisualizationResult extends Component {
rawSeries={rawSeries}
onChangeCardAndRun={navigateToNewCardInsideQB}
isEditing={true}
+ isQueryBuilder={true}
showTitle={false}
metadata={question.metadata()}
onOpenChartSettings={this.props.onOpenChartSettings}
diff --git a/frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx b/frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx
index 8d12a0c5c2c0539e7eeb61ba9b55d0af0781bebd..563ad39de5b59326b962d711793ee91b033a4ee9 100644
--- a/frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx
+++ b/frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx
@@ -358,6 +358,8 @@ export default class LineAreaBarChart extends Component {
hovered,
headerIcon,
actionButtons,
+ isFullscreen,
+ isQueryBuilder,
onHoverChange,
onAddSeries,
onRemoveSeries,
@@ -381,6 +383,7 @@ export default class LineAreaBarChart extends Component {
this.getHoverClasses(),
this.props.className,
)}
+ isQueryBuilder={isQueryBuilder}
>
{hasTitle && (
<ChartLegendCaption
@@ -397,6 +400,8 @@ export default class LineAreaBarChart extends Component {
hovered={hovered}
hasLegend={hasLegend}
actionButtons={!hasTitle ? actionButtons : undefined}
+ isFullscreen={isFullscreen}
+ isQueryBuilder={isQueryBuilder}
onHoverChange={onHoverChange}
onAddSeries={!hasBreakout ? onAddSeries : undefined}
onRemoveSeries={!hasBreakout ? onRemoveSeries : undefined}
diff --git a/frontend/src/metabase/visualizations/components/LineAreaBarChart.styled.jsx b/frontend/src/metabase/visualizations/components/LineAreaBarChart.styled.jsx
index 715ba97822f56ebcc83a3551a53f75d68364e4ce..ab55ed7a6364006e804d7813a89a0bc31c09e429 100644
--- a/frontend/src/metabase/visualizations/components/LineAreaBarChart.styled.jsx
+++ b/frontend/src/metabase/visualizations/components/LineAreaBarChart.styled.jsx
@@ -4,7 +4,8 @@ import LegendCaption from "./legend/LegendCaption";
export const LineAreaBarChartRoot = styled.div`
display: flex;
flex-direction: column;
- padding: 0.5rem 1rem;
+ padding: ${({ isQueryBuilder }) =>
+ isQueryBuilder ? "1rem 1rem 1rem 2rem" : "0.5rem 1rem"};
overflow: hidden;
`;
diff --git a/frontend/src/metabase/visualizations/components/Visualization.jsx b/frontend/src/metabase/visualizations/components/Visualization.jsx
index e87baeea71e395fb3161aa03d28f834a4c118aef..ef75b79850d8636fcd620c6fa05cf9449b69f239 100644
--- a/frontend/src/metabase/visualizations/components/Visualization.jsx
+++ b/frontend/src/metabase/visualizations/components/Visualization.jsx
@@ -63,6 +63,7 @@ type Props = {
isDashboard: boolean,
isEditing: boolean,
isSettings: boolean,
+ isQueryBuilder: boolean,
headerIcon?: {
name: string,
@@ -161,6 +162,7 @@ export default class Visualization extends React.PureComponent {
isDashboard: false,
isEditing: false,
isSettings: false,
+ isQueryBuilder: false,
onUpdateVisualizationSettings: () => {},
// prefer passing in a function that doesn't cause the application to reload
onChangeLocation: location => {
diff --git a/frontend/src/metabase/visualizations/components/legend/Legend.styled.jsx b/frontend/src/metabase/visualizations/components/legend/Legend.styled.jsx
index 859507b5564000dc44c1b4578761f8e291c699d4..149267a179ac7e5baa90efaaf7cd08bc91d071cb 100644
--- a/frontend/src/metabase/visualizations/components/legend/Legend.styled.jsx
+++ b/frontend/src/metabase/visualizations/components/legend/Legend.styled.jsx
@@ -4,6 +4,7 @@ import colors, { darken } from "metabase/lib/colors";
export const LegendRoot = styled.div`
display: flex;
flex-direction: ${({ isVertical }) => (isVertical ? "column" : "row")};
+ overflow: ${({ isVertical }) => (isVertical ? "" : "hidden")};
`;
export const LegendLink = styled.div`
diff --git a/frontend/src/metabase/visualizations/components/legend/LegendCaption.jsx b/frontend/src/metabase/visualizations/components/legend/LegendCaption.jsx
index c54c32f8682f5253937de60de586596cc6751e38..215f247290f1dcd244a7aaf0375e4cbe8734bebf 100644
--- a/frontend/src/metabase/visualizations/components/legend/LegendCaption.jsx
+++ b/frontend/src/metabase/visualizations/components/legend/LegendCaption.jsx
@@ -31,7 +31,10 @@ const LegendCaption = ({
return (
<LegendCaptionRoot className={className} data-testid="legend-caption">
{icon && <LegendLabelIcon {...icon} />}
- <LegendLabel onClick={onSelectTitle}>
+ <LegendLabel
+ className="fullscreen-normal-text fullscreen-night-text"
+ onClick={onSelectTitle}
+ >
<Ellipsified>{title}</Ellipsified>
</LegendLabel>
{description && (
diff --git a/frontend/src/metabase/visualizations/components/legend/LegendItem.jsx b/frontend/src/metabase/visualizations/components/legend/LegendItem.jsx
index abd52a44e580a2af4c1a709c4180d3a238109e9e..d88b4f64451437e8f52d4fedff5c691c44d1b25b 100644
--- a/frontend/src/metabase/visualizations/components/legend/LegendItem.jsx
+++ b/frontend/src/metabase/visualizations/components/legend/LegendItem.jsx
@@ -55,7 +55,7 @@ const LegendItem = ({
onMouseLeave={onHoverChange && handleItemMouseLeave}
>
<LegendItemDot color={color} />
- <LegendItemTitle>
+ <LegendItemTitle className="fullscreen-normal-text fullscreen-night-text">
<Ellipsified>{label}</Ellipsified>
</LegendItemTitle>
</LegendItemLabel>
diff --git a/frontend/src/metabase/visualizations/components/legend/LegendLayout.jsx b/frontend/src/metabase/visualizations/components/legend/LegendLayout.jsx
index 6570347532b691e71a5e4aa88bdc024f49001045..b04c60f2a9d968ab851d5151ca1240ff37914f8f 100644
--- a/frontend/src/metabase/visualizations/components/legend/LegendLayout.jsx
+++ b/frontend/src/metabase/visualizations/components/legend/LegendLayout.jsx
@@ -13,6 +13,7 @@ import {
const MIN_ITEM_WIDTH = 100;
const MIN_ITEM_HEIGHT = 25;
+const MIN_ITEM_HEIGHT_LARGE = 31;
const MIN_LEGEND_WIDTH = 400;
const propTypes = {
@@ -24,6 +25,8 @@ const propTypes = {
height: PropTypes.number,
hasLegend: PropTypes.bool,
actionButtons: PropTypes.node,
+ isFullscreen: PropTypes.bool,
+ isQueryBuilder: PropTypes.bool,
children: PropTypes.node,
onHoverChange: PropTypes.func,
onAddSeries: PropTypes.func,
@@ -40,14 +43,17 @@ const LegendLayout = ({
height = 0,
hasLegend,
actionButtons,
+ isFullscreen,
+ isQueryBuilder,
children,
onHoverChange,
onAddSeries,
onSelectSeries,
onRemoveSeries,
}) => {
+ const itemHeight = !isFullscreen ? MIN_ITEM_HEIGHT : MIN_ITEM_HEIGHT_LARGE;
const maxXItems = Math.floor(width / MIN_ITEM_WIDTH);
- const maxYItems = Math.floor(height / MIN_ITEM_HEIGHT);
+ const maxYItems = Math.floor(height / itemHeight);
const maxYLabels = Math.max(maxYItems - 1, 0);
const minYLabels = labels.length > maxYItems ? maxYLabels : labels.length;
@@ -59,7 +65,10 @@ const LegendLayout = ({
return (
<LegendLayoutRoot className={className} isVertical={isVertical}>
{isVisible && (
- <LegendContainer isVertical={isVertical}>
+ <LegendContainer
+ isVertical={isVertical}
+ isQueryBuilder={isQueryBuilder}
+ >
<Legend
labels={labels}
colors={colors}
diff --git a/frontend/src/metabase/visualizations/components/legend/LegendLayout.styled.jsx b/frontend/src/metabase/visualizations/components/legend/LegendLayout.styled.jsx
index 64e4448323c973cb163c7d9991efe0ca15845144..6d5a87fc982154fa0bb7c63db27fe790fa3e47c2 100644
--- a/frontend/src/metabase/visualizations/components/legend/LegendLayout.styled.jsx
+++ b/frontend/src/metabase/visualizations/components/legend/LegendLayout.styled.jsx
@@ -17,7 +17,8 @@ export const LegendContainer = styled.div`
display: ${({ isVertical }) => (isVertical ? "block" : "flex")};
max-width: ${({ isVertical }) => (isVertical ? "25%" : "")};
max-width: ${({ isVertical }) => (isVertical ? "min(25%, 20rem)" : "")};
- margin-right: ${({ isVertical }) => (isVertical ? "0.5rem" : "")};
+ margin-right: ${({ isVertical, isQueryBuilder }) =>
+ isVertical ? (isQueryBuilder ? "2.5rem" : "0.5rem") : ""};
margin-bottom: ${({ isVertical }) => (isVertical ? "" : "0.5rem")};
`;
diff --git a/frontend/test/metabase/scenarios/visualizations/drillthroughs/chart_drill.cy.spec.js b/frontend/test/metabase/scenarios/visualizations/drillthroughs/chart_drill.cy.spec.js
index 58273f3a4abd4929930c79d7dc4320b67a422166..a1feb0b0822e8c8c082ea05a27c9d4719262c65e 100644
--- a/frontend/test/metabase/scenarios/visualizations/drillthroughs/chart_drill.cy.spec.js
+++ b/frontend/test/metabase/scenarios/visualizations/drillthroughs/chart_drill.cy.spec.js
@@ -52,9 +52,9 @@ describe("scenarios > visualizations > drillthroughs > chart drill", () => {
// drag across to filter
cy.get(".Visualization")
- .trigger("mousedown", 100, 200)
- .trigger("mousemove", 210, 200)
- .trigger("mouseup", 210, 200);
+ .trigger("mousedown", 120, 200)
+ .trigger("mousemove", 230, 200)
+ .trigger("mouseup", 230, 200);
// new filter applied
// Note: Test was flaking because apparently mouseup doesn't always happen at the same position.