top-level className (#582)

* keep inline stylesheet

* inline stylesheets

* top-level className

* coerce className to string

Co-authored-by: Mike Bostock <[email protected]>

Author: Fil

README.md

@@ -106,6 +106,8 @@ Plot.plot({
 })
 ```
 
+The generated SVG element has a random class name which applies a default stylesheet. Use the top-level **className** option to specify that class name.
+
 ### Scale options
 
 Plot passes data through [scales](https://observablehq.com/@observablehq/plot-scales) as needed before rendering marks. A scale maps abstract values such as time or temperature to visual values such as position or color. Within a given plot, marks share scales. For example, if a plot has two Plot.line marks, both share the same *x* and *y* scales for a consistent representation of data. (Plot does not currently support dual-axis charts, which are [not advised](https://blog.datawrapper.de/dualaxis/).)

src/plot.js

@@ -3,11 +3,14 @@ import {Axes, autoAxisTicks, autoScaleLabels} from "./axes.js";
 import {facets} from "./facet.js";
 import {markify} from "./mark.js";
 import {Scales, autoScaleRange, applyScales, exposeScales, isOrdinalScale} from "./scales.js";
-import {filterStyles, offset} from "./style.js";
+import {filterStyles, maybeClassName, offset} from "./style.js";
 
 export function plot(options = {}) {
   const {facet, style, caption} = options;
 
+  // className for inline styles
+  const className = maybeClassName(options.className);
+
   // When faceting, wrap all marks in a faceting mark.
   if (facet !== undefined) {
     const {marks} = options;
@@ -68,11 +71,8 @@ export function plot(options = {}) {
 
   const {width, height} = dimensions;
 
-  // A unique identifier for this plot, for inline styles.
-  const uid = `plot-${Math.random().toString(16).slice(2)}`;
-
   const svg = create("svg")
-      .attr("class", uid)
+      .attr("class", className)
       .attr("fill", "currentColor")
       .attr("font-family", "system-ui, sans-serif")
       .attr("font-size", 10)
@@ -82,14 +82,14 @@ export function plot(options = {}) {
       .attr("height", height)
       .attr("viewBox", `0 0 ${width} ${height}`)
       .call(svg => svg.append("style").text(`
-        .${uid} {
+        .${className} {
           display: block;
           background: white;
           height: auto;
           height: intrinsic;
           max-width: 100%;
         }
-        .${uid} text {
+        .${className} text {
           white-space: pre;
         }
       `))

src/style.js

@@ -153,3 +153,12 @@ export function filterStyles(index, {fill: F, fillOpacity: FO, stroke: S, stroke
 function none(color) {
   return color == null || color === "none";
 }
+
+const validClassName = /^-?([_a-z]|[\240-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])([_a-z0-9-]|[\240-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*$/;
+
+export function maybeClassName(name) {
+  if (name === undefined) return `plot-${Math.random().toString(16).slice(2)}`;
+  name = `${name}`;
+  if (!validClassName.test(name)) throw new Error(`invalid class name: ${name}`);
+  return name;
+}