@ossy/design-system 3.20.1 → 3.22.0

package/src/dashboard-layout/DashboardLayout.stories.jsx

@@ -0,0 +1,125 @@
+import React from 'react'
+import { useState } from 'storybook/preview-api'
+import { Button } from '../button'
+import { ContextMenu } from '../context-menu'
+import { Dropdown } from '../dropdown'
+import { Panel } from '../panel'
+import { Text } from '../text'
+import {
+  DASHBOARD_PANEL_SIZES,
+  DASHBOARD_SHAPES,
+  DashboardLayout,
+  dashboardShapeSpan,
+} from './DashboardLayout.jsx'
+
+const PANELS = [
+  { id: 'current', title: 'Current month', body: 'Compact metric widget.' },
+  { id: 'margin', title: 'Assignment margin', body: 'Wide widget beside a compact one.' },
+  { id: 'leakage', title: 'Admin leakage', body: 'Half-width widget.' },
+  { id: 'hours', title: 'Hours', body: 'Half-width widget.' },
+  { id: 'forecast', title: 'Forecast', body: 'Full-width widget.' },
+]
+
+const SHAPE_LABELS = {
+  stack: 'Stack',
+  halves: 'Halves',
+  thirds: 'Thirds',
+  quarters: 'Quarters',
+  'wide-narrow': 'Wide and narrow',
+  'narrow-wide': 'Narrow and wide',
+  hero: 'Hero',
+}
+
+export default {
+  title: 'Design System/Layout/Dashboard',
+  component: DashboardLayout,
+  args: {
+    gap: 'm',
+    shape: 'halves',
+  },
+  argTypes: {
+    gap: {
+      control: 'inline-radio',
+      options: ['xs', 's', 'm', 'l', 'xl'],
+      description: 'Space between panels.',
+    },
+    shape: {
+      control: {
+        type: 'select',
+        labels: SHAPE_LABELS,
+      },
+      options: DASHBOARD_SHAPES.map((shape) => shape.id),
+      description: 'Repeating panel sizes for this dashboard.',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '12-column grid for dashboard widgets. A shape repeats a fixed set of sizes across the panels. Narrow containers stack every panel.',
+      },
+    },
+  },
+}
+
+function Sample ({ title, body, size, onSize }) {
+  return (
+    <Panel
+      title={title}
+      style={{ height: 'auto' }}
+      actions={(
+        <Dropdown
+          trigger={(
+            <Button
+              variant="command"
+              prefix="more-vertical-alt"
+              aria-label="Size"
+              title="Size"
+            />
+          )}
+        >
+          <ContextMenu>
+            {DASHBOARD_PANEL_SIZES.map((entry) => (
+              <ContextMenu.Item
+                key={entry.id}
+                prefix={entry.id === size ? 'check' : undefined}
+                aria-current={entry.id === size ? 'true' : undefined}
+                onClick={() => onSize(entry.span)}
+              >
+                {entry.id}
+              </ContextMenu.Item>
+            ))}
+          </ContextMenu>
+        </Dropdown>
+      )}
+    >
+      <Text variant="small" style={{ padding: 'var(--space-m)' }}>{body}</Text>
+    </Panel>
+  )
+}
+
+export const Default = {
+  render: function Render ({ gap, shape }) {
+    const [spans, setSpans] = useState({})
+    return (
+      <DashboardLayout gap={gap} shape={shape}>
+        {PANELS.map((panel, index) => {
+          const span = spans[panel.id] ?? dashboardShapeSpan(shape, index)
+          const size = DASHBOARD_PANEL_SIZES.find((entry) => entry.span === span)?.id
+          return (
+            <DashboardLayout.Widget key={panel.id} span={span}>
+              <Sample
+                title={panel.title}
+                body={panel.body}
+                size={size}
+                onSize={(next) => {
+                  setSpans((current) => ({ ...current, [panel.id]: next }))
+                }}
+              />
+            </DashboardLayout.Widget>
+          )
+        })}
+      </DashboardLayout>
+    )
+  },
+}

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)
+}