@carto/ps-react-ui 4.3.3 → 4.3.5

package/src/widgets/actions/zoom-toggle/zoom-toggle.tsx

@@ -0,0 +1,186 @@
+import { Box, IconButton, useTheme } from '@mui/material'
+import {
+  SubdirectoryArrowLeftOutlined,
+  ZoomInOutlined,
+} from '@mui/icons-material'
+import { useEffect, useCallback } from 'react'
+import { useWidgetStore } from '../../stores/widget-store'
+import type { ZoomToggleProps, ZoomState } from './types'
+import { styles } from './style'
+import { Tooltip } from '../../../components'
+import { getEChartZoomConfig } from '../../echart/utils'
+import type { EchartWidgetState } from '../../echart/types'
+import { useShallow } from 'zustand/shallow'
+
+/**
+ * Widget action to toggle EChart zoom functionality.
+ *
+ * When zoom is active, displays an inline reset button to disable zoom.
+ * Only intended for use in fullscreen ToolbarActions for bar and histogram widgets.
+ *
+ * @example
+ * ```tsx
+ * <ZoomToggle
+ *   id="my-widget"
+ *   defaultZoom={false}
+ *   zoomStart={0}
+ *   zoomEnd={100}
+ * />
+ * ```
+ */
+export function ZoomToggle({
+  id,
+  defaultZoom = false,
+  defaultZoomStart = 0,
+  defaultZoomEnd = 100,
+  labels,
+  Icon,
+  ResetIcon,
+  IconButtonProps,
+}: ZoomToggleProps) {
+  const theme = useTheme()
+  const setWidget = useWidgetStore((state) => state.setWidget)
+  const getWidget = useWidgetStore((state) => state.getWidget)
+
+  const zoom = useWidgetStore(
+    useShallow((state) => {
+      const widget = state.getWidget<ZoomState>(id)
+      return widget?.zoom ?? false
+    }),
+  )
+
+  const updateZoomOption = useCallback(
+    (enabled: boolean, start: number, end: number) => {
+      const zoomConfig = getEChartZoomConfig(
+        enabled,
+        { start, end },
+        { inside: true, xSlider: true, ySlider: false },
+        theme,
+      )
+      const currentOption = getWidget<EchartWidgetState>(id)?.option
+
+      setWidget<EchartWidgetState & ZoomState>(id, {
+        zoom: enabled,
+        zoomStart: start,
+        zoomEnd: end,
+        option: {
+          ...currentOption,
+          ...zoomConfig,
+        },
+      })
+    },
+    [getWidget, id, setWidget, theme],
+  )
+
+  // Initialize zoom state from defaults only if not already set
+  useEffect(() => {
+    const existingState = getWidget<ZoomState>(id)
+
+    if (existingState?.zoom) return
+
+    // Apply initial zoom config
+    updateZoomOption(
+      existingState?.zoom ?? defaultZoom,
+      existingState?.zoomStart ?? defaultZoomStart,
+      existingState?.zoomEnd ?? defaultZoomEnd,
+    )
+  }, [
+    defaultZoom,
+    defaultZoomEnd,
+    defaultZoomStart,
+    getWidget,
+    id,
+    updateZoomOption,
+  ])
+
+  // Cleanup: reset zoom when component unmounts
+  useEffect(() => {
+    return () => {
+      const existingState = getWidget<ZoomState>(id)
+      updateZoomOption(
+        false,
+        existingState?.zoomStart ?? 0,
+        existingState?.zoomEnd ?? 100,
+      )
+    }
+  }, [getWidget, id, updateZoomOption])
+
+  const handleToggle = () => {
+    const newZoom = !zoom
+
+    const existingState = getWidget<ZoomState>(id)
+
+    updateZoomOption(
+      newZoom,
+      newZoom ? (existingState?.zoomStart ?? defaultZoomStart) : 0,
+      newZoom ? (existingState?.zoomEnd ?? defaultZoomEnd) : 100,
+    )
+  }
+
+  const handleReset = () => {
+    updateZoomOption(true, defaultZoomStart, defaultZoomEnd)
+  }
+
+  // Handle dataZoom event to update zoom range in store
+  const handleDataZoom = useCallback(
+    (event: unknown) => {
+      const zoomEvent = event as {
+        start: number
+        end: number
+      }
+
+      const start = zoomEvent.start
+      const end = zoomEvent.end
+
+      if (start !== undefined && end !== undefined) {
+        updateZoomOption(true, start, end)
+      }
+    },
+    [updateZoomOption],
+  )
+
+  // Register dataZoom event handler when zoom is enabled
+  useEffect(() => {
+    if (zoom) {
+      setWidget<EchartWidgetState>(id, {
+        onEvents: {
+          dataZoom: handleDataZoom,
+        },
+      })
+    }
+  }, [id, zoom, handleDataZoom, setWidget])
+
+  const enableLabel = labels?.enable ?? 'Enable zoom'
+  const disableLabel = labels?.disable ?? 'Disable zoom'
+  const resetLabel = labels?.reset ?? 'Reset zoom'
+  const tooltipLabel = zoom ? disableLabel : enableLabel
+
+  return (
+    <Box sx={styles.container}>
+      <Tooltip title={tooltipLabel}>
+        <IconButton
+          size='small'
+          aria-label={labels?.ariaLabel ?? tooltipLabel}
+          onClick={handleToggle}
+          sx={styles.trigger}
+          data-active={zoom}
+          {...IconButtonProps}
+        >
+          {Icon ?? <ZoomInOutlined />}
+        </IconButton>
+      </Tooltip>
+      {zoom && (
+        <Tooltip title={resetLabel}>
+          <IconButton
+            size='small'
+            aria-label={resetLabel}
+            onClick={handleReset}
+            {...IconButtonProps}
+          >
+            {ResetIcon ?? <SubdirectoryArrowLeftOutlined />}
+          </IconButton>
+        </Tooltip>
+      )}
+    </Box>
+  )
+}

