diff --git a/web/ui/react-app/src/pages/graph/HistogramChart.test.tsx b/web/ui/react-app/src/pages/graph/HistogramChart.test.tsx new file mode 100644 index 0000000000..27018c50ca --- /dev/null +++ b/web/ui/react-app/src/pages/graph/HistogramChart.test.tsx @@ -0,0 +1,243 @@ +import React from 'react'; +import { mount, ReactWrapper } from 'enzyme'; +import HistogramChart from './HistogramChart'; +import { Histogram } from '../../types/types'; + +const mockFormat = jest.fn((value) => value.toString()); +const mockResolvedOptions = jest.fn().mockReturnValue({ locale: 'en-US', numberingSystem: 'latn', style: 'decimal' }); +const mockFormatToParts = jest.fn(); +const mockFormatRange = jest.fn(); +const mockFormatRangeToParts = jest.fn(); + +jest.spyOn(global.Intl, 'NumberFormat').mockImplementation(() => ({ + format: mockFormat, + resolvedOptions: mockResolvedOptions, + formatToParts: mockFormatToParts, + formatRange: mockFormatRange, + formatRangeToParts: mockFormatRangeToParts, +})); + +describe('HistogramChart', () => { + let wrapper: ReactWrapper; + + const histogramDataLinear: Histogram = { + count: '30', + sum: '350', + buckets: [ + [1678886400, '0', '10', '5'], + [1678886400, '10', '20', '15'], + [1678886400, '20', '30', '10'], + ], + }; + + const histogramDataExponential: Histogram = { + count: '140', + sum: '...', + buckets: [ + [1678886400, '-100', '-10', '20'], + [1678886400, '-10', '-1', '30'], + [1678886400, '1', '10', '50'], + [1678886400, '10', '100', '40'], + ], + }; + + const histogramDataZeroCrossing: Histogram = { + count: '30', + sum: '...', + buckets: [ + [1678886400, '-5', '-1', '10'], + [1678886400, '-1', '1', '5'], + [1678886400, '1', '5', '15'], + ], + }; + + const histogramDataEmpty: Histogram = { + count: '0', + sum: '0', + buckets: [], + }; + + const histogramDataNull: Histogram = { + count: '0', + sum: '0', + buckets: null as any, + }; + + const defaultProps = { + index: 0, + scale: 'linear' as 'linear' | 'exponential', + }; + + + beforeEach(() => { + mockFormat.mockClear(); + mockResolvedOptions.mockClear(); + mockFormatToParts.mockClear(); + mockFormatRange.mockClear(); + mockFormatRangeToParts.mockClear(); + }); + + afterEach(() => { + if (wrapper && wrapper.exists()) { + wrapper.unmount(); + } + }); + + it('renders without crashing', () => { + wrapper = mount(); + expect(wrapper.find('.histogram-y-wrapper').exists()).toBe(true); + expect(wrapper.find('.histogram-container').exists()).toBe(true); + }); + + it('renders "No data" when buckets are empty', () => { + wrapper = mount(); + expect(wrapper.text()).toContain('No data'); + expect(wrapper.find('.histogram-container').exists()).toBe(false); + }); + + it('renders "No data" when buckets are null', () => { + wrapper = mount(); + expect(wrapper.text()).toContain('No data'); + expect(wrapper.find('.histogram-container').exists()).toBe(false); + }); + + describe('Linear Scale', () => { + beforeEach(() => { + wrapper = mount(); + }); + + it('renders the correct number of buckets', () => { + expect(wrapper.find('.histogram-bucket')).toHaveLength(histogramDataLinear.buckets!.length); + }); + + it('renders y-axis labels and grid lines', () => { + expect(wrapper.find('.histogram-y-label')).toHaveLength(5); + expect(wrapper.find('.histogram-y-grid')).toHaveLength(5); + expect(wrapper.find('.histogram-y-tick')).toHaveLength(5); + expect(wrapper.find('.histogram-y-label').at(0).text()).toBe(''); + expect(wrapper.find('.histogram-y-label').last().text()).toBe('0'); + }); + + it('renders x-axis labels and grid lines', () => { + expect(wrapper.find('.histogram-x-label')).toHaveLength(1); + expect(wrapper.find('.histogram-x-grid')).toHaveLength(6); + expect(wrapper.find('.histogram-x-tick')).toHaveLength(3); + expect(mockFormat).toHaveBeenCalledWith(0); + expect(mockFormat).toHaveBeenCalledWith(30); + expect(wrapper.find('.histogram-x-label').text()).toContain('0'); + expect(wrapper.find('.histogram-x-label').text()).toContain('30'); + }); + + it('calculates bucket styles correctly for linear scale', () => { + const buckets = wrapper.find('.histogram-bucket-slot'); + const rangeMin = 0; + const rangeMax = 30; + const rangeWidth = rangeMax - rangeMin; + const fdMax = 1.5; + + const b1 = buckets.at(0); + const expectedB1LeftNum = ((0 - rangeMin) / rangeWidth) * 100; + const expectedB1WidthNum = ((10 - 0) / rangeWidth) * 100; + const expectedB1HeightNum = (0.5 / fdMax) * 100; + expect(parseFloat(b1.prop('style')?.left as string)).toBeCloseTo(expectedB1LeftNum, 1); + expect(parseFloat(b1.prop('style')?.width as string)).toBeCloseTo(expectedB1WidthNum, 1); + expect(parseFloat(b1.find('.histogram-bucket').prop('style')?.height as string)).toBeCloseTo(expectedB1HeightNum, 1); + + const b2 = buckets.at(1); + const expectedB2LeftNum = ((10 - rangeMin) / rangeWidth) * 100; + const expectedB2WidthNum = ((20 - 10) / rangeWidth) * 100; + const expectedB2HeightNum = (1.5 / fdMax) * 100; + expect(parseFloat(b2.prop('style')?.left as string)).toBeCloseTo(expectedB2LeftNum, 1); + expect(parseFloat(b2.prop('style')?.width as string)).toBeCloseTo(expectedB2WidthNum, 1); + expect(parseFloat(b2.find('.histogram-bucket').prop('style')?.height as string)).toBeCloseTo(expectedB2HeightNum, 1); + + const b3 = buckets.at(2); + const expectedB3LeftNum = ((20 - rangeMin) / rangeWidth) * 100; + const expectedB3WidthNum = ((30 - 20) / rangeWidth) * 100; + const expectedB3HeightNum = (1.0 / fdMax) * 100; + expect(parseFloat(b3.prop('style')?.left as string)).toBeCloseTo(expectedB3LeftNum, 1); + expect(parseFloat(b3.prop('style')?.width as string)).toBeCloseTo(expectedB3WidthNum, 1); + expect(parseFloat(b3.find('.histogram-bucket').prop('style')?.height as string)).toBeCloseTo(expectedB3HeightNum, 1); + }); + }); + + describe('Exponential Scale', () => { + beforeEach(() => { + wrapper = mount(); + }); + + it('renders the correct number of buckets', () => { + expect(wrapper.find('.histogram-bucket')).toHaveLength(histogramDataExponential.buckets!.length); + }); + + it('renders y-axis labels and grid lines with formatting', () => { + expect(wrapper.find('.histogram-y-label')).toHaveLength(5); + expect(wrapper.find('.histogram-y-grid')).toHaveLength(5); + expect(wrapper.find('.histogram-y-tick')).toHaveLength(5); + + const countMax = 50; + expect(mockFormat).toHaveBeenCalledWith(countMax * 1); + expect(mockFormat).toHaveBeenCalledWith(countMax * 0.75); + expect(mockFormat).toHaveBeenCalledWith(countMax * 0.5); + expect(mockFormat).toHaveBeenCalledWith(countMax * 0.25); + + expect(wrapper.find('.histogram-y-label').at(0).text()).toBe('50'); + expect(wrapper.find('.histogram-y-label').at(1).text()).toBe('37.5'); + expect(wrapper.find('.histogram-y-label').last().text()).toBe('0'); + }); + + it('renders x-axis labels and grid lines with formatting', () => { + expect(wrapper.find('.histogram-x-label')).toHaveLength(1); + expect(wrapper.find('.histogram-x-grid')).toHaveLength(6); + expect(wrapper.find('.histogram-x-tick')).toHaveLength(3); + + expect(mockFormat).toHaveBeenCalledWith(-100); + expect(mockFormat).toHaveBeenCalledWith(100); + expect(wrapper.find('.histogram-x-label').text()).toContain('0'); + expect(wrapper.find('.histogram-x-label').text()).toContain('-100'); + expect(wrapper.find('.histogram-x-label').text()).toContain('100'); + }); + + it('calculates bucket styles correctly for exponential scale', () => { + const buckets = wrapper.find('.histogram-bucket-slot'); + const countMax = 50; + + const b1 = buckets.at(0); + const b1Height = (20 / countMax) * 100; + expect(b1.find('.histogram-bucket').prop('style')).toHaveProperty('height', `${b1Height}%`); + expect(parseFloat(b1.prop('style')?.left as string)).toBeGreaterThanOrEqual(0); + expect(parseFloat(b1.prop('style')?.width as string)).toBeGreaterThan(0); + + const b2 = buckets.at(1); + const b2Height = (30 / countMax) * 100; + expect(b2.find('.histogram-bucket').prop('style')).toHaveProperty('height', `${b2Height}%`); + expect(parseFloat(b2.prop('style')?.left as string)).toBeGreaterThan(0); + expect(parseFloat(b2.prop('style')?.width as string)).toBeGreaterThan(0); + + const b3 = buckets.at(2); + const b3Height = (50 / countMax) * 100; + expect(b3.find('.histogram-bucket').prop('style')).toHaveProperty('height', '100%'); + expect(parseFloat(b3.prop('style')?.left as string)).toBeGreaterThan(0); + expect(parseFloat(b3.prop('style')?.width as string)).toBeGreaterThan(0); + + const b4 = buckets.at(3); + const b4Height = (40 / countMax) * 100; + expect(b4.find('.histogram-bucket').prop('style')).toHaveProperty('height', `${b4Height}%`); + expect(parseFloat(b4.prop('style')?.left as string)).toBeGreaterThan(0); + expect(parseFloat(b4.prop('style')?.width as string)).toBeGreaterThan(0); + expect(parseFloat(b4.prop('style')?.left as string) + parseFloat(b4.prop('style')?.width as string)).toBeLessThanOrEqual(100.01); + }); + + it('handles zero-crossing bucket correctly in exponential scale', () => { + wrapper = mount(); + const buckets = wrapper.find('.histogram-bucket-slot'); + const countMax = 15; + + const b2 = buckets.at(1); + const b2Height = (5 / countMax) * 100; + expect(b2.find('.histogram-bucket').prop('style')).toHaveProperty('height', expect.stringContaining(b2Height.toFixed(1))); + expect(parseFloat(b2.prop('style')?.left as string)).toBeGreaterThanOrEqual(0); + expect(parseFloat(b2.prop('style')?.width as string)).toBeGreaterThan(0); + }); + }); +}); diff --git a/web/ui/react-app/src/pages/graph/HistorgramHelpers.test.tsx b/web/ui/react-app/src/pages/graph/HistorgramHelpers.test.tsx new file mode 100644 index 0000000000..ea70a17d08 --- /dev/null +++ b/web/ui/react-app/src/pages/graph/HistorgramHelpers.test.tsx @@ -0,0 +1,311 @@ +import { + calculateDefaultExpBucketWidth, + findMinPositive, + findMaxNegative, + findZeroBucket, + findZeroAxisLeft, + showZeroAxis, +} from './HistogramHelpers'; + +type Bucket = [number, string, string, string]; + +describe('HistogramHelpers', () => { + const bucketsAllPositive: Bucket[] = [ + [0, '1', '10', '5'], + [0, '10', '100', '15'], + [0, '100', '1000', '10'], + ]; + + const bucketsAllNegative: Bucket[] = [ + [0, '-1000', '-100', '10'], + [0, '-100', '-10', '15'], + [0, '-10', '-1', '5'], + ]; + + const bucketsCrossingZeroMid: Bucket[] = [ + [0, '-100', '-10', '10'], + [0, '-10', '-1', '15'], + [0, '-1', '1', '5'], + [0, '1', '10', '20'], + [0, '10', '100', '8'], + ]; + + const bucketsWithExactZeroBucket: Bucket[] = [ + [0, '-10', '-1', '15'], + [0, '0', '0', '5'], + [0, '1', '10', '20'], + ]; + + const bucketsStartingWithZeroCross: Bucket[] = [ + [0, '-1', '1', '5'], + [0, '1', '10', '20'], + [0, '10', '100', '8'], + ]; + + const bucketsEndingWithZeroCross: Bucket[] = [ + [0, '-100', '-10', '10'], + [0, '-10', '-1', '15'], + [0, '-1', '1', '5'], + ]; + + const singleZeroBucket: Bucket[] = [ + [0, '0', '0', '10'], + ]; + + const emptyBuckets: Bucket[] = []; + + const bucketsWithZeroFallback: Bucket[] = [ + [0, '1', '10', '5'], + [0, '10', '100', '15'], + [0, '0', '0', '2'] + ]; + + const bucketsNegThenPosNoCross: Bucket[] = [ + [0, '-10', '-1', '15'], + [0, '5', '10', '20'], + ]; + + + describe('calculateDefaultExpBucketWidth', () => { + it('calculates width for a standard positive bucket', () => { + const lastBucket = bucketsAllPositive[bucketsAllPositive.length - 1]; + const expected = Math.log(1000) - Math.log(100); + expect(calculateDefaultExpBucketWidth(lastBucket, bucketsAllPositive)).toBeCloseTo(expected); + }); + + it('calculates width for a standard negative bucket', () => { + const lastBucket = bucketsAllNegative[bucketsAllNegative.length - 1]; + const expectedAbs = Math.abs(Math.log(Math.abs(parseFloat(lastBucket[2]))) - Math.log(Math.abs(parseFloat(lastBucket[1])))); + expect(calculateDefaultExpBucketWidth(lastBucket, bucketsAllNegative)).toBeCloseTo(expectedAbs); + }); + + it('uses the previous bucket if the last bucket is [0, 0]', () => { + const lastBucket = bucketsWithZeroFallback[bucketsWithZeroFallback.length - 1]; + const expected = Math.log(100) - Math.log(10); + expect(calculateDefaultExpBucketWidth(lastBucket, bucketsWithZeroFallback)).toBeCloseTo(expected); + }); + + it('throws an error if only a single [0, 0] bucket exists', () => { + const lastBucket = singleZeroBucket[0]; + expect(() => calculateDefaultExpBucketWidth(lastBucket, singleZeroBucket)).toThrow( + 'Only one bucket in histogram ([-0, 0]). Cannot calculate defaultExpBucketWidth.' + ); + }); + }); + + + describe('findMinPositive', () => { + it('returns the first positive left bound when all are positive', () => { + expect(findMinPositive(bucketsAllPositive)).toEqual(1); + }); + + it('returns the left bound when it is the first positive value', () => { + expect(findMinPositive(bucketsNegThenPosNoCross)).toBe(5); + }); + + it('returns the right bound when left is negative and right is positive (middle cross)', () => { + expect(findMinPositive(bucketsCrossingZeroMid)).toBe(1); + }); + + it('returns the right bound when the first bucket crosses zero', () => { + expect(findMinPositive(bucketsStartingWithZeroCross)).toBe(1); + }); + + it('returns the right bound when the last bucket crosses zero', () => { + expect(findMinPositive(bucketsEndingWithZeroCross)).toBe(1); + }); + + it('returns 0 when all buckets are negative', () => { + expect(findMinPositive(bucketsAllNegative)).toBe(0); + }); + + it('returns 0 for empty buckets', () => { + expect(findMinPositive(emptyBuckets)).toBe(0); + }); + + it('returns 0 for only zero bucket', () => { + expect(findMinPositive(singleZeroBucket)).toBe(0); + }); + + it('returns 0 when buckets is undefined', () => { + expect(findMinPositive(undefined as any)).toBe(0); + }); + + it('returns the correct positive bound with exact zero bucket present', () => { + expect(findMinPositive(bucketsWithExactZeroBucket)).toBe(1); + }); + }); + + + describe('findMaxNegative', () => { + it('returns 0 when all buckets are positive', () => { + expect(findMaxNegative(bucketsAllPositive)).toBe(0); + }); + + it('returns the right bound of the last negative bucket when all are negative', () => { + expect(findMaxNegative(bucketsAllNegative)).toEqual(-1); + }); + + it('returns the right bound of the bucket before the middle zero-crossing bucket', () => { + expect(findMaxNegative(bucketsCrossingZeroMid)).toEqual(-1); + }); + + it('returns the left bound when the first bucket crosses zero', () => { + expect(findMaxNegative(bucketsStartingWithZeroCross)).toBe(-1); + }); + + it('returns the right bound of the bucket before the last zero-crossing bucket', () => { + expect(findMaxNegative(bucketsEndingWithZeroCross)).toEqual(-1); + }); + + it('returns 0 for empty buckets', () => { + expect(findMaxNegative(emptyBuckets)).toBe(0); + }); + + it('returns 0 for only zero bucket', () => { + expect(findMaxNegative(singleZeroBucket)).toBe(0); + }); + + it('returns 0 when buckets is undefined', () => { + expect(findMaxNegative(undefined as any)).toBe(0); + }); + + it('returns the right bound of the bucket before an exact zero bucket', () => { + expect(findMaxNegative(bucketsWithExactZeroBucket)).toEqual(-1); + }); + }); + + + describe('findZeroBucket', () => { + it('returns the index of bucket strictly containing zero', () => { + expect(findZeroBucket(bucketsCrossingZeroMid)).toBe(2); + }); + + it('returns the index of bucket with zero as left boundary', () => { + const buckets: Bucket[] = [[0, '-5','-1', '10'], [0, '0', '5', '15']]; + expect(findZeroBucket(buckets)).toBe(1); + }); + + it('returns the index of bucket with zero as right boundary', () => { + const buckets: Bucket[] = [[0, '-5', '0', '10'], [0, '1', '5', '15']]; + expect(findZeroBucket(buckets)).toBe(0); + }); + + it('returns the index of an exact [0, 0] bucket', () => { + expect(findZeroBucket(bucketsWithExactZeroBucket)).toBe(1); + }); + + it('returns -1 when there is a gap around zero', () => { + expect(findZeroBucket(bucketsNegThenPosNoCross)).toBe(-1); + }); + + it('returns -1 when all buckets are positive', () => { + expect(findZeroBucket(bucketsAllPositive)).toBe(-1); + }); + + it('returns -1 when all buckets are negative', () => { + expect(findZeroBucket(bucketsAllNegative)).toBe(-1); + }); + + it('returns 0 if the first bucket crosses zero', () => { + expect(findZeroBucket(bucketsStartingWithZeroCross)).toBe(0); + }); + + it('returns the last index if the last bucket crosses zero', () => { + expect(findZeroBucket(bucketsEndingWithZeroCross)).toBe(2); + }); + + it('returns -1 when buckets array is empty', () => { + expect(findZeroBucket(emptyBuckets)).toBe(-1); + }); + }); + + + describe('findZeroAxisLeft', () => { + it('calculates correctly for linear scale crossing zero', () => { + const rangeMin = -100; const rangeMax = 100; + const expected = '50%'; + const result = findZeroAxisLeft('linear', rangeMin, rangeMax, 1, -1, 2, 0, 0, 0); + expect(result).toEqual(expected); + }); + + it('calculates correctly for asymmetric linear scale crossing zero', () => { + const rangeMin = -10; const rangeMax = 90; + const expectedNumber = ((0 - rangeMin) / (rangeMax - rangeMin)) * 100; + const resultString = findZeroAxisLeft('linear', rangeMin, rangeMax, 1, -1, 0, 0, 0, 0); + expect(parseFloat(resultString)).toBeCloseTo(expectedNumber, 1); + }); + + it('calculates correctly for linear scale all positive (off-scale left)', () => { + const rangeMin = 10; const rangeMax = 100; + const expectedNumber = ((0 - rangeMin) / (rangeMax - rangeMin)) * 100; + const resultString = findZeroAxisLeft('linear', rangeMin, rangeMax, 10, 0, -1, 0, 0, 0); + expect(parseFloat(resultString)).toBeCloseTo(expectedNumber, 1); + }); + + it('calculates correctly for linear scale all negative (off-scale right)', () => { + const rangeMin = -100; const rangeMax = -10; + const expectedNumber = ((0 - rangeMin) / (rangeMax - rangeMin)) * 100; + const resultString = findZeroAxisLeft('linear', rangeMin, rangeMax, 0, -10, -1, 0, 0, 0); + expect(parseFloat(resultString)).toBeCloseTo(expectedNumber, 1); + }); + + + const expMinPos = 1; + const expMaxNeg = -1; + const expZeroIdx = 2; + const defaultExpBW = Math.log(10); + const expNegWidth = Math.abs(Math.log(Math.abs(-1)) - Math.log(Math.abs(-100))); + const expPosWidth = Math.log(100) - Math.log(1); + const expTotalWidth = expNegWidth + expPosWidth + defaultExpBW; + + it('returns 0% for exponential scale when maxNegative is 0', () => { + expect(findZeroAxisLeft('exponential', 1, 100, 1, 0, -1, 0, expPosWidth + defaultExpBW, defaultExpBW)).toEqual('0%'); + }); + + it('returns 100% for exponential scale when minPositive is 0', () => { + expect(findZeroAxisLeft('exponential', -100, -1, 0, -1, -1, expNegWidth, expNegWidth + defaultExpBW, defaultExpBW)).toEqual('100%'); + }); + + it('calculates position between buckets when zeroBucketIdx is -1 (exponential)', () => { + const minPos = 5; const maxNeg = -1; const zeroIdx = -1; + const negW = Math.log(Math.abs(-1)) - Math.log(Math.abs(-10)); + const posW = Math.log(10) - Math.log(5); + const totalW = Math.abs(negW) + posW + defaultExpBW; + const expectedNumber = (Math.abs(negW) / totalW) * 100; + const resultString = findZeroAxisLeft('exponential', -10, 10, minPos, maxNeg, zeroIdx, Math.abs(negW), totalW, defaultExpBW); + expect(parseFloat(resultString)).toBeCloseTo(expectedNumber, 1); + }); + + it('calculates position using bucket width when zeroBucketIdx exists (exponential)', () => { + const expectedNumber = ((expNegWidth + 0.5 * defaultExpBW) / expTotalWidth) * 100; + const resultString = findZeroAxisLeft('exponential', -100, 100, expMinPos, expMaxNeg, expZeroIdx, expNegWidth, expTotalWidth, defaultExpBW); + expect(parseFloat(resultString)).toBeCloseTo(expectedNumber, 1); + }); + + it('returns 0% for exponential when calculation is negative (edge case)', () => { + expect(findZeroAxisLeft('exponential', -10, 20, 1, -5, 1, -5, 15, 2)).toBe('0%'); + }); + }); + + + describe('showZeroAxis', () => { + it('returns true when axis is between 5% and 95%', () => { + expect(showZeroAxis('5.01%')).toBe(true); + expect(showZeroAxis('50%')).toBe(true); + expect(showZeroAxis('94.99%')).toBe(true); + }); + + it('returns false when axis is less than or equal to 5%', () => { + expect(showZeroAxis('5%')).toBe(false); + expect(showZeroAxis('0%')).toBe(false); + expect(showZeroAxis('-10%')).toBe(false); + }); + + it('returns false when axis is greater than or equal to 95%', () => { + expect(showZeroAxis('95%')).toBe(false); + expect(showZeroAxis('100%')).toBe(false); + expect(showZeroAxis('120%')).toBe(false); + }); + }); +}); \ No newline at end of file