@etus/ui 0.1.0 → 0.1.2

package/src/components/data-display/ComboChart/ComboChart.tsx

@@ -1,380 +0,0 @@
-"use client"
-
-import type {
-  ComboChartBarSeriesConfig,
-  ComboChartEventProps,
-  ComboChartLineSeriesConfig,
-  ComboChartProps,
-  ComboChartTooltipCallbackProps,
-} from "./ComboChart.types"
-
-import * as React from "react"
-import {
-  Bar,
-  CartesianGrid,
-  ComposedChart,
-  Label,
-  Line,
-  XAxis,
-  YAxis,
-} from "recharts"
-
-import { cn } from "../../../lib/utils"
-import {
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "../Chart"
-
-/**
- * Normalize bar series to ComboChartBarSeriesConfig format
- */
-function normalizeBarSeriesConfig(
-  series: (ComboChartBarSeriesConfig | string)[]
-): ComboChartBarSeriesConfig[] {
-  return series.map((s) =>
-    typeof s === "string" ? { dataKey: s } : s
-  )
-}
-
-/**
- * Normalize line series to ComboChartLineSeriesConfig format
- */
-function normalizeLineSeriesConfig(
-  series: (ComboChartLineSeriesConfig | string)[]
-): ComboChartLineSeriesConfig[] {
-  return series.map((s) =>
-    typeof s === "string" ? { dataKey: s } : s
-  )
-}
-
-/**
- * ComboChart - Data visualization combining bars and lines
- *
- * Displays multiple data series using different chart types (bars and lines)
- * in the same chart. Supports biaxial mode with separate Y-axes for each
- * series type. Ideal for comparing metrics with different scales or
- * showing both totals and rates together.
- *
- * @example
- * ```tsx
- * const data = [
- *   { month: "Jan", revenue: 186000, growth: 12 },
- *   { month: "Feb", revenue: 305000, growth: 18 },
- * ]
- *
- * const config = {
- *   revenue: { label: "Revenue", color: "hsl(var(--chart-1))" },
- *   growth: { label: "Growth %", color: "hsl(var(--chart-2))" },
- * }
- *
- * <ComboChart
- *   data={data}
- *   config={config}
- *   xAxisKey="month"
- *   barSeries={{ series: ["revenue"] }}
- *   lineSeries={{ series: ["growth"] }}
- *   enableBiaxial
- * />
- * ```
- */
-export function ComboChart({
-  barGap = 4,
-  barRadius = 4,
-  barSeries,
-  className,
-  config,
-  data,
-  enableBiaxial = false,
-  enableLegendSlider = false,
-  gridDashArray = "3 3",
-  intervalType,
-  legendPosition = "bottom",
-  lineSeries,
-  onValueChange,
-  showGrid = true,
-  showLegend = false,
-  showTooltip = true,
-  showXAxis = true,
-  startEndOnly = false,
-  tickGap,
-  tooltipCallback,
-  tooltipIndicator = "dot",
-  xAxisKey,
-  xAxisLabel,
-  xAxisTickFormatter,
-  ...props
-}: ComboChartProps) {
-  const normalizedBarSeries = normalizeBarSeriesConfig(barSeries.series)
-  const normalizedLineSeries = lineSeries ? normalizeLineSeriesConfig(lineSeries.series) : []
-  const isStacked = barSeries.variant === "stacked"
-  const prevTooltipStateRef = React.useRef<boolean>(false)
-
-  // Determine if we should show Y-axes
-  const showBarYAxis = barSeries.showYAxis !== false
-  const showLineYAxis = lineSeries?.showYAxis !== false && enableBiaxial
-
-  // Handle bar click for onValueChange
-  const handleBarClick = React.useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (dataKey: string) => (data: any) => {
-      if (!onValueChange || !data?.payload) return
-      const payload = data.payload as Record<string, unknown>
-      const value = payload[dataKey]
-      onValueChange({
-        category: payload[xAxisKey],
-        dataKey,
-        payload,
-        seriesType: "bar",
-        value: typeof value === "number" ? value : 0,
-      })
-    },
-    [onValueChange, xAxisKey]
-  )
-
-  // Handle line dot click for onValueChange
-  const handleDotClick = React.useCallback(
-    (dataKey: string) => (data: { payload: Record<string, unknown> }) => {
-      if (!onValueChange) return
-      const payload = data.payload
-      const value = payload[dataKey]
-      onValueChange({
-        category: payload[xAxisKey],
-        dataKey,
-        payload,
-        seriesType: "line",
-        value: typeof value === "number" ? value : 0,
-      })
-    },
-    [onValueChange, xAxisKey]
-  )
-
-  // Custom tooltip content wrapper for tooltipCallback
-  const TooltipContentWithCallback = React.useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (props: any) => {
-      const { active = false, label, payload } = props
-
-      // Call tooltipCallback when state changes
-      if (tooltipCallback && active !== prevTooltipStateRef.current) {
-        prevTooltipStateRef.current = active
-
-        // Determine series type for each payload item
-        const barDataKeys = new Set(normalizedBarSeries.map((s) => s.dataKey))
-
-        tooltipCallback({
-          active,
-          label,
-          payload: payload?.map((p: { dataKey: string | number; value: number; payload: Record<string, unknown> }) => ({
-            dataKey: String(p.dataKey),
-            payload: p.payload,
-            seriesType: barDataKeys.has(String(p.dataKey)) ? "bar" : "line",
-            value: p.value,
-          })),
-        } as ComboChartTooltipCallbackProps)
-      }
-
-      return <ChartTooltipContent indicator={tooltipIndicator} {...props} />
-    },
-    [normalizedBarSeries, tooltipCallback, tooltipIndicator]
-  )
-
-  // Calculate bar Y-axis domain
-  const barYDomain = React.useMemo(() => {
-    const min = barSeries.minValue ?? (barSeries.autoMinValue ? "auto" : 0)
-    const max = barSeries.maxValue ?? "auto"
-    return [min, max] as const
-  }, [barSeries.autoMinValue, barSeries.maxValue, barSeries.minValue])
-
-  // Calculate line Y-axis domain
-  const lineYDomain = React.useMemo(() => {
-    if (!lineSeries) return [0, "auto"] as const
-    const min = lineSeries.minValue ?? (lineSeries.autoMinValue ? "auto" : 0)
-    const max = lineSeries.maxValue ?? "auto"
-    return [min, max] as const
-  }, [lineSeries])
-
-  // Calculate X-axis ticks for startEndOnly
-  const xAxisTicks = React.useMemo(() => {
-    if (!startEndOnly || data.length < 2) return undefined
-    const first = data[0]
-    const last = data[data.length - 1]
-    if (!first || !last) return undefined
-    return [first[xAxisKey], last[xAxisKey]] as string[]
-  }, [data, startEndOnly, xAxisKey])
-
-  // Calculate margins based on labels
-  const margins = React.useMemo(() => {
-    let left = 12
-    let right = 12
-
-    if (barSeries.yAxisLabel) left = 20
-    if (enableBiaxial && lineSeries?.yAxisLabel) right = 20
-
-    return {
-      bottom: xAxisLabel ? 20 : 0,
-      left,
-      right,
-    }
-  }, [barSeries.yAxisLabel, enableBiaxial, lineSeries?.yAxisLabel, xAxisLabel])
-
-  return (
-    <div data-slot="combo-chart" {...props}>
-      <ChartContainer
-        className={cn(className)}
-        config={config}
-      >
-        <ComposedChart
-          accessibilityLayer
-          barGap={barGap}
-          data={data}
-          margin={margins}
-        >
-          {showGrid && (
-            <CartesianGrid strokeDasharray={gridDashArray} vertical={false} />
-          )}
-
-          {showXAxis && (
-            <XAxis
-              axisLine={false}
-              dataKey={xAxisKey}
-              interval={intervalType}
-              minTickGap={tickGap}
-              tickFormatter={xAxisTickFormatter}
-              tickLine={false}
-              tickMargin={8}
-              ticks={xAxisTicks}
-            >
-              {xAxisLabel && (
-                <Label offset={-5} position="insideBottom" value={xAxisLabel} />
-              )}
-            </XAxis>
-          )}
-
-          {/* Left Y-axis (bars) */}
-          {showBarYAxis && (
-            <YAxis
-              axisLine={false}
-              domain={barYDomain}
-              orientation="left"
-              tickFormatter={barSeries.yAxisTickFormatter}
-              tickLine={false}
-              tickMargin={8}
-              width={barSeries.yAxisWidth}
-              yAxisId="left"
-            >
-              {barSeries.yAxisLabel && (
-                <Label angle={-90} offset={-5} position="insideLeft" value={barSeries.yAxisLabel} />
-              )}
-            </YAxis>
-          )}
-
-          {/* Right Y-axis (lines) - only in biaxial mode */}
-          {showLineYAxis && lineSeries && (
-            <YAxis
-              axisLine={false}
-              domain={lineYDomain}
-              orientation="right"
-              tickFormatter={lineSeries.yAxisTickFormatter}
-              tickLine={false}
-              tickMargin={8}
-              width={lineSeries.yAxisWidth}
-              yAxisId="right"
-            >
-              {lineSeries.yAxisLabel && (
-                <Label angle={90} offset={-5} position="insideRight" value={lineSeries.yAxisLabel} />
-              )}
-            </YAxis>
-          )}
-
-          {showTooltip && (
-            <ChartTooltip
-              content={
-                tooltipCallback
-                  ? <TooltipContentWithCallback />
-                  : <ChartTooltipContent indicator={tooltipIndicator} />
-              }
-              cursor={false}
-            />
-          )}
-
-          {showLegend && (
-            <ChartLegend
-              align={legendPosition === "left" ? "left" : legendPosition === "right" ? "right" : "center"}
-              content={<ChartLegendContent enableSlider={enableLegendSlider} />}
-              layout={legendPosition === "left" || legendPosition === "right" ? "vertical" : "horizontal"}
-              verticalAlign={legendPosition === "top" ? "top" : legendPosition === "bottom" ? "bottom" : "middle"}
-            />
-          )}
-
-          {/* Render bar series */}
-          {normalizedBarSeries.map((seriesConfig) => {
-            const { dataKey, radius: seriesRadius, stackId } = seriesConfig
-            const fill = `var(--color-${dataKey})`
-            const finalRadius = seriesRadius ?? barRadius
-
-            return (
-              <Bar
-                key={dataKey}
-                dataKey={dataKey}
-                fill={fill}
-                onClick={onValueChange ? handleBarClick(dataKey) : undefined}
-                radius={finalRadius}
-                stackId={isStacked ? "combo-stack" : stackId}
-                style={onValueChange ? { cursor: "pointer" } : undefined}
-                yAxisId="left"
-              />
-            )
-          })}
-
-          {/* Render line series */}
-          {lineSeries && normalizedLineSeries.map((seriesConfig) => {
-            const {
-              activeDot: seriesActiveDot,
-              dataKey,
-              dot: seriesDot,
-              strokeDasharray,
-              strokeOpacity,
-              strokeWidth: seriesStrokeWidth,
-            } = seriesConfig
-
-            const stroke = `var(--color-${dataKey})`
-            const finalDot = seriesDot ?? lineSeries.dot ?? false
-            const finalStrokeWidth = seriesStrokeWidth ?? lineSeries.strokeWidth ?? 2
-            const curveType = lineSeries.curveType ?? "monotone"
-
-            // Merge activeDot config with click handler
-            const baseActiveDot = seriesActiveDot ?? lineSeries.activeDot ?? { r: 6 }
-            const finalActiveDot = onValueChange
-              ? typeof baseActiveDot === "object"
-                ? { ...baseActiveDot, onClick: handleDotClick(dataKey), style: { cursor: "pointer" } }
-                : baseActiveDot === false
-                  ? false
-                  : { r: 6, onClick: handleDotClick(dataKey), style: { cursor: "pointer" } }
-              : baseActiveDot
-
-            return (
-              <Line
-                key={dataKey}
-                activeDot={finalActiveDot}
-                connectNulls={lineSeries.connectNulls}
-                dataKey={dataKey}
-                dot={finalDot}
-                stroke={stroke}
-                strokeDasharray={strokeDasharray}
-                strokeOpacity={strokeOpacity}
-                strokeWidth={finalStrokeWidth}
-                type={curveType}
-                yAxisId={enableBiaxial ? "right" : "left"}
-              />
-            )
-          })}
-        </ComposedChart>
-      </ChartContainer>
-    </div>
-  )
-}
-
-ComboChart.displayName = "ComboChart"

