@opendata-ai/openchart-core 2.9.0 → 2.10.0

package/dist/index.d.ts

@@ -1,10 +1,15 @@
 /**
  * Responsive breakpoints and layout strategies.
  *
- * Three breakpoints based on container width:
+ * Width breakpoints:
  * - compact: < 400px (mobile, small embeds)
  * - medium: 400-700px (tablet, sidebars)
  * - full: > 700px (desktop, full-width)
+ *
+ * Height classes:
+ * - cramped: < 200px (dashboard widgets, thumbnails)
+ * - short: 200-350px (embedded panels, short containers)
+ * - normal: > 350px (standard containers)
  */
 /** Responsive breakpoint based on container width. */
 type Breakpoint = 'compact' | 'medium' | 'full';
@@ -12,6 +17,12 @@ type Breakpoint = 'compact' | 'medium' | 'full';
  * Determine the breakpoint for a given container width.
  */
 declare function getBreakpoint(width: number): Breakpoint;
+/** Height classification based on container height. */
+type HeightClass = 'cramped' | 'short' | 'normal';
+/**
+ * Determine the height class for a given container height.
+ */
+declare function getHeightClass(height: number): HeightClass;
 /** Label display mode at a given breakpoint. */
 type LabelMode = 'all' | 'important' | 'none';
 /** Legend position at a given breakpoint. */
@@ -20,9 +31,11 @@ type LegendPosition = 'top' | 'right' | 'bottom' | 'bottom-right' | 'inline';
 type AnnotationPosition = 'inline' | 'tooltip-only';
 /** Axis label density (controls tick count reduction). */
 type AxisLabelDensity = 'full' | 'reduced' | 'minimal';
