@ossy/design-system 3.21.0 → 3.22.0

package/src/dashboard-layout/index.js

@@ -0,0 +1,11 @@
+export {
+  DashboardLayout,
+  Widget,
+  DASHBOARD_SHAPES,
+  DASHBOARD_PANEL_SIZES,
+  DASHBOARD_SPANS,
+  DEFAULT_DASHBOARD_SHAPE,
+  dashboardShapeSpan,
+  resolveDashboardShape,
+  resolveDashboardSpan,
+} from './DashboardLayout.jsx'

package/src/index.js

@@ -6,6 +6,7 @@ export * from './content-header'
 export * from './separator'
 export * from './button'
 export * from './card'
+export * from './panel'
 export * from './carousel'
 export * from './context-menu'
 export * from './dropdown'
@@ -48,3 +49,5 @@ export * from './locale'
 export * from './profile'
 export * from './code-example'
 export * from './accordion'
+export * from './line-chart'
+export * from './dashboard-layout'

package/src/line-chart/LineChart.jsx

@@ -0,0 +1,197 @@
+import React, { useMemo } from 'react'
+import { useLocale } from '../locale'
+import { Text } from '../text'
+import { View } from '../view'
+import { buildKpiChartLayout } from './line-chart.js'
+
+function ChartAxisLabel ({ x, y, viewWidth, viewHeight, children }) {
+  return (
+    <Text
+      as="span"
+      variant="small"
+      data-chart-axis-label=""
+      style={{
+        position: 'absolute',
+        left: `${(x / viewWidth) * 100}%`,
+        top: `${(y / viewHeight) * 100}%`,
+        transform: 'translate(-50%, -100%)',
+        margin: 0,
+        opacity: 0.75,
+        lineHeight: 1,
+        whiteSpace: 'nowrap',
+        pointerEvents: 'none',
+      }}
+    >
+      {children}
+    </Text>
+  )
+}
+
+/**
+ * Multi-series line chart. Months share one money scale unless a series sets
+ * `scale: 'hours'`. Dashed series render as a dashed stroke and legend mark.
+ *
+ * @param {object} props
+ * @param {Array<Record<string, unknown>>} props.months
+ * @param {Array<{ key: string, label: string, color: string, dashed?: boolean, scale?: string }>} props.series
+ * @param {string} [props.unit] Translation key shown beside the legend.
+ * @param {string} [props.empty] Translation key shown when there is nothing to plot.
+ */
+export function LineChart ({ months, series, unit, empty }) {
+  const { language, t } = useLocale()
+  const chart = useMemo(
+    () => buildKpiChartLayout({ months, series, language }),
+    [months, series, language],
+  )
+
+  if (!chart) {
+    if (!empty) return null
+    return (
+      <View inset="m">
+        <Text variant="small" text={empty} />
+      </View>
+    )
+  }
+
+  return (
+    <View gap="s" inset="m" data-line-chart="" style={{ width: '100%' }}>
+      <View layout="row-wrap" gap="m" style={{ alignItems: 'center', justifyContent: 'space-between' }}>
+      <View layout="row-wrap" gap="m" style={{ alignItems: 'center' }}>
+        {series.map((entry) => (
+          <View key={entry.key} layout="row" gap="s" style={{ alignItems: 'center' }}>
+            <span
+              aria-hidden
+              style={{
+                width: 10,
+                height: 10,
+                borderRadius: 2,
+                background: entry.color,
+                display: 'inline-block',
+                flexShrink: 0,
+                ...(entry.dashed
+                  ? {
+                      background: 'transparent',
+                      borderTop: `2px dashed ${entry.color}`,
+                      height: 0,
+                      borderRadius: 0,
+                    }
+                  : null),
+              }}
+            />
+            <Text variant="small" style={{ marginBottom: 0 }} text={entry.label} />
+          </View>
+        ))}
+      </View>
+        {unit ? (
+          <Text
+            as="span"
+            variant="small"
+            data-line-chart-unit=""
+            text={unit}
+            style={{ marginBottom: 0 }}
+          />
+        ) : null}
+      </View>
+      <div style={{ display: 'flex', alignItems: 'stretch', width: '100%', gap: 4 }}>
+      {chart.yTicks.length > 0 ? (
+        <div style={{ position: 'relative', flex: '0 0 auto' }}>
+          <div aria-hidden style={{ display: 'grid' }}>
+            {chart.yTicks.map((tick) => (
+              <Text
+                key={`tick-size-${tick.value}`}
+                as="span"
+                variant="small"
+                style={{
+                  gridArea: '1 / 1',
+                  visibility: 'hidden',
+                  margin: 0,
+                  lineHeight: 1,
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {tick.label}
+              </Text>
+            ))}
+          </div>
+          {chart.yTicks.map((tick) => (
+            <Text
+              key={`tick-label-${tick.value}`}
+              as="span"
+              variant="small"
+              data-line-chart-tick={tick.label}
+              style={{
+                position: 'absolute',
+                right: 0,
+                top: `${(tick.y / chart.viewHeight) * 100}%`,
+                transform: 'translateY(-50%)',
+                margin: 0,
+                opacity: 0.75,
+                lineHeight: 1,
+                whiteSpace: 'nowrap',
+                pointerEvents: 'none',
+              }}
+            >
+              {tick.label}
+            </Text>
+          ))}
+        </div>
+      ) : null}
+      <div style={{ position: 'relative', flex: '1 1 auto', minWidth: 0 }}>
+      <svg
+        data-line-chart-plot=""
+        viewBox={`0 0 ${chart.viewWidth} ${chart.viewHeight}`}
+        width="100%"
+        role="img"
+        aria-label={unit ? t(unit) : undefined}
+        style={{
+          display: 'block',
+          width: '100%',
+          height: 'auto',
+          aspectRatio: `${chart.viewWidth} / ${chart.viewHeight}`,
+        }}
+        preserveAspectRatio="xMidYMid meet"
+      >
+        {chart.yTicks.map((tick) => (
+          <line
+            key={`tick-${tick.value}`}
+            x1={tick.x1}
+            x2={tick.x2}
+            y1={tick.y}
+            y2={tick.y}
+            stroke="currentColor"
+            strokeOpacity="0.15"
+            vectorEffect="non-scaling-stroke"
+          />
+        ))}
+        {chart.seriesPaths.map((entry) => (
+          entry.path ? (
+            <path
+              key={entry.key}
+              d={entry.path}
+              fill="none"
+              stroke={entry.color}
+              strokeWidth={2}
+              strokeLinejoin="round"
+              strokeLinecap="round"
+              strokeDasharray={entry.dashed ? '6 4' : undefined}
+              vectorEffect="non-scaling-stroke"
+            />
+          ) : null
+        ))}
+      </svg>
+      {chart.monthLabels.map((label) => (
+        <ChartAxisLabel
+          key={`month-${label.index}`}
+          x={label.x}
+          y={label.y}
+          viewWidth={chart.viewWidth}
+          viewHeight={chart.viewHeight}
+        >
+          <span data-line-chart-month={label.label}>{label.label}</span>
+        </ChartAxisLabel>
+      ))}
+      </div>
+      </div>
+    </View>
+  )
+}

package/src/line-chart/LineChart.stories.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { Panel } from '../panel'
+import { LineChart } from './LineChart.jsx'
+
+export default {
+  title: 'Design System/Display/LineChart',
+  component: LineChart,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Multi-series line chart. Series share one scale unless a series sets scale to hours. Dashed series draw a dashed stroke.',
+      },
+    },
+  },
+}
+
+const months = Array.from({ length: 12 }, (_, index) => ({
+  year: 2026,
+  monthNumber: index + 1,
+  projectedIncome: 400000 + Math.round(Math.sin(index / 2) * 180000),
+  monthlyCostOfEmployees: 320000,
+  revenue: 80000 + Math.round(Math.sin(index / 2) * 180000),
+}))
+
+const series = [
+  { key: 'projectedIncome', label: 'Forecast income', color: 'var(--color-info, hsl(199, 89%, 43%))', dashed: true },
+  { key: 'monthlyCostOfEmployees', label: 'Salary cost', color: 'var(--color-warning, hsl(38, 92%, 50%))' },
+  { key: 'revenue', label: 'Revenue', color: 'var(--color-accent, hsl(167, 89%, 43%))' },
+]
+
+export const Default = () => (
+  <div style={{ maxWidth: 720 }}>
+    <Panel title="Year" style={{ height: 'auto' }}>
+      <LineChart months={months} series={series} unit="kr" />
+    </Panel>
+  </div>
+)
+
+export const Empty = () => (
+  <div style={{ maxWidth: 720 }}>
+    <LineChart months={[]} series={series} empty="Nothing to plot yet" />
+  </div>
+)

