@k2b/ui 0.49.0 → 0.51.0

package/dist/browser/content/ChartExplorer.js

@@ -1,24 +1,36 @@
 import { template as _$template } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
 import { getNextMarker as _$getNextMarker } from "solid-js/web";
-import { getNextElement as _$getNextElement } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
-var _tmpl$ = /*#__PURE__*/_$template(`<div>`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<span role=alert>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<ul class=k2b-chart-legend>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__details aria-live=polite>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<section><header class=k2b-chart-explorer__header><div><!$><!/><!$><!/></div><div class=k2b-chart-explorer__actions><!$><!/><!$><!/></div></header><!$><!/><!$><!/><div class=k2b-chart-explorer__viewport></div><!$><!/>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-chart__empty>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<p class=k2b-chart-explorer__note>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<li><span class=k2b-chart-legend__swatch aria-hidden=true></span><!$><!/>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<i class="ti ti-x"aria-hidden=true>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__detail-header><span></span><!$><!/>`);
+import { memo as _$memo } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<i class="ti ti-refresh"aria-hidden=true>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<i class="ti ti-clock-exclamation"aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span><!$><!/><!$><!/>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__description>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<span role=alert>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<ul class=k2b-chart-legend>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__details aria-live=polite>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<section><header class=k2b-chart-explorer__header><div><!$><!/><!$><!/></div><div class=k2b-chart-explorer__actions><!$><!/><span class=k2b-chart-explorer__views><!$><!/><!$><!/></span></div></header><!$><!/><!$><!/><div class=k2b-chart-explorer__viewport></div><!$><!/>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__skeleton role=status>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__state data-state=error role=alert><span class=k2b-chart-explorer__state-icon aria-hidden=true><i class="ti ti-alert-circle"></i></span><p><!$><!/><br><!$><!/></p><!$><!/>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__state data-state=empty><span class=k2b-chart-explorer__state-icon aria-hidden=true><i class="ti ti-chart-bar-off"></i></span><p>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<div class=k2b-chart__empty>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<p class=k2b-chart-explorer__note>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__chart>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<b data-chart-legend-value>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<li><span class=k2b-chart-legend__swatch aria-hidden=true></span><!$><!/><!$><!/>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__detail-header><span></span><!$><!/>`);
 import { createEffect, createMemo, createSignal, createUniqueId, For, Show } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { Button, IconButton } from "../actions/Button";
@@ -35,6 +47,11 @@ import DataTable from "./DataTable";
 
 /** One legend entry; `color` is the palette index the renderer gave the series (0 is `--stdlib-chart-c1`). */
 
