@purestack/ts-components 1.1.0

package/src/standard/lineChart/lineChart.ts

@@ -0,0 +1,462 @@
+import type { SemanticTone } from '@purestack/ts-style'
+import {
+  type ComputedRef,
+  computed,
+  defineComponent,
+  type RefOrValue,
+  svg,
+  unref,
+} from 'regor'
+import {
+  type CartesianChartDomain,
+  pointIndexToCartesianChartX,
+  type ResolvedCartesianChartGridLine,
+  resolveCartesianChartDomain,
+  resolveCartesianChartGridLines,
+  valueToCartesianChartY,
+} from '../chart/cartesianChart'
+import {
+  DEFAULT_CARTESIAN_CHART_HEIGHT,
+  DEFAULT_CARTESIAN_CHART_WIDTH,
+  DEFAULT_CHART_COLORS,
+  DEFAULT_CHART_EMPTY_LABEL,
+} from '../chart/chartDefaults'
+import {
+  formatChartNumber,
+  formatChartPoint,
+  formatChartValue,
+  readChartNumber,
+  resolveChartSize,
+  resolveChartText,
+} from '../chart/chartUtils'
+import type {
+  ComponentVariant,
+  ComponentVariantMode,
+} from '../componentVariant'
+import { resolveComponentClasses } from '../componentVariant'
+
+export type LineChartCurve = 'linear' | 'smooth'
+
+export interface LineChartPoint {
+  label?: RefOrValue<string>
+  value?: RefOrValue<number | string>
+}
+
+export interface LineChartSeries {
+  label?: RefOrValue<string>
+  color?: RefOrValue<string>
+  points?: RefOrValue<Array<RefOrValue<LineChartPoint>>>
+}
+
+export interface ResolvedLineChartPoint {
+  label: string
+  value: number
+  formattedValue: string
+  x: number
+  y: number
+  valueLabelY: number
+  valueLabelBaseline: string
+}
+
+export interface ResolvedLineChartSeries {
+  label: string
+  color: string
+  path: string
+  areaPath: string
+  points: ResolvedLineChartPoint[]
+}
+
+export interface ResolvedLineChartGridLine
+  extends ResolvedCartesianChartGridLine {}
+
+export interface ResolvedLineChartLabel {
+  label: string
+  x: number
+  y: number
+}
+
+export interface LineChart {
+  series?: RefOrValue<Array<RefOrValue<LineChartSeries>>>
+  title?: RefOrValue<string>
+  description?: RefOrValue<string>
+  ariaLabel?: RefOrValue<string>
+  emptyLabel?: RefOrValue<string>
+  valueSuffix?: RefOrValue<string>
+  width?: RefOrValue<number | string>
+  height?: RefOrValue<number | string>
+  minValue?: RefOrValue<number | string>
+  maxValue?: RefOrValue<number | string>
+  curve?: RefOrValue<LineChartCurve>
+  animated?: RefOrValue<boolean | string>
+  showArea?: RefOrValue<boolean | string>
+  showPoints?: RefOrValue<boolean | string>
+  showValues?: RefOrValue<boolean | string>
+  showLabels?: RefOrValue<boolean | string>
+  showAxis?: RefOrValue<boolean | string>
+  tone?: RefOrValue<SemanticTone>
+  variant?: RefOrValue<ComponentVariant>
+  variantMode?: RefOrValue<ComponentVariantMode>
+  classes?: ComputedRef<string>
+  resolvedWidth?: ComputedRef<string | number>
+  resolvedHeight?: ComputedRef<string | number | undefined>
+  resolvedAriaLabel?: ComputedRef<string>
+  resolvedEmptyLabel?: ComputedRef<string>
+  chartSeries?: ComputedRef<ResolvedLineChartSeries[]>
+  gridLines?: ComputedRef<ResolvedLineChartGridLine[]>
+  xLabels?: ComputedRef<ResolvedLineChartLabel[]>
+  hasSeries?: ComputedRef<boolean>
+  zeroLineY?: ComputedRef<number>
+}
+
+const VALUE_LABEL_OFFSET = 2.6
+const CATEGORY_LABEL_Y = 60
+const MAX_X_LABEL_COUNT = 7
+
+const lineChartTemplate = svg`<svg
+  class="line-chart"
+  :class="classes"
+  viewBox="-6 0 112 64"
+  :width="resolvedWidth"
+  :height="resolvedHeight"
+  role="img"
+  :aria-label="resolvedAriaLabel"
+>
+  <title r-if="title">{{ title }}</title>
+  <desc r-if="description">{{ description }}</desc>
+  <g class="line-chart__grid" r-if="hasSeries && showAxis">
+    <g r-for="line in gridLines" class="line-chart__grid-line">
+      <line x1="8" x2="94" :y1="line.y" :y2="line.y"/>
+      <text x="5.4" :y="line.y">{{ line.formattedValue }}</text>
+    </g>
+  </g>
+  <line
+    r-if="hasSeries && showAxis"
+    class="line-chart__zero-line"
+    x1="8"
+    x2="94"
+    :y1="zeroLineY"
+    :y2="zeroLineY"/>
+  <g class="line-chart__areas" r-if="hasSeries && showArea">
+    <path
+      r-for="item in chartSeries"
+      class="line-chart__area"
+      :d="item.areaPath"
+      :fill="item.color"
+      :aria-label="item.label"
+    ></path>
+  </g>
+  <g class="line-chart__series" r-if="hasSeries">
+    <path
+      r-for="item in chartSeries"
+      class="line-chart__line"
+      :d="item.path"
+      :stroke="item.color"
+      :aria-label="item.label"
+    >
+      <title>{{ item.label }}</title>
+      <animate
+        r-if="animated"
+        attributeName="stroke-opacity"
+        from="0"
+        to="1"
+        dur="820ms"
+        fill="freeze"/>
+    </path>
+  </g>
+  <g class="line-chart__points" r-if="hasSeries && showPoints">
+    <g r-for="item in chartSeries" class="line-chart__point-series">
+      <circle
+        r-for="point in item.points"
+        class="line-chart__point"
+        :cx="point.x"
+        :cy="point.y"
+        r="0.9"
+        :fill="item.color"
+        :aria-label="item.label + ', ' + point.label + ': ' + point.formattedValue"
+      >
+        <title>{{ item.label + ', ' + point.label + ': ' + point.formattedValue }}</title>
+        <animate
+          r-if="animated"
+          attributeName="r"
+          from="0"
+          to="0.9"
+          dur="520ms"
+          fill="freeze"/>
+      </circle>
+    </g>
+  </g>
+  <g class="line-chart__values" r-if="hasSeries && showValues">
+    <g r-for="item in chartSeries" class="line-chart__value-series">
+      <text
+        r-for="point in item.points"
+        class="line-chart__value"
+        :x="point.x"
+        :y="point.valueLabelY"
+        text-anchor="middle"
+        :dominant-baseline="point.valueLabelBaseline"
+      >
+        {{ point.formattedValue }}
+      </text>
+    </g>
+  </g>
+  <g class="line-chart__labels" r-if="hasSeries && showLabels">
+    <text
+      r-for="label in xLabels"
+      class="line-chart__label"
+      :x="label.x"
+      :y="label.y"
+      text-anchor="middle"
+    >
+      {{ label.label }}
+    </text>
+  </g>
+  <text
+    r-if="!hasSeries"
+    class="line-chart__empty"
+    x="50"
+    y="30"
+    text-anchor="middle"
+  >
+    {{ resolvedEmptyLabel }}
+  </text>
+</svg>`
+
+function defineLineChartComponent() {
+  return defineComponent<LineChart>(lineChartTemplate, {
+    props: [
+      'series',
+      'title',
+      'description',
+      'ariaLabel',
+      'emptyLabel',
+      'valueSuffix',
+      'width',
+      'height',
+      'minValue',
+      'maxValue',
+      'curve',
+      'animated',
+      'showArea',
+      'showPoints',
+      'showValues',
+      'showLabels',
+      'showAxis',
+      'tone',
+      'variant',
+      'variantMode',
+    ],
+    context: (head) => resolveLineChart(head.props),
+  })
+}
+
+export function defineLineChartComponents() {
+  return {
+    lineChart: defineLineChartComponent(),
+  }
+}
+
+function resolveLineChart(props: LineChart): LineChart {
+  const domain = computed(() => resolveDomain(props))
+  const chartSeries = computed(() => resolveChartSeries(props, domain()))
+
+  return {
+    animated: true,
+    showArea: false,
+    showPoints: true,
+    showValues: false,
+    showLabels: true,
+    showAxis: true,
+    ...props,
+    classes: computed(() =>
+      resolveComponentClasses(props, {
+        defaultVariant: 'none',
+        defaultVariantMode: 'stateless',
+      }),
+    ),
+    resolvedWidth: computed(() =>
+      resolveChartSize(props.width, DEFAULT_CARTESIAN_CHART_WIDTH),
+    ),
+    resolvedHeight: computed(() =>
+      resolveChartSize(props.height, DEFAULT_CARTESIAN_CHART_HEIGHT),
+    ),
+    resolvedAriaLabel: computed(() => resolveAriaLabel(props)),
+    resolvedEmptyLabel: computed(
+      () => resolveChartText(props.emptyLabel) || DEFAULT_CHART_EMPTY_LABEL,
+    ),
+    chartSeries,
+    gridLines: computed(() =>
+      resolveCartesianChartGridLines(domain(), props.valueSuffix),
+    ),
+    xLabels: computed(() => resolveXLabels(chartSeries())),
+    hasSeries: computed(() => chartSeries().length > 0),
+    zeroLineY: computed(() => valueToCartesianChartY(0, domain())),
+  }
+}
+
+interface ResolvedLineChartSourceSeries {
+  label: string
+  color: string
+  points: ResolvedLineChartSourcePoint[]
+}
+
+interface ResolvedLineChartSourcePoint {
+  label: string
+  value: number
+}
+
+function resolveChartSeries(
+  props: LineChart,
+  domain: CartesianChartDomain,
+): ResolvedLineChartSeries[] {
+  const valueSuffix = resolveChartText(props.valueSuffix)
+  const curve = resolveCurve(props.curve)
+  const zeroY = valueToCartesianChartY(0, domain)
+
+  return resolveSeries(props.series).map((series, index) => {
+    const points = series.points.map((point, pointIndex) => {
+      const x = pointIndexToCartesianChartX(pointIndex, series.points.length)
+      const y = valueToCartesianChartY(point.value, domain)
+      const valueLabelY =
+        point.value < 0
+          ? y + VALUE_LABEL_OFFSET
+          : Math.max(2, y - VALUE_LABEL_OFFSET)
+
+      return {
+        label: point.label,
+        value: point.value,
+        formattedValue: formatChartValue(point.value, valueSuffix),
+        x,
+        y,
+        valueLabelY,
+        valueLabelBaseline: point.value < 0 ? 'hanging' : 'auto',
+      }
+    })
+
+    return {
+      label: series.label,
+      color:
+        series.color ||
+        DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length],
+      path: resolveLinePath(points, curve),
+      areaPath: resolveAreaPath(points, zeroY, curve),
+      points,
+    }
+  })
+}
+
+function resolveSeries(
+  seriesInput: LineChart['series'],
+): ResolvedLineChartSourceSeries[] {
+  return (unref(seriesInput) || [])
+    .map((series, index) => {
+      const resolvedSeries = unref(series)
+      return {
+        label: resolveChartText(resolvedSeries?.label) || `Series ${index + 1}`,
+        color: resolveChartText(resolvedSeries?.color),
+        points: resolvePoints(resolvedSeries?.points),
+      }
+    })
+    .filter((series) => series.points.length > 0)
+}
+
+function resolvePoints(
+  pointsInput: LineChartSeries['points'],
+): ResolvedLineChartSourcePoint[] {
+  return (unref(pointsInput) || [])
+    .map((pointInput, index) => {
+      const point = unref(pointInput)
+      const value = readChartNumber(point?.value, Number.NaN)
+      return {
+        label: resolveChartText(point?.label) || `Point ${index + 1}`,
+        value,
+      }
+    })
+    .filter((point) => Number.isFinite(point.value))
+}
+
+function resolveLinePath(
+  points: ResolvedLineChartPoint[],
+  curve: LineChartCurve,
+) {
+  if (!points.length) return ''
+  if (points.length === 1) return `M ${formatChartPoint(points[0])}`
+  if (curve === 'linear') {
+    return points
+      .map(
+        (point, index) =>
+          `${index === 0 ? 'M' : 'L'} ${formatChartPoint(point)}`,
+      )
+      .join(' ')
+  }
+
+  return [
+    `M ${formatChartPoint(points[0])}`,
+    ...points.slice(1).map((point, index) => {
+      const previous = points[index]
+      const midpointX = (previous.x + point.x) / 2
+      return [
+        'C',
+        formatChartNumber(midpointX),
+        formatChartNumber(previous.y),
+        formatChartNumber(midpointX),
+        formatChartNumber(point.y),
+        formatChartPoint(point),
+      ].join(' ')
+    }),
+  ].join(' ')
+}
+
+function resolveAreaPath(
+  points: ResolvedLineChartPoint[],
+  zeroY: number,
+  curve: LineChartCurve,
+) {
+  if (!points.length) return ''
+  const first = points[0]
+  const last = points.at(-1) || first
+  return [
+    `M ${formatChartNumber(first.x)} ${formatChartNumber(zeroY)}`,
+    resolveLinePath(points, curve).replace(/^M /, 'L '),
+    `L ${formatChartNumber(last.x)} ${formatChartNumber(zeroY)}`,
+    'Z',
+  ].join(' ')
+}
+
+function resolveXLabels(
+  series: ResolvedLineChartSeries[],
+): ResolvedLineChartLabel[] {
+  const points = series[0]?.points || []
+  if (!points.length) return []
+
+  const step = Math.max(1, Math.ceil(points.length / MAX_X_LABEL_COUNT))
+  return points
+    .filter((_, index) => index % step === 0 || index === points.length - 1)
+    .map((point) => ({
+      label: point.label,
+      x: point.x,
+      y: CATEGORY_LABEL_Y,
+    }))
+}
+
+function resolveDomain(props: LineChart): CartesianChartDomain {
+  const values = resolveSeries(props.series).flatMap((series) =>
+    series.points.map((point) => point.value),
+  )
+  return resolveCartesianChartDomain({
+    values,
+    minValue: props.minValue,
+    maxValue: props.maxValue,
+  })
+}
+
+function resolveAriaLabel(props: LineChart) {
+  return (
+    resolveChartText(props.ariaLabel) ||
+    resolveChartText(props.title) ||
+    'Line chart'
+  )
+}
+
+function resolveCurve(value: RefOrValue<LineChartCurve> | undefined) {
+  return unref(value) === 'linear' ? 'linear' : 'smooth'
+}

