@opendata-ai/openchart-core 7.0.3 → 7.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +17 -4
- package/dist/index.js +11 -4
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/src/colors/__tests__/contrast.test.ts +41 -1
- package/src/colors/contrast.ts +17 -0
- package/src/colors/index.ts +1 -1
- package/src/index.ts +1 -0
- package/src/styles/tokens.css +7 -4
- package/src/theme/__tests__/dark-mode.test.ts +14 -4
- package/src/theme/__tests__/defaults.test.ts +2 -2
- package/src/theme/defaults.ts +4 -4
- package/src/theme/resolve.ts +3 -0
- package/src/types/layout.ts +3 -0
- package/src/types/spec.ts +3 -3
package/dist/index.d.ts
CHANGED
|
@@ -429,15 +429,15 @@ interface EncodingChannel<TData extends DataRow = DataRow> {
|
|
|
429
429
|
* - null | false: no stacking -- renders overlap (area) or grouped/dodged (bar)
|
|
430
430
|
*
|
|
431
431
|
* **Defaults differ by chart type:**
|
|
432
|
-
* - **Bar**: defaults to
|
|
432
|
+
* - **Bar/Column**: defaults to grouped (side-by-side). Use `stack: 'zero'` (or `true`) for stacked bars.
|
|
433
433
|
* - **Area**: defaults to overlap (v6 breaking change). Use `stack: 'zero'` (or `true`)
|
|
434
434
|
* to opt into stacked areas. Each overlapping series renders as a translucent
|
|
435
435
|
* gradient band anchored at the y-domain baseline.
|
|
436
436
|
* - **Line**: stacking is not applied (lines always overlap).
|
|
437
437
|
*
|
|
438
438
|
* @example
|
|
439
|
-
* //
|
|
440
|
-
* "x": { "field": "
|
|
439
|
+
* // Stacked horizontal bars (opt-in; default is grouped):
|
|
440
|
+
* "x": { "field": "revenue", "type": "quantitative", "stack": "zero" }
|
|
441
441
|
*
|
|
442
442
|
* @example
|
|
443
443
|
* // Stacked area (opt-in; default is overlap):
|
|
@@ -2873,8 +2873,11 @@ interface EndpointLabelEntry {
|
|
|
2873
2873
|
showLeader: boolean;
|
|
2874
2874
|
/** Optional anchor circle drawn on the line at the chart's right edge. */
|
|
2875
2875
|
marker?: {
|
|
2876
|
+
/** Rendered cx (offset right by radius so the line terminates at the circle edge). */
|
|
2876
2877
|
x: number;
|
|
2877
2878
|
y: number;
|
|
2879
|
+
/** Original data point x (used to suppress the underlying point mark). */
|
|
2880
|
+
dataX: number;
|
|
2878
2881
|
fill: string;
|
|
2879
2882
|
stroke: string;
|
|
2880
2883
|
strokeWidth: number;
|
|
@@ -3595,6 +3598,16 @@ declare function checkPaletteDistinguishability(colors: string[], type: ColorBli
|
|
|
3595
3598
|
* Returns a value between 1 (identical) and 21 (black on white).
|
|
3596
3599
|
*/
|
|
3597
3600
|
declare function contrastRatio(fg: string, bg: string): number;
|
|
3601
|
+
/**
|
|
3602
|
+
* Pick a legible label color (white or near-black) for text placed on top of `bg`.
|
|
3603
|
+
*
|
|
3604
|
+
* Returns white when white clears 4.5:1 against `bg`, dark otherwise.
|
|
3605
|
+
* Simpler and more reliable than `findAccessibleColor` for "label on filled bar."
|
|
3606
|
+
*
|
|
3607
|
+
* Note: mid-gray backgrounds (~#707070–#8a8a8a) fall in a WCAG gap where
|
|
3608
|
+
* neither white nor dark clears 4.5:1. Default palettes don't produce these.
|
|
3609
|
+
*/
|
|
3610
|
+
declare function pickLabelColor(bg: string): string;
|
|
3598
3611
|
/**
|
|
3599
3612
|
* Check if two colors meet WCAG AA contrast requirements.
|
|
3600
3613
|
* Normal text: 4.5:1, large text (18px+ bold or 24px+): 3:1.
|
|
@@ -4208,4 +4221,4 @@ interface TileMapBuilderOptions {
|
|
|
4208
4221
|
*/
|
|
4209
4222
|
declare function tileMap(data: Record<string, number | null> | DataRow[], options?: TileMapBuilderOptions): TileMapSpec;
|
|
4210
4223
|
|
|
4211
|
-
export { type A11yMetadata, AXIS_TITLE_OFFSET_COMPACT, AXIS_TITLE_OFFSET_DEFAULT, AXIS_TITLE_TRAILING_PAD, type AggregateOp, type AggregateTransform, type AnimationConfig, type AnimationEase, type AnimationPhaseConfig, type AnimationSpec, type AnimationStagger, type Annotation, type AnnotationAnchor, type AnnotationOffset, type AnnotationPosition, type ArcEncoding, type ArcMark, type AreaEncoding, type AreaMark, type AxisConfig, type AxisLabelDensity, type AxisLayout, type AxisTick, BRAND_FONT_SIZE, BRAND_MIN_WIDTH, BRAND_RESERVE_WIDTH, BREAKPOINT_COMPACT_MAX, BREAKPOINT_MEDIUM_MAX, type BarColumnConfig, type BarEncoding, type BarListEncoding, type BarListLayout, type BarListRowMark, type BarListSpec, type BarListSpecWithoutData, type BarTableCell, type BaseLegendLayout, type BinParams, type BinTransform, type Breakpoint, CATEGORICAL_PALETTE, CHART_ENCODING_RULES, CHART_TYPES, COMPACT_WIDTH, type CalculateExpression, type CalculateTransform, type CategoricalLegendLayout, 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 CircleEncoding, type ColorBlindnessType, type ColumnConfig, type CompileOptions, type CompileTableOptions, type Condition, type ConditionalValueDef, DEFAULT_THEME, DIVERGING_PALETTES, type DarkMode, type DataRow, type DateGranularity, type Display, type DivergingPalette, EXTENDED_OFFSET_STRATEGIES, type ElementEdit, type ElementRef, type Encoding, type EncodingChannel, type EncodingRule, type EndpointLabelEntry, type EndpointLabelsConfig, type EndpointLabelsLayout, type FieldPredicate, type FieldRef, type FieldType, type FilterPredicate, type FilterTransform, type FlagTableCell, type FoldTransform, GRAPH_ENCODING_RULES, type GradientColorStop, type GradientDef, type GradientLegendLayout, type GradientStop, type GraphChannelRule, type GraphEdge, type GraphEdgeLayout, type GraphEncoding, type GraphEncodingChannel, type GraphLayout, type GraphLayoutConfig, type GraphNode, type GraphNodeLayout, type GraphSpec, type GraphSpecWithoutData, type Gridline, HEIGHT_CRAMPED_MAX, HEIGHT_SHORT_MAX, HPAD_COMPACT_FRACTION, HPAD_COMPACT_MIN, type HeatmapColumnConfig, type HeatmapTableCell, type HeightClass, type ImageColumnConfig, type ImageTableCell, LABEL_GAP_COMPACT, LABEL_GAP_DEFAULT, LABEL_GAP_NARROW_MAX, type LabelCandidate, type LabelConfig, type LabelDensity, type LabelMode, type LabelPriority, type LabelSpec, type LayerSpec, type LayoutStrategy, type LegendConfig, type LegendEntry, type LegendLayout, type LegendPosition, type LineEncoding, type LineMark, type LinearGradient, type LogicalAnd, type LogicalNot, type LogicalOr, type LollipopEncoding, MARK_DISPLAY_NAMES, MARK_ENCODING_RULES, MARK_TYPES, MAX_LEFT_LABEL_FRACTION_COMPACT, MAX_LEFT_LABEL_FRACTION_DEFAULT, MAX_LEFT_LABEL_FRACTION_MEDIUM, MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX, type Margins, type Mark, type MarkAria, type MarkDef, type MarkEvent, type MarkType, type MeasureTextFn, type Metric, NARROW_VIEWPORT_MAX, type NodeOverride, OFFSET_STRATEGIES, type OffsetStrategy, type PaginationState, type Point, type PointEncoding, type PointMark, type RadialGradient, type RangeAnnotation, type Rect, type RectEncoding, type RectMark, type RefLineAnnotation, type RelativeTimeRef, type ResolveConfig, type ResolveMode, type ResolvedAnimation, type ResolvedAnnotation, type ResolvedChrome, type ResolvedChromeElement, type ResolvedColumn, type ResolvedLabel, type ResolvedMetricBar, type ResolvedMetricCell, type ResolvedTheme, type RuleMarkLayout, SEQUENTIAL_PALETTES, type SankeyEncoding, type SankeyLayout, type SankeyLinkColor, type SankeyLinkMark, type SankeyNodeAlign, type SankeyNodeMark, type SankeySpec, type SankeySpecWithoutData, type ScaleConfig, type ScaleType, type SequentialPalette, type SeriesStyle, type SortState, type SparklineColumnConfig, type SparklineData, type SparklineTableCell, type StoredVizSpec, TICK_LABEL_OFFSET, TOP_PAD_EXTRA_NARROW, TOP_PAD_NARROW_MAX, type TableBuilderOptions, type TableCell, type TableCellBase, type TableLayout, type TableRow, type TableSpec, type TableSpecWithoutData, type TextAnnotation, type TextEncoding, type TextMarkLayout, type TextStyle, type TextTableCell, type Theme, type ThemeChromeDefaults, type ThemeColors, type ThemeConfig, type ThemeFontSizes, type ThemeFontWeights, type ThemeFonts, type ThemeSpacing, type TickEncoding, type TickMarkLayout, type TileMapBuilderOptions, type TileMapEncoding, type TileMapLayout, type TileMapPalette, type TileMapSpec, type TileMapSpecWithoutData, type TileMapTileMark, type TimeUnit, type TimeUnitTransform, type TooltipContent, type TooltipField, type Transform, type VizSpec, type WindowFieldDef, type WindowOp, type WindowSortField, type WindowTransform, abbreviateNumber, adaptColorForDarkMode, adaptTheme, areaChart, barChart, buildD3Formatter, buildTemporalFormatter, checkPaletteDistinguishability, columnChart, computeChrome, computeLabelBounds, contrastRatio, dataTable, detectCollision, donutChart, dotChart, elementRef, estimateTextWidth, findAccessibleColor, formatDate, formatNumber, generateAltText, generateAriaLabels, generateDataTable, getAxisTitleOffset, getBreakpoint, getHeightClass, getLayoutStrategy, getRepresentativeColor, inferFieldType, isBarListSpec, isChartSpec, isConditionalDef, isEncodingChannel, isGradientDef, isGraphSpec, isLayerSpec, isRangeAnnotation, isRefLineAnnotation, isSankeySpec, isTableSpec, isTextAnnotation, isTileMapSpec, lineChart, meetsAA, pieChart, resolveCollisions, resolveMarkDef, resolveMarkType, resolveTheme, scatterChart, simulateColorBlindness, tileMap, wrapText };
|
|
4224
|
+
export { type A11yMetadata, AXIS_TITLE_OFFSET_COMPACT, AXIS_TITLE_OFFSET_DEFAULT, AXIS_TITLE_TRAILING_PAD, type AggregateOp, type AggregateTransform, type AnimationConfig, type AnimationEase, type AnimationPhaseConfig, type AnimationSpec, type AnimationStagger, type Annotation, type AnnotationAnchor, type AnnotationOffset, type AnnotationPosition, type ArcEncoding, type ArcMark, type AreaEncoding, type AreaMark, type AxisConfig, type AxisLabelDensity, type AxisLayout, type AxisTick, BRAND_FONT_SIZE, BRAND_MIN_WIDTH, BRAND_RESERVE_WIDTH, BREAKPOINT_COMPACT_MAX, BREAKPOINT_MEDIUM_MAX, type BarColumnConfig, type BarEncoding, type BarListEncoding, type BarListLayout, type BarListRowMark, type BarListSpec, type BarListSpecWithoutData, type BarTableCell, type BaseLegendLayout, type BinParams, type BinTransform, type Breakpoint, CATEGORICAL_PALETTE, CHART_ENCODING_RULES, CHART_TYPES, COMPACT_WIDTH, type CalculateExpression, type CalculateTransform, type CategoricalLegendLayout, 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 CircleEncoding, type ColorBlindnessType, type ColumnConfig, type CompileOptions, type CompileTableOptions, type Condition, type ConditionalValueDef, DEFAULT_THEME, DIVERGING_PALETTES, type DarkMode, type DataRow, type DateGranularity, type Display, type DivergingPalette, EXTENDED_OFFSET_STRATEGIES, type ElementEdit, type ElementRef, type Encoding, type EncodingChannel, type EncodingRule, type EndpointLabelEntry, type EndpointLabelsConfig, type EndpointLabelsLayout, type FieldPredicate, type FieldRef, type FieldType, type FilterPredicate, type FilterTransform, type FlagTableCell, type FoldTransform, GRAPH_ENCODING_RULES, type GradientColorStop, type GradientDef, type GradientLegendLayout, type GradientStop, type GraphChannelRule, type GraphEdge, type GraphEdgeLayout, type GraphEncoding, type GraphEncodingChannel, type GraphLayout, type GraphLayoutConfig, type GraphNode, type GraphNodeLayout, type GraphSpec, type GraphSpecWithoutData, type Gridline, HEIGHT_CRAMPED_MAX, HEIGHT_SHORT_MAX, HPAD_COMPACT_FRACTION, HPAD_COMPACT_MIN, type HeatmapColumnConfig, type HeatmapTableCell, type HeightClass, type ImageColumnConfig, type ImageTableCell, LABEL_GAP_COMPACT, LABEL_GAP_DEFAULT, LABEL_GAP_NARROW_MAX, type LabelCandidate, type LabelConfig, type LabelDensity, type LabelMode, type LabelPriority, type LabelSpec, type LayerSpec, type LayoutStrategy, type LegendConfig, type LegendEntry, type LegendLayout, type LegendPosition, type LineEncoding, type LineMark, type LinearGradient, type LogicalAnd, type LogicalNot, type LogicalOr, type LollipopEncoding, MARK_DISPLAY_NAMES, MARK_ENCODING_RULES, MARK_TYPES, MAX_LEFT_LABEL_FRACTION_COMPACT, MAX_LEFT_LABEL_FRACTION_DEFAULT, MAX_LEFT_LABEL_FRACTION_MEDIUM, MAX_LEFT_LABEL_FRACTION_MEDIUM_MAX, type Margins, type Mark, type MarkAria, type MarkDef, type MarkEvent, type MarkType, type MeasureTextFn, type Metric, NARROW_VIEWPORT_MAX, type NodeOverride, OFFSET_STRATEGIES, type OffsetStrategy, type PaginationState, type Point, type PointEncoding, type PointMark, type RadialGradient, type RangeAnnotation, type Rect, type RectEncoding, type RectMark, type RefLineAnnotation, type RelativeTimeRef, type ResolveConfig, type ResolveMode, type ResolvedAnimation, type ResolvedAnnotation, type ResolvedChrome, type ResolvedChromeElement, type ResolvedColumn, type ResolvedLabel, type ResolvedMetricBar, type ResolvedMetricCell, type ResolvedTheme, type RuleMarkLayout, SEQUENTIAL_PALETTES, type SankeyEncoding, type SankeyLayout, type SankeyLinkColor, type SankeyLinkMark, type SankeyNodeAlign, type SankeyNodeMark, type SankeySpec, type SankeySpecWithoutData, type ScaleConfig, type ScaleType, type SequentialPalette, type SeriesStyle, type SortState, type SparklineColumnConfig, type SparklineData, type SparklineTableCell, type StoredVizSpec, TICK_LABEL_OFFSET, TOP_PAD_EXTRA_NARROW, TOP_PAD_NARROW_MAX, type TableBuilderOptions, type TableCell, type TableCellBase, type TableLayout, type TableRow, type TableSpec, type TableSpecWithoutData, type TextAnnotation, type TextEncoding, type TextMarkLayout, type TextStyle, type TextTableCell, type Theme, type ThemeChromeDefaults, type ThemeColors, type ThemeConfig, type ThemeFontSizes, type ThemeFontWeights, type ThemeFonts, type ThemeSpacing, type TickEncoding, type TickMarkLayout, type TileMapBuilderOptions, type TileMapEncoding, type TileMapLayout, type TileMapPalette, type TileMapSpec, type TileMapSpecWithoutData, type TileMapTileMark, type TimeUnit, type TimeUnitTransform, type TooltipContent, type TooltipField, type Transform, type VizSpec, type WindowFieldDef, type WindowOp, type WindowSortField, type WindowTransform, abbreviateNumber, adaptColorForDarkMode, adaptTheme, areaChart, barChart, buildD3Formatter, buildTemporalFormatter, checkPaletteDistinguishability, columnChart, computeChrome, computeLabelBounds, contrastRatio, dataTable, detectCollision, donutChart, dotChart, elementRef, estimateTextWidth, findAccessibleColor, formatDate, formatNumber, generateAltText, generateAriaLabels, generateDataTable, getAxisTitleOffset, getBreakpoint, getHeightClass, getLayoutStrategy, getRepresentativeColor, inferFieldType, isBarListSpec, isChartSpec, isConditionalDef, isEncodingChannel, isGradientDef, isGraphSpec, isLayerSpec, isRangeAnnotation, isRefLineAnnotation, isSankeySpec, isTableSpec, isTextAnnotation, isTileMapSpec, lineChart, meetsAA, pickLabelColor, pieChart, resolveCollisions, resolveMarkDef, resolveMarkType, resolveTheme, scatterChart, simulateColorBlindness, tileMap, wrapText };
|
package/dist/index.js
CHANGED
|
@@ -661,6 +661,11 @@ function contrastRatio(fg, bg) {
|
|
|
661
661
|
const darker2 = Math.min(l1, l2);
|
|
662
662
|
return (lighter + 0.05) / (darker2 + 0.05);
|
|
663
663
|
}
|
|
664
|
+
function pickLabelColor(bg) {
|
|
665
|
+
const WHITE = "#ffffff";
|
|
666
|
+
const DARK = "#111111";
|
|
667
|
+
return contrastRatio(WHITE, bg) >= 4.5 ? WHITE : DARK;
|
|
668
|
+
}
|
|
664
669
|
function meetsAA(fg, bg, largeText = false) {
|
|
665
670
|
const ratio = contrastRatio(fg, bg);
|
|
666
671
|
return largeText ? ratio >= 3 : ratio >= 4.5;
|
|
@@ -906,9 +911,9 @@ var DEFAULT_THEME = {
|
|
|
906
911
|
categorical: [...CATEGORICAL_PALETTE],
|
|
907
912
|
sequential: SEQUENTIAL_PALETTES,
|
|
908
913
|
diverging: DIVERGING_PALETTES,
|
|
909
|
-
background: "
|
|
914
|
+
background: "transparent",
|
|
910
915
|
text: "#09090b",
|
|
911
|
-
gridline: "rgba(0,0,0,0.
|
|
916
|
+
gridline: "rgba(0,0,0,0.1)",
|
|
912
917
|
// Used for axis lines/ticks AND axis tick label fill. Must clear WCAG AA
|
|
913
918
|
// contrast (4.5:1) on white because tick labels are rendered with this
|
|
914
919
|
// color. Zinc-500 hits ~5.7:1.
|
|
@@ -929,8 +934,8 @@ var DEFAULT_THEME = {
|
|
|
929
934
|
axisTick: 11
|
|
930
935
|
},
|
|
931
936
|
weights: {
|
|
932
|
-
normal:
|
|
933
|
-
medium:
|
|
937
|
+
normal: 450,
|
|
938
|
+
medium: 550,
|
|
934
939
|
semibold: 590,
|
|
935
940
|
bold: 700
|
|
936
941
|
}
|
|
@@ -1041,6 +1046,7 @@ function relativeLuminance2(hex2) {
|
|
|
1041
1046
|
return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
|
|
1042
1047
|
}
|
|
1043
1048
|
function isDarkBackground(hex2) {
|
|
1049
|
+
if (hex2 === "transparent") return false;
|
|
1044
1050
|
return relativeLuminance2(hex2) < 0.2;
|
|
1045
1051
|
}
|
|
1046
1052
|
function adaptChromeForDarkBg(theme, textColor) {
|
|
@@ -3062,6 +3068,7 @@ export {
|
|
|
3062
3068
|
isTileMapSpec,
|
|
3063
3069
|
lineChart,
|
|
3064
3070
|
meetsAA,
|
|
3071
|
+
pickLabelColor,
|
|
3065
3072
|
pieChart,
|
|
3066
3073
|
resolveCollisions,
|
|
3067
3074
|
resolveMarkDef,
|