@d3plus/docs 3.0.4 → 3.0.6

package/args/core/utils/BaseClass.args.jsx

@@ -11,6 +11,7 @@ export const argTypes = {
     control: {
       type: "object"
     },
+    description: "If *value* is specified, sets the methods that correspond to the key/value pairs and returns this class. If *value* is not specified, returns the current configuration.",
     table: {
       defaultValue: {
         summary: "undefined"
@@ -26,6 +27,7 @@ export const argTypes = {
       type: "object"
     },
     defaultValue: "\"en-US\"",
+    description: "Sets the locale used for all text and number formatting. This method supports the locales defined in [d3plus-format](https://github.com/d3plus/d3plus-format/blob/master/src/locale.js). The locale can be defined as a complex Object (like in d3plus-format), a locale code (like \"en-US\"), or a 2-digit language code (like \"en\"). If a 2-digit code is provided, the \"findLocale\" function is used to identify the most approximate locale from d3plus-format.",
     table: {
       defaultValue: {
         summary: "\"en-US\""
@@ -40,6 +42,7 @@ export const argTypes = {
     control: {
       type: "text"
     },
+    description: "Adds or removes a *listener* to each object for the specified event *typenames*. If a *listener* is not specified, returns the currently assigned listener for the specified event *typename*. Mirrors the core [d3-selection](https://github.com/d3/d3-selection#selection_on) behavior.",
     table: {
       defaultValue: {
         summary: "undefined"
@@ -52,6 +55,7 @@ export const argTypes = {
   },
   translate: {
     control: {},
+    description: "Defines how informational text strings should be displayed. By default, this function will try to find the string in question (which is the first argument provided to this function) inside of an internally managed translation Object. If you'd like to override to use custom text, simply pass this method your own custom formatting function.",
     table: {
       defaultValue: {
         summary: "undefined"

package/args/core/utils/accessor.args.jsx

@@ -7,9 +7,7 @@ import React from "react";
 
 export const argTypes = {
   def: {
-    control: {
-      type: "*"
-    },
+    control: {},
     description: "A default value to be returned if the key is not present.",
     table: {
       defaultValue: {

package/args/core/utils/constant.args.jsx

@@ -8,7 +8,7 @@ import React from "react";
 export const argTypes = {
   value: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The value to be returned from the function.",
     table: {

package/args/data/dataConcat.args.jsx

@@ -8,7 +8,7 @@ import React from "react";
 export const argTypes = {
   arrayOfArray: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "Array of elements",
     table: {

package/args/data/dataLoad.args.jsx

@@ -49,7 +49,7 @@ export const argTypes = {
   },
   path: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The path to the file or url to be loaded. Also support array of paths strings. If an Array of objects is passed, the xhr request logic is skipped.",
     table: {

package/args/data/isData.args.jsx

@@ -7,9 +7,7 @@ import React from "react";
 
 export const argTypes = {
   dataItem: {
-    control: {
-      type: "*"
-    },
+    control: {},
     description: "The value to be tested",
     table: {
       defaultValue: {

package/args/data/merge.args.jsx

@@ -23,7 +23,7 @@ export const argTypes = {
   },
   objects: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The Array of objects to be merged together.",
     table: {

package/args/data/unique.args.jsx

@@ -21,7 +21,7 @@ export const argTypes = {
   },
   arr: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The Array of objects to be filtered.",
     table: {

package/args/dom/attrize.args.jsx

@@ -22,9 +22,7 @@ export const argTypes = {
     }
   },
   elem: {
-    control: {
-      type: "d3selection"
-    },
+    control: {},
     description: "The D3 element to apply the styles to.",
     table: {
       defaultValue: {

package/args/dom/elem.args.jsx

@@ -86,9 +86,7 @@ export const argTypes = {
     }
   },
   "params.parent": {
-    control: {
-      type: "d3selection"
-    },
+    control: {},
     defaultValue: "d3.select(\"body\")",
     description: "The parent element for this new element to be appended to.",
     table: {

package/args/dom/fontExists.args.jsx

@@ -8,7 +8,7 @@ import React from "react";
 export const argTypes = {
   font: {
     control: {
-      type: "text"
+      type: "object"
     },
     description: "Can be either a valid CSS font-family string (single or comma-separated names) or an Array of string names.",
     table: {

package/args/dom/isObject.args.jsx

@@ -7,9 +7,7 @@ import React from "react";
 
 export const argTypes = {
   item: {
-    control: {
-      type: "*"
-    },
+    control: {},
     table: {
       defaultValue: {
         summary: "undefined"

package/args/dom/parseSides.args.jsx

@@ -8,7 +8,7 @@ import React from "react";
 export const argTypes = {
   sides: {
     control: {
-      type: "text"
+      type: "number"
     },
     description: "The CSS shorthand string to expand.",
     table: {

package/args/dom/stylize.args.jsx

@@ -7,9 +7,7 @@ import React from "react";
 
 export const argTypes = {
   elem: {
-    control: {
-      type: "d3selection"
-    },
+    control: {},
     description: "The D3 element to apply the styles to.",
     table: {
       defaultValue: {

package/args/dom/textWidth.args.jsx

@@ -23,7 +23,7 @@ export const argTypes = {
   },
   text: {
     control: {
-      type: "text"
+      type: "object"
     },
     description: "Can be either a single string or an array of strings to analyze.",
     table: {

package/args/export/saveElement.args.jsx

@@ -7,9 +7,7 @@ import React from "react";
 
 export const argTypes = {
   elem: {
-    control: {
-      type: "htmlelement"
-    },
+    control: {},
     description: "A single element to be saved to one file.",
     table: {
       defaultValue: {

package/args/format/formatDate.args.jsx

@@ -7,9 +7,7 @@ import React from "react";
 
 export const argTypes = {
   d: {
-    control: {
-      type: "date"
-    },
+    control: {},
     description: "The date string to be formatted.",
     table: {
       defaultValue: {
@@ -23,7 +21,7 @@ export const argTypes = {
   },
   dataArray: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The full array of ordered Date Objects.",
     table: {

package/args/math/closest.args.jsx

@@ -8,7 +8,7 @@ import React from "react";
 export const argTypes = {
   arr: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The array of values to test against.",
     table: {

package/args/math/largestRect.args.jsx

@@ -24,7 +24,7 @@ export const argTypes = {
   },
   poly: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "An Array of points that represent a polygon.",
     table: {

package/args/math/lineIntersection.args.jsx

@@ -8,7 +8,7 @@ import React from "react";
 export const argTypes = {
   p1: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The first point of the first line segment, which should always be an `[x, y]` formatted Array.",
     table: {
@@ -23,7 +23,7 @@ export const argTypes = {
   },
   p2: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The first point of the second line segment, which should always be an `[x, y]` formatted Array.",
     table: {
@@ -38,7 +38,7 @@ export const argTypes = {
   },
   q1: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The second point of the first line segment, which should always be an `[x, y]` formatted Array.",
     table: {
@@ -53,7 +53,7 @@ export const argTypes = {
   },
   q2: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The second point of the second line segment, which should always be an `[x, y]` formatted Array.",
     table: {

package/args/math/pointDistance.args.jsx

@@ -8,7 +8,7 @@ import React from "react";
 export const argTypes = {
   p1: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The first point, which should always be an `[x, y]` formatted Array.",
     table: {
@@ -23,7 +23,7 @@ export const argTypes = {
   },
   p2: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The second point, which should always be an `[x, y]` formatted Array.",
     table: {

package/args/math/pointDistanceSquared.args.jsx

@@ -8,7 +8,7 @@ import React from "react";
 export const argTypes = {
   p1: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The first point, which should always be an `[x, y]` formatted Array.",
     table: {
@@ -23,7 +23,7 @@ export const argTypes = {
   },
   p2: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The second point, which should always be an `[x, y]` formatted Array.",
     table: {

package/args/math/pointRotate.args.jsx

@@ -23,7 +23,7 @@ export const argTypes = {
   },
   origin: {
     control: {
-      type: "array"
+      type: "object"
     },
     defaultValue: "[0, 0]",
     description: "The origin point of the rotation, which should always be an `[x, y]` formatted Array.",
@@ -39,7 +39,7 @@ export const argTypes = {
   },
   p: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The point to be rotated, which should always be an `[x, y]` formatted Array.",
     table: {

package/args/math/polygonInside.args.jsx

@@ -8,7 +8,7 @@ import React from "react";
 export const argTypes = {
   polyA: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "An Array of `[x, y]` points to be used as the inner polygon, checking if it is inside polyA.",
     table: {
@@ -23,7 +23,7 @@ export const argTypes = {
   },
   polyB: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "An Array of `[x, y]` points to be used as the containing polygon.",
     table: {

package/args/math/polygonRayCast.args.jsx

@@ -24,7 +24,7 @@ export const argTypes = {
   },
   origin: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The origin point of the ray to be cast, which should be an `[x, y]` formatted Array.",
     table: {
@@ -39,7 +39,7 @@ export const argTypes = {
   },
   poly: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The polygon to test against, which should be an `[x, y]` formatted Array.",
     table: {

package/args/math/polygonRotate.args.jsx

@@ -23,7 +23,7 @@ export const argTypes = {
   },
   origin: {
     control: {
-      type: "array"
+      type: "object"
     },
     defaultValue: "[0, 0]",
     description: "The origin point of the rotation, which should be an `[x, y]` formatted Array.",
@@ -39,7 +39,7 @@ export const argTypes = {
   },
   poly: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The polygon to be rotated, which should be an Array of `[x, y]` values.",
     table: {

package/args/math/segmentBoxContains.args.jsx

@@ -8,7 +8,7 @@ import React from "react";
 export const argTypes = {
   p: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The point to be checked, which should always be an `[x, y]` formatted Array.",
     table: {
@@ -23,7 +23,7 @@ export const argTypes = {
   },
   s1: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The first point of the line segment to be used for the bounding box, which should always be an `[x, y]` formatted Array.",
     table: {
@@ -38,7 +38,7 @@ export const argTypes = {
   },
   s2: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The second point of the line segment to be used for the bounding box, which should always be an `[x, y]` formatted Array.",
     table: {

package/args/math/segmentsIntersect.args.jsx

@@ -8,7 +8,7 @@ import React from "react";
 export const argTypes = {
   p1: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The first point of the first line segment, which should always be an `[x, y]` formatted Array.",
     table: {
@@ -23,7 +23,7 @@ export const argTypes = {
   },
   p2: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The first point of the second line segment, which should always be an `[x, y]` formatted Array.",
     table: {
@@ -38,7 +38,7 @@ export const argTypes = {
   },
   q1: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The second point of the first line segment, which should always be an `[x, y]` formatted Array.",
     table: {
@@ -53,7 +53,7 @@ export const argTypes = {
   },
   q2: {
     control: {
-      type: "array"
+      type: "object"
     },
     description: "The second point of the second line segment, which should always be an `[x, y]` formatted Array.",
     table: {

package/helpers/configify.js

@@ -4,15 +4,7 @@
  */
 export default function(args, argTypes) {
   return Object.keys(args).reduce((acc, key) => {
-   const _acc = acc;
-   if (
-     args[key] !== undefined && argTypes[key] !== undefined &&
-     (argTypes[key].defaultValue === undefined ||
-        typeof argTypes[key].defaultValue === "function"
-        ? argTypes[key].defaultValue !== args[key]
-        : JSON.stringify(argTypes[key].defaultValue) !== JSON.stringify(args[key])
-      )
-   ) _acc[key] = args[key];
-   return _acc;
+   if (args[key] !== undefined && argTypes[key] !== undefined) acc[key] = args[key];
+   return acc;
  }, {});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@d3plus/docs",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "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.4",
-    "@d3plus/dom": "3.0.4",
-    "@d3plus/format": "3.0.4",
-    "@d3plus/locales": "3.0.4",
-    "@d3plus/react": "3.0.4",
+    "@d3plus/core": "3.0.6",
+    "@d3plus/dom": "3.0.6",
+    "@d3plus/format": "3.0.6",
+    "@d3plus/locales": "3.0.6",
+    "@d3plus/react": "3.0.6",
     "@types/react": "^19.1.0",
     "next": "^15.2.4",
     "react": "^18.2.0",

package/packages/core/charts/Tree.stories.jsx

@@ -25,3 +25,43 @@ const Template = (args) => <Tree config={configify(args, argTypes)} />;
 // WARNING: do not edit above this line of code directly, it is generated
 // from the source code. Stories below this line can be modified.
 
+export const BasicExample = Template.bind({});
+BasicExample.args = {
+  data: [
+    {parent: "Group 1", id: "alpha"},
+    {parent: "Group 1", id: "beta"},
+    {parent: "Group 1", id: "gamma"},
+    {parent: "Group 2", id: "delta"},
+    {parent: "Group 2", id: "eta"}
+  ],
+  groupBy: ["parent", "id"]
+};
+BasicExample.parameters = {controls: {include: ["groupBy"]}};
+
+export const HorizontalOrientation = Template.bind({});
+HorizontalOrientation.args = {
+  data: [
+    {parent: "Group 1", id: "alpha"},
+    {parent: "Group 1", id: "beta"},
+    {parent: "Group 1", id: "gamma"},
+    {parent: "Group 2", id: "delta"},
+    {parent: "Group 2", id: "eta"}
+  ],
+  groupBy: ["parent", "id"],
+  orient: "horizontal"
+};
+HorizontalOrientation.parameters = {controls: {include: ["orient"]}};
+
+export const ChangingShapes = Template.bind({});
+ChangingShapes.args = {
+  data: [
+    {parent: "Group 1", id: "alpha"},
+    {parent: "Group 1", id: "beta"},
+    {parent: "Group 1", id: "gamma"},
+    {parent: "Group 2", id: "delta"},
+    {parent: "Group 2", id: "eta"}
+  ],
+  groupBy: ["parent", "id"],
+  shape: funcify(d => d.parent === "Group 1" ? "Rect" : "Circle", 'd => d.parent === "Group 1" ? "Rect" : "Circle"')
+};
+ChangingShapes.parameters = {controls: {include: ["shape"]}};