@k2b/ui 0.21.0 → 0.23.0

package/dist/ssr/content/ChartExplorer.js

@@ -1,17 +1,22 @@
+import { memo as _$memo } from "solid-js/web";
 import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
 import { ssr as _$ssr } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
 import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
 var _tmpl$ = ["<div>", "</div>"],
   _tmpl$2 = ["<span role=\"alert\">", "</span>"],
-  _tmpl$3 = ["<div class=\"k2b-chart-explorer__details\" aria-live=\"polite\">", "</div>"],
-  _tmpl$4 = ["<section class=\"", "\"", "><header class=\"k2b-chart-explorer__header\"><div><h3", ">", "</h3>", "</div><div class=\"k2b-chart-explorer__actions\">", "", "</div></header>", "<div class=\"k2b-chart-explorer__viewport\" style=\"", "\">", "</div>", "</section>"],
-  _tmpl$5 = ["<div class=\"k2b-chart__empty\">", "</div>"],
-  _tmpl$6 = ["<span class=\"k2b-chart-explorer__sort-icon\" aria-hidden=\"true\">", "</span>"],
-  _tmpl$7 = "<i class=\"ti ti-x\" aria-hidden=\"true\"></i>",
-  _tmpl$8 = ["<div class=\"k2b-chart-explorer__detail-header\"><span>", "</span>", "</div>"];
-import { createEffect, createMemo, createSignal, createUniqueId, Show } from "solid-js";
+  _tmpl$3 = ["<ul class=\"k2b-chart-legend\"", ">", "</ul>"],
+  _tmpl$4 = ["<div class=\"k2b-chart-explorer__details\" aria-live=\"polite\">", "</div>"],
+  _tmpl$5 = ["<section class=\"", "\"", "><header class=\"k2b-chart-explorer__header\"><div>", "", "</div><div class=\"k2b-chart-explorer__actions\">", "", "</div></header>", "", "<div class=\"k2b-chart-explorer__viewport\"", " style=\"", "\">", "</div>", "</section>"],
+  _tmpl$6 = ["<div class=\"k2b-chart__empty\">", "</div>"],
+  _tmpl$7 = ["<p class=\"k2b-chart-explorer__note\">", "</p>"],
+  _tmpl$8 = ["<i class=\"", "\"", " aria-hidden=\"true\"></i>"],
+  _tmpl$9 = ["<li><span class=\"k2b-chart-legend__swatch\"", " style=\"", "\" aria-hidden=\"true\"></span>", "</li>"],
+  _tmpl$0 = "<i class=\"ti ti-x\" aria-hidden=\"true\"></i>",
+  _tmpl$1 = ["<div class=\"k2b-chart-explorer__detail-header\"><span>", "</span>", "</div>"];
+import { createEffect, createMemo, createSignal, createUniqueId, For, Show } from "solid-js";
+import { Dynamic } from "solid-js/web";
 import { Button, IconButton } from "../actions/Button";
 import { CopyButton } from "../actions/CopyButton";
 import { SelectChip } from "../inputs/SelectChip";
@@ -21,10 +26,18 @@ import { DescriptionList } from "../surfaces/DescriptionList";
 import { Paper } from "../surfaces/Paper";
 import { ChartSnapshotView } from "./ChartSnapshotView";
 import { validateChartExplorerData } from "./chart-explorer";
+import { useChartMessages } from "./chart-messages";
 import DataTable from "./DataTable";
-const tsvCell = value => /[\t\r\n"]/.test(value) ? `"${value.replaceAll('"', '""')}"` : value;
+
+/** One legend entry; `color` is the palette index the renderer gave the series (0 is `--stdlib-chart-c1`). */
+
+const tsvCell = (value, numeric = false) => {
+  const safe = !numeric && /^[=+\-@\t\r]/.test(value) ? `'${value}` : value;
+  return /[\t\r\n"]/.test(safe) ? `"${safe.replaceAll('"', '""')}"` : safe;
+};
 export function ChartExplorer(props) {
   const messages = useUiMessages();
+  const chartMessages = useChartMessages();
   const locale = useLocale();
   const id = `k2b-chart-explorer-${createUniqueId()}`;
   const data = () => props.data;
@@ -77,8 +90,38 @@ export function ChartExplorer(props) {
       return order.direction === "asc" ? comparison : -comparison;
     });
   });
