@pushwoosh/kit-charts 0.0.1 → 0.0.3

package/ai-documentation.md

@@ -103,6 +103,25 @@ takes `value`; on a category axis both address a category by name and a band
 covers the whole slot. Both accept a `label`, and a `zIndex` of 5 or more draws
 them over the series instead of under it — the value Highcharts users reach for.
 
+A label's `align` is horizontal and its `verticalAlign` vertical whichever way
+the decoration runs, as in Highcharts: a line on a y axis takes its label to the
+left edge of the plot (`align: 'left'`, the default there) and sits it on the
+rule (`verticalAlign: 'middle'`). `x`/`y` shift it from there — a negative `x`
+hangs it in the axis gutter.
+
+`label.backgroundColor` draws the label on a pill instead of leaving it as loose
+text, with `borderRadius` and `padding` to tune it. The text takes whichever of
+white and `BRAND_BLACK` reads better on that fill — the greys a threshold is
+painted in carry white at under 3:1 — and `style.color` overrides the choice.
+That is what a threshold needs: a number sitting on a rule has no
+ground of its own to read against. Highcharts has no such option — it takes
+`useHTML` and a styled span, which this library has no equivalent of — so this is
+an addition rather than a divergence: a Highcharts config still renders.
+
+Whether a threshold is breached is the application's decision, not the chart's:
+it passes the colour. Golden cases `area/threshold` and `area/threshold-breached`
+are the same options with one colour changed.
+
 ## Interaction
 
 `onPointClick(point, event)` reports the point nearest a click inside the plot,

package/core/Chart/Axes.js

