@pgcorp/ui-kit 0.8.0 → 0.9.0

package/src/internal/chartGeometry.ts

@@ -79,6 +79,7 @@ export interface ChartLegendItem {
 export interface ChartTick {
   readonly value: number
   readonly label: string
+  readonly displayLabel: string
   readonly position: number
 }
 
@@ -87,6 +88,7 @@ export interface ChartCategoryLabel {
   readonly label: string
   readonly lines: readonly string[]
   readonly x: number
+  readonly textAnchor: 'start' | 'middle' | 'end'
 }
 
 export interface ChartGridLine {
@@ -158,6 +160,12 @@ interface PlotRect {
   readonly height: number
 }
 
+interface ResolvedDomain {
+  readonly minimum: number
+  readonly maximum: number
+  readonly ticks: readonly number[]
+}
+
 const SIZE_DIMENSIONS: Readonly<Record<SChartSize, ChartDimensions>> = {
   compact: { width: 360, height: 96 },
   sm: { width: 640, height: 240 },
@@ -393,6 +401,7 @@ function resolvePlot(
   xAxis: boolean,
   yAxis: boolean,
   dataLabels: SChartDataLabels,
+  yTickLabels: readonly string[],
 ): PlotRect {
   if (type === 'pie' || type === 'donut') {
     const inset = size === 'compact' ? 4 : 12
@@ -403,7 +412,15 @@ function resolvePlot(
     : (size === 'compact' ? 14 : 24)
   const right = size === 'compact' ? 6 : 16
   const bottom = xAxis ? (size === 'compact' ? 32 : 48) : (size === 'compact' ? 5 : 12)
-  const left = yAxis ? (size === 'compact' ? 34 : 54) : (size === 'compact' ? 6 : 14)
+  const defaultLeft = yAxis ? (size === 'compact' ? 34 : 54) : (size === 'compact' ? 6 : 14)
+  const tickFontSize = size === 'compact' ? 9 : 11
+  const tickWidth = yAxis
+    ? Math.max(0, ...yTickLabels.map((label) => estimateAxisTextWidth(label, tickFontSize)))
+    : 0
+  const desiredLeft = yAxis ? Math.max(defaultLeft, Math.ceil(tickWidth + 16)) : defaultLeft
+  const minimumPlotWidth = Math.min(size === 'compact' ? 72 : 120, dimensions.width * 0.4)
+  const maximumLeft = Math.max(0, dimensions.width - right - minimumPlotWidth)
+  const left = Math.min(desiredLeft, maximumLeft)
   return {
     x: left,
     y: top,
@@ -412,6 +429,28 @@ function resolvePlot(
   }
 }
 
+function estimateAxisTextWidth(label: string, fontSize: number): number {
+  const units = Array.from(label).reduce((total, character) => {
+    if (/\s/u.test(character)) return total + 0.36
+    if (/[.,:;!|ilI1'`]/u.test(character)) return total + 0.34
+    if (/[MW@%ШЩЖЮ]/u.test(character)) return total + 0.92
+    return total + 0.62
+  }, 0)
+  return units * fontSize
+}
+
+function truncateAxisLabelToWidth(label: string, availableWidth: number, fontSize: number): string {
+  if (estimateAxisTextWidth(label, fontSize) <= availableWidth) return label
+  const ellipsis = '…'
+  const characters = Array.from(label)
+  while (characters.length > 0) {
+    const candidate = `${characters.join('')}${ellipsis}`
+    if (estimateAxisTextWidth(candidate, fontSize) <= availableWidth) return candidate
+    characters.pop()
+  }
+  return ellipsis
+}
+
 function truncateAxisWord(word: string, maximumCharacters: number): string {
   if (word.length <= maximumCharacters) return word
   return `${word.slice(0, Math.max(1, maximumCharacters - 1))}…`
@@ -461,16 +500,9 @@ function cartesianModel(
   series: readonly SChartSeries[],
   dimensions: ChartDimensions,
   plot: PlotRect,
+  resolvedDomain: ResolvedDomain,
+  yTickLabels: readonly string[],
 ): Omit<ChartModel, 'empty' | 'emptyReason' | 'slices' | 'centerX' | 'centerY'> {
-  const domainValues = input.type === 'bar' && input.barMode === 'stacked'
-    ? resolveStackedDomainValues(series, categories.length)
-    : series.flatMap((item) => [...item.values])
-  const resolvedDomain = resolveDomain(
-    input.domain,
-    domainValues,
-    input.type === 'bar' || input.type === 'area',
-    input.yTickCount,
-  )
   const range = resolvedDomain.maximum - resolvedDomain.minimum
   const yAt = (value: number): number => plot.y + plot.height - ((value - resolvedDomain.minimum) / range) * plot.height
   const baselineY = Math.max(plot.y, Math.min(plot.y + plot.height, yAt(0)))
@@ -552,17 +584,57 @@ function cartesianModel(
     if (input.xLabels === 'endpoints') return index === 0 || index === categories.length - 1
     return categories.length <= 6 || index === 0 || index === categories.length - 1
   }
-  const xLabels = categories.flatMap((category, index) => showXLabel(index)
-    ? [{
+  const visibleCategories = categories
+    .map((category, index) => ({ category, index, x: xAt(index) }))
+    .filter(({ index }) => showXLabel(index))
+  const xLabels = visibleCategories.map(({ category, x }, visibleIndex): ChartCategoryLabel => {
+    const previous = visibleCategories[visibleIndex - 1]
+    const next = visibleCategories[visibleIndex + 1]
+    if (visibleCategories.length === 1) {
+      return {
+        key: category.key,
+        label: category.label,
+        lines: wrapAxisLabel(category.label, plot.width),
+        x: plot.x + plot.width / 2,
+        textAnchor: 'middle',
+      }
+    }
+    if (!previous) {
+      const rightBoundary = (x + next!.x) / 2
+      return {
+        key: category.key,
+        label: category.label,
+        lines: wrapAxisLabel(category.label, rightBoundary - plot.x),
+        x: plot.x,
+        textAnchor: 'start',
+      }
+    }
+    if (!next) {
+      const leftBoundary = (previous.x + x) / 2
+      return {
         key: category.key,
         label: category.label,
-        lines: wrapAxisLabel(category.label, categoryBand),
-        x: xAt(index),
-      }]
-    : [])
-  const yTicks = resolvedDomain.ticks.map((value) => ({
+        lines: wrapAxisLabel(category.label, plot.x + plot.width - leftBoundary),
+        x: plot.x + plot.width,
+        textAnchor: 'end',
+      }
+    }
+    const leftBoundary = (previous.x + x) / 2
+    const rightBoundary = (x + next.x) / 2
+    return {
+      key: category.key,
+      label: category.label,
+      lines: wrapAxisLabel(category.label, 2 * Math.min(x - leftBoundary, rightBoundary - x)),
+      x,
+      textAnchor: 'middle',
+    }
+  })
+  const tickFontSize = input.size === 'compact' ? 9 : 11
+  const tickLabelWidth = Math.max(1, plot.x - 16)
+  const yTicks = resolvedDomain.ticks.map((value, index) => ({
     value,
-    label: formatValue(input.valueFormatter, value, `yTick.${value}`),
+    label: yTickLabels[index]!,
+    displayLabel: truncateAxisLabelToWidth(yTickLabels[index]!, tickLabelWidth, tickFontSize),
     position: yAt(value),
   }))
   const horizontalGrid = yTicks.map((tick) => ({
@@ -725,6 +797,32 @@ export function resolveChartModel(input: ResolveChartModelInput): ChartModel {
       centerY: dimensions.height / 2,
     }
   }
+  if (input.type === 'pie' || input.type === 'donut') {
+    const plot = resolvePlot(
+      dimensions,
+      input.type,
+      input.size,
+      input.xAxis,
+      input.yAxis,
+      input.dataLabels,
+      [],
+    )
+    return radialModel(input, categories, series, dimensions, plot)
+  }
+  const domainValues = input.type === 'bar' && input.barMode === 'stacked'
+    ? resolveStackedDomainValues(series, categories.length)
+    : series.flatMap((item) => [...item.values])
+  const resolvedDomain = resolveDomain(
+    input.domain,
+    domainValues,
+    input.type === 'bar' || input.type === 'area',
+    input.yTickCount,
+  )
+  const yTickLabels = resolvedDomain.ticks.map((value) => formatValue(
+    input.valueFormatter,
+    value,
+    `yTick.${value}`,
+  ))
   const plot = resolvePlot(
     dimensions,
     input.type,
@@ -732,11 +830,17 @@ export function resolveChartModel(input: ResolveChartModelInput): ChartModel {
     input.xAxis,
     input.yAxis,
     input.dataLabels,
+    yTickLabels,
+  )
+  const model = cartesianModel(
+    input,
+    categories,
+    series,
+    dimensions,
+    plot,
+    resolvedDomain,
+    yTickLabels,
   )
-  if (input.type === 'pie' || input.type === 'donut') {
-    return radialModel(input, categories, series, dimensions, plot)
-  }
-  const model = cartesianModel(input, categories, series, dimensions, plot)
   return {
     ...model,
     empty: false,

package/src/styles/tokens.css

@@ -116,6 +116,9 @@
   --s-control-hitbox-md: 2.5rem;
   --s-control-hitbox-lg: 3rem;
   --s-control-indicator-size: 1.25rem;
+  --s-resize-handle-hitbox-compact: 0.375rem;
+  --s-resize-handle-hitbox-standard: 0.75rem;
+  --s-resize-handle-hitbox-spacious: 2rem;
   --s-icon-size-2xs: 0.75rem;
   --s-icon-size-xs: 1rem;
   --s-icon-size-sm: 1.25rem;