Merge pull request #33 from tinybirdco/feat/tremor-2.0.0

Migrate tremor to v2

Author: sdairs

dashboard/components/AnomalyDetection/AnomalyDetection.tsx

@@ -35,7 +35,7 @@ export default function AnomalyDetection() {
             <BarChart
               data={ipsWithMostCallsData ?? []}
               categories={['total']}
-              dataKey="ip_address"
+              index="ip_address"
               colors={['blue']}
             />
           )}
@@ -49,7 +49,7 @@ export default function AnomalyDetection() {
             <BarChart
               data={ipsExceedingAvgCallsPerMinuteData ?? []}
               categories={['total']}
-              dataKey="ip_address"
+              index="ip_address"
               colors={['blue']}
             />
           )}

dashboard/components/BasicStats/BasicStats.tsx

@@ -23,7 +23,7 @@ export default function BasicStatsContent() {
             <AreaChart
               data={functionCallsData ?? []}
               categories={['info', 'warn', 'error']}
-              dataKey="hour"
+              index="hour"
               colors={['blue', 'amber', 'red']}
             />
           )}

dashboard/components/Credentials/CredentialsForm.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, useRef, useState } from 'react'
+import { FormEvent, useState } from 'react'
 import { useRouter } from 'next/router'
 
 import { Button, SelectBox, SelectBoxItem, TextInput } from '@tremor/react'
@@ -14,7 +14,6 @@ const hostOptions: OptionType<HostType>[] = [
 
 export default function CredentialsForm() {
   const router = useRouter()
-  const formRef = useRef<HTMLFormElement>(null)
   const [hostType, setHostType] = useState<HostType>(hostOptions[0].value)
 
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
@@ -32,7 +31,6 @@ export default function CredentialsForm() {
 
   return (
     <form
-      ref={formRef}
       onSubmit={handleSubmit}
       className="flex flex-col justify-between h-full"
       aria-labelledby="credentials-title"
@@ -45,7 +43,6 @@ export default function CredentialsForm() {
           <TextInput
             name="token"
             placeholder="p.eyJ3kdsfk2395IjogImMzZTMwNDIxLTYwNzctNGZhMS1iMjY1LWQwM2JhZDIzZGRlOCIsICJpZCI6ICIwYmUzNTgzNi0zODAyLTQwMmUtOTUxZi0zOWFm"
-            marginTop="mt-0"
           />
           <p className="text-xs text-secondaryLight">
             Copy the token named dashboard generated with your web-analytics
@@ -57,7 +54,10 @@ export default function CredentialsForm() {
             <label className="block text-sm font-normal text-neutral-64 mb-1">
               Host
             </label>
-            <SelectBox value={hostType} onValueChange={setHostType}>
+            <SelectBox
+              value={hostType}
+              onValueChange={value => setHostType(value as HostType)}
+            >
               {hostOptions.map(({ text, value }) => (
                 <SelectBoxItem key={value} text={text} value={value} />
               ))}
@@ -75,10 +75,7 @@ export default function CredentialsForm() {
           </div>
         </div>
         <div className="flex flex-col items-end">
-          <Button
-            text="View dashboard"
-            handleClick={() => formRef.current?.requestSubmit()}
-          />
+          <Button type="submit">View dashboard</Button>
           <p className="text-xs text-neutral-64 mt-3">
             Not sure what to do next?{' '}
             <a

dashboard/components/ErrorModal.tsx

@@ -62,11 +62,9 @@ export default function ErrorModal() {
           </Modal.Description>
         </div>
         <div className="flex justify-end">
-          <Button
-            importance="secondary"
-            text="Close"
-            handleClick={handleClose}
-          />
+          <Button variant="secondary" onClick={handleClose}>
+            Close
+          </Button>
         </div>
       </Modal.Content>
     </Modal>

dashboard/components/ErrorStats/ErrorStats.tsx

@@ -52,7 +52,9 @@ export default function ErrorStats() {
           <div className="hidden sm:block">
             <TabList
               defaultValue="ErrorsFrequency"
-              onValueChange={setSelectedTab}
+              onValueChange={value =>
+                setSelectedTab(value as typeof selectedTab)
+              }
             >
               <Tab value="ErrorsFrequency" text="Error Frequency" />
               <Tab value="FunctionErrors" text="Function Errors" />
@@ -74,7 +76,7 @@ export default function ErrorStats() {
                 <AreaChart
                   data={errorFrequencyData ?? []}
                   categories={['total']}
-                  dataKey="hour"
+                  index="hour"
                   colors={['blue']}
                 />
               )}