package/src/widgets/bar/config.ts

@@ -0,0 +1,122 @@
+import {
+  getCommonOptions,
+  mergeEchartWidgetConfig,
+  type EchartOptionsProps,
+} from '../echart'
+import type { BarConfig, BarWidgetConfig, BarWidgetData } from './types'
+import {
+  flattenObjectArrayToCSV,
+  buildLegendConfig,
+  buildGridConfig,
+  createTooltipPositioner,
+  createTooltipFormatter,
+  applyYAxisFormatter,
+} from '../_shared/chart-config'
+import { downloadToCSV, downloadToPNG, type DownloadItem } from '../actions'
+import type { ConfigProps } from '../loader/types'
+
+export function barDownloadConfig({
+  refUI,
+}: ConfigProps): DownloadItem<BarWidgetData>[] {
+  return [
+    {
+      ...downloadToPNG,
+      modifier: () => downloadToPNG.modifier(refUI),
+    },
+    {
+      ...downloadToCSV,
+      modifier: async (data) => {
+        const rows = flattenObjectArrayToCSV(data)
+        return downloadToCSV.modifier(rows)
+      },
+    },
+  ]
+}
+
+export function barConfig(props: BarConfig): BarWidgetConfig {
+  return {
+    type: 'bar',
+    option: mergeEchartWidgetConfig(getCommonOptions(props), getOption(props)),
+  }
+}
+
+function getOption({
+  data = [],
+  theme,
+  formatter,
+}: BarConfig): EchartOptionsProps {
+  const hasLegend = (data?.length ?? 0) > 1
+
+  const yAxis = {
+    type: 'value' as const,
+    splitNumber: 1,
+    axisLabel: {
+      fontSize: theme.typography.overlineDelicate.fontSize,
+      fontFamily: theme.typography.overlineDelicate.fontFamily,
+      margin: parseInt(theme.spacing(1)),
+      show: true,
+      showMaxLabel: true,
+      showMinLabel: false,
+      verticalAlign: 'bottom' as const,
+      inside: true,
+    },
+    axisLine: {
+      show: false,
+    },
+    axisTick: {
+      show: false,
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: theme.palette.black[4],
+      },
+    },
+  }
+
+  return {
+    legend: buildLegendConfig(hasLegend),
+    grid: buildGridConfig(hasLegend, theme),
+    xAxis: {
+      type: 'category',
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        padding: [parseInt(theme.spacing(0.5)), 0, 0, 0],
+        margin: 0,
+      },
+    },
+    yAxis: applyYAxisFormatter(yAxis, formatter),
+    tooltip: {
+      position: createTooltipPositioner(theme),
+      formatter: createTooltipFormatter((item) => {
+        const value = item.value as Record<string, string | number>
+        const index = item.dimensionNames?.[item.encode?.y?.at(0) ?? 1]
+        const _value = value[index ?? '']
+
+        const formattedValue =
+          typeof _value === 'number' && formatter
+            ? formatter(_value)
+            : (_value ?? '')
+
+        const marker = typeof item.marker === 'string' ? item.marker : ''
+        const seriesName = item.seriesName ? `${item.seriesName}: ` : ''
+        const name = item.name ?? ''
+
+        return { name, seriesName, marker, value: formattedValue }
+      }),
+    },
+    series: data.map((_: unknown, index: number) => ({
+      datasetIndex: index,
+      type: 'bar',
+      barMaxWidth: 100,
+      emphasis: {
+        focus: 'series',
+      },
+    })),
+  } as EchartOptionsProps
+}

package/src/widgets/bar/index.ts

@@ -0,0 +1,9 @@
+export { barConfig, barDownloadConfig } from './config'
+export { BarSkeleton } from './skeleton'
+
+export type {
+  BarWidgetData,
+  BarWidgetState,
+  BarConfig,
+  BarWidgetConfig,
+} from './types'

package/src/widgets/bar/skeleton.tsx

@@ -0,0 +1,60 @@
+import { Box, Skeleton } from '@mui/material'
+import { styles } from './style'
+
+export function BarSkeleton() {
+  return (
+    <Box sx={styles.skeleton.graph.container}>
+      <Box sx={styles.skeleton.graph.grid}>
+        <Skeleton
+          sx={styles.skeleton.item}
+          variant='rectangular'
+          height='20%'
+        />
+        <Skeleton
+          sx={styles.skeleton.item}
+          variant='rectangular'
+          height='40%'
+        />
+        <Skeleton
+          sx={styles.skeleton.item}
+          variant='rectangular'
+          height='60%'
+        />
+        <Skeleton
+          sx={styles.skeleton.item}
+          variant='rectangular'
+          height='20%'
+        />
+        <Skeleton
+          sx={styles.skeleton.item}
+          variant='rectangular'
+          height='80%'
+        />
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: ({ spacing }) => spacing(2),
+          height: ({ spacing }) => spacing(5),
+        }}
+      >
+        {Array(2)
+          .fill(0)
+          .map((_, i) => (
+            <Box
+              key={i}
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: ({ spacing }) => spacing(1.5),
+              }}
+            >
+              <Skeleton variant='circular' width={8} height={8} />
+              <Skeleton width={48} height={8} />
+            </Box>
+          ))}
+      </Box>
+    </Box>
+  )
+}

package/src/widgets/bar/style.ts

@@ -0,0 +1,33 @@
+import type { SxProps, Theme } from '@mui/material'
+import { baseSkeletonStyles } from '../_shared/skeleton'
+
+export const styles = {
+  skeleton: {
+    item: {
+      flex: 1,
+      maxWidth: ({ spacing }) => spacing(12),
+
+      '& + &': {
+        marginLeft: ({ spacing }) => spacing(1),
+      },
+    },
+    graph: {
+      ...baseSkeletonStyles.graph,
+      grid: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        flex: '1 1 auto',
+        alignItems: 'flex-end',
+        width: '100%',
+      },
+    },
+    mask: {
+      gray: {
+        backgroundColor: ({ palette }) => palette.grey[100],
+      },
+      white: {
+        backgroundColor: ({ palette }) => palette.common.white,
+      },
+    },
+  },
+} satisfies Record<string, SxProps<Theme>>

package/src/widgets/bar/types.ts

@@ -0,0 +1,16 @@
+import type { EchartWidgetData, EchartWidgetState } from '../echart'
+import type {
+  EchartWidgetOptionProps,
+  EchartWidgetProps,
+} from '../echart/types'
+import type { ConfigProps } from '../loader'
+
+export type BarWidgetData = EchartWidgetData
+
+export type BarWidgetState = EchartWidgetState
+
+export type BarWidgetConfig = EchartWidgetProps & {
+  type: 'bar'
+}
+
+export type BarConfig = ConfigProps & EchartWidgetOptionProps<BarWidgetData>