@k2b/ui 0.2.0 → 0.4.0

package/dist/browser/content/ChartExplorer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createEffect","createMemo","createSignal","createUniqueId","Show","Button","CopyButton","SelectChip","useLocale","useUiMessages","DescriptionList","Paper","ChartSnapshotView","validateChartExplorerData","DataTable","tsvCell","value","test","replaceAll","ChartExplorer","props","messages","locale","id","data","copyFailed","setCopyFailed","localSelection","setLocalSelection","localView","setLocalView","defaultView","localSort","setLocalSort","defaultSort","view","sort","undefined","setView","onViewChange","setSort","onSortChange","rowsByKey","Map","rows","map","row","key","rawSelected","selectedKey","selected","has","selectedRow","get","select","onSelectedKeyChange","columns","length","some","column","Set","size","Error","result","order","find","c","sortValue","collator","Intl","Collator","numeric","a","b","av","bv","comparison","compare","String","direction","copyText","label","join","_el$","_$getNextElement","_tmpl$4","_el$2","firstChild","_el$3","_el$4","_el$6","nextSibling","_el$7","_co$","_$getNextMarker","_el$8","_el$9","_el$0","_co$2","_el$1","_el$10","_co$3","_el$14","_el$15","_co$4","_el$12","_el$16","_el$17","_co$5","_$setAttribute","_$insert","title","_$createComponent","when","description","children","_el$5","_tmpl$","text","chartCopyData","iconOnly","variant","disabled","onCopyError","onCopied","onValueChange","aria-label","chartView","options","chartDiagram","chartData","_el$11","_tmpl$2","chartCopyFailed","fallback","_el$18","_tmpl$5","noData","header","align","sortable","Boolean","ariaLabelledBy","getRowId","selectedRowId","fillHeight","surface","onRowClick","renderCell","col","render","custom","cell","onClick","renderHeader","_$memo","_el$19","_tmpl$6","_c$","cursor","snapshot","chart","onSelect","style","height","renderDetails","_el$13","_tmpl$3","_el$20","_tmpl$8","_el$21","_el$23","_el$24","_co$6","chartSelectedDatum","clearSelection","_tmpl$7","items","term","_$effect","_p$","_v$","class","_v$2","e","_$className","t","_$setStyleProperty"],"sources":["content/ChartExplorer.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, createUniqueId, type JSX, Show } from \"solid-js\";\nimport { Button } from \"../actions/Button\";\nimport { CopyButton } from \"../actions/CopyButton\";\nimport { SelectChip } from \"../inputs/SelectChip\";\nimport { useLocale } from \"../intl/locale\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { DescriptionList } from \"../surfaces/DescriptionList\";\nimport { Paper } from \"../surfaces/Paper\";\nimport { ChartSnapshotView } from \"./ChartSnapshotView\";\nimport type { ChartCursor } from \"./chart-cursor\";\nimport { type ChartExplorerData, type ChartExplorerRow, validateChartExplorerData } from \"./chart-explorer\";\nimport DataTable, { type DataTableSort } from \"./DataTable\";\n\nexport type ChartExplorerColumn<T> = {\n  id: string;\n  label: string;\n  value: (row: T) => string;\n  /** Optional table cell presentation; value remains the plain text used for copy/details. */\n  render?: (row: T) => JSX.Element;\n  /** Explicit comparable value. Omit to leave the column unsortable. */\n  sortValue?: (row: T) => string | number | null;\n  align?: \"left\" | \"center\" | \"right\";\n};\nexport type ChartExplorerProps<T extends ChartExplorerRow> = {\n  cursor?: ChartCursor;\n  title: string;\n  description?: JSX.Element;\n  data: ChartExplorerData<T>;\n  columns: readonly ChartExplorerColumn<T>[];\n  view?: \"chart\" | \"table\";\n  defaultView?: \"chart\" | \"table\";\n  onViewChange?: (view: \"chart\" | \"table\") => void;\n  sort?: DataTableSort | null;\n  defaultSort?: DataTableSort | null;\n  onSortChange?: (sort: DataTableSort | null) => void;\n  selectedKey?: string | null;\n  onSelectedKeyChange?: (key: string | null) => void;\n  /** false hides the complete local detail area for a shared selection panel. */\n  renderDetails?: false | ((row: T) => JSX.Element);\n  height?: string;\n  class?: string;\n};\n\nconst tsvCell = (value: string) => (/[\\t\\r\\n\"]/.test(value) ? `\"${value.replaceAll('\"', '\"\"')}\"` : value);\n\nexport function ChartExplorer<T extends ChartExplorerRow>(props: ChartExplorerProps<T>) {\n  const messages = useUiMessages();\n  const locale = useLocale();\n  const id = `k2b-chart-explorer-${createUniqueId()}`;\n  const data = () => props.data;\n  const [copyFailed, setCopyFailed] = createSignal(false);\n  const [localSelection, setLocalSelection] = createSignal<string | null>(null);\n  const [localView, setLocalView] = createSignal(props.defaultView ?? \"chart\");\n  const [localSort, setLocalSort] = createSignal<DataTableSort | null>(props.defaultSort ?? null);\n  const view = () => props.view ?? localView();\n  const sort = () => (props.sort === undefined ? localSort() : props.sort);\n  const setView = (value: \"chart\" | \"table\") => {\n    if (props.view === undefined) setLocalView(value);\n    props.onViewChange?.(value);\n  };\n  const setSort = (value: DataTableSort | null) => {\n    if (props.sort === undefined) setLocalSort(value);\n    props.onSortChange?.(value);\n  };\n  const rowsByKey = createMemo(() => new Map(data().rows.map((row) => [row.key, row])));\n  const rawSelected = () => (props.selectedKey !== undefined ? props.selectedKey : localSelection());\n  const selected = () => (rowsByKey().has(rawSelected() ?? \"\") ? rawSelected() : null);\n  const selectedRow = () => rowsByKey().get(selected() ?? \"\");\n  const select = (key: string | null) => {\n    if (key !== null && !rowsByKey().has(key)) return;\n    setLocalSelection(key);\n    props.onSelectedKeyChange?.(key);\n  };\n  if (\n    !props.columns.length ||\n    props.columns.some((column) => !column.id) ||\n    new Set(props.columns.map((column) => column.id)).size !== props.columns.length\n  ) {\n    throw new Error(\"Chart columns require unique nonempty IDs and at least one column\");\n  }\n  validateChartExplorerData(data());\n  createEffect(() => validateChartExplorerData(data()));\n  createEffect(() => {\n    if (props.selectedKey === undefined && rawSelected() !== null && selected() === null) select(null);\n  });\n  const rows = createMemo(() => {\n    const result = [...data().rows];\n    const order = sort();\n    const column = props.columns.find((c) => c.id === order?.key);\n    const value = column?.sortValue;\n    if (!order || !value) return result;\n    const collator = new Intl.Collator(locale(), { numeric: true });\n    return result.sort((a, b) => {\n      const av = value(a),\n        bv = value(b);\n      if (av === null) return bv === null ? 0 : 1;\n      if (bv === null) return -1;\n      const comparison = typeof av === \"number\" && typeof bv === \"number\" ? av - bv : collator.compare(String(av), String(bv));\n      return order.direction === \"asc\" ? comparison : -comparison;\n    });\n  });\n  const copyText = () =>\n    [\n      props.columns.map((c) => tsvCell(c.label)).join(\"\\t\"),\n      ...rows().map((row) => props.columns.map((c) => tsvCell(c.value(row))).join(\"\\t\")),\n    ].join(\"\\n\");\n  return (\n    <section class={`k2b-chart-explorer ${props.class ?? \"\"}`} aria-labelledby={id}>\n      <header class=\"k2b-chart-explorer__header\">\n        <div>\n          <h3 id={id}>{props.title}</h3>\n          <Show when={props.description}>\n            <div>{props.description}</div>\n          </Show>\n        </div>\n        <div class=\"k2b-chart-explorer__actions\">\n          <CopyButton\n            text={copyText()}\n            label={messages().chartCopyData}\n            iconOnly\n            size=\"sm\"\n            variant=\"ghost\"\n            disabled={!rows().length}\n            onCopyError={() => setCopyFailed(true)}\n            onCopied={() => setCopyFailed(false)}\n          />\n          <SelectChip<\"chart\" | \"table\">\n            value={view()}\n            onValueChange={setView}\n            aria-label={messages().chartView}\n            options={[\n              { value: \"chart\", label: messages().chartDiagram },\n              { value: \"table\", label: messages().chartData },\n            ]}\n          />\n        </div>\n      </header>\n      <Show when={copyFailed()}>\n        <span role=\"alert\">{messages().chartCopyFailed}</span>\n      </Show>\n      <div class=\"k2b-chart-explorer__viewport\" style={{ height: props.height ?? \"18rem\" }}>\n        <Show when={data().rows.length > 0} fallback={<div class=\"k2b-chart__empty\">{messages().noData}</div>}>\n          <Show\n            when={view() === \"chart\"}\n            fallback={\n              <DataTable\n                rows={rows()}\n                columns={props.columns.map((column) => ({\n                  id: column.id,\n                  header: column.label,\n                  value: column.value,\n                  align: column.align,\n                  sortable: Boolean(column.sortValue),\n                }))}\n                ariaLabelledBy={id}\n                getRowId={(row) => row.key}\n                selectedRowId={selected()}\n                sort={sort()}\n                fillHeight\n                surface=\"paper\"\n                onRowClick={(row) => select(row.key)}\n                renderCell={({ row, col, value, render }) => {\n                  const custom = props.columns.find((column) => column.id === col.id)?.render;\n                  const cell = () => (custom ? custom(row) : render(value));\n                  return col.id === props.columns[0]?.id ? (\n                    <Button variant=\"text\" size=\"sm\" onClick={() => select(row.key)}>\n                      {cell()}\n                    </Button>\n                  ) : (\n                    cell()\n                  );\n                }}\n                renderHeader={({ col, render }) =>\n                  col.sortable ? (\n                    <Button\n                      variant=\"text\"\n                      size=\"sm\"\n                      onClick={() =>\n                        setSort({\n                          key: col.id,\n                          direction: sort()?.key === col.id && sort()?.direction === \"asc\" ? \"desc\" : \"asc\",\n                        })\n                      }\n                    >\n                      {props.columns.find((column) => column.id === col.id)?.label}{\" \"}\n                      <span class=\"k2b-chart-explorer__sort-icon\" aria-hidden=\"true\">\n                        {sort()?.key === col.id ? (sort()?.direction === \"asc\" ? \"↑\" : \"↓\") : \"↕\"}\n                      </span>\n                    </Button>\n                  ) : (\n                    render()\n                  )\n                }\n              />\n            }\n          >\n            <ChartSnapshotView\n              cursor={props.cursor}\n              snapshot={data().chart}\n              selectedKey={selected()}\n              onSelect={select}\n              style={{ height: \"100%\" }}\n            />\n          </Show>\n        </Show>\n      </div>\n      <Show when={props.renderDetails !== false}>\n        <div class=\"k2b-chart-explorer__details\" aria-live=\"polite\">\n          <Show when={selectedRow()}>\n            {(row) => (\n              <Paper class=\"k2b-chart-explorer__detail-paper\">\n                <div class=\"k2b-chart-explorer__detail-header\">\n                  <span>{messages().chartSelectedDatum}</span>\n                  <Button\n                    variant=\"text\"\n                    size=\"sm\"\n                    aria-label={messages().clearSelection}\n                    title={messages().clearSelection}\n                    onClick={() => select(null)}\n                  >\n                    <i class=\"ti ti-x\" aria-hidden=\"true\" />\n                  </Button>\n                </div>\n                {props.renderDetails ? (\n                  props.renderDetails(row())\n                ) : (\n                  <DescriptionList\n                    columns={3}\n                    size=\"sm\"\n                    items={props.columns.map((column) => ({\n                      term: column.label,\n                      description: column.value(row()),\n                    }))}\n                  />\n                )}\n              </Paper>\n            )}\n          </Show>\n        </div>\n      </Show>\n    </section>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/content/ChartExplorerControls.js