-  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");
-  return _$ssr(_tmpl$4, `k2b-chart-explorer ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-labelledby", _$escape(id, true), false), _$ssrAttribute("id", _$escape(id, true), false), _$escape(props.title), _$escape(_$createComponent(Show, {
+  const shownRows = () => props.tableRows === undefined ? rows() : rows().slice(0, props.tableRows);
+  // Chart ids are data; a prefix keeps one named "table" apart from the table entry.
+  const switcherValue = () => view() === "table" || !props.charts?.length ? view() : `chart:${props.chart ?? props.charts[0]?.id}`;
+  const switcherOptions = () => props.charts?.length ? [...props.charts.map(chart => ({
+    value: `chart:${chart.id}`,
+    label: chart.label
+  })), {
+    value: "table",
+    label: chartMessages().chartData
+  }] : [{
+    value: "chart",
+    label: chartMessages().chartDiagram
+  }, {
+    value: "table",
+    label: chartMessages().chartData
+  }];
+  const pick = value => {
+    if (value === "table" || value === "chart") return setView(value);
+    setView("chart");
+    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), typeof c.sortValue?.(row) === "number")).join("\t"))].join("\n");
+  return _$ssr(_tmpl$5, `k2b-chart-explorer ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-labelledby", _$escape(id, true), false), _$escape(_$createComponent(Dynamic, {
+    get component() {
+      return `h${props.headingLevel ?? 3}`;
+    },
+    id: id,
+    "class": "k2b-chart-explorer__title",
+    get children() {
+      return props.title;
+    }
+  })), _$escape(_$createComponent(Show, {
     get when() {
       return props.description;
     },
@@ -90,7 +133,7 @@ export function ChartExplorer(props) {
       return copyText();
     },
     get label() {
-      return messages().chartCopyData;
+      return chartMessages().chartCopyData;
     },
     iconOnly: true,
     size: "sm",
@@ -102,34 +145,28 @@ export function ChartExplorer(props) {
     onCopied: () => setCopyFailed(false)
   })), _$escape(_$createComponent(SelectChip, {
     get value() {
-      return view();
+      return switcherValue();
     },
-    onValueChange: setView,
+    onValueChange: pick,
     get ["aria-label"]() {
-      return messages().chartView;
+      return chartMessages().chartView;
     },
     get options() {
-      return [{
-        value: "chart",
-        label: messages().chartDiagram
-      }, {
-        value: "table",
-        label: messages().chartData
-      }];
+      return switcherOptions();
     }
   })), _$escape(_$createComponent(Show, {
     get when() {
       return copyFailed();
     },
     get children() {
-      return _$ssr(_tmpl$2, _$escape(messages().chartCopyFailed));
+      return _$ssr(_tmpl$2, _$escape(chartMessages().chartCopyFailed));
     }
-  })), _$ssrStyleProperty("height:", _$escape(props.height ?? "18rem", true)), _$escape(_$createComponent(Show, {
+  })), _$escape(props.controls), _$ssrAttribute("data-legend", view() === "chart" && props.legend?.length && data().rows.length > 0 ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-capped", view() === "table" && shownRows().length < rows().length ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("height:", _$escape(props.height ?? "18rem", true)), _$escape(_$createComponent(Show, {
     get when() {
       return data().rows.length > 0;
     },
     get fallback() {
-      return _$ssr(_tmpl$5, _$escape(messages().noData));
+      return _$ssr(_tmpl$6, _$escape(props.empty ?? messages().noData));
     },
     get children() {
       return _$createComponent(Show, {
@@ -137,9 +174,9 @@ export function ChartExplorer(props) {
           return view() === "chart";
         },
         get fallback() {
-          return _$createComponent(DataTable, {
+          return [_$createComponent(DataTable, {
             get rows() {
-              return rows();
+              return shownRows();
             },
             get columns() {
               return props.columns.map(column => ({
@@ -169,7 +206,7 @@ export function ChartExplorer(props) {
             }) => {
               const custom = props.columns.find(column => column.id === col.id)?.render;
               const cell = () => custom ? custom(row) : render(value);
-              return col.id === props.columns[0]?.id ? _$createComponent(Button, {
+              return !custom && col.id === props.columns[0]?.id ? _$createComponent(Button, {
                 variant: "text",
                 size: "sm",
                 onClick: () => select(row.key),
@@ -189,13 +226,23 @@ export function ChartExplorer(props) {
                 direction: sort()?.key === col.id && sort()?.direction === "asc" ? "desc" : "asc"
               }),
               get children() {
-                return [props.columns.find(column => column.id === col.id)?.label, " ", _$ssr(_tmpl$6, sort()?.key === col.id ? sort()?.direction === "asc" ? "↑" : "↓" : "↕")];
+                return [props.columns.find(column => column.id === col.id)?.label, _$ssr(_tmpl$8, `k2b-data-table__sort-icon ti ${sort()?.key === col.id && sort()?.direction === "asc" ? "ti-arrow-up" : "ti-arrow-down"}`, _$ssrAttribute("data-active", sort()?.key === col.id ? "true" : _$escape(undefined, true), false))];
               }
             }) : render()
-          });
+          }), _$createComponent(Show, {
+            get when() {
+              return shownRows().length < rows().length;
+            },
+            get children() {
+              return _$ssr(_tmpl$7, _$escape(chartMessages().chartRowsShown({
+                shown: new Intl.NumberFormat(locale()).format(shownRows().length),
+                total: new Intl.NumberFormat(locale()).format(rows().length)
+              })));
+            }
+          })];
         },
         get children() {
-          return _$createComponent(ChartSnapshotView, {
+          return [_$createComponent(ChartSnapshotView, {
             get cursor() {
               return props.cursor;
             },
@@ -206,10 +253,24 @@ export function ChartExplorer(props) {
               return selected();
             },
             onSelect: select,
-            style: {
-              height: "100%"
+            get style() {
+              return props.legend?.length ? undefined : {
+                height: "100%"
+              };
+            }
+          }), _$createComponent(Show, {
+            get when() {
+              return props.legend?.length;
+            },
+            get children() {
+              return _$ssr(_tmpl$3, _$ssrAttribute("aria-label", _$escape(chartMessages().chartLegend, true), false), _$escape(_$createComponent(For, {
+                get each() {
+                  return props.legend;
+                },
+                children: entry => _$ssr(_tmpl$9, _$ssrAttribute("data-style", entry.style && entry.style !== "solid" ? _$escape(entry.style, true) : _$escape(undefined, true), false) + _$ssrAttribute("data-reference", entry.reference ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("--k2b-chart-legend-color:", `var(--stdlib-chart-c${_$escape(Math.abs(Math.trunc(entry.color)), true) % 8 + 1})`), _$escape(entry.label))
+              })));
             }
-          });
+          })];
         }
       });
     }
@@ -218,14 +279,14 @@ export function ChartExplorer(props) {
       return props.renderDetails !== false;
     },
     get children() {
-      return _$ssr(_tmpl$3, _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$4, _$escape(_$createComponent(Show, {
         get when() {
           return selectedRow();
         },
         children: row => _$createComponent(Paper, {
           "class": "k2b-chart-explorer__detail-paper",
           get children() {
-            return [_$ssr(_tmpl$8, _$escape(messages().chartSelectedDatum), _$escape(_$createComponent(IconButton, {
+            return [_$ssr(_tmpl$1, _$escape(chartMessages().chartSelectedDatum), _$escape(_$createComponent(IconButton, {
               variant: "text",
               size: "sm",
               get label() {
@@ -233,7 +294,7 @@ export function ChartExplorer(props) {
               },
               onClick: () => select(null),
               get children() {
-                return _$ssr(_tmpl$7);
+                return _$ssr(_tmpl$0);
               }
             }))), props.renderDetails ? props.renderDetails(row()) : _$createComponent(DescriptionList, {
               columns: 3,

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["content/ChartExplorer.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, createUniqueId, type JSX, Show } from \"solid-js\";\nimport { Button, IconButton } 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                  <IconButton variant=\"text\" size=\"sm\" label={messages().clearSelection} onClick={() => select(null)}>\n                    <i class=\"ti ti-x\" aria-hidden=\"true\" />\n                  </IconButton>\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":[]}
+{"version":3,"names":[],"sources":["content/ChartExplorer.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, createUniqueId, For, type JSX, Show } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport { Button, IconButton } 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 { useChartMessages } from \"./chart-messages\";\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  /**\n   * Explicit comparable value. Omit to leave the column unsortable.\n   * Returning a number also exempts the cell from spreadsheet formula guarding on copy.\n   */\n  sortValue?: (row: T) => string | number | null;\n  align?: \"left\" | \"center\" | \"right\";\n};\n/** One legend entry; `color` is the palette index the renderer gave the series (0 is `--stdlib-chart-c1`). */\nexport type ChartLegendEntry = {\n  label: string;\n  color: number;\n  /** Line pattern of a line series; a solid series shows a filled swatch. */\n  style?: \"solid\" | \"dashed\" | \"dotted\";\n  /** A comparison series, drawn hollow like its marks. */\n  reference?: boolean;\n};\nexport type ChartExplorerProps<T extends ChartExplorerRow> = {\n  cursor?: ChartCursor;\n  title: string;\n  /** Level of the title heading. Defaults to 3; a chart inside a titled group of charts sits one level below it. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\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  /**\n   * Several charts of the same rows. The switcher then lists each chart and the table; `chart` names the one `data`\n   * holds, and `onChartChange` reports a pick, so the owner passes the matching data.\n   */\n  charts?: readonly { id: string; label: string }[];\n  chart?: string;\n  onChartChange?: (id: string) => void;\n  /** Filter controls between the header and the viewport, such as ChartFilterControls. */\n  controls?: JSX.Element;\n  /** The table renders at most this many rows of the sorted order; sorting and Copy data use every row. */\n  tableRows?: number;\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  /**\n   * Series names below the chart, wrapping inside the fixed viewport height. Use it instead of the renderer's legend,\n   * which draws in one row and runs out of narrow columns.\n   */\n  legend?: readonly ChartLegendEntry[];\n  /** What the viewport shows without rows, for example while they load; defaults to \"No data\". */\n  empty?: JSX.Element;\n  class?: string;\n};\n\nconst tsvCell = (value: string, numeric = false) => {\n  const safe = !numeric && /^[=+\\-@\\t\\r]/.test(value) ? `'${value}` : value;\n  return /[\\t\\r\\n\"]/.test(safe) ? `\"${safe.replaceAll('\"', '\"\"')}\"` : safe;\n};\n\nexport function ChartExplorer<T extends ChartExplorerRow>(props: ChartExplorerProps<T>) {\n  const messages = useUiMessages();\n  const chartMessages = useChartMessages();\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 shownRows = () => (props.tableRows === undefined ? rows() : rows().slice(0, props.tableRows));\n  // Chart ids are data; a prefix keeps one named \"table\" apart from the table entry.\n  const switcherValue = () => (view() === \"table\" || !props.charts?.length ? view() : `chart:${props.chart ?? props.charts[0]?.id}`);\n  const switcherOptions = () =>\n    props.charts?.length\n      ? [\n          ...props.charts.map((chart) => ({ value: `chart:${chart.id}`, label: chart.label })),\n          { value: \"table\", label: chartMessages().chartData },\n        ]\n      : [\n          { value: \"chart\", label: chartMessages().chartDiagram },\n          { value: \"table\", label: chartMessages().chartData },\n        ];\n  const pick = (value: string) => {\n    if (value === \"table\" || value === \"chart\") return setView(value);\n    setView(\"chart\");\n    props.onChartChange?.(value.slice(\"chart:\".length));\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), typeof c.sortValue?.(row) === \"number\")).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          <Dynamic component={`h${props.headingLevel ?? 3}`} id={id} class=\"k2b-chart-explorer__title\">\n            {props.title}\n          </Dynamic>\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={chartMessages().chartCopyData}\n            iconOnly\n            size=\"sm\"\n            variant=\"ghost\"\n            disabled={!rows().length}\n            onCopyError={() => setCopyFailed(true)}\n            onCopied={() => setCopyFailed(false)}\n          />\n          <SelectChip<string>\n            value={switcherValue()}\n            onValueChange={pick}\n            aria-label={chartMessages().chartView}\n            options={switcherOptions()}\n          />\n        </div>\n      </header>\n      <Show when={copyFailed()}>\n        <span role=\"alert\">{chartMessages().chartCopyFailed}</span>\n      </Show>\n      {props.controls}\n      <div\n        class=\"k2b-chart-explorer__viewport\"\n        data-legend={view() === \"chart\" && props.legend?.length && data().rows.length > 0 ? \"true\" : undefined}\n        data-capped={view() === \"table\" && shownRows().length < rows().length ? \"true\" : undefined}\n        style={{ height: props.height ?? \"18rem\" }}\n      >\n        <Show when={data().rows.length > 0} fallback={<div class=\"k2b-chart__empty\">{props.empty ?? messages().noData}</div>}>\n          <Show\n            when={view() === \"chart\"}\n            fallback={\n              <>\n                <DataTable\n                  rows={shownRows()}\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 !custom && 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                        {/* The data table's own marker: inactive columns keep a dimmed arrow so the header reads as sortable. */}\n                        <i\n                          class={`k2b-data-table__sort-icon ti ${sort()?.key === col.id && sort()?.direction === \"asc\" ? \"ti-arrow-up\" : \"ti-arrow-down\"}`}\n                          data-active={sort()?.key === col.id ? \"true\" : undefined}\n                          aria-hidden=\"true\"\n                        />\n                      </Button>\n                    ) : (\n                      render()\n                    )\n                  }\n                />\n                <Show when={shownRows().length < rows().length}>\n                  <p class=\"k2b-chart-explorer__note\">\n                    {chartMessages().chartRowsShown({\n                      shown: new Intl.NumberFormat(locale()).format(shownRows().length),\n                      total: new Intl.NumberFormat(locale()).format(rows().length),\n                    })}\n                  </p>\n                </Show>\n              </>\n            }\n          >\n            <ChartSnapshotView\n              cursor={props.cursor}\n              snapshot={data().chart}\n              selectedKey={selected()}\n              onSelect={select}\n              style={props.legend?.length ? undefined : { height: \"100%\" }}\n            />\n            <Show when={props.legend?.length}>\n              <ul class=\"k2b-chart-legend\" aria-label={chartMessages().chartLegend}>\n                <For each={props.legend}>\n                  {(entry) => (\n                    <li>\n                      <span\n                        class=\"k2b-chart-legend__swatch\"\n                        data-style={entry.style && entry.style !== \"solid\" ? entry.style : undefined}\n                        data-reference={entry.reference ? \"true\" : undefined}\n                        style={{ \"--k2b-chart-legend-color\": `var(--stdlib-chart-c${(Math.abs(Math.trunc(entry.color)) % 8) + 1})` }}\n                        aria-hidden=\"true\"\n                      />\n                      {entry.label}\n                    </li>\n                  )}\n                </For>\n              </ul>\n            </Show>\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>{chartMessages().chartSelectedDatum}</span>\n                  <IconButton variant=\"text\" size=\"sm\" label={messages().clearSelection} onClick={() => select(null)}>\n                    <i class=\"ti ti-x\" aria-hidden=\"true\" />\n                  </IconButton>\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/ssr/content/ChartExplorerControls.js

@@ -16,18 +16,20 @@ import { useUiMessages } from "../intl/messages";
 import { Paper } from "../surfaces/Paper";
 import { StatusBadge } from "../surfaces/StatusBadge";
 import { ChartFilterControls } from "./ChartFilterControls";
+import { useChartMessages } from "./chart-messages";
 export function ChartExplorerControls(props) {
   const messages = useUiMessages();
+  const chartMessages = useChartMessages();
   const label = key => props.steps?.find(step => step.key === key)?.label ?? key ?? "";
   return _$createComponent(Paper, {
     "class": "k2b-chart-group-controls",
     get children() {
-      return [_$ssr(_tmpl$3, _$escape(props.title), _$ssrAttribute("data-loading", _$escape(props.explorer.loading() || undefined, true), false), _$ssrAttribute("title", props.explorer.loading() ? `${_$escape(messages().loading, true)} · ${_$escape(messages().chartPreviousData, true)}: ${_$escape(label(props.explorer.snapshot().request.step), true)}` : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+      return [_$ssr(_tmpl$3, _$escape(props.title), _$ssrAttribute("data-loading", _$escape(props.explorer.loading() || undefined, true), false), _$ssrAttribute("title", props.explorer.loading() ? `${_$escape(messages().loading, true)} · ${_$escape(chartMessages().chartPreviousData, true)}: ${_$escape(label(props.explorer.snapshot().request.step), true)}` : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
         get when() {
           return props.explorer.loading();
         },
         get children() {
-          return [_$ssr(_tmpl$), _$ssr(_tmpl$2, _$escape(messages().loading), _$escape(messages().chartPreviousData), _$escape(label(props.explorer.snapshot().request.step)))];
+          return [_$ssr(_tmpl$), _$ssr(_tmpl$2, _$escape(messages().loading), _$escape(chartMessages().chartPreviousData), _$escape(label(props.explorer.snapshot().request.step)))];
         }
       })), _$escape(_$createComponent(Show, {
         get when() {
@@ -43,10 +45,10 @@ export function ChartExplorerControls(props) {
               variant: "secondary",
               onClick: () => void props.explorer.clearReference(),
               get ["aria-label"]() {
-                return `${messages().chartRemoveComparison}: ${label(reference())}`;
+                return `${chartMessages().chartRemoveComparison}: ${label(reference())}`;
               },
               get children() {
-                return [messages().chartReference, ": ", label(reference()), " ", _$ssr(_tmpl$4)];
+                return [chartMessages().chartReference, ": ", label(reference()), " ", _$ssr(_tmpl$4)];
               }
             })
           }), _$createComponent(Button, {
@@ -57,7 +59,7 @@ export function ChartExplorerControls(props) {
             },
             onClick: () => void props.explorer.pinReference(),
             get children() {
-              return messages().chartPinReference;
+              return chartMessages().chartPinReference;
             }
           })];
         }
@@ -90,13 +92,13 @@ export function ChartExplorerControls(props) {
           tone: "neutral",
           icon: null,
           get label() {
-            return [_$ssr(_tmpl$6), " ", messages().chartCurrent, ": ", label(props.explorer.snapshot().request.step)];
+            return [_$ssr(_tmpl$6), " ", chartMessages().chartCurrent, ": ", label(props.explorer.snapshot().request.step)];
           }
         })), _$escape(_$createComponent(StatusBadge, {
           tone: "neutral",
           icon: null,
           get label() {
-            return [_$ssr(_tmpl$7), " ", messages().chartReference, ": ", label(reference())];
+            return [_$ssr(_tmpl$7), " ", chartMessages().chartReference, ": ", label(reference())];
           }
         })))
       })];

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

@@ -1 +1 @@
-{"version":3,"names":[],"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":[]}
+{"version":3,"names":[],"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\";\nimport { useChartMessages } from \"./chart-messages\";\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 chartMessages = useChartMessages();\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} · ${chartMessages().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} · {chartMessages().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={`${chartMessages().chartRemoveComparison}: ${label(reference())}`}\n                >\n                  {chartMessages().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              {chartMessages().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> {chartMessages().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> {chartMessages().chartReference}: {label(reference())}\n                </>\n              }\n            />\n          </div>\n        )}\n      </Show>\n    </Paper>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/content/ChartFilterControls.js

@@ -3,14 +3,18 @@ import { createComponent as _$createComponent } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
 import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
-var _tmpl$ = ["<div class=\"k2b-chart-explorer__dimension\" role=\"group\"", ">", "<output class=\"k2b-chart-explorer__dimension-value\" for=\"", "\">", "</output><div id=\"", "\" class=\"k2b-chart-explorer__steps\">", "</div></div>"],
-  _tmpl$2 = ["<div class=\"k2b-chart-explorer__legend\">", "<div class=\"k2b-chart-explorer__status\" role=\"status\">", "", "</div></div>"],
-  _tmpl$3 = ["<span", ">", "</span>"];
+var _tmpl$ = ["<div class=\"k2b-chart-explorer__dimension\" role=\"group\"", ">", "<output class=\"k2b-chart-explorer__dimension-value\" for=\"", "\"", "><span aria-hidden=\"true\">", "</span><span>", "</span></output><div id=\"", "\" class=\"k2b-chart-explorer__steps\">", "</div></div>"],
+  _tmpl$2 = "<i class=\"ti ti-pin\" aria-hidden=\"true\"></i>",
+  _tmpl$3 = ["<span>", "</span>"],
+  _tmpl$4 = "<i class=\"ti ti-x\" aria-hidden=\"true\"></i>",
+  _tmpl$5 = ["<div class=\"k2b-chart-explorer__legend\">", "", "<div class=\"k2b-chart-explorer__status\" role=\"status\">", "", "</div></div>"],
+  _tmpl$6 = ["<span", ">", "</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";
+import { useChartMessages } from "./chart-messages";
 /** Shared controls for a standalone explorer or an atomic group of charts. */
 export function ChartFilterControls(props) {
   const validateOptions = () => {
@@ -22,10 +26,13 @@ export function ChartFilterControls(props) {
   validateOptions();
   createEffect(validateOptions);
   const messages = useUiMessages();
+  const chartMessages = useChartMessages();
   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 ?? "";
+  // The step name reserves the width of the longest one, so stepping never resizes the slider under the finger.
+  const widestStep = () => props.steps?.reduce((widest, step) => [...step.label].length > [...widest].length ? step.label : widest, "") ?? "";
   return [_$createComponent(Show, {
     get when() {
       return props.steps?.length;
@@ -60,21 +67,21 @@ export function ChartFilterControls(props) {
             step: step.key
           });
         }
-      })), `${_$escape(id, true)}-dimension`, _$escape(stepLabel(props.request.step)), `${_$escape(id, true)}-steps`, _$escape(_$createComponent(For, {
+      })), `${_$escape(id, true)}-dimension`, _$ssrAttribute("title", _$escape(stepLabel(props.request.step), true), false), _$escape(widestStep()), _$escape(stepLabel(props.request.step)), `${_$escape(id, true)}-steps`, _$escape(_$createComponent(For, {
         get each() {
           return props.steps;
         },
-        children: step => _$ssr(_tmpl$3, _$ssrAttribute("data-current", step.key === props.request.step ? "true" : _$escape(undefined, true), false), _$escape(step.label))
+        children: step => _$ssr(_tmpl$6, _$ssrAttribute("data-current", step.key === props.request.step ? "true" : _$escape(undefined, true), false), _$escape(step.label))
       })));
     }
-  }), _$ssr(_tmpl$2, _$escape(_$createComponent(Show, {
+  }), _$ssr(_tmpl$5, _$escape(_$createComponent(Show, {
     get when() {
       return props.series?.length;
     },
     get children() {
       return _$createComponent(FilterChip, {
         get label() {
-          return messages().chartSeries;
+          return props.seriesLabel ?? chartMessages().chartSeries;
         },
         icon: "ti ti-chart-dots",
         get disabled() {
@@ -105,6 +112,43 @@ export function ChartFilterControls(props) {
         })
       });
     }
+  })), _$escape(_$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!props.compare)() && props.steps?.length;
+    },
+    get children() {
+      return _$createComponent(Button, {
+        variant: "secondary",
+        "class": "k2b-chart-explorer__pin",
+        get disabled() {
+          return props.disabled || props.request.referenceStep === undefined && props.request.step === undefined;
+        },
+        get ["aria-label"]() {
+          return _$memo(() => props.request.referenceStep === undefined)() ? undefined : `${chartMessages().chartRemoveComparison}: ${stepLabel(props.request.referenceStep)}`;
+        },
+        onClick: () => props.onRequest({
+          ...props.request,
+          referenceStep: props.request.referenceStep === undefined ? props.request.step : undefined
+        }),
+        get children() {
+          return [_$createComponent(Show, {
+            get when() {
+              return props.request.referenceStep === undefined;
+            },
+            get children() {
+              return _$ssr(_tmpl$2);
+            }
+          }), _$ssr(_tmpl$3, props.request.referenceStep === undefined ? _$escape(chartMessages().chartPinReference) : `${_$escape(chartMessages().chartReference)}: ${_$escape(stepLabel(props.request.referenceStep))}`), _$createComponent(Show, {
+            get when() {
+              return props.request.referenceStep !== undefined;
+            },
+            get children() {
+              return _$ssr(_tmpl$4);
+            }
+          })];
+        }
+      });
+    }
   })), _$escape(_$createComponent(Show, {
     get when() {
       return props.failed;
@@ -126,7 +170,7 @@ export function ChartFilterControls(props) {
       return props.failed;
     },
     get children() {
-      return ["· ", messages().chartPreviousData, _$createComponent(Show, {
+      return ["· ", chartMessages().chartPreviousData, _$createComponent(Show, {
         get when() {
           return props.steps?.length;
         },