more examples, better presentation

Author: Fil

docs/summary-table.md

@@ -12,6 +12,26 @@ SELECT * FROM gaia;
 SELECT * FROM penguins;
 ```
 
+```sql echo
+SELECT a::int
+     , b::int
+     , (a * b)::int as p
+  FROM generate_series(1, 9) as s(a)
+     , generate_series(1, 9) as t(b);
+```
+
+```sql echo
+FROM range(10, 22, 2);
+```
+
+```sql echo
+SELECT range * pi() as pi FROM range(10);
+```
+
+```sql echo
+SELECT cos(range * pi() / 10) as x, sin(range * pi() / 10) as y FROM range(0, 20, 1);
+```
+
 ```js echo
 const sql = DuckDBClient.sql({aapl, penguins, gaia: FileAttachment("/lib/gaia-sample.parquet")});
 ```
@@ -36,7 +56,7 @@ function table(data, options = {}) {
   if (!Array.isArray(data?.schema?.fields)) return container;
 
   // Get the fields as described by Arrow, in the order given (potentially) by the options.
-  const fields = (options.columns?.map(k => data.schema.find(({name}) => name === k)) ?? data.schema.fields).map(({name, type}) => ({name: String(name), type: String(type)}));
+  const fields = (options.columns?.map(k => data.schema.find(({name}) => name === k)) ?? data.schema.fields).map(({name, type}) => ({name: String(name), type: String(type), values: data.getChild(name)}));
 
   const th = d3.select(container).select("thead").selectAll("th").data([{}, ...fields]);
   th.append("div").classed("type", true).html(({type}) => type);
@@ -47,61 +67,84 @@ function table(data, options = {}) {
   </footer>`;
   container.appendChild(footer);
 
-  requestAnimationFrame(() => summaries
-    .filter(({type}) => type)
-    .append(function({name, type}) {
-      return summary(data.getChild(name), type, this.getBoundingClientRect());
-    })
-  );
+  requestAnimationFrame(() => summaries.filter(({type}) => type).append(summary));
   return container;
 }
 
-function summary(values, type, {width = 80, height = 33}) {
+function summary({name, type, values}) {
+  const {width: w, height} = this.getBoundingClientRect();
+  const width = Math.min(200, (w ?? 80) - 10);
   let chart;
-  if (type.startsWith("Float") || type.startsWith("Date")) {
+
+  // Count values, NaN, nulls, distinct
+  // TODO use DuckdB?
+  let max = -Infinity;
+  let min = Infinity;
+  let nulls = 0;
+  const distinct = new Set();
+  const capped = 100; // max number of distinct values to count
+  for (const v of values) {
+    if (v == null) {nulls++; continue;}
+    if (min > v) min = v; // note this works for strings too
+    if (max < v) max = v;
+    if (distinct.size <= capped && !distinct.has(v)) distinct.add(v);
+  }
+
+  if (distinct.size <= 10 || type === "Utf8") {
+    const stackOptions = (type === "Utf8") ? {order: "sum", reverse: true} : {order: "value"};
     chart = Plot.plot({
       width,
       height,
       style: "overflow: visible;",
-      x: {round: true},
+      x: {axis: null},
       y: {axis: null},
       marginLeft: 2,
       marginRight: 2,
       marginTop: 0,
       marginBottom: 13,
       marks: [
-        Plot.rectY(values, Plot.binX(undefined, {fill: "var(--theme-foreground-focus)", inset: -.3})),
-        Plot.axisX({tickSpacing: 41, tickSize: 3, tickPadding: 2, fontSize: 8}),
+        Plot.barX(values, Plot.stackX(stackOptions, Plot.groupZ({x: "count"}, {z: Plot.identity, insetRight: 1, fill: "var(--theme-foreground-focus)"}))),
+        Plot.text(values, Plot.stackX(stackOptions, Plot.groupZ({x: "count", text: "first"}, {z: Plot.identity, fill: "var(--plot-background)"}))),
       ]
     });
-
-    // restore insets where possible
-    const rects = chart.querySelectorAll("rect");
-    if (rects.length < 100) {
-      for (const rect of rects) {
-        rect.setAttribute("x", Math.floor(rect.getAttribute("x")));
-        rect.setAttribute("width", Math.max(1, Math.floor(rect.getAttribute("width")) - 1));
-      }
-    }
   }
-  else if (type === "Utf8") {
+  else {
+    const thresholds = Math.max(10, Math.min(50, d3.thresholdScott(values, min, max))); // TODO optimize thresholdScott
     chart = Plot.plot({
       width,
       height,
       style: "overflow: visible;",
-      x: {axis: null},
+      x: {
+        round: true,
+        nice: true
+      },
       y: {axis: null},
-      marginLeft: 2,
-      marginRight: 2,
+      marginLeft: 9,
+      marginRight: 9,
       marginTop: 0,
       marginBottom: 13,
       marks: [
-        Plot.barX(values, Plot.groupZ({x: "count"}, {z: Plot.identity, insetRight: 1, fill: "var(--theme-foreground-focus)"})),
-        Plot.text(values, Plot.stackX(Plot.groupZ({x: "count", text: "first"}, {z: Plot.identity, fill: "var(--plot-background)"}))),
+        thresholds > 20 ?
+        Plot.areaY(values, Plot.binX(undefined, {
+          fill: "var(--theme-foreground-focus)",
+          thresholds
+        })) :
+        Plot.rectY(values, Plot.binX(undefined, {
+          fill: "var(--theme-foreground-focus)",
+          thresholds,
+          inset: 0,
+          insetRight: 1,
+        })),
+        min * max <= 0 ? Plot.ruleX([0]) : [],
+        Plot.ruleY([0]),
+        Plot.axisX({tickSpacing: 41, tickSize: 3, tickPadding: 2, fontSize: 8, ...(!type.startsWith("Date") && Math.max(Math.abs(min), Math.abs(max)) >= 1e5 && {tickFormat: "s"})}),
       ]
     });
   }
-  return chart ?? html`<span>Unknown type ${type}`;
+  return chart ? html`<div style=${type === "Utf8" ? "" : {
+    position: "absolute",
+    right: 0
+  }}>${chart}` : html`<span>Unknown type ${type}`;
 }
 ```