@@ -0,0 +1,153 @@
+import { template as _$template } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { createComponent as _$createComponent } 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";
+var _tmpl$ = /*#__PURE__*/_$template(`<i class="ti ti-loader-2 k2b-spin"aria-hidden=true>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<span class=k2b-sr-only><!$><!/> · <!$><!/>: <!$><!/>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__header><strong></strong><div class=k2b-chart-explorer__actions><span class=k2b-chart-group-controls__loading role=status></span><!$><!/>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<i class="ti ti-x"aria-hidden=true>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__actions aria-live=polite><!$><!/><!$><!/>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<span aria-hidden=true>●`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<span aria-hidden=true>○`);
+import { Show } from "solid-js";
+import { Button } from "../actions/Button";
+import { useUiMessages } from "../intl/messages";
+import { Paper } from "../surfaces/Paper";
+import { StatusBadge } from "../surfaces/StatusBadge";
+import { ChartFilterControls } from "./ChartFilterControls";
+export function ChartExplorerControls(props) {
+  const messages = useUiMessages();
+  const label = key => props.steps?.find(step => step.key === key)?.label ?? key ?? "";
+  return _$createComponent(Paper, {
+    "class": "k2b-chart-group-controls",
+    get children() {
+      return [(() => {
+        var _el$ = _$getNextElement(_tmpl$3),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.nextSibling,
+          _el$4 = _el$3.firstChild,
+          _el$13 = _el$4.nextSibling,
+          [_el$14, _co$4] = _$getNextMarker(_el$13.nextSibling);
+        _$insert(_el$2, () => props.title);
+        _$insert(_el$4, _$createComponent(Show, {
+          get when() {
+            return props.explorer.loading();
+          },
+          get children() {
+            return [_$getNextElement(_tmpl$), (() => {
+              var _el$6 = _$getNextElement(_tmpl$2),
+                _el$9 = _el$6.firstChild,
+                [_el$0, _co$] = _$getNextMarker(_el$9.nextSibling),
+                _el$7 = _el$0.nextSibling,
+                _el$1 = _el$7.nextSibling,
+                [_el$10, _co$2] = _$getNextMarker(_el$1.nextSibling),
+                _el$8 = _el$10.nextSibling,
+                _el$11 = _el$8.nextSibling,
+                [_el$12, _co$3] = _$getNextMarker(_el$11.nextSibling);
+              _$insert(_el$6, () => messages().loading, _el$0, _co$);
+              _$insert(_el$6, () => messages().chartPreviousData, _el$10, _co$2);
+              _$insert(_el$6, () => label(props.explorer.snapshot().request.step), _el$12, _co$3);
+              return _el$6;
+            })()];
+          }
+        }));
+        _$insert(_el$3, _$createComponent(Show, {
+          get when() {
+            return _$memo(() => !!props.steps?.length)() && props.explorer.snapshot().request.step !== undefined;
+          },
+          get children() {
+            return [_$createComponent(Show, {
+              get when() {
+                return props.explorer.desired().referenceStep;
+              },
+              children: reference => _$createComponent(Button, {
+                size: "sm",
+                variant: "secondary",
+                onClick: () => void props.explorer.clearReference(),
+                get ["aria-label"]() {
+                  return `${messages().chartRemoveComparison}: ${label(reference())}`;
+                },
+                get children() {
+                  return [_$memo(() => messages().chartReference), ": ", _$memo(() => label(reference())), " ", _$getNextElement(_tmpl$4)];
+                }
+              })
+            }), _$createComponent(Button, {
+              size: "sm",
+              variant: "secondary",
+              get disabled() {
+                return props.explorer.loading() || props.explorer.error() !== null || props.explorer.desired().referenceStep === props.explorer.snapshot().request.step;
+              },
+              onClick: () => void props.explorer.pinReference(),
+              get children() {
+                return messages().chartPinReference;
+              }
+            })];
+          }
+        }), _el$14, _co$4);
+        _$effect(_p$ => {
+          var _v$ = props.explorer.loading() || undefined,
+            _v$2 = props.explorer.loading() ? `${messages().loading} · ${messages().chartPreviousData}: ${label(props.explorer.snapshot().request.step)}` : undefined;
+          _v$ !== _p$.e && _$setAttribute(_el$4, "data-loading", _p$.e = _v$);
+          _v$2 !== _p$.t && _$setAttribute(_el$4, "title", _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$;
+      })(), _$createComponent(ChartFilterControls, {
+        get request() {
+          return props.explorer.desired();
+        },
+        get displayedRequest() {
+          return props.explorer.snapshot().request;
+        },
+        get steps() {
+          return props.steps;
+        },
+        get series() {
+          return props.series;
+        },
+        get dimensionLabel() {
+          return props.dimensionLabel;
+        },
+        get failed() {
+          return props.explorer.error() !== null;
+        },
+        onRequest: request => void props.explorer.setRequest(request),
+        onRetry: () => void props.explorer.retry()
+      }), _$createComponent(Show, {
+        get when() {
+          return props.explorer.snapshot().request.referenceStep;
+        },
+        children: reference => (() => {
+          var _el$16 = _$getNextElement(_tmpl$5),
+            _el$17 = _el$16.firstChild,
+            [_el$18, _co$5] = _$getNextMarker(_el$17.nextSibling),
+            _el$19 = _el$18.nextSibling,
+            [_el$20, _co$6] = _$getNextMarker(_el$19.nextSibling);
+          _$insert(_el$16, _$createComponent(StatusBadge, {
+            tone: "neutral",
+            icon: null,
+            get label() {
+              return [_$getNextElement(_tmpl$6), " ", _$memo(() => messages().chartCurrent), ": ", _$memo(() => label(props.explorer.snapshot().request.step))];
+            }
+          }), _el$18, _co$5);
+          _$insert(_el$16, _$createComponent(StatusBadge, {
+            tone: "neutral",
+            icon: null,
+            get label() {
+              return [_$getNextElement(_tmpl$7), " ", _$memo(() => messages().chartReference), ": ", _$memo(() => label(reference()))];
+            }
+          }), _el$20, _co$6);
+          return _el$16;
+        })()
+      })];
+    }
+  });
+}
+//# sourceMappingURL=ChartExplorerControls.js.map

package/dist/browser/content/ChartExplorerControls.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Show","Button","useUiMessages","Paper","StatusBadge","ChartFilterControls","ChartExplorerControls","props","messages","label","key","steps","find","step","_$createComponent","children","_el$","_$getNextElement","_tmpl$3","_el$2","firstChild","_el$3","nextSibling","_el$4","_el$13","_el$14","_co$4","_$getNextMarker","_$insert","title","when","explorer","loading","_tmpl$","_el$6","_tmpl$2","_el$9","_el$0","_co$","_el$7","_el$1","_el$10","_co$2","_el$8","_el$11","_el$12","_co$3","chartPreviousData","snapshot","request","_$memo","length","undefined","desired","referenceStep","reference","size","variant","onClick","clearReference","aria-label","chartRemoveComparison","chartReference","_tmpl$4","disabled","error","pinReference","chartPinReference","_$effect","_p$","_v$","_v$2","e","_$setAttribute","t","displayedRequest","series","dimensionLabel","failed","onRequest","setRequest","onRetry","retry","_el$16","_tmpl$5","_el$17","_el$18","_co$5","_el$19","_el$20","_co$6","tone","icon","_tmpl$6","chartCurrent","_tmpl$7"],"sources":["content/ChartExplorerControls.tsx"],"sourcesContent":["import { Show } from \"solid-js\";\nimport { Button } from \"../actions/Button\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { Paper } from \"../surfaces/Paper\";\nimport { StatusBadge } from \"../surfaces/StatusBadge\";\nimport { ChartFilterControls, type ChartFilterControlsProps } from \"./ChartFilterControls\";\nimport type { ChartExplorerCharts, ChartExplorerController } from \"./chart-explorer\";\n\nexport type ChartExplorerControlsProps<C extends ChartExplorerCharts> = {\n  explorer: ChartExplorerController<C>;\n  title: string;\n  steps?: ChartFilterControlsProps[\"steps\"];\n  series?: ChartFilterControlsProps[\"series\"];\n  dimensionLabel?: string;\n};\n\nexport function ChartExplorerControls<C extends ChartExplorerCharts>(props: ChartExplorerControlsProps<C>) {\n  const messages = useUiMessages();\n  const label = (key: string | undefined) => props.steps?.find((step) => step.key === key)?.label ?? key ?? \"\";\n  return (\n    <Paper class=\"k2b-chart-group-controls\">\n      <div class=\"k2b-chart-explorer__header\">\n        <strong>{props.title}</strong>\n        <div class=\"k2b-chart-explorer__actions\">\n          <span\n            class=\"k2b-chart-group-controls__loading\"\n            data-loading={props.explorer.loading() || undefined}\n            role=\"status\"\n            title={\n              props.explorer.loading()\n                ? `${messages().loading} · ${messages().chartPreviousData}: ${label(props.explorer.snapshot().request.step)}`\n                : undefined\n            }\n          >\n            <Show when={props.explorer.loading()}>\n              <i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\" />\n              <span class=\"k2b-sr-only\">\n                {messages().loading} · {messages().chartPreviousData}: {label(props.explorer.snapshot().request.step)}\n              </span>\n            </Show>\n          </span>\n          <Show when={props.steps?.length && props.explorer.snapshot().request.step !== undefined}>\n            <Show when={props.explorer.desired().referenceStep}>\n              {(reference) => (\n                <Button\n                  size=\"sm\"\n                  variant=\"secondary\"\n                  onClick={() => void props.explorer.clearReference()}\n                  aria-label={`${messages().chartRemoveComparison}: ${label(reference())}`}\n                >\n                  {messages().chartReference}: {label(reference())} <i class=\"ti ti-x\" aria-hidden=\"true\" />\n                </Button>\n              )}\n            </Show>\n            <Button\n              size=\"sm\"\n              variant=\"secondary\"\n              disabled={\n                props.explorer.loading() ||\n                props.explorer.error() !== null ||\n                props.explorer.desired().referenceStep === props.explorer.snapshot().request.step\n              }\n              onClick={() => void props.explorer.pinReference()}\n            >\n              {messages().chartPinReference}\n            </Button>\n          </Show>\n        </div>\n      </div>\n      <ChartFilterControls\n        request={props.explorer.desired()}\n        displayedRequest={props.explorer.snapshot().request}\n        steps={props.steps}\n        series={props.series}\n        dimensionLabel={props.dimensionLabel}\n        failed={props.explorer.error() !== null}\n        onRequest={(request) => void props.explorer.setRequest(request)}\n        onRetry={() => void props.explorer.retry()}\n      />\n      <Show when={props.explorer.snapshot().request.referenceStep}>\n        {(reference) => (\n          <div class=\"k2b-chart-explorer__actions\" aria-live=\"polite\">\n            <StatusBadge\n              tone=\"neutral\"\n              icon={null}\n              label={\n                <>\n                  <span aria-hidden=\"true\">●</span> {messages().chartCurrent}: {label(props.explorer.snapshot().request.step)}\n                </>\n              }\n            />\n            <StatusBadge\n              tone=\"neutral\"\n              icon={null}\n              label={\n                <>\n                  <span aria-hidden=\"true\">○</span> {messages().chartReference}: {label(reference())}\n                </>\n              }\n            />\n          </div>\n        )}\n      </Show>\n    </Paper>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/content/ChartFilterControls.js

@@ -0,0 +1,200 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__dimension role=group><!$><!/><output class=k2b-chart-explorer__dimension-value></output><div class=k2b-chart-explorer__steps>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-chart-explorer__legend><!$><!/><div class=k2b-chart-explorer__status role=status><!$><!/><!$><!/>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span>`);
+import { createEffect, createSignal, createUniqueId, For, Show } from "solid-js";
+import { Button } from "../actions/Button";
+import { FilterChip } from "../actions/FilterChip";
+import { Slider } from "../inputs/ChoiceInputs";
+import { useUiMessages } from "../intl/messages";
+/** Shared controls for a standalone explorer or an atomic group of charts. */
+export function ChartFilterControls(props) {
+  const validateOptions = () => {
+    for (const items of [props.steps, props.series]) {
+      const keys = items?.map(item => item.key) ?? [];
+      if (keys.some(key => !key) || new Set(keys).size !== keys.length) throw new Error("Chart control options require nonempty unique keys");
+    }
+  };
+  validateOptions();
+  createEffect(validateOptions);
+  const messages = useUiMessages();
+  const id = `k2b-chart-controls-${createUniqueId()}`;
+  const [keyboardSteps, setKeyboardSteps] = createSignal(false);
+  let pointerFocus = false;
+  const stepLabel = key => props.steps?.find(step => step.key === key)?.label ?? key ?? "";
+  return [_$createComponent(Show, {
+    get when() {
+      return props.steps?.length;
+    },
+    get children() {
+      var _el$ = _$getNextElement(_tmpl$),
+        _el$4 = _el$.firstChild,
+        [_el$5, _co$] = _$getNextMarker(_el$4.nextSibling),
+        _el$2 = _el$5.nextSibling,
+        _el$3 = _el$2.nextSibling;
+      _el$.$$focusout = () => {
+        pointerFocus = false;
+        setKeyboardSteps(false);
+      };
+      _el$.$$focusin = event => {
+        if (!pointerFocus && event.target.matches(":focus-visible")) setKeyboardSteps(true);
+      };
+      _el$.$$keydown = () => {
+        pointerFocus = false;
+        setKeyboardSteps(true);
+      };
+      _el$.$$pointerdown = () => {
+        pointerFocus = true;
+        setKeyboardSteps(false);
+      };
+      _$insert(_el$, _$createComponent(Slider, {
+        id: `${id}-dimension`,
+        showValue: false,
+        "aria-describedby": `${id}-steps`,
+        get label() {
+          return props.dimensionLabel ?? messages().range;
+        },
+        min: 0,
+        get max() {
+          return Math.max(0, (props.steps?.length ?? 1) - 1);
+        },
+        step: 1,
+        get value() {
+          return Math.max(0, props.steps?.findIndex(step => step.key === props.request.step) ?? 0);
+        },
+        get disabled() {
+          return props.disabled || (props.steps?.length ?? 0) < 2;
+        },
+        formatValue: index => props.steps?.[index]?.label ?? "",
+        get ["aria-valuetext"]() {
+          return stepLabel(props.request.step);
+        },
+        onValueChange: index => {
+          const step = props.steps?.[index];
+          if (step) props.onRequest({
+            ...props.request,
+            step: step.key
+          });
+        }
+      }), _el$5, _co$);
+      _$setAttribute(_el$2, "for", `${id}-dimension`);
+      _$insert(_el$2, () => stepLabel(props.request.step));
+      _$setAttribute(_el$3, "id", `${id}-steps`);
+      _$insert(_el$3, _$createComponent(For, {
+        get each() {
+          return props.steps;
+        },
+        children: step => (() => {
+          var _el$12 = _$getNextElement(_tmpl$3);
+          _$insert(_el$12, () => step.label);
+          _$effect(() => _$setAttribute(_el$12, "data-current", step.key === props.request.step ? "true" : undefined));
+          return _el$12;
+        })()
+      }));
+      _$effect(_p$ => {
+        var _v$ = props.dimensionLabel ?? messages().range,
+          _v$2 = keyboardSteps() ? "true" : undefined;
+        _v$ !== _p$.e && _$setAttribute(_el$, "aria-label", _p$.e = _v$);
+        _v$2 !== _p$.t && _$setAttribute(_el$, "data-keyboard", _p$.t = _v$2);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
+      _$runHydrationEvents();
+      return _el$;
+    }
+  }), (() => {
+    var _el$6 = _$getNextElement(_tmpl$2),
+      _el$10 = _el$6.firstChild,
+      [_el$11, _co$4] = _$getNextMarker(_el$10.nextSibling),
+      _el$7 = _el$11.nextSibling,
+      _el$8 = _el$7.firstChild,
+      [_el$9, _co$2] = _$getNextMarker(_el$8.nextSibling),
+      _el$0 = _el$9.nextSibling,
+      [_el$1, _co$3] = _$getNextMarker(_el$0.nextSibling);
+    _$insert(_el$6, _$createComponent(Show, {
+      get when() {
+        return props.series?.length;
+      },
+      get children() {
+        return _$createComponent(FilterChip, {
+          get label() {
+            return messages().chartSeries;
+          },
+          icon: "ti ti-chart-dots",
+          get disabled() {
+            return props.disabled;
+          },
+          get value() {
+            return props.request.visibleKeys ?? props.series?.map(item => item.key) ?? [];
+          },
+          get defaultValue() {
+            return props.series?.map(item => item.key) ?? [];
+          },
+          get isActive() {
+            return _$memo(() => props.request.visibleKeys !== undefined)() && props.request.visibleKeys.length !== props.series?.length;
+          },
+          get options() {
+            return [{
+              multiple: true,
+              options: (props.series ?? []).map(item => ({
+                value: item.key,
+                label: item.label,
+                color: item.color
+              }))
+            }];
+          },
+          onValueChange: visibleKeys => props.onRequest({
+            ...props.request,
+            visibleKeys
+          })
+        });
+      }
+    }), _el$11, _co$4);
+    _$insert(_el$7, _$createComponent(Show, {
+      get when() {
+        return props.failed;
+      },
+      get children() {
+        return [_$memo(() => messages().couldNotLoadData), " ", _$createComponent(Button, {
+          variant: "text",
+          size: "sm",
+          get onClick() {
+            return props.onRetry;
+          },
+          get children() {
+            return messages().retry;
+          }
+        })];
+      }
+    }), _el$9, _co$2);
+    _$insert(_el$7, _$createComponent(Show, {
+      get when() {
+        return props.failed;
+      },
+      get children() {
+        return ["\xB7 ", _$memo(() => messages().chartPreviousData), _$createComponent(Show, {
+          get when() {
+            return props.steps?.length;
+          },
+          get children() {
+            return [": ", _$memo(() => stepLabel(props.displayedRequest.step))];
+          }
+        })];
+      }
+    }), _el$1, _co$3);
+    return _el$6;
+  })()];
+}
+_$delegateEvents(["pointerdown", "keydown", "focusin", "focusout"]);
+//# sourceMappingURL=ChartFilterControls.js.map

package/dist/browser/content/ChartFilterControls.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createEffect","createSignal","createUniqueId","For","Show","Button","FilterChip","Slider","useUiMessages","ChartFilterControls","props","validateOptions","items","steps","series","keys","map","item","key","some","Set","size","length","Error","messages","id","keyboardSteps","setKeyboardSteps","pointerFocus","stepLabel","find","step","label","_$createComponent","when","children","_el$","_$getNextElement","_tmpl$","_el$4","firstChild","_el$5","_co$","_$getNextMarker","nextSibling","_el$2","_el$3","$$focusout","$$focusin","event","target","matches","$$keydown","$$pointerdown","_$insert","showValue","dimensionLabel","range","min","max","Math","value","findIndex","request","disabled","formatValue","index","aria-valuetext","onValueChange","onRequest","_$setAttribute","each","_el$12","_tmpl$3","_$effect","undefined","_p$","_v$","_v$2","e","t","_$runHydrationEvents","_el$6","_tmpl$2","_el$10","_el$11","_co$4","_el$7","_el$8","_el$9","_co$2","_el$0","_el$1","_co$3","chartSeries","icon","visibleKeys","defaultValue","isActive","_$memo","options","multiple","color","failed","couldNotLoadData","variant","onClick","onRetry","retry","chartPreviousData","displayedRequest","_$delegateEvents"],"sources":["content/ChartFilterControls.tsx"],"sourcesContent":["import { createEffect, createSignal, createUniqueId, For, Show } from \"solid-js\";\nimport { Button } from \"../actions/Button\";\nimport { FilterChip } from \"../actions/FilterChip\";\nimport { Slider } from \"../inputs/ChoiceInputs\";\nimport { useUiMessages } from \"../intl/messages\";\nimport type { ChartExplorerRequest } from \"./chart-explorer\";\n\nexport type ChartFilterControlsProps = {\n  request: ChartExplorerRequest;\n  displayedRequest: ChartExplorerRequest;\n  steps?: readonly { key: string; label: string }[];\n  series?: readonly { key: string; label: string; color: string }[];\n  dimensionLabel?: string;\n  disabled?: boolean;\n  failed?: boolean;\n  onRequest: (request: ChartExplorerRequest) => void;\n  onRetry?: () => void;\n};\n\n/** Shared controls for a standalone explorer or an atomic group of charts. */\nexport function ChartFilterControls(props: ChartFilterControlsProps) {\n  const validateOptions = () => {\n    for (const items of [props.steps, props.series]) {\n      const keys = items?.map((item) => item.key) ?? [];\n      if (keys.some((key) => !key) || new Set(keys).size !== keys.length)\n        throw new Error(\"Chart control options require nonempty unique keys\");\n    }\n  };\n  validateOptions();\n  createEffect(validateOptions);\n  const messages = useUiMessages();\n  const id = `k2b-chart-controls-${createUniqueId()}`;\n  const [keyboardSteps, setKeyboardSteps] = createSignal(false);\n  let pointerFocus = false;\n  const stepLabel = (key: string | undefined) => props.steps?.find((step) => step.key === key)?.label ?? key ?? \"\";\n  return (\n    <>\n      <Show when={props.steps?.length}>\n        <div\n          class=\"k2b-chart-explorer__dimension\"\n          role=\"group\"\n          aria-label={props.dimensionLabel ?? messages().range}\n          data-keyboard={keyboardSteps() ? \"true\" : undefined}\n          onPointerDown={() => {\n            pointerFocus = true;\n            setKeyboardSteps(false);\n          }}\n          onKeyDown={() => {\n            pointerFocus = false;\n            setKeyboardSteps(true);\n          }}\n          onFocusIn={(event) => {\n            if (!pointerFocus && event.target.matches(\":focus-visible\")) setKeyboardSteps(true);\n          }}\n          onFocusOut={() => {\n            pointerFocus = false;\n            setKeyboardSteps(false);\n          }}\n        >\n          <Slider\n            id={`${id}-dimension`}\n            showValue={false}\n            aria-describedby={`${id}-steps`}\n            label={props.dimensionLabel ?? messages().range}\n            min={0}\n            max={Math.max(0, (props.steps?.length ?? 1) - 1)}\n            step={1}\n            value={Math.max(0, props.steps?.findIndex((step) => step.key === props.request.step) ?? 0)}\n            disabled={props.disabled || (props.steps?.length ?? 0) < 2}\n            formatValue={(index) => props.steps?.[index]?.label ?? \"\"}\n            aria-valuetext={stepLabel(props.request.step)}\n            onValueChange={(index) => {\n              const step = props.steps?.[index];\n              if (step) props.onRequest({ ...props.request, step: step.key });\n            }}\n          />\n          <output class=\"k2b-chart-explorer__dimension-value\" for={`${id}-dimension`}>\n            {stepLabel(props.request.step)}\n          </output>\n          <div id={`${id}-steps`} class=\"k2b-chart-explorer__steps\">\n            <For each={props.steps}>\n              {(step) => <span data-current={step.key === props.request.step ? \"true\" : undefined}>{step.label}</span>}\n            </For>\n          </div>\n        </div>\n      </Show>\n      <div class=\"k2b-chart-explorer__legend\">\n        <Show when={props.series?.length}>\n          <FilterChip\n            label={messages().chartSeries}\n            icon=\"ti ti-chart-dots\"\n            disabled={props.disabled}\n            value={props.request.visibleKeys ?? props.series?.map((item) => item.key) ?? []}\n            defaultValue={props.series?.map((item) => item.key) ?? []}\n            isActive={props.request.visibleKeys !== undefined && props.request.visibleKeys.length !== props.series?.length}\n            options={[\n              { multiple: true, options: (props.series ?? []).map((item) => ({ value: item.key, label: item.label, color: item.color })) },\n            ]}\n            onValueChange={(visibleKeys) => props.onRequest({ ...props.request, visibleKeys })}\n          />\n        </Show>\n        <div class=\"k2b-chart-explorer__status\" role=\"status\">\n          <Show when={props.failed}>\n            {messages().couldNotLoadData}{\" \"}\n            <Button variant=\"text\" size=\"sm\" onClick={props.onRetry}>\n              {messages().retry}\n            </Button>\n          </Show>\n          <Show when={props.failed}>\n            · {messages().chartPreviousData}\n            <Show when={props.steps?.length}>: {stepLabel(props.displayedRequest.step)}</Show>\n          </Show>\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/content/ChartSnapshotView.js

@@ -0,0 +1,114 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { addEventListener as _$addEventListener } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-chart data-interactive=true role=group tabindex=0><div class=k2b-chart__svg></div><span class=k2b-chart__anchor aria-hidden=true></span><span class="k2b-chart__tooltip k2b-tooltip"role=tooltip popover=manual data-instant=true>`);
+import { createEffect, createUniqueId, onCleanup, onMount } from "solid-js";
+import { isServer } from "solid-js/web";
+import { useUiMessages } from "../intl/messages";
+import { createChartInspection, sameChartDatum } from "./chart-inspection";
+import { selectedChartSvg } from "./chart-svg";
+
+/** Internal display for server-prepared geometry. Viewports are snapshot-owned. */
+export function ChartSnapshotView(props) {
+  const messages = useUiMessages();
+  let container;
+  let tooltip;
+  let anchor;
+  const id = `k2b-chart-tooltip-${createUniqueId()}`;
+  const inspection = createChartInspection({
+    container: () => container,
+    cursor: () => props.cursor,
+    tooltip: () => tooltip,
+    anchor: () => anchor,
+    kind: () => props.snapshot.kind,
+    enabled: () => true,
+    format: ({
+      datum
+    }) => props.snapshot.marks.find(m => sameChartDatum(m.datum, datum))?.tooltip ?? {
+      rows: []
+    },
+    select: ({
+      datum
+    }) => {
+      const mark = props.snapshot.marks.find(m => sameChartDatum(m.datum, datum));
+      if (mark) props.onSelect(mark.rowKey);
+    }
+  });
+  createEffect(() => {
+    props.snapshot;
+    inspection.invalidate();
+  });
+  createEffect(() => inspection.selectData(props.snapshot.marks.filter(m => m.rowKey === props.selectedKey).map(m => m.datum)));
+  onMount(() => {
+    const outside = event => {
+      if (event.target instanceof Node && !container?.contains(event.target)) inspection.close();
+    };
+    window.addEventListener("pointerdown", outside);
+    window.addEventListener("scroll", inspection.close, true);
+    onCleanup(() => {
+      window.removeEventListener("pointerdown", outside);
+      window.removeEventListener("scroll", inspection.close, true);
+    });
+  });
+  onCleanup(inspection.close);
+  return (() => {
+    var _el$ = _$getNextElement(_tmpl$),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling,
+      _el$4 = _el$3.nextSibling;
+    _$addEventListener(_el$, "keydown", inspection.key, true);
+    _$addEventListener(_el$, "focusout", inspection.close, true);
+    _$addEventListener(_el$, "focusin", inspection.focus, true);
+    _$addEventListener(_el$, "pointerleave", inspection.leave);
+    _$addEventListener(_el$, "click", inspection.click, true);
+    _$addEventListener(_el$, "pointermove", inspection.move, true);
+    _$addEventListener(_el$, "pointerdown", inspection.down, true);
+    var _ref$ = container;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$) : container = _el$;
+    var _ref$2 = anchor;
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$3) : anchor = _el$3;
+    var _ref$3 = tooltip;
+    typeof _ref$3 === "function" ? _$use(_ref$3, _el$4) : tooltip = _el$4;
+    _$setAttribute(_el$4, "id", id);
+    _$effect(_p$ => {
+      var _v$ = props.snapshot.kind,
+        _v$2 = props.style,
+        _v$3 = messages().interactiveChart,
+        _v$4 = props.snapshot.stretch ? "true" : undefined,
+        _v$5 = `${props.snapshot.width}px`,
+        _v$6 = `${props.snapshot.height}px`,
+        _v$7 = `${props.snapshot.width}/${props.snapshot.height}`,
+        _v$8 = isServer ? selectedChartSvg(props.snapshot.svg, props.snapshot.marks.filter(m => m.rowKey === props.selectedKey).map(m => m.datum)) : props.snapshot.svg;
+      _v$ !== _p$.e && _$setAttribute(_el$, "data-chart-kind", _p$.e = _v$);
+      _p$.t = _$style(_el$, _v$2, _p$.t);
+      _v$3 !== _p$.a && _$setAttribute(_el$, "aria-label", _p$.a = _v$3);
+      _v$4 !== _p$.o && _$setAttribute(_el$2, "data-stretch", _p$.o = _v$4);
+      _v$5 !== _p$.i && _$setStyleProperty(_el$2, "--k2b-chart-width", _p$.i = _v$5);
+      _v$6 !== _p$.n && _$setStyleProperty(_el$2, "--k2b-chart-height", _p$.n = _v$6);
+      _v$7 !== _p$.s && _$setStyleProperty(_el$2, "aspect-ratio", _p$.s = _v$7);
+      _v$8 !== _p$.h && _$setProperty(_el$2, "innerHTML", _p$.h = _v$8);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined
+    });
+    _$runHydrationEvents();
+    return _el$;
+  })();
+}
+_$delegateEvents(["pointerdown", "pointermove", "click", "focusin", "focusout", "keydown"]);
+//# sourceMappingURL=ChartSnapshotView.js.map

package/dist/browser/content/ChartSnapshotView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createEffect","createUniqueId","onCleanup","onMount","isServer","useUiMessages","createChartInspection","sameChartDatum","selectedChartSvg","ChartSnapshotView","props","messages","container","tooltip","anchor","id","inspection","cursor","kind","snapshot","enabled","format","datum","marks","find","m","rows","select","mark","onSelect","rowKey","invalidate","selectData","filter","selectedKey","map","outside","event","target","Node","contains","close","window","addEventListener","removeEventListener","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_$addEventListener","key","focus","leave","click","move","down","_ref$","_$use","_ref$2","_ref$3","_$setAttribute","_$effect","_p$","_v$","_v$2","style","_v$3","interactiveChart","_v$4","stretch","undefined","_v$5","width","_v$6","height","_v$7","_v$8","svg","e","t","_$style","a","o","i","_$setStyleProperty","n","s","h","_$setProperty","_$runHydrationEvents","_$delegateEvents"],"sources":["content/ChartSnapshotView.tsx"],"sourcesContent":["import { createEffect, createUniqueId, type JSX, onCleanup, onMount } from \"solid-js\";\nimport { isServer } from \"solid-js/web\";\nimport { useUiMessages } from \"../intl/messages\";\nimport type { ChartCursor } from \"./chart-cursor\";\nimport { createChartInspection, sameChartDatum } from \"./chart-inspection\";\nimport type { ChartSnapshot } from \"./chart-snapshot\";\nimport { selectedChartSvg } from \"./chart-svg\";\n\n/** Internal display for server-prepared geometry. Viewports are snapshot-owned. */\nexport function ChartSnapshotView(props: {\n  snapshot: ChartSnapshot;\n  cursor?: ChartCursor;\n  selectedKey: string | null;\n  onSelect: (key: string) => void;\n  style?: JSX.CSSProperties;\n}) {\n  const messages = useUiMessages();\n  let container: HTMLDivElement | undefined;\n  let tooltip: HTMLSpanElement | undefined;\n  let anchor: HTMLSpanElement | undefined;\n  const id = `k2b-chart-tooltip-${createUniqueId()}`;\n  const inspection = createChartInspection({\n    container: () => container,\n    cursor: () => props.cursor,\n    tooltip: () => tooltip,\n    anchor: () => anchor,\n    kind: () => props.snapshot.kind,\n    enabled: () => true,\n    format: ({ datum }) => props.snapshot.marks.find((m) => sameChartDatum(m.datum, datum))?.tooltip ?? { rows: [] },\n    select: ({ datum }) => {\n      const mark = props.snapshot.marks.find((m) => sameChartDatum(m.datum, datum));\n      if (mark) props.onSelect(mark.rowKey);\n    },\n  });\n  createEffect(() => {\n    props.snapshot;\n    inspection.invalidate();\n  });\n  createEffect(() => inspection.selectData(props.snapshot.marks.filter((m) => m.rowKey === props.selectedKey).map((m) => m.datum)));\n  onMount(() => {\n    const outside = (event: Event) => {\n      if (event.target instanceof Node && !container?.contains(event.target)) inspection.close();\n    };\n    window.addEventListener(\"pointerdown\", outside);\n    window.addEventListener(\"scroll\", inspection.close, true);\n    onCleanup(() => {\n      window.removeEventListener(\"pointerdown\", outside);\n      window.removeEventListener(\"scroll\", inspection.close, true);\n    });\n  });\n  onCleanup(inspection.close);\n  return (\n    <div\n      ref={container}\n      class=\"k2b-chart\"\n      data-chart-kind={props.snapshot.kind}\n      data-interactive=\"true\"\n      style={props.style}\n      role=\"group\"\n      aria-label={messages().interactiveChart}\n      tabIndex={0}\n      onPointerDown={inspection.down}\n      onPointerMove={inspection.move}\n      onClick={inspection.click}\n      onPointerLeave={inspection.leave}\n      onFocusIn={inspection.focus}\n      onFocusOut={inspection.close}\n      onKeyDown={inspection.key}\n    >\n      <div\n        class=\"k2b-chart__svg\"\n        data-stretch={props.snapshot.stretch ? \"true\" : undefined}\n        style={{\n          \"--k2b-chart-width\": `${props.snapshot.width}px`,\n          \"--k2b-chart-height\": `${props.snapshot.height}px`,\n          \"aspect-ratio\": `${props.snapshot.width}/${props.snapshot.height}`,\n        }}\n        innerHTML={\n          isServer\n            ? selectedChartSvg(\n                props.snapshot.svg,\n                props.snapshot.marks.filter((m) => m.rowKey === props.selectedKey).map((m) => m.datum),\n              )\n            : props.snapshot.svg\n        }\n      />\n      <span ref={anchor} class=\"k2b-chart__anchor\" aria-hidden=\"true\" />\n      <span ref={tooltip} id={id} class=\"k2b-chart__tooltip k2b-tooltip\" role=\"tooltip\" popover=\"manual\" data-instant=\"true\" />\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}