@carto/ps-react-ui 4.3.3 → 4.3.5

package/src/widgets/formula/components/value.test.tsx

@@ -0,0 +1,329 @@
+import { describe, test, expect, beforeEach } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { Value } from './value'
+import { useWidgetStore } from '../../stores/widget-store'
+import type { FormulaWidgetState } from '../types'
+
+describe('Value', () => {
+  beforeEach(() => {
+    useWidgetStore.getState().clearWidgets()
+  })
+
+  test('renders value from widget data at default index 0', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [{ value: 100 }],
+    })
+
+    render(<Value id='test-value' />)
+    expect(screen.getByText('100')).toBeTruthy()
+  })
+
+  test('renders value at specified index', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [{ value: 100 }, { value: 200 }, { value: 300 }],
+    })
+
+    render(<Value id='test-value' index={1} />)
+    expect(screen.getByText('200')).toBeTruthy()
+  })
+
+  test('renders value at index 0 when index not specified', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [{ value: 100 }, { value: 200 }],
+    })
+
+    render(<Value id='test-value' />)
+    expect(screen.getByText('100')).toBeTruthy()
+  })
+
+  test('renders zero value', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [{ value: 0 }],
+    })
+
+    render(<Value id='test-value' />)
+    expect(screen.getByText('0')).toBeTruthy()
+  })
+
+  test('renders negative value', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [{ value: -100 }],
+    })
+
+    render(<Value id='test-value' />)
+    expect(screen.getByText('-100')).toBeTruthy()
+  })
+
+  test('renders decimal value', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [{ value: 123.456 }],
+    })
+
+    render(<Value id='test-value' />)
+    expect(screen.getByText('123.456')).toBeTruthy()
+  })
+
+  test('renders large value', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [{ value: 1000000000 }],
+    })
+
+    render(<Value id='test-value' />)
+    expect(screen.getByText('1000000000')).toBeTruthy()
+  })
+
+  test('applies custom color from data', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [{ value: 100, color: '#FF0000' }],
+    })
+
+    render(<Value id='test-value' />)
+    const element = screen.getByText('100')
+    expect(element).toBeTruthy()
+  })
+
+  test('renders without color when not specified', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [{ value: 100 }],
+    })
+
+    render(<Value id='test-value' />)
+    expect(screen.getByText('100')).toBeTruthy()
+  })
+
+  test('applies different colors for different items', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [
+        { value: 100, color: '#FF0000' },
+        { value: 200, color: '#00FF00' },
+      ],
+    })
+
+    const { unmount } = render(<Value id='test-value' index={0} />)
+    expect(screen.getByText('100')).toBeTruthy()
+    unmount()
+
+    render(<Value id='test-value' index={1} />)
+    expect(screen.getByText('200')).toBeTruthy()
+  })
+
+  test('renders as Typography h5', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [{ value: 100 }],
+    })
+
+    render(<Value id='test-value' />)
+    const element = screen.getByText('100')
+    expect(element.tagName).toBe('H5')
+  })
+
+  test('returns nothing when widget does not exist', () => {
+    const { container } = render(<Value id='non-existent' />)
+    // Value still renders Item, which renders Typography, but with undefined children
+    expect(container.querySelector('.MuiTypography-root')).toBeTruthy()
+  })
+
+  test('returns nothing when widget data is undefined', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+    })
+
+    const { container } = render(<Value id='test-value' />)
+    // Value still renders Item, which renders Typography, but with undefined children
+    expect(container.querySelector('.MuiTypography-root')).toBeTruthy()
+  })
+
+  test('returns nothing when index is out of bounds', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [{ value: 100 }],
+    })
+
+    const { container } = render(<Value id='test-value' index={5} />)
+    // Value still renders Item, which renders Typography, but with undefined children
+    expect(container.querySelector('.MuiTypography-root')).toBeTruthy()
+  })
+
+  test('handles empty data array', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [],
+    })
+
+    const { container } = render(<Value id='test-value' />)
+    // Value still renders Item, which renders Typography, but with undefined children
+    expect(container.querySelector('.MuiTypography-root')).toBeTruthy()
+  })
+
+  test('passes disabled prop to Item', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [{ value: 100 }],
+    })
+
+    render(<Value id='test-value' disabled={true} />)
+    const element = screen.getByText('100')
+    expect(element.getAttribute('data-disabled')).toBe('true')
+  })
+
+  test('passes TypographyProps to Item', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [{ value: 100 }],
+    })
+
+    render(<Value id='test-value' TypographyProps={{ className: 'custom' }} />)
+    const element = screen.getByText('100')
+    expect(element.classList.contains('custom')).toBe(true)
+  })
+
+  test('merges color from data with TypographyProps', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [{ value: 100, color: '#FF0000' }],
+    })
+
+    render(<Value id='test-value' TypographyProps={{ className: 'custom' }} />)
+    const element = screen.getByText('100')
+    expect(element.classList.contains('custom')).toBe(true)
+  })
+
+  test('color from data is passed to TypographyProps', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [{ value: 100, color: 'primary' }],
+    })
+
+    render(<Value id='test-value' />)
+    const element = screen.getByText('100')
+    // Color is passed as a prop, not an HTML attribute
+    expect(element).toBeTruthy()
+  })
+
+  test('handles all data properties together', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [
+        {
+          value: 100,
+          color: '#FF0000',
+          prefix: '$',
+          suffix: 'USD',
+        },
+      ],
+    })
+
+    render(<Value id='test-value' />)
+    expect(screen.getByText('100')).toBeTruthy()
+  })
+
+  test('updates when widget data changes', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [{ value: 100 }],
+    })
+
+    const { rerender } = render(<Value id='test-value' />)
+    expect(screen.getByText('100')).toBeTruthy()
+
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      data: [{ value: 200 }],
+    })
+
+    rerender(<Value id='test-value' />)
+    expect(screen.queryByText('100')).toBeNull()
+    expect(screen.getByText('200')).toBeTruthy()
+  })
+
+  test('updates when index changes', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [{ value: 100 }, { value: 200 }],
+    })
+
+    const { rerender } = render(<Value id='test-value' index={0} />)
+    expect(screen.getByText('100')).toBeTruthy()
+
+    rerender(<Value id='test-value' index={1} />)
+    expect(screen.queryByText('100')).toBeNull()
+    expect(screen.getByText('200')).toBeTruthy()
+  })
+
+  test('handles widget removal gracefully', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [{ value: 100 }],
+    })
+
+    const { container, rerender } = render(<Value id='test-value' />)
+    expect(screen.getByText('100')).toBeTruthy()
+
+    useWidgetStore.getState().removeWidget('test-value')
+
+    rerender(<Value id='test-value' />)
+    // Item still renders, but with undefined value
+    expect(container.querySelector('.MuiTypography-root')).toBeTruthy()
+  })
+
+  test('renders with multiple values at different indices', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [
+        { value: 100 },
+        { value: 200 },
+        { value: 300 },
+        { value: 400 },
+        { value: 500 },
+      ],
+    })
+
+    const { unmount } = render(<Value id='test-value' index={0} />)
+    expect(screen.getByText('100')).toBeTruthy()
+    unmount()
+
+    render(<Value id='test-value' index={2} />)
+    expect(screen.getByText('300')).toBeTruthy()
+  })
+
+  test('handles negative index (invalid but should not crash)', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [{ value: 100 }],
+    })
+
+    const { container } = render(<Value id='test-value' index={-1} />)
+    // Negative index is invalid, should render undefined
+    expect(container.querySelector('.MuiTypography-root')).toBeTruthy()
+  })
+
+  test('value with very small decimal', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [{ value: 0.0001 }],
+    })
+
+    render(<Value id='test-value' />)
+    expect(screen.getByText('0.0001')).toBeTruthy()
+  })
+
+  test('value with scientific notation', () => {
+    useWidgetStore.getState().setWidget<FormulaWidgetState>('test-value', {
+      type: 'formula',
+      data: [{ value: 1e10 }],
+    })
+
+    render(<Value id='test-value' />)
+    expect(screen.getByText('10000000000')).toBeTruthy()
+  })
+})

