From 9e5c7ff7a8e7ab6db1d95a7199a4d060b8bcb6e7 Mon Sep 17 00:00:00 2001 From: Felipe Cadavid Date: Fri, 21 Apr 2023 04:40:31 -0500 Subject: [PATCH 1/7] fix: fixes to TimeSeries component --- packages/react/time-series/src/TimeSeries.tsx | 27 ++++++++++++++++--- packages/react/time-series/src/utils.ts | 4 ++- 2 files changed, 26 insertions(+), 5 deletions(-) diff --git a/packages/react/time-series/src/TimeSeries.tsx b/packages/react/time-series/src/TimeSeries.tsx index 1f767ec4..7c65c15b 100644 --- a/packages/react/time-series/src/TimeSeries.tsx +++ b/packages/react/time-series/src/TimeSeries.tsx @@ -129,6 +129,8 @@ export function TimeSeries(props: TimeSeriesProps) { const idRef = React.useRef(idCounter++) const id = `time-series-${idRef.current}` + const filtersString = JSON.stringify(query?.filters || []) + /** * The html node where the chart will render */ @@ -257,15 +259,22 @@ export function TimeSeries(props: TimeSeriesProps) { try { setIsLoading(true) + const filters = JSON.parse(filtersString) + const response = await request( PROPEL_GRAPHQL_API_ENDPOINT, TimeSeriesDocument, { uniqueName: query?.metric, timeSeriesInput: { - timeRange: query?.timeRange, + timeRange: { + relative: query?.timeRange?.relative || null, + n: query?.timeRange?.n || null, + start: query?.timeRange?.start || null, + stop: query?.timeRange?.stop || null + }, granularity, - filters: query?.filters, + filters: filters, propeller: query?.propeller } }, @@ -285,7 +294,17 @@ export function TimeSeries(props: TimeSeriesProps) { } finally { setIsLoading(false) } - }, [granularity, query?.accessToken, query?.filters, query?.metric, query?.propeller, query?.timeRange]) + }, [ + granularity, + query?.accessToken, + filtersString, + query?.metric, + query?.propeller, + query?.timeRange?.n, + query?.timeRange?.relative, + query?.timeRange?.start, + query?.timeRange?.stop + ]) React.useEffect(() => { function handlePropsMismatch() { @@ -323,7 +342,7 @@ export function TimeSeries(props: TimeSeriesProps) { if (!isStatic) { fetchChartData() } - }, [isStatic, query?.timeRange, query?.filters, query?.propeller, query?.granularity, query?.accessToken, fetchData]) + }, [isStatic, fetchData]) React.useEffect(() => { if (isStatic) { diff --git a/packages/react/time-series/src/utils.ts b/packages/react/time-series/src/utils.ts index e08b079e..4158e766 100644 --- a/packages/react/time-series/src/utils.ts +++ b/packages/react/time-series/src/utils.ts @@ -9,7 +9,8 @@ import { ScriptableAndArray, ScriptableContext, ScaleOptions, - TimeUnit + TimeUnit, + FontSpec } from 'chart.js' import { Maybe, RelativeTimeRange, TimeRangeInput, TimeSeriesGranularity } from '@propeldata/ui-kit-graphql' @@ -115,6 +116,7 @@ export function useSetupDefaultStyles(styles?: Styles) { } Chart.defaults.color = styles?.font?.color || defaultStyles.font.color + Chart.defaults.font = font as Partial Chart.defaults.elements.point.pointStyle = pointStyle === undefined ? 'circle' : pointStyle Chart.defaults.elements.point.radius = styles?.point?.radius || defaultStyles.point.radius From 14893917ea67a8d1cf06bf508f7bba8f52341538 Mon Sep 17 00:00:00 2001 From: Felipe Cadavid Date: Fri, 21 Apr 2023 05:10:21 -0500 Subject: [PATCH 2/7] fix: Leaderboard fixes --- .../react/leaderboard/src/Leaderboard.tsx | 44 ++++++++++++------- 1 file changed, 27 insertions(+), 17 deletions(-) diff --git a/packages/react/leaderboard/src/Leaderboard.tsx b/packages/react/leaderboard/src/Leaderboard.tsx index 69ba3b5b..ef7ce46d 100644 --- a/packages/react/leaderboard/src/Leaderboard.tsx +++ b/packages/react/leaderboard/src/Leaderboard.tsx @@ -88,6 +88,9 @@ export function Leaderboard(props: LeaderboardProps) { const idRef = React.useRef(idCounter++) const id = `leaderboard-${idRef.current}` + const filtersString = JSON.stringify(query?.filters || []) + const dimensionsString = JSON.stringify(query?.dimensions || []) + /** * The html node where the chart will render */ @@ -196,18 +199,26 @@ export function Leaderboard(props: LeaderboardProps) { try { setIsLoading(true) + const dimensions = JSON.parse(dimensionsString) + const filters = JSON.parse(filtersString) + const response = await request( PROPEL_GRAPHQL_API_ENDPOINT, LeaderboardDocument, { uniqueName: query?.metric, leaderboardInput: { - timeRange: query?.timeRange, - filters: query?.filters, + filters, propeller: query?.propeller, sort: query?.sort, rowLimit: query?.rowLimit, - dimensions: query?.dimensions + dimensions, + timeRange: { + relative: query?.timeRange?.relative || null, + n: query?.timeRange?.n || null, + start: query?.timeRange?.start || null, + stop: query?.timeRange?.stop || null + } } }, { @@ -228,13 +239,16 @@ export function Leaderboard(props: LeaderboardProps) { } }, [ query?.accessToken, - query?.dimensions, - query?.filters, + dimensionsString, + filtersString, query?.metric, query?.propeller, query?.rowLimit, query?.sort, - query?.timeRange + query?.timeRange?.n, + query?.timeRange?.relative, + query?.timeRange?.start, + query?.timeRange?.stop ]) React.useEffect(() => { @@ -275,17 +289,7 @@ export function Leaderboard(props: LeaderboardProps) { if (!isStatic) { fetchChartData() } - }, [ - isStatic, - query?.timeRange, - query?.filters, - query?.propeller, - query?.sort, - query?.rowLimit, - query?.dimensions, - query?.rowLimit, - fetchData - ]) + }, [isStatic, fetchData]) React.useEffect(() => { if (isStatic) { @@ -317,6 +321,12 @@ export function Leaderboard(props: LeaderboardProps) { } }, []) + React.useEffect(() => { + if (variant === 'table') { + destroyChart() + } + }, [variant]) + if (isLoading || loading) { destroyChart() return From 3f4ad320640413bfd9cf1768af4aac37368ddf6d Mon Sep 17 00:00:00 2001 From: Felipe Cadavid Date: Fri, 21 Apr 2023 05:33:07 -0500 Subject: [PATCH 3/7] fix: counter fixes --- packages/react/counter/src/Counter.tsx | 28 +++++++++++++++++++++----- packages/react/counter/src/utils.ts | 6 +++++- 2 files changed, 28 insertions(+), 6 deletions(-) diff --git a/packages/react/counter/src/Counter.tsx b/packages/react/counter/src/Counter.tsx index 54fcf3cd..1c96a5ee 100644 --- a/packages/react/counter/src/Counter.tsx +++ b/packages/react/counter/src/Counter.tsx @@ -55,6 +55,8 @@ export function Counter(props: CounterProps) { const [hasError, setHasError] = React.useState(false) const [isLoading, setIsLoading] = React.useState(false) + const filtersString = JSON.stringify(query?.filters || []) + /** * Fetches the counter data * when the user doesn't provide @@ -64,14 +66,21 @@ export function Counter(props: CounterProps) { try { setIsLoading(true) + const filters = JSON.parse(filtersString) + const response = await request( PROPEL_GRAPHQL_API_ENDPOINT, CounterDocument, { uniqueName: query?.metric, counterInput: { - timeRange: query?.timeRange, - filters: query?.filters, + timeRange: { + relative: query?.timeRange?.relative || null, + n: query?.timeRange?.n || null, + start: query?.timeRange?.start || null, + stop: query?.timeRange?.stop || null + }, + filters, propeller: query?.propeller } }, @@ -90,7 +99,16 @@ export function Counter(props: CounterProps) { } finally { setIsLoading(false) } - }, [query]) + }, [ + query?.metric, + query?.accessToken, + query?.timeRange?.n, + query?.timeRange?.relative, + query?.timeRange?.start, + query?.timeRange?.stop, + query?.propeller, + filtersString + ]) React.useEffect(() => { function handlePropsMismatch() { @@ -123,9 +141,9 @@ export function Counter(props: CounterProps) { const fetchedValue = await fetchData() - if (!fetchedValue) { + if (typeof fetchedValue === 'undefined') { setHasError(true) - console.error(`QueryError: Your metric ${query?.metric} returned undefined or a \`null\` value.`) + console.error(`QueryError: Your metric ${query?.metric} returned undefined.`) return } diff --git a/packages/react/counter/src/utils.ts b/packages/react/counter/src/utils.ts index 63ea74a6..9129e2b0 100644 --- a/packages/react/counter/src/utils.ts +++ b/packages/react/counter/src/utils.ts @@ -7,10 +7,14 @@ const getValue = (options: getValueOptions) => { const { value, localize } = options const isInteger = Number.isInteger(parseFloat(value)) + const isNull = value === null if (isInteger) { return localize ? parseInt(value).toLocaleString() : parseInt(value) } + if (isNull) { + return '-' + } return localize ? parseFloat(parseFloat(value).toFixed(2).toLocaleString()).toLocaleString() @@ -25,7 +29,7 @@ export const getValueWithPrefixAndSufix = (params: { }) => { const { prefix, value, sufix, localize } = params - if (!value) return + if (typeof value === 'undefined') return return (prefix ? prefix : '') + getValue({ value, localize }) + (sufix ? sufix : '') } From ac9f929e2d5f4bcf0766bc1f7e748a6a7fabb66b Mon Sep 17 00:00:00 2001 From: Felipe Cadavid Date: Fri, 21 Apr 2023 06:21:15 -0500 Subject: [PATCH 4/7] fix: static mode bugs --- packages/react/counter/src/Counter.tsx | 17 +++++++++-------- packages/react/time-series/src/utils.ts | 1 - 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/react/counter/src/Counter.tsx b/packages/react/counter/src/Counter.tsx index 1c96a5ee..8dcc4c10 100644 --- a/packages/react/counter/src/Counter.tsx +++ b/packages/react/counter/src/Counter.tsx @@ -136,18 +136,19 @@ export function Counter(props: CounterProps) { async function setup() { if (isStatic && value) { setDataValue(value) - return } - const fetchedValue = await fetchData() + if (!isStatic) { + const fetchedValue = await fetchData() - if (typeof fetchedValue === 'undefined') { - setHasError(true) - console.error(`QueryError: Your metric ${query?.metric} returned undefined.`) - return - } + if (typeof fetchedValue === 'undefined') { + setHasError(true) + console.error(`QueryError: Your metric ${query?.metric} returned undefined.`) + return + } - setDataValue(fetchedValue) + setDataValue(fetchedValue) + } } setup() diff --git a/packages/react/time-series/src/utils.ts b/packages/react/time-series/src/utils.ts index 4158e766..3d4f32b7 100644 --- a/packages/react/time-series/src/utils.ts +++ b/packages/react/time-series/src/utils.ts @@ -116,7 +116,6 @@ export function useSetupDefaultStyles(styles?: Styles) { } Chart.defaults.color = styles?.font?.color || defaultStyles.font.color - Chart.defaults.font = font as Partial Chart.defaults.elements.point.pointStyle = pointStyle === undefined ? 'circle' : pointStyle Chart.defaults.elements.point.radius = styles?.point?.radius || defaultStyles.point.radius From 3ba2c2229ce1d60de6b04e97be02dcc7b42912f3 Mon Sep 17 00:00:00 2001 From: Felipe Cadavid Date: Fri, 21 Apr 2023 06:34:48 -0500 Subject: [PATCH 5/7] refactor: remove unnecessary import --- packages/react/time-series/src/utils.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react/time-series/src/utils.ts b/packages/react/time-series/src/utils.ts index 3d4f32b7..e08b079e 100644 --- a/packages/react/time-series/src/utils.ts +++ b/packages/react/time-series/src/utils.ts @@ -9,8 +9,7 @@ import { ScriptableAndArray, ScriptableContext, ScaleOptions, - TimeUnit, - FontSpec + TimeUnit } from 'chart.js' import { Maybe, RelativeTimeRange, TimeRangeInput, TimeSeriesGranularity } from '@propeldata/ui-kit-graphql' From b5febb91bde99fb0b6965557d897066a1f3a3d26 Mon Sep 17 00:00:00 2001 From: Felipe Cadavid Date: Tue, 13 Jun 2023 12:03:25 -0500 Subject: [PATCH 6/7] refactor: use ?? + remove unnecessary typeof --- packages/react/counter/src/Counter.tsx | 10 +++++----- packages/react/counter/src/utils.ts | 2 +- packages/react/leaderboard/src/Leaderboard.tsx | 8 ++++---- packages/react/time-series/src/TimeSeries.tsx | 8 ++++---- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/react/counter/src/Counter.tsx b/packages/react/counter/src/Counter.tsx index 8dcc4c10..08d10819 100644 --- a/packages/react/counter/src/Counter.tsx +++ b/packages/react/counter/src/Counter.tsx @@ -75,10 +75,10 @@ export function Counter(props: CounterProps) { uniqueName: query?.metric, counterInput: { timeRange: { - relative: query?.timeRange?.relative || null, - n: query?.timeRange?.n || null, - start: query?.timeRange?.start || null, - stop: query?.timeRange?.stop || null + relative: query?.timeRange?.relative ?? null, + n: query?.timeRange?.n ?? null, + start: query?.timeRange?.start ?? null, + stop: query?.timeRange?.stop ?? null }, filters, propeller: query?.propeller @@ -141,7 +141,7 @@ export function Counter(props: CounterProps) { if (!isStatic) { const fetchedValue = await fetchData() - if (typeof fetchedValue === 'undefined') { + if (fetchedValue === undefined) { setHasError(true) console.error(`QueryError: Your metric ${query?.metric} returned undefined.`) return diff --git a/packages/react/counter/src/utils.ts b/packages/react/counter/src/utils.ts index 9129e2b0..1a1b0b16 100644 --- a/packages/react/counter/src/utils.ts +++ b/packages/react/counter/src/utils.ts @@ -29,7 +29,7 @@ export const getValueWithPrefixAndSufix = (params: { }) => { const { prefix, value, sufix, localize } = params - if (typeof value === 'undefined') return + if (value === undefined) return return (prefix ? prefix : '') + getValue({ value, localize }) + (sufix ? sufix : '') } diff --git a/packages/react/leaderboard/src/Leaderboard.tsx b/packages/react/leaderboard/src/Leaderboard.tsx index ef7ce46d..be34d898 100644 --- a/packages/react/leaderboard/src/Leaderboard.tsx +++ b/packages/react/leaderboard/src/Leaderboard.tsx @@ -214,10 +214,10 @@ export function Leaderboard(props: LeaderboardProps) { rowLimit: query?.rowLimit, dimensions, timeRange: { - relative: query?.timeRange?.relative || null, - n: query?.timeRange?.n || null, - start: query?.timeRange?.start || null, - stop: query?.timeRange?.stop || null + relative: query?.timeRange?.relative ?? null, + n: query?.timeRange?.n ?? null, + start: query?.timeRange?.start ?? null, + stop: query?.timeRange?.stop ?? null } } }, diff --git a/packages/react/time-series/src/TimeSeries.tsx b/packages/react/time-series/src/TimeSeries.tsx index 7c65c15b..4037b934 100644 --- a/packages/react/time-series/src/TimeSeries.tsx +++ b/packages/react/time-series/src/TimeSeries.tsx @@ -268,10 +268,10 @@ export function TimeSeries(props: TimeSeriesProps) { uniqueName: query?.metric, timeSeriesInput: { timeRange: { - relative: query?.timeRange?.relative || null, - n: query?.timeRange?.n || null, - start: query?.timeRange?.start || null, - stop: query?.timeRange?.stop || null + relative: query?.timeRange?.relative ?? null, + n: query?.timeRange?.n ?? null, + start: query?.timeRange?.start ?? null, + stop: query?.timeRange?.stop ?? null }, granularity, filters: filters, From 9254f09d6a81ad702079b6b33d56f7ab085fb4c6 Mon Sep 17 00:00:00 2001 From: Felipe Cadavid Date: Tue, 13 Jun 2023 12:09:35 -0500 Subject: [PATCH 7/7] refactor: comment all console.error --- packages/core/components/src/ErrorBoundary.tsx | 2 +- packages/core/release/src/index.ts | 2 +- packages/react/counter/src/Counter.tsx | 10 +++++----- packages/react/leaderboard/src/Leaderboard.tsx | 12 ++++++------ packages/react/time-series/src/TimeSeries.tsx | 10 +++++----- 5 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/core/components/src/ErrorBoundary.tsx b/packages/core/components/src/ErrorBoundary.tsx index f984f50b..789b5bb3 100644 --- a/packages/core/components/src/ErrorBoundary.tsx +++ b/packages/core/components/src/ErrorBoundary.tsx @@ -22,7 +22,7 @@ export class ErrorBoundary extends Component { } componentDidCatch(error: Error, errorInfo: React.ErrorInfo) { - console.error(error, errorInfo) + // console.error(error, errorInfo) we will set logs as a feature later } render() { diff --git a/packages/core/release/src/index.ts b/packages/core/release/src/index.ts index 015f13cf..dd2202ed 100644 --- a/packages/core/release/src/index.ts +++ b/packages/core/release/src/index.ts @@ -34,7 +34,7 @@ async function main(): Promise { } } } catch (error) { - console.error(error) + // console.error(error) we will set logs as a feature later process.exit(1) } } diff --git a/packages/react/counter/src/Counter.tsx b/packages/react/counter/src/Counter.tsx index 08d10819..6fbc45da 100644 --- a/packages/react/counter/src/Counter.tsx +++ b/packages/react/counter/src/Counter.tsx @@ -113,15 +113,15 @@ export function Counter(props: CounterProps) { React.useEffect(() => { function handlePropsMismatch() { if (isStatic && !value) { - console.error('InvalidPropsError: You must pass either `value` or `query` props') + // console.error('InvalidPropsError: You must pass either `value` or `query` props') we will set logs as a feature later setHasError(true) return } if (!isStatic && (!query?.accessToken || !query?.metric || !query?.timeRange)) { - console.error( - 'InvalidPropsError: When opting for fetching data you must pass at least `accessToken`, `metric` and `timeRange` in the `query` prop' - ) + // console.error( + // 'InvalidPropsError: When opting for fetching data you must pass at least `accessToken`, `metric` and `timeRange` in the `query` prop' + // ) we will set logs as a feature later setHasError(true) return } @@ -143,7 +143,7 @@ export function Counter(props: CounterProps) { if (fetchedValue === undefined) { setHasError(true) - console.error(`QueryError: Your metric ${query?.metric} returned undefined.`) + // console.error(`QueryError: Your metric ${query?.metric} returned undefined.`) we will set logs as a feature later return } diff --git a/packages/react/leaderboard/src/Leaderboard.tsx b/packages/react/leaderboard/src/Leaderboard.tsx index be34d898..89e08c68 100644 --- a/packages/react/leaderboard/src/Leaderboard.tsx +++ b/packages/react/leaderboard/src/Leaderboard.tsx @@ -254,13 +254,13 @@ export function Leaderboard(props: LeaderboardProps) { React.useEffect(() => { function handlePropsMismatch() { if (isStatic && !headers && !rows) { - console.error('InvalidPropsError: You must pass either `headers` and `rows` or `query` props') + // console.error('InvalidPropsError: You must pass either `headers` and `rows` or `query` props') we will set logs as a feature later setHasError(true) return } if (isStatic && (!headers || !rows)) { - console.error('InvalidPropsError: When passing the data via props you must pass both `headers` and `rows`') + // console.error('InvalidPropsError: When passing the data via props you must pass both `headers` and `rows`') we will set logs as a feature later setHasError(true) return } @@ -268,9 +268,9 @@ export function Leaderboard(props: LeaderboardProps) { !isStatic && (!query.accessToken || !query.metric || !query.timeRange || !query.dimensions || !query.rowLimit) ) { - console.error( - 'InvalidPropsError: When opting for fetching data you must pass at least `accessToken`, `metric`, `dimensions`, `rowLimit` and `timeRange` in the `query` prop' - ) + // console.error( + // 'InvalidPropsError: When opting for fetching data you must pass at least `accessToken`, `metric`, `dimensions`, `rowLimit` and `timeRange` in the `query` prop' + // ) we will set logs as a feature later setHasError(true) return } @@ -306,7 +306,7 @@ export function Leaderboard(props: LeaderboardProps) { React.useEffect(() => { try { if (variant !== 'bar' && variant !== 'table') { - console.error('InvalidPropsError: `variant` prop must be either `bar` or `table`') + // console.error('InvalidPropsError: `variant` prop must be either `bar` or `table`') we will set logs as a feature later throw new Error('InvalidPropsError') } setHasError(false) diff --git a/packages/react/time-series/src/TimeSeries.tsx b/packages/react/time-series/src/TimeSeries.tsx index 4037b934..0ed280ef 100644 --- a/packages/react/time-series/src/TimeSeries.tsx +++ b/packages/react/time-series/src/TimeSeries.tsx @@ -309,20 +309,20 @@ export function TimeSeries(props: TimeSeriesProps) { React.useEffect(() => { function handlePropsMismatch() { if (isStatic && !labels && !values) { - console.error('InvalidPropsError: You must pass either `labels` and `values` or `query` props') + // console.error('InvalidPropsError: You must pass either `labels` and `values` or `query` props') we will set logs as a feature later setHasError(true) return } if (isStatic && (!labels || !values)) { - console.error('InvalidPropsError: When passing the data via props you must pass both `labels` and `values`') + // console.error('InvalidPropsError: When passing the data via props you must pass both `labels` and `values`') we will set logs as a feature later setHasError(true) return } if (!isStatic && (!query.accessToken || !query.metric || !query.timeRange)) { - console.error( - 'InvalidPropsError: When opting for fetching data you must pass at least `accessToken`, `metric` and `timeRange` in the `query` prop' - ) + // console.error( + // 'InvalidPropsError: When opting for fetching data you must pass at least `accessToken`, `metric` and `timeRange` in the `query` prop' + // ) we will set logs as a feature later setHasError(true) return }