package/src/line-chart/index.js

@@ -0,0 +1 @@
+export * from './LineChart.jsx'

package/src/line-chart/line-chart.js

@@ -0,0 +1,184 @@
+/**
+ * Pure layout helpers for multi-series line charts.
+ * Money series share one Y-scale. Series with `scale: 'hours'` (or the legacy
+ * `hoursWorked` key) share a second scale so hour shapes stay distinct from money.
+ */
+
+export const MONEY_KEYS = ['projectedIncome', 'monthlyCostOfEmployees', 'revenue']
+export const HOURS_KEY = 'hoursWorked'
+
+/**
+ * 3-letter month label for chart axis (locale-aware short month, truncated).
+ *
+ * @param {{ year?: number|string, monthNumber?: number|string, month?: string }} month
+ * @param {string} [language='en']
+ * @returns {string}
+ */
+export function shortMonthLabel (month, language = 'en') {
+  const year = Number(month?.year)
+  const monthNumber = Number(month?.monthNumber)
+  if (Number.isFinite(year) && Number.isFinite(monthNumber) && monthNumber >= 1 && monthNumber <= 12) {
+    const locale = language === 'sv' ? 'sv-SE' : 'en'
+    const date = new Date(Date.UTC(year, monthNumber - 1, 1))
+    const short = new Intl.DateTimeFormat(locale, { month: 'short' }).format(date)
+    const letters = short.replace(/\./g, '').trim()
+    if (letters.length >= 3) {
+      return letters.slice(0, 3).replace(/^./, (c) => c.toUpperCase())
+    }
+  }
+  const fallback = String(month?.month || '').replace(/\./g, '').trim()
+  return fallback.slice(0, 3).replace(/^./, (c) => c.toUpperCase())
+}
+
+/**
+ * @param {Array<Record<string, unknown>>} months
+ * @param {string[]} keys
+ * @returns {{ min: number, max: number } | null}
+ */
+export function extentForKeys (months, keys) {
+  if (!months?.length || !keys?.length) return null
+  let min = Infinity
+  let max = -Infinity
+  for (const month of months) {
+    for (const key of keys) {
+      const value = Number(month[key]) || 0
+      if (value < min) min = value
+      if (value > max) max = value
+    }
+  }
+  if (!Number.isFinite(min) || !Number.isFinite(max)) return null
+  if (min === max) {
+    min -= 1
+    max += 1
+  }
+  return { min, max }
+}
+
+/**
+ * @param {number} value
+ * @param {{ min: number, max: number }} extent
+ * @param {number} padY
+ * @param {number} innerH
+ */
+export function valueToY (value, extent, padY, innerH) {
+  const span = extent.max - extent.min
+  return padY + innerH - ((value - extent.min) / span) * innerH
+}
+
+/**
+ * Build SVG path strings for series plus all-month X labels.
+ *
+ * ViewBox defaults use a wide aspect ratio (~3.5:1) so `preserveAspectRatio="meet"`
+ * can scale uniformly without squishing axis labels (see #1001).
+ *
+ * @param {object} options
+ * @param {Array<Record<string, unknown>>} options.months
+ * @param {Array<{ key: string, label: string, color: string, dashed?: boolean, scale?: string }>} options.series
+ * @param {string} [options.language='en']
+ * @param {number} [options.viewWidth=560]
+ * @param {number} [options.plotHeight=140]
+ * @param {number} [options.padX=16] Right inset.
+ * @param {number} [options.padLeft=12] Left inset. Tick labels sit outside the plot.
+ * @param {number} [options.padTop=12]
+ * @param {number} [options.padBottom=28]
+ * @returns {{ viewWidth: number, viewHeight: number, seriesPaths: Array<object>, monthLabels: Array<object>, yTicks: Array<object> } | null}
+ */
+export function buildKpiChartLayout ({
+  months,
+  series,
+  language = 'en',
+  viewWidth = 560,
+  plotHeight = 140,
+  padX = 16,
+  padLeft = 12,
+  padTop = 12,
+  padBottom = 28,
+}) {
+  if (!months?.length || !series?.length) return null
+
+  const viewHeight = padTop + plotHeight + padBottom
+  const innerW = Math.max(0, viewWidth - padLeft - padX)
+  const innerH = plotHeight
+  const step = months.length === 1 ? 0 : innerW / (months.length - 1)
+
+  const hoursKeys = [...new Set(
+    series
+      .filter((entry) => entry.scale === 'hours' || entry.key === HOURS_KEY)
+      .map((entry) => entry.key),
+  )]
+  const moneyKeys = [...new Set(
+    series
+      .filter((entry) => entry.scale !== 'hours' && entry.key !== HOURS_KEY)
+      .map((entry) => entry.key),
+  )]
+  const moneyExtent = moneyKeys.length ? extentForKeys(months, moneyKeys) : null
+  const hoursExtent = hoursKeys.length ? extentForKeys(months, hoursKeys) : null
+
+  const seriesPaths = series.map((entry) => {
+    const extent = (entry.scale === 'hours' || entry.key === HOURS_KEY) ? hoursExtent : moneyExtent
+    if (!extent) return { ...entry, path: null }
+
+    const points = months.map((month, index) => {
+      const value = Number(month[entry.key]) || 0
+      const x = padLeft + index * step
+      const y = valueToY(value, extent, padTop, innerH)
+      return `${x},${y}`
+    })
+    return { ...entry, path: `M ${points.join(' L ')}` }
+  })
+
+  const monthLabels = months.map((month, index) => ({
+    index,
+    label: shortMonthLabel(month, language),
+    x: padLeft + index * step,
+    y: viewHeight - 6,
+  }))
+
+  const tickScale = hoursExtent && !moneyExtent ? 'hours' : (moneyExtent ? 'money' : null)
+  const tickExtent = tickScale === 'hours' ? hoursExtent : moneyExtent
+  const yTicks = tickExtent
+    ? [tickExtent.max, tickExtent.min + (tickExtent.max - tickExtent.min) / 2, tickExtent.min].map((value) => ({
+        value,
+        label: formatChartTick(value, tickScale, language),
+        y: valueToY(value, tickExtent, padTop, innerH),
+        x1: padLeft,
+        x2: viewWidth - padX,
+      }))
+    : []
+
+  return {
+    viewWidth,
+    viewHeight,
+    seriesPaths,
+    monthLabels,
+    yTicks,
+    step,
+    padX,
+    padLeft,
+    padTop,
+    padBottom,
+    plotHeight,
+    innerW,
+    innerH,
+  }
+}
+
+/**
+ * Compact axis number. The chart legend already states the unit.
+ *
+ * @param {number} value
+ * @param {'money'|'hours'} scale
+ * @param {string} [language='en']
+ * @returns {string}
+ */
+export function formatChartTick (value, scale, language = 'en') {
+  const locale = language === 'sv' ? 'sv-SE' : 'en'
+  if (scale === 'hours') {
+    return new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(value)
+  }
+  const abs = Math.abs(value)
+  return new Intl.NumberFormat(locale, {
+    notation: abs >= 1000 ? 'compact' : 'standard',
+    maximumFractionDigits: abs >= 1000 ? 1 : 0,
+  }).format(value)
+}

