[add] adding a yLabel to the charts [add] adding units to the charts …

…tooltip [update] using granularity for tooltip timestamp

website/components/ui/charts/chart.tsx

@@ -1,4 +1,5 @@
-import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { Area, AreaChart, CartesianGrid, Label, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { ChartDataContextProvider, useChartData } from "contexts/chartData";
 import React, { useEffect, useState } from "react";
 import { generateColorID, generateColorURL } from "utils/color";
 
@@ -19,7 +20,8 @@ const granularities: Array<Granularity> = [
 ]
 
 export const Chart = ({ endpoint }: { endpoint: string }) => {
-    const [granularity, setGranularity] = useState<Granularity>(granularities[0]);
+    const { granularity, setGranularity, yLabel } = useChartData();
+    // const [granularity, setGranularity] = useState<Granularity>(granularities[0]);
     const [data, setData] = useState<{ services: string[], results: { __timestamp__: number, [key: string]: any }[] }>(null);
     const [resizeCounter, setResizeCounter] = useState<number>(0);
     const { servicesColor, addColor } = useServicesColor();
@@ -92,7 +94,9 @@ export const Chart = ({ endpoint }: { endpoint: string }) => {
                     const newDate = new Date(value * 1000)
                     return getDateWithGranularity(newDate, granularity, strings.labels.months)
                 }} />
-                <YAxis />
+                <YAxis>
+                    <Label value={yLabel} angle={-90} position="insideLeft" />
+                </YAxis>
                 <CartesianGrid strokeDasharray="3 3" />
                 <Tooltip content={CustomTooltip} />
                 {

website/components/ui/charts/tooltip.tsx

@@ -1,18 +1,20 @@
 import { getDateWithGranularity } from "utils/date";
+import { useChartData } from "contexts/chartData";
 import { useLanguage } from "contexts/language";
 import { useServicesColor } from "contexts/servicesColor";
 
 export const CustomTooltip = ({ active, payload, label }) => {
     const { servicesColor } = useServicesColor();
     const { strings } = useLanguage();
+    const { granularity, unit } = useChartData();
     if (active && payload && payload.length) {
         // console.log(payload)
         payload.sort((a: { value: number; }, b: { value: number; }) => {
             return b.value - a.value;
         });
         return (
             <div className="flex flex-col p-3 bg-white bg-opacity-75 rounded">
-                <span className="text-lg">{getDateWithGranularity(new Date(label * 1000), "day", strings.labels.months)}</span>
+                <span className="text-lg">{getDateWithGranularity(new Date(label * 1000), granularity, strings.labels.months)}</span>
                 <div className="flex flex-col">
                     {
                         payload.map((item, index) => {
@@ -21,6 +23,7 @@ export const CustomTooltip = ({ active, payload, label }) => {
                             }}>
                                 <span>{item.name}:</span>
                                 <span>{item.value}</span>
+                                <span>{unit}</span>
                             </div>
                         })
                     }

website/contexts/chartData.tsx

@@ -0,0 +1,37 @@
+import React, { createContext, useContext, useState } from "react";
+
+import { Granularity } from "types/granularity";
+
+export const ChartDataContext = createContext<{
+    granularity: Granularity
+    setGranularity: (granularity: Granularity) => any
+    unit: string
+    yLabel: string
+}>(undefined);
+
+export const useChartData = () => useContext(ChartDataContext);
+
+export const ChartDataContextConsumer = ChartDataContext.Consumer;
+
+export interface ChartDataContextProps {
+    unit: string
+    yLabel: string
+    children
+}
+
+export const ChartDataContextProvider = ({ children, unit, yLabel }: ChartDataContextProps) => {
+    const [granularity, setGranularity] = useState<Granularity>("hour");
+    const [chartUnit, setUnit] = useState<string>(unit);
+    const [chartYLabel, setYLabel] = useState<string>(yLabel);
+
+
+    // SETTING THE VALUES
+    return <ChartDataContext.Provider value={{
+        granularity,
+        setGranularity,
+        unit: chartUnit,
+        yLabel: chartYLabel
+    }}>
+        {children}
+    </ChartDataContext.Provider>
+}

website/pages/_app.tsx

@@ -3,15 +3,12 @@ import '../styles/globals.css'
 import type { AppProps } from 'next/app'
 import { LanguageContextProvider } from 'contexts/language'
 import { Layout } from 'components/common/layout'
-import { ServicesColorContextProvider } from 'contexts/servicesColor'
 
 function MyApp({ Component, pageProps }: AppProps) {
   return <LanguageContextProvider>
-    <ServicesColorContextProvider>
-      <Layout>
-        <Component {...pageProps} />
-      </Layout>
-    </ServicesColorContextProvider>
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
   </LanguageContextProvider>
 }
 

website/pages/stats.tsx

@@ -1,25 +1,33 @@
 import { Chart } from 'components/ui/charts/chart'
+import { ChartDataContextProvider } from 'contexts/chartData'
 import type { NextPage } from 'next'
 import { SEO } from 'components/common/seo'
+import { ServicesColorContextProvider } from 'contexts/servicesColor'
 import { useLanguage } from 'contexts/language'
 
 const Home: NextPage = () => {
     const { strings } = useLanguage();
 
-    return <div>
-        <SEO description='Use multiple services to translate your texts!' />
+    return <ServicesColorContextProvider>
+        <div>
+            <SEO description='Use multiple services to translate your texts!' />
 
-        <div className="flex items-center flex-col p-3 gap-5 w-screen">
-            <div className='p-5 w-full'>
-                <h2 className='text-xl font-bold'>{strings.heading.timeTakenForTranslation}</h2>
-                <Chart endpoint='/stats/timings' />
-            </div>
-            <div className='p-5 w-full'>
-                <h2 className='text-xl font-bold'>{strings.heading.errorsCount}</h2>
-                <Chart endpoint='/stats/errors' />
+            <div className="flex items-center flex-col p-3 gap-5 w-screen">
+                <div className='p-5 w-full'>
+                    <h2 className='text-xl font-bold'>{strings.heading.timeTakenForTranslation}</h2>
+                    <ChartDataContextProvider unit="ms" yLabel="Time (ms)">
+                        <Chart endpoint='/stats/timings' />
+                    </ChartDataContextProvider>
+                </div>
+                <div className='p-5 w-full'>
+                    <h2 className='text-xl font-bold'>{strings.heading.errorsCount}</h2>
+                    <ChartDataContextProvider unit="" yLabel="Count">
+                        <Chart endpoint='/stats/errors' />
+                    </ChartDataContextProvider>
+                </div>
             </div>
         </div>
-    </div>
+    </ServicesColorContextProvider>
 }
 
 export default Home