@carto/ps-react-ui 4.3.3 → 4.3.5

package/src/widgets/category/components/category-row-single.tsx

@@ -0,0 +1,47 @@
+import { Box, Typography } from '@mui/material'
+import { styles } from '../style'
+import { CategoryBar } from './category-bar'
+import type { CategoryWidgetConfig } from '../types'
+
+export interface CategoryRowSingleProps {
+  name: string
+  value: number
+  maxValue: number
+  color: string
+  formatter: NonNullable<CategoryWidgetConfig['formatter']>
+  onClick?: CategoryWidgetConfig['onRowClick']
+  selected?: boolean
+}
+
+export function CategoryRowSingle({
+  name,
+  value,
+  maxValue,
+  color,
+  formatter,
+  onClick,
+  selected = true,
+}: CategoryRowSingleProps) {
+  const handleClick = onClick
+    ? () =>
+        onClick({
+          name,
+        })
+    : undefined
+  const rowStyle = onClick ? styles.rowClickable : styles.row
+
+  return (
+    <Box sx={rowStyle} onClick={handleClick}>
+      <Box sx={styles.rowHeader}>
+        <Typography sx={styles.rowLabel}>{name}</Typography>
+        <Typography sx={styles.rowValue}>{formatter(value)}</Typography>
+      </Box>
+      <CategoryBar
+        value={value}
+        maxValue={maxValue}
+        color={color}
+        selected={selected}
+      />
+    </Box>
+  )
+}

package/src/widgets/category/components/index.ts

@@ -0,0 +1,14 @@
+export { CategoryBar } from './category-bar'
+export type { CategoryBarProps } from './category-bar'
+
+export { CategoryRowSingle } from './category-row-single'
+export type { CategoryRowSingleProps } from './category-row-single'
+
+export { CategoryRowMulti } from './category-row-multi'
+export type { CategoryRowMultiProps } from './category-row-multi'
+
+export { CategoryRowOther } from './category-row-other'
+export type { CategoryRowOtherProps } from './category-row-other'
+
+export { CategoryLegend } from './category-legend'
+export type { CategoryLegendProps } from './category-legend'

package/src/widgets/category/config.ts

@@ -0,0 +1,85 @@
+import { downloadToCSV, downloadToPNG, type DownloadItem } from '../actions'
+import type { ConfigProps } from '../loader/types'
+import type {
+  CategoryWidgetConfig,
+  CategoryWidgetData,
+  CategorySeriesConfig,
+  CategoryLabels,
+} from './types'
+
+export interface CategoryDownloadConfigProps extends ConfigProps {
+  series?: CategorySeriesConfig[]
+}
+
+export interface CategoryConfigProps {
+  data?: CategoryWidgetData
+  series?: CategorySeriesConfig[]
+  formatter?: (value: number) => string
+  maxItems?: number
+  labels?: CategoryLabels
+  max?: number
+}
+
+export function categoryDownloadConfig({
+  refUI,
+  series,
+}: CategoryDownloadConfigProps): DownloadItem<CategoryWidgetData>[] {
+  return [
+    {
+      ...downloadToPNG,
+      modifier: () => downloadToPNG.modifier(refUI),
+    },
+    {
+      ...downloadToCSV,
+      modifier: async (data) => {
+        if (!data?.length || data[0]?.length === 0) {
+          return downloadToCSV.modifier([])
+        }
+
+        // data is CategoryDataItem[][] where data[seriesIndex] contains items for that series
+        const seriesCount = data.length
+        const grouped = new Map<string, number[]>()
+        const nameOrder: string[] = []
+
+        // Iterate over each series (outer array)
+        for (let seriesIndex = 0; seriesIndex < seriesCount; seriesIndex++) {
+          const seriesData = data[seriesIndex]!
+          for (const item of seriesData) {
+            let values = grouped.get(item.name)
+            if (!values) {
+              values = new Array<number>(seriesCount).fill(0)
+              grouped.set(item.name, values)
+              nameOrder.push(item.name)
+            }
+            values[seriesIndex] = item.value
+          }
+        }
+
+        // Build rows
+        const rows = nameOrder.map((name) => [name, ...grouped.get(name)!])
+
+        const isMulti = seriesCount > 1
+        const headers = isMulti
+          ? [
+              'Category',
+              ...(series?.map((s: CategorySeriesConfig) => s.name) ??
+                Array.from(
+                  { length: seriesCount },
+                  (_, i) => `Series ${i + 1}`,
+                )),
+            ]
+          : ['Category', 'Value']
+
+        return downloadToCSV.modifier([headers, ...rows])
+      },
+    },
+  ]
+}
+
+export function categoryConfig(): CategoryWidgetConfig {
+  return {
+    series: [],
+    maxItems: 10,
+    max: undefined,
+  }
+}

package/src/widgets/category/index.ts

@@ -0,0 +1,30 @@
+export { CategoryUI } from './category-ui'
+export { CategorySkeleton } from './skeleton'
+export { categoryConfig, categoryDownloadConfig } from './config'
+
+export {
+  CategoryBar,
+  CategoryRowSingle,
+  CategoryRowMulti,
+  CategoryLegend,
+  CategoryRowOther,
+} from './components'
+
+export type {
+  CategoryBarProps,
+  CategoryRowSingleProps,
+  CategoryRowMultiProps,
+  CategoryLegendProps,
+  CategoryRowOtherProps,
+} from './components'
+
+export type {
+  CategoryUIProps,
+  CategoryWidgetData,
+  CategoryWidgetState,
+  CategoryWidgetConfig,
+  CategoryDownloadConfig,
+  CategoryDataItem,
+  CategorySeriesConfig,
+  CategoryLabels,
+} from './types'