package/src/standard/lineChart/lineChartStyle.ts

@@ -0,0 +1,91 @@
+import {
+  styleBuilder,
+  type ThemeMode,
+  type ThemePalette,
+  themes,
+} from '@purestack/ts-style'
+
+const LINE_CHART_VALUE_FONT_SIZE = '0.15rem'
+const LINE_CHART_LABEL_FONT_SIZE = '0.1375rem'
+const LINE_CHART_AXIS_FONT_SIZE = '0.11875rem'
+const LINE_CHART_EMPTY_FONT_SIZE = '0.1625rem'
+
+export function registerLineChartStyles() {
+  themes.forEach((theme, palette) => {
+    registerLineChartBaseStyles(theme)
+    registerLineChartPaintStyles(theme, palette)
+  })
+}
+
+function registerLineChartBaseStyles(theme: ThemeMode) {
+  styleBuilder
+    .select('.line-chart__line', theme)
+    .fill('none')
+    .strokeWidth('0.72')
+    .strokeLinecap('round')
+    .strokeLinejoin('round')
+    .transition('opacity 180ms ease, filter 180ms ease')
+
+  styleBuilder
+    .select('.line-chart__area', theme)
+    .opacity('0.34')
+    .transition('opacity 180ms ease')
+
+  styleBuilder.select('.line-chart__point', theme).strokeWidth('0')
+
+  styleBuilder
+    .select('.line-chart__series:hover .line-chart__line', theme)
+    .opacity('0.54')
+
+  styleBuilder
+    .select('.line-chart__series:hover .line-chart__line:hover', theme)
+    .opacity('1')
+    .filter('brightness(1.12)')
+
+  styleBuilder
+    .select(
+      '.line-chart__label, .line-chart__value, .line-chart__empty, .line-chart__grid-line text',
+      theme,
+    )
+    .pointerEvents('none')
+    .letterSpacing('normal')
+}
+
+function registerLineChartPaintStyles(theme: ThemeMode, palette: ThemePalette) {
+  styleBuilder
+    .select('.line-chart__grid-line line', theme)
+    .stroke(palette.current.surfaceAlt.rest.border)
+    .strokeWidth('0.22')
+
+  styleBuilder
+    .select('.line-chart__zero-line', theme)
+    .stroke(palette.current.border.subtle)
+    .strokeWidth('0.36')
+
+  styleBuilder
+    .select('.line-chart__value', theme)
+    .fill(palette.current.text.default)
+    .fontSize(LINE_CHART_VALUE_FONT_SIZE)
+    .fontWeight(palette.font.weight.w700)
+
+  styleBuilder
+    .select('.line-chart__label', theme)
+    .fill(palette.current.text.subtle)
+    .fontSize(LINE_CHART_LABEL_FONT_SIZE)
+    .fontWeight(palette.font.weight.w700)
+
+  styleBuilder
+    .select('.line-chart__grid-line text', theme)
+    .fill(palette.current.text.subtle)
+    .fontSize(LINE_CHART_AXIS_FONT_SIZE)
+    .fontWeight(palette.font.weight.w500)
+    .set('dominant-baseline', 'middle')
+    .set('text-anchor', 'end')
+
+  styleBuilder
+    .select('.line-chart__empty', theme)
+    .fill(palette.current.text.subtle)
+    .fontSize(LINE_CHART_EMPTY_FONT_SIZE)
+    .fontWeight(palette.font.weight.w700)
+    .set('dominant-baseline', 'middle')
+}