diff --git a/src/components/PackageCard.tsx b/src/components/PackageCard.tsx index b16f167da..8f779b724 100644 --- a/src/components/PackageCard.tsx +++ b/src/components/PackageCard.tsx @@ -3,14 +3,19 @@ import styles from "../styles/PackageCard.module.scss"; import { Text, ThemeProvider, ITheme, Shimmer } from "@fluentui/react"; -import { CalculatorPercentageIcon } from "@fluentui/react-icons-mdl2"; +import { + CalculatorPercentageIcon, + FullScreenIcon, +} from "@fluentui/react-icons-mdl2"; import { PackageIdentifier, packages } from "../PackageDescription"; import { lightTheme } from "../styles/Themes"; -import useHistory from "../hooks/useHistory"; import TooltipButton from "./TooltipButton"; +import useHistory from "../hooks/useHistory"; +import useSearchParamsState from "../hooks/useSearchParamsState"; + import React from "react"; import usePersistentState from "../hooks/usePersistentState"; @@ -82,6 +87,19 @@ const PackageCard: React.FC = ({ showAsPercentageKey, false ); + const [fullScreenKey, setFullScreenKey] = useSearchParamsState( + "fullScreen", + null + ); + const fullScreen = fullScreenKey === identifier; + + const setFullScreen = (value: boolean) => { + if (value) { + setFullScreenKey(identifier); + } else { + setFullScreenKey(null); + } + }; const history = useHistory(identifier, versionFilter); const packageDesc = packages[identifier]; @@ -99,6 +117,7 @@ const PackageCard: React.FC = ({
@@ -110,13 +129,22 @@ const PackageCard: React.FC = ({
} checked={showAsPercentage} + content="Show as percentage" + disabled={disabled} onClick={() => setShowAsPercentage(!showAsPercentage)} + onRenderIcon={() => } + toggle + /> + setFullScreen(!fullScreen)} + onRenderIcon={() => } + toggle />
@@ -125,15 +153,16 @@ const PackageCard: React.FC = ({ {!dataIsReady && } @@ -144,15 +173,14 @@ const PackageCard: React.FC = ({ const CardFrame: React.FC<{ children: React.ReactNode; disabled: boolean; + fullScreen?: boolean; theme: ITheme; -}> = ({ children, disabled, theme }) => { +}> = ({ children, disabled, fullScreen, theme }) => { return (
= ({ className, + fullScreen, history, maxDaysShown, maxVersionsShown, popularDuring, showLegend, showTooltip, - unit, - versionLabeler, - tickInterval = 7, theme, + tickInterval = 7, tooltipTheme, + unit, + versionLabeler, }) => { const styles = styleProps({ theme, unit }); @@ -190,7 +196,11 @@ const VersionDownloadChart: React.FC = ({ return (
- + ( +export default function useSearchParamsState( storageKey: string, defaultValue: T ) { @@ -13,7 +13,11 @@ export default function useSearchParamsState( const setAndPersistState = useCallback( (newState: T) => { const url = new URL(window.location.href); - url.searchParams.set(storageKey, newState); + if (newState === null) { + url.searchParams.delete(storageKey); + } else { + url.searchParams.set(storageKey, newState); + } window.history.replaceState({}, "", url.href); setState(newState); }, diff --git a/src/styles/App.module.scss b/src/styles/App.module.scss index 9e41e9f03..518fb1e8c 100644 --- a/src/styles/App.module.scss +++ b/src/styles/App.module.scss @@ -23,6 +23,7 @@ justify-items: center; justify-content: center; gap: 10px; + position: relative; // recharts toolbars may transiently overflow the content area during // animation. diff --git a/src/styles/PackageCard.module.scss b/src/styles/PackageCard.module.scss index ef40c7d3e..1c398467f 100644 --- a/src/styles/PackageCard.module.scss +++ b/src/styles/PackageCard.module.scss @@ -22,6 +22,22 @@ z-index: 1; } +.disabledCardFrame { + opacity: 0.6; +} + +.fullScreenCardFrame { + max-width: unset; + position: fixed; + inset: 0; + z-index: 10000; +} + +.fullScreenCardFrame:hover, +.fullScreenCardFrame:focus-within { + z-index: 10000; +} + .silhouette { position: absolute; box-sizing: border-box; @@ -45,7 +61,6 @@ } .disabledContentWrapper { - opacity: 0.6; } .cardContent { @@ -129,6 +144,8 @@ } .chartContainer { + max-height: 100%; + overflow: hidden; flex-grow: 1; display: flex; @@ -146,4 +163,5 @@ .visibleChart { @include ms-motion-fadeIn; + height: 100%; } diff --git a/src/styles/VersionDownloadChart.styles.ts b/src/styles/VersionDownloadChart.styles.ts index 66c44f5e5..c37f3af02 100644 --- a/src/styles/VersionDownloadChart.styles.ts +++ b/src/styles/VersionDownloadChart.styles.ts @@ -34,6 +34,7 @@ export type VersionDownloadChartStyle = (opts?: { }; area: Pick; responsiveContainer: Pick; + responsiveContainerFullScreen: Pick; grid: Pick; xAxis: Pick; yAxis: Pick; @@ -55,6 +56,10 @@ const styles: VersionDownloadChartStyle = ({ theme, unit } = {}) => ({ width: "100%", height: 260, }, + responsiveContainerFullScreen: { + width: "100%", + height: "100%", + }, grid: { stroke: theme?.isInverted ? theme.palette.whiteTranslucent40