@pushwoosh/kit-charts 0.0.2 → 0.0.3

package/core/Chart/Tooltip.js

@@ -11,10 +11,9 @@ export function Tooltip({
   pointer,
   children
 }) {
-  var _options$style, _options$style2, _options$style3, _options$style4;
   const ref = useRef(null);
-  const callout = ((options === null || options === void 0 ? void 0 : options.shape) ?? 'callout') === 'callout' && !(options !== null && options !== void 0 && options.followPointer);
-  const target = options !== null && options !== void 0 && options.followPointer ? pointer : at;
+  const callout = (options?.shape ?? 'callout') === 'callout' && !options?.followPointer;
+  const target = options?.followPointer ? pointer : at;
   const [placement, setPlacement] = useState({
     x: target.x + TOOLTIP_CURSOR_OFFSET,
     y: target.y + TOOLTIP_CURSOR_OFFSET,
@@ -57,25 +56,25 @@ export function Tooltip({
   if (typeof document === 'undefined') {
     return null;
   }
-  const shadow = options === null || options === void 0 ? void 0 : options.shadow;
+  const shadow = options?.shadow;
   // A table needs room and columns; the dark hint chrome reads badly at that size,
   // so the tabular tooltip is a light card unless the caller says otherwise.
-  const tabular = Boolean(options === null || options === void 0 ? void 0 : options.table);
-  const background = (options === null || options === void 0 ? void 0 : options.backgroundColor) ?? (tabular ? DEFAULTS.surface : DEFAULTS.tooltipSurface);
-  const color = (options === null || options === void 0 || (_options$style = options.style) === null || _options$style === void 0 ? void 0 : _options$style.color) ?? (tabular ? DEFAULTS.text : DEFAULTS.tooltipText);
+  const tabular = Boolean(options?.table);
+  const background = options?.backgroundColor ?? (tabular ? DEFAULTS.surface : DEFAULTS.tooltipSurface);
+  const color = options?.style?.color ?? (tabular ? DEFAULTS.text : DEFAULTS.tooltipText);
   return createPortal(_jsxs(TooltipBox, {
     ref: ref,
     role: "tooltip",
     "$x": placement.x,
     "$y": placement.y,
-    "$padding": (options === null || options === void 0 ? void 0 : options.padding) ?? TOOLTIP_PADDING,
-    "$radius": (options === null || options === void 0 ? void 0 : options.borderRadius) ?? TOOLTIP_RADIUS,
-    "$borderColor": (options === null || options === void 0 ? void 0 : options.borderColor) ?? (tabular ? DEFAULTS.border : 'transparent'),
+    "$padding": options?.padding ?? TOOLTIP_PADDING,
+    "$radius": options?.borderRadius ?? TOOLTIP_RADIUS,
+    "$borderColor": options?.borderColor ?? (tabular ? DEFAULTS.border : 'transparent'),
     "$background": background,
     "$color": color,
-    "$fontFamily": (options === null || options === void 0 || (_options$style2 = options.style) === null || _options$style2 === void 0 ? void 0 : _options$style2.fontFamily) ?? DEFAULTS.fontFamily,
-    "$fontSize": (options === null || options === void 0 || (_options$style3 = options.style) === null || _options$style3 === void 0 ? void 0 : _options$style3.fontSize) ?? DEFAULTS.fontSize,
-    "$whiteSpace": (options === null || options === void 0 || (_options$style4 = options.style) === null || _options$style4 === void 0 ? void 0 : _options$style4.whiteSpace) ?? 'nowrap',
+    "$fontFamily": options?.style?.fontFamily ?? DEFAULTS.fontFamily,
+    "$fontSize": options?.style?.fontSize ?? DEFAULTS.fontSize,
+    "$whiteSpace": options?.style?.whiteSpace ?? 'nowrap',
     "$shadow": shadow ? `${shadow.offsetX ?? 0}px ${shadow.offsetY ?? 2}px ${shadow.width ?? 8}px ` + `${shadow.color ?? SHADOW_COLOR}` : DEFAULT_SHADOW,
     children: [children, placement.tailX === null ? null : _jsx(Tail, {
       "$left": placement.tailX,

package/core/data/points.js

@@ -15,7 +15,7 @@ const isPointObject = point => typeof point === 'object' && point !== null && !A
 /** What a hit or a tooltip should show for the point's x: its category, else its x. */
 export const pointKey = point => point.band ?? point.name ?? point.x;
 export function normalizePoints(data, seriesName = 'series') {
-  if (!(data !== null && data !== void 0 && data.length)) {
+  if (!data?.length) {
     return [];
   }
   return data.map((point, index) => {

package/core/geometry/path.js

@@ -24,8 +24,7 @@ export function projectSeries(ctx) {
     return [];
   }
   return ctx.points.map((point, index) => {
-    var _ctx$stacked;
-    const stacked = (_ctx$stacked = ctx.stacked) === null || _ctx$stacked === void 0 ? void 0 : _ctx$stacked[index];
+    const stacked = ctx.stacked?.[index];
     if (point.y === null || ctx.hiddenPoints.has(point.index) || ctx.stacked && !stacked) {
       return null;
     }

package/core/layout/legend-layout.js

@@ -1,16 +1,16 @@
 import { measureText, textHeight } from './measure-text';
 import { LEGEND_BLOCK_GAP, LEGEND_ROW_GAP } from './metrics';
 const itemWidth = (item, options) => {
-  const symbolSize = (options === null || options === void 0 ? void 0 : options.symbolHeight) ?? 8;
-  return symbolSize + ((options === null || options === void 0 ? void 0 : options.symbolPadding) ?? 6) + measureText(item.label, options === null || options === void 0 ? void 0 : options.itemStyle);
+  const symbolSize = options?.symbolHeight ?? 8;
+  return symbolSize + (options?.symbolPadding ?? 6) + measureText(item.label, options?.itemStyle);
 };
 export function measureLegend(items, options) {
-  const rowHeight = textHeight(options === null || options === void 0 ? void 0 : options.itemStyle);
-  const vertical = ((options === null || options === void 0 ? void 0 : options.layout) ?? 'horizontal') === 'vertical';
+  const rowHeight = textHeight(options?.itemStyle);
+  const vertical = (options?.layout ?? 'horizontal') === 'vertical';
   // A middle-aligned legend has nowhere to go above or below the plot, so it
   // takes a column at the side instead — the same trade Highcharts makes.
-  const beside = ((options === null || options === void 0 ? void 0 : options.verticalAlign) ?? 'bottom') === 'middle';
-  if (!items.length || (options === null || options === void 0 ? void 0 : options.enabled) === false) {
+  const beside = (options?.verticalAlign ?? 'bottom') === 'middle';
+  if (!items.length || options?.enabled === false) {
     return {
       width: 0,
       height: 0,
@@ -43,10 +43,10 @@ export function measureLegend(items, options) {
  */
 export function layoutLegend(items, options, plot, size, spacing) {
   const metrics = measureLegend(items, options);
-  const distance = (options === null || options === void 0 ? void 0 : options.itemDistance) ?? 16;
-  const align = (options === null || options === void 0 ? void 0 : options.align) ?? 'left';
-  const shiftX = (options === null || options === void 0 ? void 0 : options.x) ?? 0;
-  const shiftY = (options === null || options === void 0 ? void 0 : options.y) ?? 0;
+  const distance = options?.itemDistance ?? 16;
+  const align = options?.align ?? 'left';
+  const shiftX = options?.x ?? 0;
+  const shiftY = options?.y ?? 0;
   const widths = items.map(item => itemWidth(item, options));
   const rowStep = metrics.rowHeight + LEGEND_ROW_GAP;
   if (metrics.vertical || metrics.beside) {
@@ -65,7 +65,7 @@ export function layoutLegend(items, options, plot, size, spacing) {
       if (metrics.beside) {
         return plot.y + (plot.height - block) / 2 + metrics.rowHeight / 2;
       }
-      return ((options === null || options === void 0 ? void 0 : options.verticalAlign) ?? 'bottom') === 'top' ? plot.y - metrics.height + metrics.rowHeight : plot.y + plot.height + metrics.rowHeight + LEGEND_ROW_GAP;
+      return (options?.verticalAlign ?? 'bottom') === 'top' ? plot.y - metrics.height + metrics.rowHeight : plot.y + plot.height + metrics.rowHeight + LEGEND_ROW_GAP;
     })();
     return {
       metrics,
@@ -88,7 +88,7 @@ export function layoutLegend(items, options, plot, size, spacing) {
   // Sit on the last row inside the chart's bottom spacing, not on the canvas
   // edge: flush with the edge, the row's own descenders and its focus ring are
   // cut off by the viewport.
-  const y = ((options === null || options === void 0 ? void 0 : options.verticalAlign) ?? 'bottom') === 'top' ? plot.y - metrics.height + metrics.rowHeight : size.height - spacing[2] - metrics.rowHeight / 2;
+  const y = (options?.verticalAlign ?? 'bottom') === 'top' ? plot.y - metrics.height + metrics.rowHeight : size.height - spacing[2] - metrics.rowHeight / 2;
   const offsets = widths.reduce((acc, _width, index) => {
     acc.push(index === 0 ? startX : acc[index - 1] + widths[index - 1] + distance);
     return acc;

package/core/layout/measure-text.js

@@ -17,9 +17,9 @@ export const DEFAULT_FONT_FAMILY = FontFamily.MAIN;
 export const DEFAULT_TITLE_FONT_SIZE = FontSize.HEADING2;
 export const DEFAULT_SUBTITLE_FONT_SIZE = FontSize.SMALL;
 export const toCssFont = style => {
-  const weight = (style === null || style === void 0 ? void 0 : style.fontWeight) ?? 'normal';
-  const size = (style === null || style === void 0 ? void 0 : style.fontSize) ?? DEFAULT_FONT_SIZE;
-  const family = (style === null || style === void 0 ? void 0 : style.fontFamily) ?? DEFAULT_FONT_FAMILY;
+  const weight = style?.fontWeight ?? 'normal';
+  const size = style?.fontSize ?? DEFAULT_FONT_SIZE;
+  const family = style?.fontFamily ?? DEFAULT_FONT_FAMILY;
   return `${weight} ${size} ${family}`;
 };
 const parseFontSize = font => {

package/core/layout/title-layout.js

@@ -5,14 +5,8 @@ const ANCHOR = {
   center: 'middle',
   right: 'end'
 };
-const shown = title => {
-  var _title$style;
-  return Boolean(title === null || title === void 0 ? void 0 : title.text) && (title === null || title === void 0 || (_title$style = title.style) === null || _title$style === void 0 ? void 0 : _title$style.display) !== 'none';
-};
-const sizeOf = (title, fallback) => {
-  var _title$style2;
-  return (title === null || title === void 0 || (_title$style2 = title.style) === null || _title$style2 === void 0 ? void 0 : _title$style2.fontSize) ?? fallback;
-};
+const shown = title => Boolean(title?.text) && title?.style?.display !== 'none';
+const sizeOf = (title, fallback) => title?.style?.fontSize ?? fallback;
 export function layoutTitles(options, size, spacing) {
   const [spaceTop, spaceRight,, spaceLeft] = spacing;
   const {
@@ -22,13 +16,13 @@ export function layoutTitles(options, size, spacing) {
   const entries = [];
   const push = (key, source, fontSize, top) => {
     const height = textHeight({
-      ...(source === null || source === void 0 ? void 0 : source.style),
+      ...source?.style,
       fontSize
     });
     if (!shown(source)) {
       return 0;
     }
-    const align = (source === null || source === void 0 ? void 0 : source.align) ?? 'left';
+    const align = source?.align ?? 'left';
     const x = (() => {
       if (align === 'center') {
         return size.width / 2;
@@ -38,10 +32,10 @@ export function layoutTitles(options, size, spacing) {
       }
       return spaceLeft;
     })();
-    const text = (source === null || source === void 0 ? void 0 : source.text) ?? '';
+    const text = source?.text ?? '';
     const baseline = top + height;
     const width = measureText(text, {
-      ...(source === null || source === void 0 ? void 0 : source.style),
+      ...source?.style,
       fontSize
     });
     // The icon follows the text, wherever the anchor put it.
@@ -61,9 +55,9 @@ export function layoutTitles(options, size, spacing) {
       // `y` is a baseline, so the first line starts one line height down.
       y: baseline,
       anchor: ANCHOR[align],
-      style: source === null || source === void 0 ? void 0 : source.style,
+      style: source?.style,
       fontSize,
-      hint: source !== null && source !== void 0 && source.hint ? {
+      hint: source?.hint ? {
         text: source.hint,
         x: textEnd + HINT_ICON_GAP + HINT_ICON_SIZE / 2,
         y: baseline - textHeight({
@@ -76,7 +70,7 @@ export function layoutTitles(options, size, spacing) {
   const titleHeight = push('title', title, sizeOf(title, DEFAULT_TITLE_FONT_SIZE), spaceTop);
   // The caption shares the title's row, pushed to the far edge: the note about
   // what the figures cover belongs beside the name, not under it.
-  if (title !== null && title !== void 0 && title.caption) {
+  if (title?.caption) {
     push('caption', {
       text: title.caption,
       align: 'right',

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/kit-charts",
-  "version": "0.0.2",
+  "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 => {