+/** Chrome display mode based on available height. */
+type ChromeMode = 'full' | 'compact' | 'hidden';
 /**
  * Layout strategy defining how the visualization adapts to available space.
- * Returned by getLayoutStrategy() based on the current breakpoint.
+ * Returned by getLayoutStrategy() based on width breakpoint and height class.
  */
 interface LayoutStrategy {
     /** How data labels are displayed. */
@@ -33,15 +46,21 @@ interface LayoutStrategy {
     annotationPosition: AnnotationPosition;
     /** Axis tick density. */
     axisLabelDensity: AxisLabelDensity;
+    /** Chrome display mode: full, compact (title only), or hidden. */
+    chromeMode: ChromeMode;
+    /** Max fraction of container height for legend (0-1). -1 means unlimited. */
+    legendMaxHeight: number;
 }
 /**
- * Get the layout strategy for a given breakpoint.
+ * Get the layout strategy for a given breakpoint and height class.
  *
  * Compact: minimal chrome, no inline labels, legend on top, reduced axes.
  * Medium: moderate labels, legend on top, reduced axes.
  * Full: all labels, legend on right, full axes.
+ *
+ * Height constraints further reduce chrome and legend when container is short.
  */
-declare function getLayoutStrategy(breakpoint: Breakpoint): LayoutStrategy;
+declare function getLayoutStrategy(breakpoint: Breakpoint, heightClass?: HeightClass): LayoutStrategy;
 
 /**
  * Table column configuration types.
@@ -1274,6 +1293,8 @@ interface LegendEntry {
     shape: 'circle' | 'square' | 'line';
     /** Whether this entry is currently highlighted/active. */
     active?: boolean;
+    /** True for overflow indicator entries ("+N more"). Not interactive. */
+    overflow?: boolean;
 }
 /** Resolved legend layout with position and entries. */
 interface LegendLayout {
@@ -1788,6 +1809,14 @@ declare function resolveTheme(userTheme?: ThemeConfig, base?: Theme): ResolvedTh
  *
  * Takes a Chrome spec + resolved theme and produces a ResolvedChrome
  * with computed text positions, styles, and total chrome heights.
+ *
+ * Supports three chrome modes:
+ * - full: all chrome elements rendered at normal size
+ * - compact: title only, no subtitle/source/byline/footer
+ * - hidden: no chrome at all (maximizes chart area)
+ *
+ * Font sizes scale down continuously at narrow widths to keep
+ * chrome proportional to the container.
  */
 
 /**
@@ -1800,8 +1829,10 @@ declare function resolveTheme(userTheme?: ThemeConfig, base?: Theme): ResolvedTh
  * @param theme - The fully resolved theme.
  * @param width - Total available width in pixels.
  * @param measureText - Optional real text measurement function from the adapter.
+ * @param chromeMode - Chrome display mode: full, compact (title only), or hidden.
+ * @param padding - Override padding (for scaled padding from dimensions).
  */
-declare function computeChrome(chrome: Chrome | undefined, theme: ResolvedTheme, width: number, measureText?: MeasureTextFn): ResolvedChrome;
+declare function computeChrome(chrome: Chrome | undefined, theme: ResolvedTheme, width: number, measureText?: MeasureTextFn, chromeMode?: ChromeMode, padding?: number): ResolvedChrome;
 
 /**
  * Heuristic text measurement for environments without a DOM.
@@ -2113,4 +2144,4 @@ declare function scatterChart(data: DataRow[], x: FieldRef, y: FieldRef, options
  */
 declare function dataTable(data: DataRow[], options?: TableBuilderOptions): TableSpec;
 
-export { type A11yMetadata, type AggregateOp, type Annotation, type AnnotationAnchor, type AnnotationOffset, type AnnotationPosition, type ArcMark, type AreaMark, type AxisConfig, type AxisLabelDensity, type AxisLayout, type AxisTick, type BarColumnConfig, type BarTableCell, type Breakpoint, CATEGORICAL_PALETTE, CHART_ENCODING_RULES, CHART_TYPES, type CategoricalPalette, type CategoryColorsConfig, type CategoryTableCell, type CellStyle, type ChannelRule, type ChartBuilderOptions, type ChartEventHandlers, type ChartLayout, type ChartSpec, type ChartSpecOverride, type ChartSpecWithoutData, type ChartType, type Chrome, type ChromeDefaults, type ChromeKey, type ChromeText, type ChromeTextStyle, type ColorBlindnessType, type ColumnConfig, type CompileOptions, type CompileTableOptions, DEFAULT_THEME, DIVERGING_PALETTES, type DarkMode, type DataRow, type DateGranularity, type DivergingPalette, type ElementEdit, type Encoding, type EncodingChannel, type EncodingRule, type FieldRef, type FieldType, type FlagTableCell, GRAPH_ENCODING_RULES, type GraphChannelRule, type GraphEdge, type GraphEdgeLayout, type GraphEncoding, type GraphEncodingChannel, type GraphLayout, type GraphLayoutConfig, type GraphNode, type GraphNodeLayout, type GraphSpec, type GraphSpecWithoutData, type Gridline, type HeatmapColumnConfig, type HeatmapTableCell, type ImageColumnConfig, type ImageTableCell, type LabelCandidate, type LabelConfig, type LabelDensity, type LabelMode, type LabelPriority, type LayoutStrategy, type LegendConfig, type LegendEntry, type LegendLayout, type LegendPosition, type LineMark, type Margins, type Mark, type MarkAria, type MarkEvent, type MeasureTextFn, type NodeOverride, type PaginationState, type Point, type PointMark, type RangeAnnotation, type Rect, type RectMark, type RefLineAnnotation, type ResolvedAnnotation, type ResolvedChrome, type ResolvedChromeElement, type ResolvedColumn, type ResolvedLabel, type ResolvedTheme, SEQUENTIAL_PALETTES, type ScaleConfig, type SequentialPalette, type SeriesStyle, type SortState, type SparklineColumnConfig, type SparklineData, type SparklineTableCell, type StoredVizSpec, type TableBuilderOptions, type TableCell, type TableCellBase, type TableLayout, type TableRow, type TableSpec, type TableSpecWithoutData, type TextAnnotation, type TextStyle, type TextTableCell, type Theme, type ThemeChromeDefaults, type ThemeColors, type ThemeConfig, type ThemeFontSizes, type ThemeFontWeights, type ThemeFonts, type ThemeSpacing, type TooltipContent, type TooltipField, type VizSpec, abbreviateNumber, adaptColorForDarkMode, adaptTheme, areaChart, barChart, buildD3Formatter, checkPaletteDistinguishability, columnChart, computeChrome, contrastRatio, dataTable, donutChart, dotChart, estimateTextWidth, findAccessibleColor, formatDate, formatNumber, generateAltText, generateAriaLabels, generateDataTable, getBreakpoint, getLayoutStrategy, inferFieldType, isChartSpec, isGraphSpec, isRangeAnnotation, isRefLineAnnotation, isTableSpec, isTextAnnotation, lineChart, meetsAA, pieChart, resolveCollisions, resolveTheme, scatterChart, simulateColorBlindness };
+export { type A11yMetadata, type AggregateOp, type Annotation, type AnnotationAnchor, type AnnotationOffset, type AnnotationPosition, type ArcMark, type AreaMark, type AxisConfig, type AxisLabelDensity, type AxisLayout, type AxisTick, type BarColumnConfig, type BarTableCell, type Breakpoint, CATEGORICAL_PALETTE, CHART_ENCODING_RULES, CHART_TYPES, type CategoricalPalette, type CategoryColorsConfig, type CategoryTableCell, type CellStyle, type ChannelRule, type ChartBuilderOptions, type ChartEventHandlers, type ChartLayout, type ChartSpec, type ChartSpecOverride, type ChartSpecWithoutData, type ChartType, type Chrome, type ChromeDefaults, type ChromeKey, type ChromeMode, type ChromeText, type ChromeTextStyle, type ColorBlindnessType, type ColumnConfig, type CompileOptions, type CompileTableOptions, DEFAULT_THEME, DIVERGING_PALETTES, type DarkMode, type DataRow, type DateGranularity, type DivergingPalette, type ElementEdit, type Encoding, type EncodingChannel, type EncodingRule, type FieldRef, type FieldType, type FlagTableCell, GRAPH_ENCODING_RULES, type GraphChannelRule, type GraphEdge, type GraphEdgeLayout, type GraphEncoding, type GraphEncodingChannel, type GraphLayout, type GraphLayoutConfig, type GraphNode, type GraphNodeLayout, type GraphSpec, type GraphSpecWithoutData, type Gridline, type HeatmapColumnConfig, type HeatmapTableCell, type HeightClass, type ImageColumnConfig, type ImageTableCell, type LabelCandidate, type LabelConfig, type LabelDensity, type LabelMode, type LabelPriority, type LayoutStrategy, type LegendConfig, type LegendEntry, type LegendLayout, type LegendPosition, type LineMark, type Margins, type Mark, type MarkAria, type MarkEvent, type MeasureTextFn, type NodeOverride, type PaginationState, type Point, type PointMark, type RangeAnnotation, type Rect, type RectMark, type RefLineAnnotation, type ResolvedAnnotation, type ResolvedChrome, type ResolvedChromeElement, type ResolvedColumn, type ResolvedLabel, type ResolvedTheme, SEQUENTIAL_PALETTES, type ScaleConfig, type SequentialPalette, type SeriesStyle, type SortState, type SparklineColumnConfig, type SparklineData, type SparklineTableCell, type StoredVizSpec, type TableBuilderOptions, type TableCell, type TableCellBase, type TableLayout, type TableRow, type TableSpec, type TableSpecWithoutData, type TextAnnotation, type TextStyle, type TextTableCell, type Theme, type ThemeChromeDefaults, type ThemeColors, type ThemeConfig, type ThemeFontSizes, type ThemeFontWeights, type ThemeFonts, type ThemeSpacing, type TooltipContent, type TooltipField, type VizSpec, abbreviateNumber, adaptColorForDarkMode, adaptTheme, areaChart, barChart, buildD3Formatter, checkPaletteDistinguishability, columnChart, computeChrome, contrastRatio, dataTable, donutChart, dotChart, estimateTextWidth, findAccessibleColor, formatDate, formatNumber, generateAltText, generateAriaLabels, generateDataTable, getBreakpoint, getHeightClass, getLayoutStrategy, inferFieldType, isChartSpec, isGraphSpec, isRangeAnnotation, isRefLineAnnotation, isTableSpec, isTextAnnotation, lineChart, meetsAA, pieChart, resolveCollisions, resolveTheme, scatterChart, simulateColorBlindness };

package/dist/index.js

@@ -922,10 +922,19 @@ function normalizeChromeText(value) {
   if (typeof value === "string") return { text: value };
   return { text: value.text, style: value.style, offset: value.offset };
 }
-function buildTextStyle(defaults, fontFamily, textColor, overrides) {
+function scaleFontSize(baseFontSize, width) {
+  if (width >= 500) return baseFontSize;
+  if (width <= 250) return Math.max(Math.round(baseFontSize * 0.72), 10);
+  const t = (width - 250) / 250;
+  return Math.max(Math.round(baseFontSize * (0.72 + t * 0.28)), 10);
+}
+function buildTextStyle(defaults, fontFamily, textColor, width, overrides) {
+  const hasExplicitSize = overrides?.fontSize !== void 0;
+  const baseFontSize = overrides?.fontSize ?? defaults.fontSize;
+  const fontSize = hasExplicitSize ? baseFontSize : scaleFontSize(baseFontSize, width);
   return {
     fontFamily: overrides?.fontFamily ?? fontFamily,
-    fontSize: overrides?.fontSize ?? defaults.fontSize,
+    fontSize,
     fontWeight: overrides?.fontWeight ?? defaults.fontWeight,
     fill: overrides?.color ?? textColor ?? defaults.color,
     lineHeight: defaults.lineHeight,
@@ -944,15 +953,15 @@ function estimateLineCount(text, style, maxWidth, measureText) {
   if (fullWidth <= maxWidth) return 1;
   return Math.ceil(fullWidth / maxWidth);
 }
-function computeChrome(chrome, theme, width, measureText) {
-  if (!chrome) {
+function computeChrome(chrome, theme, width, measureText, chromeMode = "full", padding) {
+  if (!chrome || chromeMode === "hidden") {
     return { topHeight: 0, bottomHeight: 0 };
   }
-  const padding = theme.spacing.padding;
+  const pad2 = padding ?? theme.spacing.padding;
   const chromeGap = theme.spacing.chromeGap;
-  const maxWidth = width - padding * 2;
+  const maxWidth = width - pad2 * 2;
   const fontFamily = theme.fonts.family;
-  let topY = padding;
+  let topY = pad2;
   const topElements = {};
   const titleNorm = normalizeChromeText(chrome.title);
   if (titleNorm) {
@@ -960,12 +969,13 @@ function computeChrome(chrome, theme, width, measureText) {
       theme.chrome.title,
       fontFamily,
       theme.chrome.title.color,
+      width,
       titleNorm.style
     );
     const lineCount = estimateLineCount(titleNorm.text, style, maxWidth, measureText);
     const element = {
       text: titleNorm.text,
-      x: padding + (titleNorm.offset?.dx ?? 0),
+      x: pad2 + (titleNorm.offset?.dx ?? 0),
       y: topY + (titleNorm.offset?.dy ?? 0),
       maxWidth,
       style
@@ -973,18 +983,19 @@ function computeChrome(chrome, theme, width, measureText) {
     topElements.title = element;
     topY += estimateTextHeight(style.fontSize, lineCount, style.lineHeight) + chromeGap;
   }
-  const subtitleNorm = normalizeChromeText(chrome.subtitle);
+  const subtitleNorm = chromeMode === "compact" ? null : normalizeChromeText(chrome.subtitle);
   if (subtitleNorm) {
     const style = buildTextStyle(
       theme.chrome.subtitle,
       fontFamily,
       theme.chrome.subtitle.color,
+      width,
       subtitleNorm.style
     );
     const lineCount = estimateLineCount(subtitleNorm.text, style, maxWidth, measureText);
     const element = {
       text: subtitleNorm.text,
-      x: padding + (subtitleNorm.offset?.dx ?? 0),
+      x: pad2 + (subtitleNorm.offset?.dx ?? 0),
       y: topY + (subtitleNorm.offset?.dy ?? 0),
       maxWidth,
       style
@@ -993,7 +1004,14 @@ function computeChrome(chrome, theme, width, measureText) {
     topY += estimateTextHeight(style.fontSize, lineCount, style.lineHeight) + chromeGap;
   }
   const hasTopChrome = titleNorm || subtitleNorm;
-  const topHeight = hasTopChrome ? topY - padding + theme.spacing.chromeToChart - chromeGap : 0;
+  const topHeight = hasTopChrome ? topY - pad2 + theme.spacing.chromeToChart - chromeGap : 0;
+  if (chromeMode === "compact") {
+    return {
+      topHeight,
+      bottomHeight: 0,
+      ...topElements
+    };
+  }
   const bottomElements = {};
   let bottomHeight = 0;
   const bottomItems = [];
@@ -1024,12 +1042,18 @@ function computeChrome(chrome, theme, width, measureText) {
   if (bottomItems.length > 0) {
     bottomHeight += theme.spacing.chartToFooter;
     for (const item of bottomItems) {
-      const style = buildTextStyle(item.defaults, fontFamily, item.defaults.color, item.norm.style);
+      const style = buildTextStyle(
+        item.defaults,
+        fontFamily,
+        item.defaults.color,
+        width,
+        item.norm.style
+      );
       const lineCount = estimateLineCount(item.norm.text, style, maxWidth, measureText);
       const height = estimateTextHeight(style.fontSize, lineCount, style.lineHeight);
       bottomElements[item.key] = {
         text: item.norm.text,
-        x: padding + (item.norm.offset?.dx ?? 0),
+        x: pad2 + (item.norm.offset?.dx ?? 0),
         y: bottomHeight + (item.norm.offset?.dy ?? 0),
         // offset from where bottom chrome starts
         maxWidth,
@@ -1038,7 +1062,7 @@ function computeChrome(chrome, theme, width, measureText) {
       bottomHeight += height + chromeGap;
     }
     bottomHeight -= chromeGap;
-    bottomHeight += padding;
+    bottomHeight += pad2;
   }
   return {
     topHeight,
@@ -1056,31 +1080,65 @@ function getBreakpoint(width) {
   if (width <= BREAKPOINT_MEDIUM_MAX) return "medium";
   return "full";
 }
-function getLayoutStrategy(breakpoint) {
+var HEIGHT_CRAMPED_MAX = 200;
+var HEIGHT_SHORT_MAX = 350;
+function getHeightClass(height) {
+  if (height < HEIGHT_CRAMPED_MAX) return "cramped";
+  if (height <= HEIGHT_SHORT_MAX) return "short";
+  return "normal";
+}
+function getWidthStrategy(breakpoint) {
   switch (breakpoint) {
     case "compact":
       return {
         labelMode: "none",
         legendPosition: "top",
         annotationPosition: "tooltip-only",
-        axisLabelDensity: "minimal"
+        axisLabelDensity: "minimal",
+        chromeMode: "full",
+        legendMaxHeight: -1
       };
     case "medium":
       return {
         labelMode: "important",
         legendPosition: "top",
         annotationPosition: "inline",
-        axisLabelDensity: "reduced"
+        axisLabelDensity: "reduced",
+        chromeMode: "full",
+        legendMaxHeight: -1
       };
     case "full":
       return {
         labelMode: "all",
         legendPosition: "right",
         annotationPosition: "inline",
-        axisLabelDensity: "full"
+        axisLabelDensity: "full",
+        chromeMode: "full",
+        legendMaxHeight: -1
       };
   }
 }
+function applyHeightConstraints(strategy, heightClass) {
+  if (heightClass === "normal") return strategy;
+  if (heightClass === "cramped") {
+    return {
+      ...strategy,
+      chromeMode: "hidden",
+      legendMaxHeight: 0,
+      labelMode: "none",
+      annotationPosition: "tooltip-only"
+    };
+  }
+  return {
+    ...strategy,
+    chromeMode: "compact",
+    legendMaxHeight: 0.15
+  };
+}
+function getLayoutStrategy(breakpoint, heightClass = "normal") {
+  const base = getWidthStrategy(breakpoint);
+  return applyHeightConstraints(base, heightClass);
+}
 
 // src/labels/collision.ts
 var PRIORITY_ORDER = {
@@ -2511,6 +2569,7 @@ export {
   generateAriaLabels,
   generateDataTable,
   getBreakpoint,
+  getHeightClass,
   getLayoutStrategy,
   inferFieldType,
   isChartSpec,