chore(ui-kit, react examples): implement PR comments

propeldata · Feb 27, 2024 · 6bae7f9 · 6bae7f9
1 parent 0bf76ed
commit 6bae7f9
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 11 deletions.
diff --git a/app/examples/react-16/src/App.js b/app/examples/react-16/src/App.js
@@ -15,5 +15,5 @@ async function fetchToken() {
 }
 
 export default function App() {
-  return <Dashboard fetchToken={fetchToken} reactVersion="16" envs={process.env} />
+  return <Dashboard fetchToken={fetchToken} envs={process.env} />
 }
diff --git a/app/examples/react-17/src/App.js b/app/examples/react-17/src/App.js
@@ -15,5 +15,5 @@ async function fetchToken() {
 }
 
 export default function App() {
-  return <Dashboard fetchToken={fetchToken} reactVersion="17" envs={process.env} />
+  return <Dashboard fetchToken={fetchToken} envs={process.env} />
 }
diff --git a/app/examples/react-18/src/App.jsx b/app/examples/react-18/src/App.jsx
@@ -15,5 +15,5 @@ async function fetchToken() {
 }
 
 export default function App() {
-  return <Dashboard fetchToken={fetchToken} reactVersion="18" envs={process.env} />
+  return <Dashboard fetchToken={fetchToken} envs={process.env} />
 }
diff --git a/packages/examples/dashboard/src/components/Dashboard/Dashboard.tsx b/packages/examples/dashboard/src/components/Dashboard/Dashboard.tsx
@@ -28,10 +28,9 @@ const GlobalStyles = () => {
 
 interface DashboardProps extends DashboardCommonProps {
   fetchToken: () => Promise<string>
-  reactVersion: string
 }
 
-export const Dashboard = ({ fetchToken, reactVersion, envs }: DashboardProps) => {
+export const Dashboard = ({ fetchToken, envs }: DashboardProps) => {
   const [theme, setTheme] = React.useState<DefaultThemes>('lightTheme')
   return (
     <AccessTokenProvider fetchToken={fetchToken}>
@@ -40,7 +39,7 @@ export const Dashboard = ({ fetchToken, reactVersion, envs }: DashboardProps) =>
           <GlobalStyles />
           <main style={{ color: 'var(--propel-text-secondary)', backgroundColor: 'var(--propel-bg-secondary)' }}>
             <h1 className="px-6 py-3 text-3xl">
-              React {reactVersion} Testing App
+              React {React.version} Testing App
               <button className="m-3" onClick={() => setTheme(theme === 'lightTheme' ? 'darkTheme' : 'lightTheme')}>
                 {theme === 'lightTheme' ? '🌚' : '🌞'}
               </button>

diff --git a/packages/ui-kit/src/components/Counter/Counter.test.tsx b/packages/ui-kit/src/components/Counter/Counter.test.tsx
@@ -12,7 +12,17 @@ const mockData = {
 
 const handlers = [
   mockCounterQuery((req, res, ctx) => {
-    const { metricName } = req.variables.counterInput
+    const { metricName, timeZone } = req.variables.counterInput
+
+    if (metricName === 'test-time-zone') {
+      return res(
+        ctx.data({
+          counter: {
+            value: timeZone
+          }
+        })
+      )
+    }
 
     if (metricName === 'lack-of-data') {
       return res(
@@ -157,6 +167,37 @@ describe('Counter', () => {
     await dom.findByText('true')
   })
 
+  it('Should pass timeZone to the query', async () => {
+    dom = render(
+      <Counter
+        timeZone="Europe/Rome"
+        query={{
+          metric: 'test-time-zone',
+          accessToken: 'test-token',
+          timeRange: { relative: RelativeTimeRange.LastNDays, n: 30 }
+        }}
+      />
+    )
+
+    await dom.findByText('Europe/Rome')
+  })
+
+  it('Should pass query.timeZone to the query', async () => {
+    dom = render(
+      <Counter
+        timeZone="Europe/Rome"
+        query={{
+          metric: 'test-time-zone',
+          timeZone: 'Europe/Berlin',
+          accessToken: 'test-token',
+          timeRange: { relative: RelativeTimeRange.LastNDays, n: 30 }
+        }}
+      />
+    )
+
+    await dom.findByText('Europe/Berlin')
+  })
+
   it('Should NOT fetch data in static mode', async () => {
     mockServer.events.on('request:start', async () => {
       throw new Error('Should not fetch data in static mode')

diff --git a/packages/ui-kit/src/components/Leaderboard/Leaderboard.tsx b/packages/ui-kit/src/components/Leaderboard/Leaderboard.tsx
@@ -202,7 +202,7 @@ export const LeaderboardComponent = React.forwardRef<HTMLDivElement, Leaderboard
             chart.data = { ...config.data }
           }
 
-          chart.update()
+          chart.update('none')
           return
         }
 

diff --git a/packages/ui-kit/src/components/PieChart/PieChart.tsx b/packages/ui-kit/src/components/PieChart/PieChart.tsx
@@ -235,7 +235,6 @@ export const PieChartComponent = React.forwardRef<HTMLDivElement, PieChartProps>
         if (chartRef.current) {
           const chart = chartRef.current
 
-          // const newOptions =
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore
           chart.options = { ...config.options }
@@ -244,7 +243,7 @@ export const PieChartComponent = React.forwardRef<HTMLDivElement, PieChartProps>
             chart.data = { ...config.data }
           }
 
-          chart.update()
+          chart.update('none')
           return
         }
 

diff --git a/packages/ui-kit/src/components/TimeSeries/TimeSeries.tsx b/packages/ui-kit/src/components/TimeSeries/TimeSeries.tsx
@@ -246,7 +246,7 @@ export const TimeSeriesComponent = React.forwardRef<HTMLDivElement, TimeSeriesPr
             chart.data = { ...config.data }
           }
 
-          chart.update()
+          chart.update('none')
           return
         }