imported the gate and terminal related files to prep for the aviation map

src/charts/SingleSetAreaChart.tsx

@@ -0,0 +1,131 @@
+import { useTheme } from "@mui/material";
+import moment from "moment";
+import React, { useEffect, useState } from "react";
+import {
+  Area,
+  AreaChart,
+  ReferenceArea,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  TooltipProps,
+  XAxis,
+  YAxis
+} from "recharts";
+import MaterialChartTooltip from "./MaterialChartTooltip";
+
+export interface SSAreaDataPoint {
+  timestamp: number;
+  value: number;
+}
+
+interface Props {
+  data: SSAreaDataPoint[];
+  maxRef?: number;
+  minRef?: number;
+  newXDomain?: number[] | string[];
+  multiGraphZoom?: (domain: number[] | string[]) => void;
+}
+
+export default function SingleSetAreaChart(props: Props) {
+  const { data, maxRef, minRef, newXDomain, multiGraphZoom } = props;
+  const [xDomain, setXDomain] = useState<string[] | number[]>(["dataMin", "dataMax"]);
+  const [refLeft, setRefLeft] = useState<number | undefined>();
+  const [refRight, setRefRight] = useState<number | undefined>();
+  const theme = useTheme();
+  const now = moment();
+
+  useEffect(() => {
+    if (newXDomain) {
+      setXDomain(newXDomain);
+    }
+  }, [newXDomain]);
+
+  const zoom = () => {
+    let newDomain: number[] | string[] = ["dataMin", "dataMax"];
+    if (refLeft && refRight && refLeft !== refRight) {
+      refLeft < refRight ? (newDomain = [refLeft, refRight]) : (newDomain = [refRight, refLeft]);
+      setRefLeft(undefined);
+      setRefRight(undefined);
+      if (multiGraphZoom) {
+        multiGraphZoom(newDomain);
+      } else {
+        setXDomain(newDomain);
+      }
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <ResponsiveContainer width={"100%"} height={270}>
+        <AreaChart
+          data={data}
+          onMouseDown={(e: any) => {
+            if (e) {
+              setRefLeft(e.activeLabel);
+            }
+          }}
+          onMouseMove={(e: any) => {
+            if (e) {
+              setRefRight(e.activeLabel);
+            }
+          }}
+          onMouseUp={() => {
+            setRefLeft(undefined);
+            setRefRight(undefined);
+            zoom();
+          }}>
+          <Tooltip
+            animationEasing="ease-out"
+            cursor={{ fill: theme.palette.text.primary, opacity: "0.15" }}
+            labelFormatter={timestamp => moment(timestamp).format("lll")}
+            content={(props: TooltipProps<any, any>) => (
+              <MaterialChartTooltip {...props} valueFormatter={value => `${value}`} />
+            )}
+          />
+          <XAxis
+            allowDataOverflow
+            dataKey="timestamp"
+            domain={xDomain}
+            name="Time"
+            tickFormatter={timestamp => {
+              let t = moment(timestamp);
+              return now.isSame(t, "day") ? t.format("LT") : t.format("MMM DD");
+            }}
+            scale="time"
+            type="number"
+            tick={{ fill: theme.palette.text.primary }}
+            stroke={theme.palette.divider}
+            interval="preserveStartEnd"
+          />
+          <YAxis
+            type="number"
+            domain={["auto", "auto"]}
+            label={{
+              value: "Mass Flow (kg/s)",
+              position: "insideLeft",
+              angle: -90,
+              fill: theme.palette.text.primary
+            }}
+          />
+          <Area dataKey={"value"} strokeWidth={3} />
+          <ReferenceLine
+            ifOverflow="extendDomain"
+            y={maxRef}
+            stroke="red"
+            strokeDasharray={"5 2"}
+          />
+          <ReferenceLine
+            ifOverflow="extendDomain"
+            y={minRef}
+            stroke="red"
+            strokeDasharray={"5 2"}
+          />
+          {refLeft && refRight ? (
+            <ReferenceArea x1={refLeft} x2={refRight} strokeOpacity={0.3} />
+          ) : null}
+        </AreaChart>
+      </ResponsiveContainer>
+    </React.Fragment>
+  );
+}