@@ -4,10 +4,10 @@ import { DEFAULT_FONT_SIZE, measureText } from '../layout/measure-text';
 import { AXIS_LABEL_GAP, AXIS_TITLE_GAP, crisp, TEXT_BASELINE_SHIFT, X_AXIS_LABEL_DROP, X_AXIS_TITLE_GAP } from '../layout/metrics';
 import { DEFAULT_AXIS_COLOR, DEFAULT_GRID_COLOR, DEFAULT_MUTED_TEXT_COLOR } from '../model/palette';
 const textProps = style => ({
-  fill: (style === null || style === void 0 ? void 0 : style.color) ?? DEFAULT_MUTED_TEXT_COLOR,
-  fontFamily: style === null || style === void 0 ? void 0 : style.fontFamily,
-  fontSize: (style === null || style === void 0 ? void 0 : style.fontSize) ?? DEFAULT_FONT_SIZE,
-  fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight
+  fill: style?.color ?? DEFAULT_MUTED_TEXT_COLOR,
+  fontFamily: style?.fontFamily,
+  fontSize: style?.fontSize ?? DEFAULT_FONT_SIZE,
+  fontWeight: style?.fontWeight
 });
 const ANCHOR = {
   left: 'start',
@@ -71,8 +71,7 @@ function AxisTitle({
   anchor,
   defaultRotation
 }) {
-  var _title$style;
-  if (!(title !== null && title !== void 0 && title.text) || ((_title$style = title.style) === null || _title$style === void 0 ? void 0 : _title$style.display) === 'none') {
+  if (!title?.text || title.style?.display === 'none') {
     return null;
   }
   const rotation = title.rotation ?? defaultRotation;
@@ -90,8 +89,7 @@ function AxisTitle({
   });
 }
 const titleY = (options, plot) => {
-  var _options$title;
-  const align = ((_options$title = options.title) === null || _options$title === void 0 ? void 0 : _options$title.align) ?? 'middle';
+  const align = options.title?.align ?? 'middle';
   if (align === 'high') {
     return plot.y;
   }
@@ -104,7 +102,6 @@ export function XAxis({
   plot,
   axis
 }) {
-  var _options$labels, _options$labels2, _options$title2;
   const {
     options
   } = axis;
@@ -118,8 +115,8 @@ export function XAxis({
   const lineColor = options.lineColor ?? DEFAULT_AXIS_COLOR;
   const tickLength = options.tickLength ?? 0;
   const tickWidth = options.tickWidth ?? 1;
-  const labelsEnabled = ((_options$labels = options.labels) === null || _options$labels === void 0 ? void 0 : _options$labels.enabled) !== false;
-  const labelY = baseline + direction * (tickLength + (onTop ? AXIS_LABEL_GAP : X_AXIS_LABEL_DROP)) + (((_options$labels2 = options.labels) === null || _options$labels2 === void 0 ? void 0 : _options$labels2.y) ?? 0);
+  const labelsEnabled = options.labels?.enabled !== false;
+  const labelY = baseline + direction * (tickLength + (onTop ? AXIS_LABEL_GAP : X_AXIS_LABEL_DROP)) + (options.labels?.y ?? 0);
   return _jsxs("g", {
     children: [options.lineWidth === 0 ? null : _jsx("line", {
       x1: plot.x,
@@ -128,29 +125,26 @@ export function XAxis({
       y2: crisp(baseline, options.lineWidth ?? 1),
       stroke: lineColor,
       strokeWidth: options.lineWidth ?? 1
-    }), axis.ticks.map(tick => {
-      var _options$labels3, _options$labels4;
-      return _jsxs("g", {
-        children: [tickLength > 0 && tickWidth > 0 ? _jsx("line", {
-          x1: crisp(tick.position, tickWidth),
-          x2: crisp(tick.position, tickWidth),
-          y1: crisp(baseline, tickWidth),
-          y2: crisp(baseline + direction * tickLength, tickWidth),
-          stroke: options.tickColor ?? lineColor,
-          strokeWidth: tickWidth
-        }) : null, labelsEnabled && tick.label ? _jsx(TickLabel, {
-          hint: tick.hint,
-          x: tick.position + (((_options$labels3 = options.labels) === null || _options$labels3 === void 0 ? void 0 : _options$labels3.x) ?? 0),
-          y: labelY,
-          anchor: tick.anchor,
-          style: (_options$labels4 = options.labels) === null || _options$labels4 === void 0 ? void 0 : _options$labels4.style,
-          children: tick.label
-        }) : null]
-      }, `x-${tick.value}`);
-    }), _jsx(AxisTitle, {
+    }), axis.ticks.map(tick => _jsxs("g", {
+      children: [tickLength > 0 && tickWidth > 0 ? _jsx("line", {
+        x1: crisp(tick.position, tickWidth),
+        x2: crisp(tick.position, tickWidth),
+        y1: crisp(baseline, tickWidth),
+        y2: crisp(baseline + direction * tickLength, tickWidth),
+        stroke: options.tickColor ?? lineColor,
+        strokeWidth: tickWidth
+      }) : null, labelsEnabled && tick.label ? _jsx(TickLabel, {
+        hint: tick.hint,
+        x: tick.position + (options.labels?.x ?? 0),
+        y: labelY,
+        anchor: tick.anchor,
+        style: options.labels?.style,
+        children: tick.label
+      }) : null]
+    }, `x-${tick.value}`)), _jsx(AxisTitle, {
       title: options.title,
       x: plot.x + plot.width / 2,
-      y: labelY + direction * ((((_options$title2 = options.title) === null || _options$title2 === void 0 ? void 0 : _options$title2.offset) ?? 0) + X_AXIS_TITLE_GAP),
+      y: labelY + direction * ((options.title?.offset ?? 0) + X_AXIS_TITLE_GAP),
       anchor: "middle",
       defaultRotation: 0
     })]
@@ -160,40 +154,33 @@ export function YAxis({
   plot,
   axis
 }) {
-  var _options$labels5, _options$labels6, _options$title3, _options$title4;
   const {
     options
   } = axis;
   if (options.visible === false) {
     return null;
   }
-  const labelsEnabled = ((_options$labels5 = options.labels) === null || _options$labels5 === void 0 ? void 0 : _options$labels5.enabled) !== false;
+  const labelsEnabled = options.labels?.enabled !== false;
   const onRight = options.opposite === true;
   const offset = options.offset ?? 0;
   // `offset` pushes the whole axis — labels and title — away from the plot.
   const edge = onRight ? plot.x + plot.width + AXIS_LABEL_GAP + offset : plot.x - AXIS_LABEL_GAP - offset;
-  const anchor = (((_options$labels6 = options.labels) === null || _options$labels6 === void 0 ? void 0 : _options$labels6.align) && ANCHOR[options.labels.align]) ?? (onRight ? 'start' : 'end');
-  const columnWidth = labelsEnabled ? axis.ticks.reduce((widest, tick) => {
-    var _options$labels7;
-    return Math.max(widest, measureText(tick.label, (_options$labels7 = options.labels) === null || _options$labels7 === void 0 ? void 0 : _options$labels7.style));
-  }, 0) : 0;
+  const anchor = (options.labels?.align && ANCHOR[options.labels.align]) ?? (onRight ? 'start' : 'end');
+  const columnWidth = labelsEnabled ? axis.ticks.reduce((widest, tick) => Math.max(widest, measureText(tick.label, options.labels?.style)), 0) : 0;
   // Where the labels grow away from the plot, the title has to clear the whole
   // column of them or it lands on top of the numbers.
   const outwards = onRight ? anchor !== 'end' : anchor !== 'start';
   const titleShift = outwards ? Math.ceil(columnWidth * (anchor === 'middle' ? 0.5 : 1)) + AXIS_TITLE_GAP : 0;
-  const titleX = onRight ? edge + titleShift + (((_options$title3 = options.title) === null || _options$title3 === void 0 ? void 0 : _options$title3.offset) ?? 0) : edge - titleShift - (((_options$title4 = options.title) === null || _options$title4 === void 0 ? void 0 : _options$title4.offset) ?? 0);
+  const titleX = onRight ? edge + titleShift + (options.title?.offset ?? 0) : edge - titleShift - (options.title?.offset ?? 0);
   return _jsxs("g", {
-    children: [labelsEnabled ? axis.ticks.map(tick => {
-      var _options$labels8, _options$labels9;
-      return tick.label ? _jsx(TickLabel, {
-        x: edge + (((_options$labels8 = options.labels) === null || _options$labels8 === void 0 ? void 0 : _options$labels8.x) ?? 0),
-        y: tick.position + TEXT_BASELINE_SHIFT,
-        anchor: anchor,
-        hint: tick.hint,
-        style: (_options$labels9 = options.labels) === null || _options$labels9 === void 0 ? void 0 : _options$labels9.style,
-        children: tick.label
-      }, `y-${tick.value}`) : null;
-    }) : null, _jsx(AxisTitle, {
+    children: [labelsEnabled ? axis.ticks.map(tick => tick.label ? _jsx(TickLabel, {
+      x: edge + (options.labels?.x ?? 0),
+      y: tick.position + TEXT_BASELINE_SHIFT,
+      anchor: anchor,
+      hint: tick.hint,
+      style: options.labels?.style,
+      children: tick.label
+    }, `y-${tick.value}`) : null) : null, _jsx(AxisTitle, {
       title: options.title,
       x: titleX,
       y: titleY(options, plot),

package/core/Chart/Chart.js

@@ -118,7 +118,6 @@ function ChartBody({
   onSeriesToggle,
   onPointClick
 }) {
-  var _options$chart, _options$chart2, _options$tooltip4, _options$tooltip7, _options$tooltip8, _options$title2, _options$tooltip1, _options$tooltip10, _options$chart3, _options$chart4, _options$chart5, _options$chart6, _options$chart7, _options$chart8, _options$chart9, _options$title3, _options$chart0, _options$chart1, _options$chart10;
   const [container, size] = useSize();
   const [hover, setHover] = useState(null);
   const [zoom, setZoom] = useState(null);
@@ -143,17 +142,17 @@ function ChartBody({
       } else {
         next.add(key);
       }
-      onSeriesToggle === null || onSeriesToggle === void 0 || onSeriesToggle(item.seriesIndex, !next.has(key), item.pointIndex);
+      onSeriesToggle?.(item.seriesIndex, !next.has(key), item.pointIndex);
       return next;
     });
   }, [onSeriesToggle]);
   const registry = useMemo(() => resolveRenderers(renderers), [renderers]);
   // A scrollable plot area draws at its minimum size and scrolls inside the box.
-  const scrollable = (_options$chart = options.chart) === null || _options$chart === void 0 ? void 0 : _options$chart.scrollablePlotArea;
+  const scrollable = options.chart?.scrollablePlotArea;
   const canvas = useMemo(() => ({
-    width: Math.max(size.width, (scrollable === null || scrollable === void 0 ? void 0 : scrollable.minWidth) ?? 0),
-    height: Math.max(size.height, (scrollable === null || scrollable === void 0 ? void 0 : scrollable.minHeight) ?? 0)
-  }), [size, scrollable === null || scrollable === void 0 ? void 0 : scrollable.minWidth, scrollable === null || scrollable === void 0 ? void 0 : scrollable.minHeight]);
+    width: Math.max(size.width, scrollable?.minWidth ?? 0),
+    height: Math.max(size.height, scrollable?.minHeight ?? 0)
+  }), [size, scrollable?.minWidth, scrollable?.minHeight]);
   // A zoom is an override on the first x axis, not a second source of truth: the
   // model is still built from the options, so everything downstream is unaware.
   const zoomed = useMemo(() => {
@@ -177,7 +176,7 @@ function ChartBody({
     renderers: registry,
     hidden
   }) : null, [zoomed, canvas, registry, hidden]);
-  const anyShown = (built === null || built === void 0 ? void 0 : built.series.some(series => !series.hidden)) ?? false;
+  const anyShown = built?.series.some(series => !series.hidden) ?? false;
   const lastShown = useRef(null);
   useEffect(() => {
     if (built && anyShown) {
@@ -213,7 +212,7 @@ function ChartBody({
     if (!yModel || yModel.scale.kind === 'color') {
       return null;
     }
-    const hit = hover === null || hover === void 0 ? void 0 : hover.hits.find(candidate => candidate.seriesIndex === series.index);
+    const hit = hover?.hits.find(candidate => candidate.seriesIndex === series.index);
     return {
       series: series.options,
       seriesIndex: series.index,
@@ -260,8 +259,7 @@ function ChartBody({
     };
   }, [model, contextFor]);
   const handlePointerMove = useCallback(event => {
-    var _options$tooltip, _options$tooltip2;
-    if (!model || ((_options$tooltip = options.tooltip) === null || _options$tooltip === void 0 ? void 0 : _options$tooltip.enabled) === false) {
+    if (!model || options.tooltip?.enabled === false) {
       return;
     }
     // While a zoom is being dragged out, a tooltip is in the way of the thing
@@ -282,7 +280,7 @@ function ChartBody({
       setHover(null);
       return;
     }
-    const shared = ((_options$tooltip2 = options.tooltip) === null || _options$tooltip2 === void 0 ? void 0 : _options$tooltip2.shared) ?? false;
+    const shared = options.tooltip?.shared ?? false;
     const nearest = hits.reduce((best, hit) => hit.distance < best.distance ? hit : best);
     const selected = shared ? hits.filter(hit => String(hit.x) === String(nearest.x)) : [nearest];
     const highest = selected.reduce((best, hit) => hit.anchor.y < best.anchor.y ? hit : best, selected[0]);
@@ -299,7 +297,7 @@ function ChartBody({
     });
   }, [model, hitsAt, options.tooltip, drag]);
   const handlePointerLeave = useCallback(() => setHover(null), []);
-  const zooms = ((_options$chart2 = options.chart) === null || _options$chart2 === void 0 ? void 0 : _options$chart2.zoomType) === 'x' && model !== null && isContinuous(model.xAxis.scale);
+  const zooms = options.chart?.zoomType === 'x' && model !== null && isContinuous(model.xAxis.scale);
   const localX = event => event.clientX - event.currentTarget.getBoundingClientRect().left;
   const startDrag = useCallback(event => {
     if (!zooms || !model) {
@@ -352,11 +350,10 @@ function ChartBody({
     setHover(null);
   }, []);
   const handleClick = useCallback(event => {
-    var _hitsAt, _series$points$neares;
     if (!onPointClick || !model) {
       return;
     }
-    const hits = ((_hitsAt = hitsAt(event)) === null || _hitsAt === void 0 ? void 0 : _hitsAt.hits) ?? [];
+    const hits = hitsAt(event)?.hits ?? [];
     if (!hits.length) {
       return;
     }
@@ -364,33 +361,30 @@ function ChartBody({
     const series = model.series.find(item => item.index === nearest.seriesIndex);
     onPointClick({
       seriesIndex: nearest.seriesIndex,
-      seriesName: (series === null || series === void 0 ? void 0 : series.options.name) ?? `Series ${nearest.seriesIndex + 1}`,
+      seriesName: series?.options.name ?? `Series ${nearest.seriesIndex + 1}`,
       pointIndex: nearest.pointIndex,
       x: nearest.x,
       y: nearest.y,
       value: nearest.value,
-      color: (series === null || series === void 0 ? void 0 : series.color) ?? DEFAULT_TEXT_COLOR,
-      meta: series === null || series === void 0 || (_series$points$neares = series.points[nearest.pointIndex]) === null || _series$points$neares === void 0 ? void 0 : _series$points$neares.meta
+      color: series?.color ?? DEFAULT_TEXT_COLOR,
+      meta: series?.points[nearest.pointIndex]?.meta
     }, event);
   }, [onPointClick, model, hitsAt]);
   const formatX = useCallback(value => {
-    var _options$tooltip3;
     if (typeof value !== 'number') {
       return String(value);
     }
-    const pattern = ((_options$tooltip3 = options.tooltip) === null || _options$tooltip3 === void 0 ? void 0 : _options$tooltip3.dateFormat) ?? (model && isContinuous(model.xAxis.scale) && model.xAxis.scale.kind === 'time' ? '%b %d, %Y' : undefined);
+    const pattern = options.tooltip?.dateFormat ?? (model && isContinuous(model.xAxis.scale) && model.xAxis.scale.kind === 'time' ? '%b %d, %Y' : undefined);
     return pattern ? formatTime(pattern, value) : String(value);
-  }, [(_options$tooltip4 = options.tooltip) === null || _options$tooltip4 === void 0 ? void 0 : _options$tooltip4.dateFormat, model]);
+  }, [options.tooltip?.dateFormat, model]);
   const formatValue = useCallback(value => {
-    var _options$tooltip5, _options$tooltip6;
     if (value === null) {
       return '—';
     }
     const text = model ? model.numberFormat(value) : String(value);
-    return `${((_options$tooltip5 = options.tooltip) === null || _options$tooltip5 === void 0 ? void 0 : _options$tooltip5.valuePrefix) ?? ''}${text}${((_options$tooltip6 = options.tooltip) === null || _options$tooltip6 === void 0 ? void 0 : _options$tooltip6.valueSuffix) ?? ''}`;
-  }, [(_options$tooltip7 = options.tooltip) === null || _options$tooltip7 === void 0 ? void 0 : _options$tooltip7.valuePrefix, (_options$tooltip8 = options.tooltip) === null || _options$tooltip8 === void 0 ? void 0 : _options$tooltip8.valueSuffix, model]);
+    return `${options.tooltip?.valuePrefix ?? ''}${text}${options.tooltip?.valueSuffix ?? ''}`;
+  }, [options.tooltip?.valuePrefix, options.tooltip?.valueSuffix, model]);
   const tooltipContent = useMemo(() => {
-    var _points$, _options$title, _options$tooltip9, _options$tooltip0;
     if (!hover || !model) {
       return null;
     }
@@ -403,18 +397,18 @@ function ChartBody({
     }
     const points = shown.map(hit => {
       const series = model.series.find(item => item.index === hit.seriesIndex);
-      const neighbours = (series === null || series === void 0 ? void 0 : series.points) ?? [];
+      const neighbours = series?.points ?? [];
       const previous = neighbours[hit.pointIndex - 1];
       const next = neighbours[hit.pointIndex + 1];
       return {
         seriesIndex: hit.seriesIndex,
-        seriesName: (series === null || series === void 0 ? void 0 : series.options.name) ?? `Series ${hit.seriesIndex + 1}`,
-        color: (series === null || series === void 0 ? void 0 : series.color) ?? DEFAULT_TEXT_COLOR,
+        seriesName: series?.options.name ?? `Series ${hit.seriesIndex + 1}`,
+        color: series?.color ?? DEFAULT_TEXT_COLOR,
         x: hit.x,
         y: hit.y,
         value: hit.value,
         index: hit.pointIndex,
-        meta: series === null || series === void 0 ? void 0 : series.options.meta,
+        meta: series?.options.meta,
         prev: previous ? {
           x: previous.x,
           y: previous.y,
@@ -428,34 +422,33 @@ function ChartBody({
       };
     });
     const ctx = {
-      x: ((_points$ = points[0]) === null || _points$ === void 0 ? void 0 : _points$.x) ?? 0,
+      x: points[0]?.x ?? 0,
       points,
       chart: {
-        title: ((_options$title = options.title) === null || _options$title === void 0 ? void 0 : _options$title.text) ?? undefined,
+        title: options.title?.text ?? undefined,
         meta: options.meta
       }
     };
-    const formatter = (_options$tooltip9 = options.tooltip) === null || _options$tooltip9 === void 0 ? void 0 : _options$tooltip9.formatter;
+    const formatter = options.tooltip?.formatter;
     if (formatter) {
       return formatter(ctx);
     }
-    const table = (_options$tooltip0 = options.tooltip) === null || _options$tooltip0 === void 0 ? void 0 : _options$tooltip0.table;
+    const table = options.tooltip?.table;
     return table ? tableTooltip(ctx, table, formatX) : defaultTooltip(ctx, formatX, formatValue);
-  }, [hover, model, (_options$title2 = options.title) === null || _options$title2 === void 0 ? void 0 : _options$title2.text, options.meta, (_options$tooltip1 = options.tooltip) === null || _options$tooltip1 === void 0 ? void 0 : _options$tooltip1.formatter, (_options$tooltip10 = options.tooltip) === null || _options$tooltip10 === void 0 ? void 0 : _options$tooltip10.table, formatX, formatValue]);
-  const hasData = (model === null || model === void 0 ? void 0 : model.series.some(series => series.points.some(point => point.y !== null))) ?? false;
-  const plotBorderWidth = ((_options$chart3 = options.chart) === null || _options$chart3 === void 0 ? void 0 : _options$chart3.plotBorderWidth) ?? 0;
+  }, [hover, model, options.title?.text, options.meta, options.tooltip?.formatter, options.tooltip?.table, formatX, formatValue]);
+  const hasData = model?.series.some(series => series.points.some(point => point.y !== null)) ?? false;
+  const plotBorderWidth = options.chart?.plotBorderWidth ?? 0;
   const scrolls = canvas.width > size.width || canvas.height > size.height;
   // Only horizontal scrolling pins anything, and only a left-hand y axis: that is
   // the one whose labels the plot would otherwise slide out from under. A right-hand
   // axis and a vertically scrolling chart both stay in the scrolling canvas.
-  const pinsAxes = canvas.width > size.width && !((model === null || model === void 0 ? void 0 : model.axisless) ?? true);
+  const pinsAxes = canvas.width > size.width && !(model?.axisless ?? true);
   const isPinned = axis => pinsAxes && axis.options.opposite !== true;
   // Highcharts dims the series a hover is not on. Ours only does it when asked:
   // switching it on by default would restyle every chart already drawn.
   const inactiveOpacity = series => {
-    var _series$options$state;
-    const opacity = (_series$options$state = series.options.states) === null || _series$options$state === void 0 || (_series$options$state = _series$options$state.inactive) === null || _series$options$state === void 0 ? void 0 : _series$options$state.opacity;
-    if (opacity === undefined || !(hover !== null && hover !== void 0 && hover.hits.length)) {
+    const opacity = series.options.states?.inactive?.opacity;
+    if (opacity === undefined || !hover?.hits.length) {
       return undefined;
     }
     return hover.hits.some(hit => hit.seriesIndex === series.index) ? undefined : opacity;
@@ -467,7 +460,7 @@ function ChartBody({
     if (animation === false) {
       return 0;
     }
-    return (animation === null || animation === void 0 ? void 0 : animation.duration) ?? MOTION_MS;
+    return animation?.duration ?? MOTION_MS;
   };
   const decorations = layer => {
     if (!model || model.axisless) {
@@ -491,12 +484,12 @@ function ChartBody({
     ...containerProps,
     ref: container,
     className: className,
-    "$width": toCssSize((_options$chart4 = options.chart) === null || _options$chart4 === void 0 ? void 0 : _options$chart4.width, '100%'),
-    "$height": toCssSize((_options$chart5 = options.chart) === null || _options$chart5 === void 0 ? void 0 : _options$chart5.height, '100%'),
-    "$autoHeight": ((_options$chart6 = options.chart) === null || _options$chart6 === void 0 ? void 0 : _options$chart6.height) === undefined,
-    "$background": (_options$chart7 = options.chart) === null || _options$chart7 === void 0 ? void 0 : _options$chart7.backgroundColor,
-    "$fontFamily": ((_options$chart8 = options.chart) === null || _options$chart8 === void 0 || (_options$chart8 = _options$chart8.style) === null || _options$chart8 === void 0 ? void 0 : _options$chart8.fontFamily) ?? DEFAULT_FONT_FAMILY,
-    "$fontSize": ((_options$chart9 = options.chart) === null || _options$chart9 === void 0 || (_options$chart9 = _options$chart9.style) === null || _options$chart9 === void 0 ? void 0 : _options$chart9.fontSize) ?? DEFAULT_FONT_SIZE,
+    "$width": toCssSize(options.chart?.width, '100%'),
+    "$height": toCssSize(options.chart?.height, '100%'),
+    "$autoHeight": options.chart?.height === undefined,
+    "$background": options.chart?.backgroundColor,
+    "$fontFamily": options.chart?.style?.fontFamily ?? DEFAULT_FONT_FAMILY,
+    "$fontSize": options.chart?.style?.fontSize ?? DEFAULT_FONT_SIZE,
     children: [isLoading ? _jsx(Centred, {
       children: loading ?? 'Loading…'
     }) : null, !isLoading && model && !hasData ? _jsx(Centred, {
@@ -507,7 +500,7 @@ function ChartBody({
         width: canvas.width,
         height: canvas.height,
         role: "img",
-        "aria-label": ((_options$title3 = options.title) === null || _options$title3 === void 0 ? void 0 : _options$title3.text) ?? 'Chart',
+        "aria-label": options.title?.text ?? 'Chart',
         onPointerMove: event => {
           extendDrag(event);
           handlePointerMove(event);
@@ -533,7 +526,7 @@ function ChartBody({
           width: model.plot.width,
           height: model.plot.height,
           fill: "none",
-          stroke: ((_options$chart0 = options.chart) === null || _options$chart0 === void 0 ? void 0 : _options$chart0.plotBorderColor) ?? DEFAULT_GRID_COLOR,
+          stroke: options.chart?.plotBorderColor ?? DEFAULT_GRID_COLOR,
           strokeWidth: plotBorderWidth
         }) : null, model.series.map(series => {
           const ctx = contextFor(series);
@@ -563,8 +556,7 @@ function ChartBody({
           spacing: model.spacing,
           onToggle: toggleSeries ? toggle : undefined,
           renderLabel: item => {
-            var _options$legend, _model$series$find;
-            const formatter = (_options$legend = options.legend) === null || _options$legend === void 0 ? void 0 : _options$legend.labelFormatter;
+            const formatter = options.legend?.labelFormatter;
             if (!formatter) {
               return item.label;
             }
@@ -573,7 +565,7 @@ function ChartBody({
               name: item.label,
               color: item.color,
               visible: item.visible,
-              meta: (_model$series$find = model.series.find(s => s.index === item.seriesIndex)) === null || _model$series$find === void 0 ? void 0 : _model$series$find.options.meta
+              meta: model.series.find(s => s.index === item.seriesIndex)?.options.meta
             });
           }
         })]
@@ -587,7 +579,7 @@ function ChartBody({
         y: 0,
         width: model.plot.x,
         height: canvas.height,
-        fill: ((_options$chart1 = options.chart) === null || _options$chart1 === void 0 ? void 0 : _options$chart1.backgroundColor) ?? DEFAULT_SURFACE_COLOR
+        fill: options.chart?.backgroundColor ?? DEFAULT_SURFACE_COLOR
       }), model.yAxes.filter(isPinned).map(axis => _jsx(YAxis, {
         plot: model.plot,
         axis: axis
@@ -595,7 +587,7 @@ function ChartBody({
     }) : null, zoom ? _jsx(ResetZoom, {
       type: "button",
       onClick: resetZoom,
-      children: ((_options$chart10 = options.chart) === null || _options$chart10 === void 0 ? void 0 : _options$chart10.resetZoomText) ?? 'Reset zoom'
+      children: options.chart?.resetZoomText ?? 'Reset zoom'
     }) : null, hover && tooltipContent ? _jsx(Tooltip, {
       at: hover.anchor,
       pointer: hover.pointer,

package/core/Chart/Hinted.js

@@ -15,8 +15,7 @@ export function Hinted({
   const ref = useRef(null);
   const [at, setAt] = useState(null);
   const open = useCallback(() => {
-    var _ref$current;
-    const box = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect();
+    const box = ref.current?.getBoundingClientRect();
     if (box) {
       setAt({
         x: box.left + box.width / 2,

package/core/Chart/Legend.js

@@ -15,29 +15,28 @@ export function Legend({
   renderLabel,
   onToggle
 }) {
-  if (!items.length || (options === null || options === void 0 ? void 0 : options.enabled) === false) {
+  if (!items.length || options?.enabled === false) {
     return null;
   }
-  const style = options === null || options === void 0 ? void 0 : options.itemStyle;
-  const symbolSize = (options === null || options === void 0 ? void 0 : options.symbolHeight) ?? 8;
-  const symbolRadius = (options === null || options === void 0 ? void 0 : options.symbolRadius) ?? 2;
-  const symbolPadding = (options === null || options === void 0 ? void 0 : options.symbolPadding) ?? 6;
+  const style = options?.itemStyle;
+  const symbolSize = options?.symbolHeight ?? 8;
+  const symbolRadius = options?.symbolRadius ?? 2;
+  const symbolPadding = options?.symbolPadding ?? 6;
   const {
     positions,
     metrics
   } = layoutLegend(items, options, plot, size, spacing);
   const interactive = Boolean(onToggle);
-  const activate = item => () => onToggle === null || onToggle === void 0 ? void 0 : onToggle(item);
+  const activate = item => () => onToggle?.(item);
   const onKeyDown = item => event => {
     if (event.key !== 'Enter' && event.key !== ' ') {
       return;
     }
     event.preventDefault();
-    onToggle === null || onToggle === void 0 || onToggle(item);
+    onToggle?.(item);
   };
   return _jsx("g", {
     children: items.map((item, index) => {
-      var _options$itemHoverSty, _options$itemHoverSty2;
       const {
         x,
         y
@@ -47,8 +46,8 @@ export function Legend({
       return _jsxs(LegendItemBox, {
         "$off": !item.visible,
         "$interactive": interactive,
-        "$hoverColor": options === null || options === void 0 || (_options$itemHoverSty = options.itemHoverStyle) === null || _options$itemHoverSty === void 0 ? void 0 : _options$itemHoverSty.color,
-        "$hoverWeight": options === null || options === void 0 || (_options$itemHoverSty2 = options.itemHoverStyle) === null || _options$itemHoverSty2 === void 0 ? void 0 : _options$itemHoverSty2.fontWeight,
+        "$hoverColor": options?.itemHoverStyle?.color,
+        "$hoverWeight": options?.itemHoverStyle?.fontWeight,
         role: interactive ? 'button' : undefined,
         tabIndex: interactive ? 0 : undefined,
         "aria-pressed": interactive ? item.visible : undefined,
@@ -72,17 +71,17 @@ export function Legend({
         }) : _jsx("rect", {
           x: x,
           y: y - symbolSize / 2,
-          width: (options === null || options === void 0 ? void 0 : options.symbolWidth) ?? symbolSize,
+          width: options?.symbolWidth ?? symbolSize,
           height: symbolSize,
           rx: item.symbol === 'circle' ? symbolSize / 2 : symbolRadius,
           fill: item.color
         }), _jsx("text", {
           x: labelX,
           y: y + TEXT_BASELINE_SHIFT,
-          fill: (style === null || style === void 0 ? void 0 : style.color) ?? DEFAULT_TEXT_COLOR,
-          fontFamily: style === null || style === void 0 ? void 0 : style.fontFamily,
-          fontSize: (style === null || style === void 0 ? void 0 : style.fontSize) ?? DEFAULT_FONT_SIZE,
-          fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
+          fill: style?.color ?? DEFAULT_TEXT_COLOR,
+          fontFamily: style?.fontFamily,
+          fontSize: style?.fontSize ?? DEFAULT_FONT_SIZE,
+          fontWeight: style?.fontWeight,
           textDecoration: item.visible ? undefined : 'line-through',
           children: renderLabel(item)
         })]