Merge pull request #63 from govau/develop

Update dependencies (#62)

front-end/package.json

@@ -36,42 +36,42 @@
     "@gov.au/tags": "latest",
     "@gov.au/text-inputs": "latest",
     "@types/react-responsive": "^8.0.2",
-    "axios": "^0.19.2",
-    "gatsby": "^2.21.22",
-    "gatsby-image": "^2.3.1",
-    "gatsby-plugin-google-tagmanager": "^2.2.3",
-    "gatsby-plugin-lodash": "^3.3.1",
-    "gatsby-plugin-manifest": "^2.3.3",
-    "gatsby-plugin-offline": "^3.1.2",
-    "gatsby-plugin-react-helmet": "^3.2.1",
-    "gatsby-plugin-sass": "^2.2.1",
-    "gatsby-plugin-sharp": "^2.5.3",
-    "gatsby-plugin-typescript": "^2.3.1",
-    "gatsby-source-filesystem": "^2.2.2",
-    "gatsby-source-graphql": "^2.4.1",
-    "gatsby-transformer-remark": "^2.7.3",
-    "gatsby-transformer-sharp": "^2.4.3",
-    "lodash": "^4.17.15",
+    "axios": "^0.21.1",
+    "gatsby": "^2.30.1",
+    "gatsby-image": "^2.9.0",
+    "gatsby-plugin-google-tagmanager": "^2.9.0",
+    "gatsby-plugin-lodash": "^3.8.0",
+    "gatsby-plugin-manifest": "^2.10.0",
+    "gatsby-plugin-offline": "^3.8.0",
+    "gatsby-plugin-react-helmet": "^3.8.0",
+    "gatsby-plugin-sass": "^2.8.0",
+    "gatsby-plugin-sharp": "^2.12.0",
+    "gatsby-plugin-typescript": "^2.10.0",
+    "gatsby-source-filesystem": "^2.9.0",
+    "gatsby-source-graphql": "^2.12.0",
+    "gatsby-transformer-remark": "^2.14.0",
+    "gatsby-transformer-sharp": "^2.10.0",
+    "lodash": "^4.17.20",
     "node-sass": "^4.14.1",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "react-helmet": "^5.2.1",
-    "react-responsive": "^8.0.3",
+    "react-responsive": "^8.2.0",
     "recharts": "^1.8.5"
   },
   "devDependencies": {
-    "@types/recharts": "^1.8.9",
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.33.0",
-    "eslint": "^7.0.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-react": "^7.20.0",
-    "node-fetch": "^2.6.0",
+    "@types/recharts": "^1.8.18",
+    "@typescript-eslint/eslint-plugin": "^2.34.0",
+    "@typescript-eslint/parser": "^2.34.0",
+    "eslint": "^7.17.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-react": "^7.22.0",
+    "node-fetch": "^2.6.1",
     "prettier": "2.0.4",
-    "typescript": "^3.9.2"
+    "typescript": "^3.9.7"
   },
   "browserslist": [
     "last 2 versions",

front-end/src/components/blocks/dashboard.tsx

@@ -1,20 +1,20 @@
 import React, { useState } from "react";
-import UniqueUsersLineGraph from "./total-unique-users";
-import DeviceCategoryVisualisation from "./device-category";
+import { AUradio } from "../../auds/react/control-input";
+import { AUfieldset, AUlegend } from "../../auds/react/form";
 import BrowserMonthly from "./browser-monthly";
-import ScreenResVisualisation from "./screen-res";
 import DeviceBrandVisualisation from "./device-brand";
-import OperatingSysVersionVisualisation from "./operating-system-version";
-import OperatingSystemVisualisation from "./operating-system";
+import DeviceCategoryVisualisation from "./device-category";
 import HourlyViewsVisualisation from "./hourly-views";
-import { AUradio } from "../../auds/react/control-input";
-import { AUfieldset, AUlegend } from "../../auds/react/form";
+import OperatingSystemVisualisation from "./operating-system";
+import OperatingSysVersionVisualisation from "./operating-system-version";
+import ScreenResVisualisation from "./screen-res";
+import UniqueUsersLineGraph from "./total-unique-users";
 
 const AuFieldset: any = AUfieldset;
 
 interface Props {
   isTabletOrMobile: boolean;
-  chartView: boolean;
+  chartView?: boolean;
 }
 
 const AuRadio: any = AUradio;
@@ -42,7 +42,6 @@ const DashboardHomePage: React.FC<Props> = ({ isTabletOrMobile }) => {
                 id="radio-chart"
                 checked={state.chartView}
                 onChange={() => setstate(() => ({ chartView: true }))}
-                defaultChecked
               />
               <AuRadio
                 label="Table"

front-end/src/components/blocks/device-category.tsx

@@ -1,14 +1,13 @@
 /* eslint-disable react/display-name */
-import React, { useState, useLayoutEffect } from "react";
-import { useFetch } from "../hooks_helpers/use-fetch";
-import LineGraph from "../visualisations/line-chart";
+import React, { useLayoutEffect, useState } from "react";
 import { AxisDomain } from "recharts";
+import { Table } from "../hooks_helpers/table";
+import { TableCellRowSpanMonthly } from "../hooks_helpers/table-formatter";
+import { useFetch } from "../hooks_helpers/use-fetch";
 import AxisTickRotate from "../visualisations/formatters/angle-axis-tick";
-import PercentageFormatter from "../visualisations/formatters/percentage-formatter";
 import DeviceCategoryToolTip from "../visualisations/formatters/devices-tooltip";
-import LineLabel from "../visualisations/formatters/line-label";
-import { TableCellRowSpanMonthly } from "../hooks_helpers/table-formatter";
-import { Table } from "../hooks_helpers/table";
+import PercentageFormatter from "../visualisations/formatters/percentage-formatter";
+import LineGraph from "../visualisations/line-chart";
 
 interface Props {
   isTabletOrMobile: boolean;
@@ -112,7 +111,7 @@ const DeviceCategoryVisualisation: React.FC<Props> = ({
       : { top: 20, right: 10, bottom: 40, left: -10 },
     legend: true,
     CustomToolTip: DeviceCategoryToolTip,
-    CustomLabel: LineLabel,
+    // CustomLabel: LineLabel,
   };
 
   const renderView = () => {

front-end/src/components/navigation/header.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { useStaticQuery, graphql } from "gatsby";
 import AUheader, { AUheaderBrand } from "../../auds/react/header";
 
 interface Props {
@@ -10,18 +9,6 @@ const AUHeader: any = AUheader;
 const Brand: any = AUheaderBrand;
 
 const Header: React.FC<Props> = ({ siteTitle }) => {
-  const data = useStaticQuery(graphql`
-    query {
-      placeholderImage: file(relativePath: { eq: "header-logo-agov.png" }) {
-        childImageSharp {
-          fluid {
-            src
-          }
-        }
-      }
-    }
-  `);
-
   return (
     <>
       <AUHeader dark>
@@ -32,7 +19,7 @@ const Header: React.FC<Props> = ({ siteTitle }) => {
                 title={siteTitle}
                 subline="The analytics dashboard for gov.au services"
                 link="/"
-                brandImage={data.placeholderImage.childImageSharp.fluid.src}
+                brandImage={"../../header-logo-agov.png"}
                 brandImageAlt="The Australian Government Coat of Arms"
               />
             </div>

front-end/src/pages/index.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { graphql, useStaticQuery } from "gatsby";
 import React from "react";
-import SEO from "../components/seo";
-import DefaultLayout from "../components/layouts/default-layout";
-import { useStaticQuery, graphql } from "gatsby";
-import Section from "../components/layouts/section";
 import { useMediaQuery } from "react-responsive";
-import Hero from "../components/layouts/hero";
 import DashboardHomePage from "../components/blocks/dashboard";
+import DefaultLayout from "../components/layouts/default-layout";
+import Hero from "../components/layouts/hero";
+import Section from "../components/layouts/section";
+import SEO from "../components/seo";
 
 const IndexPage = () => {
   //get MD content