@d3plus/docs 3.0.8 → 3.0.9

package/args/core/charts/Plot.args.jsx

@@ -281,11 +281,11 @@ export const argTypes = assign(
       control: {
         type: "object"
       },
-      defaultValue: "assign(this._shapeConfig, {Area: {label: (d, i) => this._stacked ? this._drawLabel(d, i) : false, labelBounds: (d, i, aes) => {\n  let r = largestRect(aes.points, {\n      angle: range(-20, 20, 5)\n  });\n  if (!r || r.height < 20 || r.width < 50) r = largestRect(aes.points, {\n      angle: range(-80, 80, 5)\n  });\n  if (!r) return null;\n  const x = min(aes.points, (d)=>d[0]);\n  const y = max(aes.points.filter((d)=>d[0] === x), (d)=>d[1]);\n  return {\n      angle: r.angle,\n      width: r.width,\n      height: r.height,\n      x: r.cx - r.width / 2 - x,\n      y: r.cy - r.height / 2 - y\n  };\n}, labelConfig: {fontMin: 6, fontResize: true, padding: 10}}, ariaLabel: (d, i) => {\n  let ariaLabelStr = \"\";\n  if (d.nested) ariaLabelStr = `${this._drawLabel(d.data, d.i)}`;\n  else {\n      ariaLabelStr = `${this._drawLabel(d, i)}`;\n      if (this._x(d, i) !== undefined) ariaLabelStr += `, x: ${this._x(d, i)}`;\n      if (this._y(d, i) !== undefined) ariaLabelStr += `, y: ${this._y(d, i)}`;\n      if (this._x2(d, i) !== undefined) ariaLabelStr += `, x2: ${this._x2(d, i)}`;\n      if (this._y2(d, i) !== undefined) ariaLabelStr += `, y2: ${this._y2(d, i)}`;\n  }\n  return `${ariaLabelStr}.`;\n}, Bar: {labelBounds(, , ) {\n{\n  const padding = 1;\n  const width = this._discrete === \"y\" ? \"width\" : \"height\";\n  const height = this._discrete === \"y\" ? \"height\" : \"width\";\n  const other = this._discrete.charAt(0) === \"x\" ? \"y\" : \"x\";\n  const invert = other === \"y\";\n  const nonDiscrete = this._discrete.replace(this._discrete.charAt(0), other);\n  const range = this[`_${nonDiscrete}Axis`]._d3Scale.range();\n  const space = Math.abs(range[1] - range[0]);\n  const negative = this[`_${nonDiscrete}`](d, i) < 0;\n  if (outside.bind(this)(d, i)) {\n      return {\n          [width]: space - s[width],\n          [height]: s[height],\n          x: invert ? -s.width / 2 : negative ? -space : s.width + padding,\n          y: invert ? negative ? s.height + padding : -space : -s.height / 2 + 1\n      };\n  }\n  return {\n      [width]: s[width],\n      [height]: s[height],\n      x: invert ? -s.width / 2 : negative ? this._stacked ? padding - s.width : padding - s.width : -padding,\n      y: invert ? negative ? this._stacked ? padding : padding : -s.height + padding : -s.height / 2 + padding\n  };\n}\n}, labelConfig: {fontMax: 16, fontMin: 6, fontResize: true, fontColor(, ) {\n{\n  return outside.bind(this)(d, i) ? this._backgroundConfig.fill === \"transparent\" ? colorDefaults.dark : colorContrast(this._backgroundConfig.fill) : colorContrast(typeof this._shapeConfig.fill === \"function\" ? this._shapeConfig.fill(d, i) : this._shapeConfig.fill);\n}\n}, fontStroke(, ) {\n{\n  return outside.bind(this)(d, i) ? this._backgroundConfig.fill === \"transparent\" ? colorDefaults.dark : colorContrast(this._backgroundConfig.fill) : \"transparent\";\n}\n}, fontStrokeWidth(, ) {\n{\n  return outside.bind(this)(d, i) ? 0.1 : 0;\n}\n}, padding: 3, textAnchor(, ) {\n{\n  const other = this._discrete.charAt(0) === \"x\" ? \"y\" : \"x\";\n  const invert = other === \"y\";\n  const nonDiscrete = this._discrete.replace(this._discrete.charAt(0), other);\n  const negative = this[`_${nonDiscrete}`](d, i) < 0;\n  const anchor = invert ? \"middle\" : outside.bind(this)(d, i) ? negative ? \"end\" : \"start\" : negative ? \"start\" : \"end\";\n  return rtl() ? anchor === \"start\" ? \"end\" : anchor === \"end\" ? \"start\" : anchor : anchor;\n}\n}, verticalAlign(, ) {\n{\n  const other = this._discrete.charAt(0) === \"x\" ? \"y\" : \"x\";\n  const invert = other === \"y\";\n  const nonDiscrete = this._discrete.replace(this._discrete.charAt(0), other);\n  const negative = this[`_${nonDiscrete}`](d, i) < 0;\n  return invert ? outside.bind(this)(d, i) ? negative ? \"top\" : \"bottom\" : negative ? \"bottom\" : \"top\" : \"middle\";\n}\n}}}, Circle: {r: defaultSize.bind(this)}, Line: {curve: () => this._discrete ? `monotone${this._discrete.charAt(0).toUpperCase()}` : linear, fill: none, labelConfig: {fontColor: (d, i) => {\n  const c = typeof this._shapeConfig.Line.stroke === \"function\" ? this._shapeConfig.Line.stroke(d, i) : this._shapeConfig.Line.stroke;\n  return colorLegible(c);\n}, fontResize: false, padding: 5, textAnchor: start, verticalAlign: middle}, strokeWidth: 2}, Rect: {height: (d) => defaultSize.bind(this)(d) * 2, width: (d) => defaultSize.bind(this)(d) * 2}})",
+      defaultValue: "assign(this._shapeConfig, {Area: {label: (d, i) => (this._stacked ? this._drawLabel(d, i) : false), labelBounds: (d, i, aes) => {\n  let r = largestRect(aes.points, {\n      angle: range(-20, 20, 5)\n  });\n  if (!r || r.height < 20 || r.width < 50) r = largestRect(aes.points, {\n      angle: range(-80, 80, 5)\n  });\n  if (!r) return null;\n  const x = min(aes.points, (d)=>d[0]);\n  const y = max(aes.points.filter((d)=>d[0] === x), (d)=>d[1]);\n  return {\n      angle: r.angle,\n      width: r.width,\n      height: r.height,\n      x: r.cx - r.width / 2 - x,\n      y: r.cy - r.height / 2 - y\n  };\n}, labelConfig: {fontMin: 6, fontResize: true, padding: 10}}, ariaLabel: (d, i) => {\n  let ariaLabelStr = \"\";\n  if (d.nested) ariaLabelStr = `${this._drawLabel(d.data, d.i)}`;\n  else {\n      ariaLabelStr = `${this._drawLabel(d, i)}`;\n      if (this._x(d, i) !== undefined) ariaLabelStr += `, x: ${this._x(d, i)}`;\n      if (this._y(d, i) !== undefined) ariaLabelStr += `, y: ${this._y(d, i)}`;\n      if (this._x2(d, i) !== undefined) ariaLabelStr += `, x2: ${this._x2(d, i)}`;\n      if (this._y2(d, i) !== undefined) ariaLabelStr += `, y2: ${this._y2(d, i)}`;\n  }\n  return `${ariaLabelStr}.`;\n}, Bar: {labelBounds(, , ) {\n{\n  const padding = 1;\n  const width = this._discrete === \"y\" ? \"width\" : \"height\";\n  const height = this._discrete === \"y\" ? \"height\" : \"width\";\n  const other = this._discrete.charAt(0) === \"x\" ? \"y\" : \"x\";\n  const invert = other === \"y\";\n  const nonDiscrete = this._discrete.replace(this._discrete.charAt(0), other);\n  const range = this[`_${nonDiscrete}Axis`]._d3Scale.range();\n  const space = Math.abs(range[1] - range[0]);\n  const negative = this[`_${nonDiscrete}`](d, i) < 0;\n  if (outside.bind(this)(d, i)) {\n      return {\n          [width]: space - s[width],\n          [height]: s[height],\n          x: invert ? -s.width / 2 : negative ? -space : s.width + padding,\n          y: invert ? negative ? s.height + padding : -space : -s.height / 2 + 1\n      };\n  }\n  return {\n      [width]: s[width],\n      [height]: s[height],\n      x: invert ? -s.width / 2 : negative ? this._stacked ? padding - s.width : padding - s.width : -padding,\n      y: invert ? negative ? this._stacked ? padding : padding : -s.height + padding : -s.height / 2 + padding\n  };\n}\n}, labelConfig: {fontMax: 16, fontMin: 6, fontResize: true, fontColor(, ) {\n{\n  return outside.bind(this)(d, i) ? this._backgroundConfig.fill === \"transparent\" ? colorDefaults.dark : colorContrast(this._backgroundConfig.fill) : colorContrast(typeof this._shapeConfig.fill === \"function\" ? this._shapeConfig.fill(d, i) : this._shapeConfig.fill);\n}\n}, fontStroke(, ) {\n{\n  return outside.bind(this)(d, i) ? this._backgroundConfig.fill === \"transparent\" ? colorDefaults.dark : colorContrast(this._backgroundConfig.fill) : \"transparent\";\n}\n}, fontStrokeWidth(, ) {\n{\n  return outside.bind(this)(d, i) ? 0.1 : 0;\n}\n}, padding: 3, textAnchor(, ) {\n{\n  const other = this._discrete.charAt(0) === \"x\" ? \"y\" : \"x\";\n  const invert = other === \"y\";\n  const nonDiscrete = this._discrete.replace(this._discrete.charAt(0), other);\n  const negative = this[`_${nonDiscrete}`](d, i) < 0;\n  const anchor = invert ? \"middle\" : outside.bind(this)(d, i) ? negative ? \"end\" : \"start\" : negative ? \"start\" : \"end\";\n  return rtl() ? anchor === \"start\" ? \"end\" : anchor === \"end\" ? \"start\" : anchor : anchor;\n}\n}, verticalAlign(, ) {\n{\n  const other = this._discrete.charAt(0) === \"x\" ? \"y\" : \"x\";\n  const invert = other === \"y\";\n  const nonDiscrete = this._discrete.replace(this._discrete.charAt(0), other);\n  const negative = this[`_${nonDiscrete}`](d, i) < 0;\n  return invert ? outside.bind(this)(d, i) ? negative ? \"top\" : \"bottom\" : negative ? \"bottom\" : \"top\" : \"middle\";\n}\n}}}, Circle: {r: defaultSize.bind(this)}, Line: {curve: () => this._discrete ? `monotone${this._discrete.charAt(0).toUpperCase()}` : linear, fill: none, labelConfig: {fontColor: (d, i) => {\n  const c = typeof this._shapeConfig.Line.stroke === \"function\" ? this._shapeConfig.Line.stroke(d, i) : this._shapeConfig.Line.stroke;\n  return colorLegible(c);\n}, fontResize: false, padding: 5, textAnchor: start, verticalAlign: middle}, strokeWidth: 2}, Rect: {height: (d) => defaultSize.bind(this)(d) * 2, width: (d) => defaultSize.bind(this)(d) * 2}})",
       description: "If *value* is specified, sets the config method for each shape and returns the current class instance.",
       table: {
         defaultValue: {
-          detail: "assign(this._shapeConfig, {Area: {label: (d, i) => this._stacked ? this._drawLabel(d, i) : false, labelBounds: (d, i, aes) => {\n  let r = largestRect(aes.points, {\n      angle: range(-20, 20, 5)\n  });\n  if (!r || r.height < 20 || r.width < 50) r = largestRect(aes.points, {\n      angle: range(-80, 80, 5)\n  });\n  if (!r) return null;\n  const x = min(aes.points, (d)=>d[0]);\n  const y = max(aes.points.filter((d)=>d[0] === x), (d)=>d[1]);\n  return {\n      angle: r.angle,\n      width: r.width,\n      height: r.height,\n      x: r.cx - r.width / 2 - x,\n      y: r.cy - r.height / 2 - y\n  };\n}, labelConfig: {fontMin: 6, fontResize: true, padding: 10}}, ariaLabel: (d, i) => {\n  let ariaLabelStr = \"\";\n  if (d.nested) ariaLabelStr = `${this._drawLabel(d.data, d.i)}`;\n  else {\n      ariaLabelStr = `${this._drawLabel(d, i)}`;\n      if (this._x(d, i) !== undefined) ariaLabelStr += `, x: ${this._x(d, i)}`;\n      if (this._y(d, i) !== undefined) ariaLabelStr += `, y: ${this._y(d, i)}`;\n      if (this._x2(d, i) !== undefined) ariaLabelStr += `, x2: ${this._x2(d, i)}`;\n      if (this._y2(d, i) !== undefined) ariaLabelStr += `, y2: ${this._y2(d, i)}`;\n  }\n  return `${ariaLabelStr}.`;\n}, Bar: {labelBounds(, , ) {\n{\n  const padding = 1;\n  const width = this._discrete === \"y\" ? \"width\" : \"height\";\n  const height = this._discrete === \"y\" ? \"height\" : \"width\";\n  const other = this._discrete.charAt(0) === \"x\" ? \"y\" : \"x\";\n  const invert = other === \"y\";\n  const nonDiscrete = this._discrete.replace(this._discrete.charAt(0), other);\n  const range = this[`_${nonDiscrete}Axis`]._d3Scale.range();\n  const space = Math.abs(range[1] - range[0]);\n  const negative = this[`_${nonDiscrete}`](d, i) < 0;\n  if (outside.bind(this)(d, i)) {\n      return {\n          [width]: space - s[width],\n          [height]: s[height],\n          x: invert ? -s.width / 2 : negative ? -space : s.width + padding,\n          y: invert ? negative ? s.height + padding : -space : -s.height / 2 + 1\n      };\n  }\n  return {\n      [width]: s[width],\n      [height]: s[height],\n      x: invert ? -s.width / 2 : negative ? this._stacked ? padding - s.width : padding - s.width : -padding,\n      y: invert ? negative ? this._stacked ? padding : padding : -s.height + padding : -s.height / 2 + padding\n  };\n}\n}, labelConfig: {fontMax: 16, fontMin: 6, fontResize: true, fontColor(, ) {\n{\n  return outside.bind(this)(d, i) ? this._backgroundConfig.fill === \"transparent\" ? colorDefaults.dark : colorContrast(this._backgroundConfig.fill) : colorContrast(typeof this._shapeConfig.fill === \"function\" ? this._shapeConfig.fill(d, i) : this._shapeConfig.fill);\n}\n}, fontStroke(, ) {\n{\n  return outside.bind(this)(d, i) ? this._backgroundConfig.fill === \"transparent\" ? colorDefaults.dark : colorContrast(this._backgroundConfig.fill) : \"transparent\";\n}\n}, fontStrokeWidth(, ) {\n{\n  return outside.bind(this)(d, i) ? 0.1 : 0;\n}\n}, padding: 3, textAnchor(, ) {\n{\n  const other = this._discrete.charAt(0) === \"x\" ? \"y\" : \"x\";\n  const invert = other === \"y\";\n  const nonDiscrete = this._discrete.replace(this._discrete.charAt(0), other);\n  const negative = this[`_${nonDiscrete}`](d, i) < 0;\n  const anchor = invert ? \"middle\" : outside.bind(this)(d, i) ? negative ? \"end\" : \"start\" : negative ? \"start\" : \"end\";\n  return rtl() ? anchor === \"start\" ? \"end\" : anchor === \"end\" ? \"start\" : anchor : anchor;\n}\n}, verticalAlign(, ) {\n{\n  const other = this._discrete.charAt(0) === \"x\" ? \"y\" : \"x\";\n  const invert = other === \"y\";\n  const nonDiscrete = this._discrete.replace(this._discrete.charAt(0), other);\n  const negative = this[`_${nonDiscrete}`](d, i) < 0;\n  return invert ? outside.bind(this)(d, i) ? negative ? \"top\" : \"bottom\" : negative ? \"bottom\" : \"top\" : \"middle\";\n}\n}}}, Circle: {r: defaultSize.bind(this)}, Line: {curve: () => this._discrete ? `monotone${this._discrete.charAt(0).toUpperCase()}` : linear, fill: none, labelConfig: {fontColor: (d, i) => {\n  const c = typeof this._shapeConfig.Line.stroke === \"function\" ? this._shapeConfig.Line.stroke(d, i) : this._shapeConfig.Line.stroke;\n  return colorLegible(c);\n}, fontResize: false, padding: 5, textAnchor: start, verticalAlign: middle}, strokeWidth: 2}, Rect: {height: (d) => defaultSize.bind(this)(d) * 2, width: (d) => defaultSize.bind(this)(d) * 2}})",
+          detail: "assign(this._shapeConfig, {Area: {label: (d, i) => (this._stacked ? this._drawLabel(d, i) : false), labelBounds: (d, i, aes) => {\n  let r = largestRect(aes.points, {\n      angle: range(-20, 20, 5)\n  });\n  if (!r || r.height < 20 || r.width < 50) r = largestRect(aes.points, {\n      angle: range(-80, 80, 5)\n  });\n  if (!r) return null;\n  const x = min(aes.points, (d)=>d[0]);\n  const y = max(aes.points.filter((d)=>d[0] === x), (d)=>d[1]);\n  return {\n      angle: r.angle,\n      width: r.width,\n      height: r.height,\n      x: r.cx - r.width / 2 - x,\n      y: r.cy - r.height / 2 - y\n  };\n}, labelConfig: {fontMin: 6, fontResize: true, padding: 10}}, ariaLabel: (d, i) => {\n  let ariaLabelStr = \"\";\n  if (d.nested) ariaLabelStr = `${this._drawLabel(d.data, d.i)}`;\n  else {\n      ariaLabelStr = `${this._drawLabel(d, i)}`;\n      if (this._x(d, i) !== undefined) ariaLabelStr += `, x: ${this._x(d, i)}`;\n      if (this._y(d, i) !== undefined) ariaLabelStr += `, y: ${this._y(d, i)}`;\n      if (this._x2(d, i) !== undefined) ariaLabelStr += `, x2: ${this._x2(d, i)}`;\n      if (this._y2(d, i) !== undefined) ariaLabelStr += `, y2: ${this._y2(d, i)}`;\n  }\n  return `${ariaLabelStr}.`;\n}, Bar: {labelBounds(, , ) {\n{\n  const padding = 1;\n  const width = this._discrete === \"y\" ? \"width\" : \"height\";\n  const height = this._discrete === \"y\" ? \"height\" : \"width\";\n  const other = this._discrete.charAt(0) === \"x\" ? \"y\" : \"x\";\n  const invert = other === \"y\";\n  const nonDiscrete = this._discrete.replace(this._discrete.charAt(0), other);\n  const range = this[`_${nonDiscrete}Axis`]._d3Scale.range();\n  const space = Math.abs(range[1] - range[0]);\n  const negative = this[`_${nonDiscrete}`](d, i) < 0;\n  if (outside.bind(this)(d, i)) {\n      return {\n          [width]: space - s[width],\n          [height]: s[height],\n          x: invert ? -s.width / 2 : negative ? -space : s.width + padding,\n          y: invert ? negative ? s.height + padding : -space : -s.height / 2 + 1\n      };\n  }\n  return {\n      [width]: s[width],\n      [height]: s[height],\n      x: invert ? -s.width / 2 : negative ? this._stacked ? padding - s.width : padding - s.width : -padding,\n      y: invert ? negative ? this._stacked ? padding : padding : -s.height + padding : -s.height / 2 + padding\n  };\n}\n}, labelConfig: {fontMax: 16, fontMin: 6, fontResize: true, fontColor(, ) {\n{\n  return outside.bind(this)(d, i) ? this._backgroundConfig.fill === \"transparent\" ? colorDefaults.dark : colorContrast(this._backgroundConfig.fill) : colorContrast(typeof this._shapeConfig.fill === \"function\" ? this._shapeConfig.fill(d, i) : this._shapeConfig.fill);\n}\n}, fontStroke(, ) {\n{\n  return outside.bind(this)(d, i) ? this._backgroundConfig.fill === \"transparent\" ? colorDefaults.dark : colorContrast(this._backgroundConfig.fill) : \"transparent\";\n}\n}, fontStrokeWidth(, ) {\n{\n  return outside.bind(this)(d, i) ? 0.1 : 0;\n}\n}, padding: 3, textAnchor(, ) {\n{\n  const other = this._discrete.charAt(0) === \"x\" ? \"y\" : \"x\";\n  const invert = other === \"y\";\n  const nonDiscrete = this._discrete.replace(this._discrete.charAt(0), other);\n  const negative = this[`_${nonDiscrete}`](d, i) < 0;\n  const anchor = invert ? \"middle\" : outside.bind(this)(d, i) ? negative ? \"end\" : \"start\" : negative ? \"start\" : \"end\";\n  return rtl() ? anchor === \"start\" ? \"end\" : anchor === \"end\" ? \"start\" : anchor : anchor;\n}\n}, verticalAlign(, ) {\n{\n  const other = this._discrete.charAt(0) === \"x\" ? \"y\" : \"x\";\n  const invert = other === \"y\";\n  const nonDiscrete = this._discrete.replace(this._discrete.charAt(0), other);\n  const negative = this[`_${nonDiscrete}`](d, i) < 0;\n  return invert ? outside.bind(this)(d, i) ? negative ? \"top\" : \"bottom\" : negative ? \"bottom\" : \"top\" : \"middle\";\n}\n}}}, Circle: {r: defaultSize.bind(this)}, Line: {curve: () => this._discrete ? `monotone${this._discrete.charAt(0).toUpperCase()}` : linear, fill: none, labelConfig: {fontColor: (d, i) => {\n  const c = typeof this._shapeConfig.Line.stroke === \"function\" ? this._shapeConfig.Line.stroke(d, i) : this._shapeConfig.Line.stroke;\n  return colorLegible(c);\n}, fontResize: false, padding: 5, textAnchor: start, verticalAlign: middle}, strokeWidth: 2}, Rect: {height: (d) => defaultSize.bind(this)(d) * 2, width: (d) => defaultSize.bind(this)(d) * 2}})",
           summary: "function"
         }
       },
@@ -423,11 +423,11 @@ export const argTypes = assign(
       control: {
         type: "object"
       },
-      defaultValue: "assign(this._timelineConfig, {brushing: true, brushMin: () => this._xTime || this._yTime || this._x2Time || this._y2Time ? 2 : 1})",
+      defaultValue: "assign(this._timelineConfig, {brushMin: () => this._xTime || this._yTime || this._x2Time || this._y2Time ? 2 : 1})",
       description: "If *value* is specified, sets the config method for the timeline and returns the current class instance.",
       table: {
         defaultValue: {
-          detail: "assign(this._timelineConfig, {brushing: true, brushMin: () => this._xTime || this._yTime || this._x2Time || this._y2Time ? 2 : 1})",
+          detail: "assign(this._timelineConfig, {brushMin: () => this._xTime || this._yTime || this._x2Time || this._y2Time ? 2 : 1})",
           summary: "function"
         }
       },

package/args/core/charts/Viz.args.jsx

@@ -1065,11 +1065,11 @@ export const argTypes = assign(
       control: {
         type: "object"
       },
-      defaultValue: "{brushing: false, padding: 5}",
+      defaultValue: "{padding: 5}",
       description: "If *value* is specified, sets the config method for the timeline and returns the current class instance.",
       table: {
         defaultValue: {
-          summary: "{brushing: false, padding: 5}"
+          summary: "{padding: 5}"
         }
       },
       type: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d3plus/docs",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "description": "Documentation and examples for the d3plus visualization library.",
   "license": "MIT",
   "homepage": "https://d3plus.org",
@@ -16,11 +16,11 @@
     "dev:local": "storybook dev --docs --ci --no-version-updates --port=4000"
   },
   "dependencies": {
-    "@d3plus/core": "3.0.8",
-    "@d3plus/dom": "3.0.8",
-    "@d3plus/format": "3.0.8",
-    "@d3plus/locales": "3.0.8",
-    "@d3plus/react": "3.0.8",
+    "@d3plus/core": "3.0.9",
+    "@d3plus/dom": "3.0.9",
+    "@d3plus/format": "3.0.9",
+    "@d3plus/locales": "3.0.9",
+    "@d3plus/react": "3.0.9",
     "@types/react": "^19.1.0",
     "next": "^15.2.4",
     "react": "^18.2.0",