Add option to display chart full screen

Author: wojtekmaj

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<PackageCardProps> = ({
     showAsPercentageKey,
     false
   );
+  const [fullScreenKey, setFullScreenKey] = useSearchParamsState<string | null>(
+    "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<PackageCardProps> = ({
     <CardFrame
       theme={theme ?? lightTheme}
       disabled={history?.points.length === 0}
+      fullScreen={fullScreen}
     >
       <div className={styles.header}>
         <div className={styles.headerLeft} />
@@ -110,13 +129,22 @@ const PackageCard: React.FC<PackageCardProps> = ({
         </div>
         <div className={styles.headerControls}>
           <TooltipButton
-            toggle
-            content="Show as percentage"
             aria-label="Show as percentage"
-            disabled={disabled}
-            onRenderIcon={() => <CalculatorPercentageIcon />}
             checked={showAsPercentage}
+            content="Show as percentage"
+            disabled={disabled}
             onClick={() => setShowAsPercentage(!showAsPercentage)}
+            onRenderIcon={() => <CalculatorPercentageIcon />}
+            toggle
+          />
+          <TooltipButton
+            aria-label="Show full screen"
+            checked={fullScreen}
+            content="Show full screen"
+            disabled={disabled}
+            onClick={() => setFullScreen(!fullScreen)}
+            onRenderIcon={() => <FullScreenIcon />}
+            toggle
           />
         </div>
       </div>
@@ -125,15 +153,16 @@ const PackageCard: React.FC<PackageCardProps> = ({
           {!dataIsReady && <ChartFallback />}
           <VersionDownloadChart
             className={!disabled ? styles.visibleChart : styles.invisibleChart}
+            fullScreen={fullScreen}
             history={dataIsReady ? history : undefined}
             maxDaysShown={maxDays(versionFilter)}
-            tickInterval={tickInterval(versionFilter)}
             maxVersionsShown={maxVersionsShown ?? 4}
             popularDuring={popularDuring(versionFilter)}
-            unit={showAsPercentage ? "percentage" : "totalDownloads"}
-            versionLabeler={packageDesc.versionLabeler}
             theme={theme}
+            tickInterval={tickInterval(versionFilter)}
             tooltipTheme={tooltipTheme}
+            unit={showAsPercentage ? "percentage" : "totalDownloads"}
+            versionLabeler={packageDesc.versionLabeler}
           />
         </Suspense>
       </div>
@@ -144,15 +173,14 @@ const PackageCard: React.FC<PackageCardProps> = ({
 const CardFrame: React.FC<{
   children: React.ReactNode;
   disabled: boolean;
+  fullScreen?: boolean;
   theme: ITheme;
-}> = ({ children, disabled, theme }) => {
+}> = ({ children, disabled, fullScreen, theme }) => {
   return (
     <ThemeProvider
-      className={
-        disabled
-          ? `${styles.cardFrame} ${styles.disabledCardFrame}`
-          : styles.cardFrame
-      }
+      className={`${styles.cardFrame} ${
+        disabled ? styles.disabledCardFrame : ""
+      } ${fullScreen ? styles.fullScreenCardFrame : ""}`}
       theme={theme}
     >
       <div

src/components/VersionDownloadChart.tsx

@@ -30,6 +30,11 @@ export type VersionDownloadChartProps = {
    */
   className?: string;
 
+  /**
+   * Whether to show the chart in full screen
+   */
+  fullScreen?: boolean;
+
   /**
    * Points to render
    */
@@ -94,17 +99,18 @@ export type VersionDownloadChartProps = {
 
 const VersionDownloadChart: React.FC<VersionDownloadChartProps> = ({
   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<VersionDownloadChartProps> = ({
 
   return (
     <div className={className}>
-      <ResponsiveContainer {...styles.responsiveContainer}>
+      <ResponsiveContainer
+        {...styles[
+          fullScreen ? "responsiveContainerFullScreen" : "responsiveContainer"
+        ]}
+      >
         <AreaChart
           {...styles.areaChart}
           data={filteredHistory?.points}

src/hooks/useSearchParamsState.ts

@@ -1,6 +1,6 @@
 import { useCallback, useState } from "react";
 
-export default function useSearchParamsState<T extends string>(
+export default function useSearchParamsState<T extends string | null>(
   storageKey: string,
   defaultValue: T
 ) {
@@ -13,7 +13,11 @@ export default function useSearchParamsState<T extends string>(
   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);
     },

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.

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%;
 }

src/styles/VersionDownloadChart.styles.ts

@@ -34,6 +34,7 @@ export type VersionDownloadChartStyle = (opts?: {
   };
   area: Pick<AreaProps, AnimationProps | DimensionProps>;
   responsiveContainer: Pick<ResponsiveContainerProps, DimensionProps>;
+  responsiveContainerFullScreen: Pick<ResponsiveContainerProps, DimensionProps>;
   grid: Pick<CartesianGridProps, DimensionProps | StrokeProps>;
   xAxis: Pick<XAxisProps, DimensionProps | PaddingProps | TickProps>;
   yAxis: Pick<YAxisProps, DimensionProps | PaddingProps | TickProps>;
@@ -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