6 find a way to zoommake diagrams bigger

package.json

@@ -40,6 +40,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-full-screen": "^1.1.1",
     "use-debounce": "^8.0.1",
     "workbox-cacheable-response": "^6.5.3",
     "workbox-expiration": "^6.5.3",

skins/weewx-wdc/includes/climatological-days.inc

@@ -105,7 +105,7 @@
       var calendarDataRain = $get_calendar_data('rain', 'sum', $get_time_span_from_attr($precision, $day, $week, $month, $year, $alltime));
     </script>
     <div
-      class="calendar-diagram"
+      class="calendar-diagram-clim-wrap"
       data-value="calendarDataRain"
       data-obs="rain"
       data-unit="$unit.label.rain"
@@ -127,7 +127,7 @@
       var calendarDataTempAvg = $get_calendar_data('outTemp', 'avg', $get_time_span_from_attr($precision, $day, $week, $month, $year, $alltime));
     </script>
     <div
-      class="calendar-diagram"
+      class="calendar-diagram-clim-wrap"
       data-value="calendarDataTempAvg"
       data-obs="outTemp"
       data-unit="$unit.label.outTemp"

skins/weewx-wdc/src/js/assets/maximize.tsx

@@ -0,0 +1,25 @@
+import React, { MouseEventHandler } from "react";
+
+export const Maximize = ({ onClick }: { onClick: MouseEventHandler }) => {
+  return (
+    <svg
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 32 32"
+      className="maximize"
+    >
+      <polygon points="20 2 20 4 26.586 4 18 12.582 19.414 14 28 5.414 28 12 30 12 30 2 20 2" />
+      <polygon points="14 19.416 12.592 18 4 26.586 4 20 2 20 2 30 12 30 12 28 5.414 28 14 19.416" />
+      <rect
+        style={{ fill: "none" }}
+        data-name="&lt;Transparent Rectangle&gt;"
+        className="cls-1"
+        width="32"
+        height="32"
+        transform="translate(32 32) rotate(-180)"
+      />
+    </svg>
+  );
+};

skins/weewx-wdc/src/js/diagrams/bar.tsx

@@ -2,15 +2,18 @@ import React, { FunctionComponent } from "react";
 import { ResponsiveBar } from "@nivo/bar";
 import moment from "moment";
 import { useMediaQuery } from "@react-hook/media-query";
+import { FullScreen, useFullScreenHandle } from "react-full-screen";
 
 import { DiagramBaseProps } from "./types";
 import { getyScaleOffset } from "../util/util";
 import { TooltipBar } from "../components/tooltip-bar";