package/src/widgets/formula/components/value.tsx

@@ -0,0 +1,29 @@
+import { type FormulaWidgetState, type ValueProps } from '../types'
+import { useWidgetStore } from '../../stores/widget-store'
+import { Item } from './item'
+import { useShallow } from 'zustand/shallow'
+
+const defaultFormatter = (value: number) => value.toString()
+
+export function Value({ id, index = 0, ...props }: ValueProps) {
+  const {
+    value,
+    color,
+    formatter = defaultFormatter,
+  } = useWidgetStore(
+    useShallow((state) => {
+      const widget = state.getWidget<FormulaWidgetState>(id)
+      return {
+        value: widget?.data?.[index]?.value,
+        color: widget?.data?.[index]?.color,
+        formatter: widget?.formatter,
+      }
+    }),
+  )
+
+  return (
+    <Item TypographyProps={{ color }} {...props}>
+      {formatter(value ?? 0)}
+    </Item>
+  )
+}

package/src/widgets/formula/config.ts

@@ -0,0 +1,27 @@
+import { downloadToCSV, downloadToPNG } from '../actions'
+import type { ConfigProps } from '../loader/types'
+import type { FormulaDownloadConfig, FormulaWidgetConfig } from './types'
+
+export function formulaDownloadConfig({
+  refUI,
+}: ConfigProps): FormulaDownloadConfig {
+  return [
+    {
+      ...downloadToPNG,
+      modifier: () => downloadToPNG.modifier(refUI),
+    },
+    {
+      ...downloadToCSV,
+      modifier: async (data) => {
+        const formulaData = [data?.map((item) => item.value) ?? []]
+        return downloadToCSV.modifier(formulaData)
+      },
+    },
+  ]
+}
+
+export function formulaConfig(): FormulaWidgetConfig {
+  return {
+    series: [],
+  }
+}