@pushwoosh/kit-charts 0.0.1 → 0.0.3

package/core/model/build-model.js

@@ -18,8 +18,7 @@ const DEFAULT_SPACING = [10, 10, 15, 10];
 const isBand = scale => scale.kind === 'band';
 const isContinuous = scale => scale.kind === 'linear' || scale.kind === 'time';
 function tickLabel(value, axis, timePattern, index, count, kind, numberFormat) {
-  var _axis$labels, _axis$labels2;
-  const formatter = (_axis$labels = axis.labels) === null || _axis$labels === void 0 ? void 0 : _axis$labels.formatter;
+  const formatter = axis.labels?.formatter;
   if (formatter) {
     const node = formatter({
       value,
@@ -37,7 +36,7 @@ function tickLabel(value, axis, timePattern, index, count, kind, numberFormat) {
     }
     return '';
   }
-  if ((_axis$labels2 = axis.labels) !== null && _axis$labels2 !== void 0 && _axis$labels2.format) {
+  if (axis.labels?.format) {
     return applyValueFormat(axis.labels.format, value);
   }
   if (typeof value === 'number') {
@@ -46,8 +45,7 @@ function tickLabel(value, axis, timePattern, index, count, kind, numberFormat) {
   return String(value);
 }
 function collectCategories(axis, series, numeric = false) {
-  var _axis$categories;
-  if ((_axis$categories = axis.categories) !== null && _axis$categories !== void 0 && _axis$categories.length) {
+  if (axis.categories?.length) {
     return [...axis.categories];
   }
   const seen = [];
@@ -104,11 +102,10 @@ function buildXScale(axis, kind, extent, categories, range, hint) {
   });
 }
 function buildYScale(axis, extent, range, hint, linked) {
-  var _axis$categories2;
-  if ((_axis$categories2 = axis.categories) !== null && _axis$categories2 !== void 0 && _axis$categories2.length) {
+  if (axis.categories?.length) {
     return createBandScale({
       domain: [...axis.categories],
-      range: (linked === null || linked === void 0 ? void 0 : linked.kind) === 'band' ? linked.range() : range,
+      range: linked?.kind === 'band' ? linked.range() : range,
       paddingInner: 0,
       paddingOuter: 0,
       // A y axis counts up from the bottom; `reversed` puts the first row on top.
@@ -133,13 +130,12 @@ function buildYScale(axis, extent, range, hint, linked) {
   });
 }
 function buildColorScale(options, extent, colors) {
-  var _axis$stops;
   const axis = options.colorAxis;
   if (!axis) {
     return undefined;
   }
   const [min, max] = settled(extent, [0, 1]);
-  const stops = (_axis$stops = axis.stops) !== null && _axis$stops !== void 0 && _axis$stops.length ? axis.stops : [[0, DEFAULT_SURFACE_COLOR], [1, colorAt(colors, 0)]];
+  const stops = axis.stops?.length ? axis.stops : [[0, DEFAULT_SURFACE_COLOR], [1, colorAt(colors, 0)]];
   return createColorScale({
     domain: [axis.min ?? min, axis.max ?? max],
     stops
@@ -151,15 +147,14 @@ const EXPLICIT_ANCHOR = {
   right: 'end'
 };
 function tickAnchor(label, position, axis, bounds) {
-  var _axis$labels3, _axis$labels4;
-  const explicit = ((_axis$labels3 = axis.labels) === null || _axis$labels3 === void 0 ? void 0 : _axis$labels3.align) && EXPLICIT_ANCHOR[axis.labels.align];
+  const explicit = axis.labels?.align && EXPLICIT_ANCHOR[axis.labels.align];
   if (explicit) {
     return explicit;
   }
   if (!bounds || !label) {
     return 'middle';
   }
-  const half = measureText(label, (_axis$labels4 = axis.labels) === null || _axis$labels4 === void 0 ? void 0 : _axis$labels4.style) / 2;
+  const half = measureText(label, axis.labels?.style) / 2;
   if (position - half < bounds[0]) {
     return 'start';
   }
@@ -174,11 +169,10 @@ function tickAnchor(label, position, axis, bounds) {
  * axis readable instead of turning it into a smear.
  */
 function dropOverlapping(ticks, axis, along) {
-  var _axis$labels5, _axis$labels6;
-  if (((_axis$labels5 = axis.labels) === null || _axis$labels5 === void 0 ? void 0 : _axis$labels5.allowOverlap) === true || ticks.length < 2) {
+  if (axis.labels?.allowOverlap === true || ticks.length < 2) {
     return ticks;
   }
-  const style = (_axis$labels6 = axis.labels) === null || _axis$labels6 === void 0 ? void 0 : _axis$labels6.style;
+  const style = axis.labels?.style;
   // A y axis counts upwards, so its tick positions descend. Comparing distance
   // rather than order keeps one rule for both directions.
   let kept = null;
@@ -201,9 +195,8 @@ function dropOverlapping(ticks, axis, along) {
   });
 }
 function axisTicks(axis, scale, hint, timePattern, along, numberFormat, bounds) {
-  var _axis$tickPositions;
   let values;
-  if ((_axis$tickPositions = axis.tickPositions) !== null && _axis$tickPositions !== void 0 && _axis$tickPositions.length) {
+  if (axis.tickPositions?.length) {
     values = [...axis.tickPositions];
   } else if (isBand(scale)) {
     values = scale.ticks();
@@ -218,7 +211,6 @@ function axisTicks(axis, scale, hint, timePattern, along, numberFormat, bounds)
   }
   const offset = isBand(scale) ? scale.bandwidth() / 2 : 0;
   const built = values.map((value, index) => {
-    var _axis$labels7, _axis$labels7$hint;
     const position = (isBand(scale) ? scale.map(String(value)) : scale.map(Number(value))) + offset;
     const label = tickLabel(value, axis, timePattern, index, values.length, scale.kind, numberFormat);
     return {
@@ -226,7 +218,7 @@ function axisTicks(axis, scale, hint, timePattern, along, numberFormat, bounds)
       position,
       label,
       anchor: tickAnchor(label, position, axis, bounds),
-      hint: (_axis$labels7 = axis.labels) === null || _axis$labels7 === void 0 || (_axis$labels7$hint = _axis$labels7.hint) === null || _axis$labels7$hint === void 0 ? void 0 : _axis$labels7$hint.call(_axis$labels7, {
+      hint: axis.labels?.hint?.({
         value,
         index,
         isFirst: index === 0,
@@ -272,8 +264,7 @@ export function buildChartModel({
   renderers,
   hidden
 }) {
-  var _options$colors, _xAxisOptions$categor, _resolved$, _options$chart, _xAxisOptions$labels, _xAxisOptions$labels2, _xAxisOptions$labels3, _xAxisOptions$labels4, _options$legend, _options$legend2, _yAxes$, _yAxes$2, _yAxes$3, _yAxes$4, _options$legend3, _options$chart2, _options$chart3, _options$chart4, _options$chart5;
-  const colors = (_options$colors = options.colors) !== null && _options$colors !== void 0 && _options$colors.length ? options.colors : DEFAULT_COLORS;
+  const colors = options.colors?.length ? options.colors : DEFAULT_COLORS;
   const numberFormat = options.numberFormat ?? String;
   const {
     xAxes,
@@ -292,8 +283,8 @@ export function buildChartModel({
       index,
       color: series.color ?? colorAt(colors, index),
       points: normalizePoints(series.data, series.name ?? `series ${index}`),
-      hiddenPoints: new Set(normalizePoints(series.data, series.name ?? `series ${index}`).filter(point => hidden === null || hidden === void 0 ? void 0 : hidden.has(hiddenKey(index, point.index))).map(point => point.index)),
-      hidden: !isSeriesVisible(series) || ((hidden === null || hidden === void 0 ? void 0 : hidden.has(hiddenKey(index))) ?? false)
+      hiddenPoints: new Set(normalizePoints(series.data, series.name ?? `series ${index}`).filter(point => hidden?.has(hiddenKey(index, point.index))).map(point => point.index)),
+      hidden: !isSeriesVisible(series) || (hidden?.has(hiddenKey(index)) ?? false)
     });
   });
   // Everything that shapes the chart — domains, stacks, column slots — comes from
@@ -303,12 +294,12 @@ export function buildChartModel({
   // the series being switched off would jump there before it finished fading, so
   // the chart holds the shape it had until something is switched back on.
   const resolved = shown.length ? shown : all;
-  const explicitCategories = Boolean((_xAxisOptions$categor = xAxisOptions.categories) === null || _xAxisOptions$categor === void 0 ? void 0 : _xAxisOptions$categor.length);
+  const explicitCategories = Boolean(xAxisOptions.categories?.length);
   const axisless = resolved.length > 0 && resolved.every(({
     renderer
   }) => renderer.scales.x === 'none');
   const labelled = collectCategories(xAxisOptions, resolved);
-  const rendererXKind = (_resolved$ = resolved[0]) === null || _resolved$ === void 0 ? void 0 : _resolved$.renderer.scales.x;
+  const rendererXKind = resolved[0]?.renderer.scales.x;
   const xKind = (() => {
     if (xAxisOptions.type === 'datetime') {
       return 'time';
@@ -365,7 +356,7 @@ export function buildChartModel({
         grow(xExtent, point.x);
       }
       grow(colorExtent, point.value);
-      const cumulative = stacked === null || stacked === void 0 ? void 0 : stacked[pointIndex];
+      const cumulative = stacked?.[pointIndex];
       if (cumulative) {
         grow(yExtents[yIndex], cumulative.from);
         grow(yExtents[yIndex], cumulative.to);
@@ -399,16 +390,16 @@ export function buildChartModel({
     max: acc.x.max + pad
   } : acc.x;
   const yDomains = acc.y;
-  const spacing = ((_options$chart = options.chart) === null || _options$chart === void 0 ? void 0 : _options$chart.spacing) ?? DEFAULT_SPACING;
+  const spacing = options.chart?.spacing ?? DEFAULT_SPACING;
   const [spaceTop, spaceRight, spaceBottom, spaceLeft] = spacing;
   const labelsOnTop = xAxisOptions.opposite === true;
-  const labelStyle = (_xAxisOptions$labels = xAxisOptions.labels) === null || _xAxisOptions$labels === void 0 ? void 0 : _xAxisOptions$labels.style;
+  const labelStyle = xAxisOptions.labels?.style;
   // A tick label is drawn a tick's length plus a fixed drop away from the axis
   // line, and `labels.y` pushes it further still. Reserving only its text height
   // leaves it hanging over the chart edge, where the svg clips it.
-  const xLabelPush = labelsOnTop ? Math.max(0, -(((_xAxisOptions$labels2 = xAxisOptions.labels) === null || _xAxisOptions$labels2 === void 0 ? void 0 : _xAxisOptions$labels2.y) ?? 0)) : Math.max(0, ((_xAxisOptions$labels3 = xAxisOptions.labels) === null || _xAxisOptions$labels3 === void 0 ? void 0 : _xAxisOptions$labels3.y) ?? 0);
-  const xLabelHeight = axisless || ((_xAxisOptions$labels4 = xAxisOptions.labels) === null || _xAxisOptions$labels4 === void 0 ? void 0 : _xAxisOptions$labels4.enabled) === false ? 0 : textHeight(labelStyle) + (xAxisOptions.tickLength ?? 0) + (labelsOnTop ? AXIS_LABEL_GAP : X_AXIS_LABEL_DROP) + xLabelPush;
-  const legendEnabled = ((_options$legend = options.legend) === null || _options$legend === void 0 ? void 0 : _options$legend.enabled) !== false;
+  const xLabelPush = labelsOnTop ? Math.max(0, -(xAxisOptions.labels?.y ?? 0)) : Math.max(0, xAxisOptions.labels?.y ?? 0);
+  const xLabelHeight = axisless || xAxisOptions.labels?.enabled === false ? 0 : textHeight(labelStyle) + (xAxisOptions.tickLength ?? 0) + (labelsOnTop ? AXIS_LABEL_GAP : X_AXIS_LABEL_DROP) + xLabelPush;
+  const legendEnabled = options.legend?.enabled !== false;
   const legend = legendEnabled ? all.flatMap(({
     renderer,
     options: series,
@@ -419,59 +410,47 @@ export function buildChartModel({
     return items.map((item, ordinal) => ({
       ...item,
       color: item.color || colorAt(colors, items.length > 1 ? ordinal : index),
-      visible: !off && !(hidden !== null && hidden !== void 0 && hidden.has(hiddenKey(index, item.pointIndex)))
+      visible: !off && !hidden?.has(hiddenKey(index, item.pointIndex))
     }));
   }) : [];
   const legendMetrics = measureLegend(legend, options.legend);
   const legendHeight = legendMetrics.height;
-  const legendAtTop = (((_options$legend2 = options.legend) === null || _options$legend2 === void 0 ? void 0 : _options$legend2.verticalAlign) ?? 'bottom') === 'top';
+  const legendAtTop = (options.legend?.verticalAlign ?? 'bottom') === 'top';
   const titles = layoutTitles(options, size, spacing);
   const titleHeight = titles.height;
-  const yLabelsShown = !axisless && ((_yAxes$ = yAxes[0]) === null || _yAxes$ === void 0 ? void 0 : _yAxes$.visible) !== false && ((_yAxes$2 = yAxes[0]) === null || _yAxes$2 === void 0 || (_yAxes$2 = _yAxes$2.labels) === null || _yAxes$2 === void 0 ? void 0 : _yAxes$2.enabled) !== false;
+  const yLabelsShown = !axisless && yAxes[0]?.visible !== false && yAxes[0]?.labels?.enabled !== false;
   const markerReach = resolved.some(({
     options: series
-  }) => {
-    var _series$marker;
-    return ((_series$marker = series.marker) === null || _series$marker === void 0 ? void 0 : _series$marker.enabled) !== false;
-  }) ? MARKER_REACH : 0;
+  }) => series.marker?.enabled !== false) ? MARKER_REACH : 0;
   // The topmost tick label is centred on the plot's top edge, so half of it hangs
   // above the plot: without this the highest grid line and its label sit on the
   // chart border.
-  const topOverflow = Math.max(yLabelsShown ? Math.ceil(textHeight((_yAxes$3 = yAxes[0]) === null || _yAxes$3 === void 0 || (_yAxes$3 = _yAxes$3.labels) === null || _yAxes$3 === void 0 ? void 0 : _yAxes$3.style) / 2) : 0, axisless ? 0 : markerReach);
+  const topOverflow = Math.max(yLabelsShown ? Math.ceil(textHeight(yAxes[0]?.labels?.style) / 2) : 0, axisless ? 0 : markerReach);
   // Point and stack labels are drawn above the shape they belong to, so the plot
   // has to end below the chart edge — otherwise the topmost value sits on the
   // border, or gets pushed inside the shape to avoid being cut off.
   const outsideLabels = axisless ? undefined : resolved.find(({
     options: series,
     renderer
-  }) => {
-    var _series$dataLabels;
-    return ((_series$dataLabels = series.dataLabels) === null || _series$dataLabels === void 0 ? void 0 : _series$dataLabels.enabled) && !series.stacking && renderer.scales.y === 'linear';
-  });
-  const stackLabels = yAxes.find(axis => {
-    var _axis$stackLabels;
-    return (_axis$stackLabels = axis.stackLabels) === null || _axis$stackLabels === void 0 ? void 0 : _axis$stackLabels.enabled;
-  });
+  }) => series.dataLabels?.enabled && !series.stacking && renderer.scales.y === 'linear');
+  const stackLabels = yAxes.find(axis => axis.stackLabels?.enabled);
   const labelHeadroom = (() => {
     if (outsideLabels) {
-      var _outsideLabels$option;
-      return textHeight((_outsideLabels$option = outsideLabels.options.dataLabels) === null || _outsideLabels$option === void 0 ? void 0 : _outsideLabels$option.style) + VALUE_LABEL_HEADROOM;
+      return textHeight(outsideLabels.options.dataLabels?.style) + VALUE_LABEL_HEADROOM;
     }
     if (stackLabels && !axisless) {
-      var _stackLabels$stackLab;
-      return textHeight((_stackLabels$stackLab = stackLabels.stackLabels) === null || _stackLabels$stackLab === void 0 ? void 0 : _stackLabels$stackLab.style) + VALUE_LABEL_HEADROOM;
+      return textHeight(stackLabels.stackLabels?.style) + VALUE_LABEL_HEADROOM;
     }
     return 0;
   })();
   const marginTop = spaceTop + titleHeight + (legendAtTop ? legendHeight : 0) + (labelsOnTop ? xLabelHeight : 0) + Math.max(labelHeadroom, topOverflow);
   const marginBottom = spaceBottom + (labelsOnTop ? 0 : xLabelHeight) + (legendAtTop ? 0 : legendHeight);
   const measureGutter = estimate => {
-    var _axis$labels8, _axis$categories3, _axis$title;
     const axis = yAxes[0] ?? {};
-    if (((_axis$labels8 = axis.labels) === null || _axis$labels8 === void 0 ? void 0 : _axis$labels8.enabled) === false) {
+    if (axis.labels?.enabled === false) {
       return estimate;
     }
-    const labels = (_axis$categories3 = axis.categories) !== null && _axis$categories3 !== void 0 && _axis$categories3.length ? [...axis.categories] : axisTicks(axis, createLinearScale({
+    const labels = axis.categories?.length ? [...axis.categories] : axisTicks(axis, createLinearScale({
       domain: (() => {
         const [min, max] = settled(yDomains[0] ?? emptyExtent(), [0, 1]);
         return [axis.min ?? min, axis.max ?? max];
@@ -481,21 +460,18 @@ export function buildChartModel({
       tickHint: axis.tickAmount ?? 5,
       allowDecimals: axis.allowDecimals
     }), axis.tickAmount ?? 5, undefined, 'y', numberFormat).map(tick => tick.label);
-    const widest = labels.reduce((widest_, label) => {
-      var _axis$labels9;
-      return Math.max(widest_, measureText(label, (_axis$labels9 = axis.labels) === null || _axis$labels9 === void 0 ? void 0 : _axis$labels9.style));
-    }, 0);
-    const title = (_axis$title = axis.title) !== null && _axis$title !== void 0 && _axis$title.text && (axis.title.rotation ?? -90) !== 0 ? textHeight(axis.title.style) + AXIS_TITLE_GAP : 0;
+    const widest = labels.reduce((widest_, label) => Math.max(widest_, measureText(label, axis.labels?.style)), 0);
+    const title = axis.title?.text && (axis.title.rotation ?? -90) !== 0 ? textHeight(axis.title.style) + AXIS_TITLE_GAP : 0;
     return Math.ceil(widest) + AXIS_GUTTER_PADDING + title;
   };
-  const gutter = axisless || ((_yAxes$4 = yAxes[0]) === null || _yAxes$4 === void 0 ? void 0 : _yAxes$4.visible) === false ? 0 : measureGutter(32);
-  const legendAlign = ((_options$legend3 = options.legend) === null || _options$legend3 === void 0 ? void 0 : _options$legend3.align) ?? 'left';
+  const gutter = axisless || yAxes[0]?.visible === false ? 0 : measureGutter(32);
+  const legendAlign = options.legend?.align ?? 'left';
   const legendBesideLeft = legendMetrics.beside && legendAlign === 'left';
   // Highcharts margins replace the computed edge distance rather than adding to it.
-  const left = ((_options$chart2 = options.chart) === null || _options$chart2 === void 0 ? void 0 : _options$chart2.marginLeft) ?? spaceLeft + gutter + (legendBesideLeft ? legendMetrics.width : 0);
-  const right = ((_options$chart3 = options.chart) === null || _options$chart3 === void 0 ? void 0 : _options$chart3.marginRight) ?? spaceRight + (legendMetrics.beside && !legendBesideLeft ? legendMetrics.width : 0);
-  const top = ((_options$chart4 = options.chart) === null || _options$chart4 === void 0 ? void 0 : _options$chart4.marginTop) ?? marginTop;
-  const bottom = ((_options$chart5 = options.chart) === null || _options$chart5 === void 0 ? void 0 : _options$chart5.marginBottom) ?? marginBottom;
+  const left = options.chart?.marginLeft ?? spaceLeft + gutter + (legendBesideLeft ? legendMetrics.width : 0);
+  const right = options.chart?.marginRight ?? spaceRight + (legendMetrics.beside && !legendBesideLeft ? legendMetrics.width : 0);
+  const top = options.chart?.marginTop ?? marginTop;
+  const bottom = options.chart?.marginBottom ?? marginBottom;
   const plot = {
     x: left,
     y: top,
@@ -517,11 +493,10 @@ export function buildChartModel({
     stacks
   });
   const yAxisModels = yAxes.reduce((built, axis, index) => {
-    var _axis$categories4;
     const hint = axis.tickAmount ?? 5;
     const target = axis.linkedTo === undefined ? undefined : built[axis.linkedTo];
-    const range = (_axis$categories4 = axis.categories) !== null && _axis$categories4 !== void 0 && _axis$categories4.length ? [plot.y, plot.y + plot.height] : [plot.y + plot.height, plot.y];
-    const scale = buildYScale(axis, yDomains[index] ?? emptyExtent(), range, hint, target === null || target === void 0 ? void 0 : target.scale);
+    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);
     built.push({
       id: `y${index}`,
       options: axis,

package/core/model/palette.d.ts

@@ -10,6 +10,14 @@ export declare const DEFAULT_AXIS_COLOR: string;
 export declare const DEFAULT_TEXT_COLOR: string;
 export declare const DEFAULT_MUTED_TEXT_COLOR: string;
 export declare const DEFAULT_SURFACE_COLOR: string;
+/**
+ * Text drawn on a colour the caller chose — a plot label badge, and nothing else
+ * 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;
+/** 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;
 export declare const DEFAULT_TOOLTIP_TEXT_COLOR: string;
 export declare const colorAt: (colors: readonly string[], index: number) => string;

package/core/model/palette.js

@@ -1,4 +1,5 @@
 import { Color } from '@pushwoosh/kit-constants';
+import { parseColor } from '../scale/color';
 /**
  * Series palette, in the order series are drawn. These are the design system's
  * service and brand colours rather than a set invented here, so a chart matches
@@ -11,6 +12,36 @@ export const DEFAULT_AXIS_COLOR = Color.FORM;
 export const DEFAULT_TEXT_COLOR = Color.MAIN;
 export const DEFAULT_MUTED_TEXT_COLOR = Color.LOCKED;
 export const DEFAULT_SURFACE_COLOR = Color.CLEAR;
+/**
+ * Text drawn on a colour the caller chose — a plot label badge, and nothing else
+ * 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;
+const ON_FILL_DARK_TEXT_COLOR = Color.BRAND_BLACK;
+const linearChannel = value => {
+  const unit = value / 255;
+  return unit <= 0.03928 ? unit / 12.92 : ((unit + 0.055) / 1.055) ** 2.4;
+};
+/** WCAG relative luminance, or null for a colour that cannot be read. */
+const luminance = color => {
+  const rgba = parseColor(color);
+  if (!rgba) {
+    return null;
+  }
+  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;
+}
 // Chart tooltips follow the product hint style: dark bubble, light text.
 export const DEFAULT_TOOLTIP_SURFACE_COLOR = Color.BRAND_BLACK;
 export const DEFAULT_TOOLTIP_TEXT_COLOR = Color.CLEAR;

package/core/options/normalize.js

@@ -23,8 +23,7 @@ export const toAxisArray = axis => {
   return Array.isArray(axis) ? [...axis] : [axis];
 };
 export function resolveSeries(options) {
-  var _options$chart;
-  const defaultType = ((_options$chart = options.chart) === null || _options$chart === void 0 ? void 0 : _options$chart.type) ?? 'line';
+  const defaultType = options.chart?.type ?? 'line';
   const plotOptions = options.plotOptions ?? {};
   return (options.series ?? []).map(series => {
     const type = series.type ?? defaultType;

package/core/registry/registry.js

@@ -16,7 +16,7 @@ export function clearSeriesRegistry() {
   globalRegistry.clear();
 }
 export function resolveRenderers(local) {
-  if (!(local !== null && local !== void 0 && local.length)) {
+  if (!local?.length) {
     return globalRegistry;
   }
   const resolved = new Map(globalRegistry);

package/core/types/options.d.ts

@@ -113,6 +113,10 @@ export interface PlotLabelOptions {
     x?: number;
     y?: number;
     rotation?: number;
+    /** Draws the label on a filled pill, the way a threshold states its value. */
+    backgroundColor?: string;
+    borderRadius?: number;
+    padding?: number;
     style?: TextStyle;
 }
 export interface StackLabelsOptions {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/kit-charts",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Small React chart library on SVG, with a Highcharts-shaped configuration model",
   "license": "MIT",
   "repository": {
@@ -38,7 +38,7 @@
     "@pushwoosh/kit-constants": "^1.8.0"
   },
   "devDependencies": {
-    "@pushwoosh/frontend-builder-engine": "^3.0.0",
+    "@pushwoosh/frontend-builder-engine": "^3.1.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^30.0.0",

package/series/area/area.js

@@ -13,7 +13,6 @@ export const area = {
   },
   extendDomain: (series, acc) => includeZero(series, acc),
   render: ctx => {
-    var _ctx$hovered, _ctx$series$marker;
     const slots = projectSeries(ctx);
     const projected = drawable(slots);
     if (!projected.length) {
@@ -21,7 +20,7 @@ export const area = {
     }
     const color = ctx.color;
     const lineWidth = ctx.series.lineWidth ?? 2;
-    const hoveredIndex = (_ctx$hovered = ctx.hovered) === null || _ctx$hovered === void 0 ? void 0 : _ctx$hovered.pointIndex;
+    const hoveredIndex = ctx.hovered?.pointIndex;
     const hovered = hoveredIndex === undefined ? undefined : projected.find(({
       point
     }) => point.index === hoveredIndex);
@@ -45,7 +44,7 @@ export const area = {
       }), hovered ? _jsx("circle", {
         cx: hovered.px,
         cy: hovered.py,
-        r: ((_ctx$series$marker = ctx.series.marker) === null || _ctx$series$marker === void 0 || (_ctx$series$marker = _ctx$series$marker.states) === null || _ctx$series$marker === void 0 || (_ctx$series$marker = _ctx$series$marker.hover) === null || _ctx$series$marker === void 0 ? void 0 : _ctx$series$marker.radius) ?? 4,
+        r: ctx.series.marker?.states?.hover?.radius ?? 4,
         fill: color,
         stroke: "#FFFFFF",
         strokeWidth: 2

package/series/column/column.js

@@ -42,12 +42,11 @@ function toBars(ctx) {
   });
 }
 const fillOf = (ctx, bar, hovered) => {
-  var _ctx$series$states;
   const base = bar.point.color ?? ctx.color;
   if (!hovered) {
     return base;
   }
-  return brighten(base, ((_ctx$series$states = ctx.series.states) === null || _ctx$series$states === void 0 || (_ctx$series$states = _ctx$series$states.hover) === null || _ctx$series$states === void 0 ? void 0 : _ctx$series$states.brightness) ?? DEFAULT_HOVER_BRIGHTNESS);
+  return brighten(base, ctx.series.states?.hover?.brightness ?? DEFAULT_HOVER_BRIGHTNESS);
 };
 /**
  * A translucent body under a solid rule is the funnel look: the series keeps its
@@ -55,12 +54,11 @@ const fillOf = (ctx, bar, hovered) => {
  * bar is washed out. Hovering deepens it.
  */
 const opacityOf = (ctx, hovered) => {
-  var _ctx$series$states2;
   const base = ctx.series.fillOpacity;
   if (!hovered) {
     return base;
   }
-  return ((_ctx$series$states2 = ctx.series.states) === null || _ctx$series$states2 === void 0 || (_ctx$series$states2 = _ctx$series$states2.hover) === null || _ctx$series$states2 === void 0 ? void 0 : _ctx$series$states2.fillOpacity) ?? base;
+  return ctx.series.states?.hover?.fillOpacity ?? base;
 };
 export const column = {
   type: 'column',
@@ -71,12 +69,11 @@ export const column = {
   exit: 'collapse',
   extendDomain: (series, acc) => includeZero(series, acc),
   render: ctx => {
-    var _ctx$hovered;
     const bars = toBars(ctx);
     if (!bars.length) {
       return null;
     }
-    const hoveredIndex = (_ctx$hovered = ctx.hovered) === null || _ctx$hovered === void 0 ? void 0 : _ctx$hovered.pointIndex;
+    const hoveredIndex = ctx.hovered?.pointIndex;
     const radius = ctx.series.borderRadius;
     const borderWidth = ctx.series.borderWidth ?? 0;
     const capped = borderWidth > 0 && ctx.series.borderPosition === 'top';
@@ -120,7 +117,6 @@ export const column = {
     });
   },
   hitTest: (ctx, pointer) => {
-    var _ctx$slot;
     const bars = toBars(ctx);
     if (!bars.length) {
       return null;
@@ -130,7 +126,7 @@ export const column = {
     if (pointer.y < top || pointer.y > bottom) {
       return null;
     }
-    const step = ((_ctx$slot = ctx.slot) === null || _ctx$slot === void 0 ? void 0 : _ctx$slot.step) ?? ctx.plot.width / 2;
+    const step = ctx.slot?.step ?? ctx.plot.width / 2;
     let candidate;
     let candidateGap = Infinity;
     bars.forEach(bar => {

package/series/heatmap/heatmap.js

@@ -74,18 +74,16 @@ function toCells(ctx) {
   }, []);
 }
 const fillOf = (ctx, cell, hovered) => {
-  var _ctx$scales$color, _ctx$series$states;
-  const scaled = cell.point.value === null ? undefined : (_ctx$scales$color = ctx.scales.color) === null || _ctx$scales$color === void 0 ? void 0 : _ctx$scales$color.map(cell.point.value);
+  const scaled = cell.point.value === null ? undefined : ctx.scales.color?.map(cell.point.value);
   const base = cell.point.color ?? scaled ?? ctx.color;
   if (!hovered) {
     return base;
   }
-  return brighten(base, ((_ctx$series$states = ctx.series.states) === null || _ctx$series$states === void 0 || (_ctx$series$states = _ctx$series$states.hover) === null || _ctx$series$states === void 0 ? void 0 : _ctx$series$states.brightness) ?? DEFAULT_HOVER_BRIGHTNESS);
+  return brighten(base, ctx.series.states?.hover?.brightness ?? DEFAULT_HOVER_BRIGHTNESS);
 };
 const labelX = (ctx, cell) => {
-  var _ctx$series$dataLabel, _ctx$series$dataLabel2;
-  const padding = ((_ctx$series$dataLabel = ctx.series.dataLabels) === null || _ctx$series$dataLabel === void 0 ? void 0 : _ctx$series$dataLabel.padding) ?? VALUE_LABEL_GAP;
-  const align = (_ctx$series$dataLabel2 = ctx.series.dataLabels) === null || _ctx$series$dataLabel2 === void 0 ? void 0 : _ctx$series$dataLabel2.align;
+  const padding = ctx.series.dataLabels?.padding ?? VALUE_LABEL_GAP;
+  const align = ctx.series.dataLabels?.align;
   if (align === 'left') {
     return cell.x + padding;
   }
@@ -117,12 +115,11 @@ export const heatmap = {
     };
   },
   render: ctx => {
-    var _ctx$hovered;
     const cells = toCells(ctx);
     if (!cells.length) {
       return null;
     }
-    const hoveredIndex = (_ctx$hovered = ctx.hovered) === null || _ctx$hovered === void 0 ? void 0 : _ctx$hovered.pointIndex;
+    const hoveredIndex = ctx.hovered?.pointIndex;
     const borderWidth = ctx.series.borderWidth ?? 0;
     const radius = ctx.series.borderRadius;
     return _jsxs("g", {

package/series/line/line.js

@@ -11,14 +11,13 @@ export const line = {
   },
   extendDomain: (_series, acc) => acc,
   render: ctx => {
-    var _ctx$hovered, _ctx$series$marker;
     const slots = projectSeries(ctx);
     const projected = drawable(slots);
     if (!projected.length) {
       return null;
     }
     const color = ctx.color;
-    const hoveredIndex = (_ctx$hovered = ctx.hovered) === null || _ctx$hovered === void 0 ? void 0 : _ctx$hovered.pointIndex;
+    const hoveredIndex = ctx.hovered?.pointIndex;
     const hovered = hoveredIndex === undefined ? undefined : projected.find(({
       point
     }) => point.index === hoveredIndex);
@@ -37,7 +36,7 @@ export const line = {
       }), hovered ? _jsx("circle", {
         cx: hovered.px,
         cy: hovered.py,
-        r: ((_ctx$series$marker = ctx.series.marker) === null || _ctx$series$marker === void 0 || (_ctx$series$marker = _ctx$series$marker.states) === null || _ctx$series$marker === void 0 || (_ctx$series$marker = _ctx$series$marker.hover) === null || _ctx$series$marker === void 0 ? void 0 : _ctx$series$marker.radius) ?? 4,
+        r: ctx.series.marker?.states?.hover?.radius ?? 4,
         fill: color,
         stroke: "#FFFFFF",
         strokeWidth: 2

package/series/pie/pie.js

@@ -95,11 +95,10 @@ function Labels({
   geometry
 }) {
   const labels = ctx.series.dataLabels;
-  if (!(labels !== null && labels !== void 0 && labels.enabled)) {
+  if (!labels?.enabled) {
     return null;
   }
   return slices.filter(slice => !slice.hidden).map(slice => {
-    var _labels$style, _labels$style2, _labels$style3, _labels$style4;
     const mid = (slice.from + slice.to) / 2;
     const at = polar(geometry.cx, geometry.cy, geometry.outer + LABEL_OFFSET, mid);
     const text = labels.formatter ? labels.formatter({
@@ -116,10 +115,10 @@ function Labels({
       y: at.y,
       textAnchor: Math.cos(mid) < 0 ? 'end' : 'start',
       dominantBaseline: "middle",
-      fill: labels.color ?? ((_labels$style = labels.style) === null || _labels$style === void 0 ? void 0 : _labels$style.color),
-      fontFamily: (_labels$style2 = labels.style) === null || _labels$style2 === void 0 ? void 0 : _labels$style2.fontFamily,
-      fontSize: ((_labels$style3 = labels.style) === null || _labels$style3 === void 0 ? void 0 : _labels$style3.fontSize) ?? '11px',
-      fontWeight: (_labels$style4 = labels.style) === null || _labels$style4 === void 0 ? void 0 : _labels$style4.fontWeight,
+      fill: labels.color ?? labels.style?.color,
+      fontFamily: labels.style?.fontFamily,
+      fontSize: labels.style?.fontSize ?? '11px',
+      fontWeight: labels.style?.fontWeight,
       children: text
     }, `label-${slice.point.index}`);
   });
@@ -134,7 +133,6 @@ function Labels({
 function Slices({
   ctx
 }) {
-  var _ctx$hovered;
   const slices = toSlices(ctx);
   const alive = ctx.points.some(point => !ctx.hiddenPoints.has(point.index));
   const targets = [...slices.flatMap(slice => [slice.from, slice.to]), ctx.hidden || !alive ? 0 : 1];
@@ -144,7 +142,7 @@ function Slices({
   }
   const radiusScale = tweened[tweened.length - 1] ?? 1;
   const geometry = geometryOf(ctx, radiusScale);
-  const hovered = (_ctx$hovered = ctx.hovered) === null || _ctx$hovered === void 0 ? void 0 : _ctx$hovered.pointIndex;
+  const hovered = ctx.hovered?.pointIndex;
   const drawn = slices.map((slice, index) => ({
     ...slice,
     from: tweened[index * 2] ?? slice.from,

package/series/shared/DataLabels.js

@@ -13,11 +13,11 @@ export const labelAnchor = align => {
   return 'middle';
 };
 const textProps = style => ({
-  fontFamily: style === null || style === void 0 ? void 0 : style.fontFamily,
-  fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
-  fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
-  fontStyle: style === null || style === void 0 ? void 0 : style.fontStyle,
-  paintOrder: (style === null || style === void 0 ? void 0 : style.textOutline) === 'none' ? undefined : 'stroke'
+  fontFamily: style?.fontFamily,
+  fontSize: style?.fontSize,
+  fontWeight: style?.fontWeight,
+  fontStyle: style?.fontStyle,
+  paintOrder: style?.textOutline === 'none' ? undefined : 'stroke'
 });
 /** No formatter and no format string: the chart's own number rule prints it. */
 const defaultLabel = (ctx, format, y) => {
@@ -44,7 +44,7 @@ export function DataLabels({
   positionOf
 }) {
   const options = ctx.series.dataLabels;
-  if (!(options !== null && options !== void 0 && options.enabled)) {
+  if (!options?.enabled) {
     return null;
   }
   const turbo = ctx.series.turboThreshold;
@@ -110,12 +110,12 @@ export function DataLabels({
       x: at.x,
       y: y,
       textAnchor: anchor,
-      fill: options.color ?? (style === null || style === void 0 ? void 0 : style.color) ?? DEFAULT_TEXT_COLOR,
+      fill: options.color ?? style?.color ?? DEFAULT_TEXT_COLOR,
       ...textProps(style),
       children: lines && lines.length > 1 ? lines.map((text, index) => _jsx("tspan", {
         x: at.x,
         dy: index === 0 ? 0 : textHeight(secondary ?? style),
-        fill: index === 0 ? undefined : secondary === null || secondary === void 0 ? void 0 : secondary.color,
+        fill: index === 0 ? undefined : secondary?.color,
         ...(index === 0 ? {} : textProps(secondary)),
         children: text
       }, `line-${index}`)) : content