From cfbd4fe9b0f82dafab62ab16b0e721ac834f2163 Mon Sep 17 00:00:00 2001
From: Alexander Polyankin <alexander.polyankin@metabase.com>
Date: Thu, 16 Jun 2022 17:03:59 +0300
Subject: [PATCH] Simplify pinned questions (#23352)
---
.../PinnedQuestionLoader.tsx | 37 +++++++++++--------
.../GaugeSkeleton/GaugeSkeleton.styled.tsx | 3 +-
.../skeletons/LineSkeleton/LineSkeleton.tsx | 2 +-
.../PieSkeleton/PieSkeleton.styled.tsx | 2 +
.../ProgressSkeleton/ProgressSkeleton.tsx | 4 +-
.../ScalarSkeleton/ScalarSkeleton.styled.tsx | 7 +++-
.../ScalarSkeleton/ScalarSkeleton.tsx | 13 +++++--
.../SkeletonCaption.styled.tsx | 9 ++++-
.../SkeletonCaption/SkeletonCaption.tsx | 16 ++++++--
.../skeletons/SkeletonCaption/types.ts | 1 +
.../SmartScalarSkeleton.styled.tsx | 9 ++++-
.../SmartScalarSkeleton.tsx | 8 +++-
12 files changed, 79 insertions(+), 32 deletions(-)
create mode 100644 frontend/src/metabase/visualizations/components/skeletons/SkeletonCaption/types.ts
diff --git a/frontend/src/metabase/collections/components/PinnedQuestionCard/PinnedQuestionLoader.tsx b/frontend/src/metabase/collections/components/PinnedQuestionCard/PinnedQuestionLoader.tsx
index 7035b9f1381..6e3200658b3 100644
--- a/frontend/src/metabase/collections/components/PinnedQuestionCard/PinnedQuestionLoader.tsx
+++ b/frontend/src/metabase/collections/components/PinnedQuestionCard/PinnedQuestionLoader.tsx
@@ -17,7 +17,7 @@ export interface PinnedQuestionLoaderProps {
export interface PinnedQuestionChildrenProps {
loading: boolean;
question?: Question;
- rawSeries?: any;
+ rawSeries?: any[];
error?: string;
errorIcon?: string;
}
@@ -29,18 +29,10 @@ export interface QuestionLoaderProps {
export interface QuestionResultLoaderProps {
loading: boolean;
- error?: QuestionError;
- result?: QuestionResult;
+ error?: any;
+ result?: any;
results?: any;
- rawSeries?: any;
-}
-
-export interface QuestionError {
- status?: number;
-}
-
-export interface QuestionResult {
- error?: QuestionError;
+ rawSeries?: any[];
}
const PinnedQuestionLoader = ({
@@ -71,8 +63,8 @@ const PinnedQuestionLoader = ({
}: QuestionResultLoaderProps) =>
children({
question,
- rawSeries,
loading: loading || results == null,
+ rawSeries: getRawSeries(rawSeries),
error: getError(error, result),
errorIcon: getErrorIcon(error, result),
})
@@ -84,7 +76,22 @@ const PinnedQuestionLoader = ({
);
};
-const getError = (error?: QuestionError, result?: QuestionResult) => {
+const getRawSeries = (rawSeries?: any[]) => {
+ return rawSeries?.map(series => ({
+ ...series,
+ card: {
+ ...series.card,
+ visualization_settings: {
+ ...series.card.visualization_settings,
+ "graph.show_values": false,
+ "graph.x_axis.labels_enabled": false,
+ "graph.y_axis.labels_enabled": false,
+ },
+ },
+ }));
+};
+
+const getError = (error?: any, result?: any) => {
const errorResponse = error ?? result?.error;
if (!errorResponse) {
@@ -96,7 +103,7 @@ const getError = (error?: QuestionError, result?: QuestionResult) => {
}
};
-const getErrorIcon = (error?: QuestionError, result?: QuestionResult) => {
+const getErrorIcon = (error?: any, result?: any) => {
const errorResponse = error ?? result?.error;
if (!errorResponse) {
diff --git a/frontend/src/metabase/visualizations/components/skeletons/GaugeSkeleton/GaugeSkeleton.styled.tsx b/frontend/src/metabase/visualizations/components/skeletons/GaugeSkeleton/GaugeSkeleton.styled.tsx
index de44dbed31c..ea06d6d1dcf 100644
--- a/frontend/src/metabase/visualizations/components/skeletons/GaugeSkeleton/GaugeSkeleton.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/skeletons/GaugeSkeleton/GaugeSkeleton.styled.tsx
@@ -8,5 +8,6 @@ export const SkeletonRoot = styled.div`
export const SkeletonImage = styled.svg`
${animationStyles};
flex: 1 1 0;
- margin-top: 1rem;
+ margin-top: 1.25rem;
+ margin-bottom: 0.625rem;
`;
diff --git a/frontend/src/metabase/visualizations/components/skeletons/LineSkeleton/LineSkeleton.tsx b/frontend/src/metabase/visualizations/components/skeletons/LineSkeleton/LineSkeleton.tsx
index ad327dac8b3..d6b46722c3e 100644
--- a/frontend/src/metabase/visualizations/components/skeletons/LineSkeleton/LineSkeleton.tsx
+++ b/frontend/src/metabase/visualizations/components/skeletons/LineSkeleton/LineSkeleton.tsx
@@ -24,7 +24,7 @@ const LineSkeleton = ({
<path
d="m1 111 15.336-10 18.043 10 22.553-16.5 15.336 9.5 46.91-47 30.331 16 31.013-16 20.299 16 43.752-41 24.358 31 15.273-15.5L299.603 63l48.714-60L374 63"
stroke="currentColor"
- strokeWidth="3"
+ strokeWidth="2"
/>
</SkeletonImage>
</SkeletonRoot>
diff --git a/frontend/src/metabase/visualizations/components/skeletons/PieSkeleton/PieSkeleton.styled.tsx b/frontend/src/metabase/visualizations/components/skeletons/PieSkeleton/PieSkeleton.styled.tsx
index 467c11b074c..c8d98d862b8 100644
--- a/frontend/src/metabase/visualizations/components/skeletons/PieSkeleton/PieSkeleton.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/skeletons/PieSkeleton/PieSkeleton.styled.tsx
@@ -8,4 +8,6 @@ export const SkeletonRoot = styled.div`
export const SkeletonImage = styled.svg`
${animationStyles};
flex: 1 1 0;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
`;
diff --git a/frontend/src/metabase/visualizations/components/skeletons/ProgressSkeleton/ProgressSkeleton.tsx b/frontend/src/metabase/visualizations/components/skeletons/ProgressSkeleton/ProgressSkeleton.tsx
index f297880c461..f2dbafa0793 100644
--- a/frontend/src/metabase/visualizations/components/skeletons/ProgressSkeleton/ProgressSkeleton.tsx
+++ b/frontend/src/metabase/visualizations/components/skeletons/ProgressSkeleton/ProgressSkeleton.tsx
@@ -27,12 +27,12 @@ const ProgressSkeleton = ({
opacity=".32"
y="12"
width="404"
- height="45"
+ height="35"
rx="4"
fill="currentColor"
/>
<path
- d="M0 16a4 4 0 0 1 4-4h298v45H4a4 4 0 0 1-4-4V16ZM302 .485h8.485L302 8.971 293.515.485H302Z"
+ d="M0 16a4 4 0 0 1 4-4h298v35H4a4 4 0 0 1-4-4V16ZM302 .485h8.485L302 8.971 293.515.485H302Z"
fill="currentColor"
/>
</SkeletonImage>
diff --git a/frontend/src/metabase/visualizations/components/skeletons/ScalarSkeleton/ScalarSkeleton.styled.tsx b/frontend/src/metabase/visualizations/components/skeletons/ScalarSkeleton/ScalarSkeleton.styled.tsx
index 7061588a1fe..2c731991bc9 100644
--- a/frontend/src/metabase/visualizations/components/skeletons/ScalarSkeleton/ScalarSkeleton.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/skeletons/ScalarSkeleton/ScalarSkeleton.styled.tsx
@@ -1,5 +1,6 @@
import styled from "@emotion/styled";
import { containerStyles, animationStyles } from "../Skeleton";
+import SkeletonCaption from "../SkeletonCaption";
export const SkeletonRoot = styled.div`
${containerStyles};
@@ -10,5 +11,9 @@ export const SkeletonRoot = styled.div`
export const SkeletonImage = styled.svg`
${animationStyles};
height: 2rem;
- margin-bottom: 1rem;
+`;
+
+export const SkeletonCenterCaption = styled(SkeletonCaption)`
+ margin-top: 0.25rem;
+ margin-bottom: 0.25rem;
`;
diff --git a/frontend/src/metabase/visualizations/components/skeletons/ScalarSkeleton/ScalarSkeleton.tsx b/frontend/src/metabase/visualizations/components/skeletons/ScalarSkeleton/ScalarSkeleton.tsx
index 7eacb1ce792..36f27c9080a 100644
--- a/frontend/src/metabase/visualizations/components/skeletons/ScalarSkeleton/ScalarSkeleton.tsx
+++ b/frontend/src/metabase/visualizations/components/skeletons/ScalarSkeleton/ScalarSkeleton.tsx
@@ -1,6 +1,9 @@
import React, { HTMLAttributes } from "react";
-import SkeletonCaption from "../SkeletonCaption";
-import { SkeletonImage, SkeletonRoot } from "./ScalarSkeleton.styled";
+import {
+ SkeletonImage,
+ SkeletonRoot,
+ SkeletonCenterCaption,
+} from "./ScalarSkeleton.styled";
export interface ScalarSkeletonProps extends HTMLAttributes<HTMLDivElement> {
name?: string | null;
@@ -17,7 +20,11 @@ const ScalarSkeleton = ({
<SkeletonImage xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 32">
<rect width="103" height="32" rx="16" fill="currentColor" />
</SkeletonImage>
- <SkeletonCaption name={name} description={description} />
+ <SkeletonCenterCaption
+ name={name}
+ description={description}
+ size="large"
+ />
</SkeletonRoot>
);
};
diff --git a/frontend/src/metabase/visualizations/components/skeletons/SkeletonCaption/SkeletonCaption.styled.tsx b/frontend/src/metabase/visualizations/components/skeletons/SkeletonCaption/SkeletonCaption.styled.tsx
index 77af20078ac..af7bf2468d3 100644
--- a/frontend/src/metabase/visualizations/components/skeletons/SkeletonCaption/SkeletonCaption.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/skeletons/SkeletonCaption/SkeletonCaption.styled.tsx
@@ -3,13 +3,20 @@ import { color } from "metabase/lib/colors";
import Icon from "metabase/components/Icon";
import Ellipsified from "metabase/core/components/Ellipsified";
import { animationStyles } from "../Skeleton";
+import { SkeletonCaptionSize } from "./types";
export const SkeletonRoot = styled.div`
display: flex;
`;
-export const SkeletonTitle = styled(Ellipsified)`
+export interface SkeletonTitleProps {
+ size: SkeletonCaptionSize;
+}
+
+export const SkeletonTitle = styled(Ellipsified)<SkeletonTitleProps>`
color: ${color("text-dark")};
+ font-size: ${props => (props.size === "large" ? "1rem" : "")};
+ line-height: ${props => (props.size === "large" ? "1.375rem" : "")};
font-weight: bold;
overflow: hidden;
`;
diff --git a/frontend/src/metabase/visualizations/components/skeletons/SkeletonCaption/SkeletonCaption.tsx b/frontend/src/metabase/visualizations/components/skeletons/SkeletonCaption/SkeletonCaption.tsx
index 1b0ffdaeac0..8906d6130dd 100644
--- a/frontend/src/metabase/visualizations/components/skeletons/SkeletonCaption/SkeletonCaption.tsx
+++ b/frontend/src/metabase/visualizations/components/skeletons/SkeletonCaption/SkeletonCaption.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { HTMLAttributes } from "react";
import Tooltip from "metabase/components/Tooltip";
import {
SkeletonRoot,
@@ -6,19 +6,27 @@ import {
SkeletonDescription,
SkeletonPlaceholder,
} from "./SkeletonCaption.styled";
+import { SkeletonCaptionSize } from "./types";
-export interface SkeletonCaptionProps {
+export interface SkeletonCaptionProps extends HTMLAttributes<HTMLDivElement> {
name?: string | null;
description?: string | null;
+ size?: SkeletonCaptionSize;
}
const SkeletonCaption = ({
name,
description,
+ size = "medium",
+ ...props
}: SkeletonCaptionProps): JSX.Element => {
return (
- <SkeletonRoot>
- {name ? <SkeletonTitle>{name}</SkeletonTitle> : <SkeletonPlaceholder />}
+ <SkeletonRoot {...props}>
+ {name ? (
+ <SkeletonTitle size={size}>{name}</SkeletonTitle>
+ ) : (
+ <SkeletonPlaceholder />
+ )}
{description && (
<Tooltip tooltip={description} maxWidth="22em">
<SkeletonDescription name="info" />
diff --git a/frontend/src/metabase/visualizations/components/skeletons/SkeletonCaption/types.ts b/frontend/src/metabase/visualizations/components/skeletons/SkeletonCaption/types.ts
new file mode 100644
index 00000000000..78cf6ef83ae
--- /dev/null
+++ b/frontend/src/metabase/visualizations/components/skeletons/SkeletonCaption/types.ts
@@ -0,0 +1 @@
+export type SkeletonCaptionSize = "medium" | "large";
diff --git a/frontend/src/metabase/visualizations/components/skeletons/SmartScalarSkeleton/SmartScalarSkeleton.styled.tsx b/frontend/src/metabase/visualizations/components/skeletons/SmartScalarSkeleton/SmartScalarSkeleton.styled.tsx
index 9991a9451db..2f6c5913bf9 100644
--- a/frontend/src/metabase/visualizations/components/skeletons/SmartScalarSkeleton/SmartScalarSkeleton.styled.tsx
+++ b/frontend/src/metabase/visualizations/components/skeletons/SmartScalarSkeleton/SmartScalarSkeleton.styled.tsx
@@ -1,6 +1,7 @@
import styled from "@emotion/styled";
import { color } from "metabase/lib/colors";
import { containerStyles, animationStyles } from "../Skeleton";
+import SkeletonCaption from "metabase/visualizations/components/skeletons/SkeletonCaption/SkeletonCaption";
export const SkeletonRoot = styled.div`
${containerStyles};
@@ -11,11 +12,15 @@ export const SkeletonRoot = styled.div`
export const SkeletonTopImage = styled.svg`
${animationStyles};
height: 2rem;
- margin-bottom: 1.25rem;
+ margin-top: 0.625rem;
`;
export const SkeletonBottomImage = styled.svg`
${animationStyles};
height: 0.5rem;
- margin-top: 1rem;
+`;
+
+export const SkeletonCenterCaption = styled(SkeletonCaption)`
+ margin-top: 0.25rem;
+ margin-bottom: 2.25rem;
`;
diff --git a/frontend/src/metabase/visualizations/components/skeletons/SmartScalarSkeleton/SmartScalarSkeleton.tsx b/frontend/src/metabase/visualizations/components/skeletons/SmartScalarSkeleton/SmartScalarSkeleton.tsx
index 48fbc1ce63c..81fa59cc860 100644
--- a/frontend/src/metabase/visualizations/components/skeletons/SmartScalarSkeleton/SmartScalarSkeleton.tsx
+++ b/frontend/src/metabase/visualizations/components/skeletons/SmartScalarSkeleton/SmartScalarSkeleton.tsx
@@ -1,7 +1,7 @@
import React, { HTMLAttributes } from "react";
-import SkeletonCaption from "../SkeletonCaption";
import {
SkeletonBottomImage,
+ SkeletonCenterCaption,
SkeletonRoot,
SkeletonTopImage,
} from "./SmartScalarSkeleton.styled";
@@ -22,7 +22,11 @@ const SmartScalarSkeleton = ({
<SkeletonTopImage xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 32">
<rect width="103" height="32" rx="16" fill="currentColor" />
</SkeletonTopImage>
- <SkeletonCaption name={name} description={description} />
+ <SkeletonCenterCaption
+ name={name}
+ description={description}
+ size="large"
+ />
<SkeletonBottomImage
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 182 8"
--
GitLab