package/src/line-chart/line-chart.spec.js

@@ -0,0 +1,157 @@
+import {
+  MONEY_KEYS,
+  HOURS_KEY,
+  extentForKeys,
+  valueToY,
+  buildKpiChartLayout,
+  shortMonthLabel,
+} from './line-chart.js'
+
+const sampleMonths = [
+  { year: 2026, monthNumber: '01', month: 'January', projectedIncome: 100, monthlyCostOfEmployees: 50, revenue: 50, hoursWorked: 10 },
+  { year: 2026, monthNumber: '02', month: 'February', projectedIncome: 200, monthlyCostOfEmployees: 50, revenue: 150, hoursWorked: 20 },
+  { year: 2026, monthNumber: '03', month: 'March', projectedIncome: 150, monthlyCostOfEmployees: 50, revenue: 100, hoursWorked: 15 },
+]
+
+const series = [
+  { key: 'projectedIncome', label: 'income', color: 'blue' },
+  { key: 'monthlyCostOfEmployees', label: 'salary', color: 'orange' },
+  { key: 'revenue', label: 'revenue', color: 'green' },
+  { key: 'hoursWorked', label: 'hours', color: 'gray', dashed: true },
+]
+
+describe('shortMonthLabel', () => {
+  it('formats English months as three letters', () => {
+    expect(shortMonthLabel({ year: 2026, monthNumber: '01' }, 'en')).toBe('Jan')
+    expect(shortMonthLabel({ year: 2026, monthNumber: '09' }, 'en')).toBe('Sep')
+    expect(shortMonthLabel({ year: 2026, monthNumber: 12 }, 'en')).toBe('Dec')
+  })
+
+  it('formats Swedish months as three letters without trailing punctuation', () => {
+    expect(shortMonthLabel({ year: 2026, monthNumber: '01' }, 'sv')).toBe('Jan')
+    expect(shortMonthLabel({ year: 2026, monthNumber: '02' }, 'sv')).toBe('Feb')
+  })
+
+  it('falls back to the long month name when numbers are missing', () => {
+    expect(shortMonthLabel({ month: 'January' }, 'en')).toBe('Jan')
+  })
+})
+
+describe('extentForKeys', () => {
+  it('returns shared min/max across money keys', () => {
+    const extent = extentForKeys(sampleMonths, MONEY_KEYS)
+    expect(extent).toEqual({ min: 50, max: 200 })
+  })
+
+  it('expands a constant series so a flat line stays mid-range', () => {
+    const flat = [
+      { monthlyCostOfEmployees: 50 },
+      { monthlyCostOfEmployees: 50 },
+    ]
+    const extent = extentForKeys(flat, ['monthlyCostOfEmployees'])
+    expect(extent.min).toBe(49)
+    expect(extent.max).toBe(51)
+  })
+})
+
+describe('buildKpiChartLayout', () => {
+  it('spans the full viewBox width for N months', () => {
+    const layout = buildKpiChartLayout({ months: sampleMonths, series, viewWidth: 100 })
+    expect(layout).not.toBeNull()
+    expect(layout.padLeft + (sampleMonths.length - 1) * layout.step).toBeCloseTo(100 - layout.padX)
+    expect(layout.viewWidth).toBe(100)
+  })
+
+  it('keeps salary flat and distinct from income under a shared money scale', () => {
+    const layout = buildKpiChartLayout({ months: sampleMonths, series })
+    const income = layout.seriesPaths.find((s) => s.key === 'projectedIncome')
+    const salary = layout.seriesPaths.find((s) => s.key === 'monthlyCostOfEmployees')
+    const revenue = layout.seriesPaths.find((s) => s.key === 'revenue')
+    const hours = layout.seriesPaths.find((s) => s.key === HOURS_KEY)
+
+    expect(income.path).not.toBe(salary.path)
+    expect(income.path).not.toBe(revenue.path)
+    expect(salary.path).not.toBe(revenue.path)
+
+    const salaryYs = salary.path.match(/[\d.]+,([\d.]+)/g).map((p) => p.split(',')[1])
+    expect(new Set(salaryYs).size).toBe(1)
+
+    expect(hours.path).not.toBe(income.path)
+    expect(hours.dashed).toBe(true)
+  })
+
+  it('maps shared money extent extremes to plot top/bottom', () => {
+    const extent = extentForKeys(sampleMonths, MONEY_KEYS)
+    const padTop = 10
+    const plotHeight = 100
+    expect(valueToY(extent.max, extent, padTop, plotHeight)).toBeCloseTo(padTop)
+    expect(valueToY(extent.min, extent, padTop, plotHeight)).toBeCloseTo(padTop + plotHeight)
+  })
+
+  it('labels every month with a 3-letter abbreviation', () => {
+    const fiscalYear = Array.from({ length: 12 }, (_, i) => ({
+      year: 2026,
+      monthNumber: String(i + 1).padStart(2, '0'),
+      month: 'placeholder',
+      projectedIncome: 100 + i,
+      monthlyCostOfEmployees: 50,
+      revenue: 50 + i,
+      hoursWorked: 10,
+    }))
+    const layout = buildKpiChartLayout({ months: fiscalYear, series, language: 'en' })
+    expect(layout.monthLabels).toHaveLength(12)
+    expect(layout.monthLabels.map((entry) => entry.label)).toEqual([
+      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+    ])
+    expect(layout.monthLabels[0].x).toBe(layout.padLeft)
+    expect(layout.monthLabels[11].x).toBeCloseTo(layout.padLeft + 11 * layout.step)
+  })
+
+  it('defaults to a wide viewBox so meet-scaling keeps labels readable', () => {
+    const layout = buildKpiChartLayout({ months: sampleMonths, series })
+    expect(layout.viewWidth).toBe(560)
+    expect(layout.viewHeight / layout.viewWidth).toBeLessThan(0.5)
+  })
+
+  it('returns null for empty months', () => {
+    expect(buildKpiChartLayout({ months: [], series })).toBeNull()
+  })
+
+  it('plots hour series on one scale independent of money', () => {
+    const hourSeries = [
+      { key: 'forecastHours', label: 'forecast', color: 'blue', scale: 'hours' },
+      { key: 'actualHours', label: 'actual', color: 'green', scale: 'hours' },
+    ]
+    const months = [
+      { forecastHours: 0, actualHours: 40, projectedIncome: 100000 },
+      { forecastHours: 80, actualHours: 40, projectedIncome: 100000 },
+    ]
+    const layout = buildKpiChartLayout({ months, series: hourSeries })
+    const forecast = layout.seriesPaths.find((entry) => entry.key === 'forecastHours')
+    const actual = layout.seriesPaths.find((entry) => entry.key === 'actualHours')
+    const forecastStartY = Number(forecast.path.split(' ')[1].split(',')[1])
+    const actualStartY = Number(actual.path.split(' ')[1].split(',')[1])
+
+    expect(forecast.path).not.toBe(actual.path)
+    expect(forecastStartY).toBeGreaterThan(actualStartY)
+    expect(layout.yTicks.map((tick) => tick.label)).toEqual(['80', '40', '0'])
+    expect(layout.yTicks[0].y).toBeLessThan(layout.yTicks[2].y)
+  })
+
+  it('labels the money scale with compact values', () => {
+    const months = sampleMonths.map((month) => ({
+      ...month,
+      projectedIncome: month.projectedIncome * 10000,
+      monthlyCostOfEmployees: month.monthlyCostOfEmployees * 10000,
+      revenue: month.revenue * 10000,
+    }))
+    const layout = buildKpiChartLayout({
+      months,
+      series: series.filter((entry) => entry.key !== 'hoursWorked'),
+      language: 'en',
+    })
+    expect(layout.yTicks.map((tick) => tick.label)).toEqual(['2M', '1.3M', '500K'])
+    expect(layout.yTicks[0].y).toBeLessThan(layout.yTicks[2].y)
+  })
+})