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