diff --git a/.loki/reference/chrome_laptop_viz_PivotTable_Default.png b/.loki/reference/chrome_laptop_viz_PivotTable_Default.png
index 4d387384b1705d46ba61b729a250a4ecdfe778ad..22a7f356ff14f218e25d5a0a79a42bc21bf1e966 100644
Binary files a/.loki/reference/chrome_laptop_viz_PivotTable_Default.png and b/.loki/reference/chrome_laptop_viz_PivotTable_Default.png differ
diff --git a/.loki/reference/chrome_laptop_viz_PivotTable_Embedding_Theme.png b/.loki/reference/chrome_laptop_viz_PivotTable_Embedding_Theme.png
index e9f1ddd9d78a75c6ec7c257a68485a2b6b93be08..23cb3364b2381a763a721e6d60d09e25a11f264b 100644
Binary files a/.loki/reference/chrome_laptop_viz_PivotTable_Embedding_Theme.png and b/.loki/reference/chrome_laptop_viz_PivotTable_Embedding_Theme.png differ
diff --git a/.loki/reference/chrome_laptop_viz_SmartScalar_Embedding_Template.png b/.loki/reference/chrome_laptop_viz_SmartScalar_Embedding_Template.png
deleted file mode 100644
index ed6f90e76855d4a6d5d36ac8a571dd30cc8f37a8..0000000000000000000000000000000000000000
Binary files a/.loki/reference/chrome_laptop_viz_SmartScalar_Embedding_Template.png and /dev/null differ
diff --git a/.loki/reference/chrome_laptop_viz_SmartScalar_Embedding_Theme.png b/.loki/reference/chrome_laptop_viz_SmartScalar_Embedding_Theme.png
new file mode 100644
index 0000000000000000000000000000000000000000..05fdbf4f19ab97e48f064c6f4c48dc3449a18cb6
Binary files /dev/null and b/.loki/reference/chrome_laptop_viz_SmartScalar_Embedding_Theme.png differ
diff --git a/.loki/reference/chrome_laptop_viz_TableSimple_Embedding_Theme.png b/.loki/reference/chrome_laptop_viz_TableSimple_Embedding_Theme.png
index d95b073c090c18ff07c43f711bb75e6976a25a65..4d09c3fe4de189f38b18eca788eb8d02186a9687 100644
Binary files a/.loki/reference/chrome_laptop_viz_TableSimple_Embedding_Theme.png and b/.loki/reference/chrome_laptop_viz_TableSimple_Embedding_Theme.png differ
diff --git a/enterprise/frontend/src/embedding-sdk/README.md b/enterprise/frontend/src/embedding-sdk/README.md
index 3b2f1ecea9b33d0e1053be1669a80e6f5013cd04..c05ae5af272a1901319eb2e6920c2b1f9c1a7c4a 100644
--- a/enterprise/frontend/src/embedding-sdk/README.md
+++ b/enterprise/frontend/src/embedding-sdk/README.md
@@ -466,6 +466,9 @@ const theme = {
// Default background color of cells, defaults to `background`
backgroundColor: "#FFFFFF",
+
+ // Font size of cell values, defaults to ~12.5px
+ fontSize: "12.5px",
},
idColumn: {
@@ -486,8 +489,20 @@ const theme = {
},
},
+ // Cartesian chart
+ cartesian: {
+ // Padding around the cartesian charts.
+ // Uses CSS's `padding` property format.
+ padding: "4px 8px",
+ },
+
// Pivot table
pivotTable: {
+ cell: {
+ // Font size of cell values, defaults to ~12px
+ fontSize: "12px",
+ },
+
// Pivot row toggle to expand or collapse row
rowToggle: {
textColor: "#FFFFFF",
@@ -498,13 +513,13 @@ const theme = {
collectionBrowser: {
breadcrumbs: {
expandButton: {
- textColor: "#8118F4";
- backgroundColor: "#767D7C";
- hoverTextColor: "#CE8C8C";
- hoverBackgroundColor: "#69264B";
- };
- };
- };
+ textColor: "#8118F4",
+ backgroundColor: "#767D7C",
+ hoverTextColor: "#CE8C8C",
+ hoverBackgroundColor: "#69264B",
+ },
+ },
+ },
},
};
```
diff --git a/enterprise/frontend/src/embedding-sdk/lib/theme/default-component-theme.ts b/enterprise/frontend/src/embedding-sdk/lib/theme/default-component-theme.ts
index 872b32cda27cee3d370ab8b90b26dc2c4e544adf..1516576e4f207a37b5bf076c6980f696fe3a98ea 100644
--- a/enterprise/frontend/src/embedding-sdk/lib/theme/default-component-theme.ts
+++ b/enterprise/frontend/src/embedding-sdk/lib/theme/default-component-theme.ts
@@ -14,8 +14,9 @@ const units = (px: number) => ({
em: `${px / DEFAULT_SDK_FONT_SIZE}em`,
});
-export const FONT_SIZES = {
+const FONT_SIZES = {
tableCell: units(12.5),
+ pivotTableCell: units(12),
label: units(12),
goalLabel: units(14),
};
@@ -70,6 +71,9 @@ export const DEFAULT_METABASE_COMPONENT_THEME: MetabaseComponentTheme = {
},
},
pivotTable: {
+ cell: {
+ fontSize: FONT_SIZES.pivotTableCell.px,
+ },
rowToggle: {
textColor: "text-white",
backgroundColor: "text-light", // TODO: should it be "bg-dark" ?
@@ -97,7 +101,13 @@ export const DEFAULT_EMBEDDED_COMPONENT_THEME: MetabaseComponentTheme = merge<
backgroundColor: "bg-white",
},
},
+ pivotTable: {
+ cell: {
+ fontSize: FONT_SIZES.pivotTableCell.em,
+ },
+ },
cartesian: {
+ padding: "0.5rem 1rem",
label: { fontSize: FONT_SIZES.label.em },
goalLine: {
label: { fontSize: FONT_SIZES.goalLabel.em },
diff --git a/enterprise/frontend/src/embedding-sdk/types/theme/index.ts b/enterprise/frontend/src/embedding-sdk/types/theme/index.ts
index 6bc9f74fff5fe42ea7baedf5ebbbf226d8c3014c..d63f2afea8fc46bf8881e70944c3a93b5d55cc21 100644
--- a/enterprise/frontend/src/embedding-sdk/types/theme/index.ts
+++ b/enterprise/frontend/src/embedding-sdk/types/theme/index.ts
@@ -126,6 +126,11 @@ export type MetabaseComponentTheme = {
/** Pivot table **/
pivotTable: {
+ cell: {
+ /** Font size of cell values, defaults to ~12px */
+ fontSize: string;
+ };
+
/** Button to toggle pivot table rows */
rowToggle: {
textColor: string;
@@ -144,6 +149,9 @@ export type MetabaseComponentTheme = {
/** Cartesian charts */
cartesian: {
+ /** Padding around the chart. */
+ padding?: string;
+
label: {
/** Labels used in cartesian charts, such as axis ticks and series. */
fontSize: string;
diff --git a/frontend/src/metabase/visualizations/components/FunnelNormal.styled.tsx b/frontend/src/metabase/visualizations/components/FunnelNormal.styled.tsx
index 7b5bcdc5985ea1b9362a21efbd8fd20614404b20..50726c8f1b01c6b9db9d9c6018972cc0690ea263 100644
--- a/frontend/src/metabase/visualizations/components/FunnelNormal.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/FunnelNormal.styled.tsx
@@ -37,7 +37,7 @@ export const Head = styled.div<SharedProps>`
${props =>
props.isNarrow
? css`
- font-size: 12px;
+ font-size: 0.85em;
`
: null}
`;
@@ -45,7 +45,7 @@ export const Head = styled.div<SharedProps>`
export const Info = styled.div<SharedProps>`
text-align: right;
padding: 0.5em 0.5em 0 0.5em;
- font-size: ${props => (props.isNarrow ? "12px" : "16px")};
+ font-size: ${props => (props.isNarrow ? "0.85em" : "1.15em")};
${Subtitle} {
font-size: ${props => (props.isNarrow ? "0.875em" : "0.6875em")};
@@ -61,11 +61,11 @@ export const FunnelStart = styled.div<SharedProps>`
flex-grow: 1;
padding-right: 0.5em;
- font-size: 24px;
+ font-size: 1.72em;
${Title} {
font-weight: bold;
- color: black;
+ color: var(--mb-color-text-dark);
${props =>
props.isNarrow
? css`
diff --git a/frontend/src/metabase/visualizations/components/ObjectDetail/ObjectDetailBody.styled.tsx b/frontend/src/metabase/visualizations/components/ObjectDetail/ObjectDetailBody.styled.tsx
index 666880b86d2bc6afc341a5aeba33b018b3867393..a700b460d650d0d96a9dea64c8fb4b25c5a43461 100644
--- a/frontend/src/metabase/visualizations/components/ObjectDetail/ObjectDetailBody.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/ObjectDetail/ObjectDetailBody.styled.tsx
@@ -1,7 +1,7 @@
import styled from "@emotion/styled";
export const ObjectDetailBodyWrapper = styled.div`
- font-size: 1rem;
+ font-size: 1.15em;
flex: 1;
overflow-y: auto;
`;
diff --git a/frontend/src/metabase/visualizations/components/legend/LegendItem.styled.tsx b/frontend/src/metabase/visualizations/components/legend/LegendItem.styled.tsx
index 75e78df7739351356f63d18391f68639369b3172..056f78640fa8c9b61c942107d2061bd5cca53f51 100644
--- a/frontend/src/metabase/visualizations/components/legend/LegendItem.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/legend/LegendItem.styled.tsx
@@ -39,7 +39,7 @@ export const LegendItemDot = styled.div`
export const LegendItemTitle = styled.div`
color: var(--mb-color-text-dark);
font-weight: bold;
- font-size: 12px;
+ font-size: 0.85em;
margin-left: 4px;
overflow: hidden;
`;
diff --git a/frontend/src/metabase/visualizations/visualizations/BarChart/BarChart.stories.tsx b/frontend/src/metabase/visualizations/visualizations/BarChart/BarChart.stories.tsx
index 53755d658a972810ed9a8e10fd57cbf46c4d73dc..1a41df9bd01c4fbf0fb3570532dab4bc5cc82015 100644
--- a/frontend/src/metabase/visualizations/visualizations/BarChart/BarChart.stories.tsx
+++ b/frontend/src/metabase/visualizations/visualizations/BarChart/BarChart.stories.tsx
@@ -47,7 +47,10 @@ export const Default: Story = () => (
// Example of how themes can be applied in the SDK.
export const EmbeddingHugeFont: Story = () => {
- const theme: MetabaseTheme = { fontSize: "20px" };
+ const theme: MetabaseTheme = {
+ fontSize: "20px",
+ components: { cartesian: { padding: "0.5rem 1rem" } },
+ };
return (
<SdkVisualizationWrapper theme={theme}>
diff --git a/frontend/src/metabase/visualizations/visualizations/CartesianChart/CartesianChart.styled.tsx b/frontend/src/metabase/visualizations/visualizations/CartesianChart/CartesianChart.styled.tsx
index f61bf5c58c65b475d245e37de666561750a21094..1345b61b0f861a60dd612fbbbb18287609a9add4 100644
--- a/frontend/src/metabase/visualizations/visualizations/CartesianChart/CartesianChart.styled.tsx
+++ b/frontend/src/metabase/visualizations/visualizations/CartesianChart/CartesianChart.styled.tsx
@@ -3,23 +3,10 @@ import styled from "@emotion/styled";
import { ResponsiveEChartsRenderer } from "metabase/visualizations/components/EChartsRenderer";
import LegendLayout from "metabase/visualizations/components/legend/LegendLayout";
+import { getChartPadding } from "./padding";
+
type CartesianChartRootProps = {
isQueryBuilder?: boolean;
- isEmbeddingSdk?: boolean;
-};
-
-const getChartPadding = ({
- isEmbeddingSdk,
- isQueryBuilder,
-}: CartesianChartRootProps) => {
- if (isEmbeddingSdk) {
- return "0rem";
- }
- if (isQueryBuilder) {
- return "1rem 1rem 1rem 2rem";
- }
-
- return "0.5rem 1rem";
};
export const CartesianChartRoot = styled.div<CartesianChartRootProps>`
diff --git a/frontend/src/metabase/visualizations/visualizations/CartesianChart/CartesianChart.tsx b/frontend/src/metabase/visualizations/visualizations/CartesianChart/CartesianChart.tsx
index a9a18e20791e8c7cececf1b0e0ada0edf170d9e5..a04b7ff524d2dfabbc19a158c05a597a85e1f27e 100644
--- a/frontend/src/metabase/visualizations/visualizations/CartesianChart/CartesianChart.tsx
+++ b/frontend/src/metabase/visualizations/visualizations/CartesianChart/CartesianChart.tsx
@@ -33,7 +33,6 @@ function _CartesianChart(props: VisualizationProps) {
headerIcon,
actionButtons,
isQueryBuilder,
- isEmbeddingSdk,
isFullscreen,
hovered,
onChangeCardAndRun,
@@ -90,10 +89,7 @@ function _CartesianChart(props: VisualizationProps) {
const canSelectTitle = !!onChangeCardAndRun;
return (
- <CartesianChartRoot
- isQueryBuilder={isQueryBuilder}
- isEmbeddingSdk={isEmbeddingSdk}
- >
+ <CartesianChartRoot isQueryBuilder={isQueryBuilder}>
{hasTitle && (
<LegendCaption
title={title}
diff --git a/frontend/src/metabase/visualizations/visualizations/CartesianChart/padding.ts b/frontend/src/metabase/visualizations/visualizations/CartesianChart/padding.ts
new file mode 100644
index 0000000000000000000000000000000000000000..212cdff0feb089dd86880fa57dc54989fdea35d9
--- /dev/null
+++ b/frontend/src/metabase/visualizations/visualizations/CartesianChart/padding.ts
@@ -0,0 +1,23 @@
+import type { MantineTheme } from "metabase/ui";
+
+export const getChartPadding = ({
+ theme,
+ isQueryBuilder,
+}: {
+ isQueryBuilder?: boolean;
+ theme: MantineTheme;
+}) => {
+ const { padding } = theme.other.cartesian;
+
+ if (padding) {
+ return padding;
+ }
+
+ // Extra spacing is required on question pages.
+ // Refer to https://github.com/metabase/metabase/pull/17552#issuecomment-904945088
+ if (isQueryBuilder) {
+ return "1rem 1rem 1rem 2rem";
+ }
+
+ return "0.5rem 1rem";
+};
diff --git a/frontend/src/metabase/visualizations/visualizations/Gauge/Gauge.jsx b/frontend/src/metabase/visualizations/visualizations/Gauge/Gauge.jsx
index b6fed3496678b68611c9228a5f30a9f735a6636b..9a751928a3a03e2aabe81bb79bf06a59384e1b1d 100644
--- a/frontend/src/metabase/visualizations/visualizations/Gauge/Gauge.jsx
+++ b/frontend/src/metabase/visualizations/visualizations/Gauge/Gauge.jsx
@@ -41,7 +41,7 @@ const getArrowFillColor = () => color("text-medium");
const getArrowStrokeColor = () => color("bg-white");
// in ems, but within the scaled 100px SVG element
-const FONT_SIZE_SEGMENT_LABEL = 0.25;
+const FONT_SIZE_SEGMENT_LABEL = 0.285;
const FONT_SIZE_CENTER_LABEL_MIN = 0.5;
const FONT_SIZE_CENTER_LABEL_MAX = 0.7;
@@ -420,8 +420,8 @@ const GaugeSegmentLabel = ({ position: [x, y], style = {}, children }) => (
x={x}
y={y}
style={{
- fill: color("text-medium"),
- fontSize: `${FONT_SIZE_SEGMENT_LABEL}rem`,
+ fill: "var(--mb-color-text-medium)",
+ fontSize: `${FONT_SIZE_SEGMENT_LABEL}em`,
textAnchor: Math.abs(x) < 5 ? "middle" : x > 0 ? "start" : "end",
// shift text in the lower half down a bit
transform:
diff --git a/frontend/src/metabase/visualizations/visualizations/LineChart/LineChart.stories.tsx b/frontend/src/metabase/visualizations/visualizations/LineChart/LineChart.stories.tsx
index a2988784d011a87a0966518002ce5eeb76a0032c..68b0e4a12efd43e6147e849156b223cd0ad70bb9 100644
--- a/frontend/src/metabase/visualizations/visualizations/LineChart/LineChart.stories.tsx
+++ b/frontend/src/metabase/visualizations/visualizations/LineChart/LineChart.stories.tsx
@@ -54,7 +54,10 @@ export const Default: Story = () => (
);
export const EmbeddingHugeFont: Story = () => {
- const theme: MetabaseTheme = { fontSize: "20px" };
+ const theme: MetabaseTheme = {
+ fontSize: "20px",
+ components: { cartesian: { padding: "0.5rem 1rem" } },
+ };
return (
<SdkVisualizationWrapper theme={theme}>
diff --git a/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.styled.tsx b/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.styled.tsx
index 80a56ad2cf35c70e3ad3e24138707feaa772c134..094900f506af1b2b28c2b44862ba97e114276e4a 100644
--- a/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.styled.tsx
+++ b/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.styled.tsx
@@ -4,11 +4,7 @@ import styled from "@emotion/styled";
import { color, alpha, adjustBrightness } from "metabase/lib/colors";
import type { MantineTheme } from "metabase/ui";
-import {
- CELL_HEIGHT,
- PIVOT_TABLE_FONT_SIZE,
- RESIZE_HANDLE_WIDTH,
-} from "./constants";
+import { CELL_HEIGHT, RESIZE_HANDLE_WIDTH } from "./constants";
export const RowToggleIconRoot = styled.div`
display: flex;
@@ -158,7 +154,7 @@ interface PivotTableRootProps {
export const PivotTableRoot = styled.div<PivotTableRootProps>`
height: 100%;
- font-size: ${PIVOT_TABLE_FONT_SIZE};
+ font-size: ${({ theme }) => theme.other.pivotTable.cell.fontSize};
${props =>
props.isDashboard
diff --git a/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.tsx b/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.tsx
index 8a57f817d8fff258178a7be61b1ece2b8f8e6e68..d01e01da2c0b50bbbbd4b818688420bce80e700b 100644
--- a/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.tsx
+++ b/frontend/src/metabase/visualizations/visualizations/PivotTable/PivotTable.tsx
@@ -18,6 +18,7 @@ import {
} from "metabase/lib/data_grid";
import { getScrollBarSize } from "metabase/lib/dom";
import { getSetting } from "metabase/selectors/settings";
+import { useMantineTheme } from "metabase/ui";
import {
getDefaultSize,
getMinSize,
@@ -85,6 +86,8 @@ function PivotTable({
const [gridElement, setGridElement] = useState<HTMLElement | null>(null);
const columnWidthSettings = settings["pivot_table.column_widths"];
+ const theme = useMantineTheme();
+
const [
{ leftHeaderWidths, totalLeftHeaderWidths, valueHeaderWidths },
setHeaderWidths,
@@ -198,6 +201,8 @@ function PivotTable({
}
}
+ const { fontSize } = theme.other.pivotTable.cell;
+
useEffect(() => {
if (!pivoted?.rowIndexes) {
setHeaderWidths({
@@ -213,7 +218,7 @@ function PivotTable({
rowIndexes: pivoted?.rowIndexes,
getColumnTitle: idx => getColumnTitle(idx),
leftHeaderItems: pivoted?.leftHeaderItems,
- fontFamily: fontFamily,
+ font: { fontFamily, fontSize },
});
setHeaderWidths({ ...newLeftHeaderWidths, valueHeaderWidths });
@@ -230,6 +235,7 @@ function PivotTable({
valueHeaderWidths,
pivoted,
fontFamily,
+ fontSize,
getColumnTitle,
columnsChanged,
setHeaderWidths,
diff --git a/frontend/src/metabase/visualizations/visualizations/PivotTable/constants.ts b/frontend/src/metabase/visualizations/visualizations/PivotTable/constants.ts
index 2c6289c43d2d7c7c6efaaae3a77e3bfc91b44b3d..a5bcbf34cfb2f3259c862d26edbf916637337527 100644
--- a/frontend/src/metabase/visualizations/visualizations/PivotTable/constants.ts
+++ b/frontend/src/metabase/visualizations/visualizations/PivotTable/constants.ts
@@ -2,9 +2,6 @@
export const DEFAULT_CELL_WIDTH = 100;
export const CELL_HEIGHT = 30;
-// styling and cell text measurement depend on this font size
-export const PIVOT_TABLE_FONT_SIZE = "0.75rem";
-
// values for computing header width
export const ROW_TOGGLE_ICON_WIDTH = 24;
export const CELL_PADDING = 16;
diff --git a/frontend/src/metabase/visualizations/visualizations/PivotTable/utils.ts b/frontend/src/metabase/visualizations/visualizations/PivotTable/utils.ts
index 81bcedd1a5f95df66367eb72cb241af201014aec..ccb414967a573596f4dcee42e5971ef5b29ccad3 100644
--- a/frontend/src/metabase/visualizations/visualizations/PivotTable/utils.ts
+++ b/frontend/src/metabase/visualizations/visualizations/PivotTable/utils.ts
@@ -2,6 +2,7 @@ import { getIn } from "icepick";
import { t } from "ttag";
import _ from "underscore";
+import { DEFAULT_METABASE_COMPONENT_THEME } from "embedding-sdk/lib/theme";
import { sumArray } from "metabase/lib/arrays";
import { isPivotGroupColumn } from "metabase/lib/data_grid";
import { measureText } from "metabase/lib/measure-text";
@@ -19,7 +20,6 @@ import {
CELL_PADDING,
MIN_HEADER_CELL_WIDTH,
MAX_HEADER_CELL_WIDTH,
- PIVOT_TABLE_FONT_SIZE,
MAX_ROWS_TO_MEASURE,
LEFT_HEADER_LEFT_SPACING,
CELL_HEIGHT,
@@ -96,15 +96,20 @@ interface GetLeftHeaderWidthsProps {
rowIndexes: number[];
getColumnTitle: (columnIndex: number) => string;
leftHeaderItems?: HeaderItem[];
- fontFamily?: string;
+ font: { fontFamily?: string; fontSize?: string };
}
export function getLeftHeaderWidths({
rowIndexes,
getColumnTitle,
leftHeaderItems = [],
- fontFamily = "Lato",
+ font,
}: GetLeftHeaderWidthsProps) {
+ const {
+ fontFamily = "var(--mb-default-font-family)",
+ fontSize = DEFAULT_METABASE_COMPONENT_THEME.pivotTable.cell.fontSize,
+ } = font ?? {};
+
const cellValues = getColumnValues(leftHeaderItems);
const widths = rowIndexes.map((rowIndex, depthIndex) => {
@@ -112,7 +117,7 @@ export function getLeftHeaderWidths({
measureText(getColumnTitle(rowIndex), {
weight: "bold",
family: fontFamily,
- size: PIVOT_TABLE_FONT_SIZE,
+ size: fontSize,
}).width + ROW_TOGGLE_ICON_WIDTH,
);
@@ -124,7 +129,7 @@ export function getLeftHeaderWidths({
measureText(value, {
weight: "normal",
family: fontFamily,
- size: PIVOT_TABLE_FONT_SIZE,
+ size: fontSize,
}).width +
(cellValues[rowIndex]?.hasSubtotal ? ROW_TOGGLE_ICON_WIDTH : 0),
) ?? [0]),
diff --git a/frontend/src/metabase/visualizations/visualizations/PivotTable/utils.unit.spec.ts b/frontend/src/metabase/visualizations/visualizations/PivotTable/utils.unit.spec.ts
index e96d2bd8c7adaec55d5ad0a77e3b032bdfc26ca7..b72093b9be71dd11da1112aae8c21bf1a7bba593 100644
--- a/frontend/src/metabase/visualizations/visualizations/PivotTable/utils.unit.spec.ts
+++ b/frontend/src/metabase/visualizations/visualizations/PivotTable/utils.unit.spec.ts
@@ -242,6 +242,7 @@ describe("Visualizations > Visualizations > PivotTable > utils", () => {
const { leftHeaderWidths } = getLeftHeaderWidths({
rowIndexes: [0, 1, 2],
getColumnTitle: () => "test-123",
+ font: {},
});
// jest-dom thinks all characters are 1px wide, so we get the minimum
expect(leftHeaderWidths).toEqual([
@@ -255,6 +256,7 @@ describe("Visualizations > Visualizations > PivotTable > utils", () => {
const { totalLeftHeaderWidths } = getLeftHeaderWidths({
rowIndexes: [0, 1, 2],
getColumnTitle: () => "test-123",
+ font: {},
});
expect(totalLeftHeaderWidths).toEqual(MIN_HEADER_CELL_WIDTH * 3);
});
@@ -264,6 +266,7 @@ describe("Visualizations > Visualizations > PivotTable > utils", () => {
rowIndexes: [0, 1, 2],
// jest-dom thinks characters are 1px wide
getColumnTitle: () => "x".repeat(MAX_HEADER_CELL_WIDTH),
+ font: {},
});
expect(leftHeaderWidths).toEqual([
@@ -287,6 +290,7 @@ describe("Visualizations > Visualizations > PivotTable > utils", () => {
rowIndexes: [0, 1, 2, 3, 4],
leftHeaderItems: data,
getColumnTitle: () => "x".repeat(70),
+ font: {},
});
expect(leftHeaderWidths).toEqual([
@@ -312,6 +316,7 @@ describe("Visualizations > Visualizations > PivotTable > utils", () => {
rowIndexes: [0, 1, 2, 3, 4],
leftHeaderItems: data,
getColumnTitle: () => "test-123",
+ font: {},
});
expect(leftHeaderWidths).toEqual([
diff --git a/frontend/src/metabase/visualizations/visualizations/RowChart/RowChart.styled.tsx b/frontend/src/metabase/visualizations/visualizations/RowChart/RowChart.styled.tsx
index 141df1cc15feddbdd9b19c4aa8c6d23973af111d..faec5e7e3141edcba1ccf5ec4e932287365696d1 100644
--- a/frontend/src/metabase/visualizations/visualizations/RowChart/RowChart.styled.tsx
+++ b/frontend/src/metabase/visualizations/visualizations/RowChart/RowChart.styled.tsx
@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
import LegendCaption from "metabase/visualizations/components/legend/LegendCaption";
import LegendLayout from "metabase/visualizations/components/legend/LegendLayout";
+import { getChartPadding } from "metabase/visualizations/visualizations/CartesianChart/padding";
interface RowVisualizationRootProps {
isQueryBuilder: boolean;
@@ -10,8 +11,7 @@ interface RowVisualizationRootProps {
export const RowVisualizationRoot = styled.div<RowVisualizationRootProps>`
display: flex;
flex-direction: column;
- padding: ${({ isQueryBuilder }) =>
- isQueryBuilder ? "1rem 1rem 1rem 2rem" : "0.5rem 1rem"};
+ padding: ${getChartPadding};
overflow: hidden;
`;
diff --git a/frontend/src/metabase/visualizations/visualizations/SmartScalar/SmartScalar.stories.tsx b/frontend/src/metabase/visualizations/visualizations/SmartScalar/SmartScalar.stories.tsx
index 8b8e80c5ef091d88a029c5379f73f2e6ff858b90..9dfd72e4602d3574094f3e0ed45642b6cf4c72d1 100644
--- a/frontend/src/metabase/visualizations/visualizations/SmartScalar/SmartScalar.stories.tsx
+++ b/frontend/src/metabase/visualizations/visualizations/SmartScalar/SmartScalar.stories.tsx
@@ -36,7 +36,7 @@ export const Default: Story = () => (
);
// Example of how themes can be applied in the SDK.
-export const EmbeddingTemplate: Story = () => {
+export const EmbeddingTheme: Story = () => {
const theme: MetabaseTheme = {
colors: {
positive: "#4834d4",
diff --git a/frontend/test/__support__/storybook.tsx b/frontend/test/__support__/storybook.tsx
index ca526fb014922c390661b428f7a6a4e8b6167995..a678d5f1677018f75401012603cdc2abd8d98c2b 100644
--- a/frontend/test/__support__/storybook.tsx
+++ b/frontend/test/__support__/storybook.tsx
@@ -5,6 +5,7 @@ import type { MetabaseTheme } from "embedding-sdk";
import { SdkThemeProvider } from "embedding-sdk/components/private/SdkThemeProvider";
import { mainReducers } from "metabase/reducers-main";
import type { MantineThemeOverride } from "metabase/ui";
+import { Box } from "metabase/ui";
import { createMockSettingsState } from "metabase-types/store/mocks";
import { getStore } from "./entities-store";
@@ -57,7 +58,9 @@ export const SdkVisualizationWrapper = ({
children: React.ReactElement;
theme?: MetabaseTheme;
}) => (
- <VisualizationWrapper>
- <SdkThemeProvider theme={theme}>{children}</SdkThemeProvider>
- </VisualizationWrapper>
+ <Box fz="0.875rem">
+ <VisualizationWrapper>
+ <SdkThemeProvider theme={theme}>{children}</SdkThemeProvider>
+ </VisualizationWrapper>
+ </Box>
);