+/**
+ * The latest read of an explorer's rows, kept apart from the rows on screen. Loading and a failure keep shown rows;
+ * without rows they take the viewport's place at its height.
+ */
+
 // Only the copied text can prove that a cell is a number; a numeric sort key cannot.
 const plainNumber = /^[-+]?\p{Sc}?\s?\d[\d.,\s]*(?:\s?(?:%|\p{Sc}))?$/u;
 const tsvCell = value => {
@@ -45,8 +62,28 @@ export function ChartExplorer(props) {
   const messages = useUiMessages();
   const chartMessages = useChartMessages();
   const locale = useLocale();
+  let legendHost;
   const id = `k2b-chart-explorer-${createUniqueId()}`;
   const data = () => props.data;
+  const snapshot = () => "chart" in props.data ? props.data.chart : undefined;
+  /** Without `request` the explorer behaves as before: rows or the empty slot. */
+  const state = () => {
+    if (!props.request) return undefined;
+    const status = props.request.status;
+    if (data().rows.length) return status === "error" ? "stale" : status === "loading" ? "refreshing" : "data";
+    return status === "idle" ? "empty" : status;
+  };
+  const switching = () => state() === "refreshing" && props.request?.requestedRange !== undefined && props.request.requestedRange !== props.range;
+  const legendValue = index => {
+    const marks = snapshot()?.marks ?? [];
+    let latest = -Infinity;
+    for (const mark of marks) latest = Math.max(latest, mark.datum.anchor[0]);
+    const valueField = snapshot()?.kind === "area" ? marks.some(mark => mark.datum.values.some(field => field.key === "percent")) ? "percent" : "value" : "y";
+    const field = marks.find(mark => mark.datum.seriesIndex === index && mark.datum.anchor[0] === latest)?.datum.values.find(field => field.key === valueField);
+    return field ? field.formatted ?? (typeof field.value === "number" ? new Intl.NumberFormat(locale(), {
+      maximumFractionDigits: 6
+    }).format(field.value) : field.value) : "—";
+  };
   const [copyFailed, setCopyFailed] = createSignal(false);
   const [localSelection, setLocalSelection] = createSignal(null);
   const [localView, setLocalView] = createSignal(props.defaultView ?? "chart");
@@ -73,8 +110,15 @@ export function ChartExplorer(props) {
   if (!props.columns.length || props.columns.some(column => !column.id) || new Set(props.columns.map(column => column.id)).size !== props.columns.length) {
     throw new Error("Chart columns require unique nonempty IDs and at least one column");
   }
-  validateChartExplorerData(data());
-  createEffect(() => validateChartExplorerData(data()));
+  const validate = () => {
+    const chart = snapshot();
+    if (chart) validateChartExplorerData({
+      chart,
+      rows: data().rows
+    });else if (new Set(data().rows.map(row => row.key)).size !== data().rows.length || data().rows.some(row => !row.key)) throw new Error("Chart data requires unique row/mark keys and a row for every mark.rowKey");
+  };
+  validate();
+  createEffect(validate);
   createEffect(() => {
     if (props.selectedKey === undefined && rawSelected() !== null && selected() === null) select(null);
   });
@@ -118,28 +162,53 @@ export function ChartExplorer(props) {
     props.onChartChange?.(value.slice("chart:".length));
   };
   const copyText = () => [props.columns.map(c => tsvCell(c.label)).join("\t"), ...rows().map(row => props.columns.map(c => tsvCell(c.value(row))).join("\t"))].join("\n");
+  const tableView = () => view() === "table" && data().rows.length > 0 && state() !== "loading" && state() !== "error";
+  const retryButton = variant => _$createComponent(Show, {
+    get when() {
+      return props.onRetry;
+    },
+    children: retry => _$createComponent(Button, {
+      variant: variant,
+      size: "sm",
+      onClick: () => retry()(),
+      get children() {
+        return [_$createComponent(Show, {
+          when: variant === "secondary",
+          get children() {
+            return _$getNextElement(_tmpl$);
+          }
+        }), _$memo(() => messages().tryAgain)];
+      }
+    })
+  });
+  // "14px 16px" reads like CSS padding: block first, then inline; one value is both.
+  const insetBlock = () => props.inset?.trim().split(/\s+/)[0] ?? "";
+  const insetInline = () => props.inset?.trim().split(/\s+/)[1] ?? insetBlock();
   return (() => {
-    var _el$ = _$getNextElement(_tmpl$5),
-      _el$2 = _el$.firstChild,
+    var _el$2 = _$getNextElement(_tmpl$8),
       _el$3 = _el$2.firstChild,
-      _el$5 = _el$3.firstChild,
-      [_el$6, _co$] = _$getNextMarker(_el$5.nextSibling),
-      _el$7 = _el$6.nextSibling,
-      [_el$8, _co$2] = _$getNextMarker(_el$7.nextSibling),
-      _el$9 = _el$3.nextSibling,
-      _el$0 = _el$9.firstChild,
-      [_el$1, _co$3] = _$getNextMarker(_el$0.nextSibling),
-      _el$10 = _el$1.nextSibling,
-      [_el$11, _co$4] = _$getNextMarker(_el$10.nextSibling),
-      _el$16 = _el$2.nextSibling,
+      _el$4 = _el$3.firstChild,
+      _el$10 = _el$4.firstChild,
+      [_el$11, _co$3] = _$getNextMarker(_el$10.nextSibling),
+      _el$12 = _el$11.nextSibling,
+      [_el$13, _co$4] = _$getNextMarker(_el$12.nextSibling),
+      _el$14 = _el$4.nextSibling,
+      _el$20 = _el$14.firstChild,
+      [_el$21, _co$7] = _$getNextMarker(_el$20.nextSibling),
+      _el$15 = _el$21.nextSibling,
+      _el$16 = _el$15.firstChild,
       [_el$17, _co$5] = _$getNextMarker(_el$16.nextSibling),
       _el$18 = _el$17.nextSibling,
       [_el$19, _co$6] = _$getNextMarker(_el$18.nextSibling),
-      _el$13 = _el$19.nextSibling,
-      _el$20 = _el$13.nextSibling,
-      [_el$21, _co$7] = _$getNextMarker(_el$20.nextSibling);
-    _$setAttribute(_el$, "aria-labelledby", id);
-    _$insert(_el$3, _$createComponent(Dynamic, {
+      _el$26 = _el$3.nextSibling,
+      [_el$27, _co$8] = _$getNextMarker(_el$26.nextSibling),
+      _el$28 = _el$27.nextSibling,
+      [_el$29, _co$9] = _$getNextMarker(_el$28.nextSibling),
+      _el$23 = _el$29.nextSibling,
+      _el$30 = _el$23.nextSibling,
+      [_el$31, _co$0] = _$getNextMarker(_el$30.nextSibling);
+    _$setAttribute(_el$2, "aria-labelledby", id);
+    _$insert(_el$4, _$createComponent(Dynamic, {
       get component() {
         return `h${props.headingLevel ?? 3}`;
       },
@@ -148,18 +217,72 @@ export function ChartExplorer(props) {
       get children() {
         return props.title;
       }
-    }), _el$6, _co$);
-    _$insert(_el$3, _$createComponent(Show, {
+    }), _el$11, _co$3);
+    _$insert(_el$4, _$createComponent(Show, {
       get when() {
-        return props.description;
+        return props.description || state();
       },
       get children() {
-        var _el$4 = _$getNextElement(_tmpl$);
-        _$insert(_el$4, () => props.description);
-        return _el$4;
+        var _el$5 = _$getNextElement(_tmpl$4);
+        _$insert(_el$5, _$createComponent(Show, {
+          get when() {
+            return state() === "stale" || state() === "loading" || switching();
+          },
+          get fallback() {
+            return props.description;
+          },
+          get children() {
+            return _$createComponent(Show, {
+              get when() {
+                return state() === "stale";
+              },
+              get fallback() {
+                return (() => {
+                  var _el$32 = _$getNextElement(_tmpl$9);
+                  _$insert(_el$32, (() => {
+                    var _c$ = _$memo(() => !!switching());
+                    return () => _c$() ? chartMessages().chartLoadingRange({
+                      range: props.request.requestedRange
+                    }) : chartMessages().chartLoading;
+                  })());
+                  return _el$32;
+                })();
+              },
+              get children() {
+                return [_$getNextElement(_tmpl$2), (() => {
+                  var _el$7 = _$getNextElement(_tmpl$3),
+                    _el$8 = _el$7.firstChild,
+                    [_el$9, _co$] = _$getNextMarker(_el$8.nextSibling),
+                    _el$0 = _el$9.nextSibling,
+                    [_el$1, _co$2] = _$getNextMarker(_el$0.nextSibling);
+                  _$insert(_el$7, () => [props.asOf ? chartMessages().chartAsOf({
+                    time: props.asOf
+                  }) : undefined, chartMessages().chartRefreshFailed].filter(Boolean).join(" · "), _el$9, _co$);
+                  _$insert(_el$7, () => props.onRetry ? " · " : "", _el$1, _co$2);
+                  return _el$7;
+                })(), _$memo(() => retryButton("text"))];
+              }
+            });
+          }
+        }));
+        _$effect(_p$ => {
+          var _v$ = !!(state() === "stale" || state() === "loading" || switching()),
+            _v$2 = state() === "stale" ? "warning" : undefined,
+            _v$3 = state() ? "status" : undefined;
+          _v$ !== _p$.e && _el$5.classList.toggle("k2b-chart-explorer__status-line", _p$.e = _v$);
+          _v$2 !== _p$.t && _$setAttribute(_el$5, "data-tone", _p$.t = _v$2);
+          _v$3 !== _p$.a && _$setAttribute(_el$5, "role", _p$.a = _v$3);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined
+        });
+        return _el$5;
       }
-    }), _el$8, _co$2);
-    _$insert(_el$9, _$createComponent(CopyButton, {
+    }), _el$13, _co$4);
+    _$insert(_el$14, () => props.actions, _el$21, _co$7);
+    _$insert(_el$15, _$createComponent(CopyButton, {
       get text() {
         return copyText();
       },
@@ -174,8 +297,9 @@ export function ChartExplorer(props) {
       },
       onCopyError: () => setCopyFailed(true),
       onCopied: () => setCopyFailed(false)
-    }), _el$1, _co$3);
-    _$insert(_el$9, _$createComponent(SelectChip, {
+    }), _el$17, _co$5);
+    _$insert(_el$15, _$createComponent(SelectChip, {
+      stableWidth: true,
       get value() {
         return switcherValue();
       },
@@ -186,28 +310,87 @@ export function ChartExplorer(props) {
       get options() {
         return switcherOptions();
       }
-    }), _el$11, _co$4);
-    _$insert(_el$, _$createComponent(Show, {
+    }), _el$19, _co$6);
+    _$insert(_el$2, _$createComponent(Show, {
       get when() {
         return copyFailed();
       },
       get children() {
-        var _el$12 = _$getNextElement(_tmpl$2);
-        _$insert(_el$12, () => chartMessages().chartCopyFailed);
-        return _el$12;
+        var _el$22 = _$getNextElement(_tmpl$5);
+        _$insert(_el$22, () => chartMessages().chartCopyFailed);
+        return _el$22;
       }
-    }), _el$17, _co$5);
-    _$insert(_el$, () => props.controls, _el$19, _co$6);
-    _$insert(_el$13, _$createComponent(Show, {
+    }), _el$27, _co$8);
+    _$insert(_el$2, () => props.controls, _el$29, _co$9);
+    var _ref$ = legendHost;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$23) : legendHost = _el$23;
+    _$insert(_el$23, _$createComponent(Show, {
       get when() {
-        return data().rows.length > 0;
+        return _$memo(() => !!(state() !== "loading" && state() !== "error"))() && data().rows.length > 0;
       },
       get fallback() {
-        return (() => {
-          var _el$22 = _$getNextElement(_tmpl$6);
-          _$insert(_el$22, () => props.empty ?? messages().noData);
-          return _el$22;
-        })();
+        return _$createComponent(Show, {
+          get when() {
+            return state() === "loading";
+          },
+          get fallback() {
+            return _$createComponent(Show, {
+              get when() {
+                return state() === "error";
+              },
+              get fallback() {
+                return _$createComponent(Show, {
+                  get when() {
+                    return state() === "empty";
+                  },
+                  get fallback() {
+                    return (() => {
+                      var _el$47 = _$getNextElement(_tmpl$11);
+                      _$insert(_el$47, () => props.empty ?? messages().noData);
+                      return _el$47;
+                    })();
+                  },
+                  get children() {
+                    var _el$44 = _$getNextElement(_tmpl$10),
+                      _el$45 = _el$44.firstChild,
+                      _el$46 = _el$45.nextSibling;
+                    _$insert(_el$46, () => props.empty ?? messages().noData);
+                    return _el$44;
+                  }
+                });
+              },
+              get children() {
+                var _el$34 = _$getNextElement(_tmpl$1),
+                  _el$35 = _el$34.firstChild,
+                  _el$36 = _el$35.nextSibling,
+                  _el$38 = _el$36.firstChild,
+                  [_el$39, _co$1] = _$getNextMarker(_el$38.nextSibling),
+                  _el$37 = _el$39.nextSibling,
+                  _el$40 = _el$37.nextSibling,
+                  [_el$41, _co$10] = _$getNextMarker(_el$40.nextSibling),
+                  _el$42 = _el$36.nextSibling,
+                  [_el$43, _co$11] = _$getNextMarker(_el$42.nextSibling);
+                _$insert(_el$36, () => chartMessages().chartLoadFailed, _el$39, _co$1);
+                _$insert(_el$36, () => props.request?.reason ?? chartMessages().chartLoadFailedKept, _el$41, _co$10);
+                _$insert(_el$34, () => retryButton("secondary"), _el$43, _co$11);
+                return _el$34;
+              }
+            });
+          },
+          get children() {
+            var _el$33 = _$getNextElement(_tmpl$0);
+            _$insert(_el$33, _$createComponent(For, {
+              each: [0.45, 0.62, 0.55, 0.72, 0.6, 0.8, 0.66, 0.88, 0.63, 0.78, 0.7, 0.95],
+              children: height => (() => {
+                var _el$48 = _$getNextElement(_tmpl$9);
+                _$setStyleProperty(_el$48, "height", `${height * 100}%`);
+                return _el$48;
+              })()
+            }));
+            _$effect(() => _$setAttribute(_el$33, "aria-label", chartMessages().chartLoading));
+            return _el$33;
+          }
+        });
       },
       get children() {
         return _$createComponent(Show, {
@@ -237,7 +420,9 @@ export function ChartExplorer(props) {
                 return sort();
               },
               fillHeight: true,
-              surface: "paper",
+              get surface() {
+                return props.inset ? "plain" : "paper";
+              },
               onRowClick: row => select(row.key),
               renderCell: ({
                 row,
@@ -268,18 +453,18 @@ export function ChartExplorer(props) {
                 }),
                 get children() {
                   return [_$memo(() => props.columns.find(column => column.id === col.id)?.label), (() => {
-                    var _el$24 = _$getNextElement(_tmpl$8);
+                    var _el$50 = _$getNextElement(_tmpl$13);
                     _$effect(_p$ => {
-                      var _v$5 = `k2b-data-table__sort-icon ti ${sort()?.key === col.id && sort()?.direction === "asc" ? "ti-arrow-up" : "ti-arrow-down"}`,
-                        _v$6 = sort()?.key === col.id ? "true" : undefined;
-                      _v$5 !== _p$.e && _$className(_el$24, _p$.e = _v$5);
-                      _v$6 !== _p$.t && _$setAttribute(_el$24, "data-active", _p$.t = _v$6);
+                      var _v$12 = `k2b-data-table__sort-icon ti ${sort()?.key === col.id && sort()?.direction === "asc" ? "ti-arrow-up" : "ti-arrow-down"}`,
+                        _v$13 = sort()?.key === col.id ? "true" : undefined;
+                      _v$12 !== _p$.e && _$className(_el$50, _p$.e = _v$12);
+                      _v$13 !== _p$.t && _$setAttribute(_el$50, "data-active", _p$.t = _v$13);
                       return _p$;
                     }, {
                       e: undefined,
                       t: undefined
                     });
-                    return _el$24;
+                    return _el$50;
                   })()];
                 }
               }) : render()
@@ -288,79 +473,117 @@ export function ChartExplorer(props) {
                 return shownRows().length < rows().length;
               },
               get children() {
-                var _el$23 = _$getNextElement(_tmpl$7);
-                _$insert(_el$23, () => chartMessages().chartRowsShown({
+                var _el$49 = _$getNextElement(_tmpl$12);
+                _$insert(_el$49, () => chartMessages().chartRowsShown({
                   shown: new Intl.NumberFormat(locale()).format(shownRows().length),
                   total: new Intl.NumberFormat(locale()).format(rows().length)
                 }));
-                return _el$23;
+                return _el$49;
               }
             })];
           },
           get children() {
-            return [_$createComponent(ChartSnapshotView, {
-              get cursor() {
-                return props.cursor;
-              },
-              get snapshot() {
-                return data().chart;
+            return [_$createComponent(Show, {
+              get when() {
+                return snapshot();
               },
-              get selectedKey() {
-                return selected();
+              get fallback() {
+                return (() => {
+                  var _el$51 = _$getNextElement(_tmpl$14);
+                  _$insert(_el$51, () => props.children);
+                  return _el$51;
+                })();
               },
-              onSelect: select,
-              get style() {
-                return props.legend?.length ? undefined : {
-                  height: "100%"
-                };
-              }
+              children: chart => _$createComponent(ChartSnapshotView, {
+                get cursor() {
+                  return props.cursor;
+                },
+                legend: () => legendHost,
+                get snapshot() {
+                  return chart();
+                },
+                get selectedKey() {
+                  return selected();
+                },
+                onSelect: select,
+                get style() {
+                  return props.legend?.length ? undefined : {
+                    height: "100%"
+                  };
+                }
+              })
             }), _$createComponent(Show, {
               get when() {
                 return props.legend?.length;
               },
               get children() {
-                var _el$14 = _$getNextElement(_tmpl$3);
-                _$insert(_el$14, _$createComponent(For, {
+                var _el$24 = _$getNextElement(_tmpl$6);
+                _$insert(_el$24, _$createComponent(For, {
                   get each() {
                     return props.legend;
                   },
-                  children: entry => (() => {
-                    var _el$25 = _$getNextElement(_tmpl$9),
-                      _el$26 = _el$25.firstChild,
-                      _el$27 = _el$26.nextSibling,
-                      [_el$28, _co$8] = _$getNextMarker(_el$27.nextSibling);
-                    _$insert(_el$25, () => entry.label, _el$28, _co$8);
+                  children: (entry, index) => (() => {
+                    var _el$52 = _$getNextElement(_tmpl$16),
+                      _el$53 = _el$52.firstChild,
+                      _el$55 = _el$53.nextSibling,
+                      [_el$56, _co$12] = _$getNextMarker(_el$55.nextSibling),
+                      _el$57 = _el$56.nextSibling,
+                      [_el$58, _co$13] = _$getNextMarker(_el$57.nextSibling);
+                    _$insert(_el$52, () => entry.label, _el$56, _co$12);
+                    _$insert(_el$52, _$createComponent(Show, {
+                      get when() {
+                        return snapshot()?.kind === "area";
+                      },
+                      get children() {
+                        var _el$54 = _$getNextElement(_tmpl$15);
+                        _$insert(_el$54, () => legendValue(index()));
+                        _$effect(_p$ => {
+                          var _v$14 = index(),
+                            _v$15 = snapshot()?.kind === "area" ? snapshot()?.marks.some(mark => mark.datum.values.some(field => field.key === "percent")) ? "percent" : "value" : "y",
+                            _v$16 = legendValue(index());
+                          _v$14 !== _p$.e && _$setAttribute(_el$54, "data-series-index", _p$.e = _v$14);
+                          _v$15 !== _p$.t && _$setAttribute(_el$54, "data-field", _p$.t = _v$15);
+                          _v$16 !== _p$.a && _$setAttribute(_el$54, "data-default", _p$.a = _v$16);
+                          return _p$;
+                        }, {
+                          e: undefined,
+                          t: undefined,
+                          a: undefined
+                        });
+                        return _el$54;
+                      }
+                    }), _el$58, _co$13);
                     _$effect(_p$ => {
-                      var _v$7 = entry.style && entry.style !== "solid" ? entry.style : undefined,
-                        _v$8 = entry.reference ? "true" : undefined,
-                        _v$9 = `var(--stdlib-chart-c${Math.abs(Math.trunc(entry.color)) % 8 + 1})`;
-                      _v$7 !== _p$.e && _$setAttribute(_el$26, "data-style", _p$.e = _v$7);
-                      _v$8 !== _p$.t && _$setAttribute(_el$26, "data-reference", _p$.t = _v$8);
-                      _v$9 !== _p$.a && _$setStyleProperty(_el$26, "--k2b-chart-legend-color", _p$.a = _v$9);
+                      var _v$17 = entry.style && entry.style !== "solid" ? entry.style : undefined,
+                        _v$18 = entry.reference ? "true" : undefined,
+                        _v$19 = `var(--stdlib-chart-c${Math.abs(Math.trunc(entry.color)) % 8 + 1})`;
+                      _v$17 !== _p$.e && _$setAttribute(_el$53, "data-style", _p$.e = _v$17);
+                      _v$18 !== _p$.t && _$setAttribute(_el$53, "data-reference", _p$.t = _v$18);
+                      _v$19 !== _p$.a && _$setStyleProperty(_el$53, "--k2b-chart-legend-color", _p$.a = _v$19);
                       return _p$;
                     }, {
                       e: undefined,
                       t: undefined,
                       a: undefined
                     });
-                    return _el$25;
+                    return _el$52;
                   })()
                 }));
-                _$effect(() => _$setAttribute(_el$14, "aria-label", chartMessages().chartLegend));
-                return _el$14;
+                _$effect(() => _$setAttribute(_el$24, "aria-label", chartMessages().chartLegend));
+                return _el$24;
               }
             })];
           }
         });
       }
     }));
-    _$insert(_el$, _$createComponent(Show, {
+    _$insert(_el$2, _$createComponent(Show, {
       get when() {
         return props.renderDetails !== false;
       },
       get children() {
-        var _el$15 = _$getNextElement(_tmpl$4);
-        _$insert(_el$15, _$createComponent(Show, {
+        var _el$25 = _$getNextElement(_tmpl$7);
+        _$insert(_el$25, _$createComponent(Show, {
           get when() {
             return selectedRow();
           },
@@ -368,12 +591,12 @@ export function ChartExplorer(props) {
             "class": "k2b-chart-explorer__detail-paper",
             get children() {
               return [(() => {
-                var _el$29 = _$getNextElement(_tmpl$1),
-                  _el$30 = _el$29.firstChild,
-                  _el$32 = _el$30.nextSibling,
-                  [_el$33, _co$9] = _$getNextMarker(_el$32.nextSibling);
-                _$insert(_el$30, () => chartMessages().chartSelectedDatum);
-                _$insert(_el$29, _$createComponent(IconButton, {
+                var _el$59 = _$getNextElement(_tmpl$18),
+                  _el$60 = _el$59.firstChild,
+                  _el$62 = _el$60.nextSibling,
+                  [_el$63, _co$14] = _$getNextMarker(_el$62.nextSibling);
+                _$insert(_el$60, () => chartMessages().chartSelectedDatum);
+                _$insert(_el$59, _$createComponent(IconButton, {
                   variant: "text",
                   size: "sm",
                   get label() {
@@ -381,10 +604,10 @@ export function ChartExplorer(props) {
                   },
                   onClick: () => select(null),
                   get children() {
-                    return _$getNextElement(_tmpl$0);
+                    return _$getNextElement(_tmpl$17);
                   }
-                }), _el$33, _co$9);
-                return _el$29;
+                }), _el$63, _co$14);
+                return _el$59;
               })(), _$memo(() => _$memo(() => !!props.renderDetails)() ? props.renderDetails(row()) : _$createComponent(DescriptionList, {
                 columns: 3,
                 size: "sm",
@@ -398,26 +621,47 @@ export function ChartExplorer(props) {
             }
           })
         }));
-        return _el$15;
+        return _el$25;
       }
-    }), _el$21, _co$7);
+    }), _el$31, _co$0);
     _$effect(_p$ => {
-      var _v$ = `k2b-chart-explorer ${props.class ?? ""}`,
-        _v$2 = view() === "chart" && props.legend?.length && data().rows.length > 0 ? "true" : undefined,
-        _v$3 = view() === "table" && shownRows().length < rows().length ? "true" : undefined,
-        _v$4 = props.height ?? "18rem";
-      _v$ !== _p$.e && _$className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && _$setAttribute(_el$13, "data-legend", _p$.t = _v$2);
-      _v$3 !== _p$.a && _$setAttribute(_el$13, "data-capped", _p$.a = _v$3);
-      _v$4 !== _p$.o && _$setStyleProperty(_el$13, "height", _p$.o = _v$4);
+      var _v$4 = `k2b-chart-explorer ${props.class ?? ""}`,
+        _v$5 = state() === "loading" || state() === "refreshing" ? "true" : undefined,
+        _v$6 = state(),
+        _v$7 = props.inset ? "true" : undefined,
+        _v$8 = props.inset ? {
+          "--k2b-chart-explorer-inset": insetInline(),
+          "--k2b-chart-explorer-inset-block": insetBlock()
+        } : undefined,
+        _v$9 = state() && !data().rows.length ? true : undefined,
+        _v$0 = tableView() ? "table" : undefined,
+        _v$1 = view() === "chart" && props.legend?.length && data().rows.length > 0 ? "true" : undefined,
+        _v$10 = tableView() && shownRows().length < rows().length ? "true" : undefined,
+        _v$11 = tableView() && props.inset ? `calc(${props.height ?? "18rem"} + ${insetBlock()})` : props.height ?? "18rem";
+      _v$4 !== _p$.e && _$className(_el$2, _p$.e = _v$4);
+      _v$5 !== _p$.t && _$setAttribute(_el$2, "aria-busy", _p$.t = _v$5);
+      _v$6 !== _p$.a && _$setAttribute(_el$2, "data-state", _p$.a = _v$6);
+      _v$7 !== _p$.o && _$setAttribute(_el$2, "data-inset", _p$.o = _v$7);
+      _p$.i = _$style(_el$2, _v$8, _p$.i);
+      _v$9 !== _p$.n && _$setProperty(_el$15, "inert", _p$.n = _v$9);
+      _v$0 !== _p$.s && _$setAttribute(_el$23, "data-view", _p$.s = _v$0);
+      _v$1 !== _p$.h && _$setAttribute(_el$23, "data-legend", _p$.h = _v$1);
+      _v$10 !== _p$.r && _$setAttribute(_el$23, "data-capped", _p$.r = _v$10);
+      _v$11 !== _p$.d && _$setStyleProperty(_el$23, "height", _p$.d = _v$11);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
-      o: undefined
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined,
+      r: undefined,
+      d: undefined
     });
-    return _el$;
+    return _el$2;
   })();
 }
 //# sourceMappingURL=ChartExplorer.js.map