package/src/widgets/category/skeleton.tsx

@@ -0,0 +1,24 @@
+import { Box, Skeleton } from '@mui/material'
+import { styles } from './style'
+
+const widthPatterns = [85, 70, 55, 75, 60]
+
+export function CategorySkeleton() {
+  return (
+    <Box sx={styles.list} aria-label='Category skeleton'>
+      {Array.from({ length: 5 }).map((_, index) => (
+        <Box key={index} sx={styles.row}>
+          <Box sx={styles.rowHeader}>
+            <Skeleton width={80} height={16} />
+            <Skeleton width={40} height={16} />
+          </Box>
+          <Skeleton
+            variant='rectangular'
+            height={4}
+            sx={{ borderRadius: 2, width: `${widthPatterns[index]}%` }}
+          />
+        </Box>
+      ))}
+    </Box>
+  )
+}

package/src/widgets/category/style.ts

@@ -0,0 +1,133 @@
+import type { SxProps, Theme } from '@mui/material'
+
+export const styles = {
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative',
+  },
+  list: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: (theme: Theme) => theme.spacing(1),
+  },
+  row: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: (theme: Theme) => theme.spacing(0.5),
+    pointerEvents: 'none',
+  },
+  rowClickable: {
+    pointerEvents: 'auto',
+    // display: 'flex',
+    // flexDirection: 'column',
+    // gap: (theme: Theme) => theme.spacing(0.5),
+    // cursor: 'pointer',
+    // borderRadius: 1,
+    // padding: (theme: Theme) => theme.spacing(0.5),
+    // margin: (theme: Theme) => theme.spacing(-0.5),
+    // transition: 'background-color 0.15s ease-in-out',
+    // '&:hover': {
+    //   backgroundColor: (theme: Theme) => theme.palette.action.hover,
+    // },
+  },
+  rowHeader: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  rowLabel: {
+    typography: 'body2',
+    fontWeight: 'medium',
+    color: 'text.primary',
+  },
+  rowValue: {
+    typography: 'body2',
+    color: 'text.secondary',
+  },
+  barContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  bar: {
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: (theme: Theme) => theme.palette.action.disabledBackground,
+    overflow: 'hidden',
+    position: 'relative',
+    transition: 'background-color 0.15s ease-in-out',
+    cursor: 'pointer',
+    '&:hover': {
+      backgroundColor: (theme: Theme) => theme.palette.action.hover,
+
+      '& > div': {
+        filter: 'brightness(1.2)',
+      },
+    },
+  },
+  barFill: {
+    height: '100%',
+    borderRadius: 2,
+    transition: 'width 0.3s ease-in-out, background-color 0.15s ease-in-out',
+  },
+  barFillMuted: {
+    backgroundColor: (theme: Theme) => theme.palette.action.disabled,
+  },
+  legend: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: (theme: Theme) => theme.spacing(2),
+    flexWrap: 'wrap',
+    paddingTop: (theme: Theme) => theme.spacing(2),
+    position: 'sticky',
+    bottom: 0,
+    backgroundColor: 'background.paper',
+    borderTop: (theme: Theme) => `1px solid ${theme.palette.divider}`,
+    marginTop: (theme: Theme) => theme.spacing(2),
+  },
+  legendItem: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: (theme: Theme) => theme.spacing(1),
+  },
+  legendDot: {
+    width: 8,
+    height: 8,
+    borderRadius: '50%',
+  },
+  legendLabel: {
+    typography: 'caption',
+    color: 'text.secondary',
+    textTransform: 'uppercase',
+    fontWeight: 'medium',
+  },
+  multiBarRow: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: (theme: Theme) => theme.spacing(1),
+  },
+  multiBarValue: {
+    typography: 'body2',
+    color: 'text.secondary',
+    minWidth: 48,
+    textAlign: 'right',
+  },
+  multiBarContainer: {
+    flex: 1,
+  },
+  otherRow: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  otherLabel: {
+    typography: 'body2',
+    fontWeight: 'medium',
+    color: 'text.secondary',
+    fontStyle: 'italic',
+  },
+  otherCount: {
+    typography: 'body2',
+    color: 'text.disabled',
+  },
+} satisfies Record<string, SxProps<Theme>>

package/src/widgets/category/types.ts

@@ -0,0 +1,40 @@
+import type { BaseWidgetState, WidgetsStoreProps } from '../stores/types'
+import type { WrapperState } from '../wrapper/types'
+import type { DownloadItem } from '../actions/download/types'
+
+export interface CategoryUIProps {
+  id: WidgetsStoreProps['id']
+}
+
+export interface CategorySeriesConfig {
+  name: string
+  color?: string
+}
+
+export interface CategoryLabels {
+  other?: string
+  otherCount?: string
+}
+
+export interface CategoryDataItem extends Record<string, string | number> {
+  name: string
+  value: number
+}
+
+export type CategoryWidgetData = CategoryDataItem[][]
+
+export type CategoryWidgetState = BaseWidgetState<
+  WrapperState<CategoryWidgetConfig> & { data: CategoryWidgetData }
+>
+
+export interface CategoryWidgetConfig {
+  formatter?: (value: number) => string
+  series?: CategorySeriesConfig[]
+  maxItems?: number
+  labels?: CategoryLabels
+  onRowClick?: ({ name }: { name: string }) => void
+  selected?: (name: string) => boolean
+  max?: number
+}
+
+export type CategoryDownloadConfig = DownloadItem<CategoryWidgetData>[]

package/src/widgets/echart/const.ts

@@ -0,0 +1 @@
+export const DEFAULT_STACK_GROUP = 'stacked'