+import { Maximize } from "../assets/maximize";
 
 export const BarDiagram: FunctionComponent<DiagramBaseProps> = (
   props: DiagramBaseProps
 ): React.ReactElement => {
   const small = useMediaQuery("(max-width: 672px)");
+  const handle = useFullScreenHandle();
   let dateFormat = "HH:mm";
 
   switch (props.precision) {
@@ -26,62 +29,69 @@ export const BarDiagram: FunctionComponent<DiagramBaseProps> = (
       break;
   }
 
+  const barDiagram = (
+    <ResponsiveBar
+      axisBottom={{
+        format: (value) => moment.unix(value).format(dateFormat),
+        tickSize: props.precision === "day" ? 2 : 0,
+        tickPadding: 5,
+        tickRotation: -65,
+      }}
+      axisLeft={{
+        legend: props.unit,
+        legendOffset: -50,
+        legendPosition: "middle",
+        tickSize: 0,
+        tickPadding: 10,
+      }}
+      colors={props.color}
+      data={props.data[0].data}
+      enableLabel={false}
+      enableGridX={false}
+      enableGridY={true}
+      indexBy="x"
+      indexScale={{ type: "band", round: false }}
+      isInteractive={true}
+      labelSkipHeight={50}
+      margin={{
+        top: 20,
+        right: 10,
+        bottom: 40,
+        left: 55,
+      }}
+      maxValue={
+        Math.max(
+          ...props.data[0].data.map((item): number => (item as { y: number }).y)
+        ) + getyScaleOffset(props.observation)
+      }
+      minValue={0}
+      keys={["y"]}
+      tooltip={(point) => (
+        <TooltipBar
+          formattedValue={point.formattedValue}
+          color={props.color[0]}
+          time={moment
+            .unix((point as { data: { x: number } }).data.x)
+            .format(dateFormat)}
+          endTime={moment.unix(point.data.end).format(dateFormat)}
+        />
+      )}
+      valueFormat={(value) => `${value} ${props.unit}`}
+      valueScale={{ type: "linear" }}
+      theme={{
+        fontSize: small ? 9 : 11,
+      }}
+    />
+  );
+
   return (
-    <div className="diagram">
-      <ResponsiveBar
-        axisBottom={{
-          format: (value) => moment.unix(value).format(dateFormat),
-          tickSize: props.precision === "day" ? 2 : 0,
-          tickPadding: 5,
-          tickRotation: -65,
-        }}
-        axisLeft={{
-          legend: props.unit,
-          legendOffset: -50,
-          legendPosition: "middle",
-          tickSize: 0,
-          tickPadding: 10,
-        }}
-        colors={props.color}
-        data={props.data[0].data}
-        enableLabel={false}
-        enableGridX={false}
-        enableGridY={true}
-        indexBy="x"
-        indexScale={{ type: "band", round: false }}
-        isInteractive={true}
-        labelSkipHeight={50}
-        margin={{
-          top: 20,
-          right: 10,
-          bottom: 40,
-          left: 55,
-        }}
-        maxValue={
-          Math.max(
-            ...props.data[0].data.map(
-              (item): number => (item as { y: number }).y
-            )
-          ) + getyScaleOffset(props.observation)
-        }
-        minValue={0}
-        keys={["y"]}
-        tooltip={(point) => (
-          <TooltipBar
-            formattedValue={point.formattedValue}
-            color={props.color[0]}
-            time={moment
-              .unix((point as { data: { x: number } }).data.x)
-              .format(dateFormat)}
-            endTime={moment.unix(point.data.end).format(dateFormat)}
-          />
-        )}
-        valueFormat={(value) => `${value} ${props.unit}`}
-        valueScale={{ type: "linear" }}
-        theme={{
-          fontSize: small ? 9 : 11,
-        }}
-      />
-    </div>
+    <>
+      <Maximize onClick={handle.enter} />
+      <div className="diagram">{barDiagram}</div>
+      <FullScreen handle={handle}>
+        <Maximize onClick={handle.exit} />
+        {barDiagram}
+      </FullScreen>
+    </>
   );
 };

skins/weewx-wdc/src/js/diagrams/calendar.tsx

@@ -3,19 +3,24 @@ import { ResponsiveCalendar } from "@nivo/calendar";
 import moment from "moment";
 import { NumberValue, scaleQuantize } from "d3-scale";
 import { useMediaQuery } from "@react-hook/media-query";
+import { FullScreen, useFullScreenHandle } from "react-full-screen";
 
 import { ColorScale } from "@nivo/calendar";
 
 import { CalendarDiagramBaseProps } from "./types";
 import { TooltipCalendar } from "../components/tooltip-calendar";
+import { Maximize } from "../assets/maximize";
 
 export const CalendarDiagram: FunctionComponent<CalendarDiagramBaseProps> = (
   props: CalendarDiagramBaseProps
 ): React.ReactElement => {
   const small = useMediaQuery("(max-width: 672px)");
+  const handle = useFullScreenHandle();
   const start = props.data[0].day;
   const end = props.data[props.data.length - 1].day;
-  const yearDiff = moment(end).diff(start, "years");
+  const yearDiff =
+    parseInt(moment(end, "YYYY-MM-DD").format("YYYY")) -
+    parseInt(moment(start, "YYYY-MM-DD").format("YYYY"));
 
   // @see https://nivo.rocks/storybook/?path=/story/calendarcanvas--custom-color-space-function
   // @see https://github.com/plouc/nivo/issues/744#issuecomment-573340879
@@ -31,7 +36,6 @@ export const CalendarDiagram: FunctionComponent<CalendarDiagramBaseProps> = (
     };
     colorScale.ticks = (count: number | undefined) => {
       return defaultColorScale.ticks(count).map((e) => {
-        console.log("e", e);
         return `${e}${props.unit}`;
       });
     };
@@ -40,6 +44,51 @@ export const CalendarDiagram: FunctionComponent<CalendarDiagramBaseProps> = (
     return colorScale;
   };
 
+  const calendarDiagram = (
+    <ResponsiveCalendar
+      from={props.data[0].day}
+      data={props.data}
+      to={props.data[props.data.length - 1].day}
+      emptyColor="#e0e0e0"
+      //colors={props.color}
+      colorScale={color()}
+      margin={{
+        top: 20,
+        right: small ? 0 : 100,
+        bottom: small ? 40 : 20,
+        left: small ? 0 : 25,
+      }}
+      dayBorderColor="#ffffff"
+      monthSpacing={2}
+      monthBorderColor="#ffffff"
+      monthLegendOffset={14}
+      monthLegendPosition="after"
+      yearSpacing={30}
+      yearLegendOffset={10}
+      tooltip={(data) => (
+        <TooltipCalendar
+          day={data.day}
+          value={data.value}
+          unit={props.unit}
+          color={data.color}
+        />
+      )}
+      legends={[
+        {
+          anchor: small ? "bottom-left" : "right",
+          direction: small ? "row" : "column",
+          translateY: small ? -20 : 0,
+          translateX: small ? 0 : -20,
+          itemCount: 4,
+          itemWidth: small ? 50 : 80,
+          itemHeight: 20,
+          itemsSpacing: small ? 2 : 5,
+          itemDirection: "left-to-right",
+        },
+      ]}
+    />
+  );
+
   return (
     <>
       <p className="label">{props.heading}</p>
@@ -48,49 +97,13 @@ export const CalendarDiagram: FunctionComponent<CalendarDiagramBaseProps> = (
         // @todo Add responsive style.
         style={{ height: `${(yearDiff + 1) * (small ? 25 : 14)}vw` }}
       >
-        <ResponsiveCalendar
-          from={props.data[0].day}
-          data={props.data}
-          to={props.data[props.data.length - 1].day}
-          emptyColor="#e0e0e0"
-          //colors={props.color}
-          colorScale={color()}
-          margin={{
-            top: 20,
-            right: small ? 0 : 100,
-            bottom: small ? 40 : 20,
-            left: small ? 0 : 25,
-          }}
-          dayBorderColor="#ffffff"
-          monthSpacing={2}
-          monthBorderColor="#ffffff"
-          monthLegendOffset={14}
-          monthLegendPosition="after"
-          yearSpacing={30}
-          yearLegendOffset={10}
-          tooltip={(data) => (
-            <TooltipCalendar
-              day={data.day}
-              value={data.value}
-              unit={props.unit}
-              color={data.color}
-            />
-          )}
-          legends={[
-            {
-              anchor: small ? "bottom-left" : "right",
-              direction: small ? "row" : "column",
-              translateY: small ? -20 : 0,
-              translateX: small ? 0 : -20,
-              itemCount: 4,
-              itemWidth: small ? 50 : 80,
-              itemHeight: 20,
-              itemsSpacing: small ? 2 : 5,
-              itemDirection: "left-to-right",
-            },
-          ]}
-        />
+        <Maximize onClick={handle.enter} />
+        {calendarDiagram}
       </div>
+      <FullScreen handle={handle}>
+        <Maximize onClick={handle.exit} />
+        {calendarDiagram}
+      </FullScreen>
     </>
   );
 };