From 55e81fc15573e956fdcc052e2555c175e4da72ba Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Sat, 19 Apr 2025 00:14:26 -0600 Subject: [PATCH] fixed broken mounting hook --- .../ui/charts/BusterChartJS/BusterChartJS.tsx | 8 +-- .../BusterChartJS/BusterChartJSComponent.tsx | 8 +-- .../ui/charts/BusterChartJS/ChartJSTheme.ts | 5 +- .../core/plugins/chartjs-plugin-mounted.tsx | 11 +++- .../plugins/chartjs-scale-tick-duplicate.ts | 64 +++++++++---------- .../hooks/useOptions/useOptions.tsx | 2 +- .../hooks/useOptions/useXAxis/useXAxis.ts | 19 +----- .../ui/grid/BusterResizeableGrid.tsx | 2 +- .../BusterInfiniteList/BusterInfiniteList.tsx | 2 +- .../components/ui/segmented/AppSegmented.tsx | 9 +-- .../DashboardContentController.tsx | 15 +---- 11 files changed, 57 insertions(+), 88 deletions(-) diff --git a/web/src/components/ui/charts/BusterChartJS/BusterChartJS.tsx b/web/src/components/ui/charts/BusterChartJS/BusterChartJS.tsx index d98cf520c..c290758e2 100644 --- a/web/src/components/ui/charts/BusterChartJS/BusterChartJS.tsx +++ b/web/src/components/ui/charts/BusterChartJS/BusterChartJS.tsx @@ -2,7 +2,7 @@ import './ChartJSTheme'; -import React, { useRef, useState } from 'react'; +import React, { useCallback, useRef, useState } from 'react'; import { DEFAULT_CHART_CONFIG, DEFAULT_COLUMN_METADATA } from '@/api/asset_interfaces/metric'; import { BusterChartJSLegendWrapper } from './BusterChartJSLegendWrapper'; import { ChartJSOrUndefined } from './core/types'; @@ -37,9 +37,9 @@ export const BusterChartJS: React.FC = ({ onChartMounted?.(); }); - const onInitialAnimationEndPreflight = useMemoizedFn(() => { - onInitialAnimationEnd?.(); - }); + const onInitialAnimationEndPreflight = useCallback(() => { + if (chartRef.current?.attached) onInitialAnimationEnd?.(); + }, [onInitialAnimationEnd]); return ( { - console.log('chartOptions', options); - }); - return ( { chartMounted?: ChartMountedPluginOptions; } + + interface Chart { + $mountedPlugin: boolean; + } } export const ChartMountedPlugin: Plugin = { id: 'chartMounted', afterInit: (chart, args, options) => { + if (!chart || !options) return; options?.onMounted?.(chart); + chart.$mountedPlugin = true; }, afterRender: (chart, args, options) => { + if (chart.$mountedPlugin || !chart || !options) return; const hasLabels = !!chart.data?.labels?.length; - if (hasLabels) { + if (hasLabels && options?.onInitialAnimationEnd) { options?.onInitialAnimationEnd?.(chart); + chart.$mountedPlugin = true; } }, - defaults: { onMounted: () => {}, onInitialAnimationEnd: () => {} diff --git a/web/src/components/ui/charts/BusterChartJS/core/plugins/chartjs-scale-tick-duplicate.ts b/web/src/components/ui/charts/BusterChartJS/core/plugins/chartjs-scale-tick-duplicate.ts index 19aadce5b..cc968e609 100644 --- a/web/src/components/ui/charts/BusterChartJS/core/plugins/chartjs-scale-tick-duplicate.ts +++ b/web/src/components/ui/charts/BusterChartJS/core/plugins/chartjs-scale-tick-duplicate.ts @@ -21,43 +21,43 @@ declare module 'chart.js' { } } -// const originalBuildTicks = TimeScale.prototype.buildTicks; +const originalBuildTicks = TimeScale.prototype.buildTicks; // // // Override buildTicks -// TimeScale.prototype.buildTicks = function () { -// // Generate default ticks -// const defaultTicks = originalBuildTicks.call(this); +TimeScale.prototype.buildTicks = function () { + // Generate default ticks + const defaultTicks = originalBuildTicks.call(this); -// // Access tick callback and display format -// const tickCallback = this.options.ticks?.callback; -// const displayFormat = -// this.options.time?.displayFormats?.[this._unit] || -// this.options.time?.displayFormats?.month || -// 'MMM'; -// const format = this._adapter.format.bind(this._adapter); + // Access tick callback and display format + const tickCallback = this.options.ticks?.callback; + const displayFormat = + this.options.time?.displayFormats?.[this._unit] || + this.options.time?.displayFormats?.month || + 'MMM'; + const format = this._adapter.format.bind(this._adapter); -// // Deduplicate ticks -// const seen = new Set(); -// const uniqueTicks = []; + // Deduplicate ticks + const seen = new Set(); + const uniqueTicks = []; -// for (let i = 0; i < defaultTicks.length; i++) { -// const tick = defaultTicks[i]; -// let label = tickCallback -// ? tickCallback.call(this, tick.value, i, defaultTicks) -// : format(tick.value, displayFormat); -// const stringLabel = String(label ?? ''); + for (let i = 0; i < defaultTicks.length; i++) { + const tick = defaultTicks[i]; + let label = tickCallback + ? tickCallback.call(this, tick.value, i, defaultTicks) + : format(tick.value, displayFormat); + const stringLabel = String(label ?? ''); -// if (!seen.has(stringLabel)) { -// seen.add(stringLabel); -// uniqueTicks.push({ -// ...tick, -// label: stringLabel -// }); -// } -// } + if (!seen.has(stringLabel)) { + seen.add(stringLabel); + uniqueTicks.push({ + ...tick, + label: stringLabel + }); + } + } -// // Set the filtered ticks on the axis instance -// this.ticks = uniqueTicks; + // Set the filtered ticks on the axis instance + this.ticks = uniqueTicks; -// return uniqueTicks; -// }; + return uniqueTicks; +}; diff --git a/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useOptions.tsx b/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useOptions.tsx index b154f77f7..ee1b369a9 100644 --- a/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useOptions.tsx +++ b/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useOptions.tsx @@ -160,7 +160,7 @@ export const useOptions = ({ const chartMounted = useMemo(() => { return { onMounted: onChartReady, - onInitialAnimationEnd: onInitialAnimationEnd + onInitialAnimationEnd }; }, [onChartReady, onInitialAnimationEnd]); diff --git a/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useXAxis/useXAxis.ts b/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useXAxis/useXAxis.ts index eba22e816..487ca65ce 100644 --- a/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useXAxis/useXAxis.ts +++ b/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useXAxis/useXAxis.ts @@ -165,18 +165,6 @@ export const useXAxis = ({ return DEFAULT_X_AXIS_TICK_CALLBACK.call(this, value, index, this.getLabels() as any); }); - const tickCallback = useMemo(() => { - if (type === 'time') { - const isSingleXAxis = selectedAxis.x.length === 1; - const columnLabelFormat = xAxisColumnFormats[selectedAxis.x[0]]; - const isDate = columnLabelFormat?.columnType === 'date'; - const isAutoDate = columnLabelFormat?.dateFormat === 'auto' || !columnLabelFormat?.dateFormat; - const useAutoDate = isSingleXAxis && isDate && isAutoDate; - if (useAutoDate) return customTickCallback; - } - return customTickCallback; - }, [customTickCallback, type, selectedAxis.x, xAxisColumnFormats]); - const rotation = useMemo(() => { if (xAxisLabelRotation === 'auto' || xAxisLabelRotation === undefined) return undefined; return { @@ -230,7 +218,7 @@ export const useXAxis = ({ maxTicksLimit: type === 'time' ? (timeUnit === 'month' ? 12 : 18) : undefined, sampleSize: type === 'time' ? 24 : undefined, display: xAxisShowAxisLabel, - callback: tickCallback as any, //I need to use null for auto date + callback: customTickCallback as any, //I need to use null for auto date //@ts-ignore time: { unit: timeUnit @@ -244,14 +232,13 @@ export const useXAxis = ({ title, isScatterChart, isPieChart, - tickCallback, + customTickCallback, xAxisShowAxisLabel, stacked, type, grid, timeUnit, - rotation, - tickCallback + rotation ]); return memoizedXAxisOptions; diff --git a/web/src/components/ui/grid/BusterResizeableGrid.tsx b/web/src/components/ui/grid/BusterResizeableGrid.tsx index d7d9a8b7c..8ee65bb06 100644 --- a/web/src/components/ui/grid/BusterResizeableGrid.tsx +++ b/web/src/components/ui/grid/BusterResizeableGrid.tsx @@ -388,7 +388,7 @@ const newRowPreflight = (newRows: BusterResizeableGridRow[]) => { newRowsCopy = newRowsCopy.map((row, index) => { const numberOfColumns = row.columnSizes?.length || 0; const numberOfItems = row.items.length; - // row.id = `${index + 1}`; //we use this instead of uuid because the api likes it better this way + row.id = `${index + 1}`; //we use this instead of uuid because the api likes it better this way if ( numberOfItems !== numberOfColumns || row.columnSizes?.reduce((a, b) => a + b, 0) !== NUMBER_OF_COLUMNS diff --git a/web/src/components/ui/list/BusterInfiniteList/BusterInfiniteList.tsx b/web/src/components/ui/list/BusterInfiniteList/BusterInfiniteList.tsx index 57cd33ddb..ff3aeb9db 100644 --- a/web/src/components/ui/list/BusterInfiniteList/BusterInfiniteList.tsx +++ b/web/src/components/ui/list/BusterInfiniteList/BusterInfiniteList.tsx @@ -1,7 +1,7 @@ 'use client'; import React, { useRef } from 'react'; -import { useMemoizedFn, useWhyDidYouUpdate } from '@/hooks'; +import { useMemoizedFn } from '@/hooks'; import { BusterListProps } from '../BusterList'; import { getAllIdsInSection } from '../BusterList/helpers'; import { useEffect, useMemo } from 'react'; diff --git a/web/src/components/ui/segmented/AppSegmented.tsx b/web/src/components/ui/segmented/AppSegmented.tsx index 461797369..af8d0f7dc 100644 --- a/web/src/components/ui/segmented/AppSegmented.tsx +++ b/web/src/components/ui/segmented/AppSegmented.tsx @@ -6,14 +6,7 @@ import { motion } from 'framer-motion'; import { cn } from '@/lib/classMerge'; import { useEffect, useState, useLayoutEffect, useTransition } from 'react'; import { cva } from 'class-variance-authority'; -import { - useMemoizedFn, - useMergedRefs, - useMount, - useSize, - useThrottleFn, - useWhyDidYouUpdate -} from '@/hooks'; +import { useMemoizedFn, useMount, useSize } from '@/hooks'; import { Tooltip } from '../tooltip/Tooltip'; import Link from 'next/link'; import { useRouter } from 'next/navigation'; diff --git a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardContentController.tsx b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardContentController.tsx index 6e0c5cd97..01a6aaf7b 100644 --- a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardContentController.tsx +++ b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardContentController/DashboardContentController.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useMemo, useState } from 'react'; import isEmpty from 'lodash/isEmpty'; import { BusterResizeableGrid, BusterResizeableGridRow } from '@/components/ui/grid'; -import { useDebounceFn, useMemoizedFn, useWhyDidYouUpdate } from '@/hooks'; +import { useDebounceFn, useMemoizedFn } from '@/hooks'; import { hasRemovedMetrics, hasUnmappedMetrics, @@ -73,7 +73,6 @@ export const DashboardContentController: React.FC<{ }, [draggingId, dashboard?.id, numberOfMetrics, metrics]); const dashboardRows = useMemo(() => { - console.log('dashboardRows! rerender', rows); return rows .filter((row) => row.items.length > 0) .map((row) => { @@ -130,18 +129,6 @@ export const DashboardContentController: React.FC<{ } }, [dashboard?.id, remapMetrics]); - useWhyDidYouUpdate('DashboardContentController', { - remapMetrics, - dashboard, - metrics, - readOnly, - numberOfMetrics, - rows, - chatId, - dashboardConfig, - configRows - }); - return (
{hasMetrics && !!dashboardRows.length && !!dashboard ? (