I'll know it when I see it.
function toolbox(options = {}) {
if (typeof options === "string") options = {specifier: options};
const {open} = options;
return htl.html`<details open=${open} style="max-width: 640px; background: #fffced; box-sizing: border-box; padding: 10px 20px;"><summary style="font-weight: bold; cursor: pointer; outline: none;">Toolbox 🧰 ${Inputs.button("Copy Import", {reduce: () => navigator.clipboard.writeText(`import {toolbox} from "@zachbogart/toolbox"`)})}</summary>
<div style="margin-bottom: -1em;">${md`
---
# 🧰 Toolbox
*"Come prepared."*
---
## 🧹 Using tidyjs for wrangling
~~~js
import { tidy, mutate, ... (a bunch more) } from "@pbeshai/tidyjs"
~~~
${Inputs.button("🧹 Import tidyjs", {reduce: () => navigator.clipboard.writeText(`import {
tidy,addItems,addRows,arrange,sort,complete,count,debug,distinct,expand,fill,filter,fullJoin,groupBy,innerJoin,leftJoin,map,desc,asc,mutate,mutateWithSummary,rename,replaceNully,select,pick,slice,sliceHead,sliceTail,sliceMin,sliceMax,sliceSample,summarize,summarizeAll,summarizeAt,tally,total,totalAll,totalAt,totalIf,transmute,when,deviation,first,last,max,mean,meanRate,median,min,n,nDistinct,sum,variance,rate,cumsum,roll,pivotLonger,pivotWider,fullSeq,fullSeqDate,fullSeqDateISOString,contains,endsWith,everything,matches,negate,numRange,startsWith,TMath,vectorSeq,vectorSeqDate,lead,lag} from "@pbeshai/tidyjs"`)})}
**tidyjs resources**
- [tidy.js Website](https://pbeshai.github.io/tidy/)
- [tidy.js Collection on Observable](https://observablehq.com/collection/@pbeshai/tidy-js)
---
## Common Imports
### 🗄️ Add a Table of Contents
~~~js
import {toc} from "@nebrius/indented-toc"
~~~
${Inputs.button("🗄️ Import toc", {reduce: () => navigator.clipboard.writeText(`import {toc} from "@nebrius/indented-toc"`)})}
Organize notebook sections, also useful for navigating this toolbox.
### 🗒️ Using Tooltips in Plot
~~~js
import {addTooltips} from "@mkfreeman/plot-tooltip"
~~~
${Inputs.button("🗒️ Import addTooltips", {reduce: () => navigator.clipboard.writeText(`import {addTooltips} from "@mkfreeman/plot-tooltip"`)})}
Add a \`title\` to a mark and you are good to go. Can use line break to get non-bolded results, and margins help with possible tooltip clipping near chart borders.
<!--END-->
---
`}</div>
</details>`;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
