@freighttech/ui 0.13.18

package/src/backend/charts/ChartUtils.tsx

@@ -0,0 +1,196 @@
+"use client"
+
+import * as React from 'react'
+import { createContext, useContext } from 'react'
+
+export type ChartConfig = {
+  [key: string]: {
+    label?: string
+    color?: string
+  }
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = createContext<ChartContextProps | null>(null)
+
+export function useChart() {
+  const context = useContext(ChartContext)
+  if (!context) {
+    throw new Error('useChart must be used within a ChartContainer')
+  }
+  return context
+}
+
+interface ChartContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  config: ChartConfig
+  children: React.ReactNode
+}
+
+export function ChartContainer({
+  config,
+  children,
+  className,
+  ...props
+}: ChartContainerProps) {
+  const configId = React.useId()
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={configId}
+        className={className}
+        {...props}
+        style={
+          {
+            ...props.style,
+            '--color-chart-1': 'var(--chart-1)',
+            '--color-chart-2': 'var(--chart-2)',
+            '--color-chart-3': 'var(--chart-3)',
+            '--color-chart-4': 'var(--chart-4)',
+            '--color-chart-5': 'var(--chart-5)',
+            ...Object.entries(config).reduce(
+              (acc, [key, value]) => {
+                if (value.color) {
+                  acc[`--color-${key}`] = value.color
+                }
+                return acc
+              },
+              {} as Record<string, string>
+            ),
+          } as React.CSSProperties
+        }
+      >
+        {children}
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+interface ChartTooltipContentProps {
+  active?: boolean
+  payload?: Array<{
+    name: string
+    value: number
+    color?: string
+    dataKey?: string
+    payload?: Record<string, unknown>
+  }>
+  label?: string
+  labelFormatter?: (label: string, payload: unknown[]) => React.ReactNode
+  valueFormatter?: (value: number) => string
+  hideLabel?: boolean
+  indicator?: 'line' | 'dot' | 'dashed'
+  nameKey?: string
+  categoryLabels?: Record<string, string>
+}
+
+export function ChartTooltipContent({
+  active,
+  payload,
+  label,
+  labelFormatter,
+  valueFormatter = (value) => value.toLocaleString(),
+  hideLabel = false,
+  indicator = 'dot',
+  nameKey,
+  categoryLabels,
+}: ChartTooltipContentProps) {
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  return (
+    <div className="rounded-lg border bg-popover px-3 py-2 text-popover-foreground shadow-md">
+      {!hideLabel && label && (
+        <div className="mb-1 text-sm font-medium">
+          {labelFormatter ? labelFormatter(label, payload) : label}
+        </div>
+      )}
+      <div className="flex flex-col gap-1">
+        {payload
+          // Hide internal helper series (e.g. ComboChart's forecast-band base/span
+          // carriers keyed "__bandBase__"/"__bandSpan__") from the tooltip.
+          .filter((item) => {
+            const key = String((item as { dataKey?: unknown }).dataKey ?? '')
+            return !key.startsWith('__')
+          })
+          .map((item, index) => {
+          const rawName = nameKey && item.payload ? String(item.payload[nameKey]) : item.name
+          const name = categoryLabels?.[rawName] ?? rawName
+          return (
+            <div key={index} className="flex items-center justify-between gap-8">
+              <div className="flex items-center gap-2">
+                {indicator === 'dot' && (
+                  <span
+                    className="h-2.5 w-2.5 shrink-0 rounded-full"
+                    style={{ backgroundColor: item.color }}
+                  />
+                )}
+                {indicator === 'line' && (
+                  <span
+                    className="h-0.5 w-3 shrink-0 rounded-full"
+                    style={{ backgroundColor: item.color }}
+                  />
+                )}
+                {indicator === 'dashed' && (
+                  <span
+                    className="h-0.5 w-3 shrink-0 rounded-full border-t-2 border-dashed"
+                    style={{ borderColor: item.color }}
+                  />
+                )}
+                <span className="text-sm text-muted-foreground">{name}</span>
+              </div>
+              <span className="text-sm font-medium tabular-nums">
+                {valueFormatter(item.value)}
+              </span>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export const CHART_COLORS = [
+  'var(--chart-1)',
+  'var(--chart-2)',
+  'var(--chart-3)',
+  'var(--chart-4)',
+  'var(--chart-5)',
+] as const
+
+export const NAMED_COLORS: Record<string, string> = {
+  blue: 'var(--chart-blue)',
+  emerald: 'var(--chart-emerald)',
+  amber: 'var(--chart-amber)',
+  rose: 'var(--chart-rose)',
+  violet: 'var(--chart-violet)',
+  cyan: 'var(--chart-cyan)',
+  indigo: 'var(--chart-indigo)',
+  pink: 'var(--chart-pink)',
+  teal: 'var(--chart-teal)',
+  orange: 'var(--chart-orange)',
+}
+
+export function getChartColor(index: number): string {
+  return CHART_COLORS[index % CHART_COLORS.length]
+}
+
+export function resolveChartColor(color: string | undefined, index: number): string {
+  if (color) {
+    if (NAMED_COLORS[color]) {
+      return NAMED_COLORS[color]
+    }
+    // Honor a literal CSS color (hex, rgb/rgba, hsl/hsla, or a var() token) so
+    // callers can pass bespoke palette colors (e.g. the PoC navy/plan-grey)
+    // instead of only the named-token set. Without this a raw hex falls through
+    // to the default palette and the caller's color is silently ignored.
+    if (/^(#|rgb|hsl|var\()/i.test(color)) {
+      return color
+    }
+  }
+  return CHART_COLORS[index % CHART_COLORS.length]
+}

package/src/backend/charts/ComboChart.stories.tsx

@@ -0,0 +1,103 @@
+// ComboChart.stories.tsx
+
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { ComboChart } from './ComboChart'
+
+const meta: Meta<typeof ComboChart> = {
+  title: 'Charts/ComboChart',
+  component: ComboChart,
+  parameters: {
+    layout: 'padded',
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof ComboChart>
+
+// Verbatim PoC palette (do not eyeball — see IMPLEMENTATION-BRIEF.md).
+const NAVY = '#1C3F6E'
+const BLUE = '#2B5896'
+const PLAN_GRAY = '#4A4A4A'
+const CORE_NAVY = '#16335C'
+const NONCORE_BLUE = '#6E8CB5'
+
+const PL_MONTHS = ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru']
+
+const fmtPln = (v: number): string => {
+  if (Math.abs(v) >= 1_000_000) return `${(v / 1_000_000).toFixed(1)} mln zł`
+  if (Math.abs(v) >= 1_000) return `${Math.round(v / 1_000)} tys. zł`
+  return `${v} zł`
+}
+const fmtPct = (v: number): string => `${v}%`
+
+// Chart 1/6 — EBITDA: wykonanie vs plan vs prognoza.
+// Sty–Kwi actuals; Maj–Gru plan + forecast spline with an uncertainty band.
+// Band keys are null for past months so no band is drawn there.
+const ebitdaData = [
+  { month: 'Sty', actual: -32110, plan: -20000, forecast: null, fcMin: null, fcMax: null },
+  { month: 'Lut', actual: -4160, plan: 5000, forecast: null, fcMin: null, fcMax: null },
+  { month: 'Mar', actual: 65696, plan: 40000, forecast: null, fcMin: null, fcMax: null },
+  { month: 'Kwi', actual: 146837, plan: 90000, forecast: 146837, fcMin: 146837, fcMax: 146837 },
+  { month: 'Maj', actual: null, plan: 110000, forecast: 150000, fcMin: 120000, fcMax: 180000 },
+  { month: 'Cze', actual: null, plan: 130000, forecast: 165000, fcMin: 125000, fcMax: 205000 },
+  { month: 'Lip', actual: null, plan: 150000, forecast: 178000, fcMin: 130000, fcMax: 226000 },
+  { month: 'Sie', actual: null, plan: 165000, forecast: 188000, fcMin: 135000, fcMax: 241000 },
+  { month: 'Wrz', actual: null, plan: 180000, forecast: 196000, fcMin: 138000, fcMax: 254000 },
+  { month: 'Paź', actual: null, plan: 195000, forecast: 205000, fcMin: 142000, fcMax: 268000 },
+  { month: 'Lis', actual: null, plan: 208000, forecast: 213000, fcMin: 146000, fcMax: 280000 },
+  { month: 'Gru', actual: null, plan: 220000, forecast: 222000, fcMin: 150000, fcMax: 294000 },
+]
+
+export const EbitdaPlanActualForecast: Story = {
+  args: {
+    title: 'EBITDA: wykonanie vs plan vs prognoza',
+    data: ebitdaData,
+    index: 'month',
+    referenceY: 0,
+    leftFormatter: fmtPln,
+    band: { minKey: 'fcMin', maxKey: 'fcMax', color: BLUE, name: 'Przedział prognozy' },
+    series: [
+      { key: 'actual', name: 'Wykonanie', type: 'bar', color: NAVY },
+      { key: 'plan', name: 'Plan', type: 'line', color: PLAN_GRAY, dashStyle: 'ShortDash' },
+      { key: 'forecast', name: 'Prognoza', type: 'line', color: BLUE, dashStyle: 'Dash' },
+    ],
+    markers: [{ xValue: 'Kwi', yValue: 146837, label: 'Teraz', color: NAVY }],
+  },
+}
+
+// Chart 4 — Struktura sprzedaży: CORE vs NON-CORE.
+// Stacked monthly columns + a NON-CORE share % line on the right axis.
+const coreSplitData = [
+  { month: 'Sty', core: 620000, nonCore: 360000, nonCorePct: 37 },
+  { month: 'Lut', core: 540000, nonCore: 520000, nonCorePct: 49 },
+  { month: 'Mar', core: 700000, nonCore: 980000, nonCorePct: 58 },
+  { month: 'Kwi', core: 480000, nonCore: 830000, nonCorePct: 63 },
+]
+
+export const CoreNonCoreStacked: Story = {
+  args: {
+    title: 'Struktura sprzedaży: CORE vs NON-CORE',
+    data: coreSplitData,
+    index: 'month',
+    leftFormatter: fmtPln,
+    rightFormatter: fmtPct,
+    rightDomain: [0, 100],
+    series: [
+      { key: 'core', name: 'CORE (TWARGUM)', type: 'bar', color: CORE_NAVY, stackId: 'sprzedaz' },
+      { key: 'nonCore', name: 'NON-CORE', type: 'bar', color: NONCORE_BLUE, stackId: 'sprzedaz' },
+      { key: 'nonCorePct', name: 'Udział NON-CORE %', type: 'line', color: BLUE, yAxis: 'right' },
+    ],
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    title: 'EBITDA: wykonanie vs plan vs prognoza',
+    data: [],
+    index: 'month',
+    series: [],
+    loading: true,
+  },
+}

package/src/backend/charts/ComboChart.tsx

@@ -0,0 +1,350 @@
+"use client"
+
+import * as React from 'react'
+import {
+  ComposedChart,
+  Bar,
+  Cell,
+  Line,
+  Area,
+  Scatter,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  Legend,
+  ReferenceLine,
+} from 'recharts'
+import { Spinner } from '@freighttech/ui/primitives/spinner'
+import { ChartTooltipContent, resolveChartColor } from './ChartUtils'
+
+/**
+ * Maps a Highcharts-style dashStyle onto a Recharts strokeDasharray. `solid`
+ * (and anything unknown) yields `undefined` so the stroke renders continuous.
+ */
+export type ComboDashStyle = 'solid' | 'ShortDash' | 'Dash' | 'Dot'
+
+const DASH_MAP: Record<ComboDashStyle, string | undefined> = {
+  solid: undefined,
+  ShortDash: '6 3',
+  Dash: '8 5',
+  Dot: '2 4',
+}
+
+export type ComboSeries = {
+  /** dataKey present on each datum */
+  key: string
+  /** legend/tooltip label (already-translated) */
+  name: string
+  /** 'line' = monotone spline */
+  type: 'bar' | 'line'
+  color?: string
+  /** default 'left' */
+  yAxis?: 'left' | 'right'
+  /** for line series */
+  dashStyle?: ComboDashStyle
+  /** bars sharing a stackId stack */
+  stackId?: string
+  /**
+   * Bar-only: colour each datum by the sign of its value, so negative months
+   * render in `negativeColor` (PoC "Wykonanie" behaviour). When absent the bar
+   * uses a single `color` fill for every datum.
+   */
+  signColor?: boolean
+  /** Bar-only: fill for negative data when `signColor` is true (default loss red #C0392B) */
+  negativeColor?: string
+}
+
+/** forecast band Area(min..max), nulls in past => no band */
+export type ComboBand = { minKey: string; maxKey: string; color?: string; name?: string }
+
+/** e.g. "Teraz" scatter dot */
+export type ComboMarker = { xValue: string | number; yValue: number; label?: string; color?: string }
+
+export type ComboChartProps = {
+  title?: string
+  data: Array<Record<string, number | string | null>>
+  /** x-axis category dataKey */
+  index: string
+  series: ComboSeries[]
+  band?: ComboBand
+  markers?: ComboMarker[]
+  leftFormatter?: (v: number) => string
+  rightFormatter?: (v: number) => string
+  /** e.g. [0,100] for % overlay */
+  rightDomain?: [number, number]
+  /** zero plotLine */
+  referenceY?: number
+  showLegend?: boolean
+  loading?: boolean
+  error?: string | null
+  emptyMessage?: string
+  className?: string
+  categoryLabels?: Record<string, string>
+}
+
+const BAND_BASE_KEY = '__bandBase__'
+const BAND_SPAN_KEY = '__bandSpan__'
+
+function defaultFormatter(value: number): string {
+  if (Math.abs(value) >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`
+  if (Math.abs(value) >= 1_000) return `${(value / 1_000).toFixed(1)}K`
+  return value.toLocaleString(undefined, { maximumFractionDigits: 2 })
+}
+
+export function ComboChart({
+  title,
+  data,
+  index,
+  series,
+  band,
+  markers,
+  leftFormatter = defaultFormatter,
+  rightFormatter = defaultFormatter,
+  rightDomain,
+  referenceY,
+  showLegend = true,
+  loading,
+  error,
+  emptyMessage = 'No data available',
+  className = '',
+  categoryLabels,
+}: ComboChartProps) {
+  const wrapperClass = `rounded-lg border bg-card p-4 ${className}`
+
+  if (error) {
+    return (
+      <div className={wrapperClass}>
+        {title && <h3 className="mb-4 text-base font-medium text-card-foreground">{title}</h3>}
+        <div className="flex h-48 items-center justify-center">
+          <p className="text-sm text-destructive">{error}</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (loading) {
+    return (
+      <div className={wrapperClass}>
+        {title && <h3 className="mb-4 text-base font-medium text-card-foreground">{title}</h3>}
+        <div className="flex h-48 items-center justify-center">
+          <Spinner className="h-6 w-6 text-muted-foreground" />
+        </div>
+      </div>
+    )
+  }
+
+  if (!data || data.length === 0) {
+    return (
+      <div className={wrapperClass}>
+        {title && <h3 className="mb-4 text-base font-medium text-card-foreground">{title}</h3>}
+        <div className="flex h-48 items-center justify-center">
+          <p className="text-sm text-muted-foreground">{emptyMessage}</p>
+        </div>
+      </div>
+    )
+  }
+
+  const hasRightAxis = series.some((s) => s.yAxis === 'right')
+
+  // Build the forecast band as a transparent base Area (0 → min) plus a shaded
+  // span Area (min → max) stacked on top. Where min/max are null (past months)
+  // both derived keys stay null, so Recharts draws no band there.
+  const chartData = React.useMemo(() => {
+    if (!band) return data
+    return data.map((d) => {
+      const min = d[band.minKey]
+      const max = d[band.maxKey]
+      if (typeof min === 'number' && typeof max === 'number') {
+        return { ...d, [BAND_BASE_KEY]: min, [BAND_SPAN_KEY]: max - min }
+      }
+      return { ...d, [BAND_BASE_KEY]: null, [BAND_SPAN_KEY]: null }
+    })
+  }, [data, band])
+
+  const bandColor = band ? resolveChartColor(band.color, 1) : undefined
+
+  // The "Teraz"-style markers ride on the SAME categorical x-axis. We must NOT
+  // give the <Scatter> its own `data` prop: in a ComposedChart with
+  // `allowDuplicatedCategory={false}`, a nested series carrying separate data
+  // collapses the whole category axis onto just that series' categories (so a
+  // single-point "Teraz" marker would flatten all 12 month bars into one). So
+  // instead we merge the marker y-values into the parent chart data under a
+  // private key at the matching x category, and the Scatter reads from there.
+  const markerColor = React.useMemo(
+    () => markers?.[0]?.color ?? resolveChartColor(undefined, 0),
+    [markers],
+  )
+  const hasMarkers = !!markers && markers.length > 0
+  const chartDataWithMarkers = React.useMemo(() => {
+    if (!hasMarkers) return chartData
+    const byX = new Map(markers!.map((m) => [String(m.xValue), m.yValue]))
+    return chartData.map((d) => {
+      const x = String((d as Record<string, unknown>)[index])
+      return byX.has(x) ? { ...d, __markerY__: byX.get(x)! } : d
+    })
+  }, [chartData, markers, hasMarkers, index])
+
+  return (
+    <div className={wrapperClass}>
+      {title && <h3 className="mb-4 text-base font-medium text-card-foreground">{title}</h3>}
+      <div className="h-72 w-full">
+        <ResponsiveContainer width="100%" height="100%">
+          <ComposedChart data={chartDataWithMarkers} margin={{ top: 10, right: 10, left: 10, bottom: 5 }}>
+            <defs>
+              {band && (
+                <linearGradient id="combo-band" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stopColor={bandColor} stopOpacity={0.22} />
+                  <stop offset="100%" stopColor={bandColor} stopOpacity={0.1} />
+                </linearGradient>
+              )}
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" vertical={false} />
+            <XAxis
+              dataKey={index}
+              tick={{ fontSize: 12 }}
+              tickLine={false}
+              axisLine={false}
+              allowDuplicatedCategory={false}
+            />
+            <YAxis
+              yAxisId="left"
+              tickFormatter={leftFormatter}
+              tick={{ fontSize: 12 }}
+              tickLine={false}
+              axisLine={false}
+              width={56}
+            />
+            {hasRightAxis && (
+              <YAxis
+                yAxisId="right"
+                orientation="right"
+                domain={rightDomain}
+                tickFormatter={rightFormatter}
+                tick={{ fontSize: 12 }}
+                tickLine={false}
+                axisLine={false}
+                width={48}
+              />
+            )}
+            <Tooltip
+              content={<ChartTooltipContent valueFormatter={leftFormatter} categoryLabels={categoryLabels} />}
+              cursor={{ fill: 'hsl(var(--muted))', opacity: 0.2 }}
+            />
+            {showLegend && (
+              <Legend
+                verticalAlign="top"
+                height={36}
+                formatter={(value) => (
+                  <span style={{ color: 'hsl(var(--muted-foreground))', fontSize: '12px' }}>{value}</span>
+                )}
+              />
+            )}
+
+            {referenceY !== undefined && (
+              <ReferenceLine
+                yAxisId="left"
+                y={referenceY}
+                stroke="hsl(var(--muted-foreground))"
+                strokeWidth={1}
+              />
+            )}
+
+            {/* Forecast band: transparent base lifts the shaded span to its floor. */}
+            {band && (
+              <Area
+                yAxisId="left"
+                dataKey={BAND_BASE_KEY}
+                stackId="combo-band"
+                stroke="none"
+                fill="transparent"
+                isAnimationActive={false}
+                connectNulls={false}
+                legendType="none"
+                tooltipType="none"
+                activeDot={false}
+              />
+            )}
+            {band && (
+              <Area
+                yAxisId="left"
+                dataKey={BAND_SPAN_KEY}
+                name={band.name}
+                stackId="combo-band"
+                stroke="none"
+                fill="url(#combo-band)"
+                isAnimationActive={false}
+                connectNulls={false}
+                legendType={band.name ? 'rect' : 'none'}
+                tooltipType="none"
+                activeDot={false}
+              />
+            )}
+
+            {series.map((s, idx) => {
+              const color = resolveChartColor(s.color, idx)
+              const yAxisId = s.yAxis === 'right' ? 'right' : 'left'
+              if (s.type === 'bar') {
+                const negativeColor = s.negativeColor ?? '#C0392B'
+                return (
+                  <Bar
+                    key={s.key}
+                    yAxisId={yAxisId}
+                    dataKey={s.key}
+                    name={s.name}
+                    fill={color}
+                    stackId={s.stackId}
+                    radius={[2, 2, 0, 0]}
+                    isAnimationActive={false}
+                  >
+                    {s.signColor &&
+                      data.map((d, i) => {
+                        const v = d[s.key]
+                        return (
+                          <Cell
+                            key={`${s.key}-${i}`}
+                            fill={typeof v === 'number' && v < 0 ? negativeColor : color}
+                          />
+                        )
+                      })}
+                  </Bar>
+                )
+              }
+              return (
+                <Line
+                  key={s.key}
+                  yAxisId={yAxisId}
+                  type="monotone"
+                  dataKey={s.key}
+                  name={s.name}
+                  stroke={color}
+                  strokeWidth={2}
+                  strokeDasharray={DASH_MAP[s.dashStyle ?? 'solid']}
+                  connectNulls
+                  dot={false}
+                  activeDot={{ r: 4, strokeWidth: 0 }}
+                  isAnimationActive={false}
+                />
+              )
+            })}
+
+            {hasMarkers && (
+              <Scatter
+                yAxisId="left"
+                dataKey="__markerY__"
+                name={markers?.[0]?.label}
+                fill={markerColor}
+                isAnimationActive={false}
+                shape="circle"
+                legendType="none"
+              />
+            )}
+          </ComposedChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  )
+}
+
+export default ComboChart