package/src/components/data-display/ComboChart/ComboChart.types.ts

@@ -1,224 +0,0 @@
-import type { ChartConfig } from "../Chart"
-import type { ComponentPropsWithoutRef } from "react"
-
-/**
- * Curve type for the line series
- */
-export type ComboChartCurveType =
-  | "basis"
-  | "basisClosed"
-  | "basisOpen"
-  | "bump"
-  | "bumpX"
-  | "bumpY"
-  | "linear"
-  | "linearClosed"
-  | "monotone"
-  | "monotoneX"
-  | "monotoneY"
-  | "natural"
-  | "step"
-  | "stepAfter"
-  | "stepBefore"
-
-/**
- * Bar chart variant (for stacking)
- */
-export type ComboChartBarVariant = "default" | "stacked"
-
-/**
- * Tooltip indicator style
- */
-export type ComboChartTooltipIndicator = "dashed" | "dot" | "line"
-
-/**
- * Legend position
- */
-export type ComboChartLegendPosition = "bottom" | "left" | "right" | "top"
-
-/**
- * X-axis interval type
- */
-export type ComboChartIntervalType = "equidistantPreserveStart" | "preserveEnd" | "preserveStart" | "preserveStartEnd" | number
-
-/**
- * Series type for combo chart
- */
-export type ComboChartSeriesType = "bar" | "line"
-
-/**
- * Event payload for onValueChange callback
- */
-export interface ComboChartEventProps {
-  /** The category value (x-axis) */
-  category: unknown
-  /** The series key that was clicked */
-  dataKey: string
-  /** The full data point */
-  payload: Record<string, unknown>
-  /** The series type (bar or line) */
-  seriesType: ComboChartSeriesType
-  /** The value of the clicked element */
-  value: number
-}
-
-/**
- * Tooltip callback props
- */
-export interface ComboChartTooltipCallbackProps {
-  /** Whether the tooltip is active/visible */
-  active: boolean
-  /** The category label (x-axis value) */
-  label?: string
-  /** Array of series data in the tooltip */
-  payload?: Array<{
-    dataKey: string
-    payload: Record<string, unknown>
-    seriesType: ComboChartSeriesType
-    value: number
-  }>
-}
-
-/**
- * Configuration for a bar series item
- */
-export interface ComboChartBarSeriesConfig {
-  /** Data key from the data array */
-  dataKey: string
-  /** Optional custom fill color (defaults to config color) */
-  fill?: string
-  /** Optional custom radius for this bar */
-  radius?: number
-  /** Stack ID for stacked bars */
-  stackId?: string
-}
-
-/**
- * Configuration for a line series item
- */
-export interface ComboChartLineSeriesConfig {
-  /** Active dot configuration or false to disable */
-  activeDot?: boolean | { r?: number; strokeWidth?: number }
-  /** Data key from the data array */
-  dataKey: string
-  /** Dot configuration or false to disable */
-  dot?: boolean | { fill?: string; r?: number }
-  /** Optional custom stroke color (defaults to config color) */
-  stroke?: string
-  /** Stroke dash array for dashed lines (e.g., "5 5") */
-  strokeDasharray?: string
-  /** Stroke opacity (0-1) */
-  strokeOpacity?: number
-  /** Stroke width for this series */
-  strokeWidth?: number
-}
-
-/**
- * Bar series configuration (Y-axis and series settings)
- */
-export interface ComboChartBarSeries {
-  /** Automatically calculate minimum Y-axis value from data */
-  autoMinValue?: boolean
-  /** Maximum Y-axis value (explicit domain upper bound) */
-  maxValue?: number
-  /** Minimum Y-axis value (explicit domain lower bound) */
-  minValue?: number
-  /** Array of data keys or series configs for bar values */
-  series: (ComboChartBarSeriesConfig | string)[]
-  /** Show Y-axis for this series (default: true) */
-  showYAxis?: boolean
-  /** Variant for bars (default or stacked) */
-  variant?: ComboChartBarVariant
-  /** Custom Y-axis tick formatter */
-  yAxisTickFormatter?: (value: unknown) => string
-  /** Label for Y-axis */
-  yAxisLabel?: string
-  /** Y-axis width in pixels */
-  yAxisWidth?: number
-}
-
-/**
- * Line series configuration (Y-axis and series settings)
- */
-export interface ComboChartLineSeries {
-  /** Active dot configuration or false to disable (default for all lines) */
-  activeDot?: boolean | { r?: number; strokeWidth?: number }
-  /** Automatically calculate minimum Y-axis value from data */
-  autoMinValue?: boolean
-  /** Connect data points through null/undefined values */
-  connectNulls?: boolean
-  /** Curve type for lines */
-  curveType?: ComboChartCurveType
-  /** Dot configuration or false to disable (default for all lines) */
-  dot?: boolean | { fill?: string; r?: number }
-  /** Maximum Y-axis value (explicit domain upper bound) */
-  maxValue?: number
-  /** Minimum Y-axis value (explicit domain lower bound) */
-  minValue?: number
-  /** Array of data keys or series configs for line values */
-  series: (ComboChartLineSeriesConfig | string)[]
-  /** Show Y-axis for this series (default: true in biaxial mode) */
-  showYAxis?: boolean
-  /** Default stroke width for all line series */
-  strokeWidth?: number
-  /** Custom Y-axis tick formatter */
-  yAxisTickFormatter?: (value: unknown) => string
-  /** Label for Y-axis */
-  yAxisLabel?: string
-  /** Y-axis width in pixels */
-  yAxisWidth?: number
-}
-
-/**
- * Props for the ComboChart component
- */
-export interface ComboChartProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
-  /** Gap between bars in grouped layout (px) */
-  barGap?: number
-  /** Border radius for bars */
-  barRadius?: number
-  /** Bar series configuration */
-  barSeries: ComboChartBarSeries
-  /** Additional CSS classes */
-  className?: string
-  /** Chart configuration with colors and labels */
-  config: ChartConfig
-  /** Data array for the chart */
-  data: Record<string, unknown>[]
-  /** Enable biaxial mode (separate Y-axes for bars and lines) */
-  enableBiaxial?: boolean
-  /** Enable horizontal scroll/slider for legend with many items */
-  enableLegendSlider?: boolean
-  /** Grid stroke dash array (e.g., "3 3") */
-  gridDashArray?: string
-  /** X-axis interval type for tick display */
-  intervalType?: ComboChartIntervalType
-  /** Legend position relative to chart */
-  legendPosition?: ComboChartLegendPosition
-  /** Line series configuration (optional, can be used without lines) */
-  lineSeries?: ComboChartLineSeries
-  /** Callback when a data point is clicked. Pass null to clear selection. */
-  onValueChange?: (value: ComboChartEventProps | null) => void
-  /** Show cartesian grid */
-  showGrid?: boolean
-  /** Show legend */
-  showLegend?: boolean
-  /** Show tooltip on hover */
-  showTooltip?: boolean
-  /** Show X-axis */
-  showXAxis?: boolean
-  /** Show only first and last X-axis tick labels */
-  startEndOnly?: boolean
-  /** Minimum gap between X-axis ticks in pixels */
-  tickGap?: number
-  /** Callback when tooltip state changes */
-  tooltipCallback?: (props: ComboChartTooltipCallbackProps) => void
-  /** Tooltip indicator style */
-  tooltipIndicator?: ComboChartTooltipIndicator
-  /** Label for X-axis */
-  xAxisLabel?: string
-  /** Key from data to use for X-axis */
-  xAxisKey: string
-  /** Custom X-axis tick formatter */
-  xAxisTickFormatter?: (value: unknown) => string
-}

package/src/components/data-display/ComboChart/index.ts

@@ -1,2 +0,0 @@
-export * from './ComboChart'
-export type * from './ComboChart.types'