@pushwoosh/kit-charts 0.0.17 → 0.0.19

package/core/model/build-model.js

@@ -81,6 +81,9 @@ const emptyExtent = () => ({
   min: Infinity,
   max: -Infinity
 });
+// Below four intervals the nice step jumps a whole magnitude and a count axis
+// degenerates to two labels; a short card asks for fewer than that.
+const MIN_Y_TICK_HINT = 4;
 const grow = (extent, value) => {
   if (value === null || !Number.isFinite(value)) {
     return;
@@ -561,7 +564,7 @@ export function buildChartModel({
     stacks
   });
   const yAxisModels = yAxes.reduce((built, axis, index) => {
-    const hint = axis.tickAmount ?? 5;
+    const hint = axis.tickAmount ?? (axis.tickPixelInterval ? Math.max(MIN_Y_TICK_HINT, Math.round(plot.height / axis.tickPixelInterval)) : 5);
     const target = axis.linkedTo === undefined ? undefined : built[axis.linkedTo];
     const range = axis.categories?.length ? [plot.y, plot.y + plot.height] : [plot.y + plot.height, plot.y];
     const scale = buildYScale(axis, yDomains[index] ?? emptyExtent(), range, hint, target?.scale);

package/core/model/palette.d.ts

@@ -15,7 +15,7 @@ export declare const DEFAULT_SURFACE_COLOR: string;
  * yet. Two neutrals, not one: white on the mid greys a threshold is painted in
  * reads at 2.8:1, far under the 4.5:1 small text needs.
  */
-export declare const DEFAULT_ON_FILL_TEXT_COLOR: string;
+export declare const DEFAULT_ON_FILL_TEXT_COLOR = "#FFFFFF";
 /** Whichever of the two neutrals reads better on a fill. */
 export declare function textColorOn(fill: string): string;
 export declare const DEFAULT_TOOLTIP_SURFACE_COLOR: string;

package/core/model/palette.js

@@ -17,7 +17,9 @@ export const DEFAULT_SURFACE_COLOR = Color.CLEAR;
  * yet. Two neutrals, not one: white on the mid greys a threshold is painted in
  * reads at 2.8:1, far under the 4.5:1 small text needs.
  */
-export const DEFAULT_ON_FILL_TEXT_COLOR = Color.CLEAR;
+// Literal white rather than `Color.CLEAR`: the fill is the caller's, so the ink on it
+// must stay readable instead of turning #323233 with the dark theme.
+export const DEFAULT_ON_FILL_TEXT_COLOR = '#FFFFFF';
 const ON_FILL_DARK_TEXT_COLOR = Color.BRAND_BLACK;
 const linearChannel = value => {
   const unit = value / 255;
@@ -32,15 +34,16 @@ const luminance = color => {
   return 0.2126 * linearChannel(rgba[0]) + 0.7152 * linearChannel(rgba[1]) + 0.0722 * linearChannel(rgba[2]);
 };
 const contrast = (one, other) => (Math.max(one, other) + 0.05) / (Math.min(one, other) + 0.05);
-const LIGHT_TEXT_LUMINANCE = luminance(DEFAULT_ON_FILL_TEXT_COLOR) ?? 1;
-const DARK_TEXT_LUMINANCE = luminance(ON_FILL_DARK_TEXT_COLOR) ?? 0;
 /** Whichever of the two neutrals reads better on a fill. */
 export function textColorOn(fill) {
   const behind = luminance(fill);
   if (behind === null) {
     return DEFAULT_ON_FILL_TEXT_COLOR;
   }
-  return contrast(behind, LIGHT_TEXT_LUMINANCE) >= contrast(behind, DARK_TEXT_LUMINANCE) ? DEFAULT_ON_FILL_TEXT_COLOR : ON_FILL_DARK_TEXT_COLOR;
+  // Read per call, not once: both neutrals are tokens and swap literals when the theme does.
+  const light = luminance(DEFAULT_ON_FILL_TEXT_COLOR) ?? 1;
+  const dark = luminance(ON_FILL_DARK_TEXT_COLOR) ?? 0;
+  return contrast(behind, light) >= contrast(behind, dark) ? DEFAULT_ON_FILL_TEXT_COLOR : ON_FILL_DARK_TEXT_COLOR;
 }
 // Chart tooltips follow the product hint style: dark bubble, light text.
 export const DEFAULT_TOOLTIP_SURFACE_COLOR = Color.BRAND_BLACK;

package/core/scale/color.d.ts

@@ -1,9 +1,12 @@
+import { type ThemeName } from '@pushwoosh/kit-constants';
 import { type ColorScale, type ColorStop } from '../types/scale';
 export interface ColorScaleOptions {
     domain: readonly [number, number];
     stops: readonly ColorStop[];
 }
 type Rgba = [number, number, number, number];
+/** Theme the page is painted in; a chart reads it the way CSS does, off `<html>`. */
+export declare const activeTheme: () => ThemeName;
 export declare const parseColor: (color: string) => Rgba | null;
 export declare function createColorScale(options: ColorScaleOptions): ColorScale;
 export {};

package/core/scale/color.js

@@ -1,3 +1,4 @@
+import { Color, DEFAULT_THEME, getThemeColors, THEME_ATTRIBUTE } from '@pushwoosh/kit-constants';
 const clampChannel = value => Math.min(255, Math.max(0, Math.round(value)));
 const parseHex = color => {
   const match = /^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec(color);
@@ -21,7 +22,26 @@ const parseFunctional = color => {
   }
   return [parts[0], parts[1], parts[2], parts[3] === undefined ? 1 : parts[3]];
 };
-export const parseColor = color => parseHex(color.trim()) ?? parseFunctional(color.trim());
+const TOKEN_OF_VALUE = new Map(Object.keys(Color).filter(token => token !== 'CURRENT').map(token => [Color[token], token]));
+/** Theme the page is painted in; a chart reads it the way CSS does, off `<html>`. */
+export const activeTheme = () => typeof document !== 'undefined' && document.documentElement.getAttribute(THEME_ATTRIBUTE) === 'dark' ? 'dark' : DEFAULT_THEME;
+const unwrapVar = color => {
+  const match = /^var\(\s*--[^,)]+,([\s\S]+)\)$/.exec(color);
+  return match ? match[1].trim() : null;
+};
+/**
+ * Literal behind a design-system colour. Tokens are `var(--pw-color-x, <light hex>)`, whose fallback lies
+ * under a dark theme, so a token resolves through the palette and only an unknown `var()` takes its fallback.
+ */
+const resolveColor = color => {
+  const token = TOKEN_OF_VALUE.get(color);
+  return token ? getThemeColors(activeTheme())[token] : unwrapVar(color);
+};
+export const parseColor = color => {
+  const value = color.trim();
+  const literal = resolveColor(value);
+  return literal !== null ? parseColor(literal) : parseHex(value) ?? parseFunctional(value);
+};
 const toCss = ([r, g, b, a]) => a >= 1 ? `#${[r, g, b].map(channel => clampChannel(channel).toString(16).padStart(2, '0')).join('')}` : `rgba(${clampChannel(r)}, ${clampChannel(g)}, ${clampChannel(b)}, ${Number(a.toFixed(3))})`;
 const mix = (from, to, t) => [from[0] + (to[0] - from[0]) * t, from[1] + (to[1] - from[1]) * t, from[2] + (to[2] - from[2]) * t, from[3] + (to[3] - from[3]) * t];
 // A stop whose colour cannot be parsed still holds its position: it is returned

package/core/types/options.d.ts

@@ -150,6 +150,7 @@ export interface AxisOptions {
     tickLength?: number;
     tickAmount?: number;
     tickInterval?: number | TimeUnit;
+    /** Space a tick asks for: across the plot on an x axis, down it on a y one. */
     tickPixelInterval?: number;
     tickPositions?: readonly number[];
     gridLineWidth?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/kit-charts",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "description": "Small React chart library on SVG, with a Highcharts-shaped configuration model",
   "license": "MIT",
   "repository": {
@@ -35,7 +35,7 @@
   },
   "pre-commit": "check",
   "dependencies": {
-    "@pushwoosh/kit-constants": "^1.8.0"
+    "@pushwoosh/kit-constants": "^2.0.0"
   },
   "devDependencies": {
     "@pushwoosh/frontend-builder-engine": "^3.1.0",
@@ -59,6 +59,6 @@
     "styled-components": ">=5.3.3"
   },
   "engines": {
-    "node": ">= 18"
+    "node": ">